github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/EnvironmentCard/EnvironmentCard.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  .environment-group-lane {
    17      position: relative;
    18      min-width: fit-content;
    19      max-width: calc(100vw - $sidebar-width - 100px); // full size minus the planned actions bar minus some buffer
    20      background-color: $environment-lane-background-color;
    21      border-radius: $environment-lane-header-border-radius;
    22      margin-bottom: 20px;
    23  
    24      .environment-group-lane__footer {
    25          padding-bottom: 1px; // must not be 0, or margins will collapse
    26      }
    27  
    28      .environment-group-lane__header-wrapper {
    29          display: flex;
    30      }
    31  
    32      .environment-group-lane__header {
    33          position: relative;
    34          color: var(--mdc-theme-surface); // will be fixed in SRX-E9D7EE
    35          display: flex;
    36          justify-content: space-between;
    37          padding: $environment-lane-header-padding;
    38          border-radius: $environment-lane-header-border-radius;
    39          width: max-content;
    40  
    41          .environment-group__name {
    42              @extend .headline1;
    43              display: flex;
    44              align-items: center;
    45          }
    46      }
    47      .environment-group-lane__body {
    48          margin: 20px;
    49      }
    50  
    51      .environment-lane {
    52          position: relative;
    53          background-color: #eee;
    54          border-radius: $environment-lane-border-radius;
    55          margin: $environment-lane-margin;
    56          overflow: visible;
    57  
    58          .environment-lane__header {
    59              position: relative;
    60              color: $environment-lane-header-color;
    61              display: flex;
    62              justify-content: space-between;
    63              padding: $environment-lane-header-padding;
    64              border-radius: $environment-lane-header-border-radius;
    65              width: max-content;
    66  
    67              .environment__name {
    68                  @extend .headline1;
    69                  display: flex;
    70                  align-items: center;
    71              }
    72          }
    73  
    74          .environment-lane__body {
    75              display: flex;
    76              padding-top: 10px;
    77              padding-bottom: 10px;
    78              padding-right: 0px;
    79              padding-left: 0px;
    80  
    81              .tooltip-container {
    82                  min-width: 40px;
    83              }
    84          }
    85      }
    86  
    87      .environment__locks {
    88          display: flex;
    89          margin: $environment-locks-margin;
    90      }
    91  
    92      .environment__actions {
    93          position: relative;
    94          margin-left: auto;
    95          margin-right: $environment-actions-right-displacement;
    96          margin-top: $environment-actions-top-displacement;
    97  
    98          .environment-action {
    99              border: $environment-add-lock-button-border;
   100              border-radius: $environment-add-lock-button-border-radius;
   101              color: $environment-add-lock-button-color;
   102              margin: $environment-buttons-column-margin;
   103              .mdc-button__label {
   104                  padding-left: $environment-add-lock-button-padding-left;
   105                  @extend .text-bold;
   106              }
   107          }
   108      }
   109  }