mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
refactor(descriptions): clean cssr codes
* refactor(descriptions): clean cssr codes * chore: comment useless scss
This commit is contained in:
parent
c238666ae3
commit
441dcf5f46
@ -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');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
@ -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
|
||||
})
|
||||
])
|
||||
])
|
||||
|
@ -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
|
||||
|
@ -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'
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user