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

refactor(button-group): using cssr

Browse Source
This commit is contained in:
07akioni 2020-06-26 14:44:28 +08:00
parent 1a072a7bba
commit c0efaab00d
5 changed files with 113 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/_styles/Button.scss
View File

@ -1,173 +0,0 @@
@import './mixins/mixins.scss';
@include b(button-group) {
white-space: nowrap;
display: inline-block;
position: relative;
@include not-m(vertical) {
@include m(block) {
display: flex;
flex-wrap: nowrap;
@include b(button) {
flex-grow: 1;
}
}
@include b(button) {
&:first-child:not(:last-child) {
margin-right: 0!important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child:not(:first-child) {
margin-left: 0!important;
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
&:not(:first-child):not(:last-child) {
margin-left: 0!important;
margin-right: 0!important;
border-radius: 0!important;
}
/**
* Not an perfect implementation,
* since their border is not really "shared"
*/
@include m(default-type) {
& + {
@include b(button) {
@include m(default-type) {
border-left-width: 0px!important;
}
}
}
}
@include m(ghost) {
@include m(primary-type) {
& + {
@include b(button) {
@include m(primary-type) {
border-left-width: 0px!important;
}
}
}
}
@include m(success-type) {
& + {
@include b(button) {
@include m(success-type) {
border-left-width: 0px!important;
}
}
}
}
@include m(error-type) {
& + {
@include b(button) {
@include m(error-type) {
border-left-width: 0px!important;
}
}
}
}
@include m(info-type) {
& + {
@include b(button) {
@include m(info-type) {
border-left-width: 0px!important;
}
}
}
}
@include m(warning-type) {
& + {
@include b(button) {
@include m(info-type) {
border-left-width: 0px!important;
}
}
}
}
}
}
}
@include m(vertical) {
display: inline-flex;
flex-direction: column;
@include b(button) {
&:first-child:not(:last-child) {
margin-bottom: 0!important;
margin-left: 0!important;
margin-right: 0!important;
border-bottom-left-radius: 0!important;
border-bottom-right-radius: 0!important;
}
&:last-child:not(:first-child) {
margin-top: 0!important;
margin-left: 0!important;
margin-right: 0!important;
border-top-left-radius: 0!important;
border-top-right-radius: 0!important;
}
&:not(:first-child):not(:last-child) {
margin: 0!important;
border-radius: 0!important;
}
@include m(default-type) {
& + {
@include b(button) {
@include m(default-type) {
border-top-width: 0px!important;
}
}
}
}
@include m(ghost) {
@include m(info-type) {
& + {
@include b(button) {
@include m(info-type) {
border-top-width: 0px!important;
}
}
}
}
@include m(success-type) {
& + {
@include b(button) {
@include m(success-type) {
border-top-width: 0px!important;
}
}
}
}
@include m(warning-type) {
& + {
@include b(button) {
@include m(warning-type) {
border-top-width: 0px!important;
}
}
}
}
@include m(error-type) {
& + {
@include b(button) {
@include m(error-type) {
border-top-width: 0px!important;
}
}
}
}
@include m(primary-type) {
& + {
@include b(button) {
@include m(primary-type) {
border-top-width: 0px!important;
}
}
}
}
}
}
}
}

1
src/_styles/index.scss
View File

@ -15,7 +15,6 @@
@import "./GradientText.scss";
@import "./Table.scss";
@import "./Checkbox.scss";
@import "./Button.scss";
@import "./Switch.scss";
@import "./Input.scss";
@import "./Select.scss";

6
src/button-group/src/ButtonGroup.vue
View File

@ -10,8 +10,14 @@
</template>
<script>
import usecssr from '../../_mixins/usecssr'
import styles from './styles/index.js'
export default {
name: 'NButtonGroup',
mixins: [
usecssr(styles)
],
provide () {
return {
NButtonGroup: this

100
src/button-group/src/styles/base.cssr.js Normal file
View File

@ -0,0 +1,100 @@
import { c, cB, cM, cNotM } from '../../../_utils/cssr/index'
const zero = '0 !important'
function createLeftBorderStyle (type) {
return cM(type + '-type', [
c('& +', [
cB('button', [
cM(type + '-type', {
borderLeftWidth: zero
})
])
])
])
}
function createTopBorderStyle (type) {
return cM(type + '-type', [
c('& +', [
cB('button', [
cM(type + '-type', {
borderTopWidth: zero
})
])
])
])
}
export default c([
() => cB('button-group', {
whiteSpace: 'nowrap',
display: 'inline-block',
position: 'relative'
}, [
cNotM('vertical', [
cB('button', [
c('&:first-child:not(:last-child)', {
marginRight: zero,
borderTopRightRadius: zero,
borderBottomRightRadius: zero
}),
c('&:last-child:not(:first-child)', {
marginLeft: zero,
borderTopLeftRadius: zero,
borderBottomLeftRadius: zero
}),
c('&:not(:first-child):not(:last-child)', {
marginLeft: zero,
marginRight: zero,
borderRadius: zero
}),
createLeftBorderStyle('default'),
cM('ghost', [
createLeftBorderStyle('primary'),
createLeftBorderStyle('info'),
createLeftBorderStyle('success'),
createLeftBorderStyle('warning'),
createLeftBorderStyle('error')
])
])
]),
cM('vertical', {
display: 'inline-flex',
flexDirection: 'column'
}, [
cB('button', [
c('&:first-child:not(:last-child)', {
raw: `
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
`
}),
c('&:last-child:not(:first-child)', {
raw: `
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
`
}),
c('&:not(:first-child):not(:last-child)', {
margin: zero,
borderRadius: zero
}),
createTopBorderStyle('default'),
cM('ghost', [
createTopBorderStyle('primary'),
createTopBorderStyle('info'),
createTopBorderStyle('success'),
createTopBorderStyle('warning'),
createTopBorderStyle('error')
])
])
])
])
])

7
src/button-group/src/styles/index.js Normal file
View File

@ -0,0 +1,7 @@
import baseStyle from './base.cssr.js'
export default [
{
CNode: baseStyle
}
]