@oardi/css-utils 0.74.0 → 0.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.74.0",
+	"version": "0.76.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/components/tooltip.scss

@@ -21,7 +21,7 @@
 		font-size: var(--tooltip-font-size);
 		white-space: nowrap;
 		box-shadow: var(--tooltip-box-shadow);
-		pointer-events: none;
+		pointer-events: auto;
 	}
 
 	.tooltip-arrow {

package/scss/display.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use './theme.scss' as theme;
+
+$-display-values: (
+	none: none,
+	block: block,
+	inline: inline,
+	inline-block: inline-block,
+	flex: flex,
+	inline-flex: inline-flex,
+);
+
+@layer utilities {
+	@each $name, $value in $-display-values {
+		.d-#{$name} {
+			display: $value;
+		}
+	}
+
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			@each $name, $value in $-display-values {
+				.d-#{$bp}-#{$name} {
+					display: $value;
+				}
+			}
+		}
+	}
+}

package/scss/flex-responsive.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './display.scss';
 @use './theme.scss' as theme;
 
 // TODO
@@ -7,15 +8,6 @@
 @layer utilities {
 	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 		@media (min-width: #{$bp-value}) {
-			// basic
-			.d-#{$bp}-flex {
-				display: flex;
-			}
-
-			.d-#{$bp}-inline-flex {
-				display: inline-flex;
-			}
-
 			// directions
 			.flex-#{$bp}-row {
 				flex-direction: row;

package/scss/flex.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use './theme.scss' as theme;
+@use './display.scss';
 
 @layer utilities {
 	// TODO - use the following to iterate
@@ -8,15 +7,6 @@
 	// $flex-justify-content-alignments: (start, end, center, between, around, evenly);
 	// $flex-align-items-alignments: (start, end, center, baseline, stretch);
 
-	// basic
-	.d-flex {
-		display: flex;
-	}
-
-	.d-inline-flex {
-		display: inline-flex;
-	}
-
 	// directions
 	.flex-row {
 		flex-direction: row;

package/scss/utilities.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './display.scss';
 @use './theme.scss' as theme;
 
 $-widths: (
@@ -263,43 +264,10 @@ $-widths: (
 		}
 	}
 
-	// display
-	.d-none {
-		display: none;
-	}
-
-	.d-block {
-		display: block;
-	}
-
-	.d-inline {
-		display: inline;
-	}
-
-	.d-inline-block {
-		display: inline-block;
-	}
-
 	.hidden {
 		visibility: hidden;
 	}
 
-	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
-		@media (min-width: #{$bp-value}) {
-			.d-#{$bp}-none {
-				display: none;
-			}
-
-			.d-#{$bp}-block {
-				display: block;
-			}
-
-			.d-#{$bp}-inline-block {
-				display: inline-block;
-			}
-		}
-	}
-
 	@each $name, $value in map.get(theme.$theme, zIndexLevels) {
 		.z-index-#{$name} {
 			z-index: $value;