From 7434806254ec97c534d166002da8032bf78ceee7 Mon Sep 17 00:00:00 2001 From: lislis Date: Mon, 21 Mar 2016 17:59:27 +0100 Subject: [PATCH] add star icon to empty star section update signin button redo cta arrow change some color values to variables --- app/styles/app/layouts/dashboard.sass | 11 ++- app/styles/app/layouts/top.sass | 38 ++++++---- app/styles/app/modules/buttons.sass | 71 +++++++++---------- app/styles/app/modules/icons.sass | 11 ++- app/templates/top.hbs | 5 +- public/images/cta-arrow.svg | 7 -- .../images/stroke-icons/icon-github-white.svg | 24 +++++++ public/images/stroke-icons/icon-star.svg | 2 +- 8 files changed, 100 insertions(+), 69 deletions(-) delete mode 100644 public/images/cta-arrow.svg create mode 100755 public/images/stroke-icons/icon-github-white.svg diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index 5c93ad70..829d7e51 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -23,13 +23,18 @@ margin-bottom: 4rem .starred-empty - border: dotted 1px $pebble-grey + border: dotted 1px rgba($cement-grey, 0.2) border-radius: 2px text-align: center padding: 2rem 0 - font-size: 20px + font-size: 18px color: $cement-grey - + span + @extend %icon-star + padding-left: 2em + background-size: 24px 24px + background-repeat: no-repeat + .dash-star &:hover, &:active diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass index 3c9f768b..973606d6 100644 --- a/app/styles/app/layouts/top.sass +++ b/app/styles/app/layouts/top.sass @@ -1,9 +1,9 @@ .top .cta - border-bottom: 2px solid #E4E4E4 - border-top: 2px solid #E4E4E4 + border-bottom: 2px solid rgba($cement-grey, 0.2) + border-top: 2px solid rgba($cement-grey, 0.2) line-height: 2.7em font-size: 16px - color: #71AE76 + color: $turf-green text-align: right padding-right: 1rem background-color: #fff @@ -13,16 +13,24 @@ position: relative margin: auto padding: 0 - - .arrow - display: block - position: absolute - top: -11px - right: 66px - background-image: inline-image('cta-arrow.svg') - background-repeat: no-repeat - width: 20px - height: 12px + &:after, + &:before + content: "" + display: block + width: 13px + position: absolute + transform: rotate(45deg) + &:after + height: 13px + background: rgba($cement-grey, 0.1) + top: -0.4rem + right: 4rem + &:before + height: 15px + background: white + top: -0.3rem + right: 57px + z-index: 1 @media #{$medium-up} display: block @@ -32,10 +40,10 @@ display: none !important .landing-pro .top - border-bottom: 1px solid #f1f1f1 + border-bottom: 1px solid $pebble-grey .top - background-color: #f1f1f1 + background-color: $pebble-grey .topbar height: $top-height diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 1d3b090c..2b93486c 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -1,26 +1,30 @@ -$button-border-color: #d4d4d4 +%button + font-family: $font-family-sans-serif + display: inline-block + cursor: pointer + white-space: nowrap + border-radius: 2px + border: none + vertical-align: middle + padding: 0.8rem + line-height: 1 + text-decoration: none .button, .btn - font-family: $font-family-sans-serif + @extend %button position: relative overflow: visible - display: inline-block - padding: 5px 10px - cursor: pointer outline: none - text-decoration: none text-align: center color: white - white-space: nowrap - border-radius: 2px background-color: $pebble-grey .button:hover, .button:focus, .button:active, .button.active - border-color: $button-border-color + border-color: $pebble-grey background-color: $cement-grey text-decoration: none color: #fff @@ -31,37 +35,30 @@ $button-border-color: #d4d4d4 border-bottom-color: #2356c4 background-color: #40454f -.button--signin, -.button--signingin - display: inline-block +.button-signin, +.button-signingin + @extend %button + height: 36px color: #fff - font-size: $font-size-s - line-height: 1 - text-decoration: none - border-radius: 4px - border: none - vertical-align: middle - background: - color: $turf-green + font-size: 14px + background-color: $turf-green + .loading-indicator + vertical-align: top + margin-left: .3em + i + background-color: white + width: 6px + height: 6px -.button--signin - padding: 0.6em 2em 0.55em 0.6em - cursor: pointer +.button-signin + @extend %icon-github-white + padding-right: 2.2em background: - image: inline-image('ui/github-signin.svg') + size: 16px + position: 95% repeat: no-repeat - position: 95.5% 45% &:hover - background-color: #73c78d - text-decoration: none - -.button--signingin - padding: 0.6em 0.6em 0.45em - span - display: inline-block - padding: 0 .2em - position: relative - top: -0.15em + background-color: rgba($turf-green, 0.8) .button--green border: none @@ -86,8 +83,8 @@ $button-border-color: #d4d4d4 &:hover background-color: darken(#39a85b, 10) -#auth #navigation .button--signin, -#auth #navigation .button--signingin +#auth #navigation .button-signin, +#auth #navigation .button-signingin display: none .button--grey diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index e51e4b2b..560e0ce7 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -92,12 +92,14 @@ @extend %icon background-image: inline-image('stroke-icons/icon-builds.svg') -%icon-line-commit, %icon-github background-image: inline-image('stroke-icons/icon-github.svg') +%icon-github-white + background-image: inline-image('stroke-icons/icon-github-white.svg') + .icon-line-commit @extend %icon - @extend %icon-line-commit + @extend %icon-github %icon-line-eye background-image:inline-image('stroke-icons/icon-seemore.svg') @@ -117,7 +119,7 @@ position: 3px 3px size: auto 10px display: inline-block - border: solid 1px #E4E6E6 + border: solid 1px $pebble-grey border-radius: 50% @extend %icon-line-question &:hover @@ -211,6 +213,9 @@ text-indent: 999px overflow: hidden +%icon-star + background-image: inline-image('stroke-icons/icon-star.svg') + .icon-star @extend %icon width: 18px diff --git a/app/templates/top.hbs b/app/templates/top.hbs index 4385f43d..543270c1 100644 --- a/app/templates/top.hbs +++ b/app/templates/top.hbs @@ -67,7 +67,7 @@
  • {{#if auth.signedOut}} - + {{/if}} {{#if auth.signedIn}} {{#link-to "profile" class="navigation-anchor signed-in"}} @@ -76,7 +76,7 @@ {{/link-to}} {{/if}} {{#if auth.signingIn}} - + {{/if}} {{#if auth.signedIn}}