diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue index b6ef235a..e34a6f3c 100644 --- a/src/components/component_preview/component_preview.vue +++ b/src/components/component_preview/component_preview.vue @@ -111,6 +111,8 @@ export default { "x-num x-slide . " "options options options"; grid-gap: 0.5em; + max-width: 25em; + max-height: 25em; .header { grid-area: header; diff --git a/src/components/input.style.js b/src/components/input.style.js index 087de1e1..c60ac1e4 100644 --- a/src/components/input.style.js +++ b/src/components/input.style.js @@ -18,9 +18,9 @@ export default { { component: 'Root', directives: { - '--inputDefaultBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)', - '--inputDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5', - '--inputDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5' + '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)', + '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5', + '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5' } }, { @@ -41,25 +41,25 @@ export default { spread: 0, color: '#000000', alpha: 1 - }, '--inputDefaultBevel'] + }, '--defaultInputBevel'] } }, { state: ['hover'], directives: { - shadow: ['--inputDefaultHoverGlow', '--inputDefaultBevel'] + shadow: ['--defaultInputHoverGlow', '--defaultInputBevel'] } }, { state: ['focused'], directives: { - shadow: ['--inputDefaultFocusGlow', '--inputDefaultBevel'] + shadow: ['--defaultInputFocusGlow', '--defaultInputBevel'] } }, { state: ['focused', 'hover'], directives: { - shadow: ['--inputDefaultFocusGlow', '--inputDefaultHoverGlow', '--inputDefaultBevel'] + shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel'] } }, { diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss index 69349f78..51d4a1a7 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.scss +++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss @@ -119,6 +119,12 @@ } } + .palettes-editor { + .list-edit-area { + align-self: baseline; + } + } + .variables-editor { .variable-selector { display: grid; @@ -132,6 +138,10 @@ display: grid; grid-template-rows: subgrid; } + + .shadow-control { + grid-row: 2 / span 2; + } } .component-editor { diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue index 1150a406..1ccd7ab8 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.vue +++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue @@ -4,6 +4,7 @@