_callout.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. //
  2. // Component: Callout
  3. //
  4. // Base styles (regardless of theme)
  5. .callout {
  6. @if $enable-rounded {
  7. @include border-radius($border-radius);
  8. }
  9. @if $enable-shadows {
  10. box-shadow: map-get($elevations, 1);
  11. } @else {
  12. border: 1px solid $gray-300;
  13. }
  14. background-color: $white;
  15. border-left: 5px solid $gray-200;
  16. margin-bottom: map-get($spacers, 3);
  17. padding: 1rem;
  18. a {
  19. color: $gray-700;
  20. text-decoration: underline;
  21. &:hover {
  22. color: $gray-200;
  23. }
  24. }
  25. p:last-child {
  26. margin-bottom: 0;
  27. }
  28. // Themes for different contexts
  29. &.callout-danger {
  30. border-left-color: darken(theme-color("danger"), 10%);
  31. }
  32. &.callout-warning {
  33. border-left-color: darken(theme-color("warning"), 10%);
  34. }
  35. &.callout-info {
  36. border-left-color: darken(theme-color("info"), 10%);
  37. }
  38. &.callout-success {
  39. border-left-color: darken(theme-color("success"), 10%);
  40. }
  41. }
  42. @include dark-mode () {
  43. .callout {
  44. background-color: lighten($dark, 5%);
  45. &.callout-danger {
  46. border-left-color: lighten($danger-alt, 10%);
  47. }
  48. &.callout-warning {
  49. border-left-color: lighten($warning-alt, 10%);
  50. }
  51. &.callout-info {
  52. border-left-color: lighten($info-alt, 10%);
  53. }
  54. &.callout-success {
  55. border-left-color: lighten($success-alt, 10%);
  56. }
  57. }
  58. }