@iamproperty/components 3.1.0 → 3.4.4

package/assets/sass/_functions/mixins.scss

@@ -1,171 +1,171 @@
-@import "../../../node_modules/bootstrap/scss/mixins";
-
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  
-  $min: breakpoint-min($name, $breakpoints);
-  @if $min {
-    @media screen and (min-width: $min) {
-      @content;
-    }
-  }
-  @else if $name =='xs' {
-    @content;
-  } 
-  @else {
-    @if $mobileOnly != "true" {
-    @content;
-    }
-  }
-}
-
-// Example: @include prefix(transition, transform 1.5s, webkit ms o);
-@mixin prefix($property, $value, $prefixes: (webkit ms o))
-{
-	@each $prefix in $prefixes
-	{
-		#{'-' + $prefix + '-' + $property}: $value;
-	}
-	
-	// Output standard non-prefixed declaration
-	#{$property}: $value;
-}
-
-// Used to make it possible to use css properties but still support IE11
-@mixin var($property, $varName, $important:"", $compatible:$compatible) {
-
-  @if $compatible == "true" {
-    #{$property}: map-get($vars, $varName) #{$important};
-  }
-  @else {
-    #{$property}: var(#{$varName}) #{$important};
-  }
-}
-
-@mixin inline-text(){
-  p,
-  ul,
-  ol,
-  dd,
-  .body,
-  table:not(.table--email) td {
-    @content;
-  }
-}
-
-
-@mixin headers($includeClasses: 'false'){
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @content;
-  }
-
-  @if $includeClasses == 'true' {
-
-    .h1,
-    .h2,
-    .h3,
-    .h4,
-    .h5,
-    .h6 {
-      @content;
-    }
-  }
-}
-
-@mixin bg-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-
-    --bg-colour: var(--colour-#{str-replace($parent,'.bg-','')});
-    --bg-colour-tint: var(--colour-#{str-replace($parent,'.bg-','')}-tint);
-    
-    @include var(background-color,--colour-#{str-replace($parent,'.bg-','')},!important);
-  }
-}
-@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-
-    @include var(color,--colour-#{str-replace($parent,'.text-','')},"!important");
-  }
-}
-
-@mixin font-size($value, $compatible:$compatible) {
-  
-  $found: false;
-
-  @if $compatible == "true" {
-    font-size: $value;
-  }
-  @else {
-    @each $size, $subvalue in $font-sizes {
-
-      @if($value == $subvalue and $found == false){
-        font-size: var(--fs-#{$size});
-        $found: true;
-      }
-    }
-    @if $found == false {
-      font-size: $value;
-    }
-  }
-
-}
-
-@mixin is($selector, $before: '', $after: '' ,$compatible:$compatible){
-
-  @if $compatible == "true" {
-    $split-values: str-split($selector, ",");
-    @each $value in $split-values {
-
-      #{$before}#{$value}#{$after} {
-        @content;
-      }
-    }
-  }
-  @else {
-    #{$before}:is(#{$selector})#{$after} {
-      @content;
-    }
-  }
-}
-
-@mixin reset-colours($compatible:$compatible) {
-  
-  --colour-body: var(--colour-body-theme);
-  --colour-heading: var(--colour-primary);
-  --colour-link: var(--colour-link-theme);
-  --colour-hover: var(--colour-hover-theme);
-  --colour-active: var(--colour-active-theme);
-  //--colour-underline: var(--colour-underline);
-  --colour-border: var(--colour-border-theme);
-  --colour-brand: var(--colour-primary);
-
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
-
-  .text-primary {
-    color: var(--colour-primary)!important;
-  }
-}
-
-@mixin invert-colours($compatible:$compatible) {
-  
-  --colour-body: white;
-  --colour-heading: white;
-  --colour-link: white;
-  --colour-hover: white;
-  --colour-border: white;
-  --colour-brand: white;
-
-  --btn-bg: white;
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-heading);
-  --btn-tertiary-bg: white;
-  --btn-tertiary-hover-text: var(--colour-primary);
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+  }
+  @else if $name =='xs' {
+    @content;
+  } 
+  @else {
+    @if $mobileOnly != "true" {
+    @content;
+    }
+  }
+}
+
+// Example: @include prefix(transition, transform 1.5s, webkit ms o);
+@mixin prefix($property, $value, $prefixes: (webkit ms o))
+{
+	@each $prefix in $prefixes
+	{
+		#{'-' + $prefix + '-' + $property}: $value;
+	}
+	
+	// Output standard non-prefixed declaration
+	#{$property}: $value;
+}
+
+// Used to make it possible to use css properties but still support IE11
+@mixin var($property, $varName, $important:"", $compatible:$compatible) {
+
+  @if $compatible == "true" {
+    #{$property}: map-get($vars, $varName) #{$important};
+  }
+  @else {
+    #{$property}: var(#{$varName}) #{$important};
+  }
+}
+
+@mixin inline-text(){
+  p,
+  ul,
+  ol,
+  dd,
+  .body,
+  table:not(.table--email) td {
+    @content;
+  }
+}
+
+
+@mixin headers($includeClasses: 'false'){
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+
+  @if $includeClasses == 'true' {
+
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+      @content;
+    }
+  }
+}
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+
+    --bg-colour: var(--colour-#{str-replace($parent,'.bg-','')});
+    --bg-colour-tint: var(--colour-#{str-replace($parent,'.bg-','')}-tint);
+    
+    @include var(background-color,--colour-#{str-replace($parent,'.bg-','')},!important);
+  }
+}
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+
+    @include var(color,--colour-#{str-replace($parent,'.text-','')},"!important");
+  }
+}
+
+@mixin font-size($value, $compatible:$compatible) {
+  
+  $found: false;
+
+  @if $compatible == "true" {
+    font-size: $value;
+  }
+  @else {
+    @each $size, $subvalue in $font-sizes {
+
+      @if($value == $subvalue and $found == false){
+        font-size: var(--fs-#{$size});
+        $found: true;
+      }
+    }
+    @if $found == false {
+      font-size: $value;
+    }
+  }
+
+}
+
+@mixin is($selector, $before: '', $after: '' ,$compatible:$compatible){
+
+  @if $compatible == "true" {
+    $split-values: str-split($selector, ",");
+    @each $value in $split-values {
+
+      #{$before}#{$value}#{$after} {
+        @content;
+      }
+    }
+  }
+  @else {
+    #{$before}:is(#{$selector})#{$after} {
+      @content;
+    }
+  }
+}
+
+@mixin reset-colours($compatible:$compatible) {
+  
+  --colour-body: var(--colour-body-theme);
+  --colour-heading: var(--colour-primary);
+  --colour-link: var(--colour-link-theme);
+  --colour-hover: var(--colour-hover-theme);
+  --colour-active: var(--colour-active-theme);
+  //--colour-underline: var(--colour-underline);
+  --colour-border: var(--colour-border-theme);
+  --colour-brand: var(--colour-primary);
+
+  --btn-bg: var(--colour-warning);
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-primary);
+  --btn-tertiary-bg: var(--colour-primary);
+  --btn-tertiary-hover-text: white;
+
+  .text-primary {
+    color: var(--colour-primary)!important;
+  }
+}
+
+@mixin invert-colours($compatible:$compatible) {
+  
+  --colour-body: white;
+  --colour-heading: white;
+  --colour-link: white;
+  --colour-hover: white;
+  --colour-border: white;
+  --colour-brand: white;
+
+  --btn-bg: white;
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-heading);
+  --btn-tertiary-bg: white;
+  --btn-tertiary-hover-text: var(--colour-primary);
 }

package/assets/sass/_functions/utilities.scss

@@ -1,144 +1,144 @@
-@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 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
-      )
-    )
-  )
-);
-
-
-
+@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 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