Skip to content

E
edx-platform
Commit bd1a0d96 by Andy Armstrong
Options

More Sass quality fixes

parent 6387e3a8
Showing with 1785 additions and 1558 deletions
.stylelintignore
common/lib/xmodule/xmodule/css
common/static/sass/bourbon common/static/sass/bourbon
common/static/xmodule/modules/css
lms/static/sass/vendor lms/static/sass/vendor
common/lib/xmodule/xmodule/css/annotatable/display.scss
...@@ -22,16 +22,18 @@ $annotatable--body-font-size: em(14); ...@@ -22,16 +22,18 @@ $annotatable--body-font-size: em(14);
border-radius: 0.5em; border-radius: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
&.shaded { background-color: #EDEDED; } &.shaded { background-color: #ededed; }
.annotatable-section-title { .annotatable-section-title {
font-weight: bold; font-weight: bold;
a { font-weight: normal; } a { font-weight: normal; }
} }
.annotatable-section-body { .annotatable-section-body {
border-top: 1px solid $annotatable--border-color; border-top: 1px solid $annotatable--border-color;
margin-top: 0.5em; margin-top: 0.5em;
padding-top: 0.5em; padding-top: 0.5em;
@include clearfix(); @include clearfix();
} }
...@@ -40,6 +42,7 @@ $annotatable--body-font-size: em(14); ...@@ -40,6 +42,7 @@ $annotatable--body-font-size: em(14);
margin-left: 4em; margin-left: 4em;
b { font-weight: bold; } b { font-weight: bold; }
i { font-style: italic; } i { font-style: italic; }
code { code {
display: inline; display: inline;
white-space: pre; white-space: pre;
...@@ -58,9 +61,11 @@ $annotatable--body-font-size: em(14); ...@@ -58,9 +61,11 @@ $annotatable--body-font-size: em(14);
.annotatable-span { .annotatable-span {
@extend %ui-fake-link; @extend %ui-fake-link;
display: inline; display: inline;
$highlight_index: 0; $highlight_index: 0;
@each $highlight in ( @each $highlight in (
(yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)), (yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)),
(red rgba(178,19,16,0.3) rgba(178,19,16,0.9)), (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
...@@ -80,6 +85,7 @@ $annotatable--body-font-size: em(14); ...@@ -80,6 +85,7 @@ $annotatable--body-font-size: em(14);
&.selected { background-color: $selected_color; } &.selected { background-color: $selected_color; }
} }
} }
&.highlight-#{$marker} { &.highlight-#{$marker} {
background-color: $color; background-color: $color;
&.selected { background-color: $selected_color; } &.selected { background-color: $selected_color; }
...@@ -89,6 +95,7 @@ $annotatable--body-font-size: em(14); ...@@ -89,6 +95,7 @@ $annotatable--body-font-size: em(14);
&.hide { &.hide {
cursor: none; cursor: none;
background-color: inherit; background-color: inherit;
.annotatable-icon { .annotatable-icon {
display: none; display: none;
} }
...@@ -113,20 +120,24 @@ $annotatable--body-font-size: em(14); ...@@ -113,20 +120,24 @@ $annotatable--body-font-size: em(14);
background-color: transparent; background-color: transparent;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
border: none; border: none;
.ui-tooltip-title { .ui-tooltip-title {
padding: ($baseline/4) 0; padding: ($baseline/4) 0;
border-bottom: 2px solid #333; border-bottom: 2px solid #333;
font-weight: bold; font-weight: bold;
} }
.ui-tooltip-icon { .ui-tooltip-icon {
right: 10px; right: 10px;
background: #333; background: #333;
} }
.ui-state-hover { .ui-state-hover {
color: inherit; color: inherit;
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
} }
} }
.ui-tooltip-content { .ui-tooltip-content {
color: inherit; color: inherit;
font-size: em(14); font-size: em(14);
...@@ -136,16 +147,19 @@ $annotatable--body-font-size: em(14); ...@@ -136,16 +147,19 @@ $annotatable--body-font-size: em(14);
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
p { p {
color: inherit; color: inherit;
line-height: normal; line-height: normal;
} }
} }
.ui-tooltip.qtip.ui-tooltip-annotatable { .ui-tooltip.qtip.ui-tooltip-annotatable {
max-width: 375px; max-width: 375px;
.ui-tooltip-content { .ui-tooltip-content {
padding: 0 ($baseline/2); padding: 0 ($baseline/2);
.annotatable-comment { .annotatable-comment {
display: block; display: block;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
...@@ -153,6 +167,7 @@ $annotatable--body-font-size: em(14); ...@@ -153,6 +167,7 @@ $annotatable--body-font-size: em(14);
overflow: auto; overflow: auto;
line-height: normal; line-height: normal;
} }
.annotatable-reply { .annotatable-reply {
display: block; display: block;
border-top: 2px solid #333; border-top: 2px solid #333;
...@@ -161,6 +176,7 @@ $annotatable--body-font-size: em(14); ...@@ -161,6 +176,7 @@ $annotatable--body-font-size: em(14);
text-align: center; text-align: center;
} }
} }
&:after { &:after {
content: ''; content: '';
display: inline-block; display: inline-block;
......
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -46,10 +46,10 @@ $asterisk-icon: '\f069'; // .fa-asterisk ...@@ -46,10 +46,10 @@ $asterisk-icon: '\f069'; // .fa-asterisk
// +Mixins - Status Icon - Capa // +Mixins - Status Icon - Capa
// ==================== // ====================
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){ @mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
.status-icon { .status-icon {
&:after { &:after {
@extend %use-font-awesome; @extend %use-font-awesome;
color: $color; color: $color;
font-size: 1.2em; font-size: 1.2em;
content: $fontAwesomeIcon; content: $fontAwesomeIcon;
...@@ -65,6 +65,7 @@ h2 { ...@@ -65,6 +65,7 @@ h2 {
&.problem-header { &.problem-header {
display: inline-block; display: inline-block;
section.staff { section.staff {
margin-top: ($baseline*1.5); margin-top: ($baseline*1.5);
font-size: 80%; font-size: 80%;
...@@ -92,6 +93,7 @@ h2 { ...@@ -92,6 +93,7 @@ h2 {
.feedback-hint-incorrect { .feedback-hint-incorrect {
@extend %feedback-hint; @extend %feedback-hint;
.icon { .icon {
color: $incorrect; color: $incorrect;
} }
...@@ -100,6 +102,7 @@ h2 { ...@@ -100,6 +102,7 @@ h2 {
.feedback-hint-partially-correct, .feedback-hint-partially-correct,
.feedback-hint-correct { .feedback-hint-correct {
@extend %feedback-hint; @extend %feedback-hint;
.icon { .icon {
color: $correct; color: $correct;
} }
...@@ -200,12 +203,14 @@ div.problem { ...@@ -200,12 +203,14 @@ div.problem {
// Choice Group - silent class // Choice Group - silent class
%choicegroup-base { %choicegroup-base {
@include clearfix(); @include clearfix();
min-width: 100px; min-width: 100px;
width: auto !important; width: auto !important;
width: 100px; width: 100px;
label { label {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
clear: both; clear: both;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
...@@ -224,6 +229,7 @@ div.problem { ...@@ -224,6 +229,7 @@ div.problem {
&.choicegroup_correct { &.choicegroup_correct {
@include status-icon($correct, $checkmark-icon); @include status-icon($correct, $checkmark-icon);
border: 2px solid $correct; border: 2px solid $correct;
// keep green for correct answers on hover. // keep green for correct answers on hover.
...@@ -234,6 +240,7 @@ div.problem { ...@@ -234,6 +240,7 @@ div.problem {
&.choicegroup_partially-correct { &.choicegroup_partially-correct {
@include status-icon($partially-correct, $asterisk-icon); @include status-icon($partially-correct, $asterisk-icon);
border: 2px solid $partially-correct; border: 2px solid $partially-correct;
// keep green for correct answers on hover. // keep green for correct answers on hover.
...@@ -244,6 +251,7 @@ div.problem { ...@@ -244,6 +251,7 @@ div.problem {
&.choicegroup_incorrect { &.choicegroup_incorrect {
@include status-icon($incorrect, $cross-icon); @include status-icon($incorrect, $cross-icon);
border: 2px solid $incorrect; border: 2px solid $incorrect;
// keep red for incorrect answers on hover. // keep red for incorrect answers on hover.
...@@ -283,9 +291,11 @@ div.problem { ...@@ -283,9 +291,11 @@ div.problem {
div.problem { div.problem {
.choicegroup { .choicegroup {
@extend %choicegroup-base; @extend %choicegroup-base;
label { label {
@include padding($baseline/2); @include padding($baseline/2);
@include padding-left($baseline*1.9); @include padding-left($baseline*1.9);
position: relative; position: relative;
font-size: $base-font-size; font-size: $base-font-size;
line-height: normal; line-height: normal;
...@@ -295,6 +305,7 @@ div.problem { ...@@ -295,6 +305,7 @@ div.problem {
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
@include left(em(9)); @include left(em(9));
position: absolute; position: absolute;
top: em(9); top: em(9);
} }
...@@ -317,9 +328,8 @@ div.problem { ...@@ -317,9 +328,8 @@ div.problem {
// ==================== // ====================
// Summary status indicators shown after the input area // Summary status indicators shown after the input area
div.problem { div.problem {
.indicator-container { .indicator-container {
@include margin-left($baseline*.75); @include margin-left($baseline*.75);
.status { .status {
width: $baseline; width: $baseline;
...@@ -398,6 +408,7 @@ div.problem { ...@@ -398,6 +408,7 @@ div.problem {
span.clarification i { span.clarification i {
font-style: normal; font-style: normal;
&:hover { &:hover {
color: $blue; color: $blue;
} }
...@@ -447,10 +458,12 @@ div.problem { ...@@ -447,10 +458,12 @@ div.problem {
&:before { &:before {
@extend %t-strong; @extend %t-strong;
display: inline; display: inline;
content: "Answer: "; content: "Answer: ";
} }
&:empty { &:empty {
&:before { &:before {
display: none; display: none;
...@@ -468,6 +481,7 @@ div.problem { ...@@ -468,6 +481,7 @@ div.problem {
img.loading { img.loading {
@include padding-left($baseline/2); @include padding-left($baseline/2);
display: inline-block; display: inline-block;
} }
...@@ -533,12 +547,14 @@ div.problem { ...@@ -533,12 +547,14 @@ div.problem {
.reload { .reload {
@include float(right); @include float(right);
margin: ($baseline/2); margin: ($baseline/2);
} }
.grader-status { .grader-status {
@include clearfix(); @include clearfix();
margin: $baseline/2 0; margin: $baseline/2 0;
padding: $baseline/2; padding: $baseline/2;
border-radius: 5px; border-radius: 5px;
...@@ -583,6 +599,7 @@ div.problem { ...@@ -583,6 +599,7 @@ div.problem {
} }
} }
.evaluation { .evaluation {
p { p {
margin-bottom: ($baseline/5); margin-bottom: ($baseline/5);
...@@ -598,6 +615,7 @@ div.problem { ...@@ -598,6 +615,7 @@ div.problem {
.evaluation-response { .evaluation-response {
header { header {
text-align: right; text-align: right;
a { a {
font-size: .85em; font-size: .85em;
} }
...@@ -686,7 +704,6 @@ div.problem { ...@@ -686,7 +704,6 @@ div.problem {
table-layout: auto; table-layout: auto;
td, th { td, th {
&.cont-justified-left { &.cont-justified-left {
text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
} }
...@@ -702,6 +719,7 @@ div.problem { ...@@ -702,6 +719,7 @@ div.problem {
th { th {
@extend %t-strong; @extend %t-strong;
text-align: left; text-align: left;
} }
...@@ -760,9 +778,9 @@ div.problem { ...@@ -760,9 +778,9 @@ div.problem {
// ==================== // ====================
.problem { .problem {
.capa_inputtype.textline, .inputtype.formulaequationinput { .capa_inputtype.textline, .inputtype.formulaequationinput {
input { input {
@include box-sizing(border-box); @include box-sizing(border-box);
border: 2px solid $gray-l4; border: 2px solid $gray-l4;
border-radius: 3px; border-radius: 3px;
min-width: 160px; min-width: 160px;
...@@ -777,7 +795,6 @@ div.problem { ...@@ -777,7 +795,6 @@ div.problem {
// CASE: incorrect answer // CASE: incorrect answer
> .incorrect { > .incorrect {
input { input {
border: 2px solid $incorrect; border: 2px solid $incorrect;
} }
...@@ -789,7 +806,6 @@ div.problem { ...@@ -789,7 +806,6 @@ div.problem {
// CASE: partially correct answer // CASE: partially correct answer
> .partially-correct { > .partially-correct {
input { input {
border: 2px solid $partially-correct; border: 2px solid $partially-correct;
} }
...@@ -801,7 +817,6 @@ div.problem { ...@@ -801,7 +817,6 @@ div.problem {
// CASE: correct answer // CASE: correct answer
> .correct { > .correct {
input { input {
border: 2px solid $correct; border: 2px solid $correct;
} }
...@@ -813,7 +828,6 @@ div.problem { ...@@ -813,7 +828,6 @@ div.problem {
// CASE: submitted, correctness withheld // CASE: submitted, correctness withheld
> .submitted { > .submitted {
input { input {
border: 2px solid $submitted; border: 2px solid $submitted;
} }
...@@ -825,7 +839,6 @@ div.problem { ...@@ -825,7 +839,6 @@ div.problem {
// CASE: unanswered and unsubmitted // CASE: unanswered and unsubmitted
> .unanswered, > .unsubmitted { > .unanswered, > .unsubmitted {
input { input {
border: 2px solid $gray-l4; border: 2px solid $gray-l4;
} }
...@@ -843,6 +856,7 @@ div.problem { ...@@ -843,6 +856,7 @@ div.problem {
.trailing_text { .trailing_text {
@include margin-right($baseline/2); @include margin-right($baseline/2);
display: inline-block; display: inline-block;
} }
} }
...@@ -871,7 +885,6 @@ div.problem { ...@@ -871,7 +885,6 @@ div.problem {
// +Problem - CodeMirror // +Problem - CodeMirror
// ==================== // ====================
div.problem { div.problem {
.CodeMirror { .CodeMirror {
border: 1px solid black; border: 1px solid black;
font-size: 14px; font-size: 14px;
...@@ -879,9 +892,9 @@ div.problem { ...@@ -879,9 +892,9 @@ div.problem {
resize: none; resize: none;
.cm-tab { .cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right; background-position: right;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
pre { pre {
...@@ -899,6 +912,7 @@ div.problem { ...@@ -899,6 +912,7 @@ div.problem {
&.CodeMirror-cursor { &.CodeMirror-cursor {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
width: 0; width: 0;
...@@ -944,6 +958,7 @@ div.problem .action { ...@@ -944,6 +958,7 @@ div.problem .action {
.problem-action-button-wrapper { .problem-action-button-wrapper {
@include border-right(1px solid $light-gray1); @include border-right(1px solid $light-gray1);
display: inline-block; display: inline-block;
&:last-child { &:last-child {
...@@ -953,6 +968,7 @@ div.problem .action { ...@@ -953,6 +968,7 @@ div.problem .action {
.problem-action-btn { .problem-action-btn {
@include margin-right($baseline / 5); @include margin-right($baseline / 5);
max-width: 110px; max-width: 110px;
.icon { .icon {
...@@ -974,15 +990,18 @@ div.problem .action { ...@@ -974,15 +990,18 @@ div.problem .action {
max-width: 100%; max-width: 100%;
padding-bottom: $baseline; padding-bottom: $baseline;
} }
.submit { .submit {
@include margin-right($baseline / 2); @include margin-right($baseline / 2);
@include float(left); @include float(left);
white-space: nowrap; white-space: nowrap;
} }
} }
.submission-feedback { .submission-feedback {
@include margin-right($baseline / 2); @include margin-right($baseline / 2);
margin-top: $baseline / 2; margin-top: $baseline / 2;
display: inline-block; display: inline-block;
color: $gray-d1; color: $gray-d1;
...@@ -1034,6 +1053,7 @@ div.problem { ...@@ -1034,6 +1053,7 @@ div.problem {
&:first-child { &:first-child {
@extend %t-strong; @extend %t-strong;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -1043,12 +1063,12 @@ div.problem { ...@@ -1043,12 +1063,12 @@ div.problem {
.detailed-targeted-feedback-partially-correct, .detailed-targeted-feedback-partially-correct,
.detailed-targeted-feedback-correct { .detailed-targeted-feedback-correct {
> p { > p {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
&:first-child { &:first-child {
@extend %t-strong; @extend %t-strong;
} }
} }
} }
...@@ -1063,6 +1083,7 @@ div.problem { ...@@ -1063,6 +1083,7 @@ div.problem {
.notification { .notification {
@include float(left); @include float(left);
margin-top: $baseline / 2; margin-top: $baseline / 2;
padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2); padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2);
line-height: $base-line-height; line-height: $base-line-height;
...@@ -1089,6 +1110,7 @@ div.problem { ...@@ -1089,6 +1110,7 @@ div.problem {
.icon { .icon {
@include margin-right(3 * $baseline / 4); @include margin-right(3 * $baseline / 4);
color: $uxpl-gray-dark; color: $uxpl-gray-dark;
} }
...@@ -1103,6 +1125,7 @@ div.problem { ...@@ -1103,6 +1125,7 @@ div.problem {
.icon { .icon {
@include float(left); @include float(left);
position: relative; position: relative;
top: $baseline / 5; top: $baseline / 5;
} }
...@@ -1133,6 +1156,7 @@ div.problem { ...@@ -1133,6 +1156,7 @@ div.problem {
.notification-btn { .notification-btn {
@include float(right); @include float(right);
padding: ($baseline / 10) ($baseline / 4); padding: ($baseline / 10) ($baseline / 4);
min-width: ($baseline * 3); min-width: ($baseline * 3);
display: block; display: block;
...@@ -1183,7 +1207,7 @@ div.problem { ...@@ -1183,7 +1207,7 @@ div.problem {
} }
.capa_reset>h2 { .capa_reset>h2 {
color: #aa0000; color: #a00;
} }
.capa_reset li { .capa_reset li {
...@@ -1195,6 +1219,7 @@ div.problem { ...@@ -1195,6 +1219,7 @@ div.problem {
h3 { h3 {
@extend %t-strong; @extend %t-strong;
padding: 9px; padding: 9px;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
background: #eee; background: #eee;
...@@ -1236,6 +1261,7 @@ div.problem { ...@@ -1236,6 +1261,7 @@ div.problem {
h3 { h3 {
@extend %t-strong; @extend %t-strong;
color: #aaa; color: #aaa;
text-transform: uppercase; text-transform: uppercase;
font-style: normal; font-style: normal;
...@@ -1263,6 +1289,7 @@ div.problem { ...@@ -1263,6 +1289,7 @@ div.problem {
a.full { a.full {
@include position(absolute, 0 0 1px 0); @include position(absolute, 0 0 1px 0);
@include box-sizing(border-box); @include box-sizing(border-box);
display: block; display: block;
padding: ($baseline/5); padding: ($baseline/5);
background: $gray-l4; background: $gray-l4;
...@@ -1355,7 +1382,7 @@ div.problem { ...@@ -1355,7 +1382,7 @@ div.problem {
background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat; background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat;
.result-actual-output { .result-actual-output {
color: #B00; color: #b00;
} }
} }
...@@ -1366,7 +1393,7 @@ div.problem { ...@@ -1366,7 +1393,7 @@ div.problem {
border-left: 20px solid #fafafa; border-left: 20px solid #fafafa;
bs { bs {
color: #bb0000; color: #b00;
} }
bg { bg {
...@@ -1446,6 +1473,7 @@ div.problem { ...@@ -1446,6 +1473,7 @@ div.problem {
.annotation-header { .annotation-header {
@extend %t-strong; @extend %t-strong;
padding: .5em 1em; padding: .5em 1em;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
} }
...@@ -1487,6 +1515,7 @@ div.problem { ...@@ -1487,6 +1515,7 @@ div.problem {
.tag { .tag {
@extend %ui-fake-link; @extend %ui-fake-link;
display: inline-block; display: inline-block;
margin-left: ($baseline*2); margin-left: ($baseline*2);
border: 1px solid rgb(102,102,102); border: 1px solid rgb(102,102,102);
...@@ -1495,6 +1524,7 @@ div.problem { ...@@ -1495,6 +1524,7 @@ div.problem {
background-color: $annotation-yellow; background-color: $annotation-yellow;
} }
} }
.tag-status { .tag-status {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -1507,6 +1537,7 @@ div.problem { ...@@ -1507,6 +1537,7 @@ div.problem {
$num-lines-to-show: 5; $num-lines-to-show: 5;
$line-height: 1.4em; $line-height: 1.4em;
$padding: .2em; $padding: .2em;
padding: $padding (2 * $padding); padding: $padding (2 * $padding);
width: 100%; width: 100%;
height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2); height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2);
...@@ -1529,6 +1560,7 @@ div.problem { ...@@ -1529,6 +1560,7 @@ div.problem {
&:before { &:before {
@extend %t-strong; @extend %t-strong;
display: block; display: block;
content: "debug input value"; content: "debug input value";
text-transform: uppercase; text-transform: uppercase;
...@@ -1575,6 +1607,7 @@ div.problem { ...@@ -1575,6 +1607,7 @@ div.problem {
label.choicetextgroup_show_correct, section.choicetextgroup_show_correct { label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
&:after { &:after {
@include margin-left($baseline*.75); @include margin-left($baseline*.75);
content: url('#{$static-path}/images/correct-icon.png'); content: url('#{$static-path}/images/correct-icon.png');
} }
} }
...@@ -1590,7 +1623,6 @@ div.problem { ...@@ -1590,7 +1623,6 @@ div.problem {
// NOTE: temporary override until image inputs use same base html structure as other common capa input types. // NOTE: temporary override until image inputs use same base html structure as other common capa input types.
div.problem .imageinput.capa_inputtype { div.problem .imageinput.capa_inputtype {
.status { .status {
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -1621,7 +1653,6 @@ div.problem .imageinput.capa_inputtype { ...@@ -1621,7 +1653,6 @@ div.problem .imageinput.capa_inputtype {
// NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types. // NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types.
div.problem .annotation-input { div.problem .annotation-input {
.tag-status { .tag-status {
display: inline-block; display: inline-block;
position: relative; position: relative;
......
common/lib/xmodule/xmodule/css/codemirror/codemirror.scss
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
background: #fff; background: #fff;
font-size: 13px; font-size: 13px;
color: #3c3c3c; color: #3c3c3c;
} }
\ No newline at end of file
common/lib/xmodule/xmodule/css/editor/edit.scss
...@@ -9,13 +9,16 @@ ...@@ -9,13 +9,16 @@
.editor-bar { .editor-bar {
@include clearfix(); @include clearfix();
@include linear-gradient(top, #d4dee8, #c9d5e2); @include linear-gradient(top, #d4dee8, #c9d5e2);
position: relative; position: relative;
padding: ($baseline/4); padding: ($baseline/4);
border-bottom-color: #a5aaaf; border-bottom-color: #a5aaaf;
button { button {
display: inline-block; display: inline-block;
@include float(left); @include float(left);
padding: 3px ($baseline/2) 5px; padding: 3px ($baseline/2) 5px;
margin-left: 7px; margin-left: 7px;
border: 0; border: 0;
...@@ -23,7 +26,7 @@ ...@@ -23,7 +26,7 @@
background: transparent; background: transparent;
.icon { .icon {
height: 21px; height: 21px;
} }
&:hover, &:hover,
...@@ -36,6 +39,7 @@ ...@@ -36,6 +39,7 @@
.editor-tabs { .editor-tabs {
position: absolute; position: absolute;
top: 10px; top: 10px;
@include right(10px); @include right(10px);
@include text-align(left); @include text-align(left);
@include direction(); @include direction();
...@@ -55,7 +59,9 @@ ...@@ -55,7 +59,9 @@
padding: 7px 20px 3px; padding: 7px 20px 3px;
border: 1px solid #a5aaaf; border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
@include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06)); @include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3; background-color: #e5ecf3;
font-size: 13px; font-size: 13px;
color: #3c3c3c; color: #3c3c3c;
......
common/lib/xmodule/xmodule/css/html/display.scss
...@@ -4,11 +4,12 @@ ...@@ -4,11 +4,12 @@
} }
h1 { h1 {
color: $baseFontColor; color: $baseFontColor;
font: normal 2em/1.4em $sans-serif; font: normal 2em/1.4em $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
@include margin(0, 0, 1.416em, 0);
} @include margin(0, 0, 1.416em, 0);
}
h2 { h2 {
color: #646464; color: #646464;
...@@ -20,6 +21,7 @@ h2 { ...@@ -20,6 +21,7 @@ h2 {
h3, h4, h5, h6 { h3, h4, h5, h6 {
@include margin(0, 0, ($baseline/2), 0); @include margin(0, 0, ($baseline/2), 0);
font-weight: 600; font-weight: 600;
} }
...@@ -73,6 +75,7 @@ blockquote { ...@@ -73,6 +75,7 @@ blockquote {
ol, ul { ol, ul {
// Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon. // Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
@include bi-app-compact(padding, 0, 0, 0, 1em); @include bi-app-compact(padding, 0, 0, 0, 1em);
margin: 1em 0; margin: 1em 0;
color: $baseFontColor; color: $baseFontColor;
...@@ -152,9 +155,9 @@ th { ...@@ -152,9 +155,9 @@ th {
// modal - image zoom, fill window // modal - image zoom, fill window
.wrapper-modal-image { .wrapper-modal-image {
.modal-ui-icon { .modal-ui-icon {
@extend %ui-fake-link; @extend %ui-fake-link;
position: absolute; position: absolute;
display: block; display: block;
padding: ($baseline/4) 7px; padding: ($baseline/4) 7px;
...@@ -175,6 +178,7 @@ th { ...@@ -175,6 +178,7 @@ th {
.image-link { .image-link {
@extend %ui-fake-link; @extend %ui-fake-link;
position: relative; position: relative;
display: block; display: block;
...@@ -192,6 +196,7 @@ th { ...@@ -192,6 +196,7 @@ th {
.image-modal { .image-modal {
@extend %ui-fake-link; @extend %ui-fake-link;
@extend %ui-depth5; @extend %ui-depth5;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -247,9 +252,11 @@ th { ...@@ -247,9 +252,11 @@ th {
&.action-zoom-in { &.action-zoom-in {
margin-right: ($baseline/4); margin-right: ($baseline/4);
} }
&.action-zoom-out { &.action-zoom-out {
margin-left: ($baseline/4); margin-left: ($baseline/4);
} }
&.is-disabled { &.is-disabled {
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: default;
...@@ -275,11 +282,11 @@ th { ...@@ -275,11 +282,11 @@ th {
} }
} }
} }
&.image-is-zoomed { &.image-is-zoomed {
display: block; display: block;
.image-content .image-wrapper { .image-content .image-wrapper {
img { img {
max-width: none; max-width: none;
max-height: none; max-height: none;
......
common/lib/xmodule/xmodule/css/html/edit.scss
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
.CodeMirror { .CodeMirror {
@include box-sizing(border-box); @include box-sizing(border-box);
height: 435px; height: 435px;
} }
......
common/lib/xmodule/xmodule/css/lti/lti.scss
...@@ -12,46 +12,48 @@ div.problem-progress { ...@@ -12,46 +12,48 @@ div.problem-progress {
div.lti { div.lti {
// align center // align center
margin: 0 auto; margin: 0 auto;
.wrapper-lti-link {
@include font-size(14);
background-color: $sidebar-color;
padding: $baseline;
.lti-link {
margin-bottom: 0;
text-align: right;
.link_lti_new_window {
@extend .gray-button;
@include font-size(13);
@include line-height(14);
}
}
}
form.ltiLaunchForm { .wrapper-lti-link {
display: none; @include font-size(14);
}
iframe.ltiLaunchFrame { background-color: $sidebar-color;
width: 100%; padding: $baseline;
height: 800px;
display: block;
border: 0px;
}
h4.problem-feedback-label { .lti-link {
font-weight: 100; margin-bottom: 0;
font-size: em(16); text-align: right;
font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
}
div.problem-feedback { .link_lti_new_window {
margin-top: ($baseline/4); @extend .gray-button;
margin-bottom: ($baseline/4);
@include font-size(13);
@include line-height(14);
}
} }
}
form.ltiLaunchForm {
display: none;
}
iframe.ltiLaunchFrame {
width: 100%;
height: 800px;
display: block;
border: 0px;
}
h4.problem-feedback-label {
font-weight: 100;
font-size: em(16);
font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
}
div.problem-feedback {
margin-top: ($baseline/4);
margin-bottom: ($baseline/4);
}
} }
common/lib/xmodule/xmodule/css/poll/display.scss
...@@ -10,7 +10,7 @@ div.poll_question { ...@@ -10,7 +10,7 @@ div.poll_question {
} }
.inline { .inline {
display: inline; display: inline;
} }
h3 { h3 {
...@@ -42,7 +42,7 @@ div.poll_question { ...@@ -42,7 +42,7 @@ div.poll_question {
margin-bottom: $baseline; margin-bottom: $baseline;
&.short { &.short {
clear: both; clear: both;
} }
.question { .question {
...@@ -59,6 +59,7 @@ div.poll_question { ...@@ -59,6 +59,7 @@ div.poll_question {
.button { .button {
@extend %ui-fake-link; @extend %ui-fake-link;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-webkit-border-image: none; -webkit-border-image: none;
...@@ -94,13 +95,11 @@ div.poll_question { ...@@ -94,13 +95,11 @@ div.poll_question {
/* display: inline-block; */ /* display: inline-block; */
display: inline; display: inline;
float: left; float: left;
font-family: 'Open Sans', Verdana, Geneva, sans-serif; font-family: 'Open Sans', Verdana, Geneva, sans-serif;
font-size: 13px; font-size: 13px;
font-style: normal; font-style: normal;
font-variant: normal; font-variant: normal;
font-weight: bold; font-weight: bold;
letter-spacing: normal; letter-spacing: normal;
line-height: 25.59375px; line-height: 25.59375px;
margin-bottom: ($baseline*0.75); margin-bottom: ($baseline*0.75);
...@@ -113,13 +112,12 @@ div.poll_question { ...@@ -113,13 +112,12 @@ div.poll_question {
text-transform: none; text-transform: none;
vertical-align: top; vertical-align: top;
white-space: pre-line; white-space: pre-line;
width: 25px; width: 25px;
height: 25px; height: 25px;
word-spacing: 0px; word-spacing: 0px;
writing-mode: lr-tb; writing-mode: lr-tb;
} }
.button.answered { .button.answered {
-webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset; -webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
background-color: rgb(29, 157, 217); background-color: rgb(29, 157, 217);
...@@ -136,6 +134,7 @@ div.poll_question { ...@@ -136,6 +134,7 @@ div.poll_question {
.text { .text {
@extend %ui-fake-link; @extend %ui-fake-link;
display: inline; display: inline;
float: left; float: left;
width: 80%; width: 80%;
......
common/lib/xmodule/xmodule/css/problem/edit.scss
.editor-bar { .editor-bar {
.editor-tabs { .editor-tabs {
.advanced-toggle { .advanced-toggle {
height: auto; height: auto;
margin-top: -4px; margin-top: -4px;
...@@ -47,9 +45,12 @@ ...@@ -47,9 +45,12 @@
left: 100%; left: 100%;
width: 0; width: 0;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
@include linear-gradient(left, $shadow-l1, $transparent 4px); @include linear-gradient(left, $shadow-l1, $transparent 4px);
background-color: $white; background-color: $white;
overflow: hidden; overflow: hidden;
@include transition(width .3s linear 0s); @include transition(width .3s linear 0s);
&.shown { &.shown {
...@@ -70,6 +71,7 @@ ...@@ -70,6 +71,7 @@
.row { .row {
@include clearfix(); @include clearfix();
padding-bottom: 5px !important; padding-bottom: 5px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;
...@@ -88,7 +90,7 @@ ...@@ -88,7 +90,7 @@
margin-right: 30px; margin-right: 30px;
.icon { .icon {
height: ($baseline * 1.5); height: ($baseline * 1.5);
} }
} }
} }
...@@ -105,8 +107,8 @@ ...@@ -105,8 +107,8 @@
} }
.problem-editor { .problem-editor {
// adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror // adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
.markdown-box+.CodeMirror { .markdown-box+.CodeMirror {
padding: 10px; padding: 10px;
} }
} }
......
common/lib/xmodule/xmodule/css/sequence/display.scss
...@@ -9,6 +9,7 @@ $seq-nav-height: 44px; ...@@ -9,6 +9,7 @@ $seq-nav-height: 44px;
// repeated extends - needed since LMS styling was referenced // repeated extends - needed since LMS styling was referenced
.block-link { .block-link {
@include border-left(1px solid $seq-nav-border-color); @include border-left(1px solid $seq-nav-border-color);
display: block; display: block;
&:hover, &:focus { &:hover, &:focus {
...@@ -18,6 +19,7 @@ $seq-nav-height: 44px; ...@@ -18,6 +19,7 @@ $seq-nav-height: 44px;
.topbar { .topbar {
@include clearfix(); @include clearfix();
border-bottom: 1px solid $seq-nav-border-color; border-bottom: 1px solid $seq-nav-border-color;
@media print { @media print {
...@@ -27,6 +29,7 @@ $seq-nav-height: 44px; ...@@ -27,6 +29,7 @@ $seq-nav-height: 44px;
a { a {
&.block-link { &.block-link {
@include border-left(1px solid $seq-nav-border-color); @include border-left(1px solid $seq-nav-border-color);
display: block; display: block;
&:hover, &:focus { &:hover, &:focus {
...@@ -43,7 +46,6 @@ $seq-nav-height: 44px; ...@@ -43,7 +46,6 @@ $seq-nav-height: 44px;
background-repeat: no-repeat; background-repeat: no-repeat;
border: none; border: none;
border-radius: 0; border-radius: 0;
background-clip: border-box; background-clip: border-box;
box-shadow: none; box-shadow: none;
box-sizing: content-box; box-sizing: content-box;
...@@ -57,6 +59,7 @@ $seq-nav-height: 44px; ...@@ -57,6 +59,7 @@ $seq-nav-height: 44px;
.sequence-nav { .sequence-nav {
@extend .topbar; @extend .topbar;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
position: relative; position: relative;
border-bottom: none; border-bottom: none;
...@@ -74,6 +77,7 @@ $seq-nav-height: 44px; ...@@ -74,6 +77,7 @@ $seq-nav-height: 44px;
.sequence-list-wrapper { .sequence-list-wrapper {
@extend %ui-depth2; @extend %ui-depth2;
position: relative; position: relative;
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
...@@ -151,7 +155,9 @@ $seq-nav-height: 44px; ...@@ -151,7 +155,9 @@ $seq-nav-height: 44px;
.sequence-tooltip { .sequence-tooltip {
@include text-align(left); @include text-align(left);
@extend %ui-depth2; @extend %ui-depth2;
margin-top: ($baseline/5); margin-top: ($baseline/5);
background: $seq-nav-tooltip-color; background: $seq-nav-tooltip-color;
color: $white; color: $white;
...@@ -176,6 +182,7 @@ $seq-nav-height: 44px; ...@@ -176,6 +182,7 @@ $seq-nav-height: 44px;
&::after { &::after {
@include transform(rotate(45deg)); @include transform(rotate(45deg));
@include right(18px); @include right(18px);
background: $seq-nav-tooltip-color; background: $seq-nav-tooltip-color;
content: " "; content: " ";
display: block; display: block;
...@@ -197,6 +204,7 @@ $seq-nav-height: 44px; ...@@ -197,6 +204,7 @@ $seq-nav-height: 44px;
.sequence-nav-button { .sequence-nav-button {
@extend %ui-depth3; @extend %ui-depth3;
display: block; display: block;
top: 0; top: 0;
height: 100%; height: 100%;
......
common/lib/xmodule/xmodule/css/tabs/codemirror.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
.CodeMirror { .CodeMirror {
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
position: relative; position: relative;
height: 379px; height: 379px;
......
common/lib/xmodule/xmodule/css/tabs/tabs.scss
...@@ -18,11 +18,13 @@ ...@@ -18,11 +18,13 @@
.editor-with-tabs { .editor-with-tabs {
@include clearfix(); @include clearfix();
position: relative; position: relative;
.edit-header { .edit-header {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 18px $baseline; padding: 18px $baseline;
top: 0 !important; // ugly override for second level tab override top: 0 !important; // ugly override for second level tab override
right: 0; right: 0;
...@@ -62,17 +64,19 @@ ...@@ -62,17 +64,19 @@
margin-left: 8px; margin-left: 8px;
a.tab { a.tab {
@include font-size(14); @include font-size(14);
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
border: 1px solid $blue-d1;
border-radius: 3px; border: 1px solid $blue-d1;
padding: ($baseline/4) ($baseline); border-radius: 3px;
background-color: $blue; padding: ($baseline/4) ($baseline);
font-weight: bold; background-color: $blue;
color: $white; font-weight: bold;
color: $white;
&.current { &.current {
@include linear-gradient($blue, $blue); @include linear-gradient($blue, $blue);
color: $blue-d1; color: $blue-d1;
box-shadow: inset 0 1px 2px 1px $shadow-l1; box-shadow: inset 0 1px 2px 1px $shadow-l1;
background-color: $blue-d4; background-color: $blue-d4;
...@@ -81,7 +85,7 @@ ...@@ -81,7 +85,7 @@
&:hover, &:focus { &:hover, &:focus {
box-shadow: inset 0 1px 2px 1px $shadow; box-shadow: inset 0 1px 2px 1px $shadow;
background-image: linear-gradient(#009FE6, #009FE6) !important; background-image: linear-gradient(#009fe6, #009fe6) !important;
} }
} }
} }
......
common/lib/xmodule/xmodule/css/video/accessible_menu.scss
...@@ -23,6 +23,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -23,6 +23,7 @@ $a11y--blue-s1: saturate($blue,15%);
.a11y-menu-list { .a11y-menu-list {
@extend %ui-depth3; @extend %ui-depth3;
top: 100%; top: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -34,6 +35,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -34,6 +35,7 @@ $a11y--blue-s1: saturate($blue,15%);
li { li {
@extend %ui-fake-link; @extend %ui-fake-link;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
...@@ -92,6 +94,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -92,6 +94,7 @@ $a11y--blue-s1: saturate($blue,15%);
> a { > a {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(12); @include font-size(12);
display: block; display: block;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
background-color: $very-light-text; background-color: $very-light-text;
...@@ -105,6 +108,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -105,6 +108,7 @@ $a11y--blue-s1: saturate($blue,15%);
&:after { &:after {
@extend %use-font-awesome; @extend %use-font-awesome;
content: "\f0d7"; content: "\f0d7";
position: absolute; position: absolute;
right: ($baseline*0.5); right: ($baseline*0.5);
...@@ -135,6 +139,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -135,6 +139,7 @@ $a11y--blue-s1: saturate($blue,15%);
.contextmenu, .submenu { .contextmenu, .submenu {
@extend %ui-depth5; @extend %ui-depth5;
border: 1px solid #333; border: 1px solid #333;
background: $white; background: $white;
color: #333; color: #333;
...@@ -149,7 +154,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -149,7 +154,7 @@ $a11y--blue-s1: saturate($blue,15%);
white-space: nowrap; white-space: nowrap;
&.is-opened { &.is-opened {
display: block; display: block;
} }
.menu-item, .submenu-item { .menu-item, .submenu-item {
...@@ -158,8 +163,8 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -158,8 +163,8 @@ $a11y--blue-s1: saturate($blue,15%);
outline: none; outline: none;
& > span { & > span {
color: #333; color: #333;
} }
&:first-child { &:first-child {
border-top: none; border-top: none;
...@@ -217,6 +222,7 @@ $a11y--blue-s1: saturate($blue,15%); ...@@ -217,6 +222,7 @@ $a11y--blue-s1: saturate($blue,15%);
.overlay { .overlay {
@extend %ui-depth4; @extend %ui-depth4;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
......
common/lib/xmodule/xmodule/css/video/display.scss
...@@ -17,7 +17,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light ...@@ -17,7 +17,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light
$cool-dark: rgb(79, 89, 93); // UXPL cool dark $cool-dark: rgb(79, 89, 93); // UXPL cool dark
& { & {
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
} }
.is-hidden { .is-hidden {
...@@ -26,6 +26,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -26,6 +26,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video { .video {
@include clearfix(); @include clearfix();
background: rgb(245, 245, 245); // UXPL grayscale x-back background: rgb(245, 245, 245); // UXPL grayscale x-back
display: block; display: block;
margin: 0 -12px; margin: 0 -12px;
...@@ -40,9 +41,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -40,9 +41,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&.is-initialized { &.is-initialized {
.video-wrapper { .video-wrapper {
.spinner { .spinner {
display: none; display: none;
} }
...@@ -51,7 +50,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -51,7 +50,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
// CASE: video pre-roll state // CASE: video pre-roll state
&.is-pre-roll { &.is-pre-roll {
.slider { .slider {
visibility: hidden; visibility: hidden;
} }
...@@ -70,6 +68,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -70,6 +68,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.tc-wrapper { .tc-wrapper {
@include clearfix(); @include clearfix();
position: relative; position: relative;
} }
...@@ -80,71 +79,72 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -80,71 +79,72 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
height: 0px; height: 0px;
} }
.downloads-heading { .downloads-heading {
margin: 1em 0 0 0; margin: 1em 0 0 0;
} }
.wrapper-downloads { .wrapper-downloads {
display: flex; display: flex;
.hd { .hd {
margin: 0; margin: 0;
} }
.wrapper-download-video, .wrapper-download-video,
.wrapper-download-transcripts, .wrapper-download-transcripts,
.wrapper-handouts, .wrapper-handouts,
.branding { .branding {
flex: 1; flex: 1;
margin-top: $baseline; margin-top: $baseline;
@include padding-right($baseline);
vertical-align: top;
}
.wrapper-download-video { @include padding-right($baseline);
.video-sources { vertical-align: top;
margin: 0; }
}
}
.wrapper-download-transcripts { .wrapper-download-video {
.video-sources {
margin: 0;
}
}
.list-download-transcripts { .wrapper-download-transcripts {
margin: 0; .list-download-transcripts {
padding: 0; margin: 0;
list-style: none; padding: 0;
list-style: none;
.transcript-option { .transcript-option {
margin: 0; margin: 0;
}
}
} }
}
}
.branding { .branding {
@include padding-right(0); @include padding-right(0);
.host-tag { .host-tag {
position: absolute; position: absolute;
left: -9999em; left: -9999em;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
color: $base-font-color; color: $base-font-color;
} }
.brand-logo { .brand-logo {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
max-height: ($baseline*2); max-height: ($baseline*2);
padding: ($baseline/4) 0; padding: ($baseline/4) 0;
vertical-align: middle; vertical-align: middle;
} }
}
} }
}
.video-wrapper { .video-wrapper {
@include float(left); @include float(left);
@include margin-right(flex-gutter(9)); @include margin-right(flex-gutter(9));
width: flex-grid(6, 9); width: flex-grid(6, 9);
background-color: black; background-color: black;
position: relative; position: relative;
...@@ -161,12 +161,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -161,12 +161,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-player-pre, .video-player-pre,
.video-player-post { .video-player-post {
height: 50px; height: 50px;
background-color: rgb(17, 16, 16) // UXPL grayscale black; background-color: rgb(17, 16, 16) // UXPL grayscale black;
} }
.spinner { .spinner {
@include transform(translate(-50%, -50%)); @include transform(translate(-50%, -50%));
position: absolute; position: absolute;
z-index: 1; z-index: 1;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
...@@ -177,6 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -177,6 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
&:after{ &:after{
@include animation(rotateCW 3s infinite linear); @include animation(rotateCW 3s infinite linear);
content: ''; content: '';
display: block; display: block;
width: 30px; width: 30px;
...@@ -190,6 +192,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -190,6 +192,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.btn-play { .btn-play {
@include transform(translate(-50%, -50%)); @include transform(translate(-50%, -50%));
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 46%; top: 46%;
...@@ -214,6 +217,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -214,6 +217,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.closed-captions { .closed-captions {
@include left(5%); @include left(5%);
position: absolute; position: absolute;
width: 90%; width: 90%;
box-sizing: border-box; box-sizing: border-box;
...@@ -228,27 +232,29 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -228,27 +232,29 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
background: rgba(0, 0, 0, .75); background: rgba(0, 0, 0, .75);
color: $yellow; color: $yellow;
&:before { &:before {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: 50%; top: 50%;
@include left($baseline);
margin-top: -.6em;
font-family: 'FontAwesome';
content: "\f142";
color: $white;
opacity: 0.5;
}
&:hover, @include left($baseline);
&.is-dragging {
background: rgba(0, 0, 0, 1.0);
cursor: move;
&:before { margin-top: -.6em;
opacity: 1.0; font-family: 'FontAwesome';
} content: "\f142";
color: $white;
opacity: 0.5;
}
&:hover,
&.is-dragging {
background: rgba(0, 0, 0, 1.0);
cursor: move;
&:before {
opacity: 1.0;
} }
}
} }
.video-player { .video-player {
...@@ -273,6 +279,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -273,6 +279,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
iframe, iframe,
video { video {
@include left(0); @include left(0);
display: block; display: block;
border: none; border: none;
width: 100%; width: 100%;
...@@ -290,6 +297,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -290,6 +297,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-controls { .video-controls {
@include clearfix(); @include clearfix();
position: relative; position: relative;
border: 0; border: 0;
background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
...@@ -297,7 +305,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -297,7 +305,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
&:hover, &:hover,
&:focus { &:focus {
ul, ul,
div { div {
opacity: 1; opacity: 1;
...@@ -307,6 +314,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -307,6 +314,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
%video-control { %video-control {
@extend %t-strong; @extend %t-strong;
@extend %t-title7; @extend %t-title7;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin: 0; margin: 0;
...@@ -348,6 +356,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -348,6 +356,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
@include clearfix(); @include clearfix();
@include transform-origin(bottom left); @include transform-origin(bottom left);
@include transition(height .7s ease-in-out 0s); @include transition(height .7s ease-in-out 0s);
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
...@@ -375,8 +384,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -375,8 +384,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.ui-slider-handle { .ui-slider-handle {
@extend %ui-fake-link; @extend %ui-fake-link;
@include transform-origin(bottom left); @include transform-origin(bottom left);
@include transition(all .7s ease-in-out 0s); @include transition(all .7s ease-in-out 0s);
box-sizing: border-box; box-sizing: border-box;
top: -1px; top: -1px;
height: ($baseline / 4); height: ($baseline / 4);
...@@ -398,17 +409,20 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -398,17 +409,20 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.vcr { .vcr {
@include float(left); @include float(left);
list-style: none; list-style: none;
@include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark @include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark
padding: 0; padding: 0;
@media (max-width: 1120px) { @media (max-width: 1120px) {
@include margin-right(lh(0.5)); @include margin-right(lh(0.5));
font-size: em(14); font-size: em(14);
} }
.video_control { .video_control {
&:focus { &:focus {
position: relative; position: relative;
} }
...@@ -421,12 +435,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -421,12 +435,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.vidtime { .vidtime {
@extend %t-strong; @extend %t-strong;
@extend %t-title7; @extend %t-title7;
@include padding-left(lh(.75)); @include padding-left(lh(.75));
display: inline-block; display: inline-block;
color: rgb(207, 216, 220); // UXPL grayscale-cool light color: rgb(207, 216, 220); // UXPL grayscale-cool light
-webkit-font-smoothing: antialiased;; -webkit-font-smoothing: antialiased;;
@media (max-width: 1120px) { @media (max-width: 1120px) {
@include padding-left(lh(0.5)); @include padding-left(lh(0.5));
} }
} }
...@@ -448,7 +464,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -448,7 +464,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.add-fullscreen, .add-fullscreen,
.quality-control, .quality-control,
.toggle-transcript { .toggle-transcript {
&:focus { &:focus {
position: relative; position: relative;
} }
...@@ -459,11 +474,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -459,11 +474,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.menu { .menu {
@include transition(none); @include transition(none);
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
display: none; display: none;
bottom: ($baseline * 2); bottom: ($baseline * 2);
@include right(0); // right-align menus since this whole collection is on the right @include right(0); // right-align menus since this whole collection is on the right
width: 120px; width: 120px;
margin: 0; margin: 0;
border: none; border: none;
...@@ -474,11 +493,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -474,11 +493,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
li { li {
@extend %ui-fake-link; @extend %ui-fake-link;
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
.speed-option, .speed-option,
.control-lang { .control-lang {
@include text-align(left); @include text-align(left);
display: block; display: block;
width: 100%; width: 100%;
border: 0; border: 0;
...@@ -500,10 +521,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -500,10 +521,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&.is-active { &.is-active {
.speed-option, .speed-option,
.control-lang { .control-lang {
@include border-left($baseline/10 solid rgb(14, 166, 236)); @include border-left($baseline/10 solid rgb(14, 166, 236));
font-weight: $font-bold; font-weight: $font-bold;
color: rgb(14, 166, 236); // UXPL primary accent color: rgb(14, 166, 236); // UXPL primary accent
} }
...@@ -512,7 +533,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -512,7 +533,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&.is-opened { &.is-opened {
.menu { .menu {
display: block; display: block;
} }
...@@ -526,13 +546,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -526,13 +546,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
.speeds { .speeds {
&.is-opened { &.is-opened {
.control { .control {
.icon { .icon {
@include ltr { @include ltr {
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
} }
...@@ -545,9 +561,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -545,9 +561,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
.speed-button { .speed-button {
.label { .label {
@include padding(0 ($baseline/3) 0 0); @include padding(0 ($baseline/3) 0 0);
font-family: $body-font-family; font-family: $body-font-family;
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
...@@ -558,6 +574,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -558,6 +574,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.value { .value {
@include padding(0, lh(0.5), 0, 0); @include padding(0, lh(0.5), 0, 0);
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
font-weight: bold; font-weight: bold;
...@@ -569,16 +586,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -569,16 +586,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
.lang { .lang {
.language-menu { .language-menu {
width: $baseline; width: $baseline;
padding: ($baseline / 2) 0; padding: ($baseline / 2) 0;
} }
.control { .control {
.icon { .icon {
@include rtl { @include rtl {
@include transform(rotate(-180deg)); @include transform(rotate(-180deg));
} }
...@@ -586,11 +600,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -586,11 +600,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&.is-opened { &.is-opened {
.control { .control {
.icon { .icon {
@include ltr { @include ltr {
@include transform(rotate(90deg)); @include transform(rotate(90deg));
} }
...@@ -608,7 +619,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -608,7 +619,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
position: relative; position: relative;
&.is-opened { &.is-opened {
.volume-slider-container { .volume-slider-container {
display: block; display: block;
opacity: 1; opacity: 1;
...@@ -621,11 +631,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -621,11 +631,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.volume-slider-container { .volume-slider-container {
@include transition(none); @include transition(none);
@extend %ui-depth1; @extend %ui-depth1;
display: none; display: none;
position: absolute; position: absolute;
bottom: ($baseline * 2); bottom: ($baseline * 2);
@include right(0); @include right(0);
width: 41px; width: 41px;
height: 120px; height: 120px;
background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
...@@ -640,8 +654,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -640,8 +654,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.ui-slider-handle { .ui-slider-handle {
@extend %ui-fake-link; @extend %ui-fake-link;
@include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s); @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
@include left(-5px); @include left(-5px);
box-sizing: border-box; box-sizing: border-box;
height: 13px; height: 13px;
width: 13px; width: 13px;
...@@ -682,14 +698,12 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -682,14 +698,12 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
.toggle-transcript { .toggle-transcript {
&.is-active {
&.is-active { color: rgb(14, 166, 236); // UXPL primary accent
color: rgb(14, 166, 236); // UXPL primary accent }
}
} }
.lang { .lang {
& > .hide-subtitles { & > .hide-subtitles {
@include transition(none); @include transition(none);
} }
...@@ -698,9 +712,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -698,9 +712,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&:hover { &:hover {
.video-controls { .video-controls {
.slider { .slider {
height: ($baseline / 1.5); height: ($baseline / 1.5);
...@@ -714,18 +726,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -714,18 +726,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&.video-fullscreen { &.video-fullscreen {
.closed-captions {
width: 65%;
}
.closed-captions { &.closed .closed-captions {
width: 65%; width: 90%;
} }
&.closed .closed-captions {
width: 90%;
}
} }
.subtitles { .subtitles {
@include float(left); @include float(left);
overflow: auto; overflow: auto;
max-height: 460px; max-height: 460px;
width: flex-grid(3, 9); width: flex-grid(3, 9);
...@@ -734,7 +746,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -734,7 +746,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
visibility: visible; visibility: visible;
a { a {
color: #0074b5; color: #0074b5;
} }
.subtitles-menu { .subtitles-menu {
...@@ -745,6 +757,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -745,6 +757,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
li { li {
@extend %ui-fake-link; @extend %ui-fake-link;
margin-bottom: 8px; margin-bottom: 8px;
border: 0; border: 0;
padding: 0; padding: 0;
...@@ -775,19 +788,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -775,19 +788,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
&.spacing:last-of-type { &.spacing:last-of-type {
position: relative; position: relative;
.transcript-end { .transcript-end {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
} }
} }
} }
} }
&.closed { &.closed {
.video-wrapper { .video-wrapper {
width: flex-grid(9,9); width: flex-grid(9,9);
background-color: inherit; background-color: inherit;
...@@ -803,7 +815,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -803,7 +815,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-wrapper .video-player-pre, .video-wrapper .video-player-pre,
.video-wrapper .video-player-post { .video-wrapper .video-player-post {
height: 0; height: 0;
} }
.video-wrapper .video-player { .video-wrapper .video-player {
...@@ -813,25 +825,27 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -813,25 +825,27 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
} }
.subtitles { .subtitles {
@extend .is-hidden; @extend .is-hidden;
} }
.subtitles.html5 { .subtitles.html5 {
@extend %ui-depth0; @extend %ui-depth0;
background-color: rgba(243, 243, 243, 0.8);
height: 100%; background-color: rgba(243, 243, 243, 0.8);
position: absolute; height: 100%;
right: 0; position: absolute;
bottom: 0; right: 0;
top: 0; bottom: 0;
width: 275px; top: 0;
padding: 0 $baseline; width: 275px;
display: none; padding: 0 $baseline;
display: none;
} }
} }
&.video-fullscreen { &.video-fullscreen {
@extend %ui-depth4; @extend %ui-depth4;
background: rgba(#000, .95); background: rgba(#000, .95);
border: 0; border: 0;
bottom: 0; bottom: 0;
...@@ -855,11 +869,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -855,11 +869,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-wrapper .video-player-pre, .video-wrapper .video-player-pre,
.video-wrapper .video-player-post { .video-wrapper .video-player-post {
height: 0; height: 0;
} }
.video-wrapper { .video-wrapper {
position: static; position: static;
} }
.video-wrapper .video-player { .video-wrapper .video-player {
...@@ -870,15 +884,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -870,15 +884,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.tc-wrapper { .tc-wrapper {
@include clearfix(); @include clearfix();
width: 100%; width: 100%;
height: 100%; height: 100%;
position: static; position: static;
.video-wrapper { .video-wrapper {
height: 100%; height: 100%;
width: 75%; width: 75%;
@include margin-right(0); @include margin-right(0);
vertical-align: middle; vertical-align: middle;
object, object,
...@@ -892,6 +908,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -892,6 +908,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-controls { .video-controls {
@extend %ui-depth4; @extend %ui-depth4;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -903,8 +920,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -903,8 +920,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
height: 100%; height: 100%;
width: 25%; width: 25%;
padding: lh(); padding: lh();
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(none); @include transition(none);
background: $black; background: $black;
visibility: visible; visibility: visible;
...@@ -933,6 +952,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark ...@@ -933,6 +952,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-pre-roll { .video-pre-roll {
@extend %ui-depth3; @extend %ui-depth3;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
......
common/lib/xmodule/xmodule/css/word_cloud/display.scss
.input-cloud { .input-cloud {
margin: ($baseline/4); margin: ($baseline/4);
} }
.result_cloud_section { .result_cloud_section {
display: none; display: none;
width: 0px; width: 0px;
height: 0px; height: 0px;
} }
.result_cloud_section.active { .result_cloud_section.active {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
margin-top: 1em; margin-top: 1em;
h3 { h3 {
font-size: 100%; font-size: 100%;
} }
} }
.your_words{ .your_words{
font-size: 0.85em; font-size: 0.85em;
display: block; display: block;
} }
common/static/sass/_mixins-inherited.scss
...@@ -26,50 +26,57 @@ ...@@ -26,50 +26,57 @@
// inherited - dividers // inherited - dividers
.faded-hr-divider { .faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%, rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0))); rgba(200,200,200, 0)));
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-hr-divider-medium { .faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%, @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%, rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0))); rgba(240,240,240, 0)));
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-hr-divider-light { .faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0))); rgba(255,255,255, 0)));
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-vertical-divider { .faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%, @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%, rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0))); rgba(200,200,200, 0)));
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
.faded-vertical-divider-light { .faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0))); rgba(255,255,255, 0)));
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
.vertical-divider { .vertical-divider {
@extend .faded-vertical-divider; @extend .faded-vertical-divider;
position: relative; position: relative;
&::after { &::after {
@extend .faded-vertical-divider-light; @extend .faded-vertical-divider-light;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -79,11 +86,14 @@ ...@@ -79,11 +86,14 @@
.horizontal-divider { .horizontal-divider {
border: none; border: none;
@extend .faded-hr-divider; @extend .faded-hr-divider;
position: relative; position: relative;
&::after { &::after {
@extend .faded-hr-divider-light; @extend .faded-hr-divider-light;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -93,13 +103,15 @@ ...@@ -93,13 +103,15 @@
.fade-right-hr-divider { .fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1))); rgba(200,200,200, 1)));
border: none; border: none;
} }
.fade-left-hr-divider { .fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%, @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0))); rgba(200,200,200, 0)));
border: none; border: none;
} }
...@@ -108,6 +120,7 @@ ...@@ -108,6 +120,7 @@
// inherited - ui // inherited - ui
.window { .window {
@include clearfix(); @include clearfix();
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
border-radius: 3px; border-radius: 3px;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -120,8 +133,10 @@ ...@@ -120,8 +133,10 @@
// mixins - grandfathered // mixins - grandfathered
@mixin button { @mixin button {
@include transition(background-color 0.15s, box-shadow 0.15s); @include transition(background-color 0.15s, box-shadow 0.15s);
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
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;
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline ($baseline/4); padding: ($baseline/5) $baseline ($baseline/4);
...@@ -133,6 +148,7 @@ ...@@ -133,6 +148,7 @@
color: $gray-d1 !important; color: $gray-d1 !important;
pointer-events: none; pointer-events: none;
cursor: none; cursor: none;
&:hover, &:focus { &:hover, &:focus {
box-shadow: 0 0 0 0 !important; box-shadow: 0 0 0 0 !important;
} }
...@@ -146,6 +162,7 @@ ...@@ -146,6 +162,7 @@
@mixin green-button { @mixin green-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $uxpl-green-base; border: 1px solid $uxpl-green-base;
border-radius: 3px; border-radius: 3px;
...@@ -168,6 +185,7 @@ ...@@ -168,6 +185,7 @@
@mixin blue-button { @mixin blue-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $uxpl-blue-base; border: 1px solid $uxpl-blue-base;
border-radius: 3px; border-radius: 3px;
background-color: $uxpl-blue-base; background-color: $uxpl-blue-base;
...@@ -189,6 +207,7 @@ ...@@ -189,6 +207,7 @@
@mixin red-button { @mixin red-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $red-d1; border: 1px solid $red-d1;
border-radius: 3px; border-radius: 3px;
background-color: $red; background-color: $red;
...@@ -210,6 +229,7 @@ ...@@ -210,6 +229,7 @@
@mixin pink-button { @mixin pink-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $pink-d1; border: 1px solid $pink-d1;
border-radius: 3px; border-radius: 3px;
background-color: $pink; background-color: $pink;
...@@ -231,6 +251,7 @@ ...@@ -231,6 +251,7 @@
@mixin orange-button { @mixin orange-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $orange-d1; border: 1px solid $orange-d1;
border-radius: 3px; border-radius: 3px;
...@@ -253,6 +274,7 @@ ...@@ -253,6 +274,7 @@
@mixin white-button { @mixin white-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
border-radius: 3px; border-radius: 3px;
...@@ -269,6 +291,7 @@ ...@@ -269,6 +291,7 @@
@mixin grey-button { @mixin grey-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $gray-d2; border: 1px solid $gray-d2;
border-radius: 3px; border-radius: 3px;
...@@ -284,6 +307,7 @@ ...@@ -284,6 +307,7 @@
.gray-button { .gray-button {
@include button; @include button;
@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0)); @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 $white-t1 inset; box-shadow: 0 1px 0 $white-t1 inset;
border: 1px solid $gray-d1; border: 1px solid $gray-d1;
border-radius: 3px; border-radius: 3px;
...@@ -319,6 +343,7 @@ ...@@ -319,6 +343,7 @@
h5 { h5 {
@extend %t-strong; @extend %t-strong;
margin-bottom: 8px; margin-bottom: 8px;
color: $white; color: $white;
} }
...@@ -331,11 +356,13 @@ ...@@ -331,11 +356,13 @@
.save-button { .save-button {
@include blue-button; @include blue-button;
margin-top: 0; margin-top: 0;
} }
.cancel-button { .cancel-button {
@include white-button; @include white-button;
margin-top: 0; margin-top: 0;
} }
} }
...@@ -345,6 +372,7 @@ ...@@ -345,6 +372,7 @@
// sunsetted mixins // sunsetted mixins
@mixin active { @mixin active {
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset; box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
......
common/static/sass/assets/_anims.scss
...@@ -98,11 +98,13 @@ ...@@ -98,11 +98,13 @@
@include keyframes(bounceIn) { @include keyframes(bounceIn) {
0% { 0% {
opacity: 0.0; opacity: 0.0;
@include transform(scale(0.3)); @include transform(scale(0.3));
} }
50% { 50% {
opacity: 1.0; opacity: 1.0;
@include transform(scale(1.05)); @include transform(scale(1.05));
} }
...@@ -119,11 +121,13 @@ ...@@ -119,11 +121,13 @@
50% { 50% {
opacity: 1.0; opacity: 1.0;
@include transform(scale(1.05)); @include transform(scale(1.05));
} }
100% { 100% {
opacity: 0.0; opacity: 0.0;
@include transform(scale(0.3)); @include transform(scale(0.3));
} }
} }
...@@ -144,11 +148,11 @@ ...@@ -144,11 +148,11 @@
// flash - double // flash - double
@include keyframes(flashDouble) { @include keyframes(flashDouble) {
0%, 50%, 100% { 0%, 50%, 100% {
opacity: 1.0; opacity: 1.0;
} }
25%, 75% { 25%, 75% {
opacity: 0.0; opacity: 0.0;
} }
} }
common/static/sass/edx-pattern-library-shims/base/_variables.scss
...@@ -61,6 +61,7 @@ $spacing-horizontal: ( ...@@ -61,6 +61,7 @@ $spacing-horizontal: (
} }
@warn "Unknown `#{$key}` in $spacing-vertical."; @warn "Unknown `#{$key}` in $spacing-vertical.";
@return null; @return null;
} }
...@@ -71,6 +72,7 @@ $spacing-horizontal: ( ...@@ -71,6 +72,7 @@ $spacing-horizontal: (
} }
@warn "Unknown `#{$key}` in $spacing-horizontal."; @warn "Unknown `#{$key}` in $spacing-horizontal.";
@return null; @return null;
} }
...@@ -104,6 +106,7 @@ $font-sizes: ( ...@@ -104,6 +106,7 @@ $font-sizes: (
} }
@warn "Unknown `#{$key}` in $font-sizes."; @warn "Unknown `#{$key}` in $font-sizes.";
@return null; @return null;
} }
...@@ -114,6 +117,7 @@ $font-sizes: ( ...@@ -114,6 +117,7 @@ $font-sizes: (
} }
@warn "Unknown `#{$key}` in $font-weights."; @warn "Unknown `#{$key}` in $font-weights.";
@return null; @return null;
} }
...@@ -233,8 +237,10 @@ $btn-small-padding-horizontal: spacing-horizontal(small); ...@@ -233,8 +237,10 @@ $btn-small-padding-horizontal: spacing-horizontal(small);
@mixin notification-by-type($color) { @mixin notification-by-type($color) {
border-top: 3px solid $color; border-top: 3px solid $color;
.icon { .icon {
@include margin-right(3 * $baseline/ 4); @include margin-right(3 * $baseline/ 4);
color: $color; color: $color;
} }
} }
......
common/static/sass/neat/functions/_new-breakpoint.scss
@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 { @if length($query) == 1 {
$query: $default-feature nth($query, 1) $total-columns; $query: $default-feature nth($query, 1) $total-columns;
} }
......
common/static/sass/neat/functions/_private.scss
...@@ -31,11 +31,13 @@ ...@@ -31,11 +31,13 @@
@function container-span($span: $span) { @function container-span($span: $span) {
@if length($span) == 3 { @if length($span) == 3 {
$container-columns: nth($span, 3); $container-columns: nth($span, 3);
@return $container-columns; @return $container-columns;
} }
@else if length($span) == 2 { @else if length($span) == 2 {
$container-columns: nth($span, 2); $container-columns: nth($span, 2);
@return $container-columns; @return $container-columns;
} }
...@@ -49,11 +51,13 @@ ...@@ -49,11 +51,13 @@
@if length($shift) == 3 { @if length($shift) == 3 {
$container-columns: nth($shift, 3); $container-columns: nth($shift, 3);
@return $container-columns; @return $container-columns;
} }
@else if length($shift) == 2 { @else if length($shift) == 2 {
$container-columns: nth($shift, 2); $container-columns: nth($shift, 2);
@return $container-columns; @return $container-columns;
} }
...@@ -95,7 +99,9 @@ ...@@ -95,7 +99,9 @@
@if $layout == LTR or $layout == RTL { @if $layout == LTR or $layout == RTL {
$direction: direction-from-layout($layout); $direction: direction-from-layout($layout);
} @else { }
@else {
$direction: direction-from-layout($default); $direction: direction-from-layout($default);
} }
...@@ -107,7 +113,9 @@ ...@@ -107,7 +113,9 @@
@if $layout == LTR { @if $layout == LTR {
$direction: right; $direction: right;
} @else { }
@else {
$direction: left; $direction: left;
} }
......
common/static/sass/neat/grid/_media.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
@media screen and ($default-feature: nth($query, 1)) { @media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns; $default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global; $grid-columns: $total-columns !global;
@content; @content;
$grid-columns: $default-grid-columns !global; $grid-columns: $default-grid-columns !global;
} }
...@@ -20,6 +21,7 @@ ...@@ -20,6 +21,7 @@
} }
$i: 1; $i: 1;
@while $i <= $loopTo { @while $i <= $loopTo {
$mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') '; $mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
......
common/static/sass/neat/grid/_omega.scss
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
@if $direction != default { @if $direction != default {
@warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead." @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
} @else { }
@else {
$direction: get-direction($layout-direction, $default-layout-direction); $direction: get-direction($layout-direction, $default-layout-direction);
} }
......
common/static/sass/neat/grid/_outer-container.scss
@mixin outer-container { @mixin outer-container {
@include clearfix(); @include clearfix();
max-width: $max-width; max-width: $max-width;
margin: { margin: {
left: auto; left: auto;
......
common/static/sass/neat/grid/_pad.scss
@mixin pad($padding: flex-gutter()) { @mixin pad($padding: flex-gutter()) {
$padding-list: null; $padding-list: null;
@each $value in $padding { @each $value in $padding {
$value: if($value == 'default', flex-gutter(), $value); $value: if($value == 'default', flex-gutter(), $value);
$padding-list: join($padding-list, $value); $padding-list: join($padding-list, $value);
} }
padding: $padding-list; padding: $padding-list;
} }
common/static/sass/neat/grid/_private.scss
...@@ -8,11 +8,13 @@ $layout-direction: nil !default; ...@@ -8,11 +8,13 @@ $layout-direction: nil !default;
@function flex-grid($columns, $container-columns: $fg-max-columns) { @function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter; $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width); @return percentage($width / $container-width);
} }
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width); @return percentage($gutter / $container-width);
} }
...@@ -23,7 +25,9 @@ $layout-direction: nil !default; ...@@ -23,7 +25,9 @@ $layout-direction: nil !default;
@function get-parent-columns($columns) { @function get-parent-columns($columns) {
@if $columns != $grid-columns { @if $columns != $grid-columns {
$parent-columns: $columns !global; $parent-columns: $columns !global;
} @else { }
@else {
$parent-columns: $grid-columns !global; $parent-columns: $grid-columns !global;
} }
...@@ -35,7 +39,9 @@ $layout-direction: nil !default; ...@@ -35,7 +39,9 @@ $layout-direction: nil !default;
@if $container-is-display-table == true { @if $container-is-display-table == true {
$display-table: true; $display-table: true;
} @else if $display == table { }
@else if $display == table {
$display-table: true; $display-table: true;
} }
......
common/static/sass/neat/grid/_row.scss
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
@if $display == table { @if $display == table {
display: table; display: table;
@include fill-parent; @include fill-parent;
table-layout: fixed; table-layout: fixed;
$container-display-table: true !global; $container-display-table: true !global;
} }
......
common/static/sass/neat/grid/_span-columns.scss
...@@ -13,7 +13,9 @@ ...@@ -13,7 +13,9 @@
@if $display-table { @if $display-table {
display: table-cell; display: table-cell;
width: percentage($columns / $container-columns); width: percentage($columns / $container-columns);
} @else { }
@else {
float: #{$opposite-direction}; float: #{$opposite-direction};
@if $display != no-display { @if $display != no-display {
...@@ -31,7 +33,9 @@ ...@@ -31,7 +33,9 @@
width: flex-grid($columns, $container-columns); width: flex-grid($columns, $container-columns);
} }
} @else { }
@else {
margin-#{$direction}: flex-gutter($container-columns); margin-#{$direction}: flex-gutter($container-columns);
width: flex-grid($columns, $container-columns); width: flex-grid($columns, $container-columns);
......
common/static/sass/neat/grid/_to-deprecate.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@media screen and ($default-feature: nth($query, 1)) { @media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns; $default-grid-columns: $grid-columns;
$grid-columns: $total-columns; $grid-columns: $total-columns;
@content; @content;
$grid-columns: $default-grid-columns; $grid-columns: $default-grid-columns;
} }
...@@ -14,6 +15,7 @@ ...@@ -14,6 +15,7 @@
@media screen and (nth($query, 1): nth($query, 2)) { @media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns; $default-grid-columns: $grid-columns;
$grid-columns: $total-columns; $grid-columns: $total-columns;
@content; @content;
$grid-columns: $default-grid-columns; $grid-columns: $default-grid-columns;
} }
...@@ -23,6 +25,7 @@ ...@@ -23,6 +25,7 @@
@media screen and (nth($query, 1): nth($query, 2)) { @media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns; $default-grid-columns: $grid-columns;
$grid-columns: nth($query, 3); $grid-columns: nth($query, 3);
@content; @content;
$grid-columns: $default-grid-columns; $grid-columns: $default-grid-columns;
} }
...@@ -32,6 +35,7 @@ ...@@ -32,6 +35,7 @@
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns; $default-grid-columns: $grid-columns;
$grid-columns: $total-columns; $grid-columns: $total-columns;
@content; @content;
$grid-columns: $default-grid-columns; $grid-columns: $default-grid-columns;
} }
...@@ -41,6 +45,7 @@ ...@@ -41,6 +45,7 @@
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns; $default-grid-columns: $grid-columns;
$grid-columns: nth($query, 5); $grid-columns: nth($query, 5);
@content; @content;
$grid-columns: $default-grid-columns; $grid-columns: $default-grid-columns;
} }
...@@ -53,5 +58,6 @@ ...@@ -53,5 +58,6 @@
@mixin nth-omega($nth, $display: block, $direction: default) { @mixin nth-omega($nth, $display: block, $direction: default) {
@warn "The nth-omega() mixin is deprecated. Please use omega() instead."; @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
@include omega($nth $display, $direction); @include omega($nth $display, $direction);
} }
common/static/sass/neat/grid/_visual-grid.scss
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
body:before { body:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@include grid-column-gradient(gradient-stops($grid-columns)); @include grid-column-gradient(gradient-stops($grid-columns));
height: 100%; height: 100%;
left: 0; left: 0;
margin: 0 auto; margin: 0 auto;
......
common/static/sass/neat/settings/_visual-grid.scss
$visual-grid: false !default; // Display the base grid $visual-grid: false !default; // Display the base grid
$visual-grid-color: #EEE !default; $visual-grid-color: #eee !default;
$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front) $visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
$visual-grid-opacity: 0.4 !default; $visual-grid-opacity: 0.4 !default;
$visual-grid-breakpoints: () !default; $visual-grid-breakpoints: () !default;
common/test/test-theme/cms/static/sass/partials/_variables.scss
...@@ -262,5 +262,5 @@ $sans-serif: $f-sans-serif; ...@@ -262,5 +262,5 @@ $sans-serif: $f-sans-serif;
$body-line-height: golden-ratio(.875em, 1); $body-line-height: golden-ratio(.875em, 1);
// carried over from LMS for xmodules // carried over from LMS for xmodules
$action-primary-active-bg: #1AA1DE; // $m-blue $action-primary-active-bg: #1aa1de; // $m-blue
$very-light-text: $white; $very-light-text: $white;
lms/static/certificates/sass/_base.scss
...@@ -11,10 +11,10 @@ ...@@ -11,10 +11,10 @@
// #BASE // #BASE
// ------------------------------ // ------------------------------
html, body { html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: $white; background: $white;
} }
// ------------------------------ // ------------------------------
......
lms/static/certificates/sass/_components.scss
...@@ -21,41 +21,41 @@ ...@@ -21,41 +21,41 @@
// #HEADINGS // #HEADINGS
// ------------------------------ // ------------------------------
%hd-subsection { %hd-subsection {
margin-bottom: spacing-vertical(mid-small); margin-bottom: spacing-vertical(mid-small);
border-bottom: rem(2) solid palette(grayscale, x-back); border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(x-small); padding-bottom: spacing-vertical(x-small);
} }
// ------------------------------ // ------------------------------
// #DEPTH // #DEPTH
// ------------------------------ // ------------------------------
%depth-base-focus { %depth-base-focus {
background: $white; background: $white;
padding: spacing-vertical(small) spacing-horizontal(base); padding: spacing-vertical(small) spacing-horizontal(base);
} }
%depth-well { %depth-well {
box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset; box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
padding: spacing-vertical(small) spacing-horizontal(base); padding: spacing-vertical(small) spacing-horizontal(base);
background: palette(grayscale, x-back); background: palette(grayscale, x-back);
} }
%depth-card { %depth-card {
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back); box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
padding: spacing-vertical(small) spacing-horizontal(base); padding: spacing-vertical(small) spacing-horizontal(base);
background: $white; background: $white;
} }
.depth-base-focus { .depth-base-focus {
@extend %depth-base-focus; @extend %depth-base-focus;
} }
.depth-well { .depth-well {
@extend %depth-well; @extend %depth-well;
} }
.depth-card { .depth-card {
@extend %depth-card; @extend %depth-card;
} }
// ------------------------------ // ------------------------------
...@@ -63,21 +63,21 @@ ...@@ -63,21 +63,21 @@
// ------------------------------ // ------------------------------
// circular cropped // circular cropped
%img-cropped { %img-cropped {
.src {
.src { display: block;
display: block; width: 100%;
width: 100%; border-radius: 50%;
border-radius: 50%; }
}
} }
// ------------------------------ // ------------------------------
// #HEADER APP // #HEADER APP
// ------------------------------ // ------------------------------
.wrapper-header { .wrapper-header {
@extend %divider-2; @extend %divider-2;
border-bottom-color: palette(grayscale, x-back);
background: $white; border-bottom-color: palette(grayscale, x-back);
background: $white;
} }
.header-app { .header-app {
...@@ -88,63 +88,62 @@ ...@@ -88,63 +88,62 @@
// #BANNER // #BANNER
// ------------------------------ // ------------------------------
.banner { .banner {
.message-copy {
.message-copy { margin-bottom: 0;
margin-bottom: 0; }
}
} }
// message to user-centric banner // message to user-centric banner
.wrapper-banner-user { .wrapper-banner-user {
box-shadow: inset 0 rem(2) rem(2) 0 $black; box-shadow: inset 0 rem(2) rem(2) 0 $black;
background: palette(grayscale, dark); background: palette(grayscale, dark);
} }
.banner-user { .banner-user {
.message-title {
color: $white;
font-weight: font-weight(semi-bold);
}
.message-title { .message-copy {
color: $white; color: $white;
font-weight: font-weight(semi-bold); }
}
.message-copy {
color: $white;
}
.message-actions .action { .message-actions .action {
// STATE: hover, active, focus // STATE: hover, active, focus
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
// customizations from UXPL // customizations from UXPL
color: palette(grayscale, dark); color: palette(grayscale, dark);
} }
.icon { .icon {
@include margin-right(spacing-horizontal(x-small)); @include margin-right(spacing-horizontal(x-small));
font-size: font-size(large);
}
// CASE: icon display only font-size: font-size(large);
&.icon-only { }
.action-label { // CASE: icon display only
@extend %a11y-hide; &.icon-only {
} .action-label {
} @extend %a11y-hide;
}
}
// CASE mozilla open badges logo // CASE mozilla open badges logo
.icon-mozillaopenbadges { .icon-mozillaopenbadges {
width: rem(18); width: rem(18);
}
} }
}
} }
// ------------------------------ // ------------------------------
// #INTRODUCTION // #INTRODUCTION
// ------------------------------ // ------------------------------
.introduction { .introduction {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
@include text-align(center);
@include text-align(center);
} }
// ------------------------------ // ------------------------------
...@@ -152,240 +151,251 @@ ...@@ -152,240 +151,251 @@
// ------------------------------ // ------------------------------
// base accomplishment // base accomplishment
.accomplishment { .accomplishment {
.accomplishment-type-symbol .src {
.accomplishment-type-symbol .src { display: block;
display: block; width: 100%;
width: 100%; }
}
} }
// main accomplishment // main accomplishment
.accomplishment-main { .accomplishment-main {
background: palette(grayscale, x-back); background: palette(grayscale, x-back);
} }
// brief accomplishment // brief accomplishment
.accomplishment-brief { .accomplishment-brief {
@extend %depth-card; @extend %depth-card;
.accomplishment-type-symbol, .accomplishment-details { .accomplishment-type-symbol, .accomplishment-details {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.accomplishment-type-symbol { .accomplishment-type-symbol {
@include size(20%); @include size(20%);
} }
.accomplishment-details { .accomplishment-details {
width: 70%; width: 70%;
} }
.accomplishment-summary { .accomplishment-summary {
margin-bottom: 0; margin-bottom: 0;
} }
} }
// ------------------------------ // ------------------------------
// #RENDERING // #RENDERING
// ------------------------------ // ------------------------------
%rendering-accomplishment-line { %rendering-accomplishment-line {
display: block; display: block;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
%rendering-section { %rendering-section {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
border-bottom: rem(2) solid palette(grayscale, x-back); border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(base); padding-bottom: spacing-vertical(base);
} }
%rendering-hd-section { %rendering-hd-section {
margin-bottom: spacing-vertical(mid-small); margin-bottom: spacing-vertical(mid-small);
border-bottom: rem(2) solid palette(grayscale, x-back); border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(x-small); padding-bottom: spacing-vertical(x-small);
color: $cert-base-color; color: $cert-base-color;
@include text-align(center);
@include text-align(center);
} }
.accomplishment-rendering { .accomplishment-rendering {
@extend %depth-card; @extend %depth-card;
position: relative;
top: -(spacing-vertical(base));
border-top: rem(4) solid $cert-base-color;
// type position: relative;
.accomplishment-type { top: -(spacing-vertical(base));
@include text-align(center); border-top: rem(4) solid $cert-base-color;
margin-top: -(spacing-vertical(large));
margin-bottom: spacing-vertical(base);
}
.accomplishment-type-label, .accomplishment-type-symbol { // type
display: block; .accomplishment-type {
} @include text-align(center);
.accomplishment-type-label { margin-top: -(spacing-vertical(large));
@include span(10); margin-bottom: spacing-vertical(base);
margin: 0 auto; }
font-weight: font-weight(semi-bold);
}
.accomplishment-type-symbol { .accomplishment-type-label, .accomplishment-type-symbol {
@include size(rem(100)); display: block;
margin: 0 auto spacing-vertical(small) auto; }
}
// statement .accomplishment-type-label {
.accomplishment-statement { @include span(10);
@extend %rendering-section;
@include text-align(center);
}
.accomplishment-statement-lead { margin: 0 auto;
@extend .hd-2; font-weight: font-weight(semi-bold);
} }
.accomplishment-recipient { .accomplishment-type-symbol {
@extend %rendering-accomplishment-line; @include size(rem(100));
}
.accomplishment-summary { margin: 0 auto spacing-vertical(small) auto;
@extend %rendering-accomplishment-line; }
margin-bottom: spacing-vertical(mid-small);
}
.accomplishment-course { // statement
@extend %rendering-accomplishment-line; .accomplishment-statement {
} @extend %rendering-section;
.accomplishment-course-org { @include text-align(center);
} }
.accomplishment-course-name { .accomplishment-statement-lead {
} @extend .hd-2;
}
.accomplishment-course-description { .accomplishment-recipient {
@extend %rendering-accomplishment-line; @extend %rendering-accomplishment-line;
} }
.accomplishment-statement-detail { .accomplishment-summary {
@extend %rendering-accomplishment-line; @extend %rendering-accomplishment-line;
}
margin-bottom: spacing-vertical(mid-small);
}
// organizations .accomplishment-course {
.accomplishment-orgs { @extend %rendering-accomplishment-line;
margin-bottom: spacing-vertical(base); }
.list-orgs { .accomplishment-course-org {
@extend %list-unstyled; }
}
}
.accomplishment-orgs-title { .accomplishment-course-name {
@extend %rendering-hd-section; }
}
// signatories .accomplishment-course-description {
.accomplishment-signatories { @extend %rendering-accomplishment-line;
@extend %rendering-section; }
.list-signatories { .accomplishment-statement-detail {
@extend %list-unstyled; @extend %rendering-accomplishment-line;
} }
.signatory-signature { // organizations
display: block; .accomplishment-orgs {
margin: 0 auto spacing-vertical(x-small) auto; margin-bottom: spacing-vertical(base);
}
.signatory-name, .signatory-credentials { .list-orgs {
@include text-align(center); @extend %list-unstyled;
} }
}
.signatory-name { .accomplishment-orgs-title {
margin-bottom: spacing-vertical(xx-small); @extend %rendering-hd-section;
} }
.signatory-credentials { // signatories
.accomplishment-signatories {
@extend %rendering-section;
.list-signatories {
@extend %list-unstyled;
}
.signatory-signature {
display: block;
margin: 0 auto spacing-vertical(x-small) auto;
}
.role, .organization { .signatory-name, .signatory-credentials {
white-space: pre-line; @include text-align(center);
display: block;
}
}
} }
.accomplishment-signatories-title { .signatory-name {
@extend %rendering-hd-section; margin-bottom: spacing-vertical(xx-small);
} }
.signatory-credentials {
.role, .organization {
white-space: pre-line;
display: block;
}
}
}
.accomplishment-signatories-title {
@extend %rendering-hd-section;
}
} }
// metadata // metadata
.accomplishment-metadata { .accomplishment-metadata {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
.metadata { .metadata {
@extend %list-unstyled; @extend %list-unstyled;
.label { .label {
@extend %copy-meta; @extend %copy-meta;
margin-bottom: spacing-vertical(xx-small);
}
.label-explanation { margin-bottom: spacing-vertical(xx-small);
display: block;
font-weight: font-weight(normal);
margin-top: spacing-vertical(xx-small);
}
.value {
@extend %copy-base;
font-weight: font-weight(semi-bold);
color: palette(grayscale, dark);
}
} }
.recipient-img, .recipient-details { .label-explanation {
display: inline-block; display: block;
vertical-align: middle; font-weight: font-weight(normal);
margin-top: spacing-vertical(xx-small);
} }
.recipient-img { .value {
@extend %img-cropped; @extend %copy-base;
width: rem(100);
@include margin-right(spacing-horizontal(small));
.src { font-weight: font-weight(semi-bold);
max-height: 100%; color: palette(grayscale, dark);
border: rem(4) solid $white;
}
} }
}
.recipient-details { .recipient-img, .recipient-details {
@extend %copy-base; display: inline-block;
font-weight: font-weight(semi-bold); vertical-align: middle;
max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px)); }
}
.recipient-name { .recipient-img {
margin-bottom: spacing-vertical(xx-small); @extend %img-cropped;
}
.recipient-username { width: rem(100);
margin-bottom: 0;
} @include margin-right(spacing-horizontal(small));
.accomplishment-id .value { .src {
word-wrap: break-word; max-height: 100%;
border: rem(4) solid $white;
} }
}
.recipient-details {
@extend %copy-base;
font-weight: font-weight(semi-bold);
max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
}
.recipient-name {
margin-bottom: spacing-vertical(xx-small);
}
.recipient-username {
margin-bottom: 0;
}
.accomplishment-id .value {
word-wrap: break-word;
}
} }
.accomplishment-metadata-title { .accomplishment-metadata-title {
@extend %hd-subsection; @extend %hd-subsection;
border-bottom-color: palette(grayscale, back);
border-bottom-color: palette(grayscale, back);
} }
// ------------------------------ // ------------------------------
...@@ -396,7 +406,7 @@ ...@@ -396,7 +406,7 @@
} }
.accomplishment-related-title { .accomplishment-related-title {
@extend %hd-subsection; @extend %hd-subsection;
} }
// ------------------------------ // ------------------------------
...@@ -404,127 +414,127 @@ ...@@ -404,127 +414,127 @@
// ------------------------------ // ------------------------------
// certficate - default // certficate - default
.certificate { .certificate {
.accomplishment-rendering {
.accomplishment-rendering { // decorative corners for certs
.deco-corner {
// decorative corners for certs position: absolute;
.deco-corner { }
position: absolute;
} .deco-corner-tl {
@include triangle(20px, $cert-base-color, up-right);
.deco-corner-tl {
@include triangle(20px, $cert-base-color, up-right);
top: 0;
right: 0;
}
.deco-corner-tr {
@include triangle(20px, $cert-base-color, up-left);
top: 0;
left: 0;
}
.deco-corner-bl {
@include triangle(20px, $cert-base-color, down-right);
bottom: 0;
right: 0;
}
.deco-corner-br {
@include triangle(20px, $cert-base-color, down-left);
bottom: 0;
left: 0;
}
.accomplishment-type-label {
color: $cert-base-color;
}
.accomplishment-signatories-title, .accomplishment-orgs-title {
color: $cert-decorative-color;
}
// statement
.accomplishment-statement,
.accomplishment-statement-lead,
.accomplishment-recipient,
.accomplishment-course,
{
font-family: $font-family-serif;
}
.accomplishment-recipient, top: 0;
.accomplishment-course { right: 0;
letter-spacing: rem(1);
}
} }
}
// certificate - base + honor .deco-corner-tr {
.layout-accomplishment.certificate-honor { @include triangle(20px, $cert-base-color, up-left);
top: 0;
left: 0;
}
.deco-corner-bl {
@include triangle(20px, $cert-base-color, down-right);
.introduction { bottom: 0;
margin-bottom: 0; right: 0;
} }
.accomplishment-main { .deco-corner-br {
background: palette(grayscale, x-back); @include triangle(20px, $cert-base-color, down-left);
bottom: 0;
left: 0;
} }
.accomplishment-rendering { .accomplishment-type-label {
color: $cert-base-color;
}
.accomplishment-type { .accomplishment-signatories-title, .accomplishment-orgs-title {
margin-top: 0; color: $cert-decorative-color;
} }
// hide the fancy // statement
.accomplishment-signatories .signatory-signature, .accomplishment-statement,
.accomplishment-type-symbol { .accomplishment-statement-lead,
display: none; .accomplishment-recipient,
} .accomplishment-course,
{
font-family: $font-family-serif;
}
.accomplishment-recipient,
.accomplishment-course {
letter-spacing: rem(1);
} }
}
} }
// certificate - distinguished + verified // certificate - base + honor
.layout-accomplishment.certificate-verified { .layout-accomplishment.certificate-honor {
.introduction {
margin-bottom: 0;
}
.introduction { .accomplishment-main {
margin-bottom: spacing-vertical(base); background: palette(grayscale, x-back);
}
.accomplishment-rendering {
.accomplishment-type {
margin-top: 0;
} }
.accomplishment-main { // hide the fancy
background: palette(primary, back); .accomplishment-signatories .signatory-signature,
.accomplishment-type-symbol {
display: none;
} }
}
}
.accomplishment-rendering { // certificate - distinguished + verified
background: $white url('../images/bg-verified.png') center no-repeat; .layout-accomplishment.certificate-verified {
background-size: 65%; .introduction {
margin-bottom: spacing-vertical(base);
}
.deco-corner-tl { .accomplishment-main {
@include triangle(20px, $cert-distinguished-color, up-right); background: palette(primary, back);
} }
.deco-corner-tr { .accomplishment-rendering {
@include triangle(20px, $cert-distinguished-color, up-left); background: $white url('../images/bg-verified.png') center no-repeat;
} background-size: 65%;
.deco-corner-bl { .deco-corner-tl {
@include triangle(20px, $cert-distinguished-color, down-right); @include triangle(20px, $cert-distinguished-color, up-right);
}
} .deco-corner-tr {
@include triangle(20px, $cert-distinguished-color, up-left);
}
.deco-corner-br { .deco-corner-bl {
@include triangle(20px, $cert-distinguished-color, down-left); @include triangle(20px, $cert-distinguished-color, down-right);
}
}
.deco-corner-br {
@include triangle(20px, $cert-distinguished-color, down-left);
} }
}
.accomplishment-rendering { .accomplishment-rendering {
border-color: $cert-distinguished-color; border-color: $cert-distinguished-color;
.accomplishment-type-label { .accomplishment-type-label {
color: $cert-distinguished-color; color: $cert-distinguished-color;
}
} }
}
} }
// ------------------------------ // ------------------------------
...@@ -538,82 +548,84 @@ ...@@ -538,82 +548,84 @@
// #FOOTER // #FOOTER
// ------------------------------ // ------------------------------
.footer-app { .footer-app {
border-top: rem(4) solid palette(grayscale, x-back); border-top: rem(4) solid palette(grayscale, x-back);
padding-top: spacing-vertical(base); padding-top: spacing-vertical(base);
} }
.footer-app-nav { .footer-app-nav {
.list {
.list { @extend %list-unstyled;
@extend %list-unstyled; }
}
} }
// ------------------------------ // ------------------------------
// #BADGES MODAL // #BADGES MODAL
// ------------------------------ // ------------------------------
.badges-overlay { .badges-overlay {
position: fixed;
top: 0;
left: 0;
z-index: z-index(front);
background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
width: 100%;
height: 100%;
vertical-align: middle;
.badges-modal {
@extend %copy-large;
box-sizing: content-box;
position: fixed; position: fixed;
top: 0; top: spacing-vertical(large);
right: 0;
left: 0; left: 0;
z-index: z-index(front); z-index: z-index(very-front);
background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */ max-width: 50%;
width: 100%; margin-right: auto;
height: 100%; margin-left: auto;
vertical-align: middle; border-top: rem(10) solid palette(primary, back);
background: palette(grayscale, x-back);
padding-right: spacing-horizontal(large);
padding-left: spacing-horizontal(large);
overflow-x: hidden;
color: palette(grayscale, dark);
.close {
position: absolute;
right: spacing-horizontal(mid-small);
top: spacing-vertical(small);
font-weight: font-weight(bold);
cursor: pointer;
}
.badges-modal { .badges-steps {
@extend %copy-large; display: table;
box-sizing: content-box;
position: fixed;
top: spacing-vertical(large);
right: 0;
left: 0;
z-index: z-index(very-front);
max-width: 50%;
margin-right: auto;
margin-left: auto;
border-top: rem(10) solid palette(primary, back);
background: palette(grayscale, x-back);
padding-right: spacing-horizontal(large);
padding-left: spacing-horizontal(large);
overflow-x: hidden;
color: palette(grayscale, dark);
.close {
position: absolute;
right: spacing-horizontal(mid-small);
top: spacing-vertical(small);
font-weight: font-weight(bold);
cursor: pointer;
}
.badges-steps {
display: table;
}
.image-container{
// Lines the image up with the content of the above list.
@include ltr {
@include padding-left(2em);
}
@include rtl {
@include padding-right(1em);
float: right;
}
}
.backpack-logo {
@include float(right);
@include margin-left(spacing-horizontal(small));
}
} }
.image-container{
// Lines the image up with the content of the above list.
@include ltr {
@include padding-left(2em);
}
@include rtl {
@include padding-right(1em);
float: right;
}
}
.backpack-logo {
@include float(right);
@include margin-left(spacing-horizontal(small));
}
}
} }
.modal-hr { .modal-hr {
display: block; display: block;
border: none; border: none;
background-color: palette(grayscale, back); background-color: palette(grayscale, back);
height: rem(2); height: rem(2);
width: 100%; width: 100%;
} }
lms/static/certificates/sass/_config.scss
...@@ -16,14 +16,13 @@ $cert-decorative-color-emphasized: palette(grayscale, accent); ...@@ -16,14 +16,13 @@ $cert-decorative-color-emphasized: palette(grayscale, accent);
// typography: config // typography: config
@include font-face( @include font-face(
'Domine', 'Domine',
'../../certificates/fonts/Domine/Domine-Regular-webfont', '../../certificates/fonts/Domine/Domine-Regular-webfont',
400, 400,
$file-formats: woff woff2 ttf $file-formats: woff woff2 ttf
); );
@include font-face( @include font-face(
'Domine', 'Domine',
'../../certificates/fonts/Domine/Domine-Bold-webfont', '../../certificates/fonts/Domine/Domine-Bold-webfont',
700, 700,
$file-formats: woff woff2 ttf $file-formats: woff woff2 ttf
......
lms/static/certificates/sass/_layouts.scss
...@@ -10,352 +10,365 @@ ...@@ -10,352 +10,365 @@
// #BASE // #BASE
// ------------------------------ // ------------------------------
%layout-wrapper { %layout-wrapper {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
padding: 0 5%; padding: 0 5%;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
padding: 0 2.5%; padding: 0 2.5%;
} }
} }
%layout { %layout {
@include grid-container(); @include grid-container();
} }
// app header // app header
.wrapper-header { .wrapper-header {
@extend %layout-wrapper; @extend %layout-wrapper;
padding-top: spacing-vertical(small);
padding-bottom: spacing-vertical(small); padding-top: spacing-vertical(small);
padding-bottom: spacing-vertical(small);
} }
.header-app { .header-app {
@extend %layout; @extend %layout;
.logo { .logo {
display: block; display: block;
@include size(rem(100) auto);
margin: 0 auto;
}
.logo-img { @include size(rem(100) auto);
display: block;
width: 100%; margin: 0 auto;
} }
.logo-img {
display: block;
width: 100%;
}
} }
.header-app-title { .header-app-title {
@include text-align(center); @include text-align(center);
@include span(12); @include span(12);
margin: 0;
margin: 0;
} }
// banner // banner
.wrapper-banner { .wrapper-banner {
@extend %layout-wrapper; @extend %layout-wrapper;
padding-top: spacing-vertical(small);
padding-bottom: spacing-vertical(small);
.banner { padding-top: spacing-vertical(small);
@extend %layout; padding-bottom: spacing-vertical(small);
}
.banner {
@extend %layout;
}
} }
// message to user-centric banner // message to user-centric banner
.wrapper-banner-user { .wrapper-banner-user {
margin-top: -(spacing-vertical(base)); // abut the global header, plz margin-top: -(spacing-vertical(base)); // abut the global header, plz
} }
.banner-user { .banner-user {
@include text-align(center); @include text-align(center);
@media(min-width: $bp-screen-lg) {
@include text-align(left);
}
@media(min-width: $bp-screen-lg) { .wrapper-copy-and-actions {
@include text-align(left); @include grid-container();
.message-copy {
margin-bottom: spacing-vertical(small);
} }
.wrapper-copy-and-actions { .message-actions {
@include grid-container(); @include span(12);
.action {
display: block;
width: 100%;
margin: 0 auto spacing-vertical(small) auto;
.message-copy { &:last-child {
margin-bottom: spacing-vertical(small); margin-bottom: 0;
} }
.message-actions { // CASE: icon display only
@include span(12); &.icon-only {
@media(min-width: $bp-screen-md) {
.action { padding: spacing-vertical(x-small) spacing-horizontal(base);
display: block;
width: 100%; .icon {
margin: 0 auto spacing-vertical(small) auto; @include margin-right(0);
&:last-child {
margin-bottom: 0;
}
// CASE: icon display only
&.icon-only {
@media(min-width: $bp-screen-md) {
padding: spacing-vertical(x-small) spacing-horizontal(base);
.icon {
@include margin-right(0);
}
}
}
@media(min-width: $bp-screen-md) {
display: inline-block;
vertical-align: middle;
min-width: 130px;
width: auto;
margin-bottom: 0;
margin-right: spacing-horizontal(mid-small);
&:last-child {
margin-right: 0;
}
}
} }
}
} }
@media(min-width: $bp-screen-md) {
display: inline-block;
vertical-align: middle;
min-width: 130px;
width: auto;
margin-bottom: 0;
margin-right: spacing-horizontal(mid-small);
&:last-child {
margin-right: 0;
}
}
}
} }
}
} }
// app footer // app footer
.wrapper-footer { .wrapper-footer {
@extend %layout-wrapper; @extend %layout-wrapper;
} }
.footer-app { .footer-app {
@extend %layout; @extend %layout;
} }
.footer-app-copyright { .footer-app-copyright {
@media(min-width: $bp-screen-md) {
@include span(6, after);
@media(min-width: $bp-screen-md) { margin-bottom: 0;
@include span(6, after); }
margin-bottom: 0;
}
} }
.footer-app-nav { .footer-app-nav {
@media(min-width: $bp-screen-md) {
@include span(6, before);
}
@media(min-width: $bp-screen-md) { .list {
@include span(6, before); .nav-item {
} display: block;
margin-bottom: spacing-vertical(x-small);
.list { @media(min-width: $bp-screen-md) {
display: inline-block;
vertical-align: middle;
.nav-item { @include margin-right(spacing-horizontal(base));
display: block;
margin-bottom: spacing-vertical(x-small);
@media(min-width: $bp-screen-md) { margin-bottom: 0;
display: inline-block; }
vertical-align: middle;
@include margin-right(spacing-horizontal(base));
margin-bottom: 0;
}
}
} }
}
.list-legal { .list-legal {
@media(min-width: $bp-screen-md) {
@media(min-width: $bp-screen-md) { @include text-align(right);
@include text-align(right);
}
} }
}
} }
// ------------------------------ // ------------------------------
// #ACCOMPLISHMENT // #ACCOMPLISHMENT
// ------------------------------ // ------------------------------
.layout-accomplishment { .layout-accomplishment {
.wrapper-introduction {
@extend %layout-wrapper;
.wrapper-introduction { margin-bottom: spacing-vertical(large);
@extend %layout-wrapper;
margin-bottom: spacing-vertical(large);
.introduction { .introduction {
@extend %layout; @extend %layout;
}
} }
}
.wrapper-accomplishment-rendering { .wrapper-accomplishment-rendering {
@extend %layout-wrapper; @extend %layout-wrapper;
margin-bottom: spacing-vertical(small);
margin-bottom: spacing-vertical(small);
}
.accomplishment-rendering {
@extend %layout;
position: relative;
top: -(spacing-vertical(base));
.accomplishment-course,
.accomplishment-recipient,
.accomplishment-type {
@include span(12);
} }
.accomplishment-rendering { .accomplishment-summary,
@extend %layout; .accomplishment-statement-detail {
position: relative; @include span(12);
top: -(spacing-vertical(base)); }
}
.accomplishment-course, .accomplishment-orgs {
.accomplishment-recipient, @include grid-row;
.accomplishment-type {
@include span(12);
}
.accomplishment-summary, .wrapper-orgs {
.accomplishment-statement-detail { @include text-align(center);
@include span(12);
}
} }
.accomplishment-orgs { .wrapper-organization {
@include grid-row; @include span(6);
@include margin-right(spacing-horizontal(base));
.wrapper-orgs { display: inline-block;
@include text-align(center); vertical-align: middle;
} height: rem(100);
margin-bottom: spacing-vertical(small);
.wrapper-organization { &:last-child {
@include span(6); @include margin-right(0);
@include margin-right(spacing-horizontal(base)); }
display: inline-block;
vertical-align: middle;
height: rem(100);
margin-bottom: spacing-vertical(small);
&:last-child { @media(min-width: $bp-screen-md) {
@include margin-right(0); @include span(3);
} }
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-lg) {
@include span(3); @include span(2);
} }
@media(min-width: $bp-screen-lg) { @media(min-width: $bp-screen-xl) {
@include span(2); @include span(2);
} }
}
@media(min-width: $bp-screen-xl) { .organization {
@include span(2); @include size(100%);
}
}
.organization { position: relative;
@include size(100%);
position: relative;
} }
.organization-logo { .organization-logo {
max-width: 80%; max-width: 80%;
position: absolute; position: absolute;
top: 50%; top: 50%;
@include left(50%);
transform: translate(-50%, -50%); @include left(50%);
}
transform: translate(-50%, -50%);
} }
}
.accomplishment-signatories { .accomplishment-signatories {
.wrapper-signatories {
@include text-align(center);
}
.wrapper-signatories { .signatory {
@include text-align(center); display: inline-block;
} vertical-align: middle;
.signatory { @include span(12);
display: inline-block;
vertical-align: middle;
@include span(12);
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
@include span(4); @include span(4);
} }
@media(min-width: $bp-screen-lg) { @media(min-width: $bp-screen-lg) {
@include span(3); @include span(3);
} }
@media(min-width: $bp-screen-xl) { @media(min-width: $bp-screen-xl) {
@include span(3); @include span(3);
} }
.signatory-signature { .signatory-signature {
display: block; display: block;
max-width: 100%; max-width: 100%;
max-height: rem(100); max-height: rem(100);
padding: spacing-vertical(small) spacing-horizontal(small); padding: spacing-vertical(small) spacing-horizontal(small);
} }
} }
}
.wrapper-accomplishment-metadata {
@extend %layout-wrapper;
.accomplishment-metadata {
@extend %layout;
.accomplishment-metadata-title {
@include span(12);
}
} }
.wrapper-accomplishment-metadata { .wrapper-metadata {
@extend %layout-wrapper; @extend %layout;
.accomplishment-metadata { .metadata {
@extend %layout; @extend %divider-2;
@include span(12);
margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-back);
padding-bottom: spacing-vertical(small);
.accomplishment-metadata-title { &:last-child {
@include span(12); border-bottom: none;
} padding-bottom: 0;
} }
.wrapper-metadata { @media(min-width: $bp-screen-md) {
@extend %layout; @include span(4);
.metadata { border-bottom: none;
@extend %divider-2; padding-bottom: 0;
@include span(12);
margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-back);
padding-bottom: spacing-vertical(small);
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
@media(min-width: $bp-screen-md) {
@include span(4);
border-bottom: none;
padding-bottom: 0;
}
}
} }
}
} }
}
.wrapper-accomplishment-related { .wrapper-accomplishment-related {
@extend %layout-wrapper; @extend %layout-wrapper;
.accomplishment-related { .accomplishment-related {
@extend %layout; @extend %layout;
} }
.accomplishment-brief { .accomplishment-brief {
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
@include span(6); @include span(6);
} }
.accomplishment-type-symbol { .accomplishment-type-symbol {
@include size(rem(50)); @include size(rem(50));
@include margin-right(spacing-horizontal(base)); @include margin-right(spacing-horizontal(base));
} }
}
} }
}
.wrapper-about { .wrapper-about {
@extend %layout-wrapper; @extend %layout-wrapper;
.about { .about {
@extend %layout; @extend %layout;
} }
.about-item { .about-item {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
@include span(6); @include span(6);
margin-bottom: 0;
} margin-bottom: 0;
} }
} }
}
} }
lms/static/certificates/sass/_print.scss
...@@ -15,39 +15,39 @@ ...@@ -15,39 +15,39 @@
// page set up - only available to modern browsers now // page set up - only available to modern browsers now
@page { @page {
size : landscape; size : landscape;
} }
@media print { @media print {
// helpers // helpers
%print-no-background { %print-no-background {
background: none !important; background: none !important;
} }
%print-hide { %print-hide {
display: none !important; display: none !important;
} }
%print-black-on-white { %print-black-on-white {
background: $white !important; background: $white !important;
color: $black !important; color: $black !important;
} }
%print-layout-wrapper { %print-layout-wrapper {
padding: 0 !important; padding: 0 !important;
} }
%print-rendering-section { %print-rendering-section {
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
border-bottom: none !important; border-bottom: none !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
&:last-child { &:last-child {
border: none; border: none;
padding-bottom: 0; padding-bottom: 0;
}
} }
}
} }
// ------------------------------ // ------------------------------
...@@ -55,40 +55,40 @@ ...@@ -55,40 +55,40 @@
// ------------------------------ // ------------------------------
@media print { @media print {
// prevent images from bleeding over the edge of the printed page // prevent images from bleeding over the edge of the printed page
img { img {
max-width: 100% !important; max-width: 100% !important;
} }
// prevent large elements from being split across multiple pages // prevent large elements from being split across multiple pages
ul, img { ul, img {
page-break-inside: avoid; page-break-inside: avoid;
} }
// reset body/view properties // reset body/view properties
html, html,
body { body {
@extend %print-black-on-white; @extend %print-black-on-white;
} }
body { body {
height: auto; height: auto;
margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important; margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
padding: 0; padding: 0;
} }
.wrapper-view { .wrapper-view {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
// force background images and colors // force background images and colors
@media print and (color) { @media print and (color) {
* { * {
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
} }
// ------------------------------ // ------------------------------
...@@ -96,25 +96,25 @@ ...@@ -96,25 +96,25 @@
// ------------------------------ // ------------------------------
@media print { @media print {
// hide elements not needed for print rendering // hide elements not needed for print rendering
.wrapper-banner-user, .wrapper-banner-user,
.wrapper-about, .wrapper-about,
.wrapper-footer, .wrapper-footer,
.wrapper-header, .wrapper-header,
.wrapper-introduction, .wrapper-introduction,
.accomplishment-metadata-title, .accomplishment-metadata-title,
.accomplishment-metadata .accomplishment-recipient, .accomplishment-metadata .accomplishment-recipient,
.deco-corner, .deco-corner,
.accomplishment-date .label { .accomplishment-date .label {
@extend %print-hide; @extend %print-hide;
} }
// remove layout wrappers' padding // remove layout wrappers' padding
.wrapper-introduction, .wrapper-introduction,
.wrapper-accomplishment-rendering, .wrapper-accomplishment-rendering,
.wrapper-accomplishment-metadata { .wrapper-accomplishment-metadata {
@extend %print-layout-wrapper; @extend %print-layout-wrapper;
} }
} }
// ------------------------------ // ------------------------------
...@@ -122,204 +122,211 @@ ...@@ -122,204 +122,211 @@
// ------------------------------ // ------------------------------
@media print { @media print {
// headings // headings
.hd-1 { .hd-1 {
font-size: font-size(x-large); font-size: font-size(x-large);
line-height: line-height(x-large); line-height: line-height(x-large);
}
.hd-2 {
font-size: font-size(large);
line-height: line-height(large);
}
.hd-3 {
font-size: font-size(large);
line-height: line-height(large);
}
.hd-4 {
font-size: font-size(base);
line-height: line-height(base);
}
.hd-5 {
font-size: font-size(small);
line-height: line-height(small);
}
.hd-6 {
font-size: font-size(x-small);
line-height: line-height(x-small);
}
.hd-7 {
font-size: font-size(xx-small);
line-height: line-height(x-small);
}
// copy
.copy-lead {
font-size: font-size(base);
line-height: line-height(base);
}
.copy-large {
font-size: font-size(base);
line-height: line-height(base);
}
.copy-base {
font-size: font-size(small);
line-height: line-height(small);
}
.copy-meta {
font-size: font-size(x-small);
line-height: line-height(small);
}
.copy-micro {
font-size: font-size(xx-small);
line-height: line-height(x-small);
}
// accomplishment
.accomplishment-main {
@extend %print-no-background;
}
.accomplishment-rendering {
top: 0 !important;
border: rem(1) solid palette(grayscale, back);
border-top: rem(2) solid $cert-base-color;
box-shadow: none;
padding: spacing-vertical(small) spacing-horizontal(mid-large);
.accomplishment-type {
margin-top: -(spacing-vertical(mid-large));
} }
.hd-2 { .accomplishment-type-symbol {
font-size: font-size(large); @include size(rem(75));
line-height: line-height(large);
}
.hd-3 { border: none !important;
font-size: font-size(large);
line-height: line-height(large);
} }
.hd-4 { .wrapper-statement-and-signatories {
font-size: font-size(base); border-bottom: rem(2) solid palette(grayscale, x-back);
line-height: line-height(base);
} }
.hd-5 { .accomplishment-statement {
font-size: font-size(small); @extend %print-rendering-section;
line-height: line-height(small);
}
.hd-6 { @include span(8);
font-size: font-size(x-small);
line-height: line-height(x-small);
}
.hd-7 { margin: 0 auto;
font-size: font-size(xx-small);
line-height: line-height(x-small);
} }
// copy .accomplishment-summary,
.copy-lead { .accomplishment-statement-detail {
font-size: font-size(base); margin-bottom: spacing-vertical(mid-small);
line-height: line-height(base);
} }
.copy-large { .wrapper-orgs::after {
font-size: font-size(base); display: none;
line-height: line-height(base);
} }
.copy-base { .accomplishment-orgs {
font-size: font-size(small); margin-bottom: 0 !important;
line-height: line-height(small); border-bottom: none !important;
padding-bottom: 0 !important;
.wrapper-organization {
height: rem(48);
margin-top: spacing-vertical(mid-small) !important;
margin-bottom: spacing-vertical(mid-small) !important;
}
.organization-logo {
max-width: 100%;
max-height: 80%;
}
} }
.copy-meta { .accomplishment-signatories {
font-size: font-size(x-small); @extend %print-rendering-section;
line-height: line-height(small);
}
.copy-micro { @include span(12, before);
font-size: font-size(xx-small);
line-height: line-height(x-small);
}
// accomplishment .signatory-credentials {
.accomplishment-main { font-size: 8pt;
@extend %print-no-background; line-height: 1.3;
} }
.accomplishment-rendering { .signatory-signature {
top: 0 !important; height: spacing-vertical(small);
border: rem(1) solid palette(grayscale, back); max-width: 100%;
border-top: rem(2) solid $cert-base-color; margin-top: 0;
box-shadow: none; padding-top: 0 !important;
padding: spacing-vertical(small) spacing-horizontal(mid-large); padding-bottom: 0 !important;
}
.signatory-name {
font-size: font-size(x-small);
}
.accomplishment-type { .signatory-credentials {
margin-top: -(spacing-vertical(mid-large)); margin-bottom: 0 !important;
} }
.accomplishment-type-symbol { // CASE: > 4 signatures
@include size(rem(75)); &.has-many {
border: none !important; .signatory {
@include span(2);
} }
}
}
}
.wrapper-statement-and-signatories { .layout-accomplishment .wrapper-accomplishment-metadata {
border-bottom: rem(2) solid palette(grayscale, x-back); margin-bottom: 0;
} }
.accomplishment-statement { .accomplishment-metadata {
@extend %print-rendering-section; margin-bottom: 0;
@include span(8);
margin: 0 auto;
}
.accomplishment-summary, .wrapper-metadata {
.accomplishment-statement-detail { @include clearfix();
margin-bottom: spacing-vertical(mid-small);
}
.wrapper-orgs::after { margin-bottom: 0;
display: none;
}
.accomplishment-orgs { .metadata {
margin-bottom: 0 !important; margin-bottom: 0;
border-bottom: none !important; border-bottom: none !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
.wrapper-organization {
height: rem(48);
margin-top: spacing-vertical(mid-small) !important;
margin-bottom: spacing-vertical(mid-small) !important;
}
.organization-logo {
max-width: 100%;
max-height: 80%;
}
}
.accomplishment-signatories { .label, .value {
@extend %print-rendering-section; display: inline-block;
@include span(12, before); vertical-align: baseline;
font-size: font-size(x-small);
.signatory-credentials { line-height: line-height(small);
font-size: 8pt;
line-height: 1.3;
}
.signatory-signature {
height: spacing-vertical(small);
max-width: 100%;
margin-top: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.signatory-name {
font-size: font-size(x-small);
}
.signatory-credentials {
margin-bottom: 0 !important;
}
// CASE: > 4 signatures
&.has-many {
.signatory {
@include span(2);
}
}
} }
}
.layout-accomplishment .wrapper-accomplishment-metadata { .label {
margin-bottom: 0; @include margin-right(spacing-horizontal(small));
}
}
} }
.accomplishment-metadata { .accomplishment-id {
margin-bottom: 0; float: left;
width: 65% !important;
margin: 0 !important;
.wrapper-metadata { @include text-align(left);
@include clearfix(); }
margin-bottom: 0;
.metadata {
margin-bottom: 0;
border-bottom: none !important;
padding-bottom: 0 !important;
.label, .value {
display: inline-block;
vertical-align: baseline;
font-size: font-size(x-small);
line-height: line-height(small);
}
.label {
@include margin-right(spacing-horizontal(small));
}
}
}
.accomplishment-id {
float: left;
width: 65% !important;
margin: 0 !important;
@include text-align(left);
}
.accomplishment-date { .accomplishment-date {
float: right; float: right;
width: 35% !important; width: 35% !important;
margin: 0 !important; margin: 0 !important;
@include text-align(right);
}
@include text-align(right);
} }
}
} }
// ------------------------------ // ------------------------------
...@@ -327,12 +334,10 @@ ...@@ -327,12 +334,10 @@
// ------------------------------ // ------------------------------
// certificate - distinguished // certificate - distinguished
@media print { @media print {
.certificate-distinguished {
.certificate-distinguished { .accomplishment-rendering {
border-top-color: $cert-distinguished-color;
.accomplishment-rendering {
border-top-color: $cert-distinguished-color;
}
} }
}
} }
lms/static/certificates/sass/_utilities.scss
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
// ------------------------------ // ------------------------------
// visual dividers // visual dividers
%divider-1 { %divider-1 {
border-bottom-width: rem(4); border-bottom-width: rem(4);
border-bottom-style: solid; border-bottom-style: solid;
} }
%divider-2 { %divider-2 {
border-bottom-width: rem(2); border-bottom-width: rem(2);
border-bottom-style: solid; border-bottom-style: solid;
} }
lms/static/certificates/sass/_views.scss
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
// #INVALID // #INVALID
// ------------------------------ // ------------------------------
.wrapper-content.status-invalid { .wrapper-content.status-invalid {
@extend %layout-wrapper; @extend %layout-wrapper;
.wrapper-content-grid { .wrapper-content-grid {
@extend %layout; @extend %layout;
} }
.content-main { .content-main {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
} }
.content-secondary { .content-secondary {
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
@include span(3, before); @include span(3, before);
} }
......
lms/static/certificates/sass/main-ltr.scss
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
// Load the LTR version of the edX Pattern Library // Load the LTR version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default; $pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
// Load the shared build // Load the shared build
......
lms/static/certificates/sass/main-rtl.scss
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
// Load the RTL version of the edX Pattern Library // Load the RTL version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default; $pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
// Load the shared build // Load the shared build
......
lms/static/sass/base/_animations.scss
...@@ -303,11 +303,11 @@ ...@@ -303,11 +303,11 @@
} }
} }
@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; } @-webkit-keyframes fade-in-animation { @include fade-in-keyframes; }
@-moz-keyframes fade-in-animation{ @include fade-in-keyframes; } @-moz-keyframes fade-in-animation { @include fade-in-keyframes; }
@keyframes fade-in-animation{ @include fade-in-keyframes; } @keyframes fade-in-animation { @include fade-in-keyframes; }
// +utility animations // +utility animations
......
lms/static/sass/base/_base.scss
...@@ -12,7 +12,7 @@ html, body { ...@@ -12,7 +12,7 @@ html, body {
line-height: 1em; line-height: 1em;
} }
html{ html {
background: white; background: white;
} }
......
lms/static/sass/course/_auto-cert.scss
...@@ -18,14 +18,14 @@ ...@@ -18,14 +18,14 @@
.has-actions { .has-actions {
.msg-content { .msg-content {
width: flex-grid(9,12); width: flex-grid(9, 12);
} }
.msg-actions { .msg-actions {
@extend %t-copy-base; @extend %t-copy-base;
display: inline-block; display: inline-block;
width: flex-grid(3,12); width: flex-grid(3, 12);
.btn { .btn {
@extend %btn-primary-blue; @extend %btn-primary-blue;
......
lms/static/sass/course/_info.scss
...@@ -5,7 +5,7 @@ $notification-highlight-border-color: $uxpl-green-base !default; ...@@ -5,7 +5,7 @@ $notification-highlight-border-color: $uxpl-green-base !default;
$lms-border-color: $uxpl-gray-background !default; $lms-border-color: $uxpl-gray-background !default;
$notification-background: rgb(255, 255, 255) !default $notification-background: rgb(255, 255, 255) !default
.home{ .home {
@include clearfix(); @include clearfix();
max-width: 1140px; max-width: 1140px;
......
lms/static/sass/course/_profile.scss
...@@ -39,7 +39,8 @@ ...@@ -39,7 +39,8 @@
@include transition(none); @include transition(none);
div#location_sub, div#language_sub { div#location_sub,
div#language_sub {
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
...@@ -54,9 +55,6 @@ ...@@ -54,9 +55,6 @@
margin: lh(0.5) 0; margin: lh(0.5) 0;
width: 100%; width: 100%;
} }
&[type="input"]{
}
} }
&:empty { &:empty {
...@@ -80,7 +78,8 @@ ...@@ -80,7 +78,8 @@
text-transform: uppercase; text-transform: uppercase;
top: 9px; top: 9px;
&:hover, &:focus { &:hover,
&:focus {
color: #555; color: #555;
} }
} }
...@@ -111,7 +110,8 @@ ...@@ -111,7 +110,8 @@
text-transform: uppercase; text-transform: uppercase;
top: 9px; top: 9px;
&:hover, &:focus { &:hover,
&:focus {
color: #555; color: #555;
} }
} }
...@@ -171,7 +171,8 @@ ...@@ -171,7 +171,8 @@
padding: 5px 18px 6px; padding: 5px 18px 6px;
text-align: center; text-align: center;
&:hover, &:focus { &:hover,
&:focus {
text-decoration: none; text-decoration: none;
} }
} }
...@@ -182,7 +183,7 @@ ...@@ -182,7 +183,7 @@
width: 100%; width: 100%;
} }
> .credit-eligibility{ > .credit-eligibility {
border-top: 1px solid $lightGrey; border-top: 1px solid $lightGrey;
margin-top: lh(); margin-top: lh();
...@@ -205,7 +206,7 @@ ...@@ -205,7 +206,7 @@
@include padding-left(0.2em); @include padding-left(0.2em);
} }
> .detail-collapse{ > .detail-collapse {
border: none; border: none;
box-shadow: none; box-shadow: none;
background: $white; background: $white;
...@@ -216,7 +217,7 @@ ...@@ -216,7 +217,7 @@
padding: lh(0.25); padding: lh(0.25);
} }
> span{ > span {
color: inherit; color: inherit;
} }
} }
...@@ -224,7 +225,7 @@ ...@@ -224,7 +225,7 @@
> .requirement-container { > .requirement-container {
padding: lh(); padding: lh();
> .requirement{ > .requirement {
border-bottom: 1px solid $lightGrey; border-bottom: 1px solid $lightGrey;
padding: lh(0.5); padding: lh(0.5);
...@@ -233,26 +234,26 @@ ...@@ -233,26 +234,26 @@
display: inline-block; display: inline-block;
} }
> .requirement-status{ > .requirement-status {
width: bi-app-invert-percentage(60%); width: bi-app-invert-percentage(60%);
@include float(right); @include float(right);
display: inline-block; display: inline-block;
.fa-times{ .fa-times {
@extend %t-icon6; @extend %t-icon6;
color: $alert-color; color: $alert-color;
} }
.fa-check{ .fa-check {
@extend %t-icon6; @extend %t-icon6;
color: $success-color; color: $success-color;
} }
> .not-achieve{ > .not-achieve {
color: $darkGrey; color: $darkGrey;
} }
} }
...@@ -300,7 +301,7 @@ ...@@ -300,7 +301,7 @@
width: flex-grid(7, 9); width: flex-grid(7, 9);
> div { > div {
padding:0 0 lh() 0; padding: 0 0 lh() 0;
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
......
lms/static/sass/course/base/_base.scss
...@@ -104,7 +104,7 @@ input[type="password"] { ...@@ -104,7 +104,7 @@ input[type="password"] {
&:focus { &:focus {
border-color: lighten($link-color, 20%); border-color: lighten($link-color, 20%);
box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15); box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0, 0,0, 0.15);
} }
} }
......
lms/static/sass/course/instructor/_email.scss
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
} }
.email-background{ .email-background {
.content-history-email-table { .content-history-email-table {
display: none; display: none;
} }
......
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
} }
} }
#ui-datepicker-div{z-index: 12000 !important; width: 16.5em !important} #ui-datepicker-div {
z-index: 12000 !important;
width: 16.5em !important;
}
.instructor-dashboard-wrapper-2 { .instructor-dashboard-wrapper-2 {
...@@ -27,7 +30,7 @@ ...@@ -27,7 +30,7 @@
@include font-size(16); @include font-size(16);
} }
.studio-edit-link{ .studio-edit-link {
position: absolute; position: absolute;
top: 40px; top: 40px;
...@@ -83,7 +86,7 @@ ...@@ -83,7 +86,7 @@
// TYPE: confirm // TYPE: confirm
.msg-confirm { .msg-confirm {
display: none; display: none;
background: tint($confirm-color,95%); background: tint($confirm-color, 95%);
border-top: 2px solid $confirm-color; border-top: 2px solid $confirm-color;
color: $confirm-color; color: $confirm-color;
} }
...@@ -98,9 +101,9 @@ ...@@ -98,9 +101,9 @@
} }
} }
.msg-success{ .msg-success {
border-top: 2px solid $confirm-color; border-top: 2px solid $confirm-color;
background: tint($confirm-color,95%); background: tint($confirm-color, 95%);
color: $confirm-color; color: $confirm-color;
} }
...@@ -141,7 +144,7 @@ ...@@ -141,7 +144,7 @@
} }
} }
} }
.btn-blue { .btn-blue {
@extend %btn-primary-blue; @extend %btn-primary-blue;
...@@ -526,22 +529,23 @@ ...@@ -526,22 +529,23 @@
input[name="send_to"] { input[name="send_to"] {
float: left; float: left;
margin-top: .3em; margin-top: 0.3em;
margin-left: .1em; margin-left: 0.1em;
} }
input[name="send_to"]+label { input[name="send_to"] + label {
display: block; display: block;
padding-left: 1.3em; padding-left: 1.3em;
margin-bottom: 0; margin-bottom: 0;
} }
input[name="send_to"]:checked+label { input[name="send_to"]:checked + label {
// "bolds" the text without causing a width recalculation // "bolds" the text without causing a width recalculation
text-shadow: 1px 0 0; text-shadow: 1px 0 0;
} }
input[name="send_to"]:focus+label, input[name="send_to"]:hover:not([disabled])+label { input[name="send_to"]:focus + label,
input[name="send_to"]:hover:not([disabled]) + label {
background-color: #efefef; background-color: #efefef;
* { * {
...@@ -549,7 +553,7 @@ ...@@ -549,7 +553,7 @@
} }
} }
input[name="send_to"]:disabled+label { input[name="send_to"]:disabled + label {
font-weight: lighter; font-weight: lighter;
background-color: $light-gray3 background-color: $light-gray3
} }
...@@ -596,7 +600,7 @@ ...@@ -596,7 +600,7 @@
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
legend { legend {
// use the same styles as H3s // use the same styles as H3s
font-size: 1.2em; font-size: 1.2em;
...@@ -671,14 +675,14 @@ ...@@ -671,14 +675,14 @@
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
} }
/* *** /* ***
* Ideally we want to handle functionality with JS. * Ideally we want to handle functionality with JS.
* This functionality should eventually be moved into CS/JS, and out of here. */ * This functionality should eventually be moved into CS/JS, and out of here. */
.has-hint:hover > .hint { .has-hint:hover > .hint {
@include left($baseline*10); @include left($baseline*10);
} }
.has-hint input:focus ~ .hint { .has-hint input:focus ~ .hint {
@include left($baseline*10); @include left($baseline*10);
} }
...@@ -799,7 +803,8 @@ ...@@ -799,7 +803,8 @@
color: $lighter-base-font-color; color: $lighter-base-font-color;
cursor: pointer; cursor: pointer;
&:hover, &:focus { &:hover,
&:focus {
color: $alert-color; color: $alert-color;
} }
} }
...@@ -1091,7 +1096,7 @@ ...@@ -1091,7 +1096,7 @@
text-shadow: none; text-shadow: none;
padding: 0; padding: 0;
color: $uxpl-blue-base; color: $uxpl-blue-base;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: underline; text-decoration: underline;
...@@ -1385,7 +1390,7 @@ ...@@ -1385,7 +1390,7 @@
padding-top: ($baseline/2); padding-top: ($baseline/2);
} }
.divided-discussion-text{ .divided-discussion-text {
color: $uxpl-blue-base; color: $uxpl-blue-base;
} }
...@@ -1446,7 +1451,7 @@ ...@@ -1446,7 +1451,7 @@
// view - data download // view - data download
// -------------------- // --------------------
.instructor-dashboard-wrapper-2 section.idash-section#data_download{ .instructor-dashboard-wrapper-2 section.idash-section#data_download {
input { input {
margin-bottom: 1em; margin-bottom: 1em;
line-height: 1.3em; line-height: 1.3em;
...@@ -1658,13 +1663,13 @@ input[name="subject"] { ...@@ -1658,13 +1663,13 @@ input[name="subject"] {
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
span{ span {
@include float(right); @include float(right);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
span{ span {
background: #ddd; background: #ddd;
padding: 2px 9px; padding: 2px 9px;
border-radius: 2px; border-radius: 2px;
...@@ -1674,7 +1679,7 @@ input[name="subject"] { ...@@ -1674,7 +1679,7 @@ input[name="subject"] {
} }
} }
span.tip{ span.tip {
display: block; display: block;
padding: 10px 15px; padding: 10px 15px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
...@@ -1683,7 +1688,7 @@ input[name="subject"] { ...@@ -1683,7 +1688,7 @@ input[name="subject"] {
color: #3c3c3c; color: #3c3c3c;
line-height: 30px; line-height: 30px;
.add{ .add {
@include button(simple, $uxpl-blue-base); @include button(simple, $uxpl-blue-base);
@extend .button-reset; @extend .button-reset;
...@@ -1696,7 +1701,7 @@ input[name="subject"] { ...@@ -1696,7 +1701,7 @@ input[name="subject"] {
} }
#e-commerce{ #e-commerce {
input[name='list-order-sale-csv'] { input[name='list-order-sale-csv'] {
@include margin-right(14px); @include margin-right(14px);
} }
...@@ -1749,7 +1754,7 @@ input[name="subject"] { ...@@ -1749,7 +1754,7 @@ input[name="subject"] {
display: none; display: none;
} }
.content{ .content {
padding: 0 !important; padding: 0 !important;
} }
...@@ -1770,15 +1775,15 @@ input[name="subject"] { ...@@ -1770,15 +1775,15 @@ input[name="subject"] {
border-bottom: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3;
} }
tr.always-gray{ tr.always-gray {
background: #eee !important; background: #eee !important;
border-top: 2px solid $white; border-top: 2px solid $white;
} }
tr.always-white{ tr.always-white {
background: #fff !important; background: #fff !important;
td{ td {
padding: ($baseline*1.5) 0 ($baseline/2); padding: ($baseline*1.5) 0 ($baseline/2);
} }
} }
...@@ -1792,7 +1797,7 @@ input[name="subject"] { ...@@ -1792,7 +1797,7 @@ input[name="subject"] {
width: 120px; width: 120px;
} }
th:first-child{ th:first-child {
padding-left: $baseline; padding-left: $baseline;
} }
...@@ -1826,7 +1831,7 @@ input[name="subject"] { ...@@ -1826,7 +1831,7 @@ input[name="subject"] {
width: 60px; width: 60px;
} }
&.c_dsc{ &.c_dsc {
width: 200px; width: 200px;
word-wrap: break-word; word-wrap: break-word;
} }
...@@ -1834,22 +1839,22 @@ input[name="subject"] { ...@@ -1834,22 +1839,22 @@ input[name="subject"] {
} }
// in_active coupon rows style // in_active coupon rows style
.inactive_coupon{ .inactive_coupon {
background: #fff0f0 !important; background: #fff0f0 !important;
text-decoration: line-through; text-decoration: line-through;
color: rgba(51,51,51,0.2); color: rgba(51, 51, 51, 0.2);
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
td { td {
a { a {
color: rgba(51,51,51,0.2); color: rgba(51, 51, 51, 0.2);
} }
} }
} }
// in_active coupon rows style // in_active coupon rows style
.expired_coupon{ .expired_coupon {
background: #feefb3 !important; background: #feefb3 !important;
color: rgba(51,51,51,0.2); color: rgba(51, 51, 51, 0.2);
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
td:nth-child(3) { td:nth-child(3) {
...@@ -1865,7 +1870,7 @@ input[name="subject"] { ...@@ -1865,7 +1870,7 @@ input[name="subject"] {
line-height: normal; line-height: normal;
font-size: 14px; font-size: 14px;
span.old-price{ span.old-price {
top: -1px; top: -1px;
@include left(-75px); @include left(-75px);
...@@ -1877,7 +1882,7 @@ input[name="subject"] { ...@@ -1877,7 +1882,7 @@ input[name="subject"] {
} }
} }
td:nth-child(5),td:first-child{ td:nth-child(5),td:first-child {
@include padding-left($baseline); @include padding-left($baseline);
} }
...@@ -1895,8 +1900,8 @@ input[name="subject"] { ...@@ -1895,8 +1900,8 @@ input[name="subject"] {
text-align: center; text-align: center;
} }
td{ td {
a.edit-right{ a.edit-right {
@include margin-left(15px); @include margin-left(15px);
} }
} }
...@@ -1910,7 +1915,7 @@ input[name="subject"] { ...@@ -1910,7 +1915,7 @@ input[name="subject"] {
} }
// coupon edit and add modals // coupon edit and add modals
#add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal, #add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal,
#set-course-mode-price-modal, #registration_code_generation_modal{ #set-course-mode-price-modal, #registration_code_generation_modal {
.inner-wrapper { .inner-wrapper {
background: $white; background: $white;
} }
...@@ -1960,8 +1965,8 @@ input[name="subject"] { ...@@ -1960,8 +1965,8 @@ input[name="subject"] {
background: #fbf2f3; background: #fbf2f3;
} }
ol.list-input{ ol.list-input {
li{ li {
width: 278px; width: 278px;
@include float(left); @include float(left);
...@@ -1991,12 +1996,12 @@ input[name="subject"] { ...@@ -1991,12 +1996,12 @@ input[name="subject"] {
} }
} }
li:last-child{ li:last-child {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
table.tb_registration_code_status{ table.tb_registration_code_status {
margin-top: $baseline; margin-top: $baseline;
color: #555; color: #555;
...@@ -2014,15 +2019,15 @@ input[name="subject"] { ...@@ -2014,15 +2019,15 @@ input[name="subject"] {
tr td:last-child { tr td:last-child {
text-align: center; text-align: center;
a:first-child{ a:first-child {
margin-right: 10px; margin-right: 10px;
} }
} }
} }
} }
form#generate_codes ol.list-input{ form#generate_codes ol.list-input {
li{ li {
width: 278px; width: 278px;
@include float(left); @include float(left);
...@@ -2041,7 +2046,7 @@ input[name="subject"] { ...@@ -2041,7 +2046,7 @@ input[name="subject"] {
} }
li#generate-registration-modal-field-city, li#generate-registration-modal-field-state, li#generate-registration-modal-field-city, li#generate-registration-modal-field-state,
li#generate-registration-modal-field-zipcode{ li#generate-registration-modal-field-zipcode {
width: 205px; width: 205px;
} }
...@@ -2067,7 +2072,7 @@ input[name="subject"] { ...@@ -2067,7 +2072,7 @@ input[name="subject"] {
@include margin-left(15px !important); @include margin-left(15px !important);
} }
li:last-child{ li:last-child {
label { label {
@include float(right); @include float(right);
@include right(27px); @include right(27px);
...@@ -2096,7 +2101,7 @@ input[name="subject"] { ...@@ -2096,7 +2101,7 @@ input[name="subject"] {
} }
} }
li#set-course-mode-modal-field-price{ li#set-course-mode-modal-field-price {
width: 100%; width: 100%;
label.required::after { label.required::after {
...@@ -2105,7 +2110,7 @@ input[name="subject"] { ...@@ -2105,7 +2110,7 @@ input[name="subject"] {
} }
} }
li#set-course-mode-modal-field-currency{ li#set-course-mode-modal-field-currency {
@include margin-left(0px !important); @include margin-left(0px !important);
select { select {
...@@ -2206,12 +2211,25 @@ input[name="subject"] { ...@@ -2206,12 +2211,25 @@ input[name="subject"] {
} }
} }
#add-coupon-modal{ #add-coupon-modal {
ol.list-input{ ol.list-input {
li{ li {
input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;} input[type="checkbox"]#expiry-check,
&.full-width{width: 100%;} input[type="checkbox"]#expiry-check + label {
input#coupon_expiration_date{width: 278px;display: inline-block;float: right;} display: inline-block;
width: auto;
margin-top: 10px;
}
&.full-width {
width: 100%;
}
input#coupon_expiration_date {
width: 278px;
display: inline-block;
float: right;
}
} }
} }
} }
...@@ -2229,7 +2247,7 @@ input[name="subject"] { ...@@ -2229,7 +2247,7 @@ input[name="subject"] {
} }
input[name="subject"] { input[name="subject"] {
width:600px; width: 600px;
} }
.enrollment-wrapper { .enrollment-wrapper {
...@@ -2248,13 +2266,13 @@ input[name="subject"] { ...@@ -2248,13 +2266,13 @@ input[name="subject"] {
@include padding-left(25px); @include padding-left(25px);
span{ span {
@include float(right); @include float(right);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
span{ span {
float: none; float: none;
padding: 2px 9px; padding: 2px 9px;
background: #ddd; background: #ddd;
...@@ -2264,7 +2282,7 @@ input[name="subject"] { ...@@ -2264,7 +2282,7 @@ input[name="subject"] {
} }
} }
span.tip{ span.tip {
display: block; display: block;
padding: 10px 15px; padding: 10px 15px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
...@@ -2273,7 +2291,7 @@ input[name="subject"] { ...@@ -2273,7 +2291,7 @@ input[name="subject"] {
color: #3c3c3c; color: #3c3c3c;
line-height: 30px; line-height: 30px;
.add{ .add {
@include button(simple, $uxpl-blue-base); @include button(simple, $uxpl-blue-base);
@extend .button-reset; @extend .button-reset;
...@@ -2301,7 +2319,7 @@ input[name="subject"] { ...@@ -2301,7 +2319,7 @@ input[name="subject"] {
color: #3c3c3c; color: #3c3c3c;
line-height: 30px; line-height: 30px;
.add{ .add {
@include button(simple, $uxpl-blue-base); @include button(simple, $uxpl-blue-base);
@extend .button-reset; @extend .button-reset;
...@@ -2317,7 +2335,7 @@ input[name="subject"] { ...@@ -2317,7 +2335,7 @@ input[name="subject"] {
@include padding(($baseline/2) 15px ($baseline/2) 1px); @include padding(($baseline/2) 15px ($baseline/2) 1px);
.add{ .add {
font-size: em(13); font-size: em(13);
} }
} }
...@@ -2333,7 +2351,7 @@ input[name="subject"] { ...@@ -2333,7 +2351,7 @@ input[name="subject"] {
color: #3c3c3c; color: #3c3c3c;
line-height: 30px; line-height: 30px;
.add{ .add {
@include button(simple, $uxpl-blue-base); @include button(simple, $uxpl-blue-base);
@extend .button-reset; @extend .button-reset;
...@@ -2360,7 +2378,7 @@ input[name="subject"] { ...@@ -2360,7 +2378,7 @@ input[name="subject"] {
text-align: center; text-align: center;
} }
th:first-child{ th:first-child {
padding-left: $baseline; padding-left: $baseline;
} }
...@@ -2434,7 +2452,7 @@ input[name="subject"] { ...@@ -2434,7 +2452,7 @@ input[name="subject"] {
font-size: 14px; font-size: 14px;
} }
td:first-child{ td:first-child {
@include padding-left($baseline); @include padding-left($baseline);
} }
...@@ -2602,7 +2620,7 @@ input[name="subject"] { ...@@ -2602,7 +2620,7 @@ input[name="subject"] {
} }
.certificates-wrapper { .certificates-wrapper {
.message{ .message {
@extend %exception-message; @extend %exception-message;
} }
} }
...@@ -2617,23 +2635,23 @@ input[name="subject"] { ...@@ -2617,23 +2635,23 @@ input[name="subject"] {
border-top: 7px solid #646464; border-top: 7px solid #646464;
} }
.certificate-generation-history{ .certificate-generation-history {
table{ table {
thead{ thead {
tr { tr {
td.task-name{ td.task-name {
width: 150px; width: 150px;
} }
td.task-date{ td.task-date {
width: 200px; width: 200px;
} }
} }
} }
tbody{ tbody {
tr { tr {
td{ td {
padding: 5px; padding: 5px;
vertical-align: middle; vertical-align: middle;
text-align: left;; text-align: left;;
...@@ -2685,7 +2703,7 @@ input[name="subject"] { ...@@ -2685,7 +2703,7 @@ input[name="subject"] {
text-align: left; text-align: left;
color: $gray; color: $gray;
&.date{ &.date {
width: 150px; width: 150px;
} }
......
lms/static/sass/course/layout/_courseware_header.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
padding: 0; padding: 0;
width: 100%; width: 100%;
.course-material{ .course-material {
@extend %inner-wrapper; @extend %inner-wrapper;
} }
......
lms/static/sass/course/wiki/_wiki.scss
...@@ -243,7 +243,7 @@ ...@@ -243,7 +243,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
.timestamp{ .timestamp {
margin-top: ($baseline*0.75); margin-top: ($baseline*0.75);
padding: 15px 0 0 10px; padding: 15px 0 0 10px;
border-top: 1px solid $light-gray; border-top: 1px solid $light-gray;
...@@ -597,7 +597,7 @@ ...@@ -597,7 +597,7 @@
margin-top: ($baseline*2); margin-top: ($baseline*2);
} }
#cheatsheet-body pre{ #cheatsheet-body pre {
color: $black; color: $black;
text-align: left; text-align: left;
background: #eee; background: #eee;
......
lms/static/sass/discussion/_discussion-v1.scss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
%pattern-library-btn { %pattern-library-btn {
@include transition( @include transition(
color 0.125s ease-in-out 0s, color 0.125s ease-in-out 0s,
border-color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s,
background 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s,
box-shadow 0.125s ease-in-out 0s box-shadow 0.125s ease-in-out 0s
); );
......
lms/static/sass/discussion/_discussion.scss
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
header { header {
.anonymous{ .anonymous {
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
} }
} }
......
lms/static/sass/discussion/views/_home.scss
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
vertical-align: middle; vertical-align: middle;
} }
.profile-stat-label{ .profile-stat-label {
vertical-align: middle; vertical-align: middle;
} }
} }
......
lms/static/sass/discussion/views/_response.scss
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
} }
// CASE: label - community TA response // CASE: label - community TA response
&.community-ta{ &.community-ta {
padding-top: 38px; padding-top: 38px;
border-color: $forum-color-community-ta; border-color: $forum-color-community-ta;
} }
......
lms/static/sass/elements/_controls.scss
...@@ -328,7 +328,7 @@ ...@@ -328,7 +328,7 @@
color: $action-primary-fg; color: $action-primary-fg;
} }
%btn-pl-white-base{ %btn-pl-white-base {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
background-color: $action-primary-fg; background-color: $action-primary-fg;
......
lms/static/sass/multicourse/_account.scss
...@@ -404,7 +404,7 @@ ...@@ -404,7 +404,7 @@
// states - all // states - all
&.disabled, &.submitted { &.disabled, &.submitted {
color: rgba(0,0,0,.25); color: rgba(0, 0,0,.25);
label { label {
cursor: text; cursor: text;
...@@ -416,7 +416,7 @@ ...@@ -416,7 +416,7 @@
textarea, input { textarea, input {
background: $container-bg; background: $container-bg;
color: rgba(0,0,0,.25); color: rgba(0, 0,0,.25);
} }
} }
...@@ -434,7 +434,7 @@ ...@@ -434,7 +434,7 @@
// states - disabled // states - disabled
&.disabled { &.disabled {
label::after { label::after {
color: rgba(0,0,0,.35); color: rgba(0, 0,0,.35);
content: "(Disabled Currently)"; content: "(Disabled Currently)";
} }
} }
......
lms/static/sass/multicourse/_course_about.scss
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
background: $course-profile-bg; background: $course-profile-bg;
background-image: $homepage-bg-image; background-image: $homepage-bg-image;
background-size: cover; background-size: cover;
box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5); box-shadow: 0 1px 80px 0 rgba(0, 0,0, 0.5);
border-bottom: 1px solid $border-color-3; border-bottom: 1px solid $border-color-3;
box-shadow: inset 0 1px 5px 0 $shadow-l1; box-shadow: inset 0 1px 5px 0 $shadow-l1;
height: 280px; height: 280px;
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.intro-inner-wrapper { .intro-inner-wrapper {
background: $course-header-bg; background: $course-header-bg;
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix(); @include clearfix();
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
position: relative; position: relative;
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.65), rgba(0, 0,0, 0.75)));
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 12px 0 $shadow-d1; box-shadow: 0 1px 12px 0 $shadow-d1;
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
margin-top: -16px; margin-top: -16px;
position: absolute; position: absolute;
text-shadow: 0 -1px rgba(0,0,0, 0.8); text-shadow: 0 -1px rgba(0, 0,0, 0.8);
top: 50%; top: 50%;
} }
} }
...@@ -250,9 +250,9 @@ ...@@ -250,9 +250,9 @@
text-decoration: none; text-decoration: none;
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.75), rgba(0, 0,0, 0.8)));
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5); box-shadow: 0 1px 12px 0 rgba(0, 0,0, 0.5);
border-color: rgba(255,255,255, 0.9); border-color: rgba(255,255,255, 0.9);
&::after { &::after {
...@@ -394,7 +394,7 @@ ...@@ -394,7 +394,7 @@
width: flex-grid(4); width: flex-grid(4);
> section { > section {
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15); box-shadow: inset 0 0 3px 0 rgba(0, 0,0, 0.15);
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
&.course-summary { &.course-summary {
...@@ -485,12 +485,12 @@ ...@@ -485,12 +485,12 @@
} }
.sharing-message { .sharing-message {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%)); rgba(0, 0,0, 0.7) 100%));
border: 1px solid rgba(0,0,0, 0.5); border: 1px solid rgba(0, 0,0, 0.5);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
@include box-sizing(border-box); @include box-sizing(border-box);
......
lms/static/sass/multicourse/_courses.scss
...@@ -138,7 +138,7 @@ $facet-background-color: #007db8; ...@@ -138,7 +138,7 @@ $facet-background-color: #007db8;
background-image: $homepage-bg-image; background-image: $homepage-bg-image;
background-position: center top !important; background-position: center top !important;
border-bottom: 1px solid $border-color-3; border-bottom: 1px solid $border-color-3;
box-shadow: inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3); box-shadow: inset 0 -1px 8px 0 rgba(0, 0,0, 0.2), inset 0 1px 12px 0 rgba(0, 0,0, 0.3);
height: 430px; height: 430px;
margin-top: $header_image_margin; margin-top: $header_image_margin;
width: 100%; width: 100%;
...@@ -156,7 +156,7 @@ $facet-background-color: #007db8; ...@@ -156,7 +156,7 @@ $facet-background-color: #007db8;
background: $white; background: $white;
background: $course-header-bg; background: $course-header-bg;
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
position: relative; position: relative;
z-index: 2; z-index: 2;
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -781,7 +781,7 @@ ...@@ -781,7 +781,7 @@
width: flex-grid(9, 12); width: flex-grid(9, 12);
display: inline-block; display: inline-block;
.message-copy-bold{ .message-copy-bold {
font-weight: 600; font-weight: 600;
} }
} }
...@@ -804,7 +804,7 @@ ...@@ -804,7 +804,7 @@
@include left($baseline/2); @include left($baseline/2);
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75)); @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
.action-upgrade-icon{ .action-upgrade-icon {
@include float(left); @include float(left);
display: inline; display: inline;
...@@ -1403,7 +1403,7 @@ ...@@ -1403,7 +1403,7 @@
} }
} }
p.course-block{ p.course-block {
border-style: solid; border-style: solid;
border-color: #e3dc86; border-color: #e3dc86;
padding: ($baseline/4); padding: ($baseline/4);
...@@ -1412,7 +1412,7 @@ p.course-block{ ...@@ -1412,7 +1412,7 @@ p.course-block{
} }
.enter-course-blocked{ .enter-course-blocked {
@include box-sizing(border-box); @include box-sizing(border-box);
@include float(left); @include float(left);
...@@ -1440,7 +1440,7 @@ p.course-block{ ...@@ -1440,7 +1440,7 @@ p.course-block{
} }
} }
a.disable-look{ a.disable-look {
color: #808080; color: #808080;
} }
...@@ -1558,7 +1558,7 @@ a.fade-cover { ...@@ -1558,7 +1558,7 @@ a.fade-cover {
border: $palette-info-border 1px solid; border: $palette-info-border 1px solid;
padding: 5px; padding: 5px;
.message-title{ .message-title {
margin-bottom: 0; margin-bottom: 0;
} }
......
lms/static/sass/multicourse/_home.scss
...@@ -170,7 +170,7 @@ $course-search-input-height: ($button-size); ...@@ -170,7 +170,7 @@ $course-search-input-height: ($button-size);
@include border-left(0); @include border-left(0);
@include box-sizing(border-box); @include box-sizing(border-box);
// box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); // box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
height: 120px; height: 120px;
@include float(left); @include float(left);
...@@ -193,7 +193,7 @@ $course-search-input-height: ($button-size); ...@@ -193,7 +193,7 @@ $course-search-input-height: ($button-size);
background-size: cover; background-size: cover;
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.65), rgba(0, 0,0, 0.75)));
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 12px 0 $shadow-d1; box-shadow: 0 1px 12px 0 $shadow-d1;
...@@ -228,7 +228,7 @@ $course-search-input-height: ($button-size); ...@@ -228,7 +228,7 @@ $course-search-input-height: ($button-size);
margin-top: -16px; margin-top: -16px;
position: absolute; position: absolute;
text-shadow: 0 -1px rgba(0,0,0, 0.8); text-shadow: 0 -1px rgba(0, 0,0, 0.8);
top: 50%; top: 50%;
} }
} }
...@@ -241,9 +241,9 @@ $course-search-input-height: ($button-size); ...@@ -241,9 +241,9 @@ $course-search-input-height: ($button-size);
&:hover, &:focus { &:hover, &:focus {
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.75), rgba(0, 0,0, 0.8)));
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5); box-shadow: 0 1px 12px 0 rgba(0, 0,0, 0.5);
border-color: rgba(255,255,255, 0.9); border-color: rgba(255,255,255, 0.9);
&::after { &::after {
...@@ -546,7 +546,7 @@ $course-search-input-height: ($button-size); ...@@ -546,7 +546,7 @@ $course-search-input-height: ($button-size);
.news { .news {
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15); box-shadow: inset 0 0 3px 0 rgba(0, 0,0, 0.15);
padding: 20px; padding: 20px;
width: flex-grid(12); width: flex-grid(12);
......
lms/static/sass/multicourse/_survey-page.scss
...@@ -9,13 +9,13 @@ ...@@ -9,13 +9,13 @@
@include float(left); @include float(left);
@include margin-right(flex-gutter()); @include margin-right(flex-gutter());
width: flex-grid(9,12); width: flex-grid(9, 12);
} }
.content-supplementary { .content-supplementary {
@include float(left); @include float(left);
width: flex-grid(3,12); width: flex-grid(3, 12);
margin-top: ($baseline*2); margin-top: ($baseline*2);
} }
......
lms/static/sass/partials/base/_variables.scss
...@@ -41,123 +41,123 @@ $lms-max-width: 1180px !default; ...@@ -41,123 +41,123 @@ $lms-max-width: 1180px !default;
// ---------------------------- // ----------------------------
// #COLORS // #COLORS
// ---------------------------- // ----------------------------
$transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI width/transitions but element is transparent $transparent: rgba(0, 0, 0, 0) !default; // used when color value is needed for UI width/transitions but element is transparent
$black: rgb(0,0,0) !default; $black: rgb(0, 0, 0) !default;
$black-t0: rgba($black, 0.125) !default; $black-t0: rgba($black, 0.125) !default;
$black-t1: rgba($black, 0.25) !default; $black-t1: rgba($black, 0.25) !default;
$black-t2: rgba($black, 0.5) !default; $black-t2: rgba($black, 0.5) !default;
$black-t3: rgba($black, 0.75) !default; $black-t3: rgba($black, 0.75) !default;
$white: rgb(255,255,255) !default; $white: rgb(255, 255, 255) !default;
$white-t0: rgba($white, 0.125) !default; $white-t0: rgba($white, 0.125) !default;
$white-t1: rgba($white, 0.25) !default; $white-t1: rgba($white, 0.25) !default;
$white-t2: rgba($white, 0.5) !default; $white-t2: rgba($white, 0.5) !default;
$white-t3: rgba($white, 0.75) !default; $white-t3: rgba($white, 0.75) !default;
$gray: rgb(118,118,118) !default; $gray: rgb(118, 118, 118) !default;
$gray-l1: tint($gray,20%) !default; $gray-l1: tint($gray, 20%) !default;
$gray-l2: tint($gray,40%) !default; $gray-l2: tint($gray, 40%) !default;
$gray-l3: tint($gray,60%) !default; $gray-l3: tint($gray, 60%) !default;
$gray-l4: tint($gray,80%) !default; $gray-l4: tint($gray, 80%) !default;
$gray-l5: tint($gray,90%) !default; $gray-l5: tint($gray, 90%) !default;
$gray-l6: tint($gray,95%) !default; $gray-l6: tint($gray, 95%) !default;
$gray-l7: tint($gray,99%) !default; $gray-l7: tint($gray, 99%) !default;
$gray-d1: shade($gray,20%) !default; $gray-d1: shade($gray, 20%) !default;
$gray-d2: shade($gray,40%) !default; $gray-d2: shade($gray, 40%) !default;
$gray-d3: shade($gray,60%) !default; $gray-d3: shade($gray, 60%) !default;
$gray-d4: shade($gray,80%) !default; $gray-d4: shade($gray, 80%) !default;
$yellow: rgb(255, 252, 221) !default; $yellow: rgb(255, 252, 221) !default;
$pink: rgb(182,37,103) !default; $pink: rgb(182, 37, 103) !default;
$pink-l1: tint($pink,20%) !default; $pink-l1: tint($pink, 20%) !default;
$pink-l2: tint($pink,40%) !default; $pink-l2: tint($pink, 40%) !default;
$pink-l3: tint($pink,60%) !default; $pink-l3: tint($pink, 60%) !default;
$pink-l4: tint($pink,80%) !default; $pink-l4: tint($pink, 80%) !default;
$pink-l5: tint($pink,90%) !default; $pink-l5: tint($pink, 90%) !default;
$pink-d1: shade($pink,20%) !default; $pink-d1: shade($pink, 20%) !default;
$pink-d2: shade($pink,40%) !default; $pink-d2: shade($pink, 40%) !default;
$pink-d3: shade($pink,60%) !default; $pink-d3: shade($pink, 60%) !default;
$pink-d4: shade($pink,80%) !default; $pink-d4: shade($pink, 80%) !default;
$pink-s1: saturate($pink,15%) !default; $pink-s1: saturate($pink, 15%) !default;
$pink-s2: saturate($pink,30%) !default; $pink-s2: saturate($pink, 30%) !default;
$pink-s3: saturate($pink,45%) !default; $pink-s3: saturate($pink, 45%) !default;
$pink-u1: desaturate($pink,15%) !default; $pink-u1: desaturate($pink, 15%) !default;
$pink-u2: desaturate($pink,30%) !default; $pink-u2: desaturate($pink, 30%) !default;
$pink-u3: desaturate($pink,45%) !default; $pink-u3: desaturate($pink, 45%) !default;
$red: rgb(178, 6, 16) !default; $red: rgb(178, 6, 16) !default;
$red-l1: tint($red,20%) !default; $red-l1: tint($red, 20%) !default;
$red-l2: tint($red,40%) !default; $red-l2: tint($red, 40%) !default;
$red-l3: tint($red,60%) !default; $red-l3: tint($red, 60%) !default;
$red-l4: tint($red,80%) !default; $red-l4: tint($red, 80%) !default;
$red-l5: tint($red,90%) !default; $red-l5: tint($red, 90%) !default;
$red-d1: shade($red,20%) !default; $red-d1: shade($red, 20%) !default;
$red-d2: shade($red,40%) !default; $red-d2: shade($red, 40%) !default;
$red-d3: shade($red,60%) !default; $red-d3: shade($red, 60%) !default;
$red-d4: shade($red,80%) !default; $red-d4: shade($red, 80%) !default;
$red-s1: saturate($red,15%) !default; $red-s1: saturate($red, 15%) !default;
$red-s2: saturate($red,30%) !default; $red-s2: saturate($red, 30%) !default;
$red-s3: saturate($red,45%) !default; $red-s3: saturate($red, 45%) !default;
$red-u1: desaturate($red,15%) !default; $red-u1: desaturate($red, 15%) !default;
$red-u2: desaturate($red,30%) !default; $red-u2: desaturate($red, 30%) !default;
$red-u3: desaturate($red,45%) !default; $red-u3: desaturate($red, 45%) !default;
$green: rgb(37, 184, 90) !default; $green: rgb(37, 184, 90) !default;
$green-l1: tint($green,20%) !default; $green-l1: tint($green, 20%) !default;
$green-l2: tint($green,40%) !default; $green-l2: tint($green, 40%) !default;
$green-l3: tint($green,60%) !default; $green-l3: tint($green, 60%) !default;
$green-l4: tint($green,80%) !default; $green-l4: tint($green, 80%) !default;
$green-l5: tint($green,90%) !default; $green-l5: tint($green, 90%) !default;
$green-d1: shade($green,20%) !default; $green-d1: shade($green, 20%) !default;
$green-d2: shade($green,40%) !default; $green-d2: shade($green, 40%) !default;
$green-d3: shade($green,60%) !default; $green-d3: shade($green, 60%) !default;
$green-d4: shade($green,80%) !default; $green-d4: shade($green, 80%) !default;
$green-s1: saturate($green,15%) !default; $green-s1: saturate($green, 15%) !default;
$green-s2: saturate($green,30%) !default; $green-s2: saturate($green, 30%) !default;
$green-s3: saturate($green,45%) !default; $green-s3: saturate($green, 45%) !default;
$green-u1: desaturate($green,15%) !default; $green-u1: desaturate($green, 15%) !default;
$green-u2: desaturate($green,30%) !default; $green-u2: desaturate($green, 30%) !default;
$green-u3: desaturate($green,45%) !default; $green-u3: desaturate($green, 45%) !default;
$yellow: rgb(255, 252, 221) !default; // yellow color used by LMS $yellow: rgb(255, 252, 221) !default; // yellow color used by LMS
//$yellow: rgb(237, 189, 60) !default; // yellow color used by Studio //$yellow: rgb(237, 189, 60) !default; // yellow color used by Studio
$yellow-l1: tint($yellow,20%) !default; $yellow-l1: tint($yellow, 20%) !default;
$yellow-l2: tint($yellow,40%) !default; $yellow-l2: tint($yellow, 40%) !default;
$yellow-l3: tint($yellow,60%) !default; $yellow-l3: tint($yellow, 60%) !default;
$yellow-l4: tint($yellow,80%) !default; $yellow-l4: tint($yellow, 80%) !default;
$yellow-l5: tint($yellow,90%) !default; $yellow-l5: tint($yellow, 90%) !default;
$yellow-d1: shade($yellow,20%) !default; $yellow-d1: shade($yellow, 20%) !default;
$yellow-d2: shade($yellow,40%) !default; $yellow-d2: shade($yellow, 40%) !default;
$yellow-d3: shade($yellow,60%) !default; $yellow-d3: shade($yellow, 60%) !default;
$yellow-d4: shade($yellow,80%) !default; $yellow-d4: shade($yellow, 80%) !default;
$yellow-s1: saturate($yellow,15%) !default; $yellow-s1: saturate($yellow, 15%) !default;
$yellow-s2: saturate($yellow,30%) !default; $yellow-s2: saturate($yellow, 30%) !default;
$yellow-s3: saturate($yellow,45%) !default; $yellow-s3: saturate($yellow, 45%) !default;
$yellow-u1: desaturate($yellow,15%) !default; $yellow-u1: desaturate($yellow, 15%) !default;
$yellow-u2: desaturate($yellow,30%) !default; $yellow-u2: desaturate($yellow, 30%) !default;
$yellow-u3: desaturate($yellow,45%) !default; $yellow-u3: desaturate($yellow, 45%) !default;
$blue: rgb(0, 121, 188) !default; $blue: rgb(0, 121, 188) !default;
$blue-l1: tint($blue,20%) !default; $blue-l1: tint($blue, 20%) !default;
$blue-l2: tint($blue,40%) !default; $blue-l2: tint($blue, 40%) !default;
$blue-l3: tint($blue,60%) !default; $blue-l3: tint($blue, 60%) !default;
$blue-l4: tint($blue,80%) !default; $blue-l4: tint($blue, 80%) !default;
$blue-l5: tint($blue,90%) !default; $blue-l5: tint($blue, 90%) !default;
$blue-d1: shade($blue,20%) !default; $blue-d1: shade($blue, 20%) !default;
$blue-d2: shade($blue,40%) !default; $blue-d2: shade($blue, 40%) !default;
$blue-d3: shade($blue,60%) !default; $blue-d3: shade($blue, 60%) !default;
$blue-d4: shade($blue,80%) !default; $blue-d4: shade($blue, 80%) !default;
$blue-s1: saturate($blue,15%) !default; $blue-s1: saturate($blue, 15%) !default;
$blue-s2: saturate($blue,30%) !default; $blue-s2: saturate($blue, 30%) !default;
$blue-s3: saturate($blue,45%) !default; $blue-s3: saturate($blue, 45%) !default;
$blue-u1: desaturate($blue,15%) !default; $blue-u1: desaturate($blue, 15%) !default;
$blue-u2: desaturate($blue,30%) !default; $blue-u2: desaturate($blue, 30%) !default;
$blue-u3: desaturate($blue,45%) !default; $blue-u3: desaturate($blue, 45%) !default;
$blue-t0: rgba($blue, 0.125) !default; $blue-t0: rgba($blue, 0.125) !default;
$blue-t1: rgba($blue, 0.25) !default; $blue-t1: rgba($blue, 0.25) !default;
$blue-t2: rgba($blue, 0.50) !default; $blue-t2: rgba($blue, 0.5) !default;
$blue-t3: rgba($blue, 0.75) !default; $blue-t3: rgba($blue, 0.75) !default;
$uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant
...@@ -172,21 +172,21 @@ $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compli ...@@ -172,21 +172,21 @@ $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compli
$uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back $uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back
$orange: rgb(237, 189, 60) !default; $orange: rgb(237, 189, 60) !default;
$orange-l1: tint($orange,20%) !default; $orange-l1: tint($orange, 20%) !default;
$orange-l2: tint($orange,40%) !default; $orange-l2: tint($orange, 40%) !default;
$orange-l3: tint($orange,60%) !default; $orange-l3: tint($orange, 60%) !default;
$orange-l4: tint($orange,80%) !default; $orange-l4: tint($orange, 80%) !default;
$orange-l5: tint($orange,90%) !default; $orange-l5: tint($orange, 90%) !default;
$orange-d1: shade($orange,20%) !default; $orange-d1: shade($orange, 20%) !default;
$orange-d2: shade($orange,40%) !default; $orange-d2: shade($orange, 40%) !default;
$orange-d3: shade($orange,60%) !default; $orange-d3: shade($orange, 60%) !default;
$orange-d4: shade($orange,80%) !default; $orange-d4: shade($orange, 80%) !default;
$orange-s1: saturate($orange,15%) !default; $orange-s1: saturate($orange, 15%) !default;
$orange-s2: saturate($orange,30%) !default; $orange-s2: saturate($orange, 30%) !default;
$orange-s3: saturate($orange,45%) !default; $orange-s3: saturate($orange, 45%) !default;
$orange-u1: desaturate($orange,15%) !default; $orange-u1: desaturate($orange, 15%) !default;
$orange-u2: desaturate($orange,30%) !default; $orange-u2: desaturate($orange, 30%) !default;
$orange-u3: desaturate($orange,45%) !default; $orange-u3: desaturate($orange, 45%) !default;
// ==================== // ====================
...@@ -204,10 +204,10 @@ $google-red: #d73924; ...@@ -204,10 +204,10 @@ $google-red: #d73924;
$microsoft-black: #000; $microsoft-black: #000;
// shadows // shadows
$shadow: rgba(0,0,0,0.2) !default; $shadow: rgba(0, 0, 0, 0.2) !default;
$shadow-l1: rgba(0,0,0,0.1) !default; $shadow-l1: rgba(0, 0, 0, 0.1) !default;
$shadow-l2: rgba(0,0,0,0.05) !default; $shadow-l2: rgba(0, 0, 0, 0.05) !default;
$shadow-d1: rgba(0,0,0,0.4) !default; $shadow-d1: rgba(0, 0, 0, 0.4) !default;
$shadow-d2: rgba($black, 0.6) !default; $shadow-d2: rgba($black, 0.6) !default;
// system feedback-based colors // system feedback-based colors
...@@ -215,7 +215,7 @@ $error-color: rgb(203, 7, 18) !default; ...@@ -215,7 +215,7 @@ $error-color: rgb(203, 7, 18) !default;
$warning-color: rgb(255, 192, 31) !default; $warning-color: rgb(255, 192, 31) !default;
$confirm-color: rgb(0, 132, 1) !default; $confirm-color: rgb(0, 132, 1) !default;
$active-color: $blue !default; $active-color: $blue !default;
$highlight-color: rgb(255,255,0) !default; $highlight-color: rgb(255, 255, 0) !default;
$alert-color: rgb(212, 64, 64) !default; $alert-color: rgb(212, 64, 64) !default;
$success-color: rgb(0, 155, 0) !default; $success-color: rgb(0, 155, 0) !default;
$success-color-hover: rgb(0, 129, 0) !default; $success-color-hover: rgb(0, 129, 0) !default;
...@@ -245,7 +245,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default; ...@@ -245,7 +245,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default;
// ---------------------------- // ----------------------------
// logo colors // logo colors
$audit-mode-color: rgb(74,74,74) !default; $audit-mode-color: rgb(74, 74, 74) !default;
$honor-mode-color: $uxpl-blue-base !default; $honor-mode-color: $uxpl-blue-base !default;
$verified-mode-color: $uxpl-green-base !default; $verified-mode-color: $uxpl-green-base !default;
$micromasters-color: #005585 !default; $micromasters-color: #005585 !default;
...@@ -257,76 +257,76 @@ $lms-preview-menu-color: #c8c8c8 !default; ...@@ -257,76 +257,76 @@ $lms-preview-menu-color: #c8c8c8 !default;
// old color variables // old color variables
// DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above. // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
$dark-gray1: rgb(74,74,74) !default; $dark-gray1: rgb(74, 74, 74) !default;
$light-gray1: rgb(242,242,242) !default; $light-gray1: rgb(242, 242, 242) !default;
$light-gray2: rgb(171,171,171) !default; $light-gray2: rgb(171, 171, 171) !default;
$light-gray3: rgb(249,249,249) !default; $light-gray3: rgb(249, 249, 249) !default;
$light-gray4: rgb(252,252,252) !default; $light-gray4: rgb(252, 252, 252) !default;
$dark-gray2: rgb(151,151,151) !default; $dark-gray2: rgb(151, 151, 151) !default;
$blue1: rgb(74,144,226) !default; $blue1: rgb(74, 144, 226) !default;
$blue2: rgb(0,161,229) !default; $blue2: rgb(0, 161, 229) !default;
$green1: rgb(97,161,46) !default; $green1: rgb(97, 161, 46) !default;
$red1: rgb(208,2,27) !default; $red1: rgb(208, 2, 27) !default;
// edx-specific: marketing site variables // edx-specific: marketing site variables
// DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above. // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
$m-gray: rgb(138,140,143) !default; //C8F $m-gray: rgb(138, 140, 143) !default; //C8F
$m-gray-l1: rgb(151,153,155) !default; $m-gray-l1: rgb(151, 153, 155) !default;
$m-gray-l2: rgb(164,166,168) !default; $m-gray-l2: rgb(164, 166, 168) !default;
$m-gray-l3: rgb(177,178,180) !default; $m-gray-l3: rgb(177, 178, 180) !default;
$m-gray-l4: rgb(245,245,245) !default; $m-gray-l4: rgb(245, 245, 245) !default;
$m-gray-d1: rgb(111, 112, 116) !default; $m-gray-d1: rgb(111, 112, 116) !default;
$m-gray-d2: rgb(112,114,118) !default; $m-gray-d2: rgb(112, 114, 118) !default;
$m-gray-d3: rgb(100,102,104) !default; $m-gray-d3: rgb(100, 102, 104) !default;
$m-gray-d4: rgb(5,5,5) !default; $m-gray-d4: rgb(5, 5, 5) !default;
$m-gray-t0: rgba($m-gray,0.125) !default; $m-gray-t0: rgba($m-gray, 0.125) !default;
$m-gray-t1: rgba($m-gray,0.25) !default; $m-gray-t1: rgba($m-gray, 0.25) !default;
$m-gray-t2: rgba($m-gray,0.50) !default; $m-gray-t2: rgba($m-gray, 0.5) !default;
$m-gray-t3: rgba($m-gray,0.75) !default; $m-gray-t3: rgba($m-gray, 0.75) !default;
$m-blue: $uxpl-blue-base; // uxpl blue base $m-blue: $uxpl-blue-base; // uxpl blue base
$m-blue-l1: rgb(43,172,230) !default; $m-blue-l1: rgb(43, 172, 230) !default;
$m-blue-l2: rgb(66,181,233) !default; $m-blue-l2: rgb(66, 181, 233) !default;
$m-blue-l3: rgb(89,190,236) !default; $m-blue-l3: rgb(89, 190, 236) !default;
$m-blue-l4: tint($m-blue,90%) !default; $m-blue-l4: tint($m-blue, 90%) !default;
$m-blue-l5: tint($m-blue,95%) !default; $m-blue-l5: tint($m-blue, 95%) !default;
$m-blue-l6: #4bb4fb !default; $m-blue-l6: #4bb4fb !default;
$m-blue-d1: rgb(23,144,199) !default; $m-blue-d1: rgb(23, 144, 199) !default;
$m-blue-d2: $blue !default; $m-blue-d2: $blue !default;
$m-blue-d3: rgb(18,111,154) !default; $m-blue-d3: rgb(18, 111, 154) !default;
$m-blue-d4: rgb(10,74,103) !default; $m-blue-d4: rgb(10, 74, 103) !default;
$m-blue-d5: rgb(0,158,231) !default; $m-blue-d5: rgb(0, 158, 231) !default;
$m-blue-d6: #256a97 !default; $m-blue-d6: #256a97 !default;
$m-blue-t0: rgba($m-blue,0.125) !default; $m-blue-t0: rgba($m-blue, 0.125) !default;
$m-blue-t1: rgba($m-blue,0.25) !default; $m-blue-t1: rgba($m-blue, 0.25) !default;
$m-blue-t2: rgba($m-blue,0.50) !default; $m-blue-t2: rgba($m-blue, 0.5) !default;
$m-blue-t3: rgba($m-blue,0.75) !default; $m-blue-t3: rgba($m-blue, 0.75) !default;
$m-pink: $uxpl-pink-base; // uxpl pink base $m-pink: $uxpl-pink-base; // uxpl pink base
$m-pink-l1: rgb(202,47,115) !default; $m-pink-l1: rgb(202, 47, 115) !default;
$m-pink-l2: rgb(211,63,128) !default; $m-pink-l2: rgb(211, 63, 128) !default;
$m-pink-l3: rgb(215,84,142) !default; $m-pink-l3: rgb(215, 84, 142) !default;
$m-pink-l4: tint($m-pink,75%) !default; $m-pink-l4: tint($m-pink, 75%) !default;
$m-pink-l5: tint($m-pink,85%) !default; $m-pink-l5: tint($m-pink, 85%) !default;
$m-pink-d1: rgb(160,37,91) !default; $m-pink-d1: rgb(160, 37, 91) !default;
$m-pink-d2: rgb(140,32,79) !default; $m-pink-d2: rgb(140, 32, 79) !default;
$m-pink-d3: rgb(119,28,68) !default; $m-pink-d3: rgb(119, 28, 68) !default;
$m-green: $uxpl-green-base; // uxpl green base $m-green: $uxpl-green-base; // uxpl green base
$m-green-s1: rgb(96, 188, 97) !default; $m-green-s1: rgb(96, 188, 97) !default;
$m-green-l1: tint($m-green,20%) !default; $m-green-l1: tint($m-green, 20%) !default;
$m-green-l2: tint($m-green,40%) !default; $m-green-l2: tint($m-green, 40%) !default;
$m-green-l3: tint($m-green,60%) !default; $m-green-l3: tint($m-green, 60%) !default;
$m-green-l4: tint($m-green,90%) !default; $m-green-l4: tint($m-green, 90%) !default;
$m-green-l5: tint($m-green,95%) !default; $m-green-l5: tint($m-green, 95%) !default;
$m-green-d1: shade($m-green,20%) !default; $m-green-d1: shade($m-green, 20%) !default;
$m-green-d2: shade($m-green,40%) !default; $m-green-d2: shade($m-green, 40%) !default;
$m-green-d3: shade($m-green,60%) !default; $m-green-d3: shade($m-green, 60%) !default;
$m-green-d4: shade($m-green,90%) !default; $m-green-d4: shade($m-green, 90%) !default;
$m-green-t0: rgba($m-green,0.125) !default; $m-green-t0: rgba($m-green, 0.125) !default;
$m-green-t1: rgba($m-green,0.25) !default; $m-green-t1: rgba($m-green, 0.25) !default;
$m-green-t2: rgba($m-green,0.50) !default; $m-green-t2: rgba($m-green, 0.5) !default;
$m-green-t3: rgba($m-green,0.75) !default; $m-green-t3: rgba($m-green, 0.75) !default;
// edx-specific: verified // edx-specific: verified
$verified-color-lvl1: $m-green !default; $verified-color-lvl1: $m-green !default;
...@@ -351,7 +351,7 @@ $audit-color-lvl1: rgb(221, 221, 221) !default; ...@@ -351,7 +351,7 @@ $audit-color-lvl1: rgb(221, 221, 221) !default;
$audit-color-lvl2: tint($audit-color-lvl1, 33%) !default; $audit-color-lvl2: tint($audit-color-lvl1, 33%) !default;
// edx-specific: credit // edx-specific: credit
$credit-color-base: rgb(244,195,0) !default; // accessible with black text $credit-color-base: rgb(244, 195, 0) !default; // accessible with black text
// edx-specific: Studio/Staff actions // edx-specific: Studio/Staff actions
$staff-color: $uxpl-pink-base !default; $staff-color: $uxpl-pink-base !default;
...@@ -386,11 +386,11 @@ $support-form-base-font-size: 16px; ...@@ -386,11 +386,11 @@ $support-form-base-font-size: 16px;
// ---------------------------- // ----------------------------
// #TIMING // #TIMING
// ---------------------------- // ----------------------------
$tmg-s3: 3.0s !default; $tmg-s3: 3s !default;
$tmg-s2: 2.0s !default; $tmg-s2: 2s !default;
$tmg-s1: 1.0s !default; $tmg-s1: 1s !default;
$tmg-avg: 0.75s !default; $tmg-avg: 0.75s !default;
$tmg-f1: 0.50s !default; $tmg-f1: 0.5s !default;
$tmg-f2: 0.25s !default; $tmg-f2: 0.25s !default;
$tmg-f3: 0.125s !default; $tmg-f3: 0.125s !default;
...@@ -405,43 +405,43 @@ $form-bg-color: $white !default; ...@@ -405,43 +405,43 @@ $form-bg-color: $white !default;
// ---------------------------- // ----------------------------
// font sizes // font sizes
$body-font-size: em(14) !default; $body-font-size: em(14) !default;
$body-line-height: golden-ratio(.875em, 1) !default; $body-line-height: golden-ratio(0.875em, 1) !default;
// font colors // font colors
$base-font-color: rgb(60,60,60) !default; $base-font-color: rgb(60, 60, 60) !default;
$baseFontColor: $base-font-color !default; $baseFontColor: $base-font-color !default;
$darkest-base-font-color: $black !default; $darkest-base-font-color: $black !default;
$lighter-base-font-color: rgb(100,100,100) !default; $lighter-base-font-color: rgb(100, 100, 100) !default;
$lightest-base-font-color: $gray; // Lightest font that can be used on a white background $lightest-base-font-color: $gray; // Lightest font that can be used on a white background
$very-light-text: rgb(255,255,255) !default; $very-light-text: rgb(255, 255, 255) !default;
$text-color: rgb(51, 51, 51) !default; $text-color: rgb(51, 51, 51) !default;
// borders // borders
$border-color-1: rgb(190,190,190) !default; $border-color-1: rgb(190, 190, 190) !default;
$border-color-2: rgb(200,200,200) !default; $border-color-2: rgb(200, 200, 200) !default;
$border-color-3: rgb(100,100,100) !default; $border-color-3: rgb(100, 100, 100) !default;
$border-color-4: rgb(252,252,252) !default; $border-color-4: rgb(252, 252, 252) !default;
$border-color-l1: $m-gray-l1 !default; $border-color-l1: $m-gray-l1 !default;
$border-color-l2: $m-gray-l2 !default; $border-color-l2: $m-gray-l2 !default;
$border-color-l3: $m-gray-l3 !default; $border-color-l3: $m-gray-l3 !default;
$border-color-l4: $m-gray-l4 !default; $border-color-l4: $m-gray-l4 !default;
// visual horizontal rules // visual horizontal rules
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)) !default; $faded-hr-image-1: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 1) 50%, rgba(200, 200, 200, 0)) !default;
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)) !default; $faded-hr-image-2: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 1)) !default;
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)) !default; $faded-hr-image-3: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(200, 200, 200, 0)) !default;
$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0)) !default; $faded-hr-image-4: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 50%, rgba(240, 240, 240, 0)) !default;
$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)) !default; $faded-hr-image-5: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)) !default;
$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)) !default; $faded-hr-image-6: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)) !default;
// notifications // notifications
$notify-banner-bg-1: rgb(56,56,56) !default; $notify-banner-bg-1: rgb(56, 56, 56) !default;
$notify-banner-bg-2: rgb(136,136,136) !default; $notify-banner-bg-2: rgb(136, 136, 136) !default;
$notify-banner-bg-3: $shadow-l2 !default; $notify-banner-bg-3: $shadow-l2 !default;
$msg-bg: $m-blue-d3 !default; $msg-bg: $m-blue-d3 !default;
// actions // actions
$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%) !default; $button-bg-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(250, 250, 250) 50%, rgb(237, 237, 237) 50%, rgb(220, 220, 220) 100%) !default;
$button-bg-color: transparent !default; $button-bg-color: transparent !default;
$button-bg-hover-color: $white !default; $button-bg-hover-color: $white !default;
...@@ -479,17 +479,17 @@ $link-color-d1: $link-color !default; ...@@ -479,17 +479,17 @@ $link-color-d1: $link-color !default;
$link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/ $link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/
$site-status-color: $pink !default; $site-status-color: $pink !default;
$button-color: $uxpl-blue-base !default; $button-color: $uxpl-blue-base !default;
$button-archive-color: rgb(238,238,238) !default; // #eeeeee $button-archive-color: rgb(238, 238, 238) !default; // #eeeeee
// larger, random elements // larger, random elements
$dark-trans-bg: rgba(0, 0, 0, .75) !default; $dark-trans-bg: rgba(0, 0, 0, 0.75) !default;
$body-bg: $uxpl-grayscale-x-back !default; $body-bg: $uxpl-grayscale-x-back !default;
$container-bg: $white !default; $container-bg: $white !default;
// header // header
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default; $header-image: linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, 0.9)) !default;
$header-bg: $white !default; $header-bg: $white !default;
$header-border-color: $blue !default; $header-border-color: $blue !default;
$header-graphic-super-color: $m-blue-d1 !default; $header-graphic-super-color: $m-blue-d1 !default;
...@@ -503,17 +503,17 @@ $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0 !default; ...@@ -503,17 +503,17 @@ $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0 !default;
// modal // modal
$shadow-color: $blue !default; $shadow-color: $blue !default;
$modal-bg-color: rgb(245,245,245) !default; $modal-bg-color: rgb(245, 245, 245) !default;
// courseware elements // courseware elements
$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238)) !default; $courseware-header-image: linear-gradient(top, rgb(255, 255, 255), rgb(238, 238, 238)) !default;
$courseware-header-bg: transparent !default; $courseware-header-bg: transparent !default;
$courseware-footer-border: none !default; $courseware-footer-border: none !default;
$courseware-footer-shadow: none !default; $courseware-footer-shadow: none !default;
$courseware-footer-margin: 0 !default; $courseware-footer-margin: 0 !default;
$courseware-border-bottom-color: rgb(68,162,222) !default; $courseware-border-bottom-color: rgb(68, 162, 222) !default;
$courseware-button-border-color: rgb(230,230,230) !default; $courseware-button-border-color: rgb(230, 230, 230) !default;
$courseware-hover-color: rgb(51,52,53) !default; $courseware-hover-color: rgb(51, 52, 53) !default;
$courseware-navigation-color: $uxpl-blue-base !default; $courseware-navigation-color: $uxpl-blue-base !default;
// homepage, onboarding, and course discovery // homepage, onboarding, and course discovery
...@@ -533,9 +533,9 @@ $passwordreset-banner-image: url('#{$static-path}/images/edx-theme/edx-backgroun ...@@ -533,9 +533,9 @@ $passwordreset-banner-image: url('#{$static-path}/images/edx-theme/edx-backgroun
$video-thumb-url: '#{$static-path}/images/homepage-hero-video-thumb.jpg' !default; $video-thumb-url: '#{$static-path}/images/homepage-hero-video-thumb.jpg' !default;
// dashboard elements // dashboard elements
$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)) !default; $dashboard-profile-header-image: linear-gradient(-90deg, rgb(255, 255, 255), rgb(245, 245, 245)) !default;
$dashboard-profile-header-color: transparent !default; $dashboard-profile-header-color: transparent !default;
$dashboard-profile-color: rgb(252,252,252) !default; $dashboard-profile-color: rgb(252, 252, 252) !default;
$dot-color: rgb(221, 221, 221) !default; $dot-color: rgb(221, 221, 221) !default;
$dashboard-course-cover-border: rgb(221, 221, 221) !default; $dashboard-course-cover-border: rgb(221, 221, 221) !default;
...@@ -557,17 +557,17 @@ $learner-profile-container-flex: 768px; ...@@ -557,17 +557,17 @@ $learner-profile-container-flex: 768px;
$content-wrapper-bg: $white !default; $content-wrapper-bg: $white !default;
$course-bg-color: $uxpl-grayscale-x-back !default; $course-bg-color: $uxpl-grayscale-x-back !default;
$account-content-wrapper-bg: shade($body-bg, 2%) !default; $account-content-wrapper-bg: shade($body-bg, 2%) !default;
$course-profile-bg: rgb(245,245,245) !default; $course-profile-bg: rgb(245, 245, 245) !default;
$course-header-bg: rgba(255,255,255, 0.93) !default; $course-header-bg: rgba(255, 255, 255, 0.93) !default;
// search/listing results // search/listing results
$result-highlight-color-base: rgba($highlight-color, 0.25) !default; $result-highlight-color-base: rgba($highlight-color, 0.25) !default;
// sidebar // sidebar
$sidebar-chapter-bg-top: rgba(255, 255, 255, .5) !default; $sidebar-chapter-bg-top: rgba(255, 255, 255, 0.5) !default;
$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0) !default; $sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0) !default;
$sidebar-chapter-bg: rgb(246,246,246) !default; $sidebar-chapter-bg: rgb(246, 246, 246) !default;
$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214)) !default; $sidebar-active-image: linear-gradient(top, rgb(230, 230, 230), rgb(214, 214, 214)) !default;
// student notes // student notes
...@@ -586,9 +586,9 @@ $sidebar-color: rgb(246, 246, 246) !default; ...@@ -586,9 +586,9 @@ $sidebar-color: rgb(246, 246, 246) !default;
$outer-border-color: $gray-l3 !default; $outer-border-color: $gray-l3 !default;
// used by descriptor css // used by descriptor css
$lightGrey: rgb(237,241,245) !default; $lightGrey: rgb(237, 241, 245) !default;
$mediumGrey: #ced2db !default; $mediumGrey: #ced2db !default;
$darkGrey: rgb(136,145,161) !default; $darkGrey: rgb(136, 145, 161) !default;
$extraDarkGrey: #3d4043 !default; $extraDarkGrey: #3d4043 !default;
$lightGrey1: $gray-l3 !default; $lightGrey1: $gray-l3 !default;
$paleYellow: #fffcf1 !default; $paleYellow: #fffcf1 !default;
lms/static/sass/shared-v2/_header.scss
...@@ -99,14 +99,14 @@ ...@@ -99,14 +99,14 @@
} }
} }
.tab-nav-item{ .tab-nav-item {
@include float(left); @include float(left);
display: flex; display: flex;
margin: 0; margin: 0;
justify-content: center; justify-content: center;
.tab-nav-link{ .tab-nav-link {
font-size: font-size(base); font-size: font-size(base);
font-weight: font-weight(semi-bold); font-weight: font-weight(semi-bold);
color: palette(grayscale, dark); color: palette(grayscale, dark);
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
} }
} }
.active{ .active {
border-bottom: 4px solid $black-t3 !important; border-bottom: 4px solid $black-t3 !important;
} }
} }
......
lms/static/sass/shared-v2/_modal.scss
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
&::before { &::before {
@include background-image( @include background-image(
radial-gradient( radial-gradient(
50% 50%, circle closest-side, 50% 50%, circle closest-side,
$white-opacity-80 0%, $white-opacity-80 0%,
$white-transparent 100% $white-transparent 100%
) )
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
hr { hr {
@include background-image( @include background-image(
linear-gradient( linear-gradient(
180deg, 180deg,
$white-transparent 0%, $white-transparent 0%,
$white-opacity-80 50%, $white-opacity-80 50%,
$white-transparent $white-transparent
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
&::after { &::after {
@include background-image( @include background-image(
linear-gradient( linear-gradient(
180deg, 180deg,
$light-grey-transparent 0%, $light-grey-transparent 0%,
$light-grey-solid 50%, $light-grey-solid 50%,
$light-grey-transparent $light-grey-transparent
......
lms/static/sass/shared-v2/_variables.scss
...@@ -41,7 +41,7 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default; ...@@ -41,7 +41,7 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default;
$white-opacity-70: rgba(255, 255, 255, 0.7) !default; $white-opacity-70: rgba(255, 255, 255, 0.7) !default;
$white-opacity-80: rgba(255, 255, 255, 0.8) !default; $white-opacity-80: rgba(255, 255, 255, 0.8) !default;
$black: rgb(0,0,0) !default; $black: rgb(0, 0,0) !default;
$black-t0: rgba($black, 0.125) !default; $black-t0: rgba($black, 0.125) !default;
$black-t1: rgba($black, 0.25) !default; $black-t1: rgba($black, 0.25) !default;
$black-t2: rgba($black, 0.5) !default; $black-t2: rgba($black, 0.5) !default;
...@@ -71,7 +71,7 @@ $lms-dark-icon-background-color: palette(grayscale, black) !default; ...@@ -71,7 +71,7 @@ $lms-dark-icon-background-color: palette(grayscale, black) !default;
$site-status-color: rgb(182,37,103) !default; $site-status-color: rgb(182,37,103) !default;
$shadow-l1: rgba(0,0,0,0.1) !default; $shadow-l1: rgba(0, 0,0, 0.1) !default;
$error-color: rgb(203, 7, 18) !default; $error-color: rgb(203, 7, 18) !default;
$warning-color: rgb(255, 192, 31) !default; $warning-color: rgb(255, 192, 31) !default;
......
lms/static/sass/shared/_course_filter.scss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
z-index: 9; z-index: 9;
&.fixed-top { &.fixed-top {
box-shadow: 0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4); box-shadow: 0 1px 15px 0 rgba(0, 0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
max-width: 1200px; max-width: 1200px;
position: fixed; position: fixed;
top: 0; top: 0;
......
lms/static/sass/shared/_course_object.scss
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9); box-shadow: 0 1px 10px 0 rgba(0, 0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -68,11 +68,11 @@ ...@@ -68,11 +68,11 @@
.meta-info { .meta-info {
background: $dark-trans-bg; background: $dark-trans-bg;
bottom: 6px; bottom: 6px;
border: 1px solid rgba(0,0,0, 0.5); border: 1px solid rgba(0, 0,0, 0.5);
@include border-right-radius(2px); @include border-right-radius(2px);
box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15); box-shadow: 0 1px 5px 0 rgba(0, 0,0, 0.15);
@include clearfix(); @include clearfix();
......
lms/static/sass/shared/_forms.scss
...@@ -48,7 +48,7 @@ input[type="tel"] { ...@@ -48,7 +48,7 @@ input[type="tel"] {
&:focus { &:focus {
border-color: darken($button-archive-color, 50%); border-color: darken($button-archive-color, 50%);
box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15); box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0, 0,0, 0.15);
} }
} }
......
lms/static/sass/shared/_header.scss
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
.user-dropdown-menu, .dropdown-menu { .user-dropdown-menu, .dropdown-menu {
background: $white; background: $white;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3); box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.3);
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
display: none; display: none;
margin-top: 0; margin-top: 0;
...@@ -295,7 +295,7 @@ ...@@ -295,7 +295,7 @@
@include float(left); @include float(left);
.tab-nav-item{ .tab-nav-item {
display: flex; display: flex;
margin: 0; margin: 0;
text-transform: none; text-transform: none;
...@@ -304,19 +304,19 @@ ...@@ -304,19 +304,19 @@
justify-content: center; justify-content: center;
.tab-nav-link{ .tab-nav-link {
font-size: em(16); font-size: em(16);
color: $gray; color: $gray;
padding: 5px 25px 23px; padding: 5px 25px 23px;
display: inline-block; display: inline-block;
&:hover, &:hover,
&:focus{ &:focus {
border-bottom: 4px solid $courseware-border-bottom-color; border-bottom: 4px solid $courseware-border-bottom-color;
} }
} }
.active{ .active {
border-bottom: 4px solid $black-t3 !important; border-bottom: 4px solid $black-t3 !important;
} }
} }
...@@ -437,7 +437,7 @@ ...@@ -437,7 +437,7 @@
.nav-global { .nav-global {
@include float(left); @include float(left);
.tab-nav-item{ .tab-nav-item {
display: flex; display: flex;
margin: 0; margin: 0;
text-transform: none; text-transform: none;
...@@ -446,19 +446,19 @@ ...@@ -446,19 +446,19 @@
justify-content: center; justify-content: center;
.tab-nav-link{ .tab-nav-link {
font-size: em(16); font-size: em(16);
color: $gray; color: $gray;
display: inline-block; display: inline-block;
padding: 5px 25px 19px; padding: 5px 25px 19px;
&:hover, &:hover,
&:focus{ &:focus {
border-bottom: 4px solid $courseware-border-bottom-color; border-bottom: 4px solid $courseware-border-bottom-color;
} }
} }
.active{ .active {
border-bottom: 4px solid $black-t3 !important; border-bottom: 4px solid $black-t3 !important;
} }
} }
...@@ -624,7 +624,7 @@ ...@@ -624,7 +624,7 @@
.user-dropdown-menu, .dropdown-menu { .user-dropdown-menu, .dropdown-menu {
background: $border-color-4; background: $border-color-4;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3); box-shadow: 0 2px 24px 0 rgba(0, 0,0, 0.3);
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
display: none; display: none;
margin-top: 0; margin-top: 0;
......
lms/static/sass/views/_account-settings.scss
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
border-bottom: 4px solid $courseware-border-bottom-color !important; border-bottom: 4px solid $courseware-border-bottom-color !important;
} }
&.active{ &.active {
border-bottom: 4px solid $black-t3 !important; border-bottom: 4px solid $black-t3 !important;
} }
} }
...@@ -138,11 +138,11 @@ ...@@ -138,11 +138,11 @@
position: relative; position: relative;
z-index: 10; z-index: 10;
&::-ms-expand{ &::-ms-expand {
display: none; display: none;
} }
~ .icon-caret-down{ ~ .icon-caret-down {
&::after { &::after {
content: ""; content: "";
border-left: 6px solid transparent; border-left: 6px solid transparent;
......
lms/static/sass/views/_shoppingcart.scss
...@@ -936,7 +936,7 @@ $light-border: 1px solid $gray-l5; ...@@ -936,7 +936,7 @@ $light-border: 1px solid $gray-l5;
} }
} }
.error-text{ .error-text {
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: block; display: block;
......
lms/static/sass/views/_teams.scss
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
.page-header.has-secondary { .page-header.has-secondary {
.page-header-main { .page-header-main {
display: inline-block; display: inline-block;
width: flex-grid(8,12); width: flex-grid(8, 12);
} }
.page-header-secondary { .page-header-secondary {
......
lms/static/sass/views/_verification.scss
...@@ -516,7 +516,7 @@ ...@@ -516,7 +516,7 @@
.wrapper-sts { .wrapper-sts {
display: inline-block; display: inline-block;
width: flex-grid(9,12); width: flex-grid(9, 12);
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
} }
...@@ -1226,6 +1226,7 @@ ...@@ -1226,6 +1226,7 @@
.copy { .copy {
@extend %t-copy-lead1; @extend %t-copy-lead1;
@extend %t-weight4; @extend %t-weight4;
@include left(calc(50% - 46px)); @include left(calc(50% - 46px));
position: absolute; position: absolute;
......
scripts/all-tests.sh
...@@ -13,7 +13,7 @@ set -e ...@@ -13,7 +13,7 @@ set -e
# Violations thresholds for failing the build # Violations thresholds for failing the build
export PYLINT_THRESHOLD=3600 export PYLINT_THRESHOLD=3600
export ESLINT_THRESHOLD=9134 export ESLINT_THRESHOLD=9134
export STYLELINT_THRESHOLD=5155 export STYLELINT_THRESHOLD=1942
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json` XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/} export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
......
themes/edge.edx.org/lms/static/sass/partials/base/_certificates.scss
// Certificate overrides for edge.edx.org // Certificate overrides for edge.edx.org
.certificate-card { .certificate-card {
// Note: edx.org no longer supports audit certificates, but there are // Note: edx.org no longer supports audit certificates, but there are
// legacy certificates that might be rendered. In this situation, they // legacy certificates that might be rendered. In this situation, they
// are styled as honor certificates. // are styled as honor certificates.
&.mode-honor, &.mode-audit { &.mode-honor, &.mode-audit {
border-color: $honor-mode-color; border-color: $honor-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/honor.png'); background-image: url('#{$static-path}/images/certificates/honor.png');
}
} }
}
&.mode-verified { &.mode-verified {
border-color: $verified-mode-color; border-color: $verified-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/verified.png'); background-image: url('#{$static-path}/images/certificates/verified.png');
}
} }
}
&.mode-professional { &.mode-professional {
border-color: $professional-certificate-color; border-color: $professional-certificate-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/professional.png'); background-image: url('#{$static-path}/images/certificates/professional.png');
}
} }
}
} }
themes/edx.org/lms/static/sass/partials/base/_certificates.scss
// Certificate overrides for edx.org // Certificate overrides for edx.org
.certificate-card { .certificate-card {
// Note: edx.org no longer supports audit certificates, but there are // Note: edx.org no longer supports audit certificates, but there are
// legacy certificates that might be rendered. In this situation, they // legacy certificates that might be rendered. In this situation, they
// are styled as honor certificates. // are styled as honor certificates.
&.mode-honor, &.mode-audit { &.mode-honor, &.mode-audit {
border-color: $honor-mode-color; border-color: $honor-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/honor.png'); background-image: url('#{$static-path}/images/certificates/honor.png');
}
} }
}
&.mode-verified { &.mode-verified {
border-color: $verified-mode-color; border-color: $verified-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/verified.png'); background-image: url('#{$static-path}/images/certificates/verified.png');
}
} }
}
&.mode-professional { &.mode-professional {
border-color: $professional-certificate-color; border-color: $professional-certificate-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/professional.png'); background-image: url('#{$static-path}/images/certificates/professional.png');
}
} }
}
} }
themes/red-theme/lms/static/sass/partials/base/_certificates.scss
// Certificate overrides for the red theme // Certificate overrides for the red theme
.certificate-card { .certificate-card {
&.mode-audit { &.mode-audit {
border-color: $audit-mode-color; border-color: $audit-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/red-certificate.png'); background-image: url('#{$static-path}/images/certificates/red-certificate.png');
}
} }
}
&.mode-honor { &.mode-honor {
border-color: $honor-mode-color; border-color: $honor-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/red-certificate.png'); background-image: url('#{$static-path}/images/certificates/red-certificate.png');
}
} }
}
&.mode-verified { &.mode-verified {
border-color: $verified-mode-color; border-color: $verified-mode-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/red-certificate.png'); background-image: url('#{$static-path}/images/certificates/red-certificate.png');
}
} }
}
&.mode-professional { &.mode-professional {
border-color: $professional-certificate-color; border-color: $professional-certificate-color;
.card-logo { .card-logo {
background-image: url('#{$static-path}/images/certificates/red-certificate.png'); background-image: url('#{$static-path}/images/certificates/red-certificate.png');
}
} }
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment