_alerts.scss 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. //
  2. // Component: Alert
  3. //
  4. .alert {
  5. .icon {
  6. margin-right: 10px;
  7. }
  8. .close {
  9. color: $black;
  10. opacity: .2;
  11. &:hover {
  12. opacity: .5;
  13. }
  14. }
  15. a {
  16. color: $white;
  17. text-decoration: underline;
  18. }
  19. }
  20. //Alert Variants
  21. @each $color, $value in $theme-colors {
  22. .alert-#{$color} {
  23. color: color-yiq($value);
  24. background-color: $value;
  25. border-color: darken($value, 5%);
  26. }
  27. .alert-default-#{$color} {
  28. @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  29. }
  30. }
  31. @include dark-mode () {
  32. @each $color, $value in $theme-colors-alt {
  33. .alert-#{$color} {
  34. color: color-yiq($value);
  35. background-color: $value;
  36. border-color: darken($value, 5%);
  37. }
  38. .alert-default-#{$color} {
  39. @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  40. }
  41. }
  42. }
  43. //