Skip to content

E
edx-platform
Commit f91c5ffd by Marco Morales
Options

Merge pull request #6099 from edx/marco/sass-variable-patterns-cleanup 

SASS compilation variable conventions update
parents cb6a4db1 7d110a86
Showing with 948 additions and 791 deletions
cms/static/sass/_base.scss
// studio - base styling // studio - base styling
// ==================== // ====================
// basic setup // Table of Contents
// * +Basic Setup
// * +Typography - Basic
// * +Typography - Primary Content
// * +Typography - Secondary Content
// * +Typography - Loose Headings
// * +Layout - Basic
// * +Layout - Basic Page Header
// * +Layout - Basic Page Content
// * +Layout - Primary Content
// * +Layout - Supplemental Content
// * +Layout - Grandfathered
// * +UI - Actions
// * +UI - Misc
// * +Utility - Basic
// * +JS Dependent
// +Basic Setup
// ====================
html { html {
font-size: 62.5%; font-size: 62.5%;
height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag
...@@ -38,7 +56,7 @@ h1 { ...@@ -38,7 +56,7 @@ h1 {
} }
.page-actions { .page-actions {
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
} }
.wrapper { .wrapper {
...@@ -47,9 +65,8 @@ h1 { ...@@ -47,9 +65,8 @@ h1 {
width: 100%; width: 100%;
} }
// ==================== // +Typography - Basic
// ====================
// typography - basic
.page-header { .page-header {
@extend %t-title3; @extend %t-title3;
@extend %t-strong; @extend %t-strong;
...@@ -93,9 +110,8 @@ h1 { ...@@ -93,9 +110,8 @@ h1 {
} }
} }
// ==================== // +Typography - Primary Content
// ====================
// typography - primary content
.content-primary { .content-primary {
.section-header { .section-header {
...@@ -131,7 +147,8 @@ h1 { ...@@ -131,7 +147,8 @@ h1 {
} }
} }
// typography - primary content // +Typography - Secondary Content
// ====================
.content-secondary { .content-secondary {
.section-header { .section-header {
...@@ -159,44 +176,12 @@ h1 { ...@@ -159,44 +176,12 @@ h1 {
} }
} }
// ==================== // +Typography - Loose Headings (BT: needs to be removed once html is clean)
// ====================
// typography - loose headings (BT: needs to be removed once html is clean)
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 { .title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
@extend %t-strong; @extend %t-strong;
} }
// typography - primary content
.content-secondary {
.section-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
}
// ====================
// typography - loose headings (BT: needs to be removed once html is clean)
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
...@@ -240,16 +225,14 @@ p, ul, ol, dl { ...@@ -240,16 +225,14 @@ p, ul, ol, dl {
} }
} }
// ==================== // +Layout - Basic
// ====================
// layout - basic
.wrapper-view { .wrapper-view {
} }
// ==================== // +Layout - Basic Page Header
// ====================
// layout - basic page header
.wrapper-mast { .wrapper-mast {
margin: ($baseline*1.5) 0 0 0; margin: ($baseline*1.5) 0 0 0;
padding: 0 $baseline; padding: 0 $baseline;
...@@ -391,7 +374,8 @@ p, ul, ol, dl { ...@@ -391,7 +374,8 @@ p, ul, ol, dl {
} }
} }
// layout - basic page content // +Layout - Basic Page Content
// ====================
.wrapper-content { .wrapper-content {
margin: 0; margin: 0;
padding: 0 $baseline; padding: 0 $baseline;
...@@ -434,7 +418,8 @@ p, ul, ol, dl { ...@@ -434,7 +418,8 @@ p, ul, ol, dl {
@include box-sizing(border-box); @include box-sizing(border-box);
} }
// layout - primary content // +Layout - Primary Content
// ====================
.content-primary { .content-primary {
.title-1 { .title-1 {
...@@ -471,7 +456,8 @@ p, ul, ol, dl { ...@@ -471,7 +456,8 @@ p, ul, ol, dl {
} }
} }
// layout - supplemental content // +Layout - Supplemental Content
// ====================
.content-supplementary { .content-supplementary {
> section { > section {
...@@ -479,9 +465,8 @@ p, ul, ol, dl { ...@@ -479,9 +465,8 @@ p, ul, ol, dl {
} }
} }
// ==================== // +Layout - Grandfathered
// ====================
// layout - grandfathered
.main-wrapper { .main-wrapper {
position: relative; position: relative;
margin: 0 ($baseline*2); margin: 0 ($baseline*2);
...@@ -517,9 +502,8 @@ p, ul, ol, dl { ...@@ -517,9 +502,8 @@ p, ul, ol, dl {
@include float(right); @include float(right);
} }
// ==================== // +UI - Actions
// ====================
// UI - actions
.new-unit-item, .new-unit-item,
.new-subsection-item, .new-subsection-item,
.new-policy-item { .new-policy-item {
...@@ -550,22 +534,21 @@ p, ul, ol, dl { ...@@ -550,22 +534,21 @@ p, ul, ol, dl {
} }
} }
// ==================== // +UI - Misc
// ====================
// misc
hr.divide { hr.divide {
@extend %cont-text-sr; @extend %cont-text-sr;
} }
.item-details { .item-details {
float: left; float: left;
padding: 10px 0; padding: ($baseline/2) 0;
} }
.details { .details {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: none; display: none;
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
} }
.window { .window {
...@@ -604,8 +587,8 @@ hr.divide { ...@@ -604,8 +587,8 @@ hr.divide {
} }
.row { .row {
margin-bottom: 10px; margin-bottom: ($baseline/2);
padding-bottom: 10px; padding-bottom: ($baseline/2);
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid #cbd1db;
} }
} }
...@@ -638,9 +621,9 @@ hr.divide { ...@@ -638,9 +621,9 @@ hr.divide {
} }
} }
// ====================
// basic utility // +Utility - Basic
// ====================
// UI - semantically hide text // UI - semantically hide text
.sr { .sr {
...@@ -683,9 +666,8 @@ hr.divider { ...@@ -683,9 +666,8 @@ hr.divider {
} }
} }
// ==================== // +JS Dependent
// ====================
// js dependant
body.js { body.js {
// lean/simple modal window // lean/simple modal window
......
cms/static/sass/_shame.scss
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
.ui-toggle-control { .ui-toggle-control {
// needed to override general a element transition properties - need to fix. // needed to override general a element transition properties - need to fix.
transition-duration: 0.25s; transition-duration: $tmg-f2;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
} }
.icon-remove-sign { .icon-remove-sign {
// needed to override general a element transition properties - need to fix. // needed to override general a element transition properties - need to fix.
transition-duration: 0.25s; transition-duration: $tmg-f2;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
} }
} }
......
cms/static/sass/_variables.scss
// studio - utilities - variables // studio - utilities - variables
// ==================== // ====================
// Table of Contents
// * +Grid
// * +Fonts
// * +Colors - Utility
// * +Colors - Primary
// * +Colors - Shadow
// * +Color - Application
// * +Timing
// * +Archetype UI
// * +Specific UI
// * +Deprecated
$baseline: 20px; $baseline: 20px;
// grid // +Grid
// ====================
$gw-column: ($baseline*3); $gw-column: ($baseline*3);
$gw-gutter: $baseline; $gw-gutter: $baseline;
$fg-column: $gw-column; $fg-column: $gw-column;
...@@ -12,15 +25,17 @@ $fg-max-columns: 12; ...@@ -12,15 +25,17 @@ $fg-max-columns: 12;
$fg-max-width: 1280px; $fg-max-width: 1280px;
$fg-min-width: 900px; $fg-min-width: 900px;
// ==================== // +Fonts
// ====================
// fonts
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// ==================== // +Colors - Utility
// ====================
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
// colors - new for re-org // +Colors - Primary
// ====================
$black: rgb(0,0,0); $black: rgb(0,0,0);
$black-t0: rgba($black, 0.125); $black-t0: rgba($black, 0.125);
$black-t1: rgba($black, 0.25); $black-t1: rgba($black, 0.25);
...@@ -67,7 +82,7 @@ $blue-t1: rgba($blue, 0.25); ...@@ -67,7 +82,7 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50); $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75); $blue-t3: rgba($blue, 0.75);
$pink: rgb(183, 37, 103); $pink: rgb(183, 37, 103); // #b72567;
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%); $pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%); $pink-l3: tint($pink,60%);
...@@ -84,7 +99,7 @@ $pink-u1: desaturate($pink,15%); ...@@ -84,7 +99,7 @@ $pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%); $pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%); $pink-u3: desaturate($pink,45%);
$red: rgb(178, 6, 16); $red: rgb(178, 6, 16); // #b20610;
$red-l1: tint($red,20%); $red-l1: tint($red,20%);
$red-l2: tint($red,40%); $red-l2: tint($red,40%);
$red-l3: tint($red,60%); $red-l3: tint($red,60%);
...@@ -101,7 +116,7 @@ $red-u1: desaturate($red,15%); ...@@ -101,7 +116,7 @@ $red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%); $red-u2: desaturate($red,30%);
$red-u3: desaturate($red,45%); $red-u3: desaturate($red,45%);
$green: rgb(37, 184, 90); $green: rgb(37, 184, 90); // #25b85a
$green-l1: tint($green,20%); $green-l1: tint($green,20%);
$green-l2: tint($green,40%); $green-l2: tint($green,40%);
$green-l3: tint($green,60%); $green-l3: tint($green,60%);
...@@ -152,13 +167,16 @@ $orange-u1: desaturate($orange,15%); ...@@ -152,13 +167,16 @@ $orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%); $orange-u2: desaturate($orange,30%);
$orange-u3: desaturate($orange,45%); $orange-u3: desaturate($orange,45%);
// +Colors - Shadows
// ====================
$shadow: rgba($black, 0.2); $shadow: rgba($black, 0.2);
$shadow-l1: rgba($black, 0.1); $shadow-l1: rgba($black, 0.1);
$shadow-l2: rgba($black, 0.05); $shadow-l2: rgba($black, 0.05);
$shadow-d1: rgba($black, 0.4); $shadow-d1: rgba($black, 0.4);
$shadow-d2: rgba($black, 0.6); $shadow-d2: rgba($black, 0.6);
// colors - application // +Colors - Application
// ====================
$color-draft: $gray-l3; $color-draft: $gray-l3;
$color-live: $blue; $color-live: $blue;
$color-ready: $green; $color-ready: $green;
...@@ -170,9 +188,9 @@ $color-heading-base: $gray-d2; ...@@ -170,9 +188,9 @@ $color-heading-base: $gray-d2;
$color-copy-base: $gray-l1; $color-copy-base: $gray-l1;
$color-copy-emphasized: $gray-d2; $color-copy-emphasized: $gray-d2;
// ==================== // +Timing
// ====================
// timing - used for animation/transition mixin syncing // used for animation/transition mixin syncing
$tmg-s3: 3.0s; $tmg-s3: 3.0s;
$tmg-s2: 2.0s; $tmg-s2: 2.0s;
$tmg-s1: 1.0s; $tmg-s1: 1.0s;
...@@ -181,24 +199,22 @@ $tmg-f1: 0.50s; ...@@ -181,24 +199,22 @@ $tmg-f1: 0.50s;
$tmg-f2: 0.25s; $tmg-f2: 0.25s;
$tmg-f3: 0.125s; $tmg-f3: 0.125s;
// ==================== // +Archetype UI
// ====================
// archetype UI
$ui-action-primary-color: $blue-u2; $ui-action-primary-color: $blue-u2;
$ui-action-primary-color-focus: $blue-s1; $ui-action-primary-color-focus: $blue-s1;
$ui-link-color: $blue-u2; $ui-link-color: $blue-u2;
$ui-link-color-focus: $blue-s1; $ui-link-color-focus: $blue-s1;
// ==================== // +Specific UI
// ====================
// specific UI
$ui-notification-height: ($baseline*10); $ui-notification-height: ($baseline*10);
$ui-update-color: $blue-l4; $ui-update-color: $blue-l4;
// ==================== // +Deprecated
// ====================
// inherited // do not use, future clean up will use updated styles
$baseFontColor: $gray-d2; $baseFontColor: $gray-d2;
$lighter-base-font-color: rgb(100,100,100); $lighter-base-font-color: rgb(100,100,100);
$offBlack: #3c3c3c; $offBlack: #3c3c3c;
...@@ -227,4 +243,4 @@ $body-line-height: golden-ratio(.875em, 1); ...@@ -227,4 +243,4 @@ $body-line-height: golden-ratio(.875em, 1);
// carried over from LMS for xmodules // carried over from LMS for xmodules
$action-primary-active-bg: #1AA1DE; // $m-blue $action-primary-active-bg: #1AA1DE; // $m-blue
$very-light-text: #fff; $very-light-text: $white;
cms/static/sass/assets/_anims.scss
// studio animations & keyframes // studio animations & keyframes
// ==================== // ====================
// fade in // Table of Contents
// * +Fade In - Extend
// * +Fade Out - Extend
// * +Rotate Up - Extend
// * +Rotate Down - Extend
// * +Rotate Clockwise - Extend
// * +Notifications - Slide - Keyframes
// * +Bounce In - Extend
// * +Bounce Out - Extend
// * +Flash - Once - Extend
// * +Flash - Double - Extend
// * +Pulse - Extend
// * +Dropped - Extend
// +Fade In - Extend
// ====================
// fade in keyframes
@include keyframes(fadeIn) { @include keyframes(fadeIn) {
0% { 0% {
opacity: 0.0; opacity: 0.0;
...@@ -16,14 +32,15 @@ ...@@ -16,14 +32,15 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // fade in animation
%anim-fadeIn { %anim-fadeIn {
@include animation(fadeIn $tmg-f2 linear 1); @include animation(fadeIn $tmg-f2 linear 1);
} }
// +Fade Out - Extend
// fade out // ====================
@include keyframes(fadeOut) { // fade out keyframes
@include keyframes(fadeOut) {
0% { 0% {
opacity: 1.0; opacity: 1.0;
} }
...@@ -37,16 +54,14 @@ ...@@ -37,16 +54,14 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // fade out animation
%anim-fadeOut { %anim-fadeOut {
@include animation(fadeOut $tmg-f2 linear 1); @include animation(fadeOut $tmg-f2 linear 1);
} }
// +Rotate Up - Extend
// ==================== // ====================
// rotate up keyframes
// rotate up
@include keyframes(rotateUp) { @include keyframes(rotateUp) {
0% { 0% {
@include transform(rotate(0deg)); @include transform(rotate(0deg));
...@@ -61,13 +76,15 @@ ...@@ -61,13 +76,15 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // rotate up animation
%anim-rotateUp { %anim-rotateUp {
@include animation(rotateUp $tmg-f2 ease-in-out 1); @include animation(rotateUp $tmg-f2 ease-in-out 1);
} }
// rotate up // +Rotate Down - Extend
// ====================
// rotate down keyframes
@include keyframes(rotateDown) { @include keyframes(rotateDown) {
0% { 0% {
@include transform(rotate(0deg)); @include transform(rotate(0deg));
...@@ -82,13 +99,15 @@ ...@@ -82,13 +99,15 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // rotate down animation
%anim-rotateDown { %anim-rotateDown {
@include animation(rotateDown $tmg-f2 ease-in-out 1); @include animation(rotateDown $tmg-f2 ease-in-out 1);
} }
// rotate clockwise // +Rotate Clockwise - Extend
// ====================
// rotate clockwise keyframes
@include keyframes(rotateCW) { @include keyframes(rotateCW) {
0% { 0% {
@include transform(rotate(0deg)); @include transform(rotate(0deg));
...@@ -103,13 +122,14 @@ ...@@ -103,13 +122,14 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // rotate clockwise animation
%anim-rotateCW { %anim-rotateCW {
@include animation(rotateCW $tmg-s1 linear infinite); @include animation(rotateCW $tmg-s1 linear infinite);
} }
// +Rotate Clockwise - Extend
// rotate counter-clockwise // ====================
// rotate clockwise keyframes
@include keyframes(rotateCCW) { @include keyframes(rotateCCW) {
0% { 0% {
@include transform(rotate(0deg)); @include transform(rotate(0deg));
...@@ -124,16 +144,15 @@ ...@@ -124,16 +144,15 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // rotate clockwise animation
%anim-rotateCCW { %anim-rotateCCW {
@include animation(rotateCCW $tmg-s1 linear infinite); @include animation(rotateCCW $tmg-s1 linear infinite);
} }
// +Notifications - Slide - Keyframes
// ==================== // ====================
// notifications slide up keyframes
// notifications slide up
@include keyframes(notificationSlideUp) { @include keyframes(notificationSlideUp) {
0% { 0% {
@include transform(translateY(0)); @include transform(translateY(0));
...@@ -148,7 +167,7 @@ ...@@ -148,7 +167,7 @@
} }
} }
// notifications slide down // notifications slide down keyframes
@include keyframes(notificationSlideDown) { @include keyframes(notificationSlideDown) {
0% { 0% {
@include transform(translateY(-($ui-notification-height*0.99))); @include transform(translateY(-($ui-notification-height*0.99)));
...@@ -164,10 +183,9 @@ ...@@ -164,10 +183,9 @@
} }
// +Bounce In - Extend
// ==================== // ====================
// bounce in keyframes
// bounce in
@include keyframes(bounceIn) { @include keyframes(bounceIn) {
0% { 0% {
opacity: 0.0; opacity: 0.0;
...@@ -184,13 +202,14 @@ ...@@ -184,13 +202,14 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // bounce in animation
%anim-bounceIn { %anim-bounceIn {
@include animation(bounceIn $tmg-f1 ease-in-out 1); @include animation(bounceIn $tmg-f1 ease-in-out 1);
} }
// +Bounce Out - Extend
// bounce out // ====================
// bounce out keyframes
@include keyframes(bounceOut) { @include keyframes(bounceOut) {
0% { 0% {
@include transform(scale(1)); @include transform(scale(1));
...@@ -207,16 +226,14 @@ ...@@ -207,16 +226,14 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // bounce out animation
%anim-bounceOut { %anim-bounceOut {
@include animation(bounceOut $tmg-f1 ease-in-out 1); @include animation(bounceOut $tmg-f1 ease-in-out 1);
} }
// +Flash - Once - Extend
// ==================== // ====================
// flash keyframes
// flash
@include keyframes(flash) { @include keyframes(flash) {
0%, 100% { 0%, 100% {
opacity: 1.0; opacity: 1.0;
...@@ -227,32 +244,32 @@ ...@@ -227,32 +244,32 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // flash animation
%anim-flash { %anim-flash {
@include animation(flash $tmg-f1 ease-in-out 1); @include animation(flash $tmg-f1 ease-in-out 1);
} }
// flash - double // +Flash - Double - Extend
// ====================
// flash double keyframes
@include keyframes(flashDouble) { @include keyframes(flashDouble) {
0%, 50%, 100% { 0%, 50%, 100% {
opacity: 1.0; opacity: 1.0;
}
25%, 75% {
opacity: 0.0;
}
} }
// canned animation - use if you want out of the box/non-customized anim 25%, 75% {
opacity: 0.0;
}
}
// flash double animation
%anim-flashDouble { %anim-flashDouble {
@include animation(flashDouble $tmg-f1 ease-in-out 1); @include animation(flashDouble $tmg-f1 ease-in-out 1);
} }
// +Pulse - Extend
// ==================== // ====================
// pulse keyframes
// pulse
@include keyframes(pulse) { @include keyframes(pulse) {
0% { 0% {
opacity: 0.0; opacity: 0.0;
...@@ -267,15 +284,14 @@ ...@@ -267,15 +284,14 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // pulse animation
%anim-pulse { %anim-pulse {
@include animation(pulse $tmg-f1 ease-in-out 1); @include animation(pulse $tmg-f1 ease-in-out 1);
} }
// Dropped - Extend
// ==================== // ====================
// was dropped keyframes
// was-dropped
@include keyframes(was-dropped) { @include keyframes(was-dropped) {
0% { 0% {
opacity: 1.0; opacity: 1.0;
...@@ -290,7 +306,7 @@ ...@@ -290,7 +306,7 @@
} }
} }
// canned animation - use if you want out of the box/non-customized anim // was dropped animation
%anim-was-dropped { %anim-was-dropped {
@include animation(was-dropped $tmg-f1 ease-in-out 1); @include animation(was-dropped $tmg-f1 ease-in-out 1);
} }
cms/static/sass/assets/_graphics.scss
// studio - assets - graphics
// ====================
.drag-handle { .drag-handle {
display: inline-block; display: inline-block;
float: right; float: right;
width: 7px; width: 7px;
height: 22px; height: 22px;
margin-left: 10px; margin-left: ($baseline/2);
background: url(../images/drag-handles.png) no-repeat; background: url(../images/drag-handles.png) no-repeat;
cursor: move; cursor: move;
} }
...@@ -12,7 +15,7 @@ ...@@ -12,7 +15,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 60px; height: 60px;
margin-right: 5px; margin-right: ($baseline/4);
background: url(../images/large-advanced-icon.png) center no-repeat; background: url(../images/large-advanced-icon.png) center no-repeat;
} }
...@@ -20,7 +23,7 @@ ...@@ -20,7 +23,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 60px; height: 60px;
margin-right: 5px; margin-right: ($baseline/4);
background: url(../images/large-discussion-icon.png) center no-repeat; background: url(../images/large-discussion-icon.png) center no-repeat;
} }
...@@ -28,7 +31,7 @@ ...@@ -28,7 +31,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 60px; height: 60px;
margin-right: 5px; margin-right: ($baseline/4);
background: url(../images/large-html-icon.png) center no-repeat; background: url(../images/large-html-icon.png) center no-repeat;
} }
...@@ -36,7 +39,7 @@ ...@@ -36,7 +39,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 60px; height: 60px;
margin-right: 5px; margin-right: ($baseline/4);
background: url(../images/large-problem-icon.png) center no-repeat; background: url(../images/large-problem-icon.png) center no-repeat;
} }
...@@ -44,6 +47,6 @@ ...@@ -44,6 +47,6 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 60px; height: 60px;
margin-right: 5px; margin-right: ($baseline/4);
background: url(../images/large-video-icon.png) center no-repeat; background: url(../images/large-video-icon.png) center no-repeat;
} }
cms/static/sass/elements/_controls.scss
// studio - elements - UI controls // studio - elements - UI controls
// ==================== // ====================
// general actions // Table of Contents
// * +General Action - Extend
// * +General Type and Size - Extend
// * +Primary Button - Extends
// * +Secondary Button - Extends
// * +Button
// * +UI Dropdown Button - Extend
// * +UI Nav Dropdown Button - Extend
// * +UI Actions List - Extend
// * +UI Expand/Collapse - Extend
// * +Drag and Drop
// +General Action - Extend
// ====================
%action { %action {
@extend %ui-fake-link; @extend %ui-fake-link;
...@@ -12,16 +27,16 @@ ...@@ -12,16 +27,16 @@
} }
} }
// ==================== // +General Type and Size - Extend
// ====================
// general type and size
%sizing { %sizing {
@extend %t-action4; @extend %t-action4;
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2); padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
} }
// ====================
// +Primary Button - Extends
// ====================
// gray primary button // gray primary button
%btn-primary-gray { %btn-primary-gray {
@extend %ui-btn-primary; @extend %ui-btn-primary;
...@@ -90,6 +105,8 @@ ...@@ -90,6 +105,8 @@
} }
} }
// +Secondary Button - Extends
// ====================
// gray secondary button // gray secondary button
%btn-secondary-gray { %btn-secondary-gray {
@extend %ui-btn-secondary; @extend %ui-btn-secondary;
...@@ -175,9 +192,8 @@ ...@@ -175,9 +192,8 @@
} }
} }
// ==================== // +Button Element
// ====================
// button elements
.button { .button {
[class^="icon-"] { [class^="icon-"] {
...@@ -187,9 +203,8 @@ ...@@ -187,9 +203,8 @@
} }
} }
// +UI Dropdown Button - Extend
// ==================== // ====================
// simple dropdown button styling - should we move this elsewhere?
%ui-btn-dd { %ui-btn-dd {
@extend %ui-btn; @extend %ui-btn;
@extend %ui-btn-pill; @extend %ui-btn-pill;
...@@ -210,7 +225,8 @@ ...@@ -210,7 +225,8 @@
} }
} }
// layout-based buttons - nav dd // +UI Nav Dropdown Button - Extend
// ====================
%ui-btn-dd-nav-primary { %ui-btn-dd-nav-primary {
@extend %ui-btn-dd; @extend %ui-btn-dd;
background: $white; background: $white;
...@@ -232,10 +248,8 @@ ...@@ -232,10 +248,8 @@
} }
} }
// +UI Actions List - Extend
// ==================== // ====================
// UI: element actions list
%actions-list { %actions-list {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
...@@ -296,7 +310,9 @@ ...@@ -296,7 +310,9 @@
} }
} }
// UI: elem is collapsible - TODO: this should be transitioned away from in favor of %ui-expand-collapse // +UI Expand/Collapse - Extend
// ====================
// TODO: this should be transitioned away from in favor of %ui-expand-collapse
%expand-collapse { %expand-collapse {
@include transition(all $tmg-f2 linear 0s); @include transition(all $tmg-f2 linear 0s);
display: inline-block; display: inline-block;
...@@ -322,7 +338,9 @@ ...@@ -322,7 +338,9 @@
} }
} }
// UI: expand collapse // +UI Expand/Collapse - Extend
// ====================
// will replace %expand-collapse
%ui-expand-collapse { %ui-expand-collapse {
@include transition(all $tmg-f2 linear 0s); @include transition(all $tmg-f2 linear 0s);
...@@ -339,7 +357,7 @@ ...@@ -339,7 +357,7 @@
// STATE: hover/active // STATE: hover/active
&:hover, &:active { &:hover, &:active {
cursor: pointer; @extend %ui-fake-link;
color: $ui-link-color-focus; color: $ui-link-color-focus;
} }
} }
...@@ -357,15 +375,18 @@ ...@@ -357,15 +375,18 @@
} }
} }
// UI: drag handles // +Drag and Drop Styling
// ====================
// UI: drag handle
.drag-handle { .drag-handle {
&:hover, &:focus { &:hover, &:focus {
cursor: move; cursor: move;
} }
} }
// UI: elem is draggable // UI: is draggable
.is-draggable { .is-draggable {
@include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0); @include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
position: relative; position: relative;
...@@ -396,7 +417,7 @@ ...@@ -396,7 +417,7 @@
} }
} }
// UI: drag state - is dragging // UI: is dragging - drag state
.is-dragging { .is-dragging {
@extend %ui-depth4; @extend %ui-depth4;
left: -($baseline/4); left: -($baseline/4);
......
cms/static/sass/elements/_footer.scss
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
background: transparent; background: transparent;
[class^="icon-"] { [class^="icon-"] {
@include transition(top $tmg-f2 ease-in-out 0.25s); @include transition(top $tmg-f2 ease-in-out $tmg-f2);
@extend %t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
......
cms/static/sass/elements/_forms.scss
// studio - elements - forms // studio - elements - forms
// ==================== // ====================
// forms - general // Table of Contents
// * +Forms - General
// * +Field - Is Editable
// * +Field - With Error
// * +Forms - Additional UI
// * +Form - Create New
// * +Form - Inline Name Edit
// * +Form - Create New Wrapper
// * +Form - Grandfathered
// +Forms - General
// ====================
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
...@@ -31,9 +42,8 @@ textarea.text { ...@@ -31,9 +42,8 @@ textarea.text {
} }
} }
// ==================== // +Fields - Not Editable
// ====================
// forms - fields - not editable
.field.is-not-editable { .field.is-not-editable {
& label.is-focused { & label.is-focused {
...@@ -45,9 +55,8 @@ textarea.text { ...@@ -45,9 +55,8 @@ textarea.text {
} }
} }
// ==================== // +Fields - With Error
// ====================
// field with error
.field.error { .field.error {
input, textarea { input, textarea {
...@@ -55,9 +64,8 @@ textarea.text { ...@@ -55,9 +64,8 @@ textarea.text {
} }
} }
// ==================== // +Forms - Additional UI
// ====================
// forms - additional UI
form { form {
// CASE: cosmetic checkbox input // CASE: cosmetic checkbox input
...@@ -138,7 +146,8 @@ form { ...@@ -138,7 +146,8 @@ form {
} }
} }
// ELEM: form // +Form - Create New
// ====================
// form styling for creating a new content item (course, user, textbook) // form styling for creating a new content item (course, user, textbook)
// TODO: refactor this into a placeholder to extend. // TODO: refactor this into a placeholder to extend.
.form-create { .form-create {
...@@ -355,9 +364,10 @@ form { ...@@ -355,9 +364,10 @@ form {
} }
} }
// +Form - Inline Name Edit
// ====================
// form - inline xblock name edit on unit, container, outline // form - inline xblock name edit on unit, container, outline
// TODO: abstract this out into a Sass placeholder
// TOOD: abstract this out into a Sass placeholder
.incontext-editor.is-editable { .incontext-editor.is-editable {
.incontext-editor-value, .incontext-editor-value,
...@@ -391,7 +401,8 @@ form { ...@@ -391,7 +401,8 @@ form {
} }
} }
// ELEM: form wrapper // +Form - Create New Wrapper
// ====================
.wrapper-create-element { .wrapper-create-element {
height: 0; height: 0;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -410,9 +421,8 @@ form { ...@@ -410,9 +421,8 @@ form {
} }
} }
// ==================== // +Form - Grandfathered
// ====================
// forms - grandfathered
input.search { input.search {
padding: 6px 15px 8px 30px; padding: 6px 15px 8px 30px;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -441,7 +451,7 @@ code { ...@@ -441,7 +451,7 @@ code {
.CodeMirror { .CodeMirror {
@extend %t-copy-sub1; @extend %t-copy-sub1;
background: #fff; background: $white;
font-family: $f-monospace; font-family: $f-monospace;
} }
......
cms/static/sass/elements/_modal-window.scss
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
position: absolute; position: absolute;
width: 50%; width: 50%;
box-shadow: 0px 0px 7px $shadow-d1; box-shadow: 0 0 7px $shadow-d1;
border-radius: ($baseline/5); border-radius: ($baseline/5);
background-color: $gray-l4; background-color: $gray-l4;
padding: 7px; padding: 7px;
...@@ -509,7 +509,7 @@ ...@@ -509,7 +509,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000; background: $black;
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
......
cms/static/sass/elements/_modal.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, .8); background: rgba(0, 0, 0, 0.8);
} }
.modal { .modal {
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
width: 930px; width: 930px;
height: 540px; height: 540px;
margin-left: -465px; margin-left: -465px;
background: #fff; background: $white;
.modal-body { .modal-body {
height: 400px; height: 400px;
...@@ -38,14 +38,14 @@ ...@@ -38,14 +38,14 @@
h2 { h2 {
@extend %t-title5; @extend %t-title5;
@extend %t-light; @extend %t-light;
margin: 0 10px 30px; margin: 0 ($baseline/2) ($baseline*1.5);
color: #646464; color: #646464;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }
p { p {
margin: 20px; margin: $baseline;
} }
.revert-button { .revert-button {
......
cms/static/sass/elements/_modules.scss
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
@extend %t-title6; @extend %t-title6;
@extend %t-strong; @extend %t-strong;
display: block; display: block;
padding: ($baseline/2) ($baseline*.75); padding: ($baseline/2) ($baseline*0.75);
background-color: $gray-l4; background-color: $gray-l4;
} }
.bar-mod-content { .bar-mod-content {
@extend %t-copy-sub1; @extend %t-copy-sub1;
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
padding: ($baseline*.75) ($baseline*.75) $baseline ($baseline*.75); padding: ($baseline*0.75) ($baseline*0.75) $baseline ($baseline*0.75);
.title { .title {
@extend %t-title8; @extend %t-title8;
...@@ -109,13 +109,13 @@ ...@@ -109,13 +109,13 @@
h5 { h5 {
@extend %t-title5; @extend %t-title5;
@extend %t-strong; @extend %t-strong;
margin-bottom: ($baseline*.75); margin-bottom: ($baseline*0.75);
color: $green-d1; color: $green-d1;
} }
// add component - list of green buttons // add component - list of green buttons
.new-component-type { .new-component-type {
@include clearfix; @include clearfix();
li { li {
display: inline-block; display: inline-block;
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
display: inline-block; display: inline-block;
width: ($baseline*5); width: ($baseline*5);
height: ($baseline*5); height: ($baseline*5);
margin-right: ($baseline*.75); margin-right: ($baseline*0.75);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
border: 1px solid $green-d2; border: 1px solid $green-d2;
border-radius: ($baseline/4); border-radius: ($baseline/4);
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
// swaps in when a green button is clicked // swaps in when a green button is clicked
// -------------------- // --------------------
.new-component-templates { .new-component-templates {
@include clearfix; @include clearfix();
display: none; display: none;
margin: $baseline ($baseline*2); margin: $baseline ($baseline*2);
border-radius: 3px; border-radius: 3px;
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
// individual menus // individual menus
// -------------------- // --------------------
.new-component-template { .new-component-template {
@include clearfix; @include clearfix();
li { li {
border: none; border: none;
...@@ -253,7 +253,7 @@ ...@@ -253,7 +253,7 @@
a { a {
@extend %t-action3; @extend %t-action3;
display: block; display: block;
padding: ($baseline*.75) ($baseline*1.25); padding: ($baseline*0.75) ($baseline*1.25);
text-align: center; text-align: center;
color: $gray-d3; color: $gray-d3;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
...@@ -268,7 +268,7 @@ $outline-indent-width: $baseline; ...@@ -268,7 +268,7 @@ $outline-indent-width: $baseline;
// UI: general outline // UI: general outline
.outline-content { .outline-content {
margin-top: 5px; margin-top: ($baseline/4);
.unit-content { .unit-content {
margin-top: 0; margin-top: 0;
......
cms/static/sass/elements/_system-feedback.scss
...@@ -406,7 +406,7 @@ ...@@ -406,7 +406,7 @@
} }
.feedback-symbol { .feedback-symbol {
@include transition (color 0.50s ease-in-out 0s); @include transition (color $tmg-f1 ease-in-out 0s);
@extend %t-icon3; @extend %t-icon3;
width: flex-grid(1, 12); width: flex-grid(1, 12);
height: ($baseline*1.25); height: ($baseline*1.25);
...@@ -584,7 +584,7 @@ ...@@ -584,7 +584,7 @@
} }
.feedback-symbol { .feedback-symbol {
@include transition (color 0.50s ease-in-out 0s); @include transition (color $tmg-f1 ease-in-out 0s);
@extend %t-icon3; @extend %t-icon3;
width: flex-grid(1, 12); width: flex-grid(1, 12);
margin: ($baseline/4) flex-gutter() 0 0; margin: ($baseline/4) flex-gutter() 0 0;
...@@ -760,7 +760,7 @@ ...@@ -760,7 +760,7 @@
.message { .message {
@extend %t-copy-sub1; @extend %t-copy-sub1;
background-color: $gray-d2; background-color: $gray-d2;
padding: ($baseline/2) ($baseline*.75); padding: ($baseline/2) ($baseline*0.75);
color: $white; color: $white;
[class^="icon-"] { [class^="icon-"] {
...@@ -873,13 +873,13 @@ body.uxdesign.alerts { ...@@ -873,13 +873,13 @@ body.uxdesign.alerts {
.alert { .alert {
@extend %t-copy-sub1; @extend %t-copy-sub1;
padding: 15px 20px; padding: 15px 20px;
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
border-radius: 3px; border-radius: 3px;
border: 1px solid #edbd3c; border: 1px solid #edbd3c;
border-radius: 3px; border-radius: 3px;
background: #fbf6e1; background: #fbf6e1;
// background: #edbd3c; // background: #edbd3c;
@include clearfix; @include clearfix();
.alert-message { .alert-message {
@include float(left); @include float(left);
......
cms/static/sass/elements/_tender-widget.scss
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
.widget-layout .header { .widget-layout .header {
background: rgb(0, 159, 230); background: rgb(0, 159, 230);
padding: 10px 20px; padding: ($baseline/2) $baseline;
} }
.widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label { .widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label {
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
.widget-layout label { .widget-layout label {
@extend %t-copy-sub1; @extend %t-copy-sub1;
@extend %t-strong; @extend %t-strong;
margin-bottom: 5px; margin-bottom: ($baseline/4);
color: #4c4c4c; color: #4c4c4c;
} }
...@@ -145,15 +145,15 @@ ...@@ -145,15 +145,15 @@
.widget-layout dl.form { .widget-layout dl.form {
float: none; float: none;
width: 100%; width: 100%;
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid $gray-l5;
margin-bottom: 10px; margin-bottom: ($baseline/2);
padding-bottom: 10px; padding-bottom: ($baseline/2);
} }
.widget-layout dl.form:last-child { .widget-layout dl.form:last-child {
border: none; border: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 20px; margin-bottom: $baseline;
} }
.widget-layout dl.form dt, .widget-layout dl.form dd { .widget-layout dl.form dt, .widget-layout dl.form dd {
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
} }
.widget-layout dl.form dt { .widget-layout dl.form dt {
margin-right: 15px; margin-right: ($baseline*0.75);
width: 70px; width: 70px;
} }
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
@extend %t-strong; @extend %t-strong;
content: "What Question or Feedback Would You Like to Share?"; content: "What Question or Feedback Would You Like to Share?";
display: block; display: block;
margin-bottom: 5px; margin-bottom: ($baseline/4);
color: #4c4c4c; color: #4c4c4c;
} }
...@@ -189,9 +189,9 @@ ...@@ -189,9 +189,9 @@
.widget-layout dl#brain_buster_captcha { .widget-layout dl#brain_buster_captcha {
float: none; float: none;
width: 100%; width: 100%;
border-top: 1px solid #f2f2f2; border-top: 1px solid $gray-l5;
margin-top: 10px; margin-top: ($baseline/2);
padding-top: 10px; padding-top: ($baseline/2);
} }
.widget-layout dl#brain_buster_captcha dd { .widget-layout dl#brain_buster_captcha dd {
...@@ -219,9 +219,9 @@ ...@@ -219,9 +219,9 @@
display: block; display: block;
width: 100%; width: 100%;
height: auto !important; height: auto !important;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 $transparent;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 $transparent;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 $transparent;
-webkit-transition-property: background-color,0.15s; -webkit-transition-property: background-color,0.15s;
-moz-transition-property: background-color,0.15s; -moz-transition-property: background-color,0.15s;
-ms-transition-property: background-color,0.15s; -ms-transition-property: background-color,0.15s;
...@@ -255,10 +255,10 @@ ...@@ -255,10 +255,10 @@
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
color: #fff; color: $white;
text-align: center; text-align: center;
margin-top: 20px; margin-top: $baseline;
padding: 10px 20px; padding: ($baseline/2) $baseline;
} }
.widget-layout .form-actions #private-discussion-opt { .widget-layout .form-actions #private-discussion-opt {
...@@ -269,5 +269,5 @@ ...@@ -269,5 +269,5 @@
.widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active { .widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active {
background-color: #16ca57; background-color: #16ca57;
color: #fff; color: $white;
} }
cms/static/sass/elements/_vendor.scss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
@extend %t-copy-sub2; @extend %t-copy-sub2;
border-color: $darkGrey; border-color: $darkGrey;
border-radius: 2px; border-radius: 2px;
background: #fff; background: $white;
font-family: $f-sans-serif; font-family: $f-sans-serif;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
z-index: 100000 !important; z-index: 100000 !important;
...@@ -40,20 +40,20 @@ ...@@ -40,20 +40,20 @@
&.ui-state-hover { &.ui-state-hover {
background: $orange; background: $orange;
border-color: $orange; border-color: $orange;
color: #fff; color: $white;
} }
} }
.ui-state-highlight { .ui-state-highlight {
background: $blue; background: $blue;
border-color: $blue; border-color: $blue;
color: #fff; color: $white;
} }
.ui-state-active { .ui-state-active {
background: $orange; background: $orange;
border-color: $orange; border-color: $orange;
color: #fff; color: $white;
} }
} }
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
li:first-child { li:first-child {
margin-left: 20px; margin-left: $baseline;
} }
li { li {
opacity: 0.8; opacity: 0.8;
......
cms/static/sass/elements/_xblocks.scss
...@@ -371,7 +371,7 @@ ...@@ -371,7 +371,7 @@
&.is-inactive { &.is-inactive {
margin: ($baseline*1.5) 0 0 0; margin: ($baseline*1.5) 0 0 0;
border-top: 2px dotted $gray-l2; border-top: 2px dotted $gray-l2;
padding: ($baseline*.75) 0; padding: ($baseline*0.75) 0;
background-color: $gray-l4; background-color: $gray-l4;
.wrapper-xblock.level-nesting { .wrapper-xblock.level-nesting {
...@@ -450,9 +450,7 @@ ...@@ -450,9 +450,7 @@
//settings-list //settings-list
.list-input.settings-list { .list-input.settings-list {
margin: 0; @extend %cont-no-list;
padding: 0;
list-style: none;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
...@@ -573,9 +571,9 @@ ...@@ -573,9 +571,9 @@
width: 25px; width: 25px;
height: 25px; height: 25px;
vertical-align: middle; vertical-align: middle;
padding: 5px; padding: ($baseline/4);
border-radius: 50%; border-radius: 50%;
margin: 0 $baseline/2; margin: 0 ($baseline/2);
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
border: 1px solid $gray-l1; border: 1px solid $gray-l1;
...@@ -659,7 +657,7 @@ ...@@ -659,7 +657,7 @@
} }
.remove-setting { .remove-setting {
@include transition(color 0.25s ease-in-out); @include transition(color $tmg-f2 ease-in-out);
@extend %t-action1; @extend %t-action1;
display: inline-block; display: inline-block;
background: transparent; background: transparent;
...@@ -680,7 +678,7 @@ ...@@ -680,7 +678,7 @@
// label // label
.setting-label { .setting-label {
vertical-align: top; vertical-align: top;
margin-top: ($baseline*.75); margin-top: ($baseline*0.75);
} }
// inputs and labels // inputs and labels
...@@ -713,7 +711,7 @@ ...@@ -713,7 +711,7 @@
.setting-clear { .setting-clear {
vertical-align: top; vertical-align: top;
margin: ($baseline*.75) 0 0 0; margin: ($baseline*0.75) 0 0 0;
} }
.create-setting { .create-setting {
...@@ -730,7 +728,7 @@ ...@@ -730,7 +728,7 @@
} }
.remove-setting { .remove-setting {
@include transition(color 0.25s ease-in-out); @include transition(color $tmg-f2 ease-in-out);
@extend %t-action1; @extend %t-action1;
display: inline-block; display: inline-block;
background: transparent; background: transparent;
......
cms/static/sass/elements/_xmodules.scss
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
min-width: ($baseline*5); min-width: ($baseline*5);
margin-top: 10px; margin-top: ($baseline/2);
.transcripts-message { .transcripts-message {
@extend %t-copy-sub2; @extend %t-copy-sub2;
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
@extend %t-icon4; @extend %t-icon4;
margin-right: 5px; margin-right: ($baseline/4);
} }
} }
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
@extend %t-copy-lead1; @extend %t-copy-lead1;
display: block; display: block;
height: 30px; height: 30px;
margin: 10px 0; margin: ($baseline/2) 0;
border: 1px solid $blue; border: 1px solid $blue;
text-align: center; text-align: center;
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
width: 0%; width: 0%;
height: 30px; height: 30px;
background: $blue; background: $blue;
color: #fff; color: $white;
line-height: 28px; line-height: 28px;
} }
} }
......
cms/static/sass/style-app-extend1-rtl.scss
// studio - css architecture // studio - css architecture
// ==================== // ====================
// libs and resets *do not edit* // Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// * +Base - Specific Views
// * +Base - Contexts
// +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
// VENDOR + REBASE *referenced/used vendor presentation and reset* // +Vendor and Rebase - *referenced/used vendor presentation and reset*
// ==================== // ====================
@import 'reset'; @import 'reset';
// BASE *default edX offerings* // +Base - Utilities
// ==================== // ====================
// base - utilities
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
// base - assets // +Base - Assets
// ====================
@import 'assets/fonts'; @import 'assets/fonts';
@import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/graphics'; // sprites, basic image/figure/svg styling
@import 'assets/anims'; // animations @import 'assets/anims'; // animations
// base - starter // +Base - Starter
// ====================
@import 'base'; @import 'base';
// base - elements // +Base - Elements
// ====================
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
...@@ -33,7 +47,8 @@ ...@@ -33,7 +47,8 @@
@import 'elements/layout'; // various standard layouts @import 'elements/layout'; // various standard layouts
@import 'elements/uploaded-assets'; // layout for asset tables @import 'elements/uploaded-assets'; // layout for asset tables
// base - specific views // +Base - Specific Views
// ====================
@import 'views/account'; @import 'views/account';
@import 'views/assets'; @import 'views/assets';
@import 'views/updates'; @import 'views/updates';
...@@ -54,7 +69,8 @@ ...@@ -54,7 +69,8 @@
@import 'views/group-configuration'; @import 'views/group-configuration';
@import 'views/video-upload'; @import 'views/video-upload';
// base - contexts // +Base - Contexts
// ====================
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs) @import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
......
cms/static/sass/style-app-extend1.scss
// studio - css architecture // studio - css architecture
// ==================== // ====================
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages // Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// * +Base - Specific Views
// * +Base - Contexts
// libs and resets *do not edit* // +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// VENDOR + REBASE *referenced/used vendor presentation and reset* // +Vendor and Rebase - *referenced/used vendor presentation and reset*
// ==================== // ====================
@import 'reset'; @import 'reset';
// BASE *default edX offerings* // +Base - Utilities
// ==================== // ====================
// base - utilities
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
// base - assets // +Base - Assets
// ====================
@import 'assets/fonts'; @import 'assets/fonts';
@import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/graphics'; // sprites, basic image/figure/svg styling
@import 'assets/anims'; // animations @import 'assets/anims'; // animations
// base - starter // +Base - Starter
// ====================
@import 'base'; @import 'base';
// base - elements // +Base - Elements
// ====================
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
...@@ -34,7 +47,8 @@ ...@@ -34,7 +47,8 @@
@import 'elements/layout'; // various standard layouts @import 'elements/layout'; // various standard layouts
@import 'elements/uploaded-assets'; // layout for asset tables @import 'elements/uploaded-assets'; // layout for asset tables
// base - specific views // +Base - Specific Views
// ====================
@import 'views/account'; @import 'views/account';
@import 'views/assets'; @import 'views/assets';
@import 'views/updates'; @import 'views/updates';
...@@ -55,7 +69,8 @@ ...@@ -55,7 +69,8 @@
@import 'views/group-configuration'; @import 'views/group-configuration';
@import 'views/video-upload'; @import 'views/video-upload';
// base - contexts // +Base - Contexts
// ====================
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs) @import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
......
cms/static/sass/style-app-rtl.scss
// studio - css architecture // studio - css architecture
// ==================== // ====================
// libs and resets *do not edit* // Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
// VENDOR + REBASE *referenced/used vendor presentation and reset* // +Vendor and Rebase - *referenced/used vendor presentation and reset*
// ==================== // ====================
@import 'reset'; @import 'reset';
// BASE *default edX offerings* // +Base - Utilities
// ==================== // ====================
// base - utilities
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
// base - assets // +Base - Assets
// ====================
@import 'assets/fonts'; @import 'assets/fonts';
@import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/graphics'; // sprites, basic image/figure/svg styling
@import 'assets/anims'; // animations @import 'assets/anims'; // animations
// base - starter // +Base - Starter
// ====================
@import 'base'; @import 'base';
// base - elements // +Base - Elements
// ====================
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
......
cms/static/sass/style-app.scss
// studio - css architecture // studio - css architecture
// ==================== // ====================
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages // Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// libs and resets *do not edit* // +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// VENDOR + REBASE *referenced/used vendor presentation and reset* // +Vendor and Rebase - *referenced/used vendor presentation and reset*
// ==================== // ====================
@import 'reset'; @import 'reset';
// BASE *default edX offerings* // +Base - Utilities
// ==================== // ====================
// base - utilities
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
// base - assets // +Base - Assets
// ====================
@import 'assets/fonts'; @import 'assets/fonts';
@import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/graphics'; // sprites, basic image/figure/svg styling
@import 'assets/anims'; // animations @import 'assets/anims'; // animations
// base - starter // +Base - Starter
// ====================
@import 'base'; @import 'base';
// base - elements // +Base - Elements
// ====================
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
......
cms/static/sass/style-xmodule-rtl.scss
// studio - xmodule architecture // studio - xmodule architecture
// ==================== // ====================
// libs and resets *do not edit* // Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// * +Xmodule
// +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
// VENDOR + REBASE *referenced/used vendor presentation and reset* // +Vendor and Rebase - *referenced/used vendor presentation and reset*
// ==================== // ====================
@import 'reset'; @import 'reset';
// BASE *default edX offerings* // +Base - Utilities
// ==================== // ====================
// base - utilities
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
// base - assets // +Base - Assets
// ====================
@import 'assets/fonts'; @import 'assets/fonts';
@import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/graphics'; // sprites, basic image/figure/svg styling
@import 'assets/anims'; // animations @import 'assets/anims'; // animations
// base - starter // +Base - Starter
// ====================
@import 'base'; @import 'base';
// base - elements // +Base - Elements
// ====================
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/navigation'; // all archetypes of navigation @import 'elements/navigation'; // all archetypes of navigation
// xmodule // +Xmodule
// ====================
@import 'xmodule/modules/css/module-styles.scss'; @import 'xmodule/modules/css/module-styles.scss';
@import 'xmodule/descriptors/css/module-styles.scss'; @import 'xmodule/descriptors/css/module-styles.scss';
@import 'elements/xmodules'; // styling for Studio-specific contexts @import 'elements/xmodules'; // styling for Studio-specific contexts
cms/static/sass/style-xmodule.scss
// studio - xmodule architecture // studio - xmodule architecture
// ==================== // ====================
// libs and resets *do not edit* // Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// * +Xmodule
// +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// VENDOR + REBASE *referenced/used vendor presentation and reset* // +Vendor and Rebase - *referenced/used vendor presentation and reset*
// ==================== // ====================
@import 'reset'; @import 'reset';
// BASE *default edX offerings* // +Base - Utilities
// ==================== // ====================
// base - utilities
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
// base - assets // +Base - Assets
// ====================
@import 'assets/fonts'; @import 'assets/fonts';
@import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/graphics'; // sprites, basic image/figure/svg styling
@import 'assets/anims'; // animations @import 'assets/anims'; // animations
// base - starter // +Base - Starter
// ====================
@import 'base'; @import 'base';
// base - elements // +Base - Elements
// ====================
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/navigation'; // all archetypes of navigation @import 'elements/navigation'; // all archetypes of navigation
// xmodule // +Xmodule
// ====================
@import 'xmodule/modules/css/module-styles.scss'; @import 'xmodule/modules/css/module-styles.scss';
@import 'xmodule/descriptors/css/module-styles.scss'; @import 'xmodule/descriptors/css/module-styles.scss';
@import 'elements/xmodules'; // styling for Studio-specific contexts @import 'elements/xmodules'; // styling for Studio-specific contexts
cms/static/sass/views/_account.scss
...@@ -80,9 +80,7 @@ ...@@ -80,9 +80,7 @@
} }
.list-input { .list-input {
margin: 0; @extend %cont-no-list;
padding: 0;
list-style: none;
.field { .field {
margin: 0 0 ($baseline*0.75) 0; margin: 0 0 ($baseline*0.75) 0;
......
cms/static/sass/views/_checklists.scss
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
} }
&.is-selectable { &.is-selectable {
cursor: pointer; @extend %ui-fake-link;
&:hover { &:hover {
color: $blue; color: $blue;
...@@ -240,8 +240,8 @@ ...@@ -240,8 +240,8 @@
.task-name { .task-name {
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
@extend %ui-fake-link;
vertical-align: baseline; vertical-align: baseline;
cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
} }
.task-actions { .task-actions {
@include transition(opacity $tmg-f2 ease-in-out 0.25s); @include transition(opacity $tmg-f2 ease-in-out $tmg-f2);
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
......
cms/static/sass/views/_container.scss
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
.button { .button {
@extend %t-action3; @extend %t-action3;
@extend %t-regular; @extend %t-regular;
padding: ($baseline/4) ($baseline*.75); padding: ($baseline/4) ($baseline*0.75);
} }
} }
} }
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
.bar-mod-content { .bar-mod-content {
border: 0; border: 0;
padding: ($baseline/2) ($baseline*.75) ($baseline/4) ($baseline*.75); padding: ($baseline/2) ($baseline*0.75) ($baseline/4) ($baseline*0.75);
.title { .title {
margin-bottom: ($baseline/10); margin-bottom: ($baseline/10);
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
} }
.wrapper-pub-actions { .wrapper-pub-actions {
padding: ($baseline*.75); padding: ($baseline*0.75);
.action-publish { .action-publish {
@extend %btn-primary-blue; @extend %btn-primary-blue;
...@@ -217,7 +217,7 @@ ...@@ -217,7 +217,7 @@
.wrapper-last-publish { .wrapper-last-publish {
margin-bottom: $baseline; margin-bottom: $baseline;
padding: ($baseline*.75); padding: ($baseline*0.75);
background-color: $white; background-color: $white;
.copy { .copy {
......
cms/static/sass/views/_export-git.scss
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
dd { dd {
@extend %t-copy-base; @extend %t-copy-base;
margin-bottom: 20px; margin-bottom: $baseline;
} }
.course_text { .course_text {
......
cms/static/sass/views/_export.scss
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
h2 { h2 {
@extend %t-title5; @extend %t-title5;
@extend %t-strong; @extend %t-strong;
margin-bottom: 20px; margin-bottom: $baseline;
} }
strong { strong {
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
} }
p + p { p + p {
margin-top: 20px; margin-top: $baseline;
} }
ul { ul {
...@@ -132,13 +132,13 @@ ...@@ -132,13 +132,13 @@
h2 { h2 {
@extend %t-title4; @extend %t-title4;
@extend %t-light; @extend %t-light;
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
} }
.error-block { .error-block {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: none; display: none;
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
} }
.error-block { .error-block {
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
.message-status { .message-status {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin-top: 10px; margin-top: ($baseline/2);
} }
.progress-bar { .progress-bar {
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
width: 0%; width: 0%;
height: 30px; height: 30px;
background: $blue; background: $blue;
color: #fff; color: $white;
line-height: 48px; line-height: 48px;
} }
} }
......
cms/static/sass/views/_group-configuration.scss
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
} }
&.is-selectable { &.is-selectable {
cursor: pointer; @extend %ui-fake-link;
&:hover { &:hover {
color: $blue; color: $blue;
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
.wrapper-group-configuration-validation { .wrapper-group-configuration-validation {
@extend %t-copy-sub1; @extend %t-copy-sub1;
background-color: #f8f8f8; background-color: $gray-l6;
margin-top: $baseline; margin-top: $baseline;
padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5);
...@@ -470,7 +470,7 @@ ...@@ -470,7 +470,7 @@
} }
.action-close { .action-close {
@include transition(color 0.25s ease-in-out); @include transition(color $tmg-f2 ease-in-out);
@extend %t-action1; @extend %t-action1;
display: inline-block; display: inline-block;
border: 0; border: 0;
......
cms/static/sass/views/_import.scss
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
// UI: export controls // UI: export controls
.export-controls { .export-controls {
@extend %ui-window; @extend %ui-window;
@include clearfix; @include clearfix();
padding: 30px 40px; padding: ($baseline*1.5) ($baseline*2);
} }
// UI: import form // UI: import form
......
cms/static/sass/views/_index.scss
...@@ -89,8 +89,8 @@ ...@@ -89,8 +89,8 @@
.arrow_box { .arrow_box {
position: relative; position: relative;
background: #fff; background: $white;
border: 4px solid #000; border: 4px solid $black;
} }
.arrow_box:after, .arrow_box:before { .arrow_box:after, .arrow_box:before {
top: 100%; top: 100%;
...@@ -104,14 +104,14 @@ ...@@ -104,14 +104,14 @@
.arrow_box:after { .arrow_box:after {
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-top-color: #fff; border-top-color: $white;
border-width: 30px; border-width: 30px;
left: 50%; left: 50%;
margin-left: -30px; margin-left: -($baseline*1.5);
} }
.arrow_box:before { .arrow_box:before {
border-color: rgba(0, 0, 0, 0); border-color: $transparent;
border-top-color: #000; border-top-color: $black;
border-width: 36px; border-width: 36px;
left: 50%; left: 50%;
margin-left: -36px; margin-left: -36px;
......
cms/static/sass/views/_settings.scss
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
@extend %t-strong; @extend %t-strong;
display: none; display: none;
border-bottom: 2px solid $yellow; border-bottom: 2px solid $yellow;
margin: 0 0 20px 0; margin: 0 0 $baseline 0;
padding: 10px 20px; padding: ($baseline/2) $baseline;
background: $paleYellow; background: $paleYellow;
.text { .text {
...@@ -124,9 +124,7 @@ ...@@ -124,9 +124,7 @@
// form basics // form basics
.list-input { .list-input {
margin: 0; @extend %cont-no-list;
padding: 0;
list-style: none;
.field { .field {
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
...@@ -661,7 +659,7 @@ ...@@ -661,7 +659,7 @@
.range { .range {
@include font-size(10); @include font-size(10);
display: block; display: block;
margin-right: 15px; margin-right: ($baseline*0.75);
line-height: 12px; line-height: 12px;
} }
...@@ -671,7 +669,7 @@ ...@@ -671,7 +669,7 @@
right: -1px; right: -1px;
height: 50px; height: 50px;
width: 2px; width: 2px;
background-color: #fff; background-color: $white;
box-shadow: -1px 0 3px rgba(0,0,0,0.1); box-shadow: -1px 0 3px rgba(0,0,0,0.1);
cursor: ew-resize; cursor: ew-resize;
...@@ -860,7 +858,7 @@ ...@@ -860,7 +858,7 @@
.CodeMirror { .CodeMirror {
@extend %t-copy-base; @extend %t-copy-base;
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 2px $shadow-l1 inset;
@include linear-gradient($lightGrey, tint($lightGrey, 90%)); @include linear-gradient($lightGrey, tint($lightGrey, 90%));
padding: 5px 8px; padding: 5px 8px;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
......
cms/static/sass/views/_static-pages.scss
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
} }
.wrapper-component-editor { .wrapper-component-editor {
z-index: 9999; @extend %ui-depth4;
position: relative; position: relative;
background: $lightBluishGrey2; background: $lightBluishGrey2;
} }
...@@ -200,11 +200,11 @@ ...@@ -200,11 +200,11 @@
} }
.drag-handle { .drag-handle {
@extend %ui-depth1;
@include right(0);
position: absolute; position: absolute;
display: block; display: block;
top: 0; top: 0;
@include right(0);
z-index: 11;
width: 35px; width: 35px;
height: 100%; height: 100%;
border: none; border: none;
...@@ -288,7 +288,7 @@ ...@@ -288,7 +288,7 @@
// basic course nav items - overrides from above // basic course nav items - overrides from above
.course-nav-item { .course-nav-item {
padding: ($baseline*.75) ($baseline/4) ($baseline*.75) $baseline; padding: ($baseline*0.75) ($baseline/4) ($baseline*0.75) $baseline;
background: $white; background: $white;
&.is-fixed { &.is-fixed {
...@@ -334,17 +334,17 @@ ...@@ -334,17 +334,17 @@
@include transition(background-color $tmg-s3 linear 0s); @include transition(background-color $tmg-s3 linear 0s);
@extend %t-title4; @extend %t-title4;
padding: 20px 20px 22px; padding: 20px 20px 22px;
background: #fff; background: $white;
} }
.static-page-item { .static-page-item {
position: relative; position: relative;
margin: 10px 0; margin: ($baseline/2) 0;
padding: 22px 20px; padding: 22px 20px;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px $shadow-l1;
.page-name { .page-name {
@extend %t-title5; @extend %t-title5;
...@@ -360,7 +360,7 @@ ...@@ -360,7 +360,7 @@
.edit-static-page { .edit-static-page {
.main-wrapper { .main-wrapper {
margin-top: 40px; margin-top: ($baseline*2);
} }
.static-page-details { .static-page-details {
...@@ -387,7 +387,7 @@ ...@@ -387,7 +387,7 @@
border: 1px solid #b0b6c2; border: 1px solid #b0b6c2;
border-radius: 2px; border-radius: 2px;
background-color: #edf1f5; background-color: #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 2px $shadow-l1 inset;
font-family: Monaco, monospace; font-family: Monaco, monospace;
color: #3c3c3c; color: #3c3c3c;
outline: 0; outline: 0;
......
cms/static/sass/views/_textbooks.scss
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
} }
&.is-selectable { &.is-selectable {
cursor: pointer; @extend %ui-fake-link;
&:hover { &:hover {
color: $blue; color: $blue;
...@@ -322,7 +322,7 @@ ...@@ -322,7 +322,7 @@
} }
.action-close { .action-close {
@include transition(color 0.25s ease-in-out); @include transition(color $tmg-f2 ease-in-out);
@extend %t-action1; @extend %t-action1;
display: inline-block; display: inline-block;
float: right; float: right;
......
cms/static/sass/views/_updates.scss
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
.CodeMirror { .CodeMirror {
border: 1px solid #3c3c3c; border: 1px solid #3c3c3c;
background: #fff; background: $white;
color: #3c3c3c; color: #3c3c3c;
} }
} }
...@@ -41,12 +41,12 @@ ...@@ -41,12 +41,12 @@
} }
&.editing { &.editing {
@extend %ui-depth4;
position: relative; position: relative;
z-index: 1001;
padding: 0; padding: 0;
border-top: none; border-top: none;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
.post-preview { .post-preview {
display: none; display: none;
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
.primary { .primary {
border: 1px solid #ddd; border: 1px solid #ddd;
background: #f6f6f6; background: $gray-l6;
padding: 20px; padding: 20px;
} }
...@@ -198,13 +198,13 @@ ...@@ -198,13 +198,13 @@
} }
.edit-handouts-form { .edit-handouts-form {
@extend %ui-depth4;
@include edit-box; @include edit-box;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
z-index: 10001;
width: 800px; width: 800px;
padding: 30px; padding: ($baseline*1.5);
textarea { textarea {
height: 300px; height: 300px;
......
common/lib/xmodule/xmodule/css/annotatable/display.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
* -Abarrett and Vshnayder * -Abarrett and Vshnayder
*/ */
$annotatable--border-color: #C8C8C8; $annotatable--border-color: $gray-l3;
$annotatable--body-font-size: em(14); $annotatable--body-font-size: em(14);
.annotatable-wrapper { .annotatable-wrapper {
...@@ -16,7 +16,7 @@ $annotatable--body-font-size: em(14); ...@@ -16,7 +16,7 @@ $annotatable--body-font-size: em(14);
.annotatable-title { .annotatable-title {
font-size: em(22); font-size: em(22);
text-transform: uppercase; text-transform: uppercase;
padding: 2px 4px; padding: ($baseline/10) ($baseline/5);
} }
} }
...@@ -24,8 +24,8 @@ $annotatable--body-font-size: em(14); ...@@ -24,8 +24,8 @@ $annotatable--body-font-size: em(14);
position: relative; position: relative;
padding: .5em 1em; padding: .5em 1em;
border: 1px solid $annotatable--border-color; border: 1px solid $annotatable--border-color;
border-radius: .5em; border-radius: 0.5em;
margin-bottom: .5em; margin-bottom: 0.5em;
&.shaded { background-color: #EDEDED; } &.shaded { background-color: #EDEDED; }
...@@ -35,9 +35,9 @@ $annotatable--body-font-size: em(14); ...@@ -35,9 +35,9 @@ $annotatable--body-font-size: em(14);
} }
.annotatable-section-body { .annotatable-section-body {
border-top: 1px solid $annotatable--border-color; border-top: 1px solid $annotatable--border-color;
margin-top: .5em; margin-top: 0.5em;
padding-top: .5em; padding-top: 0.5em;
@include clearfix; @include clearfix();
} }
ul.instructions-template { ul.instructions-template {
...@@ -62,8 +62,8 @@ $annotatable--body-font-size: em(14); ...@@ -62,8 +62,8 @@ $annotatable--body-font-size: em(14);
} }
.annotatable-span { .annotatable-span {
@extend %ui-fake-link;
display: inline; display: inline;
cursor: pointer;
$highlight_index: 0; $highlight_index: 0;
@each $highlight in ( @each $highlight in (
...@@ -108,18 +108,18 @@ $annotatable--body-font-size: em(14); ...@@ -108,18 +108,18 @@ $annotatable--body-font-size: em(14);
font-size: $annotatable--body-font-size; font-size: $annotatable--body-font-size;
border: 1px solid #333; border: 1px solid #333;
border-radius: 1em; border-radius: 1em;
background-color: rgba(0,0,0,.85); background-color: rgba(0,0,0,0.85);
color: #fff; color: $white;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
.ui-tooltip-titlebar { .ui-tooltip-titlebar {
font-size: em(16); font-size: em(16);
color: inherit; color: inherit;
background-color: transparent; background-color: transparent;
padding: 5px 10px; padding: ($baseline/4) ($baseline/2);
border: none; border: none;
.ui-tooltip-title { .ui-tooltip-title {
padding: 5px 0px; padding: ($baseline/4) 0;
border-bottom: 2px solid #333; border-bottom: 2px solid #333;
font-weight: bold; font-weight: bold;
} }
...@@ -129,7 +129,7 @@ $annotatable--body-font-size: em(14); ...@@ -129,7 +129,7 @@ $annotatable--body-font-size: em(14);
} }
.ui-state-hover { .ui-state-hover {
color: inherit; color: inherit;
border: 1px solid #ccc; border: 1px solid $gray-l3;
} }
} }
.ui-tooltip-content { .ui-tooltip-content {
...@@ -137,7 +137,7 @@ $annotatable--body-font-size: em(14); ...@@ -137,7 +137,7 @@ $annotatable--body-font-size: em(14);
font-size: em(14); font-size: em(14);
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
padding: 0 10px 10px 10px; padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
...@@ -150,10 +150,10 @@ $annotatable--body-font-size: em(14); ...@@ -150,10 +150,10 @@ $annotatable--body-font-size: em(14);
.ui-tooltip.qtip.ui-tooltip-annotatable { .ui-tooltip.qtip.ui-tooltip-annotatable {
max-width: 375px; max-width: 375px;
.ui-tooltip-content { .ui-tooltip-content {
padding: 0 10px; padding: 0 ($baseline/2);
.annotatable-comment { .annotatable-comment {
display: block; display: block;
margin: 0px 0px 10px 0; margin: 0 0 ($baseline/2) 0;
max-height: 225px; max-height: 225px;
overflow: auto; overflow: auto;
line-height: normal; line-height: normal;
...@@ -161,7 +161,7 @@ $annotatable--body-font-size: em(14); ...@@ -161,7 +161,7 @@ $annotatable--body-font-size: em(14);
.annotatable-reply { .annotatable-reply {
display: block; display: block;
border-top: 2px solid #333; border-top: 2px solid #333;
padding: 5px 0; padding: ($baseline/4) 0;
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
...@@ -174,8 +174,8 @@ $annotatable--body-font-size: em(14); ...@@ -174,8 +174,8 @@ $annotatable--body-font-size: em(14);
left: 50%; left: 50%;
height: 0; height: 0;
width: 0; width: 0;
margin-left: -5px; margin-left: -($baseline/4);
border: 10px solid transparent; border: 10px solid transparent;
border-top-color: rgba(0, 0, 0, .85); border-top-color: rgba(0, 0, 0, 0.85);
} }
} }
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -2,12 +2,12 @@ $annotation-yellow: rgba(255,255,10,0.3); ...@@ -2,12 +2,12 @@ $annotation-yellow: rgba(255,255,10,0.3);
h2 { h2 {
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
&.problem-header { &.problem-header {
display: inline-block; display: inline-block;
section.staff { section.staff {
margin-top: 30px; margin-top: ($baseline*1.5);
font-size: 80%; font-size: 80%;
} }
} }
...@@ -33,7 +33,7 @@ iframe[seamless]{ ...@@ -33,7 +33,7 @@ iframe[seamless]{
div.problem-progress { div.problem-progress {
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: ($baseline/4);
color: #666; color: #666;
font-weight: 100; font-weight: 100;
font-size: em(16); font-size: em(16);
...@@ -55,7 +55,7 @@ div.problem { ...@@ -55,7 +55,7 @@ div.problem {
} }
.choicegroup { .choicegroup {
@include clearfix; @include clearfix();
min-width: 100px; min-width: 100px;
width: auto !important; width: auto !important;
width: 100px; width: 100px;
...@@ -63,18 +63,18 @@ div.problem { ...@@ -63,18 +63,18 @@ div.problem {
label { label {
@include float(left); @include float(left);
clear: both; clear: both;
margin-bottom: 5px; margin-bottom: ($baseline/4);
&.choicegroup_correct { &.choicegroup_correct {
&:after { &:after {
margin-left: 15px; margin-left: ($baseline*0.75);
content: url('../images/correct-icon.png'); content: url('../images/correct-icon.png');
} }
} }
&.choicegroup_incorrect { &.choicegroup_incorrect {
&:after { &:after {
margin-left: 15px; margin-left: ($baseline*0.75);
content: url('../images/incorrect-icon.png'); content: url('../images/incorrect-icon.png');
} }
} }
...@@ -123,7 +123,7 @@ div.problem { ...@@ -123,7 +123,7 @@ div.problem {
display: block; display: block;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 9px 15px $baseline; padding: 9px 15px $baseline;
background: #fff; background: $white;
position: relative; position: relative;
box-shadow: inset 0 0 0 1px #eee; box-shadow: inset 0 0 0 1px #eee;
border-radius: 3px; border-radius: 3px;
...@@ -138,9 +138,9 @@ div.problem { ...@@ -138,9 +138,9 @@ div.problem {
> span { > span {
margin: $baseline 0; margin: $baseline 0;
display: block; display: block;
border: 1px solid #000; border: 1px solid $black;
padding: 9px 15px $baseline; padding: 9px 15px $baseline;
background: #fff; background: $white;
position: relative; position: relative;
box-shadow: inset 0 0 0 1px #eee; box-shadow: inset 0 0 0 1px #eee;
border-radius: 3px; border-radius: 3px;
...@@ -214,7 +214,7 @@ div.problem { ...@@ -214,7 +214,7 @@ div.problem {
> span { > span {
display: block; display: block;
margin-bottom: lh(.5); margin-bottom: lh(0.5);
} }
p.answer { p.answer {
...@@ -246,7 +246,7 @@ div.problem { ...@@ -246,7 +246,7 @@ div.problem {
img.loading { img.loading {
display: inline-block; display: inline-block;
padding-left: 10px; padding-left: ($baseline/2);
} }
span { span {
...@@ -317,11 +317,11 @@ div.problem { ...@@ -317,11 +317,11 @@ div.problem {
.grader-status { .grader-status {
@include clearfix; @include clearfix();
margin: $baseline/2 0; margin: $baseline/2 0;
padding: $baseline/2; padding: $baseline/2;
border-radius: 5px; border-radius: 5px;
background: #F6F6F6; background: $gray-l6;
span { span {
display: block; display: block;
...@@ -350,7 +350,7 @@ div.problem { ...@@ -350,7 +350,7 @@ div.problem {
padding: $baseline 0 0 0; padding: $baseline 0 0 0;
border: 0; border: 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
background: #fff; background: $white;
p.debug { p.debug {
display: none; display: none;
...@@ -364,7 +364,7 @@ div.problem { ...@@ -364,7 +364,7 @@ div.problem {
} }
.evaluation { .evaluation {
p { p {
margin-bottom: 4px; margin-bottom: ($baseline/5);
} }
} }
...@@ -393,7 +393,7 @@ div.problem { ...@@ -393,7 +393,7 @@ div.problem {
margin-left: 50px; margin-left: 50px;
&:first-child { &:first-child {
margin-left: 0px; margin-left: 0;
} }
label { label {
...@@ -449,7 +449,7 @@ div.problem { ...@@ -449,7 +449,7 @@ div.problem {
} }
li { li {
margin-bottom: lh(.5); margin-bottom: lh(0.5);
line-height: 1.4em; line-height: 1.4em;
&:last-child { &:last-child {
...@@ -513,7 +513,7 @@ div.problem { ...@@ -513,7 +513,7 @@ div.problem {
padding: 0px 5px; padding: 0px 5px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
border-radius: 3px; border-radius: 3px;
background-color: #f8f8f8; background-color: $gray-l6;
white-space: nowrap; white-space: nowrap;
font-size: .9em; font-size: .9em;
} }
...@@ -521,9 +521,9 @@ div.problem { ...@@ -521,9 +521,9 @@ div.problem {
pre { pre {
overflow: auto; overflow: auto;
padding: 6px $baseline/2; padding: 6px $baseline/2;
border: 1px solid #ccc; border: 1px solid $gray-l3;
border-radius: 3px; border-radius: 3px;
background-color: #f8f8f8; background-color: $gray-l6;
font-size: .9em; font-size: .9em;
line-height: 1.4; line-height: 1.4;
...@@ -562,12 +562,12 @@ div.problem { ...@@ -562,12 +562,12 @@ div.problem {
resize: none; resize: none;
&.CodeMirror-cursor { &.CodeMirror-cursor {
@extend %ui-depth1;
position: absolute; position: absolute;
z-index: 10;
visibility: hidden; visibility: hidden;
width: 0; width: 0;
border-right: none; border-right: none;
border-left: 1px solid black; border-left: 1px solid $black;
} }
} }
} }
...@@ -602,7 +602,7 @@ div.problem { ...@@ -602,7 +602,7 @@ div.problem {
display: block; display: block;
margin: lh() 0; margin: lh() 0;
padding: lh(); padding: lh();
border: 1px solid #ccc; border: 1px solid $gray-l3;
} }
div.action { div.action {
...@@ -631,7 +631,7 @@ div.problem { ...@@ -631,7 +631,7 @@ div.problem {
// border: 1px solid #ddd; // border: 1px solid #ddd;
// border-radius: 3px; // border-radius: 3px;
// padding: 8px 12px; // padding: 8px 12px;
// margin-top: 10px; // margin-top: ($baseline/2);
display: inline-block; display: inline-block;
margin-top: 8px; margin-top: 8px;
@include margin-left($baseline/2); @include margin-left($baseline/2);
...@@ -711,13 +711,13 @@ div.problem { ...@@ -711,13 +711,13 @@ div.problem {
} }
.hints { .hints {
border: 1px solid #ccc; border: 1px solid $gray-l3;
h3 { h3 {
padding: 9px; padding: 9px;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
background: #eee; background: #eee;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 $white;
font-weight: bold; font-weight: bold;
font-size: em(16); font-size: em(16);
} }
...@@ -737,8 +737,8 @@ div.problem { ...@@ -737,8 +737,8 @@ div.problem {
a { a {
display: block; display: block;
padding: 9px; padding: 9px;
background: #f6f6f6; background: $gray-l6;
box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px $white;
} }
} }
...@@ -765,11 +765,11 @@ div.problem { ...@@ -765,11 +765,11 @@ div.problem {
> section { > section {
position: relative; position: relative;
margin-bottom: $baseline/2; margin-bottom: ($baseline/2);
padding: 9px 9px $baseline; padding: 9px 9px $baseline;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
box-shadow: inset 0 0 0 1px #eee; box-shadow: inset 0 0 0 1px #eee;
p:last-of-type { p:last-of-type {
...@@ -781,20 +781,20 @@ div.problem { ...@@ -781,20 +781,20 @@ div.problem {
} }
a.full { a.full {
@include position(absolute, 0 0px 1px 0px); @include position(absolute, 0 0 1px 0);
@include box-sizing(border-box); @include box-sizing(border-box);
display: block; display: block;
padding: 4px; padding: ($baseline/5);
background: #f3f3f3; background: $gray-l4;
text-align: right; text-align: right;
font-size: 1em; font-size: 1em;
&.full-top { &.full-top {
@include position(absolute, 1px 0px auto 0px); @include position(absolute, 1px 0 auto 0);
} }
&.full-bottom { &.full-bottom {
@include position(absolute, auto 0px 1px 0px); @include position(absolute, auto 0 1px 0);
} }
} }
} }
...@@ -822,8 +822,8 @@ div.problem { ...@@ -822,8 +822,8 @@ div.problem {
padding: 0; padding: 0;
.result-errors { .result-errors {
margin: $baseline/4; margin: ($baseline/4);
padding: $baseline/2 $baseline/2 $baseline/2 $baseline*2; padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2);
background: url('../images/incorrect-icon.png') center left no-repeat; background: url('../images/incorrect-icon.png') center left no-repeat;
li { li {
...@@ -833,7 +833,7 @@ div.problem { ...@@ -833,7 +833,7 @@ div.problem {
.result-output { .result-output {
margin: $baseline/4; margin: $baseline/4;
padding: $baseline 0 15px 50px; padding: $baseline 0 ($baseline*0.75) 50px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-left: $baseline solid #fafafa; border-left: $baseline solid #fafafa;
...@@ -872,7 +872,7 @@ div.problem { ...@@ -872,7 +872,7 @@ div.problem {
} }
.markup-text{ .markup-text{
margin: 5px; margin: ($baseline/4);
padding: $baseline 0 15px 50px; padding: $baseline 0 15px 50px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-left: 20px solid #fafafa; border-left: 20px solid #fafafa;
...@@ -891,19 +891,19 @@ div.problem { ...@@ -891,19 +891,19 @@ div.problem {
.rubric { .rubric {
tr { tr {
margin: $baseline/2 0; margin: ($baseline/2) 0;
height: 100%; height: 100%;
} }
td { td {
margin: $baseline/2 0; margin: ($baseline/2) 0;
padding: $baseline 0; padding: $baseline 0;
height: 100%; height: 100%;
} }
th { th {
margin: $baseline/4; margin: ($baseline/4);
padding: $baseline/4; padding: ($baseline/4);
} }
label, label,
...@@ -911,12 +911,12 @@ div.problem { ...@@ -911,12 +911,12 @@ div.problem {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 3px; margin: 3px;
padding: 15px; padding: ($baseline*0.75);
min-width: 50px; min-width: 50px;
min-height: 50px; min-height: 50px;
width: 150px; width: 150px;
height: 100%; height: 100%;
background-color: #ccc; background-color: $gray-l3;
font-size: .9em; font-size: .9em;
} }
...@@ -924,7 +924,7 @@ div.problem { ...@@ -924,7 +924,7 @@ div.problem {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: $baseline/2; margin: ($baseline/2);
} }
.selected-grade { .selected-grade {
...@@ -944,12 +944,12 @@ div.problem { ...@@ -944,12 +944,12 @@ div.problem {
.annotation-input { .annotation-input {
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid #ccc; border: 1px solid $gray-l3;
border-radius: 1em; border-radius: 1em;
.annotation-header { .annotation-header {
padding: .5em 1em; padding: .5em 1em;
border-bottom: 1px solid #ccc; border-bottom: 1px solid $gray-l3;
font-weight: bold; font-weight: bold;
} }
...@@ -989,10 +989,10 @@ div.problem { ...@@ -989,10 +989,10 @@ div.problem {
margin: 1em 0 0 0; margin: 1em 0 0 0;
.tag { .tag {
@extend %ui-fake-link;
display: inline-block; display: inline-block;
margin-left: $baseline*2; margin-left: ($baseline*2);
border: 1px solid rgb(102,102,102); border: 1px solid rgb(102,102,102);
cursor: pointer;
&.selected { &.selected {
background-color: $annotation-yellow; background-color: $annotation-yellow;
...@@ -1022,13 +1022,13 @@ div.problem { ...@@ -1022,13 +1022,13 @@ div.problem {
.debug-value { .debug-value {
margin: 1em 0; margin: 1em 0;
padding: 1em; padding: 1em;
border: 1px solid #000; border: 1px solid $black;
background-color: #999; background-color: #999;
color: #fff; color: $white;
input[type="text"] { width: 100%; } input[type="text"] { width: 100%; }
pre { background-color: #CCC; color: #000; } pre { background-color: $gray-l3; color: $black; }
&:before { &:before {
display: block; display: block;
......
common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
width: 21px; width: 21px;
height: 21px; height: 21px;
padding: 0; padding: 0;
margin: 0 5px 0 15px; margin: 0 ($baseline/4) 0 ($baseline*0.75);
border-radius: 22px; border-radius: 22px;
border: 1px solid #a5aaaf; border: 1px solid #a5aaaf;
background: #e5ecf3; background: #e5ecf3;
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
left: 100%; left: 100%;
width: 0; width: 0;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px); @include linear-gradient(left, $shadow-l1, $transparent 4px);
background-color: #fff; background-color: $white;
overflow: hidden; overflow: hidden;
@include transition(width .3s linear 0s); @include transition(width .3s linear 0s);
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
} }
.row { .row {
@include clearfix; @include clearfix();
padding-bottom: 5px !important; padding-bottom: 5px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;
......
common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1);
border-radius: 2px; border-radius: 2px;
display: none; display: none;
margin-top: 20px; margin-top: $baseline;
padding: (15px); padding: ($baseline*0.75);
background: rgb(253, 248, 235); background: rgb(253, 248, 235);
} }
...@@ -14,23 +14,23 @@ ...@@ -14,23 +14,23 @@
} }
.vote { .vote {
padding-top: 0px !important; padding-top: 0 !important;
padding-bottom: 0px !important; padding-bottom: 0 !important;
} }
.wizard-view { .wizard-view {
float: left; float: left;
width: 790px; width: 790px;
margin-right: 10px; margin-right: ($baseline/2);
} }
.wizard-container { .wizard-container {
width: 3000px; width: 3000px;
-webkit-transition:all 1.0s ease-in-out; -webkit-transition:all $tmg-s1 ease-in-out;
-moz-transition:all 1.0s ease-in-out; -moz-transition:all $tmg-s1 ease-in-out;
-o-transition:all 1.0s ease-in-out; -o-transition:all $tmg-s1 ease-in-out;
transition:all 1.0s ease-in-out; transition:all $tmg-s1 ease-in-out;
} }
.wizard-viewbox { .wizard-viewbox {
......
common/lib/xmodule/xmodule/css/editor/edit.scss
...@@ -7,16 +7,16 @@ ...@@ -7,16 +7,16 @@
} }
.editor-bar { .editor-bar {
position: relative; @include clearfix();
@include linear-gradient(top, #d4dee8, #c9d5e2); @include linear-gradient(top, #d4dee8, #c9d5e2);
padding: 5px; position: relative;
padding: ($baseline/4);
border-bottom-color: #a5aaaf; border-bottom-color: #a5aaaf;
@include clearfix;
a { a {
display: block; display: block;
float: left; float: left;
padding: 3px 10px 7px; padding: 3px ($baseline/2) 7px;
margin-left: 7px; margin-left: 7px;
border-radius: 2px; border-radius: 2px;
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
li { li {
float: left; float: left;
margin-right: 5px; margin-right: ($baseline/4);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
...@@ -46,15 +46,15 @@ ...@@ -46,15 +46,15 @@
padding: 7px 20px 3px; padding: 7px 20px 3px;
border: 1px solid #a5aaaf; border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
@include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06)); @include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3; background-color: #e5ecf3;
font-size: 13px; font-size: 13px;
color: #3c3c3c; color: #3c3c3c;
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05); box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
&.current { &.current {
background: #fff; background: $white;
border-bottom-color: #fff; border-bottom-color: $white;
} }
} }
} }
......
common/lib/xmodule/xmodule/css/foldit/leaderboard.scss
...@@ -5,7 +5,7 @@ section.foldit { ...@@ -5,7 +5,7 @@ section.foldit {
table { table {
border: 1px solid lighten($leaderboard, 10%); border: 1px solid lighten($leaderboard, 10%);
border-collapse: collapse; border-collapse: collapse;
margin-top: 20px; margin-top: $baseline;
} }
th { th {
background: $leaderboard; background: $leaderboard;
...@@ -13,7 +13,7 @@ section.foldit { ...@@ -13,7 +13,7 @@ section.foldit {
} }
td { td {
background: lighten($leaderboard, 3%); background: lighten($leaderboard, 3%);
border-bottom: 1px solid #fff; border-bottom: 1px solid $white;
padding: 8px; padding: 8px;
} }
} }
......
common/lib/xmodule/xmodule/css/html/display.scss
...@@ -14,13 +14,13 @@ h2 { ...@@ -14,13 +14,13 @@ h2 {
color: #646464; color: #646464;
font: normal 1.2em/1.2em $sans-serif; font: normal 1.2em/1.2em $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
text-transform: uppercase; text-transform: uppercase;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
h3, h4, h5, h6 { h3, h4, h5, h6 {
margin: 0 0 10px 0; margin: 0 0 ($baseline/2) 0;
font-weight: 600; font-weight: 600;
} }
...@@ -64,11 +64,11 @@ strong, b { ...@@ -64,11 +64,11 @@ strong, b {
} }
p + p, ul + p, ol + p { p + p, ul + p, ol + p {
margin-top: 20px; margin-top: $baseline;
} }
blockquote { blockquote {
margin: 1em 40px; margin: 1em ($baseline*2);
} }
ol, ul { ol, ul {
...@@ -117,14 +117,14 @@ code { ...@@ -117,14 +117,14 @@ code {
table { table {
width: 100%; width: 100%;
margin: 20px 0; margin: $baseline 0;
border-collapse: collapse; border-collapse: collapse;
font-size: 16px; font-size: 16px;
td, th { td, th {
margin: 20px 0; margin: $baseline 0;
padding: 10px; padding: ($baseline/2);
border: 1px solid #ccc; border: 1px solid $gray-l3;
font-size: 14px; font-size: 14px;
&.cont-justified-left { &.cont-justified-left {
...@@ -154,10 +154,10 @@ th { ...@@ -154,10 +154,10 @@ th {
.wrapper-modal-image { .wrapper-modal-image {
.modal-ui-icon { .modal-ui-icon {
@extend %ui-fake-link;
position: absolute; position: absolute;
display: block; display: block;
padding: 5px 7px; padding: ($baseline/4) 7px;
cursor: pointer;
border-radius: 5px; border-radius: 5px;
opacity: .9; opacity: .9;
background: $white; background: $white;
...@@ -174,9 +174,9 @@ th { ...@@ -174,9 +174,9 @@ th {
} }
.image-link { .image-link {
@extend %ui-fake-link;
position: relative; position: relative;
display: block; display: block;
cursor: pointer;
.action-fullscreen { .action-fullscreen {
display: none; display: none;
...@@ -190,14 +190,14 @@ th { ...@@ -190,14 +190,14 @@ th {
} }
.image-modal { .image-modal {
@extend %ui-fake-link;
@extend %ui-depth5;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
display: none; display: none;
height: 100%; height: 100%;
width: 100%; width: 100%;
@extend %ui-depth5;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
.image-content { .image-content {
...@@ -245,13 +245,13 @@ th { ...@@ -245,13 +245,13 @@ th {
position: relative; position: relative;
&.action-zoom-in { &.action-zoom-in {
margin-right: 5px; margin-right: ($baseline/4);
} }
&.action-zoom-out { &.action-zoom-out {
margin-left: 5px; margin-left: ($baseline/4);
} }
&.is-disabled { &.is-disabled {
opacity: .5; opacity: 0.5;
cursor: default; cursor: default;
} }
} }
......
common/lib/xmodule/xmodule/css/lti/lti.scss
...@@ -4,7 +4,7 @@ h2.problem-header { ...@@ -4,7 +4,7 @@ h2.problem-header {
div.problem-progress { div.problem-progress {
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: ($baseline/4);
color: #666; color: #666;
font-weight: 100; font-weight: 100;
font-size: em(16); font-size: em(16);
...@@ -50,8 +50,8 @@ div.lti { ...@@ -50,8 +50,8 @@ div.lti {
} }
div.problem-feedback { div.problem-feedback {
margin-top: 5px; margin-top: ($baseline/4);
margin-bottom: 5px; margin-bottom: ($baseline/4);
} }
} }
common/lib/xmodule/xmodule/css/poll/display.scss
...@@ -15,13 +15,13 @@ div.poll_question { ...@@ -15,13 +15,13 @@ div.poll_question {
h3 { h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
color: #fe57a1; color: #fe57a1;
font-size: 1.9em; font-size: 1.9em;
&.problem-header { &.problem-header {
div.staff { div.staff {
margin-top: 30px; margin-top: ($baseline*1.5);
font-size: 80%; font-size: 80%;
} }
} }
...@@ -39,7 +39,7 @@ div.poll_question { ...@@ -39,7 +39,7 @@ div.poll_question {
} }
.poll_answer { .poll_answer {
margin-bottom: 20px; margin-bottom: $baseline;
&.short { &.short {
clear: both; clear: both;
...@@ -58,6 +58,7 @@ div.poll_question { ...@@ -58,6 +58,7 @@ div.poll_question {
} }
.button { .button {
@extend %ui-fake-link;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-webkit-border-image: none; -webkit-border-image: none;
...@@ -89,7 +90,6 @@ div.poll_question { ...@@ -89,7 +90,6 @@ div.poll_question {
box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset; box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
box-sizing: border-box; box-sizing: border-box;
color: rgb(51, 51, 51); color: rgb(51, 51, 51);
cursor: pointer;
/* display: inline-block; */ /* display: inline-block; */
display: inline; display: inline;
...@@ -103,8 +103,8 @@ div.poll_question { ...@@ -103,8 +103,8 @@ div.poll_question {
letter-spacing: normal; letter-spacing: normal;
line-height: 25.59375px; line-height: 25.59375px;
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
margin: 0px; margin: 0;
padding: 0px; padding: 0px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
...@@ -135,15 +135,15 @@ div.poll_question { ...@@ -135,15 +135,15 @@ div.poll_question {
} }
.text { .text {
@extend %ui-fake-link;
display: inline; display: inline;
float: left; float: left;
width: 80%; width: 80%;
text-align: left; text-align: left;
min-height: 30px; min-height: 30px;
margin-left: 20px; margin-left: $baseline;
height: auto; height: auto;
margin-bottom: 20px; margin-bottom: $baseline;
cursor: pointer;
&.short { &.short {
width: 100px; width: 100px;
...@@ -153,7 +153,7 @@ div.poll_question { ...@@ -153,7 +153,7 @@ div.poll_question {
.stats { .stats {
min-height: 40px; min-height: 40px;
margin-top: 20px; margin-top: $baseline;
clear: both; clear: both;
&.short { &.short {
...@@ -170,7 +170,7 @@ div.poll_question { ...@@ -170,7 +170,7 @@ div.poll_question {
border: 1px solid black; border: 1px solid black;
display: inline; display: inline;
float: left; float: left;
margin-right: 10px; margin-right: ($baseline/2);
&.short { &.short {
width: 65%; width: 65%;
......
common/lib/xmodule/xmodule/css/problem/edit.scss
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
left: 100%; left: 100%;
width: 0; width: 0;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px); @include linear-gradient(left, $shadow-l1, $transparent 4px);
background-color: #fff; background-color: $white;
overflow: hidden; overflow: hidden;
@include transition(width .3s linear 0s); @include transition(width .3s linear 0s);
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
} }
.row { .row {
@include clearfix; @include clearfix();
padding-bottom: 5px !important; padding-bottom: 5px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;
......
common/lib/xmodule/xmodule/css/sequence/display.scss
...@@ -36,42 +36,42 @@ nav.sequence-nav { ...@@ -36,42 +36,42 @@ nav.sequence-nav {
// TODO (cpennington): This doesn't work anymore. XModules aren't able to // TODO (cpennington): This doesn't work anymore. XModules aren't able to
// import from external sources. // import from external sources.
@extend .topbar; @extend .topbar;
margin: -4px 0 30px; margin: -4px 0 ($baseline*1.5);
position: relative; position: relative;
border-bottom: none; border-bottom: none;
.left-shadow { .left-shadow {
@extend %ui-depth4;
@include linear-gradient(left, $shadow, $transparent);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9999;
width: 20px; width: 20px;
height: 46px; height: 46px;
@include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
background-color: transparent; background-color: transparent;
pointer-events: none; pointer-events: none;
} }
.right-shadow { .right-shadow {
@extend %ui-depth4;
@include linear-gradient(right, $shadow, $transparent);
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 9999;
width: 20px; width: 20px;
height: 46px; height: 46px;
@include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
background-color: transparent; background-color: transparent;
pointer-events: none; pointer-events: none;
} }
.sequence-list-wrapper { .sequence-list-wrapper {
@extend %ui-depth2;
@include linear-gradient(top, #ddd, #eee);
position: relative; position: relative;
z-index: 99; border: 1px solid $gray-l3;
border: 1px solid #ccc;
height: 44px; height: 44px;
margin: 0 30px; margin: 0 ($baseline*1.5);
@include linear-gradient(top, #ddd, #eee); box-shadow: 0 1px 3px $shadow-l1 inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
} }
ol { ol {
...@@ -82,7 +82,7 @@ nav.sequence-nav { ...@@ -82,7 +82,7 @@ nav.sequence-nav {
display: table; display: table;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0 10px; padding: 0 ($baseline/2);
width: 100%; width: 100%;
a { a {
...@@ -94,31 +94,31 @@ nav.sequence-nav { ...@@ -94,31 +94,31 @@ nav.sequence-nav {
min-width: 20px; min-width: 20px;
a { a {
@extend %ui-fake-link;
@include transition(none);
width: 100%; width: 100%;
height: 42px; height: 42px;
margin: 0; margin: 0;
background-position: center 14px; background-position: center 14px;
background-repeat: no-repeat; background-repeat: no-repeat;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer;
display: block; display: block;
padding: 0; padding: 0;
position: relative; position: relative;
@include transition(none);
/* &:focus { /* &:focus {
outline: 0; outline: 0;
} }
*/ */
&:hover, &:focus { &:hover, &:focus {
background-color: #fff; background-color: $white;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center 14px; background-position: center 14px;
} }
&.active { &.active {
background-color: #fff; @extend %ui-depth1;
z-index: 9; background-color: $white;
// &:after { // &:after {
// content: '▲'; // content: '▲';
...@@ -132,7 +132,7 @@ nav.sequence-nav { ...@@ -132,7 +132,7 @@ nav.sequence-nav {
// } // }
&:hover, &:focus { &:hover, &:focus {
background-color: #fff; background-color: $white;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center 14px; background-position: center 14px;
} }
...@@ -197,19 +197,19 @@ nav.sequence-nav { ...@@ -197,19 +197,19 @@ nav.sequence-nav {
} }
p { p {
@extend %ui-depth2;
background: #333; background: #333;
color: #fff; color: $white;
font-family: $sans-serif; font-family: $sans-serif;
line-height: lh(); line-height: lh();
right: 0px; right: 0;
opacity: 0.0; opacity: 0.0;
padding: 6px; padding: 6px;
position: absolute; position: absolute;
top: 48px; top: 48px;
text-shadow: 0 -1px 0 #000; text-shadow: 0 -1px 0 $black;
@include transition(all .1s $ease-in-out-quart 0s); @include transition(all .1s $ease-in-out-quart 0s);
white-space: pre; white-space: pre;
z-index: 99;
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
...@@ -238,7 +238,7 @@ nav.sequence-nav { ...@@ -238,7 +238,7 @@ nav.sequence-nav {
&:hover, &:focus { &:hover, &:focus {
p { p {
display: block; display: block;
margin-top: 4px; margin-top: ($baseline/5);
opacity: 1.0; opacity: 1.0;
visibility: visible; visibility: visible;
} }
...@@ -263,7 +263,7 @@ nav.sequence-nav { ...@@ -263,7 +263,7 @@ nav.sequence-nav {
margin-bottom: 0; margin-bottom: 0;
height: 44px; height: 44px;
width: 70px; width: 70px;
border: 1px solid #ccc; border: 1px solid $gray-l3;
@include linear-gradient(top, #eee, #ddd); @include linear-gradient(top, #eee, #ddd);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
z-index: 1; z-index: 1;
...@@ -357,7 +357,7 @@ nav.sequence-bottom { ...@@ -357,7 +357,7 @@ nav.sequence-bottom {
@include float(left); @include float(left);
width: 50px; width: 50px;
height: 44px; height: 44px;
border: 1px solid #ccc; border: 1px solid $gray-l3;
@include linear-gradient(top, #eee, #ddd); @include linear-gradient(top, #eee, #ddd);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
...@@ -369,7 +369,7 @@ nav.sequence-bottom { ...@@ -369,7 +369,7 @@ nav.sequence-bottom {
background-repeat: no-repeat; background-repeat: no-repeat;
border: none; border: none;
display: block; display: block;
padding: lh(.5) 4px; padding: lh(0.5) 4px;
text-indent: -9999px; text-indent: -9999px;
overflow: hidden; overflow: hidden;
@include transition(all .2s $ease-in-out-quad 0s); @include transition(all .2s $ease-in-out-quad 0s);
......
common/lib/xmodule/xmodule/css/video/accessible_menu.scss
...@@ -22,22 +22,22 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -22,22 +22,22 @@ $a11y--blue-s1: saturate($blue,15%);
} }
.a11y-menu-list { .a11y-menu-list {
@extend %ui-depth1;
top: 100%; top: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: none; display: none;
position: absolute; position: absolute;
z-index: 10;
list-style: none; list-style: none;
background-color: $white; background-color: $white;
border: 1px solid #eee; border: 1px solid #eee;
li { li {
@extend %ui-fake-link;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
color: $white; color: $white;
cursor: pointer;
a { a {
display: block; display: block;
...@@ -90,12 +90,12 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -90,12 +90,12 @@ $a11y--blue-s1: saturate($blue,15%);
} }
> a { > a {
@include transition(all 0.25s ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(12); @include font-size(12);
display: block; display: block;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
background-color: $very-light-text; background-color: $very-light-text;
padding: ($baseline*.75 $baseline*1.25 $baseline*.75 $baseline*.75); padding: ($baseline*0.75) ($baseline*1.25) ($baseline*0.75) ($baseline*0.75);
color: $a11y--gray-l2; color: $a11y--gray-l2;
min-width: 1.5em; min-width: 1.5em;
line-height: 14px; line-height: 14px;
...@@ -107,7 +107,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -107,7 +107,7 @@ $a11y--blue-s1: saturate($blue,15%);
@extend %use-font-awesome; @extend %use-font-awesome;
content: "\f0d7"; content: "\f0d7";
position: absolute; position: absolute;
right: ($baseline*.5); right: ($baseline*0.5);
top: 33%; top: 33%;
color: $lighter-base-font-color; color: $lighter-base-font-color;
} }
...@@ -122,7 +122,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -122,7 +122,7 @@ $a11y--blue-s1: saturate($blue,15%);
a { a {
border: 0; border: 0;
display: block; display: block;
padding: lh(.5); padding: lh(0.5);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -134,8 +134,9 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -134,8 +134,9 @@ $a11y--blue-s1: saturate($blue,15%);
.contextmenu, .submenu { .contextmenu, .submenu {
@extend %ui-depth5;
border: 1px solid #333; border: 1px solid #333;
background: #fff; background: $white;
color: #333; color: #333;
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -143,7 +144,6 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -143,7 +144,6 @@ $a11y--blue-s1: saturate($blue,15%);
position: absolute; position: absolute;
top: 0; top: 0;
display: none; display: none;
z-index: 999999;
outline: none; outline: none;
cursor: default; cursor: default;
white-space: nowrap; white-space: nowrap;
...@@ -153,8 +153,8 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -153,8 +153,8 @@ $a11y--blue-s1: saturate($blue,15%);
} }
.menu-item, .submenu-item { .menu-item, .submenu-item {
border-top: 1px solid #ccc; border-top: 1px solid $gray-l3;
padding: 5px 10px; padding: ($baseline/4) ($baseline/2);
outline: none; outline: none;
& > span { & > span {
...@@ -167,17 +167,17 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -167,17 +167,17 @@ $a11y--blue-s1: saturate($blue,15%);
&:focus { &:focus {
background: #333; background: #333;
color: #fff; color: $white;
& > span { & > span {
color: #fff; color: $white;
} }
} }
} }
.submenu-item { .submenu-item {
position: relative; position: relative;
padding: 5px 20px 5px 10px; padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
&:after { &:after {
content: '\25B6'; content: '\25B6';
...@@ -193,10 +193,10 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -193,10 +193,10 @@ $a11y--blue-s1: saturate($blue,15%);
&.is-opened { &.is-opened {
background: #333; background: #333;
color: #fff; color: $white;
& > span { & > span {
color: #fff; color: $white;
} }
& > .submenu { & > .submenu {
...@@ -211,16 +211,16 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -211,16 +211,16 @@ $a11y--blue-s1: saturate($blue,15%);
.is-disabled { .is-disabled {
pointer-events: none; pointer-events: none;
color: #ccc; color: $gray-l3;
} }
} }
.overlay { .overlay {
@extend %ui-depth5;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 900000;
background-color: transparent; background-color: transparent;
} }
common/lib/xmodule/xmodule/css/word_cloud/display.scss
.input-cloud { .input-cloud {
margin: 5px; margin: ($baseline/4);
} }
.result_cloud_section { .result_cloud_section {
......
common/static/sass/_mixins-inherited.scss
// studio - utilities - INHERITED mixins and extends // studio - utilities - INHERITED mixins and extends
// NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future. // NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future.
// They are still referenced when styliing current interface elements and as such need to be preserved for the time being. // They are still referenced when styling current interface elements and as such need to be preserved for the time being.
// talbs: we need to slowly ween ourselves off of these // talbs: we need to slowly ween ourselves off of these
// ==================== // ====================
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
@include transition(background-color 0.15s, box-shadow 0.15s); @include transition(background-color 0.15s, box-shadow 0.15s);
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 $transparent;
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline ($baseline/4); padding: ($baseline/5) $baseline ($baseline/4);
...@@ -320,11 +320,11 @@ ...@@ -320,11 +320,11 @@
h5 { h5 {
@extend %t-strong; @extend %t-strong;
margin-bottom: 8px; margin-bottom: 8px;
color: #fff; color: $white;
} }
.row { .row {
margin-bottom: 10px; margin-bottom: ($baseline/2);
padding: 0; padding: 0;
border: none; border: none;
} }
...@@ -345,7 +345,7 @@ ...@@ -345,7 +345,7 @@
// sunsetted mixins // 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));
box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset; box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
background-color: rgba(255, 255, 255, .3); background-color: rgba(255, 255, 255, .3);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
} }
common/static/sass/_mixins.scss
// studio - utilities - mixins and extends // studio - utilities - mixins and extends
// ==================== // ====================
// mixins - font sizing // Table of Contents
// * +Font Sizing - Mixin
// * +Line Height - Mixin
// * +Sizing - Mixin
// * +Square - Mixin
// * +Placeholder Styling - Mixin
// * +Flex Support - Mixin
// * +Flex Polyfill - Extends
// * +UI - Wrapper - Extends
// * +UI - Window - Extend
// * +UI - Visual Link - Extend
// * +UI - Functional Disable - Extend
// * +UI - Visual Link - Extend
// * +UI - Depth Levels - Extends
// * +UI - Clear Children - Extends
// * +UI - Buttons - Extends
// * +UI - Well Archetype - Extends
// * +Content - No List - Extends
// * +Content - Hidden Image Text - Extend
// * +Content - Screenreader Text - Extend
// * +Content - Text Wrap - Extend
// * +Content - Text Truncate - Extend
// +Font Sizing - Mixin
// ====================
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem; font-size: ($sizeValue/10) + rem;
} }
// mixins - line height // +Line Height - Mixin
// ====================
@mixin line-height($fontSize: auto){ @mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px; line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem; line-height: (($fontSize/10)*1.48) + rem;
} }
// ==================== // +Sizing - Mixin
// ====================
// mixins - sizing
@mixin size($width: $baseline, $height: $baseline) { @mixin size($width: $baseline, $height: $baseline) {
height: $height; height: $height;
width: $width; width: $width;
} }
// mixins - sizing // +Square - Mixin
// ====================
@mixin square($size: $baseline) { @mixin square($size: $baseline) {
@include size($size); @include size($size);
} }
// ==================== // +Placeholder Styling - Mixin
// ====================
// mixins - placeholder styling
@mixin placeholder($color) { @mixin placeholder($color) {
:-moz-placeholder { :-moz-placeholder {
color: $color; color: $color;
...@@ -41,9 +65,8 @@ ...@@ -41,9 +65,8 @@
} }
} }
// ==================== // +Flex Support - Mixin
// ====================
// mixins - flex support
@mixin ui-flexbox() { @mixin ui-flexbox() {
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
...@@ -52,7 +75,10 @@ ...@@ -52,7 +75,10 @@
display: flex; display: flex;
} }
// extends - justify-content right for display:flex alignment in older browsers // +Flex PolyFill - Extends
// ====================
// justify-content right for display:flex alignment in older browsers
%ui-justify-right-flex { %ui-justify-right-flex {
-webkit-box-pack: flex-end; -webkit-box-pack: flex-end;
-moz-box-pack: flex-end; -moz-box-pack: flex-end;
...@@ -61,7 +87,7 @@ ...@@ -61,7 +87,7 @@
justify-content: flex-end; justify-content: flex-end;
} }
// extends - justify-content left for display:flex alignment in older browsers // justify-content left for display:flex alignment in older browsers
%ui-justify-left-flex { %ui-justify-left-flex {
-webkit-box-pack: flex-start; -webkit-box-pack: flex-start;
-moz-box-pack: flex-start; -moz-box-pack: flex-start;
...@@ -70,7 +96,7 @@ ...@@ -70,7 +96,7 @@
justify-content: flex-start; justify-content: flex-start;
} }
// extends - align items center for display:flex alignment in older browsers // align items center for display:flex alignment in older browsers
%ui-align-center-flex { %ui-align-center-flex {
-webkit-flex-align: center; -webkit-flex-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -78,9 +104,10 @@ ...@@ -78,9 +104,10 @@
align-items: center; align-items: center;
} }
// ====================
// extends - UI - used for page/view-level wrappers (for centering/grids) // +UI - Wrapper - Extends
// ====================
// used for page/view-level wrappers (for centering/grids)
%ui-wrapper { %ui-wrapper {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -99,9 +126,8 @@ ...@@ -99,9 +126,8 @@
@include float(left); @include float(left);
} }
// +UI - Window - Extends
// ====================
// extends - UI - window
%ui-window { %ui-window {
@include clearfix(); @include clearfix();
border-radius: ($baseline/10); border-radius: ($baseline/10);
...@@ -116,19 +142,22 @@ ...@@ -116,19 +142,22 @@
} }
} }
// extends - UI - visual link // +UI - Visual Link - Extends
// ====================
%ui-fake-link { %ui-fake-link {
cursor: pointer; cursor: pointer;
} }
// extends - UI - functional disable // +UI - Functional Disable - Extends
// ====================
%ui-disabled { %ui-disabled {
pointer-events: none; pointer-events: none;
outline: none; outline: none;
cursor: default; cursor: default;
} }
// extends - UI - depth levels // +UI - Depth Levels - Extends
// ====================
%ui-depth0 { z-index: 0; } %ui-depth0 { z-index: 0; }
%ui-depth1 { z-index: 10; } %ui-depth1 { z-index: 10; }
%ui-depth2 { z-index: 100; } %ui-depth2 { z-index: 100; }
...@@ -137,7 +166,9 @@ ...@@ -137,7 +166,9 @@
%ui-depth5 { z-index: 100000; } %ui-depth5 { z-index: 100000; }
// extends - UI - utility - nth-type style clearing // +UI - Clear Children - Extends
// ====================
// extends - UI - utility - first child clearing
%wipe-first-child { %wipe-first-child {
&:first-child { &:first-child {
...@@ -147,7 +178,7 @@ ...@@ -147,7 +178,7 @@
} }
} }
// extends - UI - utility - nth-type style clearing // extends - UI - utility - last child clearing
%wipe-last-child { %wipe-last-child {
&:last-child { &:last-child {
...@@ -157,10 +188,11 @@ ...@@ -157,10 +188,11 @@
} }
} }
// extends - UI - buttons // +UI - Buttons - Extends
// ====================
%ui-btn { %ui-btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s, border-color $tmg-f2 ease-in-out 0s, background $tmg-f2 ease-in-out 0s, box-shadow $tmg-f2 ease-in-out 0s);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
...@@ -295,7 +327,8 @@ ...@@ -295,7 +327,8 @@
} }
} }
// extends - UI archetypes - well // +UI - Well Archetype - Extends
// ====================
%ui-well { %ui-well {
box-shadow: inset 0 1px 2px 1px $shadow; box-shadow: inset 0 1px 2px 1px $shadow;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
...@@ -343,9 +376,9 @@ ...@@ -343,9 +376,9 @@
display: none; display: none;
} }
// ==================== // +Content - No List - Extends
// ====================
// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases // removes list styling/spacing when using uls, ols for navigation and less content-centric cases
%cont-no-list { %cont-no-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
...@@ -358,14 +391,17 @@ ...@@ -358,14 +391,17 @@
} }
} }
// extends - content - image-replacement hidden text // +Content - Hidden Image Text - Extend
// ====================
// image-replacement hidden text
%cont-text-hide { %cont-text-hide {
text-indent: 100%; text-indent: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
// extends - content - hidden elems - screenreaders // +Content - Screenreader Text - Extend
// ====================
%cont-text-sr { %cont-text-sr {
border: 0; border: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
...@@ -377,12 +413,14 @@ ...@@ -377,12 +413,14 @@
width: 1px; width: 1px;
} }
// extends - content - wrapping // +Content - Text Wrap - Extend
// ====================
%cont-text-wrap { %cont-text-wrap {
word-wrap: break-word; word-wrap: break-word;
} }
// extends - content - text overflow by ellipsis // +Content - Text Truncate - Extend
// ====================
%cont-truncated { %cont-truncated {
@include box-sizing(border-box); @include box-sizing(border-box);
overflow: hidden; overflow: hidden;
......
common/static/sass/neat/functions/_private.scss
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
// Generates a striped background // Generates a striped background
@function gradient-stops($grid-columns, $color: $visual-grid-color) { @function gradient-stops($grid-columns, $color: $visual-grid-color) {
$transparent: rgba(0,0,0,0); $transparent: $transparent;
$column-width: flex-grid(1, $grid-columns); $column-width: flex-grid(1, $grid-columns);
$gutter-width: flex-gutter($grid-columns); $gutter-width: flex-gutter($grid-columns);
......
common/static/sass/neat/grid/_outer-container.scss
@mixin outer-container { @mixin outer-container {
@include clearfix; @include clearfix();
max-width: $max-width; max-width: $max-width;
margin: { margin: {
left: auto; left: auto;
......
common/static/sass/neat/grid/_visual-grid.scss
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
} }
@else if $visual-grid-index == front { @else if $visual-grid-index == front {
z-index: 9999; z-index: 9999;
} }
@each $breakpoint in $visual-grid-breakpoints { @each $breakpoint in $visual-grid-breakpoints {
......
lms/static/sass/_news.scss
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
.notifications { .notifications {
@include news-font; @include news-font;
font-size: 0.9em; font-size: 0.9em;
padding-left: 20px; padding-left: $baseline;
padding-top: 20px; padding-top: $baseline;
padding-bottom: 20px; padding-bottom: $baseline;
.notification { .notification {
@include news-font; @include news-font;
margin-top: 15px; margin-top: ($baseline*0.75);
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
a { a {
@include news-font; @include news-font;
......
lms/static/sass/_shame.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
// extends btn // extends btn
%m-btn { %m-btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out); @include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
display: block; display: block;
.track { .track {
@include transition(all 0.25s ease-in-out); @include transition(all $tmg-f2 ease-in-out);
color: $white; color: $white;
display: block; display: block;
font-size: 13px; font-size: 13px;
......
lms/static/sass/base/_base.scss
...@@ -21,14 +21,14 @@ body { ...@@ -21,14 +21,14 @@ body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $base-font-color; color: $base-font-color;
font: normal 1.2em/1.2em $serif; font: normal 1.2em/1.2em $serif;
margin: 0px; margin: 0;
} }
h1 { h1 {
color: $base-font-color; color: $base-font-color;
font: normal 2em/1.4em $sans-serif; font: normal 2em/1.4em $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
text-align: center; text-align: center;
//text-transform: uppercase; //text-transform: uppercase;
} }
...@@ -37,19 +37,19 @@ h2 { ...@@ -37,19 +37,19 @@ h2 {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2em/1.2em $serif; font: normal 1.2em/1.2em $serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 15px; margin-bottom: ($baseline*0.75);
text-transform: uppercase; text-transform: uppercase;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
p + h2, ul + h2, ol + h2 { p + h2, ul + h2, ol + h2 {
margin-top: 40px; margin-top: ($baseline*2);
} }
p { p {
color: $base-font-color; color: $base-font-color;
font: normal 1em/1.6em $serif; font: normal 1em/1.6em $serif;
margin: 0px; margin: 0;
} }
span { span {
...@@ -72,7 +72,7 @@ span { ...@@ -72,7 +72,7 @@ span {
} }
p + p, ul + p, ol + p { p + p, ul + p, ol + p {
margin-top: 20px; margin-top: $baseline;
} }
p { p {
...@@ -122,10 +122,10 @@ a:focus { ...@@ -122,10 +122,10 @@ a:focus {
} }
.container { .container {
@include clearfix; @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 auto 0; margin: 0 auto 0;
padding: 0px 30px; padding: 0 ($baseline*1.5);
max-width: grid-width(12); max-width: grid-width(12);
min-width: 760px; min-width: 760px;
width: flex-grid(12); width: flex-grid(12);
...@@ -137,10 +137,10 @@ span.edx { ...@@ -137,10 +137,10 @@ span.edx {
} }
.static-container { .static-container {
@include clearfix; @include clearfix();
margin: 0 auto 0; margin: 0 auto 0;
max-width: 1200px; max-width: 1200px;
padding: 60px 0px 120px; padding: ($baseline*3) 0 ($baseline*6);
width: flex-grid(12); width: flex-grid(12);
.inner-wrapper { .inner-wrapper {
...@@ -154,24 +154,24 @@ span.edx { ...@@ -154,24 +154,24 @@ span.edx {
li { li {
color: $base-font-color; color: $base-font-color;
font: normal 1em/1.4em $serif; font: normal 1em/1.4em $serif;
margin: 0px; margin: 0;
} }
} }
h1 { h1 {
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
} }
h1 + hr { h1 + hr {
margin-bottom: 60px; margin-bottom: ($baseline*3);
} }
p + h2, ul + h2, ol + h2 { p + h2, ul + h2, ol + h2 {
margin-top: 40px; margin-top: ($baseline*2);
} }
ul + p, ol + p { ul + p, ol + p {
margin-top: 20px; margin-top: $baseline;
} }
} }
...@@ -180,7 +180,7 @@ span.edx { ...@@ -180,7 +180,7 @@ span.edx {
left: 50%; left: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left: -10px; margin-left: -($baseline/2);
background: url(../images/spinner.gif) no-repeat; background: url(../images/spinner.gif) no-repeat;
} }
...@@ -193,8 +193,8 @@ mark { ...@@ -193,8 +193,8 @@ mark {
.site-status { .site-status {
display: none; display: none;
padding: 10px; padding: ($baseline/2);
@include linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .0)); @include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0));
background-color: $site-status-color; background-color: $site-status-color;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset; box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
font-size: 14px; font-size: 14px;
...@@ -206,7 +206,7 @@ mark { ...@@ -206,7 +206,7 @@ mark {
display: block; display: block;
width: 27px; width: 27px;
height: 24px; height: 24px;
margin-right: 15px; margin-right: ($baseline*0.75);
background: url(../images/large-white-error-icon.png) no-repeat; background: url(../images/large-white-error-icon.png) no-repeat;
} }
...@@ -218,7 +218,7 @@ mark { ...@@ -218,7 +218,7 @@ mark {
p { p {
line-height: 1.3; line-height: 1.3;
color: #fff; color: $white;
} }
} }
...@@ -230,7 +230,7 @@ mark { ...@@ -230,7 +230,7 @@ mark {
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: #f4f4e0; background: #f4f4e0;
color: #3c3c3c; color: #3c3c3c;
padding: 5px 20px 8px; padding: ($baseline/4) $baseline 8px;
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
...@@ -242,17 +242,17 @@ mark { ...@@ -242,17 +242,17 @@ mark {
.help-tab { .help-tab {
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
@include transform-origin(0 0); @include transform-origin(0 0);
@extend %ui-depth2;
top: 250px; top: 250px;
left: 0; left: 0;
position: fixed; position: fixed;
z-index: 99;
a:link, a:visited { a:link, a:visited {
cursor: pointer; cursor: pointer;
border: 1px solid #ccc; border: 1px solid $gray-l3;
border-top-style: none; border-top-style: none;
border-radius: 0px 0px 10px 10px; border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(#fff, 0.25); background: transparentize($white, 0.25);
color: transparentize(#333, 0.25); color: transparentize(#333, 0.25);
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
...@@ -260,36 +260,36 @@ mark { ...@@ -260,36 +260,36 @@ mark {
display: inline-block; display: inline-block;
&:hover, &:focus { &:hover, &:focus {
color: #fff; color: $white;
background: $link-color; background: $link-color;
} }
} }
} }
.help-buttons { .help-buttons {
padding: 10px 50px; padding: ($baseline/2) ($baseline*2.5);
a:link, a:visited { a:link, a:visited {
padding: 15px 0px; padding: ($baseline*0.75) 0;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: #fff; background: $white;
text-decoration: none; text-decoration: none;
display: block; display: block;
border: 1px solid #ccc; border: 1px solid $gray-l3;
&#feedback_link_problem { &#feedback_link_problem {
border-bottom-style: none; border-bottom-style: none;
border-radius: 10px 10px 0px 0px; border-radius: ($baseline/2) ($baseline/2) 0 0;
} }
&#feedback_link_question { &#feedback_link_question {
border-top-style: none; border-top-style: none;
border-radius: 0px 0px 10px 10px; border-radius: 0 0 ($baseline/2) ($baseline/2);
} }
&:hover, &:focus { &:hover, &:focus {
color: #fff; color: $white;
background: $link-color; background: $link-color;
} }
} }
...@@ -306,7 +306,7 @@ mark { ...@@ -306,7 +306,7 @@ mark {
#feedback_success_wrapper { #feedback_success_wrapper {
p { p {
padding: 0 20px 20px 20px; padding: 0 $baseline $baseline $baseline;
} }
} }
...@@ -336,8 +336,8 @@ mark { ...@@ -336,8 +336,8 @@ mark {
.nav-skip { .nav-skip {
display: block; display: block;
position: absolute; position: absolute;
left: 0px; left: 0;
top:- ($baseline*30); top: -($baseline*30);
width: 1px; width: 1px;
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
......
lms/static/sass/base/_variables.scss
// lms variables // lms - utilities - variables
// ====================
// base // BASE
$baseline: 20px; $baseline: 20px;
// ==================== // ====================
...@@ -56,13 +57,13 @@ $tmg-f3: 0.125s; ...@@ -56,13 +57,13 @@ $tmg-f3: 0.125s;
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
// COLORS // COLORS
$black: rgb(0,0,0); $black: rgb(0,0,0); // #000000;
$black-t0: rgba($black, 0.125); $black-t0: rgba($black, 0.125);
$black-t1: rgba($black, 0.25); $black-t1: rgba($black, 0.25);
$black-t2: rgba($black, 0.5); $black-t2: rgba($black, 0.5);
$black-t3: rgba($black, 0.75); $black-t3: rgba($black, 0.75);
$white: rgb(255,255,255); $white: rgb(255,255,255); // #FFFFFF;
$white-t0: rgba($white, 0.125); $white-t0: rgba($white, 0.125);
$white-t1: rgba($white, 0.25); $white-t1: rgba($white, 0.25);
$white-t2: rgba($white, 0.5); $white-t2: rgba($white, 0.5);
...@@ -81,7 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c ...@@ -81,7 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c
$gray-d3: shade($gray,60%); // #323232 $gray-d3: shade($gray,60%); // #323232
$gray-d4: shade($gray,80%); // #191919 $gray-d4: shade($gray,80%); // #191919
$pink: rgb(182,37,103); $pink: rgb(182,37,103); // #b72567;
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%); $pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%); $pink-l3: tint($pink,60%);
...@@ -98,7 +99,7 @@ $pink-u1: desaturate($pink,15%); ...@@ -98,7 +99,7 @@ $pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%); $pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%); $pink-u3: desaturate($pink,45%);
$red: rgb(178, 6, 16); $red: rgb(178, 6, 16); // #b20610;
$red-l1: tint($red,20%); $red-l1: tint($red,20%);
$red-l2: tint($red,40%); $red-l2: tint($red,40%);
$red-l3: tint($red,60%); $red-l3: tint($red,60%);
...@@ -115,7 +116,7 @@ $red-u1: desaturate($red,15%); ...@@ -115,7 +116,7 @@ $red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%); $red-u2: desaturate($red,30%);
$red-u3: desaturate($red,45%); $red-u3: desaturate($red,45%);
$green: rgb(37, 184, 90); $green: rgb(37, 184, 90); // #25b85a;
$green-l1: tint($green,20%); $green-l1: tint($green,20%);
$green-l2: tint($green,40%); $green-l2: tint($green,40%);
$green-l3: tint($green,60%); $green-l3: tint($green,60%);
...@@ -149,7 +150,7 @@ $light-gray: #ddd; ...@@ -149,7 +150,7 @@ $light-gray: #ddd;
// used by descriptor css // used by descriptor css
$lightGrey: #edf1f5; $lightGrey: #edf1f5;
$darkGrey: #8891a1; $darkGrey: #8891a1;
$lightGrey1: #ccc; $lightGrey1: $gray-l3;
$blue-d1: shade($blue,20%); $blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%); $blue-d2: shade($blue,40%);
$blue-d4: shade($blue,80%); $blue-d4: shade($blue,80%);
...@@ -215,7 +216,7 @@ $m-green-t3: rgba($m-green,0.75); ...@@ -215,7 +216,7 @@ $m-green-t3: rgba($m-green,0.75);
// ==================== // ====================
// shadows // SHADOWS
$shadow: rgba(0,0,0,0.2); $shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1); $shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05); $shadow-l2: rgba(0,0,0,0.05);
...@@ -242,7 +243,7 @@ $courseware-header-bg: transparent; ...@@ -242,7 +243,7 @@ $courseware-header-bg: transparent;
$footer-bg: $white; $footer-bg: $white;
$courseware-footer-border: none; $courseware-footer-border: none;
$courseware-footer-shadow: none; $courseware-footer-shadow: none;
$courseware-footer-margin: 0px; $courseware-footer-margin: 0;
$courseware-border-bottom-color: #44a2de; $courseware-border-bottom-color: #44a2de;
$courseware-button-border-color: #e6e6e6; $courseware-button-border-color: #e6e6e6;
$courseware-hover-color: #333435; $courseware-hover-color: #333435;
...@@ -278,7 +279,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%); ...@@ -278,7 +279,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%);
// ACTIONS: general // ACTIONS: general
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%); $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-color: transparent; $button-bg-color: transparent;
$button-bg-hover-color: #fff; $button-bg-hover-color: $white;
// ACTIONS: primary // ACTIONS: primary
$action-primary-bg: $m-blue-d3; $action-primary-bg: $m-blue-d3;
...@@ -383,7 +384,7 @@ $button-archive-color: #eee; ...@@ -383,7 +384,7 @@ $button-archive-color: #eee;
// MISC: shadow, form, modal // MISC: shadow, form, modal
$shadow-color: $blue; $shadow-color: $blue;
$form-bg-color: #fff; $form-bg-color: $white;
$modal-bg-color: rgb(245,245,245); $modal-bg-color: rgb(245,245,245);
// MISC: sidebar // MISC: sidebar
......
lms/static/sass/course/_gradebook.scss
...@@ -7,20 +7,20 @@ div.gradebook-wrapper { ...@@ -7,20 +7,20 @@ div.gradebook-wrapper {
@extend .content; @extend .content;
display: block; display: block;
width: 100%; width: 100%;
@include clearfix; @include clearfix();
.student-search { .student-search {
padding: 0 20px 0 15px; padding: 0 $baseline 0 ($baseline*0.75);
} }
.student-search-field { .student-search-field {
width: 100%; width: 100%;
height: 27px; height: 27px;
padding: 0 15px 0 35px; padding: 0 ($baseline*0.75) 0 35px;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 13px; border-radius: 13px;
border: 1px solid $table-border-color; border: 1px solid $table-border-color;
background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6; background: url(../images/search-icon.png) no-repeat 9px center $gray-l6;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 11px; font-size: 11px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
...@@ -48,20 +48,20 @@ div.gradebook-wrapper { ...@@ -48,20 +48,20 @@ div.gradebook-wrapper {
tr:first-child td { tr:first-child td {
border-top: 1px solid $table-border-color; border-top: 1px solid $table-border-color;
border-radius: 5px 0 0 0; border-radius: ($baseline/4) 0 0 0;
} }
tr:last-child td { tr:last-child td {
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $table-border-color;
border-radius: 0 0 0 5px; border-radius: 0 0 0 ($baseline/4);
} }
td { td {
height: 50px; height: 50px;
padding-left: 20px; padding-left: $baseline;
border-bottom: 1px solid $cell-border-color; border-bottom: 1px solid $cell-border-color;
border-left: 1px solid $table-border-color; border-left: 1px solid $table-border-color;
background: #f3f3f3; background: $gray-l5;
font-size: 13px; font-size: 13px;
line-height: 50px; line-height: 50px;
} }
...@@ -79,29 +79,29 @@ div.gradebook-wrapper { ...@@ -79,29 +79,29 @@ div.gradebook-wrapper {
.left-shadow, .left-shadow,
.right-shadow { .right-shadow {
@extend %ui-depth4;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 9999;
width: 20px; width: 20px;
pointer-events: none; pointer-events: none;
} }
.left-shadow { .left-shadow {
left: 0; left: 0;
background-image: -webkit-gradient(linear, left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-gradient(linear, left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, left, $shadow-l1, $transparent 20%), -webkit-gradient(linear, left, $shadow-l1, $transparent);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -webkit-linear-gradient(left, $shadow-l1, $transparent 20%), -webkit-linear-gradient(left, $shadow-l1, $transparent);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left, $shadow-l1, $transparent 20%), -moz-linear-gradient(left, $shadow-l1, $transparent);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, $shadow-l1, $transparent 20%), -ms-linear-gradient(left, $shadow-l1, $transparent);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -o-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, $shadow-l1, $transparent 20%), -o-linear-gradient(left, $shadow-l1, $transparent);
} }
.right-shadow { .right-shadow {
right: 0; right: 0;
background-image: -webkit-gradient(linear, right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-gradient(linear, right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, right, $shadow-l1, $transparent 20%), -webkit-gradient(linear, right, $shadow-l1, $transparent);
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -webkit-linear-gradient(right, $shadow-l1, $transparent 20%), -webkit-linear-gradient(right, $shadow-l1, $transparent);
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -moz-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, $shadow-l1, $transparent 20%), -moz-linear-gradient(right, $shadow-l1, $transparent);
background-image: -ms-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -ms-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, $shadow-l1, $transparent 20%), -ms-linear-gradient(right, $shadow-l1, $transparent);
background-image: -o-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -o-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, $shadow-l1, $transparent 20%), -o-linear-gradient(right, $shadow-l1, $transparent);
} }
} }
...@@ -129,7 +129,7 @@ div.gradebook-wrapper { ...@@ -129,7 +129,7 @@ div.gradebook-wrapper {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset; box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
border-left: 1px solid #ccc; border-left: 1px solid $gray-l3;
&:first-child { &:first-child {
border-radius: 5px 0 0 0; border-radius: 5px 0 0 0;
...@@ -157,7 +157,7 @@ div.gradebook-wrapper { ...@@ -157,7 +157,7 @@ div.gradebook-wrapper {
@include linear-gradient(top, #c6c6c6, #bababa); @include linear-gradient(top, #c6c6c6, #bababa);
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
color: #fff; color: $white;
} }
} }
......
lms/static/sass/course/_info.scss
...@@ -34,14 +34,14 @@ div.info-wrapper { ...@@ -34,14 +34,14 @@ div.info-wrapper {
font-size: $body-font-size; font-size: $body-font-size;
font-weight: bold; font-weight: bold;
background: url('../images/calendar-icon.png') 0 center no-repeat; background: url('../images/calendar-icon.png') 0 center no-repeat;
padding-left: 20px; padding-left: $baseline;
} }
section.update-description { section.update-description {
section { section {
&.primary { &.primary {
border: 1px solid #DDD; border: 1px solid #DDD;
background: #F6F6F6; background: $gray-l6;
padding: 20px; padding: 20px;
p { p {
...@@ -57,7 +57,7 @@ div.info-wrapper { ...@@ -57,7 +57,7 @@ div.info-wrapper {
h3 { h3 {
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
margin: lh(1.5) 0 lh(.5); margin: lh(1.5) 0 lh(0.5);
} }
> ul { > ul {
...@@ -70,7 +70,7 @@ div.info-wrapper { ...@@ -70,7 +70,7 @@ div.info-wrapper {
} }
li { li {
margin-bottom: lh(.5); margin-bottom: lh(0.5);
} }
} }
} }
...@@ -124,10 +124,10 @@ div.info-wrapper { ...@@ -124,10 +124,10 @@ div.info-wrapper {
} }
&.collapsable { &.collapsable {
background: #fff; background: $white;
border-radius: 3px; border-radius: 3px;
padding: 14px 0; padding: 14px 0;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25); box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 3px rgba(0, 0, 0, .25);
h4 { h4 {
margin-bottom: 16px; margin-bottom: 16px;
...@@ -213,7 +213,7 @@ div.info-wrapper { ...@@ -213,7 +213,7 @@ div.info-wrapper {
padding-right: 8px; padding-right: 8px;
&:before { &:before {
color: #ccc; color: $gray-l3;
content: "•"; content: "•";
display: inline-block; display: inline-block;
padding-right: 8px; padding-right: 8px;
......
lms/static/sass/course/_open_ended_grading.scss
.open-ended-problems, .open-ended-problems,
.combined-notifications .combined-notifications {
{ padding: ($baseline*2);
padding: 40px;
.problem-list .problem-list {
{
table-layout: auto; table-layout: auto;
margin-top: 10px; margin-top: ($baseline/2);
width:70%; width: 70%;
td, th
{ td, th {
padding: 7px; padding: 7px;
} }
} }
.notification-container
{ .notification-container {
margin: 30px 0px; margin: ($baseline*1.5) 0;
} }
.notification .notification {
{ @include clearfix();
margin: 10px; margin: ($baseline/2);
width: 30%; width: 30%;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
.notification-link
{ .notification-link {
display:block; display:block;
height: 9em; height: 9em;
padding: 10px; padding: ($baseline/2);
border: 1px solid black; border: 1px solid black;
text-align: center; text-align: center;
p
{ p {
font-size: .9em; font-size: 0.9em;
text-align: center; text-align: center;
} }
} }
.notification-title
{ .notification-title {
text-transform: uppercase; text-transform: uppercase;
background: $blue; background: $blue;
color: white; color: white;
padding: 5px 0px; padding: ($baseline/4) 0;
font-size: 1.1em; font-size: 1.1em;
} }
.notification-link:hover, .notification-link:hover,
.notification-link:focus .notification-link:focus {
{
background-color: #eee; background-color: #eee;
} }
.notification-description
{ .notification-description {
padding-top:5%; padding-top:5%;
} }
.alert-message
{ .alert-message {
img
{ img {
vertical-align: baseline; vertical-align: baseline;
} }
} }
@include clearfix;
} }
} }
lms/static/sass/course/_profile.scss
.profile-wrapper { .profile-wrapper {
color: #000; color: $black;
.user-info { .user-info {
@extend .sidebar; @extend .sidebar;
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
header { header {
@extend .bottom-border; @extend .bottom-border;
margin: 0; margin: 0;
padding: lh(.5); padding: lh(0.5);
h1 { h1 {
margin: 0; margin: 0;
...@@ -24,16 +24,14 @@ ...@@ -24,16 +24,14 @@
} }
ul { ul {
list-style: none; @extend %ui-no-list;
padding: 0;
margin: 0;
li { li {
border-bottom: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
box-shadow: 0 1px 0 #eee; box-shadow: 0 1px 0 #eee;
color: lighten($text-color, 10%); color: lighten($text-color, 10%);
display: block; display: block;
padding: lh(.5) 0 lh(.5) lh(.5); padding: lh(0.5) 0 lh(0.5) lh(0.5);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@include transition(none); @include transition(none);
...@@ -50,7 +48,7 @@ ...@@ -50,7 +48,7 @@
&[type="text"] { &[type="text"] {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: lh(.5) 0; margin: lh(0.5) 0;
width: 100%; width: 100%;
} }
...@@ -75,7 +73,7 @@ ...@@ -75,7 +73,7 @@
color: #999; color: #999;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
right: lh(.5); right: lh(0.5);
text-transform: uppercase; text-transform: uppercase;
top: 9px; top: 9px;
...@@ -106,7 +104,7 @@ ...@@ -106,7 +104,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
right: lh(.5); right: lh(0.5);
text-transform: uppercase; text-transform: uppercase;
top: 9px; top: 9px;
...@@ -149,7 +147,7 @@ ...@@ -149,7 +147,7 @@
} }
#course-success { #course-success {
margin-bottom: 30px; margin-bottom: ($baseline*1.5);
text-align: center; text-align: center;
> a { > a {
@include button(simple, $button-color); @include button(simple, $button-color);
...@@ -231,7 +229,7 @@ ...@@ -231,7 +229,7 @@
} }
.scores { .scores {
margin: lh(.5) 0; margin: lh(0.5) 0;
h3 { h3 {
font-size: em(14); font-size: em(14);
......
lms/static/sass/course/_staff_grading.scss
div.staff-grading, div.staff-grading,
div.peer-grading{ div.peer-grading {
border: 1px solid lightgray; border: 1px solid lightgray;
textarea.feedback-area { textarea.feedback-area {
...@@ -9,16 +9,17 @@ div.peer-grading{ ...@@ -9,16 +9,17 @@ div.peer-grading{
div.feedback-area.track-changes { div.feedback-area.track-changes {
position: relative; position: relative;
margin: 0px; margin: 0;
height: 400px; height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;
padding: 5px; padding: ($baseline/4);
resize: vertical; resize: vertical;
width: 99%; width: 99%;
overflow: auto; overflow: auto;
} }
div.feedback-area.track-changes, p.ice-legend { div.feedback-area.track-changes, p.ice-legend {
.ice-controls { .ice-controls {
float: right; float: right;
} }
...@@ -47,12 +48,12 @@ div.peer-grading{ ...@@ -47,12 +48,12 @@ div.peer-grading{
} }
h1 { h1 {
margin: 0 0 0 $baseline/2; margin: 0 0 0 ($baseline/2);
} }
h2 { h2 {
a { a {
text-size: .5em; text-size: 0.5em;
} }
} }
...@@ -60,18 +61,18 @@ div.peer-grading{ ...@@ -60,18 +61,18 @@ div.peer-grading{
margin: 0; margin: 0;
&.submission-container{ &.submission-container{
@include clearfix; @include clearfix();
overflow-y: auto; overflow-y: auto;
max-height: 300px; max-height: 300px;
height: auto; height: auto;
border: 1px solid #ddd; border: 1px solid #ddd;
background: #f6f6f6; background: $gray-l6;
} }
} }
label { label {
margin: 0; margin: 0;
padding: 2px; padding: ($baseline/10);
min-width: 50px; min-width: 50px;
text-size: 1.5em; text-size: 1.5em;
} }
...@@ -93,11 +94,11 @@ div.peer-grading{ ...@@ -93,11 +94,11 @@ div.peer-grading{
text-align: center; text-align: center;
th { th {
padding: 2px; padding: ($baseline/10);
} }
td { td {
padding: 2px; padding: ($baseline/10);
} }
td.problem-name { td.problem-name {
...@@ -115,29 +116,29 @@ div.peer-grading{ ...@@ -115,29 +116,29 @@ div.peer-grading{
.rubric-wrapper, .rubric-wrapper,
.calibration-feedback-wrapper, .calibration-feedback-wrapper,
.grading-container { .grading-container {
padding: $baseline/2 0; padding: ($baseline/2) 0;
} }
.error-container { .error-container {
margin-left: 0; margin-left: 0;
padding: 2px; padding: ($baseline/10);
background-color: #ffcccc; background-color: #ffcccc;
} }
.submission-wrapper { .submission-wrapper {
padding: 2px; padding: ($baseline/10);
padding-bottom: 15px; padding-bottom: ($baseline*0.75);
h3 { h3 {
margin-bottom: 2px; margin-bottom: ($baseline/10);
} }
p { p {
margin-left: 2px; margin-left: ($baseline/10);
} }
} }
.meta-info-wrapper { .meta-info-wrapper {
padding:2px; padding: ($baseline/10);
background-color: #eee; background-color: #eee;
div { div {
...@@ -147,24 +148,24 @@ div.peer-grading{ ...@@ -147,24 +148,24 @@ div.peer-grading{
.message-container, .message-container,
.grading-message { .grading-message {
margin-left: 0; margin-left: 0;
padding: 2px; padding: ($baseline/10);
background-color: $yellow; background-color: $yellow;
} }
.breadcrumbs { .breadcrumbs {
margin: $baseline/2 $baseline/4; margin: ($baseline/2) ($baseline/4);
font-size: .8em; font-size: .8em;
} }
.instructions-panel { .instructions-panel {
@include clearfix; @include clearfix();
padding: $baseline/2; padding: ($baseline/2);
background-color: #eee; background-color: #eee;
font-size: .8em; font-size: .8em;
> div { > div {
margin-bottom: 5px; margin-bottom: ($baseline/4);
padding: $baseline/2; padding: ($baseline/2);
width: 49%; width: 49%;
background: #eee; background: #eee;
...@@ -190,7 +191,7 @@ div.peer-grading{ ...@@ -190,7 +191,7 @@ div.peer-grading{
border-radius: 3px; border-radius: 3px;
} }
.current-state { .current-state {
background: #fff; background: $white;
} }
} }
...@@ -199,8 +200,8 @@ div.peer-grading{ ...@@ -199,8 +200,8 @@ div.peer-grading{
margin-left: 0; margin-left: 0;
header { header {
margin-top: 2px; margin-top: ($baseline/10);
margin-bottom: 2px; margin-bottom: ($baseline/10);
font-size: 1.2em; font-size: 1.2em;
} }
} }
...@@ -215,7 +216,7 @@ div.peer-grading{ ...@@ -215,7 +216,7 @@ div.peer-grading{
} }
div.peer-grading { div.peer-grading {
border-radius: $baseline/2; border-radius: ($baseline/2);
padding: 0; padding: 0;
.peer-grading-tools { .peer-grading-tools {
...@@ -224,8 +225,8 @@ div.peer-grading { ...@@ -224,8 +225,8 @@ div.peer-grading {
.error-container { .error-container {
margin: $baseline; margin: $baseline;
border-radius: $baseline/4; border-radius: ($baseline/4);
padding: $baseline/2; padding: ($baseline/2);
} }
.interstitial-page, .calibration -feedback, .calibration-interstitial-page { .interstitial-page, .calibration -feedback, .calibration-interstitial-page {
......
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