From 0613160ecb88a35337fa1c2f0371b6b70288ccac Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 28 Feb 2020 22:57:10 +0800 Subject: [PATCH] style: unify border-radius --- styles/Alert.scss | 2 +- styles/Avatar.scss | 2 +- styles/BaseSelectMenu.scss | 2 +- styles/Card.scss | 2 +- styles/Cascader.scss | 10 +++---- styles/Code.scss | 1 - styles/DataTable.scss | 8 +++--- styles/DatePicker.scss | 2 +- styles/Descriptions.scss | 2 +- styles/InputNumber.scss | 2 +- styles/List.scss | 2 +- styles/Notification.scss | 2 +- styles/Popover.scss | 2 +- styles/Radio.scss | 16 +++++------ styles/Table.scss | 4 +-- styles/Tabs.scss | 2 +- styles/Tag.scss | 2 +- styles/TimePicker.scss | 2 +- styles/Tooltip.scss | 2 +- styles/Transfer.scss | 8 +++--- styles/Typography.scss | 2 +- styles/Upload.scss | 4 +-- styles/themes/common.scss | 58 +++++++++++++++++++++++++++++++++++--- 23 files changed, 94 insertions(+), 45 deletions(-) diff --git a/styles/Alert.scss b/styles/Alert.scss index bda17ee70..dcc8c70cd 100644 --- a/styles/Alert.scss +++ b/styles/Alert.scss @@ -32,7 +32,7 @@ &.#{block(fade-in-height-expand-transition)}-leave-to, &.#{block(fade-in-height-expand-transition)}-enter { transform: scale(.9); } - border-radius: 6px; + border-radius: $--n-alert-border-radius; position: relative; transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier; @include e(icon) { diff --git a/styles/Avatar.scss b/styles/Avatar.scss index b229aa682..4963a6fb7 100644 --- a/styles/Avatar.scss +++ b/styles/Avatar.scss @@ -33,7 +33,7 @@ font-size: 14px; display: inline-block; position: relative; - border-radius: 6px; + border-radius: $--n-avatar-border-radius; overflow: hidden; text-align: center; img { diff --git a/styles/BaseSelectMenu.scss b/styles/BaseSelectMenu.scss index 8e31b1082..2d60fb7ac 100644 --- a/styles/BaseSelectMenu.scss +++ b/styles/BaseSelectMenu.scss @@ -40,7 +40,7 @@ margin-bottom: 4px; z-index: 0; position: relative; - border-radius: 6px; + border-radius: $--n-base-select-menu-border-radius; transition: background-color .3s $--n-ease-in-out-cubic-bezier; overflow: hidden; @include b(base-select-menu-option-wrapper) { diff --git a/styles/Card.scss b/styles/Card.scss index de373ad4c..d48834bb5 100644 --- a/styles/Card.scss +++ b/styles/Card.scss @@ -78,7 +78,7 @@ box-sizing: border-box; position: relative; transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; - border-radius: 6px; + border-radius: $--n-card-border-radius; @include card-size-mixin('small'); @include card-size-mixin('medium'); @include card-size-mixin('large'); diff --git a/styles/Cascader.scss b/styles/Cascader.scss index 26bb5cc6c..d2e50eb33 100644 --- a/styles/Cascader.scss +++ b/styles/Cascader.scss @@ -14,7 +14,7 @@ margin: 4px 0; display: flex; flex-wrap: nowrap; - border-radius: 6px; + border-radius: $--n-cascader-border-radius; overflow: hidden; /** * if width not set, cascader select menu's inner scroll area's width is @@ -35,12 +35,12 @@ position: relative; } &:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; + border-top-left-radius: $--n-cascader-border-radius; + border-bottom-left-radius: $--n-cascader-border-radius; } &:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; + border-top-right-radius: $--n-cascader-border-radius; + border-bottom-right-radius: $--n-cascader-border-radius; } } &:not(:first-child) { diff --git a/styles/Code.scss b/styles/Code.scss index f6210c369..288686bea 100644 --- a/styles/Code.scss +++ b/styles/Code.scss @@ -110,7 +110,6 @@ line-height: 1.3em; color: #abb2bf; background: #282c34; - border-radius: 5px; } .hljs-keyword, .hljs-operator { color: #F92672; diff --git a/styles/DataTable.scss b/styles/DataTable.scss index cb0b2f6f2..f17fa25df 100644 --- a/styles/DataTable.scss +++ b/styles/DataTable.scss @@ -11,8 +11,8 @@ @include once { position: relative; transition: border-color .3s $--n-ease-in-out-cubic-bezier; - border-top-left-radius: 6px; - border-top-right-radius: 6px; + border-top-left-radius: $--n-data-table-border-radius; + border-top-right-radius: $--n-data-table-border-radius; overflow: hidden; line-height: 1.75; } @@ -213,8 +213,8 @@ @include b(data-table-tables-wrapper) { overflow: hidden; border: 1px solid $--data-table-border-color; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; + border-bottom-left-radius: $--n-data-table-border-radius; + border-bottom-right-radius: $--n-data-table-border-radius; @include b(data-table-table){ @include b(data-table-tr) { &:last-child { diff --git a/styles/DatePicker.scss b/styles/DatePicker.scss index 556d2fb44..e3a08ead5 100644 --- a/styles/DatePicker.scss +++ b/styles/DatePicker.scss @@ -34,7 +34,7 @@ margin-top: 4px; margin-bottom: 4px; width: 350px; - border-radius: 6px; + border-radius: $--n-date-picker-border-radius; @include b(time-picker) { z-index: 1; } diff --git a/styles/Descriptions.scss b/styles/Descriptions.scss index 098e90eae..b412c9dda 100644 --- a/styles/Descriptions.scss +++ b/styles/Descriptions.scss @@ -73,7 +73,7 @@ @include m(bordered) { @include b(descriptions-table-wrapper) { @include once { - border-radius: 6px; + border-radius: $--n-descriptions-border-radius; overflow: hidden; } border: 1px solid $--descriptions-border-color; diff --git a/styles/InputNumber.scss b/styles/InputNumber.scss index e26a15a85..9318b879c 100644 --- a/styles/InputNumber.scss +++ b/styles/InputNumber.scss @@ -147,7 +147,7 @@ border: none; width: 100%; text-align: center; - padding: 0 34px; + padding: 0 28px; } background-color: map-get($--input-number-background-color, 'default'); box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default'); diff --git a/styles/List.scss b/styles/List.scss index 179e1ff9d..3157c5b0d 100644 --- a/styles/List.scss +++ b/styles/List.scss @@ -15,7 +15,7 @@ background-color: $--list-background-color; @include m(bordered) { @include once { - border-radius: 6px; + border-radius: $--n-list-border-radius; } border: 1px solid $--list-border-color; @include b(list-item) { diff --git a/styles/Notification.scss b/styles/Notification.scss index ffc7f373a..2d9906088 100644 --- a/styles/Notification.scss +++ b/styles/Notification.scss @@ -77,7 +77,7 @@ padding-left: 16px; padding-right: 16px; width: 365px; - border-radius: 6px; + border-radius: $--n-notification-border-radius; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18); box-sizing: border-box; opacity: 1; diff --git a/styles/Popover.scss b/styles/Popover.scss index 411dbae90..0701aefb0 100644 --- a/styles/Popover.scss +++ b/styles/Popover.scss @@ -25,7 +25,7 @@ transform-origin: inherit; transform: $--n-transform-debounce-scale; position: relative; - border-radius: 6px; + border-radius: $--n-popover-border-radius; font-size: 13px; @include b(popover-arrow) { transition: border-color .3s $--n-ease-in-out-cubic-bezier; diff --git a/styles/Radio.scss b/styles/Radio.scss index b11f16a88..7e5115905 100644 --- a/styles/Radio.scss +++ b/styles/Radio.scss @@ -172,22 +172,22 @@ &:first-child { @include once { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; + border-top-left-radius: $--n-radio-button-border-radius; + border-bottom-left-radius: $--n-radio-button-border-radius; @include e(border-mask) { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; + border-top-left-radius: $--n-radio-button-border-radius; + border-bottom-left-radius: $--n-radio-button-border-radius; } } border-left: 1px solid map-get($--radio-button-border-color, 'default'); } &:last-child { @include once { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; + border-top-right-radius: $--n-radio-button-border-radius; + border-bottom-right-radius: $--n-radio-button-border-radius; @include e(border-mask) { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; + border-top-right-radius: $--n-radio-button-border-radius; + border-bottom-right-radius: $--n-radio-button-border-radius; } } border-right: 1px solid map-get($--radio-button-border-color, 'default'); diff --git a/styles/Table.scss b/styles/Table.scss index 4fed0eda0..b76bff354 100644 --- a/styles/Table.scss +++ b/styles/Table.scss @@ -6,7 +6,7 @@ line-height: 1.75; font-size: 14px; width: 100%; - border-radius: 6px 6px 0 0; + border-radius: $--n-popover-border-radius $--n-popover-border-radius 0 0; text-align: left; border-collapse: separate; border-spacing: 0; @@ -59,7 +59,7 @@ } @include m(bordered) { border: 1px solid $--table-border-color; - border-radius: 6px; + border-radius: $--n-popover-border-radius; @include e(tr) { &:last-child { @include e(td) { diff --git a/styles/Tabs.scss b/styles/Tabs.scss index 9e5f207e9..772094414 100644 --- a/styles/Tabs.scss +++ b/styles/Tabs.scss @@ -204,7 +204,7 @@ padding: 0 16px; position: relative; vertical-align: bottom; - border-radius: 6px; + border-radius: $--n-tabs-border-radius; border: 1px solid transparent; } @include e(label) { diff --git a/styles/Tag.scss b/styles/Tag.scss index a4e7723e1..105abb14d 100644 --- a/styles/Tag.scss +++ b/styles/Tag.scss @@ -71,7 +71,7 @@ white-space: nowrap; position: relative; padding: 0 7px; - border-radius: 4px; + border-radius: $--n-tag-border-radius; box-sizing: border-box; cursor: default; display: inline-block; diff --git a/styles/TimePicker.scss b/styles/TimePicker.scss index 561ec615a..faf4f8774 100644 --- a/styles/TimePicker.scss +++ b/styles/TimePicker.scss @@ -34,7 +34,7 @@ @include once { outline: none; font-size: 12px; - border-radius: 6px; + border-radius: $--n-time-picker-border-radius; margin: 4px 0; min-width: 140px; overflow: hidden; diff --git a/styles/Tooltip.scss b/styles/Tooltip.scss index 8580f419a..41f73fe25 100644 --- a/styles/Tooltip.scss +++ b/styles/Tooltip.scss @@ -7,7 +7,7 @@ @include once { padding: 8px 14px; white-space: nowrap; - border-radius: 6px; + border-radius: $--n-tooltip-border-radius; } box-shadow: $--tooltip-box-shadow; background-color: $--tooltip-background-color; diff --git a/styles/Transfer.scss b/styles/Transfer.scss index 70fa31df4..7d7de005b 100644 --- a/styles/Transfer.scss +++ b/styles/Transfer.scss @@ -75,7 +75,7 @@ width: 182px; height: 311px; transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; - border-radius: 6px; + border-radius: $--n-transfer-border-radius; @include b(virtual-scroller) { height: 100%; scrollbar-width: none; @@ -94,7 +94,7 @@ margin: -1px -1px 0 -1px; transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; display: flex; - border-radius: 6px 6px 0 0; + border-radius: $--n-transfer-border-radius $--n-transfer-border-radius 0 0; align-items: center; height: 40px; background-clip: padding-box; @@ -159,8 +159,8 @@ height: 272px; display: flex; flex-direction: column; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; + border-bottom-right-radius: $--n-transfer-border-radius; + border-bottom-left-radius: $--n-transfer-border-radius; @include b(transfer-list-flex-container) { flex: 1; position: relative; diff --git a/styles/Typography.scss b/styles/Typography.scss index f0b39c06b..9b37397f1 100644 --- a/styles/Typography.scss +++ b/styles/Typography.scss @@ -169,7 +169,7 @@ border-color .3s $--n-ease-in-out-cubic-bezier; box-sizing: border-box; padding: .15em .45em 0 .45em; - border-radius: 3px; + border-radius: $--n-typography-code-border-radius; font-size: .9em; } color: map-get($--typography-code-text-color, 'default'); diff --git a/styles/Upload.scss b/styles/Upload.scss index fd2746945..92c310d0c 100644 --- a/styles/Upload.scss +++ b/styles/Upload.scss @@ -24,7 +24,7 @@ box-sizing: border-box; width: 100%; text-align: center; - border-radius: 6px; + border-radius: $--n-upload-border-radius; padding: 24px; transition: border-color .3s $--n-ease-in-out-cubic-bezier, @@ -49,7 +49,7 @@ cursor: default; padding: 0px 12px 0 6px; transition: background-color .3s $--n-ease-in-out-cubic-bezier; - border-radius: 6px; + border-radius: $--n-upload-border-radius; @include b(progress) { @include fade-in-height-expand-transition($fold-padding: true); box-sizing: border-box; diff --git a/styles/themes/common.scss b/styles/themes/common.scss index 4f773ccd1..fb4cabe7d 100644 --- a/styles/themes/common.scss +++ b/styles/themes/common.scss @@ -7,6 +7,8 @@ $--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1); $--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1); $--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1); +$--n-border-radius: 4px; + $--n-height: ( "tiny": 22px, "small": 28px, @@ -33,8 +35,15 @@ $--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1); $--n-popmenu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global; + +/** alert */ +$--n-alert-border-radius: $--n-border-radius; + +/** avatar */ +$--n-avatar-border-radius: $--n-border-radius; + /** button */ -$--n-button-border-radius: 6px; +$--n-button-border-radius: $--n-border-radius; $--n-button-font-size: ( "tiny": 12px, "small": 14px, @@ -64,9 +73,13 @@ $--n-button-icon-size: ( $--n-base-loading-stroke-dashoffset: 500; /** base selection */ -$--n-base-selection-border-radius: 6px; +$--n-base-selection-border-radius: $--n-border-radius; + +/** base select menu */ +$--n-base-select-menu-border-radius: $--n-border-radius; /** card */ +$--n-card-border-radius: $--n-border-radius; $--n-card-margin-left: ( 'small': 16px, 'medium': 24px, @@ -88,7 +101,17 @@ $--n-card-margin-bottom: ( 'huge': 20px ); +/** cascader */ +$--n-cascader-border-radius: $--n-border-radius; + +/** data table */ +$--n-data-table-border-radius: $--n-border-radius; + +/** date pcicker */ +$--n-date-picker-border-radius: $--n-border-radius; + /** descriptions */ +$--n-descriptions-border-radius: $--n-border-radius; $--n-descriptions-bordered-padding: ( 'small': (8px 12px), 'medium': (12px 16px), @@ -101,16 +124,26 @@ $--n-descriptions-padding: ( ); /** input number */ -$--n-input-number-border-radius: 6px; +$--n-input-number-border-radius: $--n-border-radius; /** input */ $--n-input-icon-size: 20px; -$--n-input-border-radius: 6px; +$--n-input-border-radius: $--n-border-radius; + +/** list */ +$--n-list-border-radius: $--n-border-radius; + +/** notification */ +$--n-notification-border-radius: $--n-border-radius; /** popover */ +$--n-popover-border-radius: $--n-border-radius; $--n-popover-arrow-width: 6px; $--n-popover-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12) !global; +/** radio */ +$--n-radio-button-border-radius: $--n-border-radius; + /** slider */ $--n-slider-rail-height: 4px; $--n-slider-dot-size: 8px; @@ -138,6 +171,7 @@ $--n-steps-indicator-icon-size: ( ); /** tab */ +$--n-tabs-border-radius: $--n-border-radius; $--n-tabs-tab-font-size: ( 'small': 13px, 'medium': 14px, @@ -145,6 +179,9 @@ $--n-tabs-tab-font-size: ( 'huge': 18px ); +/** tag */ +$--n-tag-border-radius: 3px; + /** timeline */ $--n-timeline-header-font-size: ( 'medium': 14px, @@ -156,7 +193,17 @@ $--n-timeline-header-margin-top: ( 'large': -1px ); +/** time picker */ +$--n-time-picker-border-radius: $--n-border-radius; + +/** tooltip */ +$--n-tooltip-border-radius: $--n-border-radius; + +/** transfer */ +$--n-transfer-border-radius: $--n-border-radius; + /** typography */ +$--n-typography-code-border-radius: 3px; $--n-typography-header-font-size: ( '1': 28px, '2': 24px, @@ -192,3 +239,6 @@ $--n-typography-header-bar-width: ( '5': 3px, '6': 3px ); + +/** upload */ +$--n-upload-border-radius: $--n-border-radius; \ No newline at end of file