Skip to content

E
edx-platform
Commit d7bbfbc7 by Brian Talbot
Options

studio - alerts: basic layout and general alert styling WIP

parent de2b05bf
Showing with 314 additions and 64 deletions
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-announcement {
border-bottom-color: $blue;
.icon-announcement {
color: $blue;
}
&:hover {
border-bottom-color: $blue-s2;
.icon-announcement {
color: $blue-s2;
}
}
}
&.wrapper-alert-inform {
border-color: $blue-d1;
&.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;
}
}
}
}
......
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;
......
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;
......
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;
......
cms/templates/overview.html
......@@ -106,6 +106,135 @@
</%block>
<%block name="content">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">You are editing a draft</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="button save-button">Save Draft</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button">Disgard Draft</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">Your changes have been saved</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div>
</div>
</div>
<!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">X Has been removed</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">We're Sorry, there was a error with Studio</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">There was an error in your submission</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="button save-button">Replace with Draft</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button">Delete Draft</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<h2 class="title title-3">Studio will be unavailable this weekend</h2>
<p>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.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external">Contact edX Staff</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<h2 class="title title-3">Studio will be unavailable this weekend</h2>
<p>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.</p>
</div>
</div>
</div>
<!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown">
<div class="alert step-required">
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
<div class="copy">
<h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<p>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.</p>
</div>
</div>
</div>
<div class="edit-subsection-publish-settings">
<div class="settings">
<h3>Section Release Date</h3>
......
cms/templates/unit.html
......@@ -31,29 +31,6 @@
</%block>
<%block name="content">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<div class="copy">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="button save-button">Replace with Draft</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button">Delete Draft</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
<div class="inner-wrapper">
<div class="alert editing-draft-alert wip-box">
......
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