github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/dialog/ConfirmationDialog.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  
    17  .confirmation-dialog-container {
    18      display: flex;
    19  }
    20  
    21  .plain-dialog-container {
    22      display: flex;
    23      position: relative;
    24  }
    25  
    26  .confirmation-dialog-container-open {
    27      &::before {
    28          // this is to make everything behind the dialog grey and not clickable:
    29          content: '';
    30          position: fixed;
    31          top: 0;
    32          left: 0;
    33          right: 0;
    34          bottom: 0;
    35          z-index: 999;
    36          background-color: #00000050;
    37      }
    38  }
    39  
    40  .plain-dialog-open {
    41      position: absolute;
    42      max-height: 80vh;
    43      display: grid;
    44      grid-template-rows: auto 1fr auto;
    45      background: white;
    46      color: black;
    47      float: left;
    48  
    49      z-index: 1000;
    50      // the border radius should be the same as the release dialog:
    51      border-radius: $release-dialog-outer-border-radius;
    52      box-shadow:
    53          rgba(0, 0, 0, 0.2) 0 5px 5px -3px,
    54          rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
    55          rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
    56  }
    57  
    58  .confirmation-dialog-open {
    59      max-height: 80vh;
    60      display: grid;
    61      grid-template-rows: auto 1fr auto;
    62      background: white;
    63      color: black;
    64      position: fixed;
    65      float: left;
    66      left: 50%;
    67      top: 50%;
    68      // confirmation dialogs are centered around the middle of the screen
    69      // (plain dialogs are centered around an ancestor element)
    70      transform: translate(-50%, -50%);
    71  
    72      z-index: 1000;
    73      // the border radius has to align with the border radius of the release dialog:
    74      border-radius: $release-dialog-outer-border-radius;
    75      box-shadow:
    76          rgba(0, 0, 0, 0.2) 0 5px 5px -3px,
    77          rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
    78          rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
    79  
    80      .confirmation-dialog-header {
    81          @extend .headline1;
    82          padding: 2rem 2rem 1rem 2rem;
    83      }
    84      .confirmation-dialog-content {
    85          font-weight: 500;
    86          overflow: auto;
    87          padding: 1rem 2rem 1rem 2rem;
    88      }
    89      .confirmation-dialog-footer {
    90          display: flex;
    91          justify-content: flex-end;
    92          gap: 1rem;
    93          padding: 1rem 2rem 1rem 2rem;
    94  
    95          .item:not(:first-child) {
    96              border-top: 1px solid;
    97              border-color: white;
    98          }
    99          .item {
   100              list-style-type: none;
   101              padding: 0;
   102          }
   103          button {
   104              border-radius: 10px;
   105          }
   106      }
   107      hr {
   108          color: grey;
   109          margin: 0 2rem 0 2rem;
   110      }
   111  }