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

package/src/layout/layout.css

@@ -0,0 +1,479 @@
+/* Shell layout: body, header, footer, toolbars, aside (layout/dark/layout.less). */
+
+/* body + menu-relevant transitions */
+.pacem-body {
+    display: block;
+    min-height: 100vh;
+    padding: var(--pacem-grid-spacing);
+    box-sizing: border-box;
+    z-index: 0;
+
+    &[headbar] {
+        padding-top: calc(var(--pacem-grid-spacing) + var(--pacem-layout-toolbar-height));
+    }
+
+    &[header] {
+        padding-top: calc(var(--pacem-grid-spacing) + var(--pacem-layout-header-height));
+
+        &[headbar], &[headbar-prepend] {
+            padding-top: calc(var(--pacem-grid-spacing) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-header-height));
+        }
+    }
+
+    &[footbar] {
+        padding-bottom: calc(var(--pacem-grid-spacing) + var(--pacem-layout-toolbar-height));
+    }
+
+    &[footer] {
+        padding-bottom: calc(var(--pacem-grid-spacing) + var(--pacem-layout-footer-height));
+
+        &[footbar], &[footbar-append] {
+            padding-bottom: calc(var(--pacem-grid-spacing) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height));
+        }
+    }
+
+    &[bigfooter] {
+        padding-bottom: calc(var(--pacem-grid-spacing) + var(--pacem-layout-bigfooter-height));
+
+        &[footbar], &[footbar-append] {
+            padding-bottom: calc(var(--pacem-grid-spacing) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height));
+        }
+    }
+
+    &.pacem-animations.pacem-animatable {
+        transition: padding var(--pacem-easing-in-out-sine) .3s;
+
+        &.pacem-menu-close {
+            transition-delay: .25s;
+        }
+    }
+}
+
+/* header/footer std */
+header[pacem],
+.pacem-header,
+footer[pacem],
+.pacem-footer {
+    position: fixed;
+    width: 100vw;
+    left: 0;
+    z-index: var(--pacem-zindex-header);
+    box-sizing: border-box;
+    /* theme background (e.g. a dotted grid: see the phousys theme of the Pacem JS webapp) */
+    background-image: var(--pacem-body-background-image);
+    background-size: var(--pacem-body-background-size);
+    background-attachment: var(--pacem-body-background-attachment);
+    background-position: 0 0;
+    background-repeat: repeat;
+    background-color: var(--pacem-color-background);
+}
+
+/* header std */
+header[pacem],
+.pacem-header {
+    height: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height));
+    padding-left: var(--pacem-grid-cell);
+    padding-right: var(--pacem-grid-spacing);
+    padding-top: var(--pacem-layout-toolbar-height);
+    top: 0;
+    display: block;
+    /* start hidden */
+    transform: translateY(calc(-1 * (var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height)))) translateX(0);
+    opacity: 0;
+}
+
+/* (explicit selectors: header[pacem] and .pacem-header have different specificity) */
+header[pacem].header-border,
+.pacem-header.header-border {
+    border-bottom: 1px solid var(--pacem-color-border);
+}
+
+/* footer std */
+footer[pacem],
+.pacem-footer {
+    bottom: 0;
+    height: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height));
+    padding-left: var(--pacem-grid-spacing);
+    padding-right: var(--pacem-grid-spacing);
+    padding-bottom: calc(var(--pacem-layout-toolbar-height) + (var(--pacem-layout-bigfooter-height) - var(--pacem-layout-footer-height)));
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    /* start hidden */
+    transform: translateY(calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height))) translateX(0);
+    opacity: 0;
+}
+
+footer[pacem].footer-border,
+.pacem-footer.footer-border {
+    border-top: 1px solid var(--pacem-color-border);
+}
+
+/* header/footer (custom) */
+.pacem-body[bigfooter] {
+
+    footer[pacem],
+    .pacem-footer {
+        padding-bottom: var(--pacem-layout-toolbar-height);
+    }
+}
+
+/* aside only visible in large screens (1) */
+aside[pacem], .pacem-aside {
+    display: none;
+}
+
+/* #region toolbars */
+
+/* default */
+.pacem-toolbar.toolbar-header,
+.pacem-toolbar.toolbar-footer {
+    position: fixed;
+    width: 100vw;
+    left: 0;
+    display: grid;
+    z-index: calc(var(--pacem-zindex-header) - 1);
+    box-sizing: border-box;
+    background-image: var(--pacem-body-background-image);
+    background-size: var(--pacem-body-background-size);
+    background-attachment: var(--pacem-body-background-attachment);
+    background-position: 0 0;
+    background-repeat: repeat;
+    background-color: var(--pacem-color-background);
+    height: var(--pacem-layout-toolbar-height);
+    padding: 0;
+    margin: 0;
+    /* css grid */
+    grid-template-columns: minmax(var(--pacem-grid-cell), auto) 1fr;
+
+    > * {
+        height: var(--pacem-layout-toolbar-height);
+    }
+
+    > .toolbar-side {
+        grid-column: 1;
+    }
+
+    > .toolbar-main {
+        grid-column: 2;
+    }
+}
+
+/* header toolbar */
+.pacem-toolbar.toolbar-header {
+    top: 0;
+    /* start hidden */
+    transform: translateY(calc(-1 * (var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height)))) translateX(0);
+    opacity: 0;
+
+    &.toolbar-border {
+        border-bottom: 1px solid var(--pacem-color-border);
+    }
+}
+
+/* footer toolbar */
+.pacem-toolbar.toolbar-footer {
+    bottom: 0;
+    /* start hidden */
+    transform: translateY(calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height))) translateX(0);
+    opacity: 0;
+
+    &.toolbar-border {
+        border-top: 1px solid var(--pacem-color-border);
+    }
+}
+
+/* #endregion */
+
+/* #region shadows */
+
+:--shadows .pacem-body[header]:not([headbar]) {
+
+    header[pacem],
+    .pacem-header {
+        box-shadow: 0 1px var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
+        border-bottom-color: transparent;
+    }
+}
+
+/* (explicit selectors: the two body selectors have different specificity) */
+:--shadows .pacem-body[headbar-prepend]:not([header]) .pacem-toolbar.toolbar-header,
+:--shadows .pacem-body[headbar] .pacem-toolbar.toolbar-header {
+    box-shadow: 0 1px var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
+    border-bottom-color: transparent;
+}
+
+:--shadows .pacem-body[footer]:not([footbar]) {
+
+    footer[pacem],
+    .pacem-footer {
+        border-top-color: transparent;
+        box-shadow: 0 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.25);
+    }
+}
+
+:--shadows .pacem-body[footbar-append]:not([footer]) .pacem-toolbar.toolbar-footer,
+:--shadows .pacem-body[footbar] .pacem-toolbar.toolbar-footer {
+    border-top-color: transparent;
+    box-shadow: 0 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.25);
+}
+
+/* #endregion */
+
+/* visible head toolbar */
+.pacem-body[headbar]:not([header]) .pacem-toolbar.toolbar-header,
+.pacem-body[headbar-prepend] .pacem-toolbar.toolbar-header {
+    opacity: 1;
+    transform: translateX(0) translateY(0);
+}
+
+.pacem-body[headbar][header] {
+
+    .pacem-toolbar.toolbar-header {
+        opacity: 1;
+        transform: translateX(0) translateY(var(--pacem-layout-header-height));
+    }
+}
+
+/* visible header */
+.pacem-body[header] {
+
+    header[pacem],
+    .pacem-header {
+        opacity: 1;
+        transform: translateX(0) translateY(calc(-1 * var(--pacem-layout-toolbar-height)));
+    }
+
+    &[headbar-prepend] {
+        header[pacem],
+        .pacem-header {
+            transform: translateX(0) translateY(0);
+        }
+
+        .pacem-toolbar.toolbar-header {
+            z-index: calc(var(--pacem-zindex-header) + 1);
+        }
+    }
+}
+
+/* visible footer */
+.pacem-body[footer],
+.pacem-body[bigfooter] {
+
+    footer[pacem],
+    .pacem-footer {
+        opacity: 1;
+    }
+}
+
+.pacem-body[footer]:not([footbar-append]) {
+
+    footer[pacem],
+    .pacem-footer {
+        transform: translateX(0) translateY(calc(var(--pacem-layout-toolbar-height) + (var(--pacem-layout-bigfooter-height) - var(--pacem-layout-footer-height))));
+    }
+}
+
+.pacem-body[footer][footbar-append] {
+
+    footer[pacem],
+    .pacem-footer {
+        transform: translateX(0) translateY(calc(var(--pacem-layout-bigfooter-height) - var(--pacem-layout-footer-height)));
+    }
+}
+
+.pacem-body[bigfooter]:not([footbar-append]) {
+
+    footer[pacem],
+    .pacem-footer {
+        transform: translateX(0) translateY(var(--pacem-layout-toolbar-height));
+    }
+}
+
+.pacem-body[bigfooter][footbar-append] {
+
+    footer[pacem],
+    .pacem-footer {
+        transform: translateX(0) translateY(0);
+    }
+}
+
+/* visible foot toolbar */
+.pacem-body[footbar],
+.pacem-body[footbar-append] {
+
+    .pacem-toolbar.toolbar-footer {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.pacem-body[footbar] {
+
+    &[footer] {
+        .pacem-toolbar.toolbar-footer {
+            transform: translateY(calc(-1 * var(--pacem-layout-footer-height)));
+        }
+    }
+
+    &[bigfooter] {
+
+        .pacem-toolbar.toolbar-footer {
+            transform: translateY(calc(-1 * var(--pacem-layout-bigfooter-height)));
+        }
+    }
+}
+
+.pacem-body[footbar-append] {
+
+    .pacem-toolbar.toolbar-footer {
+        z-index: calc(var(--pacem-zindex-header) + 1);
+    }
+}
+
+/* animations */
+.pacem-body.pacem-animations {
+
+    header[pacem],
+    .pacem-header,
+    footer[pacem],
+    .pacem-footer {
+        transition: padding var(--pacem-easing-in-out-sine) .3s, transform var(--pacem-easing-out-sine) .3s, opacity .2s, box-shadow var(--pacem-easing-in-sine) .25s;
+    }
+
+    .pacem-toolbar.toolbar-header,
+    .pacem-toolbar.toolbar-footer {
+        /* not animatable (or not yet implemented in browsers) */
+        transition: grid-template-columns var(--pacem-easing-in-out-sine) .3s, transform var(--pacem-easing-out-sine) .4s, opacity .2s, box-shadow var(--pacem-easing-in-sine) .25s;
+    }
+
+    &.pacem-menu-close {
+        header[pacem],
+        .pacem-header,
+        footer[pacem],
+        .pacem-footer,
+        .pacem-toolbar.toolbar-header,
+        .pacem-toolbar.toolbar-footer {
+            transition-delay: .25s;
+        }
+    }
+}
+
+@media (--pacem-lg) {
+
+    /* footer starts at @grid_spacing left for small screens, while header always at @grid_cell:
+       re-align when screen is large. */
+    header[pacem],
+    .pacem-header,
+    footer[pacem],
+    .pacem-footer {
+        padding-left: var(--pacem-layout-aside-padding);
+    }
+
+    /* large screen @grid_cell padding set. */
+    .pacem-body {
+        padding-left: var(--pacem-layout-aside-padding);
+        padding-right: var(--pacem-layout-aside-padding);
+
+        /* when menu is open it enters like an aside drawer, so make room for it... */
+        &.pacem-sidebar-open {
+            padding-left: max(var(--pacem-layout-aside-padding), calc(var(--pacem-layout-aside-gap) + var(--pacem-sidebar-width)));
+
+            /* ...and keep header and footer aligned. */
+            header[pacem],
+            .pacem-header,
+            footer[pacem],
+            .pacem-footer {
+                padding-left: max(var(--pacem-layout-aside-padding), calc(var(--pacem-layout-aside-gap) + var(--pacem-sidebar-width)));
+            }
+        }
+
+        &.pacem-menu-open {
+            padding-left: max(var(--pacem-layout-aside-padding), calc(var(--pacem-layout-aside-gap) + var(--pacem-menu-width)));
+
+            /* ...and keep header and footer aligned. */
+            header[pacem],
+            .pacem-header,
+            footer[pacem],
+            .pacem-footer {
+                padding-left: max(var(--pacem-layout-aside-padding), calc(var(--pacem-layout-aside-gap) + var(--pacem-menu-width)));
+            }
+
+            .pacem-toolbar.toolbar-header,
+            .pacem-toolbar.toolbar-footer {
+                grid-template-columns: var(--pacem-menu-width) 1fr;
+            }
+
+            &.pacem-sidebar-open {
+                /* both menu and sidebar open */
+                padding-left: max(var(--pacem-layout-aside-padding), calc(var(--pacem-layout-aside-gap) + var(--pacem-sidebar-width) + var(--pacem-menu-width)));
+
+                /* ...and keep header and footer aligned. */
+                header[pacem],
+                .pacem-header,
+                footer[pacem],
+                .pacem-footer {
+                    padding-left: max(var(--pacem-layout-aside-padding), calc(var(--pacem-layout-aside-gap) + var(--pacem-sidebar-width) + var(--pacem-menu-width)));
+                }
+
+                .pacem-toolbar.toolbar-header,
+                .pacem-toolbar.toolbar-footer {
+                    grid-template-columns: calc(var(--pacem-sidebar-width) + var(--pacem-menu-width)) 1fr;
+                }
+            }
+        }
+
+        &[aside] {
+            /* keeps the same margin from the <aside> element on the right as from the menu on the left (when open) */
+            padding-right: calc(var(--pacem-layout-aside-gap) + var(--pacem-layout-aside-width));
+
+            /* aside only visible in large screens (2) */
+            aside[pacem],
+            .pacem-aside {
+                display: block;
+                position: fixed;
+                right: 0;
+                top: var(--pacem-layout-header-height);
+                bottom: var(--pacem-layout-footer-height);
+                width: var(--pacem-layout-aside-width);
+                overflow: auto;
+            }
+
+            /* layout with a header toolbar? */
+            &[headbar], &[headbar-prepend] {
+                aside[pacem],
+                .pacem-aside {
+                    top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height));
+                }
+            }
+
+            /* layout with a footer toolbar? */
+            &[footbar], &[footbar-append] {
+                aside[pacem],
+                .pacem-aside {
+                    bottom: var(--pacem-layout-toolbar-height);
+                }
+            }
+
+            /* layout with large (tall) footer? */
+            &[bigfooter] {
+
+                aside[pacem],
+                .pacem-aside {
+                    bottom: var(--pacem-layout-bigfooter-height);
+                }
+
+                /* layout with large (tall) footer AND footer toolbar!? */
+                &[footbar], &[footbar-append] {
+                    aside[pacem],
+                    .pacem-aside {
+                        bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height));
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* .pacem-stretch (min-height minus the visible header/footer/toolbars): generated/layout-stretch.css */

package/src/layout/lists.css

@@ -0,0 +1,104 @@
+.pacem-animations {
+
+    .pacem-animatable-list,
+    .pacem-anim-list {
+
+        &:not(.anim-list-none) {
+
+            > * {
+                --pacem--anim-list-delay: .05s;
+                animation: list-item .25s var(--pacem-easing-out-sine) both;
+                animation-delay: min(calc(var(--pacem--anim-list-delay) * 20 * sibling-index() / sibling-count()), calc(sibling-index() * var(--pacem--anim-list-delay)));
+            }
+
+            &.anim-list-quick > * {
+                --pacem--anim-list-delay: .025s;
+            }
+
+            &.pacem-list-right {
+
+                > * {
+                    animation-name: list-item-right;
+                }
+            }
+
+            &.pacem-list-left {
+
+                > * {
+                    animation-name: list-item-left;
+                }
+            }
+
+            &.pacem-list-bottom {
+
+                > * {
+                    animation-name: list-item-bottom;
+                }
+            }
+
+            &.pacem-list-appear {
+
+                > * {
+                    animation-name: appear-anim;
+                }
+            }
+        }
+    }
+}
+
+ol, ul {
+    &.pacem-list {
+        margin-bottom: 0;
+
+        > li {
+            min-height: 1.1em;
+
+            &.list-item {
+                padding: calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) / 2);
+                list-style-type: none;
+                margin-left: calc(var(--pacem-grid-spacing) * -1.25);
+
+                &:focus,
+                &:hover {
+                    background-color: var(--pacem-color-suggest-focus-back);
+                    color: var(--pacem-color-suggest-focus-fore);
+                }
+            }
+        }
+
+        &.list-inline,
+        &.list-unstyled {
+            padding-left: 0;
+            list-style-type: none;
+        }
+
+        &.list-inline > li {
+            display: inline-block;
+            margin-left: .5em;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+}
+
+dl.pacem-list {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-column-gap: calc(var(--pacem-grid-spacing) / 3);
+    grid-row-gap: calc(var(--pacem-grid-spacing) / 2);
+
+    dt {
+        grid-column: 1;
+        max-width: var(--pacem-grid-cell);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-weight: 700;
+    }
+
+    dd {
+        grid-column: 2;
+    }
+}

package/src/layout/other.css

@@ -0,0 +1,25 @@
+/* kept names from known bootstrap classes */
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.clearfix {
+    clear: both;
+}
+
+.pacem-badge,
+.badge {
+    display: inline-block;
+    padding: 0 calc(var(--pacem-grid-spacing) / 4);
+    /* rounded only in rounded themes */
+    border-radius: calc(sign(var(--pacem-border-radius)) * .25em);
+
+    &.badge-circle {
+        border-radius: 50%;
+        padding: 0 calc(var(--pacem-grid-spacing) / 6);
+    }
+}