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.

68 lines
2.0 KiB

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