Skip to content

E
edx-platform
Commit eb165873 by Brian Talbot
Options

studio - alerts: revised border styling on all elements and button/color inheritance

parent 72c58cd4
Showing with 126 additions and 174 deletions
cms/static/sass/_alerts.scss
...@@ -24,6 +24,112 @@ ...@@ -24,6 +24,112 @@
} }
} }
.alert, .notification, .prompt {
// types - confirm
&.confirm {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - warning
&.warning {
.nav-actions .action-primary {
@include orange-button();
border-color: $orange-d2;
color: $gray-d4;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
// types - error
&.error {
.nav-actions .action-primary {
@include red-button();
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
}
// types - announcement
&.announcement {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - confirmation
&.confirmation {
.nav-actions .action-primary {
@include green-button();
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
// types - step required
&.step-required {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
}
a {
color: $pink;
&:hover {
color: $pink-s1;
}
}
}
}
// prompts // prompts
.wrapper-prompt { .wrapper-prompt {
@include transition(all 0.05s ease-in-out); @include transition(all 0.05s ease-in-out);
...@@ -73,9 +179,7 @@ ...@@ -73,9 +179,7 @@
} }
.action-primary { .action-primary {
@include blue-button();
@include font-size(13); @include font-size(13);
border-color: $blue-d2;
font-weight: 600; font-weight: 600;
} }
...@@ -125,73 +229,48 @@ ...@@ -125,73 +229,48 @@
// notifications // notifications
.wrapper-notification { .wrapper-notification {
@include clearfix(); @include clearfix();
@include box-shadow(0 -1px 3px $shadow); @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
padding: ($baseline*0.75) ($baseline*2); border-top: 4px solid $black;
padding: $baseline ($baseline*2);
&.wrapper-notification-warning { &.wrapper-notification-warning {
border-top-color: $orange; @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange);
.icon-warning { .icon-warning {
color: $orange; color: $orange;
} }
&:hover {
border-top-color: $orange-s2;
.icon-warning {
color: $orange-s2;
}
}
} }
&.wrapper-notification-error { &.wrapper-notification-error {
border-top-color: $red-l1; @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1);
.icon-error { .icon-error {
color: $red-l1; color: $red-l1;
} }
&:hover {
border-top-color: $red;
.icon-error {
color: $red;
}
}
} }
&.wrapper-notification-confirmation { &.wrapper-notification-confirmation {
border-top-color: $green; @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green);
.icon-confirmation { .icon-confirmation {
color: $green; color: $green;
} }
&:hover {
border-top-color: $green-s1;
.icon-confirmation {
color: $green-s1;
}
}
} }
&.wrapper-notification-saving { &.wrapper-notification-saving {
border-top-color: $pink; @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $pink);
&:hover {
border-top-color: $pink-s1;
}
} }
// shorter/status notifications // shorter/status notifications
&.wrapper-notification-status { &.wrapper-notification-status {
@include border-top-radius(3px);
width: ($baseline*8); width: ($baseline*8);
right: ($baseline); right: ($baseline);
border: 4px solid $black;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
.notification { .notification {
...@@ -222,8 +301,10 @@ ...@@ -222,8 +301,10 @@
// help notifications // help notifications
&.wrapper-notification-help { &.wrapper-notification-help {
@include border-top-radius(3px);
width: ($baseline*14); width: ($baseline*14);
right: ($baseline); right: ($baseline);
border: 4px solid $black;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
.notification { .notification {
...@@ -304,7 +385,7 @@ ...@@ -304,7 +385,7 @@
.nav-actions { .nav-actions {
width: flex-grid(4, 12); width: flex-grid(4, 12);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/4);
text-align: right; text-align: right;
.nav-item { .nav-item {
...@@ -355,95 +436,55 @@ ...@@ -355,95 +436,55 @@
// alerts // alerts
.wrapper-alert { .wrapper-alert {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1); @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
position: relative; position: relative;
top: -($baseline*1.5); top: -($baseline*1.5);
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
border-bottom: 4px solid $gray-l1; border-bottom: 2px solid $black;
border-top: 1px solid $black; border-top: 1px solid $black;
padding: $baseline ($baseline*2); padding: $baseline ($baseline*2) ($baseline*1.5) ($baseline*2);
background: $gray-d3; background: $gray-d3;
&.wrapper-alert-warning { &.wrapper-alert-warning {
border-bottom-color: $orange; @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange);
.icon-warning { .icon-warning {
color: $orange; color: $orange;
} }
&:hover {
border-bottom-color: $orange-s2;
.icon-warning {
color: $orange-s2;
}
}
} }
&.wrapper-alert-error { &.wrapper-alert-error {
border-bottom-color: $red-l1; @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1);
.icon-error { .icon-error {
color: $red-l1; color: $red-l1;
} }
&:hover {
border-bottom-color: $red;
.icon-error {
color: $red;
}
}
} }
&.wrapper-alert-confirmation { &.wrapper-alert-confirmation {
border-bottom-color: $green; @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green);
.icon-confirmation { .icon-confirmation {
color: $green; color: $green;
} }
&:hover {
border-bottom-color: $green-s2;
.icon-confirmation {
color: $green-s2;
}
}
} }
&.wrapper-alert-announcement { &.wrapper-alert-announcement {
border-bottom-color: $blue; @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
.icon-announcement { .icon-announcement {
color: $blue; color: $blue;
} }
&:hover {
border-bottom-color: $blue-s2;
.icon-announcement {
color: $blue-s2;
}
}
} }
&.wrapper-alert-step-required { &.wrapper-alert-step-required {
border-bottom-color: $pink; @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink);
.icon-step-required { .icon-step-required {
color: $pink; color: $pink;
} }
&:hover {
border-bottom-color: $pink-s2;
.icon-announcement {
color: $pink-s2;
}
}
} }
} }
...@@ -552,95 +593,6 @@ ...@@ -552,95 +593,6 @@
} }
} }
.alert, .notification, .prompt {
// types - warning
&.warning {
.nav-actions .action-primary {
@include orange-button();
border-color: $orange-d2;
color: $gray-d4;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
// types - error
&.error {
.nav-actions .action-primary {
@include red-button();
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
}
// types - announcement
&.announcement {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - confirmation
&.confirmation {
.nav-actions .action-primary {
@include green-button();
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
// types - step required
&.step-required {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
}
a {
color: $pink;
&:hover {
color: $pink-s1;
}
}
}
}
// js enabled // js enabled
.js { .js {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment