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

Convert discussion block sass variable into css variables (#37742)

Browse Source 
* chore: convert discussion sass variable into css variables
This commit is contained in:
salmannawaz
2025-12-30 23:13:47 +05:00
committed by GitHub
parent bac7e12b5c
commit 2aeac45994
22 changed files with 504 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@
@import 'bourbon/bourbon';
@import 'lms/theme/variables';
@import 'lms/theme/variables-v1';
@import 'lms/static/sass/discussion/utilities/_variables-bootstrap.scss';
@import 'cms/static/sass/partials/cms/theme/_variables';
@import 'cms/static/sass/partials/cms/theme/_variables-v1';
@import 'bootstrap/scss/variables';
@@ -16,6 +17,8 @@
:root {
--action-primary-active-bg: $action-primary-active-bg;
--actions-dropdown-width: $actions-dropdown-width;
--actions-dropdown-offset: $actions-dropdown-offset;
--base-font-size: $base-font-size;
--base-line-height: $base-line-height;
--baseline: $baseline;
@@ -28,9 +31,12 @@
--blue-s1: $blue-s1;
--body-color: $body-color;
--border-color: $border-color;
--border-color-4:$border-color-4;
--bp-screen-lg: $bp-screen-lg;
--btn-brand-focus-background: $btn-brand-focus-background;
--correct: $correct;
--comment-image-dimension: $comment-image-dimension;
--container-max-widths-xl: map-get($container-max-widths, xl);
--danger: $danger;
--darkGrey: $darkGrey;
--error-color: $error-color;
@@ -38,7 +44,35 @@
--error-color-light: lighten($error-color, 25%);
--font-bold: $font-bold;
--font-family-sans-serif: $font-family-sans-serif;
--forum-color-active-thread: $forum-color-active-thread;
--forum-color-hover: $forum-color-hover;
--forum-color-active-text: $forum-color-active-text;
--forum-color-background: $forum-color-background;
--forum-x-large-font-size: $forum-x-large-font-size;
--forum-color-copy-light: $forum-color-copy-light;
--forum-large-font-size: $forum-large-font-size;
--forum-border-radius: $forum-border-radius;
--forum-base-font-size: $forum-base-font-size;
--forum-small-font-size: $forum-small-font-size;
--forum-color-border: $forum-color-border;
--forum-color-background-light: $forum-color-background-light;
--forum-color-editor-preview-label: $forum-color-editor-preview-label;
--forum-color-following: $forum-color-following;
--forum-color-error: $forum-color-error;
--forum-color-pinned: $forum-color-pinned;
--forum-color-reported: $forum-color-reported;
--forum-color-closed: $forum-color-closed;
--forum-color-staff: $forum-color-staff;
--forum-color-community-ta: $forum-color-community-ta;
--forum-color-response-count: $forum-color-response-count;
--forum-color-read-post: $forum-color-read-post;
--forum-color-hover-thread: $forum-color-hover-thread;
--forum-color-reading-thread: $forum-color-reading-thread;
--forum-color-never-read-post: $forum-color-never-read-post;
--forum-color-navigation-bar: $forum-color-navigation-bar;
--forum-color-primary: $forum-color-primary;
--general-color-accent: $general-color-accent;
--green: $green;
--gray: $gray;
--gray-300: $gray-300;
--gray-d1: $gray-d1;
@@ -56,15 +90,20 @@
--lightGrey: $lightGrey;
--lighter-base-font-color: $lighter-base-font-color;
--link-color: $link-color;
--line-height-base:$line-height-base;
--medium-font-size: $medium-font-size;
--pink:$pink;
--partially-correct: $partially-correct;
--primary: $primary;
--post-image-dimension: $post-image-dimension;
--response-image-dimension: $response-image-dimension;
--shadow: $shadow;
--shadow-l1: $shadow-l1;
--sidebar-color: $sidebar-color;
--small-font-size: $small-font-size;
--submitted: $submitted;
--success: $success;
--serif:$serif;
--tmg-f2: $tmg-f2;
--tmg-s2: $tmg-s2;
--transparent: $transparent;

76
lms/static/sass/base/_base.scss
View File

@@ -6,7 +6,7 @@
// }
html {
font-family: $font-family-sans-serif;
font-family: var(--font-family-sans-serif);
font-style: normal;
line-height: 1em;
background: theme-color("inverse");
@@ -14,11 +14,11 @@ html {
}
body {
font-family: $font-family-sans-serif;
font-family: var(--font-family-sans-serif);
font-style: normal;
font-size: $font-size-base;
font-size: var(--font-size-base);
line-height: 1em;
background: $body-bg;
background: var(--body-bg);
}
@@ -33,29 +33,29 @@ h3,
h4,
h5,
h6 {
color: $body-color;
font: normal 1.2em/1.2em $serif;
color: var(--body-color);
font: normal 1.2em/1.2em var(--serif);
margin: 0;
}
h1 {
color: $body-color;
font: normal 2em/1.4em $font-family-sans-serif;
margin-bottom: ($baseline*1.5);
color: var(--body-color);
font: normal 2em/1.4em var(--font-family-sans-serif);
margin-bottom: calc(var(--baseline) * 1.5);
text-align: center;
}
h2 {
color: $lighter-base-font-color;
font: normal 1.2em/1.2em $serif;
margin-bottom: ($baseline*0.75);
color: var(--lighter-base-font-color);
font: normal 1.2em/1.2em var(--serif);
margin-bottom: calc(var(--baseline) * 0.75);
-webkit-font-smoothing: antialiased;
}
p + h2,
ul + h2,
ol + h2 {
margin-top: ($baseline*2);
margin-top: calc(var(--baseline) * 2);
}
p {
@@ -78,20 +78,20 @@ span {
}
.text-dark-grey {
color: $dark-gray1;
color: var(--dark-gray1);
font-size: 24px;
}
p + p,
ul + p,
ol + p {
margin-top: $baseline;
margin-top: var(--baseline);
}
p {
a:not(.btn),
a:visited:not(.btn) {
color: $link-color;
color: var(--link-color);
font: inherit;
font-weight: inherit;
text-decoration: none;
@@ -108,7 +108,7 @@ p {
a:not(.btn),
a:visited:not(.btn) {
color: $link-color;
color: var(--link-color);
font: inherit;
text-decoration: none;
@@ -131,12 +131,12 @@ a:visited:not(.btn) {
}
.content-wrapper {
margin: $baseline auto 0 auto;
max-width: map-get($container-max-widths, xl);
padding: 0 0 $baseline/2;
margin: var(--baseline) auto 0 auto;
max-width: var(--container-max-widths-xl);
padding: 0 0 calc(var(--baseline) / 2);
@include media-breakpoint-up(md) {
padding: 0 $baseline $baseline/2;
padding: 0 var(--baseline) calc(var(--baseline) / 2);
}
@media print {
@@ -151,7 +151,7 @@ a:visited:not(.btn) {
@include media-breakpoint-up(md) {
margin: 0 auto;
padding: ($baseline*2) 0;
padding: calc(var(--baseline) * 2) 0;
max-width: grid-width(12);
min-width: 760px;
width: flex-grid(12);
@@ -171,8 +171,8 @@ span.edx {
@include clearfix();
margin: 0 auto;
max-width: map-get($container-max-widths, xl);
padding: ($baseline*3) 0 ($baseline*6);
max-width: var(--container-max-widths-xl);
padding: calc(var(--baseline) * 3) 0 calc(var(--baseline) * 6);
width: flex-grid(12);
.inner-wrapper {
@@ -185,29 +185,29 @@ span.edx {
list-style: disc;
li {
color: $body-color;
font: normal 1em/1.4em $serif;
color: var(--body-color);
font: normal 1em/1.4em var(--serif);
margin: 0;
}
}
h1 {
margin-bottom: ($baseline*1.5);
margin-bottom: calc(var(--baseline) * 1.5);
}
h1 + hr {
margin-bottom: ($baseline*3);
margin-bottom: calc(var(--baseline) * 3);
}
p + h2,
ul + h2,
ol + h2 {
margin-top: ($baseline*2);
margin-top: calc(var(--baseline) * 2);
}
ul + p,
ol + p {
margin-top: $baseline;
margin-top: var(--baseline);
}
}
@@ -227,13 +227,13 @@ mark {
.ie-banner {
display: none;
max-width: map-get($container-max-widths, xl);
max-width: var(--container-max-widths-xl);
min-width: 720px;
margin: auto;
border-radius: 0 0 3px 3px;
background: #f4f4e0;
color: #3c3c3c;
padding: ($baseline/4) $baseline 8px;
padding: calc(var(--baseline) / 4) var(--baseline) 8px;
font-size: 13px;
text-align: center;
@@ -274,19 +274,19 @@ mark {
display: inline-block;
position: absolute;
left: 0;
top: -($baseline*30);
top: calc(-1 * var(--baseline) * 30);
overflow: hidden;
background: $white;
border-bottom: 1px solid $border-color-4;
padding: ($baseline*0.75) 0;
background: var(--white);
border-bottom: 1px solid var(--border-color-4);
padding: calc(var(--baseline) * 0.75) 0;
&:focus,
&:active {
@include left(45%);
@include margin-left(-1 * $baseline * 1.5);
@include margin-left(calc( -1 * var(--baseline) * 1.5));
position: absolute;
top: $baseline/4;
top: calc(var(--baseline) / 4);
width: 10%;
height: auto;
background-color: black;

18
lms/static/sass/discussion/_discussion-v1.scss
View File

@@ -12,14 +12,14 @@
);
display: inline-block;
border: 1px solid $forum-color-active-thread;
border: 1px solid var(--forum-color-active-thread);
border-radius: 3px;
margin: 0;
background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $font-family-sans-serif; // without this, it would fallback to lms button tag style
font-family: var(--font-family-sans-serif); // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
@@ -44,11 +44,11 @@
&:focus {
// Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
border-color: var(--forum-color-hover) !important;
background-color: var(--forum-color-hover) !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
color: var(--forum-color-active-text) !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
}
@@ -59,15 +59,15 @@
.btn {
@extend %pattern-library-btn;
background-color: $forum-color-background;
color: $forum-color-active-thread;
background-color: var(--forum-color-background);
color: var(--forum-color-active-thread);
}
.btn-brand {
@extend %pattern-library-btn;
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
background-color: var(--forum-color-active-thread);
color: var(--forum-color-active-text);
}
}

42
lms/static/sass/discussion/_discussion.scss
View File

@@ -17,9 +17,9 @@
.bottom-post-status {
padding: 30px;
font-size: $forum-x-large-font-size;
font-size: var(--forum-x-large-font-size);
font-weight: 700;
color: $forum-color-copy-light;
color: var(--forum-color-copy-light);
text-align: center;
}
@@ -34,7 +34,7 @@
.main-article.new {
display: none;
padding: ($baseline*2.5);
padding: calc(var(--baseline) * 2.5);
}
.discussion-reply-new {
@@ -42,13 +42,13 @@
@include transition(opacity 0.2s linear 0s);
h4 {
font-size: $forum-large-font-size;
font-size: var(--forum-large-font-size);
font-weight: 700;
}
}
.reply-post-control {
margin-top: $baseline;
margin-top: var(--baseline);
}
}
@@ -60,17 +60,17 @@
display: block;
position: relative;
border-radius: $forum-border-radius;
border-radius: var(--forum-border-radius);
header {
.anonymous {
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
}
}
.inline-discussion-topic {
width: flex-grid(12);
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
.inline-discussion-topic-title {
font-weight: bold;
@@ -81,19 +81,19 @@
@include float(left);
width: flex-grid(7);
margin-bottom: ($baseline * 0.75);
margin-bottom: calc(var(--baseline) * 0.75);
}
.add_post_btn_container {
@include text-align(right);
width: flex-grid(12);
height: (2 * $baseline);
height: calc(2 * var(--baseline));
}
div.add-response.post-extended-content {
margin-top: $baseline;
margin-bottom: $baseline;
margin-top: var(--baseline);
margin-bottom: var(--baseline);
}
}
@@ -102,7 +102,7 @@
position: relative;
top: 3px;
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
text-align: center;
&.shown {
@@ -117,11 +117,11 @@ section.discussion {
.new-post-article {
.forum-new-post-form {
padding: $baseline;
padding: var(--baseline);
}
.inner-wrapper {
max-width: map-get($container-max-widths, xl);
max-width: var(--container-max-widths-xl);
min-width: 760px;
margin: auto;
}
@@ -138,14 +138,14 @@ section.discussion {
// post pagination
section.discussion-pagination {
margin-top: ($baseline*1.5);
margin-top: calc(var(--baseline) * 1.5);
nav.discussion-paginator {
@include float(right);
ol {
li {
@include padding-right($baseline/2);
@include padding-right(calc(var(--baseline) / 2));
list-style: none;
display: inline-block;
@@ -153,10 +153,10 @@ section.discussion-pagination {
&.current-page span {
display: inline-block;
height: 35px;
padding: 0 ($baseline*0.75);
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
font-size: $forum-base-font-size;
padding: 0 calc(var(--baseline) * 0.75);
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
font-size: var(--forum-base-font-size);
font-weight: 700;
line-height: 32px;
color: theme-color("gray-dark");

20
lms/static/sass/discussion/_layouts.scss
View File

@@ -1,26 +1,26 @@
// Layouts for discussion pages
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
margin-bottom: var(--baseline) / 5;
font-size: var(--forum-x-large-font-size);
}
.discussion-profile-count {
margin-top: $baseline / 4;
margin-top: calc(var(--baseline) / 4);
}
.discussion-profile-info {
@include margin-right($baseline);
@include margin-right(var(--baseline));
}
.user-name {
@include margin-right($baseline);
@include margin-right(var(--baseline));
font-size: $forum-x-large-font-size;
font-size: var(--forum-x-large-font-size);
}
.user-roles {
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
font-style: italic;
}
}
@@ -34,10 +34,10 @@
.discussion-column {
flex-grow: 1; // This column should consume all the available space
margin-bottom: $baseline;
margin-bottom: var(--baseline);
@include media-breakpoint-up(md) {
@include margin-left($baseline);
@include margin-left(var(--baseline));
min-height: 500px;
margin-bottom: 0;
@@ -45,6 +45,6 @@
}
.new-post-article {
margin-top: -$baseline;
margin-top: calc(-1 * var(--baseline));
}
}

44
lms/static/sass/discussion/_mixins.scss
View File

@@ -4,77 +4,77 @@
@mixin discussion-button() {
display: block;
border: 1px solid;
border-radius: $forum-border-radius;
border-radius: var(--forum-border-radius);
height: 35px;
background-image: none;
color: $white;
color: var(--white);
line-height: 35px;
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
white-space: nowrap; // Prevent word-break in Arabic in Google Chrome
text-shadow: none;
padding: 0 ($baseline*0.75);
padding: 0 calc(var(--baseline) * 0.75);
}
@mixin white-button {
@include discussion-button();
border-color: #aaa;
background-color: $white;
background-color: var(--white);
color: theme-color("gray-dark");
&:hover,
&:focus {
background-color: $white;
background-color: var(--white);
}
}
@mixin discussion-wmd-input {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include border-radius(var(--forum-border-radius), var(--forum-border-radius), 0, 0);
box-sizing: border-box;
margin-top: 0;
border: 1px solid $forum-color-border;
padding: ($baseline/2);
border: 1px solid var(--forum-color-border);
padding: calc(var(--baseline) / 2);
width: 100%;
height: 125px;
background: $forum-color-background;
font-size: $forum-base-font-size;
font-family: $font-family-sans-serif;
background: var(--forum-color-background);
font-size: var(--forum-base-font-size);
font-family: var(--font-family-sans-serif);
line-height: 1.6;
}
@mixin discussion-wmd-preview-container {
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
@include border-radius(0, 0, var(--forum-border-radius), var(--forum-border-radius));
box-sizing: border-box;
border: 1px solid $forum-color-border;
border: 1px solid var(--forum-color-border);
width: 100%;
background: $forum-color-background-light;
background: var(--forum-color-background-light);
}
@mixin discussion-new-post-wmd-preview-container {
@include discussion-wmd-preview-container;
border-color: $forum-color-border;
border-color: var(--forum-color-border);
}
@mixin discussion-wmd-preview-label {
@include padding-left($baseline/4);
@include padding-left(calc(var(--baseline) / 4));
padding-top: 3px;
width: 100%;
color: $forum-color-editor-preview-label;
font-size: $forum-small-font-size;
color: var(--forum-color-editor-preview-label);
font-size: var(--forum-small-font-size);
}
@mixin discussion-wmd-preview {
padding: ($baseline/2) $baseline;
padding: calc(var(--baseline) / 2) var(--baseline);
width: auto;
background-color: $forum-color-background-light;
background-color: var(--forum-color-background-light);
ol,
ul { // Fix up the RTL-only _reset.scss, but only in specific places
@include padding-left($baseline*2);
@include padding-left(calc(var(--baseline) * 2));
@include padding-right(0);
}

86
lms/static/sass/discussion/elements/_actions.scss
View File

@@ -14,7 +14,7 @@
.actions-item {
box-sizing: border-box;
display: block;
margin: ($baseline/4) 0;
margin: calc(var(--baseline) / 4) 0;
&.is-hidden {
display: none;
@@ -36,7 +36,7 @@
border-color: transparent;
.action-label {
color: $forum-color-active-text;
color: var(--forum-color-active-text);
}
}
}
@@ -61,7 +61,7 @@
position: absolute;
top: 100%;
pointer-events: none;
min-width: $actions-dropdown-width;
min-width: var(--actions-dropdown-width);
&.is-expanded {
display: block;
@@ -70,14 +70,14 @@
.actions-dropdown-list {
box-sizing: border-box;
box-shadow: 0 1px 1px $shadow-l1;
box-shadow: 0 1px 1px var(--shadow-l1);
position: relative;
width: 100%;
border-radius: $forum-border-radius;
margin: ($baseline/4) 0 0 0;
border: 1px solid $forum-color-border;
padding: ($baseline/2) ($baseline*0.75);
background: $forum-color-background;
border-radius: var(--forum-border-radius);
margin: calc(var(--baseline) / 4) 0 0 0;
border: 1px solid var(--forum-color-border);
padding: calc(var(--baseline) / 2) calc(var(--baseline) * 0.75);
background: var(--forum-color-background);
// ui triangle/nub
&::after,
@@ -97,13 +97,13 @@
@include margin-right(1px);
border-color: transparent;
border-bottom-color: $white;
border-bottom-color: var(--white);
border-width: 6px;
}
&::before {
border-color: transparent;
border-bottom-color: $forum-color-border;
border-bottom-color: var(--forum-color-border);
border-width: 7px;
}
}
@@ -127,16 +127,16 @@
box-sizing: border-box;
display: inline-block;
border: 1px solid transparent;
border-radius: $forum-border-radius;
border-radius: var(--forum-border-radius);
color: theme-color("secondary");
.action-icon {
display: inline-block;
font-size: $forum-small-font-size;
height: $baseline;
width: $baseline;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
font-size: var(--forum-small-font-size);
height: var(--baseline);
width: var(--baseline);
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
text-align: center;
color: theme-color("secondary");
@@ -162,7 +162,7 @@
}
.action-icon {
@include border-radius(0, $forum-border-radius, $forum-border-radius, 0);
@include border-radius(0, var(--forum-border-radius), var(--forum-border-radius), 0);
}
}
@@ -176,15 +176,15 @@
&:hover,
&:focus {
.action-icon {
background-color: $forum-color-following;
background-color: var(--forum-color-following);
border: 1px solid theme-color("primary");
color: $white;
color: var(--white);
}
}
&:hover,
&:focus {
border-color: $forum-color-following;
border-color: var(--forum-color-following);
}
}
@@ -197,18 +197,18 @@
&:hover,
&:focus {
.action-icon {
background-color: $green;
border: 1px solid $green;
color: $white;
background-color: var(--green);
border: 1px solid var(--green);
color: var(--white);
}
}
&:hover,
&:focus {
border-color: $green;
border-color: var(--green);
.action-label {
color: $green;
color: var(--green);
}
}
}
@@ -220,14 +220,14 @@
.action-icon {
background-color: theme-color("primary");
border: 1px solid theme-color("primary");
color: $white;
color: var(--white);
}
}
&:hover,
&:focus {
border-color: theme-color("primary");
background-color: $forum-color-background;
background-color: var(--forum-color-background);
.action-label {
color: theme-color("primary");
@@ -240,19 +240,19 @@
&:hover,
&:focus {
.action-icon {
border: 1px solid $green;
background-color: $green;
color: $white;
border: 1px solid var(--green);
background-color: var(--green);
color: var(--white);
}
}
&:hover,
&:focus {
border-color: $green;
background-color: $forum-color-background;
border-color: var(--green);
background-color: var(--forum-color-background);
.action-label {
color: $green;
color: var(--green);
}
}
}
@@ -264,7 +264,7 @@
&:hover,
&:focus {
border-color: theme-color("dark");
background-color: $forum-color-background;
background-color: var(--forum-color-background);
.action-icon {
border: 1px solid theme-color("dark");
@@ -274,7 +274,7 @@
.action-label {
opacity: 1;
color: $black;
color: var(--black);
}
}
}
@@ -292,20 +292,20 @@
display: block;
width: 100%;
padding: ($baseline/10) 0;
padding: calc(var(--baseline) / 10) 0;
white-space: nowrap;
color: theme-color("secondary");
&:hover,
&:focus {
color: $link-color;
color: var(--link-color);
}
.action-icon {
@include margin-left($baseline/4);
@include margin-left(calc(var(--baseline) / 4));
display: inline-block;
width: ($baseline/2);
width: calc(var(--baseline) / 2);
color: inherit;
}
@@ -318,18 +318,18 @@
&.is-checked {
// CASE: pin action
&.action-pin {
color: $pink;
color: var(--pink);
}
// CASE: report action
&.action-report {
color: $pink;
color: var(--pink);
}
// CASE: hover for any action
&:hover,
&:focus {
color: $link-color;
color: var(--link-color);
}
}
}

36
lms/static/sass/discussion/elements/_editor.scss
View File

@@ -25,7 +25,7 @@
.discussion-board &,
.discussion-user-profile-board & {
margin-top: -($baseline / 4);
margin-top: calc(-1 * var(--baseline) / 4);
}
}
@@ -50,7 +50,7 @@
position: relative;
overflow: hidden;
margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
margin: calc(var(--baseline) / 2) calc(var(--baseline) / 4) calc(var(--baseline) / 4) calc(var(--baseline) / 4);
padding: 0;
height: 30px;
}
@@ -87,7 +87,7 @@
display: inline-block;
width: 20px;
height: 20px;
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
background-image: url('#{var(--static-path)}/images/wmd-buttons-transparent.png');
background-position: 0 0;
background-repeat: no-repeat;
}
@@ -112,37 +112,37 @@
box-sizing: border-box;
width: 100%;
background: $forum-color-background;
background: var(--forum-color-background);
}
.wmd-prompt-background {
background-color: $black;
background-color: var(--black);
}
.wmd-prompt-dialog {
@extend .modal;
background: $forum-color-background;
padding: $baseline;
background: var(--forum-color-background);
padding: var(--baseline);
> div {
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
font-family: arial, helvetica, sans-serif;
}
b {
font-size: $forum-large-font-size;
font-size: var(--forum-large-font-size);
}
> form > input[type="text"] {
border-radius: $forum-border-radius;
border-radius: var(--forum-border-radius);
color: #333;
}
> form > input[type="button"] {
border: 1px solid #888;
font-family: $font-family-sans-serif;
font-size: $forum-x-large-font-size;
font-family: var(--font-family-sans-serif);
font-size: var(--forum-x-large-font-size);
}
> form > input[type="file"] {
@@ -156,7 +156,7 @@
}
.field-input-label {
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
}
.input-text {
@@ -164,15 +164,15 @@
height: 40px; // align with choose file button
&.has-error {
border-color: $forum-color-error;
border-color: var(--forum-color-error);
}
}
.field-message.has-error {
width: calc(100% - 175px); // align with input-text
background-color: $forum-color-error;
color: $white;
padding: $baseline / 2;
background-color: var(--forum-color-error);
color: var(--white);
padding: calc(var(--baseline) / 2);
box-sizing: border-box;
}
@@ -181,7 +181,7 @@
}
.input-checkbox {
@include margin-right($baseline / 5);
@include margin-right(calc(var(--baseline) / 5));
}
#new-url-input {

22
lms/static/sass/discussion/elements/_labels.scss
View File

@@ -3,16 +3,16 @@
.discussion {
.post-label {
@include margin($baseline/4, $baseline/2, 0, 0);
@include margin(calc(var(--baseline)/4), calc(var(--baseline)/2), 0, 0);
@extend %t-light;
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
display: inline;
white-space: nowrap;
.icon {
@include margin-right($baseline/5);
@include margin-right(calc(var(--baseline) / 5));
}
&.is-hidden {
@@ -20,34 +20,34 @@
}
&.post-label-pinned {
color: $forum-color-pinned;
color: var(--forum-color-pinned);
}
&.post-label-following {
color: $forum-color-following;
color: var(--forum-color-following);
}
&.post-label-reported {
color: $forum-color-reported;
color: var(--forum-color-reported);
}
&.post-label-closed {
color: $forum-color-closed;
color: var(--forum-color-closed);
}
&.post-label-by-staff {
color: $forum-color-staff;
color: var(--forum-color-staff);
}
&.post-label-by-community-ta {
color: $forum-color-community-ta;
color: var(--forum-color-community-ta);
}
}
.user-label-staff,
.user-label-community-ta {
color: $forum-color-copy-light;
font-size: $forum-small-font-size;
color: var(--forum-color-copy-light);
font-size: var(--forum-small-font-size);
white-space: nowrap;
}
}

106
lms/static/sass/discussion/elements/_navigation.scss
View File

@@ -6,10 +6,10 @@
// ------
.discussion-board > .page-header {
.has-breadcrumbs .breadcrumbs {
margin-bottom: ($baseline / 2);
margin-bottom: calc(var(--baseline) / 2);
font-size: font-size(base);
font-weight: font-weight(semi-bold);
line-height: $line-height-base;
line-height: var(--line-height-base);
}
}
@@ -17,20 +17,20 @@
// Browse menu
// -----------
.forum-nav-browse-menu-wrapper {
border-bottom: 1px solid $forum-color-border;
border-bottom: 1px solid var(--forum-color-border);
background: theme-color("light");
}
.forum-nav-browse-filter {
position: relative;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4);
border-bottom: 1px solid var(--forum-color-border);
padding: calc(var(--baseline) / 4);
}
.forum-nav-browse-filter .icon {
@include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
@include right(calc(var(--baseline)/4 + 1px + calc(var(--baseline) / 4))); // Wrapper padding + border + input padding
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
position: absolute;
margin-top: -6px;
top: 75%;
@@ -43,14 +43,14 @@
.forum-nav-browse-menu-following {
.icon {
@include float(left);
@include left($baseline / 2);
@include left(calc(var(--baseline) / 2));
position: relative;
top: 13px;
}
.forum-nav-browse-title {
@include padding-left($baseline * 1.5);
@include padding-left(calc(var(--baseline) * 1.5));
}
}
@@ -65,8 +65,8 @@
width: 100%;
border: 0;
border-radius: 0;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/2);
border-bottom: 1px solid var(--forum-color-border);
padding: calc(var(--baseline) / 2);
background: transparent;
box-shadow: none;
background-image: none;
@@ -79,19 +79,19 @@
// need to override button styles
background-image: none !important;
box-shadow: none !important;
background: $forum-color-background !important; /* stylelint-disable-line */
background: var(--forum-color-background) !important; /* stylelint-disable-line */
}
}
.forum-nav-browse-title .icon {
@include margin-right($baseline/2);
@include margin-right(calc(var(--baseline) / 2));
}
.forum-nav-browse-menu {
@include padding-left(0);
margin: 0;
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
overflow-y: scroll;
list-style: none;
max-height: 600px;
@@ -104,7 +104,7 @@
li {
.forum-nav-browse-title {
@include padding-left($baseline);
@include padding-left(var(--baseline));
}
}
}
@@ -115,13 +115,13 @@
.forum-nav-refine-bar {
@include clearfix();
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include border-radius(var(--forum-border-radius), var(--forum-border-radius), 0, 0);
font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border;
font-size: var(--forum-small-font-size);
border-bottom: 1px solid var(--forum-color-border);
background-color: theme-color("light");
padding: ($baseline/4) ($baseline/2);
color: $black;
padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2);
color: var(--black);
}
.forum-nav-filter-main {
@@ -194,9 +194,9 @@
}
.thread-preview-body {
margin-top: $baseline / 4;
color: $forum-color-response-count;
font-size: $forum-small-font-size;
margin-top: calc(var(--baseline) / 4);
color: var(--forum-color-response-count);
font-size: var(--forum-small-font-size);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -221,24 +221,24 @@
}
.forum-nav-thread {
border-bottom: 1px solid $forum-color-border;
background-color: $forum-color-background;
border-bottom: 1px solid var(--forum-color-border);
background-color: var(--forum-color-background);
margin-bottom: 0;
&:last-child {
// Overrides pattern library default li:last-child style
border-bottom: 1px solid $forum-color-border;
border-bottom: 1px solid var(--forum-color-border);
}
.forum-nav-thread-link {
@include border-left(3px solid transparent);
display: flex;
padding: $baseline / 2;
padding: calc(var(--baseline) / 2);
transition: none;
align-items: center;
justify-content: space-between;
color: $forum-color-read-post;
color: var(--forum-color-read-post);
&:hover,
&:active,
@@ -247,25 +247,25 @@
}
&:hover {
background-color: $forum-color-hover-thread;
background-color: var(--forum-color-hover-thread);
}
&.is-active {
background-color: $forum-color-reading-thread;
background-color: var(--forum-color-reading-thread);
}
.forum-nav-thread-unread-comments-count {
display: inline-block;
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
white-space: nowrap;
}
}
&.never-read {
.forum-nav-thread-link {
@include border-left(3px solid $forum-color-never-read-post);
@include border-left(3px solid var(--forum-color-never-read-post));
color: $forum-color-never-read-post;
color: var(--forum-color-never-read-post);
}
}
}
@@ -278,12 +278,12 @@
.forum-nav-thread-wrapper-0 {
@extend %forum-nav-thread-wrapper;
@include margin-right($baseline/5);
@include margin-right(calc(var(--baseline) / 5));
align-self: flex-start;
.icon {
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
width: 18px;
text-align: center;
@@ -298,7 +298,7 @@
.forum-nav-thread-wrapper-1 {
@extend %forum-nav-thread-wrapper;
margin: 0 ($baseline / 4);
margin: 0 calc(var(--baseline) / 4);
// 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview
// at the same length whether there are unread comments for this story or not.
max-width: calc(100% - 75px);
@@ -317,17 +317,17 @@
.forum-nav-thread-title {
@include margin-left(0);
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
display: block;
}
%forum-nav-thread-wrapper-2-content {
@include margin-right($baseline/4);
@include margin-right(calc(var(--baseline) / 4));
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
display: inline-block;
text-align: center;
color: $black;
color: var(--black);
&:last-child {
@include margin-right(0);
@@ -344,11 +344,11 @@
position: relative;
@include margin-left($baseline/4);
@include margin-left(calc(var(--baseline) / 4));
margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: $forum-border-radius;
padding: ($baseline/10) ($baseline/5);
margin-bottom: calc(var(--baseline) / 4); // Because tail is position: absolute
border-radius: var(--forum-border-radius);
padding: calc(var(--baseline) / 10) calc(var(--baseline) / 5);
min-width: 2em; // Fit most comment counts but allow expansion if necessary
background-color: theme-color("light");
@@ -357,42 +357,42 @@
content: '';
display: block;
position: absolute;
bottom: (-$baseline/4);
bottom: calc(-1 * var(--baseline) / 4);
@include right($baseline/4);
@include right(calc(var(--baseline) / 4));
width: 0;
height: 0;
border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $forum-color-border, transparent, transparent);
@include border-width(0, calc(var(--baseline) / 4), calc(var(--baseline) / 4), 0);
@include border-color(transparent, var(--forum-color-border), transparent, transparent);
}
}
.forum-nav-load-more {
border-bottom: 1px solid $forum-color-border;
border-bottom: 1px solid var(--forum-color-border);
background-color: theme-color("light");
}
%forum-nav-load-more-content {
display: block;
padding: $baseline 0;
padding: var(--baseline) 0;
text-align: center;
}
.forum-nav-load-more-link {
@extend %forum-nav-load-more-content;
color: $link-color;
color: var(--link-color);
width: 100%;
&:hover,
&:focus {
color: $forum-color-active-text;
color: var(--forum-color-active-text);
// !important overrides the one set here:
// https://github.com/openedx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472
background-color: $forum-color-active-thread !important;
background-color: var(--forum-color-active-thread) !important;
}
}

16
lms/static/sass/discussion/utilities/_developer.scss
View File

@@ -23,8 +23,8 @@
.search-alert {
@include transition(none);
padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black;
padding: calc(var(--baseline) / 2) 11px calc(var(--baseline) / 2) 18px;
background-color: var(--black);
}
.search-alert-content,
@@ -39,8 +39,8 @@
// alert copy
.message {
font-size: $forum-small-font-size;
color: $white;
font-size: var(--forum-small-font-size);
color: var(--white);
em {
@extend %t-weight5;
@@ -68,14 +68,14 @@
@extend %t-weight5;
padding: ($baseline/4) ($baseline/2);
color: $white;
font-size: $forum-base-font-size;
padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2);
color: var(--white);
font-size: var(--forum-base-font-size);
// reseting poorly globally scoped hover/focus state for this control
&:hover,
&:focus {
color: $white;
color: var(--white);
text-decoration: none;
}
}

14
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -29,13 +29,13 @@
// Override global input rules
.forum-nav-browse-filter-input {
@include padding-left($baseline/4);
@include padding-right($baseline/2 + 12px); // Leave room for icon
@include padding-left(calc(var(--baseline) / 4));
@include padding-right(calc(var(--baseline) / 2) + 12px); // Leave room for icon
box-shadow: none !important;
border-radius: $forum-border-radius !important;
border-radius: var(--forum-border-radius) !important;
height: auto !important;
font-size: $forum-small-font-size !important;
font-size: var(--forum-small-font-size) !important;
}
// --------------------------------
@@ -107,11 +107,11 @@ li[class*=forum-nav-thread-label-] {
padding-bottom: 0 !important; // overrides default header styling
.posted-details {
margin: ($baseline/5) 0 !important; // overrides courseware p styling
margin: calc(var(--baseline) / 5) 0 !important; // overrides courseware p styling
}
.post-labels {
font-size: $forum-base-font-size; // overrides default heading styling
font-size: var(--forum-base-font-size); // overrides default heading styling
}
.post-title {
@@ -124,7 +124,7 @@ li[class*=forum-nav-thread-label-] {
.discussion-article {
.response-header {
line-height: 1 !important;
font-size: $forum-base-font-size !important;
font-size: var(--forum-base-font-size) !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

6
lms/static/sass/discussion/utilities/_v1-compatibility.scss
View File

@@ -58,7 +58,7 @@
// copy
%t-copy {
font-family: $font-family-sans-serif;
font-family: var(--font-family-sans-serif);
}
%t-copy-sub1 {
@@ -66,7 +66,7 @@
@include line-height(14);
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
}
%t-copy-sub2 {
@@ -74,7 +74,7 @@
@include line-height(12);
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
}
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases

38
lms/static/sass/discussion/utilities/_variables-bootstrap.scss
View File

@@ -8,32 +8,32 @@ $forum-color-background-light: rgb(245, 245, 245) !default;
// contextual color variables
$forum-color-background: theme-color("inverse");
$forum-color-active-thread: $forum-color-primary !default;
$forum-color-active-thread: var(--forum-color-primary) !default;
$forum-color-hover: rgb(6, 86, 131) !default;
$forum-color-active-text: $white !default;
$forum-color-active-text: var(--white) !default;
$forum-color-pinned: rgb(152, 44, 98) !default;
$forum-color-reported: rgb(152, 44, 98) !default;
$forum-color-closed: $black !default;
$forum-color-following: $forum-color-primary !default;
$forum-color-staff: $forum-color-primary !default;
$forum-color-community-ta: $green !default;
$forum-color-closed: var(--black) !default;
$forum-color-following: var(--forum-color-primary) !default;
$forum-color-staff: var(--forum-color-primary) !default;
$forum-color-community-ta: var(--green) !default;
$forum-color-marked-answer: theme-color("success") !default;
$forum-color-border: $gray-300 !default;
$forum-color-border: var(--gray-300) !default;
$forum-color-error: theme-color("danger") !default;
$forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: $forum-color-copy-light !default;
$forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: $forum-color-copy-light !default;
$forum-color-response-count: $forum-color-copy-light !default;
$forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: $forum-color-copy-light !default;
$forum-color-background-label: $gray-700 !default;
$forum-color-hover-thread: var(--forum-color-background-light) !default;
$forum-color-reading-thread: var(--forum-color-background-light) !default;
$forum-color-read-post: var(--forum-color-copy-light) !default;
$forum-color-never-read-post: var(--forum-color-primary) !default;
$forum-color-editor-preview-label: var(--forum-color-copy-light) !default;
$forum-color-response-count: var(--forum-color-copy-light) !default;
$forum-color-navigation-bar: var(--forum-color-background-light) !default;
$forum-color-count: var(--forum-color-copy-light) !default;
$forum-color-background-label: var(--gray-700) !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
$response-image-dimension: ($baseline*2.5) !default; // image size + margin
$comment-image-dimension: ($baseline*2) !default; // image size + margin
$post-image-dimension: calc(var(--baseline) * 3) !default; // image size + margin
$response-image-dimension: calc(var(--baseline) * 2.5) !default; // image size + margin
$comment-image-dimension: calc(var(--baseline) * 2) !default; // image size + margin
// action-dropdown
$actions-dropdown-width: 145px; // best estimate in RU

34
lms/static/sass/discussion/utilities/_variables-v1.scss
View File

@@ -7,33 +7,33 @@ $forum-color-copy-light: rgb(65, 65, 65) !default;
$forum-color-background-light: rgb(245, 245, 245) !default;
// contextual color variables
$forum-color-background: $white;
$forum-color-active-thread: $forum-color-primary !default;
$forum-color-background: var(--white);
$forum-color-active-thread: var(--forum-color-primary) !default;
$forum-color-hover: rgb(6, 86, 131) !default;
$forum-color-active-text: $white !default;
$forum-color-active-text: var(--white) !default;
$forum-color-pinned: rgb(152, 44, 98) !default;
$forum-color-reported: rgb(152, 44, 98) !default;
$forum-color-closed: $black !default;
$forum-color-following: $forum-color-primary !default;
$forum-color-staff: $forum-color-primary !default;
$forum-color-closed: var(--black) !default;
$forum-color-following: var(--forum-color-primary) !default;
$forum-color-staff: var(--forum-color-primary) !default;
$forum-color-community-ta: rgb(0, 129, 0) !default;
$forum-color-marked-answer: rgb(0, 129, 0) !default;
$forum-color-border: rgb(217, 217, 217) !default;
$forum-color-error: rgb(203, 7, 18) !default;
$forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: $forum-color-copy-light !default;
$forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: $forum-color-copy-light !default;
$forum-color-response-count: $forum-color-copy-light !default;
$forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: $forum-color-copy-light !default;
$forum-color-hover-thread: var(--forum-color-background-light) !default;
$forum-color-reading-thread: var(--forum-color-background-light) !default;
$forum-color-read-post: var(--forum-color-copy-light) !default;
$forum-color-never-read-post: var(--forum-color-primary) !default;
$forum-color-editor-preview-label: var(--forum-color-copy-light) !default;
$forum-color-response-count: var(--forum-color-copy-light) !default;
$forum-color-navigation-bar: var(--forum-color-background-light) !default;
$forum-color-count: var(--forum-color-copy-light) !default;
$forum-color-background-label: rgb(65, 65, 65) !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
$response-image-dimension: ($baseline*2.5) !default; // image size + margin
$comment-image-dimension: ($baseline*2) !default; // image size + margin
$post-image-dimension: calc(var(--baseline) * 3) !default; // image size + margin
$response-image-dimension: calc(var(--baseline) * 2.5) !default; // image size + margin
$comment-image-dimension: calc(var(--baseline) * 2) !default; // image size + margin
// action-dropdown
$actions-dropdown-width: 145px; // best estimate in RU

26
lms/static/sass/discussion/utilities/_variables-v2.scss
View File

@@ -7,33 +7,33 @@ $forum-color-copy-light: palette(grayscale, base) !default;
$forum-color-background-light: palette(grayscale, x-back) !default;
// contextual color variables
$forum-color-background: $lms-container-background-color !default;
$forum-color-background: var(--lms-container-background-color) !default;
$forum-color-active-thread: theme-color("primary") !default;
$forum-color-hover: palette(primary, dark) !default;
$forum-color-active-text: $lms-container-background-color !default;
$forum-color-active-text: var(--lms-container-background-color) !default;
$forum-color-pinned: palette(secondary, dark) !default;
$forum-color-reported: palette(secondary, dark) !default;
$forum-color-closed: $black !default;
$forum-color-following: $forum-color-primary !default;
$forum-color-staff: $forum-color-primary !default;
$forum-color-closed: var(--black) !default;
$forum-color-following: var(--forum-color-primary) !default;
$forum-color-staff: var(--forum-color-primary) !default;
$forum-color-community-ta: palette(success, text) !default;
$forum-color-marked-answer: palette(success, text) !default;
$forum-color-border: palette(grayscale, back) !default;
$forum-color-error: palette(error, accent) !default;
$forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-hover-thread: var(--forum-color-background-light) !default;
$forum-color-reading-thread: var(--forum-color-background-light) !default;
$forum-color-read-post: palette(grayscale, base) !default;
$forum-color-never-read-post: $forum-color-primary !default;
$forum-color-never-read-post: var(--forum-color-primary) !default;
$forum-color-editor-preview-label: palette(grayscale, base) !default;
$forum-color-response-count: palette(grayscale, base) !default;
$forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-navigation-bar: var(--forum-color-background-light) !default;
$forum-color-count: palette(grayscale, base) !default;
$forum-color-background-label: palette(grayscale, base) !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
$response-image-dimension: ($baseline*2.5) !default; // image size + margin
$comment-image-dimension: ($baseline*2) !default; // image size + margin
$post-image-dimension: calc(var(--baseline) * 3) !default; // image size + margin
$response-image-dimension: calc(var(--baseline) * 2.5) !default; // image size + margin
$comment-image-dimension: calc(var(--baseline) * 2) !default; // image size + margin
// action-dropdown
$actions-dropdown-width: 145px; // best estimate in RU
@@ -46,4 +46,4 @@ $forum-large-font-size: font-size(base);
$forum-small-font-size: font-size(x-small);
// borders
$forum-border-radius: $component-border-radius;
$forum-border-radius: var(--component-border-radius);

64
lms/static/sass/discussion/views/_create-edit-post.scss
View File

@@ -8,8 +8,8 @@
box-sizing: border-box;
margin: 0;
border-radius: $forum-border-radius;
max-width: map-get($container-max-widths, xl);
border-radius: var(--forum-border-radius);
max-width: var(--container-max-widths-xl);
label,
.field-label-text {
@@ -25,13 +25,13 @@
}
.post-errors {
margin: 0 0 $baseline;
margin: 0 0 var(--baseline);
padding: 0 !important;
list-style: none !important;
}
.post-field {
margin-bottom: $baseline * 1.5;
margin-bottom: calc(var(--baseline) * 1.5);
.field-label {
margin: 0;
@@ -61,12 +61,12 @@
// UI: support text for input fields
.field-help {
margin: ($baseline / 4) 0 ($baseline / 4) 0;
font-size: $forum-small-font-size;
margin: calc(var(--baseline) / 4) 0 calc(var(--baseline) / 4) 0;
font-size: var(--forum-small-font-size);
line-height: 1.5;
&#field_help_post_type {
@include margin($baseline / 4, 0, $baseline * 0.75, 0);
@include margin(calc(var(--baseline) / 4), 0, calc(var(--baseline) * 0.75), 0);
}
&#new-post-editor-description {
@@ -81,14 +81,14 @@
}
.post-options {
margin: $baseline 0;
margin: var(--baseline) 0;
.field-label {
@include margin-right($baseline);
@include margin-right(var(--baseline));
}
.icon {
@include margin-right($baseline / 4);
@include margin-right(calc(var(--baseline) / 4));
}
}
}
@@ -101,22 +101,22 @@
padding-top: 0;
h1 {
font-size: $forum-large-font-size;
font-size: var(--forum-large-font-size);
}
.form-row {
margin-top: $baseline;
margin-top: var(--baseline);
}
.post-cancel {
@include float(left);
@include margin($baseline/2, 0, 0, $baseline*0.75);
@include margin(calc(var(--baseline)/2), 0, 0, calc(var(--baseline)*0.75));
}
.post-update {
@include float(left);
margin-top: ($baseline/2);
margin-top: calc(var(--baseline) / 2);
&:hover,
&:focus {
@@ -126,21 +126,21 @@
.edit-post-title {
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 ($baseline/2);
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
padding: 0 calc(var(--baseline) / 2);
width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
box-shadow: 0 1px 3px var(--shadow-l1) inset;
color: theme-color("gray-dark");
font-size: $forum-large-font-size;
font-family: $font-family-sans-serif;
font-size: var(--forum-large-font-size);
font-family: var(--font-family-sans-serif);
}
}
// CASE: inline styling
.discussion-module .forum-new-post-form {
background: $forum-color-background;
background: var(--forum-color-background);
}
// ====================
@@ -149,25 +149,25 @@
.forum-new-post-form,
.edit-post-form {
.post-type-label {
@include margin-right($baseline);
@include margin-right(var(--baseline));
color: theme-color("gray-dark");
}
input[type=text].field-input {
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 $baseline/2;
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
padding: 0 calc(var(--baseline) / 2);
width: 70%;
height: 40px;
color: #333;
font-size: $forum-large-font-size;
font-size: var(--forum-large-font-size);
font-family: 'Open Sans', sans-serif;
}
select.field-input {
border: 1px solid $forum-color-border !important; // !important required to override -webkit-appearance
border: 1px solid var(--forum-color-border) !important; // !important required to override -webkit-appearance
height: 40px;
}
@@ -179,18 +179,18 @@
box-sizing: border-box;
display: inline-block;
@include margin-right($baseline);
@include margin-right(var(--baseline));
border-radius: $forum-border-radius;
padding: ($baseline/2);
border-radius: var(--forum-border-radius);
padding: calc(var(--baseline) / 2);
cursor: pointer;
&:hover {
border-color: $forum-color-border;
border-color: var(--forum-color-border);
}
.icon {
@include margin-right($baseline / 4);
@include margin-right(calc(var(--baseline) / 4));
}
}
}

68
lms/static/sass/discussion/views/_home.scss
View File

@@ -3,7 +3,7 @@
// home - layout
.view-discussion-home {
@include padding-left($baseline);
@include padding-left(var(--baseline));
display: none;
@@ -13,7 +13,7 @@
}
section {
border-bottom: 1px solid $forum-color-border;
border-bottom: 1px solid var(--forum-color-border);
}
.label {
@@ -23,8 +23,8 @@
}
.label-settings {
padding-top: $baseline;
padding-bottom: ($baseline/2);
padding-top: var(--baseline);
padding-bottom: calc(var(--baseline) / 2);
}
.home-header {
@@ -32,23 +32,23 @@
}
.home-title {
font-size: $forum-large-font-size;
color: $black;
margin-bottom: ($baseline/4);
font-size: var(--forum-large-font-size);
color: var(--black);
margin-bottom: calc(var(--baseline) / 4);
}
.home-description {
@extend %t-copy-sub2;
margin-bottom: ($baseline/2);
margin-bottom: calc(var(--baseline) / 2);
}
.home-stats {
padding: $baseline 0;
padding: var(--baseline) 0;
.label-area {
display: inline-block;
min-width: ($baseline*5);
min-width: calc(var(--baseline) * 5);
width: 25%;
vertical-align: middle;
@@ -58,7 +58,7 @@
}
.stats-grouping {
@include padding-left($baseline);
@include padding-left(var(--baseline));
display: inline-block;
width: 70%;
@@ -71,9 +71,9 @@
vertical-align: middle;
.count {
font-size: $forum-x-large-font-size;
font-size: var(--forum-x-large-font-size);
display: inline-block;
padding: 0 ($baseline/2);
padding: 0 calc(var(--baseline) / 2);
vertical-align: middle;
}
@@ -86,29 +86,29 @@
.home-helpgrid {
border-bottom: none;
border-radius: $forum-border-radius;
border: 1px solid $forum-color-border;
border-radius: var(--forum-border-radius);
border: 1px solid var(--forum-color-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.helpgrid-row {
border-bottom: 1px solid $forum-color-border;
border-bottom: 1px solid var(--forum-color-border);
.row-title {
padding: ($baseline*1.5) $baseline;
padding: calc(var(--baseline) * 1.5) var(--baseline);
background-color: #dedede;
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
}
.row-item-full,
.row-item {
font-size: $forum-small-font-size;
padding: 0 ($baseline/2);
font-size: var(--forum-small-font-size);
padding: 0 calc(var(--baseline) / 2);
width: 26%;
vertical-align: middle;
.icon {
padding: 0 ($baseline/2);
padding: 0 calc(var(--baseline) / 2);
font-size: 24px;
vertical-align: middle;
// TODO: don't use table-cell for layout purposes as it switches the screenreader mode
@@ -116,7 +116,7 @@
}
.fa-stack .icon {
padding: 0 ($baseline/2);
padding: 0 calc(var(--baseline) / 2);
}
.row-description {
@@ -128,13 +128,13 @@
.row-item-full {
.notification-checkbox {
@include margin-right($baseline/2);
@include margin-right(calc(var(--baseline) / 2));
display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0);
@include padding(calc(var(--baseline)/4), 0, calc(var(--baseline)/2), 0);
border-radius: $forum-border-radius;
border-radius: var(--forum-border-radius);
border: 1px solid gray;
.email-setting {
@@ -142,7 +142,7 @@
text-align: center;
vertical-align: middle;
@include margin-left($baseline/2);
@include margin-left(calc(var(--baseline) / 2));
}
.icon {
@@ -150,7 +150,7 @@
}
.email-setting:checked ~ .icon {
color: $green;
color: var(--green);
}
}
@@ -167,35 +167,35 @@
}
.fa-search {
color: $gray-300;
color: var(--gray-300);
}
.fa-sort {
color: $gray-300;
color: var(--gray-300);
}
}
.helpgrid-row-participation {
.fa-plus {
color: $green;
color: var(--green);
}
.fa-flag {
color: $pink;
color: var(--pink);
}
.fa-star {
color: $blue;
color: var(--blue);
}
}
.helpgrid-row-notification {
.fa-square {
color: $green;
color: var(--green);
}
.fa-envelope {
color: $gray-300;
color: var(--gray-300);
}
}
}

24
lms/static/sass/discussion/views/_inline.scss
View File

@@ -5,42 +5,42 @@
.discussion.inline-discussion {
.inline-threads {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
}
.inline-thread {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
.forum-nav-bar {
padding: ($baseline / 2) ($baseline / 4);
color: $forum-color-navigation-bar;
padding: calc(var(--baseline) / 2) calc(var(--baseline) / 4);
color: var(--forum-color-navigation-bar);
position: relative;
.all-posts-btn {
color: $forum-color-primary;
color: var(--forum-color-primary);
.icon {
@include margin-left($baseline / 2);
@include margin-left(calc(var(--baseline) / 2));
}
}
}
.forum-content {
padding: $baseline / 2;
padding: calc(var(--baseline) / 2);
overflow-y: auto;
}
}
.new-post-article {
position: relative;
border: 1px solid $forum-color-border;
border: 1px solid var(--forum-color-border);
.add-post-cancel {
@include right($baseline / 2);
@include right(calc(var(--baseline) / 2));
top: $baseline / 2;
top: calc(var(--baseline) / 2);
position: absolute;
color: theme-color("primary");

84
lms/static/sass/discussion/views/_response.scss
View File

@@ -22,20 +22,20 @@
.forum-response {
animation: fadeIn 0.3s;
position: relative;
margin: $baseline 0;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
box-shadow: 0 0 1px $shadow;
margin: var(--baseline) 0;
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
box-shadow: 0 0 1px var(--shadow);
}
// wrapper - main response area
.discussion-response {
box-sizing: border-box;
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include border-radius(var(--forum-border-radius), var(--forum-border-radius), 0, 0);
padding: $baseline;
background-color: $forum-color-background;
padding: var(--baseline);
background-color: var(--forum-color-background);
}
.posted-by {
@@ -51,14 +51,14 @@
.username {
@extend %t-weight5;
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
}
}
// rtl resets for response list elements
.response-body ol,
.response-body ul { // Fix up the RTL-only _reset.scss, but only in specific places
@include padding-left($baseline*2);
@include padding-left(calc(var(--baseline) * 2));
@include padding-right(0);
}
}
@@ -66,18 +66,18 @@
// +element - add response area
.discussion .add-response {
display: inline;
padding: $baseline/2;
padding: calc(var(--baseline) / 2);
}
// +CASE: answered question - collapsed comments in answers
.forum-response .action-show-comments {
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
box-sizing: border-box;
display: block;
padding: ($baseline/2) $baseline;
padding: calc(var(--baseline) / 2) var(--baseline);
width: 100%;
background: theme-color("lightest");
box-shadow: 0 1px 3px -1px $shadow inset;
box-shadow: 0 1px 3px -1px var(--shadow) inset;
}
// +response - labels and banners
@@ -93,41 +93,41 @@
// CASE: label - community TA response
&.community-ta {
padding-top: 38px;
border-color: $forum-color-community-ta;
border-color: var(--forum-color-community-ta);
}
// CASE: banner - staff response
.staff-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include border-radius(var(--forum-border-radius), var(--forum-border-radius), 0, 0);
@include left(0);
position: absolute;
top: 0;
width: 100%;
height: 14px;
padding: 1px ($baseline/4);
padding: 1px calc(var(--baseline) / 4);
box-sizing: border-box;
background: #009fe2;
font-size: $forum-small-font-size;
font-size: var(--forum-small-font-size);
font-weight: 700;
color: $white;
color: var(--white);
}
// CASE: banner - community TA response
.community-ta-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include border-radius(var(--forum-border-radius), var(--forum-border-radius), 0, 0);
@include left(0);
position: absolute;
top: 0;
width: 100%;
height: 14px;
padding: 1px ($baseline/4);
padding: 1px calc(var(--baseline) / 4);
box-sizing: border-box;
background: $forum-color-community-ta;
font-size: $forum-small-font-size;
background: var(--forum-color-community-ta);
font-size: var(--forum-small-font-size);
font-weight: 700;
color: $white;
color: var(--white);
}
// STATE: loading - response list
@@ -144,33 +144,33 @@
.discussion .comments {
@extend %ui-no-list;
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
@include border-radius(0, 0, var(--forum-border-radius), var(--forum-border-radius));
background: theme-color("lightest");
box-shadow: 0 1px 3px -1px $shadow inset;
box-shadow: 0 1px 3px -1px var(--shadow) inset;
> li {
border-top: 1px solid $forum-color-border;
padding: ($baseline/2) $baseline;
border-top: 1px solid var(--forum-color-border);
padding: calc(var(--baseline) / 2) var(--baseline);
position: relative;
}
blockquote {
background: $forum-color-background-light;
border-radius: $forum-border-radius;
padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size;
background: var(--forum-color-background-light);
border-radius: var(--forum-border-radius);
padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2);
font-size: var(--forum-base-font-size);
}
.comment-form {
@include clearfix();
padding: ($baseline/2) 0;
padding: calc(var(--baseline) / 2) 0;
.comment-form-input {
padding: ($baseline/4) ($baseline/2);
background-color: $forum-color-background;
font-size: $forum-base-font-size;
padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2);
background-color: var(--forum-color-background);
font-size: var(--forum-base-font-size);
}
.discussion-submit-comment {
@@ -193,15 +193,15 @@
.response-count {
@include float(right);
@include margin-right($baseline / 2);
@include margin-right(var(--baseline) / 2);
color: $forum-color-response-count;
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
}
.response-pagination {
visibility: visible;
margin: ($baseline / 2) 0;
margin: calc(var(--baseline) / 2) 0;
&:empty {
visibility: hidden;
@@ -209,16 +209,16 @@
.response-display-count {
display: block;
padding: ($baseline/2) 0;
color: $forum-color-response-count;
font-size: $forum-base-font-size;
padding: calc(var(--baseline) / 2) 0;
color: var(--forum-color-response-count);
font-size: var(--forum-base-font-size);
}
.load-response-button {
@include text-align(left);
position: relative;
margin: ($baseline/2) 0;
margin: calc(var(--baseline) / 2) 0;
width: 100%;
}
}

4
lms/static/sass/discussion/views/_search.scss
View File

@@ -1,6 +1,6 @@
.forum-search {
display: flex;
margin-top: $baseline;
margin-top: var(--baseline);
position: relative;
.search-input {
@@ -12,7 +12,7 @@
}
@include media-breakpoint-up(sm) {
@include margin-left($baseline);
@include margin-left(var(--baseline));
margin-top: 0;
}

102
lms/static/sass/discussion/views/_thread.scss
View File

@@ -11,7 +11,7 @@
// post layout
.discussion-post {
padding: 0 ($baseline/2);
padding: 0 calc(var(--baseline) / 2);
.post-header-actions {
@include float(right);
@@ -24,8 +24,8 @@
@extend %t-copy-sub2;
@extend %t-light;
margin: ($baseline/5) 0;
color: $forum-color-copy-light;
margin: calc(var(--baseline) / 5) 0;
color: var(--forum-color-copy-light);
.username {
@extend %t-strong;
@@ -42,20 +42,20 @@
.thread-title {
display: block;
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
margin-bottom: var(--baseline);
font-size: var(--forum-x-large-font-size);
color: theme-color("gray-dark");
font-weight: 600;
}
.thread-responses-wrapper,
.post-extended-content {
padding: 0 ($baseline/2);
padding: 0 calc(var(--baseline) / 2);
}
// response layout
.discussion-response {
min-height: ($baseline*5);
min-height: calc(var(--baseline) * 5);
.response-header-content {
display: inline-block;
@@ -65,10 +65,10 @@
.response-header-actions {
@include float(right);
@include right($baseline);
@include right(var(--baseline));
position: absolute;
top: ($baseline/2);
top: calc(var(--baseline) / 2);
}
// response body
@@ -82,20 +82,20 @@
.response-body {
@extend %t-copy-sub2;
@include padding(($baseline / 2), ($baseline * 1.5), 0, 0);
@include padding(calc(var(--baseline) / 2), calc(var(--baseline) * 1.5), 0, 0);
display: inline-block;
margin-top: ($baseline/2);
margin-top: calc(var(--baseline) / 2);
width: flex-grid(10, 12);
p + p {
margin-top: ($baseline/2);
margin-top: calc(var(--baseline) / 2);
}
}
.comment-actions-list {
@include float(right);
@include right($baseline / 2);
@include right(calc(var(--baseline) / 2));
position: absolute;
top: 0;
@@ -105,7 +105,7 @@
// +thread - wrapper styling
.thread-wrapper {
.response-btn-count-wrapper {
margin: $baseline 0;
margin: var(--baseline) 0;
}
}
@@ -117,7 +117,7 @@
// thread - images
.author-image {
@include margin-right($baseline/2);
@include margin-right(calc(var(--baseline) / 2));
display: inline-block;
vertical-align: top;
@@ -129,33 +129,33 @@
// CASE: post image
&.level-post {
height: $post-image-dimension;
width: $post-image-dimension;
height: var(--post-image-dimension);
width: var(--post-image-dimension);
}
// CASE: response image
&.level-response {
height: $response-image-dimension;
width: $response-image-dimension;
height: var(--response-image-dimension);
width: var(--response-image-dimension);
}
// CASE: comment image
&.level-comment {
height: $comment-image-dimension;
width: $comment-image-dimension;
height: var(--comment-image-dimension);
width: var(--comment-image-dimension);
}
img {
border-radius: $forum-border-radius;
border-radius: var(--forum-border-radius);
}
}
}
.discussion-response .response-body {
@include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions.
@include padding(calc(var(--baseline) / 2), calc(var(--baseline) * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions.
margin-bottom: 0.2em;
font-size: $forum-base-font-size;
font-size: var(--forum-base-font-size);
}
// +post - individual element styling
@@ -163,12 +163,12 @@
@include clearfix();
.post-header-content {
max-width: calc(100% - #{$actions-dropdown-offset});
max-width: calc(100% - #{var(--actions-dropdown-offset)});
// post title
.post-title {
font-size: $forum-x-large-font-size;
margin-bottom: ($baseline/4);
font-size: var(--forum-x-large-font-size);
margin-bottom: calc(var(--baseline) / 4);
}
}
@@ -176,8 +176,8 @@
.post-body {
@extend %t-copy-sub1;
padding: ($baseline/2) 0;
max-width: calc(100% - #{$actions-dropdown-offset});
padding: calc(var(--baseline) / 2) 0;
max-width: calc(100% - #{var(--actions-dropdown-offset)});
}
// post context
@@ -185,7 +185,7 @@
@extend %t-copy-sub2;
@extend %t-light;
color: $forum-color-copy-light;
color: var(--forum-color-copy-light);
// CASE: no courseware context or cohort visibility rules
&:empty {
@@ -197,7 +197,7 @@
// Styling for discussion threads
.discussion-thread {
padding: 0;
margin-bottom: $baseline;
margin-bottom: var(--baseline);
@include transition(all 0.25s linear 0s);
@@ -208,26 +208,26 @@
.discussion-article {
@include transition(all 0.2s linear 0s);
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
border: 1px solid var(--forum-color-border);
border-radius: var(--forum-border-radius);
min-height: 0;
background: $forum-color-background;
box-shadow: 0 1px 0 $shadow;
background: var(--forum-color-background);
box-shadow: 0 1px 0 var(--shadow);
@include transition(all 0.2s linear 0s);
.thread-wrapper {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include border-radius(var(--forum-border-radius), var(--forum-border-radius), 0, 0);
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
background-color: $forum-color-background;
background-color: var(--forum-color-background);
.discussion-post {
.inline-comment-count {
@include margin-right($baseline/2);
@include margin-right(calc(var(--baseline) / 2));
@extend %ui-depth2;
@@ -238,8 +238,8 @@
height: 27px;
margin-top: 6px;
padding: 0 8px;
border-radius: $forum-border-radius;
font-size: $forum-small-font-size;
border-radius: var(--forum-border-radius);
font-size: var(--forum-small-font-size);
font-weight: 400;
line-height: 25px;
color: #888;
@@ -249,13 +249,13 @@
.responses {
header {
padding-bottom: 0;
margin-bottom: ($baseline*0.75);
margin-bottom: calc(var(--baseline) * 0.75);
.posted-by {
@include margin-right($baseline/4);
@include margin-right(calc(var(--baseline) / 4));
@include float(left);
font-size: $forum-large-font-size;
font-size: var(--forum-large-font-size);
}
}
}
@@ -273,27 +273,27 @@
}
.post-tools {
box-shadow: 0 1px 1px $shadow inset;
background: $white;
box-shadow: 0 1px 1px var(--shadow) inset;
background: var(--white);
&:hover {
background: $forum-color-hover-thread;
background: var(--forum-color-hover-thread);
.icon {
color: $link-hover;
color: var(--link-hover);
}
}
.btn-link {
display: block;
padding: ($baseline*0.25) $baseline;
font-size: $forum-small-font-size;
padding: calc(var(--baseline) * 0.25) var(--baseline);
font-size: var(--forum-small-font-size);
line-height: 30px;
.icon {
@include margin-right($baseline*0.25);
@include margin-right(calc(var(--baseline) * 0.25));
color: $link-color;
color: var(--link-color);
}
}
}