menu-item improvements
This commit is contained in:
parent
9ec61d0f0a
commit
98f972e557
84
src/App.scss
84
src/App.scss
@ -129,15 +129,6 @@ i[class*="icon-"],
|
|||||||
color: var(--icon);
|
color: var(--icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-unstyled:hover,
|
|
||||||
a:hover {
|
|
||||||
> i[class*="icon-"],
|
|
||||||
> .svg-inline--fa,
|
|
||||||
> .iconLetter {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
z-index: var(--ZI_navbar);
|
z-index: var(--ZI_navbar);
|
||||||
background-color: $fallback--fg;
|
background-color: $fallback--fg;
|
||||||
@ -192,8 +183,7 @@ nav {
|
|||||||
grid-column: 1 / span 3;
|
grid-column: 1 / span 3;
|
||||||
grid-row: 1 / 1;
|
grid-row: 1 / 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: rgb(0 0 0 / 15%);
|
background-color: var(--underlay);
|
||||||
background-color: var(--underlay, rgb(0 0 0 / 15%));
|
|
||||||
z-index: -1000;
|
z-index: -1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -363,10 +353,7 @@ nav {
|
|||||||
|
|
||||||
.button-default {
|
.button-default {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
color: $fallback--text;
|
color: var(--text);
|
||||||
color: var(--btnText, $fallback--text);
|
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--btn, $fallback--fg);
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $fallback--btnRadius;
|
border-radius: $fallback--btnRadius;
|
||||||
border-radius: var(--btnRadius, $fallback--btnRadius);
|
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||||
@ -376,70 +363,12 @@ nav {
|
|||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-family: var(--interfaceFont, sans-serif);
|
font-family: var(--interfaceFont, sans-serif);
|
||||||
|
|
||||||
&.-sublime {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
i[class*="icon-"],
|
|
||||||
.svg-inline--fa {
|
|
||||||
color: var(--icon);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnPressedText, $fallback--text);
|
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--btnPressed, $fallback--fg);
|
|
||||||
|
|
||||||
svg,
|
|
||||||
i {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnPressedText, $fallback--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnDisabledText, $fallback--text);
|
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--btnDisabled, $fallback--fg);
|
|
||||||
|
|
||||||
svg,
|
|
||||||
i {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnDisabledText, $fallback--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toggled {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnToggledText, $fallback--text);
|
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--btnToggled, $fallback--fg);
|
|
||||||
box-shadow:
|
|
||||||
0 0 4px 0 rgb(255 255 255 / 30%),
|
|
||||||
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
|
||||||
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
|
|
||||||
box-shadow: var(--buttonPressedShadow);
|
|
||||||
|
|
||||||
svg,
|
|
||||||
i {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnToggledText, $fallback--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
// TODO: add better color variable
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--alertErrorPanelText, $fallback--text);
|
|
||||||
background-color: $fallback--alertError;
|
|
||||||
background-color: var(--alertError, $fallback--alertError);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -458,8 +387,7 @@ nav {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&.-link {
|
&.-link {
|
||||||
color: $fallback--link;
|
color: var(--link);
|
||||||
color: var(--link, $fallback--link);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-fullwidth {
|
&.-fullwidth {
|
||||||
@ -510,7 +438,6 @@ textarea {
|
|||||||
&[disabled="disabled"],
|
&[disabled="disabled"],
|
||||||
&.disabled {
|
&.disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&[type="range"] {
|
&[type="range"] {
|
||||||
@ -610,9 +537,7 @@ textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
option {
|
option {
|
||||||
color: $fallback--text;
|
color: var(--text);
|
||||||
color: var(--text, $fallback--text);
|
|
||||||
background-color: $fallback--bg;
|
|
||||||
background-color: var(--bg, $fallback--bg);
|
background-color: var(--bg, $fallback--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -746,6 +671,7 @@ option {
|
|||||||
.faint {
|
.faint {
|
||||||
--text: var(--textFaint);
|
--text: var(--textFaint);
|
||||||
--textGreentext: var(--textGreentextFaint);
|
--textGreentext: var(--textGreentextFaint);
|
||||||
|
--textCyantext: var(--textCyantextFaint);
|
||||||
--link: var(--linkFaint);
|
--link: var(--linkFaint);
|
||||||
|
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
13
src/components/border.style.js
Normal file
13
src/components/border.style.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Border',
|
||||||
|
selector: '/*border*/',
|
||||||
|
virtual: true,
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
textColor: '$mod(--parent, 10)',
|
||||||
|
textAuto: 'no-auto'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -23,28 +23,37 @@ const hoverGlow = {
|
|||||||
export default {
|
export default {
|
||||||
name: 'Button', // Name of the component
|
name: 'Button', // Name of the component
|
||||||
selector: '.button', // CSS selector/prefix
|
selector: '.button', // CSS selector/prefix
|
||||||
// States, system witll calculate ALL possible combinations of those and append a "normal" to them + standalone "normal" state
|
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
|
||||||
|
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
|
||||||
states: {
|
states: {
|
||||||
// normal: state is implicitly added
|
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
|
||||||
|
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
|
||||||
|
// 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
|
||||||
disabled: ':disabled',
|
disabled: ':disabled',
|
||||||
toggled: '.toggled',
|
toggled: '.toggled',
|
||||||
pressed: ':active',
|
pressed: ':active',
|
||||||
hover: ':hover',
|
hover: ':hover',
|
||||||
focused: ':focus-within'
|
focused: ':focus-within'
|
||||||
},
|
},
|
||||||
// Variants are mutually exclusive, which saves on computation time
|
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
|
||||||
variants: {
|
variants: {
|
||||||
normal: '-default', // you can override normal variant
|
// Variants save on computation time since adding new variant just adds one more "set".
|
||||||
danger: '.danger',
|
normal: '-default', // you can override normal variant, it will be appenended to the main class
|
||||||
unstyled: '-unstyled'
|
danger: '-default.danger'
|
||||||
|
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
|
||||||
|
// This (currently) is further multipled by number of places where component can exist.
|
||||||
},
|
},
|
||||||
|
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Text',
|
'Text',
|
||||||
'Icon'
|
'Icon'
|
||||||
],
|
],
|
||||||
|
// Default rules, used as "default theme", essentially.
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
component: 'Button',
|
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
|
||||||
|
// like within it
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg',
|
background: '--fg',
|
||||||
shadow: [{
|
shadow: [{
|
||||||
@ -58,7 +67,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'Button',
|
|
||||||
variant: 'unstyled',
|
variant: 'unstyled',
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg',
|
background: '--fg',
|
||||||
@ -66,14 +74,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'Button',
|
|
||||||
state: ['hover'],
|
state: ['hover'],
|
||||||
directives: {
|
directives: {
|
||||||
shadow: [hoverGlow, ...buttonInsetFakeBorders]
|
shadow: [hoverGlow, ...buttonInsetFakeBorders]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'Button',
|
|
||||||
state: ['hover', 'pressed'],
|
state: ['hover', 'pressed'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '--accent,-24.2',
|
background: '--accent,-24.2',
|
||||||
@ -81,7 +87,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'Button',
|
|
||||||
state: ['disabled'],
|
state: ['disabled'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '$blend(--background, 0.25, --parent)',
|
background: '$blend(--background, 0.25, --parent)',
|
||||||
|
@ -1,19 +0,0 @@
|
|||||||
export default {
|
|
||||||
name: 'DropdownMenu',
|
|
||||||
selector: '.dropdown',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon',
|
|
||||||
'Input'
|
|
||||||
],
|
|
||||||
states: {
|
|
||||||
hover: ':hover'
|
|
||||||
},
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--fg'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
45
src/components/menu_item.style.js
Normal file
45
src/components/menu_item.style.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
export default {
|
||||||
|
name: 'MenuItem',
|
||||||
|
selector: '.menu-item',
|
||||||
|
validInnerComponents: [
|
||||||
|
'Text',
|
||||||
|
'Icon',
|
||||||
|
'Input',
|
||||||
|
'Border'
|
||||||
|
],
|
||||||
|
states: {
|
||||||
|
hover: ':hover',
|
||||||
|
active: 'active'
|
||||||
|
},
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
background: '--fg'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
variant: 'normal',
|
||||||
|
parent: {
|
||||||
|
component: 'MenuItem',
|
||||||
|
state: ['normal', 'hover'],
|
||||||
|
variant: 'normal'
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textColor: '--link',
|
||||||
|
textAuto: 'no-preserve'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Icon',
|
||||||
|
parent: {
|
||||||
|
component: 'MenuItem',
|
||||||
|
state: ['hover']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textColor: '--link',
|
||||||
|
textAuto: 'no-preserve'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
8
src/components/modals.style.js
Normal file
8
src/components/modals.style.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Modals',
|
||||||
|
selector: '.modal-view',
|
||||||
|
validInnerComponents: [
|
||||||
|
'Panel'
|
||||||
|
],
|
||||||
|
defaultRules: []
|
||||||
|
}
|
@ -107,7 +107,7 @@
|
|||||||
.NavPanel {
|
.NavPanel {
|
||||||
.panel {
|
.panel {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: var(--panelShadow);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@ -124,14 +124,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
&:first-child .menu-item {
|
&:first-child.menu-item {
|
||||||
border-top-right-radius: $fallback--panelRadius;
|
border-top-right-radius: $fallback--panelRadius;
|
||||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
border-top-left-radius: $fallback--panelRadius;
|
border-top-left-radius: $fallback--panelRadius;
|
||||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child .menu-item {
|
&:last-child.menu-item {
|
||||||
border-bottom-right-radius: $fallback--panelRadius;
|
border-bottom-right-radius: $fallback--panelRadius;
|
||||||
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
border-bottom-left-radius: $fallback--panelRadius;
|
border-bottom-left-radius: $fallback--panelRadius;
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<OptionalRouterLink
|
<OptionalRouterLink
|
||||||
v-slot="{ isActive, href, navigate } = {}"
|
v-slot="{ isActive, href, navigate } = {}"
|
||||||
ass="ass"
|
|
||||||
:to="routeTo"
|
:to="routeTo"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
@ -96,40 +95,5 @@
|
|||||||
margin-right: -0.8em;
|
margin-right: -0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $fallback--lightBg;
|
|
||||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
|
||||||
color: $fallback--link;
|
|
||||||
color: var(--selectedMenuText, $fallback--link);
|
|
||||||
|
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
|
||||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
--icon: var(--text, $fallback--icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-active {
|
|
||||||
font-weight: bolder;
|
|
||||||
background-color: $fallback--lightBg;
|
|
||||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--selectedMenuText, $fallback--text);
|
|
||||||
|
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
|
||||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
--icon: var(--text, $fallback--icon);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -7,12 +7,21 @@ export default {
|
|||||||
'Icon',
|
'Icon',
|
||||||
'Button',
|
'Button',
|
||||||
'Input',
|
'Input',
|
||||||
'PanelHeader'
|
'PanelHeader',
|
||||||
|
'MenuItem'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--bg'
|
background: '--bg',
|
||||||
|
shadow: [{
|
||||||
|
x: 1,
|
||||||
|
y: 1,
|
||||||
|
blur: 4,
|
||||||
|
spread: 0,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.6
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -11,7 +11,8 @@ export default {
|
|||||||
{
|
{
|
||||||
component: 'PanelHeader',
|
component: 'PanelHeader',
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg'
|
background: '--fg',
|
||||||
|
shadow: []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Popover',
|
name: 'Popover',
|
||||||
selector: '.popover',
|
selector: '.popover',
|
||||||
|
variants: {
|
||||||
|
tooltip: '.tooltip',
|
||||||
|
modal: '.modal'
|
||||||
|
},
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Text',
|
'Text',
|
||||||
'Link',
|
'Link',
|
||||||
@ -8,12 +12,20 @@ export default {
|
|||||||
'Button',
|
'Button',
|
||||||
'Input',
|
'Input',
|
||||||
'PanelHeader',
|
'PanelHeader',
|
||||||
'DropdownMenu'
|
'MenuItem'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg'
|
background: '--bg',
|
||||||
|
shadow: [{
|
||||||
|
x: 2,
|
||||||
|
y: 2,
|
||||||
|
blur: 3,
|
||||||
|
spread: 0,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.5
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -3,8 +3,8 @@ export default {
|
|||||||
selector: ':root',
|
selector: ':root',
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Underlay',
|
'Underlay',
|
||||||
'TopBar',
|
'Modals',
|
||||||
'Popover'
|
'TopBar'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Underlay',
|
name: 'Underlay',
|
||||||
selector: 'body', // Should be '#content' but for now this is better for testing until I have proper popovers and such...
|
selector: '#content',
|
||||||
|
// Out of tree selector: Most components are laid over underlay, but underlay itself is not part of the DOM tree,
|
||||||
|
// i.e. it's a separate absolutely-positioned component, so we need to treat it differently depending on whether
|
||||||
|
// we are searching for underlay specifically or for whatever is laid on top of it.
|
||||||
outOfTreeSelector: '.underlay',
|
outOfTreeSelector: '.underlay',
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Panel'
|
'Panel'
|
||||||
|
@ -3,8 +3,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: $fallback--bg;
|
|
||||||
background-color: var(--bg, $fallback--bg);
|
|
||||||
|
|
||||||
.panel-heading {
|
.panel-heading {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
@ -24,8 +22,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
box-shadow: var(--shadow);
|
||||||
box-shadow: var(--panelShadow);
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -133,58 +130,18 @@
|
|||||||
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
|
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
|
||||||
border-width: 0 0 1px;
|
border-width: 0 0 1px;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
// panel theme
|
|
||||||
color: var(--panelText);
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
|
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
|
||||||
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
|
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
|
||||||
box-shadow: var(--panelHeaderShadow);
|
box-shadow: var(--shadow);
|
||||||
}
|
|
||||||
|
|
||||||
.button-unstyled:hover,
|
|
||||||
a:hover {
|
|
||||||
i[class*="icon-"],
|
|
||||||
.svg-inline--fa,
|
|
||||||
.iconLetter {
|
|
||||||
color: var(--panelText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.faint {
|
|
||||||
background-color: transparent;
|
|
||||||
color: $fallback--faint;
|
|
||||||
color: var(--panelFaint, $fallback--faint);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.-flexible-height) {
|
&:not(.-flexible-height) {
|
||||||
> .button-default {
|
> .button-default {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
&,
|
|
||||||
i[class*="icon-"] {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnPanelText, $fallback--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--btnPressedPanel, $fallback--fg);
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnPressedPanelText, $fallback--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnDisabledPanelText, $fallback--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toggled {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnToggledPanelText, $fallback--text);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -227,6 +184,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
border-width: 1px 0 0;
|
border-width: 1px 0 0;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--border, $fallback--border);
|
border-color: var(--border);
|
||||||
}
|
}
|
||||||
/* stylelint-enable no-descending-specificity */
|
/* stylelint-enable no-descending-specificity */
|
||||||
|
@ -11,7 +11,8 @@ import Root from 'src/components/root.style.js'
|
|||||||
import TopBar from 'src/components/top_bar.style.js'
|
import TopBar from 'src/components/top_bar.style.js'
|
||||||
import Underlay from 'src/components/underlay.style.js'
|
import Underlay from 'src/components/underlay.style.js'
|
||||||
import Popover from 'src/components/popover.style.js'
|
import Popover from 'src/components/popover.style.js'
|
||||||
import DropdownMenu from 'src/components/dropdown_menu.style.js'
|
import Modals from 'src/components/modals.style.js'
|
||||||
|
import MenuItem from 'src/components/menu_item.style.js'
|
||||||
import Panel from 'src/components/panel.style.js'
|
import Panel from 'src/components/panel.style.js'
|
||||||
import PanelHeader from 'src/components/panel_header.style.js'
|
import PanelHeader from 'src/components/panel_header.style.js'
|
||||||
import Button from 'src/components/button.style.js'
|
import Button from 'src/components/button.style.js'
|
||||||
@ -19,34 +20,11 @@ import Input from 'src/components/input.style.js'
|
|||||||
import Text from 'src/components/text.style.js'
|
import Text from 'src/components/text.style.js'
|
||||||
import Link from 'src/components/link.style.js'
|
import Link from 'src/components/link.style.js'
|
||||||
import Icon from 'src/components/icon.style.js'
|
import Icon from 'src/components/icon.style.js'
|
||||||
|
import Border from 'src/components/border.style.js'
|
||||||
|
|
||||||
const DEBUG = false
|
const DEBUG = false
|
||||||
|
|
||||||
export const DEFAULT_SHADOWS = {
|
export const DEFAULT_SHADOWS = {
|
||||||
panel: [{
|
|
||||||
x: 1,
|
|
||||||
y: 1,
|
|
||||||
blur: 4,
|
|
||||||
spread: 0,
|
|
||||||
color: '#000000',
|
|
||||||
alpha: 0.6
|
|
||||||
}],
|
|
||||||
topBar: [{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
blur: 4,
|
|
||||||
spread: 0,
|
|
||||||
color: '#000000',
|
|
||||||
alpha: 0.6
|
|
||||||
}],
|
|
||||||
popup: [{
|
|
||||||
x: 2,
|
|
||||||
y: 2,
|
|
||||||
blur: 3,
|
|
||||||
spread: 0,
|
|
||||||
color: '#000000',
|
|
||||||
alpha: 0.5
|
|
||||||
}],
|
|
||||||
avatar: [{
|
avatar: [{
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 1,
|
y: 1,
|
||||||
@ -54,9 +32,7 @@ export const DEFAULT_SHADOWS = {
|
|||||||
spread: 0,
|
spread: 0,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
alpha: 0.7
|
alpha: 0.7
|
||||||
}],
|
}]
|
||||||
avatarStatus: [],
|
|
||||||
panelHeader: []
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
@ -64,9 +40,11 @@ const components = {
|
|||||||
Text,
|
Text,
|
||||||
Link,
|
Link,
|
||||||
Icon,
|
Icon,
|
||||||
|
Border,
|
||||||
Underlay,
|
Underlay,
|
||||||
|
Modals,
|
||||||
Popover,
|
Popover,
|
||||||
DropdownMenu,
|
MenuItem,
|
||||||
Panel,
|
Panel,
|
||||||
PanelHeader,
|
PanelHeader,
|
||||||
TopBar,
|
TopBar,
|
||||||
@ -196,16 +174,41 @@ export const init = (extraRuleset, palette) => {
|
|||||||
|
|
||||||
const rules = []
|
const rules = []
|
||||||
|
|
||||||
const ruleset = [
|
const normalizeCombination = rule => {
|
||||||
...Object.values(components).map(c => c.defaultRules.map(r => ({ component: c.name, ...r })) || []).reduce((acc, arr) => [...acc, ...arr], []),
|
|
||||||
...extraRuleset
|
|
||||||
].map(rule => {
|
|
||||||
rule.variant = rule.variant ?? 'normal'
|
rule.variant = rule.variant ?? 'normal'
|
||||||
rule.state = [...new Set(['normal', ...(rule.state || [])])]
|
rule.state = [...new Set(['normal', ...(rule.state || [])])]
|
||||||
|
}
|
||||||
|
|
||||||
|
const rulesetUnsorted = [
|
||||||
|
...Object.values(components)
|
||||||
|
.map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
|
||||||
|
.reduce((acc, arr) => [...acc, ...arr], []),
|
||||||
|
...extraRuleset
|
||||||
|
].map(rule => {
|
||||||
|
normalizeCombination(rule)
|
||||||
|
let currentParent = rule.parent
|
||||||
|
while (currentParent) {
|
||||||
|
normalizeCombination(currentParent)
|
||||||
|
currentParent = currentParent.parent
|
||||||
|
}
|
||||||
|
|
||||||
return rule
|
return rule
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const ruleset = rulesetUnsorted
|
||||||
|
.map((data, index) => ({ data, index }))
|
||||||
|
.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
|
||||||
|
const parentsA = unroll(a).length
|
||||||
|
const parentsB = unroll(b).length
|
||||||
|
|
||||||
|
if (parentsA === parentsB || (parentsB !== 0 && parentsA !== 0)) return ai - bi
|
||||||
|
if (parentsA === 0 && parentsB !== 0) return -1
|
||||||
|
if (parentsB === 0 && parentsA !== 0) return 1
|
||||||
|
return 0 // failsafe, shouldn't happen?
|
||||||
|
})
|
||||||
|
.map(({ data }) => data)
|
||||||
|
|
||||||
|
console.log(ruleset)
|
||||||
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
|
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
|
||||||
|
|
||||||
const addRule = (rule) => {
|
const addRule = (rule) => {
|
||||||
@ -260,6 +263,18 @@ export const init = (extraRuleset, palette) => {
|
|||||||
targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
|
targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
case 'mod': {
|
||||||
|
if (args.length !== 2) {
|
||||||
|
throw new Error(`$mod requires 2 arguments, ${args.length} were provided`)
|
||||||
|
}
|
||||||
|
const color = convert(findColor(args[0], dynamicVars)).rgb
|
||||||
|
const amount = Number(args[1])
|
||||||
|
const effectiveBackground = dynamicVars.lowerLevelBackground
|
||||||
|
const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
|
||||||
|
const mod = isLightOnDark ? 1 : -1
|
||||||
|
targetColor = brightness(amount * mod, color).rgb
|
||||||
|
break
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Failure executing color function', e)
|
console.error('Failure executing color function', e)
|
||||||
@ -332,12 +347,12 @@ export const init = (extraRuleset, palette) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const processInnerComponent = (component, parent) => {
|
const processInnerComponent = (component, parent) => {
|
||||||
const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
|
// const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
|
||||||
if (!component.virtual) {
|
// if (!component.virtual) {
|
||||||
const path = [...parentList, component.name].join(' > ')
|
// const path = [...parentList, component.name].join(' > ')
|
||||||
console.log('Component ' + path + ' process starting')
|
// console.log('Component ' + path + ' process starting')
|
||||||
}
|
// }
|
||||||
const t0 = performance.now()
|
// const t0 = performance.now()
|
||||||
const {
|
const {
|
||||||
validInnerComponents = [],
|
validInnerComponents = [],
|
||||||
states: originalStates = {},
|
states: originalStates = {},
|
||||||
@ -359,7 +374,7 @@ export const init = (extraRuleset, palette) => {
|
|||||||
}).reduce((acc, x) => [...acc, ...x], [])
|
}).reduce((acc, x) => [...acc, ...x], [])
|
||||||
|
|
||||||
stateVariantCombination.forEach(combination => {
|
stateVariantCombination.forEach(combination => {
|
||||||
const tt0 = performance.now()
|
// const tt0 = performance.now()
|
||||||
const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
|
const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
|
||||||
const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
|
const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
|
||||||
|
|
||||||
@ -422,6 +437,11 @@ export const init = (extraRuleset, palette) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
|
||||||
|
console.log(existingRules)
|
||||||
|
console.log(computedRule, newTextRule)
|
||||||
|
}
|
||||||
|
|
||||||
dynamicVars.inheritedBackground = lowerLevelBackground
|
dynamicVars.inheritedBackground = lowerLevelBackground
|
||||||
|
|
||||||
// TODO properly provide "parent" text color?
|
// TODO properly provide "parent" text color?
|
||||||
@ -518,17 +538,17 @@ export const init = (extraRuleset, palette) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
|
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
|
||||||
const tt1 = performance.now()
|
// const tt1 = performance.now()
|
||||||
if (!component.virtual) {
|
// if (!component.virtual) {
|
||||||
console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
|
// console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
|
||||||
}
|
// }
|
||||||
})
|
})
|
||||||
|
|
||||||
const t1 = performance.now()
|
// const t1 = performance.now()
|
||||||
if (!component.virtual) {
|
// if (!component.virtual) {
|
||||||
const path = [...parentList, component.name].join(' > ')
|
// const path = [...parentList, component.name].join(' > ')
|
||||||
console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
|
// console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
processInnerComponent(components.Root)
|
processInnerComponent(components.Root)
|
||||||
|
@ -5,5 +5,19 @@ export default {
|
|||||||
'Link',
|
'Link',
|
||||||
'Text',
|
'Text',
|
||||||
'Icon'
|
'Icon'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
shadow: [{
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
blur: 4,
|
||||||
|
spread: 0,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.6
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user