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;
|
||||
|
||||
Reference in New Issue
Block a user