diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index c1e64fb889..393539e90d 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -128,7 +128,6 @@ color: $orange; } - &:hover { border-bottom-color: $orange-s2; @@ -139,18 +138,17 @@ } &.wrapper-alert-error { - border-bottom-color: $red; + border-bottom-color: $red-l1; .icon-error { - color: $red; + color: $red-l1; } - &:hover { - border-bottom-color: $red-s2; + border-bottom-color: $red; .icon-error { - color: $red-s2; + color: $red; } } } @@ -162,7 +160,6 @@ color: $green; } - &:hover { border-bottom-color: $green-s2; @@ -179,7 +176,6 @@ color: $blue; } - &:hover { border-bottom-color: $blue-s2; @@ -196,7 +192,6 @@ color: $pink; } - &:hover { border-bottom-color: $pink-s2; @@ -251,12 +246,12 @@ } .copy { - width: flex-grid(8, 12); + width: flex-grid(7, 12); margin-right: flex-gutter(); } .nav-actions { - width: flex-grid(3, 12); + width: flex-grid(4, 12); float: right; margin-top: ($baseline/2); text-align: right; @@ -269,6 +264,21 @@ &:last-child { margin-right: 0; } + + .action-primary { + @include transition (opacity 0.25s ease-in-out); + @include font-size(13); + font-weight: 600; + opacity: 0.90; + + &:hover { + opacity: 1.0; + } + } + + .action-secondary { + @include font-size(13); + } } } } @@ -276,22 +286,82 @@ // alert types &.warning { + .action-primary { + @include orange-button; + border-color: $orange-d2; + } + + a { + color: $orange; + + &:hover { + color: $orange-s2; + } + } } &.error { + .action-primary { + @include red-button; + border-color: $red-d2; + } + + a { + color: $red-l1; + + &:hover { + color: $red; + } + } } &.confirmation { + .action-primary { + @include green-button; + border-color: $green-d2; + } + + a { + color: $green; + + &:hover { + color: $green-s2; + } + } } &.announcement { + .action-primary { + @include blue-button; + border-color: $blue-d2; + } + + a { + color: $blue; + + &:hover { + color: $blue-s2; + } + } } &.step-required { + .action-primary { + border-color: $pink-d2; + @include pink-button; + } + + a { + color: $pink; + + &:hover { + color: $pink-s1; + } + } } } diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index b8d9a8ae2e..bd28702895 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -1,26 +1,20 @@ -@mixin clearfix { - &:after { - content: ''; - display: block; - height: 0; - visibility: hidden; - clear: both; - } -} +// studio specific mixins +// ==================== +// buttons @mixin button { display: inline-block; - padding: 4px 20px 6px; - font-size: 14px; + padding: ($baseline/5) $baseline ($baseline/4); + @include font-size(14); font-weight: 700; @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0)); @include transition(background-color .15s, box-shadow .15s); &.disabled { - border: 1px solid $lightGrey !important; + border: 1px solid $gray-l1 !important; border-radius: 3px !important; - background: $lightGrey !important; - color: $darkGrey !important; + background: $gray-l1 !important; + color: $gray-d1 !important; pointer-events: none; cursor: none; &:hover { @@ -33,34 +27,119 @@ } } -@mixin blue-button { +// button - green +@mixin green-button { @include button; - border: 1px solid #437fbf; + border: 1px solid $green-d1; border-radius: 3px; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: $blue; - color: #fff; + background-color: $green; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + color: $white; - &:hover, &.active { - background-color: #62aaf5; - color: #fff; + &:hover { + background-color: $green-s1; + color: $white; + } + + &.disabled { + border: 1px solid $green-l3 !important; + background: $green-l3 !important; + color: $white !important; + @include box-shadow(none); } } -@mixin green-button { - @include button; - border: 1px solid #0d7011; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: $green; - color: #fff; +// button - blue +@mixin blue-button { + @include button; + border: 1px solid $blue-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); + background-color: $blue; + color: $white; - &:hover { - background-color: #129416; - color: #fff; - } + &:hover, &.active { + background-color: $blue-s2; + color: $white; + } + + &.disabled { + border: 1px solid $blue-l3 !important; + background: $blue-l3 !important; + color: $white !important; + @include box-shadow(none); + } } +// button - red +@mixin red-button { + @include button; + border: 1px solid $red-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); + background-color: $red; + color: $white; + + &:hover, &.active { + background-color: $red-s1; + color: $white; + } + + &.disabled { + border: 1px solid $red-l3 !important; + background: $red-l3 !important; + color: $white !important; + @include box-shadow(none); + } +} + +// button - pink +@mixin pink-button { + @include button; + border: 1px solid $pink-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); + background-color: $pink; + color: $white; + + &:hover, &.active { + background-color: $pink-s1; + color: $white; + } + + &.disabled { + border: 1px solid $pink-l3 !important; + background: $pink-l3 !important; + color: $white !important; + @include box-shadow(none); + } +} + +// button - orange +@mixin orange-button { + @include button; + border: 1px solid $orange-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); + background-color: $orange; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + color: $gray-d2; + + &:hover { + background-color: $orange-s2; + color: $gray-d2; + } + + &.disabled { + border: 1px solid $orange-l3 !important; + background: $orange-l2 !important; + color: $gray-l1 !important; + @include box-shadow(none); + } +} + +// button - white @mixin white-button { @include button; border: 1px solid $mediumGrey; @@ -77,24 +156,10 @@ } } -@mixin orange-button { - @include button; - border: 1px solid #bda046; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); - background-color: #edbd3c; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - color: #3c3c3c; - - &:hover { - background-color: #ffcd46; - color: #3c3c3c; - } -} - +// button - grey @mixin grey-button { @include button; - border: 1px solid $darkGrey; + border: 1px solid $gray-d2; border-radius: 3px; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-color: #d1dae3; @@ -107,42 +172,25 @@ } } -@mixin green-button { - @include button; - border: 1px solid $darkGreen; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: $green; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - color: #fff; - - &:hover { - background-color: $brightGreen; - color: #fff; - } - - &.disabled { - border: 1px solid $disabledGreen !important; - background: $disabledGreen !important; - color: #fff !important; - @include box-shadow(none); - } -} - +// button - grey dark @mixin dark-grey-button { @include button; border: 1px solid #1c1e20; border-radius: 3px; background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; - color: #fff; + color: $white; &:hover { background-color: #595f64; - color: #fff; + color: $white; } } + +// ==================== + +// UI @mixin edit-box { padding: 15px 20px; border-radius: 3px; @@ -276,17 +324,9 @@ } } -@mixin sr-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} +// ==================== +// sunsetted mixins @mixin active { @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); background-color: rgba(255, 255, 255, .3); diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 292246676b..c3a5a1d743 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -120,10 +120,34 @@

Alert Actions

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

A Newer Version of This Exists

+

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

+
+ + @@ -160,7 +184,7 @@ ⚠
-

We're Sorry, there was a error with Studio

+

We're sorry, there was a error with Studio

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

@@ -180,10 +204,7 @@

Alert Actions

@@ -204,7 +225,10 @@

Alert Actions

@@ -225,13 +249,25 @@
-
+

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.

+

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

+ +
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 76d52ed930..0c3eee602e 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -8,11 +8,16 @@ font-size: ($sizeValue/10) + rem; } + +// ==================== + // line-height @function lh($amount: 1) { @return $body-line-height * $amount; } +// ==================== + // image-replacement hidden text @mixin text-hide() { text-indent: 100%; @@ -32,6 +37,8 @@ width: 1px; } +// ==================== + // vertical and horizontal centering @mixin vertically-and-horizontally-centered ($height, $width) { left: 50%; @@ -43,6 +50,8 @@ top: 150px; } +// ==================== + // sizing @mixin size($width: $baseline, $height: $baseline) { height: $height; @@ -53,6 +62,8 @@ @include size($size); } +// ==================== + // placeholder styling @mixin placeholder($color) { :-moz-placeholder { @@ -64,4 +75,27 @@ :-ms-input-placeholder { color: $color; } +} + +// utility +@mixin clearfix { + &:after { + content: ''; + display: block; + height: 0; + visibility: hidden; + clear: both; + } +} + +// sunsetted mixins +@mixin sr-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } \ No newline at end of file