github.com/argoproj/argo-cd/v2@v2.10.9/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              width: 42px;
    44          }
    45  
    46          &__text-logo {
    47              height: 2em;
    48              filter: invert(100%);
    49          }
    50      }
    51  
    52      &__version {
    53          cursor: pointer;
    54          width: 110px;
    55          text-align: left;
    56          white-space: nowrap;
    57          overflow: hidden;
    58          text-overflow: ellipsis;
    59      }
    60  
    61      &__tooltip {
    62          max-width: 300px;
    63          @media screen and (max-width: 590px) {
    64              max-width: 250px;
    65          }
    66      }
    67  
    68      &__nav-item {
    69          cursor: pointer;
    70          display: flex;
    71          align-items: center;
    72          font-size: 16px;
    73          font-weight: 500;
    74          $height: 2.5em;
    75          height: $height;
    76          line-height: $height;
    77          color: $deselected-text;
    78  
    79          i {
    80              font-size: 26px;
    81              color: white;
    82              width: 40px;
    83              padding-right: 45px;
    84          }
    85  
    86          i.fa {
    87              font-size: 22px;
    88              margin-left: 2px;
    89              margin-right: -2px;
    90              margin-top: 12px;
    91              width: 32px;           
    92          }
    93  
    94          &--active {
    95              color: white;
    96              i {
    97                  color: #fe733f;
    98              }
    99          }
   100      }
   101  
   102      &__collapse-button {
   103          text-align: center;
   104          cursor: pointer;
   105          margin-left: auto;
   106          margin-bottom: 1em;
   107          font-size: 20px;
   108          color: $deselected-text;
   109      }
   110  
   111      &--collapsed {
   112          min-width: $collapsed-sidebar-width;
   113          width: $collapsed-sidebar-width;
   114          padding: 15px 5px;
   115          overflow: hidden !important;
   116  
   117          .sidebar__logo {
   118              margin-left: 0;
   119              flex-direction: column;
   120              margin-bottom: 18px;
   121              margin-top: -7px;
   122              justify-content: center;
   123          }
   124  
   125          .sidebar__collapse-button {
   126              margin-left: 0;
   127              margin-top: 1em;
   128          }
   129  
   130          .sidebar__logo img {
   131              margin-right: 0;
   132          }
   133  
   134          .sidebar__nav-item i {
   135              margin-right: 0;
   136              margin-left: 7px;
   137          }
   138  
   139          .sidebar__nav-item i.fa {
   140              margin-left: 9px;
   141          }
   142  
   143          .sidebar__filter-button {
   144              i {
   145                  font-size: 14px;
   146                  margin-top: 2em;
   147                  margin-left: 13px;
   148                  color: $deselected-text;
   149              }
   150          }
   151      }
   152  }