mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-30 02:08:12 +08:00
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:
parent
ab8982379e
commit
8583c70fdc
@ -25,7 +25,7 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../styles/mixins';
|
||||
@use '../../styles/mixins' as *;
|
||||
|
||||
.last-updated {
|
||||
display: inline-block;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -12,8 +12,6 @@ const links = useSocialLinks()
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../styles/mixins';
|
||||
|
||||
.social-links {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import './mixins';
|
||||
@use './mixins' as *;
|
||||
|
||||
*,
|
||||
::before,
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../mixins';
|
||||
@use '../mixins' as *;
|
||||
|
||||
.menu-hamburger {
|
||||
width: 20px;
|
||||
|
@ -1,2 +1,2 @@
|
||||
@import './switch';
|
||||
@import './hamburger';
|
||||
@use './switch';
|
||||
@use './hamburger';
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../mixins';
|
||||
@use '../mixins' as *;
|
||||
|
||||
.switch {
|
||||
margin: 0;
|
||||
|
@ -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') {
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import '../mixins';
|
||||
@import './table-of-content';
|
||||
@use '../mixins' as *;
|
||||
@use './table-of-content';
|
||||
|
||||
.doc-content-wrapper {
|
||||
--toc-width: 144px;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../mixins';
|
||||
@use '../mixins' as *;
|
||||
|
||||
.toc-wrapper {
|
||||
display: none;
|
||||
|
@ -1,6 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@import './vars';
|
||||
@use './vars' as *;
|
||||
|
||||
@mixin with-bg {
|
||||
background-color: var(--bg-color);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../mixins';
|
||||
@use '../mixins' as *;
|
||||
|
||||
.navbar-menu {
|
||||
display: none;
|
||||
|
@ -1,8 +1,8 @@
|
||||
@import './mixins';
|
||||
@use './mixins' as *;
|
||||
|
||||
// import components
|
||||
|
||||
@import './nav/menu';
|
||||
@use './nav/menu';
|
||||
|
||||
.navbar-wrapper {
|
||||
@include with-bg;
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import './mixins';
|
||||
// @import './sidebar-link.scss';
|
||||
@use './mixins' as *;
|
||||
// @use './sidebar-link.scss';
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import './mixins';
|
||||
@use './mixins' as *;
|
||||
|
||||
.sub-nav {
|
||||
@include with-border;
|
||||
|
@ -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
|
||||
|
@ -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",
|
||||
|
1
packages/theme-chalk/.gitignore
vendored
1
packages/theme-chalk/.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
dist
|
||||
node_modules
|
||||
lib
|
||||
npm-debug*
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import 'mixins/mixins';
|
||||
@use 'mixins/mixins' as *;
|
||||
|
||||
@include b(affix) {
|
||||
@include m(fixed) {
|
||||
|
@ -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);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import 'mixins/mixins';
|
||||
@use 'mixins/mixins' as *;
|
||||
|
||||
@include b(aside) {
|
||||
--el-aside-width: 300px;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -1,3 +1,3 @@
|
||||
@import 'var.scss';
|
||||
@import 'common/transition.scss';
|
||||
@import 'icon.scss';
|
||||
@use 'var.scss';
|
||||
@use 'common/transition.scss';
|
||||
@use 'icon.scss';
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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) {
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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
@ -1,4 +1,4 @@
|
||||
@import 'mixins/mixins';
|
||||
@use 'mixins/mixins' as *;
|
||||
|
||||
@include b(container) {
|
||||
display: flex;
|
||||
|
@ -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';
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
@import '../common/var';
|
||||
@use '../mixins/mixins' as *;
|
||||
@use '../common/var' as *;
|
||||
|
||||
@include b(time-panel) {
|
||||
border-radius: 2px;
|
||||
|
@ -1,4 +1,5 @@
|
||||
@import '../common/var';
|
||||
@use '../mixins/mixins' as *;
|
||||
@use '../common/var' as *;
|
||||
|
||||
@include b(time-range-picker) {
|
||||
width: 354px;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
@import '../common/var';
|
||||
@use '../mixins/mixins' as *;
|
||||
@use '../common/var' as *;
|
||||
|
||||
@include b(year-table) {
|
||||
font-size: 12px;
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@use 'mixins/mixins' as *;
|
||||
@use 'common/var' as *;
|
||||
|
||||
@include b(descriptions) {
|
||||
@include e(label) {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@use 'mixins/mixins' as *;
|
||||
@use 'common/var' as *;
|
||||
|
||||
@mixin op-icon() {
|
||||
width: 44px;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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';
|
||||
|
@ -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)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@use 'mixins/mixins' as *;
|
||||
@use 'common/var' as *;
|
||||
|
||||
@include b(overlay) {
|
||||
#{& + '-root'} {
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@use 'mixins/mixins' as *;
|
||||
@use 'common/var' as *;
|
||||
|
||||
@include b(page-header) {
|
||||
display: flex;
|
||||
|
@ -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;
|
||||
|
@ -1,5 +1,5 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@use 'mixins/mixins' as *;
|
||||
@use 'common/var' as *;
|
||||
|
||||
@include b(popconfirm) {
|
||||
@include e(main) {
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user