_alert.less 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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. #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: (@close-font-size + @alert-padding-x * 2);
  25. // Adjust close link position
  26. .close {
  27. position: absolute;
  28. top: 0;
  29. right: 0;
  30. z-index: 2;
  31. padding: @alert-padding-y @alert-padding-x;
  32. color: inherit;
  33. }
  34. }
  35. // Alternate styles
  36. //
  37. // Generate contextual modifier classes for colorizing the alert.
  38. //@each $color, $value in $theme-colors {
  39. // .alert-#{$color} {
  40. // @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  41. // }
  42. //}
  43. each(@theme-colors, #(@value, @color) {
  44. .alert-@{color} {
  45. #alert-variant(theme-color-level(@color, @alert-bg-level), theme-color-level(@color, @alert-border-level), theme-color-level(@color, @alert-color-level));
  46. }
  47. });