@luizleon/sf.prefeiturasp.vuecomponents 0.0.37 → 0.0.38

package/src/style/src/_mixins.scss

@@ -6,6 +6,48 @@
 @import "./functions";
 
 @mixin avatar-colors($dark: false) {
+  $red: #f44336;
+  $pink: #e91e63;
+  $purple: #9c27b0;
+  $deepPurple: #673ab7;
+  $indigo: #3f51b5;
+  $blue: #2196f3;
+  $lightBlue: #03a9f4;
+  $cyan: #00bcd4;
+  $teal: #009688;
+  $green: #4caf50;
+  $lightGreen: #8bc34a;
+  $lime: #cddc39;
+  $yellow: #ffeb3b;
+  $amber: #ffc107;
+  $orange: #ff9800;
+  $deepOrange: #ff5722;
+  $brown: #795548;
+  $gray: #9e9e9e;
+  $blueGray: #607d8b;
+
+  $colors: (
+    "--red": $red,
+    "--pink": $pink,
+    "--purple": $purple,
+    "--deepPurple": $deepPurple,
+    "--indigo": $indigo,
+    "--blue": $blue,
+    "--lightBlue": $lightBlue,
+    "--cyan": $cyan,
+    "--teal": $teal,
+    "--green": $green,
+    "--lightGreen": $lightGreen,
+    "--lime": $lime,
+    "--yellow": $yellow,
+    "--amber": $amber,
+    "--orange": $orange,
+    "--deepOrange": $deepOrange,
+    "--brown": $brown,
+    "--gray": $gray,
+    "--blueGray": $blueGray,
+  );
+
   $incr: 0;
 
   @each $key, $value in $colors {
@@ -31,83 +73,43 @@
   }
 }
 
-@mixin colors-hsl($colors) {
-  @each $key, $value in $colors {
-    $h: hue($value);
-    $s: saturation($value);
-    $l: lightness($value);
-    #{$key}-color-h: $h;
-    #{$key}-color-s: $s;
-    #{$key}-color-l: $l;
-  }
-}
-
-@mixin colors($colors, $buildShades: true) {
-  @each $colorName, $colorValue in $colors {
-    @if ($buildShades) {
-      @each $shade, $color in makeColorPalette($colorValue) {
-        $var: $colorName + "-color" + $shade;
-        #{$var}: $color;
-      }
-    } @else {
-      $var: $colorName + "-color";
-      #{$var}: $colorValue;
-    }
-  }
-}
-
 @mixin button-colors($dark: false) {
-  $cores: themeColors($dark);
-  @each $colorKey, $colorValue in $cores {
-    $colorName: str-replace($colorKey, "--");
-    $color: #fff;
-    @if ($dark) {
-      $color: #000;
-    }
-    &[data-color="#{$colorName}"] {
+  @each $color in theme-colors() {
+    &[data-color="#{$color}"] {
+      color: var(--bg-color);
       @media (pointer: fine) {
         &:focus-visible {
-          outline: 2px solid color.scale($colorValue, $alpha: -50%);
+          outline: 2px solid var(--#{$color}-hover-color);
           outline-offset: 1px;
           border-color: var(--bg-color);
         }
       }
       &:active {
         transition: 0s;
-        background-color: color.scale($colorValue, $alpha: -70%);
-      }
-      &.sf-button-filled {
-        color: $color;
-        background-color: $colorValue;
         &:active {
           @if ($dark) {
-            background-color: color.scale($colorValue, $alpha: -30%);
+            filter: brightness(0.9);
           } @else {
-            background-color: color.scale(
-              $colorValue,
-              $lightness: -30%
-            );
+            filter: brightness(1.1);
           }
         }
       }
-      &.sf-button-outlined,
-      &.sf-button-text {
-        @if ($dark == false and $colorName == "warn") {
-          color: color.scale($colorValue, $lightness: -40%);
-          border-color: color.scale($colorValue, $lightness: -40%);
-        } @else {
-          color: $colorValue;
-          border-color: $colorValue;
-        }
+      &.#{$prefix}button-filled {
+        background-color: var(--#{$color}-color);
+      }
+      &.#{$prefix}button-outlined,
+      &.#{$prefix}button-text {
         background-color: transparent;
+        color: var(--#{$color}-color);
+        border-color: var(--#{$color}-color);
         @media (pointer: fine) {
           &:hover,
           &:focus-visible {
-            background-color: color.scale($colorValue, $alpha: -80%);
+            background-color: var(--#{$color}-hover-color);
           }
         }
       }
-      &.sf-button-text {
+      &.#{$prefix}button-text {
         border-color: transparent !important;
       }
     }
@@ -115,519 +117,34 @@
 }
 
 @mixin dot-colors() {
-  @each $colorKey, $colorValue in themeColors() {
-    @if list.index($theme-colors-list, $colorKey) != null {
-      $colorName: str-replace($colorKey, "--");
-      &[data-color="#{$colorName}"] {
-        background-color: var(#{$colorKey}-color);
-      }
+  @each $color in theme-colors() {
+    &[data-color="#{$color}"] {
+      color: var(--#{$color}-color);
     }
   }
 }
 
 @mixin input-colors() {
-  @each $colorKey, $colorValue in themeColors() {
-    @if list.index($theme-colors-list, $colorKey) != null {
-      $colorName: str-replace($colorKey, "--");
-      &[data-color="#{$colorName}"] {
-        color: var(#{$colorKey}-color);
-      }
+  @each $color in theme-colors() {
+    &[data-color="#{$color}"] {
+      background-color: var(--#{$color}-color);
     }
   }
 }
 
 @mixin toast-colors() {
-  @each $colorKey, $colorValue in themeColors() {
-    @if list.index($theme-colors-list, $colorKey) != null {
-      $colorName: str-replace($colorKey, "--");
-      &.toast-#{$colorName} {
-        --animate-bg-color: var(#{$colorKey}-color);
-      }
-    }
-  }
-}
-
-@mixin theme-colors {
-  @each $colorKey, $colorValue in themeColors() {
-    $colorName: str-replace($colorKey, "--");
-    $A: list.index($theme-colors-list, $colorKey) != null;
-    $B: list.index($theme-colors-hover-list, $colorKey) != null;
-    $C: str-replace($colorName, "surface") != $colorName;
-    @if $A or $B {
-      .sf-#{$colorName}-color {
-        color: var(#{$colorKey}-color);
-      }
-      .sf-#{$colorName}-bgcolor {
-        background-color: var(#{$colorKey}-color);
-      }
-    }
-    @if $C {
-      .sf-#{$colorName}-bgcolor {
-        background-color: var(#{$colorKey}-color);
-      }
+  @each $color in theme-colors() {
+    &.toast-#{$color} {
+      --animate-bg-color: var(--#{$color}-color);
     }
   }
 }
 
-@mixin sf-internal-icon-button {
-  isolation: isolate;
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  padding: 8px;
-  position: relative;
-  border-radius: 50%;
-  @media (pointer: fine) {
-    &:hover {
-      cursor: pointer;
-      background-color: $icon-hover-color;
-    }
+@mixin icon-button-hover-colors() {
+  @each $color in theme-colors() {
+    &:hover,
     &:focus-visible {
-      outline-offset: 0px;
-    }
-  }
-
-  svg {
-    height: 24px;
-    width: 24px;
-    fill: var(--text-color);
-  }
-}
-
-/*
-Primeflex mixins
-*/
-@mixin style-class($prop, $map, $responsive: false, $states: false) {
-  @each $key, $val in $map {
-    .#{$prefix}#{$key} {
-      #{$prop}: #{$val} !important;
-    }
-  }
-
-  @if ($states) {
-    @each $key, $val in $map {
-      .focus#{$separator} {
-        &#{$prefix}#{$key}:focus {
-          #{$prop}: #{$val} !important;
-        }
-      }
-
-      .hover#{$separator} {
-        &#{$prefix}#{$key}:hover {
-          #{$prop}: #{$val} !important;
-        }
-      }
-
-      .active#{$separator} {
-        &#{$prefix}#{$key}:active {
-          #{$prop}: #{$val} !important;
-        }
-      }
-    }
-  }
-
-  @if ($responsive) {
-    @each $key, $val in $breakpoints {
-      @media screen and (min-width: #{$val}) {
-        .#{$key + $separator} {
-          @each $key, $val in $map {
-            &#{$prefix}#{$key} {
-              #{$prop}: #{$val} !important;
-            }
-          }
-
-          @if ($states) {
-            @each $key, $val in $map {
-              &focus#{$separator} {
-                &#{$prefix}#{$key}:focus {
-                  #{$prop}: #{$val} !important;
-                }
-              }
-
-              &hover#{$separator} {
-                &#{$prefix}#{$key}:hover {
-                  #{$prop}: #{$val} !important;
-                }
-              }
-
-              &active#{$separator} {
-                &#{$prefix}#{$key}:active {
-                  #{$prop}: #{$val} !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin color-class($name, $prop, $colors, $shades) {
-  @each $color in $colors {
-    .#{$prefix}#{$name}#{$color} {
-      @each $shade in $shades {
-        &-#{$shade} {
-          #{$prop}: var(--#{$color}-#{$shade}) !important;
-        }
-      }
-    }
-
-    .focus#{$separator} {
-      &#{$prefix}#{$name}#{$color} {
-        @each $shade in $shades {
-          &-#{$shade}:focus {
-            #{$prop}: var(--#{$color}-#{$shade}) !important;
-          }
-        }
-      }
-    }
-
-    .hover#{$separator} {
-      &#{$prefix}#{$name}#{$color} {
-        @each $shade in $shades {
-          &-#{$shade}:hover {
-            #{$prop}: var(--#{$color}-#{$shade}) !important;
-          }
-        }
-      }
-    }
-
-    .active#{$separator} {
-      &#{$prefix}#{$name}#{$color} {
-        @each $shade in $shades {
-          &-#{$shade}:active {
-            #{$prop}: var(--#{$color}-#{$shade}) !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin surface-class($name, $prop, $shades) {
-  @each $shade in $shades {
-    .#{$prefix}#{$name}-#{$shade} {
-      #{$prop}: var(--surface-#{$shade}) !important;
-    }
-  }
-
-  @each $shade in $shades {
-    .focus#{$separator} {
-      &#{$prefix}#{$name}-#{$shade}:focus {
-        #{$prop}: var(--surface-#{$shade}) !important;
-      }
-    }
-
-    .hover#{$separator} {
-      &#{$prefix}#{$name}-#{$shade}:hover {
-        #{$prop}: var(--surface-#{$shade}) !important;
-      }
-    }
-
-    .active#{$separator} {
-      &#{$prefix}#{$name}-#{$shade}:active {
-        #{$prop}: var(--surface-#{$shade}) !important;
-      }
-    }
-  }
-}
-
-@mixin border-class($name, $directions, $scales) {
-  @each $dir, $prop in $directions {
-    @for $i from 0 through length($scales) - 1 {
-      $borderValue: if($i == 0, "none", $i);
-      $className: #{$name}-#{$dir}-#{$borderValue};
-      @if ($dir == "") {
-        $className: #{$name}-#{$borderValue};
-      }
-
-      .#{$prefix}#{$className} {
-        @each $propName in $prop {
-          #{$propName}-width: nth($scales, $i + 1) !important;
-          #{$propName}-style: if($i == 0, none, solid);
-        }
-      }
-    }
-  }
-
-  @each $key, $val in $breakpoints {
-    @media screen and (min-width: #{$val}) {
-      .#{$key + $separator} {
-        @each $dir, $prop in $directions {
-          @for $i from 0 through length($scales) - 1 {
-            $borderValue: if($i == 0, "none", $i);
-            $className: #{$name}-#{$dir}-#{$borderValue};
-            @if ($dir == "") {
-              $className: #{$name}-#{$borderValue};
-            }
-
-            &#{$prefix}#{$className} {
-              @each $propName in $prop {
-                #{$propName}-width: nth($scales, $i + 1) !important;
-                #{$propName}-style: if($i == 0, none, solid);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin border-radius-class($map, $directions) {
-  @each $key, $val in $map {
-    $prefixName: $key;
-    $suffixName: "";
-    $index: str-index($key, "border-round");
-
-    @if $index != null {
-      $prefixName: "border-round";
-      $suffixName: str-slice(
-        $key,
-        str-length("border-round") + 1,
-        str-length($key)
-      );
-    }
-
-    @each $dir, $prop in $directions {
-      .#{$prefix}#{$prefixName}-#{$dir}#{$suffixName} {
-        @each $propName in $prop {
-          #{$propName}: #{$val} !important;
-        }
-      }
-    }
-  }
-
-  @each $key, $val in $breakpoints {
-    @media screen and (min-width: #{$val}) {
-      .#{$key + $separator} {
-        @each $key, $val in $map {
-          $prefixName: $key;
-          $suffixName: "";
-          $index: str-index($key, "border-round");
-
-          @if $index != null {
-            $prefixName: "border-round";
-            $suffixName: str-slice(
-              $key,
-              str-length("border-round") + 1,
-              str-length($key)
-            );
-          }
-
-          @each $dir, $prop in $directions {
-            &#{$prefix}#{$prefixName}-#{$dir}#{$suffixName} {
-              @each $propName in $prop {
-                #{$propName}: #{$val} !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin rgba-color-class($name, $prop, $colors, $shades) {
-  @each $colorName, $colorValue in $colors {
-    .#{$prefix}#{$name}#{$colorName}-alpha {
-      @each $shade in $shades {
-        &-#{$shade} {
-          #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
-        }
-      }
-    }
-
-    .hover#{$separator} {
-      &#{$prefix}#{$name}#{$colorName}-alpha {
-        @each $shade in $shades {
-          &-#{$shade}:hover {
-            #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
-          }
-        }
-      }
-    }
-
-    .focus#{$separator} {
-      &#{$prefix}#{$name}#{$colorName}-alpha {
-        @each $shade in $shades {
-          &-#{$shade}:focus {
-            #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
-          }
-        }
-      }
-    }
-
-    .active#{$separator} {
-      &#{$prefix}#{$name}#{$colorName}-alpha {
-        @each $shade in $shades {
-          &-#{$shade}:active {
-            #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin spacing-class(
-  $inPrefix,
-  $map,
-  $scales,
-  $responsive: true,
-  $auto: false,
-  $negative: false
-) {
-  $inPrefix: $prefix + $inPrefix;
-
-  @each $name, $prop in $map {
-    @for $i from 0 through length($scales) - 1 {
-      .#{$inPrefix}#{$name}-#{$i} {
-        @each $propName in $prop {
-          #{$propName}: $spacer * nth($scales, $i + 1) !important;
-        }
-      }
-    }
-
-    @if ($negative) {
-      @for $i from 1 through length($scales) - 1 {
-        .-#{$inPrefix}#{$name}-#{$i} {
-          @each $propName in $prop {
-            #{$propName}: -1 *
-              $spacer *
-              nth($scales, $i + 1) !important;
-          }
-        }
-      }
-    }
-
-    @if ($auto) {
-      .#{$inPrefix}#{$name}-auto {
-        @each $propName in $prop {
-          #{$propName}: auto !important;
-        }
-      }
-    }
-  }
-
-  @if ($responsive) {
-    @each $key, $val in $breakpoints {
-      @media screen and (min-width: #{$val}) {
-        @each $name, $prop in $map {
-          @for $i from 0 through length($scales) - 1 {
-            .#{$key + $separator}#{$inPrefix}#{$name}-#{$i} {
-              @each $propName in $prop {
-                #{$propName}: $spacer *
-                  nth($scales, $i + 1) !important;
-              }
-            }
-          }
-
-          @if ($negative) {
-            @for $i from 1 through length($scales) - 1 {
-              .#{$key + $separator}-#{$inPrefix}#{$name}-#{$i} {
-                @each $propName in $prop {
-                  #{$propName}: -1 *
-                    $spacer *
-                    nth($scales, $i + 1) !important;
-                }
-              }
-            }
-          }
-
-          @if ($auto) {
-            .#{$key + $separator}#{$inPrefix}#{$name}-auto {
-              @each $propName in $prop {
-                #{$propName}: auto !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin generate-class($map, $responsive: false, $states: false) {
-  @each $name, $propMap in $map {
-    .#{$prefix}#{$name} {
-      @each $prop, $val in $propMap {
-        #{$prop}: #{$val} !important;
-      }
-    }
-  }
-
-  @if ($states) {
-    @each $name, $propMap in $map {
-      .focus#{$separator} {
-        &#{$prefix}#{$name}:focus {
-          @each $prop, $val in $propMap {
-            #{$prop}: #{$val} !important;
-          }
-        }
-      }
-
-      .hover#{$separator} {
-        &#{$prefix}#{$name}:hover {
-          @each $prop, $val in $propMap {
-            #{$prop}: #{$val} !important;
-          }
-        }
-      }
-
-      .active#{$separator} {
-        &#{$prefix}#{$name}:active {
-          @each $prop, $val in $propMap {
-            #{$prop}: #{$val} !important;
-          }
-        }
-      }
-    }
-  }
-
-  @if ($responsive) {
-    @each $key, $val in $breakpoints {
-      @media screen and (min-width: #{$val}) {
-        .#{$key + $separator} {
-          @each $name, $propMap in $map {
-            &#{$prefix}#{$name} {
-              @each $prop, $val in $propMap {
-                #{$prop}: #{$val} !important;
-              }
-            }
-          }
-
-          @if ($states) {
-            @each $name, $propMap in $map {
-              &focus#{$separator} {
-                &#{$prefix}#{$name}:focus {
-                  @each $prop, $val in $propMap {
-                    #{$prop}: #{$val} !important;
-                  }
-                }
-              }
-
-              &hover#{$separator} {
-                &#{$prefix}#{$name}:hover {
-                  @each $prop, $val in $propMap {
-                    #{$prop}: #{$val} !important;
-                  }
-                }
-              }
-
-              &active#{$separator} {
-                &#{$prefix}#{$name}:active {
-                  @each $prop, $val in $propMap {
-                    #{$prop}: #{$val} !important;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
+      background-color: var(--#{$color}-hover-color);
     }
   }
 }