github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/sidebar/sidebar.scss (about)

     1  @import 'node_modules/argo-ui/v2/styles/colors.scss';
     2  @import '../shared/config.scss';
     3  
     4  $deselected-text: #818d94;
     5  
     6  .sidebar {
     7      min-width: $sidebar-width;
     8      width: $sidebar-width;
     9      padding: 0 20px;
    10      top: 0;
    11      left: 0;
    12      position: fixed;
    13      height: 100vh;
    14      max-height: 100vh;
    15      color: white;
    16      background-color: #0f2733;
    17      overflow: auto;
    18      z-index: 2;
    19  
    20      &__container {
    21          padding: 0 5px;
    22      }
    23  
    24      &__logo-container {
    25          margin-top: 10px;
    26          font-size: 12px;
    27          color: $deselected-text;
    28          margin-left: 12px;
    29      }
    30  
    31      &__logo {
    32          width: 100%;
    33          display: flex;
    34          flex-direction: row-reverse;
    35          align-items: center;
    36          justify-content: flex-end;
    37          font-size: 24px;
    38          font-weight: 500;
    39          margin: 1em 0;
    40          margin-left: -7px;
    41  
    42          &__character {
    43              cursor: pointer;
    44              width: 42px;
    45          }
    46  
    47          &__text-logo {
    48              cursor: pointer;
    49              height: 2em;
    50              filter: invert(100%);
    51          }
    52      }
    53  
    54      &__version {
    55          cursor: pointer;
    56          width: 110px;
    57          text-align: left;
    58          white-space: nowrap;
    59          overflow: hidden;
    60          text-overflow: ellipsis;
    61      }
    62  
    63      &__tooltip {
    64          max-width: 300px;
    65          @media screen and (max-width: 590px) {
    66              max-width: 250px;
    67          }
    68      }
    69  
    70      &__nav-item {
    71          cursor: pointer;
    72          display: flex;
    73          align-items: center;
    74          font-size: 16px;
    75          font-weight: 500;
    76          $height: 2.5em;
    77          height: $height;
    78          line-height: $height;
    79          color: $deselected-text;
    80  
    81          i {
    82              font-size: 26px;
    83              color: white;
    84              width: 40px;
    85              padding-right: 45px;
    86          }
    87  
    88          i.fa {
    89              font-size: 22px;
    90              margin-left: 2px;
    91              margin-right: -2px;
    92              margin-top: 12px;
    93              width: 32px;           
    94          }
    95  
    96          &--active {
    97              color: white;
    98              i {
    99                  color: #fe733f;
   100              }
   101          }
   102      }
   103  
   104      &__collapse-button {
   105          text-align: center;
   106          cursor: pointer;
   107          margin-left: auto;
   108          margin-bottom: 1em;
   109          font-size: 20px;
   110          color: $deselected-text;
   111      }
   112  
   113      &--collapsed {
   114          min-width: $collapsed-sidebar-width;
   115          width: $collapsed-sidebar-width;
   116          padding: 15px 5px;
   117          overflow: hidden !important;
   118  
   119          .sidebar__logo {
   120              margin-left: 0;
   121              flex-direction: column;
   122              margin-bottom: 18px;
   123              margin-top: -7px;
   124              justify-content: center;
   125          }
   126  
   127          .sidebar__collapse-button {
   128              margin-left: 0;
   129              margin-top: 1em;
   130          }
   131  
   132          .sidebar__logo img {
   133              margin-right: 0;
   134          }
   135  
   136          .sidebar__nav-item i {
   137              margin-right: 0;
   138              margin-left: 7px;
   139          }
   140  
   141          .sidebar__nav-item i.fa {
   142              margin-left: 9px;
   143          }
   144  
   145          .sidebar__filter-button {
   146              i {
   147                  font-size: 14px;
   148                  margin-top: 2em;
   149                  margin-left: 13px;
   150                  color: $deselected-text;
   151              }
   152          }
   153      }
   154  }