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

refactor(descriptions): clean cssr codes

Browse Source 
* refactor(descriptions): clean cssr codes

* chore: comment useless scss
This commit is contained in:
07akioni 2020-09-08 19:51:57 +08:00 committed by GitHub Enterprise
parent c238666ae3
commit 441dcf5f46
6 changed files with 233 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

378
src/_styles/Descriptions.scss
View File

@ -1,191 +1,191 @@
@import './mixins/mixins.scss';
// @import './mixins/mixins.scss';
@mixin descriptions-size-mixin ($size) {
@include m($size + '-size') {
@include b(descriptions-header) {
margin-bottom: map-get($--n-descriptions-padding, $size);
}
@include m(bordered) {
@include b(descriptions-table-wrapper) {
@include b(descriptions-table) {
@include b(descriptions-table-row) {
@include b(descriptions-table-header) {
padding: map-get($--n-descriptions-bordered-padding, $size);
}
@include b(descriptions-table-content) {
padding: map-get($--n-descriptions-bordered-padding, $size);
}
&:last-child {
@include b(descriptions-table-content) {
padding: map-get($--n-descriptions-bordered-padding, $size);
}
}
}
}
}
}
@include b(descriptions-table-wrapper) {
@include b(descriptions-table) {
@include b(descriptions-table-row) {
@include b(descriptions-table-content) {
padding: 0 0 map-get($--n-descriptions-padding, $size) 0;
}
&:last-child {
@include b(descriptions-table-content) {
padding: 0;
}
}
}
}
}
}
}
// @mixin descriptions-size-mixin ($size) {
// @include m($size + '-size') {
// @include b(descriptions-header) {
// margin-bottom: map-get($--n-descriptions-padding, $size);
// }
// @include m(bordered) {
// @include b(descriptions-table-wrapper) {
// @include b(descriptions-table) {
// @include b(descriptions-table-row) {
// @include b(descriptions-table-header) {
// padding: map-get($--n-descriptions-bordered-padding, $size);
// }
// @include b(descriptions-table-content) {
// padding: map-get($--n-descriptions-bordered-padding, $size);
// }
// &:last-child {
// @include b(descriptions-table-content) {
// padding: map-get($--n-descriptions-bordered-padding, $size);
// }
// }
// }
// }
// }
// }
// @include b(descriptions-table-wrapper) {
// @include b(descriptions-table) {
// @include b(descriptions-table-row) {
// @include b(descriptions-table-content) {
// padding: 0 0 map-get($--n-descriptions-padding, $size) 0;
// }
// &:last-child {
// @include b(descriptions-table-content) {
// padding: 0;
// }
// }
// }
// }
// }
// }
// }
@include themes-mixin {
@include b(descriptions) {
@include once {
@include descriptions-size-mixin('small');
@include descriptions-size-mixin('medium');
@include descriptions-size-mixin('large');
@include m(left-label-placement) {
@include b(descriptions-table-content) {
& > * {
vertical-align: top;
}
}
}
@include m(left-label-align) {
th {
text-align: left;
}
}
@include m(center-label-align) {
th {
text-align: center;
}
}
@include m(right-label-align) {
th {
text-align: right;
}
}
}
@include m(bordered) {
@include b(descriptions-table-wrapper) {
@include once {
border-radius: $--n-descriptions-border-radius;
overflow: hidden;
}
background: map-get($--descriptions-content-background-color, 'default');
border: 1px solid $--descriptions-border-color;
@include b(descriptions-table) {
@include b(descriptions-table-row) {
&:not(:last-child) {
@include b(descriptions-table-content) {
border-bottom: 1px solid $--descriptions-border-color;
}
@include b(descriptions-table-header) {
background-clip: padding-box;
border-bottom: 1px solid $--descriptions-border-color;
}
}
@include b(descriptions-table-header) {
@include once {
font-weight: 400;
}
background: $--descriptions-header-background-color;
&:not(:last-child) {
border-right: 1px solid $--descriptions-border-color;
}
}
@include b(descriptions-table-content) {
&:not(:last-child) {
border-right: 1px solid $--descriptions-border-color;
}
}
}
}
}
}
@include b(descriptions-header) {
@include once {
font-weight: $--n-strong-weight;
font-size: 18px;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--descriptions-header-text-color;
}
@include b(descriptions-table-wrapper) {
@include once {
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(descriptions-table) {
@include once {
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
}
@include b(descriptions-table-row) {
@include once {
box-sizing: border-box;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(descriptions-table-header) {
@include once {
font-weight: $--n-strong-weight;
line-height: 1.75;
display: table-cell;
box-sizing: border-box;
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;
}
color: $--descriptions-header-text-color;
}
@include b(descriptions-table-content) {
@include e(content) {
color: $--descriptions-content-text-color;
@include once {
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: inline-block;
}
}
@include e(label) {
color: $--descriptions-header-text-color;
@include once {
font-weight: $--n-strong-weight;
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: inline-block;
margin-right: 14px;
}
}
@include once {
vertical-align: top;
line-height: 1.75;
display: table-cell;
box-sizing: border-box;
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;
padding: 0 0 16px 0;
}
color: $--descriptions-content-text-color;
}
@include once {
&:last-child {
@include b(descriptions-table-content) {
padding: 0;
}
}
}
}
}
}
}
@include as-modal-content {
@include b(descriptions) {
@include m(bordered) {
@include b(descriptions-table-wrapper) {
background: map-get($--descriptions-content-background-color, 'modal');
}
}
}
}
}
// @include themes-mixin {
// @include b(descriptions) {
// @include once {
// @include descriptions-size-mixin('small');
// @include descriptions-size-mixin('medium');
// @include descriptions-size-mixin('large');
// @include m(left-label-placement) {
// @include b(descriptions-table-content) {
// & > * {
// vertical-align: top;
// }
// }
// }
// @include m(left-label-align) {
// th {
// text-align: left;
// }
// }
// @include m(center-label-align) {
// th {
// text-align: center;
// }
// }
// @include m(right-label-align) {
// th {
// text-align: right;
// }
// }
// }
// @include m(bordered) {
// @include b(descriptions-table-wrapper) {
// @include once {
// border-radius: $--n-descriptions-border-radius;
// overflow: hidden;
// }
// background: map-get($--descriptions-content-background-color, 'default');
// border: 1px solid $--descriptions-border-color;
// @include b(descriptions-table) {
// @include b(descriptions-table-row) {
// &:not(:last-child) {
// @include b(descriptions-table-content) {
// border-bottom: 1px solid $--descriptions-border-color;
// }
// @include b(descriptions-table-header) {
// background-clip: padding-box;
// border-bottom: 1px solid $--descriptions-border-color;
// }
// }
// @include b(descriptions-table-header) {
// @include once {
// font-weight: 400;
// }
// background: $--descriptions-header-background-color;
// &:not(:last-child) {
// border-right: 1px solid $--descriptions-border-color;
// }
// }
// @include b(descriptions-table-content) {
// &:not(:last-child) {
// border-right: 1px solid $--descriptions-border-color;
// }
// }
// }
// }
// }
// }
// @include b(descriptions-header) {
// @include once {
// font-weight: $--n-strong-weight;
// font-size: 18px;
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// }
// color: $--descriptions-header-text-color;
// }
// @include b(descriptions-table-wrapper) {
// @include once {
// transition: border-color .3s $--n-ease-in-out-cubic-bezier;
// }
// @include b(descriptions-table) {
// @include once {
// width: 100%;
// border-collapse: separate;
// border-spacing: 0;
// box-sizing: border-box;
// }
// @include b(descriptions-table-row) {
// @include once {
// box-sizing: border-box;
// transition: border-color .3s $--n-ease-in-out-cubic-bezier;
// }
// @include b(descriptions-table-header) {
// @include once {
// font-weight: $--n-strong-weight;
// line-height: 1.75;
// display: table-cell;
// box-sizing: border-box;
// 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;
// }
// color: $--descriptions-header-text-color;
// }
// @include b(descriptions-table-content) {
// @include e(content) {
// color: $--descriptions-content-text-color;
// @include once {
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// display: inline-block;
// }
// }
// @include e(label) {
// color: $--descriptions-header-text-color;
// @include once {
// font-weight: $--n-strong-weight;
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// display: inline-block;
// margin-right: 14px;
// }
// }
// @include once {
// vertical-align: top;
// line-height: 1.75;
// display: table-cell;
// box-sizing: border-box;
// 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;
// padding: 0 0 16px 0;
// }
// color: $--descriptions-content-text-color;
// }
// @include once {
// &:last-child {
// @include b(descriptions-table-content) {
// padding: 0;
// }
// }
// }
// }
// }
// }
// }
// @include as-modal-content {
// @include b(descriptions) {
// @include m(bordered) {
// @include b(descriptions-table-wrapper) {
// background: map-get($--descriptions-content-background-color, 'modal');
// }
// }
// }
// }
// }

42
src/descriptions/src/styles/themed-base.cssr.js
View File

@ -3,14 +3,14 @@ import { c, cTB, cB, cE, cM, insideModal } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
headerBackgroudColor,
headerColor,
headerTextColor,
headerFontWeight,
contentTextColor,
contentBackgroundColorDefault,
contentBackgroundColorModal,
contentColor,
contentColorModal,
borderColor,
borderRadius,
strongFontWeight
borderRadius
} = props.$local
const {
easeInOutCubicBezier
@ -53,7 +53,7 @@ export default c([
border-radius: ${borderRadius};
overflow: hidden;
`,
background: contentBackgroundColorDefault,
background: contentColor,
border: `1px solid ${borderColor}`
}, [
cB('descriptions-table', [
@ -63,15 +63,13 @@ export default c([
borderBottom: `1px solid ${borderColor}`
}),
cB('descriptions-table-header', {
backgroundClip: 'padding-box',
borderBottom: `1px solid ${borderColor}`
})
]),
cB('descriptions-table-header', {
raw: `
font-weight: 400;
`,
backgroundColor: headerBackgroudColor
fontWeight: 400,
backgroundClip: 'padding-box',
backgroundColor: headerColor
}, [
c('&:not(:last-child)', {
borderRight: `1px solid ${borderColor}`
@ -88,7 +86,7 @@ export default c([
]),
cB('descriptions-header', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${headerFontWeight};
font-size: 18px;
transition: color .3s ${easeInOutCubicBezier};
`,
@ -96,7 +94,9 @@ export default c([
}),
cB('descriptions-table-wrapper', {
raw: `
transition: border-color .3s ${easeInOutCubicBezier};
transition:
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
`
}, [
cB('descriptions-table', {
@ -115,11 +115,14 @@ export default c([
}, [
cB('descriptions-table-header', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${headerFontWeight};
line-height: 1.75;
display: table-cell;
box-sizing: border-box;
transition: color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
transition:
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
`,
color: headerTextColor
}),
@ -129,7 +132,10 @@ export default c([
line-height: 1.75;
display: table-cell;
box-sizing: border-box;
transition: color .3s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
transition:
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
padding: 0 0 16px 0;
`,
color: contentTextColor
@ -144,7 +150,7 @@ export default c([
]),
cE('label', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${headerFontWeight};
transition: color .3s ${easeInOutCubicBezier};
display: inline-block;
margin-right: 14px;
@ -167,7 +173,7 @@ export default c([
cTB('descriptions', [
cM('bordered', [
cB('descriptions-table-wrapper', {
background: contentBackgroundColorModal
background: contentColorModal
})
])
])

8
src/descriptions/src/styles/themed-size.cssr.js
View File

@ -1,11 +1,11 @@
import { c, cB, cM } from '../../../_utils/cssr'
import { c, cTB, cB, cM, createKey } from '../../../_utils/cssr'
export default c([
({ props }) => {
const size = props.$instance.size
const padding = props.$local.padding[size]
const borderedPadding = props.$local.borderedPadding[size]
return cB('descriptions', [
const padding = props.$local[createKey('padding', size)]
const borderedPadding = props.$local[createKey('paddingBordered', size)]
return cTB('descriptions', [
cM(`${size}-size`, [
cB('descriptions-header', {
marginBottom: padding

16
src/descriptions/styles/_common.js
View File

@ -1,12 +1,8 @@
export default {
borderedPadding: {
small: '8px 12px',
medium: '12px 16px',
large: '16px 24px'
},
padding: {
small: '8px',
medium: '12px',
large: '16px'
}
paddingBorderedSmall: '8px 12px',
paddingBorderedMedium: '12px 16px',
paddingBorderedLarge: '16px 24px',
paddingSmall: '8px',
paddingMedium: '12px',
paddingLarge: '16px'
}

10
src/descriptions/styles/dark.js
View File

@ -19,14 +19,14 @@ export default create({
} = base
return {
...commonVariables,
headerBackgroudColor: tableHeaderBackgroundOverlayColor,
headerColor: tableHeaderBackgroundOverlayColor,
headerTextColor: primaryTextOverlayColor,
headerFontWeight: strongFontWeight,
contentTextColor: secondaryTextOverlayColor,
contentBackgroundColorDefault: cardBackgroundColor,
contentBackgroundColorModal: modalBackgroundColor,
contentColor: cardBackgroundColor,
contentColorModal: modalBackgroundColor,
borderColor: dividerOverlayColor,
borderRadius: borderRadius,
strongFontWeight: strongFontWeight
borderRadius: borderRadius
}
}
})

10
src/descriptions/styles/light.js
View File

@ -20,14 +20,14 @@ export default create({
} = base
return {
...commonVariables,
headerBackgroudColor: composite(cardBackgroundColor, tableHeaderBackgroundOverlayColor),
headerColor: composite(cardBackgroundColor, tableHeaderBackgroundOverlayColor),
headerTextColor: primaryTextOverlayColor,
headerFontWeight: strongFontWeight,
contentTextColor: secondaryTextOverlayColor,
contentBackgroundColorDefault: cardBackgroundColor,
contentBackgroundColorModal: modalBackgroundColor,
contentColor: cardBackgroundColor,
contentColorModal: modalBackgroundColor,
borderColor: dividerOverlayColor,
borderRadius: borderRadius,
strongFontWeight: strongFontWeight
borderRadius: borderRadius
}
}
})