From f6a1b455e6ab6fc1b0b92f00d8590c7254040534 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Tue, 7 Jul 2015 20:17:04 +0200 Subject: [PATCH] refactor more settings styles --- app/styles/app/_mixins/vars.sass | 6 +- app/styles/app/layouts/owner.sass | 4 +- app/styles/app/layouts/settings.sass | 141 ++++++++++++--------------- app/styles/app/layouts/sidebar.sass | 2 +- app/styles/app/modules/tabs.sass | 6 +- 5 files changed, 72 insertions(+), 87 deletions(-) diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 9e70afe0..37e869da 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -4,10 +4,6 @@ $font-size-sm: 14px $line-height-m: 1.3 $font-size-s: 12px -// colors -$teal1: #5BA5A4 -$teal2: #63A4A3 - $blue-grey: #404650 $blue-grey-light: #d8e2e6 $light-gray: #e9e9e7 @@ -35,7 +31,7 @@ $error-color: $fail-color $start-color: #D2C93B $start-bg-color: #D2CA24 $cancel-color: #A1A0A0 -$dropdown-color: $teal1 +$dropdown-color: $teal-light $created-color: #CDBC2C $dashboard-text-color: #9d9fa1 diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass index 47245fbe..afacf718 100644 --- a/app/styles/app/layouts/owner.sass +++ b/app/styles/app/layouts/owner.sass @@ -112,7 +112,7 @@ .active, .active:hover, position: relative - color: $teal2 + color: $teal-dark &:after content: "" position: absolute @@ -120,7 +120,7 @@ bottom: -0.25em width: 100% height: 2px - background-color: $teal1 + background-color: $teal-light .active font-weight: 600 diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index dfd9d745..911d8e8a 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -1,11 +1,8 @@ -$heading-color: #63a4a3 -$setting-section-border: 2px solid #f2f3ef - .small-title font-size: 18px - color: $heading-color + color: $teal-light font-weight: 400 .settings @@ -14,12 +11,14 @@ $setting-section-border: 2px solid #f2f3ef .settings-section padding: 0 0 1em margin-bottom: 1.5em - border-bottom: $setting-section-border + border-bottom: 2px solid #f2f3ef &:last-of-type border-bottom: none .small-title margin-top: 0 + + %settings-list padding: 0 margin: 0 @@ -44,36 +43,78 @@ $setting-section-border: 2px solid #f2f3ef & + .label vertical-align: middle input - display: inline-block - height: 32px width: 80px - border: 1px solid #eeedec - border-radius: 4px font-size: $font-size-s - color: #8e8f8e text-align: center -.settings-envvar + + +%settings-row padding: .6em .5em border-radius: 4px background-color: #F6F5F5 -.env-var-name +.settings-envvar + @extend %settings-row + +.settings-sshkey + @extend %settings-row + display: block + margin-bottom: 1rem + span + vertical-align: middle + + + +%settings-name-section display: inline-block position: relative - width: grid-calc(6, 12) vertical-align: middle overflow: hidden + white-space: nowrap &:after content: "" @include fadeOut(right, -90deg, #F6F5F5) +.ssh-key-name + @extend %settings-name-section + width: 40% + .icon-key + @extend %icon + @extend .icon-key + width: 1.2em + height: 1.3em + +.env-var-name + @extend %settings-name-section + width: grid-calc(6, 12) + + + +%settings-value-section + display: inline-block + vertical-align: middle + white-space: nowrap + overflow: hidden + +.ssh-key-value + @extend %settings-value-section + width: 48% + text-align: right + @media #{$medium-up} + width: grid-calc(3, 12) + .icon-fingerprint + @extend %icon + @extend .icon-fingerprint + width: 1.3em + height: 1.3em + margin-right: .5em + .env-var-value display: inline-block width: grid-calc(4, 12) @media #{$medium-up} width: grid-calc(3, 12) - input display: inline-block width: 100% @@ -88,81 +129,32 @@ $setting-section-border: 2px solid #f2f3ef repeat: no-repeat position: 0.4em 0.7em -.env-var-action - position: relative + + +%settings-action-section display: inline-block + position: relative width: grid-calc(2, 24) float: right + vertical-align: middle text-align: center - - a - padding: 1em - .icon-delete @extend %icon @extend .icon-delete width: 1.1em height: 1.3em - &:hover .icon-delete @extend .icon-delete-hover - -.settings-sshkey - display: block - margin-bottom: 1rem - padding: .6em .5em - border-radius: 4px - background-color: #F6F5F5 - - span - vertical-align: middle - -.ssh-key-name - display: inline-block - position: relative - vertical-align: middle - width: 40% - white-space: nowrap - overflow: hidden - .icon-key - @extend %icon - @extend .icon-key - width: 1.2em - height: 1.3em - &:after - content: "" - @include fadeOut(right, -90deg, #F6F5F5) - -.ssh-key-value - display: inline-block - vertical-align: middle - width: 48% - text-align: right - white-space: nowrap - overflow: hidden - @media #{$medium-up} - width: grid-calc(3, 12) - .icon-fingerprint - @extend %icon - @extend .icon-fingerprint - width: 1.3em - height: 1.3em - margin-right: .5em +.env-var-action + @extend %settings-action-section + a + padding: 1em .ssh-key-action - display: inline-block - position: relative - vertical-align: middle - width: grid-calc(2, 24) - float: right + @extend %settings-action-section .icon-delete - @extend %icon - @extend .icon-delete - display: block - width: 1.1em - height: 1.3em margin: .2em auto 0 .icon-delete-disabled @extend %icon @@ -171,8 +163,5 @@ $setting-section-border: 2px solid #f2f3ef width: 1.1em height: 1.3em margin: .2em auto 0 - &:hover - .icon-delete - @extend .icon-delete-hover diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index bb6fdfbd..7ed7b3c1 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -77,7 +77,7 @@ $sb-font-size: 14px #tab_new a:hover .icon--plus:after - color: $teal1 + color: $teal-light &:after bottom: -2px diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index a5889c10..1423673c 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -20,7 +20,7 @@ .active a, a:hover position: relative - color: $teal2 + color: $teal-dark &:after content: "" position: absolute @@ -28,7 +28,7 @@ bottom: -0.25em width: 100% height: 2px - background-color: $teal2 + background-color: $teal-dark .active a font-weight: 600 @@ -68,7 +68,7 @@ color: $grey-light padding: .5em 0 .active - color: $teal2 + color: $teal-dark @media #{$medium-up} border-bottom: solid $cream-dark 2px