card.sass 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. $card-color: $text !default
  2. $card-background-color: $white !default
  3. $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
  4. $card-header-background-color: transparent !default
  5. $card-header-color: $text-strong !default
  6. $card-header-padding: 0.75rem !default
  7. $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
  8. $card-header-weight: $weight-bold !default
  9. $card-content-background-color: transparent !default
  10. $card-content-padding: 1.5rem !default
  11. $card-footer-background-color: transparent !default
  12. $card-footer-border-top: 1px solid $border !default
  13. $card-footer-padding: 0.75rem !default
  14. $card-media-margin: $block-spacing !default
  15. .card
  16. background-color: $card-background-color
  17. box-shadow: $card-shadow
  18. color: $card-color
  19. max-width: 100%
  20. position: relative
  21. .card-header
  22. background-color: $card-header-background-color
  23. align-items: stretch
  24. box-shadow: $card-header-shadow
  25. display: flex
  26. .card-header-title
  27. align-items: center
  28. color: $card-header-color
  29. display: flex
  30. flex-grow: 1
  31. font-weight: $card-header-weight
  32. padding: $card-header-padding
  33. &.is-centered
  34. justify-content: center
  35. .card-header-icon
  36. align-items: center
  37. cursor: pointer
  38. display: flex
  39. justify-content: center
  40. padding: $card-header-padding
  41. .card-image
  42. display: block
  43. position: relative
  44. .card-content
  45. background-color: $card-content-background-color
  46. padding: $card-content-padding
  47. .card-footer
  48. background-color: $card-footer-background-color
  49. border-top: $card-footer-border-top
  50. align-items: stretch
  51. display: flex
  52. .card-footer-item
  53. align-items: center
  54. display: flex
  55. flex-basis: 0
  56. flex-grow: 1
  57. flex-shrink: 0
  58. justify-content: center
  59. padding: $card-footer-padding
  60. &:not(:last-child)
  61. border-right: $card-footer-border-top
  62. // Combinations
  63. .card
  64. .media:not(:last-child)
  65. margin-bottom: $card-media-margin