@iamproperty/components 2.7.9 → 3.0.0

package/assets/sass/_functions/utilities.scss

@@ -1,251 +1,251 @@
-@use "functions" as *;
-
-@import "../../../node_modules/bootstrap/scss/utilities";
-
-// #region Sizing
-/* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
-$utilities: map-merge(
-  $utilities,
-  (
-    "max-width": (
-      responsive: true,
-      property: max-width,
-      class: mw,
-      values: (
-        100: 100%,
-        fit-content: fit-content
-      )
-    ),
-    "min-width": (
-      responsive: true,
-      property: min-width,
-      class: min,
-      values: (
-        100: 100%,
-        fit-content: fit-content
-      )
-    )
-  )
-);
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "object-fit": (
-      property: object-fit,
-      class: object,
-      values: (
-        cover: cover,
-        contain: contain
-      )
-    )
-  )
-);
-//  #endregion
-
-// #region Add to line height classes 
-$utilities: map-merge(
-  $utilities,
-  (
-    "line-height": (
-      property: line-height,
-      class: lh,
-      values: (
-        0: 0,
-        1: 1,
-        /*
-        sm: $line-height-sm,
-        base: $line-height-base,
-        lg: $line-height-lg,
-        */
-      )
-    )
-  )
-);
-
-
-
-
-
-// #endregion
-
-// #region Remove Border colour utitlity classes
-$utilities: map-merge(
-  $utilities,
-  (
-    "border-color": null
-  )
-);
-// #endregion
-
-// #region Remove floats - They are too unpredictable and it is preferred to use flex or grid
-$utilities: map-merge(
-  $utilities,
-  (
-    "float": null
-  )
-);
-// #endregion
-
-// #region Remove the responsive classes for the spacing utilities
-/*
-The spacing utilities are useful but could be mis-used. The spacing of elements should be defined via the elements/components CSS.
-But at times tweaks/fixes to spacing needs to be made and can prevent the need of duplicate CSS to be created.
-However our spacing rules should be consistant across devices and we shouldn't allow device specific 'fixes' to be made
-Removing the resposive classes aves around 8kbs
-*/
-$utilities: map-merge(
-  $utilities,
-  (
-    // Padding
-    "padding": map-merge(
-      map-get($utilities, "padding"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-x": map-merge(
-      map-get($utilities, "padding-x"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-y": map-merge(
-      map-get($utilities, "padding-y"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-top": map-merge(
-      map-get($utilities, "padding-top"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-end": map-merge(
-      map-get($utilities, "padding-end"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-bottom": map-merge(
-      map-get($utilities, "padding-bottom"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-start": map-merge(
-      map-get($utilities, "padding-start"),
-      (
-        responsive: false
-      ),
-    ),
-    // Margin
-    "margin": map-merge(
-      map-get($utilities, "margin"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-x": map-merge(
-      map-get($utilities, "margin-x"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-y": map-merge(
-      map-get($utilities, "margin-y"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-top": map-merge(
-      map-get($utilities, "margin-top"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-end": map-merge(
-      map-get($utilities, "margin-end"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-bottom": map-merge(
-      map-get($utilities, "margin-bottom"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-start": map-merge(
-      map-get($utilities, "margin-start"),
-      (
-        responsive: false
-      ),
-    ),
-    // Gap
-    "gap": map-merge(
-      map-get($utilities, "gap"),
-      (
-        responsive: false
-      ),
-    ),
-  )
-);
-// #endregion
-
-// #region Fonts
-$utilities: map-merge(
-  $utilities,
-  (
-    "font-body": (
-      responsive: false,
-      property: font-family,
-      class: font,
-      values: (
-        body: var(--font-body)
-      )
-    )
-  )
-);
-//  #endregion
-
-// #region Gradient colours 
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "gradient-color": (
-      property: background-image,
-      class: gradient,
-      local-vars: (
-        "gradient-direction": 180deg
-      ),
-      values:
-      (
-        "secondary": linear-gradient(var(--bs-gradient-direction), var(--colour-secondary) 0, transparent 100%),
-        "primary": linear-gradient(var(--bs-gradient-direction), var(--colour-primary) 0, transparent 100%),
-        "info": linear-gradient(var(--bs-gradient-direction), var(--colour-info) 0, transparent 100%)
-      )
-    )
-  )
-);
-$utilities: map-merge(
-  $utilities,
-  (
-    "gradient-direction": (
-      css-var: true,
-      class: gradient-direction,
-      values:
-      (
-        "left": 90deg,
-        "right": -90deg,
-        "up": 360deg
-      )
-    )
-  )
-);
-
-
-
+@use "functions" as *;
+
+@import "../../../node_modules/bootstrap/scss/utilities";
+
+// #region Sizing
+/* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
+$utilities: map-merge(
+  $utilities,
+  (
+    "max-width": (
+      responsive: true,
+      property: max-width,
+      class: mw,
+      values: (
+        100: 100%,
+        fit-content: fit-content
+      )
+    ),
+    "min-width": (
+      responsive: true,
+      property: min-width,
+      class: min,
+      values: (
+        100: 100%,
+        fit-content: fit-content
+      )
+    )
+  )
+);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "object-fit": (
+      property: object-fit,
+      class: object,
+      values: (
+        cover: cover,
+        contain: contain
+      )
+    )
+  )
+);
+//  #endregion
+
+// #region Add to line height classes 
+$utilities: map-merge(
+  $utilities,
+  (
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        0: 0,
+        1: 1,
+        /*
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+        */
+      )
+    )
+  )
+);
+
+
+
+
+
+// #endregion
+
+// #region Remove Border colour utitlity classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "border-color": null
+  )
+);
+// #endregion
+
+// #region Remove floats - They are too unpredictable and it is preferred to use flex or grid
+$utilities: map-merge(
+  $utilities,
+  (
+    "float": null
+  )
+);
+// #endregion
+
+// #region Remove the responsive classes for the spacing utilities
+/*
+The spacing utilities are useful but could be mis-used. The spacing of elements should be defined via the elements/components CSS.
+But at times tweaks/fixes to spacing needs to be made and can prevent the need of duplicate CSS to be created.
+However our spacing rules should be consistant across devices and we shouldn't allow device specific 'fixes' to be made
+Removing the resposive classes aves around 8kbs
+*/
+$utilities: map-merge(
+  $utilities,
+  (
+    // Padding
+    "padding": map-merge(
+      map-get($utilities, "padding"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-x": map-merge(
+      map-get($utilities, "padding-x"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-y": map-merge(
+      map-get($utilities, "padding-y"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-top": map-merge(
+      map-get($utilities, "padding-top"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-end": map-merge(
+      map-get($utilities, "padding-end"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-bottom": map-merge(
+      map-get($utilities, "padding-bottom"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-start": map-merge(
+      map-get($utilities, "padding-start"),
+      (
+        responsive: false
+      ),
+    ),
+    // Margin
+    "margin": map-merge(
+      map-get($utilities, "margin"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-x": map-merge(
+      map-get($utilities, "margin-x"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-y": map-merge(
+      map-get($utilities, "margin-y"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-top": map-merge(
+      map-get($utilities, "margin-top"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-end": map-merge(
+      map-get($utilities, "margin-end"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-bottom": map-merge(
+      map-get($utilities, "margin-bottom"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-start": map-merge(
+      map-get($utilities, "margin-start"),
+      (
+        responsive: false
+      ),
+    ),
+    // Gap
+    "gap": map-merge(
+      map-get($utilities, "gap"),
+      (
+        responsive: false
+      ),
+    ),
+  )
+);
+// #endregion
+
+// #region Fonts
+$utilities: map-merge(
+  $utilities,
+  (
+    "font-body": (
+      responsive: false,
+      property: font-family,
+      class: font,
+      values: (
+        body: var(--font-body)
+      )
+    )
+  )
+);
+//  #endregion
+
+// #region Gradient colours 
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "gradient-color": (
+      property: background-image,
+      class: gradient,
+      local-vars: (
+        "gradient-direction": 180deg
+      ),
+      values:
+      (
+        "secondary": linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%),
+        "primary": linear-gradient(var(--gradient-direction), var(--colour-primary) 0, transparent 100%),
+        "info": linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)
+      )
+    )
+  )
+);
+$utilities: map-merge(
+  $utilities,
+  (
+    "gradient-direction": (
+      css-var: true,
+      class: gradient-direction,
+      values:
+      (
+        "left": 90deg,
+        "right": -90deg,
+        "up": 360deg
+      )
+    )
+  )
+);
+
+
+
 // #endregion