card.sass 1.3 KB

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