blur support, fix toggled buttons not working right
This commit is contained in:
parent
09e0e53ad6
commit
779b3dc122
@ -24,6 +24,7 @@ export default {
|
|||||||
directives: {
|
directives: {
|
||||||
background: '--bg',
|
background: '--bg',
|
||||||
roundness: 3,
|
roundness: 3,
|
||||||
|
blur: '5px',
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 1,
|
x: 1,
|
||||||
y: 1,
|
y: 1,
|
||||||
|
@ -21,6 +21,7 @@ export default {
|
|||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--bg',
|
background: '--bg',
|
||||||
|
blur: '10px',
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 2,
|
x: 2,
|
||||||
y: 2,
|
y: 2,
|
||||||
|
@ -108,10 +108,21 @@ export const getCssRules = (rules) => rules.map(rule => {
|
|||||||
].filter(x => x).join(';\n')
|
].filter(x => x).join(';\n')
|
||||||
}
|
}
|
||||||
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
|
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
|
||||||
return [
|
const cssDirectives = ['--background: ' + color]
|
||||||
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
|
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||||
' --background: ' + color
|
cssDirectives.push('background-color: ' + color)
|
||||||
].filter(x => x).join(';\n')
|
}
|
||||||
|
return cssDirectives.filter(x => x).join(';\n')
|
||||||
|
}
|
||||||
|
case 'blur': {
|
||||||
|
const cssDirectives = []
|
||||||
|
if (rule.directives.opacity < 1) {
|
||||||
|
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
|
||||||
|
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||||
|
cssDirectives.push(`backdrop-filter: blur(${v}) `)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return cssDirectives.join(';\n')
|
||||||
}
|
}
|
||||||
case 'textColor': {
|
case 'textColor': {
|
||||||
if (rule.directives.textNoCssColor === 'yes') { return '' }
|
if (rule.directives.textNoCssColor === 'yes') { return '' }
|
||||||
|
@ -193,7 +193,6 @@ export const convertTheme2To3 = (data) => {
|
|||||||
newRules.push({ ...rule, component: 'Tab' })
|
newRules.push({ ...rule, component: 'Tab' })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log(newRules)
|
|
||||||
return newRules
|
return newRules
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -424,12 +423,12 @@ export const convertTheme2To3 = (data) => {
|
|||||||
case 'alert': {
|
case 'alert': {
|
||||||
const hasPanel = variantArray.find(x => x === 'Panel')
|
const hasPanel = variantArray.find(x => x === 'Panel')
|
||||||
if (hasPanel) {
|
if (hasPanel) {
|
||||||
rule.parent = { component: 'PanelHeader' }
|
newRule.parent = { component: 'PanelHeader' }
|
||||||
variantArray = variantArray.filter(x => x !== 'Panel')
|
variantArray = variantArray.filter(x => x !== 'Panel')
|
||||||
}
|
}
|
||||||
const hasTop = variantArray.find(x => x === 'Top') // TopBar
|
const hasTop = variantArray.find(x => x === 'Top') // TopBar
|
||||||
if (hasTop) {
|
if (hasTop) {
|
||||||
rule.parent = { component: 'TopBar' }
|
newRule.parent = { component: 'TopBar' }
|
||||||
variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
|
variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
Loading…
Reference in New Issue
Block a user