mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: unify border-radius

Browse Source
This commit is contained in:
07akioni 2020-02-28 22:57:10 +08:00
parent ee60e66151
commit 0613160ecb
23 changed files with 94 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styles/Alert.scss
View File

@ -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) {

2
styles/Avatar.scss
View File

@ -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 {

2
styles/BaseSelectMenu.scss
View File

@ -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) {

2
styles/Card.scss
View File

@ -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');

10
styles/Cascader.scss
View File

@ -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) {

1
styles/Code.scss
View File

@ -110,7 +110,6 @@
line-height: 1.3em;
color: #abb2bf;
background: #282c34;
border-radius: 5px;
}
.hljs-keyword, .hljs-operator {
color: #F92672;

8
styles/DataTable.scss
View File

@ -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 {

2
styles/DatePicker.scss
View File

@ -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;
}

2
styles/Descriptions.scss
View File

@ -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;

2
styles/InputNumber.scss
View File

@ -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');

2
styles/List.scss
View File

@ -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) {

2
styles/Notification.scss
View File

@ -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;

2
styles/Popover.scss
View File

@ -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;

16
styles/Radio.scss
View File

@ -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');

4
styles/Table.scss
View File

@ -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) {

2
styles/Tabs.scss
View File

@ -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) {

2
styles/Tag.scss
View File

@ -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;

2
styles/TimePicker.scss
View File

@ -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;

2
styles/Tooltip.scss
View File

@ -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;

8
styles/Transfer.scss
View File

@ -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;

2
styles/Typography.scss
View File

@ -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');

4
styles/Upload.scss
View File

@ -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;

58
styles/themes/common.scss
View File

@ -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;