@birdycom/omniacss 0.11.0 → 0.11.2

package/scss/utilities/_layout_flow.scss

@@ -1,210 +1,210 @@
-// SCSS Document
-// File: src/scss/utilities/_layout_flow.scss
-// Map: columns -> break -> box-decoration -> float/clear -> object -> inset -> order
-//      -> column rule/span/fill -> orphans/widows -> image-rendering -> dynamic-range-limit
-
-/* Columns */
-.columns-1 { columns: 1; }
-.columns-2 { columns: 2; }
-.columns-3 { columns: 3; }
-.columns-4 { columns: 4; }
-.columns-5 { columns: 5; }
-.columns-6 { columns: 6; }
-.columns-auto { columns: auto; }
-.columns-3xs { columns: 16rem; }
-.columns-2xs { columns: 18rem; }
-.columns-xs { columns: 20rem; }
-.columns-sm { columns: 24rem; }
-.columns-md { columns: 28rem; }
-.columns-lg { columns: 32rem; }
-
-/* Break before/after/inside */
-.break-before-auto { break-before: auto; }
-.break-before-avoid { break-before: avoid; }
-.break-before-all { break-before: all; }
-.break-before-page { break-before: page; }
-.break-before-column { break-before: column; }
-.break-before-left { break-before: left; }
-.break-before-right { break-before: right; }
-
-.break-after-auto { break-after: auto; }
-.break-after-avoid { break-after: avoid; }
-.break-after-all { break-after: all; }
-.break-after-page { break-after: page; }
-.break-after-column { break-after: column; }
-.break-after-left { break-after: left; }
-.break-after-right { break-after: right; }
-
-.break-inside-auto { break-inside: auto; }
-.break-inside-avoid { break-inside: avoid; }
-.break-inside-avoid-page { break-inside: avoid-page; }
-.break-inside-avoid-column { break-inside: avoid-column; }
-
-/* Box decoration break */
-.box-decoration-slice { box-decoration-break: slice; }
-.box-decoration-clone { box-decoration-break: clone; }
-
-/* Float and clear */
-.float-start { float: inline-start; }
-.float-end { float: inline-end; }
-.float-right { float: right; }
-.float-left { float: left; }
-.float-none { float: none; }
-
-.clear-start { clear: inline-start; }
-.clear-end { clear: inline-end; }
-.clear-left { clear: left; }
-.clear-right { clear: right; }
-.clear-both { clear: both; }
-.clear-none { clear: none; }
-
-/* Object fit and position */
-.object-contain { object-fit: contain; }
-.object-cover { object-fit: cover; }
-.object-fill { object-fit: fill; }
-.object-none { object-fit: none; }
-.object-scale-down { object-fit: scale-down; }
-
-.object-center { object-position: center; }
-.object-top { object-position: top; }
-.object-bottom { object-position: bottom; }
-.object-left { object-position: left; }
-.object-right { object-position: right; }
-.object-left-top { object-position: left top; }
-.object-left-bottom { object-position: left bottom; }
-.object-right-top { object-position: right top; }
-.object-right-bottom { object-position: right bottom; }
-
-/* Inset (top/right/bottom/left) */
-.top-auto { top: auto; }
-.top-0 { top: 0; }
-.top-1 { top: 0.25rem; }
-.top-2 { top: 0.5rem; }
-.top-4 { top: 1rem; }
-.top-8 { top: 2rem; }
-.top-1\/2 { top: 50%; }
-.top-1\/3 { top: 33.333333%; }
-.top-2\/3 { top: 66.666667%; }
-.top-1\/4 { top: 25%; }
-.top-3\/4 { top: 75%; }
-.top-full { top: 100%; }
-
-.right-auto { right: auto; }
-.right-0 { right: 0; }
-.right-1 { right: 0.25rem; }
-.right-2 { right: 0.5rem; }
-.right-4 { right: 1rem; }
-.right-8 { right: 2rem; }
-.right-1\/2 { right: 50%; }
-.right-1\/3 { right: 33.333333%; }
-.right-2\/3 { right: 66.666667%; }
-.right-1\/4 { right: 25%; }
-.right-3\/4 { right: 75%; }
-.right-full { right: 100%; }
-
-.bottom-auto { bottom: auto; }
-.bottom-0 { bottom: 0; }
-.bottom-1 { bottom: 0.25rem; }
-.bottom-2 { bottom: 0.5rem; }
-.bottom-4 { bottom: 1rem; }
-.bottom-8 { bottom: 2rem; }
-.bottom-1\/2 { bottom: 50%; }
-.bottom-1\/3 { bottom: 33.333333%; }
-.bottom-2\/3 { bottom: 66.666667%; }
-.bottom-1\/4 { bottom: 25%; }
-.bottom-3\/4 { bottom: 75%; }
-.bottom-full { bottom: 100%; }
-
-.left-auto { left: auto; }
-.left-0 { left: 0; }
-.left-1 { left: 0.25rem; }
-.left-2 { left: 0.5rem; }
-.left-4 { left: 1rem; }
-.left-8 { left: 2rem; }
-.left-1\/2 { left: 50%; }
-.left-1\/3 { left: 33.333333%; }
-.left-2\/3 { left: 66.666667%; }
-.left-1\/4 { left: 25%; }
-.left-3\/4 { left: 75%; }
-.left-full { left: 100%; }
-
-/* Order */
-.order-first { order: -9999; }
-.order-last { order: 9999; }
-.order-none { order: 0; }
-.order-1 { order: 1; }
-.order-2 { order: 2; }
-.order-3 { order: 3; }
-.order-4 { order: 4; }
-.order-5 { order: 5; }
-.order-6 { order: 6; }
-.order-7 { order: 7; }
-.order-8 { order: 8; }
-.order-9 { order: 9; }
-.order-10 { order: 10; }
-.order-11 { order: 11; }
-.order-12 { order: 12; }
-
-/* Column count / width aliases (documented in docs/columns) */
-.cols-1 { column-count: 1; }
-.cols-2 { column-count: 2; }
-.cols-3 { column-count: 3; }
-.cols-4 { column-count: 4; }
-.cols-5 { column-count: 5; }
-.cols-6 { column-count: 6; }
-.cols-auto { column-count: auto; }
-.col-w-auto { column-width: auto; }
-.col-w-16 { column-width: 16rem; }
-.col-w-20 { column-width: 20rem; }
-.col-w-24 { column-width: 24rem; }
-
-/* Column rule, span and fill */
-.col-rule-none { column-rule-style: none; }
-.col-rule-solid { column-rule-style: solid; }
-.col-rule-dashed { column-rule-style: dashed; }
-.col-rule-dotted { column-rule-style: dotted; }
-.col-rule-1 { column-rule-width: 1px; }
-.col-rule-2 { column-rule-width: 2px; }
-.col-rule-4 { column-rule-width: 4px; }
-.col-rule-current { column-rule-color: currentcolor; }
-.col-span-all { column-span: all; }
-.col-span-none { column-span: none; }
-.col-fill-auto { column-fill: auto; }
-.col-fill-balance { column-fill: balance; }
-
-/* Break avoid page/column */
-.break-before-avoid-page { break-before: avoid-page; }
-.break-before-avoid-column { break-before: avoid-column; }
-.break-after-avoid-page { break-after: avoid-page; }
-.break-after-avoid-column { break-after: avoid-column; }
-
-/* Box decoration break aliases */
-.decoration-slice { box-decoration-break: slice; }
-.decoration-clone { box-decoration-break: clone; }
-
-/* Orphans and widows */
-.orphans-1 { orphans: 1; }
-.orphans-2 { orphans: 2; }
-.orphans-3 { orphans: 3; }
-.orphans-4 { orphans: 4; }
-.widows-1 { widows: 1; }
-.widows-2 { widows: 2; }
-.widows-3 { widows: 3; }
-.widows-4 { widows: 4; }
-
-/* Object position aliases */
-.object-top-left { object-position: top left; }
-.object-top-right { object-position: top right; }
-.object-bottom-left { object-position: bottom left; }
-.object-bottom-right { object-position: bottom right; }
-
-/* Image rendering */
-.image-auto { image-rendering: auto; }
-.image-smooth { image-rendering: smooth; }
-.image-crisp { image-rendering: crisp-edges; }
-.image-pixelated { image-rendering: pixelated; }
-
-/* Dynamic range limit (HDR images/video) */
-.dynamic-range-standard { dynamic-range-limit: standard; }
-.dynamic-range-constrained { dynamic-range-limit: constrained; }
-.dynamic-range-no-limit { dynamic-range-limit: no-limit; }
+// SCSS Document
+// File: src/scss/utilities/_layout_flow.scss
+// Map: columns -> break -> box-decoration -> float/clear -> object -> inset -> order
+//      -> column rule/span/fill -> orphans/widows -> image-rendering -> dynamic-range-limit
+
+/* Columns */
+.columns-1 { columns: 1; }
+.columns-2 { columns: 2; }
+.columns-3 { columns: 3; }
+.columns-4 { columns: 4; }
+.columns-5 { columns: 5; }
+.columns-6 { columns: 6; }
+.columns-auto { columns: auto; }
+.columns-3xs { columns: 16rem; }
+.columns-2xs { columns: 18rem; }
+.columns-xs { columns: 20rem; }
+.columns-sm { columns: 24rem; }
+.columns-md { columns: 28rem; }
+.columns-lg { columns: 32rem; }
+
+/* Break before/after/inside */
+.break-before-auto { break-before: auto; }
+.break-before-avoid { break-before: avoid; }
+.break-before-all { break-before: all; }
+.break-before-page { break-before: page; }
+.break-before-column { break-before: column; }
+.break-before-left { break-before: left; }
+.break-before-right { break-before: right; }
+
+.break-after-auto { break-after: auto; }
+.break-after-avoid { break-after: avoid; }
+.break-after-all { break-after: all; }
+.break-after-page { break-after: page; }
+.break-after-column { break-after: column; }
+.break-after-left { break-after: left; }
+.break-after-right { break-after: right; }
+
+.break-inside-auto { break-inside: auto; }
+.break-inside-avoid { break-inside: avoid; }
+.break-inside-avoid-page { break-inside: avoid-page; }
+.break-inside-avoid-column { break-inside: avoid-column; }
+
+/* Box decoration break */
+.box-decoration-slice { box-decoration-break: slice; }
+.box-decoration-clone { box-decoration-break: clone; }
+
+/* Float and clear */
+.float-start { float: inline-start; }
+.float-end { float: inline-end; }
+.float-right { float: right; }
+.float-left { float: left; }
+.float-none { float: none; }
+
+.clear-start { clear: inline-start; }
+.clear-end { clear: inline-end; }
+.clear-left { clear: left; }
+.clear-right { clear: right; }
+.clear-both { clear: both; }
+.clear-none { clear: none; }
+
+/* Object fit and position */
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
+.object-fill { object-fit: fill; }
+.object-none { object-fit: none; }
+.object-scale-down { object-fit: scale-down; }
+
+.object-center { object-position: center; }
+.object-top { object-position: top; }
+.object-bottom { object-position: bottom; }
+.object-left { object-position: left; }
+.object-right { object-position: right; }
+.object-left-top { object-position: left top; }
+.object-left-bottom { object-position: left bottom; }
+.object-right-top { object-position: right top; }
+.object-right-bottom { object-position: right bottom; }
+
+/* Inset (top/right/bottom/left) */
+.top-auto { top: auto; }
+.top-0 { top: 0; }
+.top-1 { top: 0.25rem; }
+.top-2 { top: 0.5rem; }
+.top-4 { top: 1rem; }
+.top-8 { top: 2rem; }
+.top-1\/2 { top: 50%; }
+.top-1\/3 { top: 33.333333%; }
+.top-2\/3 { top: 66.666667%; }
+.top-1\/4 { top: 25%; }
+.top-3\/4 { top: 75%; }
+.top-full { top: 100%; }
+
+.right-auto { right: auto; }
+.right-0 { right: 0; }
+.right-1 { right: 0.25rem; }
+.right-2 { right: 0.5rem; }
+.right-4 { right: 1rem; }
+.right-8 { right: 2rem; }
+.right-1\/2 { right: 50%; }
+.right-1\/3 { right: 33.333333%; }
+.right-2\/3 { right: 66.666667%; }
+.right-1\/4 { right: 25%; }
+.right-3\/4 { right: 75%; }
+.right-full { right: 100%; }
+
+.bottom-auto { bottom: auto; }
+.bottom-0 { bottom: 0; }
+.bottom-1 { bottom: 0.25rem; }
+.bottom-2 { bottom: 0.5rem; }
+.bottom-4 { bottom: 1rem; }
+.bottom-8 { bottom: 2rem; }
+.bottom-1\/2 { bottom: 50%; }
+.bottom-1\/3 { bottom: 33.333333%; }
+.bottom-2\/3 { bottom: 66.666667%; }
+.bottom-1\/4 { bottom: 25%; }
+.bottom-3\/4 { bottom: 75%; }
+.bottom-full { bottom: 100%; }
+
+.left-auto { left: auto; }
+.left-0 { left: 0; }
+.left-1 { left: 0.25rem; }
+.left-2 { left: 0.5rem; }
+.left-4 { left: 1rem; }
+.left-8 { left: 2rem; }
+.left-1\/2 { left: 50%; }
+.left-1\/3 { left: 33.333333%; }
+.left-2\/3 { left: 66.666667%; }
+.left-1\/4 { left: 25%; }
+.left-3\/4 { left: 75%; }
+.left-full { left: 100%; }
+
+/* Order */
+.order-first { order: -9999; }
+.order-last { order: 9999; }
+.order-none { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-9 { order: 9; }
+.order-10 { order: 10; }
+.order-11 { order: 11; }
+.order-12 { order: 12; }
+
+/* Column count / width aliases (documented in docs/columns) */
+.cols-1 { column-count: 1; }
+.cols-2 { column-count: 2; }
+.cols-3 { column-count: 3; }
+.cols-4 { column-count: 4; }
+.cols-5 { column-count: 5; }
+.cols-6 { column-count: 6; }
+.cols-auto { column-count: auto; }
+.col-w-auto { column-width: auto; }
+.col-w-16 { column-width: 16rem; }
+.col-w-20 { column-width: 20rem; }
+.col-w-24 { column-width: 24rem; }
+
+/* Column rule, span and fill */
+.col-rule-none { column-rule-style: none; }
+.col-rule-solid { column-rule-style: solid; }
+.col-rule-dashed { column-rule-style: dashed; }
+.col-rule-dotted { column-rule-style: dotted; }
+.col-rule-1 { column-rule-width: 1px; }
+.col-rule-2 { column-rule-width: 2px; }
+.col-rule-4 { column-rule-width: 4px; }
+.col-rule-current { column-rule-color: currentcolor; }
+.col-span-all { column-span: all; }
+.col-span-none { column-span: none; }
+.col-fill-auto { column-fill: auto; }
+.col-fill-balance { column-fill: balance; }
+
+/* Break avoid page/column */
+.break-before-avoid-page { break-before: avoid-page; }
+.break-before-avoid-column { break-before: avoid-column; }
+.break-after-avoid-page { break-after: avoid-page; }
+.break-after-avoid-column { break-after: avoid-column; }
+
+/* Box decoration break aliases */
+.decoration-slice { box-decoration-break: slice; }
+.decoration-clone { box-decoration-break: clone; }
+
+/* Orphans and widows */
+.orphans-1 { orphans: 1; }
+.orphans-2 { orphans: 2; }
+.orphans-3 { orphans: 3; }
+.orphans-4 { orphans: 4; }
+.widows-1 { widows: 1; }
+.widows-2 { widows: 2; }
+.widows-3 { widows: 3; }
+.widows-4 { widows: 4; }
+
+/* Object position aliases */
+.object-top-left { object-position: top left; }
+.object-top-right { object-position: top right; }
+.object-bottom-left { object-position: bottom left; }
+.object-bottom-right { object-position: bottom right; }
+
+/* Image rendering */
+.image-auto { image-rendering: auto; }
+.image-smooth { image-rendering: smooth; }
+.image-crisp { image-rendering: crisp-edges; }
+.image-pixelated { image-rendering: pixelated; }
+
+/* Dynamic range limit (HDR images/video) */
+.dynamic-range-standard { dynamic-range-limit: standard; }
+.dynamic-range-constrained { dynamic-range-limit: constrained; }
+.dynamic-range-no-limit { dynamic-range-limit: no-limit; }

package/scss/utilities/_mask_extras.scss

@@ -1,62 +1,62 @@
-// SCSS Document
-// File: src/scss/utilities/_mask_extras.scss
-// Description: More mask utilities — edge fades, composable linear/radial masks with stop positions, and the missing
-//              position, size, clip and mode keywords next to the .mask-* classes of _effects_advanced.scss.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.4.0
-// Framework: OmniaCSS
-// Purpose: Generate .mask-fade-{t|l|y}, .mask-linear-{deg}, .mask-radial-{circle|ellipse}, .mask-from-{n}, .mask-to-{n},
-//          .mask-position-{side|corner}, .mask-size-{n}, .mask-clip-no-clip, .mask-mode-match-source, .mask-composite-*.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
-// Note: .mask-linear-* / .mask-radial-* fade from opaque to transparent between --oc-mask-from and --oc-mask-to;
-//       move the stops with .mask-from-{n} / .mask-to-{n}: class="mask-linear-180 mask-from-60".
-// Map: edge fades -> composable gradient masks -> position -> size -> clip and mode
-
-/* Edge fades (.mask-fade-b, -r and -x live in _layout_extras.scss) */
-.mask-fade-t { mask: linear-gradient(to top, black 60%, transparent); }
-.mask-fade-l { mask: linear-gradient(to left, black 60%, transparent); }
-.mask-fade-y { mask: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
-
-/* Composable gradient masks */
-@each $deg in (0, 45, 90, 135, 180, 225, 270, 315) {
-  .mask-linear-#{$deg} {
-    mask-image: linear-gradient(#{$deg}deg, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
-  }
-}
-.mask-radial-circle {
-  mask-image: radial-gradient(circle, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
-}
-.mask-radial-ellipse {
-  mask-image: radial-gradient(ellipse, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
-}
-.mask-conic {
-  mask-image: conic-gradient(black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
-}
-@each $n in (0, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) {
-  .mask-from-#{$n} { --oc-mask-from: #{$n}%; }
-  .mask-to-#{$n} { --oc-mask-to: #{$n}%; }
-}
-
-/* Mask position */
-$_mask-positions: ('left': left, 'right': right, 'left-top': left top, 'right-top': right top, 'left-bottom': left bottom, 'right-bottom': right bottom);
-@each $key, $value in $_mask-positions {
-  .mask-position-#{$key} { mask-position: $value; }
-}
-
-/* Mask repeat */
-.mask-repeat-x { mask-repeat: repeat-x; }
-.mask-repeat-y { mask-repeat: repeat-y; }
-.mask-repeat-space { mask-repeat: space; }
-.mask-repeat-round { mask-repeat: round; }
-
-/* Mask size in percent and rem */
-@each $n in (25, 50, 75, 100) {
-  .mask-size-#{$n} { mask-size: #{$n}%; }
-}
-
-/* Mask clip, mode, composite and reset */
-.mask-clip-no-clip { mask-clip: no-clip; }
-.mask-clip-text { mask-clip: text; }
-.mask-mode-match-source { mask-mode: match-source; }
-.mask-composite-source-over { mask-composite: add; }
+// SCSS Document
+// File: src/scss/utilities/_mask_extras.scss
+// Description: More mask utilities — edge fades, composable linear/radial masks with stop positions, and the missing
+//              position, size, clip and mode keywords next to the .mask-* classes of _effects_advanced.scss.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .mask-fade-{t|l|y}, .mask-linear-{deg}, .mask-radial-{circle|ellipse}, .mask-from-{n}, .mask-to-{n},
+//          .mask-position-{side|corner}, .mask-size-{n}, .mask-clip-no-clip, .mask-mode-match-source, .mask-composite-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
+// Note: .mask-linear-* / .mask-radial-* fade from opaque to transparent between --oc-mask-from and --oc-mask-to;
+//       move the stops with .mask-from-{n} / .mask-to-{n}: class="mask-linear-180 mask-from-60".
+// Map: edge fades -> composable gradient masks -> position -> size -> clip and mode
+
+/* Edge fades (.mask-fade-b, -r and -x live in _layout_extras.scss) */
+.mask-fade-t { mask: linear-gradient(to top, black 60%, transparent); }
+.mask-fade-l { mask: linear-gradient(to left, black 60%, transparent); }
+.mask-fade-y { mask: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
+
+/* Composable gradient masks */
+@each $deg in (0, 45, 90, 135, 180, 225, 270, 315) {
+  .mask-linear-#{$deg} {
+    mask-image: linear-gradient(#{$deg}deg, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+  }
+}
+.mask-radial-circle {
+  mask-image: radial-gradient(circle, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+}
+.mask-radial-ellipse {
+  mask-image: radial-gradient(ellipse, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+}
+.mask-conic {
+  mask-image: conic-gradient(black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+}
+@each $n in (0, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) {
+  .mask-from-#{$n} { --oc-mask-from: #{$n}%; }
+  .mask-to-#{$n} { --oc-mask-to: #{$n}%; }
+}
+
+/* Mask position */
+$_mask-positions: ('left': left, 'right': right, 'left-top': left top, 'right-top': right top, 'left-bottom': left bottom, 'right-bottom': right bottom);
+@each $key, $value in $_mask-positions {
+  .mask-position-#{$key} { mask-position: $value; }
+}
+
+/* Mask repeat */
+.mask-repeat-x { mask-repeat: repeat-x; }
+.mask-repeat-y { mask-repeat: repeat-y; }
+.mask-repeat-space { mask-repeat: space; }
+.mask-repeat-round { mask-repeat: round; }
+
+/* Mask size in percent and rem */
+@each $n in (25, 50, 75, 100) {
+  .mask-size-#{$n} { mask-size: #{$n}%; }
+}
+
+/* Mask clip, mode, composite and reset */
+.mask-clip-no-clip { mask-clip: no-clip; }
+.mask-clip-text { mask-clip: text; }
+.mask-mode-match-source { mask-mode: match-source; }
+.mask-composite-source-over { mask-composite: add; }