diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 26b5e7d90d..812c7c526c 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -1,7 +1,25 @@ // 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 { font-size: 62.5%; height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag @@ -38,7 +56,7 @@ h1 { } .page-actions { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .wrapper { @@ -47,9 +65,8 @@ h1 { width: 100%; } -// ==================== - -// typography - basic +// +Typography - Basic +// ==================== .page-header { @extend %t-title3; @extend %t-strong; @@ -93,9 +110,8 @@ h1 { } } -// ==================== - -// typography - primary content +// +Typography - Primary Content +// ==================== .content-primary { .section-header { @@ -131,7 +147,8 @@ h1 { } } -// typography - primary content +// +Typography - Secondary Content +// ==================== .content-secondary { .section-header { @@ -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 { @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 { @extend %t-title3; margin-bottom: ($baseline*1.5); @@ -240,16 +225,14 @@ p, ul, ol, dl { } } -// ==================== - -// layout - basic +// +Layout - Basic +// ==================== .wrapper-view { } -// ==================== - -// layout - basic page header +// +Layout - Basic Page Header +// ==================== .wrapper-mast { margin: ($baseline*1.5) 0 0 0; padding: 0 $baseline; @@ -391,7 +374,8 @@ p, ul, ol, dl { } } -// layout - basic page content +// +Layout - Basic Page Content +// ==================== .wrapper-content { margin: 0; padding: 0 $baseline; @@ -434,7 +418,8 @@ p, ul, ol, dl { @include box-sizing(border-box); } -// layout - primary content +// +Layout - Primary Content +// ==================== .content-primary { .title-1 { @@ -471,7 +456,8 @@ p, ul, ol, dl { } } -// layout - supplemental content +// +Layout - Supplemental Content +// ==================== .content-supplementary { > section { @@ -479,9 +465,8 @@ p, ul, ol, dl { } } -// ==================== - -// layout - grandfathered +// +Layout - Grandfathered +// ==================== .main-wrapper { position: relative; margin: 0 ($baseline*2); @@ -517,9 +502,8 @@ p, ul, ol, dl { @include float(right); } -// ==================== - -// UI - actions +// +UI - Actions +// ==================== .new-unit-item, .new-subsection-item, .new-policy-item { @@ -550,22 +534,21 @@ p, ul, ol, dl { } } -// ==================== - -// misc +// +UI - Misc +// ==================== hr.divide { @extend %cont-text-sr; } .item-details { float: left; - padding: 10px 0; + padding: ($baseline/2) 0; } .details { @extend %t-copy-sub1; display: none; - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .window { @@ -604,8 +587,8 @@ hr.divide { } .row { - margin-bottom: 10px; - padding-bottom: 10px; + margin-bottom: ($baseline/2); + padding-bottom: ($baseline/2); border-bottom: 1px solid #cbd1db; } } @@ -638,9 +621,9 @@ hr.divide { } } -// ==================== -// basic utility +// +Utility - Basic +// ==================== // UI - semantically hide text .sr { @@ -683,9 +666,8 @@ hr.divider { } } -// ==================== - -// js dependant +// +JS Dependent +// ==================== body.js { // lean/simple modal window diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss index 86b926a881..ecb9b54034 100644 --- a/cms/static/sass/_shame.scss +++ b/cms/static/sass/_shame.scss @@ -11,13 +11,13 @@ .ui-toggle-control { // 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; } .icon-remove-sign { // 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; } } diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index c310f4296f..d9739ab081 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -1,9 +1,22 @@ // studio - utilities - variables // ==================== +// Table of Contents +// * +Grid +// * +Fonts +// * +Colors - Utility +// * +Colors - Primary +// * +Colors - Shadow +// * +Color - Application +// * +Timing +// * +Archetype UI +// * +Specific UI +// * +Deprecated + $baseline: 20px; -// grid +// +Grid +// ==================== $gw-column: ($baseline*3); $gw-gutter: $baseline; $fg-column: $gw-column; @@ -12,15 +25,17 @@ $fg-max-columns: 12; $fg-max-width: 1280px; $fg-min-width: 900px; -// ==================== - -// fonts +// +Fonts +// ==================== $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $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-t0: rgba($black, 0.125); $black-t1: rgba($black, 0.25); @@ -67,7 +82,7 @@ $blue-t1: rgba($blue, 0.25); $blue-t2: rgba($blue, 0.50); $blue-t3: rgba($blue, 0.75); -$pink: rgb(183, 37, 103); +$pink: rgb(183, 37, 103); // #b72567; $pink-l1: tint($pink,20%); $pink-l2: tint($pink,40%); $pink-l3: tint($pink,60%); @@ -84,7 +99,7 @@ $pink-u1: desaturate($pink,15%); $pink-u2: desaturate($pink,30%); $pink-u3: desaturate($pink,45%); -$red: rgb(178, 6, 16); +$red: rgb(178, 6, 16); // #b20610; $red-l1: tint($red,20%); $red-l2: tint($red,40%); $red-l3: tint($red,60%); @@ -101,7 +116,7 @@ $red-u1: desaturate($red,15%); $red-u2: desaturate($red,30%); $red-u3: desaturate($red,45%); -$green: rgb(37, 184, 90); +$green: rgb(37, 184, 90); // #25b85a $green-l1: tint($green,20%); $green-l2: tint($green,40%); $green-l3: tint($green,60%); @@ -152,13 +167,16 @@ $orange-u1: desaturate($orange,15%); $orange-u2: desaturate($orange,30%); $orange-u3: desaturate($orange,45%); +// +Colors - Shadows +// ==================== $shadow: rgba($black, 0.2); $shadow-l1: rgba($black, 0.1); $shadow-l2: rgba($black, 0.05); $shadow-d1: rgba($black, 0.4); $shadow-d2: rgba($black, 0.6); -// colors - application +// +Colors - Application +// ==================== $color-draft: $gray-l3; $color-live: $blue; $color-ready: $green; @@ -170,9 +188,9 @@ $color-heading-base: $gray-d2; $color-copy-base: $gray-l1; $color-copy-emphasized: $gray-d2; -// ==================== - -// timing - used for animation/transition mixin syncing +// +Timing +// ==================== +// used for animation/transition mixin syncing $tmg-s3: 3.0s; $tmg-s2: 2.0s; $tmg-s1: 1.0s; @@ -181,24 +199,22 @@ $tmg-f1: 0.50s; $tmg-f2: 0.25s; $tmg-f3: 0.125s; -// ==================== - -// archetype UI +// +Archetype UI +// ==================== $ui-action-primary-color: $blue-u2; $ui-action-primary-color-focus: $blue-s1; $ui-link-color: $blue-u2; $ui-link-color-focus: $blue-s1; -// ==================== - -// specific UI +// +Specific UI +// ==================== $ui-notification-height: ($baseline*10); $ui-update-color: $blue-l4; -// ==================== - -// inherited +// +Deprecated +// ==================== +// do not use, future clean up will use updated styles $baseFontColor: $gray-d2; $lighter-base-font-color: rgb(100,100,100); $offBlack: #3c3c3c; @@ -227,4 +243,4 @@ $body-line-height: golden-ratio(.875em, 1); // carried over from LMS for xmodules $action-primary-active-bg: #1AA1DE; // $m-blue -$very-light-text: #fff; +$very-light-text: $white; diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss index a8d054a0a5..1841430fad 100644 --- a/cms/static/sass/assets/_anims.scss +++ b/cms/static/sass/assets/_anims.scss @@ -1,7 +1,23 @@ // 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) { 0% { opacity: 0.0; @@ -16,14 +32,15 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// fade in animation %anim-fadeIn { @include animation(fadeIn $tmg-f2 linear 1); } - -// fade out -@include keyframes(fadeOut) { +// +Fade Out - Extend +// ==================== +// fade out keyframes +@include keyframes(fadeOut) { 0% { opacity: 1.0; } @@ -37,16 +54,14 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// fade out animation %anim-fadeOut { @include animation(fadeOut $tmg-f2 linear 1); } - -// ==================== - - -// rotate up +// +Rotate Up - Extend +// ==================== +// rotate up keyframes @include keyframes(rotateUp) { 0% { @include transform(rotate(0deg)); @@ -61,13 +76,15 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// rotate up animation %anim-rotateUp { @include animation(rotateUp $tmg-f2 ease-in-out 1); } -// rotate up +// +Rotate Down - Extend +// ==================== +// rotate down keyframes @include keyframes(rotateDown) { 0% { @include transform(rotate(0deg)); @@ -82,13 +99,15 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// rotate down animation %anim-rotateDown { @include animation(rotateDown $tmg-f2 ease-in-out 1); } -// rotate clockwise +// +Rotate Clockwise - Extend +// ==================== +// rotate clockwise keyframes @include keyframes(rotateCW) { 0% { @include transform(rotate(0deg)); @@ -103,13 +122,14 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// rotate clockwise animation %anim-rotateCW { @include animation(rotateCW $tmg-s1 linear infinite); } - -// rotate counter-clockwise +// +Rotate Clockwise - Extend +// ==================== +// rotate clockwise keyframes @include keyframes(rotateCCW) { 0% { @include transform(rotate(0deg)); @@ -124,16 +144,15 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// rotate clockwise animation %anim-rotateCCW { @include animation(rotateCCW $tmg-s1 linear infinite); } +// +Notifications - Slide - Keyframes // ==================== - - -// notifications slide up +// notifications slide up keyframes @include keyframes(notificationSlideUp) { 0% { @include transform(translateY(0)); @@ -148,7 +167,7 @@ } } -// notifications slide down +// notifications slide down keyframes @include keyframes(notificationSlideDown) { 0% { @include transform(translateY(-($ui-notification-height*0.99))); @@ -164,10 +183,9 @@ } +// +Bounce In - Extend // ==================== - - -// bounce in +// bounce in keyframes @include keyframes(bounceIn) { 0% { opacity: 0.0; @@ -184,13 +202,14 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// bounce in animation %anim-bounceIn { @include animation(bounceIn $tmg-f1 ease-in-out 1); } - -// bounce out +// +Bounce Out - Extend +// ==================== +// bounce out keyframes @include keyframes(bounceOut) { 0% { @include transform(scale(1)); @@ -207,16 +226,14 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// bounce out animation %anim-bounceOut { @include animation(bounceOut $tmg-f1 ease-in-out 1); } - +// +Flash - Once - Extend // ==================== - - -// flash +// flash keyframes @include keyframes(flash) { 0%, 100% { opacity: 1.0; @@ -227,32 +244,32 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// flash animation %anim-flash { @include animation(flash $tmg-f1 ease-in-out 1); } -// flash - double +// +Flash - Double - Extend +// ==================== +// flash double keyframes @include keyframes(flashDouble) { -0%, 50%, 100% { - opacity: 1.0; + 0%, 50%, 100% { + opacity: 1.0; + } + + 25%, 75% { + opacity: 0.0; + } } -25%, 75% { - opacity: 0.0; - } - } - -// canned animation - use if you want out of the box/non-customized anim +// flash double animation %anim-flashDouble { @include animation(flashDouble $tmg-f1 ease-in-out 1); } - +// +Pulse - Extend // ==================== - - -// pulse +// pulse keyframes @include keyframes(pulse) { 0% { opacity: 0.0; @@ -267,15 +284,14 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// pulse animation %anim-pulse { @include animation(pulse $tmg-f1 ease-in-out 1); } +// Dropped - Extend // ==================== - - -// was-dropped +// was dropped keyframes @include keyframes(was-dropped) { 0% { opacity: 1.0; @@ -290,7 +306,7 @@ } } -// canned animation - use if you want out of the box/non-customized anim +// was dropped animation %anim-was-dropped { @include animation(was-dropped $tmg-f1 ease-in-out 1); } diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss index ba9dad238c..8c9fab797d 100644 --- a/cms/static/sass/assets/_graphics.scss +++ b/cms/static/sass/assets/_graphics.scss @@ -1,9 +1,12 @@ +// studio - assets - graphics +// ==================== + .drag-handle { display: inline-block; float: right; width: 7px; height: 22px; - margin-left: 10px; + margin-left: ($baseline/2); background: url(../images/drag-handles.png) no-repeat; cursor: move; } @@ -12,7 +15,7 @@ display: inline-block; width: 100px; height: 60px; - margin-right: 5px; + margin-right: ($baseline/4); background: url(../images/large-advanced-icon.png) center no-repeat; } @@ -20,7 +23,7 @@ display: inline-block; width: 100px; height: 60px; - margin-right: 5px; + margin-right: ($baseline/4); background: url(../images/large-discussion-icon.png) center no-repeat; } @@ -28,7 +31,7 @@ display: inline-block; width: 100px; height: 60px; - margin-right: 5px; + margin-right: ($baseline/4); background: url(../images/large-html-icon.png) center no-repeat; } @@ -36,7 +39,7 @@ display: inline-block; width: 100px; height: 60px; - margin-right: 5px; + margin-right: ($baseline/4); background: url(../images/large-problem-icon.png) center no-repeat; } @@ -44,6 +47,6 @@ display: inline-block; width: 100px; height: 60px; - margin-right: 5px; + margin-right: ($baseline/4); background: url(../images/large-video-icon.png) center no-repeat; } diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index c91f40707e..876980953c 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -1,7 +1,22 @@ // 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 { @extend %ui-fake-link; @@ -12,16 +27,16 @@ } } -// ==================== - -// general type and size +// +General Type and Size - Extend +// ==================== %sizing { @extend %t-action4; padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2); } -// ==================== +// +Primary Button - Extends +// ==================== // gray primary button %btn-primary-gray { @extend %ui-btn-primary; @@ -90,6 +105,8 @@ } } +// +Secondary Button - Extends +// ==================== // gray secondary button %btn-secondary-gray { @extend %ui-btn-secondary; @@ -175,9 +192,8 @@ } } -// ==================== - -// button elements +// +Button Element +// ==================== .button { [class^="icon-"] { @@ -187,9 +203,8 @@ } } +// +UI Dropdown Button - Extend // ==================== - -// simple dropdown button styling - should we move this elsewhere? %ui-btn-dd { @extend %ui-btn; @extend %ui-btn-pill; @@ -210,7 +225,8 @@ } } -// layout-based buttons - nav dd +// +UI Nav Dropdown Button - Extend +// ==================== %ui-btn-dd-nav-primary { @extend %ui-btn-dd; background: $white; @@ -232,10 +248,8 @@ } } +// +UI Actions List - Extend // ==================== - -// UI: element actions list - %actions-list { display: inline-block; margin-bottom: 0; @@ -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 { @include transition(all $tmg-f2 linear 0s); display: inline-block; @@ -322,7 +338,9 @@ } } -// UI: expand collapse +// +UI Expand/Collapse - Extend +// ==================== +// will replace %expand-collapse %ui-expand-collapse { @include transition(all $tmg-f2 linear 0s); @@ -339,7 +357,7 @@ // STATE: hover/active &:hover, &:active { - cursor: pointer; + @extend %ui-fake-link; color: $ui-link-color-focus; } } @@ -357,15 +375,18 @@ } } -// UI: drag handles +// +Drag and Drop Styling +// ==================== + +// UI: drag handle .drag-handle { &:hover, &:focus { cursor: move; } } - -// UI: elem is draggable + +// UI: 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); position: relative; @@ -396,7 +417,7 @@ } } -// UI: drag state - is dragging +// UI: is dragging - drag state .is-dragging { @extend %ui-depth4; left: -($baseline/4); diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index 4fd58f7128..e084202690 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -49,7 +49,7 @@ background: transparent; [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; display: inline-block; vertical-align: middle; diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 5979c92ff7..f8303aa97b 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -1,7 +1,18 @@ // 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="email"], input[type="password"], @@ -31,9 +42,8 @@ textarea.text { } } -// ==================== - -// forms - fields - not editable +// +Fields - Not Editable +// ==================== .field.is-not-editable { & label.is-focused { @@ -45,9 +55,8 @@ textarea.text { } } -// ==================== - -// field with error +// +Fields - With Error +// ==================== .field.error { input, textarea { @@ -55,9 +64,8 @@ textarea.text { } } -// ==================== - -// forms - additional UI +// +Forms - Additional UI +// ==================== form { // CASE: cosmetic checkbox input @@ -138,7 +146,8 @@ form { } } -// ELEM: form +// +Form - Create New +// ==================== // form styling for creating a new content item (course, user, textbook) // TODO: refactor this into a placeholder to extend. .form-create { @@ -355,9 +364,10 @@ form { } } +// +Form - Inline Name Edit +// ==================== // form - inline xblock name edit on unit, container, outline - -// TOOD: abstract this out into a Sass placeholder +// TODO: abstract this out into a Sass placeholder .incontext-editor.is-editable { .incontext-editor-value, @@ -391,7 +401,8 @@ form { } } -// ELEM: form wrapper +// +Form - Create New Wrapper +// ==================== .wrapper-create-element { height: 0; margin-bottom: $baseline; @@ -410,9 +421,8 @@ form { } } -// ==================== - -// forms - grandfathered +// +Form - Grandfathered +// ==================== input.search { padding: 6px 15px 8px 30px; @include box-sizing(border-box); @@ -441,7 +451,7 @@ code { .CodeMirror { @extend %t-copy-sub1; - background: #fff; + background: $white; font-family: $f-monospace; } diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss index c80ff86862..8e9449ba9e 100644 --- a/cms/static/sass/elements/_modal-window.scss +++ b/cms/static/sass/elements/_modal-window.scss @@ -11,7 +11,7 @@ @include box-sizing(border-box); position: absolute; width: 50%; - box-shadow: 0px 0px 7px $shadow-d1; + box-shadow: 0 0 7px $shadow-d1; border-radius: ($baseline/5); background-color: $gray-l4; padding: 7px; @@ -509,7 +509,7 @@ left: 0; width: 100%; height: 100%; - background: #000; + background: $black; opacity: 0.5; filter: alpha(opacity=50); } diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss index 85cead835c..3d9c4663cc 100644 --- a/cms/static/sass/elements/_modal.scss +++ b/cms/static/sass/elements/_modal.scss @@ -9,7 +9,7 @@ left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, .8); + background: rgba(0, 0, 0, 0.8); } .modal { @@ -21,7 +21,7 @@ width: 930px; height: 540px; margin-left: -465px; - background: #fff; + background: $white; .modal-body { height: 400px; @@ -38,14 +38,14 @@ h2 { @extend %t-title5; @extend %t-light; - margin: 0 10px 30px; + margin: 0 ($baseline/2) ($baseline*1.5); color: #646464; letter-spacing: 1px; text-transform: uppercase; } p { - margin: 20px; + margin: $baseline; } .revert-button { diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index dfbad361d9..ef1eb3cdd3 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -13,14 +13,14 @@ @extend %t-title6; @extend %t-strong; display: block; - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); background-color: $gray-l4; } .bar-mod-content { @extend %t-copy-sub1; 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 { @extend %t-title8; @@ -109,13 +109,13 @@ h5 { @extend %t-title5; @extend %t-strong; - margin-bottom: ($baseline*.75); + margin-bottom: ($baseline*0.75); color: $green-d1; } // add component - list of green buttons .new-component-type { - @include clearfix; + @include clearfix(); li { display: inline-block; @@ -128,7 +128,7 @@ display: inline-block; width: ($baseline*5); height: ($baseline*5); - margin-right: ($baseline*.75); + margin-right: ($baseline*0.75); margin-bottom: ($baseline/2); border: 1px solid $green-d2; border-radius: ($baseline/4); @@ -154,7 +154,7 @@ // swaps in when a green button is clicked // -------------------- .new-component-templates { - @include clearfix; + @include clearfix(); display: none; margin: $baseline ($baseline*2); border-radius: 3px; @@ -184,7 +184,7 @@ // individual menus // -------------------- .new-component-template { - @include clearfix; + @include clearfix(); li { border: none; @@ -253,7 +253,7 @@ a { @extend %t-action3; display: block; - padding: ($baseline*.75) ($baseline*1.25); + padding: ($baseline*0.75) ($baseline*1.25); text-align: center; color: $gray-d3; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); @@ -268,7 +268,7 @@ $outline-indent-width: $baseline; // UI: general outline .outline-content { - margin-top: 5px; + margin-top: ($baseline/4); .unit-content { margin-top: 0; diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index b1269e4ebd..36b3c5473a 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -406,7 +406,7 @@ } .feedback-symbol { - @include transition (color 0.50s ease-in-out 0s); + @include transition (color $tmg-f1 ease-in-out 0s); @extend %t-icon3; width: flex-grid(1, 12); height: ($baseline*1.25); @@ -584,7 +584,7 @@ } .feedback-symbol { - @include transition (color 0.50s ease-in-out 0s); + @include transition (color $tmg-f1 ease-in-out 0s); @extend %t-icon3; width: flex-grid(1, 12); margin: ($baseline/4) flex-gutter() 0 0; @@ -760,7 +760,7 @@ .message { @extend %t-copy-sub1; background-color: $gray-d2; - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); color: $white; [class^="icon-"] { @@ -873,13 +873,13 @@ body.uxdesign.alerts { .alert { @extend %t-copy-sub1; padding: 15px 20px; - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); border-radius: 3px; border: 1px solid #edbd3c; border-radius: 3px; background: #fbf6e1; // background: #edbd3c; - @include clearfix; + @include clearfix(); .alert-message { @include float(left); diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss index e1ef119252..61d968c88e 100644 --- a/cms/static/sass/elements/_tender-widget.scss +++ b/cms/static/sass/elements/_tender-widget.scss @@ -57,7 +57,7 @@ .widget-layout .header { 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 { @@ -88,7 +88,7 @@ .widget-layout label { @extend %t-copy-sub1; @extend %t-strong; - margin-bottom: 5px; + margin-bottom: ($baseline/4); color: #4c4c4c; } @@ -145,15 +145,15 @@ .widget-layout dl.form { float: none; width: 100%; - border-bottom: 1px solid #f2f2f2; - margin-bottom: 10px; - padding-bottom: 10px; + border-bottom: 1px solid $gray-l5; + margin-bottom: ($baseline/2); + padding-bottom: ($baseline/2); } .widget-layout dl.form:last-child { border: none; padding-bottom: 0; - margin-bottom: 20px; + margin-bottom: $baseline; } .widget-layout dl.form dt, .widget-layout dl.form dd { @@ -162,7 +162,7 @@ } .widget-layout dl.form dt { - margin-right: 15px; + margin-right: ($baseline*0.75); width: 70px; } @@ -181,7 +181,7 @@ @extend %t-strong; content: "What Question or Feedback Would You Like to Share?"; display: block; - margin-bottom: 5px; + margin-bottom: ($baseline/4); color: #4c4c4c; } @@ -189,9 +189,9 @@ .widget-layout dl#brain_buster_captcha { float: none; width: 100%; - border-top: 1px solid #f2f2f2; - margin-top: 10px; - padding-top: 10px; + border-top: 1px solid $gray-l5; + margin-top: ($baseline/2); + padding-top: ($baseline/2); } .widget-layout dl#brain_buster_captcha dd { @@ -219,9 +219,9 @@ display: block; width: 100%; height: auto !important; - -webkit-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 rgba(0,0,0,0); - 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 $transparent; + box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 $transparent; -webkit-transition-property: background-color,0.15s; -moz-transition-property: background-color,0.15s; -ms-transition-property: background-color,0.15s; @@ -255,10 +255,10 @@ -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; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; - color: #fff; + color: $white; text-align: center; - margin-top: 20px; - padding: 10px 20px; + margin-top: $baseline; + padding: ($baseline/2) $baseline; } .widget-layout .form-actions #private-discussion-opt { @@ -269,5 +269,5 @@ .widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active { background-color: #16ca57; - color: #fff; + color: $white; } diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss index 4e2dd73ba3..e28ec307ce 100644 --- a/cms/static/sass/elements/_vendor.scss +++ b/cms/static/sass/elements/_vendor.scss @@ -6,7 +6,7 @@ @extend %t-copy-sub2; border-color: $darkGrey; border-radius: 2px; - background: #fff; + background: $white; font-family: $f-sans-serif; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); z-index: 100000 !important; @@ -40,20 +40,20 @@ &.ui-state-hover { background: $orange; border-color: $orange; - color: #fff; + color: $white; } } .ui-state-highlight { background: $blue; border-color: $blue; - color: #fff; + color: $white; } .ui-state-active { background: $orange; border-color: $orange; - color: #fff; + color: $white; } } @@ -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; li:first-child { - margin-left: 20px; + margin-left: $baseline; } li { opacity: 0.8; diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss index d98506f6df..ccbc4f6939 100644 --- a/cms/static/sass/elements/_xblocks.scss +++ b/cms/static/sass/elements/_xblocks.scss @@ -371,7 +371,7 @@ &.is-inactive { margin: ($baseline*1.5) 0 0 0; border-top: 2px dotted $gray-l2; - padding: ($baseline*.75) 0; + padding: ($baseline*0.75) 0; background-color: $gray-l4; .wrapper-xblock.level-nesting { @@ -450,9 +450,7 @@ //settings-list .list-input.settings-list { - margin: 0; - padding: 0; - list-style: none; + @extend %cont-no-list; overflow: auto; max-height: 400px; @@ -573,9 +571,9 @@ width: 25px; height: 25px; vertical-align: middle; - padding: 5px; + padding: ($baseline/4); border-radius: 50%; - margin: 0 $baseline/2; + margin: 0 ($baseline/2); box-shadow: none; text-shadow: none; border: 1px solid $gray-l1; @@ -659,7 +657,7 @@ } .remove-setting { - @include transition(color 0.25s ease-in-out); + @include transition(color $tmg-f2 ease-in-out); @extend %t-action1; display: inline-block; background: transparent; @@ -680,7 +678,7 @@ // label .setting-label { vertical-align: top; - margin-top: ($baseline*.75); + margin-top: ($baseline*0.75); } // inputs and labels @@ -713,7 +711,7 @@ .setting-clear { vertical-align: top; - margin: ($baseline*.75) 0 0 0; + margin: ($baseline*0.75) 0 0 0; } .create-setting { @@ -730,7 +728,7 @@ } .remove-setting { - @include transition(color 0.25s ease-in-out); + @include transition(color $tmg-f2 ease-in-out); @extend %t-action1; display: inline-block; background: transparent; diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss index 98418008ee..a0a8b3ed6b 100644 --- a/cms/static/sass/elements/_xmodules.scss +++ b/cms/static/sass/elements/_xmodules.scss @@ -128,7 +128,7 @@ display: inline-block; vertical-align: top; min-width: ($baseline*5); - margin-top: 10px; + margin-top: ($baseline/2); .transcripts-message { @extend %t-copy-sub2; @@ -145,7 +145,7 @@ [class^="icon-"], [class*=" icon-"] { @extend %t-icon4; - margin-right: 5px; + margin-right: ($baseline/4); } } @@ -189,7 +189,7 @@ @extend %t-copy-lead1; display: block; height: 30px; - margin: 10px 0; + margin: ($baseline/2) 0; border: 1px solid $blue; text-align: center; @@ -210,7 +210,7 @@ width: 0%; height: 30px; background: $blue; - color: #fff; + color: $white; line-height: 28px; } } diff --git a/cms/static/sass/style-app-extend1-rtl.scss b/cms/static/sass/style-app-extend1-rtl.scss index 24758b062f..7d2cae09e3 100644 --- a/cms/static/sass/style-app-extend1-rtl.scss +++ b/cms/static/sass/style-app-extend1-rtl.scss @@ -1,30 +1,44 @@ // 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 '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'; -// BASE *default edX offerings* -// ==================== -// base - utilities +// +Base - Utilities +// ==================== @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; -// base - assets +// +Base - Assets +// ==================== @import 'assets/fonts'; @import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/anims'; // animations -// base - starter +// +Base - Starter +// ==================== @import 'base'; -// base - elements +// +Base - Elements +// ==================== @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. @@ -33,7 +47,8 @@ @import 'elements/layout'; // various standard layouts @import 'elements/uploaded-assets'; // layout for asset tables -// base - specific views +// +Base - Specific Views +// ==================== @import 'views/account'; @import 'views/assets'; @import 'views/updates'; @@ -54,7 +69,8 @@ @import 'views/group-configuration'; @import 'views/video-upload'; -// base - contexts +// +Base - Contexts +// ==================== @import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs) @import 'developer'; // used for any developer-created scss that needs further polish/refactoring diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss index 27a935573c..48e3c7df49 100644 --- a/cms/static/sass/style-app-extend1.scss +++ b/cms/static/sass/style-app-extend1.scss @@ -1,31 +1,44 @@ // studio - css architecture // ==================== +// 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 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages -// libs and resets *do not edit* -@import 'bourbon/bourbon'; // lib - bourbon - -// VENDOR + REBASE *referenced/used vendor presentation and reset* -// ==================== +// +Vendor and Rebase - *referenced/used vendor presentation and reset* +// ==================== @import 'reset'; -// BASE *default edX offerings* -// ==================== -// base - utilities +// +Base - Utilities +// ==================== @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; -// base - assets +// +Base - Assets +// ==================== @import 'assets/fonts'; @import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/anims'; // animations -// base - starter +// +Base - Starter +// ==================== @import 'base'; -// base - elements +// +Base - Elements +// ==================== @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. @@ -34,7 +47,8 @@ @import 'elements/layout'; // various standard layouts @import 'elements/uploaded-assets'; // layout for asset tables -// base - specific views +// +Base - Specific Views +// ==================== @import 'views/account'; @import 'views/assets'; @import 'views/updates'; @@ -55,7 +69,8 @@ @import 'views/group-configuration'; @import 'views/video-upload'; -// base - contexts +// +Base - Contexts +// ==================== @import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs) @import 'developer'; // used for any developer-created scss that needs further polish/refactoring diff --git a/cms/static/sass/style-app-rtl.scss b/cms/static/sass/style-app-rtl.scss index a70eccacd7..ff9b6814cf 100644 --- a/cms/static/sass/style-app-rtl.scss +++ b/cms/static/sass/style-app-rtl.scss @@ -1,30 +1,41 @@ // 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 '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'; -// BASE *default edX offerings* -// ==================== -// base - utilities +// +Base - Utilities +// ==================== @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; -// base - assets +// +Base - Assets +// ==================== @import 'assets/fonts'; @import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/anims'; // animations -// base - starter +// +Base - Starter +// ==================== @import 'base'; -// base - elements +// +Base - Elements +// ==================== @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. diff --git a/cms/static/sass/style-app.scss b/cms/static/sass/style-app.scss index 4df5a61fed..3bca8305ff 100644 --- a/cms/static/sass/style-app.scss +++ b/cms/static/sass/style-app.scss @@ -1,31 +1,41 @@ // studio - css architecture // ==================== +// 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 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages -// libs and resets *do not edit* -@import 'bourbon/bourbon'; // lib - bourbon - -// VENDOR + REBASE *referenced/used vendor presentation and reset* -// ==================== +// +Vendor and Rebase - *referenced/used vendor presentation and reset* +// ==================== @import 'reset'; -// BASE *default edX offerings* -// ==================== -// base - utilities +// +Base - Utilities +// ==================== @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; -// base - assets +// +Base - Assets +// ==================== @import 'assets/fonts'; @import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/anims'; // animations -// base - starter +// +Base - Starter +// ==================== @import 'base'; -// base - elements +// +Base - Elements +// ==================== @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. diff --git a/cms/static/sass/style-xmodule-rtl.scss b/cms/static/sass/style-xmodule-rtl.scss index 9d329f4eda..f5e3379acc 100644 --- a/cms/static/sass/style-xmodule-rtl.scss +++ b/cms/static/sass/style-xmodule-rtl.scss @@ -1,36 +1,50 @@ // 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 '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'; -// BASE *default edX offerings* -// ==================== -// base - utilities +// +Base - Utilities +// ==================== @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; -// base - assets +// +Base - Assets +// ==================== @import 'assets/fonts'; @import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/anims'; // animations -// base - starter +// +Base - Starter +// ==================== @import 'base'; -// base - elements +// +Base - Elements +// ==================== @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/navigation'; // all archetypes of navigation -// xmodule +// +Xmodule +// ==================== @import 'xmodule/modules/css/module-styles.scss'; @import 'xmodule/descriptors/css/module-styles.scss'; @import 'elements/xmodules'; // styling for Studio-specific contexts diff --git a/cms/static/sass/style-xmodule.scss b/cms/static/sass/style-xmodule.scss index e7acb0f4cb..d083a749a6 100644 --- a/cms/static/sass/style-xmodule.scss +++ b/cms/static/sass/style-xmodule.scss @@ -1,36 +1,49 @@ // 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 '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'; -// BASE *default edX offerings* -// ==================== -// base - utilities +// +Base - Utilities +// ==================== @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; -// base - assets +// +Base - Assets +// ==================== @import 'assets/fonts'; @import 'assets/graphics'; // sprites, basic image/figure/svg styling @import 'assets/anims'; // animations -// base - starter +// +Base - Starter +// ==================== @import 'base'; -// base - elements +// +Base - Elements +// ==================== @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/navigation'; // all archetypes of navigation -// xmodule +// +Xmodule +// ==================== @import 'xmodule/modules/css/module-styles.scss'; @import 'xmodule/descriptors/css/module-styles.scss'; @import 'elements/xmodules'; // styling for Studio-specific contexts diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index 1c70554542..2c5da78093 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -80,9 +80,7 @@ } .list-input { - margin: 0; - padding: 0; - list-style: none; + @extend %cont-no-list; .field { margin: 0 0 ($baseline*0.75) 0; diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss index 5246286c3a..922d4a3a92 100644 --- a/cms/static/sass/views/_checklists.scss +++ b/cms/static/sass/views/_checklists.scss @@ -70,7 +70,7 @@ } &.is-selectable { - cursor: pointer; + @extend %ui-fake-link; &:hover { color: $blue; @@ -240,8 +240,8 @@ .task-name { @include transition(color $tmg-f2 ease-in-out 0s); + @extend %ui-fake-link; vertical-align: baseline; - cursor: pointer; margin-bottom: 0; } @@ -260,7 +260,7 @@ } .task-actions { - @include transition(opacity $tmg-f2 ease-in-out 0.25s); + @include transition(opacity $tmg-f2 ease-in-out $tmg-f2); @include clearfix(); display: inline-block; vertical-align: middle; diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index 7780d04850..5726093b0d 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -51,7 +51,7 @@ .button { @extend %t-action3; @extend %t-regular; - padding: ($baseline/4) ($baseline*.75); + padding: ($baseline/4) ($baseline*0.75); } } } @@ -137,7 +137,7 @@ .bar-mod-content { border: 0; - padding: ($baseline/2) ($baseline*.75) ($baseline/4) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75) ($baseline/4) ($baseline*0.75); .title { margin-bottom: ($baseline/10); @@ -189,7 +189,7 @@ } .wrapper-pub-actions { - padding: ($baseline*.75); + padding: ($baseline*0.75); .action-publish { @extend %btn-primary-blue; @@ -217,7 +217,7 @@ .wrapper-last-publish { margin-bottom: $baseline; - padding: ($baseline*.75); + padding: ($baseline*0.75); background-color: $white; .copy { diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss index a33269fe17..1dd6b778ab 100644 --- a/cms/static/sass/views/_export-git.scss +++ b/cms/static/sass/views/_export-git.scss @@ -37,7 +37,7 @@ dd { @extend %t-copy-base; - margin-bottom: 20px; + margin-bottom: $baseline; } .course_text { diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss index f913f6fd43..b9ea09c5f4 100644 --- a/cms/static/sass/views/_export.scss +++ b/cms/static/sass/views/_export.scss @@ -96,7 +96,7 @@ h2 { @extend %t-title5; @extend %t-strong; - margin-bottom: 20px; + margin-bottom: $baseline; } strong { @@ -104,7 +104,7 @@ } p + p { - margin-top: 20px; + margin-top: $baseline; } ul { @@ -132,13 +132,13 @@ h2 { @extend %t-title4; @extend %t-light; - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .error-block { @extend %t-copy-sub1; display: none; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); } .error-block { @@ -153,7 +153,7 @@ .message-status { @extend %t-copy-sub2; - margin-top: 10px; + margin-top: ($baseline/2); } .progress-bar { @@ -176,7 +176,7 @@ width: 0%; height: 30px; background: $blue; - color: #fff; + color: $white; line-height: 48px; } } diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss index b58509667d..a222e71d33 100644 --- a/cms/static/sass/views/_group-configuration.scss +++ b/cms/static/sass/views/_group-configuration.scss @@ -115,7 +115,7 @@ } &.is-selectable { - cursor: pointer; + @extend %ui-fake-link; &:hover { color: $blue; @@ -220,7 +220,7 @@ .wrapper-group-configuration-validation { @extend %t-copy-sub1; - background-color: #f8f8f8; + background-color: $gray-l6; margin-top: $baseline; padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5); @@ -470,7 +470,7 @@ } .action-close { - @include transition(color 0.25s ease-in-out); + @include transition(color $tmg-f2 ease-in-out); @extend %t-action1; display: inline-block; border: 0; diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss index 5539688b13..c4088f3c5c 100644 --- a/cms/static/sass/views/_import.scss +++ b/cms/static/sass/views/_import.scss @@ -18,8 +18,8 @@ // UI: export controls .export-controls { @extend %ui-window; - @include clearfix; - padding: 30px 40px; + @include clearfix(); + padding: ($baseline*1.5) ($baseline*2); } // UI: import form diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index ff04f9560c..17a1946d8a 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -89,8 +89,8 @@ .arrow_box { position: relative; - background: #fff; - border: 4px solid #000; + background: $white; + border: 4px solid $black; } .arrow_box:after, .arrow_box:before { top: 100%; @@ -104,14 +104,14 @@ .arrow_box:after { border-color: rgba(255, 255, 255, 0); - border-top-color: #fff; + border-top-color: $white; border-width: 30px; left: 50%; - margin-left: -30px; + margin-left: -($baseline*1.5); } .arrow_box:before { - border-color: rgba(0, 0, 0, 0); - border-top-color: #000; + border-color: $transparent; + border-top-color: $black; border-width: 36px; left: 50%; margin-left: -36px; diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 1c8e0aee96..b24cb69404 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -25,8 +25,8 @@ @extend %t-strong; display: none; border-bottom: 2px solid $yellow; - margin: 0 0 20px 0; - padding: 10px 20px; + margin: 0 0 $baseline 0; + padding: ($baseline/2) $baseline; background: $paleYellow; .text { @@ -124,9 +124,7 @@ // form basics .list-input { - margin: 0; - padding: 0; - list-style: none; + @extend %cont-no-list; .field { margin: 0 0 ($baseline*2) 0; @@ -661,7 +659,7 @@ .range { @include font-size(10); display: block; - margin-right: 15px; + margin-right: ($baseline*0.75); line-height: 12px; } @@ -671,7 +669,7 @@ right: -1px; height: 50px; width: 2px; - background-color: #fff; + background-color: $white; box-shadow: -1px 0 3px rgba(0,0,0,0.1); cursor: ew-resize; @@ -860,7 +858,7 @@ .CodeMirror { @extend %t-copy-base; @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%)); padding: 5px 8px; border: 1px solid $mediumGrey; diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index bc146d9d1e..2b9d089649 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -130,7 +130,7 @@ } .wrapper-component-editor { - z-index: 9999; + @extend %ui-depth4; position: relative; background: $lightBluishGrey2; } @@ -200,11 +200,11 @@ } .drag-handle { + @extend %ui-depth1; + @include right(0); position: absolute; display: block; top: 0; - @include right(0); - z-index: 11; width: 35px; height: 100%; border: none; @@ -288,7 +288,7 @@ // basic course nav items - overrides from above .course-nav-item { - padding: ($baseline*.75) ($baseline/4) ($baseline*.75) $baseline; + padding: ($baseline*0.75) ($baseline/4) ($baseline*0.75) $baseline; background: $white; &.is-fixed { @@ -334,17 +334,17 @@ @include transition(background-color $tmg-s3 linear 0s); @extend %t-title4; padding: 20px 20px 22px; - background: #fff; + background: $white; } .static-page-item { position: relative; - margin: 10px 0; + margin: ($baseline/2) 0; padding: 22px 20px; border: 1px solid $darkGrey; border-radius: 3px; - background: #fff; - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + background: $white; + box-shadow: 0 1px 2px $shadow-l1; .page-name { @extend %t-title5; @@ -360,7 +360,7 @@ .edit-static-page { .main-wrapper { - margin-top: 40px; + margin-top: ($baseline*2); } .static-page-details { @@ -387,7 +387,7 @@ border: 1px solid #b0b6c2; border-radius: 2px; 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; color: #3c3c3c; outline: 0; diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 08abedbb72..1e8ca56c7c 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -41,7 +41,7 @@ } &.is-selectable { - cursor: pointer; + @extend %ui-fake-link; &:hover { color: $blue; @@ -322,7 +322,7 @@ } .action-close { - @include transition(color 0.25s ease-in-out); + @include transition(color $tmg-f2 ease-in-out); @extend %t-action1; display: inline-block; float: right; diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 7a1a140c70..ec3c5c4f75 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -22,7 +22,7 @@ .CodeMirror { border: 1px solid #3c3c3c; - background: #fff; + background: $white; color: #3c3c3c; } } @@ -41,12 +41,12 @@ } &.editing { + @extend %ui-depth4; position: relative; - z-index: 1001; padding: 0; border-top: none; border-radius: 3px; - background: #fff; + background: $white; .post-preview { display: none; @@ -88,7 +88,7 @@ .primary { border: 1px solid #ddd; - background: #f6f6f6; + background: $gray-l6; padding: 20px; } @@ -198,13 +198,13 @@ } .edit-handouts-form { + @extend %ui-depth4; @include edit-box; position: absolute; right: 0; top: 0; - z-index: 10001; width: 800px; - padding: 30px; + padding: ($baseline*1.5); textarea { height: 300px; diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss index bf00d6544d..6a5e7d88bd 100644 --- a/common/lib/xmodule/xmodule/css/annotatable/display.scss +++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss @@ -4,7 +4,7 @@ * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. * -Abarrett and Vshnayder */ -$annotatable--border-color: #C8C8C8; +$annotatable--border-color: $gray-l3; $annotatable--body-font-size: em(14); .annotatable-wrapper { @@ -16,7 +16,7 @@ $annotatable--body-font-size: em(14); .annotatable-title { font-size: em(22); text-transform: uppercase; - padding: 2px 4px; + padding: ($baseline/10) ($baseline/5); } } @@ -24,8 +24,8 @@ $annotatable--body-font-size: em(14); position: relative; padding: .5em 1em; border: 1px solid $annotatable--border-color; - border-radius: .5em; - margin-bottom: .5em; + border-radius: 0.5em; + margin-bottom: 0.5em; &.shaded { background-color: #EDEDED; } @@ -35,9 +35,9 @@ $annotatable--body-font-size: em(14); } .annotatable-section-body { border-top: 1px solid $annotatable--border-color; - margin-top: .5em; - padding-top: .5em; - @include clearfix; + margin-top: 0.5em; + padding-top: 0.5em; + @include clearfix(); } ul.instructions-template { @@ -62,8 +62,8 @@ $annotatable--body-font-size: em(14); } .annotatable-span { + @extend %ui-fake-link; display: inline; - cursor: pointer; $highlight_index: 0; @each $highlight in ( @@ -108,18 +108,18 @@ $annotatable--body-font-size: em(14); font-size: $annotatable--body-font-size; border: 1px solid #333; border-radius: 1em; - background-color: rgba(0,0,0,.85); - color: #fff; + background-color: rgba(0,0,0,0.85); + color: $white; -webkit-font-smoothing: antialiased; .ui-tooltip-titlebar { font-size: em(16); color: inherit; background-color: transparent; - padding: 5px 10px; + padding: ($baseline/4) ($baseline/2); border: none; .ui-tooltip-title { - padding: 5px 0px; + padding: ($baseline/4) 0; border-bottom: 2px solid #333; font-weight: bold; } @@ -129,7 +129,7 @@ $annotatable--body-font-size: em(14); } .ui-state-hover { color: inherit; - border: 1px solid #ccc; + border: 1px solid $gray-l3; } } .ui-tooltip-content { @@ -137,7 +137,7 @@ $annotatable--body-font-size: em(14); font-size: em(14); text-align: left; font-weight: 400; - padding: 0 10px 10px 10px; + padding: 0 ($baseline/2) ($baseline/2) ($baseline/2); background-color: transparent; border-color: transparent; } @@ -150,10 +150,10 @@ $annotatable--body-font-size: em(14); .ui-tooltip.qtip.ui-tooltip-annotatable { max-width: 375px; .ui-tooltip-content { - padding: 0 10px; + padding: 0 ($baseline/2); .annotatable-comment { display: block; - margin: 0px 0px 10px 0; + margin: 0 0 ($baseline/2) 0; max-height: 225px; overflow: auto; line-height: normal; @@ -161,7 +161,7 @@ $annotatable--body-font-size: em(14); .annotatable-reply { display: block; border-top: 2px solid #333; - padding: 5px 0; + padding: ($baseline/4) 0; margin: 0; text-align: center; } @@ -174,8 +174,8 @@ $annotatable--body-font-size: em(14); left: 50%; height: 0; width: 0; - margin-left: -5px; + margin-left: -($baseline/4); border: 10px solid transparent; - border-top-color: rgba(0, 0, 0, .85); + border-top-color: rgba(0, 0, 0, 0.85); } } diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index 1c318b8f24..465f73081e 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -2,12 +2,12 @@ $annotation-yellow: rgba(255,255,10,0.3); h2 { margin-top: 0; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); &.problem-header { display: inline-block; section.staff { - margin-top: 30px; + margin-top: ($baseline*1.5); font-size: 80%; } } @@ -33,7 +33,7 @@ iframe[seamless]{ div.problem-progress { display: inline-block; - padding-left: 5px; + padding-left: ($baseline/4); color: #666; font-weight: 100; font-size: em(16); @@ -55,7 +55,7 @@ div.problem { } .choicegroup { - @include clearfix; + @include clearfix(); min-width: 100px; width: auto !important; width: 100px; @@ -63,18 +63,18 @@ div.problem { label { @include float(left); clear: both; - margin-bottom: 5px; + margin-bottom: ($baseline/4); &.choicegroup_correct { &:after { - margin-left: 15px; + margin-left: ($baseline*0.75); content: url('../images/correct-icon.png'); } } &.choicegroup_incorrect { &:after { - margin-left: 15px; + margin-left: ($baseline*0.75); content: url('../images/incorrect-icon.png'); } } @@ -123,7 +123,7 @@ div.problem { display: block; border: 1px solid #ddd; padding: 9px 15px $baseline; - background: #fff; + background: $white; position: relative; box-shadow: inset 0 0 0 1px #eee; border-radius: 3px; @@ -138,9 +138,9 @@ div.problem { > span { margin: $baseline 0; display: block; - border: 1px solid #000; + border: 1px solid $black; padding: 9px 15px $baseline; - background: #fff; + background: $white; position: relative; box-shadow: inset 0 0 0 1px #eee; border-radius: 3px; @@ -214,7 +214,7 @@ div.problem { > span { display: block; - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } p.answer { @@ -246,7 +246,7 @@ div.problem { img.loading { display: inline-block; - padding-left: 10px; + padding-left: ($baseline/2); } span { @@ -317,11 +317,11 @@ div.problem { .grader-status { - @include clearfix; + @include clearfix(); margin: $baseline/2 0; padding: $baseline/2; border-radius: 5px; - background: #F6F6F6; + background: $gray-l6; span { display: block; @@ -350,7 +350,7 @@ div.problem { padding: $baseline 0 0 0; border: 0; border-top: 1px solid #eee; - background: #fff; + background: $white; p.debug { display: none; @@ -364,7 +364,7 @@ div.problem { } .evaluation { p { - margin-bottom: 4px; + margin-bottom: ($baseline/5); } } @@ -393,7 +393,7 @@ div.problem { margin-left: 50px; &:first-child { - margin-left: 0px; + margin-left: 0; } label { @@ -449,7 +449,7 @@ div.problem { } li { - margin-bottom: lh(.5); + margin-bottom: lh(0.5); line-height: 1.4em; &:last-child { @@ -513,7 +513,7 @@ div.problem { padding: 0px 5px; border: 1px solid #eaeaea; border-radius: 3px; - background-color: #f8f8f8; + background-color: $gray-l6; white-space: nowrap; font-size: .9em; } @@ -521,9 +521,9 @@ div.problem { pre { overflow: auto; padding: 6px $baseline/2; - border: 1px solid #ccc; + border: 1px solid $gray-l3; border-radius: 3px; - background-color: #f8f8f8; + background-color: $gray-l6; font-size: .9em; line-height: 1.4; @@ -562,12 +562,12 @@ div.problem { resize: none; &.CodeMirror-cursor { + @extend %ui-depth1; position: absolute; - z-index: 10; visibility: hidden; width: 0; border-right: none; - border-left: 1px solid black; + border-left: 1px solid $black; } } } @@ -602,7 +602,7 @@ div.problem { display: block; margin: lh() 0; padding: lh(); - border: 1px solid #ccc; + border: 1px solid $gray-l3; } div.action { @@ -631,7 +631,7 @@ div.problem { // border: 1px solid #ddd; // border-radius: 3px; // padding: 8px 12px; - // margin-top: 10px; + // margin-top: ($baseline/2); display: inline-block; margin-top: 8px; @include margin-left($baseline/2); @@ -711,13 +711,13 @@ div.problem { } .hints { - border: 1px solid #ccc; + border: 1px solid $gray-l3; h3 { padding: 9px; border-bottom: 1px solid #e3e3e3; background: #eee; - text-shadow: 0 1px 0 #fff; + text-shadow: 0 1px 0 $white; font-weight: bold; font-size: em(16); } @@ -737,8 +737,8 @@ div.problem { a { display: block; padding: 9px; - background: #f6f6f6; - box-shadow: inset 0 0 0 1px #fff; + background: $gray-l6; + box-shadow: inset 0 0 0 1px $white; } } @@ -765,11 +765,11 @@ div.problem { > section { position: relative; - margin-bottom: $baseline/2; + margin-bottom: ($baseline/2); padding: 9px 9px $baseline; border: 1px solid #ddd; border-radius: 3px; - background: #fff; + background: $white; box-shadow: inset 0 0 0 1px #eee; p:last-of-type { @@ -781,20 +781,20 @@ div.problem { } a.full { - @include position(absolute, 0 0px 1px 0px); + @include position(absolute, 0 0 1px 0); @include box-sizing(border-box); display: block; - padding: 4px; - background: #f3f3f3; + padding: ($baseline/5); + background: $gray-l4; text-align: right; font-size: 1em; &.full-top { - @include position(absolute, 1px 0px auto 0px); + @include position(absolute, 1px 0 auto 0); } &.full-bottom { - @include position(absolute, auto 0px 1px 0px); + @include position(absolute, auto 0 1px 0); } } } @@ -822,8 +822,8 @@ div.problem { padding: 0; .result-errors { - margin: $baseline/4; - padding: $baseline/2 $baseline/2 $baseline/2 $baseline*2; + margin: ($baseline/4); + padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2); background: url('../images/incorrect-icon.png') center left no-repeat; li { @@ -833,7 +833,7 @@ div.problem { .result-output { margin: $baseline/4; - padding: $baseline 0 15px 50px; + padding: $baseline 0 ($baseline*0.75) 50px; border-top: 1px solid #ddd; border-left: $baseline solid #fafafa; @@ -872,7 +872,7 @@ div.problem { } .markup-text{ - margin: 5px; + margin: ($baseline/4); padding: $baseline 0 15px 50px; border-top: 1px solid #ddd; border-left: 20px solid #fafafa; @@ -891,19 +891,19 @@ div.problem { .rubric { tr { - margin: $baseline/2 0; + margin: ($baseline/2) 0; height: 100%; } td { - margin: $baseline/2 0; + margin: ($baseline/2) 0; padding: $baseline 0; height: 100%; } th { - margin: $baseline/4; - padding: $baseline/4; + margin: ($baseline/4); + padding: ($baseline/4); } label, @@ -911,12 +911,12 @@ div.problem { position: relative; display: inline-block; margin: 3px; - padding: 15px; + padding: ($baseline*0.75); min-width: 50px; min-height: 50px; width: 150px; height: 100%; - background-color: #ccc; + background-color: $gray-l3; font-size: .9em; } @@ -924,7 +924,7 @@ div.problem { position: absolute; right: 0; bottom: 0; - margin: $baseline/2; + margin: ($baseline/2); } .selected-grade { @@ -944,12 +944,12 @@ div.problem { .annotation-input { margin: 0 0 1em 0; - border: 1px solid #ccc; + border: 1px solid $gray-l3; border-radius: 1em; .annotation-header { padding: .5em 1em; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $gray-l3; font-weight: bold; } @@ -989,10 +989,10 @@ div.problem { margin: 1em 0 0 0; .tag { + @extend %ui-fake-link; display: inline-block; - margin-left: $baseline*2; + margin-left: ($baseline*2); border: 1px solid rgb(102,102,102); - cursor: pointer; &.selected { background-color: $annotation-yellow; @@ -1022,13 +1022,13 @@ div.problem { .debug-value { margin: 1em 0; padding: 1em; - border: 1px solid #000; + border: 1px solid $black; background-color: #999; - color: #fff; + color: $white; input[type="text"] { width: 100%; } - pre { background-color: #CCC; color: #000; } + pre { background-color: $gray-l3; color: $black; } &:before { display: block; diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss index bf66825eb9..8da727fecc 100644 --- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss +++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss @@ -3,11 +3,11 @@ h2 { margin-top: 0; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); &.problem-header { section.staff { - margin-top: 30px; + margin-top: ($baseline*1.5); font-size: 80%; } } @@ -21,7 +21,7 @@ h2 { // Problem Header div.name{ - padding-bottom: 15px; + padding-bottom: ($baseline*0.75); h2 { display: inline; @@ -39,14 +39,14 @@ div.name{ } section.combined-open-ended { - @include clearfix; + @include clearfix(); .written-feedback { position: relative; - margin: 0px; + margin: 0; height: 150px; border: 1px solid lightgray; - padding: 5px; + padding: ($baseline/4); resize: vertical; width: 99%; overflow: auto; @@ -64,11 +64,11 @@ section.combined-open-ended { div.problemwrapper { border: 1px solid lightgray; - border-radius: $baseline/2; + border-radius: ($baseline/2); .status-bar { background-color: #eee; - border-radius: $baseline/2 $baseline/2 0 0; + border-radius: ($baseline/2) ($baseline/2) 0 0; border-bottom: 1px solid lightgray; .statustable { @@ -81,33 +81,33 @@ div.problemwrapper { text-align: center; .status-elements { - border-radius: $baseline/4; + border-radius: ($baseline/4); border: 1px solid lightgray; } } .problemtype-container { - padding: $baseline/2; + padding: ($baseline/2); width: 60%; } .problemtype{ - padding: $baseline/2; + padding: ($baseline/2); } .assessments-container { float: right; - padding: $baseline/2 $baseline $baseline/2 $baseline/2; + padding: ($baseline/2) $baseline ($baseline/2) ($baseline/2); .assessment-text { display: inline-block; display: table-cell; - padding-right: $baseline/2; + padding-right: ($baseline/2); } } } .item-container { - padding-bottom: $baseline/2; + padding-bottom: ($baseline/2); margin: 15px; } @@ -120,11 +120,11 @@ div.problemwrapper { section.legend-container { margin: 15px; - border-radius: $baseline/4; + border-radius: ($baseline/4); .legenditem { display: inline; - padding: $baseline/2; + padding: ($baseline/2); width: 20%; background-color: #eee; font-size: .9em; @@ -136,7 +136,7 @@ section.combined-open-ended-status { .statusitem { display: table-cell; - padding: $baseline/2; + padding: ($baseline/2); width: 30px; border-right: 1px solid lightgray; background-color: #eee; @@ -144,16 +144,16 @@ section.combined-open-ended-status { font-size: .9em; &:first-child { - border-radius: $baseline/4 0 0 $baseline/4; + border-radius: ($baseline/4) 0 0 ($baseline/4); } &:last-child { border-right: 0; - border-radius: 0 $baseline/4 $baseline/4 0; + border-radius: 0 ($baseline/4) ($baseline/4) 0; } &:only-child { - border-radius: $baseline/4; + border-radius: ($baseline/4); } .show-results { @@ -167,7 +167,7 @@ section.combined-open-ended-status { } .statusitem-current { - background-color: #fff; + background-color: $white; color: #222; } @@ -226,7 +226,7 @@ section.combined-open-ended-status { .section-header { display: block; float: right; - padding-top: $baseline/2; + padding-top: ($baseline/2); width: 15%; text-align: center; font-size: .9em; @@ -236,33 +236,33 @@ section.combined-open-ended-status { .wrapper-score-selection { display: table-cell; - padding: 0 $baseline/2; + padding: 0 ($baseline/2); width: 20px; vertical-align: middle; } .wrappable { display: table-cell; - padding: $baseline/4; + padding: ($baseline/4); } .rubric-list-item { - margin-bottom: 2px; - padding: $baseline/2; + margin-bottom: ($baseline/10); + padding: ($baseline/2); &:hover, &:focus { background-color: #eee; } .rubric-label-selected{ - border-radius: $baseline/4; + border-radius: ($baseline/4); background-color: #eee; } } span.rubric-category { display: block; - margin-bottom: $baseline/2; - padding-top: $baseline/2; + margin-bottom: ($baseline/2); + padding-top: ($baseline/2); width: 100%; border-bottom: 1px solid lightgray; font-size: 1.1em; @@ -270,25 +270,25 @@ span.rubric-category { div.combined-rubric-container { margin: 15px; - padding-top: $baseline/2; - padding-bottom: $baseline/4; + padding-top: ($baseline/2); + padding-bottom: ($baseline/4); ul.rubric-list { - margin: 0 $baseline $baseline/2 $baseline; + margin: 0 $baseline ($baseline/2) $baseline; padding: 0; list-style-type: none; li { &.rubric-list-item { - margin-bottom: 2px; - padding: $baseline/2; + margin-bottom: ($baseline/10); + padding: ($baseline/2); } } } h4 { - padding-top: $baseline/2; + padding-top: ($baseline/2); } span.rubric-category { @@ -301,34 +301,34 @@ div.combined-rubric-container { label.choicegroup_correct { &:before { - margin-right: 15px; + margin-right: ($baseline*0.75); content: url('../images/correct-icon.png'); } } label.choicegroup_partialcorrect { &:before { - margin-right: 15px; + margin-right: ($baseline*0.75); content: url('../images/partially-correct-icon.png'); } } label.choicegroup_incorrect { &:before { - margin-right: 15px; + margin-right: ($baseline*0.75); content: url('../images/incorrect-icon.png'); } } div.written-feedback { - background: #f6f6f6; - padding: 5px; + background: $gray-l6; + padding: ($baseline/4); } } div.result-container { - padding-top: $baseline/2; - padding-bottom: $baseline/4; + padding-top: ($baseline/2); + padding-bottom: ($baseline/4); .evaluation { p { @@ -342,7 +342,7 @@ div.result-container { } .evaluation-response { - margin-bottom: 2px; + margin-bottom: ($baseline/10); header { a { @@ -372,11 +372,11 @@ div.result-container { } .submit-message-container { - margin: $baseline/2 0; + margin: ($baseline/2) 0; } .external-grader-message { - margin-bottom: $baseline/4; + margin-bottom: ($baseline/4); section { padding-left: $baseline; @@ -384,7 +384,7 @@ div.result-container { color: #2c2c2c; font-family: monospace; font-size: 1em; - padding-top: $baseline/2; + padding-top: ($baseline/2); padding-bottom: 30px; header { @@ -400,8 +400,8 @@ div.result-container { margin: 0; .result-errors { - margin: $baseline/4; - padding: $baseline/2 $baseline/2 $baseline/2 $baseline*2; + margin: ($baseline/4); + padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2); background: url('../images/incorrect-icon.png') center left no-repeat; li { @@ -410,8 +410,8 @@ div.result-container { } .result-output { - margin: $baseline/4; - padding: $baseline 0 15px 50px; + margin: ($baseline/4); + padding: $baseline 0 ($baseline*0.75) ($baseline*2.5); border-top: 1px solid #ddd; border-left: 20px solid #fafafa; @@ -434,8 +434,8 @@ div.result-container { } .markup-text{ - margin: $baseline/4; - padding: $baseline 0 15px 50px; + margin: ($baseline/4); + padding: $baseline 0 ($baseline*0.75) ($baseline*2.5); border-top: 1px solid #ddd; border-left: 20px solid #fafafa; @@ -452,13 +452,13 @@ div.result-container { } .rubric-result-container { - padding: 2px; + padding: ($baseline/10); margin: 0; display: inline; .rubric-result { font-size: .9em; - padding: 2px; + padding: ($baseline/10); display: inline-table; } } @@ -466,16 +466,16 @@ div.result-container { div.rubric { ul.rubric-list{ - margin: 0 $baseline $baseline/2 $baseline; + margin: 0 $baseline ($baseline/2) $baseline; padding: 0; list-style: none; list-style-type: none; li { &.rubric-list-item { - margin-bottom: 2px; - padding: $baseline/2; - border-radius: $baseline/4; + margin-bottom: ($baseline/10); + padding: ($baseline/2); + border-radius: ($baseline/4); &:hover, &:focus { background-color: #eee; @@ -483,14 +483,14 @@ div.rubric { .wrapper-score-selection { display: table-cell; - padding: 0 $baseline/2; + padding: 0 ($baseline/2); width: 20px; vertical-align: middle; } .wrappable { display: table-cell; - padding: $baseline/4; + padding: ($baseline/4); } } } @@ -540,7 +540,7 @@ section.open-ended-child { padding: 9px 15px $baseline; border: 1px solid #ddd; border-radius: 3px; - background: #fff; + background: $white; box-shadow: inset 0 0 0 1px #eee; &:empty { @@ -554,7 +554,7 @@ section.open-ended-child { margin-top: -2px; } &.status { - margin: 8px 0 0 $baseline/2; + margin: 8px 0 0 ($baseline/2); text-indent: -9999px; } } @@ -610,13 +610,13 @@ section.open-ended-child { > span { display: block; - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } p.answer { display: inline-block; margin-bottom: 0; - margin-left: $baseline/2; + margin-left: ($baseline/2); &:before { content: "Answer: "; @@ -671,26 +671,26 @@ section.open-ended-child { .reload { float:right; - margin: $baseline/2; + margin: ($baseline/2); } div.short-form-response { - @include clearfix; + @include clearfix(); overflow-y: auto; margin-bottom: 0; - padding: $baseline/2; + padding: ($baseline/2); min-height: 20px; height: auto; border: 1px solid #ddd; - background: #f6f6f6; + background: $gray-l6; } .grader-status { - @include clearfix; - margin: $baseline/2 0; - padding: $baseline/2; + @include clearfix(); + margin: ($baseline/2) 0; + padding: ($baseline/2); border-radius: 5px; - background: #f6f6f6; + background: $gray-l6; span { display: block; @@ -718,7 +718,7 @@ section.open-ended-child { padding: $baseline 0 0 0; border: 0; border-top: 1px solid #eee; - background: #fff; + background: $white; p.debug { display: none; @@ -731,7 +731,7 @@ section.open-ended-child { } form.option-input { - margin: -$baseline/2 0 $baseline; + margin: -($baseline/2) 0 $baseline; padding-bottom: $baseline; select { @@ -741,8 +741,8 @@ section.open-ended-child { ul { margin-bottom: lh(); - margin-left: .75em; - margin-left: .75rem; + margin-left: 0.75em; + margin-left: 0.75rem; } ul.rubric-list{ @@ -755,7 +755,7 @@ section.open-ended-child { &.rubric-list-item { margin-bottom: 0; padding: 0; - border-radius: $baseline/4; + border-radius: ($baseline/4); } } } @@ -827,7 +827,7 @@ section.open-ended-child { .submission_feedback { display: inline-block; - margin: 8px 0 0 $baseline/2; + margin: 8px 0 0 ($baseline/2); color: #666; font-style: italic; -webkit-font-smoothing: antialiased; @@ -850,8 +850,8 @@ section.open-ended-child { div.open-ended-alert, .save_message { - margin-top: $baseline/2; - margin-bottom: $baseline/4; + margin-top: ($baseline/2); + margin-bottom: ($baseline/4); padding: 8px 12px; border: 1px solid #ebe8bf; border-radius: 3px; @@ -860,8 +860,8 @@ section.open-ended-child { } div.capa_reset { - margin-top: $baseline/2; - margin-bottom: $baseline/2; + margin-top: ($baseline/2); + margin-bottom: ($baseline/2); padding: 25px; border: 1px solid $error-red; border-radius: 3px; @@ -878,7 +878,7 @@ section.open-ended-child { } .assessment-container { - margin: $baseline*2 0px 30px 0px; + margin: ($baseline*2) 0 ($baseline*1.5) 0; .scoring-container { p { @@ -887,10 +887,10 @@ section.open-ended-child { label { display: inline-block; - margin: $baseline/2; - padding: $baseline/4; + margin: ($baseline/2); + padding: ($baseline/4); min-width: 50px; - background-color: #ccc; + background-color: $gray-l3; text-size: 1.5em; } @@ -960,18 +960,18 @@ section.open-ended-child { .staff-grading { .breadcrumbs { - padding: $baseline/10; - background-color: #f6f6f6; + padding: ($baseline/10); + background-color: $gray-l6; border-radius: 5px; - margin-bottom: $baseline/2; + margin-bottom: ($baseline/2); } .prompt-wrapper { - padding-top: $baseline/2; + padding-top: ($baseline/2); .meta-info-wrapper { - padding: $baseline/2; - border-radius: $baseline/4; + padding: ($baseline/2); + border-radius: 5px; } } } @@ -979,7 +979,7 @@ section.open-ended-child { section.peer-grading-container{ div.peer-grading{ section.calibration-feedback { - padding: 20px; + padding: $baseline; } } } @@ -988,6 +988,6 @@ div.staff-info{ background-color: #eee; border-radius: 10px; border-bottom: 1px solid lightgray; - padding: 10px; - margin: 10px 0px 10px 0px; + padding: ($baseline/2); + margin: ($baseline/2) 0 ($baseline/2) 0; } diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss b/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss index 2fb94f520b..186de7925e 100644 --- a/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss +++ b/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss @@ -27,7 +27,7 @@ width: 21px; height: 21px; padding: 0; - margin: 0 5px 0 15px; + margin: 0 ($baseline/4) 0 ($baseline*0.75); border-radius: 22px; border: 1px solid #a5aaaf; background: #e5ecf3; @@ -45,8 +45,8 @@ left: 100%; width: 0; border-radius: 0 3px 3px 0; - @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px); - background-color: #fff; + @include linear-gradient(left, $shadow-l1, $transparent 4px); + background-color: $white; overflow: hidden; @include transition(width .3s linear 0s); @@ -67,7 +67,7 @@ } .row { - @include clearfix; + @include clearfix(); padding-bottom: 5px !important; margin-bottom: 10px !important; border-bottom: 1px solid #ddd !important; diff --git a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss index dab94ed2f7..beb6a70fec 100644 --- a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss +++ b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss @@ -2,8 +2,8 @@ box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1); border-radius: 2px; display: none; - margin-top: 20px; - padding: (15px); + margin-top: $baseline; + padding: ($baseline*0.75); background: rgb(253, 248, 235); } @@ -14,23 +14,23 @@ } .vote { - padding-top: 0px !important; - padding-bottom: 0px !important; + padding-top: 0 !important; + padding-bottom: 0 !important; } .wizard-view { float: left; width: 790px; - margin-right: 10px; + margin-right: ($baseline/2); } .wizard-container { width: 3000px; - -webkit-transition:all 1.0s ease-in-out; - -moz-transition:all 1.0s ease-in-out; - -o-transition:all 1.0s ease-in-out; - transition:all 1.0s ease-in-out; + -webkit-transition:all $tmg-s1 ease-in-out; + -moz-transition:all $tmg-s1 ease-in-out; + -o-transition:all $tmg-s1 ease-in-out; + transition:all $tmg-s1 ease-in-out; } .wizard-viewbox { diff --git a/common/lib/xmodule/xmodule/css/editor/edit.scss b/common/lib/xmodule/xmodule/css/editor/edit.scss index 143a24b24e..b6f73894b8 100644 --- a/common/lib/xmodule/xmodule/css/editor/edit.scss +++ b/common/lib/xmodule/xmodule/css/editor/edit.scss @@ -7,16 +7,16 @@ } .editor-bar { - position: relative; + @include clearfix(); @include linear-gradient(top, #d4dee8, #c9d5e2); - padding: 5px; + position: relative; + padding: ($baseline/4); border-bottom-color: #a5aaaf; - @include clearfix; a { display: block; float: left; - padding: 3px 10px 7px; + padding: 3px ($baseline/2) 7px; margin-left: 7px; border-radius: 2px; @@ -33,7 +33,7 @@ li { float: left; - margin-right: 5px; + margin-right: ($baseline/4); &:last-child { margin-right: 0; @@ -46,15 +46,15 @@ padding: 7px 20px 3px; border: 1px solid #a5aaaf; 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; font-size: 13px; color: #3c3c3c; box-shadow: 1px -1px 1px rgba(0, 0, 0, .05); &.current { - background: #fff; - border-bottom-color: #fff; + background: $white; + border-bottom-color: $white; } } } diff --git a/common/lib/xmodule/xmodule/css/foldit/leaderboard.scss b/common/lib/xmodule/xmodule/css/foldit/leaderboard.scss index 5342c985c2..3173ffbcdc 100644 --- a/common/lib/xmodule/xmodule/css/foldit/leaderboard.scss +++ b/common/lib/xmodule/xmodule/css/foldit/leaderboard.scss @@ -5,7 +5,7 @@ section.foldit { table { border: 1px solid lighten($leaderboard, 10%); border-collapse: collapse; - margin-top: 20px; + margin-top: $baseline; } th { background: $leaderboard; @@ -13,7 +13,7 @@ section.foldit { } td { background: lighten($leaderboard, 3%); - border-bottom: 1px solid #fff; + border-bottom: 1px solid $white; padding: 8px; } } diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss index c560027b12..ab70411075 100644 --- a/common/lib/xmodule/xmodule/css/html/display.scss +++ b/common/lib/xmodule/xmodule/css/html/display.scss @@ -14,13 +14,13 @@ h2 { color: #646464; font: normal 1.2em/1.2em $sans-serif; letter-spacing: 1px; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); text-transform: uppercase; -webkit-font-smoothing: antialiased; } h3, h4, h5, h6 { - margin: 0 0 10px 0; + margin: 0 0 ($baseline/2) 0; font-weight: 600; } @@ -64,11 +64,11 @@ strong, b { } p + p, ul + p, ol + p { - margin-top: 20px; + margin-top: $baseline; } blockquote { - margin: 1em 40px; + margin: 1em ($baseline*2); } ol, ul { @@ -117,14 +117,14 @@ code { table { width: 100%; - margin: 20px 0; + margin: $baseline 0; border-collapse: collapse; font-size: 16px; td, th { - margin: 20px 0; - padding: 10px; - border: 1px solid #ccc; + margin: $baseline 0; + padding: ($baseline/2); + border: 1px solid $gray-l3; font-size: 14px; &.cont-justified-left { @@ -154,10 +154,10 @@ th { .wrapper-modal-image { .modal-ui-icon { + @extend %ui-fake-link; position: absolute; display: block; - padding: 5px 7px; - cursor: pointer; + padding: ($baseline/4) 7px; border-radius: 5px; opacity: .9; background: $white; @@ -174,9 +174,9 @@ th { } .image-link { + @extend %ui-fake-link; position: relative; display: block; - cursor: pointer; .action-fullscreen { display: none; @@ -190,14 +190,14 @@ th { } .image-modal { + @extend %ui-fake-link; + @extend %ui-depth5; position: fixed; top: 0; left: 0; display: none; height: 100%; width: 100%; - @extend %ui-depth5; - cursor: pointer; background-color: rgba(0, 0, 0, 0.7); .image-content { @@ -245,13 +245,13 @@ th { position: relative; &.action-zoom-in { - margin-right: 5px; + margin-right: ($baseline/4); } &.action-zoom-out { - margin-left: 5px; + margin-left: ($baseline/4); } &.is-disabled { - opacity: .5; + opacity: 0.5; cursor: default; } } diff --git a/common/lib/xmodule/xmodule/css/lti/lti.scss b/common/lib/xmodule/xmodule/css/lti/lti.scss index 1582a9ca9c..e7ca5c7be2 100644 --- a/common/lib/xmodule/xmodule/css/lti/lti.scss +++ b/common/lib/xmodule/xmodule/css/lti/lti.scss @@ -4,7 +4,7 @@ h2.problem-header { div.problem-progress { display: inline-block; - padding-left: 5px; + padding-left: ($baseline/4); color: #666; font-weight: 100; font-size: em(16); @@ -50,8 +50,8 @@ div.lti { } div.problem-feedback { - margin-top: 5px; - margin-bottom: 5px; + margin-top: ($baseline/4); + margin-bottom: ($baseline/4); } } diff --git a/common/lib/xmodule/xmodule/css/poll/display.scss b/common/lib/xmodule/xmodule/css/poll/display.scss index 9926611fa9..f4c14ac470 100644 --- a/common/lib/xmodule/xmodule/css/poll/display.scss +++ b/common/lib/xmodule/xmodule/css/poll/display.scss @@ -15,13 +15,13 @@ div.poll_question { h3 { margin-top: 0; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); color: #fe57a1; font-size: 1.9em; &.problem-header { div.staff { - margin-top: 30px; + margin-top: ($baseline*1.5); font-size: 80%; } } @@ -39,7 +39,7 @@ div.poll_question { } .poll_answer { - margin-bottom: 20px; + margin-bottom: $baseline; &.short { clear: both; @@ -58,6 +58,7 @@ div.poll_question { } .button { + @extend %ui-fake-link; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-border-image: none; @@ -89,7 +90,6 @@ div.poll_question { box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); - cursor: pointer; /* display: inline-block; */ display: inline; @@ -103,8 +103,8 @@ div.poll_question { letter-spacing: normal; line-height: 25.59375px; - margin-bottom: 15px; - margin: 0px; + margin-bottom: ($baseline*0.75); + margin: 0; padding: 0px; text-align: center; text-decoration: none; @@ -135,15 +135,15 @@ div.poll_question { } .text { + @extend %ui-fake-link; display: inline; float: left; width: 80%; text-align: left; min-height: 30px; - margin-left: 20px; + margin-left: $baseline; height: auto; - margin-bottom: 20px; - cursor: pointer; + margin-bottom: $baseline; &.short { width: 100px; @@ -153,7 +153,7 @@ div.poll_question { .stats { min-height: 40px; - margin-top: 20px; + margin-top: $baseline; clear: both; &.short { @@ -170,7 +170,7 @@ div.poll_question { border: 1px solid black; display: inline; float: left; - margin-right: 10px; + margin-right: ($baseline/2); &.short { width: 65%; diff --git a/common/lib/xmodule/xmodule/css/problem/edit.scss b/common/lib/xmodule/xmodule/css/problem/edit.scss index 0da6d1d5d7..692985ec62 100644 --- a/common/lib/xmodule/xmodule/css/problem/edit.scss +++ b/common/lib/xmodule/xmodule/css/problem/edit.scss @@ -45,8 +45,8 @@ left: 100%; width: 0; border-radius: 0 3px 3px 0; - @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px); - background-color: #fff; + @include linear-gradient(left, $shadow-l1, $transparent 4px); + background-color: $white; overflow: hidden; @include transition(width .3s linear 0s); @@ -67,7 +67,7 @@ } .row { - @include clearfix; + @include clearfix(); padding-bottom: 5px !important; margin-bottom: 10px !important; border-bottom: 1px solid #ddd !important; diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index ebb5947b7b..3cf3843648 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -36,42 +36,42 @@ nav.sequence-nav { // TODO (cpennington): This doesn't work anymore. XModules aren't able to // import from external sources. @extend .topbar; - margin: -4px 0 30px; + margin: -4px 0 ($baseline*1.5); position: relative; border-bottom: none; .left-shadow { + @extend %ui-depth4; + @include linear-gradient(left, $shadow, $transparent); position: absolute; top: 0; left: 0; - z-index: 9999; width: 20px; height: 46px; - @include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); background-color: transparent; pointer-events: none; } .right-shadow { + @extend %ui-depth4; + @include linear-gradient(right, $shadow, $transparent); position: absolute; top: 0; right: 0; - z-index: 9999; width: 20px; height: 46px; - @include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); background-color: transparent; pointer-events: none; } .sequence-list-wrapper { - position: relative; - z-index: 99; - border: 1px solid #ccc; - height: 44px; - margin: 0 30px; + @extend %ui-depth2; @include linear-gradient(top, #ddd, #eee); - box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; + position: relative; + border: 1px solid $gray-l3; + height: 44px; + margin: 0 ($baseline*1.5); + box-shadow: 0 1px 3px $shadow-l1 inset; } ol { @@ -82,7 +82,7 @@ nav.sequence-nav { display: table; height: 100%; margin: 0; - padding: 0 10px; + padding: 0 ($baseline/2); width: 100%; a { @@ -94,31 +94,31 @@ nav.sequence-nav { min-width: 20px; a { + @extend %ui-fake-link; + @include transition(none); width: 100%; height: 42px; margin: 0; background-position: center 14px; background-repeat: no-repeat; border: 1px solid transparent; - cursor: pointer; display: block; padding: 0; position: relative; - @include transition(none); /* &:focus { outline: 0; } */ &:hover, &:focus { - background-color: #fff; + background-color: $white; background-repeat: no-repeat; background-position: center 14px; } &.active { - background-color: #fff; - z-index: 9; + @extend %ui-depth1; + background-color: $white; // &:after { // content: '▲'; @@ -132,7 +132,7 @@ nav.sequence-nav { // } &:hover, &:focus { - background-color: #fff; + background-color: $white; background-repeat: no-repeat; background-position: center 14px; } @@ -197,19 +197,19 @@ nav.sequence-nav { } p { + @extend %ui-depth2; background: #333; - color: #fff; + color: $white; font-family: $sans-serif; line-height: lh(); - right: 0px; + right: 0; opacity: 0.0; padding: 6px; position: absolute; top: 48px; - text-shadow: 0 -1px 0 #000; + text-shadow: 0 -1px 0 $black; @include transition(all .1s $ease-in-out-quart 0s); white-space: pre; - z-index: 99; visibility: hidden; pointer-events: none; @@ -238,7 +238,7 @@ nav.sequence-nav { &:hover, &:focus { p { display: block; - margin-top: 4px; + margin-top: ($baseline/5); opacity: 1.0; visibility: visible; } @@ -263,7 +263,7 @@ nav.sequence-nav { margin-bottom: 0; height: 44px; width: 70px; - border: 1px solid #ccc; + border: 1px solid $gray-l3; @include linear-gradient(top, #eee, #ddd); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; z-index: 1; @@ -357,7 +357,7 @@ nav.sequence-bottom { @include float(left); width: 50px; height: 44px; - border: 1px solid #ccc; + border: 1px solid $gray-l3; @include linear-gradient(top, #eee, #ddd); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; @@ -369,7 +369,7 @@ nav.sequence-bottom { background-repeat: no-repeat; border: none; display: block; - padding: lh(.5) 4px; + padding: lh(0.5) 4px; text-indent: -9999px; overflow: hidden; @include transition(all .2s $ease-in-out-quad 0s); diff --git a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss index 5cb2de0d41..73cd6a1293 100644 --- a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss +++ b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss @@ -22,22 +22,22 @@ $a11y--blue-s1: saturate($blue,15%); } .a11y-menu-list { + @extend %ui-depth1; top: 100%; margin: 0; padding: 0; display: none; position: absolute; - z-index: 10; list-style: none; background-color: $white; border: 1px solid #eee; li { + @extend %ui-fake-link; margin: 0; padding: 0; border-bottom: 1px solid #eee; color: $white; - cursor: pointer; a { display: block; @@ -90,12 +90,12 @@ $a11y--blue-s1: saturate($blue,15%); } > a { - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); @include font-size(12); display: block; border-radius: 0 3px 3px 0; 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; min-width: 1.5em; line-height: 14px; @@ -107,7 +107,7 @@ $a11y--blue-s1: saturate($blue,15%); @extend %use-font-awesome; content: "\f0d7"; position: absolute; - right: ($baseline*.5); + right: ($baseline*0.5); top: 33%; color: $lighter-base-font-color; } @@ -122,7 +122,7 @@ $a11y--blue-s1: saturate($blue,15%); a { border: 0; display: block; - padding: lh(.5); + padding: lh(0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -134,8 +134,9 @@ $a11y--blue-s1: saturate($blue,15%); .contextmenu, .submenu { + @extend %ui-depth5; border: 1px solid #333; - background: #fff; + background: $white; color: #333; padding: 0; margin: 0; @@ -143,7 +144,6 @@ $a11y--blue-s1: saturate($blue,15%); position: absolute; top: 0; display: none; - z-index: 999999; outline: none; cursor: default; white-space: nowrap; @@ -153,8 +153,8 @@ $a11y--blue-s1: saturate($blue,15%); } .menu-item, .submenu-item { - border-top: 1px solid #ccc; - padding: 5px 10px; + border-top: 1px solid $gray-l3; + padding: ($baseline/4) ($baseline/2); outline: none; & > span { @@ -167,17 +167,17 @@ $a11y--blue-s1: saturate($blue,15%); &:focus { background: #333; - color: #fff; + color: $white; & > span { - color: #fff; + color: $white; } } } .submenu-item { position: relative; - padding: 5px 20px 5px 10px; + padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2); &:after { content: '\25B6'; @@ -193,10 +193,10 @@ $a11y--blue-s1: saturate($blue,15%); &.is-opened { background: #333; - color: #fff; + color: $white; & > span { - color: #fff; + color: $white; } & > .submenu { @@ -211,16 +211,16 @@ $a11y--blue-s1: saturate($blue,15%); .is-disabled { pointer-events: none; - color: #ccc; + color: $gray-l3; } } .overlay { + @extend %ui-depth5; position: fixed; top: 0; left: 0; right: 0; bottom: 0; - z-index: 900000; background-color: transparent; } diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 23261f835b..a2a8863384 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -1,5 +1,5 @@ & { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .is-hidden { @@ -28,7 +28,7 @@ div.video { } div.tc-wrapper { - @include clearfix; + @include clearfix(); position: relative; } @@ -46,16 +46,16 @@ div.video { .video-download-button{ display: inline-block; vertical-align: top; - margin: ($baseline*.75) ($baseline/2) 0 0; + margin: ($baseline*0.75) ($baseline/2) 0 0; > a { - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); @include font-size(14); line-height : 14px; float: left; border-radius: 3px; background-color: $very-light-text; - padding: ($baseline*.75); + padding: ($baseline*0.75); color: $lighter-base-font-color; &:hover, &:focus { @@ -126,7 +126,7 @@ div.video { height: 0px; border-style: solid; border-width: 30px 0 30px 50px; - border-color: transparent transparent transparent #ffffff; + border-color: transparent transparent transparent $white; position: relative; } } @@ -161,9 +161,9 @@ div.video { section.video-controls { @include clearfix(); background: #333; - border: 1px solid #000; + border: 1px solid $black; border-top: 0; - color: #ccc; + color: $gray-l3; position: relative; &:hover, &:focus { @@ -173,6 +173,7 @@ div.video { } %video-button { + @extend %ui-fake-link; @include transition(none); display: block; font-weight: 800; @@ -183,21 +184,20 @@ div.video { text-indent: -9999px; -webkit-font-smoothing: antialiased; box-shadow: 1px 0 0 #555, inset 1px 0 0 #555; - color: #fff; - cursor: pointer; + color: $white; border-width: 0 1px; border-style: solid; - border-color: #000; + border-color: $black; &:hover, &:focus { background-color: #444; - color: #fff; + color: $white; text-decoration: none; } &:active, &:focus { - color: #fff; + color: $white; background-color: #444; text-decoration: none; } @@ -207,9 +207,9 @@ div.video { @include clearfix(); @include transform(scaleY(0.5) translate3d(0, 50%, 0)); background: #c2c2c2; - border: 1px solid #000; + border: 1px solid $black; border-radius: 0; - border-top: 1px solid #000; + border-top: 1px solid $black; box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555; position: absolute; z-index: 1; @@ -235,13 +235,13 @@ div.video { } a.ui-slider-handle { + @extend %ui-fake-link; @include transform(scale(.7, 1.3) translate3d(-80%, -15%, 0)); background: $pink url(../images/slider-handle.png) center center no-repeat; background-size: 50%; border: 1px solid darken($pink, 20%); border-radius: 50%; box-shadow: inset 0 1px 0 lighten($pink, 10%); - cursor: pointer; height: 20px; margin-left: 0; top: 0; @@ -264,7 +264,7 @@ div.video { padding: 0; @media (max-width: 1120px) { - margin-right: lh(.5); + margin-right: lh(0.5); font-size: em(14); } @@ -283,9 +283,9 @@ div.video { width: 14px; &:focus { + @extend %ui-depth4; position: relative; - z-index: 10000; - outline: #fff dotted thin; + outline: $white dotted thin; outline-offset: -2px; } @@ -309,7 +309,7 @@ div.video { -webkit-font-smoothing: antialiased; padding-left: lh(.75); @media (max-width: 1120px) { - padding-left: lh(.5); + padding-left: lh(0.5); } } } @@ -326,9 +326,9 @@ div.video { // overflow is used to bypass Firefox CSS :focus outline bug // http://johndoesdesign.com/blog/2012/css/firefox-and-its-css-focus-outline-bug/ &:focus { + @extend %ui-depth5; position: relative; - z-index: 10000; - outline: #fff dotted thin; + outline: $white dotted thin; outline-offset: -2px; overflow: auto; } @@ -350,26 +350,26 @@ div.video { .menu { @include transition(none); + @extend %ui-depth1; box-shadow: inset 1px 0 0 #555, 0 1px 0 #444; background-color: #444; - border: 1px solid #000; + border: 1px solid $black; bottom: 46px; display: none; opacity: 0; position: absolute; - z-index: 10; li { + @extend %ui-fake-link; box-shadow: 0 1px 0 #555; - border-bottom: 1px solid #000; - color: #fff; - cursor: pointer; + border-bottom: 1px solid $black; + color: $white; a { border: 0; - color: #fff; + color: $white; display: block; - padding: lh(.5); + padding: lh(0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -430,7 +430,7 @@ div.video { font-size: em(14); font-weight: normal; letter-spacing: 1px; - padding: 0 lh(.25) 0 lh(.5); + padding: 0 lh(0.25) 0 lh(0.5); line-height: 46px; text-transform: uppercase; color: #999; @@ -444,14 +444,14 @@ div.video { float: left; font-weight: bold; margin-bottom: 0; - padding: 0 lh(.5) 0 0; + padding: 0 lh(0.5) 0 0; @media (max-width: 1120px) { - padding: 0 lh(.5) 0 lh(.5); + padding: 0 lh(0.5) 0 lh(0.5); } line-height: 46px; - color: #fff; + color: $white; } } } @@ -486,9 +486,10 @@ div.video { .volume-slider-container { @include transition(none); + @extend %ui-depth1; box-shadow: inset 1px 0 0 #555, 0 3px 0 #444; background-color: #444; - border: 1px solid #000; + border: 1px solid $black; bottom: 46px; display: none; opacity: 0; @@ -496,7 +497,6 @@ div.video { width: 45px; height: 125px; margin-left: -1px; - z-index: 10; .volume-slider { height: 100px; @@ -504,17 +504,17 @@ div.video { width: 5px; margin: 14px auto; background: #666; - border: 1px solid #000; + border: 1px solid $black; box-shadow: 0 1px 0 #333; a.ui-slider-handle { - @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s); + @extend %ui-fake-link; + @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s); background: $pink url(../images/slider-handle.png) center center no-repeat; background-size: 50%; border: 1px solid darken($pink, 20%); border-radius: 15px; box-shadow: inset 0 1px 0 lighten($pink, 10%); - cursor: pointer; height: 15px; left: -6px; width: 15px; @@ -607,9 +607,9 @@ div.video { visibility: visible; li { + @extend %ui-fake-link; border: 0; color: rgb(29,157,217); - cursor: pointer; margin-bottom: 8px; padding: 0; line-height: lh(); @@ -629,7 +629,7 @@ div.video { } &:empty { - margin-bottom: 0px; + margin-bottom: 0; } } } @@ -643,15 +643,15 @@ div.video { } article.video-wrapper section.video-controls.html5 { - bottom: 0px; - left: 0px; - right: 0px; + bottom: 0; + left: 0; + right: 0; position: absolute; z-index: 1; } article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post { - height: 0px; + height: 0; } article.video-wrapper section.video-player { @@ -666,6 +666,7 @@ div.video { } ol.subtitles.html5 { + @extend %ui-depth0; background-color: rgba(243, 243, 243, 0.8); height: 100%; position: absolute; @@ -673,13 +674,13 @@ div.video { bottom: 0; top: 0; width: 275px; - padding: 0 20px; - z-index: 0; + padding: 0 $baseline; display: none; } } &.video-fullscreen { + @extend %ui-depth4; background: rgba(#000, .95); border: 0; bottom: 0; @@ -690,7 +691,6 @@ div.video { position: fixed; top: 0; width: 100%; - z-index: 9999; vertical-align: middle; border-radius: 0; @@ -703,7 +703,7 @@ div.video { } article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post { - height: 0px; + height: 0; } article.video-wrapper { @@ -717,7 +717,7 @@ div.video { } div.tc-wrapper { - @include clearfix; + @include clearfix(); width: 100%; height: 100%; @@ -737,18 +737,18 @@ div.video { } section.video-controls { + @extend %ui-depth4; bottom: 0; left: 0; position: absolute; - width: 100%; - z-index: 9999; + width: 100%; } } ol.subtitles { @include box-sizing(border-box); @include transition(none); - background: #000; + background: $black; height: 100%; width: 25%; padding: lh(); @@ -758,7 +758,7 @@ div.video { color: #aaa; &.current { - color: #fff; + color: $white; } } } diff --git a/common/lib/xmodule/xmodule/css/word_cloud/display.scss b/common/lib/xmodule/xmodule/css/word_cloud/display.scss index 0c6bcd4a46..36bbce6a27 100644 --- a/common/lib/xmodule/xmodule/css/word_cloud/display.scss +++ b/common/lib/xmodule/xmodule/css/word_cloud/display.scss @@ -1,5 +1,5 @@ .input-cloud { - margin: 5px; + margin: ($baseline/4); } .result_cloud_section { diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss index 4bc7b32f32..b26def49e2 100644 --- a/common/static/sass/_mixins-inherited.scss +++ b/common/static/sass/_mixins-inherited.scss @@ -1,7 +1,7 @@ // 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. -// 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 // ==================== @@ -122,7 +122,7 @@ @include transition(background-color 0.15s, box-shadow 0.15s); @extend %t-action3; @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; padding: ($baseline/5) $baseline ($baseline/4); @@ -320,11 +320,11 @@ h5 { @extend %t-strong; margin-bottom: 8px; - color: #fff; + color: $white; } .row { - margin-bottom: 10px; + margin-bottom: ($baseline/2); padding: 0; border: none; } @@ -345,7 +345,7 @@ // sunsetted mixins @mixin active { @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); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 101d2874c1..29b8c613e6 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -1,34 +1,58 @@ // 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){ font-size: $sizeValue + px; font-size: ($sizeValue/10) + rem; } -// mixins - line height +// +Line Height - Mixin +// ==================== @mixin line-height($fontSize: auto){ line-height: ($fontSize*1.48) + px; line-height: (($fontSize/10)*1.48) + rem; } -// ==================== - -// mixins - sizing +// +Sizing - Mixin +// ==================== @mixin size($width: $baseline, $height: $baseline) { height: $height; width: $width; } -// mixins - sizing +// +Square - Mixin +// ==================== @mixin square($size: $baseline) { @include size($size); } -// ==================== - -// mixins - placeholder styling +// +Placeholder Styling - Mixin +// ==================== @mixin placeholder($color) { :-moz-placeholder { color: $color; @@ -41,9 +65,8 @@ } } -// ==================== - -// mixins - flex support +// +Flex Support - Mixin +// ==================== @mixin ui-flexbox() { display: -webkit-box; display: -moz-box; @@ -52,7 +75,10 @@ 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 { -webkit-box-pack: flex-end; -moz-box-pack: flex-end; @@ -61,7 +87,7 @@ 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 { -webkit-box-pack: flex-start; -moz-box-pack: flex-start; @@ -70,7 +96,7 @@ 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 { -webkit-flex-align: center; -ms-flex-align: center; @@ -78,9 +104,10 @@ 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 { @include clearfix(); @include box-sizing(border-box); @@ -99,9 +126,8 @@ @include float(left); } - - -// extends - UI - window +// +UI - Window - Extends +// ==================== %ui-window { @include clearfix(); border-radius: ($baseline/10); @@ -116,19 +142,22 @@ } } -// extends - UI - visual link +// +UI - Visual Link - Extends +// ==================== %ui-fake-link { cursor: pointer; } -// extends - UI - functional disable +// +UI - Functional Disable - Extends +// ==================== %ui-disabled { pointer-events: none; outline: none; cursor: default; } -// extends - UI - depth levels +// +UI - Depth Levels - Extends +// ==================== %ui-depth0 { z-index: 0; } %ui-depth1 { z-index: 10; } %ui-depth2 { z-index: 100; } @@ -137,7 +166,9 @@ %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 { &:first-child { @@ -147,7 +178,7 @@ } } -// extends - UI - utility - nth-type style clearing +// extends - UI - utility - last child clearing %wipe-last-child { &:last-child { @@ -157,10 +188,11 @@ } } -// extends - UI - buttons +// +UI - Buttons - Extends +// ==================== %ui-btn { @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; cursor: pointer; @@ -295,7 +327,8 @@ } } -// extends - UI archetypes - well +// +UI - Well Archetype - Extends +// ==================== %ui-well { box-shadow: inset 0 1px 2px 1px $shadow; padding: ($baseline*0.75) $baseline; @@ -343,9 +376,9 @@ display: none; } -// ==================== - -// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases +// +Content - No List - Extends +// ==================== +// removes list styling/spacing when using uls, ols for navigation and less content-centric cases %cont-no-list { list-style: none; margin: 0; @@ -358,14 +391,17 @@ } } -// extends - content - image-replacement hidden text +// +Content - Hidden Image Text - Extend +// ==================== +// image-replacement hidden text %cont-text-hide { text-indent: 100%; white-space: nowrap; overflow: hidden; } -// extends - content - hidden elems - screenreaders +// +Content - Screenreader Text - Extend +// ==================== %cont-text-sr { border: 0; clip: rect(0 0 0 0); @@ -377,12 +413,14 @@ width: 1px; } -// extends - content - wrapping +// +Content - Text Wrap - Extend +// ==================== %cont-text-wrap { word-wrap: break-word; } -// extends - content - text overflow by ellipsis +// +Content - Text Truncate - Extend +// ==================== %cont-truncated { @include box-sizing(border-box); overflow: hidden; diff --git a/common/static/sass/neat/functions/_private.scss b/common/static/sass/neat/functions/_private.scss index 6f03cfcc7c..25dd271e3e 100644 --- a/common/static/sass/neat/functions/_private.scss +++ b/common/static/sass/neat/functions/_private.scss @@ -64,7 +64,7 @@ // Generates a striped background @function gradient-stops($grid-columns, $color: $visual-grid-color) { - $transparent: rgba(0,0,0,0); + $transparent: $transparent; $column-width: flex-grid(1, $grid-columns); $gutter-width: flex-gutter($grid-columns); diff --git a/common/static/sass/neat/grid/_outer-container.scss b/common/static/sass/neat/grid/_outer-container.scss index 22c541f455..0709518132 100644 --- a/common/static/sass/neat/grid/_outer-container.scss +++ b/common/static/sass/neat/grid/_outer-container.scss @@ -1,5 +1,5 @@ @mixin outer-container { - @include clearfix; + @include clearfix(); max-width: $max-width; margin: { left: auto; diff --git a/common/static/sass/neat/grid/_visual-grid.scss b/common/static/sass/neat/grid/_visual-grid.scss index 1c822fd322..76defd2ca9 100644 --- a/common/static/sass/neat/grid/_visual-grid.scss +++ b/common/static/sass/neat/grid/_visual-grid.scss @@ -27,7 +27,7 @@ } @else if $visual-grid-index == front { - z-index: 9999; + z-index: 9999; } @each $breakpoint in $visual-grid-breakpoints { diff --git a/lms/static/sass/_news.scss b/lms/static/sass/_news.scss index 52310c14a5..9d73cfc578 100644 --- a/lms/static/sass/_news.scss +++ b/lms/static/sass/_news.scss @@ -5,14 +5,14 @@ .notifications { @include news-font; font-size: 0.9em; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; + padding-left: $baseline; + padding-top: $baseline; + padding-bottom: $baseline; .notification { @include news-font; - margin-top: 15px; - margin-bottom: 15px; + margin-top: ($baseline*0.75); + margin-bottom: ($baseline*0.75); a { @include news-font; diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index 432e8e0309..e4b2db6ab3 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -8,7 +8,7 @@ // extends btn %m-btn { @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; cursor: pointer; text-decoration: none; @@ -171,7 +171,7 @@ display: block; .track { - @include transition(all 0.25s ease-in-out); + @include transition(all $tmg-f2 ease-in-out); color: $white; display: block; font-size: 13px; diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index b4adb76d81..6d279a8d47 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -21,14 +21,14 @@ body { h1, h2, h3, h4, h5, h6 { color: $base-font-color; font: normal 1.2em/1.2em $serif; - margin: 0px; + margin: 0; } h1 { color: $base-font-color; font: normal 2em/1.4em $sans-serif; letter-spacing: 1px; - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); text-align: center; //text-transform: uppercase; } @@ -37,19 +37,19 @@ h2 { color: $lighter-base-font-color; font: normal 1.2em/1.2em $serif; letter-spacing: 1px; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); text-transform: uppercase; -webkit-font-smoothing: antialiased; } p + h2, ul + h2, ol + h2 { - margin-top: 40px; + margin-top: ($baseline*2); } p { color: $base-font-color; font: normal 1em/1.6em $serif; - margin: 0px; + margin: 0; } span { @@ -72,7 +72,7 @@ span { } p + p, ul + p, ol + p { - margin-top: 20px; + margin-top: $baseline; } p { @@ -122,10 +122,10 @@ a:focus { } .container { - @include clearfix; + @include clearfix(); @include box-sizing(border-box); margin: 0 auto 0; - padding: 0px 30px; + padding: 0 ($baseline*1.5); max-width: grid-width(12); min-width: 760px; width: flex-grid(12); @@ -137,10 +137,10 @@ span.edx { } .static-container { - @include clearfix; + @include clearfix(); margin: 0 auto 0; max-width: 1200px; - padding: 60px 0px 120px; + padding: ($baseline*3) 0 ($baseline*6); width: flex-grid(12); .inner-wrapper { @@ -154,24 +154,24 @@ span.edx { li { color: $base-font-color; font: normal 1em/1.4em $serif; - margin: 0px; + margin: 0; } } h1 { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } h1 + hr { - margin-bottom: 60px; + margin-bottom: ($baseline*3); } p + h2, ul + h2, ol + h2 { - margin-top: 40px; + margin-top: ($baseline*2); } ul + p, ol + p { - margin-top: 20px; + margin-top: $baseline; } } @@ -180,7 +180,7 @@ span.edx { left: 50%; width: 20px; height: 20px; - margin-left: -10px; + margin-left: -($baseline/2); background: url(../images/spinner.gif) no-repeat; } @@ -193,8 +193,8 @@ mark { .site-status { display: none; - padding: 10px; - @include linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .0)); + padding: ($baseline/2); + @include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0)); background-color: $site-status-color; box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset; font-size: 14px; @@ -206,7 +206,7 @@ mark { display: block; width: 27px; height: 24px; - margin-right: 15px; + margin-right: ($baseline*0.75); background: url(../images/large-white-error-icon.png) no-repeat; } @@ -218,7 +218,7 @@ mark { p { line-height: 1.3; - color: #fff; + color: $white; } } @@ -230,7 +230,7 @@ mark { border-radius: 0 0 3px 3px; background: #f4f4e0; color: #3c3c3c; - padding: 5px 20px 8px; + padding: ($baseline/4) $baseline 8px; font-size: 13px; text-align: center; @@ -242,17 +242,17 @@ mark { .help-tab { @include transform(rotate(-90deg)); @include transform-origin(0 0); + @extend %ui-depth2; top: 250px; left: 0; position: fixed; - z-index: 99; a:link, a:visited { cursor: pointer; - border: 1px solid #ccc; + border: 1px solid $gray-l3; border-top-style: none; - border-radius: 0px 0px 10px 10px; - background: transparentize(#fff, 0.25); + border-radius: 0 0 ($baseline/2) ($baseline/2); + background: transparentize($white, 0.25); color: transparentize(#333, 0.25); font-weight: bold; text-decoration: none; @@ -260,36 +260,36 @@ mark { display: inline-block; &:hover, &:focus { - color: #fff; + color: $white; background: $link-color; } } } .help-buttons { - padding: 10px 50px; + padding: ($baseline/2) ($baseline*2.5); a:link, a:visited { - padding: 15px 0px; + padding: ($baseline*0.75) 0; text-align: center; cursor: pointer; - background: #fff; + background: $white; text-decoration: none; display: block; - border: 1px solid #ccc; + border: 1px solid $gray-l3; &#feedback_link_problem { border-bottom-style: none; - border-radius: 10px 10px 0px 0px; + border-radius: ($baseline/2) ($baseline/2) 0 0; } &#feedback_link_question { border-top-style: none; - border-radius: 0px 0px 10px 10px; + border-radius: 0 0 ($baseline/2) ($baseline/2); } &:hover, &:focus { - color: #fff; + color: $white; background: $link-color; } } @@ -306,7 +306,7 @@ mark { #feedback_success_wrapper { p { - padding: 0 20px 20px 20px; + padding: 0 $baseline $baseline $baseline; } } @@ -336,8 +336,8 @@ mark { .nav-skip { display: block; position: absolute; - left: 0px; - top:- ($baseline*30); + left: 0; + top: -($baseline*30); width: 1px; height: 1px; overflow: hidden; diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 265062d5b8..83c8194b24 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -1,6 +1,7 @@ -// lms variables +// lms - utilities - variables +// ==================== -// base +// BASE $baseline: 20px; // ==================== @@ -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 // COLORS -$black: rgb(0,0,0); +$black: rgb(0,0,0); // #000000; $black-t0: rgba($black, 0.125); $black-t1: rgba($black, 0.25); $black-t2: rgba($black, 0.5); $black-t3: rgba($black, 0.75); -$white: rgb(255,255,255); +$white: rgb(255,255,255); // #FFFFFF; $white-t0: rgba($white, 0.125); $white-t1: rgba($white, 0.25); $white-t2: rgba($white, 0.5); @@ -81,7 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c $gray-d3: shade($gray,60%); // #323232 $gray-d4: shade($gray,80%); // #191919 -$pink: rgb(182,37,103); +$pink: rgb(182,37,103); // #b72567; $pink-l1: tint($pink,20%); $pink-l2: tint($pink,40%); $pink-l3: tint($pink,60%); @@ -98,7 +99,7 @@ $pink-u1: desaturate($pink,15%); $pink-u2: desaturate($pink,30%); $pink-u3: desaturate($pink,45%); -$red: rgb(178, 6, 16); +$red: rgb(178, 6, 16); // #b20610; $red-l1: tint($red,20%); $red-l2: tint($red,40%); $red-l3: tint($red,60%); @@ -115,7 +116,7 @@ $red-u1: desaturate($red,15%); $red-u2: desaturate($red,30%); $red-u3: desaturate($red,45%); -$green: rgb(37, 184, 90); +$green: rgb(37, 184, 90); // #25b85a; $green-l1: tint($green,20%); $green-l2: tint($green,40%); $green-l3: tint($green,60%); @@ -149,7 +150,7 @@ $light-gray: #ddd; // used by descriptor css $lightGrey: #edf1f5; $darkGrey: #8891a1; -$lightGrey1: #ccc; +$lightGrey1: $gray-l3; $blue-d1: shade($blue,20%); $blue-d2: shade($blue,40%); $blue-d4: shade($blue,80%); @@ -215,7 +216,7 @@ $m-green-t3: rgba($m-green,0.75); // ==================== -// shadows +// SHADOWS $shadow: rgba(0,0,0,0.2); $shadow-l1: rgba(0,0,0,0.1); $shadow-l2: rgba(0,0,0,0.05); @@ -242,7 +243,7 @@ $courseware-header-bg: transparent; $footer-bg: $white; $courseware-footer-border: none; $courseware-footer-shadow: none; -$courseware-footer-margin: 0px; +$courseware-footer-margin: 0; $courseware-border-bottom-color: #44a2de; $courseware-button-border-color: #e6e6e6; $courseware-hover-color: #333435; @@ -278,7 +279,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%); // 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-color: transparent; -$button-bg-hover-color: #fff; +$button-bg-hover-color: $white; // ACTIONS: primary $action-primary-bg: $m-blue-d3; @@ -383,7 +384,7 @@ $button-archive-color: #eee; // MISC: shadow, form, modal $shadow-color: $blue; -$form-bg-color: #fff; +$form-bg-color: $white; $modal-bg-color: rgb(245,245,245); // MISC: sidebar diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index c4fefc2655..e211331871 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -7,20 +7,20 @@ div.gradebook-wrapper { @extend .content; display: block; width: 100%; - @include clearfix; + @include clearfix(); .student-search { - padding: 0 20px 0 15px; + padding: 0 $baseline 0 ($baseline*0.75); } .student-search-field { width: 100%; height: 27px; - padding: 0 15px 0 35px; + padding: 0 ($baseline*0.75) 0 35px; @include box-sizing(border-box); border-radius: 13px; 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-size: 11px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset; @@ -48,20 +48,20 @@ div.gradebook-wrapper { tr:first-child td { border-top: 1px solid $table-border-color; - border-radius: 5px 0 0 0; + border-radius: ($baseline/4) 0 0 0; } tr:last-child td { border-bottom: 1px solid $table-border-color; - border-radius: 0 0 0 5px; + border-radius: 0 0 0 ($baseline/4); } td { height: 50px; - padding-left: 20px; + padding-left: $baseline; border-bottom: 1px solid $cell-border-color; border-left: 1px solid $table-border-color; - background: #f3f3f3; + background: $gray-l5; font-size: 13px; line-height: 50px; } @@ -79,29 +79,29 @@ div.gradebook-wrapper { .left-shadow, .right-shadow { + @extend %ui-depth4; position: absolute; top: 0; - z-index: 9999; width: 20px; pointer-events: none; } .left-shadow { 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-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: -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: -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: -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: -webkit-gradient(linear, left, $shadow-l1, $transparent 20%), -webkit-gradient(linear, left, $shadow-l1, $transparent); + background-image: -webkit-linear-gradient(left, $shadow-l1, $transparent 20%), -webkit-linear-gradient(left, $shadow-l1, $transparent); + background-image: -moz-linear-gradient(left, $shadow-l1, $transparent 20%), -moz-linear-gradient(left, $shadow-l1, $transparent); + background-image: -ms-linear-gradient(left, $shadow-l1, $transparent 20%), -ms-linear-gradient(left, $shadow-l1, $transparent); + background-image: -o-linear-gradient(left, $shadow-l1, $transparent 20%), -o-linear-gradient(left, $shadow-l1, $transparent); } .right-shadow { 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-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: -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: -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: -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: -webkit-gradient(linear, right, $shadow-l1, $transparent 20%), -webkit-gradient(linear, right, $shadow-l1, $transparent); + background-image: -webkit-linear-gradient(right, $shadow-l1, $transparent 20%), -webkit-linear-gradient(right, $shadow-l1, $transparent); + background-image: -moz-linear-gradient(right, $shadow-l1, $transparent 20%), -moz-linear-gradient(right, $shadow-l1, $transparent); + background-image: -ms-linear-gradient(right, $shadow-l1, $transparent 20%), -ms-linear-gradient(right, $shadow-l1, $transparent); + background-image: -o-linear-gradient(right, $shadow-l1, $transparent 20%), -o-linear-gradient(right, $shadow-l1, $transparent); } } @@ -129,7 +129,7 @@ div.gradebook-wrapper { font-weight: bold; text-align: center; 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 { border-radius: 5px 0 0 0; @@ -157,7 +157,7 @@ div.gradebook-wrapper { @include linear-gradient(top, #c6c6c6, #bababa); font-size: 9px; line-height: 12px; - color: #fff; + color: $white; } } diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index ae38f34279..e16dc78ef5 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -34,14 +34,14 @@ div.info-wrapper { font-size: $body-font-size; font-weight: bold; background: url('../images/calendar-icon.png') 0 center no-repeat; - padding-left: 20px; + padding-left: $baseline; } section.update-description { section { &.primary { border: 1px solid #DDD; - background: #F6F6F6; + background: $gray-l6; padding: 20px; p { @@ -57,7 +57,7 @@ div.info-wrapper { h3 { font-size: 1em; font-weight: bold; - margin: lh(1.5) 0 lh(.5); + margin: lh(1.5) 0 lh(0.5); } > ul { @@ -70,7 +70,7 @@ div.info-wrapper { } li { - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } } } @@ -124,10 +124,10 @@ div.info-wrapper { } &.collapsable { - background: #fff; + background: $white; border-radius: 3px; 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 { margin-bottom: 16px; @@ -213,7 +213,7 @@ div.info-wrapper { padding-right: 8px; &:before { - color: #ccc; + color: $gray-l3; content: "•"; display: inline-block; padding-right: 8px; diff --git a/lms/static/sass/course/_open_ended_grading.scss b/lms/static/sass/course/_open_ended_grading.scss index 6207d63eb4..0ade38b804 100644 --- a/lms/static/sass/course/_open_ended_grading.scss +++ b/lms/static/sass/course/_open_ended_grading.scss @@ -1,66 +1,64 @@ .open-ended-problems, -.combined-notifications -{ - padding: 40px; - .problem-list - { +.combined-notifications { + padding: ($baseline*2); + + .problem-list { table-layout: auto; - margin-top: 10px; - width:70%; - td, th - { + margin-top: ($baseline/2); + width: 70%; + + td, th { padding: 7px; } } - .notification-container - { - margin: 30px 0px; + + .notification-container { + margin: ($baseline*1.5) 0; } - .notification - { - margin: 10px; + .notification { + @include clearfix(); + margin: ($baseline/2); width: 30%; display: inline-block; vertical-align: top; - .notification-link - { + + .notification-link { display:block; height: 9em; - padding: 10px; + padding: ($baseline/2); border: 1px solid black; text-align: center; - p - { - font-size: .9em; + + p { + font-size: 0.9em; text-align: center; } } - .notification-title - { + + .notification-title { text-transform: uppercase; background: $blue; color: white; - padding: 5px 0px; + padding: ($baseline/4) 0; font-size: 1.1em; } + .notification-link:hover, - .notification-link:focus - { + .notification-link:focus { background-color: #eee; } - .notification-description - { + + .notification-description { padding-top:5%; } - .alert-message - { - img - { + + .alert-message { + + img { vertical-align: baseline; } } - @include clearfix; } } diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index d5acd15d36..1a17469326 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -1,5 +1,5 @@ .profile-wrapper { - color: #000; + color: $black; .user-info { @extend .sidebar; @@ -15,7 +15,7 @@ header { @extend .bottom-border; margin: 0; - padding: lh(.5); + padding: lh(0.5); h1 { margin: 0; @@ -24,16 +24,14 @@ } ul { - list-style: none; - padding: 0; - margin: 0; + @extend %ui-no-list; li { border-bottom: 1px solid #d3d3d3; box-shadow: 0 1px 0 #eee; color: lighten($text-color, 10%); display: block; - padding: lh(.5) 0 lh(.5) lh(.5); + padding: lh(0.5) 0 lh(0.5) lh(0.5); position: relative; text-decoration: none; @include transition(none); @@ -50,7 +48,7 @@ &[type="text"] { @include box-sizing(border-box); - margin: lh(.5) 0; + margin: lh(0.5) 0; width: 100%; } @@ -75,7 +73,7 @@ color: #999; font-size: 12px; position: absolute; - right: lh(.5); + right: lh(0.5); text-transform: uppercase; top: 9px; @@ -106,7 +104,7 @@ margin: 0; padding: 0; position: absolute; - right: lh(.5); + right: lh(0.5); text-transform: uppercase; top: 9px; @@ -149,7 +147,7 @@ } #course-success { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); text-align: center; > a { @include button(simple, $button-color); @@ -231,7 +229,7 @@ } .scores { - margin: lh(.5) 0; + margin: lh(0.5) 0; h3 { font-size: em(14); diff --git a/lms/static/sass/course/_staff_grading.scss b/lms/static/sass/course/_staff_grading.scss index fd48ac28dc..418201d45c 100644 --- a/lms/static/sass/course/_staff_grading.scss +++ b/lms/static/sass/course/_staff_grading.scss @@ -1,5 +1,5 @@ div.staff-grading, -div.peer-grading{ +div.peer-grading { border: 1px solid lightgray; textarea.feedback-area { @@ -9,16 +9,17 @@ div.peer-grading{ div.feedback-area.track-changes { position: relative; - margin: 0px; + margin: 0; height: 400px; border: 1px solid lightgray; - padding: 5px; + padding: ($baseline/4); resize: vertical; width: 99%; overflow: auto; } div.feedback-area.track-changes, p.ice-legend { + .ice-controls { float: right; } @@ -47,12 +48,12 @@ div.peer-grading{ } h1 { - margin: 0 0 0 $baseline/2; + margin: 0 0 0 ($baseline/2); } h2 { a { - text-size: .5em; + text-size: 0.5em; } } @@ -60,18 +61,18 @@ div.peer-grading{ margin: 0; &.submission-container{ - @include clearfix; + @include clearfix(); overflow-y: auto; max-height: 300px; height: auto; border: 1px solid #ddd; - background: #f6f6f6; + background: $gray-l6; } } label { margin: 0; - padding: 2px; + padding: ($baseline/10); min-width: 50px; text-size: 1.5em; } @@ -93,11 +94,11 @@ div.peer-grading{ text-align: center; th { - padding: 2px; + padding: ($baseline/10); } td { - padding: 2px; + padding: ($baseline/10); } td.problem-name { @@ -115,29 +116,29 @@ div.peer-grading{ .rubric-wrapper, .calibration-feedback-wrapper, .grading-container { - padding: $baseline/2 0; + padding: ($baseline/2) 0; } .error-container { margin-left: 0; - padding: 2px; + padding: ($baseline/10); background-color: #ffcccc; } .submission-wrapper { - padding: 2px; - padding-bottom: 15px; + padding: ($baseline/10); + padding-bottom: ($baseline*0.75); h3 { - margin-bottom: 2px; + margin-bottom: ($baseline/10); } p { - margin-left: 2px; + margin-left: ($baseline/10); } } .meta-info-wrapper { - padding:2px; + padding: ($baseline/10); background-color: #eee; div { @@ -147,24 +148,24 @@ div.peer-grading{ .message-container, .grading-message { margin-left: 0; - padding: 2px; + padding: ($baseline/10); background-color: $yellow; } .breadcrumbs { - margin: $baseline/2 $baseline/4; + margin: ($baseline/2) ($baseline/4); font-size: .8em; } .instructions-panel { - @include clearfix; - padding: $baseline/2; + @include clearfix(); + padding: ($baseline/2); background-color: #eee; font-size: .8em; > div { - margin-bottom: 5px; - padding: $baseline/2; + margin-bottom: ($baseline/4); + padding: ($baseline/2); width: 49%; background: #eee; @@ -190,7 +191,7 @@ div.peer-grading{ border-radius: 3px; } .current-state { - background: #fff; + background: $white; } } @@ -199,8 +200,8 @@ div.peer-grading{ margin-left: 0; header { - margin-top: 2px; - margin-bottom: 2px; + margin-top: ($baseline/10); + margin-bottom: ($baseline/10); font-size: 1.2em; } } @@ -215,7 +216,7 @@ div.peer-grading{ } div.peer-grading { - border-radius: $baseline/2; + border-radius: ($baseline/2); padding: 0; .peer-grading-tools { @@ -224,8 +225,8 @@ div.peer-grading { .error-container { margin: $baseline; - border-radius: $baseline/4; - padding: $baseline/2; + border-radius: ($baseline/4); + padding: ($baseline/2); } .interstitial-page, .calibration -feedback, .calibration-interstitial-page { diff --git a/lms/static/sass/course/_syllabus.scss b/lms/static/sass/course/_syllabus.scss index 405f0412d3..8fb103cfd8 100644 --- a/lms/static/sass/course/_syllabus.scss +++ b/lms/static/sass/course/_syllabus.scss @@ -16,7 +16,7 @@ div.syllabus { table-layout: auto; text-align: left; - margin: 10px 0; + margin: ($baseline/2) 0; thead { font-weight: bold; @@ -52,7 +52,7 @@ div.syllabus { padding: 0px !important; hr { - margin: 10px; + margin: ($baseline/2); } } } diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index 754ef7ab8e..ae4a577f63 100755 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -21,9 +21,9 @@ div.book-wrapper { @extend .sidebar; @extend .tran; @include box-sizing(border-box); - padding: 10px 0; + padding: ($baseline/2) 0; border-radius: 3px 0 0 3px; - border: 1px solid #ccc; + border: 1px solid $gray-l3; border-right: none; width: 180px; @@ -56,7 +56,7 @@ div.book-wrapper { padding-left: ($baseline/2); a { - @include clearfix; + @include clearfix(); padding: 0; color: $link-color; cursor: pointer; @@ -89,13 +89,13 @@ div.book-wrapper { padding-top: lh(.25); li { - padding-bottom: 10px; + padding-bottom: ($baseline/2); } } } > li { - padding: 5px 6px; + padding: ($baseline/4) 6px; margin: ($baseline/4) ($baseline/2); } } @@ -174,7 +174,7 @@ div.book-wrapper { section.page { border-left: 1px solid $border-color; - background-color: #fff; + background-color: $white; position: relative; text-align: center; border-radius: 0 3px 3px 0; @@ -190,10 +190,10 @@ div.book-wrapper { div { text-align: left; line-height: 1.6em; - margin: 5px; + margin: ($baseline/4); .Paragraph, h2 { - margin-top: 10px; + margin-top: ($baseline/2); } } } diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 30b5cfaed7..cf8e9c4793 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -60,16 +60,16 @@ input[type="password"] { background: $white; border: 1px solid $border-color-2; border-radius: 0; - box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1; @include box-sizing(border-box); font: normal 1em $sans-serif; height: 35px; - padding: 5px 12px; + padding: ($baseline/4) 12px; vertical-align: top; -webkit-font-smoothing: antialiased; &:last-child { - margin-right: 0px; + margin-right: 0; } &:focus { @@ -111,7 +111,7 @@ img { font-size: 11px; font-weight: 400; line-height: 26px; - color: #fff; + color: $white; pointer-events: none; opacity: 0; @include transition(opacity .1s linear 0s); @@ -148,17 +148,17 @@ img { background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset; font-size: 13px; - color: #fff; + color: $white; opacity: 0; -webkit-transition: all .2s; p, span { - color: #fff; + color: $white; } strong { display: block; - margin-bottom: 10px; + margin-bottom: ($baseline/2); font-size: 16px; font-weight: 700; text-align: center; @@ -184,7 +184,7 @@ img { .action-btn { @include dark-grey-button; - margin-top: 10px; + margin-top: ($baseline/2); text-align: center; } } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 1425a9efc4..c6652f94d6 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -87,7 +87,7 @@ h1.top-header { h3 { background: none; border: none; - color: #000; + color: $black; font-weight: normal; margin: 0; overflow: hidden; @@ -101,11 +101,11 @@ h1.top-header { &.active { // @extend .bottom-border; - color: #000; + color: $black; font-weight: bold; a { - color: #000; + color: $black; } } } @@ -127,11 +127,11 @@ h1.top-header { line-height: lh(); font-size: 1em; @include box-sizing(border-box); - padding: lh(.25) lh(.5) lh(.25) 0; + padding: lh(.25) lh(0.5) lh(.25) 0; &:hover, &:focus { color: #666; - background: #f6f6f6; + background: $gray-l6; } } } diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss index 3c220ac7f0..56c8483137 100644 --- a/lms/static/sass/course/base/_mixins.scss +++ b/lms/static/sass/course/base/_mixins.scss @@ -9,7 +9,7 @@ font-size: 13px; font-weight: 700; line-height: 32px; - color: #fff; + color: $white; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); @@ -25,7 +25,7 @@ padding: 0 15px; border-radius: 3px; border: 1px solid #444; - @include linear-gradient(top, #eee, #ccc); + @include linear-gradient(top, #eee, $gray-l3); font-size: 13px; font-weight: 700; line-height: 32px; @@ -48,7 +48,7 @@ font-size: 13px; font-weight: 700; line-height: 32px; - color: #fff; + color: $white; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss index ae874e64f4..0abb8b261a 100644 --- a/lms/static/sass/course/courseware/_amplifier.scss +++ b/lms/static/sass/course/courseware/_amplifier.scss @@ -40,7 +40,7 @@ section.tool-wrapper { background: none; border: none; border-radius: 0; - color: #fff; + color: $white; margin-bottom: 0; &.ui-tabs-selected { @@ -119,7 +119,7 @@ section.tool-wrapper { @extend .clearfix; border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); - @include clearfix; + @include clearfix(); margin-bottom: lh(); margin-bottom: lh(); padding: 0 0 lh(); @@ -143,7 +143,7 @@ section.tool-wrapper { margin-bottom: 0; input { - margin-right: 5px; + margin-right: ($baseline/4); } } } @@ -152,7 +152,7 @@ section.tool-wrapper { display: block; float: left; margin-bottom: 0; - margin-right: 20px; + margin-right: $baseline; margin-top: 8px; text-align: right; } @@ -160,7 +160,7 @@ section.tool-wrapper { label { border-radius: 2px; - color: #fff; + color: $white; font-weight: bold; padding: 3px; -webkit-font-smoothing: antialiased; @@ -206,7 +206,7 @@ section.tool-wrapper { p { font-weight: bold; display: inline-block; - margin: 0 lh(.5) lh() 0; + margin: 0 lh(0.5) lh() 0; color: #839496; text-shadow: 0 -1px 0 darken(#073642, 10%); -webkit-font-smoothing: antialiased; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index cae12beae8..4f8470891c 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -62,7 +62,7 @@ div.course-wrapper { ul { li { - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } } @@ -84,7 +84,7 @@ div.course-wrapper { > div { @extend .clearfix; border-bottom: 1px solid #ddd; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); padding: 0 0 15px; .collapsible { @@ -204,7 +204,7 @@ div.course-wrapper { display: none; @include clearfix(); white-space: pre-wrap; - border-top: 1px solid #ccc; + border-top: 1px solid $gray-l3; padding-top: lh(); margin-top: lh(); line-height: lh(); @@ -224,7 +224,7 @@ div.course-wrapper { .ui-tabs-nav { background: none; border: 0; - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } .ui-tabs-panel { @@ -269,30 +269,30 @@ div.course-wrapper { } .xmodule_VideoModule { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } textarea.short-form-response { height: 200px; - padding: 5px; - margin-top: 5px; - margin-bottom: 5px; + padding: ($baseline/4); + margin-top: ($baseline/4); + margin-bottom: ($baseline/4); width: 100%; } section.self-assessment { textarea.hint { height: 100px; - padding: 5px; - margin-top: 5px; - margin-bottom: 5px; + padding: ($baseline/4); + margin-top: ($baseline/4); + margin-bottom: ($baseline/4); } div { - margin-top: 5px; - margin-bottom: 5px; + margin-top: ($baseline/4); + margin-bottom: ($baseline/4); } .error { @@ -303,14 +303,14 @@ section.self-assessment { section.foldit { table { - margin-top: 10px; + margin-top: ($baseline/2); } th { text-align: center; } td { - padding-left: 5px; - padding-right: 5px; + padding-left: ($baseline/4); + padding-right: ($baseline/4); } } diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index aa6204c7da..d7aa8ab890 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -42,7 +42,7 @@ &.ui-accordion-header { border-bottom: none; - color: #000; + color: $black; a { border-radius: 0; @@ -87,11 +87,11 @@ padding: 11px 14px; @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom); background-color: $sidebar-chapter-bg; - box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset; + box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset; @include transition(background-color .1s linear 0s); &.is-open { - background: #fff; + background: $white; } &:first-child { @@ -100,11 +100,11 @@ &:last-child { border-radius: 0 0 0 3px; - box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 $white inset; } &:hover, &:focus { - background-color: #fff + background-color: $white; } } @@ -120,13 +120,13 @@ li { border-bottom: 0; border-radius: 0; - margin-bottom: 4px; + margin-bottom: ($baseline/5); a { background: transparent; border-radius: 4px; display: block; - padding: 5px 36px 5px 10px; + padding: ($baseline/4) 36px ($baseline/4) ($baseline/2); position: relative; text-decoration: none; @@ -150,7 +150,7 @@ } &:hover, &:focus { - background: rgba(0, 0, 0, .1); + background: $shadow-l1; > a p { color: #333; @@ -158,7 +158,7 @@ } &:active { - box-shadow: inset 0 1px 14px 0 rgba(0,0,0, 0.1); + box-shadow: inset 0 1px 14px 0 $shadow-l1; &:after { opacity: 1.0; diff --git a/lms/static/sass/course/courseware/courses/_cs188.scss b/lms/static/sass/course/courseware/courses/_cs188.scss index a67aebe642..5bf8f91342 100644 --- a/lms/static/sass/course/courseware/courses/_cs188.scss +++ b/lms/static/sass/course/courseware/courses/_cs188.scss @@ -63,13 +63,13 @@ body.cs188 { .course-staff { .teacher { - margin-bottom: 40px; + margin-bottom: ($baseline*2); h3 { color: $base-font-color; font-family: $sans-serif; font-weight: 700; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); text-transform: none; } @@ -99,7 +99,7 @@ body.cs188 { margin-top: 3px; list-style: disc; ul, ol { - margin: 0px; + margin: 0; } } } @@ -121,7 +121,7 @@ body.cs188 { .choicegroup { input[type=checkbox], input[type=radio] { - margin-right: 5px; + margin-right: ($baseline/4); } } diff --git a/lms/static/sass/course/discussion/_form-wmd-toolbar.scss b/lms/static/sass/course/discussion/_form-wmd-toolbar.scss index ce8e270dd2..b443f22566 100644 --- a/lms/static/sass/course/discussion/_form-wmd-toolbar.scss +++ b/lms/static/sass/course/discussion/_form-wmd-toolbar.scss @@ -15,7 +15,7 @@ height: 500px; background-color: Gainsboro; border: 1px solid DarkGray; - margin-top: -20px; + margin-top: -($baseline); } #wmd-preview { @@ -28,10 +28,10 @@ #wmd-button-row { position: relative; - margin-left: 5px; - margin-right: 5px; + margin-left: ($baseline/4); + margin-right: ($baseline/4); margin-bottom: 0px; - margin-top: 10px; + margin-top: ($baseline/2); padding: 0px; height: 20px; } @@ -49,8 +49,8 @@ .wmd-button { width: 20px; height: 20px; - margin-left: 5px; - margin-right: 5px; + margin-left: ($baseline/4); + margin-right: ($baseline/4); position: absolute; background-image: url(../images/wmd-buttons.png); background-repeat: no-repeat; @@ -62,8 +62,8 @@ .wmd-button > a { width: 20px; height: 20px; - margin-left: 5px; - margin-right: 5px; + margin-left: ($baseline/4); + margin-right: ($baseline/4); position: absolute; display: inline-block; } diff --git a/lms/static/sass/course/instructor/_email.scss b/lms/static/sass/course/instructor/_email.scss index 859a9733f8..75ed6f5cd6 100644 --- a/lms/static/sass/course/instructor/_email.scss +++ b/lms/static/sass/course/instructor/_email.scss @@ -6,7 +6,7 @@ ul { margin: 0; padding: 0; - margin-bottom: 10px; + margin-bottom: ($baseline/2); list-style: none; } @@ -17,12 +17,12 @@ } .submit-email-action { - margin-top: 10px; + margin-top: ($baseline/2); line-height: 1.3; ul { margin-top: 0; - margin-bottom: 10px; + margin-bottom: ($baseline/2); } } @@ -52,12 +52,12 @@ h2 { text-align: left; - padding-top: 10px; + padding-top: ($baseline/2); margin: 0; } input { - margin-top: 15px; + margin-top: ($baseline*0.75); float: right; } } diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss index 278c36bd13..f153459559 100644 --- a/lms/static/sass/course/instructor/_instructor.scss +++ b/lms/static/sass/course/instructor/_instructor.scss @@ -26,13 +26,10 @@ // form fields .list-fields { - list-style: none; - margin: 0; - padding: 0; + @extend %ui-no-list; .field { - margin-bottom: 20px; - padding: 0; + margin-bottom: $baseline; &:last-child { margin-bottom: 0; @@ -55,7 +52,7 @@ .msg { border-radius: 1px; padding: 10px 15px; - margin-bottom: 20px; + margin-bottom: $baseline; .copy { font-weight: 600; @@ -114,7 +111,7 @@ .item { font-weight: 600; - margin-bottom: 10px; + margin-bottom: ($baseline/2); &:last-child { margin-bottom: 0; diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 67c7652f6b..a834c6a31e 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -34,7 +34,7 @@ font-size: 15px; color: $link-color; text-decoration: underline; - padding: 5px; + padding: ($baseline/4); } // system feedback - messages @@ -93,13 +93,12 @@ } .list-advice { - list-style: none; - padding: 0; + @extend %ui-no-list; margin: $baseline 0; .item { font-weight: 600; - margin-bottom: 10px; + margin-bottom: ($baseline/2); &:last-child { margin-bottom: 0; @@ -172,7 +171,7 @@ section.instructor-dashboard-content-2 { display: inline-block; padding-bottom: 0; border-bottom: 0; - margin-bottom: ($baseline*.75); + margin-bottom: ($baseline*0.75); } input[type="button"] { @@ -597,7 +596,7 @@ section.instructor-dashboard-content-2 { .action-edit-name { @include idashbutton($gray-l3); - @include transition(opacity 0.25s ease-in-out); + @include transition(opacity $tmg-f2 ease-in-out); @include font-size(14); @include line-height(14); margin-left: ($baseline/2); @@ -727,7 +726,7 @@ section.instructor-dashboard-content-2 { } input { - margin-right: 5px; + margin-right: ($baseline/4); } .request-res-section { @@ -1012,7 +1011,7 @@ section.instructor-dashboard-content-2 { .report-downloads-table { .slickgrid { height: 300px; - padding: 5px; + padding: ($baseline/4); } // Disable horizontal scroll bar when grid only has 1 column. Remove this CSS class when more columns added. .slick-viewport { @@ -1090,15 +1089,15 @@ section.instructor-dashboard-content-2 { height: 475px; width: 85%; margin: 5%; - background-color: #fff; - border: 1px solid #000; + background-color: $white; + border: 1px solid $black; border-radius: 25px; padding: 2.5%; .metrics-overlay-title { display: block; height: 50px; - margin-bottom: 10px; + margin-bottom: ($baseline/2); font-weight: bold; } @@ -1106,7 +1105,7 @@ section.instructor-dashboard-content-2 { width: 100%; height: 370px; overflow: auto; - border: 1px solid #000; + border: 1px solid $black; table { width: 100%; @@ -1121,7 +1120,7 @@ section.instructor-dashboard-content-2 { } .overflow-message { - padding-top: 20px; + padding-top: $baseline; } .download-csv { @@ -1262,22 +1261,33 @@ input[name="subject"] { line-height: 1.3em; } .error-msgs { - background: #FFEEF5;color:#B72667;text-align: center;padding: 10px 0px; - font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;font-size: 15px; + background: #FFEEF5; + color:#B72667; + text-align: center; + padding: ($baseline/2) 0; + font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; + font-size: 15px; border-bottom: 1px solid #B72667; - margin-bottom: 20px; + margin-bottom: $baseline; display: none; - } + } + .success-msgs { - background: #D0F5D5;color:#008801;text-align: center;padding: 10px 0px; - font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;font-size: 15px; + background: #D0F5D5; + color:#008801; + text-align: center; + padding: ($baseline/2) 0; + font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; + font-size: 15px; border-bottom: 1px solid #008801; - margin-bottom: 20px; + margin-bottom: $baseline; display: none; - } + } + .content{ padding: 0 !important; } + input[name="download_company_name"], input[name="active_company_name"], input[name="spent_company_name"] { margin-right: 8px; @@ -1288,17 +1298,17 @@ input[name="subject"] { .coupons-table { width: 100%; tr:nth-child(even){ - background-color: #f8f8f8; + background-color: $gray-l6; border-bottom: 1px solid #f3f3f3; } tr.always-gray{ background: #eee !important; - border-top: 2px solid #FFFFFF; + border-top: 2px solid $white; } tr.always-white{ background: #fff !important; td{ - padding: 30px 0px 10px; + padding: ($baseline*1.5) 0 ($baseline/2); } } .coupons-headings { @@ -1310,7 +1320,7 @@ input[name="subject"] { width: 120px; } th:first-child{ - padding-left: 20px; + padding-left: $baseline; } th { text-align: left; @@ -1355,7 +1365,7 @@ input[name="subject"] { // coupon items style .coupons-items { td { - padding: 10px 0px; + padding: ($baseline/2) 0; position: relative; line-height: normal; span.old-price{ @@ -1368,7 +1378,7 @@ input[name="subject"] { } } td:nth-child(5),td:first-child{ - padding-left: 20px; + padding-left: $baseline; } td:nth-child(2){ line-height: 22px; @@ -1381,7 +1391,7 @@ input[name="subject"] { } td{ a.edit-right{ - margin-left: 15px; + margin-left: ($baseline*0.75); } } } @@ -1393,12 +1403,12 @@ input[name="subject"] { // coupon edit and add modals #add-coupon-modal, #edit-coupon-modal, #set-course-mode-price-modal, #registration_code_generation_modal{ .inner-wrapper { - background: #fff; + background: $white; } span.tip-text { font-size: 12px; display: block; - margin-top: 5px; + margin-top: ($baseline/4); color: #646464 } top:-95px !important; @@ -1436,7 +1446,7 @@ input[name="subject"] { float: left; label.required:after { content: "*"; - margin-left: 5px; + margin-left: ($baseline/4); } } li:nth-child(even){ @@ -1462,7 +1472,7 @@ input[name="subject"] { float: left; label.required:after { content: "*"; - margin-left: 5px; + margin-left: ($baseline/4); } min-height: 120px; } @@ -1476,7 +1486,7 @@ input[name="subject"] { li#generate-registration-modal-field-country { width: 204px; margin-left: 15px !important; - margin-bottom: 20px; + margin-bottom: $baseline; } li:nth-child(even){ margin-left: 0px !important; @@ -1515,7 +1525,7 @@ input[name="subject"] { width: 100%; label.required:after { content: "*"; - margin-left: 5px; + margin-left: ($baseline/4); } } li#set-course-mode-modal-field-currency{ @@ -1525,7 +1535,7 @@ input[name="subject"] { } } #registration-content form .field.text input { - background: #fff; + background: $white; margin-bottom: 0; height: 40px; border-radius: 3px; @@ -1543,7 +1553,7 @@ input[name="subject"] { } } .instructions p { - margin-bottom: 5px; + margin-bottom: ($baseline/4); } form { border-radius: 0; @@ -1554,7 +1564,7 @@ input[name="subject"] { .group-form { margin: 0; padding-top: 0; - padding-bottom: 20px; + padding-bottom: $baseline; } .list-input { margin: 0; @@ -1579,7 +1589,7 @@ input[name="subject"] { color: #333; } .field.text input { - background: #fff; + background: $white; margin-bottom: 0; } .field input { diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss index 867eacf49c..c873b4cd7c 100644 --- a/lms/static/sass/course/layout/_calculator.scss +++ b/lms/static/sass/course/layout/_calculator.scss @@ -2,7 +2,7 @@ div.calc-main { bottom: -126px; left: 0; position: fixed; - @include transition(bottom 0.75s linear 0s); + @include transition(bottom $tmg-avg linear 0s); -webkit-appearance: none; width: 100%; z-index: 99; @@ -16,11 +16,11 @@ div.calc-main { background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center; border-bottom: 0; border-radius: 3px 3px 0 0; - color: #fff; + color: $white; float: right; height: 20px; display: inline-block; - margin-right: 10px; + margin-right: ($baseline/2); padding: 8px 12px; position: relative; top: -45px; @@ -61,11 +61,11 @@ div.calc-main { input#calculator_button { background: #111; - border: 1px solid #000; + border: 1px solid $black; border-radius: 0; box-shadow: none; @include box-sizing(border-box); - color: #fff; + color: $white; float: left; font-size: 30px; font-weight: bold; @@ -86,7 +86,7 @@ div.calc-main { border: 0; box-shadow: none; @include box-sizing(border-box); - color: #fff; + color: $white; float: left; font-size: 16px; font-weight: bold; @@ -136,7 +136,7 @@ div.calc-main { .help { @include transition(none); - background: #fff; + background: $white; border-radius: 3px; box-shadow: 0 0 3px #999; color: #333; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 113e794c44..4b5fcc3e67 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,5 +1,5 @@ nav.course-material { - @include clearfix; + @include clearfix(); @include box-sizing(border-box); border-bottom: none; margin: 0px auto 0px; @@ -14,7 +14,7 @@ nav.course-material { ol.course-tabs { @include border-top-radius(4px); - @include clearfix; + @include clearfix(); padding: 28px 0 10px 0; @include margin-left(10px); @@ -51,11 +51,11 @@ nav.course-material { } &.active { - // background: rgba(0, 0, 0, .2); + // background: $shadow; @include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25)); background-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset; - color: #fff; + color: $white; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); } } @@ -64,7 +64,7 @@ nav.course-material { } .course-content { - margin-top: 30px; + margin-top: ($baseline*1.5); .courseware { min-height: 300px; @@ -72,7 +72,7 @@ nav.course-material { } header.global.slim { - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + box-shadow: 0 1px 2px $shadow-l1; height: auto; padding: 5px 0 10px 0; border-bottom: 1px solid $outer-border-color; @@ -93,7 +93,7 @@ header.global.slim { border-radius: 3px; @include box-sizing(border-box); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); - color: #fff; + color: $white; display: inline-block; font-family: $sans-serif; font-size: 14px; @@ -115,7 +115,7 @@ header.global.slim { } nav { - padding-top: 5px; + padding-top: ($baseline/4); } h1.logo { diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss index 003424c969..38e088d66a 100644 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ b/lms/static/sass/course/layout/_courseware_subnav.scss @@ -1,5 +1,5 @@ nav.course-material { - @include clearfix; + @include clearfix(); @include box-sizing(border-box); background: none; margin: 0px auto 0px; @@ -14,7 +14,7 @@ nav.course-material { ol.course-tabs { @include border-top-radius(4px); - @include clearfix; + @include clearfix(); padding: 10px 0 0 0; li { @@ -44,7 +44,7 @@ nav.course-material { } .course-content { - margin-top: 30px; + margin-top: ($baseline*1.5); .courseware { min-height: 300px; diff --git a/lms/static/sass/course/layout/_timer.scss b/lms/static/sass/course/layout/_timer.scss index 6bfa1e6c8c..dfff695c97 100644 --- a/lms/static/sass/course/layout/_timer.scss +++ b/lms/static/sass/course/layout/_timer.scss @@ -1,26 +1,26 @@ div.timer-main { + @extend %ui-depth2; position: fixed; - z-index: 99; top: 0; right: 0; width: 100%; - border-top: 2px solid #000; + border-top: 2px solid $black; div#timer_wrapper { position: absolute; top: -3px; right: 10px; - background: #000; - color: #fff; - padding: 10px 20px; + background: $black; + color: $white; + padding: ($baseline/2) $baseline; border-radius: 3px; } .timer_return_url { display: block; - margin-bottom: 5px; - border-bottom: 1px solid tint(#000, 20%); - padding-bottom: 5px; + margin-bottom: ($baseline/4); + border-bottom: 1px solid tint($black, 20%); + padding-bottom: ($baseline/4); font-size: 13px; } diff --git a/lms/static/sass/course/wiki/_basic-html.scss b/lms/static/sass/course/wiki/_basic-html.scss index 935c92baa7..a98f7dd17e 100644 --- a/lms/static/sass/course/wiki/_basic-html.scss +++ b/lms/static/sass/course/wiki/_basic-html.scss @@ -89,7 +89,7 @@ section.wiki-body { b, strong { font-weight: bolder } blockquote { - padding: 10px 20px; + padding: ($baseline/2) $baseline; background: #e3e3e3; border-left: 4px solid; } diff --git a/lms/static/sass/course/wiki/_create.scss b/lms/static/sass/course/wiki/_create.scss index c967410d38..af9c167d9d 100644 --- a/lms/static/sass/course/wiki/_create.scss +++ b/lms/static/sass/course/wiki/_create.scss @@ -17,12 +17,12 @@ form#wiki_revision { @extend textarea; @include box-sizing(border-box); font-family: monospace; - margin-bottom: 20px; + margin-bottom: $baseline; } textarea { @include box-sizing(border-box); - margin-bottom: 20px; + margin-bottom: $baseline; min-height: 450px; width: 100%; } @@ -43,7 +43,7 @@ form#wiki_revision { } input[type="submit"] { - margin-top: 20px; + margin-top: $baseline; } } diff --git a/lms/static/sass/course/wiki/_sidebar.scss b/lms/static/sass/course/wiki/_sidebar.scss index 22574c7a5a..512d85bc2f 100644 --- a/lms/static/sass/course/wiki/_sidebar.scss +++ b/lms/static/sass/course/wiki/_sidebar.scss @@ -5,7 +5,7 @@ div#wiki_panel { ul { li { &.search { - padding: 10px lh() 10px 0; + padding: ($baseline/2) lh() ($baseline/2) 0; label { display: none; @@ -16,18 +16,18 @@ div#wiki_panel { div#wiki_create_form { @extend .clearfix; - padding: lh(.5) lh() lh(.5) 0; + padding: lh(0.5) lh() lh(0.5) 0; label { font-family: $sans-serif; - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } input[type="text"] { @include box-sizing(border-box); display: block; width: 100%; - margin-bottom: lh(.5); + margin-bottom: lh(0.5); } ul { @@ -40,7 +40,7 @@ div#wiki_panel { &#cancel { float: right; - margin-top: 10px; + margin-top: ($baseline/2); } } } @@ -51,6 +51,6 @@ div#wiki_panel { } input#wiki_search_input { - margin-right: 10px; + margin-right: ($baseline/2); } } diff --git a/lms/static/sass/course/wiki/_table.scss b/lms/static/sass/course/wiki/_table.scss index ffb2796906..37d6364125 100644 --- a/lms/static/sass/course/wiki/_table.scss +++ b/lms/static/sass/course/wiki/_table.scss @@ -7,7 +7,7 @@ table.wiki-history { height: 40px; th { - padding-top: 10px; + padding-top: ($baseline/2); padding-left: 15px; &#revision { @@ -40,7 +40,7 @@ table.wiki-history { } div.history-controls { - margin-top: 20px; + margin-top: $baseline; input[type="submit"] { @extend .light-button; diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index 549993a119..e67731c280 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -10,12 +10,12 @@ section.wiki { } .wiki-wrapper { - @include clearfix; + @include clearfix(); > header { height: 33px; padding: 24px 0 26px; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $gray-l3; border-radius: 3px 3px 0 0; background-color: $sidebar-color; } @@ -32,11 +32,11 @@ section.wiki { .breadcrumb { list-style: none; padding-left: 0; - margin: 0 0 0 40px; + margin: 0 0 0 ($baseline*2); li { float: left; - margin-right: 10px; + margin-right: ($baseline/2); font-size: 0.9em; a { @@ -54,7 +54,7 @@ section.wiki { &:after { content: '›'; display: inline; - margin-left: 10px; + margin-left: ($baseline/2); color: $base-font-color; height: 30px; line-height: 31px; @@ -77,7 +77,7 @@ section.wiki { .global-functions { display: block; width: auto; - margin-right: 20px; + margin-right: $baseline; } .add-article-btn { @@ -99,7 +99,7 @@ section.wiki { width: 180px; height: 27px; padding: 0 15px 0 35px; - background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6; + background: url(../images/search-icon.png) no-repeat 9px center $gray-l6; border: 1px solid #c8c8c8; border-radius: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset; @@ -155,8 +155,8 @@ section.wiki { } h3 { - margin-top: 40px; - margin-bottom: 20px; + margin-top: ($baseline*2); + margin-bottom: $baseline; font-weight: bold; font-size: 1.25em; } @@ -190,14 +190,14 @@ section.wiki { } li { - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); line-height: 1.6em; } pre { padding: 10px; border: 1px solid #ddd; - background: #f8f8f8; + background: $gray-l6; border-radius: 4px; font-size: 0.9em; font-family: Monaco, monospace; @@ -206,7 +206,7 @@ section.wiki { .toc { background-color: $sidebar-color; padding: 9px; - margin: 10px 0; + margin: ($baseline/2) 0; border-radius: 5px; ul { @@ -231,7 +231,7 @@ section.wiki { @include box-sizing(border-box); .timestamp{ - margin-top: 15px; + margin-top: ($baseline*0.75); padding: 15px 0 0 10px; border-top: 1px solid $light-gray; @@ -250,7 +250,7 @@ section.wiki { .see-children { padding: 15px 0 0; border-top: 1px solid $light-gray; - margin-top: 15px; + margin-top: ($baseline*0.75); a { display: block; @@ -260,7 +260,7 @@ section.wiki { line-height: 25px; &:hover, &:focus { - background-color: #f6f6f6; + background-color: $gray-l6; text-decoration: none; } } @@ -351,7 +351,7 @@ section.wiki { } &:hover, &:focus { - background-color: #f6f6f6; + background-color: $gray-l6; text-decoration: none; } } @@ -419,15 +419,15 @@ section.wiki { position: relative; canvas { - box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2); + box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 6px $shadow; } &:before { + @extend %ui-depth4; content: 'click to edit schematic'; position: absolute; top: 10px; left: 7px; - z-index: 9999; font-family: $sans-serif; font-size: 0.75em; color: #aaa; @@ -440,14 +440,14 @@ section.wiki { } .control-group { - margin-bottom: 20px; + margin-bottom: $baseline; } #hint_id_summary { display: inline-block; font-size: 0.9em; line-height: 32px; - margin-left: 15px; + margin-left: ($baseline*0.75); } .asteriskField { @@ -461,7 +461,7 @@ section.wiki { .btn { @include button(simple, #eee); font-size: 0.8em; - margin-right: 5px; + margin-right: ($baseline/4); line-height: 1.2em; text-transform: none !important; letter-spacing: 0 !important; @@ -482,7 +482,7 @@ section.wiki { } &.btn-info { - @include button(simple, #ccc); + @include button(simple, $gray-l3); font-size: 0.8em; } } @@ -492,8 +492,8 @@ section.wiki { } .modal { + @extend %ui-depth4; width: 960px; - z-index: 9999; min-height: 500px; margin-left: -480px; top: 150px; @@ -505,7 +505,7 @@ section.wiki { margin-left: -200px; h4 { - margin-bottom: 20px; + margin-bottom: $baseline; font-weight: bold; } @@ -572,12 +572,12 @@ section.wiki { } .modal-footer .btn { - margin-right: 10px; + margin-right: ($baseline/2); } } .modal-inner-wrapper { - background: #fff; + background: $white; padding: 20px; } @@ -594,7 +594,7 @@ section.wiki { width: 972px; .left-column { - margin-right: 10px; + margin-right: ($baseline/2); } .left-column, @@ -605,11 +605,11 @@ section.wiki { } #cheatsheet-body { - background: #fff; + background: $white; text-align: left; padding: 20px; font-size: 14px; - @include clearfix; + @include clearfix(); h3 { font-weight: bold; @@ -623,11 +623,11 @@ section.wiki { } #cheatsheet-body section + section { - margin-top: 40px; + margin-top: ($baseline*2); } #cheatsheet-body pre{ - color: #000; + color: $black; text-align: left; background: #eee; padding: 10px; @@ -642,7 +642,7 @@ section.wiki { &.history { .accordion { - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); padding: 15px; border: 1px solid $light-gray; background: #f9f9f9; @@ -704,8 +704,8 @@ section.wiki { #settings_form { .well { - margin-bottom: 15px; - @include clearfix; + margin-bottom: ($baseline*0.75); + @include clearfix(); } .control-group { @@ -715,7 +715,7 @@ section.wiki { } label { - margin-left: 15px; + margin-left: ($baseline*0.75); } .controls { @@ -759,7 +759,7 @@ section.wiki { color: $pink; .help-block { - margin-top: 10px; + margin-top: ($baseline/2); } input { @@ -788,7 +788,7 @@ section.wiki { border-radius: 5px; .well-small { - @include clearfix; + @include clearfix(); a { display: inline-block; @@ -802,8 +802,8 @@ section.wiki { } .filter-clear { - margin-right: 10px; - margin-top: 10px; + margin-right: ($baseline/2); + margin-top: ($baseline/2); font-size: .9em; a { @@ -817,7 +817,7 @@ section.wiki { .table.table-striped { width: 100%; - margin-top: 20px; + margin-top: $baseline; th, td { border-bottom: 1px solid $light-gray; @@ -830,7 +830,7 @@ section.wiki { } tr:nth-child(even) { - background: #F6F6F6; + background: $gray-l6; } } @@ -855,7 +855,7 @@ section.wiki { } li { - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); border: 1px solid #DDD; background: #F9F9F9; border-radius: 5px; @@ -978,7 +978,7 @@ section.wiki { border: 1px solid darken($pink, 15%); p { - color: #fff; + color: $white; a { display: block; @@ -986,7 +986,7 @@ section.wiki { margin: lh() (-(lh())) (-(lh())); padding: lh(); border-top: 1px solid darken($pink, 15%); - color: #fff; + color: $white; font-weight: bold; font-size: em(18); @include transition(none); @@ -1002,10 +1002,10 @@ section.wiki { } .modal-backdrop { + @extend %ui-depth3; position: fixed; top: 0; left: 0; - z-index: 999; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); @@ -1026,14 +1026,14 @@ section.wiki { #circuit_editor_modal.modal { + @extend %ui-depth4; width: 648px; - z-index: 9999; margin-left: -325px; top: 150px; .modal-header { h1, p { - color: #fff; + color: $white; } h1 { @@ -1059,7 +1059,7 @@ section.wiki { .modal-footer .btn { @include button(simple, #eee); font-size: 0.8em; - margin-right: 5px; + margin-right: ($baseline/4); line-height: 1.2em; text-transform: none !important; letter-spacing: 0 !important; @@ -1074,6 +1074,6 @@ section.wiki { font-size: 0.8em; } - margin-right: 10px; + margin-right: ($baseline/2); } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index d5d27e4d4c..9f2c4a5db4 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -20,7 +20,7 @@ body.discussion { } .edit-post-form { - @include clearfix; + @include clearfix(); margin-bottom: ($baseline*2); width: 100%; @include box-sizing(border-box); @@ -36,7 +36,7 @@ body.discussion { .post-cancel { @include white-button; float: left; - margin: ($baseline/2) 0 0 ($baseline*.75); + margin: ($baseline/2) 0 0 ($baseline*0.75); } .post-update { @@ -226,7 +226,7 @@ body.discussion { } .container .discussion-body { - @include clearfix; + @include clearfix(); display: block; border: none; background: transparent; @@ -237,7 +237,7 @@ body.discussion { padding: 30px; font-size: 20px; font-weight: 700; - color: #ccc; + color: $gray-l3; text-align: center; } @@ -258,7 +258,7 @@ body.discussion { padding: 40px 40px 10px; section { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $gray-l3; } .label { @@ -278,7 +278,7 @@ body.discussion { .home-title { font-size: 18px; color: $black; - margin-bottom: 5px; + margin-bottom: ($baseline/4); } .home-description { font-size: 12px; @@ -621,7 +621,7 @@ body.discussion { .discussion-reply-new { padding: $baseline ($baseline*1.5); - @include clearfix; + @include clearfix(); @include transition(opacity .2s linear 0s); h4 { @@ -785,18 +785,18 @@ body.discussion { } .discussion-post { - @include clearfix; + @include clearfix(); .inline-comment-count { + @extend %ui-depth2; position: relative; - z-index: 100; float: right; display: block; height: 27px; margin-top: 6px; margin-right: 8px; padding: 0 8px; - border-radius: 5px; + border-radius: ($baseline/4); font-size: 12px; font-weight: 400; line-height: 25px; @@ -805,7 +805,7 @@ body.discussion { header { padding-bottom: 0; - margin-bottom: ($baseline*.75); + margin-bottom: ($baseline*0.75); .posted-details { margin-top: ($baseline/5); @@ -837,11 +837,11 @@ body.discussion { .responses { header { padding-bottom: 0; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); .posted-by { float: left; - margin-right: 5px; + margin-right: ($baseline/4); font-size: 16px; } } @@ -866,7 +866,7 @@ body.discussion { .post-tools { box-shadow: 0 1px 1px $shadow inset; - background: #f6f6f6; + background: $gray-l6; &:hover { background: #fcfcfc; @@ -932,7 +932,7 @@ body.discussion { } section.pagination { - margin-top: 30px; + margin-top: ($baseline*1.5); nav.discussion-paginator { float: right; @@ -949,7 +949,7 @@ body.discussion { display: inline-block; height: 35px; padding: 0 15px; - border: 1px solid #ccc; + border: 1px solid $gray-l3; border-radius: 3px; font-size: 13px; font-weight: 700; @@ -965,7 +965,7 @@ body.discussion { .edit-post-form { width: 100%; margin-bottom: $baseline; - @include clearfix; + @include clearfix(); @include box-sizing(border-box); .form-row { @@ -1062,7 +1062,7 @@ body.discussion { // post metadata - cohorts .group-visibility-label { font-size: 12px; - color:#000; + color:$black; font-style: italic; background-color: $white; } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 26f173f542..af9974f31f 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -6,7 +6,7 @@ display: block; border: 1px solid #2d81ad; border-radius: 3px; - padding: 0 ($baseline*.75); + padding: 0 ($baseline*0.75); height: 35px; color: $white; text-shadow: none; @@ -25,7 +25,7 @@ display: block; border: 1px solid #aaa; border-radius: 3px; - padding: 0 ($baseline*.75); + padding: 0 ($baseline*0.75); height: 35px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); color: $dark-gray; @@ -42,7 +42,7 @@ display: block; border: 1px solid #222; border-radius: 3px; - padding: 0 ($baseline*.75); + padding: 0 ($baseline*0.75); height: 35px; background: -webkit-linear-gradient(top, #777, #555); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); @@ -97,7 +97,7 @@ } @mixin discussion-wmd-preview { - padding: 10px 20px; + padding: ($baseline/2) $baseline; width: 100%; color: #333; diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 5a8ff68a03..885bfc81b4 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -49,7 +49,7 @@ position: relative; width: 100%; border-radius: 3px; - margin: 5px 0 0 0; + margin: ($baseline/4) 0 0 0; border: 1px solid $gray-l3; padding: ($baseline/2) ($baseline*0.75); background: $white; @@ -99,7 +99,7 @@ @include box-sizing(border-box); display: inline-block; border: 1px solid transparent; - border-radius: 5px; + border-radius: ($baseline/4); color: $gray-l1; .action-icon { diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index 0d5a374a4d..93b1af171b 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -101,7 +101,7 @@ width: 20px; height: 20px; background-image: url('/static/images/wmd-buttons-transparent.png'); - background-position: 0px 0px; + background-position: 0 0; background-repeat: no-repeat; } diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index 3b96976252..70c710b4a6 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -4,7 +4,7 @@ // UI: form structure .forum-new-post-form, .edit-post-form { - @include clearfix; + @include clearfix(); box-sizing: border-box; margin: 0; border-radius: 3px; @@ -71,7 +71,7 @@ @include white-button; @extend %cont-truncated; z-index: 1000; - padding: 0 $baseline 0 ($baseline*.75); + padding: 0 $baseline 0 ($baseline*0.75); height: 40px; font-size: 14px; line-height: 36px; @@ -101,7 +101,7 @@ line-height: 36px; .icon { - margin-right: 5px; + margin-right: ($baseline/4); } } @@ -208,10 +208,10 @@ .topic-menu-wrapper { @include box-sizing(border-box); + @extend %ui-depth4; position: absolute; top: 40px; left: 0; - z-index: 9999; border: 1px solid $gray-l3; width: 100%; background: $white; diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index ee0f0071d3..4302a33b95 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -69,7 +69,7 @@ body.discussion, .discussion-module { } .comment-form { - @include clearfix; + @include clearfix(); .comment-form-input { padding: ($baseline/4) ($baseline/2); diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index f094f78df1..2e5dfe7af7 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -3,7 +3,7 @@ %btn { @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; cursor: pointer; text-decoration: none; diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 8170ca4b88..abdfe5f8bf 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -3,6 +3,26 @@ // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) +// weights +%t-ultrastrong { + font-weight: 800; +} +%t-strong { + font-weight: 600; +} +%t-demi-strong { + font-weight: 500; +} +%t-regular { + font-weight: 400; +} +%t-light { + font-weight: 300; +} +%t-ultralight { + font-weight: 200; +} + // headings/titles %t-title { font-family: $f-sans-serif; diff --git a/lms/static/sass/ie.scss b/lms/static/sass/ie.scss index 0544f09e34..3654d3957d 100644 --- a/lms/static/sass/ie.scss +++ b/lms/static/sass/ie.scss @@ -8,7 +8,7 @@ .highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview, .home .highlighted-courses > h2, .home .highlighted-courses > section.outside-app h1, section.outside-app .home .highlighted-courses > h1, header.global { - background: #FFF; + background: $white; } // hide all actions @@ -135,7 +135,7 @@ // make overlay flat black since IE cant handle rgba #lean_overlay { - background: #000; + background: $black; } // active navigation diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss index c2799e6d4d..0bf766a4a6 100644 --- a/lms/static/sass/multicourse/_about_pages.scss +++ b/lms/static/sass/multicourse/_about_pages.scss @@ -2,7 +2,7 @@ padding: 20px 30px 120px; > nav { - margin-bottom: 80px; + margin-bottom: ($baseline*4); text-align: center; width: flex-grid(12); @@ -34,12 +34,12 @@ .vision { h1 + hr { - margin-bottom: 80px; + margin-bottom: ($baseline*4); } .our-mission { border-bottom: 1px solid rgb(220,220,220); - @include clearfix; + @include clearfix(); margin: 0 auto 100px; padding-bottom: 40px; @@ -64,7 +64,7 @@ float: right; font-style: italic; line-height: 1.4; - margin: 0px; + margin: 0; padding: 5px 0px 5px 20px; text-transform: none; width: flex-grid(9); @@ -73,15 +73,15 @@ .message { border-bottom: 1px solid rgb(220,220,220); - @include clearfix; - margin-bottom: 80px; + @include clearfix(); + margin-bottom: ($baseline*4); padding-bottom: 80px; position: relative; hr { bottom: 0px; display: none; - margin: 0px; + margin: 0; position: absolute; width: 100%; } @@ -109,7 +109,7 @@ > article { @include box-sizing(border-box); float: left; - padding-left: 20px; + padding-left: $baseline; width: flex-grid(9); } @@ -133,7 +133,7 @@ } .partners { - @include clearfix; + @include clearfix(); > article { float: left; @@ -148,7 +148,7 @@ .faq { - @include clearfix; + @include clearfix(); nav.categories { border: 1px solid rgb(220,220,220); @@ -185,18 +185,18 @@ > h2 { border-bottom: 1px solid rgb(220,220,220); - margin-bottom: 40px; - padding-bottom: 20px; + margin-bottom: ($baseline*2); + padding-bottom: $baseline; } } .response { - margin-bottom: 40px; + margin-bottom: ($baseline*2); h3 { font-family: $sans-serif; font-weight: 700; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); } } } @@ -205,13 +205,13 @@ .press { .press-story { border-bottom: 1px solid rgb(220,220,220); - @include clearfix; - margin-bottom: 40px; + @include clearfix(); + margin-bottom: ($baseline*2); padding-bottom: 40px; &:last-child { border: none; - margin: 0px; + margin: 0; padding: 0px; } @@ -237,17 +237,17 @@ width: flex-grid(10); header { - margin-bottom: 10px; + margin-bottom: ($baseline/2); h3 { font-family: $sans-serif; font-weight: 700; - margin-bottom: 5px; + margin-bottom: ($baseline/4); } span.post-date { color: $lighter-base-font-color; - margin-right: 10px; + margin-right: ($baseline/2); } } } @@ -255,7 +255,7 @@ } .contact { - @include clearfix; + @include clearfix(); margin: 0 auto; .photo { @@ -279,11 +279,11 @@ ul { list-style: none; - margin: 0px; + margin: 0; padding: 0px; li { - margin-bottom: 10px; + margin-bottom: ($baseline/2); } } } diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 77ba0b0301..11a0c78198 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -104,7 +104,7 @@ .container, .introduction { @include box-sizing(border-box); - @include clearfix; + @include clearfix(); margin: 0 auto; width: 960px; background: $container-bg; @@ -241,7 +241,7 @@ .cta-login-action { @extend %btn-secondary-grey-outline; - padding: ($baseline/10) ($baseline*.75); + padding: ($baseline/10) ($baseline*0.75); margin-left: ($baseline/4); } } @@ -343,7 +343,7 @@ input, textarea { width: 100%; margin: 0; - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); &.long { width: 100%; diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index 24e04bdb75..2ba01bcb20 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -9,7 +9,7 @@ background-size: cover; box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5); border-bottom: 1px solid $border-color-3; - box-shadow: inset 0 1px 5px 0 rgba(0,0,0, 0.1); + box-shadow: inset 0 1px 5px 0 $shadow-l1; height: 280px; margin-top: $header_image_margin; padding-top: 150px; @@ -22,7 +22,7 @@ border: 1px solid $border-color-3; box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); @include box-sizing(border-box); - @include clearfix; + @include clearfix(); margin: 0 auto; max-width: 1200px; min-width: 760px; @@ -35,10 +35,10 @@ } .intro { @include box-sizing(border-box); - @include clearfix; + @include clearfix(); display: table-cell; vertical-align: middle; - padding: 20px 20px; + padding: $baseline; position: relative; width: flex-grid(8) + flex-gutter(); z-index: 2; @@ -46,8 +46,8 @@ > hgroup { border-bottom: 1px solid $border-color-2; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); - margin-bottom: 20px; - padding-bottom: 20px; + margin-bottom: $baseline; + padding-bottom: $baseline; width: 100%; h1 { @@ -63,7 +63,7 @@ color: $lighter-base-font-color; font: italic 800 0.6em/1em $sans-serif; letter-spacing: 0px; - margin-left: 15px; + margin-left: ($baseline*0.75); text-shadow: 0 1px rgba(255,255,255, 0.6); text-transform: none; @@ -92,7 +92,7 @@ } .main-cta { - @include clearfix; + @include clearfix(); float: left; margin-right: flex-gutter(); @include transition(all 0.15s linear 0s); @@ -105,7 +105,7 @@ display: block; font: normal 1.2rem/1.6rem $sans-serif; letter-spacing: 1px; - padding: 10px 0px; + padding: ($baseline/2) 0; text-transform: uppercase; text-align: center; width: flex-grid(6); @@ -129,7 +129,7 @@ float: left; font: normal 1.2rem/1.6rem $sans-serif; letter-spacing: 1px; - padding: 10px 0px; + padding: ($baseline/2) 0; text-transform: uppercase; text-align: center; width: flex-grid(3, 8); @@ -161,7 +161,7 @@ color: rgb(143, 14, 14); display: none; padding: 12px; - margin-top: 5px; + margin-top: ($baseline/4); } } } @@ -184,7 +184,7 @@ .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); border-radius: 4px; - box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4); + box-shadow: 0 1px 12px 0 $shadow-d1; border: 2px solid rgba(255,255,255, 0.8); height: 80px; left: 50%; @@ -232,7 +232,7 @@ } .container { - @include clearfix; + @include clearfix(); .wrap-instructor-info { &.studio-view { @@ -261,7 +261,7 @@ nav { border-bottom: 1px solid $border-color-2; @include box-sizing(border-box); - @include clearfix; + @include clearfix(); margin: 40px 0; width: flex-grid(12); @@ -315,20 +315,20 @@ .inner-wrapper { > section { - margin-bottom: 40px; + margin-bottom: ($baseline*2); } .course-staff { .teacher { - @include clearfix; - margin-bottom: 40px; + @include clearfix(); + margin-bottom: ($baseline*2); h3 { color: $base-font-color; font-family: $sans-serif; font-weight: 700; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); text-transform: none; } @@ -363,19 +363,19 @@ } .faq { - @include clearfix; + @include clearfix(); .responses { float: left; } .response { - margin-bottom: 40px; + margin-bottom: ($baseline*2); h3 { font-family: $sans-serif; font-weight: 700; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); } } } @@ -405,7 +405,7 @@ background: url('../images/opencourseware.png') 0 0 no-repeat; width: 266px; height: 31px; - margin-bottom: 20px; + margin-bottom: $baseline; } ul { @@ -446,7 +446,7 @@ font-weight: 800; display: inline-block; letter-spacing: 0px; - margin-right: 15px; + margin-right: ($baseline*0.75); padding-right: 15px; &:hover, &:focus { @@ -516,7 +516,7 @@ } &:last-child { - margin-right: 0px; + margin-right: 0; } } } @@ -531,11 +531,11 @@ .important-dates { list-style: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0 ($baseline/2); - .important-dates-item { - @include clearfix; + li { + @include clearfix(); border-bottom: 1px dotted $border-color-2; margin-bottom: $baseline; padding-bottom: ($baseline/2); diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index 092fab4c20..46b7f90f23 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -1,6 +1,6 @@ .find-courses, .university-profile { background: $course-profile-bg; - padding-bottom: 60px; + padding-bottom: ($baseline*3); header.search { background: $course-profile-bg; @@ -18,17 +18,17 @@ margin: 0 auto; max-width: 1200px; min-width: 760px; - padding-top: 200px; + padding-top: ($baseline*10); position: relative; text-align: center; width: flex-grid(12); > hgroup { - background: #FFF; + background: $white; background: $course-header-bg; border: 1px solid $border-color-3; box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); - padding: 20px 30px; + padding: $baseline ($baseline*1.5); position: relative; z-index: 2; } @@ -75,7 +75,7 @@ h1, h2 { display: inline-block; letter-spacing: 1px; - margin-bottom: 0px; + margin-bottom: 0; text-shadow: 0 1px rgba(255,255,255, 0.8); vertical-align: middle; } @@ -85,9 +85,9 @@ section.message { border-top: 1px solid $border-color-2; - @include clearfix; - margin-top: 20px; - padding-top: 60px; + @include clearfix(); + margin-top: $baseline; + padding-top: ($baseline*3); @include columns(2 20px); } } diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index e3820f30c8..a12138cc8a 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -2,7 +2,7 @@ // ==================== .dashboard { - @include clearfix; + @include clearfix(); padding: ($baseline*2) 0 0 0; .profile-sidebar { @@ -22,8 +22,8 @@ h1.user-name { overflow: hidden; - margin: 0px; - padding: ($baseline*.75) ($baseline/2); + margin: 0; + padding: ($baseline*0.75) ($baseline/2); color: $base-font-color; text-transform: none; text-wrap: nowrap; @@ -33,12 +33,12 @@ } .user-info { - @include clearfix; + @include clearfix(); > ul { @include box-sizing(border-box); - @include clearfix; - margin: 0px; + @include clearfix(); + margin: 0; border: 1px solid $border-color-2; border-top: none; border-radius: 0 0 ($baseline/4) ($baseline/4); @@ -47,10 +47,10 @@ background: $white; li { - @include clearfix; + @include clearfix(); border-bottom: 1px dotted $border-color-2; list-style: none; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); padding-bottom: 17px; &:last-child { @@ -185,7 +185,7 @@ } .news-carousel { - @include clearfix; + @include clearfix(); margin: 30px 10px 0; border: 1px solid $border-color-2; background: $dashboard-profile-color; @@ -196,7 +196,7 @@ } header { - @include clearfix; + @include clearfix(); height: 50px; } @@ -228,7 +228,7 @@ h4 { float: left; - margin-left: 15px; + margin-left: ($baseline*0.75); font-size: 15px; line-height: 48px; font-weight: 700; @@ -256,7 +256,7 @@ .news-image { height: 180px; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); img { width: 100%; @@ -266,7 +266,7 @@ h5 { margin-bottom: 8px; - margin-left: 5px; + margin-left: ($baseline/4); a { font-size: 16px; @@ -275,7 +275,7 @@ } .excerpt { - margin-left: 5px; + margin-left: ($baseline/4); font-size: 13px; padding-bottom: 40px; } @@ -287,12 +287,12 @@ // course listings .my-courses { @include float(left); - margin: 0px; + margin: 0; width: flex-grid(9); > header { border-bottom: 1px solid $border-color-2; - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .empty-dashboard-message { @@ -302,7 +302,7 @@ p { color: $lighter-base-font-color; font-style: italic; - margin-bottom: 20px; + margin-bottom: $baseline; text-shadow: 0 1px rgba(255,255,255, 0.6); } @@ -312,13 +312,13 @@ background-color: $button-bg-color; border: 1px solid $border-color-2; border-radius: 4px; - box-shadow: 0 1px 8px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 8px 0 $shadow-l1; @include box-sizing(border-box); color: $base-font-color; font-family: $sans-serif; display: inline-block; letter-spacing: 1px; - margin-left: 5px; + margin-left: ($baseline/4); padding: 5px 10px; text-shadow: 0 1px rgba(255,255,255, 0.6); @@ -368,7 +368,7 @@ max-height: 100%; width: 200px; height: 120px; - margin: 0px; + margin: 0; border-radius: ($baseline/10); border: 1px solid $dashboard-course-cover-border; border-bottom: 4px solid $dashboard-course-cover-border; @@ -381,7 +381,7 @@ } .info { - @include clearfix; + @include clearfix(); @include padding(0, 10px, 0, 230px); > hgroup { @@ -410,7 +410,7 @@ h3 a, h3 span { display: block; - margin-bottom: 10px; + margin-bottom: ($baseline/2); font-family: $sans-serif; font-size: 34px; line-height: 42px; @@ -428,7 +428,7 @@ box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); margin-top: 17px; margin-right: flex-gutter(); - padding: 5px; + padding: ($baseline/4); width: flex-grid(8); float: left; @include box-sizing(border-box); @@ -442,7 +442,7 @@ } .course-status-completed { - background: #ccc; + background: $gray-l3; color: $very-light-text; p { @@ -602,7 +602,7 @@ // UI: message .message { - @include clearfix; + @include clearfix(); border-radius: 3px; display: none; z-index: 10; @@ -610,7 +610,7 @@ padding: ($baseline*0.5) $baseline; font-family: $sans-serif; background: tint($yellow,70%); - border: 1px solid #ccc; + border: 1px solid $gray-l3; // STATE: shown &.is-shown { @@ -630,7 +630,7 @@ } .actions { - @include clearfix; + @include clearfix(); list-style: none; margin: 0; padding: 0; @@ -660,7 +660,7 @@ } .message-title .value, .message-copy { - @include transition(color 0.25s ease-in-out 0s); + @include transition(color $tmg-f2 ease-in-out 0s); } // STATE: hover @@ -674,7 +674,7 @@ } .wrapper-extended { - @include transition(opacity 0.25s ease-in-out 0); + @include transition(opacity $tmg-f2 ease-in-out 0); display: none; opacity: 0.0; } @@ -706,7 +706,7 @@ } .ui-toggle-expansion { - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); @include transform-origin(50% 50%); @include font-size(21); display: inline-block; @@ -774,7 +774,7 @@ // TYPE: status .message-status { background: tint($yellow,70%); - border-color: #ccc; + border-color: $gray-l3; .message-copy { @extend %t-copy-sub1; @@ -841,14 +841,14 @@ &.exam-register { .message-copy { - margin-top: 5px; + margin-top: ($baseline/4); width: 55%; } } &.exam-schedule { .exam-button { - margin-top: 5px; + margin-top: ($baseline/4); } } @@ -864,7 +864,7 @@ .button { display: inline-block; - margin-top: 10px; + margin-top: ($baseline/2); padding: 9px 18px 10px; font-size: 13px; font-weight: bold; @@ -1127,7 +1127,7 @@ p.course-block{ border-style: solid; border-color: #E3DC86; - padding: 5px; + padding: ($baseline/4); border-width: 1px; background: #FDFBE4; @@ -1173,7 +1173,7 @@ } a.disable-look-settings{ @extend a.disable-look-unregister; - margin-right: 10px; + margin-right: ($baseline/2); } } diff --git a/lms/static/sass/multicourse/_edge.scss b/lms/static/sass/multicourse/_edge.scss index e591ae74d8..150a2738f3 100644 --- a/lms/static/sass/multicourse/_edge.scss +++ b/lms/static/sass/multicourse/_edge.scss @@ -7,13 +7,13 @@ $paleYellow: #fffcf1; @mixin button { display: inline-block; - padding: 4px 20px 6px; + padding: 4px $baseline 6px; font-family: $sans-serif; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; - 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; @include transition(background-color .15s linear 0s, box-shadow .15s linear 0s); &.disabled { @@ -40,11 +40,11 @@ $paleYellow: #fffcf1; border-radius: 3px; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-color: $blue; - color: #fff; + color: $white; &:hover, &:focus { background-color: #62aaf5; - color: #fff; + color: $white; } } @@ -67,7 +67,7 @@ $paleYellow: #fffcf1; border-top: 5px solid $blue; header { - @include clearfix; + @include clearfix(); background: $extraDarkGrey; border-bottom: 3px solid $blue; } @@ -85,23 +85,23 @@ $paleYellow: #fffcf1; margin: auto; .content { - padding: 40px 60px 36px; - background: #fff; + padding: ($baseline*2) 60px 36px; + background: $white; border: 1px solid $darkGrey; border-radius: 3px; - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); - @include clearfix; + box-shadow: 0 1px 2px $shadow-l1; + @include clearfix(); } .log-in-form { float: left; width: 470px; - margin-right: 50px; + margin-right: ($baseline*2.5); padding-right: 49px; border-right: 1px solid $lightGrey; .row { - margin-bottom: 20px; + margin-bottom: $baseline; border-bottom: none; } @@ -132,7 +132,7 @@ $paleYellow: #fffcf1; .forgot-button { font-size: 12px; line-height: 41px; - margin-left: 10px; + margin-left: ($baseline/2); } } @@ -143,12 +143,12 @@ $paleYellow: #fffcf1; .register-button { @include grey-button; padding: 10px 20px 12px; - margin-top: 20px; + margin-top: $baseline; } } h2 { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); font-family: $sans-serif; font-size: 24px; font-weight: 300; @@ -158,7 +158,7 @@ $paleYellow: #fffcf1; } h3 { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); font-family: $sans-serif; font-size: 24px; font-weight: 300; @@ -210,7 +210,7 @@ $paleYellow: #fffcf1; header { padding-top: 13px; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); border: none; background: none; } @@ -228,7 +228,7 @@ $paleYellow: #fffcf1; input[type="text"], input[type="password"] { height: 40px; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); font-size: 13px; font-weight: 400; } @@ -236,7 +236,7 @@ $paleYellow: #fffcf1; input[type="submit"] { @include blue-button; display: block; - color: #fff; + color: $white; text-shadow: none; } @@ -247,16 +247,16 @@ $paleYellow: #fffcf1; } .input-group { - margin-bottom: 20px; + margin-bottom: $baseline; padding: 0; } .terms-of-service { - margin-bottom: 5px; + margin-bottom: ($baseline/4); } .honor-code { - margin-bottom: 20px; + margin-bottom: $baseline; } .login-extra { @@ -265,7 +265,7 @@ $paleYellow: #fffcf1; .modal-form-error { font-size: 14px; - color: #fff; + color: $white; } } } diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss index 1854ff8103..200dd2d32c 100644 --- a/lms/static/sass/multicourse/_error-pages.scss +++ b/lms/static/sass/multicourse/_error-pages.scss @@ -1,11 +1,11 @@ section.outside-app { @extend .container; @include text-align(left); - padding: 80px 0; + padding: ($baseline*4) 0; h1 { @extend h2; - margin-bottom: 40px; + margin-bottom: ($baseline*2); } p { diff --git a/lms/static/sass/multicourse/_help.scss b/lms/static/sass/multicourse/_help.scss index b1ea577b39..6604bb89b0 100644 --- a/lms/static/sass/multicourse/_help.scss +++ b/lms/static/sass/multicourse/_help.scss @@ -1,7 +1,7 @@ .static-container.help { section.questions { - @include clearfix; + @include clearfix(); nav.categories { border: 1px solid rgb(220,220,220); @@ -38,20 +38,20 @@ > h2 { border-bottom: 1px solid rgb(220,220,220); - margin-bottom: 40px; - padding-bottom: 20px; + margin-bottom: ($baseline*2); + padding-bottom: $baseline; } } .response { - margin-bottom: 40px; + margin-bottom: ($baseline*2); h3 { background: url('/static/images/bullet-closed.png') no-repeat left 0.25em; font-family: $sans-serif; font-weight: 700; - margin-bottom: 10px; - padding-left: 20px; + margin-bottom: ($baseline/2); + padding-left: $baseline; cursor: pointer; } diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index 310bb2c50d..788ccadb2d 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -1,5 +1,5 @@ .home { - padding: 0px; + padding: 0; > .container { @include box-sizing(border-box); @@ -11,26 +11,26 @@ background-size: cover; background-image: $homepage-bg-image; border-bottom: 1px solid $border-color-3; - box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1); - @include clearfix; + box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1; + @include clearfix(); height: 460px; overflow: hidden; margin-top: $header_image_margin; - padding: 0px; + padding: 0; width: flex-grid(12); .outer-wrapper { @extend .animation-home-header-pop-up; margin: 0 auto; - padding: 240px 10px 0px; + padding: 240px ($baseline/2) 0; position: relative; max-width: 1200px; min-width: 760px; - @include clearfix; + @include clearfix(); } .title { - background: #FFF; + background: $white; background: $course-header-bg; border: 1px solid $border-color-3; box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); @@ -79,7 +79,7 @@ } .media { - background: #FFF; + background: $white; background: $course-header-bg; border: 1px solid $border-color-3; border-left: 0; @@ -107,20 +107,20 @@ .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); border-radius: 4px; - box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4); + box-shadow: 0 1px 12px 0 $shadow-d1; @include box-sizing(border-box); border: 2px solid rgba(255,255,255, 0.8); height: 60px; left: 50%; margin-top: -30px; - margin-left: -30px; + margin-left: -($baseline*1.5); position: absolute; top: 50%; @include transition(all 0.15s linear 0s); width: 60px; &::after { - color: #fff; + color: $white; color: rgba(255,255,255, 0.8); content: "\25B6"; display: block; @@ -147,7 +147,7 @@ border-color: rgba(255,255,255, 0.9); &::after { - color: #fff; + color: $white; color: rgba(255,255,255, 1); } } @@ -157,7 +157,7 @@ .highlighted-courses { @include box-sizing(border-box); - margin-bottom: 40px; + margin-bottom: ($baseline*2); position: relative; width: flex-grid(12); z-index: 1; @@ -167,7 +167,7 @@ border: 1px solid $border-color-2; border-radius: 4px; border-top-color: $border-color-1; - box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2); + box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 $shadow; color: $lighter-base-font-color; letter-spacing: 1px; margin-bottom: 0px; @@ -202,7 +202,7 @@ hr { @extend %faded-hr-divider-light; border: none; - margin: 0px; + margin: 0; position: relative; z-index: 2; @@ -262,7 +262,7 @@ } a { - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); &::before { @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); @@ -275,7 +275,7 @@ opacity: 0; width: 200px; position: absolute; - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); top: 50%; z-index: 1; } @@ -285,7 +285,7 @@ left: 0px; position: absolute; text-align: center; - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); width: 100%; z-index: 2; @@ -303,7 +303,7 @@ img { position: relative; - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); vertical-align: middle; z-index: 2; } @@ -367,19 +367,19 @@ .more-info { border: 1px solid $border-color-2; - margin-bottom: 80px; + margin-bottom: ($baseline*4); width: flex-grid(12); header { @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); border-bottom: 1px solid $border-color-2; - @include clearfix; + @include clearfix(); padding: 10px 20px 8px; position: relative; h2 { float: left; - margin: 0px; + margin: 0; text-shadow: 0 1px rgba(255,255,255, 0.6); } @@ -416,15 +416,15 @@ .blog-posts { border-bottom: 1px solid $border-color-2; - margin-bottom: 20px; - padding-bottom: 20px; - @include clearfix; + margin-bottom: $baseline; + padding-bottom: $baseline; + @include clearfix(); > article { border: 1px dotted transparent; border-color: $border-color-2; @include box-sizing(border-box); - @include clearfix; + @include clearfix(); float: left; margin-right: flex-gutter(); padding: 10px; @@ -434,11 +434,11 @@ &:hover, &:focus { background: $body-bg; border: 1px solid $border-color-2; - box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.1); + box-shadow: inset 0 0 3px 0 $shadow-l1; } &:last-child { - margin-right: 0px; + margin-right: 0; } .post-graphics { @@ -494,7 +494,7 @@ line-height: 1.6em; font-family: $serif; font-style: italic; - margin-left: 10px; + margin-left: ($baseline/2); &.read-more { float: right; diff --git a/lms/static/sass/multicourse/_jobs.scss b/lms/static/sass/multicourse/_jobs.scss index e5caee6810..7f8baf8a01 100644 --- a/lms/static/sass/multicourse/_jobs.scss +++ b/lms/static/sass/multicourse/_jobs.scss @@ -3,7 +3,7 @@ q { display: block; - margin: 10px 0; + margin: ($baseline/2) 0; font-style: italic; text-align: justify; } @@ -15,12 +15,12 @@ } h1 + hr { - margin-bottom: 80px; + margin-bottom: ($baseline*4); } .message { - @include clearfix; - margin-bottom: 80px; + @include clearfix(); + margin-bottom: ($baseline*4); position: relative; .photo { @@ -44,7 +44,7 @@ blockquote { margin-left: 0; - margin-bottom: 40px; + margin-bottom: ($baseline*2); &:last-child { margin-bottom: 0; @@ -69,15 +69,15 @@ } .jobs-wrapper { - @include clearfix; + @include clearfix(); float: left; padding-top: 80px; width: flex-grid(12); > h2 { display: none; - margin-bottom: 60px; - padding-bottom: 20px; + margin-bottom: ($baseline*3); + padding-bottom: $baseline; } .jobs-sidebar { @@ -88,7 +88,7 @@ width: flex-grid(3); nav { - margin-bottom: 40px; + margin-bottom: ($baseline*2); a { display: block; @@ -105,7 +105,7 @@ } p + h2 { - margin-top: 40px; + margin-top: ($baseline*2); } } @@ -133,7 +133,7 @@ h3 { font-family: $sans-serif; font-weight: 700; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); } h4 { @@ -141,7 +141,7 @@ font-family: $sans-serif; font-weight: 700; margin-top: 25px; - margin-bottom: 10px; + margin-bottom: ($baseline/2); } ul { diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss index adcacb2883..acc00a8ffc 100644 --- a/lms/static/sass/multicourse/_media-kit.scss +++ b/lms/static/sass/multicourse/_media-kit.scss @@ -11,7 +11,7 @@ $white: rgb(255,255,255); .wrapper-mediakit { border-radius: 4px; @include box-sizing(border-box); - box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 10px 0 $shadow-l1; margin: ($baseline*3) 0 0 0; border: 1px solid $border-color; padding: ($baseline*2) ($baseline*3); @@ -38,7 +38,7 @@ $white: rgb(255,255,255); hr { @extend %faded-hr-divider-light; border: none; - margin: 0px; + margin: 0; position: relative; z-index: 2; @@ -115,7 +115,7 @@ $white: rgb(255,255,255); aside { border-radius: 2px; @include box-sizing(border-box); - box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.2); + box-shadow: 0 1px 4px 0 $shadow; width: 330px; float: left; border: 3px solid tint(rgb(96, 155, 216), 35%); @@ -173,7 +173,7 @@ $white: rgb(255,255,255); .library { border-radius: 2px; @include box-sizing(border-box); - box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.2); + box-shadow: 0 1px 4px 0 $shadow; border: 3px solid tint($light-gray,50%); padding: 0; background: tint($light-gray,50%); @@ -222,7 +222,7 @@ $white: rgb(255,255,255); a { border-radius: 2px; @include box-sizing(border-box); - box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 2px 0 $shadow-l1; display: block; min-height: 380px; border: 2px solid tint($light-gray,75%); diff --git a/lms/static/sass/multicourse/_press_release.scss b/lms/static/sass/multicourse/_press_release.scss index 6efa4d65c3..e45e8f6356 100644 --- a/lms/static/sass/multicourse/_press_release.scss +++ b/lms/static/sass/multicourse/_press_release.scss @@ -2,27 +2,27 @@ background: rgb(250,250,250); .container { - padding: 60px 0 120px; + padding: ($baseline*3) 0 ($baseline*6); h1 + hr { - margin-bottom: 60px; + margin-bottom: ($baseline*3); } h3 + hr { - margin-bottom: 60px; + margin-bottom: ($baseline*3); } h3 { color: $lighter-base-font-color; font-style: italic; - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); text-align: center; } li { color: $base-font-color; font: normal 1em/1.6em $serif; - margin: 0px; + margin: 0; a { font: 1em $serif; @@ -30,14 +30,14 @@ } li + li { - margin-top: 20px; + margin-top: $baseline; } > article { border: 1px solid rgb(220,220,220); border-radius: 10px; @include box-sizing(border-box); - box-shadow: 0 2px 16px 0 rgba(0,0,0, 0.1); + box-shadow: 0 2px 16px 0 $shadow-l1; margin: 0 auto; padding: 80px 80px 40px 80px; width: flex-grid(10); @@ -61,7 +61,7 @@ figcaption { font: normal 0.8em/1em $serif; - padding: 5px; + padding: ($baseline/4); a { font: normal 1em $serif; } @@ -73,14 +73,14 @@ } h2 + p { - margin-top: 30px; + margin-top: ($baseline*1.5); } .contact { - margin-top: 20px; + margin-top: $baseline; p + p { - margin-top: 0px; + margin-top: 0; } } @@ -90,7 +90,7 @@ div.social-sharing { - @include clearfix; + @include clearfix(); hr.horizontal-divider { margin-top: 40px !important; @@ -98,14 +98,14 @@ .fb-like { margin-top: 8px; - margin-left: 10px; + margin-left: ($baseline/2); float: left; } p { float: left; margin-top: 8px; - margin-right: 10px; + margin-right: ($baseline/2); } a { diff --git a/lms/static/sass/shared/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss index fbc02ef4a8..88fa0b7f4c 100644 --- a/lms/static/sass/shared/_activation_messages.scss +++ b/lms/static/sass/shared/_activation_messages.scss @@ -1,9 +1,9 @@ .container.activation { - padding: 60px 0px 120px; + padding: ($baseline*3) 0 ($baseline*6); h1 { - margin-bottom: 20px; - padding: 10px; + margin-bottom: $baseline; + padding: ($baseline/2); &.invalid { @extend %error-message-colors; @@ -15,16 +15,16 @@ } h1 + hr { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .message { background: rgb(252,252,252); border: 1px solid rgb(200,200,200); - box-shadow: 0 3px 20px 0 rgba(0,0,0, 0.2); + box-shadow: 0 3px 20px 0 $shadow; border-radius: 4px; margin: 0 auto; - padding: 40px; + padding: ($baseline*2); width: flex-grid(6); } } diff --git a/lms/static/sass/shared/_course_filter.scss b/lms/static/sass/shared/_course_filter.scss index 6ac23849f3..3b6aafca58 100644 --- a/lms/static/sass/shared/_course_filter.scss +++ b/lms/static/sass/shared/_course_filter.scss @@ -9,7 +9,7 @@ border-bottom-color: rgb(200,200,200); border-top: none; @include border-bottom-radius(4px); - @include clearfix; + @include clearfix(); height: 60px; padding: 12px 10px; position: relative; @@ -25,7 +25,7 @@ .dropdown { float: left; - margin-right: 15px; + margin-right: ($baseline*0.75); position: relative; .filter-heading { @@ -49,7 +49,7 @@ background: rgb(255,255,255); border-radius: 0px 4px 4px 4px; border: 1px solid rgb(200,200,200); - box-shadow: 0 2px 15px 0 rgba(0,0,0, 0.2); + box-shadow: 0 2px 15px 0 $shadow; padding: 20px 0px 5px 20px; position: absolute; visibility: hidden; @@ -58,7 +58,7 @@ li { list-style: none; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); } } diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index ddda7b9d2f..8910164bc4 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -1,7 +1,7 @@ .highlighted-courses, .find-courses { .courses { - @include clearfix; - padding: 40px 0px 15px; + @include clearfix(); + padding: ($baseline*2) 0 ($baseline*0.75) ; .university-column { width: flex-grid(4); @@ -36,22 +36,22 @@ border-radius: 2px; @include box-sizing(border-box); box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9); - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); position: relative; width: 100%; @include transition(all 0.15s linear 0s); .status { + @extend %ui-depth3; background: $link-color; color: white; font-size: 10px; left: 10px; - padding: 2px 10px; + padding: 2px ($baseline/2); border-radius: 2px; position: absolute; text-transform: uppercase; top: -6px; - z-index: 100; } .status:after { @@ -81,7 +81,7 @@ border: 1px solid rgba(0,0,0, 0.5); @include border-right-radius(2px); box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15); - @include clearfix; + @include clearfix(); position: absolute; right: -4px; @include transition(all 0.15s linear 0s); @@ -167,7 +167,7 @@ font: bold 1.6em/1.2em $sans-serif; height: 100%; opacity: 0.6; - padding-top: 10px; + padding-top: ($baseline/2); position: absolute; right: 0px; text-align: center; @@ -213,7 +213,7 @@ section { color: $base-font-color; font: normal 1em/1.6em $serif; - margin: 0px; + margin: 0; height: 100%; overflow: hidden; text-overflow: ellipsis; @@ -232,8 +232,8 @@ .start-date { border-left: 1px solid $border-color-2; - margin-left: 5px; - padding-left: 10px; + margin-left: ($baseline/4); + padding-left: ($baseline/2); color: $lighter-base-font-color; letter-spacing: 1px; } diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index ac181096ad..161ea35cc6 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -4,7 +4,7 @@ @import 'neat/neat'; // lib - Neat .wrapper-footer { - box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1); + box-shadow: 0 -1px 5px 0 $shadow-l1; border-top: 1px solid tint($m-gray,50%); padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2); background: $footer-bg; @@ -92,7 +92,7 @@ } .wrapper-logo { - margin: ($baseline*.75) 0; + margin: ($baseline*0.75) 0; a { display: inline-block; @@ -126,7 +126,7 @@ .nav-legal-01 a { &:after { - margin-left: 5px; + margin-left: ($baseline/4); content: "-"; } } @@ -383,7 +383,7 @@ $edx-footer-bg-color: rgb(252,252,252); a { @extend %edx-footer-link; - margin-top: 20px; + margin-top: $baseline; .icon, .copy { display: inline-block; diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss index 1f92414952..f78362bf3f 100644 --- a/lms/static/sass/shared/_forms.scss +++ b/lms/static/sass/shared/_forms.scss @@ -5,7 +5,7 @@ form { label { color: $base-font-color; font: italic 300 1rem/1.6rem $serif; - margin-bottom: 5px; + margin-bottom: ($baseline/4); text-shadow: 0 1px rgba(255,255,255, 0.4); -webkit-font-smoothing: antialiased; @@ -31,16 +31,16 @@ input[type="tel"] { background: $form-bg-color; border: 1px solid $border-color-2; border-radius: 3px; - box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1; @include box-sizing(border-box); font: italic 300 1rem/1.6rem $serif; height: 35px; - padding: 5px 12px; + padding: ($baseline/4) 12px; vertical-align: top; -webkit-font-smoothing: antialiased; &:last-child { - margin-right: 0px; + margin-right: 0; } &:focus { diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 9747f952db..29cf06b520 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -2,19 +2,19 @@ @import 'neat/neat'; // lib - Neat header.global { + @extend %ui-depth1; border-bottom: 1px solid $m-gray; - box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 5px 0 $shadow-l1; background: $header-bg; height: 76px; position: relative; width: 100%; - z-index: 10; nav { - @include clearfix; + @include clearfix(); height: 40px; margin: 0 auto; - padding: 18px 10px 0px; + padding: 18px ($baseline/2) 0; max-width: grid-width(12); min-width: 760px; } @@ -39,12 +39,12 @@ header.global { > li { display: inline-block; - margin-right: 20px; + margin-right: $baseline; position: relative; vertical-align: middle; &:last-child { - margin-right: 0px; + margin-right: 0; } a { @@ -59,13 +59,13 @@ header.global { display: block; font-family: $sans-serif; display: inline-block; - margin: 0px 30px 0px 0px; + margin: 0 ($baseline*1.5) 0 0; text-decoration: none; text-transform: uppercase; text-shadow: 0 1px rgba(255,255,255, 0.6); &:last-child { - margin-right: 0px; + margin-right: 0; } &:hover, &:focus { @@ -75,7 +75,7 @@ header.global { } .primary { - margin-right: 5px; + margin-right: ($baseline/4); > a { @include background-image($button-bg-image); @@ -97,7 +97,7 @@ header.global { vertical-align: middle; &:last-child { - margin-right: 0px; + margin-right: 0; } &:hover, &:focus, &:active { @@ -113,11 +113,11 @@ header.global { > .primary { display: block; @include float(left); - margin: 0px; + margin: 0; position: relative; > a { - margin: 0px; + margin: 0; @include border-right-radius(0px); } @@ -339,7 +339,7 @@ header.global-new { position: relative; width: 100%; border-bottom: 4px solid $courseware-border-bottom-color; - box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 5px 0 $shadow-l1; background: $header-bg; nav { @@ -371,12 +371,12 @@ header.global-new { > li { display: inline-block; - margin-right: 20px; + margin-right: $baseline; position: relative; vertical-align: middle; &:last-child { - margin-right: 0px; + margin-right: 0; } a { @@ -389,13 +389,13 @@ header.global-new { color: $link-color; font-family: $sans-serif; display: inline-block; - margin: 0px 30px 0px 0px; + margin: 0 ($baseline*1.5) 0 0; text-decoration: none; text-transform: uppercase; text-shadow: 0 1px rgba(255,255,255, 0.6); &:last-child { - margin-right: 0px; + margin-right: 0; } &:hover, &:focus { @@ -446,7 +446,7 @@ header.global-new { position: relative; > a { - margin: 0px; + margin: 0; @include border-right-radius(0); } @@ -459,7 +459,7 @@ header.global-new { &.shopping-cart { border-radius: 4px; border: 1px solid $border-color-2; - margin-right: 10px; + margin-right: ($baseline/2); padding-bottom: 6px; } } @@ -610,7 +610,7 @@ header.global-new { position: relative; &:last-child { - margin-right: 10px; + margin-right: ($baseline/2); } a { @@ -734,7 +734,7 @@ header.global-new { width: auto; top: inherit; left: inherit; - margin-left: 10px; + margin-left: ($baseline/2); img { width: auto; @@ -770,7 +770,7 @@ header.global-new { .nav-courseware { div:last-child { - margin-right: 10px; + margin-right: ($baseline/2); } } diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss index f6046153a4..4e1dde6fd0 100644 --- a/lms/static/sass/shared/_modal.scss +++ b/lms/static/sass/shared/_modal.scss @@ -3,79 +3,79 @@ @include background-image(radial-gradient(circle at 50% 30%, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8))); display: none; height:100%; - left: 0px; + left: 0; position: fixed; - top: 0px; + top: 0; width:100%; z-index:100; } .modal { - background: rgba(0,0,0, 0.6); + @extend %ui-depth1; + background: $shadow-d2; border: 1px solid rgba(0, 0, 0, 0.9); - border-radius: 0px; + border-radius: 0; box-shadow: 0 15px 80px 15px rgba(0,0,0, 0.5); - color: #fff; + color: $white; display: none; left: 50%; padding: 8px; position: absolute; width: grid-width(5); - z-index: 12; &.video-modal { left: 50%; - padding: 10px; + padding: ($baseline/2); width: 582px; .inner-wrapper { - background: #000; + background: $black; box-shadow: none; height: 315px; - padding: 10px; + padding: ($baseline/2); width: 560px; } } &.home-page-video-modal { left: 50%; - padding: 10px; + padding: ($baseline/2); width: 662px; .inner-wrapper { - background: #000; + background: $black; box-shadow: none; height: 360px; - padding: 10px; + padding: ($baseline/2); width: 640px; } } .inner-wrapper { + @extend %ui-depth1; background: $modal-bg-color; - border-radius: 0px; + border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.9); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); overflow: hidden; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 10px; + padding-left: ($baseline/2); + padding-right: ($baseline/2); + padding-bottom: ($baseline/2); position: relative; - z-index: 2; header { - margin-bottom: 30px; + @extend %ui-depth1; + margin-bottom: ($baseline*1.5); overflow: hidden; - padding: 28px 20px 0px; + padding: 28px $baseline 0; position: relative; - z-index: 2; &::before { @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%)); content: ""; display: block; height: 400px; - left: 0px; + left: 0; margin: 0 auto; position: absolute; top: -140px; @@ -86,13 +86,13 @@ hr { @extend %faded-hr-divider-light; border: none; - margin: 0px; + margin: 0; position: relative; z-index: 2; &::after { @extend %faded-hr-divider; - bottom: 0px; + bottom: 0; content: ""; display: block; position: absolute; @@ -113,7 +113,7 @@ border: 1px solid rgb(143, 14, 14); color: rgb(143, 14, 14); display: none; - margin-bottom: 20px; + margin-bottom: $baseline; padding: 12px; } @@ -122,30 +122,30 @@ border: 1px solid darken($yellow, 60%); color: darken($yellow, 60%); display: none; - margin-bottom: 20px; + margin-bottom: $baseline; padding: 12px; } .activation-message, .message { - padding: 0 40px 10px; + padding: 0 ($baseline*2) ($baseline/2); p { - margin-bottom: 10px; + margin-bottom: ($baseline/2); } } form { margin-bottom: 12px; - padding: 0px 40px 20px; + padding: 0 ($baseline*2) $baseline; position: relative; z-index: 2; .input-group { - @include clearfix; + @include clearfix(); border-bottom: 1px solid rgb(210,210,210); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); - margin-bottom: 30px; - padding-bottom: 10px; + margin-bottom: ($baseline*1.5); + padding-bottom: ($baseline/2); } label { @@ -163,14 +163,14 @@ } input[type="checkbox"] { - margin-right: 5px; + margin-right: ($baseline/4); } textarea { background: rgb(255,255,255); display: block; height: 45px; - margin-bottom: 20px; + margin-bottom: $baseline; width: 100%; } @@ -180,7 +180,7 @@ background: rgb(255,255,255); display: block; height: 45px; - margin-bottom: 20px; + margin-bottom: $baseline; width: 100%; } @@ -192,8 +192,8 @@ border-radius: 3px; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); display: block; - margin-bottom: 20px; - padding: 8px 10px; + margin-bottom: $baseline; + padding: 8px ($baseline/2); &:hover, &:focus { background: rgb(230,230,230); @@ -210,7 +210,7 @@ } .citizenship, .gender, .date-of-birth { - margin-bottom: 20px; + margin-bottom: $baseline; float: left; width: flex-grid(4); @@ -230,7 +230,7 @@ } .submit { - padding-top: 10px; + padding-top: ($baseline/2); input[type="submit"] { display: block; @@ -269,7 +269,7 @@ } span + a { - margin-left: 15px; + margin-left: ($baseline*0.75); } } } diff --git a/lms/static/sass/shared/_tooltips.scss b/lms/static/sass/shared/_tooltips.scss index eefbc09bef..c94c8f137a 100644 --- a/lms/static/sass/shared/_tooltips.scss +++ b/lms/static/sass/shared/_tooltips.scss @@ -1,7 +1,7 @@ .ui-tooltip.qtip .ui-tooltip-content { background: rgba($pink, .8); border: 0; - color: #fff; + color: $white; font: bold 12px $body-font-family; margin-bottom: 6px; margin-right: 0; diff --git a/lms/static/sass/shared/_unsubscribe.scss b/lms/static/sass/shared/_unsubscribe.scss index a1369da239..c8691231f2 100644 --- a/lms/static/sass/shared/_unsubscribe.scss +++ b/lms/static/sass/shared/_unsubscribe.scss @@ -1,23 +1,23 @@ .container.unsubscribe { - padding: 60px 0px 120px; + padding: ($baseline*3) 0 ($baseline*6); h1 { - margin-bottom: 20px; - padding: 10px; + margin-bottom: $baseline; + padding: ($baseline/2); @extend %success-message-colors; } h1 + hr { - margin-bottom: 30px; + margin-bottom: ($baseline*1.5); } .message { background: rgb(252,252,252); border: 1px solid rgb(200,200,200); - box-shadow: 0 3px 20px 0 rgba(0,0,0, 0.2); + box-shadow: 0 3px 20px 0 $shadow; border-radius: 4px; margin: 0 auto; - padding: 40px; + padding: ($baseline*2); width: flex-grid(6); } } diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index 061defe06f..d1a824ae5e 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -171,13 +171,13 @@ $sm-btn-linkedin: #0077b5; padding-top: 25px; form { - @include clearfix; + @include clearfix(); clear: both; } } .login-form { - margin-bottom: 20px; + margin-bottom: $baseline; } .password-reset-form { @@ -207,7 +207,7 @@ $sm-btn-linkedin: #0077b5; } .form-field { - @include clearfix; + @include clearfix(); clear: both; position: relative; width: 100%; @@ -280,7 +280,7 @@ $sm-btn-linkedin: #0077b5; textarea { display: block; width: 100%; - margin: 0 0 5px; + margin: 0 0 ($baseline/4); padding: 0 ($baseline/2); &.long { @@ -294,7 +294,7 @@ $sm-btn-linkedin: #0077b5; &.checkbox { display: inline; width: auto; - margin-right: 5px; + margin-right: ($baseline/4); } &.error { @@ -365,7 +365,7 @@ $sm-btn-linkedin: #0077b5; .login-provider { @extend %btn-secondary-grey-outline; width: 130px; - padding: 0 0 0 40px; + padding: 0 0 0 ($baseline*2); height: 34px; text-align: left; text-shadow: none; @@ -399,7 +399,7 @@ $sm-btn-linkedin: #0077b5; } &:last-child { - margin-bottom: 20px; + margin-bottom: $baseline; } &.button-Google { diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index f5f8bd9ead..12238f4e17 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -2,26 +2,32 @@ // ==================== .notification { - padding: 30px 30px 0 30px; + padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5); } .error_msg { - margin: 20px; - padding: 5px; + margin: $baseline; + padding: ($baseline/4); color: $red; border: 1px solid $red; } + .cart-errors{ - background: #FFEEF5;color:#B72667;text-align: center;padding: 10px 0px; - font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;font-size: 15px; + background: #FFEEF5; + color:#B72667; + text-align: center; + padding: ($baseline/2) 0; + font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; + font-size: 15px; border-bottom: 1px solid #B72667; - margin-bottom: 20px; + margin-bottom: $baseline; display: none; } + .cart-list { - padding: 30px; - margin-top: 40px; + padding: ($baseline*1.5); + margin-top: ($baseline*2); border-radius: 3px; border: 1px solid $border-color-1; background-color: $action-primary-fg; @@ -33,32 +39,36 @@ .cart-table { width: 100%; - tr:nth-child(even){ - background-color: #f8f8f8; - border-bottom: 1px solid #f3f3f3; - } + + tr:nth-child(even) { + background-color: $gray-l6; + border-bottom: 1px solid $gray-l5; + } + tr.always-gray{ background: #eee !important; - border-top: 2px solid #FFFFFF; + border-top: 2px solid $white; } - tr.always-white{ - background: #fff !important; - td{ - padding: 30px 0px 10px; + + tr.always-white { + background: $white !important; + + td { + padding: ($baseline*1.5) 0 ($baseline/2); } } - tr{ - td.cart-total{ - padding: 10px 0; - span{ - display: inline-block; - margin-right: 15px; - margin-left: 15px; - font-weight: bold; - } - } + tr td.cart-total { + padding: ($baseline/2) 0; + + span { + display: inline-block; + margin-right: ($baseline*0.75); + margin-left: ($baseline*0.75); + font-weight: bold; + } } + .cart-headings { height: 35px; border-bottom: 1px solid #BEBEBE; @@ -70,16 +80,20 @@ &.qty { width: 100px; } + &.u-pr { width: 70px; } + &.prc { width: 150px; } + &.cur { width: 100px; text-align: center; } + &.dsc{ width: 640px; padding-right: 50px; @@ -90,10 +104,11 @@ .cart-items { td { - padding: 10px 0px; + padding: ($baseline/2) 0; position: relative; line-height: normal; - span.old-price{ + + span.old-price { position: relative; text-decoration: line-through; color: red; @@ -102,17 +117,20 @@ margin-left: 3px; } } - td:nth-child(3){ + + td:nth-child(3) { text-align: center; } - td:last-child{ + + td:last-child { width: 50px; text-align: center; } - td:nth-child(1){ - line-height: 22px; - text-align: left; - padding-right: 20px; + + td:nth-child(1) { + line-height: 22px; + text-align: left; + padding-right: $baseline; } } @@ -121,9 +139,8 @@ &.cart-total-cost { font-size: 1.25em; font-weight: bold; - padding: 10px 25px; + padding: ($baseline/2) 25px; } - } } } @@ -138,7 +155,7 @@ text-align: right; } .items-ordered { - padding-top: 50px; + padding-top: ($baseline*2.5); } tr { @@ -151,65 +168,78 @@ &.qty { width: 50px; } + &.u-pr { width: 100px; } + &.pri { width: 125px; } + &.curr { width: 75px; } } + tr.order-item { td { - padding-bottom: 10px; - span.old-price{ + padding-bottom: ($baseline/2); + + span.old-price { text-decoration: line-through !important; } } } } } + #expiry-msg { padding: 15px; - background-color: #f2f2f2; + background-color: $gray-l5; margin-top: 3px; font-family: $sans-serif; font-size: 14px; - text-shadow: 0px 1px 1px #fff; + text-shadow: 0px 1px 1px $white; border-top: 1px solid #f0f0f0; } .confirm-enrollment { + .title { font-size:24px; - border-bottom:1px solid #f2f2f2; + border-bottom:1px solid $gray-l5; text-align: left; line-height:70px; } + .course-image { display: inline-block; width: 223px; - margin-right: 10px; + margin-right: ($baseline/2); vertical-align: top; } + .enrollment-details { - margin-bottom: 20px; + margin-bottom: $baseline; display: inline-block; width: calc(100% - 237px); + .sub-title { font-size: 18px; text-transform: uppercase; color: #9b9b93; } + .course-date-label { float: right; color: #9b9b93; } + .course-dates { float: right; font-size: 18px; } + .course-title { h1 { color: #4a4a46; @@ -218,6 +248,7 @@ font-weight: 600; } } + .enrollment-text { color: #9b9b93; font-family: 'Open Sans',Verdana,Geneva,sans; @@ -227,6 +258,7 @@ } } } + a.contact-support-bg-color { background-color: #9b9b9b; background-image: linear-gradient(#9b9b9b, #9b9b9b); @@ -234,6 +266,7 @@ box-shadow: 0 1px 0 0 #9b9b9b inset; text-shadow: 0 1px 0 #9b9b9b; } + a.course-link-bg-color { background-color: #00A1E5; border: 16px solid #00A1E5; @@ -247,18 +280,20 @@ background-clip: padding-box; float: right; border-radius: 3px; - color: #FFFFFF; + color: $white; display: inline-block; padding: 6px 18px; text-decoration: none; font-size: 24px; text-align: center; + &:hover { background: $m-blue-d2; border: 16px solid $m-blue-d2; box-shadow: 0 1px 0 0 $m-blue-d2 inset; } } + input[type="submit"] { text-transform: none; width: 450px; @@ -270,12 +305,13 @@ border: 1px solid #00A1E5; border-radius: 3px; box-shadow: 0 1px 0 0 #00A1E5 inset; - color: #FFFFFF; + color: $white; display: inline-block; padding: 7px 18px; text-decoration: none; text-shadow: 0 1px 0 #00A1E5; font-size: 24px; + &:hover { background: $m-blue-d2; box-shadow: none; @@ -283,72 +319,95 @@ } } -.shopping-cart{ - a.blue{ - display: inline-block; - background: $blue2; - color: white; - padding: 20px 40px; - border-radius: 3px; - font-size: 24px; - font-weight: 400; - margin: 10px 0px 20px; - &:hover{ - text-decoration: none; - } +.shopping-cart { + + a.blue { + display: inline-block; + background: $blue2; + color: white; + padding: $baseline ($baseline*2); + border-radius: 3px; + font-size: 24px; + font-weight: 400; + margin: ($baseline/2) 0 $baseline; + + &:hover { + text-decoration: none; } - .relative{ + } + + .relative { position: relative; } - input[type="text"], input[type="email"] , select{ - font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; - font-style: normal; - border: 2px solid $dark-gray2; - height: auto; - padding: 8px 12px; - font-weight: 600; - width: 260px; - font-size: 16px; - &:focus{ - border-color: $dark-gray2; - box-shadow: none; - outline: none; - } - &.error{ - border-color: $red1; - } - } - .hidden{display: none;} - .show{display: inline-block;} - h1{ + + input[type="text"], input[type="email"], select { + font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; + font-style: normal; + border: 2px solid $dark-gray2; + height: auto; + padding: 8px 12px; + font-weight: 600; + width: 260px; + font-size: 16px; + + &:focus { + border-color: $dark-gray2; + box-shadow: none; + outline: none; + } + + &.error { + border-color: $red1; + } + } + + .hidden { + display: none; + } + + .show { + display: inline-block; + } + + h1 { font-size: 24px; color: $dark-gray1; text-align: left; - padding: 15px 0px; - margin: 10px 0 0 0; + padding: ($baseline*1.5) 0; + margin: ($baseline/2) 0 0 0; letter-spacing: 0px; } + ul.steps{ - padding: 0px; + padding: 0; margin: 0; list-style: none; border-top: 3px solid $light-gray1; border-bottom: 3px solid $light-gray1; - li{ + + li { display: inline-block; - padding: 26px 30px; - margin: 0px 30px; + padding: 26px ($baseline*1.5); + margin: 0 ($baseline*1.5); font-size: 20px; font-weight: 100; position: relative; color: $dark-gray1; - &.active{font-weight: 400; border-bottom: 3px solid $light-gray1;} - &:first-child {padding-left: 30px;margin-left: 0;} + + &.active { + font-weight: 400; + border-bottom: 3px solid $light-gray1; + } + + &:first-child { + padding-left: ($baseline*1.5); + margin-left: 0; + } &:last-child { padding-right: 30px;margin-right: 0; &:after{display: none;} } - &:after{ + &:after { content: "\f178"; position: absolute; font-family: FontAwesome; @@ -358,22 +417,30 @@ } } } - hr{border-top: 1px solid $dark-gray2;} - .user-data{ - margin: 20px 0px; - .image{ + + hr { + border-top: 1px solid $dark-gray2; + } + + .user-data { + margin: $baseline 0; + + .image { width: 220px; float: left; - img{ + + img { width: 100%; height: auto; } } - .data-input{ + + .data-input { width: calc(100% - 245px); float: left; margin-left: 25px; - h3, h3 span{ + + h3, h3 span { font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; font-size: 16px; text-transform: uppercase; @@ -381,23 +448,33 @@ padding: 0; line-height: 20px; } - h1{ + + h1 { font-size: 24px; color: $dark-gray1; - padding: 0 0 10px 0; + padding: 0 0 ($baseline/2) 0; text-transform: capitalize; - span{font-size: 16px;} + + span { + font-size: 16px; + } width: 700px; float: left; } - span.date{ - width: calc(100% - 700px); + + span.date { + width: calc(100% - 700px); float: right; text-align: right; - } - hr{border-top: 1px solid $dark-gray2;clear: both;} - .three-col{ - .col-1{ + } + + hr { + border-top: 1px solid $dark-gray2; + clear: both; + } + + .three-col { + .col-1 { width: 450px; float: left; font-size: 16px; @@ -405,24 +482,32 @@ color: $light-gray2; padding-top: 11px; font-weight: 400; - .price{ - span{ - color: $dark-gray1; - font-size: 24px; - padding-left: 20px; - } - &.green{color: $green1;} - .line-through{text-decoration: line-through;} + .price { + span { + color: $dark-gray1; + font-size: 24px; + padding-left: $baseline; + } + + &.green { + color: $green1; + } + + .line-through { + text-decoration: line-through; + } } } - .col-2{ + + .col-2 { width: 350px; float: left; line-height: 44px; text-transform: uppercase; color: $light-gray2; margin-top: 3px; - .numbers-row{ + + .numbers-row { position: relative; label{ font-size: 16px; @@ -432,13 +517,14 @@ font-weight: 400; font-style: normal; } - .counter{ + .counter { margin-left: 25px; border-radius: 3px; - padding: 6px 30px 6px 10px; + padding: 6px ($baseline*1.5) 6px ($baseline/2); display: inline-block; border: 2px solid $dark-gray2; - input[type="text"]{ + + input[type="text"] { width: 75px; border: none; box-shadow: none; @@ -450,114 +536,143 @@ padding: 8px 0; height: auto; text-align: center; - &:focus{ + + &:focus { outline: none; } } - } - .button{ + + .button { position: absolute; background: none; - margin-left: -30px; + margin-left: -($baseline*1.5); padding: 0; border: none; box-shadow: none; text-shadow: none; height: 17px; - i{ + + i { color: $dark-gray2; font-size: 24px; span{display: none;} } - &.inc{top: 9px;} - &.dec{top: 30px;height: 22px;} + + &.inc { + top: 9px; + } + + &.dec { + top: 30px; + height: 22px; + } } - &.disabled{ - .counter{ - border: 2px solid #CCCCCC; - &:hover{ + + &.disabled { + .counter { + border: 2px solid $gray; + + &:hover { cursor: not-allowed; } - input{ - color: #CCC; + + input { + color: $gray-l3; } } - .button{ - i{ - color: #ccc; + + .button { + i { + color: $gray-l3; } } - } - .updateBtn{ - display: inline-block; - float: right; - font-size: 15px; - padding: 25px 35px 25px 0; - &:focus{ - outline: none; - } } - span.error-text{ + + .updateBtn { + display: inline-block; + float: right; + font-size: 15px; + padding: 25px 35px 25px 0; + + &:focus { + outline: none; + } + } + + span.error-text { display: block; text-transform: lowercase; } } + .disable-numeric-counter{ pointer-events: none; } } - .col-3{ + + .col-3 { width: 40px; float: right; padding-top: 13px; - a.btn-remove{ + + a.btn-remove { float: right; opacity: 0.8; - i{ + + i { color: $dark-gray2; - font-size: 24PX; + font-size: 24px; line-height: 40px; } - &:hover{text-decoration: none;opacity: 1;} + + &:hover { + text-decoration: none; + opacity: 1; + } } } } } - } - .discount{ + + .discount { border-bottom: 2px solid $light-gray1; border-top: 2px solid $light-gray1; - margin: 20px 0; - padding: 17px 20px 15px; + margin: $baseline 0; + padding: 17px $baseline 15px; min-height: 45px; - .code-text{ - a{ - color: $blue1; - font-size: 18px; - text-transform: lowercase; - font-weight: 600; - display: inline-block; - padding: 10px 0px; - cursor: pointer; + + .code-text { + + a { + color: $blue1; + font-size: 18px; + text-transform: lowercase; + font-weight: 600; + display: inline-block; + padding: ($baseline/2) 0; + cursor: pointer; } + span{ display: inline-block; - padding: 9px 0px; - margin-right: -20px; + padding: 9px 0; + margin-right: -($baseline); + b{ font-weight: 600; font-size: 24px; - padding-left: 20px; + padding-left: $baseline; letter-spacing: 0; } } } - .code-input{ + .code-input { display: inline-block; - input[type="text"]{ + + input[type="text"] { font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; font-style: normal; border: 2px solid $dark-gray2; @@ -565,21 +680,25 @@ padding: 8px 12px; font-weight: 600; width: 260px; - &:focus{ + + &:focus { border-color: $dark-gray2; box-shadow: none; } - &.error{ - border-color: $red1; - } + + &.error { + border-color: $red1; + } } - .error-text{ + + .error-text { color: $red1; font-size: 12px; display: block; padding-bottom: 0; } - input[type="submit"]{ + + input[type="submit"] { padding: 9px 35px; } } @@ -588,7 +707,7 @@ .green{ color: $green1; font-weight: 600; - margin-right: 20px; + margin-right: $baseline; } input[type="submit"]{ padding: 9px 35px; @@ -606,7 +725,7 @@ } input[type="submit"]{ width: auto; - padding: 7px 20px; + padding: 7px $baseline; height: auto; float: none; font-size: 16px; @@ -621,23 +740,23 @@ } .col-two{ overflow: hidden; - padding-bottom: 20px; - border-bottom: 2px solid #f2f2f2; + padding-bottom: $baseline; + border-bottom: 2px solid $gray-l5; .row-inside { float: left; width: 50%; - padding: 10px 0; + padding: ($baseline/2) 0; b{ font-size: 14px; width: 190px; display: inline-block; - margin-right: 20px; + margin-right: $baseline; font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; vertical-align: top; } label{ width: 300px; - margin: 0px; + margin: 0; display: inline-block; font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; font-style: normal; @@ -645,25 +764,31 @@ word-wrap: break-word; } } - .col-1{ + + .col-1 { width: 35%; float: left; - span.radio-group{ + + span.radio-group { display: inline-block; border: 2px solid #979797; border-radius: 3px; - margin: 10px 0; - margin-left: 5px; - &:first-child{ - margin-left: 15px; + margin: ($baseline/2) 0; + margin-left: ($baseline/4); + + &:first-child { + margin-left: ($baseline*0.75); } - &.blue{ + + &.blue { border-color: $blue2; - label{ + + label { color: $blue2; } } - label{ + + label { font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; font-size: 16px; font-style: normal; @@ -675,9 +800,10 @@ } } input[type="radio"]{ - margin-left: 10px; + margin-left: ($baseline/2); } } + .col-2{ width: 65%; float: right; @@ -688,7 +814,7 @@ font-size: 24px; letter-spacing: 0; font-weight: 600; - margin-left: 15px; + margin-left: ($baseline*0.75); &#register{ padding: 18px 30px; } @@ -724,7 +850,7 @@ } .disclaimer{ color: $light-gray2; - padding: 10px 0px; + padding: ($baseline/2) 0; text-align: right; font-weight: 300; } @@ -742,7 +868,7 @@ padding: 12px 0px; color: $dark-gray1; font-size: 17px; - margin-bottom: 5px; + margin-bottom: ($baseline/4); } .row{ display: table-row; @@ -753,13 +879,13 @@ background: $light-gray1; padding: 20px; border-radius: 4px; - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); min-height: 240px; &:nth-child(even){ margin-left: 30px; } .data-group{ - margin-bottom: 15px; + margin-bottom: ($baseline*0.75); label{ display: block; font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; @@ -768,9 +894,9 @@ font-weight: 400; color: $dark-gray2; } - input{width: 100%;margin-bottom: 5px;} + input{width: 100%;margin-bottom: ($baseline/4);} &:nth-child(4n){ - margin-right: 0px; + margin-right: 0; } } } @@ -798,7 +924,7 @@ a.blue{ margin:0 0 0 20px; i{ - margin-left: 10px; + margin-left: ($baseline/2); } } .mt-7 { @@ -810,7 +936,7 @@ .bordered-bar{ border-bottom: 2px solid $light-gray1; border-top: 2px solid $light-gray1; - margin-bottom: 20px; + margin-bottom: $baseline; padding: 20px; h2{ color: $dark-gray1; @@ -832,8 +958,8 @@ } } .pattern{ - margin-top: 10px; - margin-bottom: 20px; + margin-top: ($baseline/2); + margin-bottom: $baseline; padding:20px; color: $dark-gray1; h2 { @@ -903,40 +1029,45 @@ } } } -.empty-cart{ - padding: 20px 0px; + +.empty-cart { + padding: $baseline 0; background: $light-gray1; text-align: center; border-radius: 3px; - margin: 20px 0px; - h2{ - font-size: 24PX; - font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; - font-weight: 600; - letter-spacing: 0; - color: #9b9b9b; - text-align: center; - margin-top: 20px; - text-transform: initial; - margin-bottom: 5px; + margin: $baseline 0; + + h2 { + font-size: 24px; + font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; + font-weight: 600; + letter-spacing: 0; + color: #9b9b9b; + text-align: center; + margin-top: $baseline; + text-transform: initial; + margin-bottom: ($baseline/4); } + p { font-size: 14px; font-family: $sans-serif; color: #9d9d9d; text-align: center; - text-shadow: 0px 1px 1px #fff; + text-shadow: 0 1px 1px $white; } - a.blue{ + + a.blue { display: inline-block; background: $blue2; color: white; - padding: 20px 40px; + padding: $baseline ($baseline*2); border-radius: 3px; font-size: 24px; font-weight: 400; - margin: 10px 0px 20px; - &:hover{ + margin: ($baseline/2) 0 $baseline; + + &:hover { text-decoration: none; } } @@ -944,50 +1075,72 @@ // Print -@media print{ +@media print { + a[href]:after { content: none !important; } + ul.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated { display: none; } - .shopping-cart{ + + .shopping-cart { font-size: 14px; - padding-right: 40px; - .gray-bg{ + padding-right: ($baseline*2); + + .gray-bg { margin: 0; - padding: 10px 0 20px 0; + padding: ($baseline/2) 0 $baseline 0; background: none; - .message-left{ + + .message-left { width: 100%; } } - .bordered-bar{ - h2{ + + .bordered-bar { + + h2 { font-size: 14px; } - span{ + + span { float: right; } } - .user-data{ - .data-input{ - h1{ - font-size: 18px; - } - } + .user-data { + + .data-input { + + h1 { + font-size: 18px; + } + } } - table.course-receipt{ - tr{ - td{ - a{ - &:before{content:" " attr(data-base-url) " ";display: inline-block;} + + table.course-receipt { + + tr { + + td { + + a { + + &:before { + content:" " attr(data-base-url) " "; + display: inline-block;} } } } - th:last-child{display: none;} - td:last-child{display: none;} + + th:last-child { + display: none; + } + + td:last-child { + display: none; + } } } - } diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 1b56b5b803..2a65f34263 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -17,7 +17,7 @@ } .expandable-icon { - @include transition(all 0.25s ease-in-out 0s); + @include transition(all $tmg-f2 ease-in-out 0s); display: inline-block; vertical-align: middle; margin-right: ($baseline/4); @@ -451,7 +451,7 @@ } .progress-sts { - @include size(($baseline/4)); + @include size($baseline/4); @extend %ui-depth1; position: absolute; top: 43px; @@ -764,7 +764,7 @@ .action-retakephotos a { @extend %btn-primary-blue; @include font-size(14); - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); } } } @@ -892,7 +892,7 @@ .action-editname a { @extend %btn-primary-blue; @include font-size(14); - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); } } } @@ -1003,11 +1003,11 @@ // UI: nav - wizard .nav-wizard { @extend %ui-well; - @include clearfix; + @include clearfix(); width: flex-grid(12,12); border-radius: ($baseline/10); background: $m-gray-l4; - padding: ($baseline*.75) $baseline; + padding: ($baseline*0.75) $baseline; .help-inline, .wizard-steps { @@ -1691,7 +1691,7 @@ } .modal.edit-name .submit input { - color: #fff; + color: $white; } .modal { @@ -1951,7 +1951,7 @@ .item { box-shadow: 0 2px 5px 0 $shadow-l1 inset; - margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0; + margin: ($baseline*0.75) ($baseline*0.75) ($baseline*0.75) 0; border: 1px solid $m-gray-t2; &.complete { @@ -2014,7 +2014,7 @@ .course-info { margin-bottom: ($baseline/2); - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); } .course-name { @@ -2031,7 +2031,7 @@ .reverify-status { background-color: $light-gray; - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); } } @@ -2215,7 +2215,7 @@ .action-retakephotos a { @extend %btn-primary-blue; @include font-size(14); - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); } } } @@ -2272,13 +2272,13 @@ .action-editname a { @extend %btn-primary-blue; @include font-size(14); - padding: ($baseline/2) ($baseline*.75); + padding: ($baseline/2) ($baseline*0.75); } } } .nav-wizard { - padding: ($baseline*.75) $baseline; + padding: ($baseline*0.75) $baseline; .prompt-verify { float: left;