@import './mixins/mixins.scss'; $--card-margin-left: ( 'small': 16px, 'medium': 24px, 'large': 32px, 'huge': 40px ); $--card-margin-top: ( 'small': 12px, 'medium': 16px, 'large': 20px, 'huge': 24px ); $--card-margin-bottom: ( 'small': 8px, 'medium': 12px, 'large': 16px, 'huge': 20px ); @mixin card-size-mixin ($size) { @include m($size + '-size') { @include m(content-segmented) { & > { @include e(content) { &:not(:first-child) { margin-top: 0; padding-top: map-get($--card-margin-bottom, $size); } } } } @include m(content-soft-segmented) { & > { @include e(content) { padding: 0; margin: map-get($--card-margin-bottom, $size) map-get($--card-margin-left, $size); &:not(:first-child) { margin-top: 0; padding-top: map-get($--card-margin-bottom, $size); } } } } @include m(footer-segmented) { & > { @include e(footer) { &:not(:first-child) { margin-top: 0; padding-top: map-get($--card-margin-bottom, $size); } } } } @include m(footer-soft-segmented) { & > { @include e(footer) { padding: 0; margin: map-get($--card-margin-bottom, $size) map-get($--card-margin-left, $size); &:not(:first-child) { margin-top: 0; padding-top: map-get($--card-margin-bottom, $size); } } } } @include b(card-header) { padding: 0px map-get($--card-margin-left, $size); margin: map-get($--card-margin-top, $size) 0 map-get($--card-margin-bottom, $size) 0; @include e(main) { font-size: 18px; } @include e(extra) { font-size: 14px; } } @include e(content, footer) { padding: 0px map-get($--card-margin-left, $size); margin: map-get($--card-margin-bottom, $size) 0; font-size: 14px; } @include e(action) { background-color: $--card-action-background-color; padding: map-get($--card-margin-bottom, $size) map-get($--card-margin-left, $size); font-size: 14px; } } } @include themes-mixin { @include b(card) { @include once { display: block; overflow: hidden; width: 100%; box-sizing: border-box; position: relative; transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; border-radius: 6px; @include card-size-mixin('small'); @include card-size-mixin('medium'); @include card-size-mixin('large'); @include card-size-mixin('huge'); @include b(card-cover) { width: 100%; img { display: block; width: 100%; } } } background-color: $--card-background-color; color: $--card-text-color; @include m(bordered) { border: 1px solid $--card-border-color; } @include m(action-segmented) { @include e(action) { &:not(:first-child) { border-top: 1px solid $--card-border-color; } } } @include m(content-segmented, content-soft-segmented) { @include e(content) { @include once { transition: border-color .3s $--n-ease-in-out-cubic-bezier; } &:not(:first-child) { border-top: 1px solid $--card-border-color; } } } @include m(footer-segmented, footer-soft-segmented) { @include e(footer) { @include once { transition: border-color .3s $--n-ease-in-out-cubic-bezier; } &:not(:first-child) { border-top: 1px solid $--card-border-color; } } } @include b(card-header) { @include once { box-sizing: border-box; display: flex; align-items: center; } @include e(main) { @include once { font-weight: 500; font-size: 18px; transition: color .3s $--n-ease-in-out-cubic-bezier; flex: 1; } color: $--card-title-text-color; } @include e(extra) { @include once { font-weight: 400; font-size: 14px; transition: color .3s $--n-ease-in-out-cubic-bezier; } color: $--card-text-color; } @include e(close-mark) { @include once { cursor: pointer; transition: fill .3s $--n-ease-in-out-cubic-bezier; } fill: $--card-close-fill; } } @include once { @include e(content) { box-sizing: border-box; line-height: 1.5; font-size: 14px; } @include e(footer) { box-sizing: border-box; line-height: 1.5; font-size: 14px; } } @include e(action) { @include once { box-sizing: border-box; transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; line-height: 1.5; font-size: 14px; background-clip: padding-box; } background-color: $--card-action-background-color; } } }