@iamproperty/components 2.7.9 → 3.0.0

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);
 }