vitess.io/vitess@v0.16.2/web/vtadmin/src/components/NavRail.module.scss (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  $navRailHoverTransition: background-color 0.1s ease-in-out;
    18  
    19  .container {
    20      background: var(--backgroundSecondary);
    21      border-right: solid 1px var(--backgroundSecondaryHighlight);
    22      display: flex;
    23      flex-direction: column;
    24      height: 100vh;
    25      overflow-y: auto;
    26  }
    27  
    28  .logoContainer {
    29      display: flex;
    30      padding: 24px;
    31      text-align: center;
    32      justify-content: center;
    33      align-items: center;
    34  }
    35  
    36  .footerContainer {
    37      margin: auto 0 24px 0;
    38  }
    39  
    40  .navLinks {
    41      margin: 24px 0 32px 0;
    42  }
    43  
    44  .navList {
    45      list-style-type: none;
    46      margin: 0;
    47      padding: 0;
    48  
    49      &::after {
    50          content: '';
    51          background-color: var(--colorScaffoldingHighlight);
    52          display: block;
    53          height: 1px;
    54          margin: 20px 24px;
    55          max-width: 100%;
    56      }
    57  }
    58  
    59  .navList:last-child::after,
    60  .footerContainer .navList::after {
    61      content: none;
    62  }
    63  
    64  a.navLink {
    65      align-items: center;
    66      border-left: solid 4px transparent;
    67      color: var(--textColorPrimary);
    68      display: flex;
    69      flex-wrap: nowrap;
    70      font-size: 1.6rem;
    71      font-weight: 500;
    72      outline: none;
    73      padding: 13px 24px;
    74      text-decoration: none;
    75      transition: $navRailHoverTransition;
    76  
    77      &.navLinkActive {
    78          border-color: var(--colorPrimary);
    79          color: var(--colorPrimary);
    80      }
    81  
    82      &:focus,
    83      &:hover {
    84          background: var(--backgroundSecondaryHighlight);
    85          color: var(--colorPrimary);
    86      }
    87  }
    88  
    89  .badge {
    90      background-color: var(--backgroundSecondaryHighlight);
    91      border-radius: 20px;
    92      color: var(--textColorSecondary);
    93      display: inline-block;
    94      font-size: 1.4rem;
    95      line-height: 1.9rem;
    96      margin-left: auto;
    97      padding: 2px 8px;
    98      transition: $navRailHoverTransition;
    99  }
   100  
   101  a.navLinkActive .badge,
   102  a.navLink:focus .badge,
   103  a.navLink:hover .badge {
   104      background-color: var(--backgroundPrimaryHighlight);
   105      color: var(--colorPrimary);
   106  }
   107  
   108  .icon {
   109      fill: var(--colorScaffoldingForeground);
   110      height: 2rem;
   111      transition: $navRailHoverTransition;
   112  }
   113  
   114  a.navLinkActive .icon,
   115  a.navLink:focus .icon,
   116  a.navLink:hover .icon {
   117      fill: var(--colorPrimary);
   118  }
   119  
   120  .hotkey::before {
   121      @apply block;
   122      @apply border;
   123      @apply font-mono font-bold;
   124      @apply p-0;
   125      @apply rounded-sm;
   126      @apply text-center;
   127      @apply select-none;
   128  
   129      $hotkeySize: 16px;
   130  
   131      border-color: var(--colorScaffoldingForeground);
   132      color: var(--colorScaffoldingForeground);
   133      content: attr(data-hotkey);
   134      font-size: 10px;
   135      height: $hotkeySize;
   136      line-height: 14px;
   137      margin: 0 4px;
   138      width: $hotkeySize;
   139  }