[Summary view] [Print] [Text view]

   1  // Alerts
   2  
   3  .alert {
   4    margin: 1rem 0;
   5    border-right: 0;
   6    border-left: 0;
   7    border-radius: $border-radius-sm;
   8  
   9    &.alert-info {
  10      color: var(--template-bg-dark);
  11      background-color: var(--template-bg-dark-10);
  12      border: 1px solid var(--template-bg-dark-20);
  13    }
  14  
  15    &.alert-warning {
  16      color: $state-warning-text;
  17      background-color: $state-warning-bg;
  18      border: 1px solid $state-warning-border;
  19    }
  20  
  21    &.alert-success {
  22      color: $state-success-text;
  23      background-color: $state-success-bg;
  24      border: 1px solid $state-success-border;
  25    }
  26  
  27    &.alert-error {
  28      color: $state-error-text;
  29      background-color: $state-error-bg;
  30      border: 1px solid $state-error-border;
  31    }
  32  }
  33  
  34  .alert-parent {
  35    margin-top: 0;
  36  }
  37  
  38  fieldset .alert {
  39    &.alert-info {
  40      margin: -1rem 0 1rem;
  41    }
  42  }
  43  
  44  .alert-heading {
  45    font-size: $h4-font-size;
  46  }
  47  
  48  @keyframes fadeIn {
  49    from {
  50      opacity: 0;
  51      transform: translateY(-15px);
  52    }
  53  
  54    to {
  55      opacity: 1;
  56      transform: translateY(0);
  57    }
  58  }