mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-29 17:58:08 +08:00
chore(style): lint scss by prettier (#2515)
This commit is contained in:
云游君
GitHub
parent
a7a8f29a19
commit
37d3d778c1
@ -5,4 +5,12 @@ module.exports = {
|
||||
printWidth: 80,
|
||||
tabWidth: 2,
|
||||
endOfLine: 'auto',
|
||||
overrides: [
|
||||
{
|
||||
files: '*.scss',
|
||||
options: {
|
||||
parser: 'scss',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
@ -22,6 +22,8 @@
|
||||
"build:theme": "rimraf packages/theme-chalk/lib && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk && rimraf packages/theme-chalk/lib",
|
||||
"build:helper": "node build/build-helper.js",
|
||||
"build:indices": "node build/build-indices.js",
|
||||
"format": "yarn format:scss",
|
||||
"format:scss": "prettier --write **/*.scss",
|
||||
"lint": "eslint ./packages --ext .vue,.js,.ts",
|
||||
"lint-fix": "eslint --fix ./packages --ext .vue,.js,.ts",
|
||||
"website-build": "rimraf website-dist && cross-env NODE_ENV=production webpack --config ./website/webpack.config.js",
|
||||
@ -122,7 +124,8 @@
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,ts,vue}": "eslint --fix"
|
||||
"*.{js,ts,vue}": "eslint --fix",
|
||||
"*.{scss}": "prettier --write"
|
||||
},
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "mixins/mixins";
|
||||
@import 'mixins/mixins';
|
||||
|
||||
@include b(affix) {
|
||||
@include m(fixed) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(alert) {
|
||||
width: 100%;
|
||||
@ -13,7 +13,7 @@
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity .2s;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
@include when(light) {
|
||||
.#{$namespace}-alert__closebtn {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "mixins/mixins";
|
||||
@import 'mixins/mixins';
|
||||
|
||||
@include b(aside) {
|
||||
overflow: auto;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import "./input.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./popper";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
@import './input.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './popper';
|
||||
|
||||
@include b(autocomplete) {
|
||||
position: relative;
|
||||
@ -13,7 +13,7 @@
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--box-shadow-light,
|
||||
$--box-shadow-light
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(avatar) {
|
||||
display: inline-block;
|
||||
@ -13,7 +13,7 @@
|
||||
line-height: $--avatar-large-size;
|
||||
font-size: $--avatar-text-font-size;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(backtop) {
|
||||
position: fixed;
|
||||
@ -12,11 +12,11 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
|
||||
&:hover {
|
||||
background-color: $--backtop-hover-background-color
|
||||
background-color: $--backtop-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "sass:math";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(badge) {
|
||||
position: relative;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@import "common/transition.scss";
|
||||
@import "icon.scss";
|
||||
@import "var.scss";
|
||||
@import 'common/transition.scss';
|
||||
@import 'icon.scss';
|
||||
@import 'var.scss';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(breadcrumb) {
|
||||
font-size: 14px;
|
||||
@ -12,7 +12,7 @@
|
||||
font-weight: bold;
|
||||
color: $--color-text-placeholder;
|
||||
|
||||
&[class*=icon] {
|
||||
&[class*='icon'] {
|
||||
margin: 0 6px;
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -24,7 +24,8 @@
|
||||
@include e(inner) {
|
||||
color: $--color-text-regular;
|
||||
|
||||
&.is-link, & a {
|
||||
&.is-link,
|
||||
& a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: $--color-transition-base;
|
||||
@ -40,7 +41,8 @@
|
||||
&:last-child {
|
||||
.#{$namespace}-breadcrumb__inner,
|
||||
.#{$namespace}-breadcrumb__inner a {
|
||||
&, &:hover {
|
||||
&,
|
||||
&:hover {
|
||||
font-weight: normal;
|
||||
color: $--color-text-regular;
|
||||
cursor: text;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@charset "UTF-8";
|
||||
@use "sass:map";
|
||||
@import "common/var";
|
||||
@import "mixins/button";
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import 'common/var';
|
||||
@import 'mixins/button';
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
|
||||
@include b(button) {
|
||||
display: inline-block;
|
||||
@ -20,14 +20,19 @@
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
transition: 0.1s;
|
||||
font-weight: $--button-font-weight;
|
||||
@include utils-user-select(none);
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@include button-size(map.get($--button-padding-vertical, 'default'), map.get($--button-padding-horizontal, 'default'), map.get($--button-font-size, 'default'), map.get($--button-border-radius, 'default'));
|
||||
@include button-size(
|
||||
map.get($--button-padding-vertical, 'default'),
|
||||
map.get($--button-padding-horizontal, 'default'),
|
||||
map.get($--button-font-size, 'default'),
|
||||
map.get($--button-border-radius, 'default')
|
||||
);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -37,8 +42,16 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
border-color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -46,7 +59,7 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] {
|
||||
& [class*='#{$namespace}-icon-'] {
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@ -62,15 +75,31 @@
|
||||
|
||||
&:active {
|
||||
background: $--color-white;
|
||||
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
border-color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
border-color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
@ -112,7 +141,7 @@
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: inherit;
|
||||
background-color: rgba(255,255,255,.35);
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
}
|
||||
@include when(round) {
|
||||
@ -124,26 +153,51 @@
|
||||
padding: map.get($--button-padding-vertical, 'default');
|
||||
}
|
||||
@include m(primary) {
|
||||
@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
|
||||
@include button-variant(
|
||||
$--button-primary-font-color,
|
||||
$--button-primary-background-color,
|
||||
$--button-primary-border-color
|
||||
);
|
||||
}
|
||||
@include m(success) {
|
||||
@include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
|
||||
@include button-variant(
|
||||
$--button-success-font-color,
|
||||
$--button-success-background-color,
|
||||
$--button-success-border-color
|
||||
);
|
||||
}
|
||||
@include m(warning) {
|
||||
@include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
|
||||
@include button-variant(
|
||||
$--button-warning-font-color,
|
||||
$--button-warning-background-color,
|
||||
$--button-warning-border-color
|
||||
);
|
||||
}
|
||||
@include m(danger) {
|
||||
@include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
|
||||
@include button-variant(
|
||||
$--button-danger-font-color,
|
||||
$--button-danger-background-color,
|
||||
$--button-danger-border-color
|
||||
);
|
||||
}
|
||||
@include m(info) {
|
||||
@include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
|
||||
@include button-variant(
|
||||
$--button-info-font-color,
|
||||
$--button-info-background-color,
|
||||
$--button-info-border-color
|
||||
);
|
||||
}
|
||||
|
||||
@each $size in (medium, small, mini) {
|
||||
@include m($size) {
|
||||
min-height: map.get($--input-height, $size);
|
||||
|
||||
@include button-size(map.get($--button-padding-vertical, $size), map.get($--button-padding-horizontal, $size), map.get($--button-font-size, $size), map.get($--button-border-radius, $size));
|
||||
@include button-size(
|
||||
map.get($--button-padding-vertical, $size),
|
||||
map.get($--button-padding-horizontal, $size),
|
||||
map.get($--button-font-size, $size),
|
||||
map.get($--button-border-radius, $size)
|
||||
);
|
||||
@include when(circle) {
|
||||
padding: map.get($--button-padding-horizontal, $size);
|
||||
}
|
||||
@ -159,12 +213,20 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
|
||||
color: mix(
|
||||
$--color-white,
|
||||
$--color-primary,
|
||||
$--button-hover-tint-percent
|
||||
);
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "button";
|
||||
@import "button-group";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'button';
|
||||
@import 'button-group';
|
||||
|
||||
@include b(calendar) {
|
||||
background-color:#fff;
|
||||
background-color: #fff;
|
||||
|
||||
@include e(header) {
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(card) {
|
||||
border-radius: $--card-border-radius;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(carousel) {
|
||||
@include e(item) {
|
||||
@ -17,12 +17,12 @@
|
||||
}
|
||||
|
||||
@include when(animating) {
|
||||
transition: transform .4s ease-in-out;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
@include m(card) {
|
||||
width: 50%;
|
||||
transition: transform .4s ease-in-out;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
&.is-in-stage {
|
||||
cursor: pointer;
|
||||
z-index: var(--el-index-normal);
|
||||
@ -45,6 +45,6 @@
|
||||
left: 0;
|
||||
background-color: $--color-white;
|
||||
opacity: 0.24;
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "sass:math";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(carousel) {
|
||||
position: relative;
|
||||
@ -27,7 +27,7 @@
|
||||
height: $--carousel-arrow-size;
|
||||
width: $--carousel-arrow-size;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
background-color: $--carousel-arrow-background;
|
||||
color: $--color-white;
|
||||
@ -75,7 +75,8 @@
|
||||
}
|
||||
|
||||
@include m(outside) {
|
||||
bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
|
||||
bottom: #{$--carousel-indicator-height +
|
||||
$--carousel-indicator-padding-vertical * 2};
|
||||
text-align: center;
|
||||
position: static;
|
||||
transform: none;
|
||||
@ -117,11 +118,13 @@
|
||||
|
||||
@include m(horizontal) {
|
||||
display: inline-block;
|
||||
padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
|
||||
padding: $--carousel-indicator-padding-vertical
|
||||
$--carousel-indicator-padding-horizontal;
|
||||
}
|
||||
|
||||
@include m(vertical) {
|
||||
padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
|
||||
padding: $--carousel-indicator-padding-horizontal
|
||||
$--carousel-indicator-padding-vertical;
|
||||
.#{$namespace}-carousel__button {
|
||||
width: $--carousel-indicator-height;
|
||||
height: #{math.div($--carousel-indicator-width, 2)};
|
||||
@ -146,7 +149,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./checkbox";
|
||||
@import "./radio";
|
||||
@import "./scrollbar";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './checkbox';
|
||||
@import './radio';
|
||||
@import './scrollbar';
|
||||
|
||||
@include b(cascader-panel) {
|
||||
display: flex;
|
||||
@ -87,7 +87,8 @@
|
||||
&:not(.is-disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $--cascader-node-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./input";
|
||||
@import "./popper";
|
||||
@import "./tag";
|
||||
@import "./cascader-panel";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './input';
|
||||
@import './popper';
|
||||
@import './tag';
|
||||
@import './cascader-panel';
|
||||
|
||||
@include b(cascader) {
|
||||
display: inline-block;
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-arrow-down {
|
||||
transition: transform .3s;
|
||||
transition: transform 0.3s;
|
||||
font-size: 14px;
|
||||
|
||||
@include when(reverse) {
|
||||
@ -73,7 +73,7 @@
|
||||
@include picker-popper(
|
||||
$--cascader-menu-fill,
|
||||
$--cascader-menu-border,
|
||||
$--cascader-menu-shadow,
|
||||
$--cascader-menu-shadow
|
||||
);
|
||||
}
|
||||
|
||||
@ -142,7 +142,8 @@
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $--cascader-node-background-hover;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(check-tag) {
|
||||
background-color: $--background-color-base;
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
background-color: #DEEDFC;
|
||||
background-color: #deedfc;
|
||||
color: map.get($--colors, 'primary', 'light-1');
|
||||
&:hover {
|
||||
background-color: map.get($--colors, 'primary', 'light-7');
|
||||
|
||||
@ -87,7 +87,6 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@each $size in (medium, small, mini) {
|
||||
&.#{$namespace}-checkbox--#{size} {
|
||||
padding: var(--el-checkbox-bordered-#{$size}-padding);
|
||||
@ -106,8 +105,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.#{$namespace}-checkbox--small, &.#{$namespace}-checkbox--mini {
|
||||
&.#{$namespace}-checkbox--small,
|
||||
&.#{$namespace}-checkbox--mini {
|
||||
.#{$namespace}-checkbox__inner {
|
||||
&::after {
|
||||
height: 6px;
|
||||
@ -294,7 +293,12 @@
|
||||
transition: $--all-transition;
|
||||
@include utils-user-select(none);
|
||||
|
||||
@include button-size(map.get($--button-padding-vertical, 'default'), map.get($--button-padding-horizontal, 'default'), map.get($--button-font-size, 'default'), 0);
|
||||
@include button-size(
|
||||
map.get($--button-padding-vertical, 'default'),
|
||||
map.get($--button-padding-horizontal, 'default'),
|
||||
map.get($--button-font-size, 'default'),
|
||||
0
|
||||
);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "common/transition";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'common/transition';
|
||||
|
||||
@include b(collapse) {
|
||||
border-top: 1px solid $--collapse-border-color;
|
||||
@ -24,17 +24,17 @@
|
||||
border-bottom: 1px solid $--collapse-border-color;
|
||||
font-size: $--collapse-header-font-size;
|
||||
font-weight: 500;
|
||||
transition: border-bottom-color .3s;
|
||||
transition: border-bottom-color 0.3s;
|
||||
outline: none;
|
||||
@include e(arrow) {
|
||||
margin: 0 8px 0 auto;
|
||||
transition: transform .3s;
|
||||
transition: transform 0.3s;
|
||||
font-weight: 300;
|
||||
@include when(active) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&.focusing:focus:not(:hover){
|
||||
&.focusing:focus:not(:hover) {
|
||||
color: $--color-primary;
|
||||
}
|
||||
@include when(active) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(color-predefine) {
|
||||
display: flex;
|
||||
@ -52,10 +52,15 @@
|
||||
@include e(bar) {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to right, #f00 0%,
|
||||
#ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%,
|
||||
#f0f 83%, #f00 100%);
|
||||
to right,
|
||||
#f00 0%,
|
||||
#ff0 17%,
|
||||
#0f0 33%,
|
||||
#0ff 50%,
|
||||
#00f 67%,
|
||||
#f0f 83%,
|
||||
#f00 100%
|
||||
);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -81,10 +86,15 @@
|
||||
|
||||
.#{$namespace}-color-hue-slider__bar {
|
||||
background: linear-gradient(
|
||||
to bottom, #f00 0%,
|
||||
#ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%,
|
||||
#f0f 83%, #f00 100%);
|
||||
to bottom,
|
||||
#f00 0%,
|
||||
#ff0 17%,
|
||||
#0f0 33%,
|
||||
#0ff 50%,
|
||||
#00f 67%,
|
||||
#f0f 83%,
|
||||
#f00 100%
|
||||
);
|
||||
}
|
||||
|
||||
.#{$namespace}-color-hue-slider__thumb {
|
||||
@ -110,11 +120,11 @@
|
||||
}
|
||||
|
||||
@include e('white') {
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
@include e('black') {
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
@include e(cursor) {
|
||||
@ -124,7 +134,8 @@
|
||||
cursor: head;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
|
||||
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
|
||||
0 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
@ -141,8 +152,10 @@
|
||||
@include e(bar) {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to right, rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%);
|
||||
to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -167,8 +180,10 @@
|
||||
|
||||
.#{$namespace}-color-alpha-slider__bar {
|
||||
background: linear-gradient(
|
||||
to bottom, rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%);
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.#{$namespace}-color-alpha-slider__thumb {
|
||||
@ -187,7 +202,7 @@
|
||||
margin-bottom: 6px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
@ -312,7 +327,7 @@
|
||||
left: 1px;
|
||||
z-index: 1;
|
||||
cursor: not-allowed;
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@include e(trigger) {
|
||||
@ -380,7 +395,7 @@
|
||||
background-color: $--color-white;
|
||||
border-radius: $--border-radius-base;
|
||||
box-shadow: $--dropdown-menu-box-shadow;
|
||||
&.#{$namespace}-popper{
|
||||
&.#{$namespace}-popper {
|
||||
border: 1px solid $--border-color-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import "./var.scss";
|
||||
@import "../mixins/mixins";
|
||||
@import './var.scss';
|
||||
@import '../mixins/mixins';
|
||||
|
||||
.v-modal-enter {
|
||||
animation: v-modal-in .2s ease;
|
||||
animation: v-modal-in 0.2s ease;
|
||||
}
|
||||
|
||||
.v-modal-leave {
|
||||
animation: v-modal-out .2s ease forwards;
|
||||
animation: v-modal-out 0.2s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes v-modal-in {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import '../mixins/config';
|
||||
@import "var";
|
||||
@import 'var';
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
.#{$namespace}-fade-in-enter-active,
|
||||
.#{$namespace}-fade-in-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
.#{$namespace}-fade-in-enter-from,
|
||||
.#{$namespace}-fade-in-leave-active {
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
.#{$namespace}-zoom-in-center-enter-active,
|
||||
.#{$namespace}-zoom-in-center-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
.#{$namespace}-zoom-in-center-enter-from,
|
||||
.#{$namespace}-zoom-in-center-leave-active {
|
||||
@ -46,7 +46,7 @@
|
||||
transition: $--md-fade-transition;
|
||||
transform-origin: center top;
|
||||
|
||||
&[data-popper-placement^="top"] {
|
||||
&[data-popper-placement^='top'] {
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
}
|
||||
@ -79,25 +79,28 @@
|
||||
.#{$namespace}-zoom-in-left-enter-from,
|
||||
.#{$namespace}-zoom-in-left-leave-active {
|
||||
opacity: 0;
|
||||
transform: scale(.45, .45);
|
||||
transform: scale(0.45, 0.45);
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
|
||||
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
|
||||
0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
|
||||
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
|
||||
0.3s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.#{$namespace}-list-enter-active,
|
||||
.#{$namespace}-list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
|
||||
.#{$namespace}-list-enter-from,
|
||||
.#{$namespace}-list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.#{$namespace}-opacity-transition {
|
||||
transition: opacity .3s cubic-bezier(.55,0,.1,1);
|
||||
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@use "sass:math";
|
||||
@use "sass:map";
|
||||
|
||||
@import "../mixins/config";
|
||||
@import '../mixins/config';
|
||||
|
||||
// Special comment for theme configurator
|
||||
// type|skipAutoTranslation|Category|Order
|
||||
@ -10,35 +10,37 @@
|
||||
|
||||
/* Transition
|
||||
-------------------------- */
|
||||
$--all-transition: all .3s cubic-bezier(.645, .045, .355, 1) !default;
|
||||
$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
|
||||
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
|
||||
$--fade-linear-transition: opacity 200ms linear !default;
|
||||
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
|
||||
$--border-transition-base: border-color .2s cubic-bezier(.645, .045, .355, 1) !default;
|
||||
$--color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1) !default;
|
||||
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
|
||||
$--border-transition-base: border-color 0.2s
|
||||
cubic-bezier(0.645, 0.045, 0.355, 1) !default;
|
||||
$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
|
||||
|
||||
/* Color
|
||||
-------------------------- */
|
||||
$--colors: () !default;
|
||||
$--colors: map.deep-merge(
|
||||
(
|
||||
'white': #FFFFFF,
|
||||
'white': #ffffff,
|
||||
'black': #000000,
|
||||
'primary': (
|
||||
'base': #409EFF
|
||||
'base': #409eff,
|
||||
),
|
||||
'success': (
|
||||
'base': #67C23A
|
||||
'base': #67c23a,
|
||||
),
|
||||
'warning': (
|
||||
'base': #E6A23C
|
||||
'base': #e6a23c,
|
||||
),
|
||||
'danger': (
|
||||
'base': #F56C6C
|
||||
'base': #f56c6c,
|
||||
),
|
||||
'info': (
|
||||
'base': #909399
|
||||
)
|
||||
'base': #909399,
|
||||
),
|
||||
),
|
||||
$--colors
|
||||
);
|
||||
@ -53,11 +55,15 @@ $--color-info: map.get($--colors, 'info', 'base');
|
||||
|
||||
// https://sass-lang.com/documentation/values/maps#immutability
|
||||
@mixin set-color-primary-light($color, $number) {
|
||||
$--colors: map.deep-merge($--colors, (
|
||||
'primary': (
|
||||
'light-#{$number}': mix($--color-white, $color, math.percentage(math.div($number, 10)))
|
||||
$--colors: map.deep-merge(
|
||||
$--colors,
|
||||
(
|
||||
'primary': (
|
||||
'light-#{$number}':
|
||||
mix($--color-white, $color, math.percentage(math.div($number, 10))),
|
||||
),
|
||||
)
|
||||
)) !global;
|
||||
) !global;
|
||||
}
|
||||
|
||||
// $--color-primary-light-i
|
||||
@ -78,12 +84,15 @@ $--color-info: map.get($--colors, 'info', 'base');
|
||||
// $--colors.success.light: mix($--color-white, $--color-success, 80%) !default;
|
||||
// $--colors.success.lighter: mix($--color-white, $--color-success, 90%) !default;
|
||||
@mixin set-color-type-light($type) {
|
||||
$--colors: map.deep-merge($--colors, (
|
||||
$type: (
|
||||
'light': mix($--color-white, map.get($--colors, $type, 'base'), 80%),
|
||||
'lighter': mix($--color-white, map.get($--colors, $type, 'base'), 90%),
|
||||
$--colors: map.deep-merge(
|
||||
$--colors,
|
||||
(
|
||||
$type: (
|
||||
'light': mix($--color-white, map.get($--colors, $type, 'base'), 80%),
|
||||
'lighter': mix($--color-white, map.get($--colors, $type, 'base'), 90%),
|
||||
),
|
||||
)
|
||||
)) !global;
|
||||
) !global;
|
||||
}
|
||||
|
||||
@each $type in (success, warning, danger, info) {
|
||||
@ -97,19 +106,19 @@ $--color-text-regular: #606266 !default;
|
||||
/// color|1|Font Color|2
|
||||
$--color-text-secondary: #909399 !default;
|
||||
/// color|1|Font Color|2
|
||||
$--color-text-placeholder: #C0C4CC !default;
|
||||
$--color-text-placeholder: #c0c4cc !default;
|
||||
/// color|1|Border Color|3
|
||||
$--border-color-base: #DCDFE6 !default;
|
||||
$--border-color-base: #dcdfe6 !default;
|
||||
/// color|1|Border Color|3
|
||||
$--border-color-light: #E4E7ED !default;
|
||||
$--border-color-light: #e4e7ed !default;
|
||||
/// color|1|Border Color|3
|
||||
$--border-color-lighter: #EBEEF5 !default;
|
||||
$--border-color-lighter: #ebeef5 !default;
|
||||
/// color|1|Border Color|3
|
||||
$--border-color-extra-light: #F2F6FC !default;
|
||||
$--border-color-extra-light: #f2f6fc !default;
|
||||
|
||||
// Background
|
||||
/// color|1|Background Color|4
|
||||
$--background-color-base: #F5F7FA !default;
|
||||
$--background-color-base: #f5f7fa !default;
|
||||
|
||||
/* Link
|
||||
-------------------------- */
|
||||
@ -131,12 +140,12 @@ $--border-radius-circle: 100% !default;
|
||||
|
||||
// Box-shadow
|
||||
/// boxShadow|1|Shadow|1
|
||||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
|
||||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
|
||||
/// boxShadow|1|Shadow|1
|
||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
|
||||
/* Svg
|
||||
--------------- */
|
||||
$--svg-monochrome-grey: #DCDDE0 !default;
|
||||
$--svg-monochrome-grey: #dcdde0 !default;
|
||||
|
||||
/* Fill
|
||||
-------------------------- */
|
||||
@ -220,20 +229,20 @@ $--radio-bordered-padding: (
|
||||
$--radio-bordered-input-height: (
|
||||
'medium': 14px,
|
||||
'small': 12px,
|
||||
'mini': 12px
|
||||
'mini': 12px,
|
||||
);
|
||||
|
||||
$--radio-bordered-input-width: (
|
||||
'medium': 14px,
|
||||
'small': 12px,
|
||||
'mini': 12px
|
||||
'mini': 12px,
|
||||
);
|
||||
|
||||
$--radio-bordered-height: (
|
||||
'default': 40px,
|
||||
'medium': 36px,
|
||||
'small': 32px,
|
||||
'mini': 28px
|
||||
'mini': 28px,
|
||||
);
|
||||
|
||||
/// color||Color|0
|
||||
@ -422,19 +431,19 @@ $--input-height: (
|
||||
'default': 40px,
|
||||
'medium': 36px,
|
||||
'small': 32px,
|
||||
'mini': 28px
|
||||
'mini': 28px,
|
||||
);
|
||||
|
||||
$--input-line-height: (
|
||||
'medium': 28px,
|
||||
'small': 24px,
|
||||
'mini': 20px
|
||||
'mini': 20px,
|
||||
);
|
||||
|
||||
$--input-number-width: (
|
||||
'medium': 200px,
|
||||
'small': 130px,
|
||||
'mini': 130px
|
||||
'mini': 130px,
|
||||
);
|
||||
|
||||
/* Cascader
|
||||
@ -469,21 +478,21 @@ $--button-border-radius: (
|
||||
'default': $--border-radius-base,
|
||||
'medium': $--border-radius-base,
|
||||
'small': #{$--border-radius-base - 1},
|
||||
'mini': #{$--border-radius-base - 1}
|
||||
'mini': #{$--border-radius-base - 1},
|
||||
);
|
||||
|
||||
$--button-padding-vertical: (
|
||||
'default': 12px,
|
||||
'medium': 10px,
|
||||
'small': 9px,
|
||||
'mini': 7px
|
||||
'mini': 7px,
|
||||
);
|
||||
|
||||
$--button-padding-horizontal: (
|
||||
'default': 20px,
|
||||
'medium': 20px,
|
||||
'small': 15px,
|
||||
'mini': 15px
|
||||
'mini': 15px,
|
||||
);
|
||||
|
||||
/// color||Color|0
|
||||
@ -534,7 +543,6 @@ $--button-info-background-color: $--color-info !default;
|
||||
$--button-hover-tint-percent: 20% !default;
|
||||
$--button-active-shade-percent: 10% !default;
|
||||
|
||||
|
||||
/* Switch
|
||||
-------------------------- */
|
||||
/// color||Color|0
|
||||
@ -575,10 +583,14 @@ $--table-font-color: $--color-text-regular !default;
|
||||
$--table-header-font-color: $--color-text-secondary !default;
|
||||
/// color||Color|0
|
||||
$--table-row-hover-background-color: $--background-color-base !default;
|
||||
$--table-current-row-background-color: map.get($--colors, 'primary', 'light-9') !default;
|
||||
$--table-current-row-background-color: map.get(
|
||||
$--colors,
|
||||
'primary',
|
||||
'light-9'
|
||||
) !default;
|
||||
/// color||Color|0
|
||||
$--table-header-background-color: $--color-white !default;
|
||||
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
|
||||
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
/* Pagination
|
||||
-------------------------- */
|
||||
@ -669,7 +681,11 @@ $--tree-expand-icon-color: $--color-text-placeholder !default;
|
||||
/* Dropdown
|
||||
-------------------------- */
|
||||
$--dropdown-menu-box-shadow: $--box-shadow-light !default;
|
||||
$--dropdown-menuItem-hover-fill: map.get($--colors, 'primary', 'light-9') !default;
|
||||
$--dropdown-menuItem-hover-fill: map.get(
|
||||
$--colors,
|
||||
'primary',
|
||||
'light-9'
|
||||
) !default;
|
||||
$--dropdown-menuItem-hover-color: $--link-color !default;
|
||||
$--dropdown-menu-index: 10 !default;
|
||||
|
||||
@ -760,8 +776,11 @@ $--loading-fullscreen-spinner-size: 50px !default;
|
||||
|
||||
/* Scrollbar
|
||||
--------------------------*/
|
||||
$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
|
||||
$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
|
||||
$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
|
||||
$--scrollbar-hover-background-color: rgba(
|
||||
$--color-text-secondary,
|
||||
0.5
|
||||
) !default;
|
||||
|
||||
/* Carousel
|
||||
--------------------------*/
|
||||
@ -870,7 +889,7 @@ $--link-info-font-color: $--color-info !default;
|
||||
/// border||Other|4
|
||||
$--calendar-border: $--table-border !default;
|
||||
/// color||Other|4
|
||||
$--calendar-selected-background-color: #F2F8FE !default;
|
||||
$--calendar-selected-background-color: #f2f8fe !default;
|
||||
$--calendar-cell-width: 85px !default;
|
||||
|
||||
/* Form
|
||||
@ -883,7 +902,7 @@ $--form-label-font-size: $--font-size-base !default;
|
||||
/// color||Color|0
|
||||
$--avatar-font-color: #fff !default;
|
||||
/// color||Color|0
|
||||
$--avatar-background-color: #C0C4CC !default;
|
||||
$--avatar-background-color: #c0c4cc !default;
|
||||
/// fontSize||Font Size|1
|
||||
$--avatar-text-font-size: 14px !default;
|
||||
/// fontSize||Font Size|1
|
||||
@ -935,23 +954,23 @@ $--lg: 1200px !default;
|
||||
$--xl: 1920px !default;
|
||||
|
||||
$--breakpoints: (
|
||||
'xs' : "(max-width: #{$--sm})",
|
||||
'sm' : "(min-width: #{$--sm})",
|
||||
'md' : "(min-width: #{$--md})",
|
||||
'lg' : "(min-width: #{$--lg})",
|
||||
'xl' : "(min-width: #{$--xl})"
|
||||
'xs': '(max-width: #{$--sm})',
|
||||
'sm': '(min-width: #{$--sm})',
|
||||
'md': '(min-width: #{$--md})',
|
||||
'lg': '(min-width: #{$--lg})',
|
||||
'xl': '(min-width: #{$--xl})',
|
||||
) !default;
|
||||
|
||||
$--breakpoints-spec: (
|
||||
'xs-only' : "(max-width: #{$--sm})",
|
||||
'sm-and-up' : "(min-width: #{$--sm})",
|
||||
'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md})",
|
||||
'sm-and-down': "(max-width: #{$--md})",
|
||||
'md-and-up' : "(min-width: #{$--md})",
|
||||
'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg})",
|
||||
'md-and-down': "(max-width: #{$--lg})",
|
||||
'lg-and-up' : "(min-width: #{$--lg})",
|
||||
'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl})",
|
||||
'lg-and-down': "(max-width: #{$--xl})",
|
||||
'xl-only' : "(min-width: #{$--xl})",
|
||||
'xs-only': '(max-width: #{$--sm})',
|
||||
'sm-and-up': '(min-width: #{$--sm})',
|
||||
'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md})',
|
||||
'sm-and-down': '(max-width: #{$--md})',
|
||||
'md-and-up': '(min-width: #{$--md})',
|
||||
'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg})',
|
||||
'md-and-down': '(max-width: #{$--lg})',
|
||||
'lg-and-up': '(min-width: #{$--lg})',
|
||||
'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl})',
|
||||
'lg-and-down': '(max-width: #{$--xl})',
|
||||
'xl-only': '(min-width: #{$--xl})',
|
||||
) !default;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "mixins/mixins";
|
||||
@import 'mixins/mixins';
|
||||
|
||||
@include b(container) {
|
||||
display: flex;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import "./date-picker/date-table.scss";
|
||||
@import "./date-picker/month-table.scss";
|
||||
@import "./date-picker/year-table.scss";
|
||||
@import "./date-picker/time-spinner.scss";
|
||||
@import "./date-picker/picker.scss";
|
||||
@import "./date-picker/date-picker.scss";
|
||||
@import "./date-picker/date-range-picker.scss";
|
||||
@import "./date-picker/time-range-picker.scss";
|
||||
@import "./date-picker/time-picker.scss";
|
||||
@import "./input.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./popper";
|
||||
@import './date-picker/date-table.scss';
|
||||
@import './date-picker/month-table.scss';
|
||||
@import './date-picker/year-table.scss';
|
||||
@import './date-picker/time-spinner.scss';
|
||||
@import './date-picker/picker.scss';
|
||||
@import './date-picker/date-picker.scss';
|
||||
@import './date-picker/date-range-picker.scss';
|
||||
@import './date-picker/time-range-picker.scss';
|
||||
@import './date-picker/time-picker.scss';
|
||||
@import './input.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './popper';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../common/var";
|
||||
@import "../mixins/mixins";
|
||||
@import "./picker-panel.scss";
|
||||
@import '../common/var';
|
||||
@import '../mixins/mixins';
|
||||
@import './picker-panel.scss';
|
||||
|
||||
@include b(date-picker) {
|
||||
width: 322px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(date-range-picker) {
|
||||
width: 646px;
|
||||
@ -25,11 +25,11 @@
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
|
||||
[class*=arrow-left] {
|
||||
[class*='arrow-left'] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[class*=arrow-right] {
|
||||
[class*='arrow-right'] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@ -51,7 +51,6 @@
|
||||
border-right: 1px solid $--datepicker-inner-border-color;
|
||||
}
|
||||
.#{$namespace}-date-range-picker__header {
|
||||
|
||||
div {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "../common/var";
|
||||
@import "../mixins/mixins";
|
||||
@import '../common/var';
|
||||
@import '../mixins/mixins';
|
||||
|
||||
@include b(date-table) {
|
||||
font-size: 12px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(month-table) {
|
||||
font-size: 12px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(picker-panel) {
|
||||
position: relative;
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
@include e((body, body-wrapper)) {
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
@ -103,7 +103,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel *[slot=sidebar],
|
||||
.#{$namespace}-picker-panel *[slot='sidebar'],
|
||||
.#{$namespace}-picker-panel__sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -116,7 +116,9 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
|
||||
.#{$namespace}-picker-panel
|
||||
*[slot='sidebar']
|
||||
+ .#{$namespace}-picker-panel__body,
|
||||
.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
|
||||
margin-left: 110px;
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "../mixins/mixins";
|
||||
@import "../common/var";
|
||||
@import "../common/transition";
|
||||
@import '../mixins/mixins';
|
||||
@import '../common/var';
|
||||
@import '../common/transition';
|
||||
|
||||
@include b(picker) {
|
||||
@include e(popper) {
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--datepicker-border-color,
|
||||
$--box-shadow-light,
|
||||
$--box-shadow-light
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -153,7 +153,8 @@
|
||||
color: $--input-disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $--input-disabled-border;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(time-panel) {
|
||||
border-radius: 2px;
|
||||
@ -14,8 +14,9 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
margin-top: -15px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(time-range-picker) {
|
||||
width: 354px;
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
border-radius:2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $--datepicker-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(time-spinner) {
|
||||
&.has-seconds {
|
||||
@ -15,7 +15,8 @@
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
& .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
|
||||
&
|
||||
.#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
|
||||
@include b(year-table) {
|
||||
font-size: 12px;
|
||||
|
||||
@ -15,6 +15,5 @@
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,8 @@
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
@ -49,27 +50,31 @@
|
||||
}
|
||||
|
||||
.is-bordered {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
border: $--descriptions-table-border;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.is-bordered) {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
&.is-bordered {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@ -79,13 +84,15 @@
|
||||
font-size: 12px;
|
||||
|
||||
&.is-bordered {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
@ -95,13 +102,15 @@
|
||||
font-size: 12px;
|
||||
|
||||
&.is-bordered {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,9 +108,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes dialog-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "common/var";
|
||||
@import "mixins/mixins";
|
||||
@import 'common/var';
|
||||
@import 'mixins/mixins';
|
||||
|
||||
.hidden {
|
||||
@each $break-point-name, $value in $--breakpoints-spec {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "common/var";
|
||||
@import "mixins/mixins";
|
||||
@import 'common/var';
|
||||
@import 'mixins/mixins';
|
||||
|
||||
@include b(divider) {
|
||||
background-color: $--border-color-base;
|
||||
@ -34,14 +34,14 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@include when(center) {
|
||||
@include when(center) {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
@include when(right) {
|
||||
@include when(right) {
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "button";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'button';
|
||||
@import 'popper';
|
||||
|
||||
@include b(dropdown) {
|
||||
@ -14,9 +14,9 @@
|
||||
// using attributes selector to override
|
||||
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--dropdown-menu-box-shadow,
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--dropdown-menu-box-shadow
|
||||
);
|
||||
|
||||
.#{$namespace}-dropdown-menu {
|
||||
@ -86,7 +86,8 @@
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.#{$namespace}-dropdown-selfdefine { // 自定义
|
||||
.#{$namespace}-dropdown-selfdefine {
|
||||
// 自定义
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -112,7 +113,8 @@
|
||||
color: $--color-text-regular;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
&:not(.is-disabled):hover, &:focus {
|
||||
&:not(.is-disabled):hover,
|
||||
&:focus {
|
||||
background-color: $--dropdown-menuItem-hover-fill;
|
||||
color: $--dropdown-menuItem-hover-color;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(empty) {
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(footer) {
|
||||
padding: $--footer-padding;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(form) {
|
||||
@include m(label-left) {
|
||||
@ -140,7 +140,8 @@
|
||||
@include when(error) {
|
||||
& .#{$namespace}-input__inner,
|
||||
& .#{$namespace}-textarea__inner {
|
||||
&, &:focus {
|
||||
&,
|
||||
&:focus {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(header) {
|
||||
padding: $--header-padding;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@mixin op-icon() {
|
||||
width: 44px;
|
||||
@ -11,7 +11,6 @@
|
||||
}
|
||||
|
||||
@include b(image-viewer) {
|
||||
|
||||
@include e(wrapper) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -27,7 +26,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
@ -73,14 +72,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include e(prev){
|
||||
@include e(prev) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 40px;
|
||||
@include op-icon()
|
||||
@include op-icon();
|
||||
}
|
||||
|
||||
@include e(next){
|
||||
@include e(next) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 40px;
|
||||
@ -98,17 +97,17 @@
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-fade-enter-active {
|
||||
animation: viewer-fade-in .3s;
|
||||
animation: viewer-fade-in 0.3s;
|
||||
}
|
||||
|
||||
.viewer-fade-leave-active {
|
||||
animation: viewer-fade-out .3s;
|
||||
animation: viewer-fade-out 0.3s;
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-in {
|
||||
@ -131,4 +130,4 @@
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./image-viewer.scss";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './image-viewer.scss';
|
||||
|
||||
%size {
|
||||
width: 100%;
|
||||
@ -45,4 +45,3 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,93 +1,93 @@
|
||||
@import "./base.scss";
|
||||
@import "./pagination.scss";
|
||||
@import "./dialog.scss";
|
||||
@import "./autocomplete.scss";
|
||||
@import "./dropdown.scss";
|
||||
@import "./dropdown-menu.scss";
|
||||
@import "./dropdown-item.scss";
|
||||
@import "./menu.scss";
|
||||
@import "./submenu.scss";
|
||||
@import "./menu-item.scss";
|
||||
@import "./menu-item-group.scss";
|
||||
@import "./input.scss";
|
||||
@import "./input-number.scss";
|
||||
@import "./radio.scss";
|
||||
@import "./radio-group.scss";
|
||||
@import "./radio-button.scss";
|
||||
@import "./checkbox.scss";
|
||||
@import "./checkbox-button.scss";
|
||||
@import "./checkbox-group.scss";
|
||||
@import "./switch.scss";
|
||||
@import "./select.scss";
|
||||
@import "./select-v2.scss";
|
||||
@import "./button.scss";
|
||||
@import "./button-group.scss";
|
||||
@import "./table.scss";
|
||||
@import "./table-column.scss";
|
||||
@import "./date-picker.scss";
|
||||
@import "./time-select.scss";
|
||||
@import "./time-picker.scss";
|
||||
@import "./popover.scss";
|
||||
@import "./tooltip.scss";
|
||||
@import "./message-box.scss";
|
||||
@import "./breadcrumb.scss";
|
||||
@import "./breadcrumb-item.scss";
|
||||
@import "./form.scss";
|
||||
@import "./form-item.scss";
|
||||
@import "./tabs.scss";
|
||||
@import "./tab-pane.scss";
|
||||
@import "./tag.scss";
|
||||
@import "./tree.scss";
|
||||
@import "./alert.scss";
|
||||
@import "./notification.scss";
|
||||
@import "./slider.scss";
|
||||
@import "./loading.scss";
|
||||
@import "./row.scss";
|
||||
@import "./col.scss";
|
||||
@import "./upload.scss";
|
||||
@import "./progress.scss";
|
||||
@import "./spinner.scss";
|
||||
@import "./message.scss";
|
||||
@import "./badge.scss";
|
||||
@import "./card.scss";
|
||||
@import "./rate.scss";
|
||||
@import "./steps.scss";
|
||||
@import "./step.scss";
|
||||
@import "./carousel.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./carousel-item.scss";
|
||||
@import "./collapse.scss";
|
||||
@import "./collapse-item.scss";
|
||||
@import "./cascader.scss";
|
||||
@import "./color-picker.scss";
|
||||
@import "./transfer.scss";
|
||||
@import "./container.scss";
|
||||
@import "./header.scss";
|
||||
@import "./aside.scss";
|
||||
@import "./main.scss";
|
||||
@import "./footer.scss";
|
||||
@import "./timeline.scss";
|
||||
@import "./timeline-item.scss";
|
||||
@import "./link.scss";
|
||||
@import "./divider.scss";
|
||||
@import "./image.scss";
|
||||
@import "./image-viewer.scss";
|
||||
@import "./calendar.scss";
|
||||
@import "./backtop.scss";
|
||||
@import "./infinite-scroll.scss";
|
||||
@import "./page-header.scss";
|
||||
@import "./cascader-panel.scss";
|
||||
@import "./avatar.scss";
|
||||
@import "./drawer.scss";
|
||||
@import "./popconfirm.scss";
|
||||
@import "./overlay.scss";
|
||||
@import "./virtual-list.scss";
|
||||
@import "./space.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
@import "./empty.scss";
|
||||
@import "./affix.scss";
|
||||
@import "./check-tag.scss";
|
||||
@import "./descriptions";
|
||||
@import "./descriptions-item";
|
||||
@import "./result.scss";
|
||||
@import './base.scss';
|
||||
@import './pagination.scss';
|
||||
@import './dialog.scss';
|
||||
@import './autocomplete.scss';
|
||||
@import './dropdown.scss';
|
||||
@import './dropdown-menu.scss';
|
||||
@import './dropdown-item.scss';
|
||||
@import './menu.scss';
|
||||
@import './submenu.scss';
|
||||
@import './menu-item.scss';
|
||||
@import './menu-item-group.scss';
|
||||
@import './input.scss';
|
||||
@import './input-number.scss';
|
||||
@import './radio.scss';
|
||||
@import './radio-group.scss';
|
||||
@import './radio-button.scss';
|
||||
@import './checkbox.scss';
|
||||
@import './checkbox-button.scss';
|
||||
@import './checkbox-group.scss';
|
||||
@import './switch.scss';
|
||||
@import './select.scss';
|
||||
@import './select-v2.scss';
|
||||
@import './button.scss';
|
||||
@import './button-group.scss';
|
||||
@import './table.scss';
|
||||
@import './table-column.scss';
|
||||
@import './date-picker.scss';
|
||||
@import './time-select.scss';
|
||||
@import './time-picker.scss';
|
||||
@import './popover.scss';
|
||||
@import './tooltip.scss';
|
||||
@import './message-box.scss';
|
||||
@import './breadcrumb.scss';
|
||||
@import './breadcrumb-item.scss';
|
||||
@import './form.scss';
|
||||
@import './form-item.scss';
|
||||
@import './tabs.scss';
|
||||
@import './tab-pane.scss';
|
||||
@import './tag.scss';
|
||||
@import './tree.scss';
|
||||
@import './alert.scss';
|
||||
@import './notification.scss';
|
||||
@import './slider.scss';
|
||||
@import './loading.scss';
|
||||
@import './row.scss';
|
||||
@import './col.scss';
|
||||
@import './upload.scss';
|
||||
@import './progress.scss';
|
||||
@import './spinner.scss';
|
||||
@import './message.scss';
|
||||
@import './badge.scss';
|
||||
@import './card.scss';
|
||||
@import './rate.scss';
|
||||
@import './steps.scss';
|
||||
@import './step.scss';
|
||||
@import './carousel.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './carousel-item.scss';
|
||||
@import './collapse.scss';
|
||||
@import './collapse-item.scss';
|
||||
@import './cascader.scss';
|
||||
@import './color-picker.scss';
|
||||
@import './transfer.scss';
|
||||
@import './container.scss';
|
||||
@import './header.scss';
|
||||
@import './aside.scss';
|
||||
@import './main.scss';
|
||||
@import './footer.scss';
|
||||
@import './timeline.scss';
|
||||
@import './timeline-item.scss';
|
||||
@import './link.scss';
|
||||
@import './divider.scss';
|
||||
@import './image.scss';
|
||||
@import './image-viewer.scss';
|
||||
@import './calendar.scss';
|
||||
@import './backtop.scss';
|
||||
@import './infinite-scroll.scss';
|
||||
@import './page-header.scss';
|
||||
@import './cascader-panel.scss';
|
||||
@import './avatar.scss';
|
||||
@import './drawer.scss';
|
||||
@import './popconfirm.scss';
|
||||
@import './overlay.scss';
|
||||
@import './virtual-list.scss';
|
||||
@import './space.scss';
|
||||
@import './skeleton.scss';
|
||||
@import './skeleton-item.scss';
|
||||
@import './empty.scss';
|
||||
@import './affix.scss';
|
||||
@import './check-tag.scss';
|
||||
@import './descriptions';
|
||||
@import './descriptions-item';
|
||||
@import './result.scss';
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@use "sass:math";
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "input";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'input';
|
||||
|
||||
@include b(input-number) {
|
||||
position: relative;
|
||||
@ -91,16 +91,16 @@
|
||||
|
||||
@include m(small) {
|
||||
@include e((increase, decrease)) {
|
||||
[class*=#{$namespace}-icon] {
|
||||
transform: scale(.9);
|
||||
[class*='#{$namespace}-icon'] {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
@include e((increase, decrease)) {
|
||||
[class*=#{$namespace}-icon] {
|
||||
transform: scale(.8);
|
||||
[class*='#{$namespace}-icon'] {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,8 +122,8 @@
|
||||
height: auto;
|
||||
line-height: #{math.div(map.get($--input-height, 'default') - 2, 2)};
|
||||
|
||||
[class*=#{$namespace}-icon] {
|
||||
transform: scale(.8);
|
||||
[class*='#{$namespace}-icon'] {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,8 +143,9 @@
|
||||
}
|
||||
|
||||
@each $size in (medium, small, mini) {
|
||||
&[class*=#{size}] {
|
||||
[class*=increase], [class*=decrease] {
|
||||
&[class*='#{size}'] {
|
||||
[class*='increase'],
|
||||
[class*='decrease'] {
|
||||
line-height: #{math.div(map.get($--input-height, $size) - 2, 2)};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(textarea) {
|
||||
position: relative;
|
||||
@ -145,7 +145,7 @@
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: $--input-icon-color;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -160,13 +160,13 @@
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: $--input-icon-color;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
line-height: map.get($--input-height, 'default');
|
||||
|
||||
&:after {
|
||||
@ -258,7 +258,7 @@
|
||||
display: inline-table;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing:0;
|
||||
border-spacing: 0;
|
||||
|
||||
> .#{$namespace}-input__inner {
|
||||
vertical-align: middle;
|
||||
@ -320,7 +320,9 @@
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
|
||||
.#{$namespace}-select
|
||||
.#{$namespace}-input.is-focus
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
@ -330,7 +332,9 @@
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
|
||||
.#{$namespace}-select
|
||||
.#{$namespace}-input.is-focus
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
$typeMap: (
|
||||
primary: $--link-primary-font-color,
|
||||
danger: $--link-danger-font-color,
|
||||
success: $--link-success-font-color,
|
||||
warning: $--link-warning-font-color,
|
||||
info: $--link-info-font-color);
|
||||
primary: $--link-primary-font-color,
|
||||
danger: $--link-danger-font-color,
|
||||
success: $--link-success-font-color,
|
||||
warning: $--link-warning-font-color,
|
||||
info: $--link-info-font-color,
|
||||
);
|
||||
|
||||
@include b(link) {
|
||||
display: inline-flex;
|
||||
@ -24,37 +25,36 @@ $typeMap: (
|
||||
|
||||
@include when(underline) {
|
||||
&:hover:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid $--link-default-active-color
|
||||
border-bottom: 1px solid $--link-default-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] {
|
||||
& [class*='#{$namespace}-icon-'] {
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.#{$namespace}-link--default {
|
||||
|
||||
&.#{$namespace}-link--default {
|
||||
color: $--link-default-font-color;
|
||||
&:hover {
|
||||
color: $--link-default-active-color
|
||||
color: $--link-default-active-color;
|
||||
}
|
||||
&:after {
|
||||
border-color: $--link-default-active-color
|
||||
border-color: $--link-default-active-color;
|
||||
}
|
||||
@include when(disabled) {
|
||||
color: $--link-disabled-font-color
|
||||
color: $--link-disabled-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,20 +62,19 @@ $typeMap: (
|
||||
&.#{$namespace}-link--#{$type} {
|
||||
color: $primaryColor;
|
||||
&:hover {
|
||||
color: mix($primaryColor, $--color-white, 80%)
|
||||
color: mix($primaryColor, $--color-white, 80%);
|
||||
}
|
||||
&:after {
|
||||
border-color: $primaryColor
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
@include when(disabled) {
|
||||
color: mix($primaryColor, $--color-white, 50%)
|
||||
color: mix($primaryColor, $--color-white, 50%);
|
||||
}
|
||||
@include when(underline) {
|
||||
&:hover:after {
|
||||
border-color: $primaryColor
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "sass:math";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(loading-parent) {
|
||||
@include m(relative) {
|
||||
@ -16,7 +16,7 @@
|
||||
@include b(loading-mask) {
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
background-color: rgba(255, 255, 255, .9);
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -28,7 +28,7 @@
|
||||
position: fixed;
|
||||
|
||||
.#{$namespace}-loading-spinner {
|
||||
margin-top: #{math.div(- $--loading-fullscreen-spinner-size, 2)};
|
||||
margin-top: #{math.div(-$--loading-fullscreen-spinner-size, 2)};
|
||||
|
||||
.circular {
|
||||
height: $--loading-fullscreen-spinner-size;
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
@include b(loading-spinner) {
|
||||
top: 50%;
|
||||
margin-top: #{math.div(- $--loading-spinner-size, 2)};
|
||||
margin-top: #{math.div(-$--loading-spinner-size, 2)};
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(main) {
|
||||
// IE11 supports the <main> element partially https://caniuse.com/#search=main
|
||||
|
||||
@ -276,7 +276,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-collapse-transition .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
|
||||
.horizontal-collapse-transition
|
||||
.#{$namespace}-submenu__title
|
||||
.#{$namespace}-submenu__icon-arrow {
|
||||
transition: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include e(header) {
|
||||
position: relative;
|
||||
padding: $--messagebox-padding-primary;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(message) {
|
||||
min-width: $--message-min-width;
|
||||
@ -15,7 +15,7 @@
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: $--message-background-color;
|
||||
transition: opacity 0.3s, transform .4s, top 0.4s;
|
||||
transition: opacity 0.3s, transform 0.4s, top 0.4s;
|
||||
overflow: hidden;
|
||||
padding: $--message-padding;
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../common/var";
|
||||
@import '../common/var';
|
||||
@mixin button-plain($color) {
|
||||
color: $color;
|
||||
background: mix($--color-white, $color, 90%);
|
||||
@ -37,21 +37,45 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: mix($--color-white, $background-color, $--button-hover-tint-percent);
|
||||
border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
|
||||
background: mix(
|
||||
$--color-white,
|
||||
$background-color,
|
||||
$--button-hover-tint-percent
|
||||
);
|
||||
border-color: mix(
|
||||
$--color-white,
|
||||
$border-color,
|
||||
$--button-hover-tint-percent
|
||||
);
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: mix($--color-black, $background-color, $--button-active-shade-percent);
|
||||
border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
|
||||
background: mix(
|
||||
$--color-black,
|
||||
$background-color,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
border-color: mix(
|
||||
$--color-black,
|
||||
$border-color,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
color: $color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: mix($--color-black, $background-color, $--button-active-shade-percent);
|
||||
border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
|
||||
background: mix(
|
||||
$--color-black,
|
||||
$background-color,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
border-color: mix(
|
||||
$--color-black,
|
||||
$border-color,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@ -71,7 +95,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
|
||||
@mixin button-size(
|
||||
$padding-vertical,
|
||||
$padding-horizontal,
|
||||
$font-size,
|
||||
$border-radius
|
||||
) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "config";
|
||||
@import 'config';
|
||||
|
||||
/* BEM support Func
|
||||
-------------------------- */
|
||||
@ -22,9 +22,9 @@
|
||||
$selector: selectorToString($selector);
|
||||
|
||||
@if str-index($selector, '.' + $state-prefix) {
|
||||
@return true
|
||||
@return true;
|
||||
} @else {
|
||||
@return false
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,13 +32,13 @@
|
||||
$selector: selectorToString($selector);
|
||||
|
||||
@if str-index($selector, ':') {
|
||||
@return true
|
||||
@return true;
|
||||
} @else {
|
||||
@return false
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function hitAllSpecialNestRule($selector) {
|
||||
|
||||
@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
|
||||
@return containsModifier($selector) or containWhenFlag($selector) or
|
||||
containPseudoClass($selector);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "function";
|
||||
@import "../common/var";
|
||||
@import 'function';
|
||||
@import '../common/var';
|
||||
|
||||
/* Break-points
|
||||
-------------------------- */
|
||||
@ -53,22 +53,22 @@
|
||||
-------------------------- */
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/* BEM
|
||||
-------------------------- */
|
||||
@mixin b($block) {
|
||||
$B: $namespace+'-'+$block !global;
|
||||
$B: $namespace + '-' + $block !global;
|
||||
|
||||
.#{$B} {
|
||||
@content;
|
||||
@ -78,9 +78,14 @@
|
||||
@mixin e($element) {
|
||||
$E: $element !global;
|
||||
$selector: &;
|
||||
$currentSelector: "";
|
||||
$currentSelector: '';
|
||||
@each $unit in $element {
|
||||
$currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
|
||||
$currentSelector: #{$currentSelector +
|
||||
'.' +
|
||||
$B +
|
||||
$element-separator +
|
||||
$unit +
|
||||
','};
|
||||
}
|
||||
|
||||
@if hitAllSpecialNestRule($selector) {
|
||||
@ -102,9 +107,13 @@
|
||||
|
||||
@mixin m($modifier) {
|
||||
$selector: &;
|
||||
$currentSelector: "";
|
||||
$currentSelector: '';
|
||||
@each $unit in $modifier {
|
||||
$currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ","};
|
||||
$currentSelector: #{$currentSelector +
|
||||
$selector +
|
||||
$modifier-separator +
|
||||
$unit +
|
||||
','};
|
||||
}
|
||||
|
||||
@at-root {
|
||||
@ -124,14 +133,19 @@
|
||||
|
||||
@at-root {
|
||||
#{$selector} {
|
||||
.#{$B+$interpolation+$modifier-separator+$modifier} {
|
||||
.#{$B + $interpolation + $modifier-separator + $modifier} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
|
||||
@mixin spec-selector(
|
||||
$specSelector: '',
|
||||
$element: $E,
|
||||
$modifier: false,
|
||||
$block: $B
|
||||
) {
|
||||
$modifierCombo: '';
|
||||
|
||||
@if $modifier {
|
||||
@ -139,7 +153,10 @@
|
||||
}
|
||||
|
||||
@at-root {
|
||||
#{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
|
||||
#{&}#{$specSelector}.#{$block
|
||||
+ $element-separator
|
||||
+ $element
|
||||
+ $modifierCombo} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -155,7 +172,7 @@
|
||||
|
||||
@at-root {
|
||||
#{$selector} {
|
||||
.#{$block+$element-separator+$element+$modifierCombo} {
|
||||
.#{$block + $element-separator + $element + $modifierCombo} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -171,11 +188,11 @@
|
||||
}
|
||||
|
||||
@mixin extend-rule($name) {
|
||||
@extend #{'%shared-'+$name};
|
||||
@extend #{'%shared-' + $name};
|
||||
}
|
||||
|
||||
@mixin share-rule($name) {
|
||||
$rule-name: '%shared-'+$name;
|
||||
$rule-name: '%shared-' + $name;
|
||||
|
||||
@at-root #{$rule-name} {
|
||||
@content;
|
||||
@ -189,7 +206,7 @@
|
||||
}
|
||||
|
||||
@mixin picker-popper($background, $border, $box-shadow) {
|
||||
&.#{$namespace}-popper[role="tooltip"] {
|
||||
&.#{$namespace}-popper[role='tooltip'] {
|
||||
background: $background;
|
||||
border: $border;
|
||||
box-shadow: $box-shadow;
|
||||
@ -202,7 +219,7 @@
|
||||
|
||||
@each $placement,
|
||||
$adjacency
|
||||
in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
|
||||
in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
|
||||
{
|
||||
&[data-popper-placement^='#{$placement}'] {
|
||||
.#{$namespace}-popper__arrow::before {
|
||||
|
||||
@ -11,10 +11,10 @@
|
||||
#{$selector}::before,
|
||||
#{$selector}::after {
|
||||
display: table;
|
||||
content: "";
|
||||
content: '';
|
||||
}
|
||||
#{$selector}::after {
|
||||
clear: both
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -25,9 +25,9 @@
|
||||
@at-root {
|
||||
#{$selector}::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
content: '';
|
||||
height: 100%;
|
||||
vertical-align: middle
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -36,4 +36,4 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(notification) {
|
||||
display: flex;
|
||||
@ -11,7 +11,8 @@
|
||||
position: fixed;
|
||||
background-color: $--color-white;
|
||||
box-shadow: $--notification-shadow;
|
||||
transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
|
||||
transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
|
||||
bottom 0.3s;
|
||||
overflow-wrap: anywhere;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
@include when(multiple) {
|
||||
.el-select-dropdown__option-item {
|
||||
&.is-selected{
|
||||
&.is-selected {
|
||||
color: $--select-option-selected-font-color;
|
||||
background-color: $--select-dropdown-background;
|
||||
font-weight: bold;
|
||||
@ -58,7 +58,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(select-dropdown) {
|
||||
@include e(item) {
|
||||
@ -25,7 +25,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.hover, &:hover {
|
||||
&.hover,
|
||||
&:hover {
|
||||
background-color: $--select-option-hover-background;
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(overlay) {
|
||||
#{& + '-root'} {
|
||||
height: 0;
|
||||
height: 0;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(page-header) {
|
||||
display: flex;
|
||||
@ -12,7 +12,7 @@
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import "select";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
@import 'select';
|
||||
|
||||
$--pagination-height-extra-small: 22px !default;
|
||||
$--pagination-line-height-extra-small: $--pagination-height-extra-small !default;
|
||||
@ -15,7 +15,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
|
||||
font-weight: bold;
|
||||
@include utils-clearfix;
|
||||
|
||||
span:not([class*=suffix]),
|
||||
span:not([class*='suffix']),
|
||||
button {
|
||||
display: inline-block;
|
||||
font-size: $--pagination-font-size;
|
||||
@ -35,7 +35,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
|
||||
// pagesize 的下拉 icon
|
||||
.#{$namespace}-input__suffix {
|
||||
right: 0;
|
||||
transform: scale(.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.#{$namespace}-select .#{$namespace}-input {
|
||||
@ -120,7 +120,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
|
||||
line-height: $--pagination-line-height-extra-small;
|
||||
}
|
||||
|
||||
span:not([class*=suffix]),
|
||||
span:not([class*='suffix']),
|
||||
button {
|
||||
height: $--pagination-height-extra-small;
|
||||
line-height: $--pagination-line-height-extra-small;
|
||||
@ -225,7 +225,8 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
|
||||
}
|
||||
}
|
||||
|
||||
.btn-prev, .btn-next {
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
padding: 0;
|
||||
|
||||
&:disabled {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "popover";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'popover';
|
||||
|
||||
@include b(popconfirm) {
|
||||
@include e(main) {
|
||||
@ -11,7 +11,7 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
@include e(action) {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(progress) {
|
||||
position: relative;
|
||||
@ -40,7 +40,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include m(without-text) {
|
||||
.#{$namespace}-progress__text {
|
||||
display: none;
|
||||
@ -89,7 +88,6 @@
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include b(progress-bar) {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/_button";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/_button';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(radio-button) {
|
||||
position: relative;
|
||||
@ -28,13 +28,18 @@
|
||||
cursor: pointer;
|
||||
transition: $--all-transition;
|
||||
|
||||
@include button-size(map.get($--button-padding-vertical, 'default'), map.get($--button-padding-horizontal, 'default'), map.get($--button-font-size, 'default'), 0);
|
||||
@include button-size(
|
||||
map.get($--button-padding-vertical, 'default'),
|
||||
map.get($--button-padding-horizontal, 'default'),
|
||||
map.get($--button-font-size, 'default'),
|
||||
0
|
||||
);
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] {
|
||||
& [class*='#{$namespace}-icon-'] {
|
||||
line-height: 0.9;
|
||||
|
||||
& + span {
|
||||
@ -96,12 +101,18 @@
|
||||
@each $size in (medium, small, mini) {
|
||||
@include m($size) {
|
||||
& .#{$namespace}-radio-button__inner {
|
||||
@include button-size(map.get($--button-padding-vertical, $size), map.get($--button-padding-horizontal, $size), map.get($--button-font-size, $size), 0);
|
||||
@include button-size(
|
||||
map.get($--button-padding-vertical, $size),
|
||||
map.get($--button-padding-horizontal, $size),
|
||||
map.get($--button-font-size, $size),
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
|
||||
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
|
||||
/*获得焦点时 样式提醒*/
|
||||
box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(radio-group) {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'mixins/button';
|
||||
@import "common/var";
|
||||
@import 'common/var';
|
||||
|
||||
@include b(radio) {
|
||||
color: $--radio-font-color;
|
||||
@ -139,12 +139,12 @@
|
||||
height: 4px;
|
||||
border-radius: $--radio-input-border-radius;
|
||||
background-color: $--color-white;
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform .15s ease-in;
|
||||
transition: transform 0.15s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@ -160,7 +160,8 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
|
||||
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
|
||||
/*获得焦点时 样式提醒*/
|
||||
.#{$namespace}-radio__inner {
|
||||
box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
|
||||
}
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(rate) {
|
||||
height: $--rate-height;
|
||||
line-height: 1;
|
||||
|
||||
&:focus, &:active {
|
||||
&:focus,
|
||||
&:active {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
@ -22,7 +23,7 @@
|
||||
font-size: $--rate-icon-size;
|
||||
margin-right: $--rate-icon-margin;
|
||||
color: $--rate-icon-color;
|
||||
transition: .3s;
|
||||
transition: 0.3s;
|
||||
&.hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
@import 'common/var';
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-black;
|
||||
@ -18,11 +19,20 @@ a {
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
color: mix(
|
||||
$--color-black,
|
||||
$--color-primary,
|
||||
$--button-active-shade-percent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $--color-text-regular;
|
||||
font-weight: inherit;
|
||||
|
||||
@ -47,7 +57,10 @@ h3 {
|
||||
font-size: #{$--font-size-base + 2px};
|
||||
}
|
||||
|
||||
h4, h5, h6, p {
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@ -63,7 +76,8 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
sup,
|
||||
sub {
|
||||
font-size: #{$--font-size-base - 1px};
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "common/var";
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import 'common/var';
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
|
||||
@include b(row) {
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(scrollbar) {
|
||||
overflow: hidden;
|
||||
@ -26,7 +26,7 @@
|
||||
cursor: pointer;
|
||||
border-radius: inherit;
|
||||
background-color: $--scrollbar-background-color;
|
||||
transition: .3s background-color;
|
||||
transition: 0.3s background-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $--scrollbar-hover-background-color;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./popper";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './popper';
|
||||
|
||||
@include b(select-dropdown) {
|
||||
z-index: calc(var(--el-index-top) + 1);
|
||||
border-radius: $--border-radius-base;
|
||||
box-sizing: border-box;
|
||||
|
||||
.#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list{
|
||||
.#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./popper";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './popper';
|
||||
|
||||
@include b(select-dropdown) {
|
||||
z-index: calc(var(--el-index-top) + 1);
|
||||
@ -20,7 +20,7 @@
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
font-family: 'element-icons';
|
||||
content: "\e6da";
|
||||
content: '\e6da';
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list{
|
||||
.#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
@include picker-popper(
|
||||
$--select-dropdown-background,
|
||||
$--select-dropdown-border,
|
||||
$--select-dropdown-shadow,
|
||||
$--select-dropdown-shadow
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -80,5 +80,4 @@
|
||||
height: 22%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
2
packages/theme-chalk/src/skeleton.scss
vendored
2
packages/theme-chalk/src/skeleton.scss
vendored
@ -1,6 +1,6 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import "./skeleton-item.scss";
|
||||
@import './skeleton-item.scss';
|
||||
|
||||
@mixin skeleton-color() {
|
||||
background: linear-gradient(
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "input-number";
|
||||
@import "tooltip";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'input-number';
|
||||
@import 'tooltip';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(slider) {
|
||||
|
||||
@include utils-clearfix;
|
||||
|
||||
@include e(runway) {
|
||||
@ -125,7 +124,7 @@
|
||||
background-color: $--color-white;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
user-select: none;
|
||||
|
||||
&:hover,
|
||||
@ -203,8 +202,7 @@
|
||||
padding-right: 5px;
|
||||
}
|
||||
.#{$namespace}-input-number__decrease,
|
||||
.#{$namespace}-input-number__increase
|
||||
{
|
||||
.#{$namespace}-input-number__increase {
|
||||
top: map.get($--input-height, 'small');
|
||||
margin-top: -1px;
|
||||
border: $--input-border;
|
||||
@ -227,15 +225,13 @@
|
||||
}
|
||||
&:hover {
|
||||
.#{$namespace}-input-number__decrease,
|
||||
.#{$namespace}-input-number__increase
|
||||
{
|
||||
.#{$namespace}-input-number__increase {
|
||||
border-color: $--input-hover-border;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
.#{$namespace}-input-number__decrease,
|
||||
.#{$namespace}-input-number__increase
|
||||
{
|
||||
.#{$namespace}-input-number__increase {
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(space) {
|
||||
display: inline-flex;
|
||||
@ -7,4 +7,4 @@
|
||||
@include m(vertical) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "mixins/mixins";
|
||||
@import 'mixins/mixins';
|
||||
|
||||
@include b(time-spinner) {
|
||||
width: 100%;
|
||||
@ -19,7 +19,6 @@
|
||||
stroke-linecap: round;
|
||||
animation: dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(step) {
|
||||
position: relative;
|
||||
@ -63,7 +63,7 @@
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: $--color-white;
|
||||
transition: .15s ease-out;
|
||||
transition: 0.15s ease-out;
|
||||
|
||||
@include when(text) {
|
||||
border-radius: 50%;
|
||||
@ -84,7 +84,7 @@
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
|
||||
&[class*=#{$namespace}-icon]:not(.is-status) {
|
||||
&[class*='#{$namespace}-icon']:not(.is-status) {
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -106,7 +106,7 @@
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
transition: .15s ease-out;
|
||||
transition: 0.15s ease-out;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -215,7 +215,6 @@
|
||||
}
|
||||
|
||||
@include when(center) {
|
||||
|
||||
@include e(head) {
|
||||
text-align: center;
|
||||
}
|
||||
@ -253,12 +252,12 @@
|
||||
}
|
||||
|
||||
@include e(icon-inner) {
|
||||
&[class*=#{$namespace}-icon]:not(.is-status) {
|
||||
&[class*='#{$namespace}-icon']:not(.is-status) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.is-status {
|
||||
transform: scale(.8) translateY(1px);
|
||||
transform: scale(0.8) translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "mixins/mixins";
|
||||
@import 'mixins/mixins';
|
||||
|
||||
@include b(steps) {
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(switch) {
|
||||
display: inline-flex;
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
transition: .2s;
|
||||
transition: 0.2s;
|
||||
height: $--switch-height;
|
||||
display: inline-block;
|
||||
font-size: $--switch-font-size;
|
||||
@ -63,15 +63,15 @@
|
||||
box-sizing: border-box;
|
||||
background: $--switch-off-color;
|
||||
cursor: pointer;
|
||||
transition: border-color .3s, background-color .3s;
|
||||
transition: border-color 0.3s, background-color 0.3s;
|
||||
vertical-align: middle;
|
||||
|
||||
.#{$namespace}-switch__action{
|
||||
.#{$namespace}-switch__action {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
border-radius: $--border-radius-circle;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
width: $--switch-button-size;
|
||||
height: $--switch-button-size;
|
||||
background-color: $--color-white;
|
||||
@ -86,10 +86,10 @@
|
||||
.#{$namespace}-switch__core {
|
||||
border-color: $--switch-on-color;
|
||||
background-color: $--switch-on-color;
|
||||
.#{$namespace}-switch__action{
|
||||
.#{$namespace}-switch__action {
|
||||
left: 100%;
|
||||
margin-left: -$--switch-button-size - 1px;
|
||||
color:$--switch-on-color ;
|
||||
color: $--switch-on-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "mixins/mixins";
|
||||
@import "checkbox";
|
||||
@import "tag";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'checkbox';
|
||||
@import 'tag';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(table-column) {
|
||||
@include m(selection) {
|
||||
@ -94,4 +94,4 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import "mixins/mixins";
|
||||
@import "checkbox";
|
||||
@import "tag";
|
||||
@import "tooltip";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'checkbox';
|
||||
@import 'tag';
|
||||
@import 'tooltip';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(table) {
|
||||
position: relative;
|
||||
@ -66,7 +66,7 @@
|
||||
background-color: $--color-white;
|
||||
|
||||
// 纯属为了增加权重
|
||||
&[class*=cell] {
|
||||
&[class*='cell'] {
|
||||
padding: 20px 50px;
|
||||
}
|
||||
|
||||
@ -89,7 +89,8 @@
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
th.gutter, td.gutter {
|
||||
th.gutter,
|
||||
td.gutter {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
@ -117,7 +118,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 12px 0;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
@ -149,21 +151,24 @@
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
font-size: 12px;
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
font-size: 12px;
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
@ -171,12 +176,13 @@
|
||||
tr {
|
||||
background-color: $--color-white;
|
||||
|
||||
input[type="checkbox"] {
|
||||
input[type='checkbox'] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th.is-leaf, td {
|
||||
th.is-leaf,
|
||||
td {
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
|
||||
@ -203,7 +209,7 @@
|
||||
|
||||
&.required > div::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
@ -279,7 +285,8 @@
|
||||
// border-color: transparent;
|
||||
// }
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
border-right: $--table-border;
|
||||
|
||||
&:first-child .cell {
|
||||
@ -481,7 +488,7 @@
|
||||
& .#{$namespace}-table__body {
|
||||
& tr.#{$namespace}-table__row--striped {
|
||||
td {
|
||||
background: #FAFAFA;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.current-row td {
|
||||
@ -493,8 +500,10 @@
|
||||
|
||||
@include e(body) {
|
||||
tr.hover-row {
|
||||
&, &.#{$namespace}-table__row--striped {
|
||||
&, &.current-row {
|
||||
&,
|
||||
&.#{$namespace}-table__row--striped {
|
||||
&,
|
||||
&.current-row {
|
||||
> td {
|
||||
background-color: $--table-row-hover-background-color;
|
||||
}
|
||||
@ -525,13 +534,13 @@
|
||||
color: $--color-info;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
transform: scale(.75);
|
||||
transform: scale(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
@include m(enable-row-transition) {
|
||||
.#{$namespace}-table__body td {
|
||||
transition: background-color .25s ease;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -549,7 +558,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class*=#{$namespace}-table__row--level] {
|
||||
[class*='#{$namespace}-table__row--level'] {
|
||||
.#{$namespace}-table__expand-icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(tabs) {
|
||||
@include e(header) {
|
||||
@ -14,7 +14,7 @@
|
||||
height: 2px;
|
||||
background-color: $--color-primary;
|
||||
z-index: 1;
|
||||
transition: transform .3s cubic-bezier(.645,.045,.355,1);
|
||||
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
list-style: none;
|
||||
}
|
||||
@include e(new-tab) {
|
||||
@ -29,7 +29,7 @@
|
||||
font-size: 12px;
|
||||
color: #d3dce6;
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
transition: all 0.15s;
|
||||
|
||||
.#{$namespace}-icon-plus {
|
||||
transform: scale(0.8, 0.8);
|
||||
@ -45,7 +45,7 @@
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -79,7 +79,7 @@
|
||||
@include e(nav) {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
transition: transform .3s;
|
||||
transition: transform 0.3s;
|
||||
float: left;
|
||||
z-index: calc(var(--el-index-normal) + 1);
|
||||
|
||||
@ -104,17 +104,18 @@
|
||||
color: $--color-text-primary;
|
||||
position: relative;
|
||||
|
||||
&:focus, &:focus:active {
|
||||
&:focus,
|
||||
&:focus:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& .#{$namespace}-icon-close {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
margin-left: 5px;
|
||||
&:before {
|
||||
transform: scale(.9);
|
||||
transform: scale(0.9);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -158,7 +159,9 @@
|
||||
> .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
> .#{$namespace}-tabs__header .#{$namespace}-tabs__item .#{$namespace}-icon-close {
|
||||
> .#{$namespace}-tabs__header
|
||||
.#{$namespace}-tabs__item
|
||||
.#{$namespace}-icon-close {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
width: 0;
|
||||
@ -173,7 +176,8 @@
|
||||
> .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-left: 1px solid $--border-color-light;
|
||||
transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
|
||||
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
@ -204,7 +208,7 @@
|
||||
@include m(border-card) {
|
||||
background: $--color-white;
|
||||
border: 1px solid $--border-color-base;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
|
||||
|
||||
> .#{$namespace}-tabs__content {
|
||||
padding: 15px;
|
||||
@ -218,7 +222,7 @@
|
||||
content: none;
|
||||
}
|
||||
> .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
border: 1px solid transparent;
|
||||
margin-top: -1px;
|
||||
color: $--color-text-secondary;
|
||||
@ -245,7 +249,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .#{$namespace}-tabs__header .is-scrollable .#{$namespace}-tabs__item:first-child {
|
||||
> .#{$namespace}-tabs__header
|
||||
.is-scrollable
|
||||
.#{$namespace}-tabs__item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -259,8 +265,10 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.#{$namespace}-tabs--border-card, &.#{$namespace}-tabs--card,
|
||||
.#{$namespace}-tabs--left, .#{$namespace}-tabs--right {
|
||||
&.#{$namespace}-tabs--border-card,
|
||||
&.#{$namespace}-tabs--card,
|
||||
.#{$namespace}-tabs--left,
|
||||
.#{$namespace}-tabs--right {
|
||||
> .#{$namespace}-tabs__header {
|
||||
.#{$namespace}-tabs__item:nth-child(2) {
|
||||
padding-left: 20px;
|
||||
@ -509,22 +517,22 @@
|
||||
display: inline-block;
|
||||
}
|
||||
.slideInRight-enter {
|
||||
animation: slideInRight-enter .3s;
|
||||
animation: slideInRight-enter 0.3s;
|
||||
}
|
||||
.slideInRight-leave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
animation: slideInRight-leave .3s;
|
||||
animation: slideInRight-leave 0.3s;
|
||||
}
|
||||
.slideInLeft-enter {
|
||||
animation: slideInLeft-enter .3s;
|
||||
animation: slideInLeft-enter 0.3s;
|
||||
}
|
||||
.slideInLeft-leave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
animation: slideInLeft-leave .3s;
|
||||
animation: slideInLeft-leave 0.3s;
|
||||
}
|
||||
|
||||
@keyframes slideInRight-enter {
|
||||
@ -533,7 +541,7 @@
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%)
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
@ -541,7 +549,7 @@
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInRight-leave {
|
||||
@ -550,7 +558,7 @@
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
@ -558,7 +566,7 @@
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft-enter {
|
||||
@ -567,7 +575,7 @@
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%)
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
@ -575,7 +583,7 @@
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft-leave {
|
||||
@ -584,7 +592,7 @@
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
@ -592,6 +600,6 @@
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
|
||||
background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
|
||||
@mixin genTheme(
|
||||
$backgroundColorWeight,
|
||||
$borderColorWeight,
|
||||
$fontColorWeight,
|
||||
$hoverColorWeight
|
||||
) {
|
||||
background-color: mix(
|
||||
$--tag-primary-color,
|
||||
$--color-white,
|
||||
$backgroundColorWeight
|
||||
);
|
||||
border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
|
||||
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
|
||||
|
||||
@ -14,12 +23,20 @@
|
||||
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-primary-color,
|
||||
$--color-white,
|
||||
$hoverColorWeight
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$namespace}-tag--info {
|
||||
background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-info-color,
|
||||
$--color-white,
|
||||
$backgroundColorWeight
|
||||
);
|
||||
border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
|
||||
color: mix($--tag-info-color, $--color-white, $fontColorWeight);
|
||||
|
||||
@ -31,13 +48,21 @@
|
||||
color: mix($--tag-info-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-info-color,
|
||||
$--color-white,
|
||||
$hoverColorWeight
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$namespace}-tag--success {
|
||||
background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-success-color,
|
||||
$--color-white,
|
||||
$backgroundColorWeight
|
||||
);
|
||||
border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
|
||||
color: mix($--tag-success-color, $--color-white, $fontColorWeight);
|
||||
|
||||
@ -49,13 +74,21 @@
|
||||
color: mix($--tag-success-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-success-color,
|
||||
$--color-white,
|
||||
$hoverColorWeight
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$namespace}-tag--warning {
|
||||
background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-warning-color,
|
||||
$--color-white,
|
||||
$backgroundColorWeight
|
||||
);
|
||||
border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
|
||||
color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
|
||||
|
||||
@ -67,13 +100,21 @@
|
||||
color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-warning-color,
|
||||
$--color-white,
|
||||
$hoverColorWeight
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$namespace}-tag--danger {
|
||||
background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-danger-color,
|
||||
$--color-white,
|
||||
$backgroundColorWeight
|
||||
);
|
||||
border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
|
||||
color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
|
||||
|
||||
@ -85,7 +126,11 @@
|
||||
color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
|
||||
&:hover {
|
||||
color: $--color-white;
|
||||
background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
|
||||
background-color: mix(
|
||||
$--tag-danger-color,
|
||||
$--color-white,
|
||||
$hoverColorWeight
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -136,7 +181,7 @@
|
||||
line-height: 26px;
|
||||
|
||||
.#{$namespace}-icon-close {
|
||||
transform: scale(.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -146,7 +191,7 @@
|
||||
line-height: 22px;
|
||||
|
||||
.#{$namespace}-icon-close {
|
||||
transform: scale(.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,7 +202,7 @@
|
||||
|
||||
.#{$namespace}-icon-close {
|
||||
margin-left: -3px;
|
||||
transform: scale(.7);
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import "./date-picker/picker.scss";
|
||||
@import "./date-picker/picker-panel.scss";
|
||||
@import "./date-picker/time-spinner.scss";
|
||||
@import "./date-picker/time-picker.scss";
|
||||
@import "./date-picker/time-range-picker.scss";
|
||||
@import "./input.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./popper";
|
||||
@import './date-picker/picker.scss';
|
||||
@import './date-picker/picker-panel.scss';
|
||||
@import './date-picker/time-spinner.scss';
|
||||
@import './date-picker/time-picker.scss';
|
||||
@import './date-picker/time-range-picker.scss';
|
||||
@import './input.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './popper';
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import "common/var";
|
||||
@import "./date-picker/picker.scss";
|
||||
@import "./date-picker/date-picker.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./popper";
|
||||
@import 'common/var';
|
||||
@import './date-picker/picker.scss';
|
||||
@import './date-picker/date-picker.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './popper';
|
||||
|
||||
.time-select {
|
||||
margin: 5px 0;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(timeline-item) {
|
||||
position: relative;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(timeline) {
|
||||
margin: 0;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "popper";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'popper';
|
||||
|
||||
@include b(tooltip) {
|
||||
&:focus:not(.focusing), &:focus:hover {
|
||||
&:focus:not(.focusing),
|
||||
&:focus:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
@include e(popper) {
|
||||
@ -31,15 +32,15 @@
|
||||
}
|
||||
|
||||
.popper__arrow::after {
|
||||
content: " ";
|
||||
content: ' ';
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
&[x-placement^='top'] {
|
||||
margin-bottom: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .popper__arrow {
|
||||
&[x-placement^='top'] .popper__arrow {
|
||||
bottom: -$--tooltip-arrow-size;
|
||||
border-top-color: $--tooltip-border-color;
|
||||
border-bottom-width: 0;
|
||||
@ -52,11 +53,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
&[x-placement^='bottom'] {
|
||||
margin-top: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .popper__arrow {
|
||||
&[x-placement^='bottom'] .popper__arrow {
|
||||
top: -$--tooltip-arrow-size;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $--tooltip-border-color;
|
||||
@ -69,11 +70,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
&[x-placement^='right'] {
|
||||
margin-left: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .popper__arrow {
|
||||
&[x-placement^='right'] .popper__arrow {
|
||||
left: -$--tooltip-arrow-size;
|
||||
border-right-color: $--tooltip-border-color;
|
||||
border-left-width: 0;
|
||||
@ -86,11 +87,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
&[x-placement^='left'] {
|
||||
margin-right: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .popper__arrow {
|
||||
&[x-placement^='left'] .popper__arrow {
|
||||
right: -$--tooltip-arrow-size;
|
||||
border-right-width: 0;
|
||||
border-left-color: $--tooltip-border-color;
|
||||
@ -113,25 +114,25 @@
|
||||
background: $--tooltip-color;
|
||||
border: 1px solid $--tooltip-fill;
|
||||
|
||||
&[x-placement^="top"] .popper__arrow {
|
||||
&[x-placement^='top'] .popper__arrow {
|
||||
border-top-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-top-color: $--tooltip-color;
|
||||
}
|
||||
}
|
||||
&[x-placement^="bottom"] .popper__arrow {
|
||||
&[x-placement^='bottom'] .popper__arrow {
|
||||
border-bottom-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-bottom-color: $--tooltip-color;
|
||||
}
|
||||
}
|
||||
&[x-placement^="left"] .popper__arrow {
|
||||
&[x-placement^='left'] .popper__arrow {
|
||||
border-left-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-left-color: $--tooltip-color;
|
||||
}
|
||||
}
|
||||
&[x-placement^="right"] .popper__arrow {
|
||||
&[x-placement^='right'] .popper__arrow {
|
||||
border-right-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-right-color: $--tooltip-color;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@use "sass:math";
|
||||
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import "input";
|
||||
@import "button";
|
||||
@import "checkbox";
|
||||
@import "checkbox-group";
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
@import 'input';
|
||||
@import 'button';
|
||||
@import 'checkbox';
|
||||
@import 'checkbox-group';
|
||||
|
||||
@include b(transfer) {
|
||||
font-size: $--font-size-base;
|
||||
@ -26,11 +26,12 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i, span {
|
||||
i,
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] + span {
|
||||
& [class*='#{$namespace}-icon-'] + span {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "common/transition";
|
||||
@import "checkbox";
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'common/transition';
|
||||
@import 'checkbox';
|
||||
|
||||
@include b(tree) {
|
||||
position: relative;
|
||||
@ -38,7 +38,8 @@
|
||||
@include b(tree-node) {
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
&:focus { /* focus */
|
||||
&:focus {
|
||||
/* focus */
|
||||
> .#{$namespace}-tree-node__content {
|
||||
background-color: $--tree-node-hover-background-color;
|
||||
}
|
||||
@ -118,6 +119,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content {
|
||||
.#{$namespace}-tree--highlight-current
|
||||
.#{$namespace}-tree-node.is-current
|
||||
> .#{$namespace}-tree-node__content {
|
||||
background-color: mix($--color-white, $--color-primary, 92%);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user