From 2aeac459945e3e11c153fdb5203ea020514548d5 Mon Sep 17 00:00:00 2001 From: salmannawaz Date: Tue, 30 Dec 2025 23:13:47 +0500 Subject: [PATCH] Convert discussion block sass variable into css variables (#37742) * chore: convert discussion sass variable into css variables --- .../static/sass/_builtin-block-variables.scss | 39 +++++++ lms/static/sass/base/_base.scss | 76 ++++++------- .../sass/discussion/_discussion-v1.scss | 18 +-- lms/static/sass/discussion/_discussion.scss | 42 +++---- lms/static/sass/discussion/_layouts.scss | 20 ++-- lms/static/sass/discussion/_mixins.scss | 44 ++++---- .../sass/discussion/elements/_actions.scss | 86 +++++++------- .../sass/discussion/elements/_editor.scss | 36 +++--- .../sass/discussion/elements/_labels.scss | 22 ++-- .../sass/discussion/elements/_navigation.scss | 106 +++++++++--------- .../sass/discussion/utilities/_developer.scss | 16 +-- .../sass/discussion/utilities/_shame.scss | 14 +-- .../utilities/_v1-compatibility.scss | 6 +- .../utilities/_variables-bootstrap.scss | 38 +++---- .../discussion/utilities/_variables-v1.scss | 34 +++--- .../discussion/utilities/_variables-v2.scss | 26 ++--- .../discussion/views/_create-edit-post.scss | 64 +++++------ lms/static/sass/discussion/views/_home.scss | 68 +++++------ lms/static/sass/discussion/views/_inline.scss | 24 ++-- .../sass/discussion/views/_response.scss | 84 +++++++------- lms/static/sass/discussion/views/_search.scss | 4 +- lms/static/sass/discussion/views/_thread.scss | 102 ++++++++--------- 22 files changed, 504 insertions(+), 465 deletions(-) diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss index f848e11774..22c5c25905 100644 --- a/common/static/sass/_builtin-block-variables.scss +++ b/common/static/sass/_builtin-block-variables.scss @@ -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; diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index ea01ea4516..736e630da6 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -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; diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss index 0a6a26d6c1..cb7474d4c6 100644 --- a/lms/static/sass/discussion/_discussion-v1.scss +++ b/lms/static/sass/discussion/_discussion-v1.scss @@ -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); } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 1b98d18b6c..c28e200084 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -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"); diff --git a/lms/static/sass/discussion/_layouts.scss b/lms/static/sass/discussion/_layouts.scss index 2b54c745fd..c630e9fd28 100644 --- a/lms/static/sass/discussion/_layouts.scss +++ b/lms/static/sass/discussion/_layouts.scss @@ -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)); } } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index abe967621b..e07339eed0 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -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); } diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 91b6ee7ec2..7a7493ee19 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -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); } } } diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index 750b0ad9a2..b635790049 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -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 { diff --git a/lms/static/sass/discussion/elements/_labels.scss b/lms/static/sass/discussion/elements/_labels.scss index 2609889c2a..60932f4aca 100644 --- a/lms/static/sass/discussion/elements/_labels.scss +++ b/lms/static/sass/discussion/elements/_labels.scss @@ -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; } } diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index 580689cdb7..6ab0001e85 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -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; } } diff --git a/lms/static/sass/discussion/utilities/_developer.scss b/lms/static/sass/discussion/utilities/_developer.scss index 9a5b2270af..4c4d881345 100644 --- a/lms/static/sass/discussion/utilities/_developer.scss +++ b/lms/static/sass/discussion/utilities/_developer.scss @@ -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; } } diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index b1cdb031f9..3139c35862 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -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; } diff --git a/lms/static/sass/discussion/utilities/_v1-compatibility.scss b/lms/static/sass/discussion/utilities/_v1-compatibility.scss index 982a8ff3a3..69cf4c64a2 100644 --- a/lms/static/sass/discussion/utilities/_v1-compatibility.scss +++ b/lms/static/sass/discussion/utilities/_v1-compatibility.scss @@ -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 diff --git a/lms/static/sass/discussion/utilities/_variables-bootstrap.scss b/lms/static/sass/discussion/utilities/_variables-bootstrap.scss index 3872c0509e..d65e1cbd1a 100644 --- a/lms/static/sass/discussion/utilities/_variables-bootstrap.scss +++ b/lms/static/sass/discussion/utilities/_variables-bootstrap.scss @@ -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 diff --git a/lms/static/sass/discussion/utilities/_variables-v1.scss b/lms/static/sass/discussion/utilities/_variables-v1.scss index 66ce1a3692..ccc12b1576 100644 --- a/lms/static/sass/discussion/utilities/_variables-v1.scss +++ b/lms/static/sass/discussion/utilities/_variables-v1.scss @@ -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 diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index 1ae75b9fe2..71dc2b9d95 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/lms/static/sass/discussion/utilities/_variables-v2.scss @@ -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); diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index 5813cbd875..51b4eaed2f 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -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)); } } } diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss index 6df353907f..c11f6a967b 100644 --- a/lms/static/sass/discussion/views/_home.scss +++ b/lms/static/sass/discussion/views/_home.scss @@ -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); } } } diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss index 44bd787c2c..819fb70acc 100644 --- a/lms/static/sass/discussion/views/_inline.scss +++ b/lms/static/sass/discussion/views/_inline.scss @@ -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"); diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index 5cd9bfd56f..e94c0072c1 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/lms/static/sass/discussion/views/_response.scss @@ -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%; } } diff --git a/lms/static/sass/discussion/views/_search.scss b/lms/static/sass/discussion/views/_search.scss index aa83606723..2e8a75a628 100644 --- a/lms/static/sass/discussion/views/_search.scss +++ b/lms/static/sass/discussion/views/_search.scss @@ -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; } diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index baa8110947..0441efb42b 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -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); } } }