card.sass 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. @import "../utilities/mixins"
  2. $card-color: $text !default
  3. $card-background-color: $scheme-main !default
  4. $card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
  5. $card-radius: 0.25rem !default
  6. $card-header-background-color: transparent !default
  7. $card-header-color: $text-strong !default
  8. $card-header-padding: 0.75rem 1rem !default
  9. $card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
  10. $card-header-weight: $weight-bold !default
  11. $card-content-background-color: transparent !default
  12. $card-content-padding: 1.5rem !default
  13. $card-footer-background-color: transparent !default
  14. $card-footer-border-top: 1px solid $border-light !default
  15. $card-footer-padding: 0.75rem !default
  16. $card-media-margin: $block-spacing !default
  17. .card
  18. background-color: $card-background-color
  19. border-radius: $card-radius
  20. box-shadow: $card-shadow
  21. color: $card-color
  22. max-width: 100%
  23. position: relative
  24. %card-item
  25. &:first-child
  26. border-top-left-radius: $card-radius
  27. border-top-right-radius: $card-radius
  28. &:last-child
  29. border-bottom-left-radius: $card-radius
  30. border-bottom-right-radius: $card-radius
  31. .card-header
  32. @extend %card-item
  33. background-color: $card-header-background-color
  34. align-items: stretch
  35. box-shadow: $card-header-shadow
  36. display: flex
  37. .card-header-title
  38. align-items: center
  39. color: $card-header-color
  40. display: flex
  41. flex-grow: 1
  42. font-weight: $card-header-weight
  43. padding: $card-header-padding
  44. &.is-centered
  45. justify-content: center
  46. .card-header-icon
  47. align-items: center
  48. cursor: pointer
  49. display: flex
  50. justify-content: center
  51. padding: $card-header-padding
  52. .card-image
  53. display: block
  54. position: relative
  55. &:first-child
  56. img
  57. border-top-left-radius: $card-radius
  58. border-top-right-radius: $card-radius
  59. &:last-child
  60. img
  61. border-bottom-left-radius: $card-radius
  62. border-bottom-right-radius: $card-radius
  63. .card-content
  64. @extend %card-item
  65. background-color: $card-content-background-color
  66. padding: $card-content-padding
  67. .card-footer
  68. @extend %card-item
  69. background-color: $card-footer-background-color
  70. border-top: $card-footer-border-top
  71. align-items: stretch
  72. display: flex
  73. .card-footer-item
  74. align-items: center
  75. display: flex
  76. flex-basis: 0
  77. flex-grow: 1
  78. flex-shrink: 0
  79. justify-content: center
  80. padding: $card-footer-padding
  81. &:not(:last-child)
  82. +ltr-property("border", $card-footer-border-top)
  83. // Combinations
  84. .card
  85. .media:not(:last-child)
  86. margin-bottom: $card-media-margin