From 3181258403df6c04d065ee3c1dc13e91d3d73886 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Sun, 25 Jul 2021 16:27:07 +0800 Subject: [PATCH] refactor(border): migrate css var & simplify docs (#2663) --- commitlint.config.js | 35 ++++- packages/theme-chalk/src/autocomplete.scss | 4 +- packages/theme-chalk/src/button.scss | 4 +- packages/theme-chalk/src/card.scss | 4 +- packages/theme-chalk/src/check-tag.scss | 2 +- packages/theme-chalk/src/checkbox.scss | 6 +- packages/theme-chalk/src/color-picker.scss | 4 +- packages/theme-chalk/src/common/var.scss | 47 ++++--- .../src/date-picker/picker-panel.scss | 4 +- .../theme-chalk/src/date-picker/picker.scss | 2 +- packages/theme-chalk/src/dropdown.scss | 2 +- packages/theme-chalk/src/input-number.scss | 8 +- packages/theme-chalk/src/menu.scss | 8 +- packages/theme-chalk/src/popover.scss | 2 +- packages/theme-chalk/src/radio-button.scss | 8 +- packages/theme-chalk/src/radio.scss | 4 +- .../theme-chalk/src/select-dropdown-v2.scss | 2 +- packages/theme-chalk/src/select-dropdown.scss | 2 +- packages/theme-chalk/src/select-v2.scss | 6 +- packages/theme-chalk/src/select.scss | 2 +- packages/theme-chalk/src/slider.scss | 2 +- packages/theme-chalk/src/var.scss | 14 +- website/components/demo/border/radius-box.vue | 33 +++++ website/components/demo/border/shadow-box.vue | 30 ++++ website/demo-styles/border.scss | 5 +- website/docs/en-US/border.md | 128 ++++++----------- website/docs/es/border.md | 128 ++++++----------- website/docs/fr-FR/border.md | 128 ++++++----------- website/docs/jp/border.md | 132 ++++++------------ website/docs/zh-CN/border.md | 128 ++++++----------- website/util.js | 12 ++ 31 files changed, 407 insertions(+), 489 deletions(-) create mode 100644 website/components/demo/border/radius-box.vue create mode 100644 website/components/demo/border/shadow-box.vue diff --git a/commitlint.config.js b/commitlint.config.js index 780a6b7d60..a8f4625b01 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -1,7 +1,7 @@ // eslint-disable-next-line const importFrom = require('import-from') -function getPackages (context) { +function getPackages(context) { return Promise.resolve() .then(() => { const ctx = context || {} @@ -11,7 +11,9 @@ function getPackages (context) { return project.getPackages() }) .then(packages => { - return packages.map(pkg => pkg.name).map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name)) + return packages + .map(pkg => pkg.name) + .map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name)) }) } @@ -27,16 +29,26 @@ const scopes = [ 'other', 'typography', 'color', + 'border', ] module.exports = { rules: { - 'scope-enum': ctx => getPackages(ctx).then(packages => [2, 'always', [...packages, ...scopes]]), + 'scope-enum': ctx => + getPackages(ctx).then(packages => [ + 2, + 'always', + [...packages, ...scopes], + ]), 'body-leading-blank': [1, 'always'], 'footer-leading-blank': [1, 'always'], 'header-max-length': [2, 'always', 72], 'scope-case': [2, 'always', 'lower-case'], - 'subject-case': [1, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']], + 'subject-case': [ + 1, + 'never', + ['sentence-case', 'start-case', 'pascal-case', 'upper-case'], + ], 'subject-empty': [2, 'never'], 'subject-full-stop': [2, 'never', '.'], 'type-case': [2, 'always', 'lower-case'], @@ -44,7 +56,20 @@ module.exports = { 'type-enum': [ 2, 'always', - ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'improvement'], + [ + 'build', + 'chore', + 'ci', + 'docs', + 'feat', + 'fix', + 'perf', + 'refactor', + 'revert', + 'style', + 'test', + 'improvement', + ], ], }, } diff --git a/packages/theme-chalk/src/autocomplete.scss b/packages/theme-chalk/src/autocomplete.scss index 15cba64cea..eb42bb44b8 100644 --- a/packages/theme-chalk/src/autocomplete.scss +++ b/packages/theme-chalk/src/autocomplete.scss @@ -13,13 +13,13 @@ @include picker-popper( $--color-white, 1px solid var(--el-border-color-light), - $--box-shadow-light + var(--el-box-shadow-light) ); } } @include b(autocomplete-suggestion) { - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); box-sizing: border-box; @include e(wrap) { diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss index 8530010d1b..7ba0589e81 100644 --- a/packages/theme-chalk/src/button.scss +++ b/packages/theme-chalk/src/button.scss @@ -173,7 +173,7 @@ $--button: () !default; } } @include when(round) { - border-radius: 20px; + border-radius: var(--el-border-radius-round); padding: 12px 23px; } @include when(circle) { @@ -268,7 +268,7 @@ $--button: () !default; border-bottom-left-radius: map.get($--button-border-radius, 'default'); &.is-round { - border-radius: 20px; + border-radius: var(--el-border-radius-round); } &.is-circle { diff --git a/packages/theme-chalk/src/card.scss b/packages/theme-chalk/src/card.scss index e53ef78c6a..8a9d1a0499 100644 --- a/packages/theme-chalk/src/card.scss +++ b/packages/theme-chalk/src/card.scss @@ -10,13 +10,13 @@ transition: var(--el-transition-duration); @include when(always-shadow) { - box-shadow: $--box-shadow-light; + box-shadow: var(--el-box-shadow-light); } @include when(hover-shadow) { &:hover, &:focus { - box-shadow: $--box-shadow-light; + box-shadow: var(--el-box-shadow-light); } } diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss index ff4596975d..9972452e48 100644 --- a/packages/theme-chalk/src/check-tag.scss +++ b/packages/theme-chalk/src/check-tag.scss @@ -5,7 +5,7 @@ @include b(check-tag) { background-color: $--background-color-base; - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); color: var(--el-color-info); cursor: pointer; display: inline-block; diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss index d687a4d00c..02766b0037 100644 --- a/packages/theme-chalk/src/checkbox.scss +++ b/packages/theme-chalk/src/checkbox.scss @@ -350,7 +350,8 @@ &:first-child { .#{$namespace}-checkbox-button__inner { border-left: $--border-base; - border-radius: $--border-radius-base 0 0 $--border-radius-base; + border-radius: var(--el-border-radius-base) 0 0 + var(--el-border-radius-base); box-shadow: none !important; } } @@ -363,7 +364,8 @@ &:last-child { .#{$namespace}-checkbox-button__inner { - border-radius: 0 $--border-radius-base $--border-radius-base 0; + border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) + 0; } } diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss index 2e423bd862..6198174e2d 100644 --- a/packages/theme-chalk/src/color-picker.scss +++ b/packages/theme-chalk/src/color-picker.scss @@ -350,7 +350,7 @@ display: block; box-sizing: border-box; border: 1px solid #999; - border-radius: $--border-radius-small; + border-radius: var(--el-border-radius-small); width: 100%; height: 100%; text-align: center; @@ -395,7 +395,7 @@ padding: 6px; box-sizing: content-box; background-color: $--color-white; - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); box-shadow: $--dropdown-menu-box-shadow; &.#{$namespace}-popper { border: 1px solid var(--el-border-color-lighter); diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 32e39f9c5f..35bf633b52 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -153,17 +153,30 @@ $--border-color-hover: var(--el-color-text-placeholder) !default; $--border-base: $--border-width-base $--border-style-base map.get($--border-color, 'base') !default; /// borderRadius|1|Radius|0 -$--border-radius-base: 4px !default; -/// borderRadius|1|Radius|0 -$--border-radius-small: 2px !default; -/// borderRadius|1|Radius|0 -$--border-radius-circle: 100% !default; + +$--border-radius: () !default; +$--border-radius: map.merge( + $--border-radius, + ( + 'base': 4px, + 'small': 2px, + 'round': 20px, + 'circle': 100%, + ) +); // Box-shadow -/// boxShadow|1|Shadow|1 -$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default; -/// boxShadow|1|Shadow|1 -$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; +$--box-shadow: () !default; +$--box-shadow: map.merge( + $--box-shadow, + ( + 'base': ( + 0 2px 4px rgba(0, 0, 0, 0.12), + 0 0 6px rgba(0, 0, 0, 0.04), + ), + 'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1), + ) +); /* Typography -------------------------- */ @@ -205,7 +218,7 @@ $--radio-font-color: var(--el-color-text-regular) !default; $--radio-input-height: 14px !default; $--radio-input-width: 14px !default; /// borderRadius||Border|2 -$--radio-input-border-radius: $--border-radius-circle !default; +$--radio-input-border-radius: var(--el-border-radius-circle) !default; /// color||Color|0 $--radio-input-background-color: $--color-white !default; $--radio-input-border: $--border-base !default; @@ -294,7 +307,7 @@ $--select-group-height: 30px !default; $--select-group-font-size: 12px !default; $--select-dropdown-background: $--color-white !default; -$--select-dropdown-shadow: $--box-shadow-light !default; +$--select-dropdown-shadow: var(--el-box-shadow-light) !default; $--select-dropdown-empty-color: #999 !default; /// height||Other|4 $--select-dropdown-max-height: 274px !default; @@ -330,7 +343,7 @@ $--input-font-color: var(--el-color-text-regular) !default; $--input-border: $--border-base !default; $--input-border-color: map.get($--border-color, 'base') !default; /// borderRadius||Border|2 -$--input-border-radius: $--border-radius-base !default; +$--input-border-radius: var(--el-border-radius-base) !default; /// color||Color|0 $--input-background-color: $--color-white !default; /// color||Color|0 @@ -389,10 +402,10 @@ $--button-font-size: ( ); $--button-border-radius: ( - 'default': $--border-radius-base, - 'medium': $--border-radius-base, - 'small': #{$--border-radius-base - 1}, - 'mini': #{$--border-radius-base - 1}, + 'default': var(--el-border-radius-base), + 'medium': var(--el-border-radius-base), + 'small': calc(var(--el-border-radius-base) - 1px), + 'mini': calc(var(--el-border-radius-base) - 1px), ); $--button-padding-vertical: ( @@ -489,7 +502,7 @@ $--tree-expand-icon-color: var(--el-color-text-placeholder) !default; /* Dropdown -------------------------- */ -$--dropdown-menu-box-shadow: $--box-shadow-light !default; +$--dropdown-menu-box-shadow: var(--el-box-shadow-light) !default; $--dropdown-menuItem-hover-fill: map.get( $--colors, 'primary', diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss index 7a6f3e1d2c..fba7151884 100644 --- a/packages/theme-chalk/src/date-picker/picker-panel.scss +++ b/packages/theme-chalk/src/date-picker/picker-panel.scss @@ -4,14 +4,14 @@ position: relative; color: var(--el-color-text-regular); background: $--color-white; - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); line-height: 30px; .#{$namespace}-time-panel { margin: 5px 0; border: solid 1px $--datepicker-border-color; background-color: $--color-white; - box-shadow: $--box-shadow-light; + box-shadow: var(--el-box-shadow-light); } @include e((body, body-wrapper)) { diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss index 1ad19f3ce5..d57f55997e 100644 --- a/packages/theme-chalk/src/date-picker/picker.scss +++ b/packages/theme-chalk/src/date-picker/picker.scss @@ -9,7 +9,7 @@ @include picker-popper( $--color-white, 1px solid $--datepicker-border-color, - $--box-shadow-light + var(--el-box-shadow-light) ); } } diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss index bca665988f..b7962f376c 100644 --- a/packages/theme-chalk/src/dropdown.scss +++ b/packages/theme-chalk/src/dropdown.scss @@ -101,7 +101,7 @@ margin: 0; background-color: $--color-white; border: none; - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); box-shadow: none; @include e(item) { diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss index 5d4a08c4f1..a7493d4480 100644 --- a/packages/theme-chalk/src/input-number.scss +++ b/packages/theme-chalk/src/input-number.scss @@ -50,13 +50,13 @@ @include e(increase) { right: 1px; - border-radius: 0 $--border-radius-base $--border-radius-base 0; + border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0; border-left: $--border-base; } @include e(decrease) { left: 1px; - border-radius: $--border-radius-base 0 0 $--border-radius-base; + border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base); border-right: $--border-base; } @@ -128,7 +128,7 @@ } @include e(increase) { - border-radius: 0 $--border-radius-base 0 0; + border-radius: 0 var(--el-border-radius-base) 0 0; border-bottom: $--border-base; } @@ -139,7 +139,7 @@ left: auto; border-right: none; border-left: $--border-base; - border-radius: 0 0 $--border-radius-base 0; + border-radius: 0 0 var(--el-border-radius-base) 0; } @each $size in (medium, small, mini) { diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss index 13a7603cf8..4519c2a3cd 100644 --- a/packages/theme-chalk/src/menu.scss +++ b/packages/theme-chalk/src/menu.scss @@ -186,8 +186,8 @@ left: 100%; z-index: 10; border: 1px solid var(--el-border-color-light); - border-radius: $--border-radius-small; - box-shadow: $--box-shadow-light; + border-radius: var(--el-border-radius-small); + box-shadow: var(--el-box-shadow-light); } &.is-opened { @@ -206,8 +206,8 @@ min-width: 200px; border: none; padding: 5px 0; - border-radius: $--border-radius-small; - box-shadow: $--box-shadow-light; + border-radius: var(--el-border-radius-small); + box-shadow: var(--el-box-shadow-light); } } @include b(menu-item) { diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss index 526cff0e1e..849943fb34 100644 --- a/packages/theme-chalk/src/popover.scss +++ b/packages/theme-chalk/src/popover.scss @@ -14,7 +14,7 @@ line-height: 1.4; text-align: justify; font-size: $--popover-font-size; - box-shadow: $--box-shadow-light; + box-shadow: var(--el-box-shadow-light); word-break: break-all; @include m(plain) { diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss index cf2788390f..235c341bbc 100644 --- a/packages/theme-chalk/src/radio-button.scss +++ b/packages/theme-chalk/src/radio-button.scss @@ -51,7 +51,8 @@ &:first-child { .#{$namespace}-radio-button__inner { border-left: $--border-base; - border-radius: $--border-radius-base 0 0 $--border-radius-base; + border-radius: var(--el-border-radius-base) 0 0 + var(--el-border-radius-base); box-shadow: none !important; } } @@ -88,13 +89,14 @@ &:last-child { .#{$namespace}-radio-button__inner { - border-radius: 0 $--border-radius-base $--border-radius-base 0; + border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) + 0; } } &:first-child:last-child { .#{$namespace}-radio-button__inner { - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); } } diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss index 472fd7ffe7..dd653a7a9f 100644 --- a/packages/theme-chalk/src/radio.scss +++ b/packages/theme-chalk/src/radio.scss @@ -24,7 +24,7 @@ @include when(bordered) { padding: map.get($--radio-bordered-padding, 'default'); - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); border: $--border-base; box-sizing: border-box; height: map.get($--radio-bordered-height, 'default'); @@ -46,7 +46,7 @@ @each $size in (medium, small, mini) { &.is-bordered { padding: map.get($--radio-bordered-padding, $size); - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); height: map.get($--radio-bordered-height, $size); .#{$namespace}-radio__label { font-size: map.get($--button-font-size, $size); diff --git a/packages/theme-chalk/src/select-dropdown-v2.scss b/packages/theme-chalk/src/select-dropdown-v2.scss index 02ef72835f..ead78c050f 100644 --- a/packages/theme-chalk/src/select-dropdown-v2.scss +++ b/packages/theme-chalk/src/select-dropdown-v2.scss @@ -4,7 +4,7 @@ @include b(select-dropdown) { z-index: calc(var(--el-index-top) + 1); - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); box-sizing: border-box; .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list { diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss index 1d1342d468..c190368faf 100644 --- a/packages/theme-chalk/src/select-dropdown.scss +++ b/packages/theme-chalk/src/select-dropdown.scss @@ -4,7 +4,7 @@ @include b(select-dropdown) { z-index: calc(var(--el-index-top) + 1); - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); box-sizing: border-box; @include when(multiple) { diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss index 05a39821b1..b36ef2096f 100644 --- a/packages/theme-chalk/src/select-v2.scss +++ b/packages/theme-chalk/src/select-v2.scss @@ -26,7 +26,7 @@ $--input-inline-start: 7px !default; padding-top: 1px; padding-bottom: 1px; border: 1px solid var(--el-border-color-base); - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); transition: border-color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function); &:hover { @@ -213,7 +213,7 @@ $--input-inline-start: 7px !default; font-size: $--select-font-size; text-align: center; transform: rotateZ(180deg); - border-radius: $--border-radius-circle; + border-radius: var(--el-border-radius-circle); color: $--select-input-color; transition: var(--el-color-transition-base); @@ -234,7 +234,7 @@ $--input-inline-start: 7px !default; @include e(wrapper) { background-color: #fff; border: 1px solid #d9d9d9; - border-radius: $--border-radius-base; + border-radius: var(--el-border-radius-base); position: relative; transition: all var(--el-transition-duration) var(--el-ease-in-out-bezier-function); diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index 5c3cfc217c..ee503cce86 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -74,7 +74,7 @@ font-size: $--select-font-size; text-align: center; transform: rotateZ(180deg); - border-radius: $--border-radius-circle; + border-radius: var(--el-border-radius-circle); color: $--select-input-color; transition: var(--el-color-transition-base); diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss index 25ab5f64f5..6dd87d297e 100644 --- a/packages/theme-chalk/src/slider.scss +++ b/packages/theme-chalk/src/slider.scss @@ -147,7 +147,7 @@ position: absolute; height: $--slider-height; width: $--slider-height; - border-radius: $--border-radius-circle; + border-radius: var(--el-border-radius-circle); background-color: $--slider-stop-background-color; transform: translateX(-50%); } diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss index d469e4eee8..a77141624c 100644 --- a/packages/theme-chalk/src/var.scss +++ b/packages/theme-chalk/src/var.scss @@ -48,13 +48,17 @@ --el-border-color-hover: var(--el-color-text-placeholder); --el-border-base: var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base); - --el-border-radius-base: #{$--border-radius-base}; - --el-border-radius-small: #{$--border-radius-small}; - --el-border-radius-circle: #{$--border-radius-circle}; + + // --el-border-radius-#{$type} + @each $type in (base, small, round, circle) { + @include set-css-var-type('border-radius', $type, $--border-radius); + } // Box-shadow - --el-box-shadow-base: #{$--box-shadow-base}; - --el-box-shadow-light: #{$--box-shadow-light}; + // --el-box-shadow-#{$type} + @each $type in (base, light) { + @include set-css-var-type('box-shadow', $type, $--box-shadow); + } // Svg --el-svg-monochrome-grey: #dcdde0; diff --git a/website/components/demo/border/radius-box.vue b/website/components/demo/border/radius-box.vue new file mode 100644 index 0000000000..c1a8f0c7a3 --- /dev/null +++ b/website/components/demo/border/radius-box.vue @@ -0,0 +1,33 @@ + + + diff --git a/website/components/demo/border/shadow-box.vue b/website/components/demo/border/shadow-box.vue new file mode 100644 index 0000000000..8e940c9967 --- /dev/null +++ b/website/components/demo/border/shadow-box.vue @@ -0,0 +1,30 @@ + + + diff --git a/website/demo-styles/border.scss b/website/demo-styles/border.scss index 57df683321..7f466930b6 100644 --- a/website/demo-styles/border.scss +++ b/website/demo-styles/border.scss @@ -33,12 +33,9 @@ margin: 10px 0; } .demo-radius .radius { - height: 60px; + height: 40px; width: 70%; border: 1px solid #d7dae2; border-radius: 0; margin-top: 20px; } -.demo-radius .radius-30 { - border-radius: 30px; -} diff --git a/website/docs/en-US/border.md b/website/docs/en-US/border.md index f31ae8b4c0..18843395d8 100644 --- a/website/docs/en-US/border.md +++ b/website/docs/en-US/border.md @@ -1,52 +1,49 @@ ## Border @@ -85,47 +82,10 @@ There are few border styles to choose. There are few radius styles to choose. - - -
No Radius
-
border-radius: 0px
-
- - -
Small Radius
-
border-radius: {{borderRadiusSmall}}
-
- - -
Large Radius
-
border-radius: {{borderRadiusBase}}
-
- - -
Round Radius
-
border-radius: 30px
-
- - + ### Shadow There are few shadow styles to choose. -
-Basic Shadow box-shadow: {{boxShadowBase}} - -
-Light Shadow box-shadow: {{boxShadowLight}} + diff --git a/website/docs/es/border.md b/website/docs/es/border.md index 04e0ef4149..3847ed49cb 100644 --- a/website/docs/es/border.md +++ b/website/docs/es/border.md @@ -1,52 +1,49 @@ ## Border @@ -85,47 +82,10 @@ Hay pocos estilos de borde para elegir. Hay pocos estilos de radio para elegir. - - -
No Radius
-
border-radius: 0px
-
- - -
Small Radius
-
border-radius: {{borderRadiusSmall}}
-
- - -
Large Radius
-
border-radius: {{borderRadiusBase}}
-
- - -
Round Radius
-
border-radius: 30px
-
- - + ### Shadow Hay pocos estilos de sombra para elegir. -
-Basic Shadow box-shadow: {{boxShadowBase}} - -
-Light Shadow box-shadow: {{boxShadowLight}} + diff --git a/website/docs/fr-FR/border.md b/website/docs/fr-FR/border.md index 953d91c80a..d18ec112c4 100644 --- a/website/docs/fr-FR/border.md +++ b/website/docs/fr-FR/border.md @@ -1,52 +1,49 @@ ## Bordure @@ -85,47 +82,10 @@ Il y a plusieurs styles de bordure que vous pouvez choisir. Il y a plusieurs styles de radius que vous pouvez choisir. - - -
Pas de radius
-
border-radius: 0px
-
- - -
Petit radius
-
border-radius: {{borderRadiusSmall}}
-
- - -
Grand radius
-
border-radius: {{borderRadiusBase}}
-
- - -
Radius rond
-
border-radius: 30px
-
- - + ### Ombres Il y a plusieurs styles d'ombres que vous pouvez choisir. -
-Ombre de base, box-shadow: {{boxShadowBase}} - -
-Ombre légère, box-shadow: {{boxShadowLight}} + diff --git a/website/docs/jp/border.md b/website/docs/jp/border.md index 87ff086083..da9f54298a 100644 --- a/website/docs/jp/border.md +++ b/website/docs/jp/border.md @@ -1,61 +1,58 @@ ## Border -ボタンやカード、ポップアップなどで使用できるborderを標準化しています。 +ボタンやカード、ポップアップなどで使用できる border を標準化しています。 ### Border -borderのスタイルはいくつかあります。 +border のスタイルはいくつかあります。 @@ -85,47 +82,10 @@ borderのスタイルはいくつかあります。 いくつかの半径(radius)のスタイルがあります。 - - -
No Radius
-
border-radius: 0px
-
- - -
Small Radius
-
border-radius: {{borderRadiusSmall}}
-
- - -
Large Radius
-
border-radius: {{borderRadiusBase}}
-
- - -
Round Radius
-
border-radius: 30px
-
- - + ### 影 シャドウスタイルの選択肢はほとんどありません。 -
-Basic Shadow box-shadow: {{boxShadowBase}} - -
-Light Shadow box-shadow: {{boxShadowLight}} + diff --git a/website/docs/zh-CN/border.md b/website/docs/zh-CN/border.md index 096f1d7f2d..222abe4b2f 100644 --- a/website/docs/zh-CN/border.md +++ b/website/docs/zh-CN/border.md @@ -1,52 +1,49 @@ ## Border 边框 @@ -85,47 +82,10 @@ 我们提供了以下几种圆角样式，以供选择。 - - -
无圆角
-
border-radius: 0px
-
- - -
小圆角
-
border-radius: {{borderRadiusSmall}}
-
- - -
大圆角
-
border-radius: {{borderRadiusBase}}
-
- - -
圆形圆角
-
border-radius: 30px
-
- - + ### 投影 我们提供了以下几种投影样式，以供选择。 -
-基础投影 box-shadow: {{boxShadowBase}} - -
-浅色投影 box-shadow: {{boxShadowLight}} + diff --git a/website/util.js b/website/util.js index daddf0a514..88a5717a74 100644 --- a/website/util.js +++ b/website/util.js @@ -40,3 +40,15 @@ export function formatType(type) { .map(item => item.charAt(0).toUpperCase() + item.slice(1)) .join(' ') } + +/** + * get css var value + * @param {namespace} namespace + * @param {string} type + * @returns + */ +export function getCssVarValue(namespace, type) { + return getComputedStyle(document.documentElement).getPropertyValue( + `--el-${namespace}-${type}`, + ) +}