moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve the display of disabled buttons

This commit is contained in:
Henry Jameson 2020-02-17 23:43:56 +02:00
parent 5c6046ea0a
commit 3b3a31b461
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.scss
View File

@ -104,7 +104,11 @@ button {
color: $fallback--text; color: $fallback--text;
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg) background-color: var(--btnPressed, $fallback--fg);
i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
} }
&:disabled { &:disabled {
@ -112,7 +116,11 @@ button {
color: $fallback--text; color: $fallback--text;
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg) background-color: var(--btnDisabled, $fallback--fg);
i {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
} }
&.toggled { &.toggled {
@ -122,6 +130,10 @@ button {
background-color: var(--btnToggled, $fallback--fg); background-color: var(--btnToggled, $fallback--fg);
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow); box-shadow: var(--buttonPressedShadow);
i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
} }
&.danger { &.danger {

8
src/services/theme_data/pleromafe.js
View File

@ -509,25 +509,25 @@ export const SLOT_INHERITANCE = {
// Buttons: disabled // Buttons: disabled
btnDisabled: { btnDisabled: {
depends: ['btn', 'bg'], depends: ['btn', 'bg'],
color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg) color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)
}, },
btnDisabledText: { btnDisabledText: {
depends: ['btnText', 'btnDisabled'], depends: ['btnText', 'btnDisabled'],
layer: 'btn', layer: 'btn',
variant: 'btnDisabled', variant: 'btnDisabled',
color: (mod, text, btn) => alphaBlend(text, 0.5, btn) color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
}, },
btnDisabledPanelText: { btnDisabledPanelText: {
depends: ['btnPanelText', 'btnDisabled'], depends: ['btnPanelText', 'btnDisabled'],
layer: 'btnPanel', layer: 'btnPanel',
variant: 'btnDisabled', variant: 'btnDisabled',
color: (mod, text, btn) => alphaBlend(text, 0.5, btn) color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
}, },
btnDisabledTopBarText: { btnDisabledTopBarText: {
depends: ['btnTopBarText', 'btnDisabled'], depends: ['btnTopBarText', 'btnDisabled'],
layer: 'btnTopBar', layer: 'btnTopBar',
variant: 'btnDisabled', variant: 'btnDisabled',
color: (mod, text, btn) => alphaBlend(text, 0.5, btn) color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
}, },
// Input fields // Input fields