@luizleon/sf.prefeiturasp.vuecomponents 0.0.19 → 0.0.21

package/src/style/src/_mixins.scss

@@ -1,633 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "sass:color";
-@use "sass:math";
-@import "./variables";
-@import "./functions";
-
-@mixin avatar-colors($dark: false) {
-  $incr: 0;
-
-  @each $key, $value in $colors {
-    $bgColor: color.scale($value, $lightness: -40%);
-    $color: color.scale($value, $lightness: 90%);
-
-    @if ($dark) {
-      $bgColor: color.scale($value, $lightness: 40%);
-      $color: color.scale($value, $lightness: -90%);
-    }
-
-    &[data-cor="#{$incr}"] {
-      color: $color;
-      background-color: $bgColor;
-
-      &[data-hover]:hover {
-        box-shadow: 0 0 0 2px color.scale($bgColor, $alpha: -50%);
-        cursor: pointer;
-      }
-    }
-
-    $incr: $incr + 1;
-  }
-}
-
-@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}"] {
-      @media (pointer: fine) {
-        &:focus-visible {
-          outline: 2px solid color.scale($colorValue, $alpha: -50%);
-          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%);
-          } @else {
-            background-color: color.scale(
-              $colorValue,
-              $lightness: -30%
-            );
-          }
-        }
-      }
-      &.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;
-        }
-        background-color: transparent;
-        @media (pointer: fine) {
-          &:hover,
-          &:focus-visible {
-            background-color: color.scale($colorValue, $alpha: -80%);
-          }
-        }
-      }
-      &.sf-button-text {
-        border-color: transparent !important;
-      }
-    }
-  }
-}
-
-@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);
-      }
-    }
-  }
-}
-
-@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);
-      }
-    }
-  }
-}
-
-@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);
-      }
-    }
-  }
-}
-
-@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;
-    }
-    &: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;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}