@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/cards.less

@@ -0,0 +1,555 @@
+@import "../mixins";
+
+@_card_ribbon_padding: 2 * @grid_spacing / 3;
+@_radius: @border_card_radius;
+@_h_height: @grid_spacing * 3.5 + @grid_cell;
+
+.@{PCSS}-card {
+    .Panel(card);
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    //grid-template-rows: minmax(@_h_height,auto) auto auto;
+    grid-template-rows: minmax(@_h_height, 1fr) repeat(3, auto);
+    grid-template-areas: 'ribbon ribbon ribbon' 'heading heading heading' 'body body body' 'footer footer footer';
+
+    > .card-heading,
+    > .card-tools,
+    > .card-body,
+    > .card-footer {
+        order: 1;
+        z-index: 1;
+    }
+
+    > .card-body {
+        grid-area: body;
+        //padding-top: @grid_spacing/2;
+    }
+
+    > .card-heading {
+        grid-area: heading;
+        box-sizing: border-box; /*
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;*/
+        //height: @_h_height;
+        // align-self: end;
+        //display: block;
+        text-align: center;
+    }
+
+    > .card-img when (@shadows = true) {
+        box-shadow: inset 0 -@grid_spacing/8 @grid_spacing rgba(0,0,0,0.5);
+    }
+
+    > .card-heading when (@shadows = false) {
+        color: #fff;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
+    }
+
+
+    > .card-img {
+        grid-column: ~"1 / -1";
+        grid-row: ~"1 / 3";
+        order: 0;
+        z-index: 0;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        position: absolute;
+        border-top-left-radius: @_radius;
+        border-top-right-radius: @_radius;
+        overflow: hidden;
+
+        &.img-auto {
+            position: static;
+            height: auto;
+        }
+
+        &.img-top {
+            grid-row: ~"1 / 2";
+
+            & ~ .card-heading {
+                text-shadow: none;
+                color: inherit;
+                text-align: start;
+            }
+        }
+    }
+
+    > .card-ribbon {
+        grid-area: ribbon;
+        order: 2;
+        z-index: 2;
+        align-self: center;
+        justify-self: center;
+        margin-top: @grid_spacing * 2;
+        margin-bottom: @grid_spacing;
+        margin-right: 2*@grid_spacing/3;
+        margin-left: $margin-right;
+    }
+
+    > .card-img.img-top {
+        & ~ .card-ribbon {
+            margin-bottom: 2 * @grid_spacing;
+        }
+    }
+
+    > .card-tools {
+        // top: @grid_spacing/1.5;
+    }
+
+    > .card-footer {
+        grid-area: footer;
+    }
+
+    > .card-tools {
+        grid-column: 3;
+        grid-row: 1;
+        padding: @panel_spacing;
+        // reset
+        position: static;
+        // override
+        align-self: start;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+}
+
+.@{PCSS}-card.card-full {
+    grid-template-areas: 'ribbon ribbon tools' 'ribbon ribbon .' 'heading heading heading' 'body body body' 'footer footer footer';
+    min-height: @_h_height;
+    grid-template-rows: auto 1fr repeat(3, auto);
+
+    > .card-img {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        box-shadow: none;
+        grid-row: ~"1 / -1";
+        border-bottom-left-radius: @_radius;
+        border-bottom-right-radius: @_radius;
+    }
+
+    > .card-heading {
+        height: @_h_height;
+        display: flex;
+        align-items: flex-end;
+        text-align: start;
+    }
+
+    > .card-body,
+    > .card-footer {
+        color: rgba(255,255,255,0.8);
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+    }
+
+    > .card-ribbon {
+        margin: 0;
+        grid-area: unset;
+        position: absolute;
+        left: @_card_ribbon_padding;
+        top: $left;
+    }
+}
+
+.CardSide() {
+    display: grid;
+
+    > .card-ribbon {
+        margin: 0;
+        grid-area: unset;
+        position: absolute;
+        left: @_card_ribbon_padding;
+        top: $left;
+    }
+
+    > .card-heading {
+        grid-area: heading;
+        text-align: start;
+    }
+
+    > .card-body {
+        grid-area: body;
+    }
+
+    > .card-footer {
+        grid-area: footer;
+    }
+
+    > .card-img {
+        position: relative;
+        grid-area: img;
+        height: 100%;
+        //display: block;
+    }
+
+    .card-img {
+        border-top-left-radius: @_radius;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: @_radius;
+        border-bottom-right-radius: 0;
+    }
+
+    .card-img when (@shadows = true) {
+        box-shadow: inset -@grid_spacing/8 0 @grid_spacing rgba(0,0,0,0.5);
+    }
+
+    .card-heading {
+        box-sizing: border-box;
+        padding-top: 2 * @grid_spacing / 3;
+        height: auto;
+        text-align: start;
+    }
+
+    .card-heading when (@shadows = false) {
+        color: inherit;
+        text-shadow: none;
+    }
+
+    .card-tools {
+        grid-area: tools;
+        align-self: center;
+    }
+}
+
+.CardLeft() {
+    grid-template-columns: 33% 1fr auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
+
+    .card-img {
+        border-top-left-radius: @_radius;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: @_radius;
+        border-bottom-right-radius: 0;
+    }
+
+    &.card-img-wide {
+        grid-template-columns: 50% 1fr auto;
+    }
+
+    &.card-img-slim {
+        grid-template-columns: 25% 1fr auto;
+    }
+}
+
+.CardRight() {
+    grid-template-columns: 1fr auto 33%;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
+
+    .card-img {
+        border-top-left-radius: 0;
+        border-top-right-radius: @_radius;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: @_radius;
+    }
+
+    .card-ribbon {
+        right: @_card_ribbon_padding;
+        left: inherit;
+    }
+
+    &.card-img-wide {
+        grid-template-columns: 1fr auto 50%;
+    }
+
+    &.card-img-slim {
+        grid-template-columns: 1fr auto 25%;
+    }
+}
+
+/* #region RIBBON */
+.CardRibbonSize(@_size) {
+    width: @_size;
+    @_brd: floor(@_size / 11.5);
+
+    &.ribbon-border,
+    &.border {
+        border: @_brd solid fade( /*@color_default*/ #fff, 50);
+    }
+
+    &.ribbon-rise,
+    &.rise {
+        box-shadow: 0 2px @_brd rgba(0,0,0,.5);
+
+        & when (@gradients = true) {
+            //box-shadow: 0 2px @grid_spacing/3 rgba(0,0,0,.5), inset 0 -@grid_spacing/4 @grid_spacing * 4/3 rgba(0,0,0,0.25);
+            &.ribbon-border,
+            &.border {
+                box-shadow: 0 2px @_brd rgba(0,0,0,.5), inset 0 @_brd / 2 round(@_size / 4) rgba(0,0,0,0.5);
+            }
+        }
+    }
+}
+
+.CardRibbon(@_size) {
+    aspect-ratio: ~"1 / 1";
+    .CardRibbonSize(@_size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &.ribbon-offset {
+        top: -@grid_spacing/4 !important;
+    }
+}
+
+.CardRibbon() {
+    .CardRibbon(@grid_cell + @grid_spacing * 2 / 3);
+}
+
+.@{PCSS}-card > .card-ribbon {
+    /*position: absolute;
+    z-index: 2;*/
+    .CardRibbon();
+    // avoid declaring default colors, since they will override any fill-specific classes for the ribbon (e.g. 'fill-primary-container').
+    /*background-color: ~"var(--@{PCSS}-color-background)";
+    color: ~"var(--@{PCSS}-color-default)";*/
+
+    &:not(.shape-circle,.shape-square) {
+        border-radius: @_radius;
+    }
+
+    &.accent,
+    &.ribbon-accent {
+        background-color: @color_accent;
+        color: @color_accent_inv;
+    }
+
+    &.danger,
+    &.ribbon-danger {
+        background-color: @color_danger;
+        color: @color_danger_inv;
+    }
+
+    &.primary,
+    &.ribbon-primary {
+        background-color: @color_primary;
+        color: @color_primary_inv;
+    }
+
+    &.success,
+    &.ribbon-success {
+        background-color: @color_success;
+        color: @color_success_inv;
+    }
+
+    &.ribbon-invert {
+        background-color: @color_default;
+        color: @color_default_inv;
+    }
+
+    &.ribbon-disabled {
+        background-color: @color_disabled;
+        color: @color_disabled_inv;
+    }
+
+    &.ribbon-default {
+        background-color: @color_default_inv;
+        color: @color_default;
+    }
+
+    &.warning,
+    &.ribbon-warning {
+        background-color: @color_warning;
+        color: @color_warning_inv;
+    }
+
+    &.circular,
+    &.ribbon-circle {
+        border-radius: 50%;
+    }
+
+    &.ribbon-small,
+    &.ribbon-md {
+        .CardRibbonSize(@grid_cell);
+    }
+
+    &.ribbon-smaller,
+    &.ribbon-sm {
+        .CardRibbonSize(@grid_spacing * 2);
+    }
+
+    &.ribbon-tiny,
+    &.ribbon-xs {
+        .CardRibbonSize(@grid_spacing);
+    }
+
+    &.ribbon-lg {
+        .CardRibbonSize(128px);
+    }
+
+    &.ribbon-xl {
+        .CardRibbonSize(192px);
+    }
+}
+/* #endregion */
+
+/*#region ANCHOR/BUTTON-FIXES*/
+.@{PCSS}-card {
+    @{P}-button,
+    .@{PCSS}-button {
+        text-shadow: none;
+    }
+}
+
+@{P}-a.@{PCSS}-card {
+    position: relative;
+    color: @color_default;
+
+    .card-body, .card-heading, .card-footer {
+        //z-index: 1;
+        position: relative;
+    }
+
+    .card-img {
+        //z-index: 0;
+    }
+
+    .card-ribbon {
+        //z-index: 2;
+    }
+}
+
+/*#endregion*/
+
+
+.@{PCSS}-card.card-left {
+    .CardSide();
+    .CardLeft();
+}
+
+.@{PCSS}-card.card-right {
+    .CardSide();
+    .CardRight();
+}
+
+@media (max-width: @threshold_sm - 1) {
+
+    .@{PCSS}-card.card-xs-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-xs-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_sm) {
+
+    .@{PCSS}-card.card-sm-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-sm-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_md) {
+
+    .@{PCSS}-card.card-md-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-md-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_lg) {
+
+    .@{PCSS}-card.card-lg-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-lg-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_xl) {
+
+    .@{PCSS}-card.card-xl-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-xl-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_hd) {
+
+    .@{PCSS}-card.card-hd-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-hd-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_2k) {
+
+    .@{PCSS}-card.card-2k-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-2k-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (min-width: @threshold_4k) {
+
+    .@{PCSS}-card.card-4k-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-4k-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+@media (orientation: portrait) {
+
+    .@{PCSS}-card.card-v-left {
+        .CardSide();
+        .CardLeft();
+    }
+
+    .@{PCSS}-card.card-v-right {
+        .CardSide();
+        .CardRight();
+    }
+}
+
+.@{PCSS}-body {
+    &.@{PCSS}-anim,
+    &.@{PCSS}-animations {
+        .PanelRiseAnim(card);
+    }
+}