diff --git a/cms/static/sass/_base-v2.scss b/cms/static/sass/_base-v2.scss index bc2648872c..640d799fe5 100644 --- a/cms/static/sass/_base-v2.scss +++ b/cms/static/sass/_base-v2.scss @@ -10,6 +10,6 @@ body { color: $gray-d3; } -footer.primary{ +footer.primary { font-size: font-size(x-small); } diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 07b33a715a..adf2e9d04e 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -257,7 +257,8 @@ dl { padding: 0 $baseline; position: relative; - .mast, .metadata { + .mast, + .metadata { @include clearfix(); position: relative; @@ -383,11 +384,6 @@ dl { font-weight: 600; } } - - // page metadata/action bar - .metadata { - - } } // +Layout - Basic Page Content @@ -434,7 +430,8 @@ dl { } } -.content-primary, .content-supplementary { +.content-primary, +.content-supplementary { @include box-sizing(border-box); } @@ -630,7 +627,8 @@ hr.divide { // ==================== // UI - semantically hide text -.sr, .sr-only { +.sr, +.sr-only { @extend %cont-text-sr; } diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss index 5f4aeed37a..f372d4e62d 100644 --- a/cms/static/sass/_reset.scss +++ b/cms/static/sass/_reset.scss @@ -92,8 +92,8 @@ video { padding: 0; border: 0; outline: 0; - font-size: 100%; font: inherit; + font-size: 100%; vertical-align: baseline; } diff --git a/cms/static/sass/contexts/_ie.scss b/cms/static/sass/contexts/_ie.scss index c7945043bf..825507631e 100644 --- a/cms/static/sass/contexts/_ie.scss +++ b/cms/static/sass/contexts/_ie.scss @@ -15,17 +15,3 @@ } } } - -// ==================== - -// CASE: less than or equal to IE8 -.lte8 { - -} - -// ==================== - -// CASE: less than or equal to IE7 -.lte7 { - -} diff --git a/cms/static/sass/elements-v2/_controls.scss b/cms/static/sass/elements-v2/_controls.scss index 464db54981..a8ea745432 100644 --- a/cms/static/sass/elements-v2/_controls.scss +++ b/cms/static/sass/elements-v2/_controls.scss @@ -4,19 +4,22 @@ @extend %ui-btn; @extend %ui-btn-pill; - padding:($baseline/4) ($baseline/2); + padding: ($baseline/4) ($baseline/2); border-width: 1px; border-style: solid; border-color: transparent; text-align: center; - &:hover, &:active { + &:hover, + &:active { @extend %ui-fake-link; border-color: $gray-l3; } - &.current, &.active, &.is-selected { + &.current, + &.active, + &.is-selected { box-shadow: inset 0 1px 2px 1px $shadow-l1; border-color: $gray-l3; } @@ -31,16 +34,19 @@ border-color: $white; color: $gray-d1; - &:hover, &:active { + &:hover, + &:active { background: $white; color: $blue-s1; } - &.current, &.active { + &.current, + &.active { background: $white; color: $gray-d4; - &:hover, &:active { + &:hover, + &:active { color: $blue-s1; } } diff --git a/cms/static/sass/elements-v2/_header.scss b/cms/static/sass/elements-v2/_header.scss index 0643599505..2798102bdc 100644 --- a/cms/static/sass/elements-v2/_header.scss +++ b/cms/static/sass/elements-v2/_header.scss @@ -23,7 +23,8 @@ // ==================== // basic layout - .wrapper-l, .wrapper-r { + .wrapper-l, + .wrapper-r { background: $white; } @@ -36,7 +37,11 @@ @include text-align(right); } - .branding, .info-course, .nav-course, .nav-account, .nav-pitch { + .branding, + .info-course, + .nav-course, + .nav-account, + .nav-pitch { box-sizing: border-box; display: inline-block; vertical-align: middle; @@ -67,7 +72,7 @@ margin-right: 0; } - .title{ + .title { @extend %ui-btn-dd-nav-primary; @include transition(all $tmg-f2 ease-in-out 0s); @@ -132,7 +137,6 @@ .nav-account-user { .title { - max-width: ($baseline*10.5); display: inline-block; max-width: 84%; overflow: hidden; diff --git a/cms/static/sass/elements/_creative-commons.scss b/cms/static/sass/elements/_creative-commons.scss index b575e3ac01..2fde86fb9b 100644 --- a/cms/static/sass/elements/_creative-commons.scss +++ b/cms/static/sass/elements/_creative-commons.scss @@ -1,7 +1,8 @@ @font-face { font-family: 'CreativeCommons'; src: url('#{$static-path}/fonts/CreativeCommons/cc.eot'); - src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'), + src: + url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'), url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'), url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'), url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg'); diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss index 25f6552574..30a5dd2a8e 100644 --- a/cms/static/sass/elements/_modal-window.scss +++ b/cms/static/sass/elements/_modal-window.scss @@ -219,6 +219,7 @@ color: $blue-d4; } } + .clipboard-button { position: absolute; right: 30px; diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index 70d07c933c..dbcb17599c 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -54,7 +54,8 @@ } } - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -109,7 +110,9 @@ } } - label, input, textarea { + label, + input, + textarea { display: block; } @@ -125,7 +128,8 @@ } } - input, textarea { + input, + textarea { @extend %t-copy-base; height: 100%; @@ -218,7 +222,8 @@ margin-right: 0; } - input, textarea { + input, + textarea { width: 100%; } } @@ -251,7 +256,6 @@ margin: 0 0 ($baseline/4) 0; color: $gray-d2; } - } } diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index ab4b10dc78..461229c3d9 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -2,7 +2,8 @@ // ==================== .view-uploads { - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -210,7 +211,8 @@ text-align: left; color: $gray; - .column-sort-link, .column-selected-link { + .column-sort-link, + .column-selected-link { cursor: pointer; color: $blue; } @@ -266,7 +268,7 @@ .nav-item { &.reset-filter { - display:none; + display: none; } a { diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index d433eff5a1..c9d593defc 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -267,13 +267,16 @@ } // location widget - .unit-location, .library-location { + .unit-location, + .library-location { @extend %bar-module; border-top: none; - .wrapper-unit-id, .wrapper-library-id { - .unit-id-value, .library-id-value { + .wrapper-unit-id, + .wrapper-library-id { + .unit-id-value, + .library-id-value { @extend %status-value-base; display: inline-block; @@ -315,7 +318,8 @@ } // typographical overrides (based off of outline-simple) - .section-header, .subsection-header { + .section-header, + .subsection-header { line-height: 0; margin-bottom: ($baseline/2); } @@ -377,7 +381,8 @@ } .bc-container:not(.last) { - button, .parent-displayname { + button, + .parent-displayname { text-decoration: underline; color: $ui-link-color; } @@ -412,7 +417,8 @@ @include float(left); } - .button-forward, .component { + .button-forward, + .component { border: none; } diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss index f1de2bb64f..a462d8870f 100644 --- a/cms/static/sass/views/_export-git.scss +++ b/cms/static/sass/views/_export-git.scss @@ -4,7 +4,8 @@ .view-export-git { // UI: basic layout - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); float: left; diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss index 60627568db..d1299c5741 100644 --- a/cms/static/sass/views/_export.scss +++ b/cms/static/sass/views/_export.scss @@ -4,7 +4,8 @@ .view-export { // UI: basic layout - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -68,7 +69,8 @@ margin: ($baseline*2) 0; - .export-includes, .export-excludes { + .export-includes, + .export-excludes { width: flex-grid(4, 9); .item-detail { @@ -210,7 +212,7 @@ // STATE: started &.is-started { - .fa-warning { + .fa-warning { visibility: hidden; opacity: 0; } @@ -264,7 +266,8 @@ color: $red; } - .status-detail .title, .status-detail .copy { + .status-detail .title, + .status-detail .copy { color: $red; } } diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss index 9fdc308bb6..dd2c4bada7 100644 --- a/cms/static/sass/views/_group-configuration.scss +++ b/cms/static/sass/views/_group-configuration.scss @@ -1,7 +1,8 @@ // studio - views - group-configurations // ==================== .view-group-configurations { - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); @include float(left); } @@ -341,7 +342,9 @@ } } - label, input, textarea { + label, + input, + textarea { display: block; } @@ -361,7 +364,8 @@ } //this section is borrowed from _account.scss - we should clean up and unify later - input, textarea { + input, + textarea { @extend %t-copy-base; height: 100%; @@ -536,7 +540,7 @@ // specific group-type styles .content-groups { - .collection-header{ + .collection-header { .title { margin-bottom: 0; } diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss index 60d7857132..f9bccdf5be 100644 --- a/cms/static/sass/views/_import.scss +++ b/cms/static/sass/views/_import.scss @@ -2,7 +2,8 @@ // ==================== .view-import { - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -233,7 +234,7 @@ // STATE: started &.is-started { - .fa-warning { + .fa-warning { visibility: hidden; opacity: 0; } @@ -287,7 +288,8 @@ color: $red; } - .status-detail .title, .status-detail .copy { + .status-detail .title, + .status-detail .copy { color: $red; } } diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index 1f209bf393..8a5c99ee89 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -7,7 +7,9 @@ margin-bottom: 0; } - .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta { + .wrapper-content-header, + .wrapper-content-features, + .wrapper-content-cta { @include box-sizing(border-box); margin: 0; @@ -33,21 +35,14 @@ margin-bottom: 0; } - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { color: $gray-d3; } - - h2 { - - } - - h3 { - - } - - h4 { - - } } // welcome content @@ -74,7 +69,8 @@ color: $white; } - .wrapper-text-welcome, .logo { + .wrapper-text-welcome, + .logo { display: inline-block; } @@ -98,7 +94,8 @@ border: 4px solid $black; } - .arrow_box::after, .arrow_box::before { + .arrow_box::after, + .arrow_box::before { top: 100%; border: solid transparent; content: " "; @@ -133,10 +130,6 @@ } .content-features { - .list-features { - - } - // indiv features .feature { @include clearfix(); diff --git a/cms/static/sass/views/_maintenance.scss b/cms/static/sass/views/_maintenance.scss index ec1903edbf..58d1b74947 100644 --- a/cms/static/sass/views/_maintenance.scss +++ b/cms/static/sass/views/_maintenance.scss @@ -46,7 +46,7 @@ overflow: auto; } - .result{ + .result { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); margin-top: 15px; padding: 15px 30px; diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index d11417f2d1..24489fc3d5 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -11,7 +11,8 @@ // CASE: is-editable // TODO: abstract out .is-editable { - .incontext-editor-value, .incontext-editor-action-wrapper { + .incontext-editor-value, + .incontext-editor-action-wrapper { vertical-align: top; } @@ -226,9 +227,9 @@ margin-left: $baseline / 2; } - .status-release-label, - .status-highlights-enabled-label { - margin-right: ($baseline/4); + .status-release-label, + .status-highlights-enabled-label { + margin-right: ($baseline/4); } .status-highlights-enabled-value.button { @@ -251,12 +252,6 @@ // outline // -------------------- - - // UI: simple version of the outline - .outline-simple { - - } - // UI: complex version of the outline .outline-complex { .outline-content { @@ -270,10 +265,12 @@ &.is-collapsible { // only select the current item's toggle expansion controls - &:nth-child(1) .ui-toggle-expansion, &:nth-child(1) .item-title { + &:nth-child(1) .ui-toggle-expansion, + &:nth-child(1) .item-title { // STATE: hover/active - &:hover, &:active { + &:hover, + &:active { color: $blue; } } @@ -331,7 +328,8 @@ width: flex-grid(6, 9); - .icon, .wrapper-section-title { + .icon, + .wrapper-section-title { display: inline-block; vertical-align: top; } @@ -431,7 +429,8 @@ width: flex-grid(5, 9); - .icon, .wrapper-subsection-title { + .icon, + .wrapper-subsection-title { display: inline-block; vertical-align: top; } @@ -571,10 +570,6 @@ margin-bottom: $baseline; } - .add-subsection { - - } - .add-unit { margin-left: $outline-indent-width; } @@ -716,7 +711,9 @@ // TODO: refactor the _forms.scss partial to allow for this area to inherit from it - label, input, textarea { + label, + input, + textarea { display: block; } @@ -734,7 +731,8 @@ } - input, textarea { + input, + textarea { @extend %t-copy-base; @include transition(all $tmg-f2 ease-in-out 0s); @@ -765,7 +763,8 @@ // CASE: select input .field-select { - .label, .input { + .label, + .input { display: inline-block; vertical-align: middle; } @@ -816,7 +815,8 @@ text-transform: uppercase; } - .outline-unit .unit-title, .outline-unit .unit-status { + .outline-unit .unit-title, + .outline-unit .unit-status { display: inline-block; vertical-align: middle; } @@ -832,7 +832,6 @@ text-align: right; } - } // it is the only element there @@ -841,5 +840,4 @@ margin-bottom: 0; } } - } diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 822b365b4c..d62ec59f48 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -10,7 +10,8 @@ @include text-align(left); @include direction(); - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -71,11 +72,8 @@ // course details that should appear more like content than elements to change .is-not-editable { - label { - - } - - input, textarea { + input, + textarea { @extend %t-copy-lead1; @extend %t-strong; @@ -122,15 +120,6 @@ width: 100%; } - // basic layout/elements - .title-2 { - - } - - .title-3 { - - } - // in form -UI hints/tips/messages .header-help { margin: 0 0 $baseline 0; @@ -183,27 +172,30 @@ .list-input { @extend %cont-no-list; - .show-data{ - .heading{ + .show-data { + .heading { border: 1px solid #e0e0e0; padding: 5px 15px; margin-top: 5px; } - .div-grade-requirements{ + .div-grade-requirements { border: 1px solid #e0e0e0; border-top: none; padding: 10px 15px; - label{font-weight: 600;} - input#entrance-exam-minimum-score-pct{ + label { + font-weight: 600; + } + + input#entrance-exam-minimum-score-pct { height: 40px; font-size: 18px; } } } - #heading-entrance-exam{ + #heading-entrance-exam { font-weight: 600; } @@ -229,7 +221,9 @@ } } - label, input, textarea { + label, + input, + textarea { display: block; } @@ -246,7 +240,8 @@ } } - input, textarea { + input, + textarea { @extend %t-copy-base; @include placeholder($gray-l4); @@ -254,12 +249,6 @@ padding: ($baseline/2); - &.long { - } - - &.short { - } - &.error { border-color: $red; } @@ -279,7 +268,7 @@ .minimum-grade-percentage-sign { @include line-height(30); - padding-left: ($baseline/4);; + padding-left: ($baseline/4); } textarea.long { @@ -354,7 +343,8 @@ } .is-not-editable { - input, textarea { + input, + textarea { padding: 0; } } @@ -438,7 +428,7 @@ .list-actions { box-shadow: inset 0 1px 1px $shadow-l1; border-top: 1px solid $gray-l2; - padding: ($baseline/2); + padding: ($baseline/2); background: $gray-l5; .action-primary { @@ -480,7 +470,8 @@ } .is-not-editable { - input, textarea { + input, + textarea { padding: 10px; } } @@ -550,7 +541,9 @@ } // specific fields - course image - #field-course-image, #field-banner-image, #field-video-thumbnail-image { + #field-course-image, + #field-banner-image, + #field-video-thumbnail-image { .current-course-image { margin-bottom: ($baseline/2); padding: ($baseline/2) $baseline; @@ -743,10 +736,6 @@ } } - &.is-dragging { - - } - .remove-button { @extend %t-action5; @@ -826,7 +815,6 @@ #field-course-minimum_grade_credit { width: flex-grid(4, 9); } - } &.assignment-types { @@ -1101,7 +1089,8 @@ } } - .key, .value { + .key, + .value { float: left; margin: 0 0 ($baseline/2) 0; } @@ -1219,7 +1208,7 @@ } .error-item-message { - width:100%; + width: 100%; border: none; resize: none; diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index 42afef651a..e18d19cb62 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -293,7 +293,8 @@ vertical-align: bottom; } - &.action-duplicate, &.action-move { + &.action-duplicate, + &.action-move { display: none; } } @@ -315,7 +316,7 @@ .course-nav-item-header { display: inline-block; - width:80%; + width: 80%; .title { @extend %t-title4; diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 9836ccd8ef..a28f0a16d7 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -2,7 +2,8 @@ // ==================== .view-textbooks { - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -113,9 +114,7 @@ @extend %ui-btn-non; } } - } - } &:hover .actions { @@ -177,8 +176,6 @@ padding: ($baseline/5) $baseline; text-transform: uppercase; } - - } .copy { @@ -187,12 +184,9 @@ margin: ($baseline) 0 ($baseline/2) 0; color: $gray; - strong { @extend %t-strong; } - - } .chapters-fields, @@ -217,7 +211,9 @@ } } - label, input, textarea { + label, + input, + textarea { display: block; } @@ -239,7 +235,8 @@ //this section is borrowed from _account.scss - we should clean up and unify later - input, textarea { + input, + textarea { @extend %t-copy-base; height: 100%; @@ -331,7 +328,8 @@ position: relative; - input, textarea { + input, + textarea { width: 100%; } @@ -343,7 +341,6 @@ @include right(0); } - } .action-close { diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 6371f25d28..96e3129c32 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -112,7 +112,8 @@ padding: 20px; } - ol, ul { + ol, + ul { margin: 1em 0; padding: 0 0 0 1em; color: $body-color; diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index 98c93efa2a..f84bcb5c2e 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -4,7 +4,8 @@ .view-team { // LAYOUT: page - .content-primary, .content-supplementary { + .content-primary, + .content-supplementary { @include box-sizing(border-box); } @@ -32,7 +33,8 @@ // CASE: notice has actions { &.has-actions { - .msg, .list-actions { + .msg, + .list-actions { display: inline-block; vertical-align: middle; } @@ -47,10 +49,6 @@ text-align: right; margin-top: 0; - .action-item { - - } - .action-primary { @extend %btn-primary-green; @@ -69,7 +67,10 @@ } // ELEM: listing of users - .user-list, .user-item, .item-metadata, .item-actions { + .user-list, + .user-item, + .item-metadata, + .item-actions { @include box-sizing(border-box); } @@ -88,7 +89,8 @@ margin-bottom: 0; } - .item-metadata, .item-actions { + .item-metadata, + .item-actions { display: inline-block; vertical-align: middle; } @@ -133,7 +135,8 @@ @include margin-right(flex-gutter()); - .user-username, .user-email { + .user-username, + .user-email { display: inline-block; vertical-align: middle; } @@ -220,20 +223,6 @@ color: inherit; } } - - // STATE: hover - &:hover { - .user-username { - } - - .user-email { - - } - - .item-actions { - - } - } } } } diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss index f2055eb61f..e02e251084 100644 --- a/common/static/sass/_mixins-inherited.scss +++ b/common/static/sass/_mixins-inherited.scss @@ -173,12 +173,14 @@ background-color: $uxpl-green-base; color: $white; - &:hover, &:focus { + &:hover, + &:focus { background-color: $uxpl-green-hover-active; color: $white; } - &.disabled, &.is-disabled { + &.disabled, + &.is-disabled { border: 1px solid $green-l3 !important; background: $green-l3 !important; color: $white !important; @@ -195,12 +197,15 @@ background-color: theme-color("primary"); color: $white; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { background-color: $uxpl-blue-hover-active; color: $white; } - &.disabled, &.is-disabled { + &.disabled, + &.is-disabled { box-shadow: none; border: 1px solid $blue-l3 !important; background: $blue-l3 !important; @@ -217,12 +222,15 @@ background-color: $red; color: $white; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { background-color: $red-s1; color: $white; } - &.disabled, &.is-disabled { + &.disabled, + &.is-disabled { box-shadow: none; border: 1px solid $red-l3 !important; background: $red-l3 !important; @@ -239,12 +247,15 @@ background-color: $pink; color: $white; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { background-color: $pink-s1; color: $white; } - &.disabled, &.is-disabled { + &.disabled, + &.is-disabled { box-shadow: none; border: 1px solid $pink-l3 !important; background: $pink-l3 !important; @@ -262,12 +273,14 @@ background-color: $orange; color: $gray-d2; - &:hover, &:focus { + &:hover, + &:focus { background-color: $orange-s2; color: $gray-d2; } - &.disabled, &.is-disabled { + &.disabled, + &.is-disabled { border: 1px solid $orange-l3 !important; background: $orange-l2 !important; color: $gray-l1 !important; @@ -286,7 +299,8 @@ color: rgb(92, 103, 122); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - &:hover, &:focus { + &:hover, + &:focus { background-color: rgb(222, 236, 247); color: rgb(92, 103, 122); } @@ -318,7 +332,8 @@ background-color: $gray-d2; color: $gray-l3; - &:hover, &:focus { + &:hover, + &:focus { background-color: $gray-d3; color: $white; } diff --git a/common/static/sass/assets/_anims.scss b/common/static/sass/assets/_anims.scss index 10ae9f0a73..d6c84b536a 100644 --- a/common/static/sass/assets/_anims.scss +++ b/common/static/sass/assets/_anims.scss @@ -137,7 +137,8 @@ // flash @include keyframes(flash) { - 0%, 100% { + 0%, + 100% { opacity: 1; } @@ -148,11 +149,14 @@ // flash - double @include keyframes(flashDouble) { - 0%, 50%, 100% { + 0%, + 50%, + 100% { opacity: 1; } - 25%, 75% { + 25%, + 75% { opacity: 0; } } diff --git a/common/static/sass/edx-pattern-library-shims/_form.scss b/common/static/sass/edx-pattern-library-shims/_form.scss index cdfc9dd4ac..51281142ca 100644 --- a/common/static/sass/edx-pattern-library-shims/_form.scss +++ b/common/static/sass/edx-pattern-library-shims/_form.scss @@ -19,9 +19,9 @@ .field-input:checked + .field-input-label { color: theme-color("primary"); } - } -.input-radio, .input-checkbox { +.input-radio, +.input-checkbox { @include margin-right($baseline / 2); } diff --git a/common/static/sass/neat/functions/_private.scss b/common/static/sass/neat/functions/_private.scss index 077bf7e2f9..9c79c9bbbb 100644 --- a/common/static/sass/neat/functions/_private.scss +++ b/common/static/sass/neat/functions/_private.scss @@ -1,6 +1,6 @@ // Checks if a number is even @function is-even($int) { - @if $int%2 == 0 { + @if $int%2 == 0 { @return true; } @@ -96,7 +96,7 @@ // Layout direction @function get-direction($layout, $default) { $direction: nil; - + @if $layout == LTR or $layout == RTL { $direction: direction-from-layout($layout); } diff --git a/common/static/sass/neat/grid/_omega.scss b/common/static/sass/neat/grid/_omega.scss index 0c62964190..f8d990ada0 100644 --- a/common/static/sass/neat/grid/_omega.scss +++ b/common/static/sass/neat/grid/_omega.scss @@ -4,7 +4,7 @@ $auto: if(belongs-to(auto, $query), true, false); @if $direction != default { - @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead." + @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."; } @else { @@ -12,7 +12,7 @@ } @if $table { - @warn "The omega mixin no longer removes padding in table layouts." + @warn "The omega mixin no longer removes padding in table layouts."; } @if length($query) == 1 { @@ -44,7 +44,7 @@ } @else { - @warn "Too many arguments passed to the omega() mixin." + @warn "Too many arguments passed to the omega() mixin."; } } diff --git a/common/static/sass/neat/grid/_span-columns.scss b/common/static/sass/neat/grid/_span-columns.scss index 625294d863..2345c5a955 100644 --- a/common/static/sass/neat/grid/_span-columns.scss +++ b/common/static/sass/neat/grid/_span-columns.scss @@ -10,7 +10,7 @@ $display-table: is-display-table($container-display-table, $display); - @if $display-table { + @if $display-table { display: table-cell; width: percentage($columns / $container-columns); } @@ -23,7 +23,7 @@ } @if $display == collapse { - @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." + @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead."; } @if $display == collapse or $display == block-collapse { @@ -32,7 +32,6 @@ &:last-child { width: flex-grid($columns, $container-columns); } - } @else { diff --git a/common/static/sass/neat/grid/_visual-grid.scss b/common/static/sass/neat/grid/_visual-grid.scss index 340439c37f..167bef9eca 100644 --- a/common/static/sass/neat/grid/_visual-grid.scss +++ b/common/static/sass/neat/grid/_visual-grid.scss @@ -1,14 +1,14 @@ @mixin grid-column-gradient($values...) { background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values); - background-image: -webkit-linear-gradient(left, $values); - background-image: -moz-linear-gradient(left, $values); - background-image: -ms-linear-gradient(left, $values); - background-image: -o-linear-gradient(left, $values); + background-image: -webkit-linear-gradient(left, $values); + background-image: -moz-linear-gradient(left, $values); + background-image: -ms-linear-gradient(left, $values); + background-image: -o-linear-gradient(left, $values); background-image: unquote("linear-gradient(left, #{$values})"); } @if $visual-grid == true or $visual-grid == yes { - body:before { + body:before { /* stylelint-disable-line */ content: ''; display: inline-block; @@ -29,7 +29,7 @@ } @else if $visual-grid-index == front { - z-index: 9999; + z-index: 9999; } @each $breakpoint in $visual-grid-breakpoints { diff --git a/lms/static/certificates/sass/_base.scss b/lms/static/certificates/sass/_base.scss index 5705480da9..bf2b0aa4e2 100644 --- a/lms/static/certificates/sass/_base.scss +++ b/lms/static/certificates/sass/_base.scss @@ -10,7 +10,8 @@ // ------------------------------ // #BASE // ------------------------------ -html, body { +html, +body { height: 100%; margin: 0; padding: 0; diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss index 55e37fc6df..f87ec55722 100644 --- a/lms/static/certificates/sass/_components.scss +++ b/lms/static/certificates/sass/_components.scss @@ -80,10 +80,6 @@ background: $white; } -.header-app { - -} - // ------------------------------ // #BANNER // ------------------------------ @@ -112,7 +108,9 @@ .message-actions .action { // STATE: hover, active, focus - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { // customizations from UXPL color: palette(grayscale, dark); } @@ -166,7 +164,8 @@ .accomplishment-brief { @extend %depth-card; - .accomplishment-type-symbol, .accomplishment-details { + .accomplishment-type-symbol, + .accomplishment-details { display: inline-block; vertical-align: middle; } @@ -224,7 +223,8 @@ margin-bottom: spacing-vertical(base); } - .accomplishment-type-label, .accomplishment-type-symbol { + .accomplishment-type-label, + .accomplishment-type-symbol { display: block; } @@ -266,12 +266,6 @@ @extend %rendering-accomplishment-line; } - .accomplishment-course-org { - } - - .accomplishment-course-name { - } - .accomplishment-course-description { @extend %rendering-accomplishment-line; } @@ -306,7 +300,8 @@ margin: 0 auto spacing-vertical(x-small) auto; } - .signatory-name, .signatory-credentials { + .signatory-name, + .signatory-credentials { @include text-align(center); } @@ -315,7 +310,8 @@ } .signatory-credentials { - .role, .organization { + .role, + .organization { white-space: pre-line; display: block; } @@ -354,7 +350,8 @@ } } - .recipient-img, .recipient-details { + .recipient-img, + .recipient-details { display: inline-block; vertical-align: middle; } @@ -401,10 +398,6 @@ // ------------------------------ // #ACCOMPLISHMENT RELATED // ------------------------------ -.accomplishment-related { - -} - .accomplishment-related-title { @extend %hd-subsection; } @@ -453,7 +446,8 @@ color: $cert-base-color; } - .accomplishment-signatories-title, .accomplishment-orgs-title { + .accomplishment-signatories-title, + .accomplishment-orgs-title { color: $cert-decorative-color; } @@ -461,8 +455,7 @@ .accomplishment-statement, .accomplishment-statement-lead, .accomplishment-recipient, - .accomplishment-course, - { + .accomplishment-course { font-family: $font-family-serif; } @@ -520,7 +513,6 @@ .deco-corner-bl { @include triangle(20px, $cert-distinguished-color, down-right); - } .deco-corner-br { @@ -537,13 +529,6 @@ } } -// ------------------------------ -// #ABOUT -// ------------------------------ -.about { - -} - // ------------------------------ // #FOOTER // ------------------------------ @@ -602,7 +587,7 @@ display: table; } - .image-container{ + .image-container { // Lines the image up with the content of the above list. @include ltr { @include padding-left(2em); diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss index fc76f17e83..886e49d78a 100644 --- a/lms/static/certificates/sass/_config.scss +++ b/lms/static/certificates/sass/_config.scss @@ -18,14 +18,14 @@ $cert-decorative-color-emphasized: palette(grayscale, accent); @include font-face( 'Domine', '../../certificates/fonts/Domine/Domine-Regular-webfont', - 400, - $file-formats: woff woff2 ttf + 400, + $file-formats: woff woff2 ttf ); @include font-face( 'Domine', '../../certificates/fonts/Domine/Domine-Bold-webfont', - 700, - $file-formats: woff woff2 ttf + 700, + $file-formats: woff woff2 ttf ); // typography: config - stacks diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss index 9aa47a833b..7473b8aa94 100644 --- a/lms/static/certificates/sass/_layouts.scss +++ b/lms/static/certificates/sass/_layouts.scss @@ -13,7 +13,7 @@ margin-bottom: spacing-vertical(base); padding: 0 5%; - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { padding: 0 2.5%; } } @@ -74,7 +74,7 @@ .banner-user { @include text-align(center); - @media(min-width: $bp-screen-lg) { + @media (min-width: $bp-screen-lg) { @include text-align(left); } @@ -99,7 +99,7 @@ // CASE: icon display only &.icon-only { - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { padding: spacing-vertical(x-small) spacing-horizontal(base); .icon { @@ -108,7 +108,7 @@ } } - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { display: inline-block; vertical-align: middle; min-width: 130px; @@ -135,7 +135,7 @@ } .footer-app-copyright { - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(6, after); margin-bottom: 0; @@ -143,7 +143,7 @@ } .footer-app-nav { - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(6, before); } @@ -152,7 +152,7 @@ display: block; margin-bottom: spacing-vertical(x-small); - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { display: inline-block; vertical-align: middle; @@ -164,7 +164,7 @@ } .list-legal { - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include text-align(right); } } @@ -228,15 +228,15 @@ @include margin-right(0); } - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(3); } - @media(min-width: $bp-screen-lg) { + @media (min-width: $bp-screen-lg) { @include span(2); } - @media(min-width: $bp-screen-xl) { + @media (min-width: $bp-screen-xl) { @include span(2); } } @@ -245,7 +245,6 @@ @include size(100%); position: relative; - } .organization-logo { @@ -270,15 +269,15 @@ @include span(12); - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(4); } - @media(min-width: $bp-screen-lg) { + @media (min-width: $bp-screen-lg) { @include span(3); } - @media(min-width: $bp-screen-xl) { + @media (min-width: $bp-screen-xl) { @include span(3); } @@ -319,7 +318,7 @@ padding-bottom: 0; } - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(4); border-bottom: none; @@ -339,7 +338,7 @@ .accomplishment-brief { margin-bottom: spacing-vertical(small); - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(6); } @@ -364,7 +363,7 @@ margin-bottom: 0; } - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(6); margin-bottom: 0; diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss index 9b368e7d11..882d1678c9 100644 --- a/lms/static/certificates/sass/_print.scss +++ b/lms/static/certificates/sass/_print.scss @@ -15,7 +15,7 @@ // page set up - only available to modern browsers now @page { - size : landscape; + size: landscape; } @media print { @@ -61,7 +61,8 @@ } // prevent large elements from being split across multiple pages - ul, img { + ul, + img { page-break-inside: avoid; } @@ -79,7 +80,6 @@ .wrapper-view { margin-bottom: 0 !important; - } } @@ -87,7 +87,7 @@ @media print and (color) { * { -webkit-print-color-adjust: exact; - print-color-adjust: exact; + print-color-adjust: exact; /* stylelint-disable-line */ } } @@ -297,7 +297,8 @@ border-bottom: none !important; padding-bottom: 0 !important; - .label, .value { + .label, + .value { display: inline-block; vertical-align: baseline; font-size: font-size(x-small); @@ -325,7 +326,6 @@ @include text-align(right); } - } } diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss index ad37deaba1..5c15b8b8c8 100644 --- a/lms/static/certificates/sass/_views.scss +++ b/lms/static/certificates/sass/_views.scss @@ -26,13 +26,13 @@ .content-main { margin-bottom: spacing-vertical(base); - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(9, after); } } .content-secondary { - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(3, before); } } diff --git a/lms/static/sass/_developer.scss b/lms/static/sass/_developer.scss index a6ed3f1a69..4049474508 100644 --- a/lms/static/sass/_developer.scss +++ b/lms/static/sass/_developer.scss @@ -74,7 +74,9 @@ float: left; padding: ($baseline*0.5) 0; - .product-info, .product-name, .price { + .product-info, + .product-name, + .price { @extend %t-ultrastrong; color: $m-blue-d3; diff --git a/lms/static/sass/_experiments.scss b/lms/static/sass/_experiments.scss index 7fdaf08427..b177a38a2a 100644 --- a/lms/static/sass/_experiments.scss +++ b/lms/static/sass/_experiments.scss @@ -48,7 +48,8 @@ /* modal-specific */ -#upsell-modal, #portfolio-experiment-upsell-modal { +#upsell-modal, +#portfolio-experiment-upsell-modal { display: none; /* slick modal from https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css */ @@ -505,7 +506,7 @@ padding-bottom: 15px; } - @media only screen and (max-width: 600px){ + @media only screen and (max-width: 600px) { .slick-slide.carousel-item { min-width: 0; } diff --git a/lms/static/sass/_header.scss b/lms/static/sass/_header.scss index f3f15e5367..aa4236fd74 100644 --- a/lms/static/sass/_header.scss +++ b/lms/static/sass/_header.scss @@ -209,7 +209,9 @@ position: absolute; background-color: theme-color("inverse"); color: theme-color("secondary"); + @include right(30px); + top: 55px; z-index: 10; diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index 5203469ce4..33badf77a5 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -14,11 +14,8 @@ cursor: pointer; text-decoration: none; - &:hover, &:active { - - } - - &.disabled, &[disabled] { + &.disabled, + &[disabled] { cursor: default; pointer-events: none; } @@ -42,16 +39,19 @@ @extend %m-btn-edged; border: none; - padding:($baseline/2) ($baseline); + padding: ($baseline/2) ($baseline); text-align: center; text-shadow: none; font-weight: 500; letter-spacing: 0; - &.disabled, &[disabled], &.is-disabled { + &.disabled, + &[disabled], + &.is-disabled { background: $action-primary-disabled-bg; - &:hover, &:focus { + &:hover, + &:focus { background: $action-primary-disabled-bg !important; // needed for IE currently } } @@ -65,7 +65,9 @@ background: $action-primary-bg; color: $action-primary-fg; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { background: $action-primary-focused-bg; } @@ -73,18 +75,22 @@ box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow; } - &.current, &.active { + &.current, + &.active { box-shadow: inset 0 2px 1px 1px $action-primary-active-shadow; background: $action-primary-active-bg; color: $action-primary-active-fg; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow; color: $action-primary-active-focused-fg; } } - &.disabled, &[disabled] { + &.disabled, + &[disabled] { box-shadow: none; background: $action-primary-disabled-bg; // needed for IE currently } @@ -98,7 +104,9 @@ background: $action-secondary-bg; color: $action-secondary-fg; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { background: $action-secondary-focused-bg; } @@ -106,18 +114,22 @@ box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow; } - &.current, &.active { + &.current, + &.active { box-shadow: inset 0 2px 1px 1px $action-secondary-active-shadow; background: $action-secondary-active-bg; color: $action-secondary-active-fg; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow; color: $action-secondary-active-focused-fg; } } - &.disabled, &[disabled] { + &.disabled, + &[disabled] { box-shadow: none; background: $action-secondary-disabled-bg; // needed for IE currently } @@ -127,7 +139,10 @@ // ==================== // edx.org marketing site - needed, but bad overrides with importants -.view-register, .view-login, .view-passwordreset, .view-survey { +.view-register, +.view-login, +.view-passwordreset, +.view-survey { .form-actions button[type="submit"] { text-transform: none; vertical-align: middle; @@ -145,13 +160,17 @@ //overriding reset link style for nav/header .header-global { - .logo a:hover, .logo:active, .logo a:focus { + .logo a:hover, + .logo:active, + .logo a:focus { border: none; text-decoration: none; padding-bottom: 0; } - .nav-global a:hover, .nav-global a:active, .nav-global a:focus { + .nav-global a:hover, + .nav-global a:active, + .nav-global a:focus { border: none; } } @@ -179,7 +198,8 @@ footer .references { // ==================== // modal semantic button resetting - overriding the poorly scoped button mixin styling -.close-modal, button.close-modal { +.close-modal, +button.close-modal { @extend %ui-reset-button; &:focus { diff --git a/lms/static/sass/base/_animations.scss b/lms/static/sass/base/_animations.scss index bace488eb1..09f949f7f8 100644 --- a/lms/static/sass/base/_animations.scss +++ b/lms/static/sass/base/_animations.scss @@ -1,6 +1,8 @@ // home-header-pop-up animation //************************************************************************// +/* stylelint-disable */ + .animation-home-header-pop-up { @include animation(home-header-pop-up 1.15s ease-in-out); @include animation-fill-mode(both); diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 255490b27b..f5fffb9bf3 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -318,7 +318,7 @@ div.reset-deadlines-banner { flex: 0 1 auto; a { - color: #FFFFFF; + color: #fff; text-decoration: underline; } } diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index d7aeb41287..d3a3a64b7b 100644 --- a/lms/static/sass/base/_extends.scss +++ b/lms/static/sass/base/_extends.scss @@ -100,21 +100,17 @@ // ==================== // needed utility extend for resetting poor basic