Skip to content

E
edx-platform
Commit f91c5ffd by Marco Morales
Options

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

SASS compilation variable conventions update
parents cb6a4db1 7d110a86
Showing with 948 additions and 791 deletions
cms/static/sass/_base.scss
// studio - base styling
// ====================
// 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
......
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;
}
}
......
cms/static/sass/_variables.scss
// 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;
cms/static/sass/assets/_anims.scss
// 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;
}
25%, 75% {
opacity: 0.0;
}
0%, 50%, 100% {
opacity: 1.0;
}
// canned animation - use if you want out of the box/non-customized anim
25%, 75% {
opacity: 0.0;
}
}
// 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);
}
cms/static/sass/assets/_graphics.scss
// 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;
}
cms/static/sass/elements/_controls.scss
// 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);
......
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;
......
cms/static/sass/elements/_forms.scss
// 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;
}
......
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);
}
......
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 {
......
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;
......
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);
......
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;
}
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;
......
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;
......
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;
}
}
......
cms/static/sass/style-app-extend1-rtl.scss
// 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
......
cms/static/sass/style-app-extend1.scss
// studio - css architecture
// ====================
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// * +Base - Specific Views
// * +Base - Contexts
// libs and resets *do not edit*
// +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon
@import '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.
......@@ -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
......
cms/static/sass/style-app-rtl.scss
// 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.
......
cms/static/sass/style-app.scss
// studio - css architecture
// ====================
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// Table of Contents
// * +Libs and Resets
// * +Vendor and Rebase
// * +Base - Utilities
// * +Base - Assets
// * +Base - Starter
// * +Base - Elements
// libs and resets *do not edit*
// +Libs and Resets - *do not edit*
// ====================
@import 'bourbon/bourbon'; // lib - bourbon
@import '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.
......
cms/static/sass/style-xmodule-rtl.scss
// 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
cms/static/sass/style-xmodule.scss
// 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
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;
......
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;
......
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 {
......
cms/static/sass/views/_export-git.scss
......@@ -37,7 +37,7 @@
dd {
@extend %t-copy-base;
margin-bottom: 20px;
margin-bottom: $baseline;
}
.course_text {
......
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;
}
}
......
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;
......
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
......
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;
......
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;
......
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;
......
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;
......
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;
......
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);
}
}
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;
......
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;
......
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 {
......
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;
}
}
}
......
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;
}
}
......
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;
}
}
......
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);
}
}
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%;
......
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;
......
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 {
@extend %ui-depth2;
@include linear-gradient(top, #ddd, #eee);
position: relative;
z-index: 99;
border: 1px solid #ccc;
border: 1px solid $gray-l3;
height: 44px;
margin: 0 30px;
@include linear-gradient(top, #ddd, #eee);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
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);
......
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;
}
common/lib/xmodule/xmodule/css/word_cloud/display.scss
.input-cloud {
margin: 5px;
margin: ($baseline/4);
}
.result_cloud_section {
......
common/static/sass/_mixins-inherited.scss
// 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);
}
common/static/sass/_mixins.scss
// 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;
......
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);
......
common/static/sass/neat/grid/_outer-container.scss
@mixin outer-container {
@include clearfix;
@include clearfix();
max-width: $max-width;
margin: {
left: auto;
......
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 {
......
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;
......
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;
......
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;
......
lms/static/sass/base/_variables.scss
// 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
......
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;
}
}
......
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;
......
lms/static/sass/course/_open_ended_grading.scss
.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;
}
}
lms/static/sass/course/_profile.scss
.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);
......
lms/static/sass/course/_staff_grading.scss
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment