github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/product/header-nav.scss (about)

     1  %primary-nav ul ul {
     2    @extend %header-drop-nav;
     3  }
     4  %primary-nav,
     5  %secondary-nav {
     6    @extend %header-nav;
     7  }
     8  %header-nav-toggle-button::before,
     9  %header-nav-toggle-button::after,
    10  %header-nav-toggle-button span::before {
    11    @extend %with-dot;
    12  }
    13  %header-nav-toggle-button span {
    14    visibility: hidden;
    15  }
    16  %header-drop-nav {
    17    border: $decor-border-100;
    18    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21);
    19  }
    20  %header-drop-nav li {
    21    border-bottom: $decor-border-100;
    22  }
    23  %header-drop-nav li {
    24    border-color: $ui-gray-300;
    25  }
    26  %header-drop-nav {
    27    border-color: $ui-gray-300;
    28    background-color: $ui-white;
    29  }
    30  %header-drop-nav a {
    31    color: $ui-gray-900 !important;
    32  }
    33  %header-nav > ul > li > a:hover,
    34  %header-nav > ul > li > a:focus,
    35  %header-nav > ul > li > a:active,
    36  %header-nav > ul > li.is-active > a {
    37    color: $ui-white;
    38  }
    39  %header-nav-toggle-button::before,
    40  %header-nav-toggle-button::after,
    41  %header-nav-toggle-button span::before {
    42    right: 10px;
    43    left: auto !important;
    44    top: 23px !important;
    45  }
    46  %header-nav-toggle-button::before {
    47    margin-top: -6px;
    48  }
    49  %header-nav-toggle-button::after {
    50    margin-top: 6px;
    51  }
    52  %header-nav-toggle {
    53    display: none;
    54  }
    55  %header-nav-toggle-button {
    56    top: 0;
    57    position: absolute;
    58  }
    59  @media #{$--lt-horizontal-nav} {
    60    %header-nav-panel label span {
    61      visibility: visible !important;
    62      display: inline-block;
    63      padding-right: 47px;
    64      padding-top: 13px;
    65    }
    66    %header-nav-panel {
    67      transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
    68      transition-duration: 0.2s;
    69      transition-property: width right;
    70    }
    71    %header-nav-panel {
    72      box-sizing: border-box;
    73      padding: 15px 35px;
    74      z-index: 10000;
    75      text-align: right;
    76    }
    77    %header-nav-toggle-button {
    78      position: absolute;
    79      right: 0px;
    80      width: 100px;
    81      height: 40px;
    82      z-index: 2;
    83      cursor: pointer;
    84    }
    85    %header-nav-panel {
    86      width: 0%;
    87      overflow: auto;
    88      height: 100%;
    89      position: absolute;
    90      top: 0px;
    91      z-index: 3;
    92      padding: 0;
    93      padding-top: 15px;
    94      right: -100%;
    95    }
    96    %header-nav-toggle:checked ~ div {
    97      width: 250px;
    98      right: 0;
    99      padding: 15px 35px;
   100    }
   101    %header-nav-toggle:checked + label {
   102      background-color: rgba($ui-black, 0.4);
   103      width: 100vw;
   104      height: 100%;
   105      left: 0;
   106      top: 0;
   107    }
   108    %primary-nav {
   109      margin-top: 45px;
   110    }
   111  }
   112  @media #{$--horizontal-nav} {
   113    %header-nav-panel {
   114      display: flex;
   115    }
   116    %header-nav-panel {
   117      justify-content: space-between;
   118      flex-grow: 1;
   119    }
   120    %header-nav-toggle-button {
   121      display: none;
   122    }
   123  }
   124  %header-drop-nav a:hover,
   125  %header-drop-nav a:focus,
   126  %header-drop-nav a:active,
   127  %header-drop-nav a.selected {
   128    background-color: $ui-gray-050;
   129  }
   130  %header-nav a {
   131    display: block;
   132    padding: 3px 12px;
   133    border-radius: $radius;
   134    white-space: nowrap;
   135  }
   136  @media #{$--lt-horizontal-nav} {
   137    %secondary-nav li:first-child {
   138      display: none;
   139    }
   140    %header-drop-nav {
   141      width: 180px;
   142    }
   143    %header-nav > ul > li > a {
   144      padding-top: 15px;
   145      padding-bottom: 15px;
   146      display: block;
   147    }
   148    %primary-nav > ul > li.is-active > a {
   149      font-weight: $typo-weight-bold;
   150    }
   151  }
   152  @media #{$--horizontal-nav} {
   153    %header-nav ul {
   154      display: flex;
   155    }
   156    %header-drop-nav {
   157      min-width: 266px;
   158    }
   159  }
   160  %header-drop-nav .is-active a::after {
   161    @extend %with-inverted-tick;
   162    position: absolute;
   163    top: 50%;
   164    margin-top: -8px;
   165    right: 10px;
   166  }
   167  %header-drop-nav {
   168    display: block;
   169    position: absolute;
   170    z-index: 100;
   171  }
   172  %header-drop-nav a {
   173    text-align: left;
   174    position: relative;
   175    padding: 12px 25px;
   176  }