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

package/src/layout/generated/visibility.css

@@ -0,0 +1,384 @@
+/* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
+@media (--pacem-below-sm) {
+    .show-sm {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-xs {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .show-xs-block {
+        display: block;
+    }
+    .show-xs-inline-block {
+        display: inline-block;
+    }
+    .show-xs-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-sm) {
+    .show-xs {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .show-sm-block {
+        display: block;
+    }
+    .show-sm-inline-block {
+        display: inline-block;
+    }
+    .show-sm-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-below-md) {
+    .show-md {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-sm {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@media (--pacem-md) {
+    .show-md-block {
+        display: block;
+    }
+    .show-md-inline-block {
+        display: inline-block;
+    }
+    .show-md-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-below-lg) {
+    .show-lg {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-md {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@media (--pacem-lg) {
+    .show-lg-block {
+        display: block;
+    }
+    .show-lg-inline-block {
+        display: inline-block;
+    }
+    .show-lg-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-below-xl) {
+    .show-xl {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-lg {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@media (--pacem-xl) {
+    .show-xl-block {
+        display: block;
+    }
+    .show-xl-inline-block {
+        display: inline-block;
+    }
+    .show-xl-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-below-hd) {
+    .show-hd {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-xl {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@media (--pacem-hd) {
+    .show-hd-block {
+        display: block;
+    }
+    .show-hd-inline-block {
+        display: inline-block;
+    }
+    .show-hd-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-below-2k) {
+    .show-2k {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-hd {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@media (--pacem-2k) {
+    .show-2k-block {
+        display: block;
+    }
+    .show-2k-inline-block {
+        display: inline-block;
+    }
+    .show-2k-inline {
+        display: inline;
+    }
+}
+
+@media (--pacem-below-4k) {
+    .show-4k {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-2k {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@media (--pacem-4k) {
+    .show-4k-block {
+        display: block;
+    }
+    .show-4k-inline-block {
+        display: inline-block;
+    }
+    .show-4k-inline {
+        display: inline;
+    }
+}
+
+@media (orientation: portrait) {
+    .show-o {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-v {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .show-v-block {
+        display: block;
+    }
+    .show-v-inline-block {
+        display: inline-block;
+    }
+    .show-v-inline {
+        display: inline;
+    }
+}
+
+@media (orientation: landscape) {
+    .show-v {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .hide-h {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .show-h-block {
+        display: block;
+    }
+    .show-h-inline-block {
+        display: inline-block;
+    }
+    .show-h-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 768px) {
+    .pacem-container .show-sm {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-xs {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .show-xs-block {
+        display: block;
+    }
+    .pacem-container .show-xs-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-xs-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width >= 768px) {
+    .pacem-container .show-sm-block {
+        display: block;
+    }
+    .pacem-container .show-sm-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-sm-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 992px) {
+    .pacem-container .show-md {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-sm {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@container pacem (width >= 992px) {
+    .pacem-container .show-md-block {
+        display: block;
+    }
+    .pacem-container .show-md-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-md-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 1200px) {
+    .pacem-container .show-lg {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-md {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@container pacem (width >= 1200px) {
+    .pacem-container .show-lg-block {
+        display: block;
+    }
+    .pacem-container .show-lg-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-lg-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 1824px) {
+    .pacem-container .show-xl {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-lg {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@container pacem (width >= 1824px) {
+    .pacem-container .show-xl-block {
+        display: block;
+    }
+    .pacem-container .show-xl-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-xl-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 1920px) {
+    .pacem-container .show-hd {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-xl {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@container pacem (width >= 1920px) {
+    .pacem-container .show-hd-block {
+        display: block;
+    }
+    .pacem-container .show-hd-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-hd-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 2048px) {
+    .pacem-container .show-2k {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-hd {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@container pacem (width >= 2048px) {
+    .pacem-container .show-2k-block {
+        display: block;
+    }
+    .pacem-container .show-2k-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-2k-inline {
+        display: inline;
+    }
+}
+
+@container pacem (width < 3840px) {
+    .pacem-container .show-4k {
+        pointer-events: none !important;
+        display: none !important;
+    }
+    .pacem-container .hide-2k {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+@container pacem (width >= 3840px) {
+    .pacem-container .show-4k-block {
+        display: block;
+    }
+    .pacem-container .show-4k-inline-block {
+        display: inline-block;
+    }
+    .pacem-container .show-4k-inline {
+        display: inline;
+    }
+}

package/src/layout/grid-system.css

@@ -0,0 +1,49 @@
+/* #region FLEXBOX */
+
+.pacem-flex,
+.pacem-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-left: calc(var(--pacem-grid-spacing) / -2);
+    margin-right: calc(var(--pacem-grid-spacing) / -2);
+    align-items: stretch;
+}
+
+.pacem-flex.flex-vertical {
+    flex-direction: column;
+}
+
+.pacem-row .pacem-column,
+.pacem-flex .pacem-box {
+    margin: 0;
+    padding: 0 calc(var(--pacem-grid-spacing) / 2) var(--pacem-grid-spacing) calc(var(--pacem-grid-spacing) / 2);
+    box-sizing: border-box;
+}
+
+/* .col-{n}, .box-{n} (responsive too, generated/grid-system.css) only assign --pacem--cols:
+   n/12 of the row, not growing. Without any, the cell grows from an auto basis. */
+@property --pacem--cols { syntax: '*'; inherits: false; }
+
+.pacem-row .pacem-column,
+.pacem-flex .pacem-box {
+    /* (unset --pacem--cols: invalid at computed-value time, hence the initial `auto`) */
+    flex-basis: calc(100% * var(--pacem--cols) / 12);
+    flex-shrink: 1;
+    flex-grow: calc(1 - sign(var(--pacem--cols, 0)));
+}
+
+/* #endregion */
+
+.pacem-flex {
+    flex-wrap: wrap;
+}
+
+.pacem-body.pacem-animations {
+    .pacem-column.pacem-animatable,
+    .pacem-column.pacem-anim,
+    .pacem-box.pacem-animatable,
+    .pacem-box.pacem-anim {
+        transition: flex-basis .333s var(--pacem-easing-in-out-sine);
+    }
+}

package/src/layout/grids.css

@@ -0,0 +1,92 @@
+.pacem-grid {
+    display: grid;
+    grid-gap: var(--pacem-grid-spacing);
+    margin-bottom: var(--pacem-grid-spacing);
+
+    &.grid-nospace {
+        margin-bottom: 0;
+    }
+
+    &.grid-no-rowgap,
+    &.grid-novgap {
+        grid-row-gap: 0;
+    }
+
+    &.grid-no-colgap,
+    &.grid-nohgap {
+        grid-column-gap: 0;
+    }
+
+    &.grid-nogap {
+        grid-gap: 0;
+    }
+
+    &.grid-center {
+        justify-items: center;
+    }
+
+    &.grid-middle {
+        align-items: center;
+    }
+
+    &.grid-tiny-colgap {
+        grid-column-gap: calc(var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-tiny-rowgap {
+        grid-row-gap: calc(var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-small-colgap {
+        grid-column-gap: calc(2 * var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-small-rowgap {
+        grid-row-gap: calc(2 * var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-big-colgap {
+        grid-column-gap: calc(4 * var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-big-rowgap {
+        grid-row-gap: calc(4 * var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-bigger-colgap {
+        grid-column-gap: calc(5 * var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-bigger-rowgap {
+        grid-row-gap: calc(5 * var(--pacem-grid-spacing) / 3);
+    }
+
+    &.grid-huge-colgap {
+        grid-column-gap: calc(2 * var(--pacem-grid-spacing));
+    }
+
+    &.grid-huge-rowgap {
+        grid-row-gap: calc(2 * var(--pacem-grid-spacing));
+    }
+
+    box-sizing: border-box;
+    grid-template-columns: repeat(12, 1fr);
+
+    > .pacem-cell {
+        grid-column: span 12;
+
+        &.cell-center {
+            align-self: center;
+            justify-self: center;
+        }
+
+        transition: all .5s;
+        box-sizing: border-box;
+
+        /* .cols-*, .rows-* (responsive, and container-driven with .grid-contained): generated/grids.css */
+
+        &.pacem-wrapper {
+            margin: 0;
+        }
+    }
+}

package/src/layout/index.css

@@ -0,0 +1,39 @@
+/* layout (content part): utilities, panels, cards, grids, datatables, typography...
+   Same order as theme/less/pacem/layout/dark/index.less. The shell part is layout.css. */
+@import "animations.css";
+@import "visibility.css";
+@import "generated/visibility.css";
+@import "elevation.css";
+@import "grid-system.css";
+@import "generated/grid-system.css";
+@import "typography.css";
+@import "other.css";
+@import "tokens-chips.css";
+@import "box.css";
+@import "panels.css";
+@import "cards.css";
+@import "corners.css";
+@import "generated/card-sides.css";
+@import "generated/card-ribbon.css";
+@import "interactive.css";
+@import "positioning.css";
+@import "generated/positioning.css";
+@import "sizing.css";
+@import "generated/sizing.css";
+@import "spacing.css";
+@import "generated/spacing.css";
+@import "superposition-system.css";
+@import "lists.css";
+@import "address.css";
+@import "grids.css";
+@import "generated/grids.css";
+@import "datatable.css";
+@import "toolbar.css";
+@import "breadcrumbs.css";
+@import "fetch-feedback.css";
+@import "container.css";
+@import "scroll.css";
+@import "coloring.css";
+@import "borders.css";
+@import "generated/borders.css";
+@import "shapes.css";

package/src/layout/interactive.css

@@ -0,0 +1,11 @@
+.pacem-clickable {
+    cursor: pointer;
+}
+
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+.cursor-wait { cursor: wait; }
+.cursor-none { cursor: none; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }