From ffd7f3c1348ba9a2baa7c29b88a76efc1b19615a Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 9 May 2014 17:09:59 +1000 Subject: [PATCH] Refactor Friday! Tidying up css, removing unused lines, adding comments and general good stuff. --- .../stylesheets/darkswarm/checkout.css.sass | 14 ++-- .../stylesheets/darkswarm/header.css.sass | 1 - .../stylesheets/darkswarm/home_panes.css.sass | 1 + .../darkswarm/home_tagline.css.sass | 2 + .../darkswarm/login-modal.css.sass | 2 + .../stylesheets/darkswarm/menu.css.sass | 1 + app/assets/stylesheets/darkswarm/mixins.sass | 83 +++++++++++-------- .../darkswarm/producer_node.css.sass | 2 + .../stylesheets/darkswarm/tabs.css.sass | 8 +- .../stylesheets/darkswarm/typography.css.sass | 2 - 10 files changed, 66 insertions(+), 50 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/checkout.css.sass b/app/assets/stylesheets/darkswarm/checkout.css.sass index 2897801d4c..64a7e2bd00 100644 --- a/app/assets/stylesheets/darkswarm/checkout.css.sass +++ b/app/assets/stylesheets/darkswarm/checkout.css.sass @@ -1,13 +1,6 @@ @import mixins @import branding -@mixin h5-valid - h5 - -@mixin h5-invalid - h5 - background: #ff0000 - checkout display: block @@ -27,6 +20,8 @@ checkout padding: 0.65em background: #f7f7f7 + // Logic to turn on & off the alerts for success against each fieldset + label, label.alert, label.success, &.valid label.alert, &.dirty label.success @include csstrans display: none @@ -37,7 +32,6 @@ checkout display: none &.valid label.success display: inline - @include h5-valid h5.dirty background: #f7ccc5 @@ -47,6 +41,7 @@ checkout orderdetails table tr th text-align: left + // Logic to swap out up / down accordion icons dd span.accordion-up @@ -57,4 +52,5 @@ checkout span.accordion-up display: inline span.accordion-down - display: none \ No newline at end of file + display: none + diff --git a/app/assets/stylesheets/darkswarm/header.css.sass b/app/assets/stylesheets/darkswarm/header.css.sass index 910c40c6bc..f0bf6072d6 100644 --- a/app/assets/stylesheets/darkswarm/header.css.sass +++ b/app/assets/stylesheets/darkswarm/header.css.sass @@ -1,4 +1,3 @@ -/*body { background: #ff0000; }*/ nav.top-bar margin-bottom: 0px a.icon diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.sass b/app/assets/stylesheets/darkswarm/home_panes.css.sass index 153649bc8b..9797dc9c6e 100644 --- a/app/assets/stylesheets/darkswarm/home_panes.css.sass +++ b/app/assets/stylesheets/darkswarm/home_panes.css.sass @@ -1,6 +1,7 @@ @import branding @import mixins +// Styling for big panes on homepage #beta.pane @include lightbg diff --git a/app/assets/stylesheets/darkswarm/home_tagline.css.sass b/app/assets/stylesheets/darkswarm/home_tagline.css.sass index aa369723ea..2c3d01661d 100644 --- a/app/assets/stylesheets/darkswarm/home_tagline.css.sass +++ b/app/assets/stylesheets/darkswarm/home_tagline.css.sass @@ -1,6 +1,8 @@ @import branding @import mixins +// Styling for brand intro / tagline on homepage + #tagline background-color: black background-image: url("/assets/home/tagline-bg.jpg") diff --git a/app/assets/stylesheets/darkswarm/login-modal.css.sass b/app/assets/stylesheets/darkswarm/login-modal.css.sass index ff97fc496d..38fe5dee3a 100644 --- a/app/assets/stylesheets/darkswarm/login-modal.css.sass +++ b/app/assets/stylesheets/darkswarm/login-modal.css.sass @@ -1,3 +1,5 @@ + +// Styling for login modal to style tabs .login-modal background: #efefef .tabs-content diff --git a/app/assets/stylesheets/darkswarm/menu.css.sass b/app/assets/stylesheets/darkswarm/menu.css.sass index 9ffb810ac2..735a19e97b 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.sass +++ b/app/assets/stylesheets/darkswarm/menu.css.sass @@ -25,6 +25,7 @@ nav.top-bar a.icon i // Responsive @media screen and (min-width: 1025px) body.off-canvas + // padding required to placehold for fixed menu bar padding-top: 45px @media screen and (max-width: 1025px) section.right diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index c3c93fa11b..1f8086d9f2 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -1,6 +1,13 @@ @import typography @import branding + +// Generic \\ + +@mixin panepadding + padding-top: 100px + padding-bottom: 100px + @mixin big-input border: 1px solid #999 font-size: 18px @@ -12,9 +19,46 @@ @mixin disabled color: $disabled-bright -@mixin panepadding - padding-top: 100px - padding-bottom: 100px +@mixin csstrans + -webkit-transition: all 100ms ease-in-out + -moz-transition: all 100ms ease-in-out + -ms-transition: all 100ms ease-in-out + -o-transition: all 100ms ease-in-out + transition: all 100ms ease-in-out + -webkit-transform-style: preserve-3d + +@mixin box-shadow($box-shadow) + -moz-box-shadow: $box-shadow + -webkit-box-shadow: $box-shadow + box-shadow: $box-shadow + + +// Typography \\ + +@mixin avenir + font-family: "AvenirBla_IE", "AvenirBla" + +@mixin textpress + text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222 + +@mixin textsoftpress + text-shadow: 0 0 3px rgba(0,0,0,0.35) + +// TO USE icon-font +// Assign to :before or :after element +// Assign content: "string" + +@mixin icon-font + font-family: "foundation-icons" + display: inline-block + font-weight: normal + font-style: normal + font-variant: normal + text-transform: none + font-size: 80% + + +// Background options \\ @mixin darkbg background-color: $clr-brick @@ -59,38 +103,5 @@ background-repeat: no-repeat background-size: 100% auto -@mixin csstrans - -webkit-transition: all 100ms ease-in-out - -moz-transition: all 100ms ease-in-out - -ms-transition: all 100ms ease-in-out - -o-transition: all 100ms ease-in-out - transition: all 100ms ease-in-out - -webkit-transform-style: preserve-3d -@mixin box-shadow($box-shadow) - -moz-box-shadow: $box-shadow - -webkit-box-shadow: $box-shadow - box-shadow: $box-shadow - -@mixin avenir - font-family: "AvenirBla_IE", "AvenirBla" - -@mixin textpress - text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222 - -@mixin textsoftpress - text-shadow: 0 0 3px rgba(0,0,0,0.35) - -// TO USE -// Assign to :before or :after element -// Assign content: "string" - -@mixin icon-font - font-family: "foundation-icons" - display: inline-block - font-weight: normal - font-style: normal - font-variant: normal - text-transform: none - font-size: 80% diff --git a/app/assets/stylesheets/darkswarm/producer_node.css.sass b/app/assets/stylesheets/darkswarm/producer_node.css.sass index bd2fa77372..a926526397 100644 --- a/app/assets/stylesheets/darkswarm/producer_node.css.sass +++ b/app/assets/stylesheets/darkswarm/producer_node.css.sass @@ -2,6 +2,7 @@ .producers .active_table .active_table_node + //Open row &.open .active_table_row:first-child @@ -20,6 +21,7 @@ background-color: $clr-turquoise &:hover background-color: $clr-turquoise-bright + //Closed row &.closed &, & * diff --git a/app/assets/stylesheets/darkswarm/tabs.css.sass b/app/assets/stylesheets/darkswarm/tabs.css.sass index 3787cd6a17..303e8515ff 100644 --- a/app/assets/stylesheets/darkswarm/tabs.css.sass +++ b/app/assets/stylesheets/darkswarm/tabs.css.sass @@ -26,7 +26,8 @@ @media all and (max-width: 768px) line-height: inherit !important - // inactive link + // inactive nav link + dl dd border-top: 4px solid transparent @@ -36,7 +37,8 @@ visibility: hidden @include icon-font - // active link + // active nav link + dl dd.active border-top: 4px solid $clr-brick-bright @@ -47,6 +49,8 @@ visibility: visible @include icon-font + // content revealed in accordion + .tabs-content margin-bottom: 0 & > .content diff --git a/app/assets/stylesheets/darkswarm/typography.css.sass b/app/assets/stylesheets/darkswarm/typography.css.sass index abbfdca7cd..68d990240d 100644 --- a/app/assets/stylesheets/darkswarm/typography.css.sass +++ b/app/assets/stylesheets/darkswarm/typography.css.sass @@ -59,8 +59,6 @@ ul.ofn-list strong.avenir font-weight: normal // Avenir is basically bold anyway -td - font-family: "helvetica" // These selectors match the default Foundation selectors // For clean overriden magic