blur support, fix toggled buttons not working right

This commit is contained in:
Henry Jameson 2024-02-22 15:15:08 +02:00
parent 09e0e53ad6
commit 779b3dc122
4 changed files with 19 additions and 7 deletions

View File

@ -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,

View File

@ -21,6 +21,7 @@ export default {
{ {
directives: { directives: {
background: '--bg', background: '--bg',
blur: '10px',
shadow: [{ shadow: [{
x: 2, x: 2,
y: 2, y: 2,

View File

@ -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 '' }

View File

@ -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