From bebe0c41f64d4137db6665b241c57f7c2250b857 Mon Sep 17 00:00:00 2001 From: summerscope Date: Thu, 11 Sep 2014 11:50:46 +1000 Subject: [PATCH] Styling for hubs and producers - adding rounded corners, making current shop less intense --- .../darkswarm/active_table.css.sass | 6 ++++- .../stylesheets/darkswarm/branding.css.sass | 12 ---------- .../stylesheets/darkswarm/hub_node.css.sass | 23 ++++++------------- app/assets/stylesheets/darkswarm/mixins.sass | 4 ++++ 4 files changed, 16 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/active_table.css.sass b/app/assets/stylesheets/darkswarm/active_table.css.sass index 695ee3039a..36df754b66 100644 --- a/app/assets/stylesheets/darkswarm/active_table.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table.css.sass @@ -44,6 +44,7 @@ .active_table_row // Inherits from active_table border: 1px solid transparent + @include border-radius(0.5em) // Foundation overrides margin-left: 0 @@ -63,14 +64,18 @@ border-right: 1px solid $disabled-bright border-top: 0 border-bottom: 0 + @include border-radius(0) .active_table_row:first-child border-top: 1px solid $disabled-bright + color: $dark-grey + @include border-radius-mixed(0.5em, 0.5em, 0, 0) &:hover, &:active, &:focus // color: $dark-grey .active_table_row:last-child border-bottom: 1px solid $disabled-bright + @include border-radius-mixed(0, 0, 0.5em, 0.5em) //Open row sections @@ -104,7 +109,6 @@ color: $dark-grey &.open .active_table_row:first-child - &, & * color: $dark-grey diff --git a/app/assets/stylesheets/darkswarm/branding.css.sass b/app/assets/stylesheets/darkswarm/branding.css.sass index 68f60dde53..fabb82130f 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.sass +++ b/app/assets/stylesheets/darkswarm/branding.css.sass @@ -1,15 +1,3 @@ -// ORIGINAL -// $clr-brick: #8f301d -// $clr-brick-light: #f5e4e1 -// $clr-brick-ultra-light: #f7f4ef -// $clr-brick-bright: #db583d -// $clr-brick-light-bright: #f4bbb0 - -// $clr-turquoise: #097563 -// $clr-turquoise-light: #cef2ec -// $clr-turquoise-ultra-light: #e6faf7 -// $clr-turquoise-bright: #1d8f7c - $clr-brick: #c1122b $clr-brick-light: #f5e6e7 $clr-brick-ultra-light: #faf5f6 diff --git a/app/assets/stylesheets/darkswarm/hub_node.css.sass b/app/assets/stylesheets/darkswarm/hub_node.css.sass index 0ef4d83672..c4ae2d0082 100644 --- a/app/assets/stylesheets/darkswarm/hub_node.css.sass +++ b/app/assets/stylesheets/darkswarm/hub_node.css.sass @@ -15,7 +15,6 @@ color: $clr-brick-bright //Hub and Producer icons - // i.ofn-i_040-hub i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed font-size: 2rem display: inline-block @@ -75,17 +74,6 @@ &:hover, &:active, &:focus border: none color: $disabled-dark - &.open - .active_table_row:first-child - color: $disabled-dark - strong - color: $disabled-dark - &:hover, &:active, &:focus - color: $disabled-dark - strong - color: $disabled-dark - .active_table_row:nth-child(2) - background-color: rgba(255, 255, 255, 0) //Padding second row &.open @@ -96,13 +84,16 @@ &.current //overwrites active_table &.closed, &.open - .active_table_row:first-child - background-color: $clr-brick + .active_table_row:first-child, .active_table_row:last-child + background-color: rgba(245, 230, 231, 0.95) opacity: 1 &:hover, &:focus, &:active opacity: 0.9 - &, & * - color: white + &.closed + a, a * + color: $clr-brick + &:hover, &:active, &:focus + color: $clr-brick-bright &.open, &.closed .active_table_row border-color: $clr-brick diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index 2da53e9c50..6eef888a17 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -20,6 +20,10 @@ -webkit-border-radius: $border-radius border-radius: $border-radius +@mixin border-radius-mixed($border-radius-TL, $border-radius-TR, $border-radius-BR, $border-radius-BL) + -webkit-border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL + border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL + @mixin transform-translate($translate) -ms-transform: $translate -webkit-transform: $translate