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.

71 lines
2.1 KiB

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