hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

remove old shadow parser, fix only first shadow applying

Browse source
This commit is contained in:
Henry Jameson 2024-10-02 23:59:56 +03:00
commit 02ecd8bb6c
6 changed files with 27 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/button.style.js
View file

@ -9,9 +9,9 @@ export default {
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
// normal: '' // normal state is implicitly added, it is always included
toggled: '.toggled',
pressed: ':active',
focused: ':focus-visible',
pressed: ':focus:active',
hover: ':hover:not(:disabled)',
focused: ':focus-within',
disabled: ':disabled'
},
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
@ -35,10 +35,11 @@ export default {
{
component: 'Root',
directives: {
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text / 0.5',
'--defaultButtonFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
}
},
{
@ -56,6 +57,12 @@ export default {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
}
},
{
state: ['focused'],
directives: {
shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel']
}
},
{
state: ['pressed'],
directives: {
@ -65,13 +72,7 @@ export default {
{
state: ['pressed', 'hover'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['pressed', 'hover', 'focused'],
directives: {
shadow: ['--pressedButtonBevel']
shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow']
}
},
{