resources/tools/dash/app/pal/static/sass/bootstrap/_alert.scss

   1 //
   2 // Base styles
   3 //
   4
   5 .alert {
   6   // scss-docs-start alert-css-vars
   7   --#{$prefix}alert-bg: transparent;
   8   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   9   --#{$prefix}alert-padding-y: #{$alert-padding-y};
  10   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  11   --#{$prefix}alert-color: inherit;
  12   --#{$prefix}alert-border-color: transparent;
  13   --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  14   --#{$prefix}alert-border-radius: #{$alert-border-radius};
  15   // scss-docs-end alert-css-vars
  16
  17   position: relative;
  18   padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
  19   margin-bottom: var(--#{$prefix}alert-margin-bottom);
  20   color: var(--#{$prefix}alert-color);
  21   background-color: var(--#{$prefix}alert-bg);
  22   border: var(--#{$prefix}alert-border);
  23   @include border-radius(var(--#{$prefix}alert-border-radius));
  24 }
  25
  26 // Headings for larger alerts
  27 .alert-heading {
  28   // Specified to prevent conflicts of changing $headings-color
  29   color: inherit;
  30 }
  31
  32 // Provide class for links that match alerts
  33 .alert-link {
  34   font-weight: $alert-link-font-weight;
  35 }
  36
  37
  38 // Dismissible alerts
  39 //
  40 // Expand the right padding and account for the close button's positioning.
  41
  42 .alert-dismissible {
  43   padding-right: $alert-dismissible-padding-r;
  44
  45   // Adjust close link position
  46   .btn-close {
  47     position: absolute;
  48     top: 0;
  49     right: 0;
  50     z-index: $stretched-link-z-index + 1;
  51     padding: $alert-padding-y * 1.25 $alert-padding-x;
  52   }
  53 }
  54
  55
  56 // scss-docs-start alert-modifiers
  57 // Generate contextual modifier classes for colorizing the alert.
  58
  59 @each $state, $value in $theme-colors {
  60   $alert-background: shift-color($value, $alert-bg-scale);
  61   $alert-border: shift-color($value, $alert-border-scale);
  62   $alert-color: shift-color($value, $alert-color-scale);
  63
  64   @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
  65     $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  66   }
  67   .alert-#{$state} {
  68     @include alert-variant($alert-background, $alert-border, $alert-color);
  69   }
  70 }
  71 // scss-docs-end alert-modifiers