@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/layout.less

@@ -0,0 +1,616 @@
+@import "../shared";
+
+@_aside_width: @layout_aside_width;
+@_header_height: @layout_header_height;
+@_toolbar_height: @layout_toolbar_height;
+@_footer_height: @layout_footer_height;
+@_bigfooter_height: @layout_bigfooter_height;
+
+@_aside_margin: @layout_aside_gap;
+
+.LayoutHeaderHidden() {
+    // start hidden
+    transform: translateY(-(@_header_height + @_toolbar_height)) translateX(0);
+    opacity: 0;
+}
+
+.LayoutFooterHidden() {
+    // start hidden
+    transform: translateY(@_bigfooter_height + @_toolbar_height) translateX(0);
+    opacity: 0;
+}
+
+.LayoutHeaderFooterVisible() {
+    opacity: 1;
+    transform: translateY(0) translateX(0);
+}
+
+// body + menu-relevant transitions
+.@{PCSS}-body {
+    display: block;
+    min-height: 100vh;
+    padding: @grid_spacing;
+    box-sizing: border-box;
+    z-index: 0;
+
+    &[headbar] {
+        padding-top: @grid_spacing + @_toolbar_height;
+    }
+
+    &[header] {
+        padding-top: @grid_spacing + @_header_height;
+
+        &[headbar], &[headbar-prepend] {
+            padding-top: @grid_spacing + @_toolbar_height + @_header_height;
+        }
+    }
+
+    &[footbar] {
+        padding-bottom: @grid_spacing + @_toolbar_height;
+    }
+
+    &[footer] {
+        padding-bottom: @grid_spacing + @_footer_height;
+
+        &[footbar], &[footbar-append] {
+            padding-bottom: @grid_spacing + @_toolbar_height + @_footer_height;
+        }
+    }
+
+    &[bigfooter] {
+        padding-bottom: @grid_spacing + @_bigfooter_height;
+
+        &[footbar], &[footbar-append] {
+            padding-bottom: @grid_spacing + @_toolbar_height + @_bigfooter_height;
+        }
+    }
+
+    &.@{PCSS}-menu-close {
+    }
+
+    &.@{PCSS}-menu-open {
+    }
+
+    &.@{PCSS}-animations.@{PCSS}-animatable {
+        transition: padding @easing_in_out_sine .3s;
+
+        &.@{PCSS}-menu-close {
+            transition-delay: .25s;
+        }
+
+        &.@{PCSS}-menu-open {
+        }
+    }
+}
+
+// header/footer std
+header[pacem],
+.@{PCSS}-header,
+footer[pacem],
+.@{PCSS}-footer {
+    position: fixed;
+    width: 100vw;
+    left: 0;
+    z-index: @header-z-index;
+    box-sizing: border-box;
+    .Background(@color_background);
+}
+
+// header std
+header[pacem],
+.@{PCSS}-header {
+    height: @_header_height + @_toolbar_height;
+    padding-left: @grid_cell;
+    padding-right: @grid_spacing;
+    padding-top: @_toolbar_height;
+    top: 0;
+    display: block;
+    // start hidden
+    .LayoutHeaderHidden();
+
+    &.header-border {
+        border-bottom: 1px solid @color_border;
+    }
+}
+
+// footer std
+footer[pacem],
+.@{PCSS}-footer {
+    bottom: 0;
+    height: @_bigfooter_height + @_toolbar_height;
+    padding-left: @grid_spacing;
+    padding-right: @grid_spacing;
+    padding-bottom: @_toolbar_height + (@_bigfooter_height - @_footer_height);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    // start hidden
+    .LayoutFooterHidden();
+
+    &.footer-border {
+        border-top: 1px solid @color_border;
+    }
+}
+
+// header/footer (custom)
+.@{PCSS}-body[bigfooter] {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        padding-bottom: @_toolbar_height;
+    }
+}
+
+// aside only visible in large screens (1)
+aside[pacem], .@{PCSS}-aside {
+    display: none;
+}
+
+/* #region toolbars*/
+
+// default
+.@{PCSS}-toolbar.toolbar-header,
+.@{PCSS}-toolbar.toolbar-footer {
+    position: fixed;
+    width: 100vw;
+    left: 0;
+    display: grid;
+    z-index: @header-z-index - 1;
+    box-sizing: border-box;
+    .Background(@color_background);
+    height: @_toolbar_height;
+    padding: 0;
+    margin: 0;
+    // css grid
+    grid-template-columns: minmax(@grid_cell, auto) 1fr;
+
+    > * {
+        height: @_toolbar_height;
+    }
+
+    > .toolbar-side {
+        grid-column: 1;
+    }
+
+    > .toolbar-main {
+        grid-column: 2;
+    }
+}
+
+// header toolbar
+.@{PCSS}-toolbar.toolbar-header {
+    top: 0;
+    // start hidden
+    .LayoutHeaderHidden();
+
+    &.toolbar-border {
+        border-bottom: 1px solid @color_border;
+    }
+}
+
+
+// footer toolbar
+.@{PCSS}-toolbar.toolbar-footer {
+    bottom: 0;
+    // start hidden
+    .LayoutFooterHidden();
+
+    &.toolbar-border {
+        border-top: 1px solid @color_border;
+    }
+}
+
+
+/* #endregion */
+
+/* #region shadows */
+._HeadShadow() {
+    box-shadow: 0 1px @grid_spacing rgba(0,0,0,0.5);
+    border-bottom-color: transparent;
+}
+
+._FootShadow() {
+    border-top-color: transparent;
+    box-shadow: 0 0 @grid_spacing rgba(0,0,0,0.25);
+}
+
+.@{PCSS}-body[header]:not([headbar]) when (@shadows = true) {
+
+    header[pacem],
+    .@{PCSS}-header {
+        ._HeadShadow();
+    }
+}
+
+.@{PCSS}-body[headbar-prepend]:not([header]),
+.@{PCSS}-body[headbar] {
+    .@{PCSS}-toolbar.toolbar-header when (@shadows = true) {
+        ._HeadShadow();
+    }
+}
+
+.@{PCSS}-body[footer]:not([footbar]) when (@shadows = true) {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        ._FootShadow();
+    }
+}
+
+.@{PCSS}-body[footbar-append]:not([footer]),
+.@{PCSS}-body[footbar] {
+    .@{PCSS}-toolbar.toolbar-footer when (@shadows = true) {
+        ._FootShadow();
+    }
+}
+/* #endregion */
+
+// visible head toolbar
+.@{PCSS}-body[headbar]:not([header]),
+.@{PCSS}-body[headbar-prepend] {
+
+    .@{PCSS}-toolbar.toolbar-header {
+        opacity: 1;
+        transform: translateX(0) translateY(0);
+    }
+}
+
+.@{PCSS}-body[headbar][header] {
+
+    .@{PCSS}-toolbar.toolbar-header {
+        opacity: 1;
+        transform: translateX(0) translateY(@_header_height);
+    }
+}
+
+// visible header
+.@{PCSS}-body[header] {
+
+    header[pacem],
+    .@{PCSS}-header {
+        opacity: 1;
+        transform: translateX(0) translateY(-@_toolbar_height);
+    }
+
+    &[headbar-prepend] {
+        header[pacem],
+        .@{PCSS}-header {
+            transform: translateX(0) translateY(0);
+        }
+
+        .@{PCSS}-toolbar.toolbar-header {
+            z-index: @header-z-index + 1;
+        }
+    }
+}
+
+// visible footer
+.@{PCSS}-body[footer],
+.@{PCSS}-body[bigfooter] {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        opacity: 1;
+    }
+}
+
+.@{PCSS}-body[footer]:not([footbar-append]) {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        transform: translateX(0) translateY(@_toolbar_height + (@_bigfooter_height - @_footer_height));
+    }
+}
+
+.@{PCSS}-body[footer][footbar-append] {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        transform: translateX(0) translateY(@_bigfooter_height - @_footer_height);
+    }
+}
+
+.@{PCSS}-body[bigfooter]:not([footbar-append]) {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        transform: translateX(0) translateY(@_toolbar_height);
+    }
+}
+
+.@{PCSS}-body[bigfooter][footbar-append] {
+
+    footer[pacem],
+    .@{PCSS}-footer {
+        transform: translateX(0) translateY(0);
+    }
+}
+
+// visible foot toolbar
+.@{PCSS}-body[footbar],
+.@{PCSS}-body[footbar-append] {
+
+    .@{PCSS}-toolbar.toolbar-footer {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+.@{PCSS}-body[footbar] {
+
+    &[footer] {
+        .@{PCSS}-toolbar.toolbar-footer {
+            transform: translateY(-@_footer_height);
+        }
+    }
+
+    &[bigfooter] {
+
+        .@{PCSS}-toolbar.toolbar-footer {
+            transform: translateY(-@_bigfooter_height);
+        }
+    }
+}
+
+.@{PCSS}-body[footbar-append] {
+
+    .@{PCSS}-toolbar.toolbar-footer {
+        z-index: @header-z-index + 1;
+    }
+}
+
+// animations
+.@{PCSS}-body.@{PCSS}-animations {
+
+    header[pacem],
+    .@{PCSS}-header,
+    footer[pacem],
+    .@{PCSS}-footer {
+        transition: padding @easing_in_out_sine .3s, transform @easing_out_sine .3s, opacity .2s, box-shadow @easing_in_sine .25s;
+    }
+
+    .@{PCSS}-toolbar.toolbar-header,
+    .@{PCSS}-toolbar.toolbar-footer {
+        // not animatable (or not yet implemented in browsers)
+        transition: grid-template-columns @easing_in_out_sine .3s, transform @easing_out_sine .4s, opacity .2s, box-shadow @easing_in_sine .25s;
+    }
+
+    &.@{PCSS}-menu-close {
+        header[pacem],
+        .@{PCSS}-header,
+        footer[pacem],
+        .@{PCSS}-footer,
+        .@{PCSS}-toolbar.toolbar-header,
+        .@{PCSS}-toolbar.toolbar-footer {
+            transition-delay: .25s;
+        }
+    }
+
+    &.@{PCSS}-menu-open {
+    }
+}
+
+@media (min-width: @threshold_lg) {
+
+    // footer starts at @grid_spacing left for small screens,
+    // while header always at @grid_cell.
+    // re-align when screen is large.
+    header[pacem],
+    .@{PCSS}-header,
+    footer[pacem],
+    .@{PCSS}-footer {
+        padding-left: @layout_aside_padding;
+    }
+
+    // large screen @grid_cell padding set.
+    .@{PCSS}-body {
+        padding-left: @layout_aside_padding;
+        padding-right: @layout_aside_padding;
+        // when menu is open it enters like an aside drawer,
+        // so make room for it...
+
+        @_menu_open_left_pad: max(@layout_aside_padding, @_aside_margin + @menu_width);
+        @_sidebar_open_left_pad: max(@layout_aside_padding, @_aside_margin + @sidebar_width);
+        @_both_open_left_pad: max(@layout_aside_padding, @_aside_margin + @sidebar_width + @menu_width);
+
+        &.@{PCSS}-sidebar-open {
+            padding-left: @_sidebar_open_left_pad;
+            // ...and keep header and footer aligned.
+            header[pacem],
+            .@{PCSS}-header,
+            footer[pacem],
+            .@{PCSS}-footer {
+                padding-left: @_sidebar_open_left_pad;
+            }
+        }
+
+        &.@{PCSS}-menu-open {
+            padding-left: @_menu_open_left_pad;
+            // ...and keep header and footer aligned.
+            header[pacem],
+            .@{PCSS}-header,
+            footer[pacem],
+            .@{PCSS}-footer {
+                padding-left: @_menu_open_left_pad;
+            }
+
+            .@{PCSS}-toolbar.toolbar-header,
+            .@{PCSS}-toolbar.toolbar-footer {
+                grid-template-columns: @menu_width 1fr;
+            }
+
+            &.@{PCSS}-sidebar-open {
+                // both menu and sidebar open
+                padding-left: @_both_open_left_pad;
+                // ...and keep header and footer aligned.
+                header[pacem],
+                .@{PCSS}-header,
+                footer[pacem],
+                .@{PCSS}-footer {
+                    padding-left: @_both_open_left_pad;
+                }
+
+                .@{PCSS}-toolbar.toolbar-header,
+                .@{PCSS}-toolbar.toolbar-footer {
+                    grid-template-columns: @sidebar_width + @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: @_aside_margin + @_aside_width;
+            // aside only visible in large screens (2)
+            aside[pacem],
+            .@{PCSS}-aside {
+                display: block;
+                position: fixed;
+                right: 0;
+                top: @_header_height;
+                bottom: @_footer_height;
+                width: @_aside_width;
+                overflow: auto;
+            }
+            // layout with a header toolbar?
+            &[headbar], &[headbar-prepend] {
+                aside[pacem],
+                .@{PCSS}-aside {
+                    top: @_header_height + @_toolbar_height;
+                }
+            }
+            // layout with a footer toolbar?
+            &[footbar], &[footbar-append] {
+                aside[pacem],
+                .@{PCSS}-aside {
+                    bottom: @_toolbar_height;
+                }
+            }
+            // layout with large (tall) footer?
+            &[bigfooter] {
+
+                aside[pacem],
+                .@{PCSS}-aside {
+                    bottom: @_bigfooter_height;
+                }
+                //layout with large (tall) footer AND footer toolbar!?
+                &[footbar], &[footbar-append] {
+                    aside[pacem],
+                    .@{PCSS}-aside {
+                        bottom: @_bigfooter_height + @_toolbar_height;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+.@{PCSS}-body {
+
+    .Stretch(@keep) {
+        min-height: ~"calc(100vh - @{keep})";
+        margin: -@grid_spacing 0;
+
+        &.stretch-strict{
+            height: $min-height;
+        }
+
+    }
+
+    &[footer] .@{PCSS}-stretch {
+        .Stretch(@layout_footer_height);
+    }
+
+    &[bigfooter] .@{PCSS}-stretch {
+        .Stretch(@layout_bigfooter_height);
+    }
+
+    &[header] {
+        .@{PCSS}-stretch {
+            .Stretch( @layout_header_height);
+        }
+
+        &[footer] .@{PCSS}-stretch {
+            .Stretch(@layout_header_height + @layout_footer_height);
+        }
+
+        &[bigfooter] .@{PCSS}-stretch {
+            .Stretch(@layout_header_height + @layout_bigfooter_height);
+        }
+    }
+
+    &[headbar], &[footbar], &[headbar-prepend], &[footbar-append] {
+        .@{PCSS}-stretch {
+            .Stretch(@layout_toolbar_height);
+        }
+
+        &[footer] {
+            .@{PCSS}-stretch {
+                .Stretch(@layout_toolbar_height + @layout_footer_height);
+            }
+        }
+
+        &[bigfooter] {
+            .@{PCSS}-stretch {
+                .Stretch(@layout_toolbar_height + @layout_bigfooter_height);
+            }
+        }
+
+        &[header] {
+            .@{PCSS}-stretch {
+                .Stretch(@layout_toolbar_height + @layout_toolbar_height);
+            }
+
+            &[footer] {
+                .@{PCSS}-stretch {
+                    .Stretch(@layout_toolbar_height + @layout_toolbar_height + @layout_footer_height);
+                }
+            }
+
+            &[bigfooter] {
+                .@{PCSS}-stretch {
+                    .Stretch(@layout_toolbar_height + @layout_toolbar_height + @layout_bigfooter_height);
+                }
+            }
+        }
+    }
+
+    &[headbar][footbar], &[headbar-prepend][footbar], &[headbar][footbar-append], &[headbar-prepend][footbar-append] {
+        .@{PCSS}-stretch {
+            .Stretch(2 * @layout_toolbar_height);
+        }
+
+        &[footer] {
+            .@{PCSS}-stretch {
+                .Stretch(2 * @layout_toolbar_height + @layout_footer_height);
+            }
+        }
+
+        &[bigfooter] {
+            .@{PCSS}-stretch {
+                .Stretch(2 * @layout_toolbar_height + @layout_bigfooter_height);
+            }
+        }
+
+        &[header] {
+            .@{PCSS}-stretch {
+                .Stretch(@layout_toolbar_height + 2 * @layout_toolbar_height);
+            }
+
+            &[footer] {
+                .@{PCSS}-stretch {
+                    .Stretch(@layout_toolbar_height + 2 * @layout_toolbar_height + @layout_footer_height);
+                }
+            }
+
+            &[bigfooter] {
+                .@{PCSS}-stretch {
+                    .Stretch(@layout_toolbar_height + 2 * @layout_toolbar_height + @layout_bigfooter_height);
+                }
+            }
+        }
+    }
+}

package/pacem/layout/dark/lists.less

@@ -0,0 +1,112 @@
+@import "../shared";
+
+.ListItem (@count, @index) when (@index > 0) {
+    &:nth-child(@{index}) {
+        //animation-delay: 2.5s * @index / @count;
+        animation-delay: .05s * @index;
+    }
+    // next iteration
+    .ListItem(@count, @index - 1);
+}
+
+.ListItem (@count) {
+    .ListItem(@count, @count);
+}
+
+.@{PCSS}-animations {
+
+    .@{PCSS}-animatable-list,
+    .@{PCSS}-anim-list {
+
+        > * {
+            animation: list-item .25s @easing_out_sine both;
+            .ListItem(20);
+        }
+
+        &.@{PCSS}-list-right {
+
+            > * {
+                animation-name: list-item-right;
+            }
+        }
+
+        &.@{PCSS}-list-left {
+
+            > * {
+                animation-name: list-item-left;
+            }
+        }
+
+        &.@{PCSS}-list-bottom {
+
+            > * {
+                animation-name: list-item-bottom;
+            }
+        }
+
+        &.@{PCSS}-list-appear {
+
+            > * {
+                animation-name: appear-anim;
+            }
+        }
+    }
+}
+
+
+ol, ul {
+    &.@{PCSS}-list {
+        margin-bottom: 0;
+
+        > li {
+            min-height: 1.1em;
+
+            &.list-item {
+                padding: @grid_spacing/3 @grid_spacing/2;
+                //font-size: 1.1em;
+                list-style-type: none;
+                margin-left: -@grid_spacing * 1.25;
+
+                &:focus,
+                &:hover {
+                    background-color: @color_suggest_focus_back;
+                    color: @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.@{PCSS}-list {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-column-gap: @grid_spacing/3;
+    grid-row-gap: @grid_spacing/2;
+
+    dt {
+        grid-column: 1;
+        max-width: @grid_cell;
+        .Ellipsed();
+        font-weight: 700;
+    }
+
+    dd {
+        grid-column: 2;
+    }
+}