mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-27 05:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(divider): clean cssr codes

Browse Source
This commit is contained in:
07akioni 2020-08-10 20:56:51 +08:00
parent a77fabf16f
commit bf74e55f70
8 changed files with 115 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/_styles/Divider.scss
View File

@ -1,84 +1,84 @@
@import './mixins/mixins.scss';
// @import './mixins/mixins.scss';
@include themes-mixin {
@include b(divider) {
@include once {
position: relative;
display: flex;
width: 100%;
box-sizing: border-box;
font-size: 16px;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
@include not-m(vertical) {
margin-top: 24px;
margin-bottom: 24px;
@include not-m(no-title) {
display: flex;
align-items: center;
}
}
@include e(title) {
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: flex;
align-items: center;
margin-left: 12px;
margin-right: 12px;
white-space: nowrap;
font-weight: $--n-strong-weight;
}
@include m(title-position-left) {
@include e(line) {
@include m(left) {
width: 28px;
}
}
}
@include m(title-position-right) {
@include e(line) {
@include m(right) {
width: 28px;
}
}
}
@include m(dashed) {
@include e(line) {
background-color: transparent;
height: 0px;
width: 100%;
border-style: dashed;
border-width: 1px 0 0;
}
}
@include m(vertical) {
display: inline-block;
height: 1em;
margin: 0 8px;
vertical-align: middle;
width: 1px;
}
}
color: $--divider-text-color;
@include once {
@include e(line) {
border: none;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
height: 1px;
width: 100%;
margin: 0;
}
}
@include not-m(dashed) {
@include e(line) {
background-color: $--divider-border-color;
}
}
@include m(dashed) {
@include e(line) {
border-color: $--divider-border-color;
}
}
@include m(vertical) {
background-color: $--divider-border-color;
}
}
}
// @include themes-mixin {
// @include b(divider) {
// @include once {
// position: relative;
// display: flex;
// width: 100%;
// box-sizing: border-box;
// font-size: 16px;
// transition: background-color .3s $--n-ease-in-out-cubic-bezier;
// @include not-m(vertical) {
// margin-top: 24px;
// margin-bottom: 24px;
// @include not-m(no-title) {
// display: flex;
// align-items: center;
// }
// }
// @include e(title) {
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// display: flex;
// align-items: center;
// margin-left: 12px;
// margin-right: 12px;
// white-space: nowrap;
// font-weight: $--n-strong-weight;
// }
// @include m(title-position-left) {
// @include e(line) {
// @include m(left) {
// width: 28px;
// }
// }
// }
// @include m(title-position-right) {
// @include e(line) {
// @include m(right) {
// width: 28px;
// }
// }
// }
// @include m(dashed) {
// @include e(line) {
// background-color: transparent;
// height: 0px;
// width: 100%;
// border-style: dashed;
// border-width: 1px 0 0;
// }
// }
// @include m(vertical) {
// display: inline-block;
// height: 1em;
// margin: 0 8px;
// vertical-align: middle;
// width: 1px;
// }
// }
// color: $--divider-text-color;
// @include once {
// @include e(line) {
// border: none;
// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
// height: 1px;
// width: 100%;
// margin: 0;
// }
// }
// @include not-m(dashed) {
// @include e(line) {
// background-color: $--divider-border-color;
// }
// }
// @include m(dashed) {
// @include e(line) {
// border-color: $--divider-border-color;
// }
// }
// @include m(vertical) {
// background-color: $--divider-border-color;
// }
// }
// }

16
src/confirm/src/styles/themed-base.cssr.js
View File

@ -9,7 +9,7 @@ export default c([
textColor,
color,
borderRadius,
strongFontWeight,
titleFontWeight,
closeColor,
closeColorHover,
closeColorActive,
@ -59,7 +59,7 @@ export default c([
justify-content: space-between;
align-items: center;
font-size: 18px;
font-weight: ${strongFontWeight};
font-weight: ${titleFontWeight};
color: ${titleTextColor}
`
},
@ -104,21 +104,21 @@ export default c([
}),
cE('close', {
raw: `
fill: ${closeColor},
stroke: ${closeColor}
fill: ${closeColor};
stroke: ${closeColor};
`
},
[
c('&:hover', {
raw: `
fill: ${closeColorHover},
stroke: ${closeColorHover}
fill: ${closeColorHover};
stroke: ${closeColorHover};
`
}),
c('&:active', {
raw: `
fill: ${closeColorActive},
stroke: ${closeColorActive}
fill: ${closeColorActive};
stroke: ${closeColorActive};
`
})
])

2
src/confirm/styles/dark.js
View File

@ -28,7 +28,7 @@ export default create({
iconColorWarning: warningColor,
iconColorError: errorColor,
borderRadius: base.borderRadius,
strongFontWeight: base.strongFontWeight
titleFontWeight: base.strongFontWeight
}
}
})

2
src/confirm/styles/light.js
View File

@ -28,7 +28,7 @@ export default create({
iconColorWarning: warningColor,
iconColorError: errorColor,
borderRadius: base.borderRadius,
strongFontWeight: base.strongFontWeight
titleFontWeight: base.strongFontWeight
}
}
})

5
src/divider/src/Divider.vue
View File

@ -29,12 +29,15 @@
<script>
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import usecssr from '../../_mixins/usecssr'
import styles from './styles'
export default {
name: 'Divider',
mixins: [
withapp,
themeable
themeable,
usecssr(styles)
],
props: {
titlePlacement: {

22
src/divider/src/styles/themed-base.cssr.js
View File

@ -2,10 +2,11 @@ import { c, cTB, cNotM, cE, cM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const { easeInOutCubicBezier, strongFontWeight } = props.$base
const { easeInOutCubicBezier } = props.$base
const {
dividerTextColor,
dividerBorderColor
textColor,
color,
fontWeight
} = props.$local
return [
cTB(
@ -17,8 +18,10 @@ export default c([
width: 100%;
box-sizing: border-box;
font-size: 16px;
color: ${dividerTextColor}
transition: background-color .3s ${easeInOutCubicBezier};
color: ${textColor};
transition:
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier};
`
},
[
@ -38,13 +41,12 @@ export default c([
]),
cE('title', {
raw: `
transition: color .3s ${easeInOutCubicBezier};
display: flex;
align-items: center;
margin-left: 12px;
margin-right: 12px;
white-space: nowrap;
font-weight: ${strongFontWeight};
font-weight: ${fontWeight};
`
}),
cM('title-position-left', [
@ -97,20 +99,20 @@ export default c([
cNotM('dashed', [
cE('line', {
raw: `
background-color: ${dividerBorderColor};
background-color: ${color};
`
})
]),
cM('dashed', [
cE('line', {
raw: `
border-color:: ${dividerBorderColor};
border-color: ${color};
`
})
]),
cM('vertical', {
raw: `
background-color: ${dividerBorderColor};
background-color: ${color};
`
})
]

5
src/divider/styles/dark.js
View File

@ -9,8 +9,9 @@ export default create({
dividerOverlayColor
} = derived
return {
dividerTextColor: primaryTextOverlayColor,
dividerBorderColor: dividerOverlayColor
textColor: primaryTextOverlayColor,
color: dividerOverlayColor,
fontWeight: base.strongFontWeight
}
}
})

5
src/divider/styles/light.js
View File

@ -9,8 +9,9 @@ export default create({
dividerOverlayColor
} = derived
return {
dividerTextColor: primaryTextColor,
dividerBorderColor: dividerOverlayColor
textColor: primaryTextColor,
color: dividerOverlayColor,
fontWeight: base.strongFontWeight
}
}
})