You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

57 lines
1.4 KiB

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