Skip to content

E
edx-platform
Commit 38b7e4cc by Marco Morales
Options

SASS compilation variable conventions update, focusing on basic colors, baseline… 

SASS compilation variable conventions update, focusing on basic colors, baseline variable usage for padding and margins, ui-depth extends, along with other small fixes. The intent with this is to not have any user-facing impact, and instead move us closer toward having files that use our newer sass conventions.
parent 90e0a2d1
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-depth3;
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