| 1 | // Layout (card) module's mixin definitions are here. For the module itself
|
|---|
| 2 | // check `_layout.scss`.
|
|---|
| 3 | // Mixin for alternate card sizes:
|
|---|
| 4 | // $card-alt-size-name: The name of the class used for the alternate size card.
|
|---|
| 5 | // $card-alt-size-width: The width of the alternate size card.
|
|---|
| 6 | @mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
|
|---|
| 7 | @if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
|
|---|
| 8 | .#{$card-name}.#{$card-alt-size-name} {
|
|---|
| 9 | max-width: $card-alt-size-width;
|
|---|
| 10 | width: auto;
|
|---|
| 11 | }
|
|---|
| 12 | }
|
|---|
| 13 | @else {
|
|---|
| 14 | @media screen and (min-width: #{$card-alt-size-width}) {
|
|---|
| 15 | .#{$card-name}.#{$card-alt-size-name} {
|
|---|
| 16 | max-width: $card-alt-size-width;
|
|---|
| 17 | }
|
|---|
| 18 | }
|
|---|
| 19 | }
|
|---|
| 20 | }
|
|---|
| 21 | // Mixin for alternate cards (card color variants):
|
|---|
| 22 | // $card-alt-name: The name of the class used for the alternate card.
|
|---|
| 23 | // $card-alt-back-color: The background color of the alternate card.
|
|---|
| 24 | // $card-alt-fore-color: The text color of the alternate card.
|
|---|
| 25 | // $card-alt-border-color: The border style of the alternate card.
|
|---|
| 26 | @mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
|
|---|
| 27 | $card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
|
|---|
| 28 | .#{$card-name}.#{$card-alt-name} {
|
|---|
| 29 | @if $card-alt-back-color != $card-back-color {
|
|---|
| 30 | #{$card-back-color-var}: $card-alt-back-color;
|
|---|
| 31 | }
|
|---|
| 32 | @if $card-alt-fore-color != $card-fore-color {
|
|---|
| 33 | #{$card-fore-color-var}: $card-alt-fore-color;
|
|---|
| 34 | }
|
|---|
| 35 | @if $card-alt-border-color != $card-border-color {
|
|---|
| 36 | #{$card-border-color-var}: $card-alt-border-color;
|
|---|
| 37 | }
|
|---|
| 38 | }
|
|---|
| 39 | }
|
|---|
| 40 | // Mixin for alternate card sections (card section color variants):
|
|---|
| 41 | // $card-section-alt-name: The name of the class used for the alternate card section.
|
|---|
| 42 | // $card-section-alt-back-color: The background color of the alternate card section.
|
|---|
| 43 | // $card-section-alt-fore-color: The text color of the alternate card section.
|
|---|
| 44 | @mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
|
|---|
| 45 | $card-section-alt-fore-color : $card-fore-color) {
|
|---|
| 46 | .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
|---|
| 47 | @if $card-section-alt-back-color != $card-back-color {
|
|---|
| 48 | #{$card-back-color-var}: $card-section-alt-back-color;
|
|---|
| 49 | }
|
|---|
| 50 | @if $card-section-alt-fore-color != $card-fore-color {
|
|---|
| 51 | #{$card-fore-color-var}: $card-section-alt-fore-color;
|
|---|
| 52 | }
|
|---|
| 53 | }
|
|---|
| 54 | }
|
|---|
| 55 | // Mixin for alternate card sections (card section padding variants):
|
|---|
| 56 | // $card-section-alt-name: The name of the class used for the alternate card section.
|
|---|
| 57 | // $card-section-alt-padding: The padding of the alternate card section.
|
|---|
| 58 | @mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
|---|
| 59 | .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
|---|
| 60 | padding: $card-section-alt-padding;
|
|---|
| 61 | }
|
|---|
| 62 | }
|
|---|
