@oardi/css-utils 0.47.1 → 0.49.0

package/scss/flex-responsive.scss

@@ -1,104 +1,92 @@
 @use 'sass:map';
 @use './theme.scss';
 
-@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
-	@media (min-width: #{$bp-value}) {
-		@each $key, $value in map.get(theme.$theme, spacings) {
-			.gap-#{$bp}-#{$key} {
-				gap: $value !important;
+@layer utilities {
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			// basic
+			.d-#{$bp}-flex {
+				display: flex;
 			}
 
-			.row-gap-#{$bp}-#{$key} {
-				row-gap: $value !important;
+			.d-#{$bp}-inline-flex {
+				display: inline-flex;
 			}
 
-			.column-gap-#{$bp}-#{$key} {
-				column-gap: $value !important;
+			// directions
+			.flex-#{$bp}-row {
+				flex-direction: row;
 			}
-		}
-
-		// basic
-		.d-#{$bp}-flex {
-			display: flex !important;
-		}
-
-		.d-#{$bp}-inline-flex {
-			display: inline-flex !important;
-		}
 
-		// directions
-		.flex-#{$bp}-row {
-			flex-direction: row !important;
-		}
-
-		.flex-#{$bp}-column {
-			flex-direction: column !important;
-		}
+			.flex-#{$bp}-column {
+				flex-direction: column;
+			}
 
-		.flex-#{$bp}-row-reverse {
-			flex-direction: row-reverse !important;
-		}
+			.flex-#{$bp}-row-reverse {
+				flex-direction: row-reverse;
+			}
 
-		.flex-#{$bp}-column-reverse {
-			flex-direction: column-reverse !important;
-		}
+			.flex-#{$bp}-column-reverse {
+				flex-direction: column-reverse;
+			}
 
-		// justify content - start, end, center, between, around, evenly
-		.justify-content-#{$bp}-start {
-			justify-content: start !important;
-		}
+			// justify content - start, end, center, between, around, evenly
+			.justify-content-#{$bp}-start {
+				justify-content: start;
+			}
 
-		.justify-content-#{$bp}-end {
-			justify-content: end !important;
-		}
+			.justify-content-#{$bp}-end {
+				justify-content: end;
+			}
 
-		.justify-content-#{$bp}-center {
-			justify-content: center !important;
-		}
+			.justify-content-#{$bp}-center {
+				justify-content: center;
+			}
 
-		.justify-content-#{$bp}-between {
-			justify-content: space-between !important;
-		}
+			.justify-content-#{$bp}-between {
+				justify-content: space-between;
+			}
 
-		.justify-content-#{$bp}-around {
-			justify-content: space-around !important;
-		}
+			.justify-content-#{$bp}-around {
+				justify-content: space-around;
+			}
 
-		.justify-content-#{$bp}-evenly {
-			justify-content: space-evenly !important;
-		}
+			.justify-content-#{$bp}-evenly {
+				justify-content: space-evenly;
+			}
 
-		// align items - start, end, center, baseline, or stretch
-		.align-items-#{$bp}-start {
-			align-items: start !important;
-		}
+			// align items - start, end, center, baseline, or stretch
+			.align-items-#{$bp}-start {
+				align-items: start;
+			}
 
-		.align-items-#{$bp}-end {
-			align-items: end !important;
-		}
+			.align-items-#{$bp}-end {
+				align-items: end;
+			}
 
-		.align-items-#{$bp}-center {
-			align-items: center !important;
-		}
+			.align-items-#{$bp}-center {
+				align-items: center;
+			}
 
-		.align-items-#{$bp}-baseline {
-			align-items: baseline !important;
-		}
+			.align-items-#{$bp}-baseline {
+				align-items: baseline;
+			}
 
-		.align-items-#{$bp}-stretch {
-			align-items: stretch !important;
-		}
+			.align-items-#{$bp}-stretch {
+				align-items: stretch;
+			}
 
-		// align self
-		// TODO
+			// align self
+			// TODO
 
-		// fill
-		// TODO
+			// fill
+			// TODO
 
-		// grow
-		// TODO
+			// grow
+			// TODO
 
-		// shrink
-		// TODO
+			// shrink
+			// TODO
+		}
 	}
 }

package/scss/flex.scss

@@ -1,166 +1,153 @@
 @use 'sass:map';
 @use './theme.scss' as theme;
 
-// TODO - use the following to iterate
-$flex-directions: (row, row-reverse, column, column-reverse);
-$flex-ratios: (0, 1);
-$flex-justify-content-alignments: (start, end, center, between, around, evenly);
-$flex-align-items-alignments: (start, end, center, between, around, evenly);
-
-// basic
-.d-flex {
-	display: flex;
-}
-
-.d-inline-flex {
-	display: inline-flex;
-}
-
-// directions
-.flex-row {
-	flex-direction: row;
-}
-
-.flex-row-reverse {
-	flex-direction: row-reverse;
-}
-
-.flex-column {
-	flex-direction: column;
-}
+@layer utilities {
+	// TODO - use the following to iterate
+	$flex-directions: (row, row-reverse, column, column-reverse);
+	$flex-ratios: (0, 1);
+	$flex-justify-content-alignments: (start, end, center, between, around, evenly);
+	$flex-align-items-alignments: (start, end, center, between, around, evenly);
+
+	// basic
+	.d-flex {
+		display: flex;
+	}
 
-.flex-column-reverse {
-	flex-direction: column-reverse;
-}
+	.d-inline-flex {
+		display: inline-flex;
+	}
 
-// justify content - start, end, center, between, around or evenly
-.justify-content-start {
-	justify-content: start;
-}
+	// directions
+	.flex-row {
+		flex-direction: row;
+	}
 
-.justify-content-end {
-	justify-content: end;
-}
+	.flex-row-reverse {
+		flex-direction: row-reverse;
+	}
 
-.justify-content-center {
-	justify-content: center;
-}
+	.flex-column {
+		flex-direction: column;
+	}
 
-.justify-content-between {
-	justify-content: space-between;
-}
+	.flex-column-reverse {
+		flex-direction: column-reverse;
+	}
 
-.justify-content-around {
-	justify-content: space-around;
-}
+	// justify content - start, end, center, between, around or evenly
+	.justify-content-start {
+		justify-content: start;
+	}
 
-.justify-content-evenly {
-	justify-content: space-evenly;
-}
+	.justify-content-end {
+		justify-content: end;
+	}
 
-// align items - start, end, center, baseline, or stretch
-.align-items-start {
-	align-items: start;
-}
+	.justify-content-center {
+		justify-content: center;
+	}
 
-.align-items-end {
-	align-items: end;
-}
+	.justify-content-between {
+		justify-content: space-between;
+	}
 
-.align-items-center {
-	align-items: center;
-}
+	.justify-content-around {
+		justify-content: space-around;
+	}
 
-.align-items-baseline {
-	align-items: baseline;
-}
+	.justify-content-evenly {
+		justify-content: space-evenly;
+	}
 
-.align-items-stretch {
-	align-items: stretch;
-}
+	// align items - start, end, center, baseline, or stretch
+	.align-items-start {
+		align-items: start;
+	}
 
-// align self
-// TODO
+	.align-items-end {
+		align-items: end;
+	}
 
-// fill
-.flex-fill {
-	flex: 1 1 auto;
-}
+	.align-items-center {
+		align-items: center;
+	}
 
-// grow
-.flex-grow-0 {
-	flex-grow: 0;
-}
+	.align-items-baseline {
+		align-items: baseline;
+	}
 
-.flex-grow-1 {
-	flex-grow: 1;
-}
+	.align-items-stretch {
+		align-items: stretch;
+	}
 
-// shrink
-.flex-shrink-0 {
-	flex-shrink: 0;
-}
+	// align self
+	// TODO
 
-.flex-shrink-1 {
-	flex-shrink: 1;
-}
+	// fill
+	.flex-fill {
+		flex: 1 1 auto;
+	}
 
-// wrap
-.flex-wrap {
-	flex-wrap: wrap;
-}
+	// grow
+	.flex-grow-0 {
+		flex-grow: 0;
+	}
 
-.flex-nowrap {
-	flex-wrap: nowrap;
-}
+	.flex-grow-1 {
+		flex-grow: 1;
+	}
 
-// order
-.order-0 {
-	order: 0;
-}
+	// shrink
+	.flex-shrink-0 {
+		flex-shrink: 0;
+	}
 
-.order-1 {
-	order: 1;
-}
+	.flex-shrink-1 {
+		flex-shrink: 1;
+	}
 
-.order-2 {
-	order: 2;
-}
+	// wrap
+	.flex-wrap {
+		flex-wrap: wrap;
+	}
 
-.order-3 {
-	order: 3;
-}
+	.flex-nowrap {
+		flex-wrap: nowrap;
+	}
 
-.order-4 {
-	order: 4;
-}
+	// order
+	.order-0 {
+		order: 0;
+	}
 
-.order-5 {
-	order: 5;
-}
+	.order-1 {
+		order: 1;
+	}
 
-.order-first {
-	order: -1;
-}
+	.order-2 {
+		order: 2;
+	}
 
-.order-last {
-	order: 6;
-}
+	.order-3 {
+		order: 3;
+	}
 
-// align-content
-// TODO
+	.order-4 {
+		order: 4;
+	}
 
-// gap - move to own file?
-@each $key, $value in map.get(theme.$theme, spacings) {
-	.gap-#{$key} {
-		gap: $value !important;
+	.order-5 {
+		order: 5;
 	}
 
-	.row-gap-#{$key} {
-		row-gap: $value !important;
+	.order-first {
+		order: -1;
 	}
 
-	.column-gap-#{$key} {
-		column-gap: $value !important;
+	.order-last {
+		order: 6;
 	}
+
+	// align-content
+	// TODO
 }

package/scss/gap-responsive.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use './theme.scss';
+
+@layer utilities {
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			@each $key, $value in map.get(theme.$theme, spacings) {
+				.gap-#{$bp}-#{$key} {
+					gap: $value;
+				}
+
+				.row-gap-#{$bp}-#{$key} {
+					row-gap: $value;
+				}
+
+				.column-gap-#{$bp}-#{$key} {
+					column-gap: $value;
+				}
+			}
+		}
+	}
+}

package/scss/gap.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use './theme.scss' as theme;
+
+@layer utilities {
+	@each $key, $value in map.get(theme.$theme, spacings) {
+		.gap-#{$key} {
+			gap: $value;
+		}
+
+		.row-gap-#{$key} {
+			row-gap: $value;
+		}
+
+		.column-gap-#{$key} {
+			column-gap: $value;
+		}
+	}
+}

package/scss/grid-responsive.scss

@@ -3,11 +3,13 @@
 
 // grid responsive
 
-@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
-	@media (min-width: #{$bp-value}) {
-		@for $i from 1 through 12 {
-			.col-#{$bp}-#{$i} {
-				grid-column: span $i !important;
+@layer utilities {
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			@for $i from 1 through 12 {
+				.col-#{$bp}-#{$i} {
+					grid-column: span $i;
+				}
 			}
 		}
 	}

package/scss/grid.scss

@@ -1,17 +1,19 @@
-.grid {
-	display: grid;
-	grid-template-columns: repeat(12, minmax(0, 1fr));
+@layer utilities {
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(12, minmax(0, 1fr));
 
-	column-gap: 1rem;
-	row-gap: 1rem;
-}
+		column-gap: 1rem;
+		row-gap: 1rem;
+	}
 
-.col {
-	grid-column: span 12;
-}
+	.col {
+		grid-column: span 12;
+	}
 
-@for $i from 1 through 12 {
-	.col-#{$i} {
-		grid-column: span $i;
+	@for $i from 1 through 12 {
+		.col-#{$i} {
+			grid-column: span $i;
+		}
 	}
 }

package/scss/index.scss

@@ -1,15 +1,23 @@
+@forward './reboot.scss';
 @forward './theme.scss';
 @forward './variables.scss';
-@forward './reboot.scss';
 @forward './typography.scss';
 @forward './text.scss';
+
 @forward './utilities.scss';
+
 @forward './spacings.scss';
 @forward './spacings-responsive.scss';
+
 @forward './flex.scss';
 @forward './flex-responsive.scss';
+
 @forward './grid.scss';
 @forward './grid-responsive.scss';
+
+@forward './gap.scss';
+@forward './gap-responsive.scss';
+
 @forward './borders.scss';
 
 @forward './components/breadcrumb.scss';