Layout von Websiten mit Bootstrap und Foundation
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.

_card.scss 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. //
  2. // Base styles
  3. //
  4. .card {
  5. position: relative;
  6. display: flex;
  7. flex-direction: column;
  8. min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
  9. height: $card-height;
  10. word-wrap: break-word;
  11. background-color: $card-bg;
  12. background-clip: border-box;
  13. border: $card-border-width solid $card-border-color;
  14. @include border-radius($card-border-radius);
  15. > hr {
  16. margin-right: 0;
  17. margin-left: 0;
  18. }
  19. > .list-group {
  20. border-top: inherit;
  21. border-bottom: inherit;
  22. &:first-child {
  23. border-top-width: 0;
  24. @include border-top-radius($card-inner-border-radius);
  25. }
  26. &:last-child {
  27. border-bottom-width: 0;
  28. @include border-bottom-radius($card-inner-border-radius);
  29. }
  30. }
  31. }
  32. .card-body {
  33. // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  34. // as much space as possible, ensuring footers are aligned to the bottom.
  35. flex: 1 1 auto;
  36. // Workaround for the image size bug in IE
  37. // See: https://github.com/twbs/bootstrap/pull/28855
  38. min-height: 1px;
  39. padding: $card-spacer-x;
  40. color: $card-color;
  41. }
  42. .card-title {
  43. margin-bottom: $card-spacer-y;
  44. }
  45. .card-subtitle {
  46. margin-top: -$card-spacer-y / 2;
  47. margin-bottom: 0;
  48. }
  49. .card-text:last-child {
  50. margin-bottom: 0;
  51. }
  52. .card-link {
  53. @include hover() {
  54. text-decoration: none;
  55. }
  56. + .card-link {
  57. margin-left: $card-spacer-x;
  58. }
  59. }
  60. //
  61. // Optional textual caps
  62. //
  63. .card-header {
  64. padding: $card-spacer-y $card-spacer-x;
  65. margin-bottom: 0; // Removes the default margin-bottom of <hN>
  66. color: $card-cap-color;
  67. background-color: $card-cap-bg;
  68. border-bottom: $card-border-width solid $card-border-color;
  69. &:first-child {
  70. @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
  71. }
  72. + .list-group {
  73. .list-group-item:first-child {
  74. border-top: 0;
  75. }
  76. }
  77. }
  78. .card-footer {
  79. padding: $card-spacer-y $card-spacer-x;
  80. color: $card-cap-color;
  81. background-color: $card-cap-bg;
  82. border-top: $card-border-width solid $card-border-color;
  83. &:last-child {
  84. @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
  85. }
  86. }
  87. //
  88. // Header navs
  89. //
  90. .card-header-tabs {
  91. margin-right: -$card-spacer-x / 2;
  92. margin-bottom: -$card-spacer-y;
  93. margin-left: -$card-spacer-x / 2;
  94. border-bottom: 0;
  95. }
  96. .card-header-pills {
  97. margin-right: -$card-spacer-x / 2;
  98. margin-left: -$card-spacer-x / 2;
  99. }
  100. // Card image
  101. .card-img-overlay {
  102. position: absolute;
  103. top: 0;
  104. right: 0;
  105. bottom: 0;
  106. left: 0;
  107. padding: $card-img-overlay-padding;
  108. }
  109. .card-img,
  110. .card-img-top,
  111. .card-img-bottom {
  112. flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
  113. width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
  114. }
  115. .card-img,
  116. .card-img-top {
  117. @include border-top-radius($card-inner-border-radius);
  118. }
  119. .card-img,
  120. .card-img-bottom {
  121. @include border-bottom-radius($card-inner-border-radius);
  122. }
  123. // Card deck
  124. .card-deck {
  125. .card {
  126. margin-bottom: $card-deck-margin;
  127. }
  128. @include media-breakpoint-up(sm) {
  129. display: flex;
  130. flex-flow: row wrap;
  131. margin-right: -$card-deck-margin;
  132. margin-left: -$card-deck-margin;
  133. .card {
  134. // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
  135. flex: 1 0 0%;
  136. margin-right: $card-deck-margin;
  137. margin-bottom: 0; // Override the default
  138. margin-left: $card-deck-margin;
  139. }
  140. }
  141. }
  142. //
  143. // Card groups
  144. //
  145. .card-group {
  146. // The child selector allows nested `.card` within `.card-group`
  147. // to display properly.
  148. > .card {
  149. margin-bottom: $card-group-margin;
  150. }
  151. @include media-breakpoint-up(sm) {
  152. display: flex;
  153. flex-flow: row wrap;
  154. // The child selector allows nested `.card` within `.card-group`
  155. // to display properly.
  156. > .card {
  157. // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
  158. flex: 1 0 0%;
  159. margin-bottom: 0;
  160. + .card {
  161. margin-left: 0;
  162. border-left: 0;
  163. }
  164. // Handle rounded corners
  165. @if $enable-rounded {
  166. &:not(:last-child) {
  167. @include border-right-radius(0);
  168. .card-img-top,
  169. .card-header {
  170. // stylelint-disable-next-line property-blacklist
  171. border-top-right-radius: 0;
  172. }
  173. .card-img-bottom,
  174. .card-footer {
  175. // stylelint-disable-next-line property-blacklist
  176. border-bottom-right-radius: 0;
  177. }
  178. }
  179. &:not(:first-child) {
  180. @include border-left-radius(0);
  181. .card-img-top,
  182. .card-header {
  183. // stylelint-disable-next-line property-blacklist
  184. border-top-left-radius: 0;
  185. }
  186. .card-img-bottom,
  187. .card-footer {
  188. // stylelint-disable-next-line property-blacklist
  189. border-bottom-left-radius: 0;
  190. }
  191. }
  192. }
  193. }
  194. }
  195. }
  196. //
  197. // Columns
  198. //
  199. .card-columns {
  200. .card {
  201. margin-bottom: $card-columns-margin;
  202. }
  203. @include media-breakpoint-up(sm) {
  204. column-count: $card-columns-count;
  205. column-gap: $card-columns-gap;
  206. orphans: 1;
  207. widows: 1;
  208. .card {
  209. display: inline-block; // Don't let them vertically span multiple columns
  210. width: 100%; // Don't let their width change
  211. }
  212. }
  213. }
  214. //
  215. // Accordion
  216. //
  217. .accordion {
  218. > .card {
  219. overflow: hidden;
  220. &:not(:last-of-type) {
  221. border-bottom: 0;
  222. @include border-bottom-radius(0);
  223. }
  224. &:not(:first-of-type) {
  225. @include border-top-radius(0);
  226. }
  227. > .card-header {
  228. @include border-radius(0);
  229. margin-bottom: -$card-border-width;
  230. }
  231. }
  232. }