ecabs-components 1.1.83 → 1.1.85

package/src/assets/styles/scss/utilities/_mixins.scss

@@ -1,65 +1,97 @@
-// Calculates font size in REMs with a pixel fallback.
-@mixin fontSize($size) {
-  font-size: $size;
-  font-size: calc-rem($size);
-}
-
-// ==========================================================================
-// BEM Naming Functions
-// ==========================================================================
-// Element Mixin
-@mixin e($element) {
-  &__#{$element} {
-    @content;
-  }
-}
-
-// Modifier Mixin
-@mixin m($modifier) {
-  &--#{$modifier} {
-    @content;
-  }
-}
-
-// Generate ::before or ::after pseudo-element shapes
-@mixin p-el($el-name, $h: 'null', $w: 'null') {
-  @if $el-name == 'before' or $el-name == 'after' {
-    &::#{$el-name} {
-      @extend %pseudos;
-      width: $w;
-      height: $h;
-      @content;
-    }
-  } @else {
-    @error '"#{$el-name}" is not a valid pseudo element.';
-  }
-}
-
-// ==========================================================================
-// Media Query Functions
-// ==========================================================================
-@mixin media-q($break) {
-  @if $break == 'small' {
-    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
-      @content;
-    }
-  } @else if $break == 'medium' {
-    @media (min-width: map-get($breakpoints, 'md') + 1) {
-      @content;
-    }
-  } @else if $break == 'large' {
-    @media (min-width: map-get($breakpoints, 'lg')) {
-      @content;
-    }
-  } @else if $break == 'x-large' {
-    @media (min-width: map-get($breakpoints, 'xl')) {
-      @content;
-    }
-  } @else if $break == 'xx-large' {
-    @media (min-width: map-get($breakpoints, 'xxl')) {
-      @content;
-    }
-  } @else {
-    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
-  }
-}
+// Calculates font size in REMs with a pixel fallback.
+@mixin fontSize($size) {
+  font-size: $size;
+  font-size: calc-rem($size);
+}
+
+// ==========================================================================
+// BEM Naming Functions
+// ==========================================================================
+// Element Mixin
+@mixin e($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+
+// Modifier Mixin
+@mixin m($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+
+// Generate ::before or ::after pseudo-element shapes
+@mixin p-el($el-name, $h: 'null', $w: 'null') {
+  @if $el-name == 'before' or $el-name == 'after' {
+    &::#{$el-name} {
+      @extend %pseudos;
+      width: $w;
+      height: $h;
+      @content;
+    }
+  } @else {
+    @error '"#{$el-name}" is not a valid pseudo element.';
+  }
+}
+
+// ==========================================================================
+// Media Query Functions
+// ==========================================================================
+@mixin media-q($break) {
+  @if $break == 'small' {
+    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
+      @content;
+    }
+  } @else if $break == 'medium' {
+    @media (min-width: map-get($breakpoints, 'md') + 1) {
+      @content;
+    }
+  } @else if $break == 'large' {
+    @media (min-width: map-get($breakpoints, 'lg')) {
+      @content;
+    }
+  } @else if $break == 'x-large' {
+    @media (min-width: map-get($breakpoints, 'xl')) {
+      @content;
+    }
+  } @else if $break == 'xx-large' {
+    @media (min-width: map-get($breakpoints, 'xxl')) {
+      @content;
+    }
+  } @else {
+    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
+  }
+}
+
+// ==========================================================================
+// Sized-control button v2 metrics
+// ==========================================================================
+@mixin btn-size($height, $min-width, $padding-x, $font-size, $line-height) {
+  height: $height;
+  min-width: $min-width;
+  padding: 0 $padding-x;
+  font-size: $font-size;
+  font-weight: $font-weight-semibold;
+  line-height: $line-height;
+  letter-spacing: 0;
+  border-radius: calc-rem($border-radius-large);
+  text-align: center;
+}
+
+// Step for the button-toggle size scale, applied to Material's toggle internals.
+@mixin toggle-size($height, $min-width, $font-size, $padding-x) {
+  .mat-button-toggle {
+    height: $height;
+
+    .mat-button-toggle-button {
+      height: $height;
+      min-width: $min-width;
+    }
+
+    .mat-button-toggle-label-content {
+      font-size: $font-size;
+      padding: 0 $padding-x;
+    }
+  }
+}