From 51a791f4c9bc39aa54c7fe39330f628d1edccbc8 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Wed, 18 Mar 2015 18:23:25 +0100 Subject: [PATCH] new top bar, so shiny --- app/styles/app/layouts/top.sass | 103 ++++++++++++++++++-- app/styles/app/modules/buttons.sass | 60 ++++++------ app/templates/top.hbs | 59 ++---------- public/images/svg/travis-ci-logo-hover.svg | 106 +++++++++++++++++++++ public/images/svg/travis-ci-logo.svg | 28 ++++++ 5 files changed, 266 insertions(+), 90 deletions(-) create mode 100644 public/images/svg/travis-ci-logo-hover.svg create mode 100644 public/images/svg/travis-ci-logo.svg diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass index eb54df8b..96e08484 100644 --- a/app/styles/app/layouts/top.sass +++ b/app/styles/app/layouts/top.sass @@ -1,21 +1,112 @@ $top-height: 55px +.logo + position: relative + margin: 0 1.5rem 0 1rem + float: left + a + display: block + width: 100px + height: $top-height + z-index: 999 + border: none !important + text-indent : -9999px + transition: background-color 200ms ease + background : inline-image('svg/travis-ci-logo.svg') no-repeat 0 50% + &:hover + background : #eaeaea inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50% + +.burger + overflow: auto + height: $top-height + @media #{$medium-up} + display: none + + .burger-btn + float: right + font-size: 50px + background: none + border: none + line-height: 1 + color: $grey1 + outline: none !important + @include clearfix + &:hover + cursor: pointer .topbar + font-size: $font-size-m background-color: $cream-light color: $grey1 a + display: block color: $grey1 + border-bottom: solid 1px $cream-dark + + @media #{$small-only} + .navigation + height: 0 + overflow: hidden + &.is-open + height: auto + a + padding: .5em 1em + + .navigation, + .navigation-nested + @include resetul + + .navigation-handle + position: relative + margin: 0 + + .navigation--profile + img + border-radius: 50%; + width: 2.7rem; + height: 2.7rem; + margin-left: 1rem; + transform: translateY(-0.1rem); + @media #{$medium-up} height: $top-height - - .burger - display: none - + // padding: 0 0 0 1rem .navigation - li - @extend %inline-block + height: $top-height + > li + display: inline-block + margin-right: 1rem + a + height: $top-height + line-height: $top-height + 2px + border: none + + .navigation--profile + float: right + + .navigation--profile.signed-out, + .navigation--profile.signing-in + line-height: $top-height - 5px + + .navigation-nested + display: none + a + height: 35px + line-height: 35px + padding: 0 2em + &:hover + background-color: $cream-dark + + .navigation--profile.signed-in + .navigation-handle:hover + .navigation-nested, + .navigation-nested:hover + position: absolute + top: $top-height + right: 1rem + display: block + z-index: 90 + background-color: $cream-light diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 079305aa..e8d35b10 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -52,39 +52,37 @@ $button-border-color: #d4d4d4 border: 1px solid #40454F cursor: pointer -#top - .button--signin, - .button--signingin - display: inline-block - margin-right: 1em - color: $white - font-size: $font-size-small - line-height: 1 +.button--signin, +.button--signingin + display: inline-block + color: $white + font-size: $font-size-small + line-height: 1 + text-decoration: none + border-radius: 4px + border: none + vertical-align: middle + background: + color: $pass-color + +.button--signin + padding: 0.6em 2em 0.55em 0.6em + cursor: pointer + background: + image: inline-image('ui/github-signin.svg') + repeat: no-repeat + position: 95.5% 45% + &:hover + background-color: #73c78d text-decoration: none - border-radius: 4px - border: none - vertical-align: middle - background: - color: $pass-color - .button--signin - padding: 0.6em 2em 0.55em 0.6em - cursor: pointer - background: - image: inline-image('ui/github-signin.svg') - 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 +.button--signingin + padding: 0.6em 0.6em 0.45em + span + display: inline-block + padding: 0 .2em + position: relative + top: -0.15em .btn @extend .button diff --git a/app/templates/top.hbs b/app/templates/top.hbs index 6abb3e6c..497de5d8 100644 --- a/app/templates/top.hbs +++ b/app/templates/top.hbs @@ -5,69 +5,22 @@