github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/SideBar/SideBar.scss (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  .mdc-drawer-sidebar-header {
    17      position: relative;
    18      color: white;
    19      background-color: var(--mdc-theme-primary);
    20      display: flex;
    21      border-radius: $border-radius-large 0 0 0;
    22  
    23      .mdc-drawer-sidebar-header-title {
    24          @extend .sub-headline1;
    25          position: relative;
    26          text-align: right;
    27          padding-right: $sidebar-planned-actions-title-right-centering;
    28          width: 100%;
    29      }
    30  
    31      .mdc-drawer-sidebar-header__button {
    32          position: relative;
    33          height: auto;
    34          color: white;
    35          border-radius: $border-radius-large 0 0 0;
    36      }
    37  }
    38  
    39  .mdc-drawer-sidebar-list {
    40      margin: 35px 40px;
    41      display: flex;
    42      flex-direction: column;
    43      align-items: flex-start;
    44      gap: 20px;
    45  }
    46  
    47  .mdc-drawer-sidebar-list-item {
    48      border: 2px solid #f2f5f7;
    49      border-radius: 10px;
    50      background-color: white;
    51      padding: 20px; // 105px 20px 20px;
    52      width: 100%;
    53      position: relative;
    54      display: flex;
    55      flex-direction: row;
    56  }
    57  
    58  .mdc-drawer-sidebar-list-item-text {
    59      flex: 3;
    60      display: flex;
    61      flex-direction: column;
    62      gap: 6px;
    63      color: var(--mdc-theme-on-surface);
    64      align-items: flex-start;
    65      @extend .text-regular;
    66  }
    67  
    68  .mdc-drawer-sidebar-list-item-text-name {
    69      @extend .text-bold;
    70  }
    71  
    72  .mdc-drawer-sidebar-list-item-text-summary {
    73      @extend .text-regular;
    74  }
    75  
    76  .mdc-drawer-sidebar-list-item-delete-all {
    77      @extend .text-regular;
    78      display: flex;
    79      width: 100%;
    80      justify-content: space-between;
    81      border-top: solid;
    82      padding-top: 10px;
    83      margin-top: 10px;
    84      .no-wrap {
    85          white-space: nowrap;
    86      }
    87      .mdc-button__label {
    88          font-size: $small-warn-button-font-size;
    89          font-weight: $small-warn-button-font-weight;
    90      }
    91      .mdc-button__ripple {
    92          position: relative;
    93      }
    94      button.mdc-button {
    95          color: red;
    96          border-color: red;
    97          border: solid;
    98          border-radius: $border-radius-medium;
    99          padding-left: $small-warn-button-padding-left;
   100          padding-right: $small-warn-button-padding-right;
   101          height: min-content;
   102      }
   103  }
   104  
   105  .mdc-drawer-sidebar-list-item-delete-icon {
   106      flex: 2;
   107      position: absolute;
   108      right: 11px;
   109      top: 11px;
   110      color: #4a4a4a;
   111  }
   112  
   113  .mdc-drawer-sidebar-list-item-delete-icon:hover {
   114      color: #000000;
   115  }
   116  
   117  .mdc-drawer-sidebar-content {
   118      overflow: overlay;
   119      position: relative;
   120      width: 100%;
   121      background-color: #fafbfc;
   122      height: 75vh;
   123  }
   124  
   125  .actions-cart__lock-message {
   126      background: var(--mdc-theme-background);
   127      position: relative;
   128  }
   129  
   130  .mdc-drawer-sidebar .mdc-drawer-sidebar-footer-input {
   131      border: 2px solid #f2f5f7;
   132      border-radius: 10px;
   133      border-bottom-right-radius: 0px;
   134      border-bottom-left-radius: 0px;
   135      background-color: white;
   136      padding: 20px;
   137      width: 100%;
   138      position: relative;
   139      display: flex;
   140      flex-direction: row;
   141  }
   142  
   143  .mdc-drawer-sidebar .mdc-sidebar-sidebar-footer {
   144      position: relative;
   145      color: white;
   146      text-transform: none;
   147      letter-spacing: 0;
   148      width: 100%;
   149      height: $sidebar-apply-button-height;
   150      border-radius: 0 0 0 $border-radius-large;
   151      @extend .sub-headline1;
   152  }
   153  
   154  .mdc-drawer__drawer {
   155      display: flex;
   156      flex-direction: column;
   157  }
   158  
   159  .mdc-drawer-sidebar-container {
   160      height: 100%;
   161      transition: $sidebar-transition-duration-large-screen;
   162  }
   163  
   164  .mdc-drawer-sidebar--displayed {
   165      position: absolute;
   166      right: 0;
   167      top: 0;
   168      width: $sidebar-width;
   169  }
   170  
   171  .mdc-drawer-sidebar--hidden {
   172      position: absolute;
   173      right: $sidebar-hidden-displacement;
   174      top: 0;
   175      width: $sidebar-width;
   176  }