in KImg with z-index 1 should cover the placeholder after loaded */
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- }
-
.title {
display: inline-block; // allows title placeholder in the skeleton card
width: 100%; // allows title placeholder in the skeleton card
@@ -634,57 +603,94 @@
outline: none; // the focus ring is moved to the whole
}
- /************* Manage spaces *************/
+ // Because the title and the areas above and below it
+ // are grouped together in all layoyts, abstract them
+ // into one whole here. Simplifies common spacing
+ // styles as well as layout-specific styles.
+ .around-title {
+ display: flex;
+ flex-direction: column;
+
+ .heading {
+ order: 2;
+ }
+
+ .above-title {
+ order: 1;
+ }
+
+ .below-title {
+ order: 3;
+ }
+ }
+
+ /************* Spacing *************/
+ // first reset
+ .around-title,
.heading,
.above-title,
.below-title,
.footer {
padding: 0;
- margin-top: 0;
- margin-right: $spacer;
- margin-bottom: calc(#{$spacer} / 2);
- margin-left: $spacer;
+ margin: 0;
}
- // when the 'aboveTitle' area is present,
- // apply top margin to it and also set smaller
- // margin between the area and the heading...
- .with-above-title {
- .above-title {
- margin-top: $spacer;
- margin-bottom: calc(#{$spacer} / 2);
- }
+ /* stylelint-disable no-duplicate-selectors */
+ .around-title {
+ padding: $spacer;
}
+ /* stylelint-enable no-duplicate-selectors */
- // ...and when the 'aboveTitle' area is not present,
- // instead apply the top margin to the heading
- .without-above-title {
- .heading {
- margin-top: $spacer;
- }
+ .footer {
+ padding: 0 $spacer $spacer $spacer;
}
- // if there's the 'belowTitle' area present,
- // override the heading's margin to smaller one
- .with-below-title {
- .heading {
- margin-bottom: calc(#{$spacer} / 2);
- }
+ .above-title {
+ padding-bottom: calc(#{$spacer} / 2);
}
+ .below-title {
+ padding-top: calc(#{$spacer} / 2);
+ }
+
+ /************* Thumbnail **************/
+
/* stylelint-disable no-duplicate-selectors */
- .footer {
- margin-top: auto; // push footer to the bottom
+ .thumbnail {
+ position: relative; /* for absolute positioning of .thumbnail-placeholder */
}
/* stylelint-enable no-duplicate-selectors */
+ .thumbnail-placeholder {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 0; /* ![]()
in KImg with z-index 1 should cover the placeholder after loaded */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ }
+
/************* Layout-specific styles *************/
.vertical-with-large-thumbnail {
+ .upper-card-area {
+ display: flex;
+ flex-direction: column;
+ }
+
.thumbnail {
+ order: 1;
height: 180px;
}
+
+ .around-title {
+ order: 2;
+ }
}
.vertical-with-small-thumbnail {
@@ -698,104 +704,90 @@
}
}
- .horizontal-with-large-thumbnail {
- $thumbnail-width: 40%;
+ .horizontal-with-small-thumbnail {
+ .upper-card-area {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ }
.thumbnail {
- position: absolute;
- width: $thumbnail-width;
- height: 100%;
+ width: 30%;
+ margin-top: $spacer;
+ margin-bottom: $spacer;
}
- .heading,
- .above-title,
- .below-title,
- .footer {
- width: calc(100% - #{$thumbnail-width} - 2 * #{$spacer});
+ .around-title {
+ width: 70%;
}
&.thumbnail-align-left {
- align-items: flex-end;
-
.thumbnail {
- left: 0;
+ order: 1;
+ margin-left: $spacer;
+ }
+
+ .around-title {
+ order: 2;
}
}
&.thumbnail-align-right {
- align-items: flex-start;
-
.thumbnail {
- right: 0;
+ order: 2;
+ margin-right: $spacer;
+ }
+
+ .around-title {
+ order: 1;
}
}
}
- .horizontal-with-small-thumbnail {
- $thumbnail-width: null;
-
- /*
- Coordinates space taken by the thumbnail area and the content area
- next to it more intelligently in browsers that support `clamp()` by:
-
- - Instead of defining 'width', 'min-width', and 'max-width' separately,
- `clamp()` is used with the goal to have the actual thumbnail width
- saved in the single `$thumbnail-width` value.
-
- - The `$thumbnail-width` value is then referenced when calculating
- the remaining space for the content area, ensuring the precise
- distribution of space.
-
- Resolves some issues related to unprecise calculations, most importantly
- this removes the area of empty space between the thumbnail and content areas
- in some card's sizes, wasting space that can be used for card's textual content.
- */
- @mixin clamp-with-fallback($min, $preferred, $max) {
- // fallback for browsers that don't support 'clamp()'
- $thumbnail-width: $preferred;
-
- width: $thumbnail-width;
- min-width: $min;
- max-width: $max;
+ .horizontal-with-large-thumbnail {
+ // override few styles from .horizontal-with-small-thumbnail
+ // to stretch the thumbnail to the full height of the card
- // clamp(1px, 1%, 1px) only used for testing support
- @supports (width: clamp(1px, 1%, 1px)) {
- $thumbnail-width: clamp(#{$min}, #{$preferred}, #{$max});
+ /* stylelint-disable scss/at-extend-no-missing-placeholder */
+ @extend .horizontal-with-small-thumbnail;
+ /* stylelint-enable scss/at-extend-no-missing-placeholder */
- width: $thumbnail-width;
- }
+ &.card-area {
+ position: relative; /* for absolute positioning of .thumbnail */
}
.thumbnail {
- @include clamp-with-fallback(100px, 35%, 120px);
-
position: absolute;
- top: $spacer;
- }
-
- .heading,
- .above-title,
- .below-title {
- width: calc(100% - #{$thumbnail-width} - 3 * #{$spacer});
+ height: 100%;
+ margin-top: 0;
+ margin-bottom: 0;
}
.footer {
- width: calc(100% - 2 * #{$spacer});
+ width: 70%;
}
&.thumbnail-align-left {
- align-items: flex-end;
-
.thumbnail {
- left: $spacer;
+ left: 0;
+ margin-left: 0;
+ }
+
+ .around-title,
+ .footer {
+ margin-left: auto;
}
}
&.thumbnail-align-right {
- align-items: flex-start;
-
.thumbnail {
- right: $spacer;
+ right: 0;
+ margin-right: 0;
+ }
+
+ .around-title,
+ .footer {
+ margin-right: auto;
}
}
}