From 691f92a81eada7648e1e68e1fee5913adfb2a080 Mon Sep 17 00:00:00 2001 From: Nelson Pecora Date: Thu, 18 Aug 2016 17:22:39 -0400 Subject: [PATCH] larger, more angular selectors (#592) * larger, more angular selectors * tighter padding --- media/component-bar-delete.svg | 6 ---- media/component-bar-parent.svg | 6 ---- media/component-bar-settings.svg | 6 ---- media/delete.svg | 3 ++ media/parent.svg | 3 ++ media/settings.svg | 3 ++ styleguide/component-select.scss | 53 ++++++++++---------------------- template.nunjucks | 10 +++--- 8 files changed, 31 insertions(+), 59 deletions(-) delete mode 100755 media/component-bar-delete.svg delete mode 100755 media/component-bar-parent.svg delete mode 100755 media/component-bar-settings.svg create mode 100644 media/delete.svg create mode 100644 media/parent.svg create mode 100644 media/settings.svg diff --git a/media/component-bar-delete.svg b/media/component-bar-delete.svg deleted file mode 100755 index 843c0852e..000000000 --- a/media/component-bar-delete.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/media/component-bar-parent.svg b/media/component-bar-parent.svg deleted file mode 100755 index bf78a7c38..000000000 --- a/media/component-bar-parent.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/media/component-bar-settings.svg b/media/component-bar-settings.svg deleted file mode 100755 index 606dd8661..000000000 --- a/media/component-bar-settings.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/media/delete.svg b/media/delete.svg new file mode 100644 index 000000000..1c0bc7577 --- /dev/null +++ b/media/delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/media/parent.svg b/media/parent.svg new file mode 100644 index 000000000..b9a668879 --- /dev/null +++ b/media/parent.svg @@ -0,0 +1,3 @@ + + + diff --git a/media/settings.svg b/media/settings.svg new file mode 100644 index 000000000..832bbd4cd --- /dev/null +++ b/media/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/styleguide/component-select.scss b/styleguide/component-select.scss index 9d9b7c943..43c3e12c4 100644 --- a/styleguide/component-select.scss +++ b/styleguide/component-select.scss @@ -4,16 +4,14 @@ @import 'buttons'; // selector offsets, for the selector outline -$offset-width: 10px; +$offset-width: 8px; $offset-width-half: $offset-width / 2; -$offset-height: 30px; +$offset-height: 8px; $offset-height-half: $offset-height / 2; -$offset-height-menu: $offset-height-half - 1; // 1px less, so the menu border always displays $parent-offset: 4px; // how much wider should parent outline be (each side) // icon sizes -$action-icon-small: 16px; -$action-icon-large: 22px; +$action-icon-small: 18px; // selector colors $page-color: $blue; @@ -69,23 +67,21 @@ $layout-parent-bg-color: $purple-25; border-color: transparent; border-width: 1px; border-style: solid; - border-radius: 10px; - box-shadow: 1px 1px 20px -9px $black; // even subtler shadow for the menus - right: $offset-width-half; + right: -1px; // align borders position: absolute; } // place the top and bottom menus bisecting the outline vertically .component-selector-top { border-color: $layout-bg-color; - bottom: calc(100% - #{$offset-height-menu}); + bottom: 100%; } // bottom menu is more offset, since it concerns actions that don't // affect the component itself (but rather things around it, e.g. adding new components) .component-selector-bottom { border-color: $layout-bg-color; - top: calc(100% - #{$offset-height-menu / 2}); + top: 100%; } .kiln-page-area .component-selector-top, @@ -112,7 +108,6 @@ $layout-parent-bg-color: $purple-25; font-size: 14px; line-height: $action-icon-small; // same vertical space as the icons margin: 0; - padding: 6px 8px; white-space: nowrap; } @@ -122,6 +117,8 @@ $layout-parent-bg-color: $purple-25; .selected-action-settings, .selected-action-delete { @include icon-button($layout-color, $action-icon-small); + + padding: 14px; } .kiln-page-area .selected-label, @@ -129,28 +126,22 @@ $layout-parent-bg-color: $purple-25; .kiln-page-area .selected-action-settings, .kiln-page-area .selected-action-delete { @include icon-button($page-color, $action-icon-small); + + padding: 14px; } // add button is larger .selected-add, .selected-replace { - @include icon-button($layout-color, $action-icon-large); + @include icon-button($layout-color, $action-icon-small); + + padding: 14px; } .kiln-page-area .selected-add, .kiln-page-area .selected-replace { - @include icon-button($page-color, $action-icon-large); -} + @include icon-button($page-color, $action-icon-small); -// set a border on parent, settings, and delete -.selected-info-parent, -.selected-action-settings, -.selected-action-delete { - border-left: 1px solid $layout-bg-color; -} -.kiln-page-area .selected-info-parent, -.kiln-page-area .selected-action-settings, -.kiln-page-area .selected-action-delete { - border-left: 1px solid $page-bg-color; + padding: 14px; } // selected parent @@ -174,13 +165,8 @@ $layout-parent-bg-color: $purple-25; .selected-label, .selected-action-settings { @include icon-button($layout-parent-color, $action-icon-small); - } - // set a border on settings instead of its container, - // because a parent might only have `delete` and we don't want an empty - // `selected-actions` menu with a border and empty space - .selected-action-settings { - border-left: 1px solid $layout-parent-bg-color; + padding: 14px; } // hide extraneous buttons @@ -202,13 +188,8 @@ $layout-parent-bg-color: $purple-25; .selected-label, .selected-action-settings { @include icon-button($page-parent-color, $action-icon-small); - } - // set a border on settings instead of its container, - // because a parent might only have `delete` and we don't want an empty - // `selected-actions` menu with a border and empty space - .selected-action-settings { - border-left: 1px solid $page-parent-bg-color; + padding: 14px; } } diff --git a/template.nunjucks b/template.nunjucks index 0bf0d3b80..366c232ee 100644 --- a/template.nunjucks +++ b/template.nunjucks @@ -225,8 +225,8 @@
  • - - + +
    • @@ -236,11 +236,11 @@