Skip to content

E
edx-platform
Commit bb24a079 by Brian Talbot
Options

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

parent d7bbfbc7
Showing with 281 additions and 100 deletions
cms/static/sass/_alerts.scss
...@@ -128,7 +128,6 @@ ...@@ -128,7 +128,6 @@
color: $orange; color: $orange;
} }
&:hover { &:hover {
border-bottom-color: $orange-s2; border-bottom-color: $orange-s2;
...@@ -139,18 +138,17 @@ ...@@ -139,18 +138,17 @@
} }
&.wrapper-alert-error { &.wrapper-alert-error {
border-bottom-color: $red; border-bottom-color: $red-l1;
.icon-error { .icon-error {
color: $red; color: $red-l1;
} }
&:hover { &:hover {
border-bottom-color: $red-s2; border-bottom-color: $red;
.icon-error { .icon-error {
color: $red-s2; color: $red;
} }
} }
} }
...@@ -162,7 +160,6 @@ ...@@ -162,7 +160,6 @@
color: $green; color: $green;
} }
&:hover { &:hover {
border-bottom-color: $green-s2; border-bottom-color: $green-s2;
...@@ -179,7 +176,6 @@ ...@@ -179,7 +176,6 @@
color: $blue; color: $blue;
} }
&:hover { &:hover {
border-bottom-color: $blue-s2; border-bottom-color: $blue-s2;
...@@ -196,7 +192,6 @@ ...@@ -196,7 +192,6 @@
color: $pink; color: $pink;
} }
&:hover { &:hover {
border-bottom-color: $pink-s2; border-bottom-color: $pink-s2;
...@@ -251,12 +246,12 @@ ...@@ -251,12 +246,12 @@
} }
.copy { .copy {
width: flex-grid(8, 12); width: flex-grid(7, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
} }
.nav-actions { .nav-actions {
width: flex-grid(3, 12); width: flex-grid(4, 12);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: right;
...@@ -269,6 +264,21 @@ ...@@ -269,6 +264,21 @@
&:last-child { &:last-child {
margin-right: 0; 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 @@ ...@@ -276,22 +286,82 @@
// alert types // alert types
&.warning { &.warning {
.action-primary {
@include orange-button;
border-color: $orange-d2;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
} }
&.error { &.error {
.action-primary {
@include red-button;
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
} }
&.confirmation { &.confirmation {
.action-primary {
@include green-button;
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
} }
&.announcement { &.announcement {
.action-primary {
@include blue-button;
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
} }
&.step-required { &.step-required {
.action-primary {
border-color: $pink-d2;
@include pink-button;
}
a {
color: $pink;
&:hover {
color: $pink-s1;
}
}
} }
} }
......
cms/static/sass/_cms_mixins.scss
@mixin clearfix { // studio specific mixins
&:after { // ====================
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
}
// buttons
@mixin button { @mixin button {
display: inline-block; display: inline-block;
padding: 4px 20px 6px; padding: ($baseline/5) $baseline ($baseline/4);
font-size: 14px; @include font-size(14);
font-weight: 700; font-weight: 700;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0)); @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); @include transition(background-color .15s, box-shadow .15s);
&.disabled { &.disabled {
border: 1px solid $lightGrey !important; border: 1px solid $gray-l1 !important;
border-radius: 3px !important; border-radius: 3px !important;
background: $lightGrey !important; background: $gray-l1 !important;
color: $darkGrey !important; color: $gray-d1 !important;
pointer-events: none; pointer-events: none;
cursor: none; cursor: none;
&:hover { &:hover {
...@@ -33,34 +27,119 @@ ...@@ -33,34 +27,119 @@
} }
} }
// button - green
@mixin green-button {
@include button;
border: 1px solid $green-d1;
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: $white;
&: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);
}
}
// button - blue
@mixin blue-button { @mixin blue-button {
@include button; @include button;
border: 1px solid #437fbf; border: 1px solid $blue-d1;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $blue; background-color: $blue;
color: #fff; color: $white;
&:hover, &.active { &:hover, &.active {
background-color: #62aaf5; background-color: $blue-s2;
color: #fff; color: $white;
}
&.disabled {
border: 1px solid $blue-l3 !important;
background: $blue-l3 !important;
color: $white !important;
@include box-shadow(none);
} }
} }
@mixin green-button { // button - red
@include button; @mixin red-button {
border: 1px solid #0d7011; @include button;
border-radius: 3px; border: 1px solid $red-d1;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); border-radius: 3px;
background-color: $green; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
color: #fff; background-color: $red;
color: $white;
&:hover { &:hover, &.active {
background-color: #129416; background-color: $red-s1;
color: #fff; 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 { @mixin white-button {
@include button; @include button;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
...@@ -77,24 +156,10 @@ ...@@ -77,24 +156,10 @@
} }
} }
@mixin orange-button { // button - grey
@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;
}
}
@mixin grey-button { @mixin grey-button {
@include button; @include button;
border: 1px solid $darkGrey; border: 1px solid $gray-d2;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #d1dae3; background-color: #d1dae3;
...@@ -107,42 +172,25 @@ ...@@ -107,42 +172,25 @@
} }
} }
@mixin green-button { // button - grey dark
@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);
}
}
@mixin dark-grey-button { @mixin dark-grey-button {
@include button; @include button;
border: 1px solid #1c1e20; border: 1px solid #1c1e20;
border-radius: 3px; border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey; 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; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
color: #fff; color: $white;
&:hover { &:hover {
background-color: #595f64; background-color: #595f64;
color: #fff; color: $white;
} }
} }
// ====================
// UI
@mixin edit-box { @mixin edit-box {
padding: 15px 20px; padding: 15px 20px;
border-radius: 3px; border-radius: 3px;
...@@ -276,17 +324,9 @@ ...@@ -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 { @mixin active {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: rgba(255, 255, 255, .3); background-color: rgba(255, 255, 255, .3);
......
cms/templates/overview.html
...@@ -120,10 +120,34 @@ ...@@ -120,10 +120,34 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button save-button">Save Draft</a> <a href="#" rel="external" class="button save-button action-primary">Save Draft</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button cancel-button">Disgard Draft</a> <a href="#" rel="external" class="button cancel-button action-secondary">Disgard Draft</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: newer version -->
<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">A Newer Version of This Exists</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 action-primary">View Newer Version</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-secondary">Continue Editing</a>
</li> </li>
</ul> </ul>
</nav> </nav>
...@@ -160,7 +184,7 @@ ...@@ -160,7 +184,7 @@
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">We're Sorry, there was a error with Studio</h2> <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> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> </div>
</div> </div>
...@@ -180,10 +204,7 @@ ...@@ -180,10 +204,7 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button save-button">Replace with Draft</a> <a href="#" rel="external" class="button cancel-button action-primary">Cancel Your Submission</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button">Delete Draft</a>
</li> </li>
</ul> </ul>
</nav> </nav>
...@@ -204,7 +225,10 @@ ...@@ -204,7 +225,10 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external">Contact edX Staff</a> <a href="#" rel="external" class="action-primary">Contact edX Staff</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="action-secondary">Manage Your edX Notifications</a>
</li> </li>
</ul> </ul>
</nav> </nav>
...@@ -225,13 +249,25 @@ ...@@ -225,13 +249,25 @@
<!-- alert: step required --> <!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown"> <div class="wrapper wrapper-alert wrapper-alert-step-required is-shown">
<div class="alert step-required"> <div class="alert step-required has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i> <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2> <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> <p>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.</p>
</div> </div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="action-primary">Re-send Activation Message</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="action-secondary">Contact edX Support</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
......
common/static/sass/_mixins.scss
...@@ -8,11 +8,16 @@ ...@@ -8,11 +8,16 @@
font-size: ($sizeValue/10) + rem; font-size: ($sizeValue/10) + rem;
} }
// ====================
// line-height // line-height
@function lh($amount: 1) { @function lh($amount: 1) {
@return $body-line-height * $amount; @return $body-line-height * $amount;
} }
// ====================
// image-replacement hidden text // image-replacement hidden text
@mixin text-hide() { @mixin text-hide() {
text-indent: 100%; text-indent: 100%;
...@@ -32,6 +37,8 @@ ...@@ -32,6 +37,8 @@
width: 1px; width: 1px;
} }
// ====================
// vertical and horizontal centering // vertical and horizontal centering
@mixin vertically-and-horizontally-centered ($height, $width) { @mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%; left: 50%;
...@@ -43,6 +50,8 @@ ...@@ -43,6 +50,8 @@
top: 150px; top: 150px;
} }
// ====================
// sizing // sizing
@mixin size($width: $baseline, $height: $baseline) { @mixin size($width: $baseline, $height: $baseline) {
height: $height; height: $height;
...@@ -53,6 +62,8 @@ ...@@ -53,6 +62,8 @@
@include size($size); @include size($size);
} }
// ====================
// placeholder styling // placeholder styling
@mixin placeholder($color) { @mixin placeholder($color) {
:-moz-placeholder { :-moz-placeholder {
...@@ -64,4 +75,27 @@ ...@@ -64,4 +75,27 @@
:-ms-input-placeholder { :-ms-input-placeholder {
color: $color; 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
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