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

fix(base-selection): border zindex

Browse Source
This commit is contained in:
07akioni 2020-11-30 18:50:04 +08:00
parent 7d1292df88
commit 18db21cc9b
6 changed files with 49 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/_base/selection/src/Selection.vue
View File

@ -182,8 +182,9 @@
/>
</div>
</template>
<div class="n-base-selection-border" />
<div class="n-base-selection-border-mask" />
<div class="n-base-selection__border" />
<div class="n-base-selection__state-border" />
<div class="n-base-selection__box-shadow" />
</div>
</template>

73
src/_base/selection/src/styles/themed-base.js
View File

@ -1,4 +1,4 @@
import { cTB, c, cB, cE, cM, cNotM, createKey, insideFormItem } from '../../../../_utils/cssr'
import { cTB, cRB, c, cB, cE, cM, cNotM, createKey, insideFormItem } from '../../../../_utils/cssr'
export default c([
({ props }) => {
@ -37,16 +37,12 @@ export default c([
`,
borderRadius
}, [
cB('base-selection-border', {
borderColor: 'transparent',
transition: `border-color .3s ${cubicBezierEaseInOut}`
}),
cM('bordered', [
cB('base-selection-border', {
cE('border', {
border
})
]),
cB('base-selection-border', {
cE('border, state-border', {
raw: `
position: absolute;
left: 0;
@ -60,7 +56,10 @@ export default c([
borderRadius,
transition: `border-color .3s ${cubicBezierEaseInOut}`
}),
cB('base-selection-border-mask', {
cE('state-border', {
zIndex: 1
}),
cE('box-shadow', {
raw: `
position: absolute;
left: 0;
@ -188,18 +187,18 @@ export default c([
]),
cNotM('disabled', [
cM('focus', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: boxShadowFocus
}),
cB('base-selection-border', {
cE('state-border', {
border: borderFocus
})
]),
cM('active', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: boxShadowActive
}),
cB('base-selection-border', {
cE('state-border', {
border: borderActive
}),
cB('base-selection-label', {
@ -213,38 +212,38 @@ export default c([
})
]),
cNotM('active', [
cB('base-selection-label', [
cRB('base-selection-label', [
c('&:focus ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: boxShadowFocus
}),
cB('base-selection-border', {
cE('state-border', {
border: borderFocus
})
]),
c('&:hover ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: boxShadowHover
}),
cB('base-selection-border', {
cE('state-border', {
border: borderHover
})
])
]),
cB('base-selection-tags', [
cRB('base-selection-tags', [
c('&:focus ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: boxShadowFocus
}),
cB('base-selection-border', {
cE('state-border', {
border: borderFocus
})
]),
c('&:hover ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: boxShadowHover
}),
cB('base-selection-border', {
cE('state-border', {
border: borderHover
})
])
@ -327,15 +326,15 @@ export default c([
].map(status => {
return insideFormItem(status, cTB('base-selection', [
[
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('border', status)]
}),
cNotM('disabled', [
cM('active', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: $local[createKey('boxShadowActive', status)]
}),
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('borderActive', status)]
}),
cB('base-selection-label', {
@ -346,47 +345,47 @@ export default c([
})
]),
cNotM('active', [
cB('base-selection-label', [
cRB('base-selection-label', [
c('&:hover ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: $local[createKey('boxShadowHover', status)]
}),
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('borderHover', status)]
})
]),
c('&:focus ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: $local[createKey('boxShadowFocus', status)]
}),
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('borderFocus', status)]
})
])
]),
cB('base-selection-tags', [
cRB('base-selection-tags', [
c('&:hover ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: $local[createKey('boxShadowHover', status)]
}),
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('borderHover', status)]
})
]),
c('&:focus ~', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: $local[createKey('boxShadowFocus', status)]
}),
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('borderHover', status)]
})
])
]),
cM('focus', [
cB('base-selection-border-mask', {
cE('box-shadow', {
boxShadow: $local[createKey('boxShadowFocus', status)]
}),
cB('base-selection-border', {
cE('state-border', {
border: $local[createKey('borderFocus', status)]
})
])

5
src/_utils/cssr/index.js
View File

@ -65,9 +65,14 @@ function createKey (keyPrefix, ...suffixs) {
).join('')
}
function cRB (selector, ...rest) {
return c(`${prefix}${selector}`, ...rest)
}
export {
c,
cTB,
cRB,
cB,
cE,
cM,

3
src/cascader/src/styles/themed-base.cssr.js
View File

@ -174,7 +174,8 @@ c([
]
)
},
cB('cascader', {
cTB('cascader', {
zIndex: 'auto',
width: '100%'
})
])

16
src/input-group/src/styles/base.cssr.js
View File

@ -160,13 +160,7 @@ export default c([
border-bottom-right-radius: 0!important;
`
}),
cB('base-selection-border-mask', {
raw: `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`
}),
cB('base-selection-border', {
cE('box-shadow, border, state-border', {
raw: `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@ -209,13 +203,7 @@ export default c([
border-bottom-left-radius: 0!important;
`
}),
cB('base-selection-border-mask', {
raw: `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`
}),
cB('base-selection-border', {
cE('box-shadow, border, state-border', {
raw: `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;

1
src/select/src/styles/themed-base.cssr.js
View File

@ -7,6 +7,7 @@ export default c([
return [
cTB('select', {
raw: `
z-index: auto;
outline: none;
width: 100%;
`