From d7bbfbc707299ec1f5db960ee892075b5bc29269 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 22 Feb 2013 13:52:24 -0500 Subject: [PATCH] studio - alerts: basic layout and general alert styling WIP --- cms/static/sass/_alerts.scss | 161 ++++++++++++++++++++++++-------- cms/static/sass/_base.scss | 45 +++++++++ cms/static/sass/_header.scss | 2 +- cms/static/sass/_variables.scss | 18 +++- cms/templates/overview.html | 129 +++++++++++++++++++++++++ cms/templates/unit.html | 23 ----- 6 files changed, 314 insertions(+), 64 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 4a20980a57..c1e64fb889 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -102,19 +102,19 @@ // alerts .wrapper-alert { - @include clearfix(); @include box-sizing(border-box); - @include transition (opacity 2.0s ease-in-out 5s); - @include box-shadow(0 1px 2px rgba(0,0,0,0.2)); + @include transition (opacity 2.0s ease-in-out 5s, border 0.5s ease-in-out); + @include box-shadow(0 1px 1px $white, inset 0 2px 5px $shadow-d1); position: relative; top: -($baseline*1.5); z-index: 100; overflow: hidden; width: 100%; opacity: 0; - border-bottom: 2px solid $blue-d2; + border-bottom: 4px solid $gray-l1; + border-top: 1px solid $black; padding: $baseline ($baseline*2); - background: $blue; + background: $gray-d3; &.is-shown { bottom: 0; @@ -122,27 +122,95 @@ } &.wrapper-alert-warning { - background: $orange-s1; - border-color: $orange-d1; + border-bottom-color: $orange; + + .icon-warning { + color: $orange; + } + + + &:hover { + border-bottom-color: $orange-s2; + + .icon-warning { + color: $orange-s2; + } + } } &.wrapper-alert-error { - border-color: shade($red, 50%); - color: $white; + border-bottom-color: $red; + + .icon-error { + color: $red; + } + + + &:hover { + border-bottom-color: $red-s2; + + .icon-error { + color: $red-s2; + } + } } - &.wrapper-alert-confirm { - border-color: shade($green, 30%); + &.wrapper-alert-confirmation { + border-bottom-color: $green; + + .icon-confirmation { + color: $green; + } + + + &:hover { + border-bottom-color: $green-s2; + + .icon-confirmation { + color: $green-s2; + } + } } - &.wrapper-alert-inform { - border-color: $blue-d1; + &.wrapper-alert-announcement { + border-bottom-color: $blue; + + .icon-announcement { + color: $blue; + } + + + &:hover { + border-bottom-color: $blue-s2; + + .icon-announcement { + color: $blue-s2; + } + } + } + + &.wrapper-alert-step-required { + border-bottom-color: $pink; + + .icon-step-required { + color: $pink; + } + + + &:hover { + border-bottom-color: $pink-s2; + + .icon-announcement { + color: $pink-s2; + } + } } } .alert { @include font-size(14); @include box-sizing(border-box); + @include clearfix(); margin: 0 auto; width: flex-grid(12); max-width: $fg-max-width; @@ -153,40 +221,47 @@ font-weight: 700; } + .icon, .copy { + float: left; + } + + .icon { + @include transition (color 0.5s ease-in-out); + @include font-size(28); + width: flex-grid(1, 12); + margin-right: flex-gutter(); + text-align: right; + } + .copy { @include font-size(14); + width: flex-grid(10, 12); + color: $gray-l2; - .icon { - @include font-size(24); - @include border-radius(50px); - display: inline-block; - vertical-align: top; - margin-right: ($baseline/2); - padding: ($baseline/4) ($baseline/2) ($baseline/10) ($baseline/2); - } - - p { - width: flex-grid(8, 9); - display: inline-block; - vertical-align: top; + .title { + margin-bottom: 0; + color: $white; } } &.has-actions { + .icon { + width: flex-grid(1, 12); + } + .copy { - float: left; width: flex-grid(8, 12); margin-right: flex-gutter(); } - .actions { - float: right; - width: flex-grid(4, 12); - margin-top: ($baseline/2); + .nav-actions { + width: flex-grid(3, 12); + float: right; + margin-top: ($baseline/2); text-align: right; - li { + .nav-item { display: inline-block; vertical-align: middle; margin-right: ($baseline/2); @@ -200,15 +275,23 @@ // alert types &.warning { - color: $gray-d2; + + } - .copy { + &.error { + + } + + &.confirmation { + + } + + &.announcement { + + } + + &.step-required { - .icon { - background: $gray-d2; - color: $orange-s1; - } - } } } diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 5d4bc7c773..62f72e8d63 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -50,6 +50,51 @@ h1 { // ==================== +// typography - basic +.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 { + font-weight: 600; + color: $gray-d3; + margin: 0; + padding: 0; +} + +.title-1 { + @include font-size(32); + margin-bottom: ($baseline*1.5); +} + +.title-2 { + @include font-size(24); + margin-bottom: $baseline; +} + +.title-3 { + @include font-size(16); + margin-bottom: ($baseline/2); +} + +.title-4 { + @include font-size(14); + margin-bottom: $baseline; + font-weight: 500 +} + +.title-5 { + @include font-size(14); + color: $gray-l1; + margin-bottom: $baseline; + font-weight: 500 +} + +.title-6 { + @include font-size(14); + color: $gray-l2; + margin-bottom: $baseline; + font-weight: 500 +} + +// ==================== + // layout - basic page header .wrapper-mast { margin: 0; diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index 3115711506..53edbd3e9e 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -5,7 +5,7 @@ margin: 0 0 ($baseline*1.5) 0; padding: $baseline; border-bottom: 1px solid $gray; - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2)); background: $white; height: 76px; position: relative; diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index eb2bd29ebd..907d5cbdb2 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -63,6 +63,23 @@ $pink-u1: desaturate($pink,15%); $pink-u2: desaturate($pink,30%); $pink-u3: desaturate($pink,45%); +$red: rgb(178, 6, 16); +$red-l1: tint($red,20%); +$red-l2: tint($red,40%); +$red-l3: tint($red,60%); +$red-l4: tint($red,80%); +$red-l5: tint($red,90%); +$red-d1: shade($red,20%); +$red-d2: shade($red,40%); +$red-d3: shade($red,60%); +$red-d4: shade($red,80%); +$red-s1: saturate($red,15%); +$red-s2: saturate($red,30%); +$red-s3: saturate($red,45%); +$red-u1: desaturate($red,15%); +$red-u2: desaturate($red,30%); +$red-u3: desaturate($red,45%); + $green: rgb(37, 184, 90); $green-l1: tint($green,20%); $green-l2: tint($green,40%); @@ -123,7 +140,6 @@ $shadow-d1: rgba(0,0,0,0.4); $baseFontColor: #3c3c3c; $offBlack: #3c3c3c; $orange: #edbd3c; -$red: #b20610; $green: #108614; $lightGrey: #edf1f5; $mediumGrey: #b0b6c2; diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 91a1107726..292246676b 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -106,6 +106,135 @@ <%block name="content"> + +
+
+ ⚠ + +
+

You are editing a draft

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ ✓ + +
+

Your changes have been saved

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+
+
+ + +
+
+ ✓ + +
+

X Has been removed

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ ⚠ + +
+

We're Sorry, there was a error with Studio

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ ⚠ + +
+

There was an error in your submission

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ + +
+

Your Studio account has been created, but needs to be activated

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+

Section Release Date

diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 53be470a50..a95061233b 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -31,29 +31,6 @@ <%block name="content"> - - -
-
-
- ⚠ -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
-