github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.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  @use '@material/notched-outline/mdc-notched-outline';
    17  @use '@material/notched-outline';
    18  
    19  .mdc-top-app-bar {
    20      background: var(--mdc-theme-background);
    21      color: var(--mdc-theme-primary);
    22      padding: $top-app-bar-padding;
    23      position: fixed;
    24      width: 100%;
    25      z-index: 4;
    26  
    27      .mdc-top-app-bar__row {
    28          display: flex;
    29  
    30          .mdc-top-app-bar__section--align-end {
    31              padding-right: 0;
    32              justify-content: flex-end;
    33          }
    34          .top-app-bar-search-field {
    35              width: 100%;
    36              height: 100%;
    37          }
    38          .top-app-bar--wide-filter {
    39              flex-basis: 400px;
    40          }
    41          .top-app-bar--narrow-filter {
    42              flex-basis: 300px;
    43              flex-grow: 0.01;
    44          }
    45      }
    46  
    47      .mdc-top-app-bar__section {
    48          display: inline-flex;
    49          gap: $top-app-bar-section-gap;
    50          flex: 1 1 auto;
    51          align-items: center;
    52          padding: 8px 12px;
    53      }
    54      .mdc-top-app-bar__title {
    55          @extend .headline1;
    56          flex-grow: 0;
    57          padding-left: 20px;
    58          padding-right: 0;
    59          text-overflow: ellipsis;
    60          white-space: nowrap;
    61          overflow: hidden;
    62          letter-spacing: 0.0125em;
    63      }
    64  
    65      .mdc-text-field {
    66          @include notched-outline.shape-radius($border-radius-medium);
    67          @include notched-outline.color(var(--mdc-theme-primary));
    68      }
    69  
    70      .mdc-show-button {
    71          color: var(--mdc-theme-background);
    72          background: var(--mdc-theme-primary);
    73  
    74          margin-right: 0;
    75          width: $sidebar-show-button-width;
    76          height: $sidebar-show-button-height;
    77          border-radius: $border-radius-medium 0 0 $border-radius-medium;
    78      }
    79  }