i-tech-shared-components 1.1.6 → 1.1.9

package/theme/_icon-button.scss

@@ -1,123 +1,123 @@
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-body {
-  $buttonSize: 40;
-  $buttonSizeSmall: 24;
-
-  app-icon-button {
-    display: inline-block;
-    height: #{$buttonSize}px;
-  }
-
-  app-icon-button:has(.small) {
-    height: #{$buttonSizeSmall}px;
-  }
-
-  // ICON BUTTON SIZING
-  .mat-mdc-icon-button,.mat-mdc-fab-base {
-    width: #{$buttonSize}px;
-    height: #{$buttonSize}px;
-    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
-    padding: calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);
-    font-size: unset !important;
-
-    .mat-mdc-button-touch-target {
-      width: #{$buttonSize - 10 }px;
-      height: #{$buttonSize - 10 }px;
-    }
-
-    mat-icon {
-      svg {
-        vertical-align: super;
-      }
-    }
-
-  }
-
-  .mat-mdc-icon-button.small {
-    $iconSize: 21px;
-    $buttonSize: 24;
-    width: #{$buttonSizeSmall}px;
-    height: #{$buttonSizeSmall}px;
-    --mdc-icon-button-state-layer-size: #{$buttonSizeSmall}px !important;
-    --mdc-icon-button-icon-size: #{$iconSize} !important;
-
-    mat-icon {
-      font-size: $iconSize;
-      width: $iconSize;
-      height: $iconSize;
-    }
-
-    .mat-mdc-button-touch-target {
-      width: #{$buttonSizeSmall}px;
-      height: #{$buttonSizeSmall}px;
-    }
-
-  }
-
-  .mat-mdc-fab-base.small {
-    $iconSize: 21px;
-    $buttonSize: 24;
-    width: #{$buttonSize}px;
-    height: #{$buttonSize}px;
-    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
-    --mdc-icon-button-icon-size: #{$iconSize} !important;
-
-    mat-icon {
-      font-size: $iconSize;
-      width: $iconSize;
-      height: $iconSize;
-    }
-
-    .mat-mdc-button-touch-target {
-      width: #{$buttonSize}px;
-      height: #{$buttonSize}px;
-    }
-  }
-
-  // END OF ICON BUTTON SIZING
-
-  // BUTTON ICON TYPES
-
-  .mat-mdc-icon-button.tonal {
-    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
-
-    mat-icon {
-      color: mat.get-theme-color($m3-light-theme, tertiary, 30);
-      & svg path {
-        fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
-      }
-    }
-  }
-
-  .mat-mdc-icon-button.standard {
-    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
-
-    mat-icon {
-      color: mat.get-theme-color($m3-light-theme, primary, 50);
-      & svg path {
-        fill: mat.get-theme-color($m3-light-theme, primary, 50);
-      }
-    }
-  }
-
-  // FILLED
-  .mat-mdc-fab-base.filled {
-    --mdc-fab-container-shape: 50% !important;
-    --mdc-fab-container-elevation-shadow: none !important;
-    --mdc-fab-hover-container-elevation-shadow: none !important;
-    --mdc-fab-pressed-container-elevation-shadow: none !important;
-    --mdc-fab-focus-container-elevation-shadow: none !important;
-    --mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
-    --mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
-    mat-icon {
-      color: white;
-      & svg path {
-        fill: white;
-      }
-    }
-  }
-  // END OF BUTTON ICON TYPES
-
-}
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  $buttonSize: 40;
+  $buttonSizeSmall: 24;
+
+  app-icon-button {
+    display: inline-block;
+    height: #{$buttonSize}px;
+  }
+
+  app-icon-button:has(.small) {
+    height: #{$buttonSizeSmall}px;
+  }
+
+  // ICON BUTTON SIZING
+  .mat-mdc-icon-button,.mat-mdc-fab-base {
+    width: #{$buttonSize}px;
+    height: #{$buttonSize}px;
+    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
+    padding: calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);
+    font-size: unset !important;
+
+    .mat-mdc-button-touch-target {
+      width: #{$buttonSize - 10 }px;
+      height: #{$buttonSize - 10 }px;
+    }
+
+    mat-icon {
+      svg {
+        vertical-align: super;
+      }
+    }
+
+  }
+
+  .mat-mdc-icon-button.small {
+    $iconSize: 21px;
+    $buttonSize: 24;
+    width: #{$buttonSizeSmall}px;
+    height: #{$buttonSizeSmall}px;
+    --mdc-icon-button-state-layer-size: #{$buttonSizeSmall}px !important;
+    --mdc-icon-button-icon-size: #{$iconSize} !important;
+
+    mat-icon {
+      font-size: $iconSize;
+      width: $iconSize;
+      height: $iconSize;
+    }
+
+    .mat-mdc-button-touch-target {
+      width: #{$buttonSizeSmall}px;
+      height: #{$buttonSizeSmall}px;
+    }
+
+  }
+
+  .mat-mdc-fab-base.small {
+    $iconSize: 21px;
+    $buttonSize: 24;
+    width: #{$buttonSize}px;
+    height: #{$buttonSize}px;
+    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
+    --mdc-icon-button-icon-size: #{$iconSize} !important;
+
+    mat-icon {
+      font-size: $iconSize;
+      width: $iconSize;
+      height: $iconSize;
+    }
+
+    .mat-mdc-button-touch-target {
+      width: #{$buttonSize}px;
+      height: #{$buttonSize}px;
+    }
+  }
+
+  // END OF ICON BUTTON SIZING
+
+  // BUTTON ICON TYPES
+
+  .mat-mdc-icon-button.tonal {
+    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
+
+    mat-icon {
+      color: mat.get-theme-color($m3-light-theme, tertiary, 30);
+      & svg path {
+        fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
+      }
+    }
+  }
+
+  .mat-mdc-icon-button.standard {
+    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
+
+    mat-icon {
+      color: mat.get-theme-color($m3-light-theme, primary, 50);
+      & svg path {
+        fill: mat.get-theme-color($m3-light-theme, primary, 50);
+      }
+    }
+  }
+
+  // FILLED
+  .mat-mdc-fab-base.filled {
+    --mdc-fab-container-shape: 50% !important;
+    --mdc-fab-container-elevation-shadow: none !important;
+    --mdc-fab-hover-container-elevation-shadow: none !important;
+    --mdc-fab-pressed-container-elevation-shadow: none !important;
+    --mdc-fab-focus-container-elevation-shadow: none !important;
+    --mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
+    --mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
+    mat-icon {
+      color: white;
+      & svg path {
+        fill: white;
+      }
+    }
+  }
+  // END OF BUTTON ICON TYPES
+
+}

package/theme/_label.scss

@@ -1,119 +1,119 @@
-@use "sass:map";
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-body {
-  $types: (
-          purple: (
-                  main: #DBD4F3,
-                  hover: #E5E0F6,
-                  border: #6F5BBF,
-                  text: #140063
-          ),
-          teal: (
-                  main: #D2F3F2,
-                  hover: #DFF6F6,
-                  border: #00CAC3,
-                  text: #006B67
-          ),
-          olive: (
-                  main: #EFF2D4,
-                  hover: #F3F6E0,
-                  border: #CDD968,
-                  text: #606C00
-          ),
-          orange: (
-                  main: #FFE4DB,
-                  hover: #FFECE5,
-                  border: #FC8156,
-                  text: #A42B00
-          ),
-          blue: (
-                  main: #D1E9FF,
-                  hover: #DEEFFF,
-                  border: #42A5FF,
-                  text: #003E77
-          ),
-          cyan: (
-                  main: #DBF8FF,
-                  hover: #E5FAFF,
-                  border: #42D8FF,
-                  text: #006681
-          ),
-          raspberry: (
-                  main: #EBD6DB,
-                  hover: #F1E1E5,
-                  border: #711A2E,
-                  text: #4B0011
-          ),
-          yellow: (
-                  main: #FFFCCB,
-                  hover: #FFFDDA,
-                  border: #FFF000,
-                  text: #847700
-          ),
-          wine: (
-                  main: #EDD3E5,
-                  hover: #F2DFEC,
-                  border: #9D4280,
-                  text: #680047
-          ),
-          green: (
-                  main: #CFF1DD,
-                  hover: #DCF5E7,
-                  border: #2EB265,
-                  text: #005D27
-          ),
-          primary: (
-                  main: #C0E5C7,
-                  hover: #EFFAF1,
-                  border: #42B963,
-                  text: #003A0C
-          ),
-          red: (
-                  main: #FFE5E5,
-                  hover: #FFD9D9,
-                  border: #FF4D4D,
-                  text: #8B0000
-          ),
-  );
-
-  --mdc-chip-container-shape-radius: 8px !important;
-  --mdc-chip-label-text-line-height: 16px !important;
-  --mdc-chip-label-text-size: 11px !important;
-  --mdc-chip-label-text-weight: 700 !important;
-  --mdc-chip-label-text-tracking: 0.3 !important;
-  --mdc-chip-outline-width: 0 !important;
-  --mdc-chip-container-height: 32px !important;
-
-  @each $type, $value in $types {
-    .label_#{$type} {
-      --mdc-chip-elevated-container-color: #{map.get($value, "main")};
-      --mdc-chip-outline-color: #{map.get($value, "border")};
-      --mdc-chip-label-text-color: #{map.get($value, "text")};
-
-      mat-icon {
-        width: 18px;
-        height: 18px;
-        font-size: 18px;
-      }
-    }
-  }
-
-  .mat-mdc-chip.small {
-    // TODO need to review
-    --mdc-chip-container-height: 28px !important;
-  }
-
-  .trailing-icon {
-    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
-      // Chips with trailing icon have -4 right padding per Figma
-      padding-right: 8px;
-    }
-  }
-
-  .mat-mdc-chip.bordered {
-    --mdc-chip-outline-width: 2.5px !important;
-  }
-
-}
+@use "sass:map";
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  $types: (
+          purple: (
+                  main: #DBD4F3,
+                  hover: #E5E0F6,
+                  border: #6F5BBF,
+                  text: #140063
+          ),
+          teal: (
+                  main: #D2F3F2,
+                  hover: #DFF6F6,
+                  border: #00CAC3,
+                  text: #006B67
+          ),
+          olive: (
+                  main: #EFF2D4,
+                  hover: #F3F6E0,
+                  border: #CDD968,
+                  text: #606C00
+          ),
+          orange: (
+                  main: #FFE4DB,
+                  hover: #FFECE5,
+                  border: #FC8156,
+                  text: #A42B00
+          ),
+          blue: (
+                  main: #D1E9FF,
+                  hover: #DEEFFF,
+                  border: #42A5FF,
+                  text: #003E77
+          ),
+          cyan: (
+                  main: #DBF8FF,
+                  hover: #E5FAFF,
+                  border: #42D8FF,
+                  text: #006681
+          ),
+          raspberry: (
+                  main: #EBD6DB,
+                  hover: #F1E1E5,
+                  border: #711A2E,
+                  text: #4B0011
+          ),
+          yellow: (
+                  main: #FFFCCB,
+                  hover: #FFFDDA,
+                  border: #FFF000,
+                  text: #847700
+          ),
+          wine: (
+                  main: #EDD3E5,
+                  hover: #F2DFEC,
+                  border: #9D4280,
+                  text: #680047
+          ),
+          green: (
+                  main: #CFF1DD,
+                  hover: #DCF5E7,
+                  border: #2EB265,
+                  text: #005D27
+          ),
+          primary: (
+                  main: #C0E5C7,
+                  hover: #EFFAF1,
+                  border: #42B963,
+                  text: #003A0C
+          ),
+          red: (
+                  main: #FFE5E5,
+                  hover: #FFD9D9,
+                  border: #FF4D4D,
+                  text: #8B0000
+          ),
+  );
+
+  --mdc-chip-container-shape-radius: 8px !important;
+  --mdc-chip-label-text-line-height: 16px !important;
+  --mdc-chip-label-text-size: 11px !important;
+  --mdc-chip-label-text-weight: 700 !important;
+  --mdc-chip-label-text-tracking: 0.3 !important;
+  --mdc-chip-outline-width: 0 !important;
+  --mdc-chip-container-height: 32px !important;
+
+  @each $type, $value in $types {
+    .label_#{$type} {
+      --mdc-chip-elevated-container-color: #{map.get($value, "main")};
+      --mdc-chip-outline-color: #{map.get($value, "border")};
+      --mdc-chip-label-text-color: #{map.get($value, "text")};
+
+      mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .mat-mdc-chip.small {
+    // TODO need to review
+    --mdc-chip-container-height: 28px !important;
+  }
+
+  .trailing-icon {
+    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+      // Chips with trailing icon have -4 right padding per Figma
+      padding-right: 8px;
+    }
+  }
+
+  .mat-mdc-chip.bordered {
+    --mdc-chip-outline-width: 2.5px !important;
+  }
+
+}