From a3438154761801e00cd5d8b7e24c863b94c813d9 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Thu, 11 Feb 2016 12:31:42 +0100 Subject: [PATCH] revamp settings button to more options --- app/index.html | 2 +- app/styles/app/layouts/repo.sass | 43 ++++++++++--------- app/styles/app/vars.sass | 1 + app/templates/components/repo-show-tools.hbs | 7 +-- .../line-icons/icon-arrow-dropdown-teal.svg | 1 - .../images/line-icons/icon-arrow-dropdown.svg | 1 - .../line-icons/icon-tofuburger-teal.svg | 11 +++++ public/images/line-icons/icon-tofuburger.svg | 6 +-- 8 files changed, 43 insertions(+), 29 deletions(-) delete mode 100644 public/images/line-icons/icon-arrow-dropdown-teal.svg delete mode 100644 public/images/line-icons/icon-arrow-dropdown.svg create mode 100644 public/images/line-icons/icon-tofuburger-teal.svg diff --git a/app/index.html b/app/index.html index 2b3e7e67..13836526 100644 --- a/app/index.html +++ b/app/index.html @@ -10,7 +10,7 @@ {{content-for "head"}} - + diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index 4a582ec2..aabd00c3 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -49,36 +49,26 @@ $dropdown-button-margin: -9px .settings-button display: block height: $dropdown-button-height - padding: 0 0.7em - border: 1px solid #f1f1f1 - color: $cement-grey + padding: 0 + border: 1px solid $pebble-grey + color: $asphalt-grey border-radius: 2px text-align: center line-height: 2 font-size: 14px - &:after - content: "" - display: inline-block - width: 0.9em - height: 0.6em - margin-left: 1em - background: - size: 100% - repeat: no-repeat - @extend %icon-line-dropdown - .icon-settings - width: .9em - margin-right: .3em + cursor: pointer + .label-align + padding: 0 1em &:hover, &:active, // .display &, .settings-menu:hover & color: $oxide-blue border-color: $oxide-blue - .icon-settings - @extend %icon-line-cog-teal - &:after - @extend %icon-line-dropdown-teal + .settings-tofu + border-color: $oxide-blue + background-image: inline-image('/line-icons/icon-tofuburger-teal.svg') + @media #{$medium-up} margin-top: $dropdown-button-margin @@ -104,6 +94,19 @@ $dropdown-button-margin: -9px @media #{$medium-up} margin-top: -3px +.settings-tofu + width: 2em + height: 2em + display: inline-block + vertical-align: top + background: + image: inline-image('/line-icons/icon-tofuburger.svg') + repeat: no-repeat + size: 20px + position: 50% + @media #{$medium-up} + border-left: 1px solid $pebble-grey + .settings-menu position: relative @media #{$small-only} diff --git a/app/styles/app/vars.sass b/app/styles/app/vars.sass index 0b1a79d5..a6166983 100644 --- a/app/styles/app/vars.sass +++ b/app/styles/app/vars.sass @@ -6,6 +6,7 @@ $font-size-s: 12px $font-weight-light: 300 $font-weight-normal: 400 +$font-weight-bold: 600 $top-height: 55px diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs index 77c44247..0638d21d 100644 --- a/app/templates/components/repo-show-tools.hbs +++ b/app/templates/components/repo-show-tools.hbs @@ -1,6 +1,7 @@ - - - Settings + + More options + +