@c8y/style/styles/_navbar.less

Styles for Cumulocity IoT applications

.navbar {
  position: relative;
  margin-bottom: 30px;
  min-height: @navbar-height;
  background-color: @navbar-background-default;
  // Prevent floats from breaking the navbar

  &:extend(.clearfix all);
}

// Navbar heading
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy styling of responsive aspects.
.navbar-header {
  &:extend(.clearfix all);
  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

.navbar-collapse {
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  padding-right: @component-padding;
  padding-left: @component-padding;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  &:extend(.clearfix all);
  &.in {
    overflow-y: auto;
  }

  @media (min-width: @screen-sm-min) {
    width: auto;
    border-top: 0;
    box-shadow: none;
    &.collapse {
      display: block !important;
      overflow: visible !important;
      padding-bottom: 0; // Override default setting
      height: auto !important;
    }
    &.in {
      overflow-y: visible;
    }
    .navbar-fixed-top &,
    .navbar-static-top &,
    .navbar-fixed-bottom & {
      padding-right: 0;
      padding-left: 0;
    }
  }
  @media (min-width: @screen-lg-min) {
    padding-right: @margin-8;
    padding-left: @margin-8;
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  .navbar-collapse {
    max-height: @navbar-collapse-max-height;
    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
      max-height: 200px;
    }
  }
}

// Both navbar header and collapse
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
  > .navbar-header,
  > .navbar-collapse {
    @media (min-width: @screen-sm-min) {
      margin-right: 0;
      margin-left: 0;
    }
  }
}

// Navbar alignment options

.navbar-static-top {
  z-index: @zindex-navbar;
  border-width: 0 0 1px;
  @media (min-width: @screen-sm-min) {
    border-radius: 0;
  }
}

// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: @zindex-navbar-fixed; // Undo the rounded corners
  @media (min-width: @screen-sm-min) {
    border-radius: 0;
  }
}

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}

.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}

// Brand/project name
.navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  height: @navbar-height;
  font-size: @font-size-large;
  line-height: @line-height-computed;
  &:hover,
  &:focus {
    text-decoration: none;
  }
  > img {
    display: block;
  }
  @media (min-width: @screen-sm-min) {
    .navbar > .container &,
    .navbar > .container-fluid & {
      margin-left: calc(@navbar-padding-horizontal * -1);
    }
  }
}

// Navbar toggle
// Custom button for toggling the `.navbar-collapse`
.navbar-toggle {
  position: relative;
  float: right;
  margin-right: @navbar-padding-horizontal;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-color: transparent;
  border-radius: @component-border-radius-base; // We remove the `outline` here, but later compensate by attaching `:hover`
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

  .navbar-vertical-align(34px);
  &:focus {
    outline: 0;
  } // Bars
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: @navbar-color-default;
  }
  .icon-bar + .icon-bar {
    margin-top: 4px;
  }
  &:hover,
  &:focus {
    background-color: transparent;
  }
  @media (min-width: @screen-sm-min) {
    display: none;
  }
}

// Navbar nav links
// Builds on top of the `.nav` components with its own modifier class to make the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
  margin: calc(@navbar-padding-vertical * 0.5) calc(@navbar-padding-horizontal * -1);
  > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: @line-height-computed;
  }
  @media (max-width: (@screen-sm-min - 1)) {
    .open .dropdown-menu {
      position: static;
      float: none;
      margin-top: 0;
      width: auto;
      border: 0;
      background-color: transparent;
      box-shadow: none;
      > li > a,
      .dropdown-header {
        padding: 5px 15px 5px 25px;
      }
      > li > a {
        line-height: @line-height-computed;
        &:hover,
        &:focus {
          background-image: none;
        }
      }
    }
  } // Uncollapse the nav
  @media (min-width: @screen-sm-min) {
    display: flex;
    float: left;
    align-items: center;
    margin: 0;
    min-width: 0;
    > li {
      display: flex;
      float: left;
      min-width: 0;
      > a,
      > .btn-link {
        padding-top: @navbar-padding-vertical;
        padding-bottom: @navbar-padding-vertical;
        &:focus {
          outline: none;
        }
      }
    }
  }
  &.navbar-center {
    @media (min-width: @screen-sm-min) {
      display: inline-block;
      float: none;
    }
  }
}

// Navbar form
// Extension of the `.form-inline` with some extra flavor for optimum display in our navbars.
.navbar-form {
  padding: 0 @navbar-padding-horizontal;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;

  @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  .box-shadow(@shadow);
  @media (min-width: @screen-sm-min) {
    >.form-group {
      display: inline-block;
      margin-bottom: 0;
      max-height: 32px !important;
      vertical-align: middle;

      > label {
        margin-right: @margin-8;
      }
      + .form-group {
        margin-left: @margin-8;
      }
    }

    >label {
      display: inline-block;
      margin-bottom: 0;
    }

    >.form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }

    >.form-control-static {
      display: inline-block;
    }
    >.input-group {
      display: inline-flex;
      width: auto;
      vertical-align: middle;
      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    >.control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }
    >.c8y-select-wrapper {
      display: inline-block;
      vertical-align: middle;
    }

    >.radio,
    >.checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;
      label {
        padding-left: 0;
      }
    }
    .radio input[type='radio'],
    .checkbox input[type='checkbox'] {
      position: relative;
      margin-left: 0;
    } // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
    .has-feedback .form-control-feedback-message {
      top: @form-control-height-base;
    }
  }
  >.form-group {
    @media (max-width: @screen-sm-min) {
      margin-bottom: 5px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  } // Vertically center in expanded, horizontal navbar
  //.navbar-vertical-align(@form-control-height-base);
  // Undo 100% width for pull classes
  @media (min-width: @screen-sm-min) {
    margin-right: 0;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: auto;
    border: 0;

    .box-shadow(none);
  }
}

// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;

}

// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
}

// Buttons in navbars
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
  .navbar-vertical-align(32);
  &.btn-sm {
    .navbar-vertical-align(28);
  }
  &.btn-xs {
    .navbar-vertical-align(22);
  }
}

// Text in navbars
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
  .navbar-vertical-align(@line-height-computed);
  @media (min-width: @screen-sm-min) {
    float: left;
    margin-right: @navbar-padding-horizontal;
    margin-left: @navbar-padding-horizontal;
  }
}

// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @screen-sm-min) {
  .navbar-left {
    .pull-left();
  }
  .navbar-right {
    .pull-right();
    margin-left: auto;
    flex-shrink: 0;
    ~ .navbar-right {
      margin-right: 0;
    }
  }
}

// Alternate navbars

// Default navbar
.navbar-default {
  border-color: @navbar-border-color;
  background-color: @navbar-background-default;

  .navbar-text {
    color: @navbar-color-default;
  }
  .navbar-nav {
    > li > a {
      color: @navlink-color-default;
      &:hover,
      &:focus {
        background-color: @navlink-background-hover;
        color: @navlink-color-hover;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        background-color: @navlink-background-active;
        color: @navlink-color-active;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        opacity: @component-disabled-opacity;
      }
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: @navbar-border-color;
  } // Dropdown menu items
  .navbar-nav {
    // Remove background color from open dropdown
    > .open > a {
      &,
      &:hover,
      &:focus {
        background-color: @navlink-background-active;
        color: @navlink-color-active;
      }
    }
    @media (max-width: @screen-sm-min) {
      // Dropdowns get custom display when collapsed
      .open .dropdown-menu {
        > li > a {
          color: @navlink-color-default;
          &:hover,
          &:focus {
            background-color: @navlink-background-hover;
            color: @navlink-color-hover;
          }
        }
        > .active > a {
          &,
          &:hover,
          &:focus {
            background-color: @navlink-background-active;
            color: @navlink-color-active;
          }
        }
        > .disabled > a {
          &,
          &:hover,
          &:focus {
            opacity: @component-disabled-opacity;
          }
        }
      }
    }
  }
  .navbar-link {
    color: @navlink-color-default;
    &:hover {
      color: @navlink-color-hover;
    }
  }
  .btn-link {
    color: @navlink-color-default;
    &:hover,
    &:focus {
      color: @navlink-color-hover;
    }
    &[disabled],
    fieldset[disabled] & {
      &:hover,
      &:focus {
        opacity: @component-disabled-opacity;
      }
    }
  }
}