icingaweb2/public/css/icinga/responsive.less

/*! Icinga Web 2 | (c) 2016 Icinga Development Team | GPLv2+ */

// Not growing larger than 3840px at 1em=16px right now
@media screen and (min-width: 240em) {
  #header {
    min-width: 240em;
  }

  #main {
    width: 227em;
  }
}

// More than 100em, usually 1600px at 1em=16px
@media screen and (min-width: 100em) {
  html {
    font-family: 'wide-layout';
  }
}

// Up to 1152px at 1em=16px
@media screen and (max-width:72em) {
  html {
    font-family: 'compact-layout';
  }
}

// Up to 752px at 1em=16px
@media screen and (max-width: 47em) {
  html {
    font-family: 'poor-layout';
  }
}

// Up to 576px at 1em=16px, should fit 320px devices
@media screen and (max-width: 36em) {
  html {
    font-family: 'minimal-layout';
  }
}

#layout.compact-layout {
  font-size: 0.875em;
}

#layout.poor-layout {
  font-size: 0.875em;

  #layout.twocols {
    #col1 {
      display: none;
    }

    #main > .container {
      width: 100%;
    }
  }

  .dashboard > div.container {
    width: 100%;
  }
}

#layout:not(.minimal-layout) {
  #mobile-menu-toggle {
    display: none;
  }
}

#layout.minimal-layout {
  #sidebar {
    width: 100%;
    overflow: auto;
  }

  #header-logo-container {
    width: auto;
    height: 4em;
    padding: 0;
    background: inherit;
  }

  #header-logo {
    float: left;
    width: 9em;
    height: 3em;
    margin: .5em 1em;
    background-position: left center;
  }

  #mobile-menu-toggle {
    float: right;
  }

  #sidebar:not(.expanded) #menu {
    display: none;
  }

  #menu {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }

  #content-wrapper {
    flex-direction: column;
  }

  #main {
    flex: 1 1 auto;
    height: 0;
  }

  ul > .selected > a:after,
  ul > .nav-item.active:after {
    display: none;
  }

  .dashboard > div.container {
    width: 100%;
  }
}

// Dashboard

.dashboard > .container {
  padding-right: 0;
  width: 100%;
}

#layout:not(.twocols).default-layout .dashboard > .container:not(:only-child) {
  padding-right: @gutter;
  width: 50%;
}

#layout:not(.twocols).wide-layout .dashboard > .container:not(:only-child) {
  padding-right: @gutter;
  width: 33.33%;
}

// Columns

#layout.twocols #col2 {
  border-left: 1px solid @gray-lighter;
}

#layout.twocols.wide-layout #col2 {
  flex-grow: 2;
}

// Safe areas for iPhone X

#header, #sidebar, #footer {
  padding-left: constant(safe-area-inset-left);
}

#main, #footer {
  padding-right: constant(safe-area-inset-right);
}

#layout.twocols #col2 {
  border-left: 1px solid @gray-lighter;

  &:empty {
    display: flex;
  }
}