Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brian Talbot
2013-02-22 14:28:13 -05:00
parent d7bbfbc707
commit bb24a079a1
4 changed files with 283 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
cms/static/sass/_alerts.scss
View File

@@ -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;
}
}
}
}

204
cms/static/sass/_cms_mixins.scss
View File

@@ -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);

56
cms/templates/overview.html
View File

@@ -120,10 +120,34 @@
<h3 class="sr">Alert Actions</h3>
<ul>
<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 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>
</ul>
</nav>
@@ -160,7 +184,7 @@
<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>
<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>
@@ -180,10 +204,7 @@
<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>
<a href="#" rel="external" class="button cancel-button action-primary">Cancel Your Submission</a>
</li>
</ul>
</nav>
@@ -204,7 +225,10 @@
<h3 class="sr">Alert Actions</h3>
<ul>
<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>
</ul>
</nav>
@@ -225,13 +249,25 @@
<!-- alert: step required -->
<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>
<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>
<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>
<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>

34
common/static/sass/_mixins.scss
View File

@@ -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;
}