root
/
mand-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix css variables not working on some components (#351)

This commit is contained in:
moyu 2019-03-08 15:44:49 +08:00 committed by Shawn Xu
parent 1a6868ce0a
commit af99607ab3
5 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/rollup/build-css-variables.js
View File

@ -47,7 +47,7 @@ function generateVariablesStyl(variables) {
let stylContent = '/**\r\n Automatically generated when running script \'build:variables\'\r\n Do not edit or delete manually\r\n**/\r\n' let stylContent = '/**\r\n Automatically generated when running script \'build:variables\'\r\n Do not edit or delete manually\r\n**/\r\n'
for (const variable in variables) { for (const variable in variables) {
if (variables.hasOwnProperty(variable)) { if (variables.hasOwnProperty(variable) && variable !== 'support-for-ie') {
stylContent += `${variable} = var(--${variable})\n` stylContent += `${variable} = var(--${variable})\n`
} }
} }
@ -60,7 +60,7 @@ try {
const variablesAll = {} const variablesAll = {}
files.forEach(file => { files.forEach(file => {
const variablesJson = getStyleJson(file) const variablesJson = getStyleJson(file)
if (!fs.existsSync(outputLibDir)) { if (!fs.existsSync(outputLibDir)) {
fs.mkdirSync(outputLibDir) fs.mkdirSync(outputLibDir)
} }

4
build/stylus-mixin.js
View File

@ -4,9 +4,9 @@ const isSpecial = process.env.BUILD_TYPE === 'special'
module.exports = function useMixin(style) { module.exports = function useMixin(style) {
if (process.env.BUILD_TYPE === 'variables') { if (process.env.BUILD_TYPE === 'variables') {
return style return style
.import(path.join(__dirname, '../components/_style/mixin/theme.variable.styl'))
.import(path.join(__dirname, '../components/_style/mixin/theme.components.styl')) .import(path.join(__dirname, '../components/_style/mixin/theme.components.styl'))
.import(path.join(__dirname, '../components/_style/mixin/theme.basic.styl')) .import(path.join(__dirname, '../components/_style/mixin/theme.basic.styl'))
.import(path.join(__dirname, '../components/_style/mixin/theme.variable.styl'))
.import(path.join(__dirname, '../components/_style/mixin/util.styl')) .import(path.join(__dirname, '../components/_style/mixin/util.styl'))
.import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor')) .import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor'))
.import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients')) .import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))
@ -18,4 +18,4 @@ module.exports = function useMixin(style) {
.import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor')) .import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor'))
.import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients')) .import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))
} }
} }

1
components/_style/mixin/theme.variable.styl
View File

@ -2,7 +2,6 @@
Automatically generated when running script 'build:variables' Automatically generated when running script 'build:variables'
Do not edit or delete manually Do not edit or delete manually
**/ **/
support-for-ie = var(--support-for-ie)
color-primary = var(--color-primary) color-primary = var(--color-primary)
color-text-base = var(--color-text-base) color-text-base = var(--color-text-base)
color-text-base-inverse = var(--color-text-base-inverse) color-text-base-inverse = var(--color-text-base-inverse)

16
components/codebox/index.vue
View File

@ -13,7 +13,7 @@
v-for="i in num" v-for="i in num"
:key="i" :key="i"
:class="[ :class="[
'md-codebox-box', 'md-codebox-box',
(i === code.length + 1) && focused && 'is-active', (i === code.length + 1) && focused && 'is-active',
code.charAt(i-1) !== '' && 'is-filled' code.charAt(i-1) !== '' && 'is-filled'
]" ]"
@ -264,8 +264,13 @@ export default {
font-size codebox-font-size font-size codebox-font-size
font-weight normal font-weight normal
line-height 1.2 line-height 1.2
margin-left (codebox-gutter / 2) if codebox-gutter is a 'unit'
margin-right (codebox-gutter / 2) margin-left (codebox-gutter / 2)
margin-right (codebox-gutter / 2)
else
margin-left "calc(%s / 2)" % codebox-gutter
margin-right "calc(%s / 2)" % codebox-gutter
border-bottom codebox-border-width solid codebox-border-color border-bottom codebox-border-width solid codebox-border-color
&:first-child &:first-child
margin-left 0 margin-left 0
@ -276,7 +281,10 @@ export default {
.md-codebox-blink .md-codebox-blink
display block display block
height (codebox-height * 0.8) if tab-height is a 'unit'
height (codebox-height * 0.8)
else
height "calc(%s * 0.8)" % codebox-height
width 2px width 2px
background-color codebox-blink-color background-color codebox-blink-color
animation md-codebox-flash steps(2) 1s infinite animation md-codebox-flash steps(2) 1s infinite

8
components/tab-bar/index.vue
View File

@ -288,8 +288,12 @@ export default {
left -14px left -14px
top 50% top 50%
width 14px width 14px
margin-top 0 - tab-height * 0.4 if tab-height is a 'unit'
height tab-height * 0.8 margin-top 0 - tab-height * 0.4
height tab-height * 0.8
else
margin-top "calc(0 - %s * 0.4)" % tab-height
height "calc(%s * 0.8)" % tab-height
border-radius 50% border-radius 50%
box-shadow: -1px 0 12px 0 rgba(0,0,0,0.2) box-shadow: -1px 0 12px 0 rgba(0,0,0,0.2)
.md-tab-bar-end .md-tab-bar-end