_alert.scss 1.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. // Adjust close link position
  25. .close {
  26. position: absolute;
  27. top: 0;
  28. right: 0;
  29. padding: $alert-padding-y $alert-padding-x;
  30. color: inherit;
  31. }
  32. }
  33. // Alternate styles
  34. //
  35. // Generate contextual modifier classes for colorizing the alert.
  36. @each $color, $value in $theme-colors {
  37. .alert-#{$color} {
  38. @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  39. }
  40. }