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

package/src/fx/index.css

@@ -0,0 +1,230 @@
+/* fx (theme/less/pacem/fx): fancy.less, gradient.less, hero.less, ripple.less, pulse.less, list.less. */
+
+/* #region fancy: offset -spacing / 4, delay .5s */
+@keyframes fx-fancy-anim {
+    0% {
+        opacity: 0;
+        transform: translateX(calc(-.25 * var(--pacem-grid-spacing)));
+        text-shadow: none;
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+        text-shadow: inherit;
+    }
+}
+
+pacem-fancy {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.pacem-fancy .pacem-fancify {
+    display: inline-block;
+    animation: fx-fancy-anim .5s var(--pacem-easing-out-sine) both;
+}
+
+.pacem-panel.panel-fancy {
+    > .corner {
+        transition: opacity .5s linear 1.25s;
+    }
+
+    > .panel-side {
+        transition: transform .2s var(--pacem-easing-out-sine) .3s;
+        transform: translateX(0) translateY(0);
+
+        canvas.pacem-tuner {
+            stroke: var(--pacem-theme-teal);
+        }
+
+        pacem-tuner {
+            margin-top: calc(var(--pacem-grid-spacing) / 4);
+
+            .pacem-content {
+                font-size: 1em;
+                transition: opacity .2s, transform .4s var(--pacem-easing-in-out-sine) .1s;
+            }
+        }
+    }
+
+    > .panel-heading {
+        transition: transform .3s var(--pacem-easing-out-sine) .6s, border .2s .8s;
+    }
+
+    > .panel-body {
+        transition: transform .3s var(--pacem-easing-out-sine) .5s, border .2s .8s;
+    }
+
+    &.fancy-off {
+        border-color: transparent;
+
+        > :is(.corner, .panel-side, .panel-body, .panel-heading) {
+            transition-delay: 0s;
+            transition-duration: .5s;
+        }
+
+        > .panel-side {
+            transform: translateX(calc(.25 * var(--pacem-grid-spacing))) translateY(0);
+
+            canvas.pacem-tuner {
+                stroke: var(--pacem-color-tech);
+            }
+
+            pacem-tuner .pacem-content {
+                opacity: 0;
+                transform: rotate(90deg);
+            }
+        }
+
+        > .panel-heading {
+            border-color: transparent;
+            transform: translateX(calc(-.25 * var(--pacem-grid-spacing))) translateY(calc(-.25 * var(--pacem-grid-spacing)));
+        }
+
+        > .panel-body {
+            border-color: transparent;
+            transform: translateX(calc(-.5 * var(--pacem-grid-spacing))) translateY(calc(-.5 * var(--pacem-grid-spacing)));
+        }
+
+        > :is(.corner, .panel-body, .panel-heading) {
+            opacity: 0;
+        }
+    }
+}
+/* #endregion */
+
+/* #region gradient */
+pacem-fx-gradient-radial,
+pacem-fx-gradient-linear,
+pacem-fx-gradient-stop,
+pacem-fx-gradient {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.pacem-fx-gradient-text {
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+}
+/* #endregion */
+
+/* #region hero */
+pacem-fx-hero {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.pacem-hero {
+    position: absolute;
+    z-index: calc(var(--pacem-zindex-menu) - 100);
+}
+/* #endregion */
+
+/* #region ripple (.RippleColorize(): the color at 20%) */
+pacem-fx-ripple {
+    pointer-events: none;
+    position: absolute;
+    z-index: calc(var(--pacem-zindex-balloon) + 1);
+    overflow: hidden;
+
+    > .ripple {
+        background-color: rgb(from var(--pacem-color-default) r g b / 20%);
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity var(--pacem-easing-out-sine) .2s;
+        transform-origin: center center;
+        position: absolute;
+        animation-duration: .2s;
+        animation-timing-function: var(--pacem-easing-out-sine);
+        animation-fill-mode: both;
+
+        &.ripple-go {
+            transition: none;
+            opacity: 1;
+            animation-name: pop-anim;
+        }
+    }
+
+    &.ripple-primary > .ripple { background-color: rgb(from var(--pacem-color-primary) r g b / 20%); }
+    &.ripple-accent > .ripple { background-color: rgb(from var(--pacem-color-accent) r g b / 20%); }
+    &.ripple-danger > .ripple { background-color: rgb(from var(--pacem-color-danger) r g b / 20%); }
+    &.ripple-success > .ripple { background-color: rgb(from var(--pacem-color-success) r g b / 20%); }
+    &.ripple-warning > .ripple { background-color: rgb(from var(--pacem-color-warning) r g b / 20%); }
+    &.ripple-invert > .ripple { background-color: rgb(from var(--pacem-color-background) r g b / 20%); }
+    &.ripple-dark > .ripple { background-color: rgb(from var(--pacem-theme-dark) r g b / 20%); }
+    &.ripple-light > .ripple { background-color: rgb(from var(--pacem-theme-light) r g b / 20%); }
+}
+/* #endregion */
+
+/* #region pulse */
+@keyframes fx-pulse-anim {
+    0% {
+        opacity: .8;
+    }
+
+    50% {
+        border-width: 10px;
+        transform: scale(1);
+        height: inherit;
+        width: inherit;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(1.25);
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+pacem-fx-pulse {
+    /* (below the menu: mobile/default site) */
+    position: absolute;
+    z-index: calc(var(--pacem-zindex-menu) - 1);
+    pointer-events: none;
+    display: block;
+
+    svg.pulse {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+
+        rect {
+            fill: none;
+            stroke: var(--pacem-color-default);
+            transform-origin: 50% 50%;
+        }
+    }
+
+    &.pulse-accent svg.pulse rect { stroke: var(--pacem-color-accent); }
+    &.pulse-primary svg.pulse rect { stroke: var(--pacem-color-primary); }
+    &.pulse-success svg.pulse rect { stroke: var(--pacem-color-success); }
+    &.pulse-warning svg.pulse rect { stroke: var(--pacem-color-warning); }
+    &.pulse-error svg.pulse rect { stroke: var(--pacem-color-error); }
+    &.pulse-danger svg.pulse rect { stroke: var(--pacem-color-danger); }
+    &.pulse-disabled svg.pulse rect { stroke: var(--pacem-color-disabled); }
+
+    &:is(.pacem-disabled, .pulse-off) svg {
+        display: none;
+
+        rect {
+            animation: none;
+        }
+    }
+}
+
+/* (below the menu: desktop site) */
+@media screen and (--pacem-lg) {
+    pacem-fx-pulse {
+        z-index: calc(var(--pacem-zindex-header) - 11);
+    }
+}
+/* #endregion */
+
+pacem-fx-list {
+    pointer-events: none !important;
+    display: none !important;
+}

package/src/layout/address.css

@@ -0,0 +1,46 @@
+address {
+    font-style: normal;
+    line-height: inherit;
+
+    /* for better results combine it with .pacem-panel class */
+    .email,
+    .phone,
+    .place {
+        padding-left: calc(var(--pacem-grid-spacing) / 6 * 5 * 1.2);
+        position: relative;
+
+        &::before {
+            position: absolute;
+            display: inline-block;
+            line-height: 1;
+            text-align: center;
+            font-family: var(--pacem-font-icons);
+            text-transform: none;
+            letter-spacing: normal;
+            word-wrap: normal;
+            white-space: nowrap;
+            direction: ltr;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-rendering: optimizeLegibility;
+            font-feature-settings: 'liga';
+            transition: font-variation-settings .25s var(--pacem-easing-in-out-sine);
+            font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            font-size: calc(var(--pacem-grid-spacing) / 6 * 5);
+            left: 0;
+            top: 0;
+        }
+    }
+
+    .place::before {
+        content: 'place';
+    }
+
+    .phone::before {
+        content: 'phone';
+    }
+
+    .email::before {
+        content: 'email';
+    }
+}

package/src/layout/animations.css

@@ -0,0 +1,33 @@
+@keyframes anim-rise {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--pacem-grid-spacing));
+        box-shadow: 0 0 0 transparent;
+        border-color: transparent;
+    }
+
+    25% {
+        opacity: 1;
+        transform: translateY(2px);
+        border-color: transparent;
+    }
+
+    40% {
+        transform: translate(0, 0);
+    }
+
+    50% {
+        box-shadow: 0 0 0 transparent;
+    }
+
+    60% {
+        border-top-color: #fff;
+        border-bottom-color: #eee;
+        border-left-color: #f5f5f5;
+        border-right-color: #f5f5f5;
+    }
+
+    100% {
+        box-shadow: 0 calc(var(--pacem-grid-spacing) / 6) var(--pacem-grid-spacing) rgba(0, 0, 0, 0.05);
+    }
+}

package/src/layout/borders.css

@@ -0,0 +1,63 @@
+.border-solid {
+    --pacem--border-style: solid;
+    border-style: solid;
+}
+
+.border-dashed {
+    --pacem--border-style: dashed;
+    border-style: dashed;
+}
+
+.border-dotted {
+    --pacem--border-style: dotted;
+    border-style: dotted;
+}
+
+.border-double {
+    --pacem--border-style: double;
+    border-style: double;
+}
+
+.border-solid,
+.border-double,
+.border-dashed,
+.border-dotted {
+    border-color: var(--pacem-color-border);
+    border-width: 1px;
+
+    /* .border-size-*, .border-{color}: generated/borders.css */
+}
+
+/* .border-radius-*, .border-size-0: generated/borders.css */
+
+.border-radius-topleft-0 {
+    border-top-left-radius: 0;
+}
+
+.border-radius-topright-0 {
+    border-top-right-radius: 0;
+}
+
+.border-radius-bottomleft-0 {
+    border-bottom-left-radius: 0;
+}
+
+.border-radius-bottomright-0 {
+    border-bottom-right-radius: 0;
+}
+
+.border-top-size-0 {
+    border-top-width: 0 !important;
+}
+
+.border-right-size-0 {
+    border-right-width: 0 !important;
+}
+
+.border-left-size-0 {
+    border-left-width: 0 !important;
+}
+
+.border-bottom-size-0 {
+    border-bottom-width: 0 !important;
+}

package/src/layout/box.css

@@ -0,0 +1,271 @@
+/* Boxes: .pacem-panel and .pacem-card share the .Panel() mixin of the Less theme (layout/mixins.less).
+   The shared rules pair the two prefixes (same specificity on both sides); what changes per variant
+   lives in private custom properties:
+     --pacem--box         tint of the colorized variants (.panel-accent, .card-primary...)
+     --pacem--box-ink     foreground of the .fill-{color} variants
+     --pacem--corner      color of the .corner decoration elements
+     --pacem--box-radius  the panel or card radius
+   Tint, ink and corner color inherit, just like the descendant selectors of the Less mixin reached
+   nested boxes. */
+
+@custom-selector :--panel-variants :is(.panel-accent, .panel-warning, .panel-success, .panel-danger, .panel-error, .panel-primary, .panel-secondary, .panel-disabled);
+@custom-selector :--card-variants :is(.card-accent, .card-warning, .card-success, .card-danger, .card-error, .card-primary, .card-secondary, .card-disabled);
+@custom-selector :--fills :is(
+    .fill-root, .fill-root-container, .fill-background, .fill-background-container, .fill-default, .fill-default-container,
+    .fill-invert, .fill-invert-container, .fill-primary, .fill-primary-container, .fill-secondary, .fill-secondary-container,
+    .fill-accent, .fill-accent-container, .fill-info, .fill-info-container, .fill-success, .fill-success-container,
+    .fill-warning, .fill-warning-container, .fill-danger, .fill-danger-container, .fill-error, .fill-error-container,
+    .fill-disabled, .fill-disabled-container, .fill-green, .fill-green-container, .fill-yellow, .fill-yellow-container,
+    .fill-brown, .fill-brown-container, .fill-red, .fill-red-container, .fill-pink, .fill-pink-container,
+    .fill-blue, .fill-blue-container, .fill-orange, .fill-orange-container, .fill-purple, .fill-purple-container,
+    .fill-teal, .fill-teal-container, .fill-gray, .fill-gray-container);
+
+.pacem-panel {
+    --pacem--box-radius: var(--pacem-border-panel-radius);
+}
+
+.pacem-card {
+    --pacem--box-radius: var(--pacem-border-card-radius);
+}
+
+:is(.pacem-panel, .pacem-card) {
+    padding: 0;
+    text-rendering: optimizeSpeed;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: var(--pacem--box-radius);
+
+    /* .CornersSize(), .CornersColorize(): circles when the radius is > 0 (only their top border is colored,
+       then they get rotated), brackets otherwise (two sides colored) */
+    .corner {
+        --pacem--round: sign(var(--pacem--box-radius));
+        --pacem--corner-size: calc(var(--pacem--round) * 2 * var(--pacem--box-radius) + (1 - var(--pacem--round)) * var(--pacem-corner-size));
+        --pacem--corner-color: var(--pacem--corner, var(--pacem-color-default));
+        --pacem--corner-straight: rgb(from var(--pacem--corner-color) r g b / calc(alpha * (1 - var(--pacem--round))));
+        width: var(--pacem--corner-size);
+        height: var(--pacem--corner-size);
+        border-radius: calc(var(--pacem--round) * 50%);
+        border: 1px solid transparent;
+        border-top-color: rgb(from var(--pacem--corner-color) r g b / calc(alpha * var(--pacem--round)));
+        position: absolute;
+        pointer-events: none;
+        box-sizing: border-box;
+
+        &.top-left {
+            top: -1px;
+            left: -1px;
+            transform: rotate(calc(var(--pacem--round) * -45deg));
+            border-top-color: var(--pacem--corner-color);
+            border-left-color: var(--pacem--corner-straight);
+        }
+
+        &.top-right {
+            top: -1px;
+            right: -1px;
+            transform: rotate(calc(var(--pacem--round) * 45deg));
+            border-top-color: var(--pacem--corner-color);
+            border-right-color: var(--pacem--corner-straight);
+        }
+
+        &.bottom-right {
+            bottom: -1px;
+            right: -1px;
+            transform: rotate(calc(var(--pacem--round) * 135deg));
+            border-bottom-color: var(--pacem--corner-straight);
+            border-right-color: var(--pacem--corner-straight);
+        }
+
+        &.bottom-left {
+            bottom: -1px;
+            left: -1px;
+            transform: rotate(calc(var(--pacem--round) * -135deg));
+            border-bottom-color: var(--pacem--corner-straight);
+            border-left-color: var(--pacem--corner-straight);
+        }
+    }
+}
+
+:is(.pacem-panel :is(.panel-heading, .panel-body, .panel-footer), .pacem-card :is(.card-heading, .card-body, .card-footer)) {
+    padding: calc(var(--pacem-grid-spacing) / 2) calc(var(--pacem-grid-spacing) / 1.5);
+    margin: 0;
+}
+
+:is(.pacem-panel .panel-side, .pacem-card .card-side) {
+    color: rgb(from var(--pacem-color-default) r g b / 80%);
+    padding: calc(var(--pacem-grid-spacing) / 2) 0 calc(var(--pacem-grid-spacing) / 2) calc(var(--pacem-grid-spacing) / 1.5);
+}
+
+:is(.pacem-panel :is(.panel-body, .panel-footer), .pacem-card :is(.card-body, .card-footer)) {
+    color: rgb(from var(--pacem-color-default) r g b / 80%);
+    line-height: 1.3333;
+}
+
+:is(.pacem-panel .panel-heading, .pacem-card .card-heading) {
+    line-height: 1.1;
+    font-family: var(--pacem-font-main);
+    font-size: calc(1.5rem * var(--pacem-font-main-rem-factor));
+    min-height: var(--pacem-grid-spacing);
+    text-transform: var(--pacem-transform-heading);
+
+    &.heading-bigger {
+        font-size: calc(2rem * var(--pacem-font-main-rem-factor));
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-size: 1em;
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+        font-weight: var(--pacem-font-main-weight);
+    }
+
+    :--shadows & {
+        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+    }
+
+    color: var(--pacem-color-default);
+}
+
+/* #region colorize (.BoxLayout(), .PanelColorize()) */
+
+:is(.pacem-panel.panel-border, .pacem-card.card-border) {
+    border-color: rgb(from var(--pacem-color-default) r g b / 20%);
+}
+
+:is(.pacem-panel.panel-filled, .pacem-card.card-filled) {
+    background-color: rgb(from var(--pacem-color-default) r g b / 10%);
+}
+
+:is(.pacem-panel.panel-corners, .pacem-card.card-corners) {
+    --pacem--corners-color: var(--pacem-color-default);
+    --pacem--corners-radius: var(--pacem--box-radius);
+}
+
+.pacem-panel.panel-accent, .pacem-card.card-accent { --pacem--box: var(--pacem-color-accent); }
+.pacem-panel.panel-warning, .pacem-card.card-warning { --pacem--box: var(--pacem-color-warning); }
+.pacem-panel.panel-success, .pacem-card.card-success { --pacem--box: var(--pacem-color-success); }
+.pacem-panel.panel-danger, .pacem-card.card-danger { --pacem--box: var(--pacem-color-danger); }
+.pacem-panel.panel-error, .pacem-card.card-error { --pacem--box: var(--pacem-color-error); }
+.pacem-panel.panel-primary, .pacem-card.card-primary { --pacem--box: var(--pacem-color-primary); }
+.pacem-panel.panel-secondary, .pacem-card.card-secondary { --pacem--box: var(--pacem-color-secondary); }
+.pacem-panel.panel-disabled, .pacem-card.card-disabled { --pacem--box: var(--pacem-color-disabled); }
+
+:is(.pacem-panel:--panel-variants, .pacem-card:--card-variants) {
+    --pacem--corner: var(--pacem--box);
+}
+
+:is(.pacem-panel:--panel-variants .panel-heading, .pacem-card:--card-variants .card-heading) {
+    color: var(--pacem--box);
+}
+
+:is(.pacem-panel:--panel-variants.panel-border, .pacem-card:--card-variants.card-border) {
+    border-color: rgb(from var(--pacem--box) r g b / 20%);
+}
+
+:is(.pacem-panel:--panel-variants.panel-filled, .pacem-card:--card-variants.card-filled) {
+    background-color: rgb(from var(--pacem--box) r g b / 10%);
+}
+
+:is(.pacem-panel:--panel-variants.panel-corners, .pacem-card:--card-variants.card-corners) {
+    --pacem--corners-color: var(--pacem--box);
+}
+
+/* .fill-{color}: the foreground comes from coloring.css (--pacem--fill-inverse) */
+:is(.pacem-panel, .pacem-card):--fills {
+    --pacem--box-ink: var(--pacem--fill-inverse);
+    --pacem--corner: var(--pacem--box-ink);
+    color: var(--pacem--box-ink);
+}
+
+:is(.pacem-panel:--fills :is(.panel-body, .panel-footer, .panel-heading), .pacem-card:--fills :is(.card-body, .card-footer, .card-heading)) {
+    color: var(--pacem--box-ink);
+}
+
+:is(.pacem-panel:--fills.panel-border, .pacem-card:--fills.card-border) {
+    border-color: rgb(from var(--pacem--box-ink) r g b / .25);
+}
+
+/* #endregion */
+
+:is(.pacem-panel :is(.panel-tools, .tools), .pacem-card :is(.card-tools, .tools)) {
+    position: absolute;
+    top: calc(var(--pacem-grid-spacing) / 2);
+    right: calc(var(--pacem-grid-spacing) / 1.5);
+    z-index: 1;
+
+    /* .ToolButtons() */
+    .pacem-button,
+    pacem-button {
+        width: calc(var(--pacem-grid-spacing) * 1.3333);
+        height: var(--pacem-grid-spacing);
+        margin: 0;
+
+        &.button-square,
+        &.circular,
+        &.button-circle,
+        &.button-circular {
+            width: var(--pacem-grid-spacing);
+            margin: 0 calc(var(--pacem-grid-spacing) / 6);
+
+            &::before {
+                font-size: calc(var(--pacem-grid-spacing) * 2 / 3);
+                line-height: var(--pacem-grid-spacing);
+                width: var(--pacem-grid-spacing);
+            }
+        }
+    }
+}
+
+:is(.pacem-panel.panel-rise, .pacem-card.card-rise) {
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 6) var(--pacem-grid-spacing) var(--pacem-color-shadow);
+}
+
+:is(.pacem-panel.panel-rise:not(.panel-border), .pacem-card.card-rise:not(.card-border)) {
+    border-top-color: var(--pacem-color-border-light);
+    border-bottom-color: var(--pacem-color-border-dark);
+    border-left-color: var(--pacem-color-border-dawn);
+    border-right-color: var(--pacem-color-border-dusk);
+}
+
+:is(.pacem-panel.panel-fullscreen, .pacem-card.card-fullscreen) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: calc(var(--pacem-zindex-lightbox) - 1);
+    display: grid;
+    grid-gap: 0;
+    grid-template-rows: auto 1fr auto;
+    border-radius: 0;
+    background-color: var(--pacem-color-background);
+    margin: 0;
+    box-sizing: border-box;
+}
+
+/* (a list, not :is(): the chained :not()s carry their own specificity) */
+.pacem-panel.panel-fullscreen > .panel-body,
+.pacem-panel.panel-fullscreen > *:not(.corner):not(.tools):not(.panel-tools):not(.panel-heading):not(.panel-footer),
+.pacem-card.card-fullscreen > .card-body,
+.pacem-card.card-fullscreen > *:not(.corner):not(.tools):not(.card-tools):not(.card-heading):not(.card-footer) {
+    grid-row: 2;
+    overflow: auto;
+}
+
+:is(.pacem-panel.panel-fullscreen > .panel-heading, .pacem-card.card-fullscreen > .card-heading) {
+    grid-row: 1;
+}
+
+:is(.pacem-panel.panel-fullscreen > .panel-footer, .pacem-card.card-fullscreen > .card-footer) {
+    grid-row: 3;
+}
+
+:is(.pacem-panel.panel-fullscreen:is(.panel-accent, .panel-warning, .panel-success, .panel-danger, .panel-primary, .panel-disabled).panel-filled,
+    .pacem-card.card-fullscreen:is(.card-accent, .card-warning, .card-success, .card-danger, .card-primary, .card-disabled).card-filled) {
+    background-color: var(--pacem-color-background);
+
+    > :is(.panel-heading, .panel-body, .panel-footer, .card-heading, .card-body, .card-footer) {
+        background-color: rgb(from var(--pacem--box) r g b / 10%);
+    }
+}