You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

239 lines
6.8 KiB

3 months ago
  1. //
  2. // Base styles
  3. //
  4. .card {
  5. // scss-docs-start card-css-vars
  6. --#{$prefix}card-spacer-y: #{$card-spacer-y};
  7. --#{$prefix}card-spacer-x: #{$card-spacer-x};
  8. --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  9. --#{$prefix}card-title-color: #{$card-title-color};
  10. --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
  11. --#{$prefix}card-border-width: #{$card-border-width};
  12. --#{$prefix}card-border-color: #{$card-border-color};
  13. --#{$prefix}card-border-radius: #{$card-border-radius};
  14. --#{$prefix}card-box-shadow: #{$card-box-shadow};
  15. --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  16. --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  17. --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  18. --#{$prefix}card-cap-bg: #{$card-cap-bg};
  19. --#{$prefix}card-cap-color: #{$card-cap-color};
  20. --#{$prefix}card-height: #{$card-height};
  21. --#{$prefix}card-color: #{$card-color};
  22. --#{$prefix}card-bg: #{$card-bg};
  23. --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  24. --#{$prefix}card-group-margin: #{$card-group-margin};
  25. // scss-docs-end card-css-vars
  26. position: relative;
  27. display: flex;
  28. flex-direction: column;
  29. min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
  30. height: var(--#{$prefix}card-height);
  31. color: var(--#{$prefix}body-color);
  32. word-wrap: break-word;
  33. background-color: var(--#{$prefix}card-bg);
  34. background-clip: border-box;
  35. border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
  36. @include border-radius(var(--#{$prefix}card-border-radius));
  37. @include box-shadow(var(--#{$prefix}card-box-shadow));
  38. > hr {
  39. margin-right: 0;
  40. margin-left: 0;
  41. }
  42. > .list-group {
  43. border-top: inherit;
  44. border-bottom: inherit;
  45. &:first-child {
  46. border-top-width: 0;
  47. @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
  48. }
  49. &:last-child {
  50. border-bottom-width: 0;
  51. @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
  52. }
  53. }
  54. // Due to specificity of the above selector (`.card > .list-group`), we must
  55. // use a child selector here to prevent double borders.
  56. > .card-header + .list-group,
  57. > .list-group + .card-footer {
  58. border-top: 0;
  59. }
  60. }
  61. .card-body {
  62. // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  63. // as much space as possible, ensuring footers are aligned to the bottom.
  64. flex: 1 1 auto;
  65. padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
  66. color: var(--#{$prefix}card-color);
  67. }
  68. .card-title {
  69. margin-bottom: var(--#{$prefix}card-title-spacer-y);
  70. color: var(--#{$prefix}card-title-color);
  71. }
  72. .card-subtitle {
  73. margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
  74. margin-bottom: 0;
  75. color: var(--#{$prefix}card-subtitle-color);
  76. }
  77. .card-text:last-child {
  78. margin-bottom: 0;
  79. }
  80. .card-link {
  81. &:hover {
  82. text-decoration: if($link-hover-decoration == underline, none, null);
  83. }
  84. + .card-link {
  85. margin-left: var(--#{$prefix}card-spacer-x);
  86. }
  87. }
  88. //
  89. // Optional textual caps
  90. //
  91. .card-header {
  92. padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
  93. margin-bottom: 0; // Removes the default margin-bottom of <hN>
  94. color: var(--#{$prefix}card-cap-color);
  95. background-color: var(--#{$prefix}card-cap-bg);
  96. border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
  97. &:first-child {
  98. @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
  99. }
  100. }
  101. .card-footer {
  102. padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
  103. color: var(--#{$prefix}card-cap-color);
  104. background-color: var(--#{$prefix}card-cap-bg);
  105. border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
  106. &:last-child {
  107. @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
  108. }
  109. }
  110. //
  111. // Header navs
  112. //
  113. .card-header-tabs {
  114. margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
  115. margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
  116. margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
  117. border-bottom: 0;
  118. .nav-link.active {
  119. background-color: var(--#{$prefix}card-bg);
  120. border-bottom-color: var(--#{$prefix}card-bg);
  121. }
  122. }
  123. .card-header-pills {
  124. margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
  125. margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
  126. }
  127. // Card image
  128. .card-img-overlay {
  129. position: absolute;
  130. top: 0;
  131. right: 0;
  132. bottom: 0;
  133. left: 0;
  134. padding: var(--#{$prefix}card-img-overlay-padding);
  135. @include border-radius(var(--#{$prefix}card-inner-border-radius));
  136. }
  137. .card-img,
  138. .card-img-top,
  139. .card-img-bottom {
  140. width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
  141. }
  142. .card-img,
  143. .card-img-top {
  144. @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
  145. }
  146. .card-img,
  147. .card-img-bottom {
  148. @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
  149. }
  150. //
  151. // Card groups
  152. //
  153. .card-group {
  154. // The child selector allows nested `.card` within `.card-group`
  155. // to display properly.
  156. > .card {
  157. margin-bottom: var(--#{$prefix}card-group-margin);
  158. }
  159. @include media-breakpoint-up(sm) {
  160. display: flex;
  161. flex-flow: row wrap;
  162. // The child selector allows nested `.card` within `.card-group`
  163. // to display properly.
  164. > .card {
  165. // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
  166. flex: 1 0 0%;
  167. margin-bottom: 0;
  168. + .card {
  169. margin-left: 0;
  170. border-left: 0;
  171. }
  172. // Handle rounded corners
  173. @if $enable-rounded {
  174. &:not(:last-child) {
  175. @include border-end-radius(0);
  176. .card-img-top,
  177. .card-header {
  178. // stylelint-disable-next-line property-disallowed-list
  179. border-top-right-radius: 0;
  180. }
  181. .card-img-bottom,
  182. .card-footer {
  183. // stylelint-disable-next-line property-disallowed-list
  184. border-bottom-right-radius: 0;
  185. }
  186. }
  187. &:not(:first-child) {
  188. @include border-start-radius(0);
  189. .card-img-top,
  190. .card-header {
  191. // stylelint-disable-next-line property-disallowed-list
  192. border-top-left-radius: 0;
  193. }
  194. .card-img-bottom,
  195. .card-footer {
  196. // stylelint-disable-next-line property-disallowed-list
  197. border-bottom-left-radius: 0;
  198. }
  199. }
  200. }
  201. }
  202. }
  203. }