@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/mixins/function.scss

@@ -1,99 +1,99 @@
-@use 'config';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'sass:math';
-@use 'sass:color';
-
-// BEM support Func
-@function selectorToString($selector) {
-  $selector: meta.inspect($selector);
-  $selector: string.slice($selector, 2, -2);
-  @return $selector;
-}
-
-@function containsModifier($selector) {
-  $selector: selectorToString($selector);
-
-  @if string.index($selector, config.$modifier-separator) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containWhenFlag($selector) {
-  $selector: selectorToString($selector);
-
-  @if string.index($selector, '.' + config.$state-prefix) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containPseudoClass($selector) {
-  $selector: selectorToString($selector);
-
-  @if string.index($selector, ':') {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function hitAllSpecialNestRule($selector) {
-  @return containsModifier($selector) or containWhenFlag($selector) or
-    containPseudoClass($selector);
-}
-
-// join var name
-// joinVarName(('button', 'text-color')) => '--el-button-text-color'
-@function joinVarName($list) {
-  $name: '--' + config.$namespace;
-  @each $item in $list {
-    @if $item != '' {
-      $name: $name + '-' + $item;
-    }
-  }
-  @return $name;
-}
-
-// getCssVarName('button', 'text-color') => '--el-button-text-color'
-@function getCssVarName($args...) {
-  @return joinVarName($args);
-}
-
-// getCssVar('button', 'text-color') => var(--el-button-text-color)
-@function getCssVar($args...) {
-  @return var(#{joinVarName($args)});
-}
-
-// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
-@function getCssVarWithDefault($args, $default) {
-  @return var(#{joinVarName($args)}, #{$default});
-}
-
-// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
-@function bem($block, $element: '', $modifier: '') {
-  $name: config.$namespace + config.$common-separator + $block;
-
-  @if $element != '' {
-    $name: $name + config.$element-separator + $element;
-  }
-
-  @if $modifier != '' {
-    $name: $name + config.$modifier-separator + $modifier;
-  }
-
-  // @debug $name;
-  @return $name;
-}
-
-@function roundColor($color) {
-  $r: math.round(color.channel($color, 'red'));
-  $g: math.round(color.channel($color, 'green'));
-  $b: math.round(color.channel($color, 'blue'));
-  $a: color.channel($color, 'alpha');
-
-  @return rgba($r, $g, $b, $a);
-}
+@use 'config';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:math';
+@use 'sass:color';
+
+// BEM support Func
+@function selectorToString($selector) {
+  $selector: meta.inspect($selector);
+  $selector: string.slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}
+
+// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  // @debug $name;
+  @return $name;
+}
+
+@function roundColor($color) {
+  $r: math.round(color.channel($color, 'red'));
+  $g: math.round(color.channel($color, 'green'));
+  $b: math.round(color.channel($color, 'blue'));
+  $a: color.channel($color, 'alpha');
+
+  @return rgba($r, $g, $b, $a);
+}

package/theme-chalk/mixins/mixins.scss

@@ -1,240 +1,237 @@
-@use 'function' as *;
-@use '../common/var' as *;
-// forward mixins
-@forward 'config';
-@forward 'function';
-@forward '_var';
-@use 'config' as *;
-@use 'sass:string';
-@use 'sass:map';
-
-$B: null;
-$E: null;
-
-// Break-points
-@mixin res($key, $map: $breakpoints) {
-  // loop breakpoint Map, return if present
-  @if map.has-key($map, $key) {
-    @media only screen and #{string.unquote(map.get($map, $key))} {
-      @content;
-    }
-  } @else {
-    @warn "Undefined points: `#{$map}`";
-  }
-}
-
-// Scrollbar
-@mixin scroll-bar {
-  $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
-  $scrollbar-track-background: getCssVar('fill-color', 'blank');
-
-  &::-webkit-scrollbar {
-    z-index: 11;
-    width: 6px;
-
-    &:horizontal {
-      height: 6px;
-    }
-
-    &-thumb {
-      border-radius: 5px;
-      width: 6px;
-      background: $scrollbar-thumb-background;
-    }
-
-    &-corner {
-      background: $scrollbar-track-background;
-    }
-
-    &-track {
-      background: $scrollbar-track-background;
-
-      &-piece {
-        background: $scrollbar-track-background;
-        width: 6px;
-      }
-    }
-  }
-}
-
-// BEM
-@mixin b($block) {
-  $B: $namespace + $common-separator + $block !global;
-
-  .#{$B} {
-    @content;
-  }
-}
-
-@mixin e($element) {
-  $E: $element !global;
-  $selector: &;
-  $currentSelector: '';
-  @each $unit in $element {
-    $currentSelector: #{$currentSelector +
-      '.' +
-      $B +
-      $element-separator +
-      $unit +
-      ','};
-  }
-
-  @if hitAllSpecialNestRule($selector) {
-    @at-root {
-      #{$selector} {
-        #{$currentSelector} {
-          @content;
-        }
-      }
-    }
-  } @else {
-    @at-root {
-      #{$currentSelector} {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin m($modifier) {
-  $selector: &;
-  $currentSelector: '';
-  @each $unit in $modifier {
-    $currentSelector: #{$currentSelector +
-      $selector +
-      $modifier-separator +
-      $unit +
-      ','};
-  }
-
-  @at-root {
-    #{$currentSelector} {
-      @content;
-    }
-  }
-}
-
-@mixin configurable-m($modifier, $E-flag: false) {
-  $selector: &;
-  $interpolation: '';
-
-  @if $E-flag {
-    $interpolation: $element-separator + $E-flag;
-  }
-
-  @at-root {
-    #{$selector} {
-      .#{$B + $interpolation + $modifier-separator + $modifier} {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin spec-selector(
-  $specSelector: '',
-  $element: $E,
-  $modifier: false,
-  $block: $B
-) {
-  $modifierCombo: '';
-
-  @if $modifier {
-    $modifierCombo: $modifier-separator + $modifier;
-  }
-
-  @at-root {
-    #{&}#{$specSelector}.#{$block
-      + $element-separator
-      + $element
-      + $modifierCombo} {
-      @content;
-    }
-  }
-}
-
-@mixin meb($modifier: false, $element: $E, $block: $B) {
-  $selector: &;
-  $modifierCombo: '';
-
-  @if $modifier {
-    $modifierCombo: $modifier-separator + $modifier;
-  }
-
-  @at-root {
-    #{$selector} {
-      .#{$block + $element-separator + $element + $modifierCombo} {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin when($state) {
-  @at-root {
-    &.#{$state-prefix + $state} {
-      @content;
-    }
-  }
-}
-
-@mixin extend-rule($name) {
-  @extend #{'%shared-' + $name} !optional;
-}
-
-@mixin share-rule($name) {
-  $rule-name: '%shared-' + $name;
-
-  @at-root #{$rule-name} {
-    @content;
-  }
-}
-
-@mixin pseudo($pseudo) {
-  @at-root #{&}#{':#{$pseudo}'} {
-    @content;
-  }
-}
-
-@mixin picker-popper($background, $border, $box-shadow) {
-  &.#{$namespace}-popper {
-    background: $background;
-    border: $border;
-    box-shadow: $box-shadow;
-
-    .#{$namespace}-popper__arrow {
-      &::before {
-        border: $border;
-      }
-    }
-
-    @each $placement,
-      $adjacency
-        in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
-    {
-      &[data-popper-placement^='#{$placement}'] {
-        .#{$namespace}-popper__arrow::before {
-          border-#{$placement}-color: transparent;
-          border-#{$adjacency}-color: transparent;
-        }
-      }
-    }
-  }
-}
-
-// dark
-@mixin dark($block) {
-  html.dark {
-    @include b($block) {
-      @content;
-    }
-  }
-}
-
-@mixin inset-input-border($color, $important: false) {
-  @if $important == true {
-    box-shadow: 0 0 0 1px $color inset !important;
-  } @else {
-    box-shadow: 0 0 0 1px $color inset;
-  }
-}
+@use 'function' as *;
+@use '../common/var' as *;
+// forward mixins
+@forward 'config';
+@forward 'function';
+@forward '_var';
+@use 'config' as *;
+@use 'sass:string';
+@use 'sass:map';
+
+$B: null;
+$E: null;
+
+// Break-points
+@mixin res($key, $map: $breakpoints) {
+    // loop breakpoint Map, return if present
+    @if map.has-key($map, $key) {
+        @media only screen and #{string.unquote(map.get($map, $key))} {
+            @content;
+        }
+    } @else {
+        @warn "Undefined points: `#{$map}`";
+    }
+}
+
+// Scrollbar
+@mixin scroll-bar {
+    $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
+    $scrollbar-track-background: getCssVar('fill-color', 'blank');
+
+    &::-webkit-scrollbar {
+        z-index: 11;
+        width: 6px;
+
+        &:horizontal {
+            height: 6px;
+        }
+
+        &-thumb {
+            border-radius: 5px;
+            width: 6px;
+            background: $scrollbar-thumb-background;
+        }
+
+        &-corner {
+            background: $scrollbar-track-background;
+        }
+
+        &-track {
+            background: $scrollbar-track-background;
+
+            &-piece {
+                background: $scrollbar-track-background;
+                width: 6px;
+            }
+        }
+    }
+}
+
+// BEM
+@mixin b($block) {
+    $B: $namespace + $common-separator + $block !global;
+
+    .#{$B} {
+        @content;
+    }
+}
+
+@mixin e($element) {
+    $E: $element !global;
+    $selector: &;
+    $currentSelector: '';
+    @each $unit in $element {
+        $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
+    }
+
+    @if hitAllSpecialNestRule($selector) {
+        @at-root {
+            #{$selector} {
+                #{$currentSelector} {
+                    @content;
+                }
+            }
+        }
+    } @else {
+        @at-root {
+            #{$currentSelector} {
+                @content;
+            }
+        }
+    }
+}
+
+@mixin m($modifier) {
+    $selector: &;
+    $currentSelector: '';
+    @each $unit in $modifier {
+        $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};
+    }
+
+    @at-root {
+        #{$currentSelector} {
+            @content;
+        }
+    }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+    $selector: &;
+    $interpolation: '';
+
+    @if $E-flag {
+        $interpolation: $element-separator + $E-flag;
+    }
+
+    @at-root {
+        #{$selector} {
+            .#{$B + $interpolation + $modifier-separator + $modifier} {
+                @content;
+            }
+        }
+    }
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+    $modifierCombo: '';
+
+    @if $modifier {
+        $modifierCombo: $modifier-separator + $modifier;
+    }
+
+    @at-root {
+        #{&}#{$specSelector}.#{$block + $element-separator + $element + $modifierCombo} {
+            @content;
+        }
+    }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+    $selector: &;
+    $modifierCombo: '';
+
+    @if $modifier {
+        $modifierCombo: $modifier-separator + $modifier;
+    }
+
+    @at-root {
+        #{$selector} {
+            .#{$block + $element-separator + $element + $modifierCombo} {
+                @content;
+            }
+        }
+    }
+}
+
+@mixin when($state) {
+    @at-root {
+        &.#{$state-prefix + $state} {
+            @content;
+        }
+    }
+}
+
+@mixin extend-rule($name) {
+    @extend #{'%shared-' + $name} !optional;
+}
+
+@mixin share-rule($name) {
+    $rule-name: '%shared-' + $name;
+
+    @at-root #{$rule-name} {
+        @content;
+    }
+}
+
+@mixin pseudo($pseudo) {
+    @at-root #{&}#{':#{$pseudo}'} {
+        @content;
+    }
+}
+
+@mixin picker-popper($background, $border, $box-shadow) {
+    &.#{$namespace}-popper {
+        background: $background;
+        border: $border;
+        box-shadow: $box-shadow;
+
+        .#{$namespace}-popper__arrow {
+            &::before {
+                border: $border;
+            }
+        }
+
+        @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
+            &[data-popper-placement^='#{$placement}'] {
+                .#{$namespace}-popper__arrow::before {
+                    border-#{$placement}-color: transparent;
+                    border-#{$adjacency}-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+// dark
+@mixin dark($block) {
+    html.dark {
+        @include b($block) {
+            @content;
+        }
+    }
+}
+
+@mixin inset-input-border($color, $important: false) {
+    @if $important == true {
+        box-shadow: 0 0 0 1px $color inset !important;
+    } @else {
+        box-shadow: 0 0 0 1px $color inset;
+    }
+}
+
+@mixin reset-button($outline-offset: 2px) {
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+    appearance: none;
+    border: none;
+    border-radius: getCssVar('border-radius', 'base');
+    outline: none;
+    transition: transform getCssVar('transition-duration-fast') ease-in-out;
+
+    &:focus-visible {
+        outline: 2px solid getCssVar('color-primary');
+        outline-offset: $outline-offset;
+    }
+}