diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/button.style.js | 2 | ||||
| -rw-r--r-- | src/components/panel.style.js | 3 | ||||
| -rw-r--r-- | src/components/popover.style.js | 3 | ||||
| -rw-r--r-- | src/components/root.style.js | 4 | ||||
| -rw-r--r-- | src/components/scrollbar.style.js | 11 | ||||
| -rw-r--r-- | src/components/scrollbar_element.style.js | 101 | ||||
| -rw-r--r-- | src/components/underlay.style.js | 1 | ||||
| -rw-r--r-- | src/components/user_card/user_card.style.js | 40 |
8 files changed, 160 insertions, 5 deletions
diff --git a/src/components/button.style.js b/src/components/button.style.js index 6560c8fb..f12623f9 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -103,7 +103,7 @@ export default { { state: ['disabled'], directives: { - background: '$blend(--background, 0.25, --parent)', + background: '$blend(--inheritedBackground, 0.25, --parent)', shadow: [...buttonInsetFakeBorders] } }, diff --git a/src/components/panel.style.js b/src/components/panel.style.js index f5226cce..920137f9 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -12,7 +12,8 @@ export default { 'MenuItem', 'Post', 'Notification', - 'Alert' + 'Alert', + 'UserCard' ], defaultRules: [ { diff --git a/src/components/popover.style.js b/src/components/popover.style.js index a73d484a..1b51c9b3 100644 --- a/src/components/popover.style.js +++ b/src/components/popover.style.js @@ -14,7 +14,8 @@ export default { 'ButtonUnstyled', 'Input', 'MenuItem', - 'Post' + 'Post', + 'UserCard' ], defaultRules: [ { diff --git a/src/components/root.style.js b/src/components/root.style.js index 3e421bd4..f0ad731e 100644 --- a/src/components/root.style.js +++ b/src/components/root.style.js @@ -5,6 +5,8 @@ export default { 'Underlay', 'Modals', 'Popover', - 'TopBar' + 'TopBar', + 'Scrollbar', + 'ScrollbarElement' ] } diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js new file mode 100644 index 00000000..76053d6f --- /dev/null +++ b/src/components/scrollbar.style.js @@ -0,0 +1,11 @@ +export default { + name: 'Scrollbar', + selector: '::-webkit-scrollbar', + defaultRules: [ + { + directives: { + background: '--bg' + } + } + ] +} diff --git a/src/components/scrollbar_element.style.js b/src/components/scrollbar_element.style.js new file mode 100644 index 00000000..da942ab2 --- /dev/null +++ b/src/components/scrollbar_element.style.js @@ -0,0 +1,101 @@ +const border = (top, shadow) => ({ + x: 0, + y: top ? 1 : -1, + blur: 0, + spread: 0, + color: shadow ? '#000000' : '#FFFFFF', + alpha: 0.2, + inset: true +}) + +const buttonInsetFakeBorders = [border(true, false), border(false, true)] +const inputInsetFakeBorders = [border(true, true), border(false, false)] +const buttonOuterShadow = { + x: 0, + y: 0, + blur: 2, + spread: 0, + color: '#000000', + alpha: 1 +} + +const hoverGlow = { + x: 0, + y: 0, + blur: 4, + spread: 0, + color: '--text', + alpha: 1 +} + +export default { + name: 'ScrollbarElement', + selector: '::-webkit-scrollbar-button', + states: { + pressed: ':active', + hover: ':hover:not(:disabled)', + disabled: ':disabled' + }, + validInnerComponents: [ + 'Text' + ], + defaultRules: [ + { + directives: { + background: '--fg', + shadow: [buttonOuterShadow, ...buttonInsetFakeBorders], + roundness: 3 + } + }, + { + state: ['hover'], + directives: { + shadow: [hoverGlow, ...buttonInsetFakeBorders] + } + }, + { + state: ['pressed'], + directives: { + shadow: [buttonOuterShadow, ...inputInsetFakeBorders] + } + }, + { + state: ['hover', 'pressed'], + directives: { + shadow: [hoverGlow, ...inputInsetFakeBorders] + } + }, + { + state: ['toggled'], + directives: { + background: '--accent,-24.2', + shadow: [buttonOuterShadow, ...inputInsetFakeBorders] + } + }, + { + state: ['toggled', 'hover'], + directives: { + background: '--accent,-24.2', + shadow: [hoverGlow, ...inputInsetFakeBorders] + } + }, + { + state: ['disabled'], + directives: { + background: '$blend(--inheritedBackground, 0.25, --parent)', + shadow: [...buttonInsetFakeBorders] + } + }, + { + component: 'Text', + parent: { + component: 'Button', + state: ['disabled'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + } + ] +} diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js index afe5a208..3ed871cc 100644 --- a/src/components/underlay.style.js +++ b/src/components/underlay.style.js @@ -11,7 +11,6 @@ export default { ], defaultRules: [ { - component: 'Underlay', directives: { background: '#000000', opacity: 0.2 diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js new file mode 100644 index 00000000..1a8c179d --- /dev/null +++ b/src/components/user_card/user_card.style.js @@ -0,0 +1,40 @@ +export default { + name: 'UserCard', + selector: '.user-card', + validInnerComponents: [ + 'Text', + 'Link', + 'Icon', + 'Button', + 'ButtonUnstyled', + 'Input', + 'RichContent', + 'Alert' + ], + defaultRules: [ + { + directives: { + background: '--bg', + roundness: 3, + shadow: [{ + x: 1, + y: 1, + blur: 4, + spread: 0, + color: '#000000', + alpha: 0.6 + }], + '--profileTint': '$alpha(--background, 0.5)' + } + }, + { + parent: { + component: 'UserCard' + }, + component: 'RichContent', + directives: { + opacity: 0 + } + } + ] +} |