javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scrollbar): migrate css var (#2698)

Browse Source
This commit is contained in:
云游君
2021-07-26 19:58:19 +08:00
committed by GitHub
parent 16a45e6001
commit 6bdff00285
7 changed files with 63 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/theme-chalk/src/common/var.scss
View File

@@ -580,14 +580,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
/* Scrollbar
--------------------------*/
$--scrollbar-background-color: rgba(
var(--el-text-color-secondary),
0.3
) !default;
$--scrollbar-hover-background-color: rgba(
var(--el-text-color-secondary),
0.5
) !default;
// refactor with css3 var
// See packages/theme-chalk/src/scrollbar.scss
/* Carousel
--------------------------*/

13
packages/theme-chalk/src/scrollbar.scss
View File

@@ -1,6 +1,13 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
--el-scrollbar-opacity: 0.3;
--el-scrollbar-background-color: var(--el-text-color-secondary);
--el-scrollbar-hover-opacity: 0.5;
--el-scrollbar-hover-background-color: var(--el-text-color-secondary);
}
@include b(scrollbar) {
overflow: hidden;
position: relative;
@@ -25,11 +32,13 @@
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: $--scrollbar-background-color;
background-color: var(--el-scrollbar-background-color);
transition: var(--el-transition-duration) background-color;
opacity: var(--el-scrollbar-opacity);
&:hover {
background-color: $--scrollbar-hover-background-color;
background-color: var(--el-scrollbar-hover-background-color);
opacity: var(--el-scrollbar-hover-opacity);
}
}

21
website/docs/en-US/config-provider.md
View File

@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
```html
<div>
<el-config-provider :locale="locale2">
<el-color-picker :modelValue="''" style="vertical-align: middle;">
<el-color-picker :modelValue="''" style="vertical-align: middle;" />
</el-config-provider>
<el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: '确定',
clear: '清空',
},
}
},
},
locale2: {
name: 'en',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: 'Confirm',
clear: 'Clear',
},
}
}
},
},
}
},
methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
const temp = this.locale1
this.locale1 = this.locale2
this.locale2 = temp
}
}
},
},
}
</script>
```
:::
### ConfigProvider Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |

21
website/docs/es/config-provider.md
View File

@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
```html
<div>
<el-config-provider :locale="locale1">
<el-color-picker :modelValue="''" style="vertical-align: middle;">
<el-color-picker :modelValue="''" style="vertical-align: middle;" />
</el-config-provider>
<el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: 'Confirmar',
clear: 'Despejar',
},
}
},
},
locale2: {
name: 'en',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: 'Confirm',
clear: 'Clear',
},
}
}
},
},
}
},
methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
const temp = this.locale1
this.locale1 = this.locale2
this.locale2 = temp
}
}
},
},
}
</script>
```
:::
### ConfigProvider Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |

21
website/docs/fr-FR/config-provider.md
View File

@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
```html
<div>
<el-config-provider :locale="locale1">
<el-color-picker :modelValue="''" style="vertical-align: middle;">
<el-color-picker :modelValue="''" style="vertical-align: middle;" />
</el-config-provider>
<el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: 'OK',
clear: 'Effacer',
},
}
},
},
locale2: {
name: 'en',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: 'Confirm',
clear: 'Clear',
},
}
}
},
},
}
},
methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
const temp = this.locale1
this.locale1 = this.locale2
this.locale2 = temp
}
}
},
},
}
</script>
```
:::
### ConfigProvider Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |

21
website/docs/jp/config-provider.md
View File

@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
```html
<div>
<el-config-provider :locale="locale1">
<el-color-picker :modelValue="''" style="vertical-align: middle;">
<el-color-picker :modelValue="''" style="vertical-align: middle;" />
</el-config-provider>
<el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: 'はい',
clear: 'クリア',
},
}
},
},
locale2: {
name: 'zh-cn',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
confirm: '确定',
clear: '清除',
},
}
}
},
},
}
},
methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
const temp = this.locale1
this.locale1 = this.locale2
this.locale2 = temp
}
}
},
},
}
</script>
```
:::
### ConfigProvider Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |

21
website/docs/zh-CN/config-provider.md
View File

@@ -11,7 +11,7 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
```html
<div>
<el-config-provider :locale="locale1">
<el-color-picker :modelValue="''" style="vertical-align: middle;">
<el-color-picker :modelValue="''" style="vertical-align: middle;" />
</el-config-provider>
<el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
切换语言
@@ -30,7 +30,7 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
confirm: '确定',
clear: '清空',
},
}
},
},
locale2: {
name: 'en',
@@ -39,8 +39,8 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
confirm: 'Confirm',
clear: 'Clear',
},
}
}
},
},
}
},
methods: {
@@ -48,18 +48,17 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
const temp = this.locale1
this.locale1 = this.locale2
this.locale2 = temp
}
}
},
},
}
</script>
```
:::
### ConfigProvider 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
| locale | 翻译文本对象 | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
| locale | 翻译文本对象 | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
| i18n | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | - | - |