@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/other.less

@@ -0,0 +1,29 @@
+@import "../shared";
+
+// kept names from known bootstrap classes
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.clearfix {
+    clear: both;
+}
+
+.@{PCSS}-badge,
+.badge {
+    display: inline-block;
+    padding: 0 @grid_spacing/4;
+
+    & when (@border_radius > 0) {
+        border-radius: .25em;
+    }
+
+    &.badge-circle{
+        border-radius: 50%;
+        padding: 0 @grid_spacing/6;
+    }
+}

package/pacem/layout/dark/panels.less

@@ -0,0 +1,299 @@
+@import "../mixins";
+
+.PanelColorize(@_clr) {
+    .PanelColorize(panel, @_clr);
+}
+
+.@{PCSS}-scrollable {
+    display: block;
+    overflow: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.@{PCSS}-panel,
+.@{PCSS}-wrapper {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.@{PCSS}-panel.panel-lonely {
+    margin: 0;
+}
+
+.@{PCSS}-panel {
+    .Panel(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: @panel_spacing;
+        padding-bottom: @panel_spacing;
+        .Ellipsed();
+    }
+
+    > .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;
+        align-self: center;
+        padding: 0 @panel_spacing 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.@{PCSS}-flex,
+    .panel-body.@{PCSS}-row {
+        margin: -@panel_spacing -(@panel_spacing * 7/3) 0 -(@panel_spacing * 7/3);
+    }
+
+    .panel-body.@{PCSS}-grid {
+        padding: 0;
+
+        .@{PCSS}-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-master {
+    }
+
+
+    @_pad: @grid_spacing/1.5;
+
+    &.panel-side-left {
+        grid-template-columns: @grid_cell + @_pad 1fr auto;
+
+        &.side-large {
+            grid-template-columns: @_pad+ ceil(1.414 * @grid_cell) 1fr auto;
+        }
+
+        &.side-larger {
+            grid-template-columns: @_pad+ 2 * @grid_cell 1fr auto;
+        }
+
+        &.side-small {
+            grid-template-columns: @_pad+ 2 * @grid_spacing 1fr auto;
+        }
+
+        &.side-smaller {
+            grid-template-columns: @_pad+ @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 @_pad+ @grid_cell;
+
+        &.side-large {
+            grid-template-columns: 1fr auto @_pad+ ceil(1.414 * @grid_cell);
+        }
+
+        &.side-larger {
+            grid-template-columns: 1fr auto @_pad+ 2 * @grid_cell;
+        }
+
+        &.side-small {
+            grid-template-columns: 1fr auto @_pad+ 2 * @grid_spacing;
+        }
+
+        &.side-smaller {
+            grid-template-columns: 1fr auto @_pad+ @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: @grid_spacing/2 0 @grid_spacing/2 @grid_spacing/1.5;
+        }
+    }
+
+    &.panel-side-right {
+        > .panel-side {
+            padding: @grid_spacing/2 @grid_spacing/1.5 @grid_spacing/2 0;
+        }
+    }
+}
+
+.@{PCSS}-grid > .@{PCSS}-cell {
+
+    &.@{PCSS}-panel {
+        margin: 0 /*!important*/;
+        grid-template-rows: auto 1fr auto;
+    }
+}
+
+/* #region MASTER PANEL */
+.@{PCSS}-wrapper {
+    @_brd_in_clr: #595a58;
+    @_brd_in_w: 2px;
+    border: @grid_spacing/3 solid #868584;
+    box-shadow: inset @_brd_in_w 0 0 @_brd_in_clr, inset 0 @_brd_in_w 0 @_brd_in_clr, inset 0 -@_brd_in_w 0 @_brd_in_clr, inset -@_brd_in_w 0 0 @_brd_in_clr;
+    padding: @_brd_in_w;
+    border-radius: @border_panel_radius;
+
+    .@{PCSS}-row,
+    .@{PCSS}-flex {
+        margin: 0 @grid_spacing/3;
+    }
+
+    .@{PCSS}-grid {
+        @_gap: @grid_spacing/1.5;
+        margin: 0 @_gap @_gap @_gap;
+        grid-gap: @_gap;
+    }
+
+    .@{PCSS}-panel {
+        margin: 0 @grid_spacing/3 @grid_spacing/1.5 @grid_spacing/3;
+        padding-bottom: 0;
+
+        .panel-heading {
+            padding: @grid_spacing/2 @grid_spacing/1.5;
+        }
+
+        .panel-body /*:last-child*/,
+        .panel-footer /*:last-child*/ {
+            padding-bottom: @grid_spacing/1.5;
+        }
+
+        &.panel-master {
+            margin-left: 0;
+            margin-right: 0;
+            border-radius: 0;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+.@{PCSS}-panel.panel-master {
+    .PanelColorize(@color_default_inv);
+    background-color: @color_default;
+
+    .panel-heading {
+        text-shadow: none;
+    }
+
+    .panel-body,
+    .panel-footer {
+        color: @color_default_inv;
+    }
+
+    a, a:hover {
+        color: @color_accent;
+    }
+
+    .panel-tools,
+    .tools {
+
+        @{P}-button:before {
+            color: @color_default_inv;
+        }
+    }
+}
+
+.Wide() {
+    margin: -@grid_spacing;
+    margin-bottom: 0;
+    padding: 0;
+    border: none;
+
+    &.panel-wrapper {
+        box-shadow: none;
+
+        > .panel-master {
+            border: none;
+
+            & when (@shadows = false) {
+                // add slight shadow to unshadowed themes
+                // '@shadow true' logic willingly inverted.
+                box-shadow: inset 0 4px 16px rgba(0,0,0,0.5);
+            }
+        }
+    }
+}
+
+.@{PCSS}-wide {
+    .Wide();
+}
+
+@media (orientation:portrait) {
+    .@{PCSS}-v-wide {
+        .Wide();
+    }
+}
+
+@media (max-width:@threshold_sm - 1) {
+    .@{PCSS}-xs-wide {
+        .Wide();
+    }
+}
+
+/* #endregion */
+
+.@{PCSS}-animations {
+    .PanelRiseAnim(panel);
+}

package/pacem/layout/dark/positioning.less

@@ -0,0 +1,273 @@
+@import "../shared";
+@import "../../ui/shared";
+
+.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: @hamburger-z-index - 100;
+
+    &.fixed-top {
+        top: 0;
+    }
+
+    &.fixed-left {
+        left: 0;
+    }
+
+    &.fixed-bottom {
+        bottom: 0;
+    }
+
+    &.fixed-right {
+        right: 0;
+    }
+}
+
+.pos-sticky {
+    position: sticky;
+    z-index: @header_z_index - 1;
+
+    &.sticky-top {
+        top: 0;
+    }
+
+    &.sticky-bottom {
+        bottom: 0;
+    }
+}
+
+
+// sticky overrides based on layout
+// layout-driven sticky position override
+.@{PCSS}-body {
+
+    .StickyBottom(@base) {
+        bottom: @base;
+
+        &.bottom-1 {
+            bottom: @base + @grid_spacing/3;
+
+            &.sticky-absolute {
+                bottom: @grid_spacing/3;
+            }
+        }
+
+        &.bottom-2 {
+            bottom: @base + @grid_spacing/2;
+
+            &.sticky-absolute {
+                bottom: @grid_spacing/2;
+            }
+        }
+
+        &.bottom-3 {
+            bottom: @base + @grid_spacing;
+
+            &.sticky-absolute {
+                bottom: @grid_spacing;
+            }
+        }
+
+        &.bottom-4 {
+            bottom: @base + @grid_spacing * 1.3333;
+
+            &.sticky-absolute {
+                bottom: @grid_spacing * 1.3333;
+            }
+        }
+
+        &.bottom-5 {
+            bottom: @base + @grid_spacing * 1.5;
+
+            &.sticky-absolute {
+                bottom: @grid_spacing * 1.5;
+            }
+        }
+
+        &.bottom-6 {
+            bottom: @base + @grid_spacing * 2;
+
+            &.sticky-absolute {
+                bottom: @grid_spacing * 2;
+            }
+        }
+    }
+    // bottom
+
+    &[footbar] {
+
+        .pos-sticky.sticky-bottom {
+            .StickyBottom( @layout_toolbar_height);
+        }
+    }
+
+    &[footer] {
+        .pos-sticky.sticky-bottom {
+            .StickyBottom( @layout_footer_height);
+        }
+    }
+
+    &[bigfooter] {
+        .pos-sticky.sticky-bottom {
+            .StickyBottom( @layout_bigfooter_height);
+        }
+    }
+
+    &[footer][footbar] {
+        .pos-sticky.sticky-bottom {
+            .StickyBottom( @layout_footer_height + @layout_toolbar_height);
+        }
+    }
+
+    &[bigfooter][footbar] {
+        .pos-sticky.sticky-bottom {
+            .StickyBottom( @layout_bigfooter_height + @layout_toolbar_height);
+        }
+    }
+
+    .pos-sticky.sticky-bottom.bottom-0 {
+        bottom: 0;
+    }
+
+    .StickyTop(@base) {
+        top: @base;
+
+        &.top-1 {
+            top: @base + @grid_spacing/3;
+
+            &.sticky-absolute {
+                top: @grid_spacing/3;
+            }
+        }
+
+        &.top-2 {
+            top: @base + @grid_spacing/2;
+
+            &.sticky-absolute {
+                top: @grid_spacing/2;
+            }
+        }
+
+        &.top-3 {
+            top: @base + @grid_spacing;
+
+            &.sticky-absolute {
+                top: @grid_spacing;
+            }
+        }
+
+        &.top-4 {
+            top: @base + @grid_spacing * 1.3333;
+
+            &.sticky-absolute {
+                top: @grid_spacing * 1.3333;
+            }
+        }
+
+        &.top-5 {
+            top: @base + @grid_spacing * 1.5;
+
+            &.sticky-absolute {
+                top: @grid_spacing * 1.5;
+            }
+        }
+
+        &.top-6 {
+            top: @base + @grid_spacing * 2;
+
+            &.sticky-absolute {
+                top: @grid_spacing * 2;
+            }
+        }
+    }
+    // top
+
+    &[headbar] {
+
+        .pos-sticky.sticky-top {
+            .StickyTop( @layout_toolbar_height);
+        }
+    }
+
+    &[header] {
+        .pos-sticky.sticky-top {
+            .StickyTop( @layout_header_height);
+        }
+    }
+
+    &[header][headbar] {
+        .pos-sticky.sticky-top {
+            .StickyTop( @layout_header_height + @layout_toolbar_height);
+        }
+    }
+
+    .pos-sticky.sticky-top.top-0 {
+        top: 0;
+    }
+}
+
+// kept names from known bootstrap classes
+.caret,
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.clearfix {
+    clear: both;
+}
+
+.z-index {
+
+    each(range(12), {
+        &.z--@{value}{
+            z-index: @value !important;
+        }
+    });
+
+    &.z-header {
+        z-index: @header_z_index !important;
+    }
+
+    &.z-under-header {
+        z-index: @header_z_index - 1 !important;
+    }
+
+    &.z-over-header {
+        z-index: @header_z_index + 1 !important;
+    }
+
+    &.z-top {
+        z-index: @lightbox_z_index + 1 !important;
+    }
+}

package/pacem/layout/dark/scroll.less

@@ -0,0 +1,93 @@
+@import "../shared";
+
+/** Hides scrollbars without impacting scrolling. */
+.scrollbars-none {
+    &::-webkit-scrollbar{
+        display: none;
+    }
+    // old edge:
+    -ms-overflow-style: none;
+    // firefox:
+    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-start {
+            // defaults to start
+        }
+
+        &.snap-center {
+            scroll-snap-align: center;
+        }
+
+        &.snap-end {
+            scroll-snap-align: end;
+        }
+
+        &.snap-always {
+            scroll-snap-stop: always;
+        }
+    }
+}

package/pacem/layout/dark/shapes.less

@@ -0,0 +1,22 @@
+@import "../shared";
+
+.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: @border_radius;
+
+    &.square-sharp {
+        border-radius: 0;
+    }
+}