From e7229e6282487f6dfd703ddf80596e07fb9154d7 Mon Sep 17 00:00:00 2001 From: Aarif Date: Mon, 13 Jul 2020 00:17:11 +0500 Subject: [PATCH 1/3] removed the constraint to use latest version of libsass --- requirements/edx/base.txt | 2 +- requirements/edx/development.txt | 2 +- requirements/edx/paver.in | 2 +- requirements/edx/paver.txt | 2 +- requirements/edx/testing.txt | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/requirements/edx/base.txt b/requirements/edx/base.txt index 58999772874f..d0863e7a5e03 100644 --- a/requirements/edx/base.txt +++ b/requirements/edx/base.txt @@ -141,7 +141,7 @@ jsonfield2==3.0.3 # via -c requirements/edx/../constraints.txt, -r requi kombu==4.6.11 # via celery laboratory==1.0.2 # via -r requirements/edx/base.in lazy==1.4 # via -r requirements/edx/paver.txt, acid-xblock, lti-consumer-xblock, ora2 -libsass==0.10.0 # via -r requirements/edx/paver.txt, ora2 +libsass==0.20.1 # via -r requirements/edx/paver.txt, ora2 loremipsum==1.0.5 # via ora2 lti-consumer-xblock==2.3 # via -r requirements/edx/base.in lxml==4.5.0 # via -c requirements/edx/../constraints.txt, -r requirements/edx/../edx-sandbox/shared.txt, capa, edxval, lti-consumer-xblock, ora2, safe-lxml, xblock, xmlsec diff --git a/requirements/edx/development.txt b/requirements/edx/development.txt index 3307f3dd24ff..8eb687e498d1 100644 --- a/requirements/edx/development.txt +++ b/requirements/edx/development.txt @@ -170,7 +170,7 @@ kombu==4.6.11 # via -r requirements/edx/testing.txt, celery laboratory==1.0.2 # via -r requirements/edx/testing.txt lazy-object-proxy==1.4.3 # via -r requirements/edx/testing.txt, astroid lazy==1.4 # via -r requirements/edx/testing.txt, acid-xblock, bok-choy, lti-consumer-xblock, ora2 -libsass==0.10.0 # via -r requirements/edx/testing.txt, ora2 +libsass==0.20.1 # via -r requirements/edx/testing.txt, ora2 loremipsum==1.0.5 # via -r requirements/edx/testing.txt, ora2 lti-consumer-xblock==2.3 # via -r requirements/edx/testing.txt lxml==4.5.0 # via -c requirements/edx/../constraints.txt, -r requirements/edx/testing.txt, capa, edxval, lti-consumer-xblock, ora2, pyquery, safe-lxml, xblock, xmlsec diff --git a/requirements/edx/paver.in b/requirements/edx/paver.in index c5e80916e9fd..f40e82619795 100644 --- a/requirements/edx/paver.in +++ b/requirements/edx/paver.in @@ -12,7 +12,7 @@ edx-opaque-keys # Create and introspect course and xblock identities lazy # Lazily-evaluated attributes for Python objects -libsass==0.10.0 # Python bindings for the LibSass CSS compiler +libsass # Python bindings for the LibSass CSS compiler markupsafe # XML/HTML/XHTML Markup safe strings mock # Stub out code with mock objects and make assertions about how they have been used path # Easier manipulation of filesystem paths diff --git a/requirements/edx/paver.txt b/requirements/edx/paver.txt index 7e35d16ab865..11a3f34df4f2 100644 --- a/requirements/edx/paver.txt +++ b/requirements/edx/paver.txt @@ -10,7 +10,7 @@ edx-opaque-keys==2.1.1 # via -r requirements/edx/paver.in idna==2.10 # via requests importlib-metadata==1.7.0 # via -c requirements/edx/../constraints.txt, path lazy==1.4 # via -r requirements/edx/paver.in -libsass==0.10.0 # via -r requirements/edx/paver.in +libsass==0.20.1 # via -r requirements/edx/paver.in markupsafe==1.1.1 # via -r requirements/edx/paver.in mock==3.0.5 # via -c requirements/edx/../constraints.txt, -r requirements/edx/paver.in more-itertools==8.5.0 # via zipp diff --git a/requirements/edx/testing.txt b/requirements/edx/testing.txt index 6720592ef619..beb871474596 100644 --- a/requirements/edx/testing.txt +++ b/requirements/edx/testing.txt @@ -164,7 +164,7 @@ kombu==4.6.11 # via -r requirements/edx/base.txt, celery laboratory==1.0.2 # via -r requirements/edx/base.txt lazy-object-proxy==1.4.3 # via astroid lazy==1.4 # via -r requirements/edx/base.txt, acid-xblock, bok-choy, lti-consumer-xblock, ora2 -libsass==0.10.0 # via -r requirements/edx/base.txt, ora2 +libsass==0.20.1 # via -r requirements/edx/base.txt, ora2 loremipsum==1.0.5 # via -r requirements/edx/base.txt, ora2 lti-consumer-xblock==2.3 # via -r requirements/edx/base.txt lxml==4.5.0 # via -c requirements/edx/../constraints.txt, -r requirements/edx/base.txt, capa, edxval, lti-consumer-xblock, ora2, pyquery, safe-lxml, xblock, xmlsec From 36512bc777abbef113c5b20182e9015929956993 Mon Sep 17 00:00:00 2001 From: Aarif Date: Tue, 13 Oct 2020 18:47:45 +0500 Subject: [PATCH 2/3] updated the scss files to fix scss compilation failure --- cms/static/sass/_base.scss | 108 ++++----- cms/static/sass/_shame.scss | 22 +- cms/static/sass/bootstrap/_components.scss | 30 +-- cms/static/sass/bootstrap/_footer.scss | 2 +- cms/static/sass/bootstrap/_header.scss | 14 +- cms/static/sass/bootstrap/_layouts.scss | 40 ++-- cms/static/sass/bootstrap/_legacy.scss | 2 +- cms/static/sass/elements/_controls.scss | 38 +-- cms/static/sass/elements/_footer.scss | 4 +- cms/static/sass/elements/_forms.scss | 52 ++--- cms/static/sass/elements/_header.scss | 24 +- cms/static/sass/elements/_icons.scss | 6 +- cms/static/sass/elements/_layout.scss | 32 +-- cms/static/sass/elements/_modal-window.scss | 82 +++---- cms/static/sass/elements/_modal.scss | 10 +- cms/static/sass/elements/_modules.scss | 104 ++++----- cms/static/sass/elements/_navigation.scss | 22 +- cms/static/sass/elements/_pagination.scss | 38 +-- cms/static/sass/elements/_sock.scss | 66 +++--- .../sass/elements/_system-feedback.scss | 102 ++++---- cms/static/sass/elements/_system-help.scss | 56 ++--- cms/static/sass/elements/_tooltip.scss | 4 +- cms/static/sass/elements/_typography.scss | 26 +-- .../sass/elements/_uploaded-assets.scss | 20 +- cms/static/sass/elements/_vendor.scss | 6 +- cms/static/sass/elements/_xblocks.scss | 86 +++---- cms/static/sass/elements/_xmodules.scss | 40 ++-- cms/static/sass/views/_account.scss | 36 +-- cms/static/sass/views/_assets.scss | 68 +++--- cms/static/sass/views/_certificates.scss | 94 ++++---- cms/static/sass/views/_container.scss | 74 +++--- cms/static/sass/views/_course-create.scss | 10 +- cms/static/sass/views/_dashboard.scss | 80 +++---- cms/static/sass/views/_export-git.scss | 22 +- cms/static/sass/views/_export.scss | 32 +-- .../sass/views/_group-configuration.scss | 78 +++---- cms/static/sass/views/_import.scss | 38 +-- cms/static/sass/views/_index.scss | 34 +-- cms/static/sass/views/_outline.scss | 82 +++---- cms/static/sass/views/_settings.scss | 74 +++--- cms/static/sass/views/_static-pages.scss | 26 +-- cms/static/sass/views/_textbooks.scss | 56 ++--- cms/static/sass/views/_updates.scss | 36 +-- cms/static/sass/views/_users.scss | 32 +-- cms/static/sass/views/_video-upload.scss | 16 +- cms/static/sass/xmodule/_headings.scss | 6 +- .../xmodule/css/annotatable/display.scss | 2 +- .../lib/xmodule/xmodule/css/capa/display.scss | 34 +-- .../lib/xmodule/xmodule/css/html/display.scss | 8 +- common/lib/xmodule/xmodule/css/lti/lti.scss | 2 +- .../lib/xmodule/xmodule/css/poll/display.scss | 4 +- .../xmodule/xmodule/css/sequence/display.scss | 12 +- .../xmodule/css/video/accessible_menu.scss | 10 +- .../xmodule/xmodule/css/video/display.scss | 32 +-- common/static/sass/_mixins-inherited.scss | 14 +- common/static/sass/_mixins.scss | 30 +-- .../edx-pattern-library-shims/_buttons.scss | 12 +- lms/static/certificates/sass/_components.scss | 54 ++--- lms/static/certificates/sass/_layouts.scss | 46 ++-- lms/static/certificates/sass/_print.scss | 12 +- lms/static/certificates/sass/_views.scss | 4 +- lms/static/sass/_developer.scss | 16 +- lms/static/sass/_shame.scss | 16 +- lms/static/sass/base/_base.scss | 12 +- lms/static/sass/base/_extends.scss | 10 +- lms/static/sass/base/_headings.scss | 6 +- lms/static/sass/base/_mixins.scss | 2 +- lms/static/sass/base/_utilities.scss | 2 +- lms/static/sass/bootstrap/_layouts.scss | 2 +- lms/static/sass/bootstrap/_legacy.scss | 2 +- .../sass/bootstrap/elements/_pagination.scss | 4 +- lms/static/sass/course/_auto-cert.scss | 6 +- lms/static/sass/course/_dates.scss | 2 +- lms/static/sass/course/_gradebook.scss | 6 +- lms/static/sass/course/_info.scss | 18 +- lms/static/sass/course/_profile.scss | 16 +- lms/static/sass/course/_student-notes.scss | 77 +++--- lms/static/sass/course/_syllabus.scss | 2 +- lms/static/sass/course/_tabs.scss | 2 +- lms/static/sass/course/_textbook.scss | 12 +- lms/static/sass/course/base/_base.scss | 6 +- lms/static/sass/course/base/_extends.scss | 8 +- .../sass/course/courseware/_amplifier.scss | 10 +- .../sass/course/courseware/_courseware.scss | 30 +-- .../sass/course/courseware/_sidebar.scss | 22 +- .../sass/course/instructor/_instructor_2.scss | 116 ++++----- .../course/layout/_courseware_header.scss | 8 +- .../course/layout/_courseware_preview.scss | 12 +- .../sass/course/modules/_calculator.scss | 6 +- .../sass/course/modules/_student-notes.scss | 64 ++--- lms/static/sass/course/modules/_timer.scss | 2 +- lms/static/sass/course/wiki/_sidebar.scss | 4 +- lms/static/sass/course/wiki/_table.scss | 2 +- lms/static/sass/course/wiki/_wiki.scss | 6 +- .../sass/discussion/_discussion-v1.scss | 4 +- lms/static/sass/discussion/_discussion.scss | 4 +- .../sass/discussion/elements/_actions.scss | 10 +- .../sass/discussion/elements/_editor.scss | 2 +- .../sass/discussion/elements/_labels.scss | 2 +- .../sass/discussion/elements/_navigation.scss | 22 +- .../sass/discussion/utilities/_developer.scss | 6 +- .../sass/discussion/utilities/_shame.scss | 2 +- .../utilities/_v1-compatibility.scss | 4 +- lms/static/sass/discussion/views/_home.scss | 6 +- .../sass/discussion/views/_response.scss | 8 +- lms/static/sass/discussion/views/_thread.scss | 18 +- lms/static/sass/elements/_controls.scss | 66 +++--- lms/static/sass/elements/_course-card.scss | 2 +- lms/static/sass/elements/_navigation.scss | 16 +- lms/static/sass/elements/_pagination.scss | 22 +- .../sass/elements/_system-feedback.scss | 98 ++++---- lms/static/sass/elements/_typography.scss | 66 +++--- lms/static/sass/features/_bookmarks-v1.scss | 6 +- lms/static/sass/features/_bookmarks.scss | 4 +- .../sass/features/_learner-profile.scss | 70 +++--- lms/static/sass/multicourse/_about_pages.scss | 2 +- lms/static/sass/multicourse/_account.scss | 34 +-- .../sass/multicourse/_course_about.scss | 8 +- lms/static/sass/multicourse/_courses.scss | 42 ++-- lms/static/sass/multicourse/_dashboard.scss | 106 ++++----- .../multicourse/_entitlement_dashboard.scss | 22 +- lms/static/sass/multicourse/_error-pages.scss | 2 +- lms/static/sass/multicourse/_home.scss | 26 +-- lms/static/sass/multicourse/_media-kit.scss | 4 +- lms/static/sass/multicourse/_survey-page.scss | 40 ++-- lms/static/sass/search/_search.scss | 12 +- .../sass/shared/_activation_messages.scss | 4 +- .../shared/_alerts_pattern_library_shim.scss | 8 +- lms/static/sass/shared/_course_object.scss | 2 +- lms/static/sass/shared/_fields.scss | 2 +- lms/static/sass/shared/_footer-edx.scss | 6 +- lms/static/sass/shared/_footer.scss | 4 +- lms/static/sass/shared/_header.scss | 8 +- lms/static/sass/shared/_help-tab.scss | 4 +- lms/static/sass/shared/_modal.scss | 16 +- lms/static/sass/shared/_tooltips.scss | 2 +- lms/static/sass/shared/_unsubscribe.scss | 2 +- lms/static/sass/views/_account-settings.scss | 40 ++-- lms/static/sass/views/_api-access.scss | 24 +- .../sass/views/_decoupled-verification.scss | 2 +- .../sass/views/_financial-assistance.scss | 16 +- lms/static/sass/views/_homepage.scss | 10 +- lms/static/sass/views/_login-register.scss | 48 ++-- lms/static/sass/views/_oauth2.scss | 8 +- lms/static/sass/views/_shoppingcart.scss | 144 ++++++------ lms/static/sass/views/_support.scss | 24 +- lms/static/sass/views/_teams.scss | 68 +++--- lms/static/sass/views/_text-me-the-app.scss | 8 +- lms/static/sass/views/_verification.scss | 220 +++++++++--------- scripts/scss_modernizer.py | 65 ++++++ 150 files changed, 2126 insertions(+), 2060 deletions(-) create mode 100644 scripts/scss_modernizer.py diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 464f68690688..f060078ba1e0 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -26,7 +26,7 @@ html { } body { - @extend %t-copy-base; + @extend %t-copy-base !optional; min-width: $fg-min-width; background: $uxpl-grayscale-x-back; @@ -56,8 +56,8 @@ a { } h1 { - @extend %t-title4; - @extend %t-light; + @extend %t-title4 !optional; + @extend %t-light !optional; } .waiting { @@ -78,16 +78,16 @@ h1 { // +Typography - Basic // ==================== .page-header { - @extend %t-title3; - @extend %t-strong; + @extend %t-title3 !optional; + @extend %t-strong !optional; display: block; color: $gray-d3; .navigation, .subtitle { - @extend %t-title7; - @extend %t-regular; + @extend %t-title7 !optional; + @extend %t-regular !optional; position: relative; top: ($baseline/4); @@ -97,29 +97,29 @@ h1 { } .section-header { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; .subtitle { - @extend %t-title7; + @extend %t-title7 !optional; } } .area-header { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; .subtitle { - @extend %t-title8; + @extend %t-title8 !optional; } } .area-subheader { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; .subtitle { - @extend %t-title9; + @extend %t-title9 !optional; } } @@ -195,45 +195,45 @@ h1 { .title-4, .title-5, .title-6 { - @extend %t-strong; + @extend %t-strong !optional; } .title-1 { - @extend %t-title3; + @extend %t-title3 !optional; margin-bottom: ($baseline*1.5); } .title-2 { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: $baseline; } .title-3 { - @extend %t-title5; + @extend %t-title5 !optional; margin-bottom: ($baseline/2); } .title-4 { - @extend %t-title7; - @extend %t-regular; + @extend %t-title7 !optional; + @extend %t-regular !optional; margin-bottom: $baseline; } .title-5 { - @extend %t-title7; - @extend %t-regular; + @extend %t-title7 !optional; + @extend %t-regular !optional; color: $gray-l1; margin-bottom: $baseline; } .title-6 { - @extend %t-title7; - @extend %t-regular; + @extend %t-title7 !optional; + @extend %t-regular !optional; color: $gray-l2; margin-bottom: $baseline; @@ -329,14 +329,14 @@ dl { } .navigation-link { - @extend %cont-truncated; + @extend %cont-truncated !optional; display: inline-block; vertical-align: bottom; // correct for extra padding in FF max-width: 250px; &.navigation-current { - @extend %ui-disabled; + @extend %ui-disabled !optional; color: $gray; max-width: 250px; @@ -367,14 +367,14 @@ dl { // CASE: wizard-based mast .mast-wizard { .page-header-sub { - @extend %t-title4; + @extend %t-title4 !optional; color: $gray; font-weight: 300; } .page-header-super { - @extend %t-title4; + @extend %t-title4 !optional; float: left; width: flex-grid(12, 12); @@ -397,7 +397,7 @@ dl { .content { @include clearfix(); - @extend %t-copy-base; + @extend %t-copy-base !optional; max-width: $fg-max-width; min-width: $fg-min-width; @@ -412,7 +412,7 @@ dl { padding-bottom: ($baseline/2); .title-sub { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; margin: 0; @@ -420,7 +420,7 @@ dl { } .title-1 { - @extend %t-title3; + @extend %t-title3 !optional; margin: 0; padding: 0; @@ -439,17 +439,17 @@ dl { // ==================== .content-primary { .title-1 { - @extend %t-title3; + @extend %t-title3 !optional; } .title-2 { - @extend %t-title4; + @extend %t-title4 !optional; margin: 0 0 ($baseline/2) 0; } .title-3 { - @extend %t-title6; + @extend %t-title6 !optional; margin: 0 0 ($baseline/2) 0; } @@ -464,7 +464,7 @@ dl { } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include text-align(right); @include float(right); @@ -532,7 +532,7 @@ dl { .new-policy-item { @include grey-button(); - @extend %t-action5; + @extend %t-action5 !optional; margin: ($baseline/2); padding: 3px ($baseline/2) 4px ($baseline/2); @@ -563,7 +563,7 @@ dl { // +UI - Misc // ==================== hr.divide { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } .item-details { @@ -572,7 +572,7 @@ hr.divide { } .details { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: none; margin-bottom: ($baseline*1.5); @@ -586,7 +586,7 @@ hr.divide { .header { @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); - @extend %t-title7; + @extend %t-title7 !optional; padding: 6px 14px; border-bottom: 1px solid $mediumGrey; @@ -600,15 +600,15 @@ hr.divide { display: block; margin-bottom: 6px; - @extend %t-strong; + @extend %t-strong !optional; &.inline-label { display: inline; } .description { - @extend %t-copy-sub2; - @extend %t-regular; + @extend %t-copy-sub2 !optional; + @extend %t-regular !optional; display: block; font-style: italic; @@ -629,28 +629,28 @@ hr.divide { // UI - semantically hide text .sr, .sr-only { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } // UI - faking a link's behavior .fake-link { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; } // UI - disabled .is-disabled { - @extend %ui-disabled; + @extend %ui-disabled !optional; } // ui - semantic + visual divider hr.divider { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } // ui - skipnav .nav-skip, .transcript-skip { - @extend %t-action3; + @extend %t-action3 !optional; display: inline-block; position: absolute; @@ -697,11 +697,11 @@ hr.divider { text-align: center; .label { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } .icon { - @extend %t-action1; + @extend %t-action1 !optional; color: $white; } @@ -722,15 +722,15 @@ hr.divider { } .title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; margin: 0 0 ($baseline/2) 0; color: $gray-d3; } .description { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; margin-top: ($baseline/2); color: $gray-l1; diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss index 0f0df2be76fd..4c06e7114393 100644 --- a/cms/static/sass/_shame.scss +++ b/cms/static/sass/_shame.scss @@ -44,7 +44,7 @@ // yes we have no boldness today - need to fix the resets body strong, body b { - @extend %t-ultrastrong; + @extend %t-ultrastrong !optional; } // ==================== @@ -69,11 +69,11 @@ body b { */ .modal-content.cheatsheet-is-shown { - overflow: visible !important; - - .CodeMirror { overflow: visible !important; - } + + .CodeMirror { + overflow: visible !important; + } } // ==================== @@ -101,7 +101,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { // masthead button hidden states .mast.has-actions .nav-actions .button.is-hidden { - @extend .is-hidden; + @extend %is-hidden !optional; } // ==================== @@ -117,7 +117,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { // xmodule editor tab font-weight override .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .editor-tabs .inner_tab_wrap a.tab { - font-weight: normal !important; + font-weight: normal !important; } // ==================== @@ -131,10 +131,10 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { text-align: center; color: $gray; - .button, - .action { - @extend %btn-primary-green; - } + .button, + .action { + @extend %btn-primary-green !optional; + } } // ==================== diff --git a/cms/static/sass/bootstrap/_components.scss b/cms/static/sass/bootstrap/_components.scss index 14e816f5bc16..9c017748a69c 100644 --- a/cms/static/sass/bootstrap/_components.scss +++ b/cms/static/sass/bootstrap/_components.scss @@ -60,7 +60,7 @@ // sock - actions .list-cta { - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; top: -($baseline*0.75); @@ -70,8 +70,8 @@ list-style: none; .cta-show-sock { - @extend %ui-btn-pill; - @extend %t-action4; + @extend %ui-btn-pill !optional; + @extend %t-action4 !optional; background: theme-color("light"); padding: ($baseline/2) $baseline; @@ -92,7 +92,7 @@ .sock { @include clearfix(); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; max-width: $studio-max-width; width: flex-grid(12); @@ -100,10 +100,10 @@ padding: ($baseline*2) 0; color: $gray-500; - // support body - header { - .title { - @extend %t-title4; + // support body + header { + .title { + @extend %t-title4 !optional; } } @@ -115,14 +115,14 @@ .support, .feedback { .title { - @extend %t-title6; + @extend %t-title6 !optional; color: $white; margin-bottom: ($baseline/2); } .copy { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; margin: 0 0 $baseline 0; } @@ -140,12 +140,12 @@ } .action { - @extend %t-action4; + @extend %t-action4 !optional; display: block; .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; vertical-align: middle; margin-right: $baseline/4; @@ -153,13 +153,13 @@ } .tip { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } .action-primary { - @extend %btn-primary-blue; - @extend %t-action3; + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; } } } diff --git a/cms/static/sass/bootstrap/_footer.scss b/cms/static/sass/bootstrap/_footer.scss index 985a741f0d26..738d9ff3a436 100644 --- a/cms/static/sass/bootstrap/_footer.scss +++ b/cms/static/sass/bootstrap/_footer.scss @@ -13,7 +13,7 @@ padding: $baseline; footer.primary { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include clearfix(); diff --git a/cms/static/sass/bootstrap/_header.scss b/cms/static/sass/bootstrap/_header.scss index b90a7ee5ed9c..a800f7447e59 100644 --- a/cms/static/sass/bootstrap/_header.scss +++ b/cms/static/sass/bootstrap/_header.scss @@ -10,7 +10,7 @@ // ==================== .wrapper-header { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: relative; width: 100%; @@ -74,8 +74,8 @@ // basic layout - nav items nav { > ol > .nav-item { - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: inline-block; vertical-align: middle; @@ -163,8 +163,8 @@ } .course-title { - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: block; width: 100%; @@ -422,8 +422,8 @@ } .nav-item { - @extend %t-action3; - @extend %t-regular; + @extend %t-action3 !optional; + @extend %t-regular !optional; display: block; margin: 0 0 ($baseline/4) 0; diff --git a/cms/static/sass/bootstrap/_layouts.scss b/cms/static/sass/bootstrap/_layouts.scss index 7bee47228bc9..5367d157ea18 100644 --- a/cms/static/sass/bootstrap/_layouts.scss +++ b/cms/static/sass/bootstrap/_layouts.scss @@ -119,8 +119,8 @@ // buttons .button { - @extend %btn-primary-blue; - @extend %sizing; + @extend %btn-primary-blue !optional; + @extend %sizing !optional; .action-button-text { display: inline-block; @@ -135,8 +135,8 @@ // CASE: new/create button &.new-button, &.button-new { - @extend %btn-primary-green; - @extend %sizing; + @extend %btn-primary-green !optional; + @extend %sizing !optional; } } } @@ -156,7 +156,7 @@ } .navigation-item { - @extend %cont-truncated; + @extend %cont-truncated !optional; display: inline-block; vertical-align: bottom; // correct for extra padding in FF @@ -164,7 +164,7 @@ color: $body-color; &.navigation-current { - @extend %ui-disabled; + @extend %ui-disabled !optional; color: color("gray"); max-width: 250px; @@ -199,14 +199,14 @@ // CASE: wizard-based mast .mast-wizard { .page-header-sub { - @extend %t-title4; + @extend %t-title4 !optional; color: color("gray"); font-weight: 300; } .page-header-super { - @extend %t-title4; + @extend %t-title4 !optional; float: left; width: flex-grid(12, 12); @@ -247,7 +247,7 @@ padding-bottom: ($baseline/2); .title-sub { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; margin: 0; @@ -255,8 +255,8 @@ } .title-1 { - @extend %t-title3; - @extend %t-strong; + @extend %t-title3 !optional; + @extend %t-strong !optional; margin: 0; padding: 0; @@ -273,17 +273,17 @@ margin-right: $baseline; .title-1 { - @extend %t-title3; + @extend %t-title3 !optional; } .title-2 { - @extend %t-title4; + @extend %t-title4 !optional; margin: 0 0 ($baseline/2) 0; } .title-3 { - @extend %t-title6; + @extend %t-title6 !optional; margin: 0 0 ($baseline/2) 0; } @@ -298,13 +298,13 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; - width: flex-grid(7, 12); - float: right; - margin-top: ($baseline/2); - text-align: right; - color: theme-color("primary"); + width: flex-grid(7, 12); + float: right; + margin-top: ($baseline/2); + text-align: right; + color: theme-color("primary"); } } } diff --git a/cms/static/sass/bootstrap/_legacy.scss b/cms/static/sass/bootstrap/_legacy.scss index 5214fae0af15..6a5b83dd121a 100644 --- a/cms/static/sass/bootstrap/_legacy.scss +++ b/cms/static/sass/bootstrap/_legacy.scss @@ -15,5 +15,5 @@ // Support .sr as a synonym for .sr-only .sr { - @extend .sr-only; + @extend %sr-only !optional; } diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 8420961ab4ab..d40a21036e8c 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -18,10 +18,10 @@ // +General Action - Extend // ==================== %action { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; &.is-disabled { - @extend %ui-disabled; + @extend %ui-disabled !optional; -webkit-filter: grayscale(65%); opacity: 0.65; @@ -31,7 +31,7 @@ // +General Type and Size - Extend // ==================== %sizing { - @extend %t-action4; + @extend %t-action4 !optional; padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2); } @@ -41,7 +41,7 @@ // ==================== // gray primary button %btn-primary-gray { - @extend %ui-btn-primary; + @extend %ui-btn-primary !optional; background: $gray-l1; border-color: $gray-l2; @@ -67,7 +67,7 @@ // blue primary button %btn-primary-blue { - @extend %ui-btn-primary; + @extend %ui-btn-primary !optional; background: theme-color("primary"); border-color: theme-color("primary"); @@ -94,7 +94,7 @@ // green primary button %btn-primary-green { - @extend %ui-btn-primary; + @extend %ui-btn-primary !optional; background: $uxpl-green-base; border-color: $uxpl-green-base; @@ -123,7 +123,7 @@ // ==================== // gray secondary button %btn-secondary-gray { - @extend %ui-btn-secondary; + @extend %ui-btn-secondary !optional; border-color: $gray-l3; color: $gray-d1; @@ -148,7 +148,7 @@ // blue secondary button %btn-secondary-blue { - @extend %ui-btn-secondary; + @extend %ui-btn-secondary !optional; border-color: $blue-l3; color: theme-color("primary"); @@ -169,7 +169,7 @@ // white secondary button %btn-secondary-white { - @extend %ui-btn-secondary; + @extend %ui-btn-secondary !optional; border-color: $white-t2; color: $white-t3; @@ -194,7 +194,7 @@ // green secondary button %btn-secondary-green { - @extend %ui-btn-secondary; + @extend %ui-btn-secondary !optional; border-color: $green-l4; color: $green-l2; @@ -263,8 +263,8 @@ // +UI Dropdown Button - Extend // ==================== %ui-btn-dd { - @extend %ui-btn; - @extend %ui-btn-pill; + @extend %ui-btn !optional; + @extend %ui-btn-pill !optional; padding: ($baseline/4) ($baseline/2); border-width: 1px; @@ -274,7 +274,7 @@ &:hover, &:active { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; border-color: $gray-l3; } @@ -290,7 +290,7 @@ // +UI Nav Dropdown Button - Extend // ==================== %ui-btn-dd-nav-primary { - @extend %ui-btn-dd; + @extend %ui-btn-dd !optional; background: $white; border-color: $white; @@ -417,7 +417,7 @@ @include transition(all $tmg-f2 ease-in-out 0s); @include margin-right($baseline/4); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; color: $gray-l3; @@ -451,7 +451,7 @@ // STATE: hover/active &:hover, &:active { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; color: theme-color("primary"); } @@ -486,7 +486,7 @@ position: relative; .draggable-drop-indicator { - @extend %ui-depth3; + @extend %ui-depth3 !optional; @include transition(opacity $tmg-f2 linear 0s); @include size(100%, auto); @@ -496,7 +496,7 @@ opacity: 0; .fa-caret-right { - @extend %t-icon5; + @extend %t-icon5 !optional; position: absolute; top: -12px; @@ -516,7 +516,7 @@ // UI: is dragging - drag state .is-dragging { - @extend %ui-depth4; + @extend %ui-depth4 !optional; left: -($baseline/4); box-shadow: 0 1px 2px 0 $shadow-d1; diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index 11c73547d7b9..81bd39cfb5f6 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -8,7 +8,7 @@ padding: $baseline; footer.primary { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include clearfix(); @@ -61,7 +61,7 @@ .icon { @include transition(top $tmg-f2 ease-in-out $tmg-f2); - @extend %t-action3; + @extend %t-action3 !optional; display: inline-block; vertical-align: middle; diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 4bcf30b30a98..d3d356102665 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -23,7 +23,7 @@ // STATE: checked/selected &:checked ~ label { - @extend %t-strong; + @extend %t-strong !optional; color: $ui-action-primary-color-focus; } @@ -37,8 +37,8 @@ textarea.text { @include linear-gradient($gray-l5, $white); - @extend %t-copy-sub2; - @extend %t-demi-strong; + @extend %t-copy-sub2 !optional; + @extend %t-demi-strong !optional; padding: 6px 8px 8px; border: 1px solid $gray-l2; @@ -104,7 +104,7 @@ form { } .input-checkbox { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; // CASE: unchecked ~ label .input-checkbox-checked { @@ -130,17 +130,17 @@ form { // CASE: checkbox input .field-checkbox .input-checkbox { - @extend %input-tickable; + @extend %input-tickable !optional; } // CASE: radio input .field-radio .input-radio { - @extend %input-tickable; + @extend %input-tickable !optional; } // CASE: file input input[type="file"] { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .note { @@ -158,11 +158,11 @@ form { // form styling for creating a new content item (course, user, textbook) // TODO: refactor this into a placeholder to extend. .form-create { - @extend %ui-window; + @extend %ui-window !optional; - .title { - @extend %t-title4; - @extend %t-strong; + .title { + @extend %t-title4 !optional; + @extend %t-strong !optional; padding: $baseline ($baseline*1.5) 0 ($baseline*1.5); } @@ -173,7 +173,7 @@ form { .list-input { - @extend %cont-no-list; + @extend %cont-no-list !optional; .field { margin: 0 0 ($baseline*0.75) 0; @@ -184,7 +184,7 @@ form { &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -200,7 +200,7 @@ form { } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color $tmg-f3 ease-in-out 0s); @@ -214,7 +214,7 @@ form { input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; @include transition(all $tmg-f2 ease-in-out 0s); @@ -253,7 +253,7 @@ form { } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color 0.15s ease-in-out); @@ -279,11 +279,11 @@ form { } .is-showing { - @extend %anim-fadeIn; + @extend %anim-fadeIn !optional; } .is-hiding { - @extend %anim-fadeOut; + @extend %anim-fadeOut !optional; } .tip-error { @@ -354,7 +354,7 @@ form { .action { @include transition(all $tmg-f2 linear 0s); - @extend %t-strong; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/5) $baseline; @@ -364,13 +364,13 @@ form { .action-primary { @include blue-button; - @extend %t-action2; + @extend %t-action2 !optional; } .action-secondary { @include grey-button; - @extend %t-action2; + @extend %t-action2 !optional; } } } @@ -392,7 +392,7 @@ form { .incontext-editor-value, .incontext-editor-action-wrapper { - @extend %cont-truncated; + @extend %cont-truncated !optional; display: inline-block; vertical-align: middle; @@ -401,8 +401,8 @@ form { .incontext-editor-open-action, .access-button { - @extend %ui-btn-non-blue; - @extend %t-copy-base; + @extend %ui-btn-non-blue !optional; + @extend %t-copy-base !optional; padding-top: ($baseline/10); @@ -463,7 +463,7 @@ input.search { } label { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } code { @@ -474,7 +474,7 @@ code { } .CodeMirror { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background: $white; font-family: $f-monospace; diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index c17338acade3..69cf945c56f4 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -2,7 +2,7 @@ // ==================== .wrapper-header { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: relative; width: 100%; @@ -72,8 +72,8 @@ // basic layout - nav items nav { > ol > .nav-item { - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: inline-block; vertical-align: middle; @@ -95,8 +95,8 @@ // basic layout - dropdowns .nav-dd { .title { - @extend %t-action2; - @extend %ui-btn-dd-nav-primary; + @extend %t-action2 !optional; + @extend %ui-btn-dd-nav-primary !optional; @include transition(all $tmg-f2 ease-in-out 0s); @@ -147,7 +147,7 @@ .course-org, .course-number { - @extend %t-action4; + @extend %t-action4 !optional; display: inline-block; vertical-align: middle; @@ -164,8 +164,8 @@ } .course-title { - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: block; width: 100%; @@ -328,8 +328,8 @@ .action-signup { @include blue-button(); - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; padding: ($baseline/4) ($baseline/2); text-transform: uppercase; @@ -338,8 +338,8 @@ .action-signin { @include white-button(); - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; padding: ($baseline/4) ($baseline/2); text-transform: uppercase; diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss index 14c5ac1b88a9..7474f3f53a95 100644 --- a/cms/static/sass/elements/_icons.scss +++ b/cms/static/sass/elements/_icons.scss @@ -22,8 +22,8 @@ } %ui-badge { - @extend %t-title9; - @extend %t-strong; + @extend %t-title9 !optional; + @extend %t-strong !optional; position: relative; border-bottom-right-radius: ($baseline/10); @@ -39,7 +39,7 @@ &.is-hanging { box-sizing: border-box; - @extend %ui-depth2; + @extend %ui-depth2 !optional; top: -($baseline/4); diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index 97ec2401e9a4..649b85e46cfe 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -65,8 +65,8 @@ // buttons .button { - @extend %btn-primary-blue; - @extend %sizing; + @extend %btn-primary-blue !optional; + @extend %sizing !optional; .action-button-text { display: inline-block; @@ -81,8 +81,8 @@ // CASE: new/create button &.new-button, &.button-new { - @extend %btn-primary-green; - @extend %sizing; + @extend %btn-primary-green !optional; + @extend %sizing !optional; } } } @@ -102,7 +102,7 @@ } .navigation-item { - @extend %cont-truncated; + @extend %cont-truncated !optional; display: inline-block; vertical-align: bottom; // correct for extra padding in FF @@ -110,7 +110,7 @@ color: $gray-d2; &.navigation-current { - @extend %ui-disabled; + @extend %ui-disabled !optional; color: $gray; max-width: 250px; @@ -145,14 +145,14 @@ // CASE: wizard-based mast .mast-wizard { .page-header-sub { - @extend %t-title4; + @extend %t-title4 !optional; color: $gray; font-weight: 300; } .page-header-super { - @extend %t-title4; + @extend %t-title4 !optional; float: left; width: flex-grid(12, 12); @@ -174,7 +174,7 @@ .content { @include clearfix(); - @extend %t-copy-base; + @extend %t-copy-base !optional; max-width: $fg-max-width; min-width: $fg-min-width; @@ -189,7 +189,7 @@ padding-bottom: ($baseline/2); .title-sub { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; margin: 0; @@ -197,8 +197,8 @@ } .title-1 { - @extend %t-title3; - @extend %t-strong; + @extend %t-title3 !optional; + @extend %t-strong !optional; margin: 0; padding: 0; @@ -235,17 +235,17 @@ // layout - primary content .content-primary { .title-1 { - @extend %t-title3; + @extend %t-title3 !optional; } .title-2 { - @extend %t-title4; + @extend %t-title4 !optional; margin: 0 0 ($baseline/2) 0; } .title-3 { - @extend %t-title6; + @extend %t-title6 !optional; margin: 0 0 ($baseline/2) 0; } @@ -260,7 +260,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; width: flex-grid(7, 12); float: right; diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss index 6eeb1000435d..cf9edd253634 100644 --- a/cms/static/sass/elements/_modal-window.scss +++ b/cms/static/sass/elements/_modal-window.scss @@ -9,7 +9,7 @@ // basic modal content // ------------------------ .modal-window { - @extend %ui-depth3; + @extend %ui-depth3 !optional; box-sizing: border-box; position: absolute; @@ -29,15 +29,15 @@ } .title { - @extend %t-title5; - @extend %t-demi-strong; + @extend %t-title5 !optional; + @extend %t-demi-strong !optional; margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2); color: $black; } .message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 $baseline 0; color: $gray-d2; @@ -72,7 +72,7 @@ } .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; @include margin-right($baseline/2); @@ -80,7 +80,7 @@ } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; max-width: 85%; color: $white; @@ -119,8 +119,8 @@ margin-right: $baseline; .settings-tab-button { - @extend %t-copy-sub1; - @extend %t-regular; + @extend %t-copy-sub1 !optional; + @extend %t-regular !optional; background-image: none; background-color: $white; @@ -146,7 +146,7 @@ } .modal-section-title { - @extend %t-title6; + @extend %t-title6 !optional; margin: 0 0 ($baseline/2) 0; border-bottom: ($baseline/10) solid $gray-l4; @@ -155,8 +155,8 @@ } .modal-subsection-title { - @extend %t-title8; - @extend %t-strong; + @extend %t-title8 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/4); text-transform: uppercase; @@ -175,13 +175,13 @@ } .list-actions { - @extend %actions-list; + @extend %actions-list !optional; margin-left: ($baseline/4); - .action-button { - @extend %t-icon4; - } + .action-button { + @extend %t-icon4 !optional; + } } } @@ -192,7 +192,7 @@ padding: ($baseline*0.75) 2% ($baseline/2) 2%; .action-item { - @extend %t-action3; + @extend %t-action3 !optional; display: inline-block; margin-right: ($baseline*0.75); @@ -205,7 +205,7 @@ .action-primary { @include blue-button(); - @extend %t-action3; + @extend %t-action3 !optional; border-color: $blue-d1; color: $white; @@ -283,8 +283,8 @@ .editor-button, .settings-button, .plugins-button { - @extend %btn-secondary-gray; - @extend %t-copy-sub1; + @extend %btn-secondary-gray !optional; + @extend %t-copy-sub1 !optional; border: 0; padding: ($baseline/4) ($baseline/2); @@ -435,8 +435,8 @@ padding: ($baseline/2); .component-name { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; display: inline-block; vertical-align: middle; @@ -463,9 +463,9 @@ padding: 0; a.tab { - @extend %btn-secondary-gray; - @extend %t-copy-sub1; - @extend %t-regular; + @extend %btn-secondary-gray !optional; + @extend %t-copy-sub1 !optional; + @extend %t-regular !optional; background-image: none; box-shadow: none; @@ -495,7 +495,7 @@ } .modal-window-overlay { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: fixed; top: 0; @@ -558,8 +558,8 @@ } .note { - @extend %t-copy-sub2; - @extend %t-regular; + @extend %t-copy-sub2 !optional; + @extend %t-regular !optional; display: block; color: $error-color; @@ -568,24 +568,24 @@ // CASE: no groups configured for visibility .is-not-configured { - @extend %no-content; + @extend %no-content !optional; padding: ($baseline); @include text-align(left); // reset for %no-content's default styling - .title { - @extend %t-title6; + .title { + @extend %t-title6 !optional; font-weight: 600; // needed for poorly scoped .title rule in modals margin: 0 0 ($baseline/2) 0; // needed for poorly scoped .title rule in modals } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; - p { - @extend %wipe-last-child; + p { + @extend %wipe-last-child !optional; margin-bottom: $baseline; } @@ -615,14 +615,14 @@ .list-fields { .field-message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray-d1; margin-bottom: ($baseline/4); } label { - @extend %t-title6; + @extend %t-title6 !optional; font-weight: font-weight(semi-bold); } @@ -652,7 +652,7 @@ input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; @include transition(all $tmg-f2 ease-in-out 0s); @@ -685,7 +685,7 @@ } .tip { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color, 0.15s, ease-in-out); @@ -761,7 +761,7 @@ .edit-settings-timed-examination, .edit-unit-access { .checkbox-cosmetic .input-checkbox { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; // CASE: unchecked ~ .tip-warning { @@ -782,8 +782,8 @@ } .note { - @extend %t-copy-sub2; - @extend %t-regular; + @extend %t-copy-sub2 !optional; + @extend %t-regular !optional; margin: 14px 0 0 21px; display: block; @@ -795,7 +795,7 @@ margin-bottom: $baseline; .checkbox-cosmetic .input-checkbox { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; // CASE: unchecked ~ .tip-warning { diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss index 418dfc1cf5ec..5331c79c4398 100644 --- a/cms/static/sass/elements/_modal.scss +++ b/cms/static/sass/elements/_modal.scss @@ -2,7 +2,7 @@ // ==================== .modal-cover { - @extend %ui-depth3; + @extend %ui-depth3 !optional; display: none; position: fixed; @@ -14,7 +14,7 @@ } .modal { - @extend %ui-depth4; + @extend %ui-depth4 !optional; display: none; position: fixed; @@ -40,8 +40,8 @@ } h2 { - @extend %t-title5; - @extend %t-light; + @extend %t-title5 !optional; + @extend %t-light !optional; margin: 0 ($baseline/2) ($baseline*1.5); color: #646464; @@ -68,7 +68,7 @@ // lean modal alternative #lean_overlay { - @extend %ui-depth4; + @extend %ui-depth4 !optional; position: fixed; top: 0; diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index d3898968ea4f..b6c5547915e6 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -10,8 +10,8 @@ background-color: $white; .bar-mod-title { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; display: block; padding: ($baseline/2) ($baseline*0.75); @@ -19,14 +19,14 @@ } .bar-mod-content { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; border-bottom: 1px solid $gray-l4; padding: ($baseline*0.75) ($baseline*0.75) $baseline ($baseline*0.75); - .title { - @extend %t-title8; - @extend %t-strong; + .title { + @extend %t-title8 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/4); color: $gray-d2; @@ -34,7 +34,7 @@ } .meta { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray-d2; } @@ -44,7 +44,7 @@ // blue bar and title bg version // -------------------- %bar-module-blue { - @extend %bar-module; + @extend %bar-module !optional; border-top: 5px solid $blue; @@ -56,7 +56,7 @@ // green bar and title bg version // -------------------- %bar-module-green { - @extend %bar-module; + @extend %bar-module !optional; border-top: 5px solid $green; @@ -68,7 +68,7 @@ // yellow bar and title bg version // -------------------- %bar-module-yellow { - @extend %bar-module; + @extend %bar-module !optional; border-top: 5px solid $orange-l2; @@ -80,7 +80,7 @@ // red bar and title bg version // -------------------- %bar-module-red { - @extend %bar-module; + @extend %bar-module !optional; border-top: 5px solid $red-l2; @@ -91,7 +91,7 @@ // black bar and title bg version %bar-module-black { - @extend %bar-module; + @extend %bar-module !optional; border-top: 5px solid $black; @@ -116,8 +116,8 @@ text-align: center; h5 { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline*0.75); color: $uxpl-green-base; @@ -133,7 +133,7 @@ // green button .add-xblock-component-button { - @extend %t-action3; + @extend %t-action3 !optional; @include margin-right($baseline*0.75); @@ -147,7 +147,7 @@ padding: 0; text-align: center; - @extend %btn-primary-green; + @extend %btn-primary-green !optional; .name { box-sizing: border-box; @@ -239,7 +239,7 @@ @include clearfix(); @include transition(none); - @extend %t-demi-strong; + @extend %t-demi-strong !optional; display: block; width: 100%; @@ -310,7 +310,7 @@ } a { - @extend %t-action3; + @extend %t-action3 !optional; display: block; padding: ($baseline*0.75) ($baseline*1.25); @@ -339,7 +339,7 @@ $outline-indent-width: $baseline; margin-top: ($baseline*0.75); .button-new { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; padding: ($baseline/2) $baseline; display: block; @@ -356,13 +356,13 @@ $outline-indent-width: $baseline; %outline-item-status { - @extend %t-copy-sub2; - @extend %t-strong; + @extend %t-copy-sub2 !optional; + @extend %t-strong !optional; color: $gray-d1; - .icon { - @extend %t-icon5; + .icon { + @extend %t-icon5 !optional; @include margin-right($baseline/4); } @@ -464,8 +464,8 @@ $outline-indent-width: $baseline; .outline-section { @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s, padding-left $tmg-f2 linear 0s); - @extend %ui-window; - @extend %outline-complex-item; + @extend %ui-window !optional; + @extend %outline-complex-item !optional; border-left: 1px solid $color-draft; margin-bottom: $baseline; @@ -509,15 +509,15 @@ $outline-indent-width: $baseline; // header - title .section-title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; color: $color-heading-base; } // status .section-status { - @extend %outline-item-status; + @extend %outline-item-status !optional; } // status - release @@ -561,7 +561,7 @@ $outline-indent-width: $baseline; .outline-subsection { @include transition(border-left-color $tmg-f2 linear 0s); - @extend %outline-complex-item; + @extend %outline-complex-item !optional; margin-bottom: ($baseline/2); border: 1px solid $gray-l4; @@ -609,14 +609,14 @@ $outline-indent-width: $baseline; // header - title .subsection-title { - @extend %t-title6; + @extend %t-title6 !optional; color: $color-heading-base; } // status .subsection-status { - @extend %outline-item-status; + @extend %outline-item-status !optional; } // STATE: hover/active @@ -667,21 +667,21 @@ $outline-indent-width: $baseline; // outline: units .outline-unit { - @extend %outline-complex-item; + @extend %outline-complex-item !optional; margin-bottom: ($baseline/2); border: 1px solid $gray-l4; padding: ($baseline/4) ($baseline/2); - // header - title - .unit-title { - @extend %t-title7; + // header - title + .unit-title { + @extend %t-title7 !optional; color: $color-heading-base; } .unit-status { - @extend %outline-item-status; + @extend %outline-item-status !optional; } // STATE: hover/active @@ -702,22 +702,22 @@ $outline-indent-width: $baseline; // outline: sections .outline-section { - @extend %outline-simple-item; + @extend %outline-simple-item !optional; margin-bottom: $baseline; padding: ($baseline/2); - // header - title - .section-title { - @extend %t-title5; - @extend %t-strong; + // header - title + .section-title { + @extend %t-title5 !optional; + @extend %t-strong !optional; color: $color-heading-base; } // status .section-status { - @extend %outline-item-status; + @extend %outline-item-status !optional; } // status - release @@ -764,40 +764,40 @@ $outline-indent-width: $baseline; // outline: subsections .outline-subsection { - @extend %outline-simple-item; + @extend %outline-simple-item !optional; margin-bottom: ($baseline/2); padding: ($baseline/2); - // header - title - .subsection-title { - @extend %t-title6; + // header - title + .subsection-title { + @extend %t-title6 !optional; color: $color-heading-base; } // status .subsection-status { - @extend %outline-item-status; + @extend %outline-item-status !optional; } } // outline: units .outline-unit { - @extend %outline-simple-item; + @extend %outline-simple-item !optional; margin-bottom: ($baseline/4); padding: ($baseline/4) ($baseline/2); - // header - title - .unit-title { - @extend %t-title7; + // header - title + .unit-title { + @extend %t-title7 !optional; color: $color-heading-base; } .unit-status { - @extend %outline-item-status; + @extend %outline-item-status !optional; } } } diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 84cc7d9e03a2..1eefaba0cfd3 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -132,9 +132,9 @@ nav { border-width: 11px; } - .nav-item { - @extend %t-action3; - @extend %t-regular; + .nav-item { + @extend %t-action3 !optional; + @extend %t-regular !optional; display: block; margin: 0 0 ($baseline/4) 0; @@ -248,7 +248,7 @@ $seq-nav-height: 40px; } .sequence-nav { - @extend .topbar; + @extend %topbar !optional; background-color: #fff; margin: 0 auto; @@ -263,8 +263,8 @@ $seq-nav-height: 40px; display: none; } - .sequence-list-wrapper { - @extend %ui-depth2; + .sequence-list-wrapper { + @extend %ui-depth2 !optional; position: relative; height: 100%; @@ -291,9 +291,9 @@ $seq-nav-height: 40px; @include border-right-style(solid); } - button { - @extend %ui-fake-link; - @extend %ui-clear-button; + button { + @extend %ui-fake-link !optional; + @extend %ui-clear-button !optional; width: 100%; height: ($seq-nav-height - 1); @@ -350,7 +350,7 @@ $seq-nav-height: 40px; .sequence-tooltip { @include text-align(left); - @extend %ui-depth2; + @extend %ui-depth2 !optional; margin-top: 12px; background: $seq-nav-tooltip-color; @@ -397,7 +397,7 @@ $seq-nav-height: 40px; } .sequence-nav-button { - @extend %ui-depth3; + @extend %ui-depth3 !optional; display: block; top: 0; diff --git a/cms/static/sass/elements/_pagination.scss b/cms/static/sass/elements/_pagination.scss index b0d03858e761..fde84e458fa3 100644 --- a/cms/static/sass/elements/_pagination.scss +++ b/cms/static/sass/elements/_pagination.scss @@ -51,9 +51,9 @@ } } - .nav-label { - @extend %cont-text-sr; - } + .nav-label { + @extend %cont-text-sr !optional; + } .pagination-form, .current-page, @@ -62,11 +62,11 @@ display: inline-block; } - .current-page, - .page-number-input, - .total-pages { - @extend %t-copy-base; - @extend %t-strong; + .current-page, + .page-number-input, + .total-pages { + @extend %t-copy-base !optional; + @extend %t-strong !optional; width: ($baseline*2.5); margin: 0 ($baseline*0.75); @@ -75,31 +75,31 @@ color: $gray-d2; } - .current-page { - @extend %ui-depth1; + .current-page { + @extend %ui-depth1 !optional; position: absolute; @include left(-($baseline/4)); } - .page-divider { - @extend %t-title4; - @extend %t-regular; + .page-divider { + @extend %t-title4 !optional; + @extend %t-regular !optional; vertical-align: middle; color: $gray; } - .pagination-form { - @extend %ui-depth2; + .pagination-form { + @extend %ui-depth2 !optional; position: relative; - .page-number-label, - .submit-pagination-form { - @extend %cont-text-sr; - } + .page-number-label, + .submit-pagination-form { + @extend %cont-text-sr !optional; + } .page-number-input { @include transition(all $tmg-f2 ease-in-out 0s); diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss index b35356c3684a..778f83833a00 100644 --- a/cms/static/sass/elements/_sock.scss +++ b/cms/static/sass/elements/_sock.scss @@ -12,7 +12,7 @@ .wrapper-inner { @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%); - @extend %ui-depth0; + @extend %ui-depth0 !optional; display: none; width: 100% !important; @@ -20,9 +20,9 @@ padding: 0 $baseline !important; } - // sock - actions - .list-cta { - @extend %ui-depth1; + // sock - actions + .list-cta { + @extend %ui-depth1 !optional; position: absolute; top: -($baseline*0.75); @@ -30,16 +30,16 @@ margin: 0 auto; text-align: center; - .cta-show-sock { - @extend %ui-btn-pill; - @extend %t-action4; + .cta-show-sock { + @extend %ui-btn-pill !optional; + @extend %t-action4 !optional; background: $gray-l5; padding: ($baseline/2) $baseline; color: $gray-d2; - .icon { - @extend %t-icon6; + .icon { + @extend %t-icon6 !optional; @include margin-right($baseline/4); } @@ -55,7 +55,7 @@ .sock { @include clearfix(); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; max-width: $fg-max-width; min-width: $fg-min-width; @@ -64,27 +64,27 @@ padding: ($baseline*2) 0; color: $gray-l3; - // support body - header { - .title { - @extend %t-title4; - } - } + // support body + header { + .title { + @extend %t-title4 !optional; + } + } // shared elements .support, .feedback { box-sizing: border-box; - .title { - @extend %t-title6; + .title { + @extend %t-title6 !optional; color: $white; margin-bottom: ($baseline/2); } - .copy { - @extend %t-copy-sub2; + .copy { + @extend %t-copy-sub2 !optional; margin: 0 0 $baseline 0; } @@ -102,13 +102,13 @@ @include margin-right(0); } - .action { - @extend %t-action4; + .action { + @extend %t-action4 !optional; display: block; - .icon { - @extend %t-icon4; + .icon { + @extend %t-icon4 !optional; vertical-align: middle; @@ -116,17 +116,17 @@ } } - .tip { - @extend %cont-text-sr; - } - } + .tip { + @extend %cont-text-sr !optional; + } + } - .action-primary { - @extend %btn-primary-blue; - @extend %t-action3; + .action-primary { + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; + } + } } - } - } // studio support content .support { diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index 5585c20977a0..b2b9e6902142 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -3,7 +3,7 @@ // messages .message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; } @@ -13,7 +13,7 @@ box-sizing: border-box; - @extend %t-strong; + @extend %t-strong !optional; display: none; border-bottom: 2px solid $yellow-d2; @@ -23,7 +23,7 @@ color: $white; .feedback-symbol { - @extend %t-icon5; + @extend %t-icon5 !optional; position: relative; top: 1px; @@ -56,7 +56,7 @@ box-sizing: border-box; .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } @@ -143,13 +143,13 @@ .nav-actions .action-primary { @include blue-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $blue-d2; } button { - @extend %btn-no-style; + @extend %btn-no-style !optional; color: $blue; @@ -164,14 +164,14 @@ .nav-actions .action-primary { @include orange-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $orange-d2; color: $gray-d4; } button { - @extend %btn-no-style; + @extend %btn-no-style !optional; color: $orange; @@ -186,13 +186,13 @@ .nav-actions .action-primary { @include red-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $red-d2; } button { - @extend %btn-no-style; + @extend %btn-no-style !optional; color: $red-l1; @@ -207,13 +207,13 @@ .nav-actions .action-primary { @include blue-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $blue-d2; } button { - @extend %btn-no-style; + @extend %btn-no-style !optional; color: $blue; @@ -228,13 +228,13 @@ .nav-actions .action-primary { @include green-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $green-d2; } button { - @extend %btn-no-style; + @extend %btn-no-style !optional; color: $green; @@ -249,13 +249,13 @@ .nav-actions .action-primary { @include pink-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $pink-d2; } button { - @extend %btn-no-style; + @extend %btn-no-style !optional; color: $pink; @@ -268,7 +268,7 @@ // prompts .wrapper-prompt { - @extend %ui-depth5; + @extend %ui-depth5 !optional; @include transition(all $tmg-f3 ease-in-out 0s); @@ -319,12 +319,12 @@ } .action-primary { - @extend %t-action4; - @extend %t-strong; + @extend %t-action4 !optional; + @extend %t-strong !optional; } .action-secondary { - @extend %t-action4; + @extend %t-action4 !optional; } } } @@ -367,7 +367,7 @@ // notifications .wrapper-notification { - @extend %ui-depth5; + @extend %ui-depth5 !optional; @include clearfix(); @@ -484,7 +484,7 @@ max-width: $fg-max-width; strong { - @extend %t-strong; + @extend %t-strong !optional; } .feedback-symbol, @@ -497,7 +497,7 @@ .feedback-symbol { @include transition (color $tmg-f1 ease-in-out 0s); - @extend %t-icon3; + @extend %t-icon3 !optional; width: flex-grid(1, 12); height: ($baseline*1.25); @@ -508,13 +508,13 @@ } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; width: flex-grid(10, 12); color: $gray-l2; .title { - @extend %t-title7; + @extend %t-title7 !optional; margin-bottom: 0; color: $white; @@ -556,13 +556,13 @@ .action-primary { @include blue-button(); - @extend %t-strong; + @extend %t-strong !optional; border-color: $blue-d2; } .action-secondary { - @extend %t-action4; + @extend %t-action4 !optional; } } @@ -591,11 +591,11 @@ } .title { - @extend %cont-truncated; + @extend %cont-truncated !optional; } .copy p { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } } @@ -604,7 +604,7 @@ // alerts .wrapper-alert { - @extend %ui-depth2; + @extend %ui-depth2 !optional; box-sizing: border-box; box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue; @@ -677,7 +677,7 @@ color: $white; strong { - @extend %t-strong; + @extend %t-strong !optional; } .feedback-symbol, @@ -688,7 +688,7 @@ .feedback-symbol { @include transition (color $tmg-f1 ease-in-out 0s); - @extend %t-icon3; + @extend %t-icon3 !optional; width: flex-grid(1, 12); margin: ($baseline/4) flex-gutter() 0 0; @@ -701,7 +701,7 @@ color: $gray-l2; .title { - @extend %t-title7; + @extend %t-title7 !optional; margin-bottom: 0; color: $white; @@ -739,12 +739,12 @@ } .action-primary { - @extend %t-action4; - @extend %t-strong; + @extend %t-action4 !optional; + @extend %t-strong !optional; } .action-secondary { - @extend %t-action4; + @extend %t-action4 !optional; } } } @@ -762,11 +762,11 @@ text-align: center; .label { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } .icon { - @extend %t-icon6; + @extend %t-icon6 !optional; color: $white; width: auto; @@ -782,7 +782,7 @@ // with dismiss (to sunset action-alert-clos) .action-dismiss { .button { - @extend %btn-secondary-white; + @extend %btn-secondary-white !optional; padding: ($baseline/4) ($baseline/2); } @@ -794,13 +794,13 @@ } .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; margin-right: ($baseline/4); } .button-copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } } @@ -859,7 +859,7 @@ // block-level messages and validation .wrapper-message { .message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-d2; padding: ($baseline/2) ($baseline*0.75); @@ -870,7 +870,7 @@ } &.information { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-l5; color: $gray-d2; @@ -913,7 +913,7 @@ background-color: $gray-d1; .actions-list { - @extend %actions-list; + @extend %actions-list !optional; } } } @@ -930,7 +930,7 @@ body.uxdesign.alerts { } .content-primary { - @extend %ui-window; + @extend %ui-window !optional; width: flex-grid(12, 12); @@ -978,7 +978,7 @@ body.uxdesign.alerts { // artifact styles .main-wrapper { .alert { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; padding: 15px 20px; margin-bottom: ($baseline*1.5); @@ -996,7 +996,7 @@ body.uxdesign.alerts { } strong { - @extend %t-strong; + @extend %t-strong !optional; } .alert-action { @@ -1027,8 +1027,8 @@ body.error { } h1 { - @extend %t-title1; - @extend %t-light; + @extend %t-title1 !optional; + @extend %t-light !optional; float: none; margin: 0; @@ -1036,7 +1036,7 @@ body.error { } .description { - @extend %t-copy-lead2; + @extend %t-copy-lead2 !optional; margin-bottom: 50px; } @@ -1044,7 +1044,7 @@ body.error { .back-button { @include blue-button(); - @extend %t-action1; + @extend %t-action1 !optional; padding: 14px 40px 18px; } diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss index 2f66913fc087..0a67c8c779a7 100644 --- a/cms/static/sass/elements/_system-help.scss +++ b/cms/static/sass/elements/_system-help.scss @@ -7,16 +7,16 @@ margin-bottom: $baseline; .title { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } strong { - @extend %t-strong; + @extend %t-strong !optional; } // CASE: has links alongside @@ -32,7 +32,7 @@ } .nav-introduction-supplementary { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include float(right); @@ -42,7 +42,7 @@ @include text-align(right); .icon { - @extend %t-action3; + @extend %t-action3 !optional; display: inline-block; vertical-align: middle; @@ -54,7 +54,7 @@ // notices - in-context: to be used as notices to users within the context of a form/action .notice-incontext { - @extend %ui-well; + @extend %ui-well !optional; border-radius: ($baseline/10); position: relative; @@ -62,14 +62,14 @@ margin-bottom: $baseline; .title { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/2); } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(opacity $tmg-f2 ease-in-out 0s); @@ -82,7 +82,7 @@ } strong { - @extend %t-strong; + @extend %t-strong !optional; } &.has-status { @@ -103,8 +103,8 @@ margin-top: ($baseline*0.75); .action-primary { - @extend %btn-primary-blue; - @extend %t-action3; + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; } } } @@ -157,8 +157,8 @@ &.has-actions { .list-actions { .action-primary { - @extend %btn-primary-blue; - @extend %t-action3; + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; } } } @@ -179,8 +179,8 @@ &.has-actions { .list-actions { .action-primary { - @extend %btn-primary-green; - @extend %t-action3; + @extend %btn-primary-green !optional; + @extend %t-action3 !optional; } } } @@ -207,7 +207,7 @@ // informational bits (rename once UI pattern is further defined) .bit { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 $baseline 0; border-bottom: 1px solid $gray-l4; @@ -222,8 +222,8 @@ h3, .title { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; margin: 0 0 ($baseline/4) 0; color: $gray-d2; @@ -242,16 +242,16 @@ .external-help-button { display: inline-block; - @extend %ui-btn-flat-outline; - @extend %sizing; + @extend %ui-btn-flat-outline !optional; + @extend %sizing !optional; } // actions .list-actions { - @extend %cont-no-list; + @extend %cont-no-list !optional; .action-item { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; margin-bottom: ($baseline/4); border-bottom: 1px dotted $gray-l4; @@ -261,10 +261,10 @@ // details .list-details { - @extend %cont-no-list; + @extend %cont-no-list !optional; .item-detail { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; margin-bottom: ($baseline/4); border-bottom: 1px dotted $gray-l4; @@ -275,10 +275,10 @@ // navigation .nav-related, .nav-page { - @extend %cont-no-list; + @extend %cont-no-list !optional; .nav-item { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; margin-bottom: ($baseline/4); border-bottom: 1px dotted $gray-l5; diff --git a/cms/static/sass/elements/_tooltip.scss b/cms/static/sass/elements/_tooltip.scss index 00fc2f805487..324341367830 100644 --- a/cms/static/sass/elements/_tooltip.scss +++ b/cms/static/sass/elements/_tooltip.scss @@ -2,8 +2,8 @@ @include transition(opacity $tmg-f3 ease-out 0s); @include font-size(12); - @extend %t-regular; - @extend %ui-depth5; + @extend %t-regular !optional; + @extend %ui-depth5 !optional; position: absolute; top: 0; diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss index 63b49375c84f..d9dd028f35fb 100644 --- a/cms/static/sass/elements/_typography.scss +++ b/cms/static/sass/elements/_typography.scss @@ -34,14 +34,14 @@ } %t-title1 { - @extend %t-title; + @extend %t-title !optional; @include font-size(60); @include line-height(60); } %t-title2 { - @extend %t-title; + @extend %t-title !optional; @include font-size(48); @include line-height(48); @@ -53,42 +53,42 @@ } %t-title4 { - @extend %t-title; + @extend %t-title !optional; @include font-size(24); @include line-height(24); } %t-title5 { - @extend %t-title; + @extend %t-title !optional; @include font-size(18); @include line-height(18); } %t-title6 { - @extend %t-title; + @extend %t-title !optional; @include font-size(16); @include line-height(16); } %t-title7 { - @extend %t-title; + @extend %t-title !optional; @include font-size(14); @include line-height(14); } %t-title8 { - @extend %t-title; + @extend %t-title !optional; @include font-size(12); @include line-height(12); } %t-title9 { - @extend %t-title; + @extend %t-title !optional; @include font-size(11); @include line-height(11); @@ -102,35 +102,35 @@ } %t-copy-base { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(16); @include line-height(16); } %t-copy-lead1 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(18); @include line-height(18); } %t-copy-lead2 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(24); @include line-height(24); } %t-copy-sub1 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(14); @include line-height(14); } %t-copy-sub2 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(12); @include line-height(12); diff --git a/cms/static/sass/elements/_uploaded-assets.scss b/cms/static/sass/elements/_uploaded-assets.scss index 32dbc1aedd5e..d9cd8ef752f2 100644 --- a/cms/static/sass/elements/_uploaded-assets.scss +++ b/cms/static/sass/elements/_uploaded-assets.scss @@ -3,7 +3,7 @@ @include clearfix(); .assets-title { - @extend %t-strong; + @extend %t-strong !optional; margin-top: ($baseline*2); margin-bottom: ($baseline*2); @@ -14,7 +14,7 @@ } .meta { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: inline-block; vertical-align: top; @@ -24,12 +24,12 @@ .count-current-shown, .count-total, .sort-order { - @extend %t-strong; + @extend %t-strong !optional; } } .pagination { - @extend %pagination; + @extend %pagination !optional; } .assets-table { @@ -39,7 +39,7 @@ th, .video-head-col { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; background-color: $gray-l5; padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2); @@ -53,7 +53,7 @@ } .current-sort { - @extend %t-strong; + @extend %t-strong !optional; border-bottom: 1px solid $gray-l3; } @@ -84,7 +84,7 @@ border-top: 1px solid $gray-l4; .name-col { - @extend %t-strong; + @extend %t-strong !optional; } .video-status { @@ -138,7 +138,7 @@ .name-col { .title { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline-block; max-width: 200px; @@ -149,7 +149,7 @@ .date-col { @include transition(all $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray-d1; } @@ -163,7 +163,7 @@ .embeddable-xml-input { @include transition(all $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; box-shadow: none; border: 1px solid transparent; diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss index 5418745922f9..493c72e7ae88 100644 --- a/cms/static/sass/elements/_vendor.scss +++ b/cms/static/sass/elements/_vendor.scss @@ -3,7 +3,7 @@ // JQUI calendar .ui-datepicker { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; border-color: $darkGrey; border-radius: 2px; @@ -97,7 +97,7 @@ } .ui-widget { - @extend %t-copy-base; + @extend %t-copy-base !optional; } .ui-widget-header { @@ -126,7 +126,7 @@ } a { - @extend %t-regular; + @extend %t-regular !optional; float: none; } diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss index d6e8aff5d66a..c0ee0512f45f 100644 --- a/cms/static/sass/elements/_xblocks.scss +++ b/cms/static/sass/elements/_xblocks.scss @@ -44,19 +44,19 @@ align-items: center; .header-details { - @extend %cont-truncated; + @extend %cont-truncated !optional; width: 50%; vertical-align: middle; .xblock-display-name { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; font-weight: font-weight(semi-bold); } .xblock-group-visibility-label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; white-space: normal; font-weight: font-weight(semi-bold); @@ -137,7 +137,7 @@ .xmodule_VideoModule .xblock-license { @include text-align(right); - @extend %t-title7; + @extend %t-title7 !optional; display: block; width: auto; @@ -180,7 +180,7 @@ } .meta { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: inline-block; vertical-align: top; @@ -190,18 +190,18 @@ .count-current-shown, .count-total, .sort-order { - @extend %t-strong; + @extend %t-strong !optional; } } .pagination { - @extend %pagination; + @extend %pagination !optional; } } .container-paging-footer { .pagination { - @extend %pagination; + @extend %pagination !optional; } } @@ -210,7 +210,7 @@ // TO-DO: clean-up / remove this reset // internal headings for problems and video components h2 { - @extend %t-title5; + @extend %t-title5 !optional; margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0; color: $gray; @@ -225,7 +225,7 @@ // UI: xblocks - calls-to-action .header-actions .actions-list { - @extend %actions-list; + @extend %actions-list !optional; } // CASE: xblock is collapsible @@ -236,7 +236,7 @@ } .expand-collapse { - @extend %expand-collapse; + @extend %expand-collapse !optional; margin: 0 ($baseline/4); height: ($baseline*1.25); @@ -265,7 +265,7 @@ // xblock message area, for general information as well as validation .wrapper-xblock-message { .xblock-message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-d2; padding: ($baseline*0.75); @@ -276,7 +276,7 @@ } &.information { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-l5; color: $gray-d2; @@ -319,7 +319,7 @@ background-color: $gray-d1; .actions-list { - @extend %actions-list; + @extend %actions-list !optional; } } } @@ -420,7 +420,7 @@ } .xblock-header-primary { - @extend %t-light; + @extend %t-light !optional; display: flex; margin-bottom: 0; @@ -460,7 +460,7 @@ .wrapper-xblock-message { .xblock-message { &.information { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; padding: 0 $baseline ($baseline*0.75) $baseline; color: $gray-l1; @@ -474,7 +474,7 @@ // edited experiment groups: active and inactive .wrapper-groups { .title { - @extend %t-title7; + @extend %t-title7 !optional; margin-left: ($baseline/2); color: $gray-l1; @@ -536,9 +536,9 @@ .file-uploader { .upload-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action3 !optional; + @extend %t-strong !optional; box-sizing: border-box; display: inline-block; @@ -548,9 +548,9 @@ } .download-setting { - @extend %ui-btn-non; - @extend %t-action4; - @extend %t-strong; + @extend %ui-btn-non !optional; + @extend %t-action4 !optional; + @extend %t-strong !optional; box-sizing: border-box; display: inline-block; @@ -573,7 +573,7 @@ //settings-list .list-input.settings-list { - @extend %cont-no-list; + @extend %cont-no-list !optional; overflow: auto; max-height: 400px; @@ -633,8 +633,8 @@ .setting-label { @include transition(color $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub1; - @extend %t-strong; + @extend %t-copy-sub1 !optional; + @extend %t-strong !optional; vertical-align: middle; display: inline-block; @@ -655,7 +655,7 @@ @include placeholder($gray-l4); @include size(100%, 100%); - @extend %t-copy-base; + @extend %t-copy-base !optional; width: 45%; min-width: 100px; @@ -699,7 +699,7 @@ } .action.setting-clear { - @extend %t-action4; + @extend %t-action4 !optional; color: $gray; width: 25px; @@ -729,7 +729,7 @@ } .setting-help { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: inline-block; min-width: ($baseline*10); @@ -785,9 +785,9 @@ } .create-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: block; width: 100%; @@ -801,7 +801,7 @@ .remove-setting { @include transition(color $tmg-f2 ease-in-out); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; background: transparent; @@ -859,9 +859,9 @@ } .create-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: block; width: 88%; @@ -875,7 +875,7 @@ .remove-setting { @include transition(color $tmg-f2 ease-in-out); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; background: transparent; @@ -945,7 +945,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { .action.license-button { @include grey-button; - @extend %t-action2; + @extend %t-action2 !optional; display: inline-block; text-align: center; @@ -959,7 +959,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } } @@ -967,7 +967,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { margin-bottom: ($baseline/2); .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } .license-options { @@ -996,8 +996,8 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { } .option-name { - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: inline-block; width: 15%; @@ -1006,7 +1006,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { } .explanation { - @extend %t-action4; + @extend %t-action4 !optional; display: inline-block; width: 75%; diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss index b3681d771e93..b0cd836a7c84 100644 --- a/cms/static/sass/elements/_xmodules.scss +++ b/cms/static/sass/elements/_xmodules.scss @@ -52,8 +52,8 @@ } .collapse-setting { - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: block; width: 100%; @@ -138,11 +138,11 @@ margin-top: ($baseline/2); .transcripts-message { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } .transcripts-message-status { - @extend %t-strong; + @extend %t-strong !optional; color: $green; @@ -152,14 +152,14 @@ .icon, [class*=" fa-"] { - @extend %t-icon4; + @extend %t-icon4 !optional; margin-right: ($baseline/4); } } .transcripts-error-message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background: $red; color: $white; @@ -178,8 +178,8 @@ } .action { - @extend %btn-primary-blue; - @extend %t-action3; + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; margin-bottom: ($baseline/2); } @@ -197,7 +197,7 @@ } .progress-bar { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; display: block; height: 30px; @@ -261,7 +261,7 @@ } .list-settings-buttons { - @extend %cont-truncated; + @extend %cont-truncated !optional; padding: ($baseline/2) 0; border-bottom: 1px solid $gray-l4; @@ -288,9 +288,9 @@ } .create-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: block; padding: ($baseline/2); @@ -301,9 +301,9 @@ } .upload-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/2); @@ -312,9 +312,9 @@ } .download-setting { - @extend %ui-btn-non; - @extend %t-action4; - @extend %t-strong; + @extend %ui-btn-non !optional; + @extend %t-action4 !optional; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/2); @@ -330,7 +330,7 @@ .remove-setting { @include transition(color 0.25s ease-in-out); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; background: transparent; diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index 4ff3ff0d3ca1..a5481c2b84c4 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -14,7 +14,7 @@ .content { @include clearfix(); - @extend %t-copy-base; + @extend %t-copy-base !optional; max-width: $fg-max-width; min-width: $fg-min-width; @@ -29,15 +29,15 @@ padding-bottom: ($baseline/2); h1 { - @extend %t-title3; - @extend %t-strong; + @extend %t-title3 !optional; + @extend %t-strong !optional; margin: 0; padding: 0; } .action { - @extend %t-action3; + @extend %t-action3 !optional; position: absolute; @@ -48,7 +48,7 @@ } .introduction { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 $baseline 0; } @@ -60,7 +60,7 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; form { box-sizing: border-box; @@ -78,8 +78,8 @@ @include blue-button(); @include transition(all $tmg-f3 linear 0s); - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: block; width: 100%; @@ -89,7 +89,7 @@ } .list-input { - @extend %cont-no-list; + @extend %cont-no-list !optional; .field { margin: 0 0 ($baseline*0.75) 0; @@ -100,7 +100,7 @@ &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -116,7 +116,7 @@ } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color $tmg-f3 ease-in-out 0s); @@ -129,7 +129,7 @@ input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; height: 100%; width: 100%; @@ -186,7 +186,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color $tmg-f3 ease-in-out 0s); @@ -232,10 +232,10 @@ } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; .bit { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 $baseline 0; border-bottom: 1px solid $gray-l4; @@ -249,8 +249,8 @@ } h3 { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; margin: 0 0 ($baseline/4) 0; color: $gray-d2; @@ -262,7 +262,7 @@ position: relative; .action-forgotpassword { - @extend %t-action3; + @extend %t-action3 !optional; position: absolute; top: 0; diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index 144e5dffd82e..03fd43483d23 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -8,16 +8,16 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } .nav-actions { .fa-cloud-upload { - @extend %t-copy; + @extend %t-copy !optional; vertical-align: bottom; margin-right: ($baseline/5); @@ -25,7 +25,7 @@ } .no-asset-content { - @extend %ui-well; + @extend %ui-well !optional; padding: ($baseline*2); background-color: $gray-l4; @@ -33,8 +33,8 @@ color: $gray; .new-button { - @extend %btn-primary-green; - @extend %t-action3; + @extend %btn-primary-green !optional; + @extend %t-action3 !optional; @include margin-left($baseline); @@ -52,7 +52,7 @@ } .meta { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: inline-block; vertical-align: top; @@ -63,7 +63,7 @@ .count-total, .filter-column, .sort-order { - @extend %t-strong; + @extend %t-strong !optional; } } @@ -116,7 +116,7 @@ } .nav-label { - @extend .sr; + @extend .sr !optional; } .pagination-form, @@ -129,8 +129,8 @@ .current-page, .page-number-input, .total-pages { - @extend %t-copy-base; - @extend %t-strong; + @extend %t-copy-base !optional; + @extend %t-strong !optional; width: ($baseline*2.5); margin: 0 ($baseline*0.75); @@ -140,7 +140,7 @@ } .current-page { - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; @@ -148,8 +148,8 @@ } .page-divider { - @extend %t-title4; - @extend %t-regular; + @extend %t-title4 !optional; + @extend %t-regular !optional; vertical-align: middle; color: $gray; @@ -157,13 +157,13 @@ .pagination-form { - @extend %ui-depth2; + @extend %ui-depth2 !optional; position: relative; .page-number-label, .submit-pagination-form { - @extend .sr; + @extend .sr !optional; } .page-number-input { @@ -203,7 +203,7 @@ word-wrap: break-word; th { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; background-color: $gray-l5; padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2); @@ -218,7 +218,7 @@ } .current-sort { - @extend %t-strong; + @extend %t-strong !optional; border-bottom: 1px solid $gray-l3; } @@ -238,11 +238,11 @@ .wrapper-nav-sub { top: 35px; - @extend %ui-depth2; + @extend %ui-depth2 !optional; > ol > .nav-item { - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; display: inline-block; vertical-align: middle; @@ -336,7 +336,7 @@ .thumb-col { padding: ($baseline/2) $baseline; - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray-l2; @@ -352,7 +352,7 @@ .name-col { .title { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline-block; max-width: 200px; @@ -361,7 +361,7 @@ } .type-col { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray-d1; } @@ -369,7 +369,7 @@ .date-col { @include transition(all $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray-l2; } @@ -377,7 +377,7 @@ .embed-col { @include transition(all $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; padding-left: ($baseline*0.75); color: $gray-l2; @@ -390,7 +390,7 @@ .embeddable-xml-input { @include transition(all $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; box-shadow: none; border: 1px solid transparent; @@ -417,7 +417,7 @@ // UI: assets - calls-to-action .actions-list { - @extend %actions-list; + @extend %actions-list !optional; .action-item { @@ -495,8 +495,8 @@ } .title { - @extend %t-title3; - @extend %t-light; + @extend %t-title3 !optional; + @extend %t-light !optional; float: none; margin: ($baseline*2) 0 ($baseline*1.5); @@ -509,7 +509,7 @@ .choose-file-button { @include blue-button(); - @extend %t-action2; + @extend %t-action2 !optional; padding: 10px 82px 12px; } @@ -532,7 +532,7 @@ } .progress-fill { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; width: 0%; height: ($baseline*1.5); @@ -553,7 +553,7 @@ padding: 0; .icon { - @extend %t-action1; + @extend %t-action1 !optional; } &:hover { @@ -568,7 +568,7 @@ margin: ($baseline*1.5) 0 ($baseline*4); label { - @extend %t-strong; + @extend %t-strong !optional; display: block; margin-bottom: ($baseline/2); diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss index 7c7eb3fa5f3e..43d05d555c96 100644 --- a/cms/static/sass/views/_certificates.scss +++ b/cms/static/sass/views/_certificates.scss @@ -22,8 +22,8 @@ margin-right: flex-gutter(); .notice-moduledisabled { - @extend %ui-well; - @extend %t-copy-base; + @extend %ui-well !optional; + @extend %t-copy-base !optional; background-color: $white; padding: ($baseline*1.5) $baseline; @@ -31,21 +31,21 @@ } .no-content { - @extend %no-content; + @extend %no-content !optional; } .wrapper-certificates { .title { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .instructions { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-bottom: $baseline; } @@ -56,7 +56,7 @@ } .actual-course-title { - @extend %t-strong; + @extend %t-strong !optional; margin-bottom: $baseline; } @@ -82,7 +82,7 @@ // ==================== .view-certificates { .wrapper-collection { - @extend %ui-window; + @extend %ui-window !optional; position: relative; outline: none; @@ -102,7 +102,7 @@ } .collection-info { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; &.certificate-info-inline { margin: ($baseline/2) 0; @@ -127,7 +127,7 @@ margin-bottom: ($baseline*0.75); .item { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; padding: ($baseline/7) 0 ($baseline/4); border-top: 1px solid $gray-l4; @@ -163,15 +163,15 @@ margin-right: ($baseline/4); .edit { - @extend %ui-btn-non-blue; + @extend %ui-btn-non-blue !optional; } .edit-signatory { - @extend %ui-btn-non-blue; + @extend %ui-btn-non-blue !optional; } .delete { - @extend %ui-btn-non; + @extend %ui-btn-non !optional; &.is-disabled { background-color: $gray-l3; @@ -183,7 +183,7 @@ } .collection-references { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; box-shadow: 0 2px 2px 0 $shadow inset; padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5); @@ -196,7 +196,7 @@ padding: ($baseline/4) 0; a { - @extend %t-strong; + @extend %t-strong !optional; } .fa-warning { @@ -226,12 +226,12 @@ padding: $baseline ($baseline*1.5); label { - @extend %t-strong; + @extend %t-strong !optional; } } .action-add-signatory { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; display: block; width: 100%; @@ -240,13 +240,13 @@ } .disableClick { - @extend %ui-disabled; + @extend %ui-disabled !optional; color: $gray-l1; } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color, 0.15s, ease-in-out); @@ -261,7 +261,7 @@ .collection-fields { - @extend %cont-no-list; + @extend %cont-no-list !optional; margin-bottom: $baseline; } @@ -270,12 +270,12 @@ margin: 0 0 ($baseline*0.75) 0; &:last-child { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; } &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -295,7 +295,7 @@ } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color, 0.15s, ease-in-out); @@ -309,7 +309,7 @@ //this section is borrowed from _account.scss - we should clean up and unify later input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; height: 100%; width: 100%; @@ -358,7 +358,7 @@ } label.required { - @extend %t-strong; + @extend %t-strong !optional; &::after { margin-left: ($baseline/4); @@ -370,7 +370,7 @@ label { width: 50%; - @extend %t-title5; + @extend %t-title5 !optional; display: inline-block; vertical-align: bottom; @@ -384,7 +384,7 @@ color: $gray-l1; .certificate-value { - @extend %t-strong; + @extend %t-strong !optional; white-space: nowrap; margin-left: ($baseline*0.5); @@ -407,13 +407,13 @@ } .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; padding: ($baseline/4) $baseline; } .action-secondary { - @extend %btn-secondary-gray; + @extend %btn-secondary-gray !optional; padding: ($baseline/4) $baseline; } @@ -436,21 +436,21 @@ } .copy { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; margin: ($baseline) 0 ($baseline/2) 0; color: $gray; strong { - @extend %t-strong; + @extend %t-strong !optional; } } } .action-add-item { - @extend %ui-btn-flat-outline; - @extend %t-action2; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: block; width: 100%; @@ -461,7 +461,7 @@ // add/new collection .action-add { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; display: block; width: 100%; @@ -496,8 +496,8 @@ .certificate-details, .certificate-edit { .title { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/2); } @@ -545,7 +545,7 @@ .action-close { @include transition(color $tmg-f2 ease-in-out); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; border: 0; @@ -568,12 +568,12 @@ .view-certificates .certificates { .signatory-details, .signatory-edit { - @extend %ui-window; + @extend %ui-window !optional; border-color: $gray-l4; .signatory-panel-header { - @extend %t-strong; + @extend %t-strong !optional; background-color: $gray-l5; padding: ($baseline/2) ($baseline*0.75); @@ -617,7 +617,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color, 0.15s, ease-in-out); @@ -630,12 +630,12 @@ margin-bottom: $baseline; &:last-child { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; } &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -655,7 +655,7 @@ } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color, 0.15s, ease-in-out); @@ -669,7 +669,7 @@ //TO-DO: this section is borrowed from _account.scss - we should clean up and unify later input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; height: 100%; width: 100%; @@ -732,7 +732,7 @@ } .action-upload-signature { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; float: right; width: flex-grid(4, 12); diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index c9d593defcfb..f6ea1267ceee 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -9,12 +9,12 @@ // view-specific utilities // -------------------- %status-value-base { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; } %status-value-sub1 { - @extend %t-title8; + @extend %t-title8 !optional; display: block; } @@ -22,7 +22,7 @@ // UI: container page view // -------------------- .view-container { - @extend %two-col-1; + @extend %two-col-1 !optional; .wrapper-mast { .mast { @@ -31,8 +31,8 @@ .page-header { .page-header-title { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; } .is-editable { @@ -41,8 +41,8 @@ .incontext-editor-input { @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0); - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; width: 100%; background: none repeat scroll 0 0 $white; @@ -70,8 +70,8 @@ &.has-actions { .nav-actions { .button { - @extend %t-action3; - @extend %t-regular; + @extend %t-action3 !optional; + @extend %t-regular !optional; padding: ($baseline/4) ($baseline*0.75); } @@ -82,7 +82,7 @@ .content-primary { .no-container-content { - @extend %no-content; + @extend %no-content !optional; padding: ($baseline*1.5) ($baseline*2); @@ -118,37 +118,37 @@ .content-supplementary { label { - @extend %t-title8; + @extend %t-title8 !optional; } // UI: publishing details/summary .bit-publishing { - @extend %bar-module; + @extend %bar-module !optional; // CASE: content is ready to be made live &.is-ready { - @extend %bar-module-green; + @extend %bar-module-green !optional; } // CASE: content is live &.is-live { - @extend %bar-module-blue; + @extend %bar-module-blue !optional; } // CASE: content has warnings &.has-warnings { - @extend %bar-module-yellow; + @extend %bar-module-yellow !optional; } // CASE: content has erors &.has-errors { - @extend %bar-module-red; + @extend %bar-module-red !optional; } // CASE: content is staff only &.staff-only, &.is-staff-only { - @extend %bar-module-black; + @extend %bar-module-black !optional; &.is-scheduled .wrapper-release .copy { text-decoration: line-through; @@ -157,7 +157,7 @@ // CASE: content is gated &.is-gated { - @extend %bar-module-black; + @extend %bar-module-black !optional; } .bar-mod-content { @@ -172,27 +172,27 @@ .wrapper-last-draft { .date, .user { - @extend %t-strong; + @extend %t-strong !optional; } .user { - @extend %cont-text-wrap; + @extend %cont-text-wrap !optional; } } .wrapper-release { .release-date { - @extend %status-value-base; + @extend %status-value-base !optional; } .release-with { - @extend %status-value-sub1; + @extend %status-value-sub1 !optional; } } .wrapper-visibility { .copy { - @extend %status-value-base; + @extend %status-value-base !optional; margin-bottom: ($baseline/10); } @@ -202,12 +202,12 @@ } .inherited-from { - @extend %status-value-sub1; + @extend %status-value-sub1 !optional; } // UI: note about specific access .note-visibility { - @extend %status-value-sub1; + @extend %status-value-sub1 !optional; .icon { @include margin-right($baseline/4); @@ -221,14 +221,14 @@ padding: $baseline ($baseline*0.75) ($baseline*0.75) ($baseline*0.75); .action-publish { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; display: block; padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2); } .action-discard { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; margin-top: ($baseline/2); @@ -250,18 +250,18 @@ background-color: $white; .copy { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray-d2; } .date, .user { - @extend %t-strong; + @extend %t-strong !optional; } .user { - @extend %cont-text-wrap; + @extend %cont-text-wrap !optional; } } } @@ -269,7 +269,7 @@ // location widget .unit-location, .library-location { - @extend %bar-module; + @extend %bar-module !optional; border-top: none; @@ -277,14 +277,14 @@ .wrapper-library-id { .unit-id-value, .library-id-value { - @extend %status-value-base; + @extend %status-value-base !optional; display: inline-block; width: 100%; } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: inline-block; margin: ($baseline/4) 0; @@ -294,7 +294,7 @@ .wrapper-unit-tree-location { .item-title { - @extend %cont-text-wrap; + @extend %cont-text-wrap !optional; a { color: theme-color("primary"); @@ -310,8 +310,8 @@ background: $gray-l4; .unit-title a { - @extend %ui-disabled; - @extend %t-strong; + @extend %ui-disabled !optional; + @extend %t-strong !optional; color: $color-heading-base; } diff --git a/cms/static/sass/views/_course-create.scss b/cms/static/sass/views/_course-create.scss index 96301540c705..2508e2acf94e 100644 --- a/cms/static/sass/views/_course-create.scss +++ b/cms/static/sass/views/_course-create.scss @@ -31,7 +31,7 @@ } .course-original-title-id { - @extend %t-title5; + @extend %t-title5 !optional; } } @@ -55,7 +55,7 @@ } label { - @extend %t-title7; + @extend %t-title7 !optional; display: block; font-weight: 700; @@ -74,7 +74,7 @@ } .rerun-course-name { - @extend %t-title5; + @extend %t-title5 !optional; font-weight: 300; } @@ -119,13 +119,13 @@ .action-primary { @include blue-button; - @extend %t-action2; + @extend %t-action2 !optional; } .action-secondary { @include grey-button; - @extend %t-action2; + @extend %t-action2 !optional; } } } diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 27e62c0c6e6d..f5e3649e6e0a 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -21,11 +21,11 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } // ==================== @@ -55,8 +55,8 @@ .action-create-course, .action-create-library { - @extend %btn-primary-green; - @extend %t-action3; + @extend %btn-primary-green !optional; + @extend %t-action3 !optional; } } } @@ -69,8 +69,8 @@ overflow: hidden; .ui-toggle-control { - @extend %ui-depth2; - @extend %btn-secondary-gray; + @extend %ui-depth2 !optional; + @extend %btn-secondary-gray !optional; @include clearfix(); @@ -84,7 +84,7 @@ } .label { - @extend %t-action3; + @extend %t-action3 !optional; float: left; width: flex-grid(8, 9); @@ -92,7 +92,7 @@ } .fa-times-circle { - @extend %t-action1; + @extend %t-action1 !optional; @include transform(rotate(45deg)); @include transform-origin(center center); @@ -104,7 +104,7 @@ } .ui-toggle-target { - @extend %ui-depth1; + @extend %ui-depth1 !optional; @include transition(opacity $tmg-f1 ease-in-out 0s); @@ -137,8 +137,8 @@ margin-top: $baseline; .title { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/4); color: $gray-d1; @@ -149,8 +149,8 @@ margin-top: ($baseline*0.75); .action-primary { - @extend %btn-primary-blue; - @extend %t-action3; + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; } // specific - request button @@ -162,7 +162,7 @@ .fa-cog { @include transition(all $tmg-f1 ease-in-out $tmg-f1); - @extend %t-icon4; + @extend %t-icon4 !optional; position: absolute; top: ($baseline/2); @@ -199,7 +199,7 @@ .status-update { .label { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } .value { @@ -229,8 +229,8 @@ } .value-formal { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; margin: ($baseline/2); @@ -240,7 +240,7 @@ } .value-description { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; position: relative; color: $white; @@ -251,7 +251,7 @@ // CASE: rights are not requested yet &.is-unrequested { .title { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } @@ -329,7 +329,7 @@ .libraries, .archived-courses { .title { - @extend %t-title6; + @extend %t-title6 !optional; margin-bottom: $baseline; border-bottom: 1px solid $gray-l3; @@ -338,7 +338,7 @@ } .title { - @extend %t-title6; + @extend %t-title6 !optional; margin-bottom: $baseline; border-bottom: 1px solid $gray-l3; @@ -380,19 +380,19 @@ } .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; margin-right: ($baseline/2); } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } } .status-message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-l5; box-shadow: 0 2px 2px 0 $shadow inset; @@ -415,7 +415,7 @@ text-align: right; .button { - @extend %btn-secondary-white; + @extend %btn-secondary-white !optional; padding: ($baseline/4) ($baseline/2); } @@ -427,13 +427,13 @@ } .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; margin-right: ($baseline/4); } .button-copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } } @@ -463,7 +463,7 @@ // encompassing course link .course-link { - @extend %ui-depth2; + @extend %ui-depth2 !optional; width: flex-grid(6, 9); @@ -472,7 +472,7 @@ // course title .course-title { - @extend %t-title4; + @extend %t-title4 !optional; @include margin(0, ($baseline*2), ($baseline/4), 0); @@ -481,7 +481,7 @@ // course metadata .course-metadata { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(opacity $tmg-f1 ease-in-out 0); @@ -498,7 +498,7 @@ } .label { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } @@ -508,7 +508,7 @@ } .course-actions { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: static; width: flex-grid(3, 9); @@ -527,7 +527,7 @@ } .button { - @extend %t-action3; + @extend %t-action3 !optional; } // view live button @@ -583,7 +583,7 @@ } .wrapper-course { - @extend %ui-window; + @extend %ui-window !optional; position: relative; } @@ -603,7 +603,7 @@ // course details (replacement for course-link when a course cannot be linked) .course-details { - @extend %ui-depth2; + @extend %ui-depth2 !optional; display: inline-block; vertical-align: middle; @@ -666,8 +666,8 @@ } label { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; display: block; } @@ -689,8 +689,8 @@ } .new-course-name { - @extend %t-title5; - @extend %t-light; + @extend %t-title5 !optional; + @extend %t-light !optional; } .new-course-save { @@ -719,7 +719,7 @@ } .message-status { - @extend %t-strong; + @extend %t-strong !optional; display: block; margin-bottom: 0; diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss index b091a7b8d9ce..c2c9dcb62392 100644 --- a/cms/static/sass/views/_export-git.scss +++ b/cms/static/sass/views/_export-git.scss @@ -24,20 +24,20 @@ } h3 { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; } .export-git-info-block { dt { - @extend %t-copy-lead1; - @extend %t-strong; + @extend %t-copy-lead1 !optional; + @extend %t-strong !optional; margin-top: 12px; } dd { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin-bottom: $baseline; } @@ -54,7 +54,7 @@ // UI: introduction .introduction { .title { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } @@ -62,17 +62,17 @@ .export-git-controls { box-sizing: border-box; - @extend %ui-window; + @extend %ui-window !optional; padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); .title { - @extend %t-title4; + @extend %t-title4 !optional; } .action-export-git { - @extend %btn-primary-blue; - @extend %t-action1; + @extend %btn-primary-blue !optional; + @extend %t-action1 !optional; display: block; margin: $baseline 0; @@ -81,7 +81,7 @@ .action { .icon { - @extend %t-icon2; + @extend %t-icon2 !optional; display: inline-block; vertical-align: middle; diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss index fb14a5f63f4b..fc8be493ee47 100644 --- a/cms/static/sass/views/_export.scss +++ b/cms/static/sass/views/_export.scss @@ -10,18 +10,18 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } // UI: introduction .introduction { .title { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } @@ -29,17 +29,17 @@ .export-controls { box-sizing: border-box; - @extend %ui-window; + @extend %ui-window !optional; padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); .title { - @extend %t-title4; + @extend %t-title4 !optional; } .action-export { - @extend %btn-primary-blue; - @extend %t-action1; + @extend %btn-primary-blue !optional; + @extend %t-action1 !optional; display: block; margin: $baseline 0; @@ -48,7 +48,7 @@ .action { .icon { - @extend %t-icon2; + @extend %t-icon2 !optional; display: inline-block; vertical-align: middle; @@ -74,8 +74,8 @@ width: flex-grid(4, 9); .item-detail { - @extend %t-copy-sub1; - @extend %wipe-last-child; + @extend %t-copy-sub1 !optional; + @extend %wipe-last-child !optional; padding-bottom: ($baseline/4); border-bottom: 1px solid $gray-l4; @@ -107,7 +107,7 @@ } > .title { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: $baseline; border-bottom: 1px solid $gray-l3; @@ -125,7 +125,7 @@ .icon { @include transition(opacity $tmg-f1 ease-in-out 0); - @extend %t-icon4; + @extend %t-icon4 !optional; position: absolute; top: ($baseline/2); @@ -139,12 +139,12 @@ margin-left: ($baseline*3); .title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; } .copy { - @extend %t-copy-base; + @extend %t-copy-base !optional; color: $gray-l2; } @@ -170,7 +170,7 @@ display: none; .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; } } } diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss index 95d332de78ea..fd693cf9646c 100644 --- a/cms/static/sass/views/_group-configuration.scss +++ b/cms/static/sass/views/_group-configuration.scss @@ -14,8 +14,8 @@ width: flex-grid(9, 12); .notice-moduledisabled { - @extend %ui-well; - @extend %t-copy-base; + @extend %ui-well !optional; + @extend %t-copy-base !optional; background-color: $white; padding: ($baseline*1.5) $baseline; @@ -23,7 +23,7 @@ } .no-content { - @extend %no-content; + @extend %no-content !optional; color: $gray-d1; } @@ -32,19 +32,19 @@ margin-bottom: ($baseline*1.5); .title { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/2); } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } .wrapper-collection { - @extend %ui-window; + @extend %ui-window !optional; position: relative; outline: none; @@ -63,9 +63,9 @@ padding-bottom: 0; .title { - @extend %cont-truncated; - @extend %t-title5; - @extend %t-strong; + @extend %cont-truncated !optional; + @extend %t-title5 !optional; + @extend %t-strong !optional; @include margin-right($baseline*14); @@ -85,7 +85,7 @@ .ui-toggle-expansion { @include transition(rotate 0.15s ease-in-out 0.25s); - @extend %t-action1; + @extend %t-action1 !optional; @include margin-left(-$baseline); @@ -102,7 +102,7 @@ } &.is-selectable { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; &:hover { color: $blue; @@ -117,7 +117,7 @@ } .collection-info { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include margin-left($baseline); @@ -184,7 +184,7 @@ margin-bottom: ($baseline*0.75); .item { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; padding: ($baseline/7) 0 ($baseline/4); border-top: 1px solid $gray-l4; @@ -222,11 +222,11 @@ vertical-align: middle; .edit { - @extend %ui-btn-non-blue; + @extend %ui-btn-non-blue !optional; } .delete { - @extend %ui-btn-non; + @extend %ui-btn-non !optional; &.is-disabled { background-color: $gray-l3; @@ -238,7 +238,7 @@ } .collection-references { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5); @@ -252,7 +252,7 @@ padding: ($baseline/4) 0; a { - @extend %t-strong; + @extend %t-strong !optional; } .fa-warning { @@ -271,7 +271,7 @@ } .usage-validation { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5); @@ -305,7 +305,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color, 0.15s, ease-in-out); @@ -320,7 +320,7 @@ .collection-fields { - @extend %cont-no-list; + @extend %cont-no-list !optional; margin-bottom: $baseline; } @@ -329,12 +329,12 @@ @include margin(0, 0, $baseline*0.75, 0); &:last-child { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; } &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -355,7 +355,7 @@ } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color, 0.15s, ease-in-out); @include margin(0, 0, $baseline/4, 0); @@ -368,7 +368,7 @@ //this section is borrowed from _account.scss - we should clean up and unify later input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; height: 100%; width: 100%; @@ -417,7 +417,7 @@ } label.required { - @extend %t-strong; + @extend %t-strong !optional; &::after { @include margin-left($baseline/4); @@ -430,7 +430,7 @@ label { width: 50%; - @extend %t-title5; + @extend %t-title5 !optional; display: inline-block; vertical-align: bottom; @@ -445,7 +445,7 @@ color: $gray-l1; .group-configuration-value { - @extend %t-strong; + @extend %t-strong !optional; @include margin-left($baseline*0.5); @@ -471,13 +471,13 @@ // add a group is below with groups styling .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; padding: ($baseline/4) $baseline; } .action-secondary { - @extend %btn-secondary-gray; + @extend %btn-secondary-gray !optional; padding: ($baseline/4) $baseline; } @@ -494,22 +494,22 @@ } .copy { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include margin($baseline, 0, $baseline/2, 0); color: $gray; strong { - @extend %t-strong; + @extend %t-strong !optional; } } } .action-add-item { - @extend %ui-btn-flat-outline; - @extend %t-action2; - @extend %t-strong; + @extend %ui-btn-flat-outline !optional; + @extend %t-action2 !optional; + @extend %t-strong !optional; @include margin($baseline*1.5, 0, 0, 0); @@ -521,7 +521,7 @@ // add/new collection .action-add { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; display: block; width: 100%; @@ -552,7 +552,7 @@ .experiment-groups { .group-configuration-details { .group-configuration-info { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include margin-left($baseline); @@ -574,7 +574,7 @@ margin-bottom: ($baseline*0.75); .group { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; padding: ($baseline/7) 0 ($baseline/4); border-top: 1px solid $gray-l4; @@ -649,7 +649,7 @@ .action-close { @include transition(color $tmg-f2 ease-in-out); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; border: 0; diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss index a861afdcfa95..6be1ecc865b9 100644 --- a/cms/static/sass/views/_import.scss +++ b/cms/static/sass/views/_import.scss @@ -8,16 +8,16 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } // UI: export controls .export-controls { - @extend %ui-window; + @extend %ui-window !optional; @include clearfix(); @@ -28,12 +28,12 @@ .import-form { box-sizing: border-box; - @extend %ui-window; + @extend %ui-window !optional; padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); > .title { - @extend %t-title4; + @extend %t-title4 !optional; } .file-name-block, @@ -55,15 +55,15 @@ // UI: default .action-choose-file { - @extend %btn-primary-green; - @extend %t-action1; + @extend %btn-primary-green !optional; + @extend %t-action1 !optional; display: block; margin: $baseline 0; padding: ($baseline*0.75) $baseline; .icon { - @extend %t-icon2; + @extend %t-icon2 !optional; display: inline-block; vertical-align: middle; @@ -80,14 +80,14 @@ // UI: elem - file selection .wrapper-file-name { - @extend %ui-well; + @extend %ui-well !optional; margin: $baseline 0; padding: $baseline ($baseline*1.5); background-color: $gray-l4; .title { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; overflow-x: hidden; text-overflow: ellipsis; @@ -98,14 +98,14 @@ } .file-name { - @extend %t-strong; + @extend %t-strong !optional; } } // artifact styling needed for current page behavior logic .submit-button { - @extend %btn-primary-green; - @extend %t-action1; + @extend %btn-primary-green !optional; + @extend %t-action1 !optional; display: none; margin-top: ($baseline*0.75); @@ -129,7 +129,7 @@ } > .title { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: $baseline; border-bottom: 1px solid $gray-l3; @@ -147,7 +147,7 @@ .icon { @include transition(opacity $tmg-f1 ease-in-out 0); - @extend %t-icon4; + @extend %t-icon4 !optional; position: absolute; top: ($baseline/2); @@ -161,12 +161,12 @@ margin-left: ($baseline*3); .title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; } .copy { - @extend %t-copy-base; + @extend %t-copy-base !optional; color: $gray-l2; } @@ -192,7 +192,7 @@ display: none; .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; } } } diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index 7f7525aca427..815d4abc4b7b 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -18,7 +18,7 @@ } .content { - @extend %t-copy-base; + @extend %t-copy-base !optional; @include clearfix(); @@ -58,8 +58,8 @@ color: $white; h1 { - @extend %t-title2; - @extend %t-strong; + @extend %t-title2 !optional; + @extend %t-strong !optional; float: none; margin: 0 0 ($baseline/2) 0; @@ -74,13 +74,13 @@ } .logo { - @extend %t-strong; + @extend %t-strong !optional; margin-left: ($baseline/2); } .tagline { - @extend %t-title4; + @extend %t-title4 !optional; margin: 0; color: $blue-l3; @@ -165,7 +165,7 @@ .icon { @include border-top-radius(3px); - @extend %t-icon4; + @extend %t-icon4 !optional; display: inline-block; padding: ($baseline/2); @@ -198,26 +198,26 @@ margin-top: -($baseline/4); h3 { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; margin: 0 0 ($baseline/2) 0; } > p { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; color: $gray-d1; } strong { - @extend %t-strong; + @extend %t-strong !optional; color: $gray-d2; } .list-proofpoints { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include clearfix(); @@ -240,15 +240,15 @@ color: $gray-d1; .title { - @extend %t-copy-base; - @extend %t-strong; + @extend %t-copy-base !optional; + @extend %t-strong !optional; margin: 0 0 ($baseline/4) 0; color: $gray-d3; } &:hover { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; box-shadow: 0 1px ($baseline/10) $shadow-l1; background: $blue-l5; @@ -334,8 +334,8 @@ &.action-primary { @include blue-button; - @extend %t-action1; - @extend %t-strong; + @extend %t-action1 !optional; + @extend %t-strong !optional; padding: ($baseline*0.75) ($baseline/2); text-align: center; @@ -343,7 +343,7 @@ } &.action-secondary { - @extend %t-action3; + @extend %t-action3 !optional; margin-top: ($baseline/2); } diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index 01534b54808e..19afd34225b3 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -76,15 +76,15 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; .no-content { - @extend %no-content; + @extend %no-content !optional; } } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } @@ -121,7 +121,7 @@ // forms .new-section-name, .new-subsection-name-input { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: inline-block; width: 515px; @@ -130,7 +130,7 @@ } .new-subsection-name-input { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .new-section-name-save, @@ -153,7 +153,7 @@ // buttons .new-subsection-item, .new-unit-item { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; width: 100%; margin: 0 0 ($baseline/2) 0; @@ -175,7 +175,7 @@ // UI: general action list styles (section and subsection) // -------------------- .expand-collapse { - @extend %expand-collapse; + @extend %expand-collapse !optional; } // course status @@ -186,7 +186,7 @@ .status-release, .status-highlights-enabled, .status-studio-frontend { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: inline-block; color: $color-copy-base; @@ -217,7 +217,7 @@ .status-release-value, .status-highlights-enabled-value { - @extend %t-strong; + @extend %t-strong !optional; font-size: smaller; } @@ -233,15 +233,15 @@ } .status-highlights-enabled-value.button { - @extend %btn-primary-blue; - @extend %sizing; + @extend %btn-primary-blue !optional; + @extend %sizing !optional; padding: 5px 8px; margin-top: 2px; } .status-actions { - @extend %actions-list; + @extend %actions-list !optional; @include transition(opacity $tmg-f1 ease-in-out 0); @@ -315,11 +315,11 @@ // header .section-header { - @extend %outline-item-header; + @extend %outline-item-header !optional; .incontext-editor-input { - @extend %t-strong; - @extend %t-title5; + @extend %t-strong !optional; + @extend %t-title5 !optional; } } @@ -362,8 +362,8 @@ @include text-align(right); .actions-list { - @extend %actions-list; - @extend %t-action2; + @extend %actions-list !optional; + @extend %t-action2 !optional; } } @@ -379,15 +379,15 @@ // content .section-content { - @extend %outline-item-content-shown; + @extend %outline-item-content-shown !optional; } // CASE: is-collapsible &.is-collapsible { - @extend %ui-expand-collapse; + @extend %ui-expand-collapse !optional; .ui-toggle-expansion { - @extend %t-icon3; + @extend %t-icon3 !optional; color: $gray-l3; } @@ -396,7 +396,7 @@ // STATE: is-collapsed &.is-collapsed { .section-content { - @extend %outline-item-content-hidden; + @extend %outline-item-content-hidden !optional; } } @@ -417,10 +417,10 @@ // header .subsection-header { - @extend %outline-item-header; + @extend %outline-item-header !optional; .incontext-editor-input { - @extend %t-title6; + @extend %t-title6 !optional; } } @@ -464,13 +464,13 @@ @include text-align(right); .actions-list { - @extend %actions-list; - @extend %t-action2; + @extend %actions-list !optional; + @extend %t-action2 !optional; margin-right: ($baseline/2); .proctoring-configuration-button { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; } } } @@ -487,15 +487,15 @@ // content .subsection-content { - @extend %outline-item-content-shown; + @extend %outline-item-content-shown !optional; } // CASE: is-collapsible &.is-collapsible { - @extend %ui-expand-collapse; + @extend %ui-expand-collapse !optional; .ui-toggle-expansion { - @extend %t-icon4; + @extend %t-icon4 !optional; color: $gray-l3; } @@ -504,7 +504,7 @@ // STATE: is-collapsed &.is-collapsed { .subsection-content { - @extend %outline-item-content-hidden; + @extend %outline-item-content-hidden !optional; } } } @@ -522,7 +522,7 @@ // header .unit-header { - @extend %outline-item-header; + @extend %outline-item-header !optional; } .unit-header-details { @@ -541,8 +541,8 @@ @include text-align(right); .actions-list { - @extend %actions-list; - @extend %t-action2; + @extend %actions-list !optional; + @extend %t-action2 !optional; } } } @@ -552,7 +552,7 @@ margin-top: ($baseline*0.75); .button-new { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; padding: ($baseline/2) $baseline; display: block; @@ -627,7 +627,7 @@ position: relative; .draggable-drop-indicator { - @extend %ui-depth3; + @extend %ui-depth3 !optional; @include transition(opacity $tmg-f2 linear 0s); @include size(100%, auto); @@ -637,7 +637,7 @@ opacity: 0; .fa-caret-right { - @extend %t-icon5; + @extend %t-icon5 !optional; position: absolute; top: -12px; @@ -718,7 +718,7 @@ } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color $tmg-f3 ease-in-out 0s); @@ -733,7 +733,7 @@ input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; @include transition(all $tmg-f2 ease-in-out 0s); @@ -807,7 +807,7 @@ } .outline-subsection .subsection-title { - @extend %t-title8; + @extend %t-title8 !optional; margin-bottom: ($baseline/4); font-weight: 600; @@ -822,13 +822,13 @@ } .outline-unit .unit-title { - @extend %t-title7; + @extend %t-title7 !optional; color: $color-heading-base; } .outline-unit .unit-status { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; text-align: right; } diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index de7c156cd9e9..0bdd1bbe463d 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -16,15 +16,15 @@ } .content-primary { - @extend %ui-window; - @extend .ui-col-wide; + @extend %ui-window !optional; + @extend .ui-col-wide !optional; padding: $baseline ($baseline*1.5); } // messages - should be synced up with global messages in the future .message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; } @@ -34,7 +34,7 @@ box-sizing: border-box; - @extend %t-strong; + @extend %t-strong !optional; display: none; border-bottom: 2px solid $yellow; @@ -75,8 +75,8 @@ .is-not-editable { input, textarea { - @extend %t-copy-lead1; - @extend %t-strong; + @extend %t-copy-lead1 !optional; + @extend %t-strong !optional; box-shadow: none; border: none; @@ -103,7 +103,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; width: flex-grid(5, 9); @@ -127,13 +127,13 @@ } .instructions { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 $baseline 0; } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color $tmg-f2 ease-in-out 0s); @@ -149,7 +149,7 @@ } .message-error { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; margin-top: ($baseline/4); @@ -161,17 +161,17 @@ .remove-item { @include white-button; - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; } .new-button { - @extend %t-action3; + @extend %t-action3 !optional; } // form basics .list-input { - @extend %cont-no-list; + @extend %cont-no-list !optional; .show-data { .heading { @@ -213,7 +213,7 @@ &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -231,8 +231,8 @@ label { @include transition(color $tmg-f2 ease-in-out 0s); - @extend %t-copy-sub1; - @extend %t-strong; + @extend %t-copy-sub1 !optional; + @extend %t-strong !optional; margin: 0 0 ($baseline/4) 0; @@ -243,7 +243,7 @@ input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; @include placeholder($gray-l4); @include size(100%, 100%); @@ -393,7 +393,7 @@ padding: ($baseline/2) 0 0 0; .title { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 ($baseline/10) 0; padding: 0 ($baseline/2); @@ -408,7 +408,7 @@ padding: 0 ($baseline/2) ($baseline/2) ($baseline/2); .link-courseURL { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; box-sizing: border-box; display: block; @@ -431,12 +431,12 @@ background: $gray-l5; .action-primary { - @extend %btn-primary-blue; - @extend %t-action3; - @extend %t-strong; + @extend %btn-primary-blue !optional; + @extend %t-action3 !optional; + @extend %t-strong !optional; .icon { - @extend %t-icon5; + @extend %t-icon5 !optional; display: inline-block; vertical-align: middle; @@ -567,7 +567,7 @@ } .msg { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; margin-top: ($baseline/2); @@ -587,7 +587,7 @@ } .action-upload-image { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; @include float(right); @@ -735,7 +735,7 @@ } .remove-button { - @extend %t-action5; + @extend %t-action5 !optional; display: none; position: absolute; @@ -766,8 +766,8 @@ } .letter-grade { - @extend %t-copy-base; - @extend %t-strong; + @extend %t-copy-base !optional; + @extend %t-strong !optional; display: block; margin: 5px 15px 0 0; @@ -856,7 +856,7 @@ width: flex-grid(9, 9); .new-button { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; } .delete-button { @@ -888,7 +888,7 @@ width: flex-grid(9, 9); .new-button { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; } .delete-button { @@ -971,7 +971,7 @@ } .msg { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; margin-top: ($baseline/2); @@ -991,7 +991,7 @@ } .action-upload-instructor-image { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; float: right; width: flex-grid(2, 9); @@ -1006,7 +1006,7 @@ width: flex-grid(9, 9); .new-button { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; } .delete-button { @@ -1066,7 +1066,7 @@ position: relative; .title { - @extend %t-strong; + @extend %t-strong !optional; margin-top: ($baseline/2); } @@ -1127,7 +1127,7 @@ // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs .CodeMirror { - @extend %t-copy-base; + @extend %t-copy-base !optional; box-sizing: border-box; box-shadow: 0 1px 2px $shadow-l1 inset; @@ -1181,7 +1181,7 @@ } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } .wrapper-modal-window { diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index 4854736342fe..129f2f83dafb 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -15,7 +15,7 @@ margin-right: flex-gutter(); .add-pages { - @extend %no-content; + @extend %no-content !optional; margin: ($baseline*1.5) 0; color: $gray-d1; @@ -26,7 +26,7 @@ box-shadow: none; .copy { - @extend %t-copy-base; + @extend %t-copy-base !optional; opacity: 1; } @@ -135,7 +135,7 @@ } .wrapper-component-editor { - @extend %ui-depth4; + @extend %ui-depth4 !optional; position: relative; background: $lightBluishGrey2; @@ -207,7 +207,7 @@ } .drag-handle { - @extend %ui-depth1; + @extend %ui-depth1 !optional; @include right(0); @@ -305,7 +305,7 @@ background: $white; &.is-fixed { - @extend %ui-disabled; + @extend %ui-disabled !optional; @include transition(opacity $tmg-f2 ease-in-out 0s); @@ -317,11 +317,11 @@ width: 80%; .title { - @extend %t-title4; + @extend %t-title4 !optional; } .title-sub { - @extend %t-title7; + @extend %t-title7 !optional; color: $gray-l2; } @@ -349,7 +349,7 @@ .xblock-student_view { @include transition(background-color $tmg-s3 linear 0s); - @extend %t-title4; + @extend %t-title4 !optional; padding: 20px 20px 22px; background: $white; @@ -365,8 +365,8 @@ box-shadow: 0 1px 2px $shadow-l1; .page-name { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; } .item-actions { @@ -382,7 +382,7 @@ } .static-page-details { - @extend %ui-window; + @extend %ui-window !optional; padding: 32px 40px; @@ -392,7 +392,7 @@ } .page-display-name-input { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; width: 100%; } @@ -402,7 +402,7 @@ @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; width: 100%; height: 360px; diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 47abc978a03e..e48d8e4f5d44 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -8,16 +8,16 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; .no-textbook-content { - @extend %no-content; + @extend %no-content !optional; color: $gray-d1; } .textbook { - @extend %ui-window; + @extend %ui-window !optional; position: relative; @@ -30,8 +30,8 @@ } .textbook-title { - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; @include margin-right($baseline*14); } @@ -39,7 +39,7 @@ .ui-toggle-expansion { @include transition(rotate 0.15s ease-in-out 0.25s); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; width: ($baseline*0.75); @@ -47,7 +47,7 @@ } &.is-selectable { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; &:hover { color: theme-color("primary"); @@ -62,7 +62,7 @@ margin-left: $baseline; .chapter { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; margin-bottom: ($baseline/4); border-bottom: 1px solid $gray-l4; @@ -101,17 +101,17 @@ .view { @include blue-button; - @extend %t-action4; + @extend %t-action4 !optional; } .edit { @include blue-button; - @extend %t-action4; + @extend %t-action4 !optional; } .delete { - @extend %ui-btn-non; + @extend %ui-btn-non !optional; } } } @@ -156,8 +156,8 @@ @include blue-button; @include transition(all 0.15s); - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/5) $baseline; @@ -168,8 +168,8 @@ @include grey-button; @include transition(all 0.15s); - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/5) $baseline; @@ -178,19 +178,19 @@ } .copy { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; margin: ($baseline) 0 ($baseline/2) 0; color: $gray; strong { - @extend %t-strong; + @extend %t-strong !optional; } } .chapters-fields, .textbook-fields { - @extend %cont-no-list; + @extend %cont-no-list !optional; .field { margin: 0 0 ($baseline*0.75) 0; @@ -201,7 +201,7 @@ &.required { label { - @extend %t-strong; + @extend %t-strong !optional; } label::after { @@ -217,7 +217,7 @@ } label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include transition(color, 0.15s, ease-in-out); @@ -229,14 +229,14 @@ } &.add-textbook-name label { - @extend %t-title5; + @extend %t-title5 !optional; } //this section is borrowed from _account.scss - we should clean up and unify later input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; height: 100%; width: 100%; @@ -289,7 +289,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include transition(color, 0.15s, ease-in-out); @@ -333,7 +333,7 @@ } .action-upload { - @extend %ui-btn-flat-outline; + @extend %ui-btn-flat-outline !optional; position: absolute; top: 3px; @@ -345,7 +345,7 @@ .action-close { @include transition(color $tmg-f2 ease-in-out); - @extend %t-action1; + @extend %t-action1 !optional; display: inline-block; float: right; @@ -364,8 +364,8 @@ .action-add-chapter { - @extend %ui-btn-flat-outline; - @extend %t-action1; + @extend %ui-btn-flat-outline !optional; + @extend %t-action1 !optional; display: block; width: 100%; @@ -377,6 +377,6 @@ } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } } diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 96e3129c328a..2fb6d3c9da95 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -40,7 +40,7 @@ } &.editing { - @extend %ui-depth4; + @extend %ui-depth4 !optional; position: relative; padding: 0; @@ -54,15 +54,15 @@ } h1 { - @extend %t-title4; - @extend %t-light; + @extend %t-title4 !optional; + @extend %t-light !optional; float: none; } h2 { - @extend %t-title7; - @extend %t-strong; + @extend %t-title7 !optional; + @extend %t-strong !optional; margin-bottom: 18px; line-height: 30px; @@ -71,8 +71,8 @@ } h3 { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; margin: 34px 0 11px; } @@ -97,7 +97,7 @@ .update-contents { p { - @extend %t-copy-base; + @extend %t-copy-base !optional; line-height: 25px; } @@ -132,7 +132,7 @@ } pre { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin: 1em 0; color: $body-color; @@ -174,8 +174,8 @@ .delete-button { @include white-button(); - @extend %t-action4; - @extend %t-regular; + @extend %t-action4 !optional; + @extend %t-regular !optional; float: left; padding: 3px 10px 4px; @@ -190,7 +190,7 @@ } .course-handouts { - @extend %ui-window; + @extend %ui-window !optional; width: 30%; padding: 20px 30px; @@ -202,8 +202,8 @@ background: $uxpl-light-blue-base; .title { - @extend %t-title4; - @extend %t-light; + @extend %t-title4 !optional; + @extend %t-light !optional; margin-bottom: 24px; } @@ -211,8 +211,8 @@ .edit-button { @include white-button; - @extend %t-action4; - @extend %t-regular; + @extend %t-action4 !optional; + @extend %t-regular !optional; float: right; padding: 3px 10px 4px; @@ -225,7 +225,7 @@ } .handouts-content { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .treeview-handoutsnav li { @@ -234,7 +234,7 @@ } .edit-handouts-form { - @extend %ui-depth4; + @extend %ui-depth4 !optional; @include edit-box; diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index 0f3f587ce76d..3e6e5033212f 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -10,17 +10,17 @@ } .content-primary { - @extend .ui-col-wide; + @extend .ui-col-wide !optional; } .content-supplementary { - @extend .ui-col-narrow; + @extend .ui-col-narrow !optional; } // ELEM: content .content { .introduction { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0 0 ($baseline*2) 0; } @@ -50,7 +50,7 @@ margin-top: 0; .action-primary { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; padding: ($baseline/2) $baseline; } @@ -76,7 +76,7 @@ .user-list { .user-item { - @extend %ui-window; + @extend %ui-window !optional; @include clearfix(); @@ -97,12 +97,12 @@ // ELEM: item - flag .flag-role { - @extend %ui-badge; + @extend %ui-badge !optional; color: $white; .msg-you { - @extend %t-strong; + @extend %t-strong !optional; margin-left: ($baseline/5); text-transform: none; @@ -144,8 +144,8 @@ .user-username { @include transition(color $tmg-f2 ease-in-out 0s); - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; @include margin(0, ($baseline/2), ($baseline/10), 0); @@ -153,7 +153,7 @@ } .user-email { - @extend %t-title6; + @extend %t-title6 !optional; } } @@ -176,8 +176,8 @@ @include blue-button; @include transition(all 0.15s); - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/5) $baseline; @@ -187,15 +187,15 @@ @include grey-button; @include transition(all 0.15s); - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; display: inline-block; padding: ($baseline/5) $baseline; } .notoggleforyou { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray-l2; } @@ -213,7 +213,7 @@ } .delete { - @extend %ui-btn-non; + @extend %ui-btn-non !optional; } // HACK: nasty reset needed due to base.scss diff --git a/cms/static/sass/views/_video-upload.scss b/cms/static/sass/views/_video-upload.scss index aef3803015e1..1a585fe1c406 100644 --- a/cms/static/sass/views/_video-upload.scss +++ b/cms/static/sass/views/_video-upload.scss @@ -6,7 +6,7 @@ .nav-actions { .fa-cloud-upload { - @extend %t-copy; + @extend %t-copy !optional; vertical-align: bottom; @@ -277,8 +277,8 @@ } .button { - @extend %btn-primary-blue; - @extend %sizing; + @extend %btn-primary-blue !optional; + @extend %sizing !optional; .action-button-text { display: inline-block; @@ -351,7 +351,7 @@ margin-bottom: ($baseline*2); .active-video-upload-list { - @extend %cont-no-list; + @extend %cont-no-list !optional; .active-video-upload { display: inline-block; @@ -364,8 +364,8 @@ vertical-align: top; .video-detail-name { - @extend %cont-truncated; - @extend %t-strong; + @extend %cont-truncated !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/2); font-size: 90%; @@ -453,7 +453,7 @@ } .button { - @extend %ui-btn-non; + @extend %ui-btn-non !optional; } .assets-library { @@ -475,7 +475,7 @@ } .actions-list { - @extend %actions-list; + @extend %actions-list !optional; } } diff --git a/cms/static/sass/xmodule/_headings.scss b/cms/static/sass/xmodule/_headings.scss index 07ae25606db4..0b1660549246 100644 --- a/cms/static/sass/xmodule/_headings.scss +++ b/cms/static/sass/xmodule/_headings.scss @@ -96,7 +96,7 @@ $headings-base-color: $gray-d2; .hd-6, .hd-7, .hd-8 { - @extend %reset-headings; + @extend %reset-headings !optional; } @@ -106,12 +106,12 @@ $headings-base-color: $gray-d2; // canned heading classes @for $i from 1 through $headings-count { .hd-#{$i} { - @extend %hd-#{$i}; + @extend %hd-#{$i} !optional; } } h3 { - @extend %hd-2; + @extend %hd-2 !optional; font-weight: $headings-font-weight-normal; // override external modules and xblocks that use inline CSS diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss index f35a16035639..51fc462dab0a 100644 --- a/common/lib/xmodule/xmodule/css/annotatable/display.scss +++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss @@ -60,7 +60,7 @@ $annotatable--body-font-size: em(14); } .annotatable-span { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; display: inline; diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index f5136ef1f9be..08c94f611dfd 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -48,7 +48,7 @@ $asterisk-icon: '\f069'; // .fa-asterisk @mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") { .status-icon { &::after { - @extend %use-font-awesome; + @extend %use-font-awesome !optional; color: $color; font-size: 1.2em; @@ -92,7 +92,7 @@ h2 { } .feedback-hint-incorrect { - @extend %feedback-hint; + @extend %feedback-hint !optional; .icon { color: $incorrect; @@ -101,7 +101,7 @@ h2 { .feedback-hint-partially-correct, .feedback-hint-correct { - @extend %feedback-hint; + @extend %feedback-hint !optional; .icon { color: $correct; @@ -280,7 +280,7 @@ div.problem { // ==================== div.problem { .choicegroup { - @extend %choicegroup-base; + @extend %choicegroup-base !optional; .field { position: relative; @@ -454,7 +454,7 @@ div.problem { margin-bottom: 0; &::before { - @extend %t-strong; + @extend %t-strong !optional; display: inline; content: "Answer: "; @@ -669,7 +669,7 @@ div.problem { } dl dt { - @extend %t-strong; + @extend %t-strong !optional; } @@ -715,7 +715,7 @@ div.problem { } th { - @extend %t-strong; + @extend %t-strong !optional; text-align: left; } @@ -918,7 +918,7 @@ div.problem { resize: none; &.CodeMirror-cursor { - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; visibility: hidden; @@ -1072,7 +1072,7 @@ div.problem { margin: 0; &:first-child { - @extend %t-strong; + @extend %t-strong !optional; margin-bottom: 0; } @@ -1087,7 +1087,7 @@ div.problem { font-weight: normal; &:first-child { - @extend %t-strong; + @extend %t-strong !optional; } } } @@ -1238,7 +1238,7 @@ div.problem { border: 1px solid $gray-l3; h3 { - @extend %t-strong; + @extend %t-strong !optional; padding: 9px; border-bottom: 1px solid #e3e3e3; @@ -1280,7 +1280,7 @@ div.problem { margin-bottom: 12px; h3 { - @extend %t-strong; + @extend %t-strong !optional; color: #aaa; font-style: normal; @@ -1340,7 +1340,7 @@ div.problem { } .shortform { - @extend %t-strong; + @extend %t-strong !optional; } .longform { @@ -1491,7 +1491,7 @@ div.problem { border-radius: 1em; .annotation-header { - @extend %t-strong; + @extend %t-strong !optional; padding: .5em 1em; border-bottom: 1px solid $gray-l3; @@ -1533,7 +1533,7 @@ div.problem { margin: 1em 0 0 0; .tag { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; display: inline-block; margin-left: ($baseline*2); @@ -1578,7 +1578,7 @@ div.problem { pre { background-color: $gray-l3; color: $black; } &::before { - @extend %t-strong; + @extend %t-strong !optional; display: block; content: "debug input value"; @@ -1592,7 +1592,7 @@ div.problem { // ==================== div.problem { .choicetextgroup { - @extend %choicegroup-base; + @extend %choicegroup-base !optional; input[type="text"]{ margin-bottom: 0.5em; diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss index d16c2e74978f..93d16adab01e 100644 --- a/common/lib/xmodule/xmodule/css/html/display.scss +++ b/common/lib/xmodule/xmodule/css/html/display.scss @@ -169,7 +169,7 @@ th { // modal - image zoom, fill window .wrapper-modal-image { .modal-ui-icon { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; position: absolute; display: block; @@ -190,7 +190,7 @@ th { } .image-link { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; position: relative; display: block; @@ -207,8 +207,8 @@ th { } .image-modal { - @extend %ui-fake-link; - @extend %ui-depth5; + @extend %ui-fake-link !optional; + @extend %ui-depth5 !optional; position: fixed; top: 0; diff --git a/common/lib/xmodule/xmodule/css/lti/lti.scss b/common/lib/xmodule/xmodule/css/lti/lti.scss index 88540aee09e9..5d0188af8e00 100644 --- a/common/lib/xmodule/xmodule/css/lti/lti.scss +++ b/common/lib/xmodule/xmodule/css/lti/lti.scss @@ -26,7 +26,7 @@ div.lti { text-align: right; .link_lti_new_window { - @extend .gray-button; + @extend .gray-button !optional; @include font-size(13); @include line-height(14); diff --git a/common/lib/xmodule/xmodule/css/poll/display.scss b/common/lib/xmodule/xmodule/css/poll/display.scss index cf46fcf3bf4d..01a591e0c3b7 100644 --- a/common/lib/xmodule/xmodule/css/poll/display.scss +++ b/common/lib/xmodule/xmodule/css/poll/display.scss @@ -58,7 +58,7 @@ div.poll_question { } .button { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; -webkit-appearance: none; -webkit-background-clip: padding-box; @@ -133,7 +133,7 @@ div.poll_question { } .text { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; display: inline; float: left; diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 6b9fa37e85f8..397ff2ee9516 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -60,7 +60,7 @@ $seq-nav-height: 50px; // ==================== .sequence-nav { - @extend .topbar; + @extend .topbar !optional; margin: 0 auto $baseline; position: relative; @@ -75,7 +75,7 @@ $seq-nav-height: 50px; } .sequence-list-wrapper { - @extend %ui-depth2; + @extend %ui-depth2 !optional; position: relative; height: 100%; @@ -103,8 +103,8 @@ $seq-nav-height: 50px; } button { - @extend %ui-fake-link; - @extend %ui-clear-button; + @extend %ui-fake-link !optional; + @extend %ui-clear-button !optional; width: 100%; height: ($seq-nav-height - 1); @@ -161,7 +161,7 @@ $seq-nav-height: 50px; .sequence-tooltip { @include text-align(left); - @extend %ui-depth2; + @extend %ui-depth2 !optional; margin-top: 12px; background: $seq-nav-tooltip-color; @@ -208,7 +208,7 @@ $seq-nav-height: 50px; } .sequence-nav-button { - @extend %ui-depth3; + @extend %ui-depth3 !optional; display: block; top: 0; diff --git a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss index c9b56604c994..23098cf72f82 100644 --- a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss +++ b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss @@ -22,7 +22,7 @@ $a11y--blue-s1: saturate($blue, 15%); } .a11y-menu-list { - @extend %ui-depth3; + @extend %ui-depth3 !optional; top: 100%; margin: 0; @@ -34,7 +34,7 @@ $a11y--blue-s1: saturate($blue, 15%); border: 1px solid #eee; li { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; margin: 0; padding: 0; @@ -107,7 +107,7 @@ $a11y--blue-s1: saturate($blue, 15%); text-overflow: ellipsis; &::after { - @extend %use-font-awesome; + @extend %use-font-awesome !optional; content: "\f0d7"; position: absolute; @@ -139,7 +139,7 @@ $a11y--blue-s1: saturate($blue, 15%); .contextmenu, .submenu { - @extend %ui-depth5; + @extend %ui-depth5 !optional; border: 1px solid #333; background: $white; @@ -223,7 +223,7 @@ $a11y--blue-s1: saturate($blue, 15%); } .overlay { - @extend %ui-depth4; + @extend %ui-depth4 !optional; position: fixed; top: 0; diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 93a8f2f5a328..5695cf59ed64 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -316,8 +316,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } %video-control { - @extend %t-strong; - @extend %t-title7; + @extend %t-strong !optional; + @extend %t-title7 !optional; display: inline-block; vertical-align: middle; @@ -343,7 +343,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .control { - @extend %video-control; + @extend %video-control !optional; .icon { width: 1em; @@ -387,7 +387,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .ui-slider-handle { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; @include transform-origin(bottom left); @include transition(all 0.7s ease-in-out 0s); @@ -437,8 +437,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .vidtime { - @extend %t-strong; - @extend %t-title7; + @extend %t-strong !optional; + @extend %t-title7 !optional; @include padding-left(lh(0.75)); @@ -481,7 +481,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .menu { @include transition(none); - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; display: none; @@ -498,7 +498,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark list-style: none; li { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; color: rgb(231, 236, 238); // UXPL grayscale-cool x-light @@ -639,7 +639,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark .volume-slider-container { @include transition(none); - @extend %ui-depth1; + @extend %ui-depth1 !optional; display: none; position: absolute; @@ -660,7 +660,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark background: $cool-dark; .ui-slider-handle { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s); @include left(-5px); @@ -763,7 +763,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark list-style: none; li { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; margin-bottom: 8px; border: 0; @@ -832,11 +832,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .subtitles { - @extend .is-hidden; + @extend .is-hidden !optional; } .subtitles.html5 { - @extend %ui-depth0; + @extend %ui-depth0 !optional; background-color: rgba(243, 243, 243, 0.8); height: 100%; @@ -851,7 +851,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } &.video-fullscreen { - @extend %ui-depth4; + @extend %ui-depth4 !optional; background: rgba(#000, 0.95); border: 0; @@ -914,7 +914,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .video-controls { - @extend %ui-depth4; + @extend %ui-depth4 !optional; position: absolute; bottom: 0; @@ -958,7 +958,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark } .video-pre-roll { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: absolute; top: 0; diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss index e02e2510849a..75609043b971 100644 --- a/common/static/sass/_mixins-inherited.scss +++ b/common/static/sass/_mixins-inherited.scss @@ -70,12 +70,12 @@ } .vertical-divider { - @extend .faded-vertical-divider; + @extend .faded-vertical-divider !optional; position: relative; &::after { - @extend .faded-vertical-divider-light; + @extend .faded-vertical-divider-light !optional; content: ""; display: block; @@ -87,12 +87,12 @@ .horizontal-divider { border: none; - @extend .faded-hr-divider; + @extend .faded-hr-divider !optional; position: relative; &::after { - @extend .faded-hr-divider-light; + @extend .faded-hr-divider-light !optional; content: ""; display: block; @@ -134,8 +134,8 @@ @mixin button { @include transition(background-color 0.15s, box-shadow 0.15s); - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent; display: inline-block; @@ -361,7 +361,7 @@ } h5 { - @extend %t-strong; + @extend %t-strong !optional; margin-bottom: 8px; color: $white; diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 7b105b9305ac..64f14cfb525b 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -233,9 +233,9 @@ // primary button %ui-btn-primary { - @extend %ui-btn; - @extend %ui-btn-pill; - @extend %t-strong; + @extend %ui-btn !optional; + @extend %ui-btn-pill !optional; + @extend %t-strong !optional; padding: ($baseline/2) $baseline; border-width: 1px; @@ -264,8 +264,8 @@ // secondary button %ui-btn-secondary { - @extend %ui-btn; - @extend %ui-btn-pill; + @extend %ui-btn !optional; + @extend %ui-btn-pill !optional; border-width: 1px; border-style: solid; @@ -278,8 +278,8 @@ %ui-btn-flat-outline { @include transition(all 0.15s); - @extend %t-strong; - @extend %t-action4; + @extend %t-strong !optional; + @extend %t-action4 !optional; text-align: center; border-radius: ($baseline/4); @@ -308,7 +308,7 @@ %ui-btn-non { @include transition(all 0.15s); - @extend %ui-btn-pill; + @extend %ui-btn-pill !optional; @include transition(all $tmg-f2 linear 0s); @@ -328,7 +328,7 @@ // button with no button shell until hover for understated actions %ui-btn-non-blue { - @extend %ui-btn-non; + @extend %ui-btn-non !optional; &:hover, &:focus { @@ -345,7 +345,7 @@ } %no-content { - @extend %ui-well; + @extend %ui-well !optional; padding: ($baseline*2); background-color: $gray-l4; @@ -354,8 +354,8 @@ .button, .action { - @extend %btn-primary-green; - @extend %t-action3; + @extend %btn-primary-green !optional; + @extend %t-action3 !optional; margin-left: $baseline; @@ -368,8 +368,8 @@ .ui-loading { @include animation(fadeIn $tmg-f2 linear 1); - @extend %ui-well; - @extend %t-copy-base; + @extend %ui-well !optional; + @extend %t-copy-base !optional; opacity: 0.6; background-color: $white; @@ -377,7 +377,7 @@ text-align: center; .spin { - @extend %anim-rotateCW; + @extend %anim-rotateCW !optional; display: inline-block; } diff --git a/common/static/sass/edx-pattern-library-shims/_buttons.scss b/common/static/sass/edx-pattern-library-shims/_buttons.scss index 09278a452c86..f5183052b655 100644 --- a/common/static/sass/edx-pattern-library-shims/_buttons.scss +++ b/common/static/sass/edx-pattern-library-shims/_buttons.scss @@ -31,7 +31,7 @@ // STATE: is disabled &:disabled, &.is-disabled { - @extend %state-disabled; + @extend %state-disabled !optional; } .icon { @@ -45,7 +45,7 @@ } &.btn-small { - @extend %btn-small; + @extend %btn-small !optional; } } @@ -53,7 +53,7 @@ // #DEFAULT // ---------------------------- .btn-default { - @extend %btn-shims; + @extend %btn-shims !optional; border-color: $btn-default-border-color; background: $btn-default-background; @@ -89,7 +89,7 @@ // #PRIMARY // ---------------------------- .btn-primary { - @extend %btn-shims; + @extend %btn-shims !optional; border-color: $btn-brand-border-color; background: $btn-brand-background; @@ -126,7 +126,7 @@ // #UPGRADE // ---------------------------- .btn-upgrade { - @extend %btn-shims; + @extend %btn-shims !optional; border-color: $btn-upgrade-border-color; background: $btn-upgrade-background; @@ -155,5 +155,5 @@ // #BRAND // ---------------------------- .btn-brand { - @extend .btn-primary; + @extend .btn-primary !optional; } diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss index 7784a52c4a5b..05c59a51ee55 100644 --- a/lms/static/certificates/sass/_components.scss +++ b/lms/static/certificates/sass/_components.scss @@ -47,15 +47,15 @@ } .depth-base-focus { - @extend %depth-base-focus; + @extend %depth-base-focus !optional; } .depth-well { - @extend %depth-well; + @extend %depth-well !optional; } .depth-card { - @extend %depth-card; + @extend %depth-card !optional; } // ------------------------------ @@ -74,7 +74,7 @@ // #HEADER APP // ------------------------------ .wrapper-header { - @extend %divider-2; + @extend %divider-2 !optional; border-bottom-color: $gray-x-back; background: $white; @@ -170,7 +170,7 @@ // brief accomplishment .accomplishment-brief { - @extend %depth-card; + @extend %depth-card !optional; .accomplishment-type-symbol, .accomplishment-details { @@ -217,7 +217,7 @@ } .accomplishment-rendering { - @extend %depth-card; + @extend %depth-card !optional; position: relative; top: -(map-get($spacing-vertical, base)); @@ -251,39 +251,39 @@ // statement .accomplishment-statement { - @extend %rendering-section; + @extend %rendering-section !optional; @include text-align(center); } .accomplishment-statement-lead { - @extend .hd-2; + @extend .hd-2 !optional; } .accomplishment-recipient { - @extend %rendering-accomplishment-line; + @extend %rendering-accomplishment-line !optional; } .accomplishment-summary { - @extend %rendering-accomplishment-line; - @extend %copy-lead; + @extend %rendering-accomplishment-line !optional; + @extend %copy-lead !optional; margin-bottom: map-get($spacing-vertical, mid-small); } .accomplishment-course { - @extend %rendering-accomplishment-line; + @extend %rendering-accomplishment-line !optional; font-weight: 600; } .accomplishment-course-description { - @extend %rendering-accomplishment-line; + @extend %rendering-accomplishment-line !optional; } .accomplishment-statement-detail { - @extend %rendering-accomplishment-line; - @extend %copy-lead; + @extend %rendering-accomplishment-line !optional; + @extend %copy-lead !optional; } // organizations @@ -292,12 +292,12 @@ } .accomplishment-orgs-title { - @extend %rendering-hd-section; + @extend %rendering-hd-section !optional; } // signatories .accomplishment-signatories { - @extend %rendering-section; + @extend %rendering-section !optional; .signatory-signature { display: block; @@ -317,7 +317,7 @@ } .signatory-credentials { - @extend %copy-micro; + @extend %copy-micro !optional; margin-top: 0; @@ -330,7 +330,7 @@ } .accomplishment-signatories-title { - @extend %rendering-hd-section; + @extend %rendering-hd-section !optional; } } @@ -340,7 +340,7 @@ .metadata { .label { - @extend %copy-meta; + @extend %copy-meta !optional; margin-bottom: map-get($spacing-vertical, xx-small); padding: 0 rem(8); @@ -353,7 +353,7 @@ } .value { - @extend %copy-base; + @extend %copy-base !optional; font-weight: 600; color: $gray-dark; @@ -369,7 +369,7 @@ } .recipient-img { - @extend %img-cropped; + @extend %img-cropped !optional; width: rem(100); @@ -382,7 +382,7 @@ } .recipient-details { - @extend %copy-base; + @extend %copy-base !optional; font-weight: 600; max-width: calc(100% - (#{rem(100)} + #{map-get($spacing-horizontal, small)} + 5px)); @@ -403,7 +403,7 @@ } .accomplishment-metadata-title { - @extend %hd-subsection; + @extend %hd-subsection !optional; border-bottom-color: $gray-back; } @@ -412,7 +412,7 @@ // #ACCOMPLISHMENT RELATED // ------------------------------ .accomplishment-related-title { - @extend %hd-subsection; + @extend %hd-subsection !optional; } // ------------------------------ @@ -574,7 +574,7 @@ vertical-align: middle; .badges-modal { - @extend %copy-large; + @extend %copy-large !optional; box-sizing: content-box; position: fixed; @@ -604,7 +604,7 @@ display: table; a { - @extend %link; + @extend %link !optional; } } diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss index 35b2ab452156..6da4f1c8d1b9 100644 --- a/lms/static/certificates/sass/_layouts.scss +++ b/lms/static/certificates/sass/_layouts.scss @@ -24,14 +24,14 @@ // app header .wrapper-header { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; padding-top: map-get($spacing-vertical, small); padding-bottom: map-get($spacing-vertical, small); } .header-app { - @extend %layout; + @extend %layout !optional; .logo { display: block; @@ -56,13 +56,13 @@ // banner .wrapper-banner { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; padding-top: map-get($spacing-vertical, small); padding-bottom: map-get($spacing-vertical, small); .banner { - @extend %layout; + @extend %layout !optional; } } @@ -128,15 +128,15 @@ // app footer .wrapper-footer { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; } .footer-app { - @extend %layout; + @extend %layout !optional; } .footer-app-copyright { - @extend %copy-micro; + @extend %copy-micro !optional; @include media-breakpoint-up(md) { @include make-col(6); @@ -154,7 +154,7 @@ .list { .nav-item { - @extend %copy-meta; + @extend %copy-meta !optional; display: block; font-weight: 600; @@ -171,7 +171,7 @@ } .action { - @extend %link; + @extend %link !optional; } } @@ -187,23 +187,23 @@ // ------------------------------ .layout-accomplishment { .wrapper-introduction { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; margin-bottom: map-get($spacing-vertical, large); .introduction { - @extend %layout; + @extend %layout !optional; } } .wrapper-accomplishment-rendering { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; margin-bottom: map-get($spacing-vertical, small); } .accomplishment-rendering { - @extend %layout; + @extend %layout !optional; position: relative; top: -(map-get($spacing-vertical, base)); @@ -310,10 +310,10 @@ } .wrapper-accomplishment-metadata { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; .accomplishment-metadata { - @extend %layout; + @extend %layout !optional; .accomplishment-metadata-title { @include make-col(12); @@ -321,14 +321,14 @@ } .wrapper-metadata { - @extend %layout; + @extend %layout !optional; @include make-container(); padding: 0; .metadata { - @extend %divider-2; + @extend %divider-2 !optional; @include make-col(12); @@ -352,10 +352,10 @@ } .wrapper-accomplishment-related { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; .accomplishment-related { - @extend %layout; + @extend %layout !optional; } .accomplishment-brief { @@ -373,10 +373,10 @@ } .wrapper-about { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; .about { - @extend %layout; + @extend %layout !optional; } .about-item { @@ -393,7 +393,7 @@ } a { - @extend %link; + @extend %link !optional; } .about-edx-title, @@ -406,7 +406,7 @@ .about-copy, .about-edx-copy { - @extend %copy-meta; + @extend %copy-meta !optional; margin: 0 rem(8); diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss index cec4e82a5614..1b14f597fce0 100644 --- a/lms/static/certificates/sass/_print.scss +++ b/lms/static/certificates/sass/_print.scss @@ -69,7 +69,7 @@ // reset body/view properties html, body { - @extend %print-black-on-white; + @extend %print-black-on-white !optional; } body { @@ -106,14 +106,14 @@ .accomplishment-metadata .accomplishment-recipient, .deco-corner, .accomplishment-date .label { - @extend %print-hide; + @extend %print-hide !optional; } // remove layout wrappers' padding .wrapper-introduction, .wrapper-accomplishment-rendering, .wrapper-accomplishment-metadata { - @extend %print-layout-wrapper; + @extend %print-layout-wrapper !optional; } } @@ -186,7 +186,7 @@ // accomplishment .accomplishment-main { - @extend %print-no-background; + @extend %print-no-background !optional; } .accomplishment-rendering { @@ -215,7 +215,7 @@ } .accomplishment-statement { - @extend %print-rendering-section; + @extend %print-rendering-section !optional; @include make-col(8); @@ -249,7 +249,7 @@ } .accomplishment-signatories { - @extend %print-rendering-section; + @extend %print-rendering-section !optional; @include make-col(12); @include margin-right(0); diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss index 4fe83814a294..59e3e0bbc879 100644 --- a/lms/static/certificates/sass/_views.scss +++ b/lms/static/certificates/sass/_views.scss @@ -17,10 +17,10 @@ // #INVALID // ------------------------------ .wrapper-content.status-invalid { - @extend %layout-wrapper; + @extend %layout-wrapper !optional; .wrapper-content-grid { - @extend %layout; + @extend %layout !optional; } .content-main { diff --git a/lms/static/sass/_developer.scss b/lms/static/sass/_developer.scss index 4049474508a5..645a3a80cbc1 100644 --- a/lms/static/sass/_developer.scss +++ b/lms/static/sass/_developer.scss @@ -31,10 +31,10 @@ .ui-loading-base { @include animation(fadeIn $tmg-f2 linear 1); - @extend %t-copy-base; + @extend %t-copy-base !optional; .spin { - @extend %anim-rotateCW; + @extend %anim-rotateCW !optional; display: inline-block; } @@ -45,8 +45,8 @@ } .ui-loading { - @extend .ui-loading-base; - @extend %ui-well; + @extend .ui-loading-base !optional; + @extend %ui-well !optional; opacity: 0.6; background-color: $white; @@ -77,7 +77,7 @@ .product-info, .product-name, .price { - @extend %t-ultrastrong; + @extend %t-ultrastrong !optional; color: $m-blue-d3; } @@ -150,7 +150,7 @@ } .edit-members { - @extend %ui-no-list; + @extend %ui-no-list !optional; .team-member { line-height: $body-line-height; @@ -200,7 +200,7 @@ //copied from cms/static/sass/elements/_system-feedback.scss#L106 //along with some "hide the inherited value, we want none" action .prompt.warning button { - @extend %btn-no-style; + @extend %btn-no-style !optional; box-shadow: none; text-shadow: none; @@ -221,7 +221,7 @@ //copied from cms/static/sass/elements/_system-feedback.scss#L106 //along with some "hide the inherited value, we want none" action .prompt.warning button { - @extend %btn-no-style; + @extend %btn-no-style !optional; box-shadow: none; text-shadow: none; diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index 997e46db5f69..c758ee194196 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -36,8 +36,8 @@ // primary button %m-btn-base { - @extend %m-btn; - @extend %m-btn-edged; + @extend %m-btn !optional; + @extend %m-btn-edged !optional; border: none; padding: ($baseline/2) ($baseline); @@ -60,7 +60,7 @@ // primary button %m-btn-primary { - @extend %m-btn-base; + @extend %m-btn-base !optional; box-shadow: 0 2px 1px 0 $action-primary-shadow; background: $action-primary-bg; @@ -99,7 +99,7 @@ // secondary button %m-btn-secondary { - @extend %m-btn-base; + @extend %m-btn-base !optional; box-shadow: 0 2px 1px 0 $action-secondary-shadow; background: $action-secondary-bg; @@ -201,7 +201,7 @@ footer .references { // modal semantic button resetting - overriding the poorly scoped button mixin styling .close-modal, button.close-modal { - @extend %ui-reset-button; + @extend %ui-reset-button !optional; &:focus { border: none !important; @@ -232,12 +232,12 @@ button.close-modal { } .action-primary { - @extend %t-action4; + @extend %t-action4 !optional; } .action-secondary { - @extend %btn-no-style; - @extend %t-strong; + @extend %btn-no-style !optional; + @extend %t-strong !optional; box-shadow: none; text-shadow: none; diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 4cfee159fb30..c7f4b4dacf5f 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -122,7 +122,7 @@ a:visited:not(.btn) { &:disabled, &.is-disabled, &.disabled { - @extend %ui-disabled; + @extend %ui-disabled !optional; opacity: 0.5; cursor: not-allowed; @@ -245,7 +245,7 @@ mark { // UI - disabled state .is-disabled { - @extend %ui-disabled; + @extend %ui-disabled !optional; } // UI - is hidden @@ -255,20 +255,20 @@ mark { // UI - is deprecated .is-deprecated { - @extend %ui-deprecated; + @extend %ui-deprecated !optional; } // UI - semantically hide text .sr, .sr-only { - @extend %text-sr; - @extend %a11y-ensure-contrast; + @extend %text-sr !optional; + @extend %a11y-ensure-contrast !optional; } // UI - skipnav .nav-skip, .transcript-skip { - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; display: inline-block; position: absolute; diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index 43317328de52..8f6a41885152 100644 --- a/lms/static/sass/base/_extends.scss +++ b/lms/static/sass/base/_extends.scss @@ -35,12 +35,12 @@ } %vertical-divider { - @extend %faded-vertical-divider; + @extend %faded-vertical-divider !optional; position: relative; &::after { - @extend %faded-vertical-divider-light; + @extend %faded-vertical-divider-light !optional; content: ""; display: block; @@ -52,12 +52,12 @@ %horizontal-divider { border: none; - @extend %faded-hr-divider; + @extend %faded-hr-divider !optional; position: relative; &::after { - @extend %faded-hr-divider-light; + @extend %faded-hr-divider-light !optional; content: ""; display: block; @@ -141,7 +141,7 @@ } %ui-deprecated { - @extend %t-weight4; + @extend %t-weight4 !optional; background: tint($warning-color, 85%); padding: ($baseline/5) ($baseline/2); diff --git a/lms/static/sass/base/_headings.scss b/lms/static/sass/base/_headings.scss index 52668327cf98..492d8ae28681 100644 --- a/lms/static/sass/base/_headings.scss +++ b/lms/static/sass/base/_headings.scss @@ -95,7 +95,7 @@ $headings-base-color: $gray-d2; .hd-6, .hd-7, .hd-8 { - @extend %reset-headings; + @extend %reset-headings !optional; } @@ -105,7 +105,7 @@ $headings-base-color: $gray-d2; // canned heading classes @for $i from 1 through $headings-count { .hd-#{$i} { - @extend %hd-#{$i}; + @extend %hd-#{$i} !optional; } } @@ -113,7 +113,7 @@ $headings-base-color: $gray-d2; .xblock .xblock { h2 { - @extend %hd-2; + @extend %hd-2 !optional; font-weight: $headings-font-weight-bold; // override external modules and xblocks that use inline CSS diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index a88f7654b12e..4da98b2ace90 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -215,7 +215,7 @@ } %shame-link-text { - @extend %shame-link-base; + @extend %shame-link-base !optional; &:hover, &:focus { diff --git a/lms/static/sass/base/_utilities.scss b/lms/static/sass/base/_utilities.scss index dab066b7ed72..bd89f95f543b 100644 --- a/lms/static/sass/base/_utilities.scss +++ b/lms/static/sass/base/_utilities.scss @@ -8,5 +8,5 @@ .sr-is-focusable, .sr-is-focusable:focus, .sr-is-focusable:active { - @extend %no-outline; + @extend %no-outline !optional; } diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss index 4a675a07365e..5531b5bb5f47 100644 --- a/lms/static/sass/bootstrap/_layouts.scss +++ b/lms/static/sass/bootstrap/_layouts.scss @@ -43,7 +43,7 @@ &.container-fluid { max-width: map-get($container-max-widths, xl); - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } } diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss index 489452e0e4cf..62518925b541 100644 --- a/lms/static/sass/bootstrap/_legacy.scss +++ b/lms/static/sass/bootstrap/_legacy.scss @@ -22,7 +22,7 @@ // Support .sr as a synonym for .sr-only .sr { - @extend .sr-only; + @extend .sr-only !optional; } // ---------------------------- diff --git a/lms/static/sass/bootstrap/elements/_pagination.scss b/lms/static/sass/bootstrap/elements/_pagination.scss index 30cc9782bfd7..0422e497edb7 100644 --- a/lms/static/sass/bootstrap/elements/_pagination.scss +++ b/lms/static/sass/bootstrap/elements/_pagination.scss @@ -52,7 +52,7 @@ } .nav-label { - @extend .sr-only; + @extend .sr-only !optional; } .pagination-form, @@ -90,7 +90,7 @@ .page-number-label, .submit-pagination-form { - @extend .sr-only; + @extend .sr-only !optional; } .page-number-input { diff --git a/lms/static/sass/course/_auto-cert.scss b/lms/static/sass/course/_auto-cert.scss index fe549e32124e..a04ff2eaeaf4 100644 --- a/lms/static/sass/course/_auto-cert.scss +++ b/lms/static/sass/course/_auto-cert.scss @@ -22,14 +22,14 @@ } .msg-actions { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: inline-block; width: flex-grid(3, 12); .btn { - @extend %btn-primary-blue; - @extend %t-weight4; + @extend %btn-primary-blue !optional; + @extend %t-weight4 !optional; text-shadow: none; } diff --git a/lms/static/sass/course/_dates.scss b/lms/static/sass/course/_dates.scss index 9fa6b3753f88..c2b55c3a691e 100644 --- a/lms/static/sass/course/_dates.scss +++ b/lms/static/sass/course/_dates.scss @@ -1,5 +1,5 @@ .date-wrapper { - @extend .content; + @extend .content !optional; font-family: $helvetica; diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index 86baef306830..491305519139 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -12,7 +12,7 @@ $table-border-color: #c8c8c8; div.gradebook-wrapper { section.gradebook-content { - @extend .content; + @extend .content !optional; display: block; width: 100%; @@ -101,7 +101,7 @@ div.gradebook-wrapper { .left-shadow, .right-shadow { - @extend %ui-depth4; + @extend %ui-depth4 !optional; position: absolute; top: 0; @@ -216,7 +216,7 @@ div.gradebook-wrapper { } h1 { - @extend .top-header; + @extend .top-header !optional; } } diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index b1331985c61b..00db2454a052 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -39,7 +39,7 @@ $notification-background: rgb(255, 255, 255) !default; border-radius: 2px; .last-accessed-link { - @extend %t-title6; + @extend %t-title6 !optional; color: $very-light-text; } @@ -50,7 +50,7 @@ div.info-wrapper { background-color: $homepage-background; section.updates { - @extend .content; + @extend .content !optional; @include padding-left($baseline); @@ -80,7 +80,7 @@ div.info-wrapper { } .show-older-updates { - @extend %btn-pl-white-base; + @extend %btn-pl-white-base !optional; padding: ($baseline/2); @@ -102,7 +102,7 @@ div.info-wrapper { > li, article { - @extend .clearfix; + @extend .clearfix !optional; padding: $baseline; list-style-type: none; @@ -118,7 +118,7 @@ div.info-wrapper { } .date { - @extend %t-title9; + @extend %t-title9 !optional; margin-bottom: ($baseline/4); text-transform: none; @@ -130,7 +130,7 @@ div.info-wrapper { .toggle-visibility-button { - @extend %t-title9; + @extend %t-title9 !optional; @include float(right); @@ -193,7 +193,7 @@ div.info-wrapper { padding: 20px 30px; margin: 0; - @extend .sidebar; + @extend .sidebar !optional; background: rgba(0, 0, 0, 0); box-shadow: none; @@ -222,8 +222,8 @@ div.info-wrapper { .handouts-header { @include text-align(left); - @extend %t-strong; - @extend %t-title6; + @extend %t-strong !optional; + @extend %t-title6 !optional; margin-bottom: 0; padding: 12px 26px 10px 0; diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index 76fece68f72a..cb44ee05174c 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -2,7 +2,7 @@ color: $black; .user-info { - @extend .sidebar; + @extend .sidebar !optional; border-left: 1px solid #d3d3d3; border-radius: 0 4px 4px 0; @@ -14,7 +14,7 @@ } header { - @extend .bottom-border; + @extend .bottom-border !optional; margin: 0; padding: lh(0.5); @@ -26,7 +26,7 @@ } ul { - @extend %ui-no-list; + @extend %ui-no-list !optional; li { border-bottom: 1px solid #d3d3d3; @@ -130,10 +130,10 @@ } .course-info { - @extend .content; + @extend .content !optional; header { - @extend .clearfix; + @extend .clearfix !optional; @extend h1.top-header; margin-bottom: lh(); @@ -238,13 +238,13 @@ display: inline-block; .fa-times { - @extend %t-icon6; + @extend %t-icon6 !optional; color: $alert-color; } .fa-check { - @extend %t-icon6; + @extend %t-icon6 !optional; color: theme-color("success"); } @@ -264,7 +264,7 @@ padding-left: 0; > section { - @extend .clearfix; + @extend .clearfix !optional; border-bottom: 1px solid #e3e3e3; display: table; diff --git a/lms/static/sass/course/_student-notes.scss b/lms/static/sass/course/_student-notes.scss index 4cc3fe1f4009..60db372babee 100644 --- a/lms/static/sass/course/_student-notes.scss +++ b/lms/static/sass/course/_student-notes.scss @@ -27,7 +27,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; %notes-tab-control { @include transition(none); - @extend %shame-link-base; + @extend %shame-link-base !optional; display: inline-block; vertical-align: middle; @@ -46,7 +46,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .student-notes { @include clearfix(); - @extend .content; // needed extend carried over from course handouts UI, but should be cleaned up + @extend .content !optional; + // needed extend carried over from course handouts UI, but should be cleaned up width: 100%; } @@ -65,14 +66,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; width: flex-grid(7, 12); .page-title { - @extend %t-title4; - @extend %t-weight1; + @extend %t-title4 !optional; + @extend %t-weight1 !optional; margin-bottom: 0; .page-subtitle { - @extend %t-title7; - @extend %t-weight2; + @extend %t-title7 !optional; + @extend %t-weight2 !optional; display: block; margin-top: ($baseline/4); @@ -97,7 +98,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .search-notes-input { - @extend %t-demi-strong; + @extend %t-demi-strong !optional; position: relative; @@ -109,8 +110,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .search-notes-submit { - @extend %btn-inherited-primary; - @extend %t-action2; + @extend %btn-inherited-primary !optional; + @extend %t-action2 !optional; padding: 8px $baseline 9px $baseline; // manually syncing up height with search input } @@ -126,16 +127,16 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // course structure labels .course-title, .tags-title { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; margin: 0 0 ($baseline/2) 0; color: $gray-d3; } .course-subtitle { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; margin: 0 0 ($baseline/4) 0; border-bottom: $divider-visual-tertiary; @@ -172,14 +173,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .note-excerpt-p, .note-excerpt-ul, .note-excerpt-ol { - @extend %t-copy-base; + @extend %t-copy-base !optional; } } .note-excerpt-more-link { - @extend %t-copy-sub1; - @extend %t-weight2; - @extend %shame-link-text; + @extend %t-copy-sub1 !optional; + @extend %t-weight2 !optional; + @extend %shame-link-text !optional; display: inline; @@ -197,7 +198,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // note - comment made on highlighted content .note-comments { - @extend %ui-no-list; + @extend %ui-no-list !optional; border-top: ($baseline/5) solid $student-notes-highlight-color-focus; @@ -208,7 +209,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; color: $gray; .note-comment-title { - @extend %t-title8; + @extend %t-title8 !optional; letter-spacing: ($baseline/20); margin: 0 0 ($baseline/4) 0; @@ -218,8 +219,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .note-comment-p, .note-comment-ul, .note-comment-ol { - @extend %t-copy-sub1; - @extend %t-weight2; + @extend %t-copy-sub1 !optional; + @extend %t-weight2 !optional; padding: 0; margin: 0; @@ -246,7 +247,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // note reference .reference { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline-block; width: flex-grid(3, 12); @@ -257,8 +258,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; color: $gray-l2; .reference-title { - @extend %t-title8; - @extend %t-weight3; + @extend %t-title8 !optional; + @extend %t-weight3 !optional; margin-top: ($baseline/2); letter-spacing: ($baseline/20); @@ -271,7 +272,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .reference-meta { - @extend %t-weight2; + @extend %t-weight2 !optional; color: $m-gray-d2; } @@ -297,7 +298,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // needed for poor base LMS styling scope a.reference-meta { - @extend %shame-link-text; + @extend %shame-link-text !optional; } } } @@ -327,7 +328,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .tab-panel, .inline-error, .ui-loading { - @extend %no-outline; + @extend %no-outline !optional; border-top: $divider-visual-primary; @@ -364,7 +365,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .tabs-label { - @extend %hd-lv5; + @extend %hd-lv5 !optional; margin-bottom: 0; padding: ($baseline*0.75) 0; @@ -378,7 +379,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .tabs { @include clearfix(); - @extend %ui-no-list; + @extend %ui-no-list !optional; position: relative; bottom: -($baseline/4); @@ -389,7 +390,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; display: inline; .tab-label { - @extend %notes-tab-control; + @extend %notes-tab-control !optional; padding: ($baseline/2) ($baseline*0.75); text-align: center; @@ -414,7 +415,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // CASE: tab-label can be closed .action-close { - @extend %notes-tab-control; + @extend %notes-tab-control !optional; position: relative; @@ -431,7 +432,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // NOTE: not a lot of elements/classes to reference in this DOM #no-results-panel { p { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; margin: ($baseline*1.5) 0; } @@ -456,7 +457,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .placeholder-title { - @extend %hd-lv3; + @extend %hd-lv3 !optional; margin-bottom: $baseline; text-transform: none; // reset needed for poor h2 element styling @@ -464,13 +465,13 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .placeholder-copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; ul { - @extend %ui-no-list; + @extend %ui-no-list !optional; li { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; display: block; margin-bottom: ($baseline/2); @@ -484,10 +485,10 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } .placeholder-cta-copy { - @extend %t-strong; + @extend %t-strong !optional; a { - @extend %t-strong; + @extend %t-strong !optional; } } } diff --git a/lms/static/sass/course/_syllabus.scss b/lms/static/sass/course/_syllabus.scss index 4fb063b83bc2..247ba75dbb3c 100644 --- a/lms/static/sass/course/_syllabus.scss +++ b/lms/static/sass/course/_syllabus.scss @@ -3,7 +3,7 @@ div.syllabus { text-align: center; h1 { - @extend .top-header; + @extend .top-header !optional; } .notes { diff --git a/lms/static/sass/course/_tabs.scss b/lms/static/sass/course/_tabs.scss index 4e58e2a6739a..b3c8a48e7d4a 100644 --- a/lms/static/sass/course/_tabs.scss +++ b/lms/static/sass/course/_tabs.scss @@ -3,7 +3,7 @@ div.static_tab_wrapper { padding: 2em 2.5em; h1 { - @extend .top-header; + @extend .top-header !optional; } section { diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index 888db22b25eb..50a7336ec596 100755 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -17,8 +17,8 @@ div.book-wrapper { } section.book-sidebar { - @extend .sidebar; - @extend .tran; + @extend .sidebar !optional; + @extend .tran !optional; box-sizing: border-box; padding: ($baseline/2) 0; @@ -100,22 +100,22 @@ div.book-wrapper { } .book { - @extend .content; + @extend .content !optional; padding: 0; width: 76%; nav { - @extend .clearfix; + @extend .clearfix !optional; a { - @extend .block-link; + @extend .block-link !optional; padding: 0 lh(); } ul { - @extend .clearfix; + @extend .clearfix !optional; li { position: absolute; diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index e04763c4e9b5..875cc8d3d17a 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -28,7 +28,7 @@ background: $container-bg; box-shadow: 0 1px 2px $shadow-l2; - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } } @@ -136,10 +136,10 @@ input[type="submit"], input[type="button"], button, .button { - @extend .gray-button; + @extend .gray-button !optional; form & { - @extend .gray-button; + @extend .gray-button !optional; } } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index b1f3f96c3b6e..eaf6717eef54 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -34,7 +34,7 @@ a.light-button, // only used in askbot as classes .gray-button { @include simple($gray-l5); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); } @@ -42,7 +42,7 @@ a.light-button, // only used in askbot as classes .blue-button { @include simple($blue); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); } @@ -50,7 +50,7 @@ a.light-button, // only used in askbot as classes .pink-button { @include simple($pink); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); } @@ -176,7 +176,7 @@ a.light-button, // only used in askbot as classes } .topbar { - @extend .clearfix; + @extend .clearfix !optional; border-bottom: 1px solid $border-color; diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss index ac14587ed270..c04abcb61e24 100644 --- a/lms/static/sass/course/courseware/_amplifier.scss +++ b/lms/static/sass/course/courseware/_amplifier.scss @@ -1,6 +1,6 @@ // JM MOSFET AMPLIFIER section.tool-wrapper { - @extend .clearfix; + @extend .clearfix !optional; background: #073642; border-bottom: 1px solid darken(#002b36, 10%); @@ -74,7 +74,7 @@ section.tool-wrapper { } div#controlls-container { - @extend .clearfix; + @extend .clearfix !optional; background: darken(#073642, 2%); border-right: 1px solid darken(#002b36, 6%); @@ -87,7 +87,7 @@ section.tool-wrapper { div.graph-controls { div.music-wrapper { - @extend .clearfix; + @extend .clearfix !optional; border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); @@ -121,7 +121,7 @@ section.tool-wrapper { } div.inputs-wrapper { - @extend .clearfix; + @extend .clearfix !optional; border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); @@ -203,7 +203,7 @@ section.tool-wrapper { div.schematic-sliders { div.top-sliders { - @extend .clearfix; + @extend .clearfix !optional; border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index de9df3eb3d35..76af843ae2aa 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -16,7 +16,7 @@ html.video-fullscreen { } .wrap-instructor-info { - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; margin: ($baseline/2) ($baseline/4) 0 0; display: none; @@ -31,7 +31,7 @@ html.video-fullscreen { } .instructor-info-action { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include float(right); @include margin-left($baseline/2); @@ -43,7 +43,7 @@ html.video-fullscreen { color: $staff-color; text-transform: uppercase; - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; &:hover { background-color: $staff-color; @@ -68,7 +68,7 @@ html.video-fullscreen { .xblock-license { @include text-align(right); - @extend %t-title7; + @extend %t-title7 !optional; display: block; width: auto; @@ -129,7 +129,7 @@ html.video-fullscreen { .course-content, .courseware-results-wrapper { - @extend .content; + @extend .content !optional; line-height: 1.6; @@ -194,7 +194,7 @@ html.video-fullscreen { @include text-align(left); - @extend %t-copy-base; + @extend %t-copy-base !optional; width: 100%; @@ -236,7 +236,7 @@ html.video-fullscreen { } .exam-action-button { - @extend %t-weight4; + @extend %t-weight4 !optional; @include margin-right($baseline); @@ -245,7 +245,7 @@ html.video-fullscreen { text-shadow: none; &.btn-pl-primary { - @extend %btn-pl-primary-base; + @extend %btn-pl-primary-base !optional; border: 0; @@ -305,7 +305,7 @@ html.video-fullscreen { } div.proctored-exam { - @extend .timed-exam; + @extend .timed-exam !optional; .proctored-exam-message { border-top: ($baseline/10) solid $uxpl-gray-background; @@ -389,15 +389,15 @@ html.video-fullscreen { background-color: rgb(242, 244, 245); .msg-title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; } .msg-content { color: $gray-l1; strong { - @extend %t-strong; + @extend %t-strong !optional; } } @@ -467,7 +467,7 @@ html.video-fullscreen { } .faq-proctoring-exam { - @extend .footer-sequence; + @extend .footer-sequence !optional; border-bottom: none; @@ -497,7 +497,7 @@ html.video-fullscreen { } .path { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-top: -($baseline); margin-bottom: $baseline; @@ -630,7 +630,7 @@ html.video-fullscreen { } .vert { - @extend .clearfix; + @extend .clearfix !optional; border-bottom: 1px solid #ddd; margin-bottom: ($baseline*0.75); diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index b0c948933482..39dffd085651 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -14,12 +14,12 @@ // reseting bolded fonts for the course index .group-heading { - @extend %t-regular; + @extend %t-regular !optional; } // we're targetting the .class now, instead of the #id .accordion { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; .course-navigation { .button-chapter { @@ -41,7 +41,7 @@ -webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue .group-heading { - @extend %t-title6; + @extend %t-title6 !optional; position: relative; display: block; @@ -67,7 +67,7 @@ &.active { .group-heading { - @extend %t-strong; + @extend %t-strong !optional; color: $body-color; } @@ -96,14 +96,14 @@ overflow: hidden; .menu-item { - @extend %t-strong; + @extend %t-strong !optional; margin: ($baseline/5) 0; background: inherit; a { - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; position: relative; display: block; @@ -116,8 +116,8 @@ p { &.subtitle { - @extend %t-action4; - @extend %t-regular; + @extend %t-action4 !optional; + @extend %t-regular !optional; display: block; margin: 0; @@ -170,7 +170,7 @@ &.active { a { - @extend %t-ultrastrong; + @extend %t-ultrastrong !optional; background: $gray-l4; } @@ -185,5 +185,5 @@ } } - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index c57e53a1b701..882588925d47 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -1,7 +1,7 @@ @mixin idashbutton ($color) { @include button(simple, $color); - @extend .button-reset; + @extend .button-reset !optional; margin-bottom: 1em; padding: 8px 17px; @@ -146,7 +146,7 @@ } .btn-blue { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; margin-bottom: 0; padding: ($baseline/2.5) ($baseline/2); @@ -221,7 +221,7 @@ // instructor dashboard 2 // ==================== .instructor-dashboard-content-2 { - @extend .content; + @extend .content !optional; display: block; // override the table-cell display set in .content width: 100%; @@ -263,7 +263,7 @@ } .instructor-dashboard-title { - @extend .top-header; + @extend .top-header !optional; display: inline-block; margin-bottom: ($baseline*0.75); @@ -285,12 +285,12 @@ } .instructor-nav { - @extend %ui-no-list; + @extend %ui-no-list !optional; border-bottom: 1px solid $gray-l3; .nav-item { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: inline-block; @@ -353,14 +353,14 @@ } .message-title { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/4); } .message-copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .message-actions { @@ -444,7 +444,7 @@ } .description { - @extend %t-title7; + @extend %t-title7 !optional; @include float(right); @include text-align(right); @@ -456,8 +456,8 @@ } .subsection-title { - @extend %hd-lv5; - @extend %t-weight4; + @extend %hd-lv5 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/2); } @@ -672,7 +672,7 @@ } .batch-enrollment-ccx { - @extend .batch-enrollment; + @extend .batch-enrollment !optional; float: left; width: 100%; @@ -693,7 +693,7 @@ position: relative; .hint { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; position: absolute; @@ -777,7 +777,7 @@ .label, .form-label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $lighter-base-font-color; } @@ -808,7 +808,7 @@ th, td { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; vertical-align: middle; padding: ($baseline/2) ($baseline/4); @@ -857,7 +857,7 @@ } .member-lists-management-ccx { - @extend .member-lists-management; + @extend .member-lists-management !optional; float: left; width: 100%; @@ -881,14 +881,14 @@ .label, .form-label { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/2); } .tip { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-top: ($baseline/4); color: $gray-l2; @@ -926,7 +926,7 @@ } .form-cancel { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } @@ -957,7 +957,7 @@ .action-create { @include idashbutton($primary); - @extend %t-weight4; + @extend %t-weight4 !optional; @include float(right); @include text-align(right); @@ -988,13 +988,13 @@ // create or edit cohort .cohort-management-settings, .cohort-management-edit { - @extend %cohort-management-form; + @extend %cohort-management-form !optional; margin-bottom: $baseline; .form-title { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; padding: $baseline; background: $gray-l5; @@ -1050,15 +1050,15 @@ } .title-value { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; @include margin-right($baseline/4); } .group-count { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; } .action-edit-name { @@ -1078,7 +1078,7 @@ .cohort-management-group-setup { @include clearfix(); - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray-l2; @@ -1098,17 +1098,17 @@ } .cohort-management-group-add { - @extend %cohort-management-form; + @extend %cohort-management-form !optional; border: 1px solid $gray-l5; .message-title { - @extend %t-title7; + @extend %t-title7 !optional; } .form-title { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/4); padding: 0; @@ -1117,7 +1117,7 @@ } .form-introduction { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-bottom: $baseline; @@ -1145,7 +1145,7 @@ // cohort the discussion topics. .toggle-cohort-management-secondary, .toggle-cohort-management-discussions { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background: transparent; border: none; @@ -1162,11 +1162,11 @@ .cohort-management-file-upload { .message-title { - @extend %t-title7; + @extend %t-title7 !optional; } .form-introduction { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-bottom: $baseline; @@ -1177,7 +1177,7 @@ } .file-upload-form { - @extend %cohort-management-form; + @extend %cohort-management-form !optional; .form-fields { margin-bottom: $baseline; @@ -1195,7 +1195,7 @@ } .cohort-management-supplemental { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-top: $baseline; padding: ($baseline/2) $baseline; @@ -1289,7 +1289,7 @@ } .cohort-details-name { - @extend %t-action1; + @extend %t-action1 !optional; display: block; width: 100%; @@ -1310,8 +1310,8 @@ } .wrapper-tabs { // This applies to the tab-like interface that toggles between the student management and the group settings - @extend %ui-no-list; - @extend %ui-depth1; + @extend %ui-no-list !optional; + @extend %ui-depth1 !optional; position: relative; top: 1px; @@ -1413,7 +1413,7 @@ } .discussions-management-supplemental { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-top: $baseline; padding: ($baseline/2) $baseline; @@ -1452,7 +1452,7 @@ } .discussions-wrapper { - @extend %ui-no-list; + @extend %ui-no-list !optional; padding: 0 ($baseline/2); @@ -1463,8 +1463,8 @@ } .wrapper-tabs { - @extend %ui-no-list; - @extend %ui-depth1; + @extend %ui-no-list !optional; + @extend %ui-depth1 !optional; position: relative; top: 1px; @@ -1904,7 +1904,7 @@ input[name="subject"] { .add { @include button(simple, $primary); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); @@ -2156,7 +2156,7 @@ input[name="subject"] { input[type="button"]#lookup_regcode { @include button(simple, $primary); - @extend .button-reset; + @extend .button-reset !optional; display: block; height: auto; @@ -2168,7 +2168,7 @@ input[name="subject"] { input[name="generate-registration-codes-csv"] { @include button(simple, $primary); - @extend .button-reset; + @extend .button-reset !optional; } .modal-form-error { @@ -2519,7 +2519,7 @@ input[name="subject"] { .add { @include button(simple, $primary); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); @@ -2547,7 +2547,7 @@ input[name="subject"] { .add { @include button(simple, $primary); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); } @@ -2579,7 +2579,7 @@ input[name="subject"] { .add { @include button(simple, $primary); - @extend .button-reset; + @extend .button-reset !optional; font-size: em(13); } @@ -2612,7 +2612,7 @@ input[name="subject"] { } th { - @extend %t-action2; + @extend %t-action2 !optional; text-align: left; border-bottom: 1px solid $border-color-1; @@ -2853,7 +2853,7 @@ input[name="subject"] { .certificates-wrapper { .message { - @extend %exception-message; + @extend %exception-message !optional; } } @@ -2912,7 +2912,7 @@ input[name="subject"] { } .message { - @extend %exception-message; + @extend %exception-message !optional; } } } @@ -2928,7 +2928,7 @@ input[name="subject"] { word-wrap: break-word; th { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; background-color: $gray-l5; padding: ($baseline*0.75) ($baseline/2) ($baseline*0.75) ($baseline/2); @@ -2993,7 +2993,7 @@ input[name="subject"] { } .message { - @extend %exception-message; + @extend %exception-message !optional; } } diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 5c04f2388d74..d940de5821d6 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -3,7 +3,7 @@ box-sizing: border-box; - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; border-bottom: none; margin: 0 auto; @@ -11,7 +11,7 @@ width: 100%; .course-material { - @extend %inner-wrapper; + @extend %inner-wrapper !optional; @include media-breakpoint-down(md) { overflow-x: scroll; @@ -46,8 +46,8 @@ a:visited { @include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75)); - @extend %t-title7; - @extend %t-regular; + @extend %t-title7 !optional; + @extend %t-regular !optional; color: theme-color("dark"); display: block; diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss index 53bfa3717543..3003608eab77 100644 --- a/lms/static/sass/course/layout/_courseware_preview.scss +++ b/lms/static/sass/course/layout/_courseware_preview.scss @@ -13,7 +13,7 @@ $proctoring-banner-text-size: 14px; } .preview-menu { - @extend %inner-wrapper; + @extend %inner-wrapper !optional; width: auto; @@ -64,7 +64,7 @@ $proctoring-banner-text-size: 14px; .proctored_exam_status { // STATE: Fixed to viewport (used for scrolling) &.is-fixed { - @extend %ui-depth4; + @extend %ui-depth4 !optional; box-shadow: 0 3px 3px $shadow-d1; position: fixed; @@ -169,9 +169,9 @@ $proctoring-banner-text-size: 14px; } .exam-button-turn-in-exam { - @extend %btn-pl-primary-base; - @extend %t-action3; - @extend %t-weight4; + @extend %btn-pl-primary-base !optional; + @extend %t-action3 !optional; + @extend %t-weight4 !optional; margin-right: $baseline; border: 0; @@ -193,7 +193,7 @@ $proctoring-banner-text-size: 14px; border-radius: 3px; #toggle_timer { - @extend .exam-button-turn-in-exam; + @extend .exam-button-turn-in-exam !optional; padding: ($baseline/5) ($baseline/3); border-bottom-left-radius: 0; diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss index 000180afcc28..177066d70b59 100644 --- a/lms/static/sass/course/modules/_calculator.scss +++ b/lms/static/sass/course/modules/_calculator.scss @@ -2,7 +2,7 @@ // ==================== .calc-main { - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; bottom: -129px; left: 0; @@ -66,7 +66,7 @@ } form { - @extend .clearfix; + @extend .clearfix !optional; box-sizing: border-box; padding: lh(); @@ -126,7 +126,7 @@ } .input-wrapper { - @extend .clearfix; + @extend .clearfix !optional; float: left; margin: 0; diff --git a/lms/static/sass/course/modules/_student-notes.scss b/lms/static/sass/course/modules/_student-notes.scss index d54a1de7073f..97597bbea34f 100644 --- a/lms/static/sass/course/modules/_student-notes.scss +++ b/lms/static/sass/course/modules/_student-notes.scss @@ -68,8 +68,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // -------------------- .edx-notes-visibility { .edx-notes-visibility-error { - @extend %t-copy-sub2; - @extend %text-truncated; + @extend %t-copy-sub2 !optional; + @extend %text-truncated !optional; position: relative; bottom: -($baseline/20); // needed to sync up with current rogue/more complex calc utility alignment @@ -100,8 +100,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // CASE: annotator error in toggling notes (vendor customization) .annotator-notice { - @extend %t-weight4; - @extend %t-copy-sub1; + @extend %t-weight4 !optional; + @extend %t-copy-sub1 !optional; padding: ($baseline/4) $baseline; background: $black-t3; @@ -110,8 +110,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // CASE: annotator error in toggling notes // vendor customization .annotator-notice { - @extend %t-weight4; - @extend %t-copy-sub1; + @extend %t-weight4 !optional; + @extend %t-copy-sub1 !optional; padding: ($baseline/2) $baseline; background: $gray-d4; @@ -130,13 +130,13 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // +individual note (in context) // -------------------- .annotator-outer { - @extend %ui-depth4; - @extend %notes-reset-font; + @extend %ui-depth4 !optional; + @extend %notes-reset-font !optional; } // bubble .annotator-widget.annotator-widget { - @extend %notes-bubble; + @extend %notes-bubble !optional; } .annotator-listing { @@ -145,7 +145,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota .annotator-widget { &::after { - @extend %bubble; + @extend %bubble !optional; } } } @@ -153,7 +153,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota .annotator-editor { .annotator-widget { &::after { - @extend %bubble; + @extend %bubble !optional; background: $gray-l5; } @@ -169,18 +169,18 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // -------------------- // adding .annotator-adder { - @extend %notes-reset-background; - @extend %ui-depth4; + @extend %notes-reset-background !optional; + @extend %ui-depth4 !optional; button { - @extend %notes-bubble; + @extend %notes-bubble !optional; position: relative; display: block; &::after { - @extend %notes-reset-icon; - @extend %shame-link-base; + @extend %notes-reset-icon !optional; + @extend %shame-link-base !optional; @include font-size(30); @@ -194,7 +194,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // using annotatorJS triangle styling for adder &::before { - @extend %bubble; + @extend %bubble !optional; @include left(10px); @@ -209,7 +209,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota @include text-align(left); @include clearfix(); - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: relative; padding: 8px; @@ -221,7 +221,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // actions .annotator-save, .annotator-cancel { - @extend %notes-reset-background; + @extend %notes-reset-background !optional; padding: ($baseline/4) ($baseline/2) !important; border: none; @@ -247,8 +247,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota .annotator-item { textarea { - @extend %notes-reset-font; - @extend %t-demi-strong; + @extend %notes-reset-font !optional; + @extend %t-demi-strong !optional; padding: ($baseline/5) !important; font-size: 14px !important; @@ -285,7 +285,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // STATE: disabled &:disabled, &.is-disabled { - @extend %ui-disabled; + @extend %ui-disabled !optional; opacity: 0.5; cursor: not-allowed; @@ -312,7 +312,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // poorly scoped selector for content of a note's comment div:first-of-type { - @extend %notes-reset-font; + @extend %notes-reset-font !optional; padding: ($baseline/4) !important; font-size: 14px !important; @@ -339,9 +339,9 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota vertical-align: middle; &::before { - @extend %notes-reset-icon; - @extend %shame-link-base; - @extend %t-icon4; + @extend %notes-reset-icon !optional; + @extend %shame-link-base !optional; + @extend %t-icon4 !optional; position: absolute; } @@ -386,18 +386,18 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota // +necessary, but ugly overrides // -------------------- .edx-notes-wrapper .annotator-wrapper.annotator-wrapper .annotator-outer.annotator-viewer .annotator-controls button { - @extend %notes-reset-background; + @extend %notes-reset-background !optional; opacity: 1; } .edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-save { - @extend %btn-inherited-primary; - @extend %t-action2; + @extend %btn-inherited-primary !optional; + @extend %t-action2 !optional; } .edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-cancel { - @extend %shame-link-base; - @extend %t-action2; - @extend %t-regular; + @extend %shame-link-base !optional; + @extend %t-action2 !optional; + @extend %t-regular !optional; } diff --git a/lms/static/sass/course/modules/_timer.scss b/lms/static/sass/course/modules/_timer.scss index af22961e14c6..1d7cf60cc418 100644 --- a/lms/static/sass/course/modules/_timer.scss +++ b/lms/static/sass/course/modules/_timer.scss @@ -2,7 +2,7 @@ // ==================== div.timer-main { - @extend %ui-depth2; + @extend %ui-depth2 !optional; position: fixed; top: 0; diff --git a/lms/static/sass/course/wiki/_sidebar.scss b/lms/static/sass/course/wiki/_sidebar.scss index 32952697a5f4..d0fefb3654b6 100644 --- a/lms/static/sass/course/wiki/_sidebar.scss +++ b/lms/static/sass/course/wiki/_sidebar.scss @@ -1,5 +1,5 @@ div#wiki_panel { - @extend .sidebar; + @extend .sidebar !optional; overflow: auto; @@ -16,7 +16,7 @@ div#wiki_panel { } div#wiki_create_form { - @extend .clearfix; + @extend .clearfix !optional; padding: lh(0.5) lh() lh(0.5) 0; diff --git a/lms/static/sass/course/wiki/_table.scss b/lms/static/sass/course/wiki/_table.scss index 3c3bfcc7dac3..b5acde99e201 100644 --- a/lms/static/sass/course/wiki/_table.scss +++ b/lms/static/sass/course/wiki/_table.scss @@ -44,6 +44,6 @@ div.history-controls { margin-top: $baseline; input[type="submit"] { - @extend .light-button; + @extend .light-button !optional; } } diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index b3023af1d7bb..5f45e22cac96 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -382,7 +382,7 @@ } &::before { - @extend %ui-depth4; + @extend %ui-depth4 !optional; content: 'click to edit schematic'; position: absolute; @@ -457,7 +457,7 @@ } .modal { - @extend %ui-depth4; + @extend %ui-depth4 !optional; width: 960px; min-height: 500px; @@ -978,7 +978,7 @@ } .modal-backdrop { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: fixed; top: 0; diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss index 0a6a26d6c181..2b2187238abd 100644 --- a/lms/static/sass/discussion/_discussion-v1.scss +++ b/lms/static/sass/discussion/_discussion-v1.scss @@ -57,14 +57,14 @@ .discussion-module, .wmd-prompt-dialog { .btn { - @extend %pattern-library-btn; + @extend %pattern-library-btn !optional; background-color: $forum-color-background; color: $forum-color-active-thread; } .btn-brand { - @extend %pattern-library-btn; + @extend %pattern-library-btn !optional; background-color: $forum-color-active-thread; color: $forum-color-active-text; diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 68643e0c9921..25c4f246c77c 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -56,7 +56,7 @@ // inline discussion module .discussion-module { - @extend .discussion-body; + @extend .discussion-body !optional; display: block; position: relative; @@ -128,7 +128,7 @@ section.discussion { } .xblock-student_view-discussion { - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; // Overrides overspecific courseware CSS from: // https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L499 padding-top: 15px !important; diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 91b6ee7ec2b9..74711c5ff517 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -7,7 +7,7 @@ .post-actions-list, .response-actions-list, .comment-actions-list { - @extend %ui-no-list; + @extend %ui-no-list !optional; @include text-align(right); @@ -52,8 +52,8 @@ // UI: general actions dropdown layout .actions-dropdown { - @extend %ui-no-list; - @extend %ui-depth1; + @extend %ui-no-list !optional; + @extend %ui-depth1 !optional; @include right(0); @@ -148,7 +148,7 @@ } .action-label { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: none; vertical-align: middle; @@ -286,7 +286,7 @@ // UI: secondary action .action-list-item { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include text-align(right); diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index 750b0ad9a2b4..9f45f4cf016c 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -120,7 +120,7 @@ } .wmd-prompt-dialog { - @extend .modal; + @extend .modal !optional; background: $forum-color-background; padding: $baseline; diff --git a/lms/static/sass/discussion/elements/_labels.scss b/lms/static/sass/discussion/elements/_labels.scss index 2609889c2a6c..dd1266214bae 100644 --- a/lms/static/sass/discussion/elements/_labels.scss +++ b/lms/static/sass/discussion/elements/_labels.scss @@ -5,7 +5,7 @@ .post-label { @include margin($baseline/4, $baseline/2, 0, 0); - @extend %t-light; + @extend %t-light !optional; font-size: $forum-small-font-size; display: inline; diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index ad5daead77e0..f0a9bb925634 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -159,17 +159,17 @@ } .forum-nav-filter-main-control { - @extend %forum-nav-select; + @extend %forum-nav-select !optional; } .forum-nav-filter-cohort-control { - @extend %forum-nav-select; + @extend %forum-nav-select !optional; max-width: 60%; } .forum-nav-sort-control { - @extend %forum-nav-select; + @extend %forum-nav-select !optional; } // ----------- @@ -276,7 +276,7 @@ } .forum-nav-thread-wrapper-0 { - @extend %forum-nav-thread-wrapper; + @extend %forum-nav-thread-wrapper !optional; @include margin-right($baseline/5); @@ -296,7 +296,7 @@ } .forum-nav-thread-wrapper-1 { - @extend %forum-nav-thread-wrapper; + @extend %forum-nav-thread-wrapper !optional; margin: 0 ($baseline / 4); // 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview @@ -306,7 +306,7 @@ } .forum-nav-thread-wrapper-2 { - @extend %forum-nav-thread-wrapper; + @extend %forum-nav-thread-wrapper !optional; @include text-align(right); @@ -335,12 +335,12 @@ } .forum-nav-thread-votes-count { - @extend %forum-nav-thread-wrapper-2-content; + @extend %forum-nav-thread-wrapper-2-content !optional; } .forum-nav-thread-comments-count { - @extend %forum-nav-thread-wrapper-2-content; - @extend %t-weight4; + @extend %forum-nav-thread-wrapper-2-content !optional; + @extend %t-weight4 !optional; position: relative; @@ -382,7 +382,7 @@ } .forum-nav-load-more-link { - @extend %forum-nav-load-more-content; + @extend %forum-nav-load-more-content !optional; color: $link-color; width: 100%; @@ -397,5 +397,5 @@ } .forum-nav-loading { - @extend %forum-nav-load-more-content; + @extend %forum-nav-load-more-content !optional; } diff --git a/lms/static/sass/discussion/utilities/_developer.scss b/lms/static/sass/discussion/utilities/_developer.scss index 9a5b2270af23..fe50af16cf7b 100644 --- a/lms/static/sass/discussion/utilities/_developer.scss +++ b/lms/static/sass/discussion/utilities/_developer.scss @@ -43,7 +43,7 @@ color: $white; em { - @extend %t-weight5; + @extend %t-weight5 !optional; font-style: italic; } @@ -53,7 +53,7 @@ .link-jump { @include transition(none); - @extend %t-weight5; + @extend %t-weight5 !optional; } } @@ -66,7 +66,7 @@ .control { @include transition(none); - @extend %t-weight5; + @extend %t-weight5 !optional; padding: ($baseline/4) ($baseline/2); color: $white; diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index b1cdb031f9b7..52593dc062b8 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -88,7 +88,7 @@ li[class*=forum-nav-thread-label-] { .post-actions-list, .response-actions-list, .comment-actions-list { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } // Override global span diff --git a/lms/static/sass/discussion/utilities/_v1-compatibility.scss b/lms/static/sass/discussion/utilities/_v1-compatibility.scss index 982a8ff3a379..4a48073b2e4a 100644 --- a/lms/static/sass/discussion/utilities/_v1-compatibility.scss +++ b/lms/static/sass/discussion/utilities/_v1-compatibility.scss @@ -62,7 +62,7 @@ } %t-copy-sub1 { - @extend %t-copy; + @extend %t-copy !optional; @include line-height(14); @@ -70,7 +70,7 @@ } %t-copy-sub2 { - @extend %t-copy; + @extend %t-copy !optional; @include line-height(12); diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss index 6df353907fff..df6291704a41 100644 --- a/lms/static/sass/discussion/views/_home.scss +++ b/lms/static/sass/discussion/views/_home.scss @@ -17,7 +17,7 @@ } .label { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; } @@ -38,7 +38,7 @@ } .home-description { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; margin-bottom: ($baseline/2); } @@ -64,7 +64,7 @@ width: 70%; .profile-stat { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: inline-block; width: 32.5%; diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index 5cd9bfd56f37..ab63f3b830be 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/lms/static/sass/discussion/views/_response.scss @@ -12,7 +12,7 @@ // +wrapper - response list .discussion .responses { - @extend %ui-no-list; + @extend %ui-no-list !optional; &:empty { display: none; @@ -39,7 +39,7 @@ } .posted-by { - @extend %t-ultrastrong; + @extend %t-ultrastrong !optional; } } @@ -49,7 +49,7 @@ // CASE: larger username for responses .username { - @extend %t-weight5; + @extend %t-weight5 !optional; font-size: $forum-base-font-size; } @@ -142,7 +142,7 @@ // +comments styling .discussion .comments { - @extend %ui-no-list; + @extend %ui-no-list !optional; @include border-radius(0, 0, $forum-border-radius, $forum-border-radius); diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index baa81109474a..df9b65505ade 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -21,14 +21,14 @@ // post article .discussion-article { .posted-details { - @extend %t-copy-sub2; - @extend %t-light; + @extend %t-copy-sub2 !optional; + @extend %t-light !optional; margin: ($baseline/5) 0; color: $forum-color-copy-light; .username { - @extend %t-strong; + @extend %t-strong !optional; display: inline; } @@ -73,14 +73,14 @@ // response body .response-body { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } // comments layout .discussion-comment { .response-body { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include padding(($baseline / 2), ($baseline * 1.5), 0, 0); @@ -174,7 +174,7 @@ // post body .post-body { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; padding: ($baseline/2) 0; max-width: calc(100% - #{$actions-dropdown-offset}); @@ -182,8 +182,8 @@ // post context .post-context { - @extend %t-copy-sub2; - @extend %t-light; + @extend %t-copy-sub2 !optional; + @extend %t-light !optional; color: $forum-color-copy-light; @@ -229,7 +229,7 @@ .inline-comment-count { @include margin-right($baseline/2); - @extend %ui-depth2; + @extend %ui-depth2 !optional; @include float(right); diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 8f89339805b3..79cf4b8d553e 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -58,7 +58,7 @@ } %btn-inherited-primary { - @extend %btn-inherited; + @extend %btn-inherited !optional; @include linear-gradient(top, rgba($white, 0.3), rgba($white, 0)); @@ -86,9 +86,9 @@ // primary button %btn-primary { - @extend %t-weight3; - @extend %btn; - @extend %btn-edged; + @extend %t-weight3 !optional; + @extend %btn !optional; + @extend %btn-edged !optional; border: none; padding: ($baseline*0.75) $baseline; @@ -105,7 +105,7 @@ // blue primary gray %btn-primary-gray { - @extend %btn-primary; + @extend %btn-primary !optional; box-shadow: 0 2px 1px 0 $m-gray-d2; background: $m-gray; @@ -140,7 +140,7 @@ // blue primary error color %btn-primary-error { - @extend %btn-primary; + @extend %btn-primary !optional; box-shadow: 0 2px 1px 0 shade($error-color, 25%); background: shade($error-color, 25%); @@ -161,7 +161,7 @@ // blue primary button %btn-primary-blue { - @extend %btn-primary; + @extend %btn-primary !optional; background: $m-blue-d3; color: $white; @@ -193,7 +193,7 @@ // pink primary button %btn-primary-pink { - @extend %btn-primary; + @extend %btn-primary !optional; box-shadow: 0 2px 1px 0 $m-pink-d2; background: $m-pink; @@ -228,7 +228,7 @@ // green primary button %btn-primary-green { - @extend %btn-primary; + @extend %btn-primary !optional; box-shadow: 0 2px 1px 0 $m-green-d2; background: $m-green-d1; @@ -277,9 +277,9 @@ // blue secondary button outline style %btn-secondary-blue-outline { - @extend %t-action2; - @extend %btn; - @extend %btn-edged; + @extend %t-action2 !optional; + @extend %btn !optional; + @extend %btn-edged !optional; box-shadow: none; border: 1px solid $m-blue-d3; @@ -317,7 +317,7 @@ // grey secondary button outline style %btn-secondary-grey-outline { - @extend %btn-secondary-blue-outline; + @extend %btn-secondary-blue-outline !optional; border: 1px solid $gray-l4; @@ -339,11 +339,11 @@ %btn-pl-default-base { box-sizing: border-box; - @extend %t-copy-base; + @extend %t-copy-base !optional; letter-spacing: 0; // reset letterspacing from elsewhere - @extend %btn-primary; + @extend %btn-primary !optional; border: 1px solid darken($action-primary-bg, 10%); border-radius: 3px; @@ -362,21 +362,21 @@ } %btn-pl-primary-base { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; background-color: darken($action-primary-bg, 10%); color: $action-primary-fg; } %btn-pl-white-base { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; background-color: $action-primary-fg; color: $action-primary-bg; } %btn-pl-green-base { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; background-color: darken($green-d1, 10%); color: $action-primary-fg; @@ -389,7 +389,7 @@ } %btn-pl-yellow-base { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; border: 1px solid transparent; background-color: $credit-color-base; @@ -403,7 +403,7 @@ } %btn-pl-black-border { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; border: 1px solid $m-gray-d4; background-color: transparent; @@ -417,7 +417,7 @@ } %btn-pl-black-base { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; border: 1px solid transparent; background-color: $m-gray-d4; @@ -432,7 +432,7 @@ } %btn-pl-secondary-base { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include transition(border $tmg-f2 ease-in-out); @@ -447,7 +447,7 @@ } %btn-pl-elevated-alt { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; box-shadow: 0 3px 0 0 $gray-l4; border: 1px solid $gray-l4; @@ -469,20 +469,20 @@ } .btn-large { - @extend %t-action1; - @extend %t-weight3; + @extend %t-action1 !optional; + @extend %t-weight3 !optional; display: block; padding: ($baseline*0.75) ($baseline*1.5); } .btn-avg { - @extend %t-action2; - @extend %t-weight3; + @extend %t-action2 !optional; + @extend %t-weight3 !optional; } .btn-blue { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; margin-bottom: $baseline; @@ -493,7 +493,7 @@ } .btn-pink { - @extend %btn-primary-pink; + @extend %btn-primary-pink !optional; margin-bottom: $baseline; @@ -504,7 +504,7 @@ } .btn-secondary { - @extend %btn-pl-secondary-base; + @extend %btn-pl-secondary-base !optional; background-image: none; @@ -517,7 +517,7 @@ } .btn-link { - @extend %shame-link-text; + @extend %shame-link-text !optional; // reset of inherited buttons border-radius: 0; @@ -529,8 +529,8 @@ text-shadow: none; white-space: nowrap; - @extend %t-action3; - @extend %t-strong; + @extend %t-action3 !optional; + @extend %t-strong !optional; &:focus, &:hover { diff --git a/lms/static/sass/elements/_course-card.scss b/lms/static/sass/elements/_course-card.scss index 47209b04b20d..1d8378d3419a 100644 --- a/lms/static/sass/elements/_course-card.scss +++ b/lms/static/sass/elements/_course-card.scss @@ -11,7 +11,7 @@ padding: $baseline/2 0; .section { - @extend .grid-manual; + @extend .grid-manual !optional; padding: $baseline/2 $baseline; } diff --git a/lms/static/sass/elements/_navigation.scss b/lms/static/sass/elements/_navigation.scss index 0bf6d9a22324..711a7eb3e24a 100644 --- a/lms/static/sass/elements/_navigation.scss +++ b/lms/static/sass/elements/_navigation.scss @@ -18,26 +18,26 @@ // +skip navigation // -------------------- %nav-skip { - @extend %text-sr; + @extend %text-sr !optional; } .nav-contents, .nav-skip, .transcript-skip { - @extend %nav-skip; + @extend %nav-skip !optional; } // +utility navigation (course utiltiies) // -------------------- .nav-utilities { - @extend %ui-depth3; + @extend %ui-depth3 !optional; position: fixed; right: ($baseline/4); bottom: 0; .wrapper-utility { - @extend %wipe-last-child; + @extend %wipe-last-child !optional; display: inline-block; vertical-align: bottom; @@ -89,7 +89,7 @@ // specific utility navigation - student notes toggling .action-toggle-notes { - @extend %no-outline; + @extend %no-outline !optional; // STATE: is active/in use &.is-active { @@ -100,8 +100,8 @@ // +toggling utilities // -------------------- .action-toggle-message { - @extend %t-title8; - @extend %t-strong; + @extend %t-title8 !optional; + @extend %t-strong !optional; position: absolute; bottom: 0; @@ -144,7 +144,7 @@ border-bottom: 1px solid $gray-l5; .nav-item { - @extend %button-reset; + @extend %button-reset !optional; display: inline-block; padding: ($baseline*0.75); diff --git a/lms/static/sass/elements/_pagination.scss b/lms/static/sass/elements/_pagination.scss index f41d0c7aeeee..73b8038eb883 100644 --- a/lms/static/sass/elements/_pagination.scss +++ b/lms/static/sass/elements/_pagination.scss @@ -56,7 +56,7 @@ } .nav-label { - @extend %text-sr; + @extend %text-sr !optional; } .pagination-form, @@ -69,8 +69,8 @@ .current-page, .page-number-input, .total-pages { - @extend %t-copy-base; - @extend %t-strong; + @extend %t-copy-base !optional; + @extend %t-strong !optional; width: ($baseline*2.5); vertical-align: middle; @@ -81,7 +81,7 @@ } .current-page { - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; @@ -89,21 +89,21 @@ } .page-divider { - @extend %t-title4; - @extend %t-regular; + @extend %t-title4 !optional; + @extend %t-regular !optional; vertical-align: middle; color: $gray-l2; } .pagination-form { - @extend %ui-depth2; + @extend %ui-depth2 !optional; position: relative; .page-number-label, .submit-pagination-form { - @extend %text-sr; + @extend %text-sr !optional; } .page-number-input { @@ -136,7 +136,7 @@ // styles for search/pagination metadata and sorting .listing-tools { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray-d1; @@ -147,8 +147,8 @@ } .listing-sort-select { - @extend %t-copy-sub1; - @extend %t-regular; + @extend %t-copy-sub1 !optional; + @extend %t-regular !optional; border: 0; } diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss index 0a16127ff33e..fc59c5a64fa5 100644 --- a/lms/static/sass/elements/_system-feedback.scss +++ b/lms/static/sass/elements/_system-feedback.scss @@ -28,8 +28,8 @@ .msg-content { .title { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/4); color: inherit; @@ -38,12 +38,12 @@ } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: inherit; p { // nasty reset - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: inherit; } @@ -63,7 +63,7 @@ text-align: right; .action-primary { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; } } } @@ -80,7 +80,7 @@ text-align: right; .button-dismiss { //ugly reset on button element - @extend %t-icon4; + @extend %t-icon4 !optional; background: none; box-shadow: none; @@ -210,7 +210,7 @@ // messages .message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; } @@ -220,7 +220,7 @@ box-sizing: border-box; - @extend %t-strong; + @extend %t-strong !optional; display: none; margin: 0 0 $baseline 0; @@ -228,7 +228,7 @@ color: $white; .feedback-symbol { - @extend %t-icon5; + @extend %t-icon5 !optional; position: relative; top: 1px; @@ -261,7 +261,7 @@ box-sizing: border-box; .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } @@ -294,7 +294,7 @@ .nav-actions .action-primary { @include blue-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $blue-d2; } @@ -313,7 +313,7 @@ .nav-actions .action-primary { @include orange-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $orange-d2; color: $gray-d4; @@ -333,7 +333,7 @@ .nav-actions .action-primary { @include red-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $red-d2; } @@ -352,7 +352,7 @@ .nav-actions .action-primary { @include blue-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $blue-d2; } @@ -371,7 +371,7 @@ .nav-actions .action-primary { @include green-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $green-d2; } @@ -390,7 +390,7 @@ .nav-actions .action-primary { @include pink-button(); - @extend %t-action4; + @extend %t-action4 !optional; border-color: $pink-d2; } @@ -407,7 +407,7 @@ // prompts .wrapper-prompt { - @extend %ui-depth5; + @extend %ui-depth5 !optional; @include transition(all $tmg-f3 ease-in-out 0s); @@ -458,12 +458,12 @@ } .action-primary { - @extend %t-action4; - @extend %t-strong; + @extend %t-action4 !optional; + @extend %t-strong !optional; } .action-secondary { - @extend %t-action4; + @extend %t-action4 !optional; } } } @@ -506,7 +506,7 @@ // notifications .wrapper-notification { - @extend %ui-depth5; + @extend %ui-depth5 !optional; @include clearfix(); @@ -624,7 +624,7 @@ max-width: $fg-max-width; strong { - @extend %t-strong; + @extend %t-strong !optional; } .feedback-symbol, @@ -637,7 +637,7 @@ .feedback-symbol { @include transition (color $tmg-f1 ease-in-out 0s); - @extend %t-icon3; + @extend %t-icon3 !optional; width: flex-grid(1, 12); height: ($baseline*1.25); @@ -648,13 +648,13 @@ } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; width: flex-grid(10, 12); color: $gray-l2; .title { - @extend %t-title7; + @extend %t-title7 !optional; margin-bottom: 0; color: $white; @@ -696,13 +696,13 @@ .action-primary { @include blue-button(); - @extend %t-strong; + @extend %t-strong !optional; border-color: $blue-d2; } .action-secondary { - @extend %t-action4; + @extend %t-action4 !optional; } } @@ -731,11 +731,11 @@ } .title { - @extend %cont-truncated; + @extend %cont-truncated !optional; } .copy p { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } } } @@ -744,7 +744,7 @@ // alerts .wrapper-alert { - @extend %ui-depth2; + @extend %ui-depth2 !optional; box-sizing: border-box; box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue; @@ -816,7 +816,7 @@ color: $white; strong { - @extend %t-strong; + @extend %t-strong !optional; } .feedback-symbol, @@ -827,7 +827,7 @@ .feedback-symbol { @include transition (color $tmg-f1 ease-in-out 0s); - @extend %t-icon3; + @extend %t-icon3 !optional; width: flex-grid(1, 12); margin: ($baseline/4) flex-gutter() 0 0; @@ -840,7 +840,7 @@ color: $gray-l2; .title { - @extend %t-title7; + @extend %t-title7 !optional; margin-bottom: 0; color: $white; @@ -878,12 +878,12 @@ } .action-primary { - @extend %t-action4; - @extend %t-strong; + @extend %t-action4 !optional; + @extend %t-strong !optional; } .action-secondary { - @extend %t-action4; + @extend %t-action4 !optional; } } } @@ -901,11 +901,11 @@ text-align: center; .label { - @extend %cont-text-sr; + @extend %cont-text-sr !optional; } .icon { - @extend %t-icon6; + @extend %t-icon6 !optional; color: $white; width: auto; @@ -938,13 +938,13 @@ } .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; margin-right: ($baseline/4); } .button-copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } } @@ -1003,7 +1003,7 @@ // block-level messages and validation .wrapper-message { .message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-d2; padding: ($baseline/2) ($baseline*0.75); @@ -1014,7 +1014,7 @@ } &.information { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; background-color: $gray-l5; color: $gray-d2; @@ -1074,7 +1074,7 @@ body.uxdesign.alerts { } .content-primary { - @extend %ui-window; + @extend %ui-window !optional; width: flex-grid(12, 12); @@ -1122,7 +1122,7 @@ body.uxdesign.alerts { // artifact styles .main-wrapper { .alert { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; padding: 15px 20px; margin-bottom: ($baseline*1.5); @@ -1140,7 +1140,7 @@ body.uxdesign.alerts { } strong { - @extend %t-strong; + @extend %t-strong !optional; } .alert-action { @@ -1171,8 +1171,8 @@ body.error { } h1 { - @extend %t-title1; - @extend %t-light; + @extend %t-title1 !optional; + @extend %t-light !optional; float: none; margin: 0; @@ -1180,7 +1180,7 @@ body.error { } .description { - @extend %t-copy-lead2; + @extend %t-copy-lead2 !optional; margin-bottom: 50px; } @@ -1188,7 +1188,7 @@ body.error { .back-button { @include blue-button(); - @extend %t-action1; + @extend %t-action1 !optional; padding: 14px 40px 18px; } diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 3fd45ab60658..cf98fdd8aa6e 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -34,63 +34,63 @@ } %t-title1 { - @extend %t-title; + @extend %t-title !optional; @include font-size(60); @include line-height(60); } %t-title2 { - @extend %t-title; + @extend %t-title !optional; @include font-size(48); @include line-height(48); } %t-title3 { - @extend %t-title; + @extend %t-title !optional; @include font-size(36); @include line-height(36); } %t-title4 { - @extend %t-title; + @extend %t-title !optional; @include font-size(24); @include line-height(24); } %t-title5 { - @extend %t-title; + @extend %t-title !optional; @include font-size(18); @include line-height(18); } %t-title6 { - @extend %t-title; + @extend %t-title !optional; @include font-size(16); @include line-height(16); } %t-title7 { - @extend %t-title; + @extend %t-title !optional; @include font-size(14); @include line-height(14); } %t-title8 { - @extend %t-title; + @extend %t-title !optional; @include font-size(12); @include line-height(12); } %t-title9 { - @extend %t-title; + @extend %t-title !optional; @include font-size(11); @include line-height(11); @@ -104,35 +104,35 @@ } %t-copy-base { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(16); @include line-height(16); } %t-copy-lead1 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(18); @include line-height(18); } %t-copy-lead2 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(24); @include line-height(24); } %t-copy-sub1 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(14); @include line-height(14); } %t-copy-sub2 { - @extend %t-copy; + @extend %t-copy !optional; @include font-size(12); @include line-height(12); @@ -240,16 +240,16 @@ // MISC: extends - type // application: canned headings %hd-lv1 { - @extend %t-title1; - @extend %t-weight1; + @extend %t-title1 !optional; + @extend %t-weight1 !optional; color: $m-gray-d4; margin: 0 0 ($baseline*2) 0; } %hd-lv2 { - @extend %t-title4; - @extend %t-weight1; + @extend %t-title4 !optional; + @extend %t-weight1 !optional; margin: 0 0 ($baseline*0.75) 0; border-bottom: 1px solid $m-gray-l3; @@ -258,24 +258,24 @@ } %hd-lv3 { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; margin: 0 0 ($baseline/4) 0; color: $m-gray-d4; } %hd-lv4 { - @extend %t-title6; - @extend %t-weight2; + @extend %t-title6 !optional; + @extend %t-weight2 !optional; margin: 0 0 $baseline 0; color: $m-gray-d4; } %hd-lv5 { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; margin: 0 0 ($baseline/4) 0; color: $m-gray-d4; @@ -283,36 +283,36 @@ // application: canned copy %copy-base { - @extend %t-copy-base; + @extend %t-copy-base !optional; color: $m-gray-d2; } %copy-lead1 { - @extend %t-copy-lead2; + @extend %t-copy-lead2 !optional; color: $m-gray; } %copy-detail { - @extend %t-copy-sub1; - @extend %t-weight3; + @extend %t-copy-sub1 !optional; + @extend %t-weight3 !optional; color: $m-gray-d1; } %copy-metadata { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $m-gray-d1; %copy-metadata-value { - @extend %t-weight2; + @extend %t-weight2 !optional; } %copy-metadata-value { - @extend %t-weight4; + @extend %t-weight4 !optional; } } @@ -328,8 +328,8 @@ } %copy-badge { - @extend %t-title9; - @extend %t-weight3; + @extend %t-title9 !optional; + @extend %t-weight3 !optional; border-radius: ($baseline/5); padding: ($baseline/2) $baseline; diff --git a/lms/static/sass/features/_bookmarks-v1.scss b/lms/static/sass/features/_bookmarks-v1.scss index 525f8414dc52..938243af3dcf 100644 --- a/lms/static/sass/features/_bookmarks-v1.scss +++ b/lms/static/sass/features/_bookmarks-v1.scss @@ -18,10 +18,10 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark vertical-align: top; .bookmarks-list-button { - @extend %ui-clear-button; + @extend %ui-clear-button !optional; // set styles - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include font-size(13); @@ -48,7 +48,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark .bookmark-button-wrapper { margin-bottom: ($baseline * 1.5); - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } .bookmark-button { diff --git a/lms/static/sass/features/_bookmarks.scss b/lms/static/sass/features/_bookmarks.scss index 2aaa1ec208ef..aa0963286e3d 100644 --- a/lms/static/sass/features/_bookmarks.scss +++ b/lms/static/sass/features/_bookmarks.scss @@ -103,11 +103,11 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark } .bookmarks-empty-header { - @extend %t-title5; + @extend %t-title5 !optional; margin-bottom: ($baseline/2); } .bookmarks-empty-detail { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss index 8d35a7eccc67..08eef4bcf7f2 100644 --- a/lms/static/sass/features/_learner-profile.scss +++ b/lms/static/sass/features/_learner-profile.scss @@ -3,7 +3,7 @@ .learner-achievements { .learner-message { - @extend %no-content; + @extend %no-content !optional; margin: $baseline*0.75 0; @@ -53,20 +53,20 @@ } .card-supertitle { - @extend %t-title6; + @extend %t-title6 !optional; color: $lightest-base-font-color; } .card-title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; margin-bottom: $baseline/2; } .card-text { - @extend %t-title8; + @extend %t-title8 !optional; color: $lightest-base-font-color; } @@ -126,7 +126,7 @@ } .ui-loading-indicator { - @extend .ui-loading-base; + @extend .ui-loading-base !optional; padding-bottom: $baseline; @@ -275,7 +275,7 @@ display: table-row; button { - @extend %btn-secondary-blue-outline; + @extend %btn-secondary-blue-outline !optional; margin-top: 1em; background: $blue; @@ -296,7 +296,7 @@ } .u-field-account_privacy { - @extend .container; + @extend .container !optional; display: table-cell; border: none; @@ -311,7 +311,7 @@ } .btn-change-privacy { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; padding-top: 4px; padding-bottom: 5px; @@ -321,7 +321,7 @@ } .u-field-title { - @extend %t-strong; + @extend %t-strong !optional; width: auto; color: $body-color; @@ -350,7 +350,7 @@ } .wrapper-profile-sections { - @extend .container; + @extend .container !optional; @include padding($baseline*1.5, 5%, $baseline*1.5, 5%); @@ -371,15 +371,15 @@ padding: $baseline 5% 0; .header { - @extend %t-title4; - @extend %t-ultrastrong; + @extend %t-title4 !optional; + @extend %t-ultrastrong !optional; display: inline-block; color: #222; } .subheader { - @extend %t-title6; + @extend %t-title6 !optional; } } @@ -457,7 +457,7 @@ &:not(.u-field-readonly) { &.u-field-value { - @extend %t-weight3; + @extend %t-weight3 !optional; } &:not(:last-child) { @@ -481,8 +481,8 @@ } &:first-child { - @extend %t-title4; - @extend %t-weight4; + @extend %t-title4 !optional; + @extend %t-weight4 !optional; font-size: em(24); } @@ -547,7 +547,7 @@ } .u-field-title { - @extend %t-title6; + @extend %t-title6 !optional; display: inline-block; margin-top: 0; @@ -558,7 +558,7 @@ } .u-field-value { - @extend %t-copy-base; + @extend %t-copy-base !optional; width: 100%; overflow: auto; @@ -613,7 +613,7 @@ text-align: center; line-height: 1.5em; - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $body-color; } @@ -638,7 +638,7 @@ .u-field-footer { .field-textarea-character-count { - @extend %t-weight1; + @extend %t-weight1 !optional; @include float(right); @@ -659,11 +659,11 @@ } .page-content-nav { - @extend %page-content-nav; + @extend %page-content-nav !optional; } .badge-set-display { - @extend .container; + @extend .container !optional; padding: 0; @@ -701,16 +701,16 @@ } .badge-details { - @extend %t-copy-sub1; - @extend %t-regular; + @extend %t-copy-sub1 !optional; + @extend %t-regular !optional; max-width: 70%; display: inline-block; color: $gray-d1; .badge-name { - @extend %t-strong; - @extend %t-copy-base; + @extend %t-strong !optional; + @extend %t-copy-base !optional; color: $gray-d3; } @@ -721,7 +721,7 @@ } .badge-date-stamp { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .find-button-container { @@ -734,8 +734,8 @@ } .share-button { - @extend %t-action3; - @extend %button-reset; + @extend %t-action3 !optional; + @extend %button-reset !optional; background: $gray-l6; color: $gray-d1; @@ -783,7 +783,7 @@ // #BADGES MODAL // ------------------------------ .badges-overlay { - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: fixed; top: 0; @@ -794,8 +794,8 @@ vertical-align: middle; .badges-modal { - @extend %t-copy-lead1; - @extend %ui-depth2; + @extend %t-copy-lead1 !optional; + @extend %ui-depth2 !optional; color: $lighter-base-font-color; box-sizing: content-box; @@ -821,8 +821,8 @@ } .close { - @extend %button-reset; - @extend %t-strong; + @extend %button-reset !optional; + @extend %t-strong !optional; color: $lighter-base-font-color; position: absolute; diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss index 086bb10c8bc8..89ed3810a748 100644 --- a/lms/static/sass/multicourse/_about_pages.scss +++ b/lms/static/sass/multicourse/_about_pages.scss @@ -7,7 +7,7 @@ width: flex-grid(12); &::after { - @extend %faded-hr-divider; + @extend %faded-hr-divider !optional; content: ""; display: block; diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 7a635ab89996..0579ae0abfa0 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -130,7 +130,7 @@ // CASE: normal typographical headings h1 { - @extend %heading-2; + @extend %heading-2 !optional; @include text-align(left); @@ -147,7 +147,7 @@ .title-super, .title-sub { - @extend %t-weight1; + @extend %t-weight1 !optional; display: block; letter-spacing: 0; @@ -191,7 +191,7 @@ label, input, textarea { - @extend %body-text; + @extend %body-text !optional; } h1, @@ -265,7 +265,7 @@ } h3 { - @extend %heading-4; + @extend %heading-4 !optional; margin: 0 0 ($baseline/4) 0; } @@ -279,7 +279,7 @@ } .btn-login-action { - @extend %btn-secondary-grey-outline; + @extend %btn-secondary-grey-outline !optional; padding: ($baseline/10) ($baseline*0.75); @@ -291,7 +291,7 @@ // forms form { .instructions { - @extend %body-text-emphasized; + @extend %body-text-emphasized !optional; margin-bottom: $baseline; } @@ -507,8 +507,8 @@ @include clearfix(); button[type="submit"] { - @extend %m-btn-primary; - @extend %t-action2; + @extend %m-btn-primary !optional; + @extend %t-action2 !optional; &:disabled, &.is-disabled { @@ -544,8 +544,8 @@ border-top: ($baseline/5) solid $m-gray-l4; .copy { - @extend %t-copy-lead1; - @extend %t-weight4; + @extend %t-copy-lead1 !optional; + @extend %t-weight4 !optional; position: absolute; top: -($baseline); @@ -561,7 +561,7 @@ // downplay required note .instructions .note { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; font-weight: normal; @@ -573,14 +573,14 @@ margin-bottom: $baseline; button[type="submit"] { - @extend %btn-secondary-blue-outline; + @extend %btn-secondary-blue-outline !optional; width: flex-grid(4, 8); @include margin-right($baseline/2); .icon { - @extend %sso-icon; + @extend %sso-icon !optional; @include margin-right($baseline/2); @@ -642,7 +642,7 @@ background: tint($yellow, 20%); .message-title { - @extend %heading-4; + @extend %heading-4 !optional; margin: 0 0 ($baseline/4) 0; font-size: em(14); @@ -650,7 +650,7 @@ } .message-copy { - @extend %body-text; + @extend %body-text !optional; margin: 0 !important; padding: 0; @@ -768,7 +768,7 @@ } h2 { - @extend %heading-2; + @extend %heading-2 !optional; @include text-align(left); } @@ -818,7 +818,7 @@ } .modal-form-error { - @extend %body-text; + @extend %body-text !optional; box-shadow: inset 0 -1px 2px 0 tint($red, 85%); box-sizing: border-box; diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index 33df96922c60..188e1e3574ae 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -288,7 +288,7 @@ } .instructor-info-action { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; @include float(right); @@ -305,7 +305,7 @@ color: $white; } - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } } } @@ -465,7 +465,7 @@ text-align: center; &::after { - @extend %faded-hr-divider; + @extend %faded-hr-divider !optional; content: ""; display: block; @@ -632,7 +632,7 @@ .pre-requisite { max-width: 39%; - @extend %text-truncated; + @extend %text-truncated !optional; } .tip { diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index 9da6d4b7e164..fce78d2f5131 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -26,7 +26,7 @@ $facet-background-color: #007db8; .find-courses, .university-profile { .discovery-button:not(:disabled) { - @extend %t-action2; + @extend %t-action2 !optional; @include text-align(left); @@ -228,7 +228,7 @@ $facet-background-color: #007db8; @include rtl() { $layout-direction: "RTL"; } .search-status-label { - @extend %t-title3; + @extend %t-title3 !optional; @include span-columns(9); @@ -256,7 +256,7 @@ $facet-background-color: #007db8; .wrapper-search-input { @include span-columns(3); - @extend %ui-depth0; + @extend %ui-depth0 !optional; position: relative; @@ -279,9 +279,9 @@ $facet-background-color: #007db8; } .discovery-input { - @extend %ui-depth1; - @extend %t-copy-sub1; - @extend %t-demi-strong; + @extend %ui-depth1 !optional; + @extend %t-copy-sub1 !optional; + @extend %t-demi-strong !optional; @include border-radius(3px); @include padding-right(55px); @@ -294,7 +294,7 @@ $facet-background-color: #007db8; //STATE: focus &:focus { - @extend %no-outline; + @extend %no-outline !optional; box-shadow: none; border-color: $m-blue-d6; @@ -302,9 +302,9 @@ $facet-background-color: #007db8; } .discovery-submit { - @extend %ui-depth2; - @extend %t-icon3; - @extend %t-strong; + @extend %ui-depth2 !optional; + @extend %t-icon3 !optional; + @extend %t-strong !optional; @include margin-left(-2px); @include right(0); @@ -380,7 +380,7 @@ $facet-background-color: #007db8; background: $courseware-button-border-color; .facet-option { - @extend %t-strong; + @extend %t-strong !optional; color: $gray-d2; text-decoration: none; @@ -394,8 +394,8 @@ $facet-background-color: #007db8; .clear-filters { @include line-height(29.73); - @extend %t-icon5; - @extend %t-strong; + @extend %t-icon5 !optional; + @extend %t-strong !optional; margin: ($baseline/2); width: auto; @@ -419,7 +419,7 @@ $facet-background-color: #007db8; box-sizing: border-box; - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: relative; margin: ($baseline*2) 0 ($baseline*3.5) 0; @@ -470,8 +470,8 @@ $facet-background-color: #007db8; .header-search-facets, .header-facet { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; margin: 0; padding: ($baseline/2); @@ -484,7 +484,7 @@ $facet-background-color: #007db8; } .facet-list { - @extend %ui-no-list; + @extend %ui-no-list !optional; @include clearfix(); @@ -510,8 +510,8 @@ $facet-background-color: #007db8; @include transition(all $tmg-f2 ease-out 0s); @include clearfix(); - @extend %t-action3; - @extend %text-truncated; + @extend %t-action3 !optional; + @extend %text-truncated !optional; opacity: 1; border-radius: 0; @@ -575,8 +575,8 @@ $facet-background-color: #007db8; @include clearfix(); button { - @extend %t-icon6; - @extend %t-strong; + @extend %t-icon6 !optional; + @extend %t-strong !optional; padding: ($baseline/4) ($baseline/2); color: $facet-background-color; diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 7eb5384443b9..41cf371a0f8a 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -26,7 +26,7 @@ margin-bottom: $baseline/2; .header-courses { - @extend %t-title5; + @extend %t-title5 !optional; @include padding-right($baseline/2); } @@ -34,7 +34,7 @@ // UI: course list .listing-courses { - @extend %ui-no-list; + @extend %ui-no-list !optional; .course-item { margin-bottom: $baseline; @@ -60,7 +60,7 @@ @include transition(all 0.15s linear 0s); @include clearfix(); - @extend %ui-depth2; + @extend %ui-depth2 !optional; .details { @include clearfix(); @@ -97,7 +97,7 @@ text-align: center; .label { - @extend %text-sr; + @extend %text-sr !optional; } .deco-graphic { @@ -108,9 +108,9 @@ } .sts-enrollment-value { - @extend %ui-depth1; - @extend %copy-badge; - @extend %t-demi-strong; + @extend %ui-depth1 !optional; + @extend %copy-badge !optional; + @extend %t-demi-strong !optional; font-size: 0.6em; line-height: 1.5em; @@ -141,8 +141,8 @@ span { font: -apple-system-short-headline !important; - @extend %t-title3; - @extend %t-regular; + @extend %t-title3 !optional; + @extend %t-regular !optional; display: inline-block; margin-bottom: ($baseline/2); @@ -150,7 +150,7 @@ // Responsive behavior @include media-breakpoint-down(sm) { - @extend %t-title4; + @extend %t-title4 !optional; } } } @@ -160,7 +160,7 @@ font: -apple-system-short-subheadline !important; color: $gray-d1; - @extend %t-title7; + @extend %t-title7 !optional; display: inline-block; } @@ -171,7 +171,7 @@ .info-date-block { font: -apple-system-short-subheadline !important; - @extend %t-title7; + @extend %t-title7 !optional; color: $gray; // WCAG 2.0 AA compliant @@ -185,7 +185,7 @@ } .change-session { - @extend %t-title7; + @extend %t-title7 !optional; @include margin(0, 0, 0, $baseline/4); @@ -288,8 +288,8 @@ } .actions-dropdown { - @extend %ui-no-list; - @extend %ui-depth1; + @extend %ui-no-list !optional; + @extend %ui-depth1 !optional; display: none; position: absolute; @@ -306,7 +306,7 @@ } .actions-dropdown-list { - @extend %ui-no-list; + @extend %ui-no-list !optional; box-sizing: border-box; display: table; @@ -350,7 +350,7 @@ } .actions-item { - @extend %t-title7; + @extend %t-title7 !optional; display: block; margin: 0; @@ -411,12 +411,12 @@ .enter-course { font: -apple-system-short-subheadline !important; - @extend %btn-pl-white-base; + @extend %btn-pl-white-base !optional; @include float(right); &.archived { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; } } @@ -440,7 +440,7 @@ // course enrollment status message .sts-enrollment { .label { - @extend %text-sr; + @extend %text-sr !optional; } // status message @@ -462,11 +462,11 @@ // course enrollment status message .sts-enrollment { .label { - @extend %text-sr; + @extend %text-sr !optional; } .deco-graphic { - @extend %ui-depth3; + @extend %ui-depth3 !optional; width: 40px; position: absolute; @@ -624,7 +624,7 @@ } .message { - @extend %ui-depth1; + @extend %ui-depth1 !optional; border-radius: 3px; display: none; @@ -661,8 +661,8 @@ .message-title, .message-copy .title { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; line-height: 1em; margin-bottom: ($baseline/4); @@ -670,7 +670,7 @@ .message-copy, .message-copy .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 2px 0 0; } @@ -773,7 +773,7 @@ } .action-upgrade { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; @include clearfix(); @@ -817,26 +817,26 @@ } .copy { - @extend %t-action3; - @extend %t-weight4; + @extend %t-action3 !optional; + @extend %t-weight4 !optional; @include margin-right($baseline); } .copy-sub { - @extend %t-action4; + @extend %t-action4 !optional; opacity: 0.875; } } .action-view-consent { - @extend %btn-pl-white-base; + @extend %btn-pl-white-base !optional; @include float(right); &.archived { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; } } } @@ -851,14 +851,14 @@ } .message-copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: 0; } .credit-action { .credit-btn { - @extend %btn-pl-yellow-base; + @extend %btn-pl-yellow-base !optional; @include float(right); @include margin-right(5px); @@ -994,7 +994,7 @@ } .action-certificate .btn { - @extend %btn-inherited-primary; + @extend %btn-inherited-primary !optional; box-sizing: border-box; padding: 7px $baseline*0.75; @@ -1029,7 +1029,7 @@ } .certificate-explanation { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-top: ($baseline/2); border-top: 1px solid $gray-l4; @@ -1052,7 +1052,7 @@ position: relative; .btn { - @extend %btn-pl-green-base; + @extend %btn-pl-green-base !optional; @include float(right); } @@ -1194,17 +1194,17 @@ } .status-data-message { - @extend %t-copy-sub1; - @extend %t-weight4; + @extend %t-copy-sub1 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/2); } .list-actions { - @extend %ui-no-list; + @extend %ui-no-list !optional; .action { - @extend %t-weight4; + @extend %t-weight4 !optional; display: block; @@ -1213,13 +1213,13 @@ } .status-note { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; position: relative; padding-top: $baseline/2; p { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } .deco-arrow { @@ -1243,8 +1243,8 @@ } .action-reverify { - @extend %btn-primary-error; - @extend %t-weight4; + @extend %btn-primary-error !optional; + @extend %t-weight4 !optional; display: block; @@ -1270,8 +1270,8 @@ } .action-reverify { - @extend %btn-primary-error; - @extend %t-weight4; + @extend %btn-primary-error !optional; + @extend %t-weight4 !optional; display: block; @@ -1353,18 +1353,18 @@ } .msg__title { - @extend %hd-lv5; + @extend %hd-lv5 !optional; color: $lighter-base-font-color; } .msg__copy { - @extend %copy-metadata; + @extend %copy-metadata !optional; color: $lighter-base-font-color; p { - @extend %t-copy; + @extend %t-copy !optional; } } @@ -1411,7 +1411,7 @@ a.disable-look { } a.fade-cover { - @extend .cover; + @extend .cover !optional; opacity: 0.5; } @@ -1435,8 +1435,8 @@ a.fade-cover { border-bottom: thin solid $gray; &.title { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; font-family: $font-family-sans-serif; diff --git a/lms/static/sass/multicourse/_entitlement_dashboard.scss b/lms/static/sass/multicourse/_entitlement_dashboard.scss index dd6ef3e93dcc..14fae8f40215 100644 --- a/lms/static/sass/multicourse/_entitlement_dashboard.scss +++ b/lms/static/sass/multicourse/_entitlement_dashboard.scss @@ -1,48 +1,48 @@ .entitlement-actions-wrapper { - @extend .wrapper-action-more; + @extend .wrapper-action-more !optional; .entitlement-action { - @extend .action; + @extend .action !optional; } .entitlement-action-more { - @extend .action-more; + @extend .action-more !optional; } .entitlement-actions-dropdown { - @extend .actions-dropdown; + @extend .actions-dropdown !optional; .entitlement-actions-dropdown-list { - @extend .actions-dropdown-list; + @extend .actions-dropdown-list !optional; .entitlement-actions-item { - @extend .actions-item; + @extend .actions-item !optional; } } } } .entitlement-unenrollment-modal { - @extend .modal; + @extend .modal !optional; margin-top: -3*$baseline; .entitlement-unenrollment-modal-inner-wrapper { - @extend .inner-wrapper; + @extend .inner-wrapper !optional; height: 98%; overflow-y: scroll; .entitlement-unenrollment-modal-close-btn { - @extend .close-modal; + @extend .close-modal !optional; } .entitlement-unenrollment-modal-header { - @extend .unenroll-header; + @extend .unenroll-header !optional; } .entitlement-unenrollment-modal-error-text { - @extend .modal-form-error; + @extend .modal-form-error !optional; background: tint($red, 95%); margin-left: $baseline; diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss index c0c43a42257a..9b1f62de2bfd 100644 --- a/lms/static/sass/multicourse/_error-pages.scss +++ b/lms/static/sass/multicourse/_error-pages.scss @@ -1,5 +1,5 @@ section.outside-app { - @extend .container; + @extend .container !optional; @include text-align(left); diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index 3ca7761fc722..20e3dad5a3ec 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -27,7 +27,7 @@ $course-search-input-height: ($button-size); .outer-wrapper { @include clearfix(); - @extend .animation-home-header-pop-up; + @extend .animation-home-header-pop-up !optional; position: relative; margin: 0 auto; @@ -118,8 +118,8 @@ $course-search-input-height: ($button-size); @include padding-right($button-size); @include padding-left($baseline*0.5); - @extend %ui-depth1; - @extend %t-title5; + @extend %ui-depth1 !optional; + @extend %t-title5 !optional; border: 2px solid $gray-l3; border-radius: 3px; @@ -132,7 +132,7 @@ $course-search-input-height: ($button-size); // STATE: focus &:focus { - @extend %no-outline; + @extend %no-outline !optional; border-color: $m-blue-d1; } @@ -142,9 +142,9 @@ $course-search-input-height: ($button-size); @include right($baseline*1.5); @include border-radius(1px, 3px, 3px, 1px); - @extend %ui-depth2; - @extend %t-icon3; - @extend %t-strong; + @extend %ui-depth2 !optional; + @extend %t-icon3 !optional; + @extend %t-strong !optional; position: absolute; border: 2px solid $m-blue-d1; @@ -293,14 +293,14 @@ $course-search-input-height: ($button-size); width: flex-grid(12); &::before { - @extend %faded-hr-divider-medium; + @extend %faded-hr-divider-medium !optional; content: ""; display: block; } &::after { - @extend %faded-hr-divider-medium; + @extend %faded-hr-divider-medium !optional; content: ""; display: block; @@ -308,7 +308,7 @@ $course-search-input-height: ($button-size); hr { - @extend %faded-hr-divider-light; + @extend %faded-hr-divider-light !optional; border: none; margin: 0; @@ -316,7 +316,7 @@ $course-search-input-height: ($button-size); z-index: 2; &::after { - @extend %faded-hr-divider; + @extend %faded-hr-divider !optional; bottom: 0; content: ""; @@ -339,7 +339,7 @@ $course-search-input-height: ($button-size); overflow: hidden; &::before { - @extend %faded-vertical-divider; + @extend %faded-vertical-divider !optional; content: ""; display: block; @@ -353,7 +353,7 @@ $course-search-input-height: ($button-size); } &::after { - @extend %faded-vertical-divider-light; + @extend %faded-vertical-divider-light !optional; content: ""; display: block; diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss index 8c9e05f9c882..89cf6af6db36 100644 --- a/lms/static/sass/multicourse/_media-kit.scss +++ b/lms/static/sass/multicourse/_media-kit.scss @@ -32,7 +32,7 @@ $white: rgb(255, 255, 255); } hr { - @extend %faded-hr-divider-light; + @extend %faded-hr-divider-light !optional; border: none; margin: 0; @@ -40,7 +40,7 @@ $white: rgb(255, 255, 255); z-index: 2; &::after { - @extend %faded-hr-divider; + @extend %faded-hr-divider !optional; bottom: 0; content: ""; diff --git a/lms/static/sass/multicourse/_survey-page.scss b/lms/static/sass/multicourse/_survey-page.scss index 5af944a499fa..ee4044118c8a 100644 --- a/lms/static/sass/multicourse/_survey-page.scss +++ b/lms/static/sass/multicourse/_survey-page.scss @@ -21,8 +21,8 @@ .header-survey { .title { - @extend %t-title4; - @extend %t-weight4; + @extend %t-title4 !optional; + @extend %t-weight4 !optional; margin-bottom: $baseline; border-bottom: 1px solid $gray-l4; @@ -30,14 +30,14 @@ } .course-info { - @extend %t-title; + @extend %t-title !optional; padding-bottom: ($baseline/4); } .course-org, .course-number { - @extend %t-title8; + @extend %t-title8 !optional; display: inline-block; color: $gray-l1; @@ -48,7 +48,7 @@ } .course-name { - @extend %t-title5; + @extend %t-title5 !optional; display: block; } @@ -68,7 +68,7 @@ margin-bottom: $baseline; font-style: italic; - @extend %t-copy-base; + @extend %t-copy-base !optional; } .message.submission-error { @@ -81,15 +81,15 @@ background-color: tint($error-color, 85%); .message-title { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/2); color: $error-color; } .message-copy { - @extend %ui-no-list; + @extend %ui-no-list !optional; line-height: 1.3; @@ -104,7 +104,7 @@ } .list-input { - @extend %ui-no-list; + @extend %ui-no-list !optional; .field { margin-bottom: $baseline; @@ -116,7 +116,7 @@ } .tip { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; margin-top: ($baseline/4); @@ -132,22 +132,22 @@ } .action-primary { - @extend %m-btn-primary; - @extend %t-copy-base; + @extend %m-btn-primary !optional; + @extend %t-copy-base !optional; @include padding-left($baseline*2); } .action-cancel { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include margin-left($baseline); } // override basic label styles label { - @extend %t-copy-base; - @extend %t-weight4; + @extend %t-copy-base !optional; + @extend %t-weight4 !optional; display: block; font-style: normal; @@ -158,19 +158,19 @@ input, select, textarea { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } .bit { margin-bottom: $baseline; .title { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; } p { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray; } diff --git a/lms/static/sass/search/_search.scss b/lms/static/sass/search/_search.scss index 0e1abd63e3a2..1359886728cb 100644 --- a/lms/static/sass/search/_search.scss +++ b/lms/static/sass/search/_search.scss @@ -7,7 +7,7 @@ } .search-field { - @extend %t-weight2; + @extend %t-weight2 !optional; box-sizing: border-box; top: 5px; @@ -20,7 +20,7 @@ .cancel-button, .search-button:hover, .cancel-button:hover { - @extend %t-regular; + @extend %t-regular !optional; box-sizing: border-box; @@ -122,7 +122,7 @@ } .search-results-ellipsis { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: theme-color("dark"); @@ -144,7 +144,7 @@ .courseware-search-bar { width: flex-grid(7); - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } .dashboard-search-bar { @@ -152,7 +152,7 @@ display: block; label { - @extend %t-regular; + @extend %t-regular !optional; font-family: $font-family-sans-serif; color: theme-color("dark"); @@ -182,7 +182,7 @@ } h2 { - @extend %t-title5; + @extend %t-title5 !optional; @include float(left); @include clear(left); diff --git a/lms/static/sass/shared/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss index f42804ef15eb..2b10768f75fa 100644 --- a/lms/static/sass/shared/_activation_messages.scss +++ b/lms/static/sass/shared/_activation_messages.scss @@ -6,11 +6,11 @@ padding: ($baseline/2); &.invalid { - @extend %error-message-colors; + @extend %error-message-colors !optional; } &.valid { - @extend %success-message-colors; + @extend %success-message-colors !optional; } } diff --git a/lms/static/sass/shared/_alerts_pattern_library_shim.scss b/lms/static/sass/shared/_alerts_pattern_library_shim.scss index e22217d63960..bef5ae4974d4 100644 --- a/lms/static/sass/shared/_alerts_pattern_library_shim.scss +++ b/lms/static/sass/shared/_alerts_pattern_library_shim.scss @@ -141,8 +141,8 @@ $bp-screen-md: 768px !default; } .alert-title { - @extend %hd-5; - @extend %headings-emphasized; + @extend %hd-5 !optional; + @extend %headings-emphasized !optional; @media (min-width: $bp-screen-md) { // shift the section up to make the alert more compact @@ -151,7 +151,7 @@ $bp-screen-md: 768px !default; } .alert-copy { - @extend %copy-base; + @extend %copy-base !optional; @media (min-width: $bp-screen-md) { // shift the message down to be in line with the icon @@ -160,7 +160,7 @@ $bp-screen-md: 768px !default; } .alert-copy-with-title { - @extend %copy-base; + @extend %copy-base !optional; } .alert-action { diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index 82ec1d9c98c6..2ef7cbff8216 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -30,7 +30,7 @@ @include transition(all 0.15s linear 0s); .status { - @extend %ui-depth3; + @extend %ui-depth3 !optional; background: $link-color; color: white; diff --git a/lms/static/sass/shared/_fields.scss b/lms/static/sass/shared/_fields.scss index 34536fd7c05f..53e8a572f445 100644 --- a/lms/static/sass/shared/_fields.scss +++ b/lms/static/sass/shared/_fields.scss @@ -107,7 +107,7 @@ } .u-field-message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include padding-left($baseline/2); diff --git a/lms/static/sass/shared/_footer-edx.scss b/lms/static/sass/shared/_footer-edx.scss index 6a7fe943ad26..fac3e1505091 100644 --- a/lms/static/sass/shared/_footer-edx.scss +++ b/lms/static/sass/shared/_footer-edx.scss @@ -247,7 +247,7 @@ footer#footer-edx-v3 { .legal-links, .social-media-links, .mobile-app-links { - @extend %ui-no-list; + @extend %ui-no-list !optional; .list-item { display: inline-block; @@ -343,7 +343,7 @@ footer#footer-edx-v3 { .legal-notices, .footer-logo, .external-links { - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } @media print { @@ -863,5 +863,5 @@ footer#footer-edx-v3 { } - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; } diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 18ef6d6a7dc8..486b256b74f5 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -4,7 +4,7 @@ @import 'neat/neat'; // lib - Neat .wrapper-footer { - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; box-shadow: 0 -1px 5px 0 $shadow-l1; border-top: 1px solid tint($m-gray, 50%); @@ -248,7 +248,7 @@ .wrapper-footer footer { width: 960px; - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; .colophon-about img { margin-top: ($baseline*1.5); diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 898933685b26..38919f10d4ba 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -2,7 +2,7 @@ @import 'neat/neat'; // lib - Neat .header-global { - @extend %ui-depth1; + @extend %ui-depth1 !optional; border-bottom: 1px solid $header-border-color; box-shadow: 0 1px 5px 0 $shadow-l1; @@ -122,7 +122,7 @@ .user { @include float(right); - @extend %ui-print-excluded; + @extend %ui-print-excluded !optional; padding-left: 0; margin: 0; @@ -363,7 +363,7 @@ display: inline-block; .btn { - @extend %m-btn-primary; + @extend %m-btn-primary !optional; } } } @@ -394,7 +394,7 @@ // CASE: marketing/course discovery .header-global-new { - @extend %ui-depth1; + @extend %ui-depth1 !optional; /* Temp. fix until applied globally */ box-sizing: border-box; diff --git a/lms/static/sass/shared/_help-tab.scss b/lms/static/sass/shared/_help-tab.scss index ea48096d10f1..9861a1f06eab 100644 --- a/lms/static/sass/shared/_help-tab.scss +++ b/lms/static/sass/shared/_help-tab.scss @@ -18,8 +18,8 @@ } .help-tab { - @extend %ui-depth2; - @extend %ui-print-excluded; + @extend %ui-depth2 !optional; + @extend %ui-print-excluded !optional; transform: rotate(-90deg); transform-origin: top left; diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss index 88eb6c354d53..f8b05adda666 100644 --- a/lms/static/sass/shared/_modal.scss +++ b/lms/static/sass/shared/_modal.scss @@ -10,7 +10,7 @@ } .modal { - @extend %ui-depth1; + @extend %ui-depth1 !optional; display: none; position: absolute; @@ -51,7 +51,7 @@ } .inner-wrapper { - @extend %ui-depth1; + @extend %ui-depth1 !optional; background: $modal-content-bg; border-radius: 0; @@ -69,7 +69,7 @@ } header { - @extend %ui-depth1; + @extend %ui-depth1 !optional; margin-bottom: ($baseline*1.5); overflow: hidden; @@ -89,7 +89,7 @@ } hr { - @extend %faded-hr-divider-light; + @extend %faded-hr-divider-light !optional; border: none; margin: 0; @@ -97,7 +97,7 @@ z-index: 2; &::after { - @extend %faded-hr-divider; + @extend %faded-hr-divider !optional; bottom: 0; content: ""; @@ -341,7 +341,7 @@ } .leanModal_box { - @extend .modal; + @extend .modal !optional; } // -------------------- @@ -352,7 +352,7 @@ // general reset .list-input, .list-actions { - @extend %ui-no-list; + @extend %ui-no-list !optional; } .settings-language-select .select { @@ -367,7 +367,7 @@ padding: 0 ($baseline*2) $baseline ($baseline*2); .list-actions-item { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $body-color; text-align: center; diff --git a/lms/static/sass/shared/_tooltips.scss b/lms/static/sass/shared/_tooltips.scss index 5b75ab5b9bf2..8579e424c7c4 100644 --- a/lms/static/sass/shared/_tooltips.scss +++ b/lms/static/sass/shared/_tooltips.scss @@ -15,7 +15,7 @@ // custom tool tip style. @mixin tooltip-hover-style ($margin-top) { p { - @extend %ui-depth2; + @extend %ui-depth2 !optional; background: $dark-gray; border-radius: ($baseline/5); diff --git a/lms/static/sass/shared/_unsubscribe.scss b/lms/static/sass/shared/_unsubscribe.scss index ed4bdce5a016..4a48cbe1102f 100644 --- a/lms/static/sass/shared/_unsubscribe.scss +++ b/lms/static/sass/shared/_unsubscribe.scss @@ -5,7 +5,7 @@ margin-bottom: $baseline; padding: ($baseline/2); - @extend %success-message-colors; + @extend %success-message-colors !optional; } h1 + hr { diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss index a4e5ff76eab6..1a4c4cc4ef65 100644 --- a/lms/static/sass/views/_account-settings.scss +++ b/lms/static/sass/views/_account-settings.scss @@ -21,7 +21,7 @@ .ui-loading-indicator, .ui-loading-error { - @extend .ui-loading-base; + @extend .ui-loading-base !optional; // center horizontally @include margin-left(auto); @include margin-right(auto); @@ -43,7 +43,7 @@ border-bottom: 4px solid $m-gray-l4; .header-title { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: ($baseline/2); padding-top: ($baseline*2); @@ -74,8 +74,8 @@ } button { - @extend %ui-clear-button; - @extend %btn-no-style; + @extend %ui-clear-button !optional; + @extend %btn-no-style !optional; @include appearance(none); @@ -112,8 +112,8 @@ // +Settings Section .account-settings-sections { .section-header { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; padding-top: ($baseline/2)*3; color: $dark-gray1; @@ -132,7 +132,7 @@ } .account-settings-header-subtitle-warning { - @extend .account-settings-header-subtitle; + @extend .account-settings-header-subtitle !optional; color: $alert-color; } @@ -202,10 +202,10 @@ } .u-field-link { - @extend %ui-clear-button; + @extend %ui-clear-button !optional; // set styles - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include font-size(18); @@ -257,8 +257,8 @@ padding: 0; .u-field-link { - @extend %ui-clear-button; - @extend %btn-pl-default-base; + @extend %ui-clear-button !optional; + @extend %btn-pl-default-base !optional; @include font-size(14); @@ -272,7 +272,7 @@ } .u-field-order-lines { - @extend .u-field-order; + @extend .u-field-order !optional; padding: 5px 0 0; font-weight: 100; @@ -492,10 +492,10 @@ .account-deletion-details { .btn-outline-primary { - @extend %ui-clear-button; + @extend %ui-clear-button !optional; // set styles - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include font-size(18); @@ -536,7 +536,7 @@ } .paragon__btn:not(.cancel-btn) { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; } } @@ -566,10 +566,10 @@ .delete-confirmation-wrapper { .paragon__modal-footer { .paragon__btn-outline-primary { - @extend %ui-clear-button; + @extend %ui-clear-button !optional; // set styles - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include margin-left(25px); @@ -653,7 +653,7 @@ margin-top: 10px; .btn-alert-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; @include font-size(18); @@ -665,10 +665,10 @@ } .btn-alert-secondary { - @extend %ui-clear-button; + @extend %ui-clear-button !optional; // set styles - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include font-size(18); diff --git a/lms/static/sass/views/_api-access.scss b/lms/static/sass/views/_api-access.scss index 75c32fa52fa6..8d23ed5bf3a3 100644 --- a/lms/static/sass/views/_api-access.scss +++ b/lms/static/sass/views/_api-access.scss @@ -1,6 +1,6 @@ #api-access-wrapper { h1 { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: 0; padding: $baseline; @@ -9,7 +9,7 @@ } h2 { - @extend %t-title5; + @extend %t-title5 !optional; margin: $baseline; @@ -17,7 +17,7 @@ } p { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin: $baseline; } @@ -41,7 +41,7 @@ } #api-access-status { - @extend %t-copy-base; + @extend %t-copy-base !optional; } .catalog-body { @@ -61,14 +61,14 @@ margin: 1.5*$baseline 0; .helptext { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; } } label { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: block; font-style: normal; @@ -80,7 +80,7 @@ input, textarea { - @extend %t-copy-base; + @extend %t-copy-base !optional; font-family: 'Open Sans'; font-style: normal; @@ -94,7 +94,7 @@ } &[type=submit] { - @extend %t-copy-base; + @extend %t-copy-base !optional; border-radius: 3px; border: none; @@ -111,7 +111,7 @@ list-style-type: none; li { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin: 0; color: $red; @@ -120,7 +120,7 @@ #api-access-submit, .preview-query { - @extend %t-copy-base; + @extend %t-copy-base !optional; border-radius: 3px; border: none; @@ -148,12 +148,12 @@ margin: $baseline 0; p { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin: $baseline/2 0; .application-label { - @extend %t-weight4; + @extend %t-weight4 !optional; } } } diff --git a/lms/static/sass/views/_decoupled-verification.scss b/lms/static/sass/views/_decoupled-verification.scss index 674cd903adf1..e58be8e4271b 100644 --- a/lms/static/sass/views/_decoupled-verification.scss +++ b/lms/static/sass/views/_decoupled-verification.scss @@ -194,7 +194,7 @@ } .photo-tip { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: black; margin-bottom: 20px; diff --git a/lms/static/sass/views/_financial-assistance.scss b/lms/static/sass/views/_financial-assistance.scss index 20370aa617da..24840ffa9f6c 100644 --- a/lms/static/sass/views/_financial-assistance.scss +++ b/lms/static/sass/views/_financial-assistance.scss @@ -1,5 +1,5 @@ %fa-copy { - @extend %t-copy-base; + @extend %t-copy-base !optional; padding: ($baseline/2) 0; margin: 0; @@ -12,7 +12,7 @@ max-width: 1180px; h1 { - @extend %t-title4; + @extend %t-title4 !optional; @include text-align(left); @@ -23,15 +23,15 @@ } h2 { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; margin-top: ($baseline/2); text-transform: none; } p { - @extend %fa-copy; + @extend %fa-copy !optional; font-size: 0.875em; } @@ -129,7 +129,7 @@ } .title { - @extend %fa-copy; + @extend %fa-copy !optional; padding: 0; @@ -139,7 +139,7 @@ } .data { - @extend %fa-copy; + @extend %fa-copy !optional; padding: 0; color: $black; @@ -148,7 +148,7 @@ } .financial-assistance-form { - @extend .login-register; + @extend .login-register !optional; max-width: 800px; diff --git a/lms/static/sass/views/_homepage.scss b/lms/static/sass/views/_homepage.scss index bb7963fba6c3..e669cc8c52c2 100644 --- a/lms/static/sass/views/_homepage.scss +++ b/lms/static/sass/views/_homepage.scss @@ -14,7 +14,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi width: 100%; .courses-listing { - @extend %ui-no-list; + @extend %ui-no-list !optional; .courses-listing-item { margin: 0 0 ($baseline*1.5) 0; @@ -41,7 +41,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi &::before { @include left(0); - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; top: 0; @@ -62,7 +62,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi box-sizing: border-box; - @extend %ui-depth2; + @extend %ui-depth2 !optional; position: absolute; top: ($baseline*2.75); @@ -91,7 +91,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .course-organization, .course-code, .course-date { - @extend %t-icon6; + @extend %t-icon6 !optional; color: $gray-d2; } @@ -118,7 +118,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .course-title { @include line-height(16); - @extend %t-icon4; + @extend %t-icon4 !optional; margin: ($baseline*0.25) 0 ($baseline*1.75) 0; padding: 0 ($baseline*0.75); diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index cabf933c0dcb..25206a132cd7 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -70,7 +70,7 @@ -moz-flex-wrap: wrap; h2 { - @extend %t-title4; + @extend %t-title4 !optional; margin-top: $baseline; letter-spacing: normal; @@ -79,8 +79,8 @@ } h3 { - @extend %t-title6; - @extend %t-light; + @extend %t-title6 !optional; + @extend %t-light !optional; margin: 0; letter-spacing: normal; @@ -90,7 +90,7 @@ a, label { - @extend %expand-clickable-area; + @extend %expand-clickable-area !optional; } a { @@ -122,7 +122,7 @@ ul.fa-ul{ max-width: 500px; .instructions { - @extend %t-copy-base; + @extend %t-copy-base !optional; } /* Temp. fix until applied globally */ @@ -212,7 +212,7 @@ ul.fa-ul{ } %nav-btn-base { - @extend %btn-secondary-blue-outline; + @extend %btn-secondary-blue-outline !optional; width: 100%; height: ($baseline*2); @@ -222,8 +222,8 @@ ul.fa-ul{ } .nav-btn { - @extend %nav-btn-base; - @extend %t-strong; + @extend %nav-btn-base !optional; + @extend %t-strong !optional; } .form-type, @@ -235,11 +235,11 @@ ul.fa-ul{ } .toggle-form { - @extend %t-action1; + @extend %t-action1 !optional; } .note { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; margin: ($baseline/2) ($baseline/2) 0 ($baseline/2); @@ -289,7 +289,7 @@ ul.fa-ul{ } .form-label { - @extend %bold-label; + @extend %bold-label !optional; padding: 0 0 0 ($baseline/4); } @@ -380,7 +380,7 @@ ul.fa-ul{ } .field-link { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; margin-bottom: 5px; @@ -487,7 +487,7 @@ ul.fa-ul{ .tip, .label-optional { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $uxpl-gray-base; } @@ -518,7 +518,7 @@ ul.fa-ul{ } .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; padding: 1ex 1em; text-transform: none; @@ -527,13 +527,13 @@ ul.fa-ul{ margin-top: $baseline; .icon { - @extend %sso-icon; + @extend %sso-icon !optional; } } .login-provider { - @extend %btn-secondary-grey-outline; - @extend %t-action4; + @extend %btn-secondary-grey-outline !optional; + @extend %t-action4 !optional; @include padding(0, 0, 0, $baseline*2); @include text-align(left); @@ -548,7 +548,7 @@ ul.fa-ul{ text-transform: none; .icon { - @extend %sso-icon; + @extend %sso-icon !optional; @include left(0); @@ -681,9 +681,9 @@ ul.fa-ul{ } .button-secondary-login { - @extend %nav-btn-base; - @extend %t-action4; - @extend %t-regular; + @extend %nav-btn-base !optional; + @extend %t-action4 !optional; + @extend %t-regular !optional; font-size: 1rem; font-weight: 600; @@ -704,7 +704,7 @@ ul.fa-ul{ background: tint($yellow, 20%); .message-title { - @extend %t-title5; + @extend %t-title5 !optional; font-family: $font-family-sans-serif; margin: 0 0 ($baseline/4) 0; @@ -713,7 +713,7 @@ ul.fa-ul{ .message-copy, .message-copy p { - @extend %t-copy-base; + @extend %t-copy-base !optional; font-family: $font-family-sans-serif; margin: 0 !important; @@ -772,7 +772,7 @@ ul.fa-ul{ .institution-list { .institution { - @extend %t-copy-base; + @extend %t-copy-base !optional; } } diff --git a/lms/static/sass/views/_oauth2.scss b/lms/static/sass/views/_oauth2.scss index 9849cc4c4446..48a108271a33 100644 --- a/lms/static/sass/views/_oauth2.scss +++ b/lms/static/sass/views/_oauth2.scss @@ -21,7 +21,7 @@ font-family: $font-family-sans-serif; h1 { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: 0; margin-left: 0; @@ -32,7 +32,7 @@ } p { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin: $baseline/2 0; } @@ -42,13 +42,13 @@ } .btn-authorization-allow { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; margin-left: 20px; line-height: 0.7em; } .btn-authorization-cancel { - @extend %btn-secondary-blue-outline; + @extend %btn-secondary-blue-outline !optional; } } diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index bcf6c3aef895..3d355ce80cfe 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -38,7 +38,7 @@ $light-border: 1px solid $gray-l5; .cart-errors { @include text-align(center); - @extend %t-copy-base; + @extend %t-copy-base !optional; display: none; margin-bottom: $baseline; @@ -49,7 +49,7 @@ $light-border: 1px solid $gray-l5; } #expiry-msg { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-top: ($baseline*0.15); border-top: $light-border; @@ -62,7 +62,7 @@ $light-border: 1px solid $gray-l5; .title { @include text-align(left); - @extend %t-title4; + @extend %t-title4 !optional; border-bottom: $light-border; } @@ -82,7 +82,7 @@ $light-border: 1px solid $gray-l5; width: calc(100% - #{$enrollment-details-width-difference}); .sub-title { - @extend %t-title5; + @extend %t-title5 !optional; color: $gray-l1; } @@ -96,20 +96,20 @@ $light-border: 1px solid $gray-l5; .course-dates { @include float(right); - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; } .course-title h1 { @include text-align(left); - @extend %t-title4; - @extend %t-strong; + @extend %t-title4 !optional; + @extend %t-strong !optional; color: $black-t3; } .enrollment-text { - @extend %t-copy-base; + @extend %t-copy-base !optional; line-height: normal; color: $gray-l1; @@ -136,7 +136,7 @@ $light-border: 1px solid $gray-l5; @include border-radius(3px); @include text-align(center); - @extend %t-copy-lead2; + @extend %t-copy-lead2 !optional; display: inline-block; background-clip: padding-box; @@ -158,7 +158,7 @@ $light-border: 1px solid $gray-l5; @include float(right); @include border-radius(3px); - @extend %t-copy-lead2; + @extend %t-copy-lead2 !optional; display: inline-block; box-shadow: 0 1px 0 0 $blue2 inset; @@ -186,8 +186,8 @@ $light-border: 1px solid $gray-l5; a.blue { @include border-radius(3px); - @extend %t-copy-lead2; - @extend %t-regular; + @extend %t-copy-lead2 !optional; + @extend %t-regular !optional; display: inline-block; margin: ($baseline/2) 0 $baseline 0; @@ -208,8 +208,8 @@ $light-border: 1px solid $gray-l5; input[type="text"], input[type="email"], select { - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; border: $input-border; padding: ($baseline*0.4) ($baseline*0.6); @@ -240,7 +240,7 @@ $light-border: 1px solid $gray-l5; h1 { @include text-align(left); - @extend %t-title4; + @extend %t-title4 !optional; margin: ($baseline/2) 0 0 0; padding: ($baseline*1.5) 0; @@ -249,7 +249,7 @@ $light-border: 1px solid $gray-l5; } .steps { - @extend %ui-no-list; + @extend %ui-no-list !optional; border-top: $steps-border; border-bottom: $steps-border; @@ -266,7 +266,7 @@ $light-border: 1px solid $gray-l5; //STATE: active &.active { - @extend %t-regular; + @extend %t-regular !optional; border-bottom: $steps-border; } @@ -328,7 +328,7 @@ $light-border: 1px solid $gray-l5; h3, h3 span { - @extend %t-title6; + @extend %t-title6 !optional; padding: 0; color: $light-gray2; @@ -349,7 +349,7 @@ $light-border: 1px solid $gray-l5; .course-registration-title, .course-dates-title { - @extend %t-title6; + @extend %t-title6 !optional; display: block; padding: 0; @@ -358,7 +358,7 @@ $light-border: 1px solid $gray-l5; .course-display-name, .course-display-dates { - @extend %t-title4; + @extend %t-title4 !optional; display: block; color: $dark-gray2; @@ -371,7 +371,7 @@ $light-border: 1px solid $gray-l5; h1 { @include float(left); - @extend %t-title4; + @extend %t-title4 !optional; padding: 0 0 ($baseline/2) 0; width: ($baseline*35); @@ -384,7 +384,7 @@ $light-border: 1px solid $gray-l5; } span { - @extend %t-copy-base; + @extend %t-copy-base !optional; } } @@ -404,8 +404,8 @@ $light-border: 1px solid $gray-l5; .col-1 { @include float(left); - @extend %t-copy-base; - @extend %t-regular; + @extend %t-copy-base !optional; + @extend %t-regular !optional; padding-top: ($baseline*0.55); width: ($baseline*22.5); @@ -415,7 +415,7 @@ $light-border: 1px solid $gray-l5; span { @include padding-left($baseline); - @extend %t-copy-lead2; + @extend %t-copy-lead2 !optional; color: $dark-gray1; } @@ -443,8 +443,8 @@ $light-border: 1px solid $gray-l5; position: relative; label { - @extend %t-copy-base; - @extend %t-strong; + @extend %t-copy-base !optional; + @extend %t-strong !optional; cursor: text; color: $light-gray2; @@ -462,8 +462,8 @@ $light-border: 1px solid $gray-l5; input[type="text"] { @include text-align(center); - @extend %t-copy-lead2; - @extend %t-strong; + @extend %t-copy-lead2 !optional; + @extend %t-strong !optional; box-shadow: none; border: none; @@ -475,7 +475,7 @@ $light-border: 1px solid $gray-l5; //STATE: focus &:focus { - @extend %no-outline; + @extend %no-outline !optional; } } } @@ -492,7 +492,7 @@ $light-border: 1px solid $gray-l5; text-shadow: none; i { - @extend %t-icon3; + @extend %t-icon3 !optional; color: $dark-gray2; @@ -503,7 +503,7 @@ $light-border: 1px solid $gray-l5; //CASE: has class inc &.inc { - @extend %no-outline; + @extend %no-outline !optional; top: ($baseline*0.45); width: auto; @@ -511,7 +511,7 @@ $light-border: 1px solid $gray-l5; //CASE: has class dec &.dec { - @extend %no-outline; + @extend %no-outline !optional; top: ($baseline*1.5); width: auto; @@ -543,13 +543,13 @@ $light-border: 1px solid $gray-l5; @include float(right); @include padding($baseline*1.25, $baseline*1.75, $baseline*1.25, 0); - @extend %t-action2; + @extend %t-action2 !optional; display: inline-block; // STATE: focus &:focus { - @extend %no-outline; + @extend %no-outline !optional; } } @@ -583,7 +583,7 @@ $light-border: 1px solid $gray-l5; i { @include line-height(27.02); - @extend %t-icon3; + @extend %t-icon3 !optional; color: $dark-gray2; } @@ -610,8 +610,8 @@ $light-border: 1px solid $gray-l5; @include clearfix(); a { - @extend %t-copy-lead1; - @extend %t-strong; + @extend %t-copy-lead1 !optional; + @extend %t-strong !optional; display: inline-block; cursor: pointer; @@ -629,8 +629,8 @@ $light-border: 1px solid $gray-l5; b { @include padding-left($baseline); - @extend %t-copy-lead2; - @extend %t-strong; + @extend %t-copy-lead2 !optional; + @extend %t-strong !optional; letter-spacing: 0; } @@ -643,8 +643,8 @@ $light-border: 1px solid $gray-l5; display: inline-block; input[type="text"] { - @extend %t-copy-base; - @extend %t-strong; + @extend %t-copy-base !optional; + @extend %t-strong !optional; border: $input-border; padding: ($baseline*0.4) ($baseline*0.6); @@ -665,7 +665,7 @@ $light-border: 1px solid $gray-l5; } .error-text { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; padding-bottom: 0; @@ -685,7 +685,7 @@ $light-border: 1px solid $gray-l5; .green { @include margin-right($baseline); - @extend %t-strong; + @extend %t-strong !optional; color: $green1; } @@ -708,8 +708,8 @@ $light-border: 1px solid $gray-l5; } button[type="submit"] { - @extend %t-action2; - @extend %t-strong; + @extend %t-action2 !optional; + @extend %t-strong !optional; float: none; padding: ($baseline*0.35) $baseline; @@ -740,7 +740,7 @@ $light-border: 1px solid $gray-l5; .billing-detail-label { @include margin-right($baseline); - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline-block; width: ($baseline*9.5); @@ -748,7 +748,7 @@ $light-border: 1px solid $gray-l5; } .billing-detail-value { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline-block; margin: 0; @@ -789,8 +789,8 @@ $light-border: 1px solid $gray-l5; label { @include padding($baseline*0.4, $baseline*0.75, $baseline*0.4, $baseline*0.3); - @extend %t-copy-base; - @extend %t-regular; + @extend %t-copy-base !optional; + @extend %t-regular !optional; display: inline-block; margin-bottom: 0; @@ -814,8 +814,8 @@ $light-border: 1px solid $gray-l5; @include margin-left($baseline*0.75); @include padding($baseline*0.75, $baseline*3, $baseline*1.1, $baseline*1.5); - @extend %t-copy-lead2; - @extend %t-strong; + @extend %t-copy-lead2 !optional; + @extend %t-strong !optional; width: auto; height: ($baseline*3.35); @@ -836,7 +836,7 @@ $light-border: 1px solid $gray-l5; p { @include text-align(right); - @extend %t-copy-base; + @extend %t-copy-base !optional; padding: ($baseline*0.65) 0; } @@ -848,7 +848,7 @@ $light-border: 1px solid $gray-l5; .fa-caret-right { @include right($baseline*1.5); - @extend %t-icon3; + @extend %t-icon3 !optional; position: absolute; top: ($baseline*1.1); @@ -860,15 +860,15 @@ $light-border: 1px solid $gray-l5; .disclaimer { @include text-align(right); - @extend %t-light; + @extend %t-light !optional; padding: ($baseline/2) 0; color: $light-gray2; } h3 { - @extend %t-title6; - @extend %t-regular; + @extend %t-title6 !optional; + @extend %t-regular !optional; padding: ($baseline*1.5) $baseline; color: $dark-gray1; @@ -879,7 +879,7 @@ $light-border: 1px solid $gray-l5; width: 100%; h3 { - @extend %t-title5; + @extend %t-title5 !optional; margin-bottom: ($baseline/4); padding: ($baseline*0.6) 0; @@ -909,8 +909,8 @@ $light-border: 1px solid $gray-l5; margin-bottom: ($baseline*0.75); label { - @extend %t-copy-base; - @extend %t-regular; + @extend %t-copy-base !optional; + @extend %t-regular !optional; display: block; color: $dark-gray2; @@ -918,7 +918,7 @@ $light-border: 1px solid $gray-l5; } input { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin-bottom: ($baseline/4); width: 100%; @@ -933,7 +933,7 @@ $light-border: 1px solid $gray-l5; } .error-text { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; display: block; padding-bottom: 0; @@ -981,7 +981,7 @@ $light-border: 1px solid $gray-l5; padding: $baseline; h2 { - @extend %t-strong; + @extend %t-strong !optional; margin-bottom: 0; color: $dark-gray1; @@ -993,7 +993,7 @@ $light-border: 1px solid $gray-l5; letter-spacing: 0; .blue-link { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $blue2; @@ -1013,7 +1013,7 @@ $light-border: 1px solid $gray-l5; color: $dark-gray1; h2 { - @extend %t-title5; + @extend %t-title5 !optional; } } @@ -1076,7 +1076,7 @@ $light-border: 1px solid $gray-l5; // CASE: has first child &:first-child { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; @include text-align(left); @@ -1091,7 +1091,7 @@ $light-border: 1px solid $gray-l5; @include border-radius(3px); @include text-align(center); - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline-block; padding: ($baseline/10) ($baseline/2); @@ -1133,8 +1133,8 @@ $light-border: 1px solid $gray-l5; h2 { @include text-align(center); - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; margin-top: $baseline; margin-bottom: ($baseline/4); @@ -1146,7 +1146,7 @@ $light-border: 1px solid $gray-l5; p { @include text-align(center); - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; text-shadow: 0 1px 1px $white; color: $gray-l1; @@ -1155,8 +1155,8 @@ $light-border: 1px solid $gray-l5; a.blue { @include border-radius(3px); - @extend %t-copy-lead2; - @extend %t-regular; + @extend %t-copy-lead2 !optional; + @extend %t-regular !optional; display: inline-block; margin: ($baseline/2) 0 $baseline 0; diff --git a/lms/static/sass/views/_support.scss b/lms/static/sass/views/_support.scss index ca6f632768d6..4887440b9851 100644 --- a/lms/static/sass/views/_support.scss +++ b/lms/static/sass/views/_support.scss @@ -67,8 +67,8 @@ background-color: $white; .enrollment-change-title { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; @include text-align(left); @@ -85,7 +85,7 @@ label, select, input { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: inline; font-style: normal; @@ -93,8 +93,8 @@ } .enrollment-change-errors { - @extend %t-copy-sub1; - @extend %t-light; + @extend %t-copy-sub1 !optional; + @extend %t-light !optional; color: $red; } @@ -107,7 +107,7 @@ .enrollment-change-submit, .enrollment-change-cancel { - @extend %t-action4; + @extend %t-action4 !optional; margin: ($baseline/4) auto; text-transform: none; @@ -128,19 +128,19 @@ } .enrollment-results { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; .enrollment-table { display: inline-block; } th { - @extend %t-title7; + @extend %t-title7 !optional; } .change-enrollment-btn, .change-enrollment-btn:hover { - @extend %t-action4; + @extend %t-action4 !optional; margin: ($baseline/4) auto; padding: ($baseline/4) 1px; @@ -159,7 +159,7 @@ } th { - @extend %t-title7; + @extend %t-title7 !optional; text-align: center; } @@ -170,7 +170,7 @@ .disable-account-btn, .disable-account-btn:hover { - @extend %t-action4; + @extend %t-action4 !optional; letter-spacing: normal; text-transform: none; @@ -191,7 +191,7 @@ } th { - @extend %t-title7; + @extend %t-title7 !optional; text-align: center; } diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index e17e6b5f0d86..e640f155566c 100644 --- a/lms/static/sass/views/_teams.scss +++ b/lms/static/sass/views/_teams.scss @@ -28,7 +28,7 @@ padding: $baseline $baseline ($baseline/2) $baseline; .page-title { - @extend %t-title4; + @extend %t-title4 !optional; margin-bottom: ($baseline/4); text-transform: none; @@ -36,7 +36,7 @@ } .page-description { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-bottom: ($baseline/4); color: $gray; @@ -60,7 +60,7 @@ // ui bits .breadcrumbs { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; .nav-item { @include margin-right($baseline/2); @@ -88,7 +88,7 @@ } .search-label { - @extend %text-sr; + @extend %text-sr !optional; } .search-field { @@ -101,7 +101,7 @@ } .action-search { - @extend %button-reset; + @extend %button-reset !optional; background-color: $gray-l3; padding: ($baseline/5) ($baseline/2); @@ -123,7 +123,7 @@ @include right(0); @include margin(0, ($baseline/4), 0, 0); - @extend %button-reset; + @extend %button-reset !optional; position: absolute; top: 0; @@ -144,11 +144,11 @@ } .page-content-nav { - @extend %page-content-nav; + @extend %page-content-nav !optional; } .intro { - @extend %t-weight4; + @extend %t-weight4 !optional; } .listing-tools { @@ -195,14 +195,14 @@ } .card-type { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; color: $gray; } .card-title { - @extend %t-title5; - @extend %t-strong; + @extend %t-title5 !optional; + @extend %t-strong !optional; margin-bottom: rem(0.5); overflow: hidden; @@ -211,7 +211,7 @@ } .card-description { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray; } @@ -220,7 +220,7 @@ @include clearfix(); .action-view { - @extend %btn-pl-default-base; + @extend %btn-pl-default-base !optional; @include float(right); @@ -231,7 +231,7 @@ .wrapper-card-meta { @include clearfix(); - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; padding: ($baseline/2) $baseline; background-color: $gray-l6; @@ -260,7 +260,7 @@ } .list-member-thumbs { - @extend %ui-no-list; + @extend %ui-no-list !optional; display: inline-block; vertical-align: middle; @@ -329,8 +329,8 @@ &.has-pennant { .pennant { - @extend %t-copy-sub2; - @extend %t-strong; + @extend %t-copy-sub2 !optional; + @extend %t-strong !optional; display: block; position: absolute; @@ -386,7 +386,7 @@ margin-bottom: $baseline; - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; color: $gray; @@ -431,14 +431,14 @@ .create-team { legend { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/4); } .description { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; margin-bottom: ($baseline/2); color: $gray-l1; @@ -453,7 +453,7 @@ } &.is-required { - @extend %t-weight4; + @extend %t-weight4 !optional; .label::after { @include margin-left($baseline/4); @@ -463,7 +463,7 @@ } .input-text { - @extend %t-copy-base; + @extend %t-copy-base !optional; transition: all $tmg-f2 ease-in-out 0s; display: block; @@ -475,7 +475,7 @@ } .input-select { - @extend %t-copy-base; + @extend %t-copy-base !optional; width: 90%; margin-bottom: ($baseline/4); @@ -505,7 +505,7 @@ } .tip { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; display: block; color: $gray-l1; @@ -535,8 +535,8 @@ } .action { - @extend %t-copy; - @extend %t-action2; + @extend %t-copy !optional; + @extend %t-action2 !optional; @include margin-right ($baseline/2); @@ -544,7 +544,7 @@ } .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; &:focus { border: inherit; @@ -556,7 +556,7 @@ } .action-cancel { - @extend %button-reset; + @extend %button-reset !optional; display: inline-block; border: 1px solid transparent; @@ -582,7 +582,7 @@ } .join-team-message { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include text-align(right); @@ -592,15 +592,15 @@ } .team-actions { - @extend %ui-well; + @extend %ui-well !optional; margin: 20px 1.2%; color: $gray; text-align: center; .title { - @extend %t-title6; - @extend %t-strong; + @extend %t-title6 !optional; + @extend %t-strong !optional; margin-bottom: ($baseline/2); text-align: inherit; @@ -667,7 +667,7 @@ .u-field-message { display: block; - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include padding-left(0); diff --git a/lms/static/sass/views/_text-me-the-app.scss b/lms/static/sass/views/_text-me-the-app.scss index 9dd1aeb28175..40782e227f81 100644 --- a/lms/static/sass/views/_text-me-the-app.scss +++ b/lms/static/sass/views/_text-me-the-app.scss @@ -26,7 +26,7 @@ .text-me-fragment { h2 { - @extend %t-title4; + @extend %t-title4 !optional; letter-spacing: normal; font-family: $font-family-sans-serif; @@ -34,8 +34,8 @@ } h3 { - @extend %t-title6; - @extend %t-light; + @extend %t-title6 !optional; + @extend %t-light !optional; margin: 0; letter-spacing: normal; @@ -69,7 +69,7 @@ } .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; padding: 1ex 1em; text-transform: none; diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index eb8686a5c8ea..899ae3148008 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -5,7 +5,7 @@ // MISC: extends - button %btn-verify-primary { - @extend %btn-primary-green; + @extend %btn-primary-green !optional; } // ==================== @@ -27,7 +27,7 @@ } .title-expand { - @extend %ui-fake-link; + @extend %ui-fake-link !optional; color: $m-blue-d2; @@ -67,7 +67,7 @@ h4, h5, h6 { - @extend %t-title; + @extend %t-title !optional; color: $m-gray-d4; } @@ -119,7 +119,7 @@ } label { - @extend %t-weight4; + @extend %t-weight4 !optional; font-family: $font-family-sans-serif; font-style: normal; @@ -143,7 +143,7 @@ button[type="submit"] { @include font-size(16); - @extend %t-weight4; + @extend %t-weight4 !optional; text-transform: none; text-shadow: none; @@ -175,7 +175,7 @@ .wrapper-photos, .field-group, .list-info { - @extend %ui-no-list; + @extend %ui-no-list !optional; } // ==================== @@ -196,19 +196,19 @@ // elements: common copy .title { - @extend %t-title5; - @extend %t-weight1; + @extend %t-title5 !optional; + @extend %t-weight1 !optional; } .copy { - @extend %t-weight1; + @extend %t-weight1 !optional; } // ==================== // elements - controls .action-primary { - @extend %btn-verify-primary; + @extend %btn-verify-primary !optional; // needed for override due to .register a:link styling border: 0 !important; color: $white !important; @@ -216,14 +216,14 @@ // elements - controls .action-primary-blue { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; // needed for override due to .register a:link styling border: 0 !important; color: $white !important; } .action-confirm { - @extend %btn-verify-primary; + @extend %btn-verify-primary !optional; // needed for override due to .register a:link styling border: 0 !important; color: $white !important; @@ -238,7 +238,7 @@ // UI: reports/tables .wrapper-report { .report { - @extend %ui-window; + @extend %ui-window !optional; width: flex-grid(12, 12); border-color: $m-gray-t3; @@ -249,7 +249,7 @@ } td { - @extend %t-weight3; + @extend %t-weight3 !optional; vertical-align: middle; padding: ($baseline*0.75) $baseline; @@ -257,7 +257,7 @@ } th { - @extend %t-weight2; + @extend %t-weight2 !optional; padding: ($baseline/2) $baseline; } @@ -268,8 +268,8 @@ } th[scope="col"] { - @extend %t-title7; - @extend %t-weight2; + @extend %t-title7 !optional; + @extend %t-weight2 !optional; vertical-align: middle; color: $m-gray-d3; @@ -290,7 +290,7 @@ } .report-receipt-provider { - @extend %ui-window; + @extend %ui-window !optional; padding: ($baseline*0.75) $baseline; @@ -318,7 +318,7 @@ @include text-align(center); button { - @extend %btn-pl-primary-base; + @extend %btn-pl-primary-base !optional; white-space: nowrap; } @@ -330,13 +330,13 @@ // UI: help .help-item { .title { - @extend %hd-lv4; + @extend %hd-lv4 !optional; margin-bottom: ($baseline/4); } .copy { - @extend %copy-detail; + @extend %copy-detail !optional; } strong { @@ -373,19 +373,19 @@ width: flex-grid(11, 12); .title { - @extend %t-title6; - @extend %t-weight4; + @extend %t-title6 !optional; + @extend %t-weight4 !optional; } .copy { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } .msg-icon { width: flex-grid(1, 12); - @extend %t-icon2; + @extend %t-icon2 !optional; @include margin-right(flex-gutter()); @@ -464,7 +464,7 @@ @include text-align(right); .sts-track-value { - @extend %copy-badge; + @extend %copy-badge !optional; display: inline-block; background: $verified-color-lvl3; @@ -489,8 +489,8 @@ .sts-course-org, .sts-course-number, .sts-course-name { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; @include font-size(14); @include line-height(14); @@ -547,7 +547,7 @@ .progress-sts { @include size($baseline/4); - @extend %ui-depth1; + @extend %ui-depth1 !optional; position: absolute; top: 43px; @@ -582,7 +582,7 @@ } .progress-step { - @extend %ui-depth2; + @extend %ui-depth2 !optional; position: relative; display: table-cell; @@ -605,8 +605,8 @@ background: $white; .step-number { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; @include line-height(0); @include margin(16px, auto, 0, auto); @@ -616,8 +616,8 @@ } .step-name { - @extend %t-title7; - @extend %t-weight4; + @extend %t-title7 !optional; + @extend %t-weight4 !optional; color: $m-gray-l1; } @@ -679,13 +679,13 @@ width: flex-grid(12, 12); > .title { - @extend %hd-lv2; + @extend %hd-lv2 !optional; color: $m-blue-d1; } .instruction { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; margin-bottom: $baseline; } @@ -699,11 +699,11 @@ } .title { - @extend %hd-lv3; + @extend %hd-lv3 !optional; } .copy { - @extend %copy-detail; + @extend %copy-detail !optional; } } @@ -713,7 +713,7 @@ @include outer-container; .title { - @extend %hd-lv3; + @extend %hd-lv3 !optional; margin-bottom: 10px; } @@ -768,7 +768,7 @@ } .help-item-emphasis { - @extend %t-weight4; + @extend %t-weight4 !optional; } } @@ -784,7 +784,7 @@ } .task { - @extend %ui-window; + @extend %ui-window !optional; @include float(left); @include margin-right(flex-gutter()); @@ -803,12 +803,12 @@ .control { .action { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; padding: ($baseline/2) ($baseline*0.75); .icon { - @extend %t-icon4; + @extend %t-icon4 !optional; padding: ($baseline*0.25) ($baseline*0.5); display: block; @@ -828,7 +828,7 @@ // STATE: approved &.approved { .action { - @extend %btn-verify-primary; + @extend %btn-verify-primary !optional; padding: ($baseline/2) ($baseline*0.75); } @@ -880,7 +880,7 @@ @include text-align(right); .action-retakephotos a { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; @include font-size(14); @@ -900,7 +900,7 @@ color: $black; .page-title { - @extend %t-strong; + @extend %t-strong !optional; border-bottom: 2px solid $m-gray-d3; padding-bottom: ($baseline*0.75); @@ -920,7 +920,7 @@ p { @include line-height(22); - @extend %t-strong; + @extend %t-strong !optional; margin-top: 0; color: $black; @@ -935,7 +935,7 @@ .product-info { @include font-size(22); - @extend %t-strong; + @extend %t-strong !optional; color: $blue; } @@ -1022,14 +1022,14 @@ } > .title { - @extend %hd-lv3; + @extend %hd-lv3 !optional; } .copy { - @extend %copy-base; + @extend %copy-base !optional; strong { - @extend %t-weight5; + @extend %t-weight5 !optional; color: $m-gray-d4; } @@ -1056,7 +1056,7 @@ } .placeholder-photo { - @extend %ui-window; + @extend %ui-window !optional; padding: ($baseline*0.75) $baseline; @@ -1072,11 +1072,11 @@ @include margin-left($baseline); .title { - @extend %hd-lv5; + @extend %hd-lv5 !optional; } .copy { - @extend %copy-detail; + @extend %copy-detail !optional; } // help - general list @@ -1122,7 +1122,7 @@ @include text-align(right); .action-editname a { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; @include font-size(14); @@ -1166,7 +1166,7 @@ .contribution-option-other1 label, .contribution-option-other2 label { - @extend %text-sr; + @extend %text-sr !optional; } } } @@ -1229,8 +1229,8 @@ border-top: ($baseline/5) solid $m-gray-l4; .copy { - @extend %t-copy-lead1; - @extend %t-weight4; + @extend %t-copy-lead1 !optional; + @extend %t-weight4 !optional; @include left(calc(50% - 46px)); @@ -1248,7 +1248,7 @@ // UI: nav - wizard .nav-wizard { - @extend %ui-well; + @extend %ui-well !optional; @include clearfix(); @@ -1258,7 +1258,7 @@ padding: ($baseline*0.75) $baseline; .help-inline { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; @include float(left); @@ -1276,7 +1276,7 @@ background: $m-gray-l4; .action-primary { - @extend %btn-primary-disabled; + @extend %btn-primary-disabled !optional; } } } @@ -1313,7 +1313,7 @@ } .label-value { - @extend %t-weight4; + @extend %t-weight4 !optional; } .denomination-name { @@ -1335,7 +1335,7 @@ // help - faq .list-faq { .faq-question { - @extend %hd-lv3; + @extend %hd-lv3 !optional; border-bottom: 1px solid $m-gray-l4; padding-bottom: ($baseline/4); @@ -1353,13 +1353,13 @@ width: flex-grid(12, 12); > .title { - @extend %hd-lv2; + @extend %hd-lv2 !optional; color: $m-blue-d1; } .instruction { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; margin-bottom: $baseline; } @@ -1418,7 +1418,7 @@ } .sts-track { - @extend %text-sr; + @extend %text-sr !optional; } .form-register-choose { @@ -1466,26 +1466,26 @@ } .title { - @extend %t-title5; - @extend %t-weight5; + @extend %t-title5 !optional; + @extend %t-weight5 !optional; margin-bottom: ($baseline/2); width: calc(100% - 30px); } .copy { - @extend %t-copy-base; + @extend %t-copy-base !optional; } .wrapper-copy-inline { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: inline-block; width: 100%; } .copy-inline { - @extend %t-copy-base; + @extend %t-copy-base !optional; display: inline-block; } @@ -1494,7 +1494,7 @@ @include fill-parent; input { - @extend %t-weight4; + @extend %t-weight4 !optional; padding: ($baseline/2) ($baseline*0.75); width: 100%; @@ -1523,7 +1523,7 @@ } .action-select input { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; } } @@ -1552,14 +1552,14 @@ .action-intro { @include fill-parent; - @extend %copy-detail; + @extend %copy-detail !optional; @include text-align(left); } .action-select input, .action-select button { - @extend %btn-verify-primary; + @extend %btn-verify-primary !optional; } .action-select button[name="verified_mode"] { @@ -1569,7 +1569,7 @@ // extra register options/info .title-expand { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; font-weight: 500 !important; display: inline-block; @@ -1585,15 +1585,15 @@ @include span-columns(4); .title { - @extend %hd-lv4; - @extend %t-weight4; + @extend %hd-lv4 !optional; + @extend %t-weight4 !optional; margin-top: $baseline; margin-bottom: ($baseline/2); } .copy { - @extend %copy-detail; + @extend %copy-detail !optional; } } @@ -1607,8 +1607,8 @@ margin: $baseline 0; .label { - @extend %hd-lv4; - @extend %t-weight4; + @extend %hd-lv4 !optional; + @extend %t-weight4 !optional; margin-bottom: ($baseline/2); } @@ -1664,7 +1664,7 @@ .contribution-option-other1 label, .contribution-option-other2 label { - @extend %text-sr; + @extend %text-sr !optional; } } } @@ -1769,7 +1769,7 @@ text-align: center; .req { - @extend %ui-window; + @extend %ui-window !optional; @include margin-right(flex-gutter()); @@ -1785,8 +1785,8 @@ } .title { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; padding: $baseline; border-bottom: 1px solid $verified-color-lvl4; @@ -1802,7 +1802,7 @@ border-radius: ($baseline*10); *[class^="icon"] { - @extend %t-icon1; + @extend %t-icon1 !optional; color: $white; } @@ -1813,12 +1813,12 @@ } .fa-stack-2x { - @extend %ui-depth1; + @extend %ui-depth1 !optional; } .fa-stack-1x { - @extend %ui-depth2; - @extend %t-icon5; + @extend %ui-depth2 !optional; + @extend %t-icon5 !optional; position: absolute; @@ -1862,14 +1862,14 @@ } .copy-super { - @extend %t-copy-base; + @extend %t-copy-base !optional; margin-bottom: ($baseline/2); color: $verified-color-lvl1; } .copy-sub { - @extend %t-copy-sub2; + @extend %t-copy-sub2 !optional; } .actions { @@ -1885,8 +1885,8 @@ border-color: $m-pink-l3; .title { - @extend %t-title5; - @extend %t-weight4; + @extend %t-title5 !optional; + @extend %t-weight4 !optional; border-bottom-color: $m-pink-l3; background: tint($m-pink, 95%); @@ -1898,13 +1898,13 @@ } .copy-super { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; color: $m-pink; } .copy-sub { - @extend %t-copy-base; + @extend %t-copy-base !optional; } } @@ -2039,14 +2039,14 @@ width: flex-grid(6, 12); .title { - @extend %hd-lv4; + @extend %hd-lv4 !optional; margin-bottom: ($baseline/4); } .copy { - @extend %t-copy-sub1; - @extend %t-weight3; + @extend %t-copy-sub1 !optional; + @extend %t-weight3 !optional; } .list-actions { @@ -2054,7 +2054,7 @@ } .action-verify label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } @@ -2075,7 +2075,7 @@ .step-match { label { - @extend %t-copy-sub1; + @extend %t-copy-sub1 !optional; } } } @@ -2183,13 +2183,13 @@ } > .title { - @extend %hd-lv3; + @extend %hd-lv3 !optional; margin-bottom: $baseline; } .copy { - @extend %copy-base; + @extend %copy-base !optional; margin-bottom: $baseline; } @@ -2200,7 +2200,7 @@ .course-info { .options { .action-course { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; @include font-size(14); @@ -2210,7 +2210,7 @@ .course-actions { .action-dashboard { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; } } } @@ -2245,7 +2245,7 @@ .reverify-success-step { .title { - @extend %t-title4; + @extend %t-title4 !optional; text-align: left; text-transform: none; @@ -2282,7 +2282,7 @@ @include padding(($baseline*1.5), ($baseline*1.5), ($baseline*2), ($baseline*1.5)); .title { - @extend %t-title4; + @extend %t-title4 !optional; text-align: left; text-transform: none; @@ -2293,7 +2293,7 @@ } .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue !optional; } } @@ -2321,7 +2321,7 @@ // STATE: already verified .register.is-verified { .nav-wizard .price-value { - @extend %t-weight4; + @extend %t-weight4 !optional; @include font-size(16); @@ -2517,13 +2517,13 @@ .view { .title { - @extend %hd-lv2; + @extend %hd-lv2 !optional; color: $m-blue-d1; } .instruction { - @extend %t-copy-lead1; + @extend %t-copy-lead1 !optional; margin-bottom: $baseline; } diff --git a/scripts/scss_modernizer.py b/scripts/scss_modernizer.py new file mode 100644 index 000000000000..5c79930da551 --- /dev/null +++ b/scripts/scss_modernizer.py @@ -0,0 +1,65 @@ +import os +import copy +import re +import sys +from pathlib import Path + +FIRST_PATTERN = r"^(.*@extend) %(.*);\n?" +SECOND_PATTERN = r"^(.*@extend) \.(.*);\n?" + +FIRST_SUBSTITUTE = r"\1 %\2 !optional;\n" +SECOND_SUBSTITUTE = r"\1 .\2 !optional;\n" + +PATTERNS = {FIRST_PATTERN: FIRST_SUBSTITUTE, SECOND_PATTERN: SECOND_SUBSTITUTE} + + +def get_match(string): + for pattern, substitute in PATTERNS.items(): + match = re.match(pattern, string) + if match is None: + continue + return match, pattern, substitute + return None, None, None + + +def process_file(file_path): + with open(file_path, 'r') as file: + file_content = file.readlines() + print("processing {0}".format(file_path)) + data_clone = copy.deepcopy(file_content) + for index, line in enumerate(file_content): + match, pattern, substitute = get_match(line) + if match is None or "!optional" in line: + continue + updated_line = re.sub(pattern, substitute, line) + data_clone[index] = updated_line + return data_clone + + +def update_file(path, updated_data): + with open(path, 'w') as file: + file.writelines(updated_data) + + +def process_files(directory): + for path in Path(directory).rglob('*.scss'): + updated_data = process_file(str(path)) + update_file(str(path), updated_data) + + +if __name__ == '__main__': + file_to_process = sys.argv[1] + updated_data_a = process_file(file_to_process) + update_file(file_to_process, updated_data_a) + + # print("processing LMS...") + # process_files("lms") + # + # print("processing themes...") + # process_files("themes") + # + # print("processing CMS...") + # process_files("cms") + # + # print("processing common...") + # process_files("common") From ac4fc5b79351370f998dc1ea921b7586a8d2e5c5 Mon Sep 17 00:00:00 2001 From: Aarif Date: Thu, 15 Oct 2020 12:19:44 +0500 Subject: [PATCH 3/3] added mixins to fix extend errors inside media query --- lms/static/sass/elements/_typography.scss | 19 +++++++++---- lms/static/sass/multicourse/_dashboard.scss | 4 ++- scripts/scss_modernizer.py | 31 +++++++++++---------- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index cf98fdd8aa6e..3272bfc76e1c 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -4,6 +4,8 @@ // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) // weights +@import "themes/red-theme/lms/static/sass/partials/lms/theme/_variables.scss"; + %t-ultrastrong { font-weight: 700; } @@ -28,9 +30,13 @@ font-weight: 200; } +@mixin t-title{ + font-family: $font-family-sans-serif; +} + // headings/titles %t-title { - font-family: $font-family-sans-serif; + @include t-title } %t-title1 { @@ -54,11 +60,14 @@ @include line-height(36); } -%t-title4 { - @extend %t-title !optional; +@mixin t-title4{ + @include t-title; + @include font-size(24); + @include line-height(24); +} - @include font-size(24); - @include line-height(24); +%t-title4 { + @include t-title4 } %t-title5 { diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 41cf371a0f8a..2aab653c756d 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -3,6 +3,8 @@ // +Dashboard // ==================== +@import "lms/static/sass/elements/_typography.scss"; + .dashboard { @include clearfix(); @@ -150,7 +152,7 @@ // Responsive behavior @include media-breakpoint-down(sm) { - @extend %t-title4 !optional; + @include t-title4 } } } diff --git a/scripts/scss_modernizer.py b/scripts/scss_modernizer.py index 5c79930da551..320433f6e46d 100644 --- a/scripts/scss_modernizer.py +++ b/scripts/scss_modernizer.py @@ -48,18 +48,19 @@ def process_files(directory): if __name__ == '__main__': - file_to_process = sys.argv[1] - updated_data_a = process_file(file_to_process) - update_file(file_to_process, updated_data_a) - - # print("processing LMS...") - # process_files("lms") - # - # print("processing themes...") - # process_files("themes") - # - # print("processing CMS...") - # process_files("cms") - # - # print("processing common...") - # process_files("common") + + # file_to_process = sys.argv[1] + # updated_data_a = process_file(file_to_process) + # update_file(file_to_process, updated_data_a) + + print("processing LMS...") + process_files("lms") + + print("processing themes...") + process_files("themes") + + print("processing CMS...") + process_files("cms") + + print("processing common...") + process_files("common")