github.com/outbrain/consul@v1.4.5/website/source/assets/stylesheets/_header.scss (about)

     1  #header {
     2    background: $header-background-color;
     3  
     4    // Kind of gnarly override for bootstrap's nav toggle behavior
     5    @media (max-width: 991px) {
     6      .navbar-header {
     7        float: none;
     8      }
     9      .navbar-left,
    10      .navbar-right {
    11        float: none !important;
    12      }
    13      .navbar-toggle {
    14        display: block;
    15      }
    16      .navbar-collapse {
    17        border-top: 1px solid transparent;
    18        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    19      }
    20      .navbar-fixed-top {
    21        top: 0;
    22        border-width: 0 0 1px;
    23      }
    24      .navbar-collapse.collapse {
    25        display: none !important;
    26      }
    27      .navbar-nav {
    28        float: none !important;
    29        margin-top: 7.5px;
    30      }
    31      .navbar-nav > li {
    32        float: none;
    33      }
    34      .navbar-nav > li > a {
    35        padding-top: 10px;
    36        padding-bottom: 10px;
    37      }
    38      .collapse.in {
    39        display: block !important;
    40      }
    41    }
    42  
    43    .navbar-toggle {
    44      height: $header-height;
    45      margin: 0;
    46      padding-right: 15px;
    47      border-radius: 0;
    48  
    49      .icon-bar {
    50        border: 1px solid $white;
    51        border-radius: 0;
    52      }
    53    }
    54  
    55    .navbar-brand {
    56      display: block;
    57      margin: 0;
    58      padding: 0;
    59  
    60      a {
    61        display: flex;
    62        align-items: center;
    63        height: $header-height;
    64        line-height: $header-height;
    65  
    66        svg.logo {
    67          transition: opacity 0.15s ease-in-out;
    68          @extend svg.logo.white;
    69  
    70          &:hover,
    71          &:focus,
    72          &:active {
    73            opacity: 0.6;
    74            outline: 0;
    75            text-decoration: none;
    76          }
    77        }
    78      }
    79    }
    80  
    81    ul.nav {
    82      li {
    83        color: $consul-black;
    84        font-size: $header-font-size;
    85        font-family: $font-family-open-sans;
    86        font-weight: $font-weight-bold;
    87        height: $header-height;
    88        margin: 0;
    89        text-decoration: none;
    90  
    91        &:hover,
    92        &:focus,
    93        &:active {
    94          background-color: transparent;
    95          color: $header-link-color-hover;
    96          outline: 0;
    97  
    98          svg {
    99            fill: $header-link-color-hover;
   100          }
   101        }
   102  
   103        span {
   104          display: block;
   105          padding: 15px;
   106          line-height: 20px;
   107  
   108          svg {
   109            fill: $header-link-color;
   110            position: relative;
   111            top: -2px;
   112            width: 9px;
   113            height: 5px;
   114            margin-left: 7px;
   115          }
   116        }
   117  
   118        svg {
   119          fill: $header-link-color;
   120          position: relative;
   121          top: 2px;
   122          width: 14px;
   123          height: 14px;
   124          margin-right: 3px;
   125        }
   126  
   127        &:hover {
   128          cursor: pointer;
   129  
   130          & > ul {
   131            visibility: visible;
   132            opacity: 1;
   133            display: block;
   134            transition: all 0.5s ease;
   135          }
   136        }
   137  
   138        ul {
   139          visibility: hidden;
   140          opacity: 0;
   141          transition: all 0.5s ease;
   142          min-width: 22rem;
   143          box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
   144          border-radius: 3px;
   145          padding: 2rem;
   146          position: absolute;
   147          height: 160px;
   148          z-index: 1;
   149          background-color: white;
   150          margin-left: -15px;
   151  
   152          &:hover {
   153            visibility: visible;
   154            opacity: 1;
   155          }
   156  
   157          li {
   158            clear: both;
   159            width: 100%;
   160            display: block;
   161            padding: 1rem;
   162            position: relative;
   163            height: 44px;
   164  
   165            a {
   166              text-decoration: none;
   167            }
   168          }
   169        }
   170      }
   171    }
   172  
   173    .buttons {
   174      margin-top: 20px;
   175    }
   176  }