github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/core/notifications.scss (about)

     1  $bonusRightPadding: 20px;
     2  
     3  section.notifications {
     4    position: fixed;
     5    bottom: 10px;
     6    right: 10px;
     7    z-index: 100;
     8  
     9    .flash-message {
    10      width: 300px;
    11      transition: all 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    12      padding: 1rem;
    13      margin-bottom: 1rem;
    14      box-shadow: 1px 1px 4px 0px rgb(0, 0, 0, 0.1);
    15      position: relative;
    16      overflow: hidden;
    17      padding-right: $bonusRightPadding;
    18  
    19      &.alert-success {
    20        background-color: lighten($nomad-green, 50%);
    21      }
    22      &.alert-error {
    23        background-color: lighten($danger, 45%);
    24      }
    25  
    26      h3 {
    27        font-weight: bold;
    28      }
    29  
    30      span.close-button {
    31        position: absolute;
    32        top: 0;
    33        right: 0;
    34        padding: 10px;
    35        line-height: 100%;
    36        font-size: 1.5rem;
    37        cursor: pointer;
    38      }
    39  
    40      .alert-progress {
    41        width: 100%;
    42        border-radius: 3px;
    43        position: absolute;
    44        bottom: 0;
    45        left: 0;
    46        .alert-progressBar {
    47          background-color: $nomad-green;
    48          height: 2px;
    49          width: 0%;
    50        }
    51      }
    52  
    53      &.active {
    54        .alert-progress {
    55          .alert-progressBar {
    56            width: 100%;
    57          }
    58        }
    59      }
    60  
    61      .custom-action-button {
    62        width: calc(100% + $bonusRightPadding - 1rem);
    63        margin: 1.5rem 0 0;
    64      }
    65    }
    66  }