@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/typography.less

@@ -0,0 +1,110 @@
+@import "../shared";
+
+body {
+    font-family: @font_std;
+    color: @color_default;
+}
+
+h1, h2, h3 {
+    margin: @grid_spacing/3 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: @font_main_weight;
+    font-family: ~"var(--@{PCSS}-font-main)";
+    line-height: 1.1;
+
+    &.@{PCSS}-title {
+        color: @color_title;
+        background-color: @color_title_inv;
+    }
+
+    &.@{PCSS}-title when (@uppercase_titles = true) {
+        text-transform: uppercase;
+    }
+}
+
+h1 {
+    .FontMainSize(2);
+}
+
+h2 {
+    .FontMainSize(1.75);
+}
+
+h3 {
+    .FontMainSize(1.5);
+}
+
+h4 {
+    .FontMainSize(1.3333);
+}
+
+h5 {
+    .FontMainSize(1.25);
+}
+
+h6 {
+    .FontMainSize(1.1);
+}
+
+p {
+    margin-bottom: .5rem;
+}
+
+small {
+    opacity: .8;
+    font-size: 0.86667em;
+}
+
+code,
+samp,
+kbd {
+    .FontTech();
+    padding: 0 @grid_spacing/6;
+}
+
+samp,
+code {
+    color: @color_code;
+    background: @color_code_back;
+}
+
+kbd {
+    color: @color_background;
+    .FontTech(.86667);
+    //font-weight: bold;
+    background: fade(@color_default, 90);
+    border-radius: @grid_spacing/12;
+}
+
+mark, .@{PCSS}-highlight {
+    background-color: @color_primary;
+    color: @color_light;
+}
+
+blockquote {
+    border: 0;
+    padding: 1em 1em 1em 2em;
+    position: static;
+    text-align: inherit;
+    margin: 1em 0;
+    font-style: italic;
+    color: inherit;
+    border-left: @grid_spacing/6 solid @color_border;
+}
+
+hr {
+    margin: @grid_spacing/2 0;
+    height: 0;
+    border: 0;
+    border-top: 1px solid fade(@color_default, 10);
+
+    &.spacer {
+        margin-bottom: @grid_spacing;
+    }
+}
+
+a, a:hover, a:visited {
+    color: @color_link;
+}

package/pacem/layout/dark/visibility.less

@@ -0,0 +1,406 @@
+@import "../shared";
+
+.full-width {
+    width: 100%;
+}
+
+.full-height {
+    height: 100%;
+}
+
+/* #region overflow-specific*/
+
+.overflow-visible {
+    overflow: visible !important;
+}
+
+.overflow-scroll {
+    overflow: scroll !important;
+}
+
+.overflow-auto {
+    overflow: auto !important;
+}
+
+.overflow-hidden {
+    overflow: hidden !important;
+}
+
+.overflow-y-scroll {
+    overflow-y: scroll !important;
+}
+
+.overflow-y-auto {
+    overflow-y: auto !important;
+}
+
+.overflow-x-auto {
+    overflow-x: auto !important;
+}
+
+.overflow-x-scroll {
+    overflow-x: scroll !important;
+}
+
+.overflow-y-hidden {
+    overflow-y: hidden !important;
+}
+
+.overflow-x-hidden {
+    overflow-x: hidden !important;
+}
+
+/* #endregion*/
+
+.hit-none,
+.@{PCSS}-inert {
+    pointer-events: none !important;
+}
+
+.hit-auto {
+    pointer-events: auto !important;
+}
+
+.@{PCSS}-hide {
+    display: none;
+}
+
+.select-none,
+.@{PCSS}-unselect {
+    user-select: none;
+}
+
+.@{PCSS}-invisibile {
+    visibility: hidden;
+}
+
+.@{PCSS}-show {
+    display: inherit;
+}
+
+.@{PCSS}-transparent {
+    opacity: 0 !important;
+}
+
+.display-block {
+    display: block !important;
+}
+
+.display-grid {
+    display: grid !important;
+}
+
+.display-inline-grid {
+    display: inline-grid !important;
+}
+
+.display-grid,
+.display-inline-grid {
+
+    &.grid-right {
+        justify-content: right;
+    }
+
+    &.grid-end {
+        justify-content: end;
+    }
+
+    &.grid-left {
+        justify-content: left;
+    }
+
+    &.grid-start {
+        justify-content: start;
+    }
+
+    &.grid-center {
+        justify-content: center;
+    }
+
+    &.grid-top {
+        align-items: start;
+    }
+
+    &.grid-middle {
+        align-items: center;
+    }
+
+    &.grid-bottom {
+        align-items: end;
+    }
+}
+
+.display-inline-flex {
+    display: inline-flex !important;
+}
+
+.display-flex {
+    display: flex !important;
+}
+
+.display-flex,
+.display-inline-flex {
+    flex-flow: row wrap;
+    align-content: stretch;
+    align-items: flex-start;
+
+    &.flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    &.flex-fill {
+        align-items: stretch;
+
+        > * {
+            flex: 1 1 100%;
+
+            &.flex-auto,
+            &.self-auto {
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    > .flex-stretch,
+    > .self-stretch,
+    > .self-fill {
+        align-self: stretch;
+    }
+
+    &.flex-fill > .flex-noshrink,
+    > .flex-noshrink {
+        flex-shrink: 0;
+    }
+
+    &.flex-fill > .flex-nogrow,
+    > .flex-nogrow {
+        flex-grow: 0;
+    }
+
+    &.flex-vertical {
+        flex-direction: column;
+    }
+
+    &.flex-right {
+        justify-content: right;
+    }
+
+    &.flex-end {
+        justify-content: flex-end;
+    }
+
+    &.flex-left {
+        justify-content: left;
+    }
+
+    &.flex-start {
+        justify-content: flex-start;
+    }
+
+    &.flex-center {
+        justify-content: center;
+    }
+
+    &.flex-top {
+        align-items: flex-start;
+    }
+
+    &.flex-middle {
+        align-items: center;
+    }
+
+    &.flex-bottom {
+        align-items: flex-end;
+    }
+}
+
+.display-inline {
+    display: inline !important;
+
+    &.inline-middle {
+        vertical-align: middle;
+    }
+}
+
+.display-inline-block {
+    display: inline-block !important;
+
+    &.inline-block-middle{
+        vertical-align: middle;
+    }
+}
+
+.HideWhenAtMost(@size) {
+    // BUGGY. check and fix.
+    .hide-@{size} {
+        .Inert();
+    }
+}
+
+.HideWhenLessThan(@size) {
+    .show-@{size} {
+        .Inert();
+    }
+}
+
+.ShowWhenAtLeast(@size) {
+
+    .show-@{size}-block {
+        display: block;
+    }
+
+    .show-@{size}-inline-block {
+        display: inline-block;
+    }
+
+    .show-@{size}-inline {
+        display: inline;
+    }
+}
+// hide when below 'small' width
+@media (max-width: @threshold_sm - 1) {
+    .HideWhenLessThan(sm);
+    .HideWhenAtMost(xs);
+    // exception (show-xs: show only when EXACTLY 'xs')
+    .ShowWhenAtLeast(xs);
+}
+// show when at least 'small' wide
+@media (min-width: @threshold_sm) {
+    .ShowWhenAtLeast(sm);
+}
+// hide when at most 'small' wide
+@media (max-width: @threshold_md - 1) {
+    .HideWhenLessThan(md);
+    .HideWhenAtMost(sm);
+}
+// show when at least 'medium' wide
+@media (min-width: @threshold_md) {
+    .ShowWhenAtLeast(md);
+}
+// hide when at most 'medium' wide
+@media (max-width: @threshold_lg - 1) {
+    .HideWhenLessThan(lg);
+    .HideWhenAtMost(md);
+}
+// show when at least 'lg' wide
+@media (min-width: @threshold_lg) {
+    .ShowWhenAtLeast(lg);
+}
+// hide when at most 'lg' wide
+@media (max-width: @threshold_xl - 1) {
+    .HideWhenLessThan(xl);
+    .HideWhenAtMost(lg);
+}
+// show when at least 'xl' wide
+@media (min-width: @threshold_xl) {
+    .ShowWhenAtLeast(xl);
+}
+// hide when at most 'xl' wide
+@media (max-width: @threshold_hd - 1) {
+    .HideWhenLessThan(hd);
+    .HideWhenAtMost(xl);
+}
+// show when at least 'hd' wide
+@media (min-width: @threshold_hd) {
+    .ShowWhenAtLeast(hd);
+}
+// hide when at most 'hd' wide
+@media (max-width: @threshold_2k - 1) {
+    .HideWhenLessThan(2k);
+    .HideWhenAtMost(hd);
+}
+// show when at least '2k' wide
+@media (min-width: @threshold_2k) {
+    .ShowWhenAtLeast(2k);
+}
+// hide when at most '2k' wide
+@media (max-width: @threshold_4k - 1) {
+    .HideWhenLessThan(4k);
+    .HideWhenAtMost(2k);
+}
+// show when at least '4k' wide
+@media (min-width: @threshold_4k) {
+    .ShowWhenAtLeast(4k);
+}
+// show/hide when portrait
+@media (orientation: portrait) {
+    .HideWhenLessThan(o);
+    .HideWhenAtMost(v);
+    .ShowWhenAtLeast(v);
+}
+// show/hide when landscape
+@media (orientation: landscape) {
+    .HideWhenLessThan(v);
+    .HideWhenAtMost(h);
+    .ShowWhenAtLeast(h);
+}
+
+@PCSSs: ~"@{PCSS} ";
+
+.@{PCSS}-container {
+    // hide when below 'small' width
+    @container @PCSSs (max-width: @threshold_sm - 1) {
+        .HideWhenLessThan(sm);
+        .HideWhenAtMost(xs);
+        // exception (show-xs: show only when EXACTLY 'xs')
+        .ShowWhenAtLeast(xs);
+    }
+    // show when at least 'small' wide
+    @container @PCSSs (min-width: @threshold_sm) {
+        .ShowWhenAtLeast(sm);
+    }
+    // hide when at most 'small' wide
+    @container @PCSSs (max-width: @threshold_md - 1) {
+        .HideWhenLessThan(md);
+        .HideWhenAtMost(sm);
+    }
+    // show when at least 'medium' wide
+    @container @PCSSs (min-width: @threshold_md) {
+        .ShowWhenAtLeast(md);
+    }
+    // hide when at most 'medium' wide
+    @container @PCSSs (max-width: @threshold_lg - 1) {
+        .HideWhenLessThan(lg);
+        .HideWhenAtMost(md);
+    }
+    // show when at least 'lg' wide
+    @container @PCSSs (min-width: @threshold_lg) {
+        .ShowWhenAtLeast(lg);
+    }
+    // hide when at most 'lg' wide
+    @container @PCSSs (max-width: @threshold_xl - 1) {
+        .HideWhenLessThan(xl);
+        .HideWhenAtMost(lg);
+    }
+    // show when at least 'xl' wide
+    @container @PCSSs (min-width: @threshold_xl) {
+        .ShowWhenAtLeast(xl);
+    }
+    // hide when at most 'xl' wide
+    @container @PCSSs (max-width: @threshold_hd - 1) {
+        .HideWhenLessThan(hd);
+        .HideWhenAtMost(xl);
+    }
+    // show when at least 'hd' wide
+    @container @PCSSs (min-width: @threshold_hd) {
+        .ShowWhenAtLeast(hd);
+    }
+    // hide when at most 'hd' wide
+    @container @PCSSs (max-width: @threshold_2k - 1) {
+        .HideWhenLessThan(2k);
+        .HideWhenAtMost(hd);
+    }
+    // show when at least '2k' wide
+    @container @PCSSs (min-width: @threshold_2k) {
+        .ShowWhenAtLeast(2k);
+    }
+    // hide when at most '2k' wide
+    @container @PCSSs (max-width: @threshold_4k - 1) {
+        .HideWhenLessThan(4k);
+        .HideWhenAtMost(2k);
+    }
+    // show when at least '4k' wide
+    @container @PCSSs (min-width: @threshold_4k) {
+        .ShowWhenAtLeast(4k);
+    }
+}

package/pacem/layout/index.less

@@ -0,0 +1,2 @@
+@import "animations";
+@import "@{theme}/index";

package/pacem/layout/light/index.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "../dark/index";

package/pacem/layout/light/layout.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "../dark/layout";