Merge pull request #6099 from edx/marco/sass-variable-patterns-cleanup
SASS compilation variable conventions update
This commit is contained in:
Marco Morales
@@ -1,7 +1,25 @@
|
||||
// studio - base styling
|
||||
// ====================
|
||||
|
||||
// basic setup
|
||||
// Table of Contents
|
||||
// * +Basic Setup
|
||||
// * +Typography - Basic
|
||||
// * +Typography - Primary Content
|
||||
// * +Typography - Secondary Content
|
||||
// * +Typography - Loose Headings
|
||||
// * +Layout - Basic
|
||||
// * +Layout - Basic Page Header
|
||||
// * +Layout - Basic Page Content
|
||||
// * +Layout - Primary Content
|
||||
// * +Layout - Supplemental Content
|
||||
// * +Layout - Grandfathered
|
||||
// * +UI - Actions
|
||||
// * +UI - Misc
|
||||
// * +Utility - Basic
|
||||
// * +JS Dependent
|
||||
|
||||
// +Basic Setup
|
||||
// ====================
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag
|
||||
@@ -38,7 +56,7 @@ h1 {
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@@ -47,9 +65,8 @@ h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - basic
|
||||
// +Typography - Basic
|
||||
// ====================
|
||||
.page-header {
|
||||
@extend %t-title3;
|
||||
@extend %t-strong;
|
||||
@@ -93,9 +110,8 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - primary content
|
||||
// +Typography - Primary Content
|
||||
// ====================
|
||||
.content-primary {
|
||||
|
||||
.section-header {
|
||||
@@ -131,7 +147,8 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
// typography - primary content
|
||||
// +Typography - Secondary Content
|
||||
// ====================
|
||||
.content-secondary {
|
||||
|
||||
.section-header {
|
||||
@@ -159,44 +176,12 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - loose headings (BT: needs to be removed once html is clean)
|
||||
// +Typography - Loose Headings (BT: needs to be removed once html is clean)
|
||||
// ====================
|
||||
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
// typography - primary content
|
||||
.content-secondary {
|
||||
|
||||
.section-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - loose headings (BT: needs to be removed once html is clean)
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
@@ -240,16 +225,14 @@ p, ul, ol, dl {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - basic
|
||||
// +Layout - Basic
|
||||
// ====================
|
||||
.wrapper-view {
|
||||
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - basic page header
|
||||
// +Layout - Basic Page Header
|
||||
// ====================
|
||||
.wrapper-mast {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: 0 $baseline;
|
||||
@@ -391,7 +374,8 @@ p, ul, ol, dl {
|
||||
}
|
||||
}
|
||||
|
||||
// layout - basic page content
|
||||
// +Layout - Basic Page Content
|
||||
// ====================
|
||||
.wrapper-content {
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
@@ -434,7 +418,8 @@ p, ul, ol, dl {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// layout - primary content
|
||||
// +Layout - Primary Content
|
||||
// ====================
|
||||
.content-primary {
|
||||
|
||||
.title-1 {
|
||||
@@ -471,7 +456,8 @@ p, ul, ol, dl {
|
||||
}
|
||||
}
|
||||
|
||||
// layout - supplemental content
|
||||
// +Layout - Supplemental Content
|
||||
// ====================
|
||||
.content-supplementary {
|
||||
|
||||
> section {
|
||||
@@ -479,9 +465,8 @@ p, ul, ol, dl {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - grandfathered
|
||||
// +Layout - Grandfathered
|
||||
// ====================
|
||||
.main-wrapper {
|
||||
position: relative;
|
||||
margin: 0 ($baseline*2);
|
||||
@@ -517,9 +502,8 @@ p, ul, ol, dl {
|
||||
@include float(right);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// UI - actions
|
||||
// +UI - Actions
|
||||
// ====================
|
||||
.new-unit-item,
|
||||
.new-subsection-item,
|
||||
.new-policy-item {
|
||||
@@ -550,22 +534,21 @@ p, ul, ol, dl {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// misc
|
||||
// +UI - Misc
|
||||
// ====================
|
||||
hr.divide {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
padding: ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
@extend %t-copy-sub1;
|
||||
display: none;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
}
|
||||
|
||||
.window {
|
||||
@@ -604,8 +587,8 @@ hr.divide {
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
padding-bottom: ($baseline/2);
|
||||
border-bottom: 1px solid #cbd1db;
|
||||
}
|
||||
}
|
||||
@@ -638,9 +621,9 @@ hr.divide {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// basic utility
|
||||
// +Utility - Basic
|
||||
// ====================
|
||||
|
||||
// UI - semantically hide text
|
||||
.sr {
|
||||
@@ -683,9 +666,8 @@ hr.divider {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// js dependant
|
||||
// +JS Dependent
|
||||
// ====================
|
||||
body.js {
|
||||
|
||||
// lean/simple modal window
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
// studio - utilities - variables
|
||||
// ====================
|
||||
|
||||
// Table of Contents
|
||||
// * +Grid
|
||||
// * +Fonts
|
||||
// * +Colors - Utility
|
||||
// * +Colors - Primary
|
||||
// * +Colors - Shadow
|
||||
// * +Color - Application
|
||||
// * +Timing
|
||||
// * +Archetype UI
|
||||
// * +Specific UI
|
||||
// * +Deprecated
|
||||
|
||||
$baseline: 20px;
|
||||
|
||||
// grid
|
||||
// +Grid
|
||||
// ====================
|
||||
$gw-column: ($baseline*3);
|
||||
$gw-gutter: $baseline;
|
||||
$fg-column: $gw-column;
|
||||
@@ -12,15 +25,17 @@ $fg-max-columns: 12;
|
||||
$fg-max-width: 1280px;
|
||||
$fg-min-width: 900px;
|
||||
|
||||
// ====================
|
||||
|
||||
// fonts
|
||||
// +Fonts
|
||||
// ====================
|
||||
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
|
||||
|
||||
// ====================
|
||||
// +Colors - Utility
|
||||
// ====================
|
||||
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
|
||||
|
||||
// colors - new for re-org
|
||||
// +Colors - Primary
|
||||
// ====================
|
||||
$black: rgb(0,0,0);
|
||||
$black-t0: rgba($black, 0.125);
|
||||
$black-t1: rgba($black, 0.25);
|
||||
@@ -67,7 +82,7 @@ $blue-t1: rgba($blue, 0.25);
|
||||
$blue-t2: rgba($blue, 0.50);
|
||||
$blue-t3: rgba($blue, 0.75);
|
||||
|
||||
$pink: rgb(183, 37, 103);
|
||||
$pink: rgb(183, 37, 103); // #b72567;
|
||||
$pink-l1: tint($pink,20%);
|
||||
$pink-l2: tint($pink,40%);
|
||||
$pink-l3: tint($pink,60%);
|
||||
@@ -84,7 +99,7 @@ $pink-u1: desaturate($pink,15%);
|
||||
$pink-u2: desaturate($pink,30%);
|
||||
$pink-u3: desaturate($pink,45%);
|
||||
|
||||
$red: rgb(178, 6, 16);
|
||||
$red: rgb(178, 6, 16); // #b20610;
|
||||
$red-l1: tint($red,20%);
|
||||
$red-l2: tint($red,40%);
|
||||
$red-l3: tint($red,60%);
|
||||
@@ -101,7 +116,7 @@ $red-u1: desaturate($red,15%);
|
||||
$red-u2: desaturate($red,30%);
|
||||
$red-u3: desaturate($red,45%);
|
||||
|
||||
$green: rgb(37, 184, 90);
|
||||
$green: rgb(37, 184, 90); // #25b85a
|
||||
$green-l1: tint($green,20%);
|
||||
$green-l2: tint($green,40%);
|
||||
$green-l3: tint($green,60%);
|
||||
@@ -152,13 +167,16 @@ $orange-u1: desaturate($orange,15%);
|
||||
$orange-u2: desaturate($orange,30%);
|
||||
$orange-u3: desaturate($orange,45%);
|
||||
|
||||
// +Colors - Shadows
|
||||
// ====================
|
||||
$shadow: rgba($black, 0.2);
|
||||
$shadow-l1: rgba($black, 0.1);
|
||||
$shadow-l2: rgba($black, 0.05);
|
||||
$shadow-d1: rgba($black, 0.4);
|
||||
$shadow-d2: rgba($black, 0.6);
|
||||
|
||||
// colors - application
|
||||
// +Colors - Application
|
||||
// ====================
|
||||
$color-draft: $gray-l3;
|
||||
$color-live: $blue;
|
||||
$color-ready: $green;
|
||||
@@ -170,9 +188,9 @@ $color-heading-base: $gray-d2;
|
||||
$color-copy-base: $gray-l1;
|
||||
$color-copy-emphasized: $gray-d2;
|
||||
|
||||
// ====================
|
||||
|
||||
// timing - used for animation/transition mixin syncing
|
||||
// +Timing
|
||||
// ====================
|
||||
// used for animation/transition mixin syncing
|
||||
$tmg-s3: 3.0s;
|
||||
$tmg-s2: 2.0s;
|
||||
$tmg-s1: 1.0s;
|
||||
@@ -181,24 +199,22 @@ $tmg-f1: 0.50s;
|
||||
$tmg-f2: 0.25s;
|
||||
$tmg-f3: 0.125s;
|
||||
|
||||
// ====================
|
||||
|
||||
// archetype UI
|
||||
// +Archetype UI
|
||||
// ====================
|
||||
$ui-action-primary-color: $blue-u2;
|
||||
$ui-action-primary-color-focus: $blue-s1;
|
||||
|
||||
$ui-link-color: $blue-u2;
|
||||
$ui-link-color-focus: $blue-s1;
|
||||
|
||||
// ====================
|
||||
|
||||
// specific UI
|
||||
// +Specific UI
|
||||
// ====================
|
||||
$ui-notification-height: ($baseline*10);
|
||||
$ui-update-color: $blue-l4;
|
||||
|
||||
// ====================
|
||||
|
||||
// inherited
|
||||
// +Deprecated
|
||||
// ====================
|
||||
// do not use, future clean up will use updated styles
|
||||
$baseFontColor: $gray-d2;
|
||||
$lighter-base-font-color: rgb(100,100,100);
|
||||
$offBlack: #3c3c3c;
|
||||
@@ -227,4 +243,4 @@ $body-line-height: golden-ratio(.875em, 1);
|
||||
|
||||
// carried over from LMS for xmodules
|
||||
$action-primary-active-bg: #1AA1DE; // $m-blue
|
||||
$very-light-text: #fff;
|
||||
$very-light-text: $white;
|
||||
|
||||
@@ -1,7 +1,23 @@
|
||||
// studio animations & keyframes
|
||||
// ====================
|
||||
|
||||
// fade in
|
||||
// Table of Contents
|
||||
// * +Fade In - Extend
|
||||
// * +Fade Out - Extend
|
||||
// * +Rotate Up - Extend
|
||||
// * +Rotate Down - Extend
|
||||
// * +Rotate Clockwise - Extend
|
||||
// * +Notifications - Slide - Keyframes
|
||||
// * +Bounce In - Extend
|
||||
// * +Bounce Out - Extend
|
||||
// * +Flash - Once - Extend
|
||||
// * +Flash - Double - Extend
|
||||
// * +Pulse - Extend
|
||||
// * +Dropped - Extend
|
||||
|
||||
// +Fade In - Extend
|
||||
// ====================
|
||||
// fade in keyframes
|
||||
@include keyframes(fadeIn) {
|
||||
0% {
|
||||
opacity: 0.0;
|
||||
@@ -16,14 +32,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// fade in animation
|
||||
%anim-fadeIn {
|
||||
@include animation(fadeIn $tmg-f2 linear 1);
|
||||
}
|
||||
|
||||
|
||||
// fade out
|
||||
@include keyframes(fadeOut) {
|
||||
// +Fade Out - Extend
|
||||
// ====================
|
||||
// fade out keyframes
|
||||
@include keyframes(fadeOut) {
|
||||
0% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
@@ -37,16 +54,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// fade out animation
|
||||
%anim-fadeOut {
|
||||
@include animation(fadeOut $tmg-f2 linear 1);
|
||||
}
|
||||
|
||||
|
||||
// ====================
|
||||
|
||||
|
||||
// rotate up
|
||||
// +Rotate Up - Extend
|
||||
// ====================
|
||||
// rotate up keyframes
|
||||
@include keyframes(rotateUp) {
|
||||
0% {
|
||||
@include transform(rotate(0deg));
|
||||
@@ -61,13 +76,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// rotate up animation
|
||||
%anim-rotateUp {
|
||||
@include animation(rotateUp $tmg-f2 ease-in-out 1);
|
||||
}
|
||||
|
||||
|
||||
// rotate up
|
||||
// +Rotate Down - Extend
|
||||
// ====================
|
||||
// rotate down keyframes
|
||||
@include keyframes(rotateDown) {
|
||||
0% {
|
||||
@include transform(rotate(0deg));
|
||||
@@ -82,13 +99,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// rotate down animation
|
||||
%anim-rotateDown {
|
||||
@include animation(rotateDown $tmg-f2 ease-in-out 1);
|
||||
}
|
||||
|
||||
|
||||
// rotate clockwise
|
||||
// +Rotate Clockwise - Extend
|
||||
// ====================
|
||||
// rotate clockwise keyframes
|
||||
@include keyframes(rotateCW) {
|
||||
0% {
|
||||
@include transform(rotate(0deg));
|
||||
@@ -103,13 +122,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// rotate clockwise animation
|
||||
%anim-rotateCW {
|
||||
@include animation(rotateCW $tmg-s1 linear infinite);
|
||||
}
|
||||
|
||||
|
||||
// rotate counter-clockwise
|
||||
// +Rotate Clockwise - Extend
|
||||
// ====================
|
||||
// rotate clockwise keyframes
|
||||
@include keyframes(rotateCCW) {
|
||||
0% {
|
||||
@include transform(rotate(0deg));
|
||||
@@ -124,16 +144,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// rotate clockwise animation
|
||||
%anim-rotateCCW {
|
||||
@include animation(rotateCCW $tmg-s1 linear infinite);
|
||||
}
|
||||
|
||||
|
||||
// +Notifications - Slide - Keyframes
|
||||
// ====================
|
||||
|
||||
|
||||
// notifications slide up
|
||||
// notifications slide up keyframes
|
||||
@include keyframes(notificationSlideUp) {
|
||||
0% {
|
||||
@include transform(translateY(0));
|
||||
@@ -148,7 +167,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// notifications slide down
|
||||
// notifications slide down keyframes
|
||||
@include keyframes(notificationSlideDown) {
|
||||
0% {
|
||||
@include transform(translateY(-($ui-notification-height*0.99)));
|
||||
@@ -164,10 +183,9 @@
|
||||
}
|
||||
|
||||
|
||||
// +Bounce In - Extend
|
||||
// ====================
|
||||
|
||||
|
||||
// bounce in
|
||||
// bounce in keyframes
|
||||
@include keyframes(bounceIn) {
|
||||
0% {
|
||||
opacity: 0.0;
|
||||
@@ -184,13 +202,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// bounce in animation
|
||||
%anim-bounceIn {
|
||||
@include animation(bounceIn $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
|
||||
|
||||
// bounce out
|
||||
// +Bounce Out - Extend
|
||||
// ====================
|
||||
// bounce out keyframes
|
||||
@include keyframes(bounceOut) {
|
||||
0% {
|
||||
@include transform(scale(1));
|
||||
@@ -207,16 +226,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// bounce out animation
|
||||
%anim-bounceOut {
|
||||
@include animation(bounceOut $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
|
||||
|
||||
// +Flash - Once - Extend
|
||||
// ====================
|
||||
|
||||
|
||||
// flash
|
||||
// flash keyframes
|
||||
@include keyframes(flash) {
|
||||
0%, 100% {
|
||||
opacity: 1.0;
|
||||
@@ -227,32 +244,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// flash animation
|
||||
%anim-flash {
|
||||
@include animation(flash $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
|
||||
// flash - double
|
||||
// +Flash - Double - Extend
|
||||
// ====================
|
||||
// flash double keyframes
|
||||
@include keyframes(flashDouble) {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1.0;
|
||||
0%, 50%, 100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
25%, 75% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
25%, 75% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// flash double animation
|
||||
%anim-flashDouble {
|
||||
@include animation(flashDouble $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
|
||||
|
||||
// +Pulse - Extend
|
||||
// ====================
|
||||
|
||||
|
||||
// pulse
|
||||
// pulse keyframes
|
||||
@include keyframes(pulse) {
|
||||
0% {
|
||||
opacity: 0.0;
|
||||
@@ -267,15 +284,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// pulse animation
|
||||
%anim-pulse {
|
||||
@include animation(pulse $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
|
||||
// Dropped - Extend
|
||||
// ====================
|
||||
|
||||
|
||||
// was-dropped
|
||||
// was dropped keyframes
|
||||
@include keyframes(was-dropped) {
|
||||
0% {
|
||||
opacity: 1.0;
|
||||
@@ -290,7 +306,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// canned animation - use if you want out of the box/non-customized anim
|
||||
// was dropped animation
|
||||
%anim-was-dropped {
|
||||
@include animation(was-dropped $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
// studio - assets - graphics
|
||||
// ====================
|
||||
|
||||
.drag-handle {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 7px;
|
||||
height: 22px;
|
||||
margin-left: 10px;
|
||||
margin-left: ($baseline/2);
|
||||
background: url(../images/drag-handles.png) no-repeat;
|
||||
cursor: move;
|
||||
}
|
||||
@@ -12,7 +15,7 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
background: url(../images/large-advanced-icon.png) center no-repeat;
|
||||
}
|
||||
|
||||
@@ -20,7 +23,7 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
background: url(../images/large-discussion-icon.png) center no-repeat;
|
||||
}
|
||||
|
||||
@@ -28,7 +31,7 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
background: url(../images/large-html-icon.png) center no-repeat;
|
||||
}
|
||||
|
||||
@@ -36,7 +39,7 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
background: url(../images/large-problem-icon.png) center no-repeat;
|
||||
}
|
||||
|
||||
@@ -44,6 +47,6 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
background: url(../images/large-video-icon.png) center no-repeat;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,22 @@
|
||||
// studio - elements - UI controls
|
||||
// ====================
|
||||
|
||||
// general actions
|
||||
// Table of Contents
|
||||
// * +General Action - Extend
|
||||
// * +General Type and Size - Extend
|
||||
// * +Primary Button - Extends
|
||||
// * +Secondary Button - Extends
|
||||
// * +Button
|
||||
// * +UI Dropdown Button - Extend
|
||||
// * +UI Nav Dropdown Button - Extend
|
||||
// * +UI Actions List - Extend
|
||||
// * +UI Expand/Collapse - Extend
|
||||
// * +Drag and Drop
|
||||
|
||||
|
||||
|
||||
// +General Action - Extend
|
||||
// ====================
|
||||
%action {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
@@ -12,16 +27,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// general type and size
|
||||
// +General Type and Size - Extend
|
||||
// ====================
|
||||
%sizing {
|
||||
@extend %t-action4;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// +Primary Button - Extends
|
||||
// ====================
|
||||
// gray primary button
|
||||
%btn-primary-gray {
|
||||
@extend %ui-btn-primary;
|
||||
@@ -90,6 +105,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// +Secondary Button - Extends
|
||||
// ====================
|
||||
// gray secondary button
|
||||
%btn-secondary-gray {
|
||||
@extend %ui-btn-secondary;
|
||||
@@ -175,9 +192,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// button elements
|
||||
// +Button Element
|
||||
// ====================
|
||||
.button {
|
||||
|
||||
[class^="icon-"] {
|
||||
@@ -187,9 +203,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// +UI Dropdown Button - Extend
|
||||
// ====================
|
||||
|
||||
// simple dropdown button styling - should we move this elsewhere?
|
||||
%ui-btn-dd {
|
||||
@extend %ui-btn;
|
||||
@extend %ui-btn-pill;
|
||||
@@ -210,7 +225,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// layout-based buttons - nav dd
|
||||
// +UI Nav Dropdown Button - Extend
|
||||
// ====================
|
||||
%ui-btn-dd-nav-primary {
|
||||
@extend %ui-btn-dd;
|
||||
background: $white;
|
||||
@@ -232,10 +248,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// +UI Actions List - Extend
|
||||
// ====================
|
||||
|
||||
// UI: element actions list
|
||||
|
||||
%actions-list {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
@@ -296,7 +310,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// UI: elem is collapsible - TODO: this should be transitioned away from in favor of %ui-expand-collapse
|
||||
// +UI Expand/Collapse - Extend
|
||||
// ====================
|
||||
// TODO: this should be transitioned away from in favor of %ui-expand-collapse
|
||||
%expand-collapse {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
display: inline-block;
|
||||
@@ -322,7 +338,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// UI: expand collapse
|
||||
// +UI Expand/Collapse - Extend
|
||||
// ====================
|
||||
// will replace %expand-collapse
|
||||
%ui-expand-collapse {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
|
||||
@@ -339,7 +357,7 @@
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
cursor: pointer;
|
||||
@extend %ui-fake-link;
|
||||
color: $ui-link-color-focus;
|
||||
}
|
||||
}
|
||||
@@ -357,15 +375,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// UI: drag handles
|
||||
// +Drag and Drop Styling
|
||||
// ====================
|
||||
|
||||
// UI: drag handle
|
||||
.drag-handle {
|
||||
|
||||
&:hover, &:focus {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: elem is draggable
|
||||
|
||||
// UI: is draggable
|
||||
.is-draggable {
|
||||
@include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
|
||||
position: relative;
|
||||
@@ -396,7 +417,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// UI: drag state - is dragging
|
||||
// UI: is dragging - drag state
|
||||
.is-dragging {
|
||||
@extend %ui-depth4;
|
||||
left: -($baseline/4);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
// studio - elements - forms
|
||||
// ====================
|
||||
|
||||
// forms - general
|
||||
// Table of Contents
|
||||
// * +Forms - General
|
||||
// * +Field - Is Editable
|
||||
// * +Field - With Error
|
||||
// * +Forms - Additional UI
|
||||
// * +Form - Create New
|
||||
// * +Form - Inline Name Edit
|
||||
// * +Form - Create New Wrapper
|
||||
// * +Form - Grandfathered
|
||||
|
||||
// +Forms - General
|
||||
// ====================
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
@@ -31,9 +42,8 @@ textarea.text {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// forms - fields - not editable
|
||||
// +Fields - Not Editable
|
||||
// ====================
|
||||
.field.is-not-editable {
|
||||
|
||||
& label.is-focused {
|
||||
@@ -45,9 +55,8 @@ textarea.text {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// field with error
|
||||
// +Fields - With Error
|
||||
// ====================
|
||||
.field.error {
|
||||
|
||||
input, textarea {
|
||||
@@ -55,9 +64,8 @@ textarea.text {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// forms - additional UI
|
||||
// +Forms - Additional UI
|
||||
// ====================
|
||||
form {
|
||||
|
||||
// CASE: cosmetic checkbox input
|
||||
@@ -138,7 +146,8 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// ELEM: form
|
||||
// +Form - Create New
|
||||
// ====================
|
||||
// form styling for creating a new content item (course, user, textbook)
|
||||
// TODO: refactor this into a placeholder to extend.
|
||||
.form-create {
|
||||
@@ -355,9 +364,10 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// +Form - Inline Name Edit
|
||||
// ====================
|
||||
// form - inline xblock name edit on unit, container, outline
|
||||
|
||||
// TOOD: abstract this out into a Sass placeholder
|
||||
// TODO: abstract this out into a Sass placeholder
|
||||
.incontext-editor.is-editable {
|
||||
|
||||
.incontext-editor-value,
|
||||
@@ -391,7 +401,8 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// ELEM: form wrapper
|
||||
// +Form - Create New Wrapper
|
||||
// ====================
|
||||
.wrapper-create-element {
|
||||
height: 0;
|
||||
margin-bottom: $baseline;
|
||||
@@ -410,9 +421,8 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// forms - grandfathered
|
||||
// +Form - Grandfathered
|
||||
// ====================
|
||||
input.search {
|
||||
padding: 6px 15px 8px 30px;
|
||||
@include box-sizing(border-box);
|
||||
@@ -441,7 +451,7 @@ code {
|
||||
|
||||
.CodeMirror {
|
||||
@extend %t-copy-sub1;
|
||||
background: #fff;
|
||||
background: $white;
|
||||
font-family: $f-monospace;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,44 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
// libs and resets *do not edit*
|
||||
// Table of Contents
|
||||
// * +Libs and Resets
|
||||
// * +Vendor and Rebase
|
||||
// * +Base - Utilities
|
||||
// * +Base - Assets
|
||||
// * +Base - Starter
|
||||
// * +Base - Elements
|
||||
// * +Base - Specific Views
|
||||
// * +Base - Contexts
|
||||
|
||||
|
||||
// +Libs and Resets - *do not edit*
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
// +Vendor and Rebase - *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
// +Base - Assets
|
||||
// ====================
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic image/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
// +Base - Starter
|
||||
// ====================
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
// +Base - Elements
|
||||
// ====================
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@@ -33,7 +47,8 @@
|
||||
@import 'elements/layout'; // various standard layouts
|
||||
@import 'elements/uploaded-assets'; // layout for asset tables
|
||||
|
||||
// base - specific views
|
||||
// +Base - Specific Views
|
||||
// ====================
|
||||
@import 'views/account';
|
||||
@import 'views/assets';
|
||||
@import 'views/updates';
|
||||
@@ -54,7 +69,8 @@
|
||||
@import 'views/group-configuration';
|
||||
@import 'views/video-upload';
|
||||
|
||||
// base - contexts
|
||||
// +Base - Contexts
|
||||
// ====================
|
||||
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
|
||||
|
||||
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
|
||||
|
||||
@@ -1,31 +1,44 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
// Table of Contents
|
||||
// * +Libs and Resets
|
||||
// * +Vendor and Rebase
|
||||
// * +Base - Utilities
|
||||
// * +Base - Assets
|
||||
// * +Base - Starter
|
||||
// * +Base - Elements
|
||||
// * +Base - Specific Views
|
||||
// * +Base - Contexts
|
||||
|
||||
|
||||
// +Libs and Resets - *do not edit*
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
|
||||
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
// +Vendor and Rebase - *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
// +Base - Assets
|
||||
// ====================
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic image/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
// +Base - Starter
|
||||
// ====================
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
// +Base - Elements
|
||||
// ====================
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@@ -34,7 +47,8 @@
|
||||
@import 'elements/layout'; // various standard layouts
|
||||
@import 'elements/uploaded-assets'; // layout for asset tables
|
||||
|
||||
// base - specific views
|
||||
// +Base - Specific Views
|
||||
// ====================
|
||||
@import 'views/account';
|
||||
@import 'views/assets';
|
||||
@import 'views/updates';
|
||||
@@ -55,7 +69,8 @@
|
||||
@import 'views/group-configuration';
|
||||
@import 'views/video-upload';
|
||||
|
||||
// base - contexts
|
||||
// +Base - Contexts
|
||||
// ====================
|
||||
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
|
||||
|
||||
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
|
||||
|
||||
@@ -1,30 +1,41 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
// libs and resets *do not edit*
|
||||
// Table of Contents
|
||||
// * +Libs and Resets
|
||||
// * +Vendor and Rebase
|
||||
// * +Base - Utilities
|
||||
// * +Base - Assets
|
||||
// * +Base - Starter
|
||||
// * +Base - Elements
|
||||
|
||||
// +Libs and Resets - *do not edit*
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
// +Vendor and Rebase - *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
// +Base - Assets
|
||||
// ====================
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic image/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
// +Base - Starter
|
||||
// ====================
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
// +Base - Elements
|
||||
// ====================
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
|
||||
@@ -1,31 +1,41 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
// Table of Contents
|
||||
// * +Libs and Resets
|
||||
// * +Vendor and Rebase
|
||||
// * +Base - Utilities
|
||||
// * +Base - Assets
|
||||
// * +Base - Starter
|
||||
// * +Base - Elements
|
||||
|
||||
// +Libs and Resets - *do not edit*
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
|
||||
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
// +Vendor and Rebase - *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
// +Base - Assets
|
||||
// ====================
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic image/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
// +Base - Starter
|
||||
// ====================
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
// +Base - Elements
|
||||
// ====================
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
|
||||
@@ -1,36 +1,50 @@
|
||||
// studio - xmodule architecture
|
||||
// ====================
|
||||
|
||||
// libs and resets *do not edit*
|
||||
// Table of Contents
|
||||
// * +Libs and Resets
|
||||
// * +Vendor and Rebase
|
||||
// * +Base - Utilities
|
||||
// * +Base - Assets
|
||||
// * +Base - Starter
|
||||
// * +Base - Elements
|
||||
// * +Xmodule
|
||||
|
||||
|
||||
// +Libs and Resets - *do not edit*
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
// +Vendor and Rebase - *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
// +Base - Assets
|
||||
// ====================
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic image/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
// +Base - Starter
|
||||
// ====================
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
// +Base - Elements
|
||||
// ====================
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/navigation'; // all archetypes of navigation
|
||||
|
||||
// xmodule
|
||||
// +Xmodule
|
||||
// ====================
|
||||
@import 'xmodule/modules/css/module-styles.scss';
|
||||
@import 'xmodule/descriptors/css/module-styles.scss';
|
||||
@import 'elements/xmodules'; // styling for Studio-specific contexts
|
||||
|
||||
@@ -1,36 +1,49 @@
|
||||
// studio - xmodule architecture
|
||||
// ====================
|
||||
|
||||
// libs and resets *do not edit*
|
||||
// Table of Contents
|
||||
// * +Libs and Resets
|
||||
// * +Vendor and Rebase
|
||||
// * +Base - Utilities
|
||||
// * +Base - Assets
|
||||
// * +Base - Starter
|
||||
// * +Base - Elements
|
||||
// * +Xmodule
|
||||
|
||||
// +Libs and Resets - *do not edit*
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
// +Vendor and Rebase - *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
// +Base - Assets
|
||||
// ====================
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic image/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
// +Base - Starter
|
||||
// ====================
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
// +Base - Elements
|
||||
// ====================
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/navigation'; // all archetypes of navigation
|
||||
|
||||
// xmodule
|
||||
// +Xmodule
|
||||
// ====================
|
||||
@import 'xmodule/modules/css/module-styles.scss';
|
||||
@import 'xmodule/descriptors/css/module-styles.scss';
|
||||
@import 'elements/xmodules'; // styling for Studio-specific contexts
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
dd {
|
||||
@extend %t-copy-base;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.course_text {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
4
cms/static/sass/views/_import.scss
vendored
4
cms/static/sass/views/_import.scss
vendored
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
.CodeMirror {
|
||||
border: 1px solid #3c3c3c;
|
||||
background: #fff;
|
||||
background: $white;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
}
|
||||
@@ -41,12 +41,12 @@
|
||||
}
|
||||
|
||||
&.editing {
|
||||
@extend %ui-depth4;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
background: $white;
|
||||
|
||||
.post-preview {
|
||||
display: none;
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
.primary {
|
||||
border: 1px solid #ddd;
|
||||
background: #f6f6f6;
|
||||
background: $gray-l6;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -198,13 +198,13 @@
|
||||
}
|
||||
|
||||
.edit-handouts-form {
|
||||
@extend %ui-depth4;
|
||||
@include edit-box;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10001;
|
||||
width: 800px;
|
||||
padding: 30px;
|
||||
padding: ($baseline*1.5);
|
||||
|
||||
textarea {
|
||||
height: 300px;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
&.problem-header {
|
||||
section.staff {
|
||||
margin-top: 30px;
|
||||
margin-top: ($baseline*1.5);
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ h2 {
|
||||
|
||||
// Problem Header
|
||||
div.name{
|
||||
padding-bottom: 15px;
|
||||
padding-bottom: ($baseline*0.75);
|
||||
|
||||
h2 {
|
||||
display: inline;
|
||||
@@ -39,14 +39,14 @@ div.name{
|
||||
}
|
||||
|
||||
section.combined-open-ended {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
.written-feedback {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
height: 150px;
|
||||
border: 1px solid lightgray;
|
||||
padding: 5px;
|
||||
padding: ($baseline/4);
|
||||
resize: vertical;
|
||||
width: 99%;
|
||||
overflow: auto;
|
||||
@@ -64,11 +64,11 @@ section.combined-open-ended {
|
||||
|
||||
div.problemwrapper {
|
||||
border: 1px solid lightgray;
|
||||
border-radius: $baseline/2;
|
||||
border-radius: ($baseline/2);
|
||||
|
||||
.status-bar {
|
||||
background-color: #eee;
|
||||
border-radius: $baseline/2 $baseline/2 0 0;
|
||||
border-radius: ($baseline/2) ($baseline/2) 0 0;
|
||||
border-bottom: 1px solid lightgray;
|
||||
|
||||
.statustable {
|
||||
@@ -81,33 +81,33 @@ div.problemwrapper {
|
||||
text-align: center;
|
||||
|
||||
.status-elements {
|
||||
border-radius: $baseline/4;
|
||||
border-radius: ($baseline/4);
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.problemtype-container {
|
||||
padding: $baseline/2;
|
||||
padding: ($baseline/2);
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.problemtype{
|
||||
padding: $baseline/2;
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
|
||||
.assessments-container {
|
||||
float: right;
|
||||
padding: $baseline/2 $baseline $baseline/2 $baseline/2;
|
||||
padding: ($baseline/2) $baseline ($baseline/2) ($baseline/2);
|
||||
|
||||
.assessment-text {
|
||||
display: inline-block;
|
||||
display: table-cell;
|
||||
padding-right: $baseline/2;
|
||||
padding-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-container {
|
||||
padding-bottom: $baseline/2;
|
||||
padding-bottom: ($baseline/2);
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@@ -120,11 +120,11 @@ div.problemwrapper {
|
||||
|
||||
section.legend-container {
|
||||
margin: 15px;
|
||||
border-radius: $baseline/4;
|
||||
border-radius: ($baseline/4);
|
||||
|
||||
.legenditem {
|
||||
display: inline;
|
||||
padding: $baseline/2;
|
||||
padding: ($baseline/2);
|
||||
width: 20%;
|
||||
background-color: #eee;
|
||||
font-size: .9em;
|
||||
@@ -136,7 +136,7 @@ section.combined-open-ended-status {
|
||||
|
||||
.statusitem {
|
||||
display: table-cell;
|
||||
padding: $baseline/2;
|
||||
padding: ($baseline/2);
|
||||
width: 30px;
|
||||
border-right: 1px solid lightgray;
|
||||
background-color: #eee;
|
||||
@@ -144,16 +144,16 @@ section.combined-open-ended-status {
|
||||
font-size: .9em;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $baseline/4 0 0 $baseline/4;
|
||||
border-radius: ($baseline/4) 0 0 ($baseline/4);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
border-radius: 0 $baseline/4 $baseline/4 0;
|
||||
border-radius: 0 ($baseline/4) ($baseline/4) 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: $baseline/4;
|
||||
border-radius: ($baseline/4);
|
||||
}
|
||||
|
||||
.show-results {
|
||||
@@ -167,7 +167,7 @@ section.combined-open-ended-status {
|
||||
}
|
||||
|
||||
.statusitem-current {
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
@@ -226,7 +226,7 @@ section.combined-open-ended-status {
|
||||
.section-header {
|
||||
display: block;
|
||||
float: right;
|
||||
padding-top: $baseline/2;
|
||||
padding-top: ($baseline/2);
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
font-size: .9em;
|
||||
@@ -236,33 +236,33 @@ section.combined-open-ended-status {
|
||||
|
||||
.wrapper-score-selection {
|
||||
display: table-cell;
|
||||
padding: 0 $baseline/2;
|
||||
padding: 0 ($baseline/2);
|
||||
width: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wrappable {
|
||||
display: table-cell;
|
||||
padding: $baseline/4;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
|
||||
.rubric-list-item {
|
||||
margin-bottom: 2px;
|
||||
padding: $baseline/2;
|
||||
margin-bottom: ($baseline/10);
|
||||
padding: ($baseline/2);
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
.rubric-label-selected{
|
||||
border-radius: $baseline/4;
|
||||
border-radius: ($baseline/4);
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
span.rubric-category {
|
||||
display: block;
|
||||
margin-bottom: $baseline/2;
|
||||
padding-top: $baseline/2;
|
||||
margin-bottom: ($baseline/2);
|
||||
padding-top: ($baseline/2);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid lightgray;
|
||||
font-size: 1.1em;
|
||||
@@ -270,25 +270,25 @@ span.rubric-category {
|
||||
|
||||
div.combined-rubric-container {
|
||||
margin: 15px;
|
||||
padding-top: $baseline/2;
|
||||
padding-bottom: $baseline/4;
|
||||
padding-top: ($baseline/2);
|
||||
padding-bottom: ($baseline/4);
|
||||
|
||||
ul.rubric-list {
|
||||
margin: 0 $baseline $baseline/2 $baseline;
|
||||
margin: 0 $baseline ($baseline/2) $baseline;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
|
||||
&.rubric-list-item {
|
||||
margin-bottom: 2px;
|
||||
padding: $baseline/2;
|
||||
margin-bottom: ($baseline/10);
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding-top: $baseline/2;
|
||||
padding-top: ($baseline/2);
|
||||
}
|
||||
|
||||
span.rubric-category {
|
||||
@@ -301,34 +301,34 @@ div.combined-rubric-container {
|
||||
|
||||
label.choicegroup_correct {
|
||||
&:before {
|
||||
margin-right: 15px;
|
||||
margin-right: ($baseline*0.75);
|
||||
content: url('../images/correct-icon.png');
|
||||
}
|
||||
}
|
||||
|
||||
label.choicegroup_partialcorrect {
|
||||
&:before {
|
||||
margin-right: 15px;
|
||||
margin-right: ($baseline*0.75);
|
||||
content: url('../images/partially-correct-icon.png');
|
||||
}
|
||||
}
|
||||
|
||||
label.choicegroup_incorrect {
|
||||
&:before {
|
||||
margin-right: 15px;
|
||||
margin-right: ($baseline*0.75);
|
||||
content: url('../images/incorrect-icon.png');
|
||||
}
|
||||
}
|
||||
|
||||
div.written-feedback {
|
||||
background: #f6f6f6;
|
||||
padding: 5px;
|
||||
background: $gray-l6;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
div.result-container {
|
||||
padding-top: $baseline/2;
|
||||
padding-bottom: $baseline/4;
|
||||
padding-top: ($baseline/2);
|
||||
padding-bottom: ($baseline/4);
|
||||
|
||||
.evaluation {
|
||||
p {
|
||||
@@ -342,7 +342,7 @@ div.result-container {
|
||||
}
|
||||
|
||||
.evaluation-response {
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: ($baseline/10);
|
||||
|
||||
header {
|
||||
a {
|
||||
@@ -372,11 +372,11 @@ div.result-container {
|
||||
}
|
||||
|
||||
.submit-message-container {
|
||||
margin: $baseline/2 0;
|
||||
margin: ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.external-grader-message {
|
||||
margin-bottom: $baseline/4;
|
||||
margin-bottom: ($baseline/4);
|
||||
|
||||
section {
|
||||
padding-left: $baseline;
|
||||
@@ -384,7 +384,7 @@ div.result-container {
|
||||
color: #2c2c2c;
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
padding-top: $baseline/2;
|
||||
padding-top: ($baseline/2);
|
||||
padding-bottom: 30px;
|
||||
|
||||
header {
|
||||
@@ -400,8 +400,8 @@ div.result-container {
|
||||
margin: 0;
|
||||
|
||||
.result-errors {
|
||||
margin: $baseline/4;
|
||||
padding: $baseline/2 $baseline/2 $baseline/2 $baseline*2;
|
||||
margin: ($baseline/4);
|
||||
padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2);
|
||||
background: url('../images/incorrect-icon.png') center left no-repeat;
|
||||
|
||||
li {
|
||||
@@ -410,8 +410,8 @@ div.result-container {
|
||||
}
|
||||
|
||||
.result-output {
|
||||
margin: $baseline/4;
|
||||
padding: $baseline 0 15px 50px;
|
||||
margin: ($baseline/4);
|
||||
padding: $baseline 0 ($baseline*0.75) ($baseline*2.5);
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 20px solid #fafafa;
|
||||
|
||||
@@ -434,8 +434,8 @@ div.result-container {
|
||||
}
|
||||
|
||||
.markup-text{
|
||||
margin: $baseline/4;
|
||||
padding: $baseline 0 15px 50px;
|
||||
margin: ($baseline/4);
|
||||
padding: $baseline 0 ($baseline*0.75) ($baseline*2.5);
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 20px solid #fafafa;
|
||||
|
||||
@@ -452,13 +452,13 @@ div.result-container {
|
||||
}
|
||||
|
||||
.rubric-result-container {
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
margin: 0;
|
||||
display: inline;
|
||||
|
||||
.rubric-result {
|
||||
font-size: .9em;
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
display: inline-table;
|
||||
}
|
||||
}
|
||||
@@ -466,16 +466,16 @@ div.result-container {
|
||||
|
||||
div.rubric {
|
||||
ul.rubric-list{
|
||||
margin: 0 $baseline $baseline/2 $baseline;
|
||||
margin: 0 $baseline ($baseline/2) $baseline;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
&.rubric-list-item {
|
||||
margin-bottom: 2px;
|
||||
padding: $baseline/2;
|
||||
border-radius: $baseline/4;
|
||||
margin-bottom: ($baseline/10);
|
||||
padding: ($baseline/2);
|
||||
border-radius: ($baseline/4);
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #eee;
|
||||
@@ -483,14 +483,14 @@ div.rubric {
|
||||
|
||||
.wrapper-score-selection {
|
||||
display: table-cell;
|
||||
padding: 0 $baseline/2;
|
||||
padding: 0 ($baseline/2);
|
||||
width: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wrappable {
|
||||
display: table-cell;
|
||||
padding: $baseline/4;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -540,7 +540,7 @@ section.open-ended-child {
|
||||
padding: 9px 15px $baseline;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
background: $white;
|
||||
box-shadow: inset 0 0 0 1px #eee;
|
||||
|
||||
&:empty {
|
||||
@@ -554,7 +554,7 @@ section.open-ended-child {
|
||||
margin-top: -2px;
|
||||
}
|
||||
&.status {
|
||||
margin: 8px 0 0 $baseline/2;
|
||||
margin: 8px 0 0 ($baseline/2);
|
||||
text-indent: -9999px;
|
||||
}
|
||||
}
|
||||
@@ -610,13 +610,13 @@ section.open-ended-child {
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: lh(.5);
|
||||
margin-bottom: lh(0.5);
|
||||
}
|
||||
|
||||
p.answer {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-left: $baseline/2;
|
||||
margin-left: ($baseline/2);
|
||||
|
||||
&:before {
|
||||
content: "Answer: ";
|
||||
@@ -671,26 +671,26 @@ section.open-ended-child {
|
||||
|
||||
.reload {
|
||||
float:right;
|
||||
margin: $baseline/2;
|
||||
margin: ($baseline/2);
|
||||
}
|
||||
|
||||
div.short-form-response {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
overflow-y: auto;
|
||||
margin-bottom: 0;
|
||||
padding: $baseline/2;
|
||||
padding: ($baseline/2);
|
||||
min-height: 20px;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
background: #f6f6f6;
|
||||
background: $gray-l6;
|
||||
}
|
||||
|
||||
.grader-status {
|
||||
@include clearfix;
|
||||
margin: $baseline/2 0;
|
||||
padding: $baseline/2;
|
||||
@include clearfix();
|
||||
margin: ($baseline/2) 0;
|
||||
padding: ($baseline/2);
|
||||
border-radius: 5px;
|
||||
background: #f6f6f6;
|
||||
background: $gray-l6;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
@@ -718,7 +718,7 @@ section.open-ended-child {
|
||||
padding: $baseline 0 0 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
background: #fff;
|
||||
background: $white;
|
||||
|
||||
p.debug {
|
||||
display: none;
|
||||
@@ -731,7 +731,7 @@ section.open-ended-child {
|
||||
}
|
||||
|
||||
form.option-input {
|
||||
margin: -$baseline/2 0 $baseline;
|
||||
margin: -($baseline/2) 0 $baseline;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
select {
|
||||
@@ -741,8 +741,8 @@ section.open-ended-child {
|
||||
|
||||
ul {
|
||||
margin-bottom: lh();
|
||||
margin-left: .75em;
|
||||
margin-left: .75rem;
|
||||
margin-left: 0.75em;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
ul.rubric-list{
|
||||
@@ -755,7 +755,7 @@ section.open-ended-child {
|
||||
&.rubric-list-item {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
border-radius: $baseline/4;
|
||||
border-radius: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -827,7 +827,7 @@ section.open-ended-child {
|
||||
|
||||
.submission_feedback {
|
||||
display: inline-block;
|
||||
margin: 8px 0 0 $baseline/2;
|
||||
margin: 8px 0 0 ($baseline/2);
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -850,8 +850,8 @@ section.open-ended-child {
|
||||
|
||||
div.open-ended-alert,
|
||||
.save_message {
|
||||
margin-top: $baseline/2;
|
||||
margin-bottom: $baseline/4;
|
||||
margin-top: ($baseline/2);
|
||||
margin-bottom: ($baseline/4);
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ebe8bf;
|
||||
border-radius: 3px;
|
||||
@@ -860,8 +860,8 @@ section.open-ended-child {
|
||||
}
|
||||
|
||||
div.capa_reset {
|
||||
margin-top: $baseline/2;
|
||||
margin-bottom: $baseline/2;
|
||||
margin-top: ($baseline/2);
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: 25px;
|
||||
border: 1px solid $error-red;
|
||||
border-radius: 3px;
|
||||
@@ -878,7 +878,7 @@ section.open-ended-child {
|
||||
}
|
||||
|
||||
.assessment-container {
|
||||
margin: $baseline*2 0px 30px 0px;
|
||||
margin: ($baseline*2) 0 ($baseline*1.5) 0;
|
||||
|
||||
.scoring-container {
|
||||
p {
|
||||
@@ -887,10 +887,10 @@ section.open-ended-child {
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: $baseline/2;
|
||||
padding: $baseline/4;
|
||||
margin: ($baseline/2);
|
||||
padding: ($baseline/4);
|
||||
min-width: 50px;
|
||||
background-color: #ccc;
|
||||
background-color: $gray-l3;
|
||||
text-size: 1.5em;
|
||||
}
|
||||
|
||||
@@ -960,18 +960,18 @@ section.open-ended-child {
|
||||
.staff-grading {
|
||||
|
||||
.breadcrumbs {
|
||||
padding: $baseline/10;
|
||||
background-color: #f6f6f6;
|
||||
padding: ($baseline/10);
|
||||
background-color: $gray-l6;
|
||||
border-radius: 5px;
|
||||
margin-bottom: $baseline/2;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.prompt-wrapper {
|
||||
padding-top: $baseline/2;
|
||||
padding-top: ($baseline/2);
|
||||
|
||||
.meta-info-wrapper {
|
||||
padding: $baseline/2;
|
||||
border-radius: $baseline/4;
|
||||
padding: ($baseline/2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -979,7 +979,7 @@ section.open-ended-child {
|
||||
section.peer-grading-container{
|
||||
div.peer-grading{
|
||||
section.calibration-feedback {
|
||||
padding: 20px;
|
||||
padding: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -988,6 +988,6 @@ div.staff-info{
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding: 10px;
|
||||
margin: 10px 0px 10px 0px;
|
||||
padding: ($baseline/2);
|
||||
margin: ($baseline/2) 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -36,42 +36,42 @@ nav.sequence-nav {
|
||||
// TODO (cpennington): This doesn't work anymore. XModules aren't able to
|
||||
// import from external sources.
|
||||
@extend .topbar;
|
||||
margin: -4px 0 30px;
|
||||
margin: -4px 0 ($baseline*1.5);
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
|
||||
.left-shadow {
|
||||
@extend %ui-depth4;
|
||||
@include linear-gradient(left, $shadow, $transparent);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
width: 20px;
|
||||
height: 46px;
|
||||
@include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.right-shadow {
|
||||
@extend %ui-depth4;
|
||||
@include linear-gradient(right, $shadow, $transparent);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
width: 20px;
|
||||
height: 46px;
|
||||
@include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sequence-list-wrapper {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
border: 1px solid #ccc;
|
||||
height: 44px;
|
||||
margin: 0 30px;
|
||||
@extend %ui-depth2;
|
||||
@include linear-gradient(top, #ddd, #eee);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
|
||||
position: relative;
|
||||
border: 1px solid $gray-l3;
|
||||
height: 44px;
|
||||
margin: 0 ($baseline*1.5);
|
||||
box-shadow: 0 1px 3px $shadow-l1 inset;
|
||||
}
|
||||
|
||||
ol {
|
||||
@@ -82,7 +82,7 @@ nav.sequence-nav {
|
||||
display: table;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
padding: 0 ($baseline/2);
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
@@ -94,31 +94,31 @@ nav.sequence-nav {
|
||||
min-width: 20px;
|
||||
|
||||
a {
|
||||
@extend %ui-fake-link;
|
||||
@include transition(none);
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
margin: 0;
|
||||
background-position: center 14px;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
@include transition(none);
|
||||
|
||||
/* &:focus {
|
||||
outline: 0;
|
||||
}
|
||||
*/
|
||||
&:hover, &:focus {
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 14px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
@extend %ui-depth1;
|
||||
background-color: $white;
|
||||
|
||||
// &:after {
|
||||
// content: '▲';
|
||||
@@ -132,7 +132,7 @@ nav.sequence-nav {
|
||||
// }
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 14px;
|
||||
}
|
||||
@@ -197,19 +197,19 @@ nav.sequence-nav {
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %ui-depth2;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
font-family: $sans-serif;
|
||||
line-height: lh();
|
||||
right: 0px;
|
||||
right: 0;
|
||||
opacity: 0.0;
|
||||
padding: 6px;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
text-shadow: 0 -1px 0 $black;
|
||||
@include transition(all .1s $ease-in-out-quart 0s);
|
||||
white-space: pre;
|
||||
z-index: 99;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -238,7 +238,7 @@ nav.sequence-nav {
|
||||
&:hover, &:focus {
|
||||
p {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
margin-top: ($baseline/5);
|
||||
opacity: 1.0;
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -263,7 +263,7 @@ nav.sequence-nav {
|
||||
margin-bottom: 0;
|
||||
height: 44px;
|
||||
width: 70px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $gray-l3;
|
||||
@include linear-gradient(top, #eee, #ddd);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
|
||||
z-index: 1;
|
||||
@@ -357,7 +357,7 @@ nav.sequence-bottom {
|
||||
@include float(left);
|
||||
width: 50px;
|
||||
height: 44px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $gray-l3;
|
||||
@include linear-gradient(top, #eee, #ddd);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
|
||||
|
||||
@@ -369,7 +369,7 @@ nav.sequence-bottom {
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
display: block;
|
||||
padding: lh(.5) 4px;
|
||||
padding: lh(0.5) 4px;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
@include transition(all .2s $ease-in-out-quad 0s);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
& {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
@@ -28,7 +28,7 @@ div.video {
|
||||
}
|
||||
|
||||
div.tc-wrapper {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -46,16 +46,16 @@ div.video {
|
||||
.video-download-button{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: ($baseline*.75) ($baseline/2) 0 0;
|
||||
margin: ($baseline*0.75) ($baseline/2) 0 0;
|
||||
|
||||
> a {
|
||||
@include transition(all 0.25s ease-in-out 0s);
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include font-size(14);
|
||||
line-height : 14px;
|
||||
float: left;
|
||||
border-radius: 3px;
|
||||
background-color: $very-light-text;
|
||||
padding: ($baseline*.75);
|
||||
padding: ($baseline*0.75);
|
||||
color: $lighter-base-font-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
@@ -126,7 +126,7 @@ div.video {
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-width: 30px 0 30px 50px;
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
border-color: transparent transparent transparent $white;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -161,9 +161,9 @@ div.video {
|
||||
section.video-controls {
|
||||
@include clearfix();
|
||||
background: #333;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
border-top: 0;
|
||||
color: #ccc;
|
||||
color: $gray-l3;
|
||||
position: relative;
|
||||
|
||||
&:hover, &:focus {
|
||||
@@ -173,6 +173,7 @@ div.video {
|
||||
}
|
||||
|
||||
%video-button {
|
||||
@extend %ui-fake-link;
|
||||
@include transition(none);
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
@@ -183,21 +184,20 @@ div.video {
|
||||
text-indent: -9999px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
color: $white;
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
border-color: #000;
|
||||
border-color: $black;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
background-color: #444;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -207,9 +207,9 @@ div.video {
|
||||
@include clearfix();
|
||||
@include transform(scaleY(0.5) translate3d(0, 50%, 0));
|
||||
background: #c2c2c2;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
border-radius: 0;
|
||||
border-top: 1px solid #000;
|
||||
border-top: 1px solid $black;
|
||||
box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@@ -235,13 +235,13 @@ div.video {
|
||||
}
|
||||
|
||||
a.ui-slider-handle {
|
||||
@extend %ui-fake-link;
|
||||
@include transform(scale(.7, 1.3) translate3d(-80%, -15%, 0));
|
||||
background: $pink url(../images/slider-handle.png) center center no-repeat;
|
||||
background-size: 50%;
|
||||
border: 1px solid darken($pink, 20%);
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 1px 0 lighten($pink, 10%);
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
margin-left: 0;
|
||||
top: 0;
|
||||
@@ -264,7 +264,7 @@ div.video {
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
margin-right: lh(.5);
|
||||
margin-right: lh(0.5);
|
||||
font-size: em(14);
|
||||
}
|
||||
|
||||
@@ -283,9 +283,9 @@ div.video {
|
||||
width: 14px;
|
||||
|
||||
&:focus {
|
||||
@extend %ui-depth4;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
outline: #fff dotted thin;
|
||||
outline: $white dotted thin;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@@ -309,7 +309,7 @@ div.video {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding-left: lh(.75);
|
||||
@media (max-width: 1120px) {
|
||||
padding-left: lh(.5);
|
||||
padding-left: lh(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -326,9 +326,9 @@ div.video {
|
||||
// overflow is used to bypass Firefox CSS :focus outline bug
|
||||
// http://johndoesdesign.com/blog/2012/css/firefox-and-its-css-focus-outline-bug/
|
||||
&:focus {
|
||||
@extend %ui-depth5;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
outline: #fff dotted thin;
|
||||
outline: $white dotted thin;
|
||||
outline-offset: -2px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -350,26 +350,26 @@ div.video {
|
||||
|
||||
.menu {
|
||||
@include transition(none);
|
||||
@extend %ui-depth1;
|
||||
box-shadow: inset 1px 0 0 #555, 0 1px 0 #444;
|
||||
background-color: #444;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
bottom: 46px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
li {
|
||||
@extend %ui-fake-link;
|
||||
box-shadow: 0 1px 0 #555;
|
||||
border-bottom: 1px solid #000;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid $black;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
display: block;
|
||||
padding: lh(.5);
|
||||
padding: lh(0.5);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -430,7 +430,7 @@ div.video {
|
||||
font-size: em(14);
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
padding: 0 lh(.25) 0 lh(.5);
|
||||
padding: 0 lh(0.25) 0 lh(0.5);
|
||||
line-height: 46px;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
@@ -444,14 +444,14 @@ div.video {
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
padding: 0 lh(.5) 0 0;
|
||||
padding: 0 lh(0.5) 0 0;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
padding: 0 lh(.5) 0 lh(.5);
|
||||
padding: 0 lh(0.5) 0 lh(0.5);
|
||||
}
|
||||
|
||||
line-height: 46px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -486,9 +486,10 @@ div.video {
|
||||
|
||||
.volume-slider-container {
|
||||
@include transition(none);
|
||||
@extend %ui-depth1;
|
||||
box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
|
||||
background-color: #444;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
bottom: 46px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
@@ -496,7 +497,6 @@ div.video {
|
||||
width: 45px;
|
||||
height: 125px;
|
||||
margin-left: -1px;
|
||||
z-index: 10;
|
||||
|
||||
.volume-slider {
|
||||
height: 100px;
|
||||
@@ -504,17 +504,17 @@ div.video {
|
||||
width: 5px;
|
||||
margin: 14px auto;
|
||||
background: #666;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
box-shadow: 0 1px 0 #333;
|
||||
|
||||
a.ui-slider-handle {
|
||||
@include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
|
||||
@extend %ui-fake-link;
|
||||
@include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
|
||||
background: $pink url(../images/slider-handle.png) center center no-repeat;
|
||||
background-size: 50%;
|
||||
border: 1px solid darken($pink, 20%);
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 1px 0 lighten($pink, 10%);
|
||||
cursor: pointer;
|
||||
height: 15px;
|
||||
left: -6px;
|
||||
width: 15px;
|
||||
@@ -607,9 +607,9 @@ div.video {
|
||||
visibility: visible;
|
||||
|
||||
li {
|
||||
@extend %ui-fake-link;
|
||||
border: 0;
|
||||
color: rgb(29,157,217);
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
line-height: lh();
|
||||
@@ -629,7 +629,7 @@ div.video {
|
||||
}
|
||||
|
||||
&:empty {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -643,15 +643,15 @@ div.video {
|
||||
}
|
||||
|
||||
article.video-wrapper section.video-controls.html5 {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
|
||||
height: 0px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
article.video-wrapper section.video-player {
|
||||
@@ -666,6 +666,7 @@ div.video {
|
||||
}
|
||||
|
||||
ol.subtitles.html5 {
|
||||
@extend %ui-depth0;
|
||||
background-color: rgba(243, 243, 243, 0.8);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@@ -673,13 +674,13 @@ div.video {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 275px;
|
||||
padding: 0 20px;
|
||||
z-index: 0;
|
||||
padding: 0 $baseline;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.video-fullscreen {
|
||||
@extend %ui-depth4;
|
||||
background: rgba(#000, .95);
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
@@ -690,7 +691,6 @@ div.video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
|
||||
@@ -703,7 +703,7 @@ div.video {
|
||||
}
|
||||
|
||||
article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
|
||||
height: 0px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
article.video-wrapper {
|
||||
@@ -717,7 +717,7 @@ div.video {
|
||||
}
|
||||
|
||||
div.tc-wrapper {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -737,18 +737,18 @@ div.video {
|
||||
}
|
||||
|
||||
section.video-controls {
|
||||
@extend %ui-depth4;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ol.subtitles {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(none);
|
||||
background: #000;
|
||||
background: $black;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
padding: lh();
|
||||
@@ -758,7 +758,7 @@ div.video {
|
||||
color: #aaa;
|
||||
|
||||
&.current {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.input-cloud {
|
||||
margin: 5px;
|
||||
margin: ($baseline/4);
|
||||
}
|
||||
|
||||
.result_cloud_section {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// studio - utilities - INHERITED mixins and extends
|
||||
|
||||
// NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future.
|
||||
// They are still referenced when styliing current interface elements and as such need to be preserved for the time being.
|
||||
// They are still referenced when styling current interface elements and as such need to be preserved for the time being.
|
||||
// talbs: we need to slowly ween ourselves off of these
|
||||
// ====================
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
@include transition(background-color 0.15s, box-shadow 0.15s);
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 $transparent;
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4);
|
||||
|
||||
@@ -320,11 +320,11 @@
|
||||
h5 {
|
||||
@extend %t-strong;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
@@ -345,7 +345,7 @@
|
||||
// sunsetted mixins
|
||||
@mixin active {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset;
|
||||
box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@@ -1,34 +1,58 @@
|
||||
// studio - utilities - mixins and extends
|
||||
// ====================
|
||||
|
||||
// mixins - font sizing
|
||||
// Table of Contents
|
||||
// * +Font Sizing - Mixin
|
||||
// * +Line Height - Mixin
|
||||
// * +Sizing - Mixin
|
||||
// * +Square - Mixin
|
||||
// * +Placeholder Styling - Mixin
|
||||
// * +Flex Support - Mixin
|
||||
// * +Flex Polyfill - Extends
|
||||
// * +UI - Wrapper - Extends
|
||||
// * +UI - Window - Extend
|
||||
// * +UI - Visual Link - Extend
|
||||
// * +UI - Functional Disable - Extend
|
||||
// * +UI - Visual Link - Extend
|
||||
// * +UI - Depth Levels - Extends
|
||||
// * +UI - Clear Children - Extends
|
||||
// * +UI - Buttons - Extends
|
||||
// * +UI - Well Archetype - Extends
|
||||
// * +Content - No List - Extends
|
||||
// * +Content - Hidden Image Text - Extend
|
||||
// * +Content - Screenreader Text - Extend
|
||||
// * +Content - Text Wrap - Extend
|
||||
// * +Content - Text Truncate - Extend
|
||||
|
||||
// +Font Sizing - Mixin
|
||||
// ====================
|
||||
@mixin font-size($sizeValue: 16){
|
||||
font-size: $sizeValue + px;
|
||||
font-size: ($sizeValue/10) + rem;
|
||||
}
|
||||
|
||||
// mixins - line height
|
||||
// +Line Height - Mixin
|
||||
// ====================
|
||||
@mixin line-height($fontSize: auto){
|
||||
line-height: ($fontSize*1.48) + px;
|
||||
line-height: (($fontSize/10)*1.48) + rem;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// mixins - sizing
|
||||
// +Sizing - Mixin
|
||||
// ====================
|
||||
@mixin size($width: $baseline, $height: $baseline) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
}
|
||||
|
||||
// mixins - sizing
|
||||
// +Square - Mixin
|
||||
// ====================
|
||||
@mixin square($size: $baseline) {
|
||||
@include size($size);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// mixins - placeholder styling
|
||||
// +Placeholder Styling - Mixin
|
||||
// ====================
|
||||
@mixin placeholder($color) {
|
||||
:-moz-placeholder {
|
||||
color: $color;
|
||||
@@ -41,9 +65,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// mixins - flex support
|
||||
// +Flex Support - Mixin
|
||||
// ====================
|
||||
@mixin ui-flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
@@ -52,7 +75,10 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// extends - justify-content right for display:flex alignment in older browsers
|
||||
// +Flex PolyFill - Extends
|
||||
// ====================
|
||||
|
||||
// justify-content right for display:flex alignment in older browsers
|
||||
%ui-justify-right-flex {
|
||||
-webkit-box-pack: flex-end;
|
||||
-moz-box-pack: flex-end;
|
||||
@@ -61,7 +87,7 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// extends - justify-content left for display:flex alignment in older browsers
|
||||
// justify-content left for display:flex alignment in older browsers
|
||||
%ui-justify-left-flex {
|
||||
-webkit-box-pack: flex-start;
|
||||
-moz-box-pack: flex-start;
|
||||
@@ -70,7 +96,7 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
// extends - align items center for display:flex alignment in older browsers
|
||||
// align items center for display:flex alignment in older browsers
|
||||
%ui-align-center-flex {
|
||||
-webkit-flex-align: center;
|
||||
-ms-flex-align: center;
|
||||
@@ -78,9 +104,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// extends - UI - used for page/view-level wrappers (for centering/grids)
|
||||
// +UI - Wrapper - Extends
|
||||
// ====================
|
||||
// used for page/view-level wrappers (for centering/grids)
|
||||
%ui-wrapper {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
@@ -99,9 +126,8 @@
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// extends - UI - window
|
||||
// +UI - Window - Extends
|
||||
// ====================
|
||||
%ui-window {
|
||||
@include clearfix();
|
||||
border-radius: ($baseline/10);
|
||||
@@ -116,19 +142,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
// extends - UI - visual link
|
||||
// +UI - Visual Link - Extends
|
||||
// ====================
|
||||
%ui-fake-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// extends - UI - functional disable
|
||||
// +UI - Functional Disable - Extends
|
||||
// ====================
|
||||
%ui-disabled {
|
||||
pointer-events: none;
|
||||
outline: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// extends - UI - depth levels
|
||||
// +UI - Depth Levels - Extends
|
||||
// ====================
|
||||
%ui-depth0 { z-index: 0; }
|
||||
%ui-depth1 { z-index: 10; }
|
||||
%ui-depth2 { z-index: 100; }
|
||||
@@ -137,7 +166,9 @@
|
||||
%ui-depth5 { z-index: 100000; }
|
||||
|
||||
|
||||
// extends - UI - utility - nth-type style clearing
|
||||
// +UI - Clear Children - Extends
|
||||
// ====================
|
||||
// extends - UI - utility - first child clearing
|
||||
%wipe-first-child {
|
||||
|
||||
&:first-child {
|
||||
@@ -147,7 +178,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// extends - UI - utility - nth-type style clearing
|
||||
// extends - UI - utility - last child clearing
|
||||
%wipe-last-child {
|
||||
|
||||
&:last-child {
|
||||
@@ -157,10 +188,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// extends - UI - buttons
|
||||
// +UI - Buttons - Extends
|
||||
// ====================
|
||||
%ui-btn {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
|
||||
@include transition(color $tmg-f2 ease-in-out 0s, border-color $tmg-f2 ease-in-out 0s, background $tmg-f2 ease-in-out 0s, box-shadow $tmg-f2 ease-in-out 0s);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -295,7 +327,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// extends - UI archetypes - well
|
||||
// +UI - Well Archetype - Extends
|
||||
// ====================
|
||||
%ui-well {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
@@ -343,9 +376,9 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
|
||||
// +Content - No List - Extends
|
||||
// ====================
|
||||
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
|
||||
%cont-no-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -358,14 +391,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
// extends - content - image-replacement hidden text
|
||||
// +Content - Hidden Image Text - Extend
|
||||
// ====================
|
||||
// image-replacement hidden text
|
||||
%cont-text-hide {
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// extends - content - hidden elems - screenreaders
|
||||
// +Content - Screenreader Text - Extend
|
||||
// ====================
|
||||
%cont-text-sr {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
@@ -377,12 +413,14 @@
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
// extends - content - wrapping
|
||||
// +Content - Text Wrap - Extend
|
||||
// ====================
|
||||
%cont-text-wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// extends - content - text overflow by ellipsis
|
||||
// +Content - Text Truncate - Extend
|
||||
// ====================
|
||||
%cont-truncated {
|
||||
@include box-sizing(border-box);
|
||||
overflow: hidden;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@mixin outer-container {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
max-width: $max-width;
|
||||
margin: {
|
||||
left: auto;
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
@else if $visual-grid-index == front {
|
||||
z-index: 9999;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@each $breakpoint in $visual-grid-breakpoints {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// lms variables
|
||||
// lms - utilities - variables
|
||||
// ====================
|
||||
|
||||
// base
|
||||
// BASE
|
||||
$baseline: 20px;
|
||||
|
||||
// ====================
|
||||
@@ -56,13 +57,13 @@ $tmg-f3: 0.125s;
|
||||
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
|
||||
|
||||
// COLORS
|
||||
$black: rgb(0,0,0);
|
||||
$black: rgb(0,0,0); // #000000;
|
||||
$black-t0: rgba($black, 0.125);
|
||||
$black-t1: rgba($black, 0.25);
|
||||
$black-t2: rgba($black, 0.5);
|
||||
$black-t3: rgba($black, 0.75);
|
||||
|
||||
$white: rgb(255,255,255);
|
||||
$white: rgb(255,255,255); // #FFFFFF;
|
||||
$white-t0: rgba($white, 0.125);
|
||||
$white-t1: rgba($white, 0.25);
|
||||
$white-t2: rgba($white, 0.5);
|
||||
@@ -81,7 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c
|
||||
$gray-d3: shade($gray,60%); // #323232
|
||||
$gray-d4: shade($gray,80%); // #191919
|
||||
|
||||
$pink: rgb(182,37,103);
|
||||
$pink: rgb(182,37,103); // #b72567;
|
||||
$pink-l1: tint($pink,20%);
|
||||
$pink-l2: tint($pink,40%);
|
||||
$pink-l3: tint($pink,60%);
|
||||
@@ -98,7 +99,7 @@ $pink-u1: desaturate($pink,15%);
|
||||
$pink-u2: desaturate($pink,30%);
|
||||
$pink-u3: desaturate($pink,45%);
|
||||
|
||||
$red: rgb(178, 6, 16);
|
||||
$red: rgb(178, 6, 16); // #b20610;
|
||||
$red-l1: tint($red,20%);
|
||||
$red-l2: tint($red,40%);
|
||||
$red-l3: tint($red,60%);
|
||||
@@ -115,7 +116,7 @@ $red-u1: desaturate($red,15%);
|
||||
$red-u2: desaturate($red,30%);
|
||||
$red-u3: desaturate($red,45%);
|
||||
|
||||
$green: rgb(37, 184, 90);
|
||||
$green: rgb(37, 184, 90); // #25b85a;
|
||||
$green-l1: tint($green,20%);
|
||||
$green-l2: tint($green,40%);
|
||||
$green-l3: tint($green,60%);
|
||||
@@ -149,7 +150,7 @@ $light-gray: #ddd;
|
||||
// used by descriptor css
|
||||
$lightGrey: #edf1f5;
|
||||
$darkGrey: #8891a1;
|
||||
$lightGrey1: #ccc;
|
||||
$lightGrey1: $gray-l3;
|
||||
$blue-d1: shade($blue,20%);
|
||||
$blue-d2: shade($blue,40%);
|
||||
$blue-d4: shade($blue,80%);
|
||||
@@ -215,7 +216,7 @@ $m-green-t3: rgba($m-green,0.75);
|
||||
|
||||
// ====================
|
||||
|
||||
// shadows
|
||||
// SHADOWS
|
||||
$shadow: rgba(0,0,0,0.2);
|
||||
$shadow-l1: rgba(0,0,0,0.1);
|
||||
$shadow-l2: rgba(0,0,0,0.05);
|
||||
@@ -242,7 +243,7 @@ $courseware-header-bg: transparent;
|
||||
$footer-bg: $white;
|
||||
$courseware-footer-border: none;
|
||||
$courseware-footer-shadow: none;
|
||||
$courseware-footer-margin: 0px;
|
||||
$courseware-footer-margin: 0;
|
||||
$courseware-border-bottom-color: #44a2de;
|
||||
$courseware-button-border-color: #e6e6e6;
|
||||
$courseware-hover-color: #333435;
|
||||
@@ -278,7 +279,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%);
|
||||
// ACTIONS: general
|
||||
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
|
||||
$button-bg-color: transparent;
|
||||
$button-bg-hover-color: #fff;
|
||||
$button-bg-hover-color: $white;
|
||||
|
||||
// ACTIONS: primary
|
||||
$action-primary-bg: $m-blue-d3;
|
||||
@@ -383,7 +384,7 @@ $button-archive-color: #eee;
|
||||
|
||||
// MISC: shadow, form, modal
|
||||
$shadow-color: $blue;
|
||||
$form-bg-color: #fff;
|
||||
$form-bg-color: $white;
|
||||
$modal-bg-color: rgb(245,245,245);
|
||||
|
||||
// MISC: sidebar
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,66 +1,64 @@
|
||||
.open-ended-problems,
|
||||
.combined-notifications
|
||||
{
|
||||
padding: 40px;
|
||||
.problem-list
|
||||
{
|
||||
.combined-notifications {
|
||||
padding: ($baseline*2);
|
||||
|
||||
.problem-list {
|
||||
table-layout: auto;
|
||||
margin-top: 10px;
|
||||
width:70%;
|
||||
td, th
|
||||
{
|
||||
margin-top: ($baseline/2);
|
||||
width: 70%;
|
||||
|
||||
td, th {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
.notification-container
|
||||
{
|
||||
margin: 30px 0px;
|
||||
|
||||
.notification-container {
|
||||
margin: ($baseline*1.5) 0;
|
||||
}
|
||||
|
||||
.notification
|
||||
{
|
||||
margin: 10px;
|
||||
.notification {
|
||||
@include clearfix();
|
||||
margin: ($baseline/2);
|
||||
width: 30%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
.notification-link
|
||||
{
|
||||
|
||||
.notification-link {
|
||||
display:block;
|
||||
height: 9em;
|
||||
padding: 10px;
|
||||
padding: ($baseline/2);
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
p
|
||||
{
|
||||
font-size: .9em;
|
||||
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.notification-title
|
||||
{
|
||||
|
||||
.notification-title {
|
||||
text-transform: uppercase;
|
||||
background: $blue;
|
||||
color: white;
|
||||
padding: 5px 0px;
|
||||
padding: ($baseline/4) 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.notification-link:hover,
|
||||
.notification-link:focus
|
||||
{
|
||||
.notification-link:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
.notification-description
|
||||
{
|
||||
|
||||
.notification-description {
|
||||
padding-top:5%;
|
||||
}
|
||||
.alert-message
|
||||
{
|
||||
img
|
||||
{
|
||||
|
||||
.alert-message {
|
||||
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.profile-wrapper {
|
||||
color: #000;
|
||||
color: $black;
|
||||
|
||||
.user-info {
|
||||
@extend .sidebar;
|
||||
@@ -15,7 +15,7 @@
|
||||
header {
|
||||
@extend .bottom-border;
|
||||
margin: 0;
|
||||
padding: lh(.5);
|
||||
padding: lh(0.5);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
@@ -24,16 +24,14 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@extend %ui-no-list;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
box-shadow: 0 1px 0 #eee;
|
||||
color: lighten($text-color, 10%);
|
||||
display: block;
|
||||
padding: lh(.5) 0 lh(.5) lh(.5);
|
||||
padding: lh(0.5) 0 lh(0.5) lh(0.5);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
@include transition(none);
|
||||
@@ -50,7 +48,7 @@
|
||||
|
||||
&[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
margin: lh(.5) 0;
|
||||
margin: lh(0.5) 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -75,7 +73,7 @@
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: lh(.5);
|
||||
right: lh(0.5);
|
||||
text-transform: uppercase;
|
||||
top: 9px;
|
||||
|
||||
@@ -106,7 +104,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: lh(.5);
|
||||
right: lh(0.5);
|
||||
text-transform: uppercase;
|
||||
top: 9px;
|
||||
|
||||
@@ -149,7 +147,7 @@
|
||||
}
|
||||
|
||||
#course-success {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
text-align: center;
|
||||
> a {
|
||||
@include button(simple, $button-color);
|
||||
@@ -231,7 +229,7 @@
|
||||
}
|
||||
|
||||
.scores {
|
||||
margin: lh(.5) 0;
|
||||
margin: lh(0.5) 0;
|
||||
|
||||
h3 {
|
||||
font-size: em(14);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
div.staff-grading,
|
||||
div.peer-grading{
|
||||
div.peer-grading {
|
||||
border: 1px solid lightgray;
|
||||
|
||||
textarea.feedback-area {
|
||||
@@ -9,16 +9,17 @@ div.peer-grading{
|
||||
|
||||
div.feedback-area.track-changes {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
padding: 5px;
|
||||
padding: ($baseline/4);
|
||||
resize: vertical;
|
||||
width: 99%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.feedback-area.track-changes, p.ice-legend {
|
||||
|
||||
.ice-controls {
|
||||
float: right;
|
||||
}
|
||||
@@ -47,12 +48,12 @@ div.peer-grading{
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0 $baseline/2;
|
||||
margin: 0 0 0 ($baseline/2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
a {
|
||||
text-size: .5em;
|
||||
text-size: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,18 +61,18 @@ div.peer-grading{
|
||||
margin: 0;
|
||||
|
||||
&.submission-container{
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
background: #f6f6f6;
|
||||
background: $gray-l6;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
min-width: 50px;
|
||||
text-size: 1.5em;
|
||||
}
|
||||
@@ -93,11 +94,11 @@ div.peer-grading{
|
||||
text-align: center;
|
||||
|
||||
th {
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
td.problem-name {
|
||||
@@ -115,29 +116,29 @@ div.peer-grading{
|
||||
.rubric-wrapper,
|
||||
.calibration-feedback-wrapper,
|
||||
.grading-container {
|
||||
padding: $baseline/2 0;
|
||||
padding: ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
margin-left: 0;
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
background-color: #ffcccc;
|
||||
}
|
||||
|
||||
.submission-wrapper {
|
||||
padding: 2px;
|
||||
padding-bottom: 15px;
|
||||
padding: ($baseline/10);
|
||||
padding-bottom: ($baseline*0.75);
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: ($baseline/10);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 2px;
|
||||
margin-left: ($baseline/10);
|
||||
}
|
||||
}
|
||||
.meta-info-wrapper {
|
||||
padding:2px;
|
||||
padding: ($baseline/10);
|
||||
background-color: #eee;
|
||||
|
||||
div {
|
||||
@@ -147,24 +148,24 @@ div.peer-grading{
|
||||
.message-container,
|
||||
.grading-message {
|
||||
margin-left: 0;
|
||||
padding: 2px;
|
||||
padding: ($baseline/10);
|
||||
background-color: $yellow;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
margin: $baseline/2 $baseline/4;
|
||||
margin: ($baseline/2) ($baseline/4);
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.instructions-panel {
|
||||
@include clearfix;
|
||||
padding: $baseline/2;
|
||||
@include clearfix();
|
||||
padding: ($baseline/2);
|
||||
background-color: #eee;
|
||||
font-size: .8em;
|
||||
|
||||
> div {
|
||||
margin-bottom: 5px;
|
||||
padding: $baseline/2;
|
||||
margin-bottom: ($baseline/4);
|
||||
padding: ($baseline/2);
|
||||
width: 49%;
|
||||
background: #eee;
|
||||
|
||||
@@ -190,7 +191,7 @@ div.peer-grading{
|
||||
border-radius: 3px;
|
||||
}
|
||||
.current-state {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -199,8 +200,8 @@ div.peer-grading{
|
||||
margin-left: 0;
|
||||
|
||||
header {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
margin-top: ($baseline/10);
|
||||
margin-bottom: ($baseline/10);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
@@ -215,7 +216,7 @@ div.peer-grading{
|
||||
}
|
||||
|
||||
div.peer-grading {
|
||||
border-radius: $baseline/2;
|
||||
border-radius: ($baseline/2);
|
||||
padding: 0;
|
||||
|
||||
.peer-grading-tools {
|
||||
@@ -224,8 +225,8 @@ div.peer-grading {
|
||||
|
||||
.error-container {
|
||||
margin: $baseline;
|
||||
border-radius: $baseline/4;
|
||||
padding: $baseline/2;
|
||||
border-radius: ($baseline/4);
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
|
||||
.interstitial-page, .calibration -feedback, .calibration-interstitial-page {
|
||||
|
||||
@@ -16,7 +16,7 @@ div.syllabus {
|
||||
table-layout: auto;
|
||||
text-align: left;
|
||||
|
||||
margin: 10px 0;
|
||||
margin: ($baseline/2) 0;
|
||||
|
||||
thead {
|
||||
font-weight: bold;
|
||||
@@ -52,7 +52,7 @@ div.syllabus {
|
||||
padding: 0px !important;
|
||||
|
||||
hr {
|
||||
margin: 10px;
|
||||
margin: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@ div.book-wrapper {
|
||||
@extend .sidebar;
|
||||
@extend .tran;
|
||||
@include box-sizing(border-box);
|
||||
padding: 10px 0;
|
||||
padding: ($baseline/2) 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $gray-l3;
|
||||
border-right: none;
|
||||
width: 180px;
|
||||
|
||||
@@ -56,7 +56,7 @@ div.book-wrapper {
|
||||
padding-left: ($baseline/2);
|
||||
|
||||
a {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
padding: 0;
|
||||
color: $link-color;
|
||||
cursor: pointer;
|
||||
@@ -89,13 +89,13 @@ div.book-wrapper {
|
||||
padding-top: lh(.25);
|
||||
|
||||
li {
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
padding: 5px 6px;
|
||||
padding: ($baseline/4) 6px;
|
||||
margin: ($baseline/4) ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -174,7 +174,7 @@ div.book-wrapper {
|
||||
|
||||
section.page {
|
||||
border-left: 1px solid $border-color;
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-radius: 0 3px 3px 0;
|
||||
@@ -190,10 +190,10 @@ div.book-wrapper {
|
||||
div {
|
||||
text-align: left;
|
||||
line-height: 1.6em;
|
||||
margin: 5px;
|
||||
margin: ($baseline/4);
|
||||
|
||||
.Paragraph, h2 {
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,16 +60,16 @@ input[type="password"] {
|
||||
background: $white;
|
||||
border: 1px solid $border-color-2;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1);
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1;
|
||||
@include box-sizing(border-box);
|
||||
font: normal 1em $sans-serif;
|
||||
height: 35px;
|
||||
padding: 5px 12px;
|
||||
padding: ($baseline/4) 12px;
|
||||
vertical-align: top;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -111,7 +111,7 @@ img {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
@include transition(opacity .1s linear 0s);
|
||||
@@ -148,17 +148,17 @@ img {
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
opacity: 0;
|
||||
-webkit-transition: all .2s;
|
||||
|
||||
p, span {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
@@ -184,7 +184,7 @@ img {
|
||||
|
||||
.action-btn {
|
||||
@include dark-grey-button;
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,7 +87,7 @@ h1.top-header {
|
||||
h3 {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #000;
|
||||
color: $black;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
@@ -101,11 +101,11 @@ h1.top-header {
|
||||
|
||||
&.active {
|
||||
// @extend .bottom-border;
|
||||
color: #000;
|
||||
color: $black;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -127,11 +127,11 @@ h1.top-header {
|
||||
line-height: lh();
|
||||
font-size: 1em;
|
||||
@include box-sizing(border-box);
|
||||
padding: lh(.25) lh(.5) lh(.25) 0;
|
||||
padding: lh(.25) lh(0.5) lh(.25) 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #666;
|
||||
background: #f6f6f6;
|
||||
background: $gray-l6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #444;
|
||||
@include linear-gradient(top, #eee, #ccc);
|
||||
@include linear-gradient(top, #eee, $gray-l3);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
@@ -48,7 +48,7 @@
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@ section.tool-wrapper {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.ui-tabs-selected {
|
||||
@@ -119,7 +119,7 @@ section.tool-wrapper {
|
||||
@extend .clearfix;
|
||||
border-bottom: 1px solid darken(#073642, 10%);
|
||||
box-shadow: 0 1px 0 lighten(#073642, 2%);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin-bottom: lh();
|
||||
margin-bottom: lh();
|
||||
padding: 0 0 lh();
|
||||
@@ -143,7 +143,7 @@ section.tool-wrapper {
|
||||
margin-bottom: 0;
|
||||
|
||||
input {
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -152,7 +152,7 @@ section.tool-wrapper {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
margin-right: 20px;
|
||||
margin-right: $baseline;
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -160,7 +160,7 @@ section.tool-wrapper {
|
||||
|
||||
label {
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
padding: 3px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -206,7 +206,7 @@ section.tool-wrapper {
|
||||
p {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin: 0 lh(.5) lh() 0;
|
||||
margin: 0 lh(0.5) lh() 0;
|
||||
color: #839496;
|
||||
text-shadow: 0 -1px 0 darken(#073642, 10%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@@ -62,7 +62,7 @@ div.course-wrapper {
|
||||
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: lh(.5);
|
||||
margin-bottom: lh(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@ div.course-wrapper {
|
||||
> div {
|
||||
@extend .clearfix;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
padding: 0 0 15px;
|
||||
|
||||
.collapsible {
|
||||
@@ -204,7 +204,7 @@ div.course-wrapper {
|
||||
display: none;
|
||||
@include clearfix();
|
||||
white-space: pre-wrap;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid $gray-l3;
|
||||
padding-top: lh();
|
||||
margin-top: lh();
|
||||
line-height: lh();
|
||||
@@ -224,7 +224,7 @@ div.course-wrapper {
|
||||
.ui-tabs-nav {
|
||||
background: none;
|
||||
border: 0;
|
||||
margin-bottom: lh(.5);
|
||||
margin-bottom: lh(0.5);
|
||||
}
|
||||
|
||||
.ui-tabs-panel {
|
||||
@@ -269,30 +269,30 @@ div.course-wrapper {
|
||||
}
|
||||
|
||||
.xmodule_VideoModule {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
|
||||
|
||||
}
|
||||
|
||||
textarea.short-form-response {
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: ($baseline/4);
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/4);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section.self-assessment {
|
||||
textarea.hint {
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: ($baseline/4);
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
div {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
.error {
|
||||
@@ -303,14 +303,14 @@ section.self-assessment {
|
||||
|
||||
section.foldit {
|
||||
table {
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
td {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: ($baseline/4);
|
||||
padding-right: ($baseline/4);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
&.ui-accordion-header {
|
||||
border-bottom: none;
|
||||
color: #000;
|
||||
color: $black;
|
||||
|
||||
a {
|
||||
border-radius: 0;
|
||||
@@ -87,11 +87,11 @@
|
||||
padding: 11px 14px;
|
||||
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
|
||||
background-color: $sidebar-chapter-bg;
|
||||
box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
|
||||
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
|
||||
@include transition(background-color .1s linear 0s);
|
||||
|
||||
&.is-open {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@@ -100,11 +100,11 @@
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 0 3px;
|
||||
box-shadow: 0 1px 0 #fff inset;
|
||||
box-shadow: 0 1px 0 $white inset;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #fff
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,13 +120,13 @@
|
||||
li {
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: ($baseline/5);
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding: 5px 36px 5px 10px;
|
||||
padding: ($baseline/4) 36px ($baseline/4) ($baseline/2);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: $shadow-l1;
|
||||
|
||||
> a p {
|
||||
color: #333;
|
||||
@@ -158,7 +158,7 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 14px 0 rgba(0,0,0, 0.1);
|
||||
box-shadow: inset 0 1px 14px 0 $shadow-l1;
|
||||
|
||||
&:after {
|
||||
opacity: 1.0;
|
||||
|
||||
@@ -63,13 +63,13 @@ body.cs188 {
|
||||
|
||||
.course-staff {
|
||||
.teacher {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: ($baseline*2);
|
||||
|
||||
h3 {
|
||||
color: $base-font-color;
|
||||
font-family: $sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@ body.cs188 {
|
||||
margin-top: 3px;
|
||||
list-style: disc;
|
||||
ul, ol {
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -121,7 +121,7 @@ body.cs188 {
|
||||
|
||||
.choicegroup {
|
||||
input[type=checkbox], input[type=radio] {
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
height: 500px;
|
||||
background-color: Gainsboro;
|
||||
border: 1px solid DarkGray;
|
||||
margin-top: -20px;
|
||||
margin-top: -($baseline);
|
||||
}
|
||||
|
||||
#wmd-preview {
|
||||
@@ -28,10 +28,10 @@
|
||||
|
||||
#wmd-button-row {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
margin-right: ($baseline/4);
|
||||
margin-bottom: 0px;
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
padding: 0px;
|
||||
height: 20px;
|
||||
}
|
||||
@@ -49,8 +49,8 @@
|
||||
.wmd-button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
margin-right: ($baseline/4);
|
||||
position: absolute;
|
||||
background-image: url(../images/wmd-buttons.png);
|
||||
background-repeat: no-repeat;
|
||||
@@ -62,8 +62,8 @@
|
||||
.wmd-button > a {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
margin-right: ($baseline/4);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
}
|
||||
|
||||
.submit-email-action {
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
line-height: 1.3;
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,12 +52,12 @@
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
padding-top: 10px;
|
||||
padding-top: ($baseline/2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-top: 15px;
|
||||
margin-top: ($baseline*0.75);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,13 +26,10 @@
|
||||
|
||||
// form fields
|
||||
.list-fields {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@extend %ui-no-list;
|
||||
|
||||
.field {
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -55,7 +52,7 @@
|
||||
.msg {
|
||||
border-radius: 1px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.copy {
|
||||
font-weight: 600;
|
||||
@@ -114,7 +111,7 @@
|
||||
|
||||
.item {
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
font-size: 15px;
|
||||
color: $link-color;
|
||||
text-decoration: underline;
|
||||
padding: 5px;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
|
||||
// system feedback - messages
|
||||
@@ -93,13 +93,12 @@
|
||||
}
|
||||
|
||||
.list-advice {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@extend %ui-no-list;
|
||||
margin: $baseline 0;
|
||||
|
||||
.item {
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -172,7 +171,7 @@ section.instructor-dashboard-content-2 {
|
||||
display: inline-block;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
margin-bottom: ($baseline*.75);
|
||||
margin-bottom: ($baseline*0.75);
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
@@ -597,7 +596,7 @@ section.instructor-dashboard-content-2 {
|
||||
|
||||
.action-edit-name {
|
||||
@include idashbutton($gray-l3);
|
||||
@include transition(opacity 0.25s ease-in-out);
|
||||
@include transition(opacity $tmg-f2 ease-in-out);
|
||||
@include font-size(14);
|
||||
@include line-height(14);
|
||||
margin-left: ($baseline/2);
|
||||
@@ -727,7 +726,7 @@ section.instructor-dashboard-content-2 {
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
.request-res-section {
|
||||
@@ -1012,7 +1011,7 @@ section.instructor-dashboard-content-2 {
|
||||
.report-downloads-table {
|
||||
.slickgrid {
|
||||
height: 300px;
|
||||
padding: 5px;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
// Disable horizontal scroll bar when grid only has 1 column. Remove this CSS class when more columns added.
|
||||
.slick-viewport {
|
||||
@@ -1090,15 +1089,15 @@ section.instructor-dashboard-content-2 {
|
||||
height: 475px;
|
||||
width: 85%;
|
||||
margin: 5%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #000;
|
||||
background-color: $white;
|
||||
border: 1px solid $black;
|
||||
border-radius: 25px;
|
||||
padding: 2.5%;
|
||||
|
||||
.metrics-overlay-title {
|
||||
display: block;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -1106,7 +1105,7 @@ section.instructor-dashboard-content-2 {
|
||||
width: 100%;
|
||||
height: 370px;
|
||||
overflow: auto;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
@@ -1121,7 +1120,7 @@ section.instructor-dashboard-content-2 {
|
||||
}
|
||||
|
||||
.overflow-message {
|
||||
padding-top: 20px;
|
||||
padding-top: $baseline;
|
||||
}
|
||||
|
||||
.download-csv {
|
||||
@@ -1262,22 +1261,33 @@ input[name="subject"] {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.error-msgs {
|
||||
background: #FFEEF5;color:#B72667;text-align: center;padding: 10px 0px;
|
||||
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;font-size: 15px;
|
||||
background: #FFEEF5;
|
||||
color:#B72667;
|
||||
text-align: center;
|
||||
padding: ($baseline/2) 0;
|
||||
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid #B72667;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.success-msgs {
|
||||
background: #D0F5D5;color:#008801;text-align: center;padding: 10px 0px;
|
||||
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;font-size: 15px;
|
||||
background: #D0F5D5;
|
||||
color:#008801;
|
||||
text-align: center;
|
||||
padding: ($baseline/2) 0;
|
||||
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid #008801;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
input[name="download_company_name"],
|
||||
input[name="active_company_name"], input[name="spent_company_name"] {
|
||||
margin-right: 8px;
|
||||
@@ -1288,17 +1298,17 @@ input[name="subject"] {
|
||||
.coupons-table {
|
||||
width: 100%;
|
||||
tr:nth-child(even){
|
||||
background-color: #f8f8f8;
|
||||
background-color: $gray-l6;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
tr.always-gray{
|
||||
background: #eee !important;
|
||||
border-top: 2px solid #FFFFFF;
|
||||
border-top: 2px solid $white;
|
||||
}
|
||||
tr.always-white{
|
||||
background: #fff !important;
|
||||
td{
|
||||
padding: 30px 0px 10px;
|
||||
padding: ($baseline*1.5) 0 ($baseline/2);
|
||||
}
|
||||
}
|
||||
.coupons-headings {
|
||||
@@ -1310,7 +1320,7 @@ input[name="subject"] {
|
||||
width: 120px;
|
||||
}
|
||||
th:first-child{
|
||||
padding-left: 20px;
|
||||
padding-left: $baseline;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
@@ -1355,7 +1365,7 @@ input[name="subject"] {
|
||||
// coupon items style
|
||||
.coupons-items {
|
||||
td {
|
||||
padding: 10px 0px;
|
||||
padding: ($baseline/2) 0;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
span.old-price{
|
||||
@@ -1368,7 +1378,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
td:nth-child(5),td:first-child{
|
||||
padding-left: 20px;
|
||||
padding-left: $baseline;
|
||||
}
|
||||
td:nth-child(2){
|
||||
line-height: 22px;
|
||||
@@ -1381,7 +1391,7 @@ input[name="subject"] {
|
||||
}
|
||||
td{
|
||||
a.edit-right{
|
||||
margin-left: 15px;
|
||||
margin-left: ($baseline*0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1393,12 +1403,12 @@ input[name="subject"] {
|
||||
// coupon edit and add modals
|
||||
#add-coupon-modal, #edit-coupon-modal, #set-course-mode-price-modal, #registration_code_generation_modal{
|
||||
.inner-wrapper {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
}
|
||||
span.tip-text {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-top: ($baseline/4);
|
||||
color: #646464
|
||||
}
|
||||
top:-95px !important;
|
||||
@@ -1436,7 +1446,7 @@ input[name="subject"] {
|
||||
float: left;
|
||||
label.required:after {
|
||||
content: "*";
|
||||
margin-left: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
}
|
||||
li:nth-child(even){
|
||||
@@ -1462,7 +1472,7 @@ input[name="subject"] {
|
||||
float: left;
|
||||
label.required:after {
|
||||
content: "*";
|
||||
margin-left: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
min-height: 120px;
|
||||
}
|
||||
@@ -1476,7 +1486,7 @@ input[name="subject"] {
|
||||
li#generate-registration-modal-field-country {
|
||||
width: 204px;
|
||||
margin-left: 15px !important;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
li:nth-child(even){
|
||||
margin-left: 0px !important;
|
||||
@@ -1515,7 +1525,7 @@ input[name="subject"] {
|
||||
width: 100%;
|
||||
label.required:after {
|
||||
content: "*";
|
||||
margin-left: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
}
|
||||
li#set-course-mode-modal-field-currency{
|
||||
@@ -1525,7 +1535,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
#registration-content form .field.text input {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
margin-bottom: 0;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
@@ -1543,7 +1553,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
.instructions p {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
form {
|
||||
border-radius: 0;
|
||||
@@ -1554,7 +1564,7 @@ input[name="subject"] {
|
||||
.group-form {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: $baseline;
|
||||
}
|
||||
.list-input {
|
||||
margin: 0;
|
||||
@@ -1579,7 +1589,7 @@ input[name="subject"] {
|
||||
color: #333;
|
||||
}
|
||||
.field.text input {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.field input {
|
||||
|
||||
@@ -2,7 +2,7 @@ div.calc-main {
|
||||
bottom: -126px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
@include transition(bottom 0.75s linear 0s);
|
||||
@include transition(bottom $tmg-avg linear 0s);
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
@@ -16,11 +16,11 @@ div.calc-main {
|
||||
background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center;
|
||||
border-bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
float: right;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
@@ -61,11 +61,11 @@ div.calc-main {
|
||||
|
||||
input#calculator_button {
|
||||
background: #111;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid $black;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
@include box-sizing(border-box);
|
||||
color: #fff;
|
||||
color: $white;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
@@ -86,7 +86,7 @@ div.calc-main {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
@include box-sizing(border-box);
|
||||
color: #fff;
|
||||
color: $white;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
@@ -136,7 +136,7 @@ div.calc-main {
|
||||
|
||||
.help {
|
||||
@include transition(none);
|
||||
background: #fff;
|
||||
background: $white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 3px #999;
|
||||
color: #333;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
nav.course-material {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
border-bottom: none;
|
||||
margin: 0px auto 0px;
|
||||
@@ -14,7 +14,7 @@ nav.course-material {
|
||||
|
||||
ol.course-tabs {
|
||||
@include border-top-radius(4px);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
padding: 28px 0 10px 0;
|
||||
@include margin-left(10px);
|
||||
|
||||
@@ -51,11 +51,11 @@ nav.course-material {
|
||||
}
|
||||
|
||||
&.active {
|
||||
// background: rgba(0, 0, 0, .2);
|
||||
// background: $shadow;
|
||||
@include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25));
|
||||
background-color: transparent;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
|
||||
}
|
||||
}
|
||||
@@ -64,7 +64,7 @@ nav.course-material {
|
||||
}
|
||||
|
||||
.course-content {
|
||||
margin-top: 30px;
|
||||
margin-top: ($baseline*1.5);
|
||||
|
||||
.courseware {
|
||||
min-height: 300px;
|
||||
@@ -72,7 +72,7 @@ nav.course-material {
|
||||
}
|
||||
|
||||
header.global.slim {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
|
||||
box-shadow: 0 1px 2px $shadow-l1;
|
||||
height: auto;
|
||||
padding: 5px 0 10px 0;
|
||||
border-bottom: 1px solid $outer-border-color;
|
||||
@@ -93,7 +93,7 @@ header.global.slim {
|
||||
border-radius: 3px;
|
||||
@include box-sizing(border-box);
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
|
||||
color: #fff;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-family: $sans-serif;
|
||||
font-size: 14px;
|
||||
@@ -115,7 +115,7 @@ header.global.slim {
|
||||
}
|
||||
|
||||
nav {
|
||||
padding-top: 5px;
|
||||
padding-top: ($baseline/4);
|
||||
}
|
||||
|
||||
h1.logo {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
nav.course-material {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
background: none;
|
||||
margin: 0px auto 0px;
|
||||
@@ -14,7 +14,7 @@ nav.course-material {
|
||||
|
||||
ol.course-tabs {
|
||||
@include border-top-radius(4px);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
li {
|
||||
@@ -44,7 +44,7 @@ nav.course-material {
|
||||
}
|
||||
|
||||
.course-content {
|
||||
margin-top: 30px;
|
||||
margin-top: ($baseline*1.5);
|
||||
|
||||
.courseware {
|
||||
min-height: 300px;
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
div.timer-main {
|
||||
@extend %ui-depth2;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border-top: 2px solid #000;
|
||||
border-top: 2px solid $black;
|
||||
|
||||
div#timer_wrapper {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 10px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
background: $black;
|
||||
color: $white;
|
||||
padding: ($baseline/2) $baseline;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.timer_return_url {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid tint(#000, 20%);
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: ($baseline/4);
|
||||
border-bottom: 1px solid tint($black, 20%);
|
||||
padding-bottom: ($baseline/4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -89,7 +89,7 @@ section.wiki-body {
|
||||
b, strong { font-weight: bolder }
|
||||
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
padding: ($baseline/2) $baseline;
|
||||
background: #e3e3e3;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
@@ -17,12 +17,12 @@ form#wiki_revision {
|
||||
@extend textarea;
|
||||
@include box-sizing(border-box);
|
||||
font-family: monospace;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@include box-sizing(border-box);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
min-height: 450px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -43,7 +43,7 @@ form#wiki_revision {
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
margin-top: 20px;
|
||||
margin-top: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ div#wiki_panel {
|
||||
ul {
|
||||
li {
|
||||
&.search {
|
||||
padding: 10px lh() 10px 0;
|
||||
padding: ($baseline/2) lh() ($baseline/2) 0;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
@@ -16,18 +16,18 @@ div#wiki_panel {
|
||||
|
||||
div#wiki_create_form {
|
||||
@extend .clearfix;
|
||||
padding: lh(.5) lh() lh(.5) 0;
|
||||
padding: lh(0.5) lh() lh(0.5) 0;
|
||||
|
||||
label {
|
||||
font-family: $sans-serif;
|
||||
margin-bottom: lh(.5);
|
||||
margin-bottom: lh(0.5);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: lh(.5);
|
||||
margin-bottom: lh(0.5);
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -40,7 +40,7 @@ div#wiki_panel {
|
||||
|
||||
&#cancel {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -51,6 +51,6 @@ div#wiki_panel {
|
||||
}
|
||||
|
||||
input#wiki_search_input {
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ table.wiki-history {
|
||||
height: 40px;
|
||||
|
||||
th {
|
||||
padding-top: 10px;
|
||||
padding-top: ($baseline/2);
|
||||
padding-left: 15px;
|
||||
|
||||
&#revision {
|
||||
@@ -40,7 +40,7 @@ table.wiki-history {
|
||||
}
|
||||
|
||||
div.history-controls {
|
||||
margin-top: 20px;
|
||||
margin-top: $baseline;
|
||||
|
||||
input[type="submit"] {
|
||||
@extend .light-button;
|
||||
|
||||
@@ -10,12 +10,12 @@ section.wiki {
|
||||
}
|
||||
|
||||
.wiki-wrapper {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
> header {
|
||||
height: 33px;
|
||||
padding: 24px 0 26px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
@@ -32,11 +32,11 @@ section.wiki {
|
||||
.breadcrumb {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0 0 0 40px;
|
||||
margin: 0 0 0 ($baseline*2);
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
font-size: 0.9em;
|
||||
|
||||
a {
|
||||
@@ -54,7 +54,7 @@ section.wiki {
|
||||
&:after {
|
||||
content: '›';
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
margin-left: ($baseline/2);
|
||||
color: $base-font-color;
|
||||
height: 30px;
|
||||
line-height: 31px;
|
||||
@@ -77,7 +77,7 @@ section.wiki {
|
||||
.global-functions {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-right: 20px;
|
||||
margin-right: $baseline;
|
||||
}
|
||||
|
||||
.add-article-btn {
|
||||
@@ -99,7 +99,7 @@ section.wiki {
|
||||
width: 180px;
|
||||
height: 27px;
|
||||
padding: 0 15px 0 35px;
|
||||
background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
|
||||
background: url(../images/search-icon.png) no-repeat 9px center $gray-l6;
|
||||
border: 1px solid #c8c8c8;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
|
||||
@@ -155,8 +155,8 @@ section.wiki {
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: ($baseline*2);
|
||||
margin-bottom: $baseline;
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
@@ -190,14 +190,14 @@ section.wiki {
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
background: #f8f8f8;
|
||||
background: $gray-l6;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
font-family: Monaco, monospace;
|
||||
@@ -206,7 +206,7 @@ section.wiki {
|
||||
.toc {
|
||||
background-color: $sidebar-color;
|
||||
padding: 9px;
|
||||
margin: 10px 0;
|
||||
margin: ($baseline/2) 0;
|
||||
border-radius: 5px;
|
||||
|
||||
ul {
|
||||
@@ -231,7 +231,7 @@ section.wiki {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.timestamp{
|
||||
margin-top: 15px;
|
||||
margin-top: ($baseline*0.75);
|
||||
padding: 15px 0 0 10px;
|
||||
border-top: 1px solid $light-gray;
|
||||
|
||||
@@ -250,7 +250,7 @@ section.wiki {
|
||||
.see-children {
|
||||
padding: 15px 0 0;
|
||||
border-top: 1px solid $light-gray;
|
||||
margin-top: 15px;
|
||||
margin-top: ($baseline*0.75);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@@ -260,7 +260,7 @@ section.wiki {
|
||||
line-height: 25px;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #f6f6f6;
|
||||
background-color: $gray-l6;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -351,7 +351,7 @@ section.wiki {
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #f6f6f6;
|
||||
background-color: $gray-l6;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -419,15 +419,15 @@ section.wiki {
|
||||
position: relative;
|
||||
|
||||
canvas {
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 6px $shadow;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@extend %ui-depth4;
|
||||
content: 'click to edit schematic';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 7px;
|
||||
z-index: 9999;
|
||||
font-family: $sans-serif;
|
||||
font-size: 0.75em;
|
||||
color: #aaa;
|
||||
@@ -440,14 +440,14 @@ section.wiki {
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
#hint_id_summary {
|
||||
display: inline-block;
|
||||
font-size: 0.9em;
|
||||
line-height: 32px;
|
||||
margin-left: 15px;
|
||||
margin-left: ($baseline*0.75);
|
||||
}
|
||||
|
||||
.asteriskField {
|
||||
@@ -461,7 +461,7 @@ section.wiki {
|
||||
.btn {
|
||||
@include button(simple, #eee);
|
||||
font-size: 0.8em;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
line-height: 1.2em;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0 !important;
|
||||
@@ -482,7 +482,7 @@ section.wiki {
|
||||
}
|
||||
|
||||
&.btn-info {
|
||||
@include button(simple, #ccc);
|
||||
@include button(simple, $gray-l3);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
@@ -492,8 +492,8 @@ section.wiki {
|
||||
}
|
||||
|
||||
.modal {
|
||||
@extend %ui-depth4;
|
||||
width: 960px;
|
||||
z-index: 9999;
|
||||
min-height: 500px;
|
||||
margin-left: -480px;
|
||||
top: 150px;
|
||||
@@ -505,7 +505,7 @@ section.wiki {
|
||||
margin-left: -200px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -572,12 +572,12 @@ section.wiki {
|
||||
}
|
||||
|
||||
.modal-footer .btn {
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-inner-wrapper {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -594,7 +594,7 @@ section.wiki {
|
||||
width: 972px;
|
||||
|
||||
.left-column {
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
|
||||
.left-column,
|
||||
@@ -605,11 +605,11 @@ section.wiki {
|
||||
}
|
||||
|
||||
#cheatsheet-body {
|
||||
background: #fff;
|
||||
background: $white;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
@@ -623,11 +623,11 @@ section.wiki {
|
||||
}
|
||||
|
||||
#cheatsheet-body section + section {
|
||||
margin-top: 40px;
|
||||
margin-top: ($baseline*2);
|
||||
}
|
||||
|
||||
#cheatsheet-body pre{
|
||||
color: #000;
|
||||
color: $black;
|
||||
text-align: left;
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
@@ -642,7 +642,7 @@ section.wiki {
|
||||
|
||||
&.history {
|
||||
.accordion {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
padding: 15px;
|
||||
border: 1px solid $light-gray;
|
||||
background: #f9f9f9;
|
||||
@@ -704,8 +704,8 @@ section.wiki {
|
||||
|
||||
#settings_form {
|
||||
.well {
|
||||
margin-bottom: 15px;
|
||||
@include clearfix;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.control-group {
|
||||
@@ -715,7 +715,7 @@ section.wiki {
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 15px;
|
||||
margin-left: ($baseline*0.75);
|
||||
}
|
||||
|
||||
.controls {
|
||||
@@ -759,7 +759,7 @@ section.wiki {
|
||||
color: $pink;
|
||||
|
||||
.help-block {
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -788,7 +788,7 @@ section.wiki {
|
||||
border-radius: 5px;
|
||||
|
||||
.well-small {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
@@ -802,8 +802,8 @@ section.wiki {
|
||||
}
|
||||
|
||||
.filter-clear {
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
margin-top: ($baseline/2);
|
||||
font-size: .9em;
|
||||
|
||||
a {
|
||||
@@ -817,7 +817,7 @@ section.wiki {
|
||||
|
||||
.table.table-striped {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-top: $baseline;
|
||||
|
||||
th, td {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
@@ -830,7 +830,7 @@ section.wiki {
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #F6F6F6;
|
||||
background: $gray-l6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -855,7 +855,7 @@ section.wiki {
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
border: 1px solid #DDD;
|
||||
background: #F9F9F9;
|
||||
border-radius: 5px;
|
||||
@@ -978,7 +978,7 @@ section.wiki {
|
||||
border: 1px solid darken($pink, 15%);
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@@ -986,7 +986,7 @@ section.wiki {
|
||||
margin: lh() (-(lh())) (-(lh()));
|
||||
padding: lh();
|
||||
border-top: 1px solid darken($pink, 15%);
|
||||
color: #fff;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
font-size: em(18);
|
||||
@include transition(none);
|
||||
@@ -1002,10 +1002,10 @@ section.wiki {
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
@extend %ui-depth3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
@@ -1026,14 +1026,14 @@ section.wiki {
|
||||
|
||||
|
||||
#circuit_editor_modal.modal {
|
||||
@extend %ui-depth4;
|
||||
width: 648px;
|
||||
z-index: 9999;
|
||||
margin-left: -325px;
|
||||
top: 150px;
|
||||
|
||||
.modal-header {
|
||||
h1, p {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -1059,7 +1059,7 @@ section.wiki {
|
||||
.modal-footer .btn {
|
||||
@include button(simple, #eee);
|
||||
font-size: 0.8em;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
line-height: 1.2em;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0 !important;
|
||||
@@ -1074,6 +1074,6 @@ section.wiki {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ body.discussion {
|
||||
}
|
||||
|
||||
.edit-post-form {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin-bottom: ($baseline*2);
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
@@ -36,7 +36,7 @@ body.discussion {
|
||||
.post-cancel {
|
||||
@include white-button;
|
||||
float: left;
|
||||
margin: ($baseline/2) 0 0 ($baseline*.75);
|
||||
margin: ($baseline/2) 0 0 ($baseline*0.75);
|
||||
}
|
||||
|
||||
.post-update {
|
||||
@@ -226,7 +226,7 @@ body.discussion {
|
||||
}
|
||||
|
||||
.container .discussion-body {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
@@ -237,7 +237,7 @@ body.discussion {
|
||||
padding: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #ccc;
|
||||
color: $gray-l3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -258,7 +258,7 @@ body.discussion {
|
||||
padding: 40px 40px 10px;
|
||||
|
||||
section {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -278,7 +278,7 @@ body.discussion {
|
||||
.home-title {
|
||||
font-size: 18px;
|
||||
color: $black;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
.home-description {
|
||||
font-size: 12px;
|
||||
@@ -621,7 +621,7 @@ body.discussion {
|
||||
|
||||
.discussion-reply-new {
|
||||
padding: $baseline ($baseline*1.5);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
@include transition(opacity .2s linear 0s);
|
||||
|
||||
h4 {
|
||||
@@ -785,18 +785,18 @@ body.discussion {
|
||||
}
|
||||
|
||||
.discussion-post {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
.inline-comment-count {
|
||||
@extend %ui-depth2;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
float: right;
|
||||
display: block;
|
||||
height: 27px;
|
||||
margin-top: 6px;
|
||||
margin-right: 8px;
|
||||
padding: 0 8px;
|
||||
border-radius: 5px;
|
||||
border-radius: ($baseline/4);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
@@ -805,7 +805,7 @@ body.discussion {
|
||||
|
||||
header {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: ($baseline*.75);
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
.posted-details {
|
||||
margin-top: ($baseline/5);
|
||||
@@ -837,11 +837,11 @@ body.discussion {
|
||||
.responses {
|
||||
header {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
.posted-by {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -866,7 +866,7 @@ body.discussion {
|
||||
|
||||
.post-tools {
|
||||
box-shadow: 0 1px 1px $shadow inset;
|
||||
background: #f6f6f6;
|
||||
background: $gray-l6;
|
||||
|
||||
&:hover {
|
||||
background: #fcfcfc;
|
||||
@@ -932,7 +932,7 @@ body.discussion {
|
||||
}
|
||||
|
||||
section.pagination {
|
||||
margin-top: 30px;
|
||||
margin-top: ($baseline*1.5);
|
||||
|
||||
nav.discussion-paginator {
|
||||
float: right;
|
||||
@@ -949,7 +949,7 @@ body.discussion {
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
padding: 0 15px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $gray-l3;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
@@ -965,7 +965,7 @@ body.discussion {
|
||||
.edit-post-form {
|
||||
width: 100%;
|
||||
margin-bottom: $baseline;
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.form-row {
|
||||
@@ -1062,7 +1062,7 @@ body.discussion {
|
||||
// post metadata - cohorts
|
||||
.group-visibility-label {
|
||||
font-size: 12px;
|
||||
color:#000;
|
||||
color:$black;
|
||||
font-style: italic;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
display: block;
|
||||
border: 1px solid #2d81ad;
|
||||
border-radius: 3px;
|
||||
padding: 0 ($baseline*.75);
|
||||
padding: 0 ($baseline*0.75);
|
||||
height: 35px;
|
||||
color: $white;
|
||||
text-shadow: none;
|
||||
@@ -25,7 +25,7 @@
|
||||
display: block;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
padding: 0 ($baseline*.75);
|
||||
padding: 0 ($baseline*0.75);
|
||||
height: 35px;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
color: $dark-gray;
|
||||
@@ -42,7 +42,7 @@
|
||||
display: block;
|
||||
border: 1px solid #222;
|
||||
border-radius: 3px;
|
||||
padding: 0 ($baseline*.75);
|
||||
padding: 0 ($baseline*0.75);
|
||||
height: 35px;
|
||||
background: -webkit-linear-gradient(top, #777, #555);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
@mixin discussion-wmd-preview {
|
||||
padding: 10px 20px;
|
||||
padding: ($baseline/2) $baseline;
|
||||
width: 100%;
|
||||
color: #333;
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
margin: 5px 0 0 0;
|
||||
margin: ($baseline/4) 0 0 0;
|
||||
border: 1px solid $gray-l3;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
background: $white;
|
||||
@@ -99,7 +99,7 @@
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border-radius: ($baseline/4);
|
||||
color: $gray-l1;
|
||||
|
||||
.action-icon {
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('/static/images/wmd-buttons-transparent.png');
|
||||
background-position: 0px 0px;
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// UI: form structure
|
||||
.forum-new-post-form,
|
||||
.edit-post-form {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
@@ -71,7 +71,7 @@
|
||||
@include white-button;
|
||||
@extend %cont-truncated;
|
||||
z-index: 1000;
|
||||
padding: 0 $baseline 0 ($baseline*.75);
|
||||
padding: 0 $baseline 0 ($baseline*0.75);
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
@@ -101,7 +101,7 @@
|
||||
line-height: 36px;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,10 +208,10 @@
|
||||
|
||||
.topic-menu-wrapper {
|
||||
@include box-sizing(border-box);
|
||||
@extend %ui-depth4;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
border: 1px solid $gray-l3;
|
||||
width: 100%;
|
||||
background: $white;
|
||||
|
||||
@@ -69,7 +69,7 @@ body.discussion, .discussion-module {
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
.comment-form-input {
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
%btn {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
|
||||
@include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -3,6 +3,26 @@
|
||||
|
||||
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
|
||||
|
||||
// weights
|
||||
%t-ultrastrong {
|
||||
font-weight: 800;
|
||||
}
|
||||
%t-strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
%t-demi-strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
%t-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
%t-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
%t-ultralight {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
// headings/titles
|
||||
%t-title {
|
||||
font-family: $f-sans-serif;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview,
|
||||
.home .highlighted-courses > h2, .home .highlighted-courses > section.outside-app h1, section.outside-app .home .highlighted-courses > h1,
|
||||
header.global {
|
||||
background: #FFF;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// hide all actions
|
||||
@@ -135,7 +135,7 @@
|
||||
|
||||
// make overlay flat black since IE cant handle rgba
|
||||
#lean_overlay {
|
||||
background: #000;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
// active navigation
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
padding: 20px 30px 120px;
|
||||
|
||||
> nav {
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: ($baseline*4);
|
||||
text-align: center;
|
||||
width: flex-grid(12);
|
||||
|
||||
@@ -34,12 +34,12 @@
|
||||
|
||||
.vision {
|
||||
h1 + hr {
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: ($baseline*4);
|
||||
}
|
||||
|
||||
.our-mission {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin: 0 auto 100px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
float: right;
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
padding: 5px 0px 5px 20px;
|
||||
text-transform: none;
|
||||
width: flex-grid(9);
|
||||
@@ -73,15 +73,15 @@
|
||||
|
||||
.message {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
@include clearfix;
|
||||
margin-bottom: 80px;
|
||||
@include clearfix();
|
||||
margin-bottom: ($baseline*4);
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
|
||||
hr {
|
||||
bottom: 0px;
|
||||
display: none;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -109,7 +109,7 @@
|
||||
> article {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
padding-left: $baseline;
|
||||
width: flex-grid(9);
|
||||
}
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
}
|
||||
|
||||
.partners {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
> article {
|
||||
float: left;
|
||||
@@ -148,7 +148,7 @@
|
||||
|
||||
|
||||
.faq {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
nav.categories {
|
||||
border: 1px solid rgb(220,220,220);
|
||||
@@ -185,18 +185,18 @@
|
||||
|
||||
> h2 {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: ($baseline*2);
|
||||
padding-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.response {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: ($baseline*2);
|
||||
|
||||
h3 {
|
||||
font-family: $sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -205,13 +205,13 @@
|
||||
.press {
|
||||
.press-story {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
@include clearfix;
|
||||
margin-bottom: 40px;
|
||||
@include clearfix();
|
||||
margin-bottom: ($baseline*2);
|
||||
padding-bottom: 40px;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
@@ -237,17 +237,17 @@
|
||||
width: flex-grid(10);
|
||||
|
||||
header {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
|
||||
h3 {
|
||||
font-family: $sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
span.post-date {
|
||||
color: $lighter-base-font-color;
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -255,7 +255,7 @@
|
||||
}
|
||||
|
||||
.contact {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin: 0 auto;
|
||||
|
||||
.photo {
|
||||
@@ -279,11 +279,11 @@
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
|
||||
.container, .introduction {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin: 0 auto;
|
||||
width: 960px;
|
||||
background: $container-bg;
|
||||
@@ -241,7 +241,7 @@
|
||||
|
||||
.cta-login-action {
|
||||
@extend %btn-secondary-grey-outline;
|
||||
padding: ($baseline/10) ($baseline*.75);
|
||||
padding: ($baseline/10) ($baseline*0.75);
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
}
|
||||
@@ -343,7 +343,7 @@
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
|
||||
&.long {
|
||||
width: 100%;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
background-size: cover;
|
||||
box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5);
|
||||
border-bottom: 1px solid $border-color-3;
|
||||
box-shadow: inset 0 1px 5px 0 rgba(0,0,0, 0.1);
|
||||
box-shadow: inset 0 1px 5px 0 $shadow-l1;
|
||||
height: 280px;
|
||||
margin-top: $header_image_margin;
|
||||
padding-top: 150px;
|
||||
@@ -22,7 +22,7 @@
|
||||
border: 1px solid $border-color-3;
|
||||
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
min-width: 760px;
|
||||
@@ -35,10 +35,10 @@
|
||||
}
|
||||
.intro {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 20px 20px;
|
||||
padding: $baseline;
|
||||
position: relative;
|
||||
width: flex-grid(8) + flex-gutter();
|
||||
z-index: 2;
|
||||
@@ -46,8 +46,8 @@
|
||||
> hgroup {
|
||||
border-bottom: 1px solid $border-color-2;
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
padding-bottom: $baseline;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
@@ -63,7 +63,7 @@
|
||||
color: $lighter-base-font-color;
|
||||
font: italic 800 0.6em/1em $sans-serif;
|
||||
letter-spacing: 0px;
|
||||
margin-left: 15px;
|
||||
margin-left: ($baseline*0.75);
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
||||
text-transform: none;
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.main-cta {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@@ -105,7 +105,7 @@
|
||||
display: block;
|
||||
font: normal 1.2rem/1.6rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 0px;
|
||||
padding: ($baseline/2) 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
width: flex-grid(6);
|
||||
@@ -129,7 +129,7 @@
|
||||
float: left;
|
||||
font: normal 1.2rem/1.6rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 0px;
|
||||
padding: ($baseline/2) 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
width: flex-grid(3, 8);
|
||||
@@ -161,7 +161,7 @@
|
||||
color: rgb(143, 14, 14);
|
||||
display: none;
|
||||
padding: 12px;
|
||||
margin-top: 5px;
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -184,7 +184,7 @@
|
||||
.play-intro {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4);
|
||||
box-shadow: 0 1px 12px 0 $shadow-d1;
|
||||
border: 2px solid rgba(255,255,255, 0.8);
|
||||
height: 80px;
|
||||
left: 50%;
|
||||
@@ -232,7 +232,7 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
.wrap-instructor-info {
|
||||
&.studio-view {
|
||||
@@ -261,7 +261,7 @@
|
||||
nav {
|
||||
border-bottom: 1px solid $border-color-2;
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin: 40px 0;
|
||||
width: flex-grid(12);
|
||||
|
||||
@@ -315,20 +315,20 @@
|
||||
|
||||
.inner-wrapper {
|
||||
> section {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: ($baseline*2);
|
||||
}
|
||||
|
||||
.course-staff {
|
||||
|
||||
.teacher {
|
||||
@include clearfix;
|
||||
margin-bottom: 40px;
|
||||
@include clearfix();
|
||||
margin-bottom: ($baseline*2);
|
||||
|
||||
h3 {
|
||||
color: $base-font-color;
|
||||
font-family: $sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@@ -363,19 +363,19 @@
|
||||
}
|
||||
|
||||
.faq {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
.responses {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.response {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: ($baseline*2);
|
||||
|
||||
h3 {
|
||||
font-family: $sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -405,7 +405,7 @@
|
||||
background: url('../images/opencourseware.png') 0 0 no-repeat;
|
||||
width: 266px;
|
||||
height: 31px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -446,7 +446,7 @@
|
||||
font-weight: 800;
|
||||
display: inline-block;
|
||||
letter-spacing: 0px;
|
||||
margin-right: 15px;
|
||||
margin-right: ($baseline*0.75);
|
||||
padding-right: 15px;
|
||||
|
||||
&:hover, &:focus {
|
||||
@@ -516,7 +516,7 @@
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -531,11 +531,11 @@
|
||||
|
||||
.important-dates {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
padding: 0 ($baseline/2);
|
||||
|
||||
.important-dates-item {
|
||||
@include clearfix;
|
||||
li {
|
||||
@include clearfix();
|
||||
border-bottom: 1px dotted $border-color-2;
|
||||
margin-bottom: $baseline;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.find-courses, .university-profile {
|
||||
background: $course-profile-bg;
|
||||
padding-bottom: 60px;
|
||||
padding-bottom: ($baseline*3);
|
||||
|
||||
header.search {
|
||||
background: $course-profile-bg;
|
||||
@@ -18,17 +18,17 @@
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
min-width: 760px;
|
||||
padding-top: 200px;
|
||||
padding-top: ($baseline*10);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: flex-grid(12);
|
||||
|
||||
> hgroup {
|
||||
background: #FFF;
|
||||
background: $white;
|
||||
background: $course-header-bg;
|
||||
border: 1px solid $border-color-3;
|
||||
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
|
||||
padding: 20px 30px;
|
||||
padding: $baseline ($baseline*1.5);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -75,7 +75,7 @@
|
||||
h1, h2 {
|
||||
display: inline-block;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.8);
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -85,9 +85,9 @@
|
||||
|
||||
section.message {
|
||||
border-top: 1px solid $border-color-2;
|
||||
@include clearfix;
|
||||
margin-top: 20px;
|
||||
padding-top: 60px;
|
||||
@include clearfix();
|
||||
margin-top: $baseline;
|
||||
padding-top: ($baseline*3);
|
||||
@include columns(2 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// ====================
|
||||
|
||||
.dashboard {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
padding: ($baseline*2) 0 0 0;
|
||||
|
||||
.profile-sidebar {
|
||||
@@ -22,8 +22,8 @@
|
||||
|
||||
h1.user-name {
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
padding: ($baseline*.75) ($baseline/2);
|
||||
margin: 0;
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
color: $base-font-color;
|
||||
text-transform: none;
|
||||
text-wrap: nowrap;
|
||||
@@ -33,12 +33,12 @@
|
||||
}
|
||||
|
||||
.user-info {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
|
||||
> ul {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
margin: 0px;
|
||||
@include clearfix();
|
||||
margin: 0;
|
||||
border: 1px solid $border-color-2;
|
||||
border-top: none;
|
||||
border-radius: 0 0 ($baseline/4) ($baseline/4);
|
||||
@@ -47,10 +47,10 @@
|
||||
background: $white;
|
||||
|
||||
li {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
border-bottom: 1px dotted $border-color-2;
|
||||
list-style: none;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
padding-bottom: 17px;
|
||||
|
||||
&:last-child {
|
||||
@@ -185,7 +185,7 @@
|
||||
}
|
||||
|
||||
.news-carousel {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
margin: 30px 10px 0;
|
||||
border: 1px solid $border-color-2;
|
||||
background: $dashboard-profile-color;
|
||||
@@ -196,7 +196,7 @@
|
||||
}
|
||||
|
||||
header {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@@ -228,7 +228,7 @@
|
||||
|
||||
h4 {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
margin-left: ($baseline*0.75);
|
||||
font-size: 15px;
|
||||
line-height: 48px;
|
||||
font-weight: 700;
|
||||
@@ -256,7 +256,7 @@
|
||||
|
||||
.news-image {
|
||||
height: 180px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -266,7 +266,7 @@
|
||||
|
||||
h5 {
|
||||
margin-bottom: 8px;
|
||||
margin-left: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
@@ -275,7 +275,7 @@
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-left: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
font-size: 13px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
@@ -287,12 +287,12 @@
|
||||
// course listings
|
||||
.my-courses {
|
||||
@include float(left);
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
width: flex-grid(9);
|
||||
|
||||
> header {
|
||||
border-bottom: 1px solid $border-color-2;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
}
|
||||
|
||||
.empty-dashboard-message {
|
||||
@@ -302,7 +302,7 @@
|
||||
p {
|
||||
color: $lighter-base-font-color;
|
||||
font-style: italic;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
||||
}
|
||||
|
||||
@@ -312,13 +312,13 @@
|
||||
background-color: $button-bg-color;
|
||||
border: 1px solid $border-color-2;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 8px 0 rgba(0,0,0, 0.1);
|
||||
box-shadow: 0 1px 8px 0 $shadow-l1;
|
||||
@include box-sizing(border-box);
|
||||
color: $base-font-color;
|
||||
font-family: $sans-serif;
|
||||
display: inline-block;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 5px;
|
||||
margin-left: ($baseline/4);
|
||||
padding: 5px 10px;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
||||
|
||||
@@ -368,7 +368,7 @@
|
||||
max-height: 100%;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
border-radius: ($baseline/10);
|
||||
border: 1px solid $dashboard-course-cover-border;
|
||||
border-bottom: 4px solid $dashboard-course-cover-border;
|
||||
@@ -381,7 +381,7 @@
|
||||
}
|
||||
|
||||
.info {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
@include padding(0, 10px, 0, 230px);
|
||||
|
||||
> hgroup {
|
||||
@@ -410,7 +410,7 @@
|
||||
|
||||
h3 a, h3 span {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: ($baseline/2);
|
||||
font-family: $sans-serif;
|
||||
font-size: 34px;
|
||||
line-height: 42px;
|
||||
@@ -428,7 +428,7 @@
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
|
||||
margin-top: 17px;
|
||||
margin-right: flex-gutter();
|
||||
padding: 5px;
|
||||
padding: ($baseline/4);
|
||||
width: flex-grid(8);
|
||||
float: left;
|
||||
@include box-sizing(border-box);
|
||||
@@ -442,7 +442,7 @@
|
||||
}
|
||||
|
||||
.course-status-completed {
|
||||
background: #ccc;
|
||||
background: $gray-l3;
|
||||
color: $very-light-text;
|
||||
|
||||
p {
|
||||
@@ -602,7 +602,7 @@
|
||||
|
||||
// UI: message
|
||||
.message {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
border-radius: 3px;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
@@ -610,7 +610,7 @@
|
||||
padding: ($baseline*0.5) $baseline;
|
||||
font-family: $sans-serif;
|
||||
background: tint($yellow,70%);
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $gray-l3;
|
||||
|
||||
// STATE: shown
|
||||
&.is-shown {
|
||||
@@ -630,7 +630,7 @@
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -660,7 +660,7 @@
|
||||
}
|
||||
|
||||
.message-title .value, .message-copy {
|
||||
@include transition(color 0.25s ease-in-out 0s);
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
}
|
||||
|
||||
// STATE: hover
|
||||
@@ -674,7 +674,7 @@
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
@include transition(opacity 0.25s ease-in-out 0);
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0);
|
||||
display: none;
|
||||
opacity: 0.0;
|
||||
}
|
||||
@@ -706,7 +706,7 @@
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all 0.25s ease-in-out 0s);
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include transform-origin(50% 50%);
|
||||
@include font-size(21);
|
||||
display: inline-block;
|
||||
@@ -774,7 +774,7 @@
|
||||
// TYPE: status
|
||||
.message-status {
|
||||
background: tint($yellow,70%);
|
||||
border-color: #ccc;
|
||||
border-color: $gray-l3;
|
||||
|
||||
.message-copy {
|
||||
@extend %t-copy-sub1;
|
||||
@@ -841,14 +841,14 @@
|
||||
&.exam-register {
|
||||
|
||||
.message-copy {
|
||||
margin-top: 5px;
|
||||
margin-top: ($baseline/4);
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
&.exam-schedule {
|
||||
.exam-button {
|
||||
margin-top: 5px;
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -864,7 +864,7 @@
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-top: ($baseline/2);
|
||||
padding: 9px 18px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
@@ -1127,7 +1127,7 @@
|
||||
p.course-block{
|
||||
border-style: solid;
|
||||
border-color: #E3DC86;
|
||||
padding: 5px;
|
||||
padding: ($baseline/4);
|
||||
border-width: 1px;
|
||||
background: #FDFBE4;
|
||||
|
||||
@@ -1173,7 +1173,7 @@
|
||||
}
|
||||
a.disable-look-settings{
|
||||
@extend a.disable-look-unregister;
|
||||
margin-right: 10px;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -7,13 +7,13 @@ $paleYellow: #fffcf1;
|
||||
|
||||
@mixin button {
|
||||
display: inline-block;
|
||||
padding: 4px 20px 6px;
|
||||
padding: 4px $baseline 6px;
|
||||
font-family: $sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 $transparent;
|
||||
@include transition(background-color .15s linear 0s, box-shadow .15s linear 0s);
|
||||
|
||||
&.disabled {
|
||||
@@ -40,11 +40,11 @@ $paleYellow: #fffcf1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: $blue;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #62aaf5;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@ $paleYellow: #fffcf1;
|
||||
border-top: 5px solid $blue;
|
||||
|
||||
header {
|
||||
@include clearfix;
|
||||
@include clearfix();
|
||||
background: $extraDarkGrey;
|
||||
border-bottom: 3px solid $blue;
|
||||
}
|
||||
@@ -85,23 +85,23 @@ $paleYellow: #fffcf1;
|
||||
margin: auto;
|
||||
|
||||
.content {
|
||||
padding: 40px 60px 36px;
|
||||
background: #fff;
|
||||
padding: ($baseline*2) 60px 36px;
|
||||
background: $white;
|
||||
border: 1px solid $darkGrey;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
|
||||
@include clearfix;
|
||||
box-shadow: 0 1px 2px $shadow-l1;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.log-in-form {
|
||||
float: left;
|
||||
width: 470px;
|
||||
margin-right: 50px;
|
||||
margin-right: ($baseline*2.5);
|
||||
padding-right: 49px;
|
||||
border-right: 1px solid $lightGrey;
|
||||
|
||||
.row {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -132,7 +132,7 @@ $paleYellow: #fffcf1;
|
||||
.forgot-button {
|
||||
font-size: 12px;
|
||||
line-height: 41px;
|
||||
margin-left: 10px;
|
||||
margin-left: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,12 +143,12 @@ $paleYellow: #fffcf1;
|
||||
.register-button {
|
||||
@include grey-button;
|
||||
padding: 10px 20px 12px;
|
||||
margin-top: 20px;
|
||||
margin-top: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
font-family: $sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
@@ -158,7 +158,7 @@ $paleYellow: #fffcf1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
font-family: $sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
@@ -210,7 +210,7 @@ $paleYellow: #fffcf1;
|
||||
|
||||
header {
|
||||
padding-top: 13px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
@@ -228,7 +228,7 @@ $paleYellow: #fffcf1;
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -236,7 +236,7 @@ $paleYellow: #fffcf1;
|
||||
input[type="submit"] {
|
||||
@include blue-button;
|
||||
display: block;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@@ -247,16 +247,16 @@ $paleYellow: #fffcf1;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.terms-of-service {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
.honor-code {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.login-extra {
|
||||
@@ -265,7 +265,7 @@ $paleYellow: #fffcf1;
|
||||
|
||||
.modal-form-error {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user