| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- @use 'mixins/mixins' as *;
- @use 'mixins/var' as *;
- @use 'common/var' as *;
-
- @include b(card) {
- @include set-component-css-var('card', $card);
- }
-
- @include b(card) {
- display: flex;
- flex-direction: column;
- border-radius: getCssVar('card', 'border-radius');
- border: 1px solid getCssVar('card', 'border-color');
- background-color: getCssVar('card', 'bg-color');
- overflow: hidden;
- color: getCssVar('text-color', 'primary');
- transition: getCssVar('transition-duration');
-
- @include when(always-shadow) {
- box-shadow: getCssVar('box-shadow', 'light');
- }
-
- @include when(hover-shadow) {
- &:hover,
- &:focus {
- box-shadow: getCssVar('box-shadow', 'light');
- }
- }
-
- @include e(header) {
- padding: calc(#{getCssVar('card', 'padding')} - 2px)
- getCssVar('card', 'padding');
- border-bottom: 1px solid getCssVar('card', 'border-color');
- box-sizing: border-box;
- }
-
- @include e(body) {
- flex-grow: 1; // #23538
- overflow: auto;
- padding: getCssVar('card', 'padding');
- }
-
- @include e(footer) {
- padding: calc(#{getCssVar('card', 'padding')} - 2px)
- getCssVar('card', 'padding');
- border-top: 1px solid getCssVar('card', 'border-color');
- box-sizing: border-box;
- }
- }
|