Skip to content

E
edx-platform
Commit 38b7e4cc by Marco Morales
Options

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

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