feat(theme-chalk): use @use instead of @import & remove /**/ comment (#3696)

* feat(theme-chalk): use @use instead of @import & remove /**/ comment

* refactor(theme-chalk): refactor scss with @use module

* fix(docs): scss in docs toggle to '@use'

* docs: add custom theme on demand

* docs: add unplugin-element-plus
This commit is contained in:
云游君 2021-09-28 20:42:12 +08:00 committed by GitHub
parent ab8982379e
commit 8583c70fdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
137 changed files with 1338 additions and 1370 deletions

View File

@ -25,7 +25,7 @@ onMounted(() => {
</template>
<style scoped lang="scss">
@import '../../styles/mixins';
@use '../../styles/mixins' as *;
.last-updated {
display: inline-block;

View File

@ -15,7 +15,7 @@ import VPLastUpdatedAt from './vp-last-updated-at.vue'
</template>
<style scoped lang="scss">
@import '../../styles/mixins';
@use '../../styles/mixins' as *;
.page-footer {
padding-top: 1rem;
padding-bottom: 1rem;

View File

@ -154,7 +154,7 @@ function initialize(userOptions: any) {
</template>
<style lang="scss">
@import '../../styles/mixins';
@use '../../styles/mixins' as *;
.algolia-search-box {
// display: flex;
// align-items: center;

View File

@ -12,8 +12,6 @@ const links = useSocialLinks()
</template>
<style scoped lang="scss">
@import '../../styles/mixins';
.social-links {
height: 20px;
padding: 0 8px;

View File

@ -12,7 +12,7 @@ const toggle = useTheme()
</template>
<style scoped lang="scss">
@import '../../styles/mixins';
@use '../../styles/mixins' as *;
.theme-toggler-content {
@include with-bg;
display: none;

View File

@ -39,7 +39,7 @@ const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
</template>
<style lang="scss" scoped>
@import '../../styles/mixins';
@use '../../styles/mixins' as *;
.translation-container {
display: none;
height: 20px;

View File

@ -1,8 +1,8 @@
@import './common';
@import './base';
@import './code';
@import './navbar';
@import './subnav';
@import './overlay';
@import './sidebar';
@import './content';
@use './common';
@use './base';
@use './code';
@use './navbar';
@use './subnav';
@use './overlay';
@use './sidebar';
@use './content';

View File

@ -1,4 +1,4 @@
@import './mixins';
@use './mixins' as *;
*,
::before,

View File

@ -1,4 +1,4 @@
@import '../mixins';
@use '../mixins' as *;
.menu-hamburger {
width: 20px;

View File

@ -1,2 +1,2 @@
@import './switch';
@import './hamburger';
@use './switch';
@use './hamburger';

View File

@ -1,4 +1,4 @@
@import '../mixins';
@use '../mixins' as *;
.switch {
margin: 0;

View File

@ -1,6 +1,6 @@
@import './mixins';
@import './content/doc-content';
@import './content/hero-content';
@use './mixins' as *;
@use './content/doc-content';
@use './content/hero-content';
.page-content {
@include respond-to('lg') {

View File

@ -1,5 +1,5 @@
@import '../mixins';
@import './table-of-content';
@use '../mixins' as *;
@use './table-of-content';
.doc-content-wrapper {
--toc-width: 144px;

View File

@ -1,4 +1,4 @@
@import '../mixins';
@use '../mixins' as *;
.toc-wrapper {
display: none;

View File

@ -1,6 +1,6 @@
@use 'sass:map';
@import './vars';
@use './vars' as *;
@mixin with-bg {
background-color: var(--bg-color);

View File

@ -1,4 +1,4 @@
@import '../mixins';
@use '../mixins' as *;
.navbar-menu {
display: none;

View File

@ -1,8 +1,8 @@
@import './mixins';
@use './mixins' as *;
// import components
@import './nav/menu';
@use './nav/menu';
.navbar-wrapper {
@include with-bg;

View File

@ -1,5 +1,5 @@
@import './mixins';
// @import './sidebar-link.scss';
@use './mixins' as *;
// @use './sidebar-link.scss';
.sidebar {
position: fixed;

View File

@ -1,4 +1,4 @@
@import './mixins';
@use './mixins' as *;
.sub-nav {
@include with-border;

View File

@ -20,19 +20,21 @@ You can find SCSS variables in [`packages/theme-chalk/src/common/var.scss`](http
::: warning
We use [sass:map](https://sass-lang.com/documentation/values/maps) to refactor all SCSS variables.
We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) to refactor all SCSS variables.
For example, We use `$--colors` as a map to preserve different types of colors.
> [Introducing Sass Modules | CSS-TRICKS](https://css-tricks.com/introducing-sass-modules/)
`$--notification` is a map where all variables of the `notification` component at.
For example, We use `$colors` as a map to preserve different types of colors.
`$notification` is a map where all variables of the `notification` component at.
In the future, we will write documentation for variables that can be customized for each component. You can also directly checkout the source [var.scss](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss).
:::
```scss
$--colors: () !default;
$--colors: map.deep-merge(
$colors: () !default;
$colors: map.deep-merge(
(
'white': #ffffff,
'black': #000000,
@ -61,26 +63,27 @@ $--colors: map.deep-merge(
### How to override it?
If your project also uses SCSS, you can directly
change Element Plus style variables. Create a new style file, e.g. `element/var.scss`:
> element/var.scss
If your project also uses SCSS, you can directly change Element Plus style variables. Create a new style file, e.g. `styles/element/index.scss`:
```scss
// styles/element/index.scss
/* just override what you need */
$--colors: (
'primary': (
'base': green,
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": green,
),
),
);
@import "element-plus/theme-chalk/src/index.scss";
```
Then in the entry file of your project, import this style file instead of Element's
built CSS:
Then in the entry file of your project, import this style file instead of Element's built CSS:
::: tip
Import `element/var.scss` before scss of element-plus to avoid the problem of sass mixed variables, because we need generate light-x by your custom variables.
Import `element/index.scss` before scss of element-plus to avoid the problem of sass mixed variables, because we need generate light-x by your custom variables.
:::
@ -93,15 +96,9 @@ If they are mixed together, each hot update of `element-plus` needs to compile a
:::
```scss
// styles/element/index.scss
// import it before element-plus scss
@import './var.scss';
@import 'element-plus/theme-chalk/src/index.scss';
```
```ts
import Vue from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'
@ -110,6 +107,40 @@ const app = createApp(App)
app.use(ElementPlus)
```
If you are using vite, and you want to custom theme when importing on demand.
Use `scss.additionalData` to compile variables with scss of every compoent.
```ts
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
// vite.config.ts
export default defineConfig({
resolve: {
alias: {
'~/': `${path.resolve(__dirname, 'src')}/`,
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
ElementPlus({
useSource: true,
}),
],
})
```
### By CSS Variable
CSS Variables is a very useful feature, already supported by almost all browsers. (IE: Wait?)
@ -189,7 +220,7 @@ change Element Plus style variables. Create a new style file, e.g. `element-vari
/* theme color */
$--color-primary: teal; /* icon font path, required */
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import '~element-plus/packages/theme-chalk/src/index';
@use '~element-plus/packages/theme-chalk/src/index';
```
Then in the entry file of your project, import this style file instead of Element's

View File

@ -62,7 +62,6 @@
"@element-plus/utils": "workspace:*",
"@popperjs/core": "^2.10.1",
"@types/gulp": "^4.0.9",
"@types/sass": "^1.16.1",
"@vueuse/core": "~6.1.0",
"async-validator": "^4.0.3",
"dayjs": "^1.10.7",
@ -85,6 +84,7 @@
"@sucrase/jest-plugin": "^2.1.1",
"@types/jest": "^26.0.24",
"@types/lodash": "^4.14.173",
"@types/sass": "^1.16.1",
"@types/through2": "^2.0.36",
"@typescript-eslint/eslint-plugin": "^4.31.2",
"@typescript-eslint/parser": "^4.31.2",

View File

@ -1,3 +1,4 @@
dist
node_modules
lib
npm-debug*

View File

@ -13,7 +13,7 @@ npm i element-plus
Use Sass import
```css
@import 'element-plus/lib/theme-chalk/index.scss';
@use 'element-plus/lib/theme-chalk/index.scss';
```
Or Use vite/webpack

View File

@ -1,6 +1,6 @@
{
"name": "@element-plus/theme-chalk",
"version": "0.0.5",
"version": "0.1.0",
"description": "Element component chalk theme.",
"main": "index.css",
"unpkg": "index.css",
@ -34,7 +34,8 @@
"gulp-autoprefixer": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0"
"gulp-sass": "^5.0.0",
"sass": "^1.42.1"
},
"gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
}

View File

@ -1,4 +1,4 @@
@import 'mixins/mixins';
@use 'mixins/mixins' as *;
@include b(affix) {
@include m(fixed) {

View File

@ -1,11 +1,11 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(alert) {
@include set-component-css-var('alert', $--alert);
@include set-component-css-var('alert', $alert);
width: 100%;
padding: var(--el-alert-padding);
@ -41,7 +41,7 @@
@each $type in (success, info, warning, error) {
@include m($type) {
--el-alert-background-color: #{map.get($--colors, $type, 'light-9')};
--el-alert-background-color: #{map.get($colors, $type, 'light-9')};
&.is-light {
background-color: var(--el-alert-background-color);

View File

@ -1,4 +1,4 @@
@import 'mixins/mixins';
@use 'mixins/mixins' as *;
@include b(aside) {
--el-aside-width: 300px;

View File

@ -1,8 +1,8 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'common/var' as *;
@include b(autocomplete) {
position: relative;
@ -10,7 +10,7 @@
@include e(popper) {
@include picker-popper(
$--color-white,
$color-white,
1px solid var(--el-border-color-light),
var(--el-box-shadow-light)
);
@ -46,11 +46,11 @@
text-overflow: ellipsis;
&:hover {
background-color: map.get($--select-option, 'hover-background');
background-color: map.get($select-option, 'hover-background');
}
&.highlighted {
background-color: map.get($--select-option, 'hover-background');
background-color: map.get($select-option, 'hover-background');
}
&.divider {

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(avatar) {
@include set-component-css-var('avatar', $--avatar);
@include set-component-css-var('avatar', $avatar);
display: inline-block;
box-sizing: border-box;

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(backtop) {
@include set-component-css-var('backtop', $--backtop);
@include set-component-css-var('backtop', $backtop);
position: fixed;
background-color: var(--el-backtop-background-color);

View File

@ -1,12 +1,12 @@
@use 'sass:math';
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(badge) {
@include set-component-css-var('badge', $--badge);
@include set-component-css-var('badge', $badge);
position: relative;
vertical-align: middle;

View File

@ -1,3 +1,3 @@
@import 'var.scss';
@import 'common/transition.scss';
@import 'icon.scss';
@use 'var.scss';
@use 'common/transition.scss';
@use 'icon.scss';

View File

@ -1,6 +1,6 @@
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'common/var' as *;
@include b(breadcrumb) {
font-size: 14px;

View File

@ -1,8 +1,8 @@
@use 'sass:map';
@import 'common/var';
@import 'mixins/mixins';
@import 'mixins/utils';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@include b(button-group) {
@include utils-clearfix;
@ -24,10 +24,10 @@
border-bottom-left-radius: 0;
}
&:first-child:last-child {
border-top-right-radius: map.get($--button-border-radius, 'default');
border-bottom-right-radius: map.get($--button-border-radius, 'default');
border-top-left-radius: map.get($--button-border-radius, 'default');
border-bottom-left-radius: map.get($--button-border-radius, 'default');
border-top-right-radius: map.get($button-border-radius, 'default');
border-bottom-right-radius: map.get($button-border-radius, 'default');
border-top-left-radius: map.get($button-border-radius, 'default');
border-bottom-left-radius: map.get($button-border-radius, 'default');
&.is-round {
border-radius: var(--el-border-radius-round);

View File

@ -1,31 +1,28 @@
@use 'sass:map';
@import 'common/var';
@import 'mixins/button';
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'mixins/var';
@use 'common/var' as *;
@use 'mixins/button' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@include b(button) {
@include set-component-css-var('button', $--button);
@include set-component-css-var('button', $button);
}
@include b(button) {
display: inline-block;
line-height: 1;
min-height: map.get($--input-height, 'default');
min-height: map.get($input-height, 'default');
white-space: nowrap;
cursor: pointer;
background: var(
--el-button-background-color,
map.get($--button, 'background-color')
map.get($button, 'background-color')
);
border: var(--el-border-base);
border-color: var(
--el-button-border-color,
map.get($--button, 'border-color')
);
color: var(--el-button-font-color, map.get($--button, 'font-color'));
border-color: var(--el-button-border-color, map.get($button, 'border-color'));
color: var(--el-button-font-color, map.get($button, 'font-color'));
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
@ -39,10 +36,10 @@
}
@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')
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,
@ -54,15 +51,11 @@
}
&:active {
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-black,
$color-primary,
$button-active-shade-percent
);
outline: none;
}
@ -88,29 +81,21 @@
&:active {
background: var(--el-color-white);
border-color: mix(
$--color-black,
$--color-primary,
$--button-active-shade-percent
);
color: mix(
$--color-black,
$--color-primary,
$--button-active-shade-percent
$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
);
color: mix($color-black, $color-primary, $button-active-shade-percent);
border-color: mix(
$--color-black,
$--color-primary,
$--button-active-shade-percent
$color-black,
$color-primary,
$button-active-shade-percent
);
}
@ -162,26 +147,26 @@
}
@include when(circle) {
border-radius: 50%;
padding: map.get($--button-padding-vertical, 'default');
padding: map.get($button-padding-vertical, 'default');
}
@each $type in (primary, success, warning, danger, info) {
@include m($type) {
--el-button-font-color: #{map.get($--button-font-color, $type)};
--el-button-background-color: #{map.get($--button-background-color, $type)};
--el-button-border-color: #{map.get($--button-border-color, $type)};
--el-button-hover-color: #{map.get($--colors, $type, 'light-2')};
--el-button-font-color: #{map.get($button-font-color, $type)};
--el-button-background-color: #{map.get($button-background-color, $type)};
--el-button-border-color: #{map.get($button-border-color, $type)};
--el-button-hover-color: #{map.get($colors, $type, 'light-2')};
--el-button-active-font-color: #{darken(
map.get($--button-font-color, $type),
$--button-active-shade-percent
map.get($button-font-color, $type),
$button-active-shade-percent
)};
--el-button-active-background-color: #{darken(
map.get($--button-background-color, $type),
$--button-active-shade-percent
map.get($button-background-color, $type),
$button-active-shade-percent
)};
--el-button-active-border-color: #{darken(
map.get($--button-border-color, $type),
$--button-active-shade-percent
map.get($button-border-color, $type),
$button-active-shade-percent
)};
@include button-variant($type);
@ -190,17 +175,17 @@
@each $size in (medium, small, mini) {
@include m($size) {
min-height: map.get($--input-height, $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)
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-vertical, $size);
padding: map.get($button-padding-vertical, $size);
}
}
}
@ -219,11 +204,7 @@
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;
}

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(calendar) {
@include set-component-css-var('calendar', $--calendar);
@include set-component-css-var('calendar', $calendar);
background-color: #fff;

View File

@ -1,13 +1,13 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(card) {
@include set-component-css-var('card', $--card);
@include set-component-css-var('card', $card);
}
@include dark(card) {
@include set-component-css-var('card', $--dark-card);
@include set-component-css-var('card', $dark-card);
}
@include b(card) {

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(carousel) {
@include e(item) {
@ -43,7 +43,7 @@
height: 100%;
top: 0;
left: 0;
background-color: $--color-white;
background-color: $color-white;
opacity: 0.24;
transition: var(--el-transition-duration-fast);
}

View File

@ -1,11 +1,11 @@
@use 'sass:math';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(carousel) {
@include set-component-css-var('carousel', $--carousel);
@include set-component-css-var('carousel', $carousel);
position: relative;
@ -33,7 +33,7 @@
transition: var(--el-transition-duration);
border-radius: 50%;
background-color: var(--el-carousel-arrow-background);
color: $--color-white;
color: $color-white;
position: absolute;
top: 50%;
z-index: 10;
@ -148,7 +148,7 @@
opacity: 0.48;
width: var(--el-carousel-indicator-width);
height: var(--el-carousel-indicator-height);
background-color: $--color-white;
background-color: $color-white;
border: none;
outline: none;
padding: 0;

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(cascader-panel) {
@include set-component-css-var('cascader', $--cascader);
@include set-component-css-var('cascader', $cascader);
}
@include b(cascader-panel) {

View File

@ -1,16 +1,16 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(cascader) {
@include set-component-css-var('cascader', $--cascader);
@include set-component-css-var('cascader', $cascader);
display: inline-block;
position: relative;
font-size: var(--el-font-size-base);
line-height: map.get($--input-height, 'default');
line-height: map.get($input-height, 'default');
outline: none;
&:not(.is-disabled):hover {
@ -18,7 +18,7 @@
cursor: pointer;
border-color: var(
--el-input-hover-border,
map.get($--input, 'hover-border')
map.get($input, 'hover-border')
);
}
}
@ -32,7 +32,7 @@
&:focus {
border-color: var(
--el-input-focus-border,
map.get($--input, 'focus-border')
map.get($input, 'focus-border')
);
}
}
@ -49,7 +49,7 @@
.#{$namespace}-icon-circle-close:hover {
color: var(
--el-input-clear-hover-color,
map.get($--input, 'clear-hover-color')
map.get($input, 'clear-hover-color')
);
}
@ -57,7 +57,7 @@
.#{$namespace}-input__inner {
border-color: var(
--el-input-focus-border,
map.get($--input, 'focus-border')
map.get($input, 'focus-border')
);
}
}
@ -65,8 +65,8 @@
@each $size in (medium, small, mini) {
@include m($size) {
font-size: map.get($--input-font-size, $size);
line-height: map.get($--input-height, $size);
font-size: map.get($input-font-size, $size);
line-height: map.get($input-height, $size);
}
}
@ -78,7 +78,7 @@
}
@include e(dropdown) {
@include set-component-css-var('cascader', $--cascader);
@include set-component-css-var('cascader', $cascader);
}
@include e(dropdown) {

View File

@ -1,10 +1,10 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(check-tag) {
background-color: $--background-color-base;
background-color: $background-color-base;
border-radius: var(--el-border-radius-base);
color: var(--el-color-info);
cursor: pointer;
@ -20,9 +20,9 @@
@include when(checked) {
background-color: #deedfc;
color: map.get($--colors, 'primary', 'light-1');
color: map.get($colors, 'primary', 'light-1');
&:hover {
background-color: map.get($--colors, 'primary', 'light-7');
background-color: map.get($colors, 'primary', 'light-7');
}
}
}

View File

@ -1,13 +1,13 @@
@use 'sass:map';
@import 'common/var';
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'mixins/var';
@import 'mixins/button';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'mixins/button' as *;
@include b(checkbox-button) {
@include set-component-css-var('checkbox-button', $--checkbox-button);
@include set-component-css-var('checkbox-button', $checkbox-button);
}
@include b(checkbox-button) {
@ -23,11 +23,11 @@
cursor: pointer;
background: var(
--el-button-background-color,
map.get($--button, 'background-color')
map.get($button, 'background-color')
);
border: $--border-base;
border: $border-base;
border-left: 0;
color: var(--el-button-font-color, map.get($--button, 'font-color'));
color: var(--el-button-font-color, map.get($button, 'font-color'));
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
@ -38,9 +38,9 @@
@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'),
map.get($button-padding-vertical, 'default'),
map.get($button-padding-horizontal, 'default'),
map.get($button-font-size, 'default'),
0
);
@ -81,31 +81,31 @@
& .#{$namespace}-checkbox-button__inner {
color: var(
--el-button-disabled-font-color,
map.get($--button, 'disabled-font-color')
map.get($button, 'disabled-font-color')
);
cursor: not-allowed;
background-image: none;
background-color: var(
--el-button-disabled-background-color,
map.get($--button, 'disabled-background-color')
map.get($button, 'disabled-background-color')
);
border-color: var(
--el-button-disabled-border-color,
map.get($--button, 'disabled-border-color')
map.get($button, 'disabled-border-color')
);
box-shadow: none;
}
&:first-child .#{$namespace}-checkbox-button__inner {
border-left-color: var(
--el-button-disabled-border-color,
map.get($--button, 'disabled-border-color')
map.get($button, 'disabled-border-color')
);
}
}
&:first-child {
.#{$namespace}-checkbox-button__inner {
border-left: $--border-base;
border-left: $border-base;
border-radius: var(--el-border-radius-base) 0 0
var(--el-border-radius-base);
box-shadow: none !important;
@ -129,9 +129,9 @@
@include m($size) {
.#{$namespace}-checkbox-button__inner {
@include button-size(
map.get($--button-padding-vertical, $size),
map.get($--button-padding-horizontal, $size),
map.get($--button-font-size, $size),
map.get($button-padding-vertical, $size),
map.get($button-padding-horizontal, $size),
map.get($button-font-size, $size),
0
);
}

View File

@ -1,5 +1,5 @@
@import 'common/var';
@import 'mixins/mixins';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@include b(checkbox-group) {
font-size: 0;

View File

@ -1,51 +1,51 @@
@use 'sass:map';
@import 'common/var';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'mixins/_button';
@import 'mixins/utils';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'mixins/_button';
@use 'mixins/utils' as *;
$--checkbox-height: () !default;
$--checkbox-height: map.merge(
$checkbox-height: () !default;
$checkbox-height: map.merge(
(
'default': 40px,
'medium': 36px,
'small': 32px,
'mini': 28px,
),
$--checkbox-height
$checkbox-height
);
$--checkbox-bordered-padding: () !default;
$--checkbox-bordered-padding: map.merge(
$checkbox-bordered-padding: () !default;
$checkbox-bordered-padding: map.merge(
(
'default': 0 20px 0 10px,
'medium': 0 20px 0 10px,
'small': 0 15px 0 10px,
'mini': 0 15px 0 10px,
),
$--checkbox-bordered-padding
$checkbox-bordered-padding
);
$--checkbox-bordered-input-height: () !default;
$--checkbox-bordered-input-height: map.merge(
$checkbox-bordered-input-height: () !default;
$checkbox-bordered-input-height: map.merge(
(
'medium': 14px,
'small': 12px,
'mini': 12px,
),
$--checkbox-bordered-input-height
$checkbox-bordered-input-height
);
$--checkbox-bordered-input-width: () !default;
$--checkbox-bordered-input-width: map.merge(
$--checkbox-bordered-input-height,
$--checkbox-bordered-input-width
$checkbox-bordered-input-width: () !default;
$checkbox-bordered-input-width: map.merge(
$checkbox-bordered-input-height,
$checkbox-bordered-input-width
);
@include b(checkbox) {
@include set-component-css-var('checkbox', $--checkbox);
@include set-component-css-var('checkbox', $checkbox);
}
@include b(checkbox) {
@ -59,16 +59,16 @@ $--checkbox-bordered-input-width: map.merge(
white-space: nowrap;
user-select: none;
margin-right: 30px;
height: map.get($--checkbox-height, 'default');
height: map.get($checkbox-height, 'default');
@each $size in (medium, small, mini) {
&.#{$namespace}-checkbox--#{$size} {
height: map.get($--checkbox-height, $size);
height: map.get($checkbox-height, $size);
}
}
@include when(bordered) {
padding: map.get($--checkbox-bordered-padding, 'default');
padding: map.get($checkbox-bordered-padding, 'default');
border-radius: var(--el-border-radius-base);
border: var(--el-border-base);
box-sizing: border-box;
@ -88,16 +88,16 @@ $--checkbox-bordered-input-width: map.merge(
@each $size in (medium, small, mini) {
&.#{$namespace}-checkbox--#{$size} {
padding: map.get($--checkbox-bordered-padding, $size);
border-radius: map.get($--button-border-radius, $size);
padding: map.get($checkbox-bordered-padding, $size);
border-radius: map.get($button-border-radius, $size);
.#{$namespace}-checkbox__label {
font-size: map.get($--button-font-size, $size);
font-size: map.get($button-font-size, $size);
}
.#{$namespace}-checkbox__inner {
height: map.get($--checkbox-bordered-input-height, $size);
width: map.get($--checkbox-bordered-input-width, $size);
height: map.get($checkbox-bordered-input-height, $size);
width: map.get($checkbox-bordered-input-width, $size);
}
}
}
@ -160,7 +160,7 @@ $--checkbox-bordered-input-width: map.merge(
}
& + span.#{$namespace}-checkbox__label {
color: $--disabled-color-base;
color: $disabled-color-base;
cursor: not-allowed;
}
}

View File

@ -1,8 +1,8 @@
@use 'sass:math';
@import './common/var.scss';
@import './mixins/mixins.scss';
@import './mixins/_col.scss';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/_col' as *;
[class*='#{$namespace}-col-'] {
float: left;

View File

@ -1,10 +1,10 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@import 'common/transition';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'common/transition';
@include b(collapse) {
@include set-component-css-var('collapse', $--collapse);
@include set-component-css-var('collapse', $collapse);
border-top: 1px solid var(--el-collapse-border-color);
border-bottom: 1px solid var(--el-collapse-border-color);

View File

@ -1,7 +1,7 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(color-predefine) {
display: flex;
@ -219,7 +219,7 @@
float: left;
line-height: 26px;
font-size: 12px;
color: $--color-black;
color: $color-black;
width: 160px;
}
}
@ -352,7 +352,7 @@
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
color: $--color-white;
color: $color-white;
text-align: center;
font-size: 12px;
}
@ -362,9 +362,9 @@
z-index: 10;
padding: 6px;
box-sizing: content-box;
background-color: $--color-white;
background-color: $color-white;
border-radius: var(--el-border-radius-base);
box-shadow: map.get($--dropdown, 'menu-box-shadow');
box-shadow: map.get($dropdown, 'menu-box-shadow');
&.#{$namespace}-popper {
border: 1px solid var(--el-border-color-lighter);
}

View File

@ -1,9 +1,9 @@
@import './var.scss';
@import '../mixins/mixins';
@import '../mixins/var';
@use './var' as *;
@use '../mixins/mixins' as *;
@use '../mixins/var' as *;
:root {
@include set-component-css-var('popup', $--popup);
@include set-component-css-var('popup', $popup);
}
.v-modal-enter {

View File

@ -1,5 +1,4 @@
@import '../mixins/config';
@import 'var';
@use '../mixins/config' as *;
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +1,4 @@
@import 'mixins/mixins';
@use 'mixins/mixins' as *;
@include b(container) {
display: flex;

View File

@ -1,9 +1,9 @@
@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';
@forward './date-picker/date-table.scss';
@forward './date-picker/month-table.scss';
@forward './date-picker/year-table.scss';
@forward './date-picker/time-spinner.scss';
@forward './date-picker/picker.scss';
@forward './date-picker/date-picker.scss';
@forward './date-picker/date-range-picker.scss';
@forward './date-picker/time-range-picker.scss';
@forward './date-picker/time-picker.scss';

View File

@ -1,10 +1,10 @@
@import '../common/var';
@import '../mixins/mixins';
@import '../mixins/var';
@import './picker-panel.scss';
@use '../common/var' as *;
@use '../mixins/mixins' as *;
@use '../mixins/var' as *;
@use './picker-panel.scss';
@include b(date-picker) {
@include set-component-css-var('datepicker', $--datepicker);
@include set-component-css-var('datepicker', $datepicker);
}
@include b(date-picker) {

View File

@ -1,8 +1,9 @@
@import '../common/var';
@import '../mixins/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@use '../mixins/var' as *;
@include b(date-range-picker) {
@include set-component-css-var('datepicker', $--datepicker);
@include set-component-css-var('datepicker', $datepicker);
}
@include b(date-range-picker) {
@ -99,7 +100,7 @@
top: 13px;
right: 0;
z-index: 1;
background: $--color-white;
background: $color-white;
}
.#{$namespace}-time-panel {
position: absolute;

View File

@ -1,5 +1,5 @@
@import '../common/var';
@import '../mixins/mixins';
@use '../common/var' as *;
@use '../mixins/mixins' as *;
@include b(date-table) {
font-size: 12px;
@ -72,7 +72,7 @@
}
&.start-date span,
&.end-date span {
color: $--color-white;
color: $color-white;
}
}
@ -88,12 +88,12 @@
}
&.current:not(.disabled) span {
color: $--color-white;
color: $color-white;
background-color: var(--el-datepicker-active-color);
}
&.start-date div,
&.end-date div {
color: $--color-white;
color: $color-white;
}
&.start-date span,
@ -114,7 +114,7 @@
}
&.disabled div {
background-color: $--background-color-base;
background-color: $background-color-base;
opacity: 1;
cursor: not-allowed;
color: var(--el-text-color-placeholder);
@ -132,7 +132,7 @@
&.selected span {
background-color: var(--el-datepicker-active-color);
color: $--color-white;
color: $color-white;
border-radius: 15px;
}

View File

@ -1,4 +1,5 @@
@import '../common/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@include b(month-table) {
font-size: 12px;
@ -21,12 +22,12 @@
}
&.start-date .cell,
&.end-date .cell {
color: $--color-white;
color: $color-white;
}
}
&.disabled .cell {
background-color: $--background-color-base;
background-color: $background-color-base;
cursor: not-allowed;
color: var(--el-text-color-placeholder);
@ -56,12 +57,12 @@
}
&.start-date div,
&.end-date div {
color: $--color-white;
color: $color-white;
}
&.start-date .cell,
&.end-date .cell {
color: $--color-white;
color: $color-white;
background-color: var(--el-datepicker-active-color);
}

View File

@ -1,15 +1,16 @@
@import '../common/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@include b(picker-panel) {
color: var(--el-text-color-regular);
background: $--color-white;
background: $color-white;
border-radius: var(--el-border-radius-base);
line-height: 30px;
.#{$namespace}-time-panel {
margin: 5px 0;
border: solid 1px var(--el-datepicker-border-color);
background-color: $--color-white;
background-color: $color-white;
box-shadow: var(--el-box-shadow-light);
}
@ -30,7 +31,7 @@
border-top: 1px solid var(--el-datepicker-inner-border-color);
padding: 4px;
text-align: right;
background-color: $--color-white;
background-color: $color-white;
position: relative;
font-size: 0;
}
@ -111,7 +112,7 @@
border-right: 1px solid var(--el-datepicker-inner-border-color);
box-sizing: border-box;
padding-top: 6px;
background-color: $--color-white;
background-color: $color-white;
overflow: auto;
}

View File

@ -1,9 +1,9 @@
@use 'sass:map';
@import '../mixins/mixins';
@import '../mixins/var';
@import '../common/var';
@import '../common/transition';
@use '../mixins/mixins' as *;
@use '../mixins/var' as *;
@use '../common/var' as *;
@use '../common/transition' as *;
@include b(picker) {
@include e(popper) {
@ -16,7 +16,7 @@
}
@include b(date-editor) {
@include set-component-css-var('date-editor', $--date-editor);
@include set-component-css-var('date-editor', $date-editor);
position: relative;
display: inline-block;
@ -128,50 +128,50 @@
@each $size in (medium, small, mini) {
@include m($size) {
line-height: map.get($--input-height, $size);
line-height: map.get($input-height, $size);
&.#{$namespace}-input__inner {
height: map.get($--input-height, $size);
height: map.get($input-height, $size);
}
.#{$namespace}-range-separator {
line-height: map.get($--input-line-height, $size);
font-size: map.get($--input-font-size, $size);
line-height: map.get($input-line-height, $size);
font-size: map.get($input-font-size, $size);
}
.#{$namespace}-range-input {
font-size: map.get($--input-font-size, $size);
font-size: map.get($input-font-size, $size);
}
.#{$namespace}-range__icon,
.#{$namespace}-range__close-icon {
line-height: map.get($--input-line-height, $size);
line-height: map.get($input-line-height, $size);
}
}
}
@include when(disabled) {
background-color: map.get($--input-disabled, 'fill');
border-color: map.get($--input-disabled, 'border');
color: map.get($--input-disabled, 'color');
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color');
cursor: not-allowed;
&:hover,
&:focus {
border-color: map.get($--input-disabled, 'border');
border-color: map.get($input-disabled, 'border');
}
input {
background-color: map.get($--input-disabled, 'fill');
color: map.get($--input-disabled, 'color');
background-color: map.get($input-disabled, 'fill');
color: map.get($input-disabled, 'color');
cursor: not-allowed;
&::placeholder {
color: map.get($--input-disabled, 'placeholder-color');
color: map.get($input-disabled, 'placeholder-color');
}
}
.#{$namespace}-range-separator {
color: map.get($--input-disabled, 'color');
color: map.get($input-disabled, 'color');
}
}
}

View File

@ -1,4 +1,5 @@
@import '../common/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@include b(time-panel) {
border-radius: 2px;

View File

@ -1,4 +1,5 @@
@import '../common/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@include b(time-range-picker) {
width: 354px;

View File

@ -1,4 +1,5 @@
@import '../common/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@include b(time-spinner) {
&.has-seconds {
@ -30,7 +31,7 @@
}
.#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
background: $--color-white;
background: $color-white;
cursor: default;
}
}
@ -94,7 +95,7 @@
color: var(--el-text-color-regular);
&:hover:not(.disabled):not(.active) {
background: $--background-color-base;
background: $background-color-base;
cursor: pointer;
}

View File

@ -1,4 +1,5 @@
@import '../common/var';
@use '../mixins/mixins' as *;
@use '../common/var' as *;
@include b(year-table) {
font-size: 12px;

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(descriptions) {
@include e(label) {

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(descriptions) {
@include set-component-css-var('descriptions', $--descriptions);
@include set-component-css-var('descriptions', $descriptions);
box-sizing: border-box;
font-size: var(--el-font-size-base);
@ -23,7 +23,7 @@
@include e(body) {
color: var(--el-text-color-regular);
background-color: $--color-white;
background-color: $color-white;
.#{$namespace}-descriptions__table {
border-collapse: collapse;

View File

@ -1,13 +1,13 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'mixins/var';
@import 'common/var';
@import 'common/popup';
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'common/popup' as *;
@include b(dialog) {
@include set-component-css-var('dialog', $--dialog);
@include set-component-css-var('dialog', $dialog);
position: relative;
margin: var(--el-dialog-margin-top, 15vh) auto 50px;
@ -49,7 +49,7 @@
border: none;
outline: none;
cursor: pointer;
font-size: var(--el-message-close-size, map.get($--message, 'close-size'));
font-size: var(--el-message-close-size, map.get($message, 'close-size'));
.#{$namespace}-dialog__close {
color: var(--el-color-info);

View File

@ -1,10 +1,10 @@
@import 'common/var';
@import 'mixins/mixins';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
.hidden {
@each $break-point-name, $value in $--breakpoints-spec {
@each $break-point-name, $value in $breakpoints-spec {
&-#{$break-point-name} {
@include res($break-point-name, $--breakpoints-spec) {
@include res($break-point-name, $breakpoints-spec) {
display: none !important;
}
}

View File

@ -1,5 +1,5 @@
@import 'common/var';
@import 'mixins/mixins';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@include b(divider) {
background-color: var(--el-border-color-base);
@ -23,7 +23,7 @@
@include e(text) {
position: absolute;
background-color: $--color-white;
background-color: $color-white;
padding: 0 20px;
font-weight: 500;
color: var(--el-text-color-primary);

View File

@ -1,11 +1,11 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
$directions: rtl, ltr, ttb, btt;
@include b(drawer) {
@include set-component-css-var('drawer', $--drawer);
@include set-component-css-var('drawer', $drawer);
}
@include b(drawer) {

View File

@ -1,11 +1,11 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(dropdown) {
@include set-component-css-var('dropdown', $--dropdown);
@include set-component-css-var('dropdown', $dropdown);
display: inline-block;
position: relative;
@ -14,12 +14,12 @@
line-height: 1;
@include e(popper) {
@include set-component-css-var('dropdown', $--dropdown);
@include set-component-css-var('dropdown', $dropdown);
// using attributes selector to override
@include picker-popper(
$--color-white,
$color-white,
1px solid var(--el-border-color-light),
var(--el-dropdown-menu-box-shadow)
);
@ -105,7 +105,7 @@
z-index: var(--el-dropdown-menu-index);
padding: 10px 0;
margin: 0;
background-color: $--color-white;
background-color: $color-white;
border: none;
border-radius: var(--el-border-radius-base);
box-shadow: none;
@ -141,7 +141,7 @@
height: $divided-offset;
display: block;
margin: 0 -20px;
background-color: $--color-white;
background-color: $color-white;
}
}

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(empty) {
@include set-component-css-var('empty', $--empty);
@include set-component-css-var('empty', $empty);
display: flex;
justify-content: center;

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(footer) {
@include set-component-css-var('footer', $--footer);
@include set-component-css-var('footer', $footer);
padding: var(--el-footer-padding);
box-sizing: border-box;

View File

@ -1,10 +1,10 @@
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(form) {
@include set-component-css-var('form', $--form);
@include set-component-css-var('form', $form);
@include m(label-left) {
& .#{$namespace}-form-item__label {

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(header) {
@include set-component-css-var('header', $--header);
@include set-component-css-var('header', $header);
padding: var(--el-header-padding);
box-sizing: border-box;

View File

@ -1,15 +1,15 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@font-face {
font-family: 'element-icons';
src: url('#{$--font-path}/element-icons.woff') format('woff'),
/* chrome, firefox */ url('#{$--font-path}/element-icons.ttf')
src: url('#{$font-path}/element-icons.woff') format('woff'),
/* chrome, firefox */ url('#{$font-path}/element-icons.ttf')
format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: $--font-display;
font-display: $font-display;
font-style: normal;
}
@ -1173,7 +1173,7 @@
@include b(icon) {
--color: inherit;
--font-size: #{map.get($--font-size, 'base')};
--font-size: #{map.get($font-size, 'base')};
height: 1em;
width: 1em;
line-height: 1em;

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@mixin op-icon() {
width: 44px;

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
%size {
width: 100%;
@ -26,7 +26,7 @@
@include e(placeholder) {
@extend %size;
background: $--background-color-base;
background: $background-color-base;
}
@include e(error) {
@ -35,7 +35,7 @@
justify-content: center;
align-items: center;
font-size: 14px;
background: $--background-color-base;
background: $background-color-base;
color: var(--el-text-color-placeholder);
vertical-align: middle;
}

View File

@ -1,101 +1,101 @@
@import './base.scss';
@use './base.scss';
// component styles
@import './affix.scss';
@import './alert.scss';
@import './aside.scss';
@import './autocomplete.scss';
@import './avatar.scss';
@import './backtop.scss';
@import './badge.scss';
@import './breadcrumb-item.scss';
@import './breadcrumb.scss';
@import './button-group.scss';
@import './button.scss';
@import './calendar.scss';
@import './card.scss';
@import './carousel-item.scss';
@import './carousel.scss';
@import './cascader-panel.scss';
@import './cascader.scss';
@import './check-tag.scss';
@import './checkbox-button.scss';
@import './checkbox-group.scss';
@import './checkbox.scss';
@import './col.scss';
@import './collapse-item.scss';
@import './collapse.scss';
@import './color-picker.scss';
@import './config-provider.scss';
@import './container.scss';
@import './date-picker.scss';
@import './descriptions';
@import './descriptions-item';
@import './dialog.scss';
@import './divider.scss';
@import './drawer.scss';
@import './dropdown-item.scss';
@import './dropdown-menu.scss';
@import './dropdown.scss';
@import './empty.scss';
@import './footer.scss';
@import './form-item.scss';
@import './form.scss';
@import './header.scss';
@import './image-viewer.scss';
@import './image.scss';
@import './infinite-scroll.scss';
@import './input-number.scss';
@import './input.scss';
@import './link.scss';
@import './loading.scss';
@import './main.scss';
@import './menu-item-group.scss';
@import './menu-item.scss';
@import './menu.scss';
@import './message-box.scss';
@import './message.scss';
@import './notification.scss';
@import './overlay.scss';
@import './page-header.scss';
@import './pagination.scss';
@import './popconfirm.scss';
@import './popover.scss';
@import './progress.scss';
@import './radio-button.scss';
@import './radio-group.scss';
@import './radio.scss';
@import './rate.scss';
@import './result.scss';
@import './row.scss';
@import './scrollbar.scss';
@import './select-v2.scss';
@import './select.scss';
@import './skeleton-item.scss';
@import './skeleton.scss';
@import './slider.scss';
@import './space.scss';
@import './spinner.scss';
@import './step.scss';
@import './steps.scss';
@import './submenu.scss';
@import './switch.scss';
@import './tab-pane.scss';
@import './table-column.scss';
@import './table.scss';
@import './tabs.scss';
@import './tag.scss';
@import './time-picker.scss';
@import './time-select.scss';
@import './timeline-item.scss';
@import './timeline.scss';
@import './tooltip.scss';
@import './transfer.scss';
@import './tree.scss';
@import './upload.scss';
@import './virtual-list.scss';
@import './popper.scss';
@import './select-dropdown-v2.scss';
@import './select-dropdown.scss';
@import './option.scss';
@import './option-group.scss';
@import './option-item.scss';
@use './affix.scss';
@use './alert.scss';
@use './aside.scss';
@use './autocomplete.scss';
@use './avatar.scss';
@use './backtop.scss';
@use './badge.scss';
@use './breadcrumb-item.scss';
@use './breadcrumb.scss';
@use './button-group.scss';
@use './button.scss';
@use './calendar.scss';
@use './card.scss';
@use './carousel-item.scss';
@use './carousel.scss';
@use './cascader-panel.scss';
@use './cascader.scss';
@use './check-tag.scss';
@use './checkbox-button.scss';
@use './checkbox-group.scss';
@use './checkbox.scss';
@use './col.scss';
@use './collapse-item.scss';
@use './collapse.scss';
@use './color-picker.scss';
@use './config-provider.scss';
@use './container.scss';
@use './date-picker.scss';
@use './descriptions';
@use './descriptions-item';
@use './dialog.scss';
@use './divider.scss';
@use './drawer.scss';
@use './dropdown-item.scss';
@use './dropdown-menu.scss';
@use './dropdown.scss';
@use './empty.scss';
@use './footer.scss';
@use './form-item.scss';
@use './form.scss';
@use './header.scss';
@use './image-viewer.scss';
@use './image.scss';
@use './infinite-scroll.scss';
@use './input-number.scss';
@use './input.scss';
@use './link.scss';
@use './loading.scss';
@use './main.scss';
@use './menu-item-group.scss';
@use './menu-item.scss';
@use './menu.scss';
@use './message-box.scss';
@use './message.scss';
@use './notification.scss';
@use './overlay.scss';
@use './page-header.scss';
@use './pagination.scss';
@use './popconfirm.scss';
@use './popover.scss';
@use './progress.scss';
@use './radio-button.scss';
@use './radio-group.scss';
@use './radio.scss';
@use './rate.scss';
@use './result.scss';
@use './row.scss';
@use './scrollbar.scss';
@use './select-v2.scss';
@use './select.scss';
@use './skeleton-item.scss';
@use './skeleton.scss';
@use './slider.scss';
@use './space.scss';
@use './spinner.scss';
@use './step.scss';
@use './steps.scss';
@use './submenu.scss';
@use './switch.scss';
@use './tab-pane.scss';
@use './table-column.scss';
@use './table.scss';
@use './tabs.scss';
@use './tag.scss';
@use './time-picker.scss';
@use './time-select.scss';
@use './timeline-item.scss';
@use './timeline.scss';
@use './tooltip.scss';
@use './transfer.scss';
@use './tree.scss';
@use './upload.scss';
@use './virtual-list.scss';
@use './popper.scss';
@use './select-dropdown-v2.scss';
@use './select-dropdown.scss';
@use './option.scss';
@use './option-group.scss';
@use './option-item.scss';

View File

@ -1,22 +1,22 @@
@use 'sass:math';
@use 'sass:map';
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(input-number) {
position: relative;
display: inline-block;
width: 180px;
line-height: #{map.get($--input-height, 'default') - 2};
line-height: #{map.get($input-height, 'default') - 2};
.#{$namespace}-input {
display: block;
&__inner {
-webkit-appearance: none;
padding-left: #{map.get($--input-height, 'default') + 10};
padding-right: #{map.get($--input-height, 'default') + 10};
padding-left: #{map.get($input-height, 'default') + 10};
padding-right: #{map.get($input-height, 'default') + 10};
text-align: center;
}
}
@ -25,10 +25,10 @@
position: absolute;
z-index: 1;
top: 1px;
width: map.get($--input-height, 'default');
width: map.get($input-height, 'default');
height: auto;
text-align: center;
background: $--background-color-base;
background: $background-color-base;
color: var(--el-text-color-regular);
cursor: pointer;
font-size: 13px;
@ -39,7 +39,7 @@
& ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
border-color: var(
--el-input-focus-border,
map.get($--input, 'focus-border')
map.get($input, 'focus-border')
);
}
}
@ -76,17 +76,17 @@
@each $size in (medium, small, mini) {
@include m($size) {
width: map.get($--input-number-width, $size);
line-height: #{map.get($--input-height, $size) - 2};
width: map.get($input-number-width, $size);
line-height: #{map.get($input-height, $size) - 2};
@include e((increase, decrease)) {
width: map.get($--input-height, $size);
font-size: map.get($--input-font-size, $size);
width: map.get($input-height, $size);
font-size: map.get($input-font-size, $size);
}
.#{$namespace}-input__inner {
padding-left: #{map.get($--input-height, $size) + 7};
padding-right: #{map.get($--input-height, $size) + 7};
padding-left: #{map.get($input-height, $size) + 7};
padding-right: #{map.get($input-height, $size) + 7};
}
}
}
@ -117,12 +117,12 @@
@include when(controls-right) {
.#{$namespace}-input__inner {
padding-left: 15px;
padding-right: #{map.get($--input-height, 'default') + 10};
padding-right: #{map.get($input-height, 'default') + 10};
}
@include e((increase, decrease)) {
height: auto;
line-height: #{math.div(map.get($--input-height, 'default') - 2, 2)};
line-height: #{math.div(map.get($input-height, 'default') - 2, 2)};
[class*='#{$namespace}-icon'] {
transform: scale(0.8);
@ -148,7 +148,7 @@
&[class*='#{$size}'] {
[class*='increase'],
[class*='decrease'] {
line-height: #{math.div(map.get($--input-height, $size) - 2, 2)};
line-height: #{math.div(map.get($input-height, $size) - 2, 2)};
}
}
}

View File

@ -1,11 +1,11 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(textarea) {
@include set-component-css-var('input', $--input);
@include set-component-css-var('input', $input);
}
@include b(textarea) {
@ -24,30 +24,30 @@
width: 100%;
font-size: inherit;
font-family: inherit;
color: var(--el-input-font-color, map.get($--input, 'font-color'));
color: var(--el-input-font-color, map.get($input, 'font-color'));
background-color: var(
--el-input-background-color,
map.get($--input, 'background-color')
map.get($input, 'background-color')
);
background-image: none;
border: var(--el-input-border, map.get($--input, 'border'));
border: var(--el-input-border, map.get($input, 'border'));
border-radius: var(
--el-input-border-radius,
map.get($--input, 'border-radius')
map.get($input, 'border-radius')
);
transition: var(--el-transition-border);
&::placeholder {
color: var(
--el-input-placeholder-color,
map.get($--input, 'placeholder-color')
map.get($input, 'placeholder-color')
);
}
&:hover {
border-color: var(
--el-input-hover-border,
map.get($--input, 'hover-border')
map.get($input, 'hover-border')
);
}
@ -55,7 +55,7 @@
outline: none;
border-color: var(
--el-input-focus-border,
map.get($--input, 'focus-border')
map.get($input, 'focus-border')
);
}
}
@ -72,13 +72,13 @@
@include when(disabled) {
.#{$namespace}-textarea__inner {
background-color: map.get($--input-disabled, 'fill');
border-color: map.get($--input-disabled, 'border');
color: map.get($--input-disabled, 'color');
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color');
cursor: not-allowed;
&::placeholder {
color: map.get($--input-disabled, 'placeholder-color');
color: map.get($input-disabled, 'placeholder-color');
}
}
}
@ -95,18 +95,18 @@
}
@include b(input) {
@include set-component-css-var('input', $--input);
@include set-component-css-var('input', $input);
position: relative;
font-size: var(--el-font-size-base);
display: inline-block;
width: 100%;
line-height: map.get($--input-height, 'default');
line-height: map.get($input-height, 'default');
@include scroll-bar;
& .#{$namespace}-input__clear {
color: var(--el-input-icon-color);
font-size: map.get($--input-font-size, 'default');
font-size: map.get($input-font-size, 'default');
cursor: pointer;
transition: var(--el-transition-color);
@ -123,7 +123,7 @@
font-size: 12px;
.#{$namespace}-input__count-inner {
background: $--color-white;
background: $color-white;
line-height: initial;
display: inline-block;
padding: 0 5px;
@ -134,20 +134,20 @@
-webkit-appearance: none;
background-color: var(
--el-input-background-color,
map.get($--input, 'background-color')
map.get($input, 'background-color')
);
background-image: none;
border-radius: var(
--el-input-border-radius,
map.get($--input, 'border-radius')
map.get($input, 'border-radius')
);
border: var(--el-input-border, map.get($--input, 'border'));
border: var(--el-input-border, map.get($input, 'border'));
box-sizing: border-box;
color: var(--el-input-font-color, map.get($--input, 'font-color'));
color: var(--el-input-font-color, map.get($input, 'font-color'));
display: inline-block;
font-size: inherit;
height: map.get($--input-height, 'default');
line-height: map.get($--input-height, 'default');
height: map.get($input-height, 'default');
line-height: map.get($input-height, 'default');
outline: none;
padding: 0 15px;
transition: var(--el-transition-border);
@ -156,14 +156,14 @@
&::placeholder {
color: var(
--el-input-placeholder-color,
map.get($--input, 'placeholder-color')
map.get($input, 'placeholder-color')
);
}
&:hover {
border-color: var(
--el-input-hover-border,
map.get($--input, 'hover-border')
map.get($input, 'hover-border')
);
}
@ -171,7 +171,7 @@
outline: none;
border-color: var(
--el-input-focus-border,
map.get($--input, 'focus-border')
map.get($input, 'focus-border')
);
}
}
@ -182,7 +182,7 @@
right: 5px;
top: 0;
text-align: center;
color: var(--el-input-icon-color, map.get($--input, 'icon-color'));
color: var(--el-input-icon-color, map.get($input, 'icon-color'));
transition: all var(--el-transition-duration);
pointer-events: none;
}
@ -197,7 +197,7 @@
left: 5px;
top: 0;
text-align: center;
color: var(--el-input-icon-color, map.get($--input, 'icon-color'));
color: var(--el-input-icon-color, map.get($input, 'icon-color'));
transition: all var(--el-transition-duration);
}
@ -205,7 +205,7 @@
width: 25px;
text-align: center;
transition: all var(--el-transition-duration);
line-height: map.get($--input-height, 'default');
line-height: map.get($input-height, 'default');
&:after {
content: '';
@ -225,20 +225,20 @@
outline: none;
border-color: var(
--el-input-focus-border,
map.get($--input, 'focus-color')
map.get($input, 'focus-color')
);
}
}
@include when(disabled) {
.#{$namespace}-input__inner {
background-color: map.get($--input-disabled, 'fill');
border-color: map.get($--input-disabled, 'border');
color: map.get($--input-disabled, 'color');
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color');
cursor: not-allowed;
&::placeholder {
color: map.get($--input-disabled, 'placeholder-color');
color: map.get($input-disabled, 'placeholder-color');
}
}
@ -279,16 +279,16 @@
@each $size in (medium, small, mini) {
@include m($size) {
font-size: map.get($--input-font-size, $size);
line-height: map.get($--input-height, $size);
font-size: map.get($input-font-size, $size);
line-height: map.get($input-height, $size);
@include e(inner) {
height: map.get($--input-height, $size);
line-height: map.get($--input-height, $size);
height: map.get($input-height, $size);
line-height: map.get($input-height, $size);
}
.#{$namespace}-input__icon {
line-height: map.get($--input-height, $size);
line-height: map.get($input-height, $size);
}
}
}
@ -312,7 +312,7 @@
vertical-align: middle;
display: table-cell;
position: relative;
border: $--border-base;
border: $border-base;
border-radius: var(--el-input-border-radius);
padding: 0 20px;
width: 1px;

View File

@ -1,11 +1,11 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(link) {
@include set-component-css-var('link', $--link);
@include set-component-css-var('link', $link);
}
@include b(link) {
@ -60,13 +60,13 @@
}
}
@each $type in $--types {
@each $type in $types {
&.#{$namespace}-link--#{$type} {
--el-link-font-color: var(--el-color-#{$type});
color: var(--el-link-font-color);
&:hover {
color: mix(map.get($--link-font-color, $type), $--color-white, 80%);
color: mix(map.get($link-font-color, $type), $color-white, 80%);
}
&:after {
@ -74,7 +74,7 @@
}
@include when(disabled) {
color: mix(map.get($--link-font-color, $type), $--color-white, 50%);
color: mix(map.get($link-font-color, $type), $color-white, 50%);
}
@include when(underline) {
&:hover:after {

View File

@ -1,11 +1,11 @@
@use 'sass:math';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
:root {
@include set-component-css-var('loading', $--loading);
@include set-component-css-var('loading', $loading);
}
@include b(loading-parent) {

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(main) {
@include set-component-css-var('main', $--main);
@include set-component-css-var('main', $main);
// IE11 supports the <main> element partially https://caniuse.com/#search=main
display: block;

View File

@ -1,8 +1,8 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'mixins/utils';
@import 'common/var';
@import 'common/transition';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'mixins/utils' as *;
@use 'common/var' as *;
@use 'common/transition';
@mixin menu-item {
height: 56px;
@ -44,7 +44,7 @@
}
@include b(menu) {
@include set-component-css-var('menu', $--menu);
@include set-component-css-var('menu', $menu);
border-right: solid 1px var(--el-menu-border-color);
list-style: none;

View File

@ -1,12 +1,12 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@import 'common/popup';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'common/popup' as *;
@include b(message-box) {
@include set-component-css-var('messagebox', $--messagebox);
@include set-component-css-var('messagebox', $messagebox);
}
@include b(message-box) {
@ -56,7 +56,7 @@
border: none;
outline: none;
background: transparent;
font-size: var(--el-message-close-size, map.get($--message, 'close-size'));
font-size: var(--el-message-close-size, map.get($message, 'close-size'));
cursor: pointer;
.#{$namespace}-message-box__close {

View File

@ -1,11 +1,11 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(message) {
@include set-component-css-var('message', $--message);
@include set-component-css-var('message', $message);
}
@include b(message) {
@ -50,8 +50,8 @@
@each $type in (success, info, warning, error) {
@include m($type) {
background-color: map.get($--colors, $type, 'light-9');
border-color: map.get($--colors, $type, 'light-8');
background-color: map.get($colors, $type, 'light-9');
border-color: map.get($colors, $type, 'light-8');
--el-message-font-color: var(--el-color-#{$type});
@ -81,7 +81,7 @@
transform: translateY(-50%);
cursor: pointer;
color: var(--el-message-close-icon-color);
font-size: var(--el-message-close-size, map.get($--message, 'close-size'));
font-size: var(--el-message-close-size, map.get($message, 'close-size'));
&:focus {
outline-width: 0;

View File

@ -1,11 +1,11 @@
@use 'sass:map';
@import '../common/var';
@use '../common/var' as *;
@mixin button-plain($color, $type) {
color: $color;
background-color: map.get($--colors, $type, 'light-9');
border-color: map.get($--colors, $type, 'light-6');
background-color: map.get($colors, $type, 'light-9');
border-color: map.get($colors, $type, 'light-6');
&:hover,
&:focus {
@ -26,9 +26,9 @@
&:hover,
&:focus,
&:active {
color: map.get($--colors, $type, 'light-4');
background-color: map.get($--colors, $type, 'light-9');
border-color: map.get($--colors, $type, 'light-8');
color: map.get($colors, $type, 'light-4');
background-color: map.get($colors, $type, 'light-9');
border-color: map.get($colors, $type, 'light-8');
}
}
}
@ -59,9 +59,9 @@
&:hover,
&:focus,
&:active {
color: $--color-white;
background-color: map.get($--colors, $type, 'light-5');
border-color: map.get($--colors, $type, 'light-5');
color: $color-white;
background-color: map.get($colors, $type, 'light-5');
border-color: map.get($colors, $type, 'light-5');
}
}

View File

@ -1,7 +1,7 @@
@use 'sass:math';
@import '../common/var.scss';
@import './mixins.scss';
@use '../common/var' as *;
@use './mixins' as *;
@mixin col-size($size) {
@include res($size) {

View File

@ -1,15 +1,15 @@
@use 'sass:map';
@import '../common/var';
@use '../common/var' as *;
@mixin set-css-color-type-light($type, $i) {
--el-color-#{$type}-light-#{$i}: #{map.get($--colors, $type, 'light-#{$i}')};
--el-color-#{$type}-light-#{$i}: #{map.get($colors, $type, 'light-#{$i}')};
}
@mixin set-css-color-type($type) {
--el-color-#{$type}: #{map.get($--colors, $type, 'base')};
--el-color-#{$type}-light: #{map.get($--colors, $type, 'light-8')};
--el-color-#{$type}-lighter: #{map.get($--colors, $type, 'light-9')};
--el-color-#{$type}: #{map.get($colors, $type, 'base')};
--el-color-#{$type}-light: #{map.get($colors, $type, 'light-8')};
--el-color-#{$type}-lighter: #{map.get($colors, $type, 'light-9')};
// need to be considered
// may be we do not need add it to css var
@ -18,13 +18,13 @@
// }
}
@mixin set-css-var-type($name, $type, $--variables) {
--el-#{$name}-#{$type}: #{map.get($--variables, $type)};
@mixin set-css-var-type($name, $type, $variables) {
--el-#{$name}-#{$type}: #{map.get($variables, $type)};
}
// set all css var for component by map
@mixin set-component-css-var($name, $--variables) {
@each $attribute, $value in $--variables {
@mixin set-component-css-var($name, $variables) {
@each $attribute, $value in $variables {
--el-#{$name}-#{$attribute}: #{$value};
}
}

View File

@ -1,7 +1,6 @@
@import 'config';
@use 'config';
/* BEM support Func
-------------------------- */
// BEM support Func
@function selectorToString($selector) {
$selector: inspect($selector);
$selector: str-slice($selector, 2, -2);
@ -11,7 +10,7 @@
@function containsModifier($selector) {
$selector: selectorToString($selector);
@if str-index($selector, $modifier-separator) {
@if str-index($selector, config.$modifier-separator) {
@return true;
} @else {
@return false;
@ -21,7 +20,7 @@
@function containWhenFlag($selector) {
$selector: selectorToString($selector);
@if str-index($selector, '.' + $state-prefix) {
@if str-index($selector, '.' + config.$state-prefix) {
@return true;
} @else {
@return false;

View File

@ -1,9 +1,10 @@
@import 'function';
@import '../common/var';
@use 'function' as *;
@use '../common/var' as *;
@forward 'config';
@use 'config' as *;
/* Break-points
-------------------------- */
@mixin res($key, $map: $--breakpoints) {
// Break-points
@mixin res($key, $map: $breakpoints) {
// 循环断点Map如果存在则返回
@if map-has-key($map, $key) {
@media only screen and #{unquote(map-get($map, $key))} {
@ -14,11 +15,10 @@
}
}
/* Scrollbar
-------------------------- */
// Scrollbar
@mixin scroll-bar {
$--scrollbar-thumb-background: #b4bccc;
$--scrollbar-track-background: #fff;
$scrollbar-thumb-background: #b4bccc;
$scrollbar-track-background: #fff;
&::-webkit-scrollbar {
z-index: 11;
@ -31,26 +31,25 @@
&-thumb {
border-radius: 5px;
width: 6px;
background: $--scrollbar-thumb-background;
background: $scrollbar-thumb-background;
}
&-corner {
background: $--scrollbar-track-background;
background: $scrollbar-track-background;
}
&-track {
background: $--scrollbar-track-background;
background: $scrollbar-track-background;
&-piece {
background: $--scrollbar-track-background;
background: $scrollbar-track-background;
width: 6px;
}
}
}
}
/* Placeholder
-------------------------- */
// Placeholder
@mixin placeholder {
&::-webkit-input-placeholder {
@content;
@ -65,8 +64,7 @@
}
}
/* BEM
-------------------------- */
// BEM
@mixin b($block) {
$B: $namespace + '-' + $block !global;

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(notification) {
@include set-component-css-var('notification', $--notification);
@include set-component-css-var('notification', $notification);
}
@include b(notification) {

View File

@ -1,7 +1,7 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(select-group) {
$gap: 20px;
@ -43,9 +43,9 @@
@include e(title) {
padding-left: $gap;
font-size: map.get($--select-group, 'font-size');
color: map.get($--select-group, 'color');
line-height: map.get($--select-group, 'height');
font-size: map.get($select-group, 'font-size');
color: map.get($select-group, 'color');
line-height: map.get($select-group, 'height');
}
& .#{$namespace}-select-dropdown__item {

View File

@ -1,8 +1,8 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(select-dropdown) {
@include e(option-item) {
@ -13,14 +13,14 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: map.get($--select-option, 'color');
height: map.get($--select-option, 'height');
line-height: map.get($--select-option, 'height');
color: map.get($select-option, 'color');
height: map.get($select-option, 'height');
line-height: map.get($select-option, 'height');
box-sizing: border-box;
cursor: pointer;
@include when(disabled) {
color: map.get($--select-option, 'disabled-color');
color: map.get($select-option, 'disabled-color');
cursor: not-allowed;
&:hover {
@ -29,31 +29,28 @@
}
@include when(selected) {
background-color: map.get($--select-option, 'hover-background');
background-color: map.get($select-option, 'hover-background');
font-weight: 700;
&:not(.is-multiple) {
color: map.get($--select-option, 'selected-font-color');
color: map.get($select-option, 'selected-font-color');
}
}
&.hover {
background-color: map.get(
$--select-option,
'hover-background'
) !important;
background-color: map.get($select-option, 'hover-background') !important;
}
&:hover {
background-color: map.get($--select-option, 'hover-background');
background-color: map.get($select-option, 'hover-background');
}
}
@include when(multiple) {
.el-select-dropdown__option-item {
&.is-selected {
color: map.get($--select-option, 'selected-font-color');
background-color: map.get($--select-dropdown, 'background');
color: map.get($select-option, 'selected-font-color');
background-color: map.get($select-dropdown, 'background');
font-weight: bold;
&::after {
position: absolute;

View File

@ -1,25 +1,25 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(select-dropdown) {
@include e(item) {
font-size: map.get($--select, 'font-size');
font-size: map.get($select, 'font-size');
// 20 as the padding of option item, 12 as the size of icon size
padding: 0 #{20 + 12}px 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: map.get($--select-option, 'color');
height: map.get($--select-option, 'height');
line-height: map.get($--select-option, 'height');
color: map.get($select-option, 'color');
height: map.get($select-option, 'height');
line-height: map.get($select-option, 'height');
box-sizing: border-box;
cursor: pointer;
@include when(disabled) {
color: map.get($--select-option, 'disabled-color');
color: map.get($select-option, 'disabled-color');
cursor: not-allowed;
&:hover {
@ -29,11 +29,11 @@
&.hover,
&:hover {
background-color: map.get($--select-option, 'hover-background');
background-color: map.get($select-option, 'hover-background');
}
&.selected {
color: map.get($--select-option, 'selected-font-color');
color: map.get($select-option, 'selected-font-color');
font-weight: bold;
}
}

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(overlay) {
#{& + '-root'} {

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(page-header) {
display: flex;

View File

@ -1,12 +1,12 @@
@use 'sass:map';
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(pagination) {
@include set-component-css-var('pagination', $--pagination);
@include set-component-css-var('pagination', $pagination);
white-space: nowrap;
padding: 2px 5px;
@ -215,7 +215,7 @@
.btn-next,
.#{$namespace}-pager li {
margin: 0 5px;
background-color: map.get($--colors, 'info', 'light-9');
background-color: map.get($colors, 'info', 'light-9');
color: var(--el-text-color-regular);
min-width: 30px;
border-radius: 2px;

View File

@ -1,5 +1,5 @@
@import 'mixins/mixins';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'common/var' as *;
@include b(popconfirm) {
@include e(main) {

View File

@ -1,9 +1,9 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(popover) {
@include set-component-css-var('popover', $--popover);
@include set-component-css-var('popover', $popover);
&.#{$namespace}-popper {
background: var(--el-popover-background-color);

Some files were not shown because too many files have changed in this diff Show More