@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/layout/breadcrumbs.css

@@ -0,0 +1,114 @@
+.pacem-breadcrumbs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    > .breadcrumb {
+        flex-basis: auto;
+        flex-grow: 0;
+        flex-shrink: 1;
+        margin-right: calc(var(--pacem-grid-spacing) / 2);
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    height: var(--pacem-grid-cell);
+}
+
+.breadcrumb {
+    display: grid;
+    grid-column-gap: calc(var(--pacem-grid-spacing) / 2);
+    grid-row-gap: 0;
+    grid-template-columns: auto minmax(calc(3 * var(--pacem-grid-spacing)), auto);
+    grid-template-rows: 1fr repeat(2, auto) 1fr;
+    grid-template-areas: "pad1 main" "extra main" "detail main" "pad2 main";
+    /* reset */
+    text-align: left;
+    text-transform: none;
+    margin: 0;
+    box-sizing: border-box;
+    white-space: nowrap;
+    padding: calc(var(--pacem-grid-spacing) / 4) calc(var(--pacem-grid-spacing) / 2);
+    align-items: center;
+    color: var(--pacem-color-secondary);
+
+    &:hover,
+    &:focus {
+        text-shadow: none;
+    }
+
+    &.breadcrumb-border {
+        border: 1px solid var(--pacem-color-border);
+    }
+
+    > .breadcrumb-extra {
+        grid-area: extra;
+        font-family: var(--pacem-font-tech);
+        font-size: calc(.86rem * var(--pacem-font-rem-factor));
+        line-height: 1;
+        text-align: right;
+    }
+
+    > .breadcrumb-detail {
+        grid-area: detail;
+        font-family: var(--pacem-font-main);
+        font-size: calc(1rem * var(--pacem-font-rem-factor));
+        line-height: 1;
+        text-align: right;
+    }
+
+    > .breadcrumb-main {
+        grid-area: main;
+        font-family: var(--pacem-font-std);
+        font-size: calc(2rem * var(--pacem-font-std-rem-factor));
+        font-weight: var(--pacem-font-weight);
+        min-width: calc(3 * var(--pacem-grid-spacing));
+        height: calc(2 * var(--pacem-grid-spacing));
+        line-height: calc(2 * var(--pacem-grid-spacing));
+    }
+
+    /* .BoxLayout(breadcrumb) */
+    &.breadcrumb-border {
+        border-color: rgb(from var(--pacem-color-default) r g b / 20%);
+    }
+
+    &.breadcrumb-filled {
+        background-color: rgb(from var(--pacem-color-default) r g b / 10%);
+    }
+
+    &.breadcrumb-corners {
+        --pacem--corners-color: var(--pacem-color-default);
+        --pacem--corners-radius: var(--pacem-border-radius);
+    }
+
+    &.breadcrumb-accent { --pacem--crumb: var(--pacem-color-accent); }
+    &.breadcrumb-warning { --pacem--crumb: var(--pacem-color-warning); }
+    &.breadcrumb-success { --pacem--crumb: var(--pacem-color-success); }
+    &.breadcrumb-danger { --pacem--crumb: var(--pacem-color-danger); }
+    &.breadcrumb-error { --pacem--crumb: var(--pacem-color-error); }
+    &.breadcrumb-primary { --pacem--crumb: var(--pacem-color-primary); }
+    &.breadcrumb-secondary { --pacem--crumb: var(--pacem-color-secondary); }
+    &.breadcrumb-disabled { --pacem--crumb: var(--pacem-color-disabled); }
+
+    &:is(.breadcrumb-accent, .breadcrumb-warning, .breadcrumb-success, .breadcrumb-danger, .breadcrumb-error, .breadcrumb-primary, .breadcrumb-secondary, .breadcrumb-disabled) {
+        &.breadcrumb-border {
+            border-color: rgb(from var(--pacem--crumb) r g b / 20%);
+        }
+
+        &.breadcrumb-filled {
+            background-color: rgb(from var(--pacem--crumb) r g b / 10%);
+        }
+
+        &.breadcrumb-corners {
+            --pacem--corners-color: var(--pacem--crumb);
+        }
+    }
+
+    &.home {
+        background-color: var(--pacem-color-background-alt);
+        color: var(--pacem-color-breadcrumb-home-fore);
+        border-color: rgb(from var(--pacem-color-breadcrumb-home-fore) r g b / 20%);
+    }
+}

package/src/layout/cards.css

@@ -0,0 +1,246 @@
+/* the .Panel() mixin (shared with panels): box.css, imported before this file */
+
+.pacem-card {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: minmax(calc(var(--pacem-grid-spacing) * 3.5 + var(--pacem-grid-cell)), 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;
+    }
+
+    > .card-heading {
+        grid-area: heading;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    :--shadows & > .card-img {
+        box-shadow: inset 0 calc(var(--pacem-grid-spacing) / -8) var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
+    }
+
+    :--no-shadows & > .card-heading {
+        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: var(--pacem-border-card-radius);
+        border-top-right-radius: var(--pacem-border-card-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: calc(var(--pacem-grid-spacing) * 2);
+        margin-bottom: var(--pacem-grid-spacing);
+        margin-right: calc(2 * var(--pacem-grid-spacing) / 3);
+        margin-left: calc(2 * var(--pacem-grid-spacing) / 3);
+    }
+
+    > .card-img.img-top {
+        & ~ .card-ribbon {
+            margin-bottom: calc(2 * var(--pacem-grid-spacing));
+        }
+    }
+
+    > .card-footer {
+        grid-area: footer;
+    }
+
+    > .card-tools {
+        grid-column: 3;
+        grid-row: 1;
+        padding: calc(var(--pacem-grid-spacing) / 2);
+        /* reset */
+        position: static;
+        /* override */
+        align-self: start;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+}
+
+.pacem-card.card-full {
+    grid-template-areas: 'ribbon ribbon tools' 'ribbon ribbon .' 'heading heading heading' 'body body body' 'footer footer footer';
+    min-height: calc(var(--pacem-grid-spacing) * 3.5 + var(--pacem-grid-cell));
+    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: var(--pacem-border-card-radius);
+        border-bottom-right-radius: var(--pacem-border-card-radius);
+    }
+
+    > .card-heading {
+        height: calc(var(--pacem-grid-spacing) * 3.5 + var(--pacem-grid-cell));
+        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: calc(2 * var(--pacem-grid-spacing) / 3);
+        top: calc(2 * var(--pacem-grid-spacing) / 3);
+    }
+}
+
+/* .card-left, .card-right (also responsive, e.g. .card-md-left): generated/card-sides.css */
+
+/* #region RIBBON */
+
+.pacem-card > .card-ribbon {
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &.ribbon-offset {
+        top: calc(var(--pacem-grid-spacing) / -4) !important;
+    }
+
+    /* avoid declaring default colors, since they will override any fill-specific classes for the ribbon (e.g. 'fill-primary-container'). */
+
+    &:not(.shape-circle, .shape-square) {
+        border-radius: var(--pacem-border-card-radius);
+    }
+
+    &.accent,
+    &.ribbon-accent {
+        background-color: var(--pacem-color-accent);
+        color: var(--pacem-color-accent-inverse);
+    }
+
+    &.danger,
+    &.ribbon-danger {
+        background-color: var(--pacem-color-danger);
+        color: var(--pacem-color-danger-inverse);
+    }
+
+    &.primary,
+    &.ribbon-primary {
+        background-color: var(--pacem-color-primary);
+        color: var(--pacem-color-primary-inverse);
+    }
+
+    &.success,
+    &.ribbon-success {
+        background-color: var(--pacem-color-success);
+        color: var(--pacem-color-success-inverse);
+    }
+
+    &.ribbon-invert {
+        background-color: var(--pacem-color-default);
+        color: var(--pacem-color-default-inverse);
+    }
+
+    &.ribbon-disabled {
+        background-color: var(--pacem-color-disabled);
+        color: var(--pacem-color-disabled-inverse);
+    }
+
+    &.ribbon-default {
+        background-color: var(--pacem-color-default-inverse);
+        color: var(--pacem-color-default);
+    }
+
+    &.warning,
+    &.ribbon-warning {
+        background-color: var(--pacem-color-warning);
+        color: var(--pacem-color-warning-inverse);
+    }
+
+    &.circular,
+    &.ribbon-circle {
+        border-radius: 50%;
+    }
+}
+
+/* ribbon sizes (.CardRibbonSize()): generated/card-ribbon.css */
+
+/* #endregion */
+
+/* #region ANCHOR/BUTTON-FIXES */
+.pacem-card {
+    pacem-button,
+    .pacem-button {
+        text-shadow: none;
+    }
+}
+
+pacem-a.pacem-card {
+    position: relative;
+    color: var(--pacem-color-default);
+
+    .card-body, .card-heading, .card-footer {
+        position: relative;
+    }
+}
+
+/* #endregion */
+
+.pacem-body {
+    &.pacem-anim,
+    &.pacem-animations {
+        .pacem-card.pacem-anim.card-rise.anim-rise {
+            animation-name: anim-rise;
+            animation-fill-mode: both;
+            animation-duration: .667s;
+            animation-timing-function: var(--pacem-easing-out-sine);
+        }
+    }
+}