Skip to content

E
edx-platform
Commit 8179b9fa by Brian Talbot
Options

studio - alerts: initial pass at alert styling and markup complete

parent b1f5d67a
Showing with 306 additions and 62 deletions
cms/static/js/base.js
...@@ -43,6 +43,25 @@ $(document).ready(function () { ...@@ -43,6 +43,25 @@ $(document).ready(function () {
$('body').addClass('js'); $('body').addClass('js');
// notifications
$('.testing .test-notification').click(function(e) {
(e).preventDefault();
manageNotification(e);
});
function manageNotification(e) {
var $notificationRibbon = $('.wrapper-notification');
// showing
$notificationRibbon.toggleClass('is-shown');
// controls for closing notification
$notificationRibbon.find('.action-notification-close').click(function(e) {
(e).preventDefault();
$notificationRibbon.toggleClass('is-shown');
});
}
// lean/simple modal // lean/simple modal
$('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){ $('a.action-modal-close').click(function(e){
......
cms/static/sass/_alerts.scss
...@@ -5,17 +5,19 @@ ...@@ -5,17 +5,19 @@
.wrapper-notification { .wrapper-notification {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition (bottom 2.0s ease-in-out 5s, opacity 2.0s ease-in-out 5s); // @include transition (bottom 1.5s ease-in-out 0.25s);
@include box-shadow(0 -1px 2px rgba(0,0,0,0.1)); transition: bottom 1.5s ease-in-out 0.25s;
-webkit-transition: bottom 1.5s ease-in-out 0.25s;
@include box-shadow(0 -1px 3px $shadow);
position: fixed; position: fixed;
bottom: -100px; bottom: -1000px;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
border-top: 1px solid $gray-d1; border-top: 4px solid $gray-l1;
padding: $baseline ($baseline*2); padding: ($baseline*0.75) ($baseline*2);
background: $white; background: $gray-d3;
&.is-shown { &.is-shown {
bottom: 0; bottom: 0;
...@@ -23,78 +25,263 @@ ...@@ -23,78 +25,263 @@
} }
&.wrapper-notification-warning { &.wrapper-notification-warning {
border-color: shade($yellow, 25%); border-top-color: $orange;
background: tint($yellow, 25%);
.icon-warning {
color: $orange;
}
&:hover {
border-top-color: $orange-s2;
.icon-warning {
color: $orange-s2;
}
}
} }
&.wrapper-notification-error { &.wrapper-notification-error {
border-color: shade($red, 50%); border-top-color: $red-l1;
background: tint($red, 20%);
color: $white; .icon-error {
color: $red-l1;
}
&:hover {
border-top-color: $red;
.icon-error {
color: $red;
}
}
} }
&.wrapper-notification-confirm { &.wrapper-notification-confirmation {
border-color: shade($green, 30%); border-top-color: $green;
background: tint($green, 40%);
color: shade($green, 30%); .icon-error {
color: $green;
}
&:hover {
border-top-color: $green-s1;
.icon-error {
color: $green-s1;
}
}
}
// shorter/status notifications
&.wrapper-notification-status {
width: ($baseline*10);
right: ($baseline);
padding: ($baseline/2) $baseline;
.notification {
background: red;
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
.icon {
width: auto;
}
.copy {
width: auto;
}
}
} }
} }
.notification { .notification {
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix();
margin: 0 auto; margin: 0 auto;
width: flex-grid(12); width: flex-grid(12);
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
.copy { strong {
font-weight: 700;
}
.icon, .copy {
float: left; float: left;
width: flex-grid(9, 12); }
.icon {
@include transition (color 0.5s ease-in-out);
@include font-size(28);
width: flex-grid(1, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
margin-top: 5px; text-align: right;
font-size: 14px; color: $white;
}
.copy {
@include font-size(13);
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@include font-size(14);
margin-bottom: 0;
color: $white;
}
}
// with cancel
.action-notification-close {
@include transition(top .25s ease-in-out);
@include border-bottom-radius(3px);
position: absolute;
top: -($baseline/4);
left: ($baseline/2);
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d2;
text-align: center;
.label {
@include text-sr();
}
.ss-icon {
@include font-size(14);
color: $white;
}
&:hover {
background: $blue;
top: 0;
}
}
// with actions
&.has-actions {
.icon { .icon {
display: inline-block; width: flex-grid(1, 12);
vertical-align: top; }
margin-right: 5px;
font-size: 20px; .copy {
width: flex-grid(7, 12);
margin-right: flex-gutter();
}
.nav-actions {
width: flex-grid(4, 12);
float: right;
margin-top: ($baseline/2);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
.action-primary {
@include font-size(13);
font-weight: 600;
}
.action-secondary {
@include font-size(13);
}
}
}
}
// notification types
&.warning {
.action-notification-close {
&:hover {
background: $orange;
}
} }
p { .action-primary {
width: flex-grid(8, 9); @include orange-button;
display: inline-block; border-color: $orange-d2;
vertical-align: top; }
a {
color: $orange;
&:hover {
color: $orange-s2;
}
} }
} }
.actions { &.error {
float: right;
width: flex-grid(3, 12);
margin-top: ($baseline/2);
text-align: right;
li { .action-notification-close {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
&:last-child { &:hover {
margin-right: 0; background: $red-l1;
} }
} }
.save-button { .action-primary {
@include blue-button; @include red-button;
border-color: $red-d2;
} }
.cancel-button { a {
@include white-button; color: $red-l1;
&:hover {
color: $red;
}
} }
} }
strong { &.confirmation {
font-weight: 700;
.action-notification-close {
&:hover {
background: $green;
}
}
.action-primary {
@include green-button;
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
&.announcement {
.action-notification-close {
&:hover {
background: $blue;
}
}
.action-primary {
@include blue-button;
border-color: $blue-d2;
}
} }
} }
...@@ -103,10 +290,9 @@ ...@@ -103,10 +290,9 @@
// alerts // alerts
.wrapper-alert { .wrapper-alert {
@include box-sizing(border-box); @include box-sizing(border-box);
@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 2px $shadow-d1);
@include box-shadow(0 1px 1px $white, inset 0 2px 5px $shadow-d1);
position: relative; position: relative;
top: -($baseline*1.5); top: -($baseline*20);
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
...@@ -117,7 +303,6 @@ ...@@ -117,7 +303,6 @@
background: $gray-d3; background: $gray-d3;
&.is-shown { &.is-shown {
bottom: 0;
opacity: 1.0; opacity: 1.0;
} }
...@@ -222,14 +407,14 @@ ...@@ -222,14 +407,14 @@
.icon { .icon {
@include transition (color 0.5s ease-in-out); @include transition (color 0.5s ease-in-out);
@include font-size(28); @include font-size(22);
width: flex-grid(1, 12); width: flex-grid(1, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
text-align: right; text-align: right;
} }
.copy { .copy {
@include font-size(14); @include font-size(13);
width: flex-grid(10, 12); width: flex-grid(10, 12);
color: $gray-l2; color: $gray-l2;
...@@ -332,14 +517,6 @@ ...@@ -332,14 +517,6 @@
@include blue-button; @include blue-button;
border-color: $blue-d2; border-color: $blue-d2;
} }
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
} }
&.step-required { &.step-required {
......
cms/static/sass/_base.scss
...@@ -25,7 +25,7 @@ a { ...@@ -25,7 +25,7 @@ a {
@include transition(color .15s); @include transition(color .15s);
&:hover { &:hover {
color: #cb9c40; color: $orange-d1;
} }
} }
...@@ -885,7 +885,7 @@ body.js { ...@@ -885,7 +885,7 @@ body.js {
// ==================== // ====================
// works in progress // works in progress & testing
body.hide-wip { body.hide-wip {
.wip-box { .wip-box {
...@@ -893,6 +893,23 @@ body.hide-wip { ...@@ -893,6 +893,23 @@ body.hide-wip {
} }
} }
.wrapper-testing {
background: $black;
width: 100%;
height: auto;
.testing {
@include font-size(14);
position: relative;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto $baseline auto;
padding: $baseline;
color: $white;
}
}
// ==================== // ====================
// needed fudges for now // needed fudges for now
......
cms/static/sass/_keyframes.scss
// studio animations & keyframes
// ====================
// rotate clockwise
@mixin rotateClockwise {
0% {
@include transform(rotate(0deg));
}
25% {
@include transform(rotate(90deg));
}
50% {
@include transform(rotate(180deg));
}
100% {
@include transform(rotate(360deg));
}
}
@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}
// ====================
// bounce in
@mixin bounce-in { @mixin bounce-in {
0% { 0% {
opacity: 0; opacity: 0;
...@@ -24,4 +54,4 @@ ...@@ -24,4 +54,4 @@
@include animation-duration($duration); @include animation-duration($duration);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both); @include animation-fill-mode(both);
} }
\ No newline at end of file
cms/static/sass/base-style.scss
@import 'bourbon/bourbon'; @import 'bourbon/bourbon';
@import 'bourbon/addons/button'; @import 'bourbon/addons/button';
@import "variables";
@import 'vendor/normalize'; @import 'vendor/normalize';
@import 'keyframes'; @import 'keyframes';
...@@ -7,7 +8,6 @@ ...@@ -7,7 +8,6 @@
@import 'mixins'; @import 'mixins';
@import "fonts"; @import "fonts";
@import "variables";
@import "cms_mixins"; @import "cms_mixins";
@import "extends"; @import "extends";
@import "base"; @import "base";
......
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