2
This commit is contained in:
165
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/_button.scss
generated
vendored
Normal file
165
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/_button.scss
generated
vendored
Normal file
@@ -0,0 +1,165 @@
|
||||
@use '../mixins/var' as *;
|
||||
@use '../mixins/function' as *;
|
||||
@use '../common/var' as *;
|
||||
|
||||
@mixin button-plain($type) {
|
||||
$button-color-types: (
|
||||
'': (
|
||||
'text-color': (
|
||||
'color',
|
||||
$type,
|
||||
),
|
||||
'bg-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-9',
|
||||
),
|
||||
'border-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-5',
|
||||
),
|
||||
),
|
||||
'hover': (
|
||||
'text-color': (
|
||||
'color',
|
||||
'white',
|
||||
),
|
||||
'bg-color': (
|
||||
'color',
|
||||
$type,
|
||||
),
|
||||
'border-color': (
|
||||
'color',
|
||||
$type,
|
||||
),
|
||||
),
|
||||
'active': (
|
||||
'text-color': (
|
||||
'color',
|
||||
'white',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@each $type, $typeMap in $button-color-types {
|
||||
@each $typeColor, $list in $typeMap {
|
||||
@include css-var-from-global(('button', $type, $typeColor), $list);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: getCssVar('color', $type, 'light-5');
|
||||
background-color: getCssVar('color', $type, 'light-9');
|
||||
border-color: getCssVar('color', $type, 'light-8');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-variant($type) {
|
||||
$button-color-types: (
|
||||
'': (
|
||||
'text-color': (
|
||||
'color',
|
||||
'white',
|
||||
),
|
||||
'bg-color': (
|
||||
'color',
|
||||
$type,
|
||||
),
|
||||
'border-color': (
|
||||
'color',
|
||||
$type,
|
||||
),
|
||||
'outline-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-5',
|
||||
),
|
||||
'active-color': (
|
||||
'color',
|
||||
$type,
|
||||
'dark-2',
|
||||
),
|
||||
),
|
||||
'hover': (
|
||||
'text-color': (
|
||||
'color',
|
||||
'white',
|
||||
),
|
||||
'link-text-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-5',
|
||||
),
|
||||
'bg-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-3',
|
||||
),
|
||||
'border-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-3',
|
||||
),
|
||||
),
|
||||
'active': (
|
||||
'bg-color': (
|
||||
'color',
|
||||
$type,
|
||||
'dark-2',
|
||||
),
|
||||
'border-color': (
|
||||
'color',
|
||||
$type,
|
||||
'dark-2',
|
||||
),
|
||||
),
|
||||
'disabled': (
|
||||
'text-color': (
|
||||
'color',
|
||||
'white',
|
||||
),
|
||||
'bg-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-5',
|
||||
),
|
||||
'border-color': (
|
||||
'color',
|
||||
$type,
|
||||
'light-5',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@each $type, $typeMap in $button-color-types {
|
||||
@each $typeColor, $list in $typeMap {
|
||||
@include css-var-from-global(('button', $type, $typeColor), $list);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-plain,
|
||||
&.is-text,
|
||||
&.is-link {
|
||||
@include button-plain($type);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-size(
|
||||
$padding-vertical,
|
||||
$padding-horizontal,
|
||||
$font-size,
|
||||
$border-radius
|
||||
) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
border-radius: $border-radius;
|
||||
&.is-round {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
33
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/_col.scss
generated
vendored
Normal file
33
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/_col.scss
generated
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
@use 'sass:math';
|
||||
|
||||
@use '../common/var' as *;
|
||||
@use './mixins' as *;
|
||||
|
||||
@mixin col-size($size) {
|
||||
@include res($size) {
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-#{$size}-#{$i} {
|
||||
display: if($i == 0, none, block);
|
||||
max-width: (math.div(1, 24) * $i * 100) * 1%;
|
||||
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
|
||||
@include when(guttered) {
|
||||
display: if($i == 0, none, block);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-col-#{$size}-offset-#{$i} {
|
||||
margin-left: (math.div(1, 24) * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-#{$size}-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (math.div(1, 24) * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-#{$size}-push-#{$i} {
|
||||
position: relative;
|
||||
left: (math.div(1, 24) * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
67
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/_var.scss
generated
vendored
Normal file
67
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/_var.scss
generated
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:color';
|
||||
|
||||
@use 'config';
|
||||
@use 'function' as *;
|
||||
@use '../common/var' as *;
|
||||
|
||||
// set css var value, because we need translate value to string
|
||||
// for example:
|
||||
// @include set-css-var-value(('color', 'primary'), red);
|
||||
// --el-color-primary: red;
|
||||
@mixin set-css-var-value($name, $value) {
|
||||
#{joinVarName($name)}: #{$value};
|
||||
}
|
||||
|
||||
// @include set-css-var-type('color', 'primary', $map);
|
||||
// --el-color-primary: #{map.get($map, 'primary')};
|
||||
@mixin set-css-var-type($name, $type, $variables) {
|
||||
#{getCssVarName($name, $type)}: #{map.get($variables, $type)};
|
||||
}
|
||||
|
||||
@mixin set-css-color-type($colors, $type) {
|
||||
@include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
|
||||
|
||||
@each $i in (3, 5, 7, 8, 9) {
|
||||
@include set-css-var-value(
|
||||
('color', $type, 'light', $i),
|
||||
map.get($colors, $type, 'light-#{$i}')
|
||||
);
|
||||
}
|
||||
|
||||
@include set-css-var-value(
|
||||
('color', $type, 'dark-2'),
|
||||
map.get($colors, $type, 'dark-2')
|
||||
);
|
||||
}
|
||||
|
||||
// set all css var for component by map
|
||||
@mixin set-component-css-var($name, $variables) {
|
||||
@each $attribute, $value in $variables {
|
||||
@if $attribute == 'default' {
|
||||
#{getCssVarName($name)}: #{$value};
|
||||
} @else {
|
||||
#{getCssVarName($name, $attribute)}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin set-css-color-rgb($type) {
|
||||
$color: map.get($colors, $type, 'base');
|
||||
@include set-css-var-value(
|
||||
('color', $type, 'rgb'),
|
||||
#{color.channel($color, 'red'),
|
||||
color.channel($color, 'green'),
|
||||
color.channel($color, 'blue')}
|
||||
);
|
||||
}
|
||||
|
||||
// generate css var from existing css var
|
||||
// for example:
|
||||
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
|
||||
// --el-button-text-color: var(--el-color-#{$type});
|
||||
@mixin css-var-from-global($var, $gVar) {
|
||||
$varName: joinVarName($var);
|
||||
$gVarName: joinVarName($gVar);
|
||||
#{$varName}: var(#{$gVarName});
|
||||
}
|
||||
5
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/config.scss
generated
vendored
Normal file
5
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/config.scss
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
$namespace: 'el' !default;
|
||||
$common-separator: '-' !default;
|
||||
$element-separator: '__' !default;
|
||||
$modifier-separator: '--' !default;
|
||||
$state-prefix: 'is-' !default;
|
||||
99
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/function.scss
generated
vendored
Normal file
99
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/function.scss
generated
vendored
Normal file
@@ -0,0 +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);
|
||||
}
|
||||
240
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/mixins.scss
generated
vendored
Normal file
240
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/mixins.scss
generated
vendored
Normal file
@@ -0,0 +1,240 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
39
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/utils.scss
generated
vendored
Normal file
39
normal-admin/node_modules/element-plus/theme-chalk/src/mixins/utils.scss
generated
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
@mixin utils-clearfix {
|
||||
$selector: &;
|
||||
|
||||
@at-root {
|
||||
#{$selector}::before,
|
||||
#{$selector}::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
#{$selector}::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin utils-vertical-center {
|
||||
$selector: &;
|
||||
|
||||
@at-root {
|
||||
#{$selector}::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin utils-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin utils-inline-flex-center {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user