Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Convert builtin blocks' sass variables to css variables (#35385)

Browse Source 
Closes: https://github.com/openedx/edx-platform/issues/35306

Part of the built-in XBlock extraction project:
https://github.com/openedx/edx-platform/issues/34827
This commit is contained in:
Muhammad Farhan Khan
2024-09-11 23:59:09 +05:00
committed by GitHub
parent 7665f13547
commit 082350e72a
12 changed files with 333 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
common/static/sass/_builtin-block-variables.scss
View File

@@ -16,7 +16,6 @@
:root {
--action-primary-active-bg: $action-primary-active-bg;
--all-text-inputs: $all-text-inputs;
--base-font-size: $base-font-size;
--base-line-height: $base-line-height;
--baseline: $baseline;
@@ -26,6 +25,7 @@
--blue-d1: $blue-d1;
--blue-d2: $blue-d2;
--blue-d4: $blue-d4;
--blue-s1: $blue-s1;
--body-color: $body-color;
--border-color: $border-color;
--bp-screen-lg: $bp-screen-lg;
@@ -34,6 +34,8 @@
--danger: $danger;
--darkGrey: $darkGrey;
--error-color: $error-color;
--error-color-dark: darken($error-color, 11%);
--error-color-light: lighten($error-color, 25%);
--font-bold: $font-bold;
--font-family-sans-serif: $font-family-sans-serif;
--general-color-accent: $general-color-accent;
@@ -44,6 +46,12 @@
--gray-l3: $gray-l3;
--gray-l4: $gray-l4;
--gray-l6: $gray-l6;
--icon-correct: url($static-path + '/images/correct-icon.png');
--icon-incorrect: url($static-path + '/images/incorrect-icon.png');
--icon-info: url($static-path + '/images/info-icon.png');
--icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
--icon-spinner: url($static-path + '/images/spinner.gif');
--icon-unanswered: url($static-path + '/images/unanswered-icon.png');
--incorrect: $incorrect;
--lightGrey: $lightGrey;
--lighter-base-font-color: $lighter-base-font-color;

352
xmodule/assets/capa/_display.scss
View File

@@ -50,7 +50,7 @@ $asterisk-icon: '\f069'; // .fa-asterisk
// +Mixins - Status Icon - Capa
// ====================
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
@mixin status-icon($color: var(--gray), $fontAwesomeIcon: "\f00d") {
.status-icon {
&::after {
@extend %use-font-awesome;
@@ -66,13 +66,13 @@ $asterisk-icon: '\f069'; // .fa-asterisk
// ====================
h2 {
margin-top: 0;
margin-bottom: ($baseline*0.75);
margin-bottom: calc((var(--baseline)*0.75));
&.problem-header {
display: inline-block;
section.staff {
margin-top: ($baseline*1.5);
margin-top: calc((var(--baseline)*1.5));
font-size: 80%;
}
}
@@ -89,10 +89,10 @@ h2 {
}
%feedback-hint {
margin-top: ($baseline / 4);
margin-top: calc((var(--baseline) / 4));
.icon {
@include margin-right($baseline / 4);
@include margin-right(calc((var(--baseline) / 4)));
}
}
@@ -100,7 +100,7 @@ h2 {
@extend %feedback-hint;
.icon {
color: $incorrect;
color: var(--incorrect);
}
}
@@ -109,7 +109,7 @@ h2 {
@extend %feedback-hint;
.icon {
color: $correct;
color: var(--correct);
}
}
@@ -143,19 +143,19 @@ iframe[seamless] {
}
.inline-error {
color: darken($error-color, 11%);
color: var(--error-color-dark);
}
div.problem-progress {
display: inline-block;
color: $gray-d1;
color: var(--gray-d1);
font-size: em(14);
}
// +Problem - Base
// ====================
div.problem {
padding-top: $baseline;
padding-top: var(--baseline);
@media print {
display: block;
@@ -176,25 +176,25 @@ div.problem {
display: inline;
+ p {
margin-top: $baseline;
margin-top: var(--baseline);
}
}
.question-description {
color: $gray-d1;
font-size: $small-font-size;
color: var(--gray-d1);
font-size: var(--small-font-size);
}
form > label, .problem-group-label {
display: block;
margin-bottom: $baseline;
margin-bottom: var(--baseline);
font: inherit;
color: inherit;
-webkit-font-smoothing: initial;
}
.problem-group-label + .question-description {
margin-top: -$baseline;
margin-top: calc(-1 * var(--baseline));
}
}
@@ -203,7 +203,7 @@ div.problem {
// can not use the & + & since .problem is nested deeply in .xmodule_display.xmodule_CapaModule
.wrapper-problem-response + .wrapper-problem-response,
.wrapper-problem-response + p {
margin-top: ($baseline * 1.5);
margin-top: calc((var(--baseline) * 1.5));
}
// Choice Group - silent class
@@ -219,14 +219,14 @@ div.problem {
display: inline-block;
clear: both;
margin-bottom: ($baseline/2);
border: 2px solid $gray-l4;
margin-bottom: calc((var(--baseline)/2));
border: 2px solid var(--gray-l4);
border-radius: 3px;
padding: ($baseline/2);
padding: calc((var(--baseline)/2));
width: 100%;
&::after {
@include margin-left($baseline*0.75);
@include margin-left(calc((var(--baseline)*0.75)));
}
}
@@ -242,15 +242,15 @@ div.problem {
input[type="radio"],
input[type="checkbox"] {
@include margin($baseline/4);
@include margin-right($baseline/2);
@include margin(calc((var(--baseline)/4)));
@include margin-right(calc((var(--baseline)/2)));
}
input {
&:focus,
&:hover {
& + label {
border: 2px solid $blue;
border: 2px solid var(--blue);
}
}
@@ -258,25 +258,25 @@ div.problem {
&:focus,
&:hover {
& + label.choicegroup_correct {
@include status-icon($correct, $checkmark-icon);
@include status-icon(var(--correct), $checkmark-icon);
border: 2px solid $correct;
border: 2px solid var(--correct);
}
& + label.choicegroup_partially-correct {
@include status-icon($partially-correct, $asterisk-icon);
@include status-icon(var(--partially-correct), $asterisk-icon);
border: 2px solid $partially-correct;
border: 2px solid var(--partially-correct);
}
& + label.choicegroup_incorrect {
@include status-icon($incorrect, $cross-icon);
@include status-icon(var(--incorrect), $cross-icon);
border: 2px solid $incorrect;
border: 2px solid var(--incorrect);
}
& + label.choicegroup_submitted {
border: 2px solid $submitted;
border: 2px solid var(--submitted);
}
}
}
@@ -293,11 +293,11 @@ div.problem {
}
label {
@include padding($baseline/2);
@include padding-left($baseline*2.3);
@include padding(calc((var(--baseline)/2)));
@include padding-left(calc((var(--baseline)*2.3)));
position: relative;
font-size: $base-font-size;
font-size: var(--base-font-size);
line-height: normal;
cursor: pointer;
}
@@ -308,19 +308,19 @@ div.problem {
position: absolute;
top: 0.35em;
width: $baseline*1.1;
height: $baseline*1.1;
width: calc(var(--baseline)*1.1);
height: calc(var(--baseline)*1.1);
z-index: 1;
}
legend {
margin-bottom: $baseline;
margin-bottom: var(--baseline);
max-width: 100%;
white-space: normal;
}
legend + .question-description {
margin-top: -$baseline;
margin-top: calc(-1 * var(--baseline));
max-width: 100%;
white-space: normal;
}
@@ -332,24 +332,24 @@ div.problem {
// Summary status indicators shown after the input area
div.problem {
.indicator-container {
@include margin-left($baseline*0.75);
@include margin-left(calc((var(--baseline)*0.75)));
.status {
width: $baseline;
width: var(--baseline);
// CASE: correct answer
&.correct {
@include status-icon($correct, $checkmark-icon);
@include status-icon(var(--correct), $checkmark-icon);
}
// CASE: partially correct answer
&.partially-correct {
@include status-icon($partially-correct, $asterisk-icon);
@include status-icon(var(--partially-correct), $asterisk-icon);
}
// CASE: incorrect answer
&.incorrect {
@include status-icon($incorrect, $cross-icon);
@include status-icon(var(--incorrect), $cross-icon);
}
&.submitted,
@@ -379,7 +379,7 @@ div.problem {
.solution-span {
> span {
margin: $baseline 0;
margin: var(--baseline) 0;
display: block;
position: relative;
@@ -413,20 +413,20 @@ div.problem {
font-style: normal;
&:hover {
color: $blue;
color: var(--blue);
}
}
}
&.correct, &.ui-icon-check {
input {
border-color: $correct;
border-color: var(--correct);
}
}
&.partially-correct, &.ui-icon-check {
input {
border-color: $partially-correct;
border-color: var(--partially-correct);
}
}
@@ -438,25 +438,25 @@ div.problem {
&.ui-icon-close {
input {
border-color: $incorrect;
border-color: var(--incorrect);
}
}
&.incorrect, &.incomplete {
input {
border-color: $incorrect;
border-color: var(--incorrect);
}
}
&.submitted, &.ui-icon-check {
input {
border-color: $submitted;
border-color: var(--submitted);
}
}
p.answer {
display: inline-block;
margin-top: ($baseline / 2);
margin-top: calc((var(--baseline) / 2));
margin-bottom: 0;
&::before {
@@ -483,7 +483,7 @@ div.problem {
}
img.loading {
@include padding-left($baseline/2);
@include padding-left(calc((var(--baseline)/2)));
display: inline-block;
}
@@ -517,7 +517,7 @@ div.problem {
top: 4px;
width: 14px;
height: 14px;
background: url('#{$static-path}/images/unanswered-icon.png') center center no-repeat;
background: var(--icon-unanswered) center center no-repeat;
}
&.processing, &.ui-icon-processing {
@@ -526,7 +526,7 @@ div.problem {
top: 6px;
width: 25px;
height: 20px;
background: url('#{$static-path}/images/spinner.gif') center center no-repeat;
background: var(--icon-spinner) center center no-repeat;
}
&.ui-icon-check {
@@ -535,7 +535,7 @@ div.problem {
top: 3px;
width: 25px;
height: 20px;
background: url('#{$static-path}/images/correct-icon.png') center center no-repeat;
background: var(--icon-correct) center center no-repeat;
}
&.incomplete, &.ui-icon-close {
@@ -544,24 +544,24 @@ div.problem {
top: 3px;
width: 20px;
height: 20px;
background: url('#{$static-path}/images/incorrect-icon.png') center center no-repeat;
background: var(--icon-incorrect) center center no-repeat;
}
}
.reload {
@include float(right);
margin: ($baseline/2);
margin: calc((var(--baseline)/2));
}
.grader-status {
@include clearfix();
margin: $baseline/2 0;
padding: $baseline/2;
margin: calc(var(--baseline)/2) 0;
padding: calc(var(--baseline)/2);
border-radius: 5px;
background: $gray-l6;
background: var(--gray-l6);
span {
display: block;
@@ -574,7 +574,7 @@ div.problem {
.grading {
margin: 0px 7px 0 0;
padding-left: 25px;
background: url('#{$static-path}/images/info-icon.png') left center no-repeat;
background: var(--icon-info) left center no-repeat;
text-indent: 0px;
}
@@ -586,11 +586,11 @@ div.problem {
}
&.file {
margin-top: $baseline;
padding: $baseline 0 0 0;
margin-top: var(--baseline);
padding: var(--baseline) 0 0 0;
border: 0;
border-top: 1px solid #eee;
background: $white;
background: var(--white);
p.debug {
display: none;
@@ -605,13 +605,13 @@ div.problem {
.evaluation {
p {
margin-bottom: ($baseline/5);
margin-bottom: calc((var(--baseline)/5));
}
}
.feedback-on-feedback {
margin-right: $baseline;
margin-right: var(--baseline);
height: 100px;
}
@@ -646,7 +646,7 @@ div.problem {
}
.submit-message-container {
margin: $baseline 0px ;
margin: var(--baseline) 0px ;
}
}
@@ -753,17 +753,17 @@ div.problem {
padding: 0px 5px;
border: 1px solid #eaeaea;
border-radius: 3px;
background-color: $gray-l6;
background-color: var(--gray-l6);
white-space: nowrap;
font-size: .9em;
}
pre {
overflow: auto;
padding: 6px $baseline/2;
border: 1px solid $gray-l3;
padding: 6px calc(var(--baseline)/2);
border: 1px solid var(--gray-l3);
border-radius: 3px;
background-color: $gray-l6;
background-color: var(--gray-l6);
font-size: .9em;
line-height: 1.4;
@@ -784,7 +784,7 @@ div.problem {
input {
box-sizing: border-box;
border: 2px solid $gray-l4;
border: 2px solid var(--gray-l4);
border-radius: 3px;
min-width: 160px;
height: 46px;
@@ -792,47 +792,47 @@ div.problem {
.status {
display: inline-block;
margin-top: ($baseline/2);
margin-top: calc((var(--baseline)/2));
background: none;
}
// CASE: incorrect answer
> .incorrect {
input {
border: 2px solid $incorrect;
border: 2px solid var(--incorrect);
}
.status {
@include status-icon($incorrect, $cross-icon);
@include status-icon(var(--incorrect), $cross-icon);
}
}
// CASE: partially correct answer
> .partially-correct {
input {
border: 2px solid $partially-correct;
border: 2px solid var(--partially-correct);
}
.status {
@include status-icon($partially-correct, $asterisk-icon);
@include status-icon(var(--partially-correct), $asterisk-icon);
}
}
// CASE: correct answer
> .correct {
input {
border: 2px solid $correct;
border: 2px solid var(--correct);
}
.status {
@include status-icon($correct, $checkmark-icon);
@include status-icon(var(--correct), $checkmark-icon);
}
}
// CASE: submitted, correctness withheld
> .submitted {
input {
border: 2px solid $submitted;
border: 2px solid var(--submitted);
}
.status {
@@ -843,7 +843,7 @@ div.problem {
// CASE: unanswered and unsubmitted
> .unanswered, > .unsubmitted {
input {
border: 2px solid $gray-l4;
border: 2px solid var(--gray-l4);
}
.status {
@@ -868,7 +868,7 @@ div.problem {
}
.trailing_text {
@include margin-right($baseline/2);
@include margin-right(calc((var(--baseline)/2)));
display: inline-block;
}
@@ -930,7 +930,7 @@ div.problem {
visibility: hidden;
width: 0;
border-right: none;
border-left: 1px solid $black;
border-left: 1px solid var(--black);
}
}
}
@@ -952,14 +952,14 @@ div.problem {
.capa-message {
display: inline-block;
color: $gray-d1;
color: var(--gray-d1);
-webkit-font-smoothing: antialiased;
}
// +Problem - Actions
// ====================
div.problem .action {
min-height: $baseline;
min-height: var(--baseline);
width: 100%;
display: flex;
display: -ms-flexbox;
@@ -972,11 +972,11 @@ div.problem .action {
display: inline-flex;
justify-content: flex-end;
width: 100%;
padding-bottom: $baseline;
padding-bottom: var(--baseline);
}
.problem-action-button-wrapper {
@include border-right(1px solid $gray-300);
@include border-right(1px solid var(--gray-300));
@include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation
display: inline-block;
@@ -994,11 +994,11 @@ div.problem .action {
&:hover,
&:focus,
&:active {
color: $primary !important;
color: var(--primary) !important;
}
.icon {
margin-bottom: $baseline / 10;
margin-bottom: calc(var(--baseline) / 10);
display: block;
}
@@ -1008,41 +1008,41 @@ div.problem .action {
}
.submit-attempt-container {
padding-bottom: $baseline;
padding-bottom: var(--baseline);
flex-grow: 1;
display: flex;
align-items: center;
@media (max-width: $bp-screen-lg) {
@media (max-width: var(--bp-screen-lg)) {
max-width: 100%;
padding-bottom: $baseline;
padding-bottom: var(--baseline);
}
.submit {
@include margin-right($baseline / 2);
@include margin-right(calc((var(--baseline) / 2)));
@include float(left);
white-space: nowrap;
}
.submit-cta-description {
color: $primary;
color: var(--primary);
font-size: small;
padding-right: $baseline / 2;
padding-right: calc(var(--baseline) / 2);
}
.submit-cta-link-button {
color: $primary;
padding-right: $baseline / 4;
color: var(--primary);
padding-right: calc(var(--baseline) / 4);
}
}
.submission-feedback {
@include margin-right($baseline / 2);
@include margin-right(calc((var(--baseline) / 2)));
margin-top: $baseline / 2;
margin-top: calc(var(--baseline) / 2);
display: inline-block;
color: $gray-d1;
font-size: $medium-font-size;
color: var(--gray-d1);
font-size: var(--medium-font-size);
-webkit-font-smoothing: antialiased;
vertical-align: middle;
@@ -1082,7 +1082,7 @@ div.problem {
display: block;
margin: lh() 0;
padding: lh();
border: 1px solid $gray-l3;
border: 1px solid var(--gray-l3);
}
.message {
@@ -1114,52 +1114,52 @@ div.problem {
}
div.capa_alert {
margin-top: $baseline;
margin-top: var(--baseline);
padding: 8px 12px;
border: 1px solid $warning-color;
border: 1px solid var(--warning-color);
border-radius: 3px;
background: $warning-color-accent;
background: var(--warning-color-accent);
font-size: 0.9em;
}
.notification {
@include float(left);
margin-top: $baseline / 2;
padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2);
line-height: $base-line-height;
margin-top: calc(var(--baseline) / 2);
padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2));
line-height: var(--base-line-height);
&.success {
@include notification-by-type($success);
@include notification-by-type(var(--success));
}
&.error {
@include notification-by-type($danger);
@include notification-by-type(var(--danger));
}
&.warning {
@include notification-by-type($warning);
@include notification-by-type(var(--warning));
}
&.general {
@include notification-by-type($general-color-accent);
@include notification-by-type(var(--general-color-accent));
}
&.problem-hint {
border: 1px solid $uxpl-gray-background;
border: 1px solid var(--uxpl-gray-background);
border-radius: 6px;
.icon {
@include margin-right(3 * $baseline / 4);
@include margin-right(calc(3 * var(--baseline) / 4) );
color: $uxpl-gray-dark;
color: var(--uxpl-gray-dark);
}
li {
color: $uxpl-gray-base;
color: var(--uxpl-gray-base);
strong {
color: $uxpl-gray-dark;
color: var(--uxpl-gray-dark);
}
}
}
@@ -1168,7 +1168,7 @@ div.problem {
@include float(left);
position: relative;
top: $baseline / 5;
top: calc(var(--baseline) / 5);
}
.notification-message {
@@ -1184,7 +1184,7 @@ div.problem {
margin: 0;
li:not(:last-child) {
margin-bottom: $baseline / 4;
margin-bottom: calc(var(--baseline) / 4);
}
}
}
@@ -1198,13 +1198,13 @@ div.problem {
.notification-btn {
@include float(right);
padding: ($baseline / 10) ($baseline / 4);
min-width: ($baseline * 3);
padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4));
min-width: calc((var(--baseline) * 3));
display: block;
clear: both;
&:first-child {
margin-bottom: $baseline / 4;
margin-bottom: calc(var(--baseline) / 4);
}
}
@@ -1225,26 +1225,26 @@ div.problem {
&.btn-brand {
&:hover {
background-color: $btn-brand-focus-background;
background-color: var(--btn-brand-focus-background);
}
}
}
.review-btn {
color: $blue; // notification type has other colors
color: var(--blue); // notification type has other colors
&.sr {
color: $blue;
color: var(--blue);
}
}
div.capa_reset {
padding: 25px;
border: 1px solid $error-color;
background-color: lighten($error-color, 25%);
background-color: var(--error-color-light);
border: 1px solid var(--error-color);
border-radius: 3px;
font-size: 1em;
margin-top: $baseline/2;
margin-bottom: $baseline/2;
margin-top: calc(var(--baseline)/2);
margin-bottom: calc(var(--baseline)/2);
}
.capa_reset>h2 {
@@ -1256,7 +1256,7 @@ div.problem {
}
.hints {
border: 1px solid $gray-l3;
border: 1px solid var(--gray-l3);
h3 {
@extend %t-strong;
@@ -1264,7 +1264,7 @@ div.problem {
padding: 9px;
border-bottom: 1px solid #e3e3e3;
background: #eee;
text-shadow: 0 1px 0 $white;
text-shadow: 0 1px 0 var(--white);
font-size: em(16);
}
@@ -1283,8 +1283,8 @@ div.problem {
a {
display: block;
padding: 9px;
background: $gray-l6;
box-shadow: inset 0 0 0 1px $white;
background: var(--gray-l6);
box-shadow: inset 0 0 0 1px var(--white);
}
}
@@ -1311,11 +1311,11 @@ div.problem {
> section {
position: relative;
margin-bottom: ($baseline/2);
padding: 9px 9px $baseline;
margin-bottom: calc((var(--baseline)/2));
padding: 9px 9px var(--baseline);
border: 1px solid #ddd;
border-radius: 3px;
background: $white;
background: var(--white);
box-shadow: inset 0 0 0 1px #eee;
p:last-of-type {
@@ -1331,8 +1331,8 @@ div.problem {
box-sizing: border-box;
display: block;
padding: ($baseline/5);
background: $gray-l4;
padding: calc((var(--baseline)/5));
background: var(--gray-l4);
text-align: right;
font-size: 1em;
@@ -1349,8 +1349,8 @@ div.problem {
.external-grader-message {
section {
padding-top: ($baseline*1.5);
padding-left: $baseline;
padding-top: calc((var(--baseline)*1.5));
padding-left: var(--baseline);
background-color: #fafafa;
color: #2c2c2c;
font-size: 1em;
@@ -1369,9 +1369,9 @@ div.problem {
padding: 0;
.result-errors {
margin: ($baseline/4);
padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2);
background: url('#{$static-path}/images/incorrect-icon.png') center left no-repeat;
margin: calc((var(--baseline)/4));
padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2));
background: var(--icon-incorrect) center left no-repeat;
li {
color: #b00;
@@ -1379,10 +1379,10 @@ div.problem {
}
.result-output {
margin: $baseline/4;
padding: $baseline 0 ($baseline*0.75) 50px;
margin: calc(var(--baseline)/4);
padding: var(--baseline) 0 calc((var(--baseline)*0.75)) 50px;
border-top: 1px solid #ddd;
border-left: $baseline solid #fafafa;
border-left: var(--baseline) solid #fafafa;
h4 {
font-size: 1em;
@@ -1394,7 +1394,7 @@ div.problem {
}
dt {
margin-top: $baseline;
margin-top: var(--baseline);
}
dd {
@@ -1403,7 +1403,7 @@ div.problem {
}
.result-correct {
background: url('#{$static-path}/images/correct-icon.png') left 20px no-repeat;
background: var(--icon-correct) left 20px no-repeat;
.result-actual-output {
color: #090;
@@ -1411,7 +1411,7 @@ div.problem {
}
.result-partially-correct {
background: url('#{$static-path}/images/partially-correct-icon.png') left 20px no-repeat;
background: var(--icon-partially-correct) left 20px no-repeat;
.result-actual-output {
color: #090;
@@ -1419,7 +1419,7 @@ div.problem {
}
.result-incorrect {
background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat;
background: var(--icon-incorrect) left 20px no-repeat;
.result-actual-output {
color: #b00;
@@ -1427,8 +1427,8 @@ div.problem {
}
.markup-text{
margin: ($baseline/4);
padding: $baseline 0 15px 50px;
margin: calc((var(--baseline)/4));
padding: var(--baseline) 0 15px 50px;
border-top: 1px solid #ddd;
border-left: 20px solid #fafafa;
@@ -1451,19 +1451,19 @@ div.problem {
div.problem {
.rubric {
tr {
margin: ($baseline/2) 0;
margin: calc((var(--baseline)/2)) 0;
height: 100%;
}
td {
margin: ($baseline/2) 0;
padding: $baseline 0;
margin: calc((var(--baseline)/2)) 0;
padding: var(--baseline) 0;
height: 100%;
}
th {
margin: ($baseline/4);
padding: ($baseline/4);
margin: calc((var(--baseline)/4));
padding: calc((var(--baseline)/4));
}
label,
@@ -1471,12 +1471,12 @@ div.problem {
position: relative;
display: inline-block;
margin: 3px;
padding: ($baseline*0.75);
padding: calc((var(--baseline)*0.75));
min-width: 50px;
min-height: 50px;
width: 150px;
height: 100%;
background-color: $gray-l3;
background-color: var(--gray-l3);
font-size: .9em;
}
@@ -1484,7 +1484,7 @@ div.problem {
position: absolute;
right: 0;
bottom: 0;
margin: ($baseline/2);
margin: calc((var(--baseline)/2));
}
.selected-grade {
@@ -1508,14 +1508,14 @@ div.problem {
div.problem {
.annotation-input {
margin: 0 0 1em 0;
border: 1px solid $gray-l3;
border: 1px solid var(--gray-l3);
border-radius: 1em;
.annotation-header {
@extend %t-strong;
padding: .5em 1em;
border-bottom: 1px solid $gray-l3;
border-bottom: 1px solid var(--gray-l3);
}
.annotation-body { padding: .5em 1em; }
@@ -1557,7 +1557,7 @@ div.problem {
@extend %ui-fake-link;
display: inline-block;
margin-left: ($baseline*2);
margin-left: calc((var(--baseline)*2));
border: 1px solid rgb(102,102,102);
&.selected {
@@ -1590,13 +1590,13 @@ div.problem {
.debug-value {
margin: 1em 0;
padding: 1em;
border: 1px solid $black;
border: 1px solid var(--black);
background-color: #999;
color: $white;
color: var(--white);
input[type="text"] { width: 100%; }
pre { background-color: $gray-l3; color: $black; }
pre { background-color: var(--gray-l3); color: var(--black); }
&::before {
@extend %t-strong;
@@ -1623,7 +1623,7 @@ div.problem {
@extend label.choicegroup_correct;
input[type="text"] {
border-color: $correct;
border-color: var(--correct);
}
}
@@ -1631,7 +1631,7 @@ div.problem {
@extend label.choicegroup_partially-correct;
input[type="text"] {
border-color: $partially-correct;
border-color: var(--partially-correct);
}
}
@@ -1645,9 +1645,9 @@ div.problem {
label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
&::after {
@include margin-left($baseline*0.75);
@include margin-left(calc((var(--baseline)*0.75)));
content: url('#{$static-path}/images/correct-icon.png');
content: var(--icon-correct);
}
}
@@ -1682,15 +1682,15 @@ div.problem .imageinput.capa_inputtype {
}
.correct {
@include status-icon($correct, $checkmark-icon);
@include status-icon(var(--correct), $checkmark-icon);
}
.incorrect {
@include status-icon($incorrect, $cross-icon);
@include status-icon(var(--incorrect), $cross-icon);
}
.partially-correct {
@include status-icon($partially-correct, $asterisk-icon);
@include status-icon(var(--partially-correct), $asterisk-icon);
}
.submitted {
@@ -1723,15 +1723,15 @@ div.problem .annotation-input {
}
.correct {
@include status-icon($correct, $checkmark-icon);
@include status-icon(var(--correct), $checkmark-icon);
}
.incorrect {
@include status-icon($incorrect, $cross-icon);
@include status-icon(var(--incorrect), $cross-icon);
}
.partially-correct {
@include status-icon($partially-correct, $asterisk-icon);
@include status-icon(var(--partially-correct), $asterisk-icon);
}
.submitted {
@@ -1743,5 +1743,5 @@ div.problem .annotation-input {
// ====================
.problems-wrapper .loading-spinner {
text-align: center;
color: $gray-d1;
color: var(--gray-d1);
}

12
xmodule/assets/editor/_edit.scss
View File

@@ -18,7 +18,7 @@
@include linear-gradient(top, #d4dee8, #c9d5e2);
position: relative;
padding: ($baseline/4);
padding: calc((var(--baseline)/4));
border-bottom-color: #a5aaaf;
button {
@@ -26,7 +26,7 @@
@include float(left);
padding: 3px ($baseline/2) 5px;
padding: 3px calc((var(--baseline)/2)) 5px;
margin-left: 7px;
border: 0;
border-radius: 2px;
@@ -53,7 +53,7 @@
li {
@include float(left);
@include margin-right($baseline/4);
@include margin-right(calc((var(--baseline)/4)));
&:last-child {
@include margin-right(0);
@@ -67,7 +67,7 @@
border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0;
@include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
@include linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3;
font-size: 13px;
@@ -75,8 +75,8 @@
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
&.current {
background: $white;
border-bottom-color: $white;
background: var(--white);
border-bottom-color: var(--white);
}
}
}

44
xmodule/assets/html/_display.scss
View File

@@ -10,8 +10,8 @@
}
h1 {
color: $body-color;
font: normal 2em/1.4em $font-family-sans-serif;
color: var(--body-color);
font: normal 2em/1.4em var(--font-family-sans-serif);
letter-spacing: 1px;
@include margin(0, 0, 1.416em, 0);
@@ -19,9 +19,9 @@ h1 {
h2 {
color: #646464;
font: normal 1.2em/1.2em $font-family-sans-serif;
font: normal 1.2em/1.2em var(--font-family-sans-serif);
letter-spacing: 1px;
margin-bottom: ($baseline*0.75);
margin-bottom: calc((var(--baseline)*0.75));
-webkit-font-smoothing: antialiased;
}
@@ -29,7 +29,7 @@ h3,
h4,
h5,
h6 {
@include margin(0, 0, ($baseline/2), 0);
@include margin(0, 0, calc((var(--baseline)/2)), 0);
font-weight: 600;
}
@@ -54,7 +54,7 @@ p {
margin-bottom: 1.416em;
font-size: 1em;
line-height: 1.6em !important;
color: $body-color;
color: var(--body-color);
}
em,
@@ -78,11 +78,11 @@ b {
p + p,
ul + p,
ol + p {
margin-top: $baseline;
margin-top: var(--baseline);
}
blockquote {
margin: 1em ($baseline*2);
margin: 1em calc((var(--baseline)*2));
}
ol,
@@ -91,7 +91,7 @@ ul {
@include bi-app-compact(padding, 0, 0, 0, 1em);
margin: 1em 0;
color: $body-color;
color: var(--body-color);
li {
margin-bottom: 0.708em;
@@ -112,7 +112,7 @@ a {
&:hover,
&:active,
&:focus {
color: $blue;
color: var(--blue);
}
}
@@ -122,7 +122,7 @@ img {
pre {
margin: 1em 0;
color: $body-color;
color: var(--body-color);
font-family: monospace, serif;
font-size: 1em;
white-space: pre-wrap;
@@ -130,7 +130,7 @@ pre {
}
code {
color: $body-color;
color: var(--body-color);
font-family: monospace, serif;
background: none;
padding: 0;
@@ -138,15 +138,15 @@ code {
table {
width: 100%;
margin: $baseline 0;
margin: var(--baseline) 0;
border-collapse: collapse;
font-size: 16px;
td,
th {
margin: $baseline 0;
padding: ($baseline/2);
border: 1px solid $gray-l3;
margin: var(--baseline) 0;
padding: calc((var(--baseline)/2));
border: 1px solid var(--gray-l3);
font-size: 14px;
&.cont-justified-left {
@@ -179,12 +179,12 @@ th {
position: absolute;
display: block;
padding: ($baseline/4) 7px;
padding: calc((var(--baseline)/4)) 7px;
border-radius: 5px;
opacity: 0.9;
background: $white;
color: $black;
border: 2px solid $black;
background: var(--white);
color: var(--black);
border: 2px solid var(--black);
.label {
font-weight: bold;
@@ -269,11 +269,11 @@ th {
position: relative;
&.action-zoom-in {
margin-right: ($baseline/4);
margin-right: calc((var(--baseline)/4));
}
&.action-zoom-out {
margin-left: ($baseline/4);
margin-left: calc((var(--baseline)/4));
}
&.is-disabled {

10
xmodule/assets/lti/_lti.scss
View File

@@ -10,7 +10,7 @@ h2.problem-header {
div.problem-progress {
display: inline-block;
padding-left: ($baseline/4);
padding-left: calc((var(--baseline)/4));
color: #666;
font-weight: 100;
font-size: em(16);
@@ -24,8 +24,8 @@ div.lti {
.wrapper-lti-link {
@include font-size(14);
background-color: $sidebar-color;
padding: $baseline;
background-color: var(--sidebar-color);
padding: var(--baseline);
.lti-link {
margin-bottom: 0;
@@ -58,8 +58,8 @@ div.lti {
}
div.problem-feedback {
margin-top: ($baseline/4);
margin-bottom: ($baseline/4);
margin-top: calc((var(--baseline)/4));
margin-bottom: calc((var(--baseline)/4));
}
}

16
xmodule/assets/poll/_display.scss
View File

@@ -20,13 +20,13 @@ div.poll_question {
h3 {
margin-top: 0;
margin-bottom: ($baseline*0.75);
margin-bottom: calc((var(--baseline)*0.75));
color: #fe57a1;
font-size: 1.9em;
&.problem-header {
div.staff {
margin-top: ($baseline*1.5);
margin-top: calc((var(--baseline)*1.5));
font-size: 80%;
}
}
@@ -44,7 +44,7 @@ div.poll_question {
}
.poll_answer {
margin-bottom: $baseline;
margin-bottom: var(--baseline);
&.short {
clear: both;
@@ -107,7 +107,7 @@ div.poll_question {
font-weight: bold;
letter-spacing: normal;
line-height: 25.59375px;
margin-bottom: ($baseline*0.75);
margin-bottom: calc((var(--baseline)*0.75));
margin: 0;
padding: 0px;
text-align: center;
@@ -145,9 +145,9 @@ div.poll_question {
width: 80%;
text-align: left;
min-height: 30px;
margin-left: $baseline;
margin-left: var(--baseline);
height: auto;
margin-bottom: $baseline;
margin-bottom: var(--baseline);
&.short {
width: 100px;
@@ -157,7 +157,7 @@ div.poll_question {
.stats {
min-height: 40px;
margin-top: $baseline;
margin-top: var(--baseline);
clear: both;
&.short {
@@ -174,7 +174,7 @@ div.poll_question {
border: 1px solid black;
display: inline;
float: left;
margin-right: ($baseline/2);
margin-right: calc((var(--baseline)/2));
&.short {
width: 65%;

18
xmodule/assets/problem/_edit.scss
View File

@@ -5,20 +5,20 @@
margin-top: -4px;
padding: 3px 9px;
font-size: 12px;
color: $link-color;
color: var(--link-color);
&.current {
border: 1px solid $lightGrey !important;
border: 1px solid var(--lightGrey) !important;
border-radius: 3px !important;
background: $lightGrey !important;
color: $darkGrey !important;
background: var(--lightGrey) !important;
color: var(--darkGrey) !important;
pointer-events: none;
cursor: none;
&:hover,
&:focus {
box-shadow: 0 0 0 0 !important;
background-color: $white;
background-color: var(--white);
}
}
}
@@ -31,9 +31,9 @@
top: 41px;
@include left(70%);
width: 0;
border-left: 1px solid $gray-l2;
border-left: 1px solid var(--gray-l2);
background-color: $lightGrey;
background-color: var(--lightGrey);
overflow: hidden;
&.shown {
@@ -76,7 +76,7 @@
margin-right: 30px;
.icon {
height: ($baseline * 1.5);
height: calc((var(--baseline) * 1.5));
}
}
}
@@ -105,5 +105,5 @@
width: 26px;
height: 21px;
vertical-align: middle;
color: $body-color;
color: var(--body-color);
}

14
xmodule/assets/sequence/_display.scss
View File

@@ -5,9 +5,9 @@
@import 'bootstrap/scss/mixins/breakpoints';
@import 'lms/theme/variables-v1';
$seq-nav-border-color: $border-color !default;
$seq-nav-border-color: var(--border-color) !default;
$seq-nav-hover-color: rgb(245, 245, 245) !default;
$seq-nav-link-color: $link-color !default;
$seq-nav-link-color: var(--link-color) !default;
$seq-nav-icon-color: rgb(10, 10, 10) !default;
$seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
$seq-nav-tooltip-color: rgb(51, 51, 51) !default;
@@ -69,7 +69,7 @@ $seq-nav-height: 50px;
.sequence-nav {
@extend .topbar;
margin: 0 auto $baseline;
margin: 0 auto var(--baseline);
position: relative;
border-bottom: none;
z-index: 0;
@@ -172,14 +172,14 @@ $seq-nav-height: 50px;
margin-top: 12px;
background: $seq-nav-tooltip-color;
color: $white;
font-family: $font-family-sans-serif;
color: var(--white);
font-family: var(--font-family-sans-serif);
line-height: lh();
right: 0; // Should not be RTLed, tooltips do not move in RTL
padding: 6px;
position: absolute;
top: 48px;
text-shadow: 0 -1px 0 $black;
text-shadow: 0 -1px 0 var(--black);
white-space: pre;
pointer-events: none;
@@ -239,7 +239,7 @@ $seq-nav-height: 50px;
text-overflow: ellipsis;
span:not(:last-child) {
@include padding-right($baseline / 2);
@include padding-right(calc((var(--baseline) / 2)));
}
}

2
xmodule/assets/tabs/_codemirror.scss
View File

@@ -9,7 +9,7 @@
height: 379px;
border: 1px solid #3c3c3c;
border-top: 1px solid #8891a1;
background: $white;
background: var(--white);
color: #3c3c3c;
}

40
xmodule/assets/tabs/_tabs.scss
View File

@@ -31,12 +31,12 @@
.edit-header {
box-sizing: border-box;
padding: 18px $baseline;
padding: 18px var(--baseline);
top: 0 !important; // ugly override for second level tab override
right: 0;
background-color: $blue;
border-bottom: 1px solid $blue-d2;
color: $white;
background-color: var(--blue);
border-bottom: 1px solid var(--blue-d2);
color: var(--white);
//Component Name
.component-name {
@@ -44,16 +44,16 @@
top: 0;
left: 0;
width: 50%;
color: $white;
color: var(--white);
font-weight: 600;
em {
display: inline-block;
margin-right: ($baseline/4);
margin-right: calc((var(--baseline)/4));
font-weight: 400;
color: $white;
color: var(--white);
}
}
@@ -61,9 +61,9 @@
.editor-tabs {
list-style: none;
right: 0;
top: ($baseline/4);
top: calc((var(--baseline)/4));
position: absolute;
padding: 12px ($baseline*0.75);
padding: 12px calc((var(--baseline)*0.75));
.inner_tab_wrap {
display: inline-block;
@@ -73,25 +73,25 @@
@include font-size(14);
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $blue-d1;
border: 1px solid var(--blue-d1);
border-radius: 3px;
padding: ($baseline/4) ($baseline);
background-color: $blue;
padding: calc((var(--baseline)/4)) (var(--baseline));
background-color: var(--blue);
font-weight: bold;
color: $white;
color: var(--white);
&.current {
@include linear-gradient($blue, $blue);
@include linear-gradient(var(--blue), var(--blue));
color: $blue-d1;
box-shadow: inset 0 1px 2px 1px $shadow-l1;
background-color: $blue-d4;
color: var(--blue-d1);
box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
background-color: var(--blue-d4);
cursor: default;
}
&:hover,
&:focus {
box-shadow: inset 0 1px 2px 1px $shadow;
box-shadow: inset 0 1px 2px 1px var(--shadow);
background-image: linear-gradient(#009fe6, #009fe6) !important;
}
}
@@ -113,7 +113,7 @@
.comp-subtitles-import-list {
> li {
display: block;
margin: $baseline/2 0;
margin: calc(var(--baseline)/2) 0;
}
.blue-button {
@@ -128,7 +128,7 @@
}
.component-tab {
background: $white;
background: var(--white);
position: relative;
border-top: 1px solid #8891a1;

47
xmodule/assets/video/_accessible_menu.scss
View File

@@ -1,11 +1,12 @@
@import 'base/mixins';
@import 'lms/theme/variables-v1';
$a11y--gray: rgb(127, 127, 127);
$a11y--blue: rgb(0, 159, 230);
$a11y--gray-d1: shade($gray, 20%);
$a11y--gray-l2: tint($gray, 40%);
$a11y--gray-l3: tint($gray, 60%);
$a11y--blue-s1: saturate($blue, 15%);
$a11y--gray-d1: var(--gray-d1);
$a11y--gray-l2: var(--gray-l2);
$a11y--gray-l3: var(--gray-l3);
$a11y--blue-s1: var(--blue-s1);
%use-font-awesome {
font-family: FontAwesome;
@@ -32,7 +33,7 @@ $a11y--blue-s1: saturate($blue, 15%);
display: none;
position: absolute;
list-style: none;
background-color: $white;
background-color: var(--white);
border: 1px solid #eee;
li {
@@ -41,7 +42,7 @@ $a11y--blue-s1: saturate($blue, 15%);
margin: 0;
padding: 0;
border-bottom: 1px solid #eee;
color: $white;
color: var(--white);
a {
display: block;
@@ -84,23 +85,23 @@ $a11y--blue-s1: saturate($blue, 15%);
&.open {
> a {
background-color: $action-primary-active-bg;
color: $very-light-text;
background-color: var(--action-primary-active-bg);
color: var(--very-light-text);
&::after {
color: $very-light-text;
color: var(--very-light-text);
}
}
}
> a {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transition(all var(--tmg-f2) ease-in-out 0s);
@include font-size(12);
display: block;
border-radius: 0 3px 3px 0;
background-color: $very-light-text;
padding: ($baseline*0.75) ($baseline*1.25) ($baseline*0.75) ($baseline*0.75);
background-color: var(--very-light-text);
padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75));
color: $a11y--gray-l2;
min-width: 1.5em;
line-height: 14px;
@@ -113,9 +114,9 @@ $a11y--blue-s1: saturate($blue, 15%);
content: "\f0d7";
position: absolute;
right: ($baseline*0.5);
right: calc((var(--baseline)*0.5));
top: 33%;
color: $lighter-base-font-color;
color: var(--lighter-base-font-color);
}
}
@@ -144,7 +145,7 @@ $a11y--blue-s1: saturate($blue, 15%);
@extend %ui-depth5;
border: 1px solid #333;
background: $white;
background: var(--white);
color: #333;
padding: 0;
margin: 0;
@@ -162,8 +163,8 @@ $a11y--blue-s1: saturate($blue, 15%);
.menu-item,
.submenu-item {
border-top: 1px solid $gray-l3;
padding: ($baseline/4) ($baseline/2);
border-top: 1px solid var(--gray-l3);
padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
outline: none;
& > span {
@@ -176,17 +177,17 @@ $a11y--blue-s1: saturate($blue, 15%);
&:focus {
background: #333;
color: $white;
color: var(--white);
& > span {
color: $white;
color: var(--white);
}
}
}
.submenu-item {
position: relative;
padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2));
&::after {
content: '\25B6';
@@ -202,10 +203,10 @@ $a11y--blue-s1: saturate($blue, 15%);
&.is-opened {
background: #333;
color: $white;
color: var(--white);
& > span {
color: $white;
color: var(--white);
}
& > .submenu {
@@ -220,7 +221,7 @@ $a11y--blue-s1: saturate($blue, 15%);
.is-disabled {
pointer-events: none;
color: $gray-l3;
color: var(--gray-l3);
}
}

92
xmodule/assets/video/_display.scss
View File

@@ -23,7 +23,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light
$cool-dark: rgb(79, 89, 93); // UXPL cool dark
& {
margin-bottom: ($baseline*1.5);
margin-bottom: calc((var(--baseline)*1.5));
}
.is-hidden {
@@ -99,9 +99,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.branding,
.wrapper-transcript-feedback {
flex: 1;
margin-top: $baseline;
margin-top: var(--baseline);
@include padding-right($baseline);
@include padding-right(var(--baseline));
vertical-align: top;
}
@@ -147,14 +147,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
left: -9999em;
display: inline-block;
vertical-align: middle;
color: $body-color;
color: var(--body-color);
}
.brand-logo {
display: inline-block;
max-width: 100%;
max-height: ($baseline*2);
padding: ($baseline/4) 0;
max-height: calc((var(--baseline)*2));
padding: calc((var(--baseline)/4)) 0;
vertical-align: middle;
}
}
@@ -180,8 +180,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.google-disclaimer {
display: none;
margin-top: $baseline;
@include padding-right($baseline);
margin-top: var(--baseline);
@include padding-right(var(--baseline));
vertical-align: top;
}
@@ -246,7 +246,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
opacity: 0.1;
&::after {
background: $white;
background: var(--white);
position: absolute;
width: 50%;
height: 50%;
@@ -271,23 +271,23 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
}
.closed-captions.is-visible {
max-height: ($baseline * 3);
border-radius: ($baseline / 5);
padding: 8px ($baseline / 2) 8px ($baseline * 1.5);
max-height: calc((var(--baseline) * 3));
border-radius: calc((var(--baseline) / 5));
padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5));
background: rgba(0, 0, 0, 0.75);
color: $yellow;
color: var(--yellow);
&::before {
position: absolute;
display: inline-block;
top: 50%;
@include left($baseline);
@include left(var(--baseline));
margin-top: -0.6em;
font-family: 'FontAwesome';
content: "\f142";
color: $white;
color: var(--white);
opacity: 0.5;
}
@@ -316,7 +316,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.video-error,
.video-hls-error {
padding: ($baseline / 5);
padding: calc((var(--baseline) / 5));
background: black;
color: white !important; // the pattern library headings shim is more scoped
}
@@ -366,7 +366,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
margin: 0;
border: 0;
border-radius: 0;
padding: ($baseline / 2) ($baseline / 1.5);
padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5));
background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
box-shadow: none;
text-shadow: none;
@@ -409,7 +409,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
left: 0;
right: 0;
z-index: 1;
height: ($baseline / 4);
height: calc((var(--baseline) / 4));
margin-left: 0;
border: 1px solid $cool-dark;
border-radius: 0;
@@ -436,11 +436,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
box-sizing: border-box;
top: -1px;
height: ($baseline / 4);
width: ($baseline / 4);
margin-left: -($baseline / 8); // center-center causes the control to be beyond the end of the sider
height: calc((var(--baseline) / 4));
width: calc((var(--baseline) / 4));
margin-left: calc(-1 * (var(--baseline) / 8)); // center-center causes the control to be beyond the end of the sider
border: 1px solid $secondary-base;
border-radius: ($baseline / 5);
border-radius: calc((var(--baseline) / 5));
padding: 0;
background: $secondary-base;
box-shadow: none;
@@ -527,7 +527,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
position: absolute;
display: none;
bottom: ($baseline * 2);
bottom: calc((var(--baseline) * 2));
@include right(0); // right-align menus since this whole collection is on the right
@@ -571,9 +571,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
&.is-active {
.speed-option,
.control-lang {
@include border-left($baseline/10 solid rgb(14, 166, 236));
@include border-left(var(--baseline)/10 solid rgb(14, 166, 236));
font-weight: $font-bold;
font-weight: var(--font-bold);
color: rgb(14, 166, 236); // UXPL primary accent
}
}
@@ -610,9 +610,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.speed-button {
.label {
@include padding(0 ($baseline/3) 0 0);
@include padding(0 calc((var(--baseline)/3)) 0 0);
font-family: $font-family-sans-serif;
font-family: var(--font-family-sans-serif);
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
@media (max-width: 1120px) {
@@ -636,8 +636,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.lang {
.language-menu {
width: $baseline;
padding: ($baseline / 2) 0;
width: var(--baseline);
padding: calc((var(--baseline) / 2)) 0;
}
.control {
@@ -685,7 +685,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
display: none;
position: absolute;
bottom: ($baseline * 2);
bottom: calc((var(--baseline) * 2));
@include right(0);
@@ -695,7 +695,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.volume-slider {
height: 100px;
width: ($baseline / 4);
width: calc((var(--baseline) / 4));
margin: 14px auto;
box-sizing: border-box;
border: 1px solid $cool-dark;
@@ -704,14 +704,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
.ui-slider-handle {
@extend %ui-fake-link;
@include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
@include transition(height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s);
@include left(-5px);
box-sizing: border-box;
height: 13px;
width: 13px;
border: 1px solid $secondary-base;
border-radius: ($baseline / 5);
border-radius: calc((var(--baseline) / 5));
padding: 0;
background: $secondary-base;
box-shadow: none;
@@ -763,11 +763,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
&:hover {
.video-controls {
.slider {
height: ($baseline / 1.5);
height: calc((var(--baseline) / 1.5));
.ui-slider-handle {
height: ($baseline / 1.5);
width: ($baseline / 1.5);
height: calc((var(--baseline) / 1.5));
width: calc((var(--baseline) / 1.5));
}
}
}
@@ -887,7 +887,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
bottom: 0;
top: 0;
width: 275px;
padding: 0 $baseline;
padding: 0 var(--baseline);
display: none;
}
}
@@ -973,14 +973,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
box-sizing: border-box;
@include transition(none);
background: $black;
background: var(--black);
visibility: visible;
li {
color: #aaa;
&.current {
color: $white;
color: var(--white);
}
}
}
@@ -1010,17 +1010,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100%;
background-color: $black;
background-color: var(--black);
&.is-html5 {
background-size: 15%;
}
.btn-play.btn-pre-roll {
padding: $baseline;
padding: var(--baseline);
border: none;
border-radius: $baseline;
background: $black-t2;
border-radius: var(--baseline);
background: var(--black-t2);
box-shadow: none;
&::after {
@@ -1030,13 +1030,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
}
img {
height: ($baseline * 4);
width: ($baseline * 4);
height: calc((var(--baseline) * 4));
width: calc((var(--baseline) * 4));
}
&:hover,
&:focus {
background: $blue;
background: var(--blue);
}
}
}