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

package/src/layout/panels.css

@@ -0,0 +1,337 @@
+/* the .Panel() mixin (shared with cards): box.css, imported before this file */
+
+.pacem-scrollable {
+    display: block;
+    overflow: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.pacem-panel,
+.pacem-wrapper {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.pacem-panel.panel-lonely {
+    margin: 0;
+}
+
+.pacem-panel {
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: repeat(3, auto);
+    grid-template-areas: 'heading tools' 'body body' 'footer footer';
+
+    .panel-heading {
+        padding-top: calc(var(--pacem-grid-spacing) / 2);
+        padding-bottom: calc(var(--pacem-grid-spacing) / 2);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    > .panel-heading {
+        grid-area: heading;
+    }
+
+    > .panel-body {
+        grid-area: body;
+    }
+
+    > .panel-footer {
+        grid-area: footer;
+    }
+
+    > .panel-content {
+        grid-column: 1/2;
+        grid-row: 2/3;
+    }
+
+    > .panel-tools {
+        grid-area: tools;
+        padding: 0 calc(var(--pacem-grid-spacing) / 2) 0 0;
+        /* reset */
+        position: static;
+        top: 0;
+        right: 0;
+        z-index: auto;
+        /* override */
+        align-self: stretch;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+
+    .panel-body.pacem-flex,
+    .panel-body.pacem-row {
+        margin: calc(var(--pacem-grid-spacing) / -2) calc(var(--pacem-grid-spacing) / -2 * 7 / 3) 0 calc(var(--pacem-grid-spacing) / -2 * 7 / 3);
+    }
+
+    .panel-body.pacem-grid {
+        padding: 0;
+
+        .pacem-panel {
+            margin: 0;
+        }
+    }
+
+    .panel-heading.heading-separate,
+    .panel-heading.heading-sever {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+
+        ~ .panel-tools {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        }
+
+        ~ .panel-body {
+            border-top: 1px solid rgba(255, 255, 255, 0.075);
+
+            ~ .panel-body {
+                border-top: none;
+            }
+        }
+    }
+
+    &.panel-side-left {
+        grid-template-columns: calc(var(--pacem-grid-spacing) / 1.5 + var(--pacem-grid-cell)) 1fr auto;
+
+        &.side-large {
+            grid-template-columns: calc(var(--pacem-grid-spacing) / 1.5 + round(up, 1.414 * var(--pacem-grid-cell), 1px)) 1fr auto;
+        }
+
+        &.side-larger {
+            grid-template-columns: calc(var(--pacem-grid-spacing) / 1.5 + 2 * var(--pacem-grid-cell)) 1fr auto;
+        }
+
+        &.side-small {
+            grid-template-columns: calc(var(--pacem-grid-spacing) / 1.5 + 2 * var(--pacem-grid-spacing)) 1fr auto;
+        }
+
+        &.side-smaller {
+            grid-template-columns: calc(var(--pacem-grid-spacing) / 1.5 + var(--pacem-grid-spacing)) 1fr auto;
+        }
+
+        &.side-auto {
+            grid-template-columns: auto 1fr auto;
+        }
+
+        grid-template-areas: 'aside heading tools' 'aside body body' 'aside footer footer';
+    }
+
+    &.panel-side-right {
+        grid-template-columns: 1fr auto calc(var(--pacem-grid-spacing) / 1.5 + var(--pacem-grid-cell));
+
+        &.side-large {
+            grid-template-columns: 1fr auto calc(var(--pacem-grid-spacing) / 1.5 + round(up, 1.414 * var(--pacem-grid-cell), 1px));
+        }
+
+        &.side-larger {
+            grid-template-columns: 1fr auto calc(var(--pacem-grid-spacing) / 1.5 + 2 * var(--pacem-grid-cell));
+        }
+
+        &.side-small {
+            grid-template-columns: 1fr auto calc(var(--pacem-grid-spacing) / 1.5 + 2 * var(--pacem-grid-spacing));
+        }
+
+        &.side-smaller {
+            grid-template-columns: 1fr auto calc(var(--pacem-grid-spacing) / 1.5 + var(--pacem-grid-spacing));
+        }
+
+        &.side-auto {
+            grid-template-columns: 1fr auto auto;
+        }
+
+        grid-template-areas: 'heading tools aside' 'body body aside' 'footer footer aside';
+    }
+
+    &.panel-side-left, &.panel-side-right {
+        > .panel-side {
+            grid-area: aside;
+            grid-row: span 3;
+        }
+    }
+
+    &.panel-side-left {
+        > .panel-side {
+            padding: calc(var(--pacem-grid-spacing) / 2) 0 calc(var(--pacem-grid-spacing) / 2) calc(var(--pacem-grid-spacing) / 1.5);
+        }
+    }
+
+    &.panel-side-right {
+        > .panel-side {
+            padding: calc(var(--pacem-grid-spacing) / 2) calc(var(--pacem-grid-spacing) / 1.5) calc(var(--pacem-grid-spacing) / 2) 0;
+        }
+    }
+}
+
+.pacem-grid > .pacem-cell {
+
+    &.pacem-panel {
+        margin: 0;
+        grid-template-rows: auto 1fr auto;
+    }
+}
+
+/* #region MASTER PANEL */
+.pacem-wrapper {
+    border: calc(var(--pacem-grid-spacing) / 3) solid #868584;
+    box-shadow: inset 2px 0 0 #595a58, inset 0 2px 0 #595a58, inset 0 -2px 0 #595a58, inset -2px 0 0 #595a58;
+    padding: 2px;
+    border-radius: var(--pacem-border-panel-radius);
+
+    .pacem-row,
+    .pacem-flex {
+        margin: 0 calc(var(--pacem-grid-spacing) / 3);
+    }
+
+    .pacem-grid {
+        margin: 0 calc(var(--pacem-grid-spacing) / 1.5) calc(var(--pacem-grid-spacing) / 1.5) calc(var(--pacem-grid-spacing) / 1.5);
+        grid-gap: calc(var(--pacem-grid-spacing) / 1.5);
+    }
+
+    .pacem-panel {
+        margin: 0 calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) / 1.5) calc(var(--pacem-grid-spacing) / 3);
+        padding-bottom: 0;
+
+        .panel-heading {
+            padding: calc(var(--pacem-grid-spacing) / 2) calc(var(--pacem-grid-spacing) / 1.5);
+        }
+
+        .panel-body,
+        .panel-footer {
+            padding-bottom: calc(var(--pacem-grid-spacing) / 1.5);
+        }
+
+        &.panel-master {
+            margin-left: 0;
+            margin-right: 0;
+            border-radius: 0;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+/* .panel-master is colorized like a variant (.PanelColorize(@color_default_inv)), after the fills */
+.pacem-panel.panel-master {
+    --pacem--box: var(--pacem-color-default-inverse);
+    --pacem--corner: var(--pacem--box);
+    background-color: var(--pacem-color-default);
+
+    .panel-heading {
+        color: var(--pacem--box);
+    }
+
+    &.panel-border {
+        border-color: rgb(from var(--pacem--box) r g b / 20%);
+    }
+
+    &.panel-filled {
+        background-color: rgb(from var(--pacem--box) r g b / 10%);
+    }
+
+    &.panel-corners {
+        --pacem--corners-color: var(--pacem--box);
+    }
+
+    .panel-heading {
+        text-shadow: none;
+    }
+
+    .panel-body,
+    .panel-footer {
+        color: var(--pacem-color-default-inverse);
+    }
+
+    a, a:hover {
+        color: var(--pacem-color-accent);
+    }
+
+    .panel-tools,
+    .tools {
+
+        pacem-button:before {
+            color: var(--pacem-color-default-inverse);
+        }
+    }
+}
+
+.pacem-wide {
+    margin: calc(-1 * var(--pacem-grid-spacing));
+    margin-bottom: 0;
+    padding: 0;
+    border: none;
+
+    &.panel-wrapper {
+        box-shadow: none;
+
+        > .panel-master {
+            border: none;
+
+            /* adds slight shadow to unshadowed themes ('@shadows' logic willingly inverted) */
+            :--no-shadows & {
+                box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.5);
+            }
+        }
+    }
+}
+
+@media (orientation: portrait) {
+    .pacem-v-wide {
+        margin: calc(-1 * var(--pacem-grid-spacing));
+        margin-bottom: 0;
+        padding: 0;
+        border: none;
+
+        &.panel-wrapper {
+            box-shadow: none;
+
+            > .panel-master {
+                border: none;
+
+                /* adds slight shadow to unshadowed themes ('@shadows' logic willingly inverted) */
+                :--no-shadows & {
+                    box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.5);
+                }
+            }
+        }
+    }
+}
+
+@media (--pacem-below-sm) {
+    .pacem-xs-wide {
+        margin: calc(-1 * var(--pacem-grid-spacing));
+        margin-bottom: 0;
+        padding: 0;
+        border: none;
+
+        &.panel-wrapper {
+            box-shadow: none;
+
+            > .panel-master {
+                border: none;
+
+                /* adds slight shadow to unshadowed themes ('@shadows' logic willingly inverted) */
+                :--no-shadows & {
+                    box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.5);
+                }
+            }
+        }
+    }
+}
+
+/* #endregion */
+
+.pacem-animations {
+    .pacem-panel.pacem-anim.panel-rise.anim-rise {
+        animation-name: anim-rise;
+        animation-fill-mode: both;
+        animation-duration: .667s;
+        animation-timing-function: var(--pacem-easing-out-sine);
+    }
+}

package/src/layout/positioning.css

@@ -0,0 +1,108 @@
+.pos-relative {
+    position: relative;
+}
+
+.pos-absolute {
+    position: absolute;
+
+    &.absolute-top {
+        top: 0;
+    }
+
+    &.absolute-left {
+        left: 0;
+    }
+
+    &.absolute-bottom {
+        bottom: 0;
+    }
+
+    &.absolute-right {
+        right: 0;
+    }
+}
+
+.pos-static {
+    position: static;
+}
+
+.pos-fixed {
+    position: fixed;
+    z-index: calc(var(--pacem-zindex-menu) - 100);
+
+    &.fixed-top {
+        top: 0;
+    }
+
+    &.fixed-left {
+        left: 0;
+    }
+
+    &.fixed-bottom {
+        bottom: 0;
+    }
+
+    &.fixed-right {
+        right: 0;
+    }
+}
+
+.pos-sticky {
+    position: sticky;
+    z-index: calc(var(--pacem-zindex-header) - 1);
+
+    &.sticky-top {
+        top: 0;
+    }
+
+    &.sticky-bottom {
+        bottom: 0;
+    }
+}
+
+/* layout-driven sticky position overrides: generated/positioning.css */
+
+/* kept names from known bootstrap classes */
+.caret,
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.clearfix {
+    clear: both;
+}
+
+.z-index {
+    &.z--1 { z-index: 1 !important; }
+    &.z--2 { z-index: 2 !important; }
+    &.z--3 { z-index: 3 !important; }
+    &.z--4 { z-index: 4 !important; }
+    &.z--5 { z-index: 5 !important; }
+    &.z--6 { z-index: 6 !important; }
+    &.z--7 { z-index: 7 !important; }
+    &.z--8 { z-index: 8 !important; }
+    &.z--9 { z-index: 9 !important; }
+    &.z--10 { z-index: 10 !important; }
+    &.z--11 { z-index: 11 !important; }
+    &.z--12 { z-index: 12 !important; }
+
+    &.z-header {
+        z-index: var(--pacem-zindex-header) !important;
+    }
+
+    &.z-under-header {
+        z-index: calc(var(--pacem-zindex-header) - 1) !important;
+    }
+
+    &.z-over-header {
+        z-index: calc(var(--pacem-zindex-header) + 1) !important;
+    }
+
+    &.z-top {
+        z-index: calc(var(--pacem-zindex-lightbox) + 1) !important;
+    }
+}

package/src/layout/scroll.css

@@ -0,0 +1,85 @@
+/** Hides scrollbars without impacting scrolling. */
+.scrollbars-none {
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    scrollbar-width: none;
+}
+
+.scroll-snap {
+    scroll-behavior: smooth;
+    scroll-snap-type: both;
+
+    &.snap-proximity {
+        scroll-snap-type: both proximity;
+    }
+
+    &.snap-mandatory {
+        scroll-snap-type: both mandatory;
+    }
+
+    &.snap-inline {
+        scroll-snap-type: inline;
+
+        &.snap-proximity {
+            scroll-snap-type: inline proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: inline mandatory;
+        }
+    }
+
+    &.snap-block {
+        scroll-snap-type: block;
+
+        &.snap-proximity {
+            scroll-snap-type: block proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: block mandatory;
+        }
+    }
+
+    &.snap-x {
+        scroll-snap-type: x;
+
+        &.snap-proximity {
+            scroll-snap-type: x proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: x mandatory;
+        }
+    }
+
+    &.snap-y {
+        scroll-snap-type: y;
+
+        &.snap-proximity {
+            scroll-snap-type: y proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: y mandatory;
+        }
+    }
+
+    > * {
+        scroll-snap-align: start;
+
+        &.snap-center {
+            scroll-snap-align: center;
+        }
+
+        &.snap-end {
+            scroll-snap-align: end;
+        }
+
+        &.snap-always {
+            scroll-snap-stop: always;
+        }
+    }
+}

package/src/layout/shapes.css

@@ -0,0 +1,20 @@
+.shape-circle,
+.shape-square {
+    aspect-ratio: 1;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.shape-circle {
+    border-radius: 50%;
+}
+
+.shape-square {
+    border-radius: var(--pacem-border-radius);
+
+    &.square-sharp {
+        border-radius: 0;
+    }
+}

package/src/layout/shell.css

@@ -0,0 +1,3 @@
+/* layout (shell part): body, header, footer, toolbars, aside. */
+@import "layout.css";
+@import "generated/layout-stretch.css";

package/src/layout/sizing.css

@@ -0,0 +1,25 @@
+.pacem-size {
+    min-height: var(--pacem-grid-cell);
+
+    &.size-xl {
+        min-height: calc(2 * var(--pacem-grid-cell));
+    }
+
+    &.size-lg {
+        min-height: round(up, 1.414 * var(--pacem-grid-cell), 1px);
+    }
+
+    &.size-sm {
+        min-height: calc(2 * var(--pacem-grid-spacing));
+    }
+
+    &.size-xs {
+        min-height: var(--pacem-grid-spacing);
+    }
+}
+
+.pacem-borderbox {
+    box-sizing: border-box;
+}
+
+/* .pacem-width.width-* (responsive too): generated/sizing.css */

package/src/layout/spacing.css

@@ -0,0 +1,17 @@
+hr.spacer {
+    margin-bottom: var(--pacem-grid-spacing);
+}
+
+.pacem-spacer {
+    margin-bottom: var(--pacem-grid-spacing);
+
+    &.spacer-2x {
+        margin-bottom: calc(2 * var(--pacem-grid-spacing));
+    }
+
+    &.spacer-3x {
+        margin-bottom: calc(3 * var(--pacem-grid-spacing));
+    }
+}
+
+/* .pacem-margin, .pacem-pad (responsive too): generated/spacing.css */

package/src/layout/superposition-system.css

@@ -0,0 +1,116 @@
+.pacem-relative {
+    position: relative;
+
+    > .pacem-hover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        &.top {
+            height: auto;
+        }
+
+        &.bottom {
+            height: auto;
+            top: auto;
+            bottom: 0;
+        }
+
+        &.left {
+            width: auto;
+        }
+
+        &.right {
+            width: auto;
+            left: auto;
+            right: 0;
+        }
+    }
+}
+
+.pacem-overlap {
+    display: grid;
+
+    /* #region horiz (with relevant default vert) */
+    &.overlap-center {
+        align-items: center; /* vertical */
+        justify-content: center; /* horizontal */
+    }
+
+    &.overlap-fill {
+        align-items: stretch;
+        justify-content: stretch;
+    }
+
+    &.overlap-start {
+        align-items: start;
+        justify-content: start;
+    }
+
+    &.overlap-end {
+        align-items: end;
+        justify-content: end;
+    }
+    /* #endregion */
+
+    /* #region vert override */
+    &.overlap-middle {
+        align-items: center;
+    }
+
+    &.overlap-top {
+        align-items: start;
+    }
+
+    &.overlap-bottom {
+        align-items: end;
+    }
+
+    &.overlap-stretch {
+        align-items: stretch;
+    }
+    /* #endregion */
+
+    > * {
+        grid-row: 1;
+        grid-column: 1;
+
+        &.overlap-self-center {
+            align-self: center; /* vertical */
+            justify-self: center; /* horizontal */
+        }
+
+        &.overlap-self-fill {
+            align-self: stretch;
+            justify-self: stretch;
+        }
+
+        &.overlap-self-start {
+            align-self: start;
+            justify-self: start;
+        }
+
+        &.overlap-self-end {
+            align-self: end;
+            justify-self: end;
+        }
+
+        &.overlap-self-middle {
+            align-self: center;
+        }
+
+        &.overlap-self-top {
+            align-self: start;
+        }
+
+        &.overlap-self-bottom {
+            align-self: end;
+        }
+
+        &.overlap-self-stretch {
+            align-self: stretch;
+        }
+    }
+}