Andal.LND/edx-platform
4
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);