diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 00000000000..8c0fcd5e51e --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +common/static/sass/bourbon +lms/static/sass/vendor diff --git a/lms/static/sass/_build-footer-edx.scss b/lms/static/sass/_build-footer-edx.scss index 51546929dc4..70cf2b70d20 100644 --- a/lms/static/sass/_build-footer-edx.scss +++ b/lms/static/sass/_build-footer-edx.scss @@ -7,10 +7,10 @@ @import 'base/theme'; footer#footer-edx-v3 { - @import 'base/extends'; + @import 'base/extends'; - // base - starter - @import 'base/base'; + // base - starter + @import 'base/base'; } // base - elements diff --git a/lms/static/sass/_build-lms-v1.scss b/lms/static/sass/_build-lms-v1.scss index 4a59870a05b..9f4ce763a13 100644 --- a/lms/static/sass/_build-lms-v1.scss +++ b/lms/static/sass/_build-lms-v1.scss @@ -81,7 +81,6 @@ // news @import 'notifications'; - @import 'mixins'; @import 'mixins-inherited'; @import 'elements/system-feedback'; diff --git a/lms/static/sass/_developer.scss b/lms/static/sass/_developer.scss index 56820ac8c8c..ab6d5038814 100644 --- a/lms/static/sass/_developer.scss +++ b/lms/static/sass/_developer.scss @@ -30,10 +30,12 @@ .ui-loading-base { @include animation(fadeIn $tmg-f2 linear 1); + @extend %t-copy-base; .spin { @extend %anim-rotateCW; + display: inline-block; } @@ -45,6 +47,7 @@ .ui-loading { @extend .ui-loading-base; @extend %ui-well; + opacity: 0.6; background-color: $white; padding: ($baseline*1.5) $baseline; @@ -67,20 +70,21 @@ // for verify_student/make_payment_step.underscore .payment-buttons { - .purchase { float: left; padding: ($baseline*.5) 0; .product-info, .product-name, .price { @extend %t-ultrastrong; + color: $m-blue-d3; } } .payment-button { float: right; - @include margin-left( ($baseline/2) ); + + @include margin-left(($baseline/2)); &.is-selected { background: $m-green-s1 !important; @@ -94,12 +98,14 @@ .view-teams { .wrapper-msg { @include clearfix(); + max-width: grid-width(12); margin: 0 auto; border-top: 3px solid $orange; .left-floater { @include float(left); + text-transform: uppercase; font-weight: $font-semibold; color: $white; @@ -108,6 +114,7 @@ .right-floater { @include float(right); + line-height: $body-line-height; button { @@ -126,7 +133,7 @@ } &:focus { - box-shadow: 0 0 0 0; + box-shadow: 0 0 0 0; } } } @@ -135,6 +142,7 @@ .members-info { margin: 0; padding: 0; + li { display: inline; } @@ -151,6 +159,7 @@ .member-info-container { display: inline-block; vertical-align: middle; + @include margin-left($baseline/2); .primary { @@ -191,6 +200,7 @@ //along with some "hide the inherited value, we want none" action .prompt.warning button { @extend %btn-no-style; + box-shadow: none; text-shadow: none; @@ -211,6 +221,7 @@ //along with some "hide the inherited value, we want none" action .prompt.warning button { @extend %btn-no-style; + box-shadow: none; text-shadow: none; diff --git a/lms/static/sass/_experiments.scss b/lms/static/sass/_experiments.scss index d6aa483b71c..aad449b4945 100644 --- a/lms/static/sass/_experiments.scss +++ b/lms/static/sass/_experiments.scss @@ -5,389 +5,394 @@ // -------------------- // LEARNER-1726 Track Selection V3 + /* This css was added as part of the LEARNER-1726 experiment */ .v2.register-choice { - margin: 0 2% 20px 0 !important + margin: 0 2% 20px 0 !important } .v2.register-choice-certificate .list-actions { - text-align: left !important; + text-align: left !important; } .v2.register-choice-continue .list-actions { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .v2.register-choice-continue .action-select { - display: inline-block !important; - list-style-type: none !important; - width: 100% !important; + display: inline-block !important; + list-style-type: none !important; + width: 100% !important; } .v2.register-choice-continue .continue-link { - display: inline-block !important; - padding: 10px 15px !important; - border-radius: 3px !important; - border: 1px solid #D7548E !important; - box-shadow: 0 2px 1px 0 #982c62 !important; - background: white !important; - text-align: center !important; - color: #D7548E !important; - float: left !important; - font-size: 15px; - font-weight: 500 !important; + display: inline-block !important; + padding: 10px 15px !important; + border-radius: 3px !important; + border: 1px solid #d7548e !important; + box-shadow: 0 2px 1px 0 #982c62 !important; + background: white !important; + text-align: center !important; + color: #d7548e !important; + float: left !important; + font-size: 15px; + font-weight: 500 !important; } .v2.register-choice-v2-donate { - height: 300px; - background: none !important; - border-top-color: grey !important; - border-top-width: 1px !important; + height: 300px; + background: none !important; + border-top-color: grey !important; + border-top-width: 1px !important; } @media screen and (min-width: 375px) { - .v2.register-choice-v2-donate { - height: 250px; - } + .v2.register-choice-v2-donate { + height: 250px; + } } .v2.register-choice-v2-donate .list-actions { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .v2.register-choice-v2-donate .list-actions a { - background: transparent !important; - color: #0075b4 !important; - box-shadow: none !important; - text-decoration: underline !important; - border: none !important; - white-space: normal; + background: transparent !important; + color: #0075b4 !important; + box-shadow: none !important; + text-decoration: underline !important; + border: none !important; + white-space: normal; } .v2.register-choice-v2-donate .wrapper-copy-inline { - height: 70px !important; - width: 100% !important; - display: flex !important; + height: 70px !important; + width: 100% !important; + display: flex !important; } .v2.register-choice-v2-donate .wrapper-copy { - width: 70% !important; - height: auto !important; + width: 70% !important; + height: auto !important; } .v2.page-header { - padding: 0; + padding: 0; } .v2 img { - margin-top: 20px; - margin-left: 5px; + margin-top: 20px; + margin-left: 5px; } .v2 .continue-link { - font-weight: bold !important; + font-weight: bold !important; } .v2.register-choice-certificate, .v2.register-choice-continue, .v2.register-choice-view { - width: 100%; + width: 100%; } .v2.register-choice-continue { - border-color: #D7548E !important; + border-color: #d7548e !important; } .v2 .wrapper-copy-inline { - max-height: 115px; + max-height: 115px; } .v2.register-choice-v2-donate .wrapper-copy-inline { - display: block !important; + display: block !important; } .v2.register-choice-v2-donate .copy-inline { - width: 100% !important; + width: 100% !important; } .v2.register-choice-v2-donate .list-actions { - width: 100% !important; - margin-top: 20px !important; - text-align: center !important; + width: 100% !important; + margin-top: 20px !important; + text-align: center !important; } .v2 .wrapper-copy-inline .wrapper-copy { - width: 100% !important; + width: 100% !important; } .v2 input, .v2 a { - font-size: 15px !important; + font-size: 15px !important; } .v2 button { - background-color: rgb(0, 103, 0); - border-color: rgb(0, 103, 0); - border-radius: 2px; - box-shadow: rgb(0, 77, 0) 0px 2px 1px 0px; - cursor: pointer; - font-family: "Open Sans"; - height: auto; - margin-right: 4px; - margin-top: 0px; - padding: 10px 15px; - width: initial; - background-image: none !important; - font-size: 14px !important; - font-weight: 500 !important; - - &:hover, &:focus { - background-color: #009b00 !important; - border-color: #009b00; - box-shadow: #004d00 0px 2px 1px 0px; - } + background-color: rgb(0, 103, 0); + border-color: rgb(0, 103, 0); + border-radius: 2px; + box-shadow: rgb(0, 77, 0) 0 2px 1px 0; + cursor: pointer; + font-family: "Open Sans"; + height: auto; + margin-right: 4px; + margin-top: 0; + padding: 10px 15px; + width: initial; + background-image: none !important; + font-size: 14px !important; + font-weight: 500 !important; + + &:hover, &:focus { + background-color: #009b00 !important; + border-color: #009b00; + box-shadow: #004d00 0 2px 1px 0; + } } .savings-message { - margin-top: 10px; - font-size: 11px; + margin-top: 10px; + font-size: 11px; } + @media screen and (min-width: 375px) { - .savings-message { - font-size: 13px; - margin-left: 16px; - } + .savings-message { + font-size: 13px; + margin-left: 16px; + } } .v2 .continue-link, .v2 input, .v2 button, .v2 a { - width: 100%; + width: 100%; } .v2 img { - display: none; + display: none; } .v2 .deco-divider { - display: none; + display: none; } .v2 .visual-reference { - width: 38%; + width: 38%; } @media (min-width: 420px) { - .v2 button { - height: 45px; - font-size: 16px !important; - } + .v2 button { + height: 45px; + font-size: 16px !important; + } } @media (min-width: 768px) { - .v2.register-choice-certificate, - .v2.register-choice-continue, - .v2.deco-divider { - width: 46.5% !important; - display: inline-block; - min-height: 270px; - } - - .v2.register-choice-v2-donate .wrapper-copy-inline { - display: flex !important; - } - - .v2.register-choice-v2-donate .copy-inline { - width: 40% !important; - } - - .v2.register-choice-v2-donate .list-actions { - margin-top: 0 !important; - text-align: right !important; - } - - .v2 .wrapper-copy-inline .wrapper-copy { - width: 100% !important; - } - - .v2 input, .v2 a { - font-size: 15px !important; - } - - .v2 .continue-link, .v2.register-choice-certificate button, .v2.register-choice-certificate input { - margin-top: 20px; - width: initial; - } - - .v2.register-choice-v2-donate a { - width: 100% !important; - } - - .v2.register-choice-view { - height: 250px; - } - - .v2 img { - display: initial; - } + .v2.register-choice-certificate, + .v2.register-choice-continue, + .v2.deco-divider { + width: 46.5% !important; + display: inline-block; + min-height: 270px; + } + + .v2.register-choice-v2-donate .wrapper-copy-inline { + display: flex !important; + } - .v2.register-choice { - margin: 0 2% 20px 0; - } + .v2.register-choice-v2-donate .copy-inline { + width: 40% !important; + } - .v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy { - width: 60%; - } + .v2.register-choice-v2-donate .list-actions { + margin-top: 0 !important; + text-align: right !important; + } - .v2.register-choice-view .wrapper-copy-inline .wrapper-copy { - width: 100%; - } + .v2 .wrapper-copy-inline .wrapper-copy { + width: 100% !important; + } - .v2.register-choice { - padding: 15px !important; - } + .v2 input, .v2 a { + font-size: 15px !important; + } - .v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy { - width: 60%; - } + .v2 .continue-link, .v2.register-choice-certificate button, .v2.register-choice-certificate input { + margin-top: 20px; + width: initial; + } - .v2.register-choice { - padding: 20px !important; - } + .v2.register-choice-v2-donate a { + width: 100% !important; + } - .v2.register-choice.register-choice-view { - margin-right: 0; - } + .v2.register-choice-view { + height: 250px; + } - .v2.register-choice .list-actions:last-child { - float: left; - width: 100%; - margin-top: 0px; - } + .v2 img { + display: initial; + } - .v2.register-choice .action-select { - width: 100% !important; - } + .v2.register-choice { + margin: 0 2% 20px 0; + } - .v2 .continue-link:hover, - .v2 .continue-link:focus { - background-color: #D7548E !important; - color: white !important; - text-decoration: none; - } + .v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy { + width: 60%; + } - .v2 .continue-link:hover { - cursor: pointer; - } + .v2.register-choice-view .wrapper-copy-inline .wrapper-copy { + width: 100%; + } - .v2 .copy li { - margin-bottom: 5px; - } + .v2.register-choice { + padding: 15px !important; + } - .v2.register-choice .copy-inline { - width: 100%; - } + .v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy { + width: 60%; + } - .v2 .register-choice-view { - border-color: #2991c3 !important; - } + .v2.register-choice { + padding: 20px !important; + } - .v2 .visual-reference { - vertical-align: top; - } + .v2.register-choice.register-choice-view { + margin-right: 0; + } - .v2 .wrapper-copy-inline .wrapper-copy ul { - margin-top: 0px; - padding-left: 30px; - } + .v2.register-choice .list-actions:last-child { + float: left; + width: 100%; + margin-top: 0; + } - .v2 .img-certificate { - border: 2px solid #009b00 !important; - float: right; - height: 120px; - width: auto; - margin-top: 0 !important; - display: none; - } + .v2.register-choice .action-select { + width: 100% !important; + } - .v2 .img-donate { - margin-top: 0; - float: right; - border: 2px solid #D7548E !important; - display: none; - } + .v2 .continue-link:hover, + .v2 .continue-link:focus { + background-color: #d7548e !important; + color: white !important; + text-decoration: none; + } - .v2 .img-view { - border: 2px solid #2991c3 !important; - } + .v2 .continue-link:hover { + cursor: pointer; + } - .v2.register-choice .title { - width: 100%; - margin-bottom: 20px; - } + .v2 .copy li { + margin-bottom: 5px; + } - .v2.register-choice.register-choice-view .action-select { - border: 1px solid transparent !important; - border-radius: 3px; - } + .v2.register-choice .copy-inline { + width: 100%; + } + + .v2 .register-choice-view { + border-color: #2991c3 !important; + } + + .v2 .visual-reference { + vertical-align: top; + } + + .v2 .wrapper-copy-inline .wrapper-copy ul { + margin-top: 0; + padding-left: 30px; + } + + .v2 .img-certificate { + border: 2px solid #009b00 !important; + float: right; + height: 120px; + width: auto; + margin-top: 0 !important; + display: none; + } - .v2.register-choice.register-choice-view .action-select button { - border: 1px solid transparent !important; - } + .v2 .img-donate { + margin-top: 0; + float: right; + border: 2px solid #d7548e !important; + display: none; + } - .v2.register-choice.register-choice-view .action-select:hover { - border: 1px solid #0075b4 !important; - } + .v2 .img-view { + border: 2px solid #2991c3 !important; + } - .v2.deco-divider { - width: 3% !important; - box-sizing: border-box; - float: left; - display: inline-block; - height: 250px; - margin: 0px 0 40px 0 !important; - border-left: 4px solid #f5f5f5 !important; border-top:none !important; - - .copy { - position: absolute; - top: 110px !important; - left: calc(50% - 40px) !important; - margin-left: 20px; - background: white; - text-align: center; - color: #474747; - width: 10px; - padding: 0 !important; - } - } + .v2.register-choice .title { + width: 100%; + margin-bottom: 20px; + } + + .v2.register-choice.register-choice-view .action-select { + border: 1px solid transparent !important; + border-radius: 3px; + } + + .v2.register-choice.register-choice-view .action-select button { + border: 1px solid transparent !important; + } + + .v2.register-choice.register-choice-view .action-select:hover { + border: 1px solid #0075b4 !important; + } + + .v2.deco-divider { + width: 3% !important; + box-sizing: border-box; + float: left; + display: inline-block; + height: 250px; + margin: 0 0 40px 0 !important; + border-left: 4px solid #f5f5f5 !important; border-top:none !important; + + .copy { + position: absolute; + top: 110px !important; + left: calc(50% - 40px) !important; + margin-left: 20px; + background: white; + text-align: center; + color: #474747; + width: 10px; + padding: 0 !important; + } + } } @media (min-width: 835px) { - .v2.register-choice-certificate, - .v2.register-choice-continue, - .v2.deco-divider { - min-height: 250px; - } + .v2.register-choice-certificate, + .v2.register-choice-continue, + .v2.deco-divider { + min-height: 250px; + } } @media (min-width: 1024px) { - .v2 .continue-link { - width: 55%; - } - .v2.deco-divider .copy { - margin-left: 15px; - } + .v2 .continue-link { + width: 55%; + } + + .v2.deco-divider .copy { + margin-left: 15px; + } } @media (min-width: 1096px) { - .v2.register-choice-certificate, - .v2.register-choice-continue, - .v2.deco-divider { - min-height: 260px; - } - .v2 .img-certificate, .v2 .img-donate { - margin-top: 10px; - display: initial; - } - .v2 .continue-link, .v2.register-choice-certificate button, - .v2.register-choice-certificate input { - margin-top: -22px !important; - } -} \ No newline at end of file + .v2.register-choice-certificate, + .v2.register-choice-continue, + .v2.deco-divider { + min-height: 260px; + } + + .v2 .img-certificate, .v2 .img-donate { + margin-top: 10px; + display: initial; + } + + .v2 .continue-link, .v2.register-choice-certificate button, + .v2.register-choice-certificate input { + margin-top: -22px !important; + } +} diff --git a/lms/static/sass/_notifications.scss b/lms/static/sass/_notifications.scss index 0155ee33928..ca15de13dff 100644 --- a/lms/static/sass/_notifications.scss +++ b/lms/static/sass/_notifications.scss @@ -4,6 +4,7 @@ .notifications { @include news-font; + font-size: 0.9em; padding-left: $baseline; padding-top: $baseline; @@ -11,6 +12,7 @@ .notification { @include news-font; + margin-top: ($baseline*0.75); margin-bottom: ($baseline*0.75); @@ -22,6 +24,7 @@ .site-status { @include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0)); + padding: ($baseline / 2); background-color: $site-status-color; box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset; @@ -30,6 +33,7 @@ .icon { @include margin-right($baseline / 2); @include float(left); + color: $white !important; // some pages have color inherit font-size: 18px; } diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index 7580a4e9a98..5203469ce47 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -9,6 +9,7 @@ %m-btn { @include box-sizing(border-box); @include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out); + display: inline-block; cursor: pointer; text-decoration: none; @@ -39,6 +40,7 @@ %m-btn-base { @extend %m-btn; @extend %m-btn-edged; + border: none; padding:($baseline/2) ($baseline); text-align: center; @@ -58,6 +60,7 @@ // primary button %m-btn-primary { @extend %m-btn-base; + box-shadow: 0 2px 1px 0 $action-primary-shadow; background: $action-primary-bg; color: $action-primary-fg; @@ -65,6 +68,7 @@ &:hover, &:active, &:focus { background: $action-primary-focused-bg; } + &:focus { box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow; } @@ -89,6 +93,7 @@ // secondary button %m-btn-secondary { @extend %m-btn-base; + box-shadow: 0 2px 1px 0 $action-secondary-shadow; background: $action-secondary-bg; color: $action-secondary-fg; @@ -96,6 +101,7 @@ &:hover, &:active, &:focus { background: $action-secondary-focused-bg; } + &:focus { box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow; } @@ -122,7 +128,6 @@ // edx.org marketing site - needed, but bad overrides with importants .view-register, .view-login, .view-passwordreset, .view-survey { - .form-actions button[type="submit"] { text-transform: none; vertical-align: middle; @@ -140,7 +145,6 @@ //overriding reset link style for nav/header .header-global { - .logo a:hover, .logo:active, .logo a:focus { border: none; text-decoration: none; @@ -213,6 +217,7 @@ footer .references { .action-secondary { @extend %btn-no-style; @extend %t-strong; + box-shadow: none; text-shadow: none; } diff --git a/lms/static/sass/base/_animations.scss b/lms/static/sass/base/_animations.scss index 916c6be1148..7a62b811304 100644 --- a/lms/static/sass/base/_animations.scss +++ b/lms/static/sass/base/_animations.scss @@ -9,28 +9,34 @@ @mixin home-header-pop-up-keyframes { 0% { - opacity: 0.0; + opacity: 0; top: 300px; //@include transform(scale(0.9)); } + 45% { - opacity: 1.0; + opacity: 1; } + 65% { top: -40px; //@include transform(scale(1)); } + 85% { top: 10px; } + 100% { - top: 0px; + top: 0; } } @-webkit-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } - @-moz-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } - @keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } + +@-moz-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } + +@keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } // title appear animation //************************************************************************// @@ -43,30 +49,39 @@ @mixin title-appear-keyframes { 0% { - opacity: 0.0; + opacity: 0; top: 60px; + @include transform(scale(0.9)); } + 20% { - opacity: 1.0; + opacity: 1; } + 27% { // this % of total-time should be ~ 1.25s top: 40px; + @include transform(scale(1)); } + 90% { // this % of total-time is when 2nd half of animation starts - opacity: 1.0; + opacity: 1; top: 40px; + @include transform(scale(1)); } + 100% { - top: 0px; + top: 0; } } @-webkit-keyframes title-appear { @include title-appear-keyframes; } - @-moz-keyframes title-appear { @include title-appear-keyframes; } - @keyframes title-appear { @include title-appear-keyframes; } + +@-moz-keyframes title-appear { @include title-appear-keyframes; } + +@keyframes title-appear { @include title-appear-keyframes; } // home appear animation //************************************************************************// @@ -79,32 +94,42 @@ @mixin home-appear-keyframes { 0% { - opacity: 0.0; + opacity: 0; top: 60px; + @include transform(scale(0.9)); } + 20% { - opacity: 1.0; + opacity: 1; } + 30% { // this % of total-time should be ~ 1.25s top: 40px; + @include transform(scale(1)); } + 80% { // this % of total-time is when 2nd half of animation starts - opacity: 1.0; + opacity: 1; top: 40px; + @include transform(scale(1)); } + 100% { - opacity: 0.0; + opacity: 0; top: 60px; + @include transform(scale(0.7)); } } @-webkit-keyframes home-appear { @include home-appear-keyframes; } - @-moz-keyframes home-appear { @include home-appear-keyframes; } - @keyframes home-appear { @include home-appear-keyframes; } + +@-moz-keyframes home-appear { @include home-appear-keyframes; } + +@keyframes home-appear { @include home-appear-keyframes; } // edx animation //************************************************************************// @@ -117,16 +142,19 @@ @mixin edx-appear-keyframes { 0% { - opacity: 0.0; + opacity: 0; } + 100% { - opacity: 1.0; + opacity: 1; } } @-webkit-keyframes edx-appear { @include edx-appear-keyframes; } - @-moz-keyframes edx-appear { @include edx-appear-keyframes; } - @keyframes edx-appear { @include edx-appear-keyframes; } + +@-moz-keyframes edx-appear { @include edx-appear-keyframes; } + +@keyframes edx-appear { @include edx-appear-keyframes; } // mit animation //************************************************************************// @@ -141,14 +169,17 @@ 0% { left: 80px; } + 100% { - left: 0px; + left: 0; } } @-webkit-keyframes mit-slide { @include mit-slide-keyframes; } - @-moz-keyframes mit-slide { @include mit-slide-keyframes; } - @keyframes mit-slide { @include mit-slide-keyframes; } + +@-moz-keyframes mit-slide { @include mit-slide-keyframes; } + +@keyframes mit-slide { @include mit-slide-keyframes; } // harvard animation //************************************************************************// @@ -163,14 +194,17 @@ 0% { right: 80px; } + 100% { - right: 0px; + right: 0; } } @-webkit-keyframes harvard-slide { @include harvard-slide-keyframes; } - @-moz-keyframes harvard-slide { @include harvard-slide-keyframes; } - @keyframes harvard-slide { @include harvard-slide-keyframes; } + +@-moz-keyframes harvard-slide { @include harvard-slide-keyframes; } + +@keyframes harvard-slide { @include harvard-slide-keyframes; } // divider left animation //************************************************************************// @@ -185,14 +219,17 @@ 0% { left: 340px; } + 100% { left: 200px; } } @-webkit-keyframes divider-left-slide { @include divider-left-slide-keyframes; } - @-moz-keyframes divider-left-slide { @include divider-left-slide-keyframes; } - @keyframes divider-left-slide { @include divider-left-slide-keyframes; } + +@-moz-keyframes divider-left-slide { @include divider-left-slide-keyframes; } + +@keyframes divider-left-slide { @include divider-left-slide-keyframes; } // divider right animation //************************************************************************// @@ -207,14 +244,17 @@ 0% { left: 340px; } + 100% { left: 480px; } } @-webkit-keyframes divider-right-slide { @include divider-right-slide-keyframes; } - @-moz-keyframes divider-right-slide { @include divider-right-slide-keyframes; } - @keyframes divider-right-slide { @include divider-right-slide-keyframes; } + +@-moz-keyframes divider-right-slide { @include divider-right-slide-keyframes; } + +@keyframes divider-right-slide { @include divider-right-slide-keyframes; } // video appear animation //************************************************************************// @@ -230,17 +270,21 @@ bottom: -270px; opacity: 0.9; } + 80% { - opacity: 1.0; + opacity: 1; } + 100% { - bottom: 0px; + bottom: 0; } } @-webkit-keyframes video-appear { @include video-appear-keyframes; } - @-moz-keyframes video-appear { @include video-appear-keyframes; } - @keyframes video-appear { @include video-appear-keyframes; } + +@-moz-keyframes video-appear { @include video-appear-keyframes; } + +@keyframes video-appear { @include video-appear-keyframes; } // quick fade-in animation to get user attention //************************************************************************// @@ -251,16 +295,19 @@ @mixin fade-in-keyframes { 0% { - opacity: 0.0; + opacity: 0; } + 100% { - opacity: 1.0; + opacity: 1; } } @-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; } - @-moz-keyframes fade-in-animation{ @include fade-in-keyframes; } - @keyframes fade-in-animation{ @include fade-in-keyframes; } + +@-moz-keyframes fade-in-animation{ @include fade-in-keyframes; } + +@keyframes fade-in-animation{ @include fade-in-keyframes; } // +utility animations @@ -272,7 +319,7 @@ } 25%, 75% { - opacity: 1.0; + opacity: 1; } 100% { diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index efa59bb9f4f..0fdcccfe537 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -22,7 +22,7 @@ body { // removing the outline on any element that we make programmatically focusable [tabindex="-1"] { - outline: none; + outline: none; } h1, h2, h3, h4, h5, h6 { @@ -83,6 +83,7 @@ p { font: inherit; font-weight: inherit; text-decoration: none; + @include transition(all 0.1s linear 0s); &:hover, &:focus { @@ -96,6 +97,7 @@ a, a:visited { color: $link-color; font: inherit; text-decoration: none; + @include transition(all 0.1s linear 0s); &:hover, @@ -106,6 +108,7 @@ a, a:visited { &:disabled, &.is-disabled, &.disabled { @extend %ui-disabled; + opacity: 0.5; cursor: not-allowed; } @@ -124,6 +127,7 @@ a, a:visited { .container { @include clearfix(); @include box-sizing(border-box); + margin: 0 auto 0; padding: ($baseline*2) 0; max-width: grid-width(12); @@ -132,7 +136,7 @@ a, a:visited { } .no-min-scale { - min-width: 0px !important; + min-width: 0 !important; } span.edx { @@ -142,6 +146,7 @@ span.edx { .static-container { @include clearfix(); + margin: 0 auto 0; max-width: 1200px; padding: ($baseline*3) 0 ($baseline*6); @@ -181,6 +186,7 @@ span.edx { .loading-animation { @include animation(fa-spin 2s infinite linear); + text-align: center; width: 100%; } @@ -210,61 +216,65 @@ mark { } .help-tab { - @include transform(rotate(-90deg)); - @include transform-origin(0 0); - @extend %ui-depth2; - @extend %ui-print-excluded; - position: fixed; - top: 250px; - left: 0; - - a:link, - a:visited { - border: 1px solid $gray-l3; - border-top-style: none; - border-radius: 0 0 ($baseline/2) ($baseline/2); - background: transparentize($white, 0.25); - color: transparentize($base-font-color, 0.25); - font-weight: bold; - text-decoration: none; - padding: 6px 22px 11px; - display: inline-block; - - &:hover, - &:focus { - color: $white; - background: $link-color; - } + @include transform(rotate(-90deg)); + @include transform-origin(0 0); + + @extend %ui-depth2; + @extend %ui-print-excluded; + + position: fixed; + top: 250px; + left: 0; + + a:link, + a:visited { + border: 1px solid $gray-l3; + border-top-style: none; + border-radius: 0 0 ($baseline/2) ($baseline/2); + background: transparentize($white, 0.25); + color: transparentize($base-font-color, 0.25); + font-weight: bold; + text-decoration: none; + padding: 6px 22px 11px; + display: inline-block; + + &:hover, + &:focus { + color: $white; + background: $link-color; } + } } .help-buttons { - padding: ($baseline/2) ($baseline*2.5); - text-align: center; - - button { - @extend %btn-secondary-blue-outline; - margin: .5rem 0; - font-weight: initial; - text-shadow: none; - letter-spacing: initial !important; - text-transform: normal !important; - vertical-align: initial; + padding: ($baseline/2) ($baseline*2.5); + text-align: center; + + button { + @extend %btn-secondary-blue-outline; + + margin: .5rem 0; + font-weight: initial; + text-shadow: none; + letter-spacing: initial !important; + text-transform: normal !important; + vertical-align: initial; - &:hover, - &:focus { - background: $link-color !important; - color: $white; - box-shadow: none !important; - text-shadow: none !important; - } + &:hover, + &:focus { + background: $link-color !important; + color: $white; + box-shadow: none !important; + text-shadow: none !important; } + } } #feedback_form { input, textarea { font: normal 1em/1.4em $sans-serif; } + textarea[name="details"] { height: 150px; } diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index 6d9e9636556..d7aeb41287f 100644 --- a/lms/static/sass/base/_extends.scss +++ b/lms/static/sass/base/_extends.scss @@ -1,29 +1,34 @@ %faded-hr-divider { @include background-image($faded-hr-image-1); + height: 1px; width: 100%; } %faded-hr-divider-medium { @include background-image($faded-hr-image-4); + height: 1px; width: 100%; } %faded-hr-divider-light { @include background-image($faded-hr-image-5); + height: 1px; width: 100%; } %faded-vertical-divider { @include background-image($faded-hr-image-1); + height: 100%; width: 1px; } %faded-vertical-divider-light { @include background-image($faded-hr-image-6); + background: transparent; height: 100%; width: 1px; @@ -31,10 +36,12 @@ %vertical-divider { @extend %faded-vertical-divider; + position: relative; &::after { @extend %faded-vertical-divider-light; + content: ""; display: block; position: absolute; @@ -44,11 +51,14 @@ %horizontal-divider { border: none; + @extend %faded-hr-divider; + position: relative; &::after { @extend %faded-hr-divider-light; + content: ""; display: block; position: absolute; @@ -58,11 +68,13 @@ %fade-right-hr-divider { @include background-image($faded-hr-image-2); + border: none; } %fade-left-hr-divider { @include background-image($faded-hr-image-3); + border: none; } @@ -134,6 +146,7 @@ %ui-deprecated { @extend %t-weight4; + background: tint($warning-color, 85%); padding: ($baseline/5) ($baseline/2); color: shade($warning-color, 45%); @@ -142,6 +155,7 @@ // extends - content - text overflow by ellipsis %cont-truncated { @include box-sizing(border-box); + overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/lms/static/sass/base/_font_face.scss b/lms/static/sass/base/_font_face.scss index bb8644b0e04..1fcab4199ce 100644 --- a/lms/static/sass/base/_font_face.scss +++ b/lms/static/sass/base/_font_face.scss @@ -1,81 +1,81 @@ // LMS - assets - fonts // ==================== @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'); - font-weight: 300; - font-style: normal; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype'); - font-weight: 300; - font-style: italic; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: italic; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'); - font-weight: 400; - font-style: normal; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype'); - font-weight: 400; - font-style: italic; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: italic; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype'); - font-weight: 600; - font-style: normal; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'); - font-weight: 600; - font-style: italic; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: italic; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'); - font-weight: 700; - font-style: normal; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'), - url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype'); - font-weight: 700; - font-style: italic; + font-family: 'Open Sans'; + src: + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'), + url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: italic; } diff --git a/lms/static/sass/base/_headings.scss b/lms/static/sass/base/_headings.scss index 65ee686eea5..d952818f1e8 100644 --- a/lms/static/sass/base/_headings.scss +++ b/lms/static/sass/base/_headings.scss @@ -17,74 +17,74 @@ $headings-base-font-family: inherit; $headings-base-color: $gray-d2; %reset-headings { - margin: 0; - font-weight: $headings-font-weight-normal; - font-size: inherit; - line-height: inherit; - color: $headings-base-color; + margin: 0; + font-weight: $headings-font-weight-normal; + font-size: inherit; + line-height: inherit; + color: $headings-base-color; } %hd-1 { - margin-bottom: 1.41575em; - font-size: 2em; - line-height: 1.4em; + margin-bottom: 1.41575em; + font-size: 2em; + line-height: 1.4em; } %hd-2 { - font-size: 1.5em; - font-weight: $headings-font-weight-bold; - line-height: 1.4em; + font-size: 1.5em; + font-weight: $headings-font-weight-bold; + line-height: 1.4em; } %hd-3 { - margin-bottom: ($baseline / 2); - font-size: 1.35em; - font-weight: $headings-font-weight-normal; - line-height: 1.4em; + margin-bottom: ($baseline / 2); + font-size: 1.35em; + font-weight: $headings-font-weight-normal; + line-height: 1.4em; } %hd-4 { - margin-bottom: ($baseline / 2); - font-size: 1.25em; - font-weight: $headings-font-weight-bold; - line-height: 1.4em; + margin-bottom: ($baseline / 2); + font-size: 1.25em; + font-weight: $headings-font-weight-bold; + line-height: 1.4em; } %hd-5 { - margin-bottom: ($baseline / 2); - font-size: 1.1em; - font-weight: $headings-font-weight-bold; - line-height: 1.4em; + margin-bottom: ($baseline / 2); + font-size: 1.1em; + font-weight: $headings-font-weight-bold; + line-height: 1.4em; } %hd-6 { - margin-bottom: ($baseline / 2); - font-size: 1em; - font-weight: $headings-font-weight-bold; - line-height: 1.4em; + margin-bottom: ($baseline / 2); + font-size: 1em; + font-weight: $headings-font-weight-bold; + line-height: 1.4em; } %hd-7 { - margin-bottom: ($baseline / 4); - font-size: 14px; - font-weight: $headings-font-weight-bold; - text-transform: uppercase; - line-height: 1.6em; - letter-spacing: 1px; + margin-bottom: ($baseline / 4); + font-size: 14px; + font-weight: $headings-font-weight-bold; + text-transform: uppercase; + line-height: 1.6em; + letter-spacing: 1px; } %hd-8 { - margin-bottom: ($baseline / 8); - font-size: 12px; - font-weight: $headings-font-weight-bold; - text-transform: uppercase; - line-height: 1.5em; - letter-spacing: 1px; + margin-bottom: ($baseline / 8); + font-size: 12px; + font-weight: $headings-font-weight-bold; + text-transform: uppercase; + line-height: 1.5em; + letter-spacing: 1px; } // let's make these classnames available to the entire LMS! @@ -97,7 +97,7 @@ $headings-base-color: $gray-d2; .hd-6, .hd-7, .hd-8 { - @extend %reset-headings; + @extend %reset-headings; } @@ -106,25 +106,25 @@ $headings-base-color: $gray-d2; // ---------------------------- // canned heading classes @for $i from 1 through $headings-count { - .hd-#{$i} { - @extend %hd-#{$i}; - } + .hd-#{$i} { + @extend %hd-#{$i}; + } } // H3 was problematic in xblocks, we so we'll keep it as it was .xblock .xblock { + h2 { + @extend %hd-2; - h2 { - @extend %hd-2; - font-weight: $headings-font-weight-bold; - // override external modules and xblocks that use inline CSS - text-transform: initial; + font-weight: $headings-font-weight-bold; + // override external modules and xblocks that use inline CSS + text-transform: initial; - &.discussion-module-title { - margin-bottom: 0; - display: inline-block; - } + &.discussion-module-title { + margin-bottom: 0; + display: inline-block; } + } } diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index cb47af092bb..dadc9db13a1 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -4,13 +4,13 @@ // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; - // font-size: ($sizeValue/10) + rem; + // font-size: ($sizeValue/10) + rem; } // mixins - line height @mixin line-height($fontSize: auto){ line-height: ($fontSize*1.48) + px; - // line-height: (($fontSize/10)*1.48) + rem; + // line-height: (($fontSize/10)*1.48) + rem; } // image-replacement hidden text @@ -20,7 +20,7 @@ overflow: hidden; } -@mixin vertically-and-horizontally-centered ( $height, $width ) { +@mixin vertically-and-horizontally-centered ($height, $width) { left: 50%; margin-left: -$width / 2; //margin-top: -$height / 2; @@ -38,7 +38,7 @@ } @mixin show-hover-state() { - opacity: 1; + opacity: 1; } @function em($pxval, $base: 16) { @@ -54,6 +54,7 @@ // theme mixin styles @mixin login_register_h1_style {} + @mixin footer_references_style {} // ==================== @@ -62,12 +63,14 @@ %ui-wrapper { @include clearfix(); @include box-sizing(border-box); + width: 100%; } // extends - UI - window %ui-window { @include clearfix(); + border-radius: 3px; box-shadow: 0 1px 2px 1px $shadow-l1; margin-bottom: $baseline; @@ -103,7 +106,6 @@ // extends - UI - utility - nth-type style clearing %wipe-first-child { - &:first-child { margin-top: 0; border-top: none; @@ -113,7 +115,6 @@ // extends - UI - utility - nth-type style clearing %wipe-last-child { - &:last-child { margin-bottom: 0; border-bottom: none; @@ -123,18 +124,18 @@ // extends -hidden elems - screenreaders %text-sr { - // clip has been deprecated but is still supported - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); - position: absolute; - margin: -1px; - height: 1px; - width: 1px; - border: 0; - padding: 0; - overflow: hidden; - // ensure there are spaces in sr text - word-wrap: normal; + // clip has been deprecated but is still supported + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + position: absolute; + margin: -1px; + height: 1px; + width: 1px; + border: 0; + padding: 0; + overflow: hidden; + // ensure there are spaces in sr text + word-wrap: normal; } // extends - ensures proper contrast for automated checkers @@ -174,6 +175,7 @@ // extends - text - text overflow by ellipsis %text-truncated { @include box-sizing(border-box); + overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/lms/static/sass/base/_reset.scss b/lms/static/sass/base/_reset.scss index c15a10c1bf1..a564d93d7df 100644 --- a/lms/static/sass/base/_reset.scss +++ b/lms/static/sass/base/_reset.scss @@ -11,7 +11,7 @@ body { margin: 0; font-size: 1em; line-height: 1.4; } a { color: #005584; } // from the Pattern Library http://ux.edx.org/elements/colors/ a:visited { color: #003655; } // from the Pattern Library http://ux.edx.org/elements/colors/ -a:hover, a:focus { color: #0079BC; } // from the Pattern Library http://ux.edx.org/elements/colors/ +a:hover, a:focus { color: #0079bc; } // from the Pattern Library http://ux.edx.org/elements/colors/ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } @@ -23,7 +23,7 @@ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } -q:before, q:after { content: ""; content: none; } +q::before, q::after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } @@ -78,20 +78,21 @@ td { vertical-align: top; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } -.clearfix:before, .clearfix:after { content: ""; display: table; } -.clearfix:after { clear: both; } +.clearfix::before, .clearfix::after { content: ""; display: table; } +.clearfix::after { clear: both; } .clearfix { *zoom: 1; } @media print { * { background: transparent; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } html, body { background: transparent !important; } a, a:visited { text-decoration: underline; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after { content: ""; } + abbr[title]::after { content: " (" attr(title) ")"; } + .ir a::after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } + @page { margin: 1cm 1.2cm 2cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } diff --git a/lms/static/sass/base/_utilities.scss b/lms/static/sass/base/_utilities.scss index 84e35bc031e..dab066b7ed7 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; } diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss index 86e03ce2033..4bfbf763f1b 100644 --- a/lms/static/sass/bootstrap/_legacy.scss +++ b/lms/static/sass/bootstrap/_legacy.scss @@ -15,7 +15,7 @@ // Support .sr as a synonym for .sr-only .sr { - @extend .sr-only; + @extend .sr-only; } // ---------------------------- diff --git a/lms/static/sass/course/_auto-cert.scss b/lms/static/sass/course/_auto-cert.scss index 9ed28953c32..988ef1dc2a8 100644 --- a/lms/static/sass/course/_auto-cert.scss +++ b/lms/static/sass/course/_auto-cert.scss @@ -1,37 +1,39 @@ .wrapper-msg.wrapper-auto-cert { - @include margin(0, 0, 0, 0); // Overrides .wrapper-msg - @include padding(0, 0, 0, 0); // Overrides .wrapper-msg - background: none; // Overrides .wrapper-msg - - .errors-info { - margin-top: $baseline; - margin-bottom: $baseline; - color: $error-color; - } + @include margin(0, 0, 0, 0); // Overrides .wrapper-msg + @include padding(0, 0, 0, 0); // Overrides .wrapper-msg + + background: none; // Overrides .wrapper-msg + + .errors-info { + margin-top: $baseline; + margin-bottom: $baseline; + color: $error-color; + } + + .auto-cert-message { + margin: $baseline 0; + padding: $baseline; + border-left: 3px solid $m-blue-d1; + background: $gray-l5; + + .has-actions { + .msg-content { + width: flex-grid(9,12); + } + + .msg-actions { + @extend %t-copy-base; + + display: inline-block; + width: flex-grid(3,12); + + .btn { + @extend %btn-primary-blue; + @extend %t-weight4; - .auto-cert-message { - margin: $baseline 0; - padding: $baseline; - border-left: 3px solid $m-blue-d1; - background: $gray-l5; - - .has-actions { - - .msg-content { - width: flex-grid(9,12); - } - - .msg-actions { - @extend %t-copy-base; - display: inline-block; - width: flex-grid(3,12); - - .btn { - @extend %btn-primary-blue; - @extend %t-weight4; - text-shadow: none; - } - } + text-shadow: none; } + } } + } } diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index 10851950879..6dc663a102f 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -2,230 +2,242 @@ $cell-border-color: #e1e1e1; $table-border-color: #c8c8c8; .no-select { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } div.gradebook-wrapper { - section.gradebook-content { @extend .content; + display: block; width: 100%; + @include clearfix(); .student-search { - padding: 0 $baseline 0 ($baseline*0.75); + padding: 0 $baseline 0 ($baseline*0.75); } .student-search-field { - width: 100%; - height: 27px; - padding: 0 ($baseline*0.75) 0 35px; - @include box-sizing(border-box); - border-radius: 13px; - border: 1px solid $table-border-color; - background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6; - font-family: $sans-serif; - font-size: 11px; - box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset; - @include transition(border-color .15s linear 0s); - - &::-webkit-input-placeholder, - &::-moz-input-placeholder { - font-style: italic; - } - - &:focus { - border-color: #1d9dd9; - } + width: 100%; + height: 27px; + padding: 0 ($baseline*0.75) 0 35px; + + @include box-sizing(border-box); + + border-radius: 13px; + border: 1px solid $table-border-color; + background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6; + font-family: $sans-serif; + font-size: 11px; + box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset; + + @include transition(border-color .15s linear 0s); + + &::-webkit-input-placeholder, + &::-moz-input-placeholder { + font-style: italic; + } + + &:focus { + border-color: #1d9dd9; + } } .student-table { - float: left; - width: 24%; - border-radius: 3px 0 0 3px; - color: #3c3c3c; - - th { - height: 50px; - } - - tr:first-child td { - border-top: 1px solid $table-border-color; - border-radius: ($baseline/4) 0 0 0; - } - - tr:last-child td { - border-bottom: 1px solid $table-border-color; - border-radius: 0 0 0 ($baseline/4); - } - - td { - height: 50px; - padding-left: $baseline; - border-bottom: 1px solid $cell-border-color; - border-left: 1px solid $table-border-color; - background: $gray-l5; - font-size: 13px; - line-height: 50px; - } - - tr:nth-child(odd) td { - background-color: #fbfbfb; - } - } - - .grade-book-footer { - position: relative; - top: 15px; - width: 100%; - border: 0; - box-shadow: 0; - text-align: center; - display: inline-block; - } - - .grades { - position: relative; - float: left; - width: 76%; - overflow-x: auto; - overflow-y: hidden; - - .left-shadow, - .right-shadow { - @extend %ui-depth4; - position: absolute; - top: 0; - width: 20px; - pointer-events: none; - } - - .left-shadow { - left: 0; - background-image: -webkit-gradient(linear, left, $shadow-l1, $transparent 20%), -webkit-gradient(linear, left, $shadow-l1, $transparent); - background-image: -webkit-linear-gradient(left, $shadow-l1, $transparent 20%), -webkit-linear-gradient(left, $shadow-l1, $transparent); - background-image: -moz-linear-gradient(left, $shadow-l1, $transparent 20%), -moz-linear-gradient(left, $shadow-l1, $transparent); - background-image: -ms-linear-gradient(left, $shadow-l1, $transparent 20%), -ms-linear-gradient(left, $shadow-l1, $transparent); - background-image: -o-linear-gradient(left, $shadow-l1, $transparent 20%), -o-linear-gradient(left, $shadow-l1, $transparent); - } - - .right-shadow { - right: 0; - background-image: -webkit-gradient(linear, right, $shadow-l1, $transparent 20%), -webkit-gradient(linear, right, $shadow-l1, $transparent); - background-image: -webkit-linear-gradient(right, $shadow-l1, $transparent 20%), -webkit-linear-gradient(right, $shadow-l1, $transparent); - background-image: -moz-linear-gradient(right, $shadow-l1, $transparent 20%), -moz-linear-gradient(right, $shadow-l1, $transparent); - background-image: -ms-linear-gradient(right, $shadow-l1, $transparent 20%), -ms-linear-gradient(right, $shadow-l1, $transparent); - background-image: -o-linear-gradient(right, $shadow-l1, $transparent 20%), -o-linear-gradient(right, $shadow-l1, $transparent); - } - } - - .grade-table { - position: absolute; - top: 0; - left: 0; - width: 1000px; - cursor: move; - @include transition(none); - @include user-select(none); - - td, - th { - width: 50px; - text-align: center; - } - - thead th { - position: relative; - height: 50px; - @include linear-gradient(top, $cell-border-color, #ddd); - font-size: 10px; - line-height: 10px; - font-weight: bold; - text-align: center; - box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset; - border-left: 1px solid $gray-l3; - - &:first-child { - border-radius: 5px 0 0 0; - box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; - border-left: none; - } - - &:last-child { - border-radius: 0 3px 0 0; - box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; - } - - .assignment { - margin: 9px 0; - } - - .type, - .number, - .max { - display: block; - } - - .max { - height: 12px; - @include linear-gradient(top, #c6c6c6, #bababa); - font-size: 9px; - line-height: 12px; - color: $white; - } - } - - tr { - border-right: 1px solid $table-border-color; - } - - tr:first-child td { - border-top: 1px solid $table-border-color; - } - - tr:last-child td { - border-bottom: 1px solid $table-border-color; - } - - td { - height: 50px; - border-bottom: 1px solid $cell-border-color; - background: #f3f3f3; - font-size: 13px; - line-height: 50px; - border-left: 1px solid $cell-border-color; - } - - tr:nth-child(odd) td { - background-color: #fbfbfb; - } - } + float: left; + width: 24%; + border-radius: 3px 0 0 3px; + color: #3c3c3c; + + th { + height: 50px; + } + + tr:first-child td { + border-top: 1px solid $table-border-color; + border-radius: ($baseline/4) 0 0 0; + } + + tr:last-child td { + border-bottom: 1px solid $table-border-color; + border-radius: 0 0 0 ($baseline/4); + } + + td { + height: 50px; + padding-left: $baseline; + border-bottom: 1px solid $cell-border-color; + border-left: 1px solid $table-border-color; + background: $gray-l5; + font-size: 13px; + line-height: 50px; + } + + tr:nth-child(odd) td { + background-color: #fbfbfb; + } + } + + .grade-book-footer { + position: relative; + top: 15px; + width: 100%; + border: 0; + box-shadow: 0; + text-align: center; + display: inline-block; + } + + .grades { + position: relative; + float: left; + width: 76%; + overflow-x: auto; + overflow-y: hidden; + + .left-shadow, + .right-shadow { + @extend %ui-depth4; + + position: absolute; + top: 0; + width: 20px; + pointer-events: none; + } + + .left-shadow { + left: 0; + background-image: -webkit-gradient(linear, left, $shadow-l1, $transparent 20%), -webkit-gradient(linear, left, $shadow-l1, $transparent); + background-image: -webkit-linear-gradient(left, $shadow-l1, $transparent 20%), -webkit-linear-gradient(left, $shadow-l1, $transparent); + background-image: -moz-linear-gradient(left, $shadow-l1, $transparent 20%), -moz-linear-gradient(left, $shadow-l1, $transparent); + background-image: -ms-linear-gradient(left, $shadow-l1, $transparent 20%), -ms-linear-gradient(left, $shadow-l1, $transparent); + background-image: -o-linear-gradient(left, $shadow-l1, $transparent 20%), -o-linear-gradient(left, $shadow-l1, $transparent); + } + + .right-shadow { + right: 0; + background-image: -webkit-gradient(linear, right, $shadow-l1, $transparent 20%), -webkit-gradient(linear, right, $shadow-l1, $transparent); + background-image: -webkit-linear-gradient(right, $shadow-l1, $transparent 20%), -webkit-linear-gradient(right, $shadow-l1, $transparent); + background-image: -moz-linear-gradient(right, $shadow-l1, $transparent 20%), -moz-linear-gradient(right, $shadow-l1, $transparent); + background-image: -ms-linear-gradient(right, $shadow-l1, $transparent 20%), -ms-linear-gradient(right, $shadow-l1, $transparent); + background-image: -o-linear-gradient(right, $shadow-l1, $transparent 20%), -o-linear-gradient(right, $shadow-l1, $transparent); + } + } + + .grade-table { + position: absolute; + top: 0; + left: 0; + width: 1000px; + cursor: move; + + @include transition(none); + @include user-select(none); + + td, + th { + width: 50px; + text-align: center; + } + + thead th { + position: relative; + height: 50px; + + @include linear-gradient(top, $cell-border-color, #ddd); + + font-size: 10px; + line-height: 10px; + font-weight: bold; + text-align: center; + box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset; + border-left: 1px solid $gray-l3; + + &:first-child { + border-radius: 5px 0 0 0; + box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; + border-left: none; + } + + &:last-child { + border-radius: 0 3px 0 0; + box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; + } + + .assignment { + margin: 9px 0; + } + + .type, + .number, + .max { + display: block; + } + + .max { + height: 12px; + + @include linear-gradient(top, #c6c6c6, #bababa); + + font-size: 9px; + line-height: 12px; + color: $white; + } + } + + tr { + border-right: 1px solid $table-border-color; + } + + tr:first-child td { + border-top: 1px solid $table-border-color; + } + + tr:last-child td { + border-bottom: 1px solid $table-border-color; + } + + td { + height: 50px; + border-bottom: 1px solid $cell-border-color; + background: #f3f3f3; + font-size: 13px; + line-height: 50px; + border-left: 1px solid $cell-border-color; + } + + tr:nth-child(odd) td { + background-color: #fbfbfb; + } + } h1 { @extend .top-header; } } - .student-table tr:hover td, - .grade-table tr:hover td, - .student-table tr:focus td, - .grade-table tr:focus td, - .student-table tr.highlight td, - .grade-table tr.highlight td { - border-color: #74b7d6; - @include linear-gradient(#8ed6f7, #76cbf4); - color: #333; - - a { - color: #333; - } - } + .student-table tr:hover td, + .grade-table tr:hover td, + .student-table tr:focus td, + .grade-table tr:focus td, + .student-table tr.highlight td, + .grade-table tr.highlight td { + border-color: #74b7d6; + + @include linear-gradient(#8ed6f7, #76cbf4); + + color: #333; + + a { + color: #333; + } + } } diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index dc9a436fc7f..e4a0d5694d7 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -5,8 +5,9 @@ $notification-highlight-border-color: $uxpl-green-base !default; $lms-border-color: $uxpl-gray-background !default; $notification-background: rgb(255, 255, 255) !default -.home { + .home{ @include clearfix(); + max-width: 1140px; margin: 0 auto; padding: $baseline $baseline ($baseline/2) $baseline; @@ -31,6 +32,7 @@ $notification-background: rgb(255, 255, 255) !default .page-header-secondary { @include float(right); + display: inline-block; margin: ($baseline/2); padding: ($baseline/2) ($baseline*0.75); @@ -39,18 +41,20 @@ $notification-background: rgb(255, 255, 255) !default .last-accessed-link { @extend %t-title6; + color: $very-light-text; } } } div.info-wrapper { - background-color: $homepage-background; section.updates { @extend .content; + @include padding-left($baseline); + line-height: lh(); width: 100%; display: block; @@ -120,6 +124,7 @@ div.info-wrapper { border-radius:3px; background-color: $white; border:1px solid transparent; + &:hover { border: 1px solid $gray-l3; } @@ -127,8 +132,11 @@ div.info-wrapper { .show-older-updates { @extend %btn-pl-white-base; + padding: ($baseline/2); + @include font-size(14); + width: 100%; display: block; text-align: center; @@ -144,6 +152,7 @@ div.info-wrapper { > li,article { @extend .clearfix; + padding: $baseline; list-style-type: none; margin-bottom: lh(1.5); @@ -157,9 +166,11 @@ div.info-wrapper { .date { @extend %t-title9; + margin-bottom: ($baseline/4); text-transform: none; background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat; + @include padding-left($baseline); @include float(left); } @@ -167,7 +178,9 @@ div.info-wrapper { .toggle-visibility-button { @extend %t-title9; + @include float(right); + padding: 0; cursor: pointer; background: none; @@ -185,13 +198,14 @@ div.info-wrapper { section.update-description { section { &.primary { - border: 1px solid #DDD; + border: 1px solid #ddd; background: $gray-l6; padding: 20px; p { font-weight: bold; } + .author { font-weight: normal; font-style: italic; @@ -225,7 +239,9 @@ div.info-wrapper { section.handouts { padding: 20px 30px; margin: 0; + @extend .sidebar; + background: rgba(0, 0, 0, 0); box-shadow: none; font-size: 14px; @@ -245,15 +261,17 @@ div.info-wrapper { } } - &:after { + &::after { left: -1px; right: auto; } .handouts-header { @include text-align(left); + @extend %t-strong; @extend %t-title6; + margin-bottom: 0; padding: 12px 26px 10px 0; } @@ -264,6 +282,7 @@ div.info-wrapper { ol { margin-bottom: 14px; + li { @include text-align(left); @@ -281,6 +300,7 @@ div.info-wrapper { &.expandable, &.collapsable { margin: 0 16px 14px 16px; + @include transition(all .2s linear 0s); h4 { @@ -303,7 +323,6 @@ div.info-wrapper { } &.multiple { - a { display: inline-block; padding: 0; @@ -354,12 +373,13 @@ div.info-wrapper { + h4 { @extend a:hover; + text-decoration: underline; } } &.expandable-hitarea { - background-position: -72px 0px; + background-position: -72px 0; } &.collapsable-hitarea { @@ -383,7 +403,7 @@ div.info-wrapper { a { padding-right: 8px; - &:before { + &::before { color: $gray-l3; content: "•"; display: inline-block; @@ -391,7 +411,7 @@ div.info-wrapper { } &:first-child { - &:before { + &::before { content: ""; padding-right: 0; } diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index e9200e47de5..10dabcf60e2 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -3,17 +3,19 @@ .user-info { @extend .sidebar; + border-left: 1px solid #d3d3d3; - border-radius: 0px 4px 4px 0; + border-radius: 0 4px 4px 0; border-right: 0; - &:after { + &::after { left: -1px; right: auto; } header { @extend .bottom-border; + margin: 0; padding: lh(0.5); @@ -34,6 +36,7 @@ padding: lh(0.5) 0 lh(0.5) lh(0.5); position: relative; text-decoration: none; + @include transition(none); div#location_sub, div#language_sub { @@ -45,9 +48,9 @@ } input { - &[type="text"] { @include box-sizing(border-box); + margin: lh(0.5) 0; width: 100%; } @@ -118,7 +121,7 @@ #change_password_pop { border-bottom: 1px solid #d3d3d3; box-shadow: 0 1px 0 #eee; - color: #4D4D4D; + color: #4d4d4d; padding: 7px lh(); h2 { @@ -136,10 +139,12 @@ header { @extend .clearfix; @extend h1.top-header; + margin-bottom: lh(); .hd { @include float(left); + font-size: 1em; font-weight: 100; margin: 0; @@ -155,9 +160,11 @@ #course-success { margin-bottom: ($baseline*1.5); text-align: center; + > a { @include button(simple, $button-color); @include box-sizing(border-box); + border-radius: 3px; font: normal 15px/1.6rem $sans-serif; letter-spacing: 0; @@ -178,10 +185,12 @@ > .credit-eligibility{ border-top: 1px solid $lightGrey; margin-top: lh(); + @include padding-left(0); > .credit-eligibility-container { - padding: lh(); + padding: lh(); + > .credit-help { display: inline-block; background: $blue; @@ -192,42 +201,57 @@ border-radius: lh(0.9); border-color: $white; text-shadow: None; + @include padding-left(0.2em); } + > .detail-collapse{ border: none; box-shadow: none; background: $white; padding: 0; color: $blue; + > i { padding: lh(0.25); } + > span{ color: inherit; } } - > .requirement-container{ + + > .requirement-container { padding: lh(); + > .requirement{ border-bottom: 1px solid $lightGrey; padding: lh(0.5); + > .requirement-name { width: bi-app-invert-percentage(40%); display: inline-block; } + > .requirement-status{ width: bi-app-invert-percentage(60%); + @include float(right); + display: inline-block; + .fa-times{ @extend %t-icon6; + color: $alert-color; } + .fa-check{ @extend %t-icon6; + color: $success-color; } + > .not-achieve{ color: $darkGrey; } @@ -244,18 +268,20 @@ > section { @extend .clearfix; + border-bottom: 1px solid #e3e3e3; display: table; padding: lh() 0; width: 100%; &:last-child { - border-bottom: 0px; + border-bottom: 0; } .hd { @include border-right(1px dashed #ddd); @include box-sizing(border-box); + display: table-cell; letter-spacing: 0; margin: 0; @@ -268,7 +294,9 @@ .sections { display: inline-block; + @include padding-left(flex-gutter(9)); + width: flex-grid(7, 9); > div { @@ -310,7 +338,9 @@ display: inline-block; width: auto; margin: initial; + @include margin-right($baseline); + border: initial; padding: initial; font-size: em(14); @@ -319,8 +349,10 @@ dd { display: inline-block; margin: 0; + @include margin-right($baseline); @include padding-right(1em); + font-size: em(14); font-weight: normal; color: $gray-d2; diff --git a/lms/static/sass/course/_student-notes.scss b/lms/static/sass/course/_student-notes.scss index ecda91eeee5..bd98642eec4 100644 --- a/lms/static/sass/course/_student-notes.scss +++ b/lms/static/sass/course/_student-notes.scss @@ -26,7 +26,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; %notes-tab-control { @include transition(none); + @extend %shame-link-base; + display: inline-block; vertical-align: middle; border-bottom: ($baseline/5) solid $transparent; @@ -38,11 +40,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // -------------------- .wrapper-student-notes { @include clearfix(); + padding-bottom: $baseline; .student-notes { @include clearfix(); + @extend .content; // needed extend carried over from course handouts UI, but should be cleaned up + width: 100%; } } @@ -51,20 +56,24 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // -------------------- .title-search-container { @include clearfix(); + margin-bottom: $baseline; .wrapper-title { @include float(left); + width: flex-grid(7,12); .page-title { @extend %t-title4; @extend %t-weight1; + margin-bottom: 0; .page-subtitle { @extend %t-title7; @extend %t-weight2; + display: block; margin-top: ($baseline/4); color: $gray-l1; @@ -75,7 +84,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .wrapper-notes-search { @include float(right); + width: flex-grid(5,12); + @include text-align(right); } @@ -86,8 +97,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .search-notes-input { @extend %t-demi-strong; + position: relative; + @include right(-6px); // manually positioning input right next to submit + width: 55%; padding: ($baseline/2) ($baseline*0.75); color: $gray-d3; @@ -96,6 +110,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .search-notes-submit { @extend %btn-inherited-primary; @extend %t-action2; + padding: 8px $baseline 9px $baseline; // manually syncing up height with search input } } @@ -111,6 +126,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .course-title, .tags-title { @extend %t-title6; @extend %t-weight4; + margin: 0 0 ($baseline/2) 0; color: $gray-d3; } @@ -118,6 +134,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .course-subtitle { @extend %t-title7; @extend %t-weight4; + margin: 0 0 ($baseline/4) 0; border-bottom: $divider-visual-tertiary; padding-bottom: ($baseline/2); @@ -132,10 +149,12 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // individual note .note { @include clearfix(); + margin: ($baseline*1.5) 0; .wrapper-note-excerpts { @include transition(box-shadow $tmg-avg ease-in-out 0, border-color $tmg-avg ease-in-out 0); + display: inline-block; width: flex-grid(9, 12); border: 1px solid $gray-l5; @@ -144,6 +163,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // note - highlighted content .note-excerpt { @include transition(background-color $tmg-avg ease-in-out 0); + padding: $baseline; background: $student-notes-highlight-color; @@ -158,30 +178,36 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; @extend %t-copy-sub1; @extend %t-weight2; @extend %shame-link-text; + display: inline; + @include margin-left($baseline/4); + border: 0; background: transparent; padding: 0; &:active { - background: transparent; - box-shadow: none; + background: transparent; + box-shadow: none; } } // note - comment made on highlighted content .note-comments { @extend %ui-no-list; + border-top: ($baseline/5) solid $student-notes-highlight-color-focus; .note-comment { @include transition(color $tmg-avg ease-in-out 0); + padding: ($baseline*0.75) $baseline; color: $gray; .note-comment-title { @extend %t-title8; + letter-spacing: ($baseline/20); margin: 0 0 ($baseline/4) 0; color: $gray-l2; @@ -192,6 +218,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .note-comment-ol { @extend %t-copy-sub1; @extend %t-weight2; + padding: 0; margin: 0; background: transparent; @@ -218,6 +245,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // note reference .reference { @extend %t-copy-sub1; + display: inline-block; width: flex-grid(3, 12); vertical-align: top; @@ -229,6 +257,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .reference-title { @extend %t-title8; @extend %t-weight3; + margin-top: ($baseline/2); text-transform: uppercase; letter-spacing: ($baseline/20); @@ -242,6 +271,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .reference-meta { @extend %t-weight2; + color: $m-gray-d2; } @@ -254,26 +284,25 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; } } // Put commas between tags. - span.reference-meta.reference-tags:after { + span.reference-meta.reference-tags::after { content: ","; color: $m-gray-d2; } // But not after the last tag. - span.reference-meta.reference-tags:last-child:after { - content: ""; + span.reference-meta.reference-tags:last-child::after { + content: ""; } // needed for poor base LMS styling scope a.reference-meta { - @extend %shame-link-text; + @extend %shame-link-text; } } } // STATE: hover/focus &:hover, &:focus { - .wrapper-note-excerpts { box-shadow: 0 2px 0 1px $shadow-l2; border-color: $gray-l4; @@ -294,9 +323,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // +tabbed views // -------------------- .wrapper-tabs { - .tab-panel, .inline-error, .ui-loading { @extend %no-outline; + border-top: $divider-visual-primary; .listing-tools { @@ -321,6 +350,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .tab-list { @include clearfix(); + position: relative; top: ($baseline/5); @@ -331,16 +361,21 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .tabs-label { @extend %hd-lv5; + margin-bottom: 0; padding: ($baseline*0.75) 0; + @include padding-right($baseline); + color: $gray-l2; font-weight: $font-semibold !important; // needed for poor base LMS styling scope } .tabs { @include clearfix(); + @extend %ui-no-list; + position: relative; bottom: -($baseline/4); } @@ -351,6 +386,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .tab-label { @extend %notes-tab-control; + padding: ($baseline/2) ($baseline*0.75); text-align: center; @@ -361,7 +397,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // STATE: active/current tab being viewed &.is-active { - .tab-label { border-bottom-color: $gray-d3; color: $gray-d3; @@ -376,8 +411,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; // CASE: tab-label can be closed .action-close { @extend %notes-tab-control; + position: relative; + @include left(-($baseline*0.75)); + padding: ($baseline/2); } } @@ -390,6 +428,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; #no-results-panel { p { @extend %t-copy-lead1; + margin: ($baseline*1.5) 0; } } @@ -410,6 +449,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; .placeholder-title { @extend %hd-lv3; + margin-bottom: $baseline; text-transform: none; // reset needed for poor h2 element styling letter-spacing: 0; // reset needed for poor h2 element styling @@ -423,6 +463,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; li { @extend %wipe-last-child; + display: block; margin-bottom: ($baseline/2); } diff --git a/lms/static/sass/course/_syllabus.scss b/lms/static/sass/course/_syllabus.scss index c0bd19a4563..46ec08eafe2 100644 --- a/lms/static/sass/course/_syllabus.scss +++ b/lms/static/sass/course/_syllabus.scss @@ -1,7 +1,5 @@ div.syllabus { - padding: 2em 2.5em; - text-align: center; h1 { @@ -9,13 +7,12 @@ div.syllabus { } .notes { - margin: 0px auto 20px; + margin: 0 auto 20px; } table { table-layout: auto; text-align: left; - margin: ($baseline/2) 0; thead { @@ -49,7 +46,7 @@ div.syllabus { } &.week_separator { - padding: 0px !important; + padding: 0 !important; hr { margin: ($baseline/2); diff --git a/lms/static/sass/course/_tabs.scss b/lms/static/sass/course/_tabs.scss index 62557e0609e..a76bc36924b 100644 --- a/lms/static/sass/course/_tabs.scss +++ b/lms/static/sass/course/_tabs.scss @@ -1,5 +1,6 @@ div.static_tab_wrapper { - @include box-sizing(border-box); + @include box-sizing(border-box); + padding: 2em 2.5em; h1 { @@ -7,7 +8,7 @@ div.static_tab_wrapper { } section { - margin: 0px 0px 20px; + margin: 0 0 20px; } @media print { diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index d4eb81ddcd3..f7130852e5f 100755 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -2,6 +2,7 @@ div.book-wrapper { max-width: 1150px; margin: 0 auto; width: 100%; + /*background-color: $white;*/ #open_close_accordion { @@ -20,7 +21,9 @@ div.book-wrapper { section.book-sidebar { @extend .sidebar; @extend .tran; + @include box-sizing(border-box); + padding: ($baseline/2) 0; border-radius: 3px 0 0 3px; border: 1px solid $gray-l3; @@ -28,7 +31,7 @@ div.book-wrapper { width: 180px; #booknav { - list-style: none; + list-style: none; .chapter { line-height: 1.4em; @@ -36,12 +39,14 @@ div.book-wrapper { .page-number { @include float(right); + width: 12%; - font-size: .8em; + font-size: 0.8em; line-height: 2.1em; text-align: right; color: #9a9a9a; - opacity: 0.0; + opacity: 0; + @include transition(opacity .15s linear 0s); } @@ -52,6 +57,7 @@ div.book-wrapper { a { @include clearfix(); + padding: 0; color: $uxpl-blue-base; @@ -60,14 +66,13 @@ div.book-wrapper { color: $uxpl-blue-hover-active; .page-number { - opacity: 1.0; + opacity: 1; } } } div.hitarea { background-image: url('#{$static-path}/images/treeview-default.gif'); - position: relative; top: 4px; @@ -97,6 +102,7 @@ div.book-wrapper { .book { @extend .content; + padding: 0; width:76%; @@ -105,6 +111,7 @@ div.book-wrapper { a { @extend .block-link; + padding: 0 lh(); } @@ -121,18 +128,22 @@ div.book-wrapper { background-color: rgba(#000, .7); background-position: center; background-repeat: no-repeat; + @include box-sizing(border-box); + display: table; height: 100%; - opacity: 0.0; + opacity: 0; filter: alpha(opacity=0); text-indent: -9999px; + @include transition(none); + vertical-align: middle; width: 100%; &:hover, &:focus { - opacity: 1.0; + opacity: 1; } &.is-disabled { @@ -183,12 +194,12 @@ div.book-wrapper { div { text-align: left; - line-height: 1.6em; - margin: ($baseline/4); + line-height: 1.6em; + margin: ($baseline/4); - .Paragraph, h2 { - margin-top: ($baseline/2); - } + .Paragraph, h2 { + margin-top: ($baseline/2); + } } } } diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 2f52924487b..c091ff74044 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -41,12 +41,13 @@ body { body, h1, h2, h3, h4, h5, h6, p, label { @include text-align(left); + font-family: $sans-serif; } // we want to hide the outline on the focusable
element main { - outline: none; + outline: none; } table { @@ -74,6 +75,7 @@ form { form.choicegroup { label { clear: both; + @include float(left); } } @@ -87,7 +89,9 @@ input[type="password"] { border: 1px solid $border-color-2; border-radius: 0; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1; + @include box-sizing(border-box); + font: normal 1em $sans-serif; height: 35px; padding: ($baseline/4) 12px; @@ -135,16 +139,17 @@ img { z-index: 99999; padding: 0 10px; border-radius: 3px; - background: rgba(0, 0, 0, .85); + background: rgba(0, 0, 0, 0.85); font-size: 11px; font-weight: 400; line-height: 26px; color: $white; pointer-events: none; opacity: 0; + @include transition(opacity .1s linear 0s); - &:after { + &::after { content: '▾'; display: block; position: absolute; @@ -152,7 +157,7 @@ img { left: 50%; margin-left: -7px; font-size: 20px; - color: rgba(0, 0, 0, .85); + color: rgba(0, 0, 0, 0.85); } } @@ -215,6 +220,7 @@ img { .action-btn { @include dark-grey-button; + margin-top: ($baseline/2); text-align: center; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 99eb26e3e58..b8afa9aa47c 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -11,7 +11,9 @@ // Older Course Extends - to review/remove with LMS cleanup h1.top-header { border-bottom: 1px solid $border-color-2; + @include text-align(left); + font-size: em(24); font-weight: 100; padding-bottom: lh(); @@ -29,19 +31,25 @@ h1.top-header { .light-button, a.light-button, // only used in askbot as classes .gray-button { @include simple($gray-l5); + @extend .button-reset; + font-size: em(13); } .blue-button { @include simple($blue); + @extend .button-reset; + font-size: em(13); } .pink-button { @include simple($pink); + @extend .button-reset; + font-size: em(13); } @@ -68,12 +76,12 @@ h1.top-header { background: $sidebar-color; h1, h2, h3, h4 { - font-weight: bold; - letter-spacing: 0; - text-transform: none; - font-family: $sans-serif; - text-align: left; - font-style: normal; + font-weight: bold; + letter-spacing: 0; + text-transform: none; + font-family: $sans-serif; + text-align: left; + font-style: normal; } h1 { @@ -112,6 +120,7 @@ h1.top-header { li { @include margin-left(20px); + background: none; position: relative; padding: 0; @@ -136,7 +145,7 @@ h1.top-header { a { background: #f6f6f6 url('#{$static-path}/images/slide-left-icon.png') center center no-repeat; - border: 1px solid #D3D3D3; + border: 1px solid #d3d3d3; border-radius: 3px 0 0 3px; height: 16px; padding: 6px; @@ -160,6 +169,7 @@ h1.top-header { .topbar { @extend .clearfix; + border-bottom: 1px solid $border-color; @media print { @@ -179,37 +189,43 @@ h1.top-header { } .tran { - @include transition( all .2s $ease-in-out-quad 0s); + @include transition(all .2s $ease-in-out-quad 0s); } // FontAwesome rtl chevron next .fa-chevron-next { - &:before { + &::before { @if $bi-app-direction == ltr { - content: "\f054"; // .fa-chevron-right - } @else if $bi-app-direction == rtl { - content: "\f053"; // .fa-chevron-left + content: "\f054"; // .fa-chevron-right + } + + @else if $bi-app-direction == rtl { + content: "\f053"; // .fa-chevron-left } } } // FontAwesome rtl chevron prev .fa-chevron-prev { - &:before { + &::before { @if $bi-app-direction == ltr { - content: "\f053"; // .fa-chevron-left - } @else if $bi-app-direction == rtl { - content: "\f054"; // .fa-chevron-right + content: "\f053"; // .fa-chevron-left + } + + @else if $bi-app-direction == rtl { + content: "\f054"; // .fa-chevron-right } } } .fa-arrow-circle-prev { - &:before { + &::before { @if $bi-app-direction == ltr { - content: "\f0a8"; // .fa-arrow-circle-left - } @else if $bi-app-direction == rtl { - content: "\f0a9"; // .fa-arrow-circle-right + content: "\f0a8"; // .fa-arrow-circle-left + } + + @else if $bi-app-direction == rtl { + content: "\f0a9"; // .fa-arrow-circle-right } } } diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss index 56c8483137f..b53f05462d3 100644 --- a/lms/static/sass/course/base/_mixins.scss +++ b/lms/static/sass/course/base/_mixins.scss @@ -5,7 +5,9 @@ padding: 0 15px; border-radius: 3px; border: 1px solid #2d81ad; + @include linear-gradient(top, #6dccf1, #38a8e5); + font-size: 13px; font-weight: 700; line-height: 32px; @@ -15,6 +17,7 @@ &:hover, &:focus { border-color: #297095; + @include linear-gradient(top, #4fbbe4, #2090d0); } } @@ -25,7 +28,9 @@ padding: 0 15px; border-radius: 3px; border: 1px solid #444; + @include linear-gradient(top, #eee, $gray-l3); + font-size: 13px; font-weight: 700; line-height: 32px; diff --git a/lms/static/sass/course/ccx_coach/_dashboard.scss b/lms/static/sass/course/ccx_coach/_dashboard.scss index 67a42332502..842a61677b5 100644 --- a/lms/static/sass/course/ccx_coach/_dashboard.scss +++ b/lms/static/sass/course/ccx_coach/_dashboard.scss @@ -1,128 +1,147 @@ .ccx-schedule-container { - float: left; - width: 750px; + float: left; + width: 750px; } table.ccx-schedule { + width: 100%; + + thead { + border-bottom: 2px solid black; + } + + th:first-child { + width: 40%; + } + + th:last-child { + width: 18%; + } + + th, td { + padding: 10px; + } + + td.no-link { + font-size: 13px; + text-shadow: 0 1px 0 #fcfbfb; + text-decoration: none; + } + + .sequential .unit { + padding-left: 25px; + } + + .vertical .unit { + padding-left: 40px; + } + + a.empty { + display: block; width: 100%; + color: white; + } - thead { - border-bottom: 2px solid black; - } - th:first-child { - width: 40%; - } - th:last-child { - width: 18%; - } - th, td { - padding: 10px; - } - td.no-link { - font-size: 13px; - text-shadow: 0 1px 0 #fcfbfb; - text-decoration: none; - } - .sequential .unit { - padding-left: 25px; - } - .vertical .unit { - padding-left: 40px; - } - a.empty { - display: block; - width: 100%; - color: white; - } - a.empty:hover { - color: #cbcbcb; - } + a.empty:hover { + color: #cbcbcb; + } } .ccx-schedule-sidebar { - float: left; - width: 295px; - margin-left: 20px; + float: left; + width: 295px; + margin-left: 20px; } .ccx-sidebar-panel { - border: 1px solid #cbcbcb; - padding: 15px; - margin-bottom: 20px; + border: 1px solid #cbcbcb; + padding: 15px; + margin-bottom: 20px; } form.ccx-form { - line-height: 1.5; - // inspiration was taken from https://github.com/edx/ux-pattern-library - select { - @include font-size(16); - background: #fcfcfc; - border: 1px solid #e9e8e8; - box-sizing: padding-box; - color: #282c2e; - display: inline-block; - font-size: ($baseline*.9.5); - height: 40px; - line-height: 20px; - padding: 10px; - transition: all 125ms ease-in-out 0s; - width: 100%; - &:disabled { - border-color: #cfd8dc; - background: #e7ecee; - cursor: not-allowed; - } + line-height: 1.5; + // inspiration was taken from https://github.com/edx/ux-pattern-library + select { + @include font-size(16); + + background: #fcfcfc; + border: 1px solid #e9e8e8; + box-sizing: padding-box; + color: #282c2e; + display: inline-block; + font-size: ($baseline*.9.5); + height: 40px; + line-height: 20px; + padding: 10px; + transition: all 125ms ease-in-out 0s; + width: 100%; + + &:disabled { + border-color: #cfd8dc; + background: #e7ecee; + cursor: not-allowed; } - input { - @include font-size(15); - background: #FCFCFC none repeat scroll 0% 0%; - border: 1px solid #E7E6E6; - box-sizing: border-box; - color: #34383A; - display: inline-block; - line-height: normal; - transition: all 0.125s ease-in-out 0s; - padding: 5px 10px 5px 10px; - &:focus { - border-color: #0ea6ec; - color: #282c2e; - outline: 0; - } - &:disabled { - border-color: #cfd8dc; - background: #e7ecee; - cursor: not-allowed; - } + } + + input { + @include font-size(15); + + background: #fcfcfc none repeat scroll 0% 0%; + border: 1px solid #e7e6e6; + box-sizing: border-box; + color: #34383a; + display: inline-block; + line-height: normal; + transition: all 0.125s ease-in-out 0s; + padding: 5px 10px 5px 10px; + + &:focus { + border-color: #0ea6ec; + color: #282c2e; + outline: 0; } - .field { - margin: 5px 0 5px 0; + + &:disabled { + border-color: #cfd8dc; + background: #e7ecee; + cursor: not-allowed; } + } + + .field { + margin: 5px 0 5px 0; + } } button.ccx-button-link { + background: none; + border: none; + padding: 0; + color: #069; + cursor: pointer; + + &::after { + content: "\00a0 "; + } + + &:active { background: none; border: none; padding: 0; - color: #069; - cursor: pointer; - &:after { - content: "\00a0 "; - } - &:active { - background: none; - border: none; - padding: 0; - } - &:hover { - color: brown; - background: none; - } - &:focus { - background: none; - } + } + + &:hover { + color: brown; + background: none; + } + + &:focus { + background: none; + } } .ccx-manage-student-form input#student-id { - width: 60%; + width: 60%; } diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss index dea469df02f..824585bd25f 100644 --- a/lms/static/sass/course/courseware/_amplifier.scss +++ b/lms/static/sass/course/courseware/_amplifier.scss @@ -1,6 +1,7 @@ // JM MOSFET AMPLIFIER section.tool-wrapper { @extend .clearfix; + background: #073642; border-bottom: 1px solid darken(#002b36, 10%); border-top: 1px solid darken(#002b36, 10%); @@ -11,7 +12,9 @@ section.tool-wrapper { div#graph-container { background: none; + @include box-sizing(border-box); + display: table-cell; padding: lh(); vertical-align: top; @@ -74,19 +77,22 @@ section.tool-wrapper { div#controlls-container { @extend .clearfix; + background: darken(#073642, 2%); border-right: 1px solid darken(#002b36, 6%); box-shadow: 1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%); + @include box-sizing(border-box); + display: table-cell; padding: lh(); vertical-align: top; width: flex-grid(4.5, 9); div.graph-controls { - div.music-wrapper { @extend .clearfix; + border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); margin-bottom: lh(); @@ -94,7 +100,9 @@ section.tool-wrapper { input#playButton { border-color: darken(#002b36, 6%); - @include button(simple, lighten( #586e75, 5% )); + + @include button(simple, lighten(#586e75, 5%)); + display: block; float: right; font: bold 14px $body-font-family; @@ -106,6 +114,7 @@ section.tool-wrapper { &[value="Stop"] { @include button(simple, darken(#268bd2, 30%)); + font: bold 14px $body-font-family; &:active { @@ -117,9 +126,12 @@ section.tool-wrapper { div.inputs-wrapper { @extend .clearfix; + border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); + @include clearfix(); + margin-bottom: lh(); margin-bottom: lh(); padding: 0 0 lh(); @@ -192,6 +204,7 @@ section.tool-wrapper { div.schematic-sliders { div.top-sliders { @extend .clearfix; + border-bottom: 1px solid darken(#073642, 10%); box-shadow: 0 1px 0 lighten(#073642, 2%); margin-bottom: lh(); @@ -231,13 +244,13 @@ section.tool-wrapper { } .ui-slider-handle { - background: lighten( #586e75, 5% ) url('#{$static-path}/images/amplifier-slider-handle.png') center no-repeat; + background: lighten(#586e75, 5%) url('#{$static-path}/images/amplifier-slider-handle.png') center no-repeat; border: 1px solid darken(#002b36, 8%); - box-shadow: inset 0 1px 0 lighten( #586e75, 20% ); + box-shadow: inset 0 1px 0 lighten(#586e75, 20%); margin-top: -.3em; &:hover, &:active, &:focus { - background-color: lighten( #586e75, 10% ); + background-color: lighten(#586e75, 10%); } } } diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 24df4065eb3..a2c1b84664f 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -27,9 +27,11 @@ html.video-fullscreen { .instructor-info-action { @extend %t-copy-sub2; + @include float(right); @include margin-left($baseline/2); @include text-align(right); + padding: ($baseline/4) ($baseline/2); border-radius: ($baseline/4); background-color: $light-gray1; @@ -44,9 +46,9 @@ html.video-fullscreen { } .content-wrapper { - .container-footer { @include text-align(right); + margin: 0 auto; max-width: grid-width(12); min-width: 760px; @@ -55,47 +57,48 @@ html.video-fullscreen { } .content-wrapper { + .course-license, + .xblock-license { + @include text-align(right); - .course-license, - .xblock-license { - @include text-align(right); - @extend %t-title7; - display: block; - width: auto; - padding: ($baseline/4) 0; - color: $base-font-color; + @extend %t-title7; - span { - color: inherit; - } + display: block; + width: auto; + padding: ($baseline/4) 0; + color: $base-font-color; - a:link, - a:visited { - color: $base-font-color; - } + span { + color: inherit; + } - a:active, - a:hover { - color: $uxpl-blue-base; - } + a:link, + a:visited { + color: $base-font-color; + } - .license-label, - .license-value, - .license-actions { - display: inline-block; - vertical-align: middle; - margin-bottom: 0; - } + a:active, + a:hover { + color: $uxpl-blue-base; + } - i, - em { - font-style: normal; - } + .license-label, + .license-value, + .license-actions { + display: inline-block; + vertical-align: middle; + margin-bottom: 0; + } - img { - display: inline; - } + i, + em { + font-style: normal; + } + + img { + display: inline; } + } } // TO-DO should this be content wrapper? @@ -121,55 +124,68 @@ html.video-fullscreen { .course-content, .courseware-results-wrapper { @extend .content; + line-height: 1.6; .xblock { - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; } h1 { margin: 0 0 lh(); letter-spacing: 0; } + div.timed-exam { h3 { margin-bottom: 12px; font-size: 22px; font-weight: 600; } + h1 { margin-bottom: ($baseline/2); font-size: 26px; font-weight: 600; } + h4 { margin: 20px 0; font-weight: 600; + b.success { - color: #2B8048; + color: #2b8048; } + b.success { - color: #2B8048; + color: #2b8048; } + b.failure { - color: #CB4765; + color: #cb4765; } } + p { color: #797676; + strong { font-weight: 600; } } + button.gated-sequence { background: $transparent; color: $uxpl-blue-base; border: none; box-shadow: none; + @include text-align(left); + @extend %t-copy-base; + width: 100%; &:hover { @@ -182,34 +198,41 @@ html.video-fullscreen { margin-top: 5px; font-size: 1.3em; } + .gated-sequence { color: $uxpl-blue-base; font-weight: 600; padding: ($baseline / 1.5) ($baseline / 4); + a.start-timed-exam { cursor: pointer; color: $uxpl-blue-base; font-weight: 600; position: relative; top: ($baseline/10); + i.fa-arrow-circle-right { font-size: $baseline; } } } + .proctored-exam-select-code { @include margin-left(30px); } .exam-action-button { @extend %t-weight4; + @include margin-right($baseline); + background-image: none; box-shadow: none; text-shadow: none; &.btn-pl-primary { @extend %btn-pl-primary-base; + border: 0; &:hover, @@ -219,41 +242,50 @@ html.video-fullscreen { } } - background-color: #F2F8FB; + background-color: #f2f8fb; padding: 30px; font-size: 16px; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1); border: 1px solid #ddd; + &.critical-time { border-left: 4px solid #b30101 !important; margin: 0 auto; } + &.success { - border-left: 4px solid #22B557 !important; + border-left: 4px solid #22b557 !important; margin: 0 auto; } + &.success-top-bar { - border-top: 4px solid #22B557 !important; + border-top: 4px solid #22b557 !important; margin: 0 auto; } + &.success-left-bar { - border-left: 4px solid #22B557 !important; + border-left: 4px solid #22b557 !important; margin: 0 auto; } + &.message-top-bar { - border-top: 4px solid #FAB95C !important; + border-top: 4px solid #fab95c !important; margin: 0 auto; } + &.message-left-bar { - border-left: 4px solid #FAB95C !important; + border-left: 4px solid #fab95c !important; margin: 0 auto; } + &.failure { - border-left: 4px solid #C93B34 !important; + border-left: 4px solid #c93b34 !important; margin: 0 auto; } + &.warning { @include border-left(4px solid $warning-color); + margin: 0 auto; } } @@ -299,6 +331,7 @@ html.video-fullscreen { p { color: $uxpl-gray-base; + strong { font-weight: 600; } @@ -306,6 +339,7 @@ html.video-fullscreen { .icon { @include right(35px); + position: absolute; font-size: 30px; color: $uxpl-gray-base; @@ -337,64 +371,81 @@ html.video-fullscreen { .proctored-exam-skip-actions { @include float(right); + margin-top: $baseline; } } + .footer-sequence { - padding: 30px 0px 20px 0px; - border-bottom: ($baseline/10) solid #CFD9DD; + padding: 30px 0 20px 0; + border-bottom: ($baseline/10) solid #cfd9dd; + hr { border-bottom: 1px solid $uxpl-gray-background; } + .clearfix { clear: both; } + h4 { margin-bottom: 12px; font-size: 22px; font-weight: 400; } + span { margin-bottom: 10px; display: inline-block; font-weight: 600; } + p.proctored-exam-option { float: left; width: 80%; margin-bottom: 25px; } + a.contest-review { @include float(right); @include text-align(right); + font-size: 12px; margin: 0; width: 20%; } + p { margin-bottom: ($baseline/20); color: #797676; } + .proctored-exam-instruction { padding: ($baseline/2) 0; border-bottom: 2px solid $uxpl-gray-background; } } + .border-b-0 { border-bottom: none; } + .padding-b-0 { padding-bottom: ($baseline/20); } + .faq-proctoring-exam { @extend .footer-sequence; + border-bottom : none; + a.footer-link { display: block; padding: ($baseline/2) 0; } } + p { margin-bottom: lh(); } @@ -404,6 +455,7 @@ html.video-fullscreen { background-color: $gray-l5; padding: ($baseline * 0.75); border-radius: 3px; + @include font-size(13); } @@ -415,6 +467,7 @@ html.video-fullscreen { .path { @extend %t-copy-sub1; + margin-top: -($baseline); margin-bottom: $baseline; color: $gray; @@ -446,6 +499,7 @@ html.video-fullscreen { header { @extend h1.top-header; + border-radius: 0 4px 0 0; margin-bottom: -16px; border-bottom: 0; @@ -458,6 +512,7 @@ html.video-fullscreen { h2 { @include border-right(0); @include padding-right(0); + margin: 12px 0 0; font-size: em(14, 24); } @@ -476,10 +531,12 @@ html.video-fullscreen { ul { @include padding-left(1em); + list-style: disc outside none; &.discussion-errors { @include padding-left(2em); + list-style: none; } @@ -502,15 +559,16 @@ html.video-fullscreen { .vert { @extend .clearfix; + border-bottom: 1px solid #ddd; margin-bottom: ($baseline*0.75); padding: 0 0 15px; } .vert > .xblock-student_view.is-hidden { - display: none; - border-bottom: 0px; - margin-bottom: 0px; + display: none; + border-bottom: 0; + margin-bottom: 0; } } @@ -525,13 +583,16 @@ html.video-fullscreen { ul { margin: 0; + @include clearfix(); + padding: 0; list-style: none; li { @include float(left); @include margin-right(flex-gutter(9)); + width: flex-grid(3, 9); margin-bottom: lh(); line-height: lh(); @@ -555,22 +616,25 @@ html.video-fullscreen { p.error { color: $error-color } + p.success { color: $success-color; } } .xqa-modal, .staff-modal, .history-modal { - width: 80%; - height: 80%; - left: left(20%); - overflow: auto; - display: none; + width: 80%; + height: 80%; + left: left(20%); + overflow: auto; + display: none; } div.staff_info { display: none; + @include clearfix(); + white-space: pre-wrap; border-top: 1px solid $gray-l3; padding-top: lh(); @@ -680,8 +744,7 @@ section.self-assessment { */ .CodeMirror { - - .CodeMirror-linenumber.CodeMirror-gutter-elt { - color: $gray-d3 !important; - } + .CodeMirror-linenumber.CodeMirror-gutter-elt { + color: $gray-d3 !important; + } } diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index cbe3a973855..0a1a1f5131b 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -1,175 +1,184 @@ .course-index { - @include transition( all .2s $ease-in-out-quad 0s); - @include border-right(1px solid $border-color-2); - @include border-radius(3px, 0, 0, 3px); - display: table-cell; // needed to extend the sidebar the full height of the area - - // provides sufficient contrast for all screen reader-only elements - .sr, .sr-only { - color: $black; + @include transition(all .2s $ease-in-out-quad 0s); + @include border-right(1px solid $border-color-2); + @include border-radius(3px, 0, 0, 3px); + + display: table-cell; // needed to extend the sidebar the full height of the area + + // provides sufficient contrast for all screen reader-only elements + .sr, .sr-only { + color: $black; + background: $white; + } + + // reseting bolded fonts for the course index + .group-heading { + @extend %t-regular; + } + + // we're targetting the .class now, instead of the #id + .accordion { + @extend %t-copy-sub1; + + .course-navigation { + .button-chapter { + @include transition(all $tmg-s3 ease-in-out); + @include box-sizing(border-box); + @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom); + @include transition(background-color .1s linear 0s); + + display: block; + width: 100%; + border: 0; + border-radius: 0; + padding: 0; + box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset; + background-color: $sidebar-chapter-bg; + color: $link-color; + -webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue + + .group-heading { + @extend %t-title6; + + position: relative; + display: block; + padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2); + + @include text-align(left); + + .icon { + position: absolute; + + @include left($baseline); + + top: $baseline; + font-size: $body-font-size; + color: $gray-l3; + } + } + + &.is-open { + background: $white; + box-shadow: none; + } + + &.active { + .group-heading { + @extend %t-strong; + + color: $base-font-color; + } + } + + &:hover, + &:focus { + background: $white; + } + + &:active { + outline: none; + } + } + + .chapter-content-container { background: $white; - } - // reseting bolded fonts for the course index - .group-heading { - @extend %t-regular; - } + &.is-open { + border-bottom: 1px solid $shadow-l1; + } - // we're targetting the .class now, instead of the #id - .accordion { - @extend %t-copy-sub1; - - .course-navigation { - - .button-chapter { - @include transition(all $tmg-s3 ease-in-out); - @include box-sizing(border-box); - @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom); - @include transition(background-color .1s linear 0s); - display: block; - width: 100%; - border: 0; - border-radius: 0; - padding: 0; - box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset; - background-color: $sidebar-chapter-bg; - color: $link-color; - -webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue - - .group-heading { - @extend %t-title6; - position: relative; - display: block; - padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2); - @include text-align(left); - - .icon { - position: absolute; - @include left($baseline); - top: $baseline; - font-size: $body-font-size; - color: $gray-l3; - } - } + .chapter-menu { + display: none; + padding: 0 14px; + overflow: hidden; - &.is-open { - background: $white; - box-shadow: none; - } + .menu-item { + @extend %t-strong; + + margin: ($baseline/5) 0; + background: inherit; - &.active { + a { + @extend %t-action3; + @extend %t-strong; - .group-heading { - @extend %t-strong; - color: $base-font-color; - } + position: relative; + display: block; + + @include padding(($baseline/4) ($baseline/2)); + + border-radius: ($baseline/4); + font-family: $sans-serif; + color: $base-font-color; + + p { + &.subtitle { + @extend %t-action4; + @extend %t-regular; + + display: block; + margin: 0; + color: $gray-d1; + + &:empty { + // hide empty subtitles + display: none; + } + + // definitions for proctored exam attempt status indicators + .verified { + color: $success-color; + } + + .rejected { + color: $alert-color; + } + + .error { + color: $alert-color; + } } - &:hover, - &:focus { - background: $white; + .subtitle-name { + margin-right: 5px; } + } - &:active { - outline: none; + &:hover, + &:focus { + color: $base-font-color; + background: $gray-l5; + + .subtitle { + color: $gray-d1; } + } } - .chapter-content-container { - background: $white; + &.graded { + .menu-icon { + @include right($baseline/2.5); - &.is-open { - border-bottom: 1px solid $shadow-l1; - } + position: absolute; + bottom: ($baseline/2); + color: $link-color; + } + } - .chapter-menu { - display: none; - padding: 0 14px; - overflow: hidden; - - .menu-item { - @extend %t-strong; - margin: ($baseline/5) 0; - background: inherit; - - a { - @extend %t-action3; - @extend %t-strong; - position: relative; - display: block; - @include padding(($baseline/4) ($baseline/2)); - border-radius: ($baseline/4); - font-family: $sans-serif; - color: $base-font-color; - - p { - - &.subtitle { - @extend %t-action4; - @extend %t-regular; - display: block; - margin: 0; - color: $gray-d1; - - &:empty { - // hide empty subtitles - display: none; - } - - // definitions for proctored exam attempt status indicators - .verified { - color: $success-color; - } - - .rejected { - color: $alert-color; - } - - .error { - color: $alert-color; - } - } - - .subtitle-name { - margin-right: 5px; - } - } - - &:hover, - &:focus { - color: $base-font-color; - background: $gray-l5; - - .subtitle { - color: $gray-d1; - } - } - } - - &.graded { - - .menu-icon { - @include right($baseline/2.5); - position: absolute; - bottom: ($baseline/2); - color: $link-color; - } - } - - &.active { - - a { - @extend %t-ultrastrong; - background: $gray-l4; - } - } - - &:last-of-type { - padding-bottom: ($baseline/2); - } - } - } + &.active { + a { + @extend %t-ultrastrong; + + background: $gray-l4; + } + } + + &:last-of-type { + padding-bottom: ($baseline/2); } + } } + } } -} \ No newline at end of file + } +} diff --git a/lms/static/sass/course/instructor/_email.scss b/lms/static/sass/course/instructor/_email.scss index 75ed6f5cd68..34fd32e1a7c 100644 --- a/lms/static/sass/course/instructor/_email.scss +++ b/lms/static/sass/course/instructor/_email.scss @@ -63,7 +63,7 @@ } .email-content-message { - padding: 5px 5% 40px 5%; + padding: 5px 5% 40px 5%; } .email-modal { diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index ccbd8ed5df3..4a73a7691f5 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -1,6 +1,8 @@ @mixin idashbutton ($color) { @include button(simple, $color); + @extend .button-reset; + margin-bottom: 1em; padding: 8px 17px; font-size: em(13); @@ -20,6 +22,7 @@ .olddash-button-wrapper { position: absolute; top: 16px; + @include right(15px); @include font-size(16); } @@ -27,6 +30,7 @@ .studio-edit-link{ position: absolute; top: 40px; + @include right(15px); @include font-size(16); } @@ -57,7 +61,9 @@ // TYPE: inline .msg-inline { display: inline-block; + @include margin-left($baseline); + padding: 0; .icon, @@ -102,7 +108,7 @@ min-width: 150px; option { - padding: ($baseline/5) $baseline ($baseline/10) ($baseline/4); + padding: ($baseline/5) $baseline ($baseline/10) ($baseline/4); } } @@ -117,6 +123,7 @@ .copy-error { @include font-size(14); + color: $error-color; } @@ -135,75 +142,81 @@ } } - .btn-blue { - @extend %btn-primary-blue; - margin-bottom: 0; - padding: ($baseline/2.5) ($baseline/2); - text-shadow: none; + .btn-blue { + @extend %btn-primary-blue; + + margin-bottom: 0; + padding: ($baseline/2.5) ($baseline/2); + text-shadow: none; + } + + // Custom File upload + .customBrowseBtn { + display: inline-block; + position: relative; + margin: ($baseline/2) 0 0; + width: 350px; + overflow: hidden; + vertical-align: bottom; + + .enhanced-input-file { + @include border-radius(4px 0 0 4px); + @include padding(23px 6px 5px); + + position: relative; + display: inline-block; + width: 250px; + vertical-align: middle; + border: 1px solid $lightGrey1; + background: $white; + cursor: not-allowed; + z-index: 2; } - // Custom File upload - .customBrowseBtn { - display: inline-block; - position: relative; - margin: ($baseline/2) 0 0; - width: 350px; - overflow: hidden; - vertical-align: bottom; - - .enhanced-input-file { - @include border-radius(4px 0 0 4px); - @include padding(23px 6px 5px); - position: relative; - display: inline-block; - width: 250px; - vertical-align: middle; - border: 1px solid $lightGrey1; - background: $white; - cursor: not-allowed; - z-index: 2; - } - - .file-browse { - @include margin-left(-4px); - display: inline-block; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - overflow: hidden; - - .browse { - @include button(simple, $uxpl-blue-base); - @include margin-left(268px); - border-radius: 0 3px 3px 0; - padding: 6px ($baseline/2); - font-size: 12px; - } + .file-browse { + @include margin-left(-4px); - .file_field { - @include left(-27%); - position: absolute; - z-index: 3; - height: 24px; // To match bull browse button - width: 124%; - margin: 0; - padding: 4px 0 0 0; - cursor: pointer; - - // for visual sync, need to make button similar to firefox - &::-webkit-file-upload-button { - width: 100px; - } - } + display: inline-block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + + .browse { + @include button(simple, $uxpl-blue-base); + @include margin-left(268px); + + border-radius: 0 3px 3px 0; + padding: 6px ($baseline/2); + font-size: 12px; + } + + .file_field { + @include left(-27%); + + position: absolute; + z-index: 3; + height: 24px; // To match bull browse button + width: 124%; + margin: 0; + padding: 4px 0 0 0; + cursor: pointer; + + // for visual sync, need to make button similar to firefox + &::-webkit-file-upload-button { + width: 100px; } + } } + } } // instructor dashboard 2 // ==================== .instructor-dashboard-content-2 { @extend .content; + display: block; // override the table-cell display set in .content width: 100%; padding: 40px; @@ -231,8 +244,9 @@ .slickgrid { @include margin-left(1px); @include font-size(14); + font-family: verdana,arial,sans-serif; - color: #333333; + color: #333; .slick-cell { border: 1px dotted silver; @@ -244,6 +258,7 @@ .instructor-dashboard-title { @extend .top-header; + display: inline-block; margin-bottom: ($baseline*.75); padding-bottom: 0; @@ -256,39 +271,43 @@ .instructor_dash_glob_info { position: absolute; + @include right(50px); + top: 46px; text-align: right; } .instructor-nav { - @extend %ui-no-list; - border-top: 1px solid $gray-l3; - border-bottom: 1px solid $gray-l3; + @extend %ui-no-list; - .nav-item { - @extend %t-copy-base; - display: inline-block; - - .btn-link { - display: inline-block; - padding: ($baseline/2) $baseline; - border: 0; - box-shadow: none; - text-shadow: none; - - &:hover, - &:focus { - background: $gray-l5 !important; - } - - &.active-section { - background: $gray-l5; - color: $black; - } - } + border-top: 1px solid $gray-l3; + border-bottom: 1px solid $gray-l3; + + .nav-item { + @extend %t-copy-base; + + display: inline-block; + + .btn-link { + display: inline-block; + padding: ($baseline/2) $baseline; + border: 0; + box-shadow: none; + text-shadow: none; + + &:hover, + &:focus { + background: $gray-l5 !important; + } + + &.active-section { + background: $gray-l5; + color: $black; } + } } + } } // elements - general @@ -307,6 +326,7 @@ .message-title { @extend %t-title6; @extend %t-weight4; + margin-bottom: ($baseline/4); } @@ -387,6 +407,7 @@ .section-title { @include clearfix(); + margin-bottom: ($baseline/2); .value { @@ -395,8 +416,10 @@ .description { @extend %t-title7; + @include float(right); @include text-align(right); + text-transform: none; letter-spacing: 0; color: $gray; @@ -406,6 +429,7 @@ .subsection-title { @extend %hd-lv5; @extend %t-weight4; + margin-bottom: ($baseline/2); } } @@ -418,7 +442,7 @@ margin-top: 2em; h2 { - color: #D60000; + color: #d60000; } &.open { @@ -427,6 +451,7 @@ background-image: url('/static/images/bullet-open.png'); } } + .course-errors-visibility-wrapper { display: block; } @@ -435,6 +460,7 @@ .toggle-wrapper { width: 300px; cursor: pointer; + div { @include float(left); } @@ -445,6 +471,7 @@ .triangle { @include float(left); + width: 20px; height: 20px; background-image: url('/static/images/bullet-closed.png'); @@ -459,6 +486,7 @@ .course-error { margin-bottom: 1em; + @include margin-left(0.5em); code { @@ -510,14 +538,14 @@ input[name="send_to"]:checked+label { // "bolds" the text without causing a width recalculation - text-shadow: 1px 0px 0px; + text-shadow: 1px 0 0; } input[name="send_to"]:focus+label, input[name="send_to"]:hover:not([disabled])+label { - background-color: #EFEFEF; + background-color: #efefef; * { - background-color: #EFEFEF; + background-color: #efefef; } } @@ -535,6 +563,7 @@ .email-targets-secondary { display: table-cell; margin: 0; + @include columns(2); .subheading { @@ -545,10 +574,13 @@ &:last-child { margin-bottom: 0; } + .tip { display: block; margin-top: ($baseline/4); + @include font-size(12); + color: $gray-d1; } } @@ -558,7 +590,6 @@ // view - membership // -------------------- .instructor-dashboard-wrapper-2 section.idash-section#membership { - .membership-section { margin-bottom: ($baseline*1.5); @@ -567,9 +598,9 @@ } legend { - // use the same styles as H3s - font-size: 1.2em; - margin-bottom: 15px; + // use the same styles as H3s + font-size: 1.2em; + margin-bottom: 15px; } } @@ -605,6 +636,7 @@ .results { } + .enrollment_signup_button { @include margin-right($baseline/4); } @@ -616,6 +648,7 @@ .hint { @extend %t-copy-sub2; + display: block; position: absolute; top: ($baseline/2); @@ -629,9 +662,11 @@ display: block; position: absolute; top: 0; + @include left(-15px); @include border-right(8px solid $light-gray3); @include border-left(8px solid transparent); + border-top: 8px solid $light-gray3; border-bottom: 8px solid transparent; } @@ -641,12 +676,13 @@ * Ideally we want to handle functionality with JS. * This functionality should eventually be moved into CS/JS, and out of here. */ .has-hint:hover > .hint { - @include left($baseline*10); + @include left($baseline*10); } .has-hint input:focus ~ .hint { - @include left($baseline*10); + @include left($baseline*10); } + /* *** */ } @@ -655,7 +691,6 @@ } .member-lists-management { - .wrapper-member-select { padding: ($baseline/2); background-color: $light-gray; @@ -676,10 +711,10 @@ } .member-list-widget { - .header { @include box-sizing(border-box); @include border-top-radius(3); + position: relative; padding: ($baseline/2); background-color: #efefef; @@ -694,16 +729,18 @@ .label, .form-label { @extend %t-copy-sub1; + color: $lighter-base-font-color; } .info { @include box-sizing(border-box); + padding: ($baseline/2); border: 1px solid $light-gray; color: $lighter-base-font-color; line-height: 1.3em; - font-size: .85em; + font-size: 0.85em; } .member-list { @@ -724,10 +761,13 @@ th, td { @extend %t-copy-sub1; + vertical-align: middle; padding: ($baseline/2) ($baseline/4); + @include border-left(1px solid $light-gray); @include border-right(1px solid $light-gray); + word-wrap: break-word; } } @@ -735,19 +775,22 @@ .bottom-bar { @include box-sizing(border-box); @include border-bottom-radius(3); + position: relative; padding: ($baseline/2); margin-top: -1px; border: 1px solid $light-gray; background-color: #efefef; - box-shadow: inset #bbb 0px 1px 1px 0px; + box-shadow: inset #bbb 0 1px 1px 0; } // .add-field input[type="button"].add { @include idashbutton($uxpl-blue-base); + position: absolute; + @include right($baseline); } } @@ -771,9 +814,7 @@ // cohort management %cohort-management-form { - .form-fields { - .label, .form-label, .input, @@ -785,11 +826,13 @@ .form-label { @extend %t-title7; @extend %t-weight4; + margin-bottom: ($baseline/2); } .tip { @extend %t-copy-sub1; + margin-top: ($baseline/4); color: $gray-l2; } @@ -799,6 +842,7 @@ // needed to reset poor input styling input[type="text"] { height: auto; + &.readonly { background-color: transparent; padding: 0; @@ -827,10 +871,12 @@ @extend %t-copy-sub1; } } + .form-submit { @include idashbutton($uxpl-blue-base); @include font-size(14); @include line-height(14); + margin-right: ($baseline/2); margin-bottom: 0; text-shadow: none; @@ -841,6 +887,7 @@ .cohort-management-nav-form { width: 60%; + @include float(left); } @@ -851,16 +898,17 @@ .action-create { @include idashbutton($uxpl-blue-base); + @extend %t-weight4; + @include float(right); @include text-align(right); + text-shadow: none; } // STATE: is disabled &.is-disabled { - - .cohort-select { opacity: 0.25; } @@ -883,11 +931,13 @@ .cohort-management-settings, .cohort-management-edit { @extend %cohort-management-form; + margin-bottom: $baseline; .form-title { @extend %t-title5; @extend %t-weight4; + padding: $baseline; background: $gray-l5; border-bottom: ($baseline/10) solid $gray-l4; @@ -908,9 +958,9 @@ .cohort-management-assignment-type-settings, .cohorts-state-section { - &.is-disabled { - opacity: 0.25; - } + &.is-disabled { + opacity: 0.25; + } } // cohort @@ -925,9 +975,8 @@ border-bottom: 1px solid $gray-l4; &:hover, &:active, &:focus { - .action-edit-name { - opacity: 1.0; + opacity: 1; pointer-events: auto; } } @@ -941,6 +990,7 @@ .title-value { @extend %t-title5; @extend %t-weight4; + @include margin-right($baseline/4); } @@ -955,33 +1005,39 @@ @include font-size(14); @include line-height(14); @include margin-left($baseline/2); + padding: ($baseline/4) ($baseline/2); margin-bottom: 0; - opacity: 0.0; + opacity: 0; pointer-events: none; } } .cohort-management-group-setup { @include clearfix(); + @extend %t-copy-sub1; + color: $gray-l2; .setup-value { @include float(left); @include margin-right(5%); + width: 70%; } .setup-actions { @include float(right); @include text-align(right); + width: 20%; } } .cohort-management-group-add { @extend %cohort-management-form; + border: 1px solid $gray-l5; .message-title { @@ -991,6 +1047,7 @@ .form-title { @extend %t-title6; @extend %t-weight4; + margin-bottom: ($baseline/4); padding: 0; border: none; @@ -999,6 +1056,7 @@ .form-introduction { @extend %t-copy-sub1; + margin-bottom: $baseline; p { @@ -1023,30 +1081,31 @@ // CSV-based file upload for auto cohort assigning and // cohort the discussion topics. - .toggle-cohort-management-secondary, - .toggle-cohort-management-discussions { - @extend %t-copy-sub1; - background: transparent; - border: none; - box-shadow: none; - text-shadow: none; - padding: 0; - color: $uxpl-blue-base; + .toggle-cohort-management-secondary, + .toggle-cohort-management-discussions { + @extend %t-copy-sub1; + + background: transparent; + border: none; + box-shadow: none; + text-shadow: none; + padding: 0; + color: $uxpl-blue-base; - &:hover, - &:focus { - text-decoration: underline; - } + &:hover, + &:focus { + text-decoration: underline; } + } .cohort-management-file-upload { - .message-title { @extend %t-title7; } .form-introduction { @extend %t-copy-sub1; + margin-bottom: $baseline; p { @@ -1066,6 +1125,7 @@ @include idashbutton($uxpl-blue-base); // needed to override very poor specificity and base rules for blue button @include font-size(14); + margin-bottom: 0; font-weight: 700; text-shadow: none; @@ -1074,6 +1134,7 @@ .cohort-management-supplemental { @extend %t-copy-sub1; + margin-top: $baseline; padding: ($baseline/2) $baseline; background: $gray-l6; @@ -1082,6 +1143,7 @@ .icon { @include margin-right($baseline/4); + color: $gray-l1; } } @@ -1120,6 +1182,7 @@ .cohort-management-settings { @include clearfix(); + background: $gray-l5; .cohort-management-group-header { @@ -1146,6 +1209,7 @@ display: inline-block; width: flex-grid(3); vertical-align: top; + @include text-align(right); } } @@ -1164,6 +1228,7 @@ .cohort-details-name { @extend %t-action1; + display: block; width: 100%; padding: ($baseline/2); @@ -1172,6 +1237,7 @@ .cohort-section-header { margin-top: ($baseline*1.5); + @include padding($baseline 0 ($baseline/2) 0); } @@ -1184,6 +1250,7 @@ .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; + position: relative; top: 1px; padding: 0 $baseline; @@ -1213,7 +1280,9 @@ .toggle-button { padding-bottom: ($baseline - 5); border-style: solid; + @include border-width(1px 1px 0 1px); + border-color: $gray-l4; background: $white; color: inherit; @@ -1225,6 +1294,7 @@ .tab-content { @include padding($baseline $baseline 0 $baseline); + border: 1px solid $gray-l5; &.new-cohort-form { @@ -1240,7 +1310,6 @@ // view - discussions management // -------------------- .instructor-dashboard-wrapper-2 section.idash-section#discussions_management { - .division-scheme-container { // See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ display: flex; @@ -1258,15 +1327,15 @@ } .three-column-layout { - max-width: 30%; + max-width: 30%; } .two-column-layout { - max-width: 47%; + max-width: 47%; } .field-message { - font-size: 13px; + font-size: 13px; } } @@ -1275,6 +1344,7 @@ @include idashbutton($uxpl-blue-base); @include font-size(14); @include line-height(14); + margin-right: ($baseline/2); margin-bottom: 0; text-shadow: none; @@ -1282,6 +1352,7 @@ .discussions-management-supplemental { @extend %t-copy-sub1; + margin-top: $baseline; padding: ($baseline/2) $baseline; background: $gray-l6; @@ -1290,9 +1361,7 @@ // cohort discussions interface. .discussions-nav { - .cohort-course-wide-discussions-form { - .form-actions { padding-top: ($baseline/2); } @@ -1322,6 +1391,7 @@ .discussions-wrapper { @extend %ui-no-list; + padding: 0 ($baseline/2); .subcategories { @@ -1329,9 +1399,11 @@ } } } + .wrapper-tabs { @extend %ui-no-list; @extend %ui-depth1; + position: relative; top: 1px; padding: 0 $baseline; @@ -1342,8 +1414,7 @@ // view - student admin // -------------------- .instructor-dashboard-wrapper-2 section.idash-section#student_admin { - - .action-type-container{ + .action-type-container { margin-bottom: $baseline * 2; } @@ -1387,6 +1458,7 @@ height: 400px; } } + .report-downloads-table { .slickgrid { height: 300px; @@ -1403,17 +1475,19 @@ // view - metrics // -------------------- .instructor-dashboard-wrapper-2 section.idash-section#metrics { - .metrics-container, .metrics-header-container { position: relative; clear: both; width: 100%; + @include float(left); + margin-top: 25px; .metrics-left, .metrics-left-header { position: relative; width: 30%; + @include float(left); @include margin-right(2.5%); @@ -1421,15 +1495,18 @@ width: 100%; } } + .metrics-section.metrics-left { - height: 640px; + height: 640px; } .metrics-right, .metrics-right-header { position: relative; width: 65%; + @include float(left); @include margin-left(2.5%); + margin-bottom: 25px; svg { @@ -1438,7 +1515,7 @@ } .metrics-section.metrics-right { - height: 295px; + height: 295px; } svg { @@ -1492,6 +1569,7 @@ .header { background-color: #ddd; } + th, td { padding: 10px; } @@ -1505,13 +1583,17 @@ .download-csv { position: absolute; display: none; + @include right(2%); + bottom: 2%; } .close-button { position: absolute; + @include right(1.5%); + top: 2%; font-size: 2em; } @@ -1559,23 +1641,29 @@ input[name="subject"] { color: green; font-weight: bold; } + table { tr { height: 21px; + td { width: 120px; } } } } -.ecommerce-wrapper{ + +.ecommerce-wrapper { h2{ height: 26px; line-height: 26px; + span{ @include float(right); + font-size: 16px; font-weight: bold; + span{ background: #ddd; padding: 2px 9px; @@ -1585,6 +1673,7 @@ input[name="subject"] { } } } + span.tip{ display: block; padding: 10px 15px; @@ -1593,15 +1682,20 @@ input[name="subject"] { background: #f8f4ec; color: #3c3c3c; line-height: 30px; + .add{ @include button(simple, $uxpl-blue-base); + @extend .button-reset; + font-size: em(13); + @include float(right); } } } + #e-commerce{ input[name='list-order-sale-csv'] { @include margin-right(14px); @@ -1611,12 +1705,14 @@ input[name="subject"] { margin-bottom: 1em; line-height: 1.3em; } + .reports-download-container { .data-display-table { .slickgrid { height: 400px; } } + .report-downloads-table { .slickgrid { height: 300px; @@ -1628,20 +1724,21 @@ input[name="subject"] { } } } + .error-msgs { - background: #FFEEF5; - color:#B72667; + background: #ffeef5; + color:#b72667; text-align: center; padding: ($baseline/2) 0; font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif; font-size: 15px; - border-bottom: 1px solid #B72667; + border-bottom: 1px solid #b72667; margin-bottom: $baseline; display: none; } .success-msgs { - background: #D0F5D5; + background: #d0f5d5; color:#008801; text-align: center; padding: ($baseline/2) 0; @@ -1651,6 +1748,7 @@ input[name="subject"] { margin-bottom: $baseline; display: none; } + .content{ padding: 0 !important; } @@ -1658,37 +1756,46 @@ input[name="subject"] { input[name="download_company_name"], input[name="active_company_name"], input[name="spent_company_name"] { @include margin-right(8px); + height: 36px; width: 254px; border-radius: 3px; } + .coupons-table { width: 100%; + tr:nth-child(even){ - background-color: $gray-l6; - border-bottom: 1px solid #f3f3f3; - } + background-color: $gray-l6; + border-bottom: 1px solid #f3f3f3; + } + tr.always-gray{ background: #eee !important; border-top: 2px solid $white; } + tr.always-white{ background: #fff !important; + td{ padding: ($baseline*1.5) 0 ($baseline/2); } } + .coupons-headings { height: 40px; - border-bottom: 1px solid #BEBEBE; + border-bottom: 1px solid #bebebe; th:nth-child(5){ text-align: center; width: 120px; } + th:first-child{ padding-left: $baseline; } + th { text-align: left; border-bottom: 1px solid $border-color-1; @@ -1697,22 +1804,28 @@ input[name="subject"] { &.c_code { width: 110px; } + &.c_count { width: 60px; } + &.c_course_id { width: 320px; word-wrap: break-word; } + &.c_discount { width: 90px; } + &.c_expiry { width: 150px; } + &.c_action { width: 60px; } + &.c_dsc{ width: 200px; word-wrap: break-word; @@ -1722,10 +1835,11 @@ input[name="subject"] { // in_active coupon rows style .inactive_coupon{ - background: #FFF0F0 !important; + background: #fff0f0 !important; text-decoration: line-through; color: rgba(51,51,51,0.2); border-bottom: 1px solid #fff; + td { a { color: rgba(51,51,51,0.2); @@ -1734,10 +1848,10 @@ input[name="subject"] { } // in_active coupon rows style .expired_coupon{ - background: #FEEFB3 !important; - + background: #feefb3 !important; color: rgba(51,51,51,0.2); border-bottom: 1px solid #fff; + td:nth-child(3) { text-decoration: line-through; } @@ -1750,27 +1864,37 @@ input[name="subject"] { position: relative; line-height: normal; font-size: 14px; + span.old-price{ top: -1px; + @include left(-75px); + position: relative; text-decoration: line-through; color: red; font-size: 12px; } } + td:nth-child(5),td:first-child{ @include padding-left($baseline); } + td:nth-child(2){ line-height: 22px; + @include padding-right(0px); + word-wrap: break-word; } + td:nth-child(5){ @include padding-left(0); + text-align: center; } + td{ a.edit-right{ @include margin-left(15px); @@ -1778,41 +1902,54 @@ input[name="subject"] { } } } + section#registration_code_generation_modal { - @include margin-left(-442px); - width: 930px; - } + @include margin-left(-442px); + + width: 930px; + } // coupon edit and add modals #add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal, #set-course-mode-price-modal, #registration_code_generation_modal{ .inner-wrapper { background: $white; } + span.tip-text { display: block; margin-top: ($baseline/4); font-size: 12px; color: #646464 } + width: 650px; + @include margin-left(-325px); + border-radius: 2px; + input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button, input[type="button"]#set_course_button, input[type="button"]#lookup_regcode { @include button(simple, $uxpl-blue-base); + @extend .button-reset; + display: block; height: auto; margin: 0 auto; width: 100%; white-space: normal; } + input[name="generate-registration-codes-csv"]{ @include button(simple, $uxpl-blue-base); + @extend .button-reset; } + .modal-form-error { @include margin($baseline 0 ($baseline/2) 0); + padding: $baseline; box-shadow: inset 0 -1px 2px 0 #f3d9db; -webkit-box-sizing: border-box; @@ -1822,166 +1959,219 @@ input[name="subject"] { border-bottom: 3px solid #a0050e; background: #fbf2f3; } + ol.list-input{ li{ width: 278px; + @include float(left); - label.required:after { + + label.required::after { content: "*"; + @include margin-left(5px); } } + li:nth-child(even){ @include margin-left(30px !important); } + li:nth-child(3), li:nth-child(4){ width: 100%; + @include margin-left(0px !important); } + li:nth-child(3) { - margin-bottom: 0px !important; + margin-bottom: 0 !important; + textarea { min-height: 100px; } } + li:last-child{ - margin-bottom: 0px !important; + margin-bottom: 0 !important; } } + table.tb_registration_code_status{ margin-top: $baseline; color: #555; + thead { font-size: 14px; + tr th:last-child { text-align: center; } } + tbody { font-size: 14px; + tr td:last-child { text-align: center; + a:first-child{ margin-right: 10px; } } } } + form#generate_codes ol.list-input{ li{ width: 278px; + @include float(left); - label.required:after { + + label.required::after { content: "*"; + @include margin-left(5px); } + min-height: 120px; } + li.address_fields { min-height: 45px !important; } + li#generate-registration-modal-field-city, li#generate-registration-modal-field-state, li#generate-registration-modal-field-zipcode{ width: 205px; } + li#generate-registration-modal-field-country { width: 204px; + @include margin-left(15px !important); + margin-bottom: $baseline; } + li:nth-child(even){ @include margin-left(0px !important); } + li:nth-child(3n) { @include margin-left(15px !important); } + li#generate-registration-modal-field-company-contact-name, li#generate-registration-modal-field-address-line-3, li#generate-registration-modal-field-zipcode { @include margin-left(15px !important); } + li:last-child{ label { @include float(right); @include right(27px); + margin-top: -5px; } + min-height: 5px; + @include margin-left(0px !important); + input[type='checkbox'] { width: auto; height: auto; } } + li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-unit-price, li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference { @include margin-left(0px !important); @include margin-right(15px !important); } + li#generate-registration-modal-field-custom-reference-number { width: auto; } } + li#set-course-mode-modal-field-price{ width: 100%; - label.required:after { + + label.required::after { content: "*"; margin-left: ($baseline/4); } } + li#set-course-mode-modal-field-currency{ @include margin-left(0px !important); + select { width: 100%; } } + #registration-content form .field.text input { - background: $white; - margin-bottom: 0; - height: 40px; - border-radius: 3px; - } + background: $white; + margin-bottom: 0; + height: 40px; + border-radius: 3px; + } + #coupon-content, #course-content, #content, #registration-content, #regcode-content { padding: $baseline; + header { margin: 0; padding: 0; + h2 { font-size: 24px; font-weight: 100; color: $uxpl-blue-base; + @include text-align(left); } } + .instructions p { margin-bottom: ($baseline/4); } + form { margin: 0; padding: 0; border-radius: 0; box-shadow: none; border: none; + .group-form { margin: 0; padding-top: 0; padding-bottom: $baseline; } + .list-input { margin: 0; padding: 0; list-style: none; } + .readonly { background-color: #eee !important; color: #aaa; } + .field { margin: 0 0 20px 0; } + .field.required label { font-weight: 600; } + .field label { margin: 0 0 5px 0; -webkit-transition: color 0.15s ease-in-out 0s; @@ -1989,10 +2179,12 @@ input[name="subject"] { transition: color 0.15s ease-in-out 0s; color: #333; } + .field.text input { background: $white; margin-bottom: 0; } + .field input { width: 100%; margin: 0; @@ -2000,27 +2192,30 @@ input[name="subject"] { } } } + #registration-content form { .field { margin: 0; } + .group-form { margin: 0; padding-top: 0; - padding-bottom: 0px; + padding-bottom: 0; } } } + #add-coupon-modal{ - ol.list-input{ - li{ - input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;} - &.full-width{width: 100%;} - input#coupon_expiration_date{width: 278px;display: inline-block;float: right;} + ol.list-input{ + li{ + input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;} + &.full-width{width: 100%;} + input#coupon_expiration_date{width: 278px;display: inline-block;float: right;} + } } } } -} .certificates-wrapper { .generate-example-certificates-wrapper { @@ -2046,15 +2241,19 @@ input[name="subject"] { } } -.ecommerce-wrapper, .proctoring-wrapper{ +.ecommerce-wrapper, .proctoring-wrapper { h2{ height: 26px; line-height: 26px; + @include padding-left(25px); + span{ @include float(right); + font-size: 16px; font-weight: bold; + span{ float: none; padding: 2px 9px; @@ -2064,6 +2263,7 @@ input[name="subject"] { } } } + span.tip{ display: block; padding: 10px 15px; @@ -2072,114 +2272,155 @@ input[name="subject"] { background: #f8f4ec; color: #3c3c3c; line-height: 30px; + .add{ @include button(simple, $uxpl-blue-base); + @extend .button-reset; + font-size: em(13); + @include float(right); + line-height: 14px; font-size: 0.7em; } } + .content { display: block; width: 100%; } + span.code_tip { display: block; margin-bottom: 30px; + @include padding(($baseline/2) 15px ($baseline/2) 0); - color: #3C3C3C; + + color: #3c3c3c; line-height: 30px; + .add{ @include button(simple, $uxpl-blue-base); + @extend .button-reset; + font-size: em(13); } } - span.csv_tip { + + span.csv_tip { display: block; line-height: 30px; margin-bottom: 6px; + @include padding(($baseline/2) 15px ($baseline/2) 1px); + .add{ font-size: em(13); } } - span.invalid_sale { + + span.invalid_sale { display: block; height: 37px; margin-bottom: 6px; + @include padding(($baseline/2) 15px ($baseline/2) 1px); - background: none repeat scroll 0 0 #F8F4EC; - color: #3C3C3C; + + background: none repeat scroll 0 0 #f8f4ec; + color: #3c3c3c; line-height: 30px; + .add{ @include button(simple, $uxpl-blue-base); + @extend .button-reset; + font-size: em(13); } } } -.special-allowance-container, .student-proctored-exam-container{ + +.special-allowance-container, .student-proctored-exam-container { .allowance-table, .exam-attempts-table { width: 100%; + tr:nth-child(even){ - background-color: $gray-l6; - border-bottom: 1px solid #f3f3f3; - } + background-color: $gray-l6; + border-bottom: 1px solid #f3f3f3; + } + .allowance-headings, .exam-attempt-headings { height: 40px; - border-bottom: 1px solid #BEBEBE; + border-bottom: 1px solid #bebebe; th:nth-child(5), th:nth-child(4){ text-align: center; } + th:first-child{ padding-left: $baseline; } + th { @extend %t-action2; + text-align: left; border-bottom: 1px solid $border-color-1; + &.attempt-allowed-time { - width: 90px; + width: 90px; } + &.attempt-type { width: 90px; } + &.attempt-started-at { width: 170px; } + &.attempt-completed-at { width: 160px; text-align: center; } + &.attempt-status { width: 100px; text-align: center; } + &.exam-name { width: 150px; } + &.username { width: 140px; } + &.email { @include text-align(center); + width: ($baseline*8); word-wrap: break-word; } + &.allowance-name { width: ($baseline*5); text-align: center; } + &.allowance-value { @include text-align(center); + width: ($baseline*5); } + &.c_action { @include text-align(center); + width: 60px; } } @@ -2192,22 +2433,30 @@ input[name="subject"] { line-height: normal; font-size: 14px; } + td:first-child{ @include padding-left($baseline); } + td:nth-child(2){ line-height: 22px; + @include padding-right(0px); + word-wrap: break-word; } + td:nth-child(5), td:nth-child(4), td:nth-child(6){ @include padding-left(0); + text-align: center; } + td:nth-child(3){ word-wrap: break-word; text-align: center; } + td:nth-child(7){ word-wrap: break-word; text-align: center; @@ -2218,18 +2467,22 @@ input[name="subject"] { } } } + .exam-attempts-content, .exam-allowances-content { padding-left: 0; padding-right: 0; } + .top-header { margin-top: -30px; margin-bottom: 20px; + .search-attempts { border: 1px solid #ccc; display: inline-block; border-radius: 5px; float: left; + input { border: none; box-shadow: none; @@ -2237,9 +2490,11 @@ input[name="subject"] { font-size: 14px; width: 285px; } + span:first-child { margin-right: -5px; } + span { background-color: #ccc; display: inline-block; @@ -2248,80 +2503,86 @@ input[name="subject"] { } } } + .pagination { - display: inline-block; - padding-left: 0; - float: right; - margin: 0; - border-radius: 4px; - > li { - display: inline; // Remove list-style and block-level defaults + display: inline-block; + padding-left: 0; + float: right; + margin: 0; + border-radius: 4px; + + > li { + display: inline; // Remove list-style and block-level defaults + > a, + > span { + padding: 6px 12px; + line-height: 1.41; + text-decoration: none; + color: #00095f; + background-color: #fff; + border: 1px solid #ddd; + margin-left: -1px; + } + + > a.active { + background-color: #ccc; + } + + &:first-child { > a, > span { - padding: 6px 12px; - line-height: 1.41; - text-decoration: none; - color: #00095f; - background-color: #fff; - border: 1px solid #ddd; - margin-left: -1px; - } - > a.active { - background-color: #ccc; - } - &:first-child { - > a, - > span { - margin-left: 0; - @include border-left-radius(4px); - } - } - &:last-child { - > a, - > span { - @include border-right-radius(4px); - } + margin-left: 0; + + @include border-left-radius(4px); } } - > li > a, - > li > span { - &:hover, - &:focus { - z-index: 3; - color: darken(#003a7d, 15%); - background-color: lighten(#000, 93.5%); - border-color: #ddd; + &:last-child { + > a, + > span { + @include border-right-radius(4px); } } + } - > .active > a, - > .active > span { - &, - &:hover, - &:focus { - z-index: 2; - color: #fff; - background-color: $uxpl-blue-base; - border-color: $uxpl-blue-base; - cursor: default; - } + > li > a, + > li > span { + &:hover, + &:focus { + z-index: 3; + color: darken(#003a7d, 15%); + background-color: lighten(#000, 93.5%); + border-color: #ddd; } + } - > .disabled { - > span, - > span:hover, - > span:focus, - > a, - > a:hover, - > a:focus { - color: lighten(#000, 46.7%); - background-color: #fff; - border-color: #ddd; - cursor: not-allowed; - } + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + z-index: 2; + color: #fff; + background-color: $uxpl-blue-base; + border-color: $uxpl-blue-base; + cursor: default; } } + + > .disabled { + > span, + > span:hover, + > span:focus, + > a, + > a:hover, + > a:focus { + color: lighten(#000, 46.7%); + background-color: #fff; + border-color: #ddd; + cursor: not-allowed; + } + } + } } .rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper, @@ -2333,14 +2594,14 @@ input[name="subject"] { // view - certificates // -------------------- .instructor-dashboard-wrapper-2 section.idash-section#certificates { - %exception-message { - margin-top: 15px; - background-color: $gray-l4; - border-top-style: groove; - color: $black; - } - .certificates-wrapper{ + margin-top: 15px; + background-color: $gray-l4; + border-top-style: groove; + color: $black; + } + + .certificates-wrapper { .message{ @extend %exception-message; } @@ -2351,7 +2612,7 @@ input[name="subject"] { line-height: 23px; } - hr.section-divider{ + hr.section-divider { margin: 25px 0; border-top: 7px solid #646464; } @@ -2359,10 +2620,11 @@ input[name="subject"] { .certificate-generation-history{ table{ thead{ - tr{ + tr { td.task-name{ width: 150px; } + td.task-date{ width: 200px; } @@ -2370,7 +2632,7 @@ input[name="subject"] { } tbody{ - tr{ + tr { td{ padding: 5px; vertical-align: middle; @@ -2382,20 +2644,23 @@ input[name="subject"] { } .student-username-or-email { - width: 300px; - margin-bottom: 10px; - } - .notes-field { - width: 400px; - } + width: 300px; + margin-bottom: 10px; + } + + .notes-field { + width: 400px; + } #certificate-white-list-editor { padding-top: 5px; + .certificate-exception-inputs { p + p { margin-top: 5px; } + .message { @extend %exception-message; } @@ -2405,6 +2670,7 @@ input[name="subject"] { .white-listed-students, .invalidation-history { margin-top: 10px; padding-top: 5px; + table { margin-top: 5px; width: 100%; @@ -2412,6 +2678,7 @@ input[name="subject"] { th { @extend %t-copy-sub2; + background-color: $gray-l5; padding: ($baseline*0.75) ($baseline/2) ($baseline*0.75) ($baseline/2); vertical-align: middle; @@ -2425,6 +2692,7 @@ input[name="subject"] { &.user-name { width: 120px; } + &.user-email { width: 200px; } @@ -2448,6 +2716,7 @@ input[name="subject"] { tr { @include transition(all $tmg-f2 ease-in-out 0s); + border-top: 1px solid $gray-l4; &:first-child { @@ -2474,8 +2743,8 @@ input[name="subject"] { } .message { - @extend %exception-message; - } + @extend %exception-message; + } } .certificate-exception-container { @@ -2488,6 +2757,7 @@ input[name="subject"] { .bulk-white-list-exception { margin-top: 10px; padding-top: 5px; + .white-list-csv { .bulk-exception-results { margin-top: 10px; @@ -2503,14 +2773,16 @@ input[name="subject"] { } } - .arrow { - @include margin-right($baseline/2); - border: none; - background: transparent; - box-shadow: none; - color: $uxpl-blue-base; - font-weight: bold; - } + + .arrow { + @include margin-right($baseline/2); + + border: none; + background: transparent; + box-shadow: none; + color: $uxpl-blue-base; + font-weight: bold; + } } } } diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index fdcd07459a5..7f906ff4f3f 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,6 +1,7 @@ .wrapper-course-material { @include clearfix(); @include box-sizing(border-box); + @extend %ui-print-excluded; border-bottom: none; @@ -15,6 +16,7 @@ .course-tabs { @include border-top-radius(4px); @include clearfix(); + padding: ($baseline*0.75) 0 ($baseline*0.75) 0; li { @@ -23,6 +25,7 @@ &.prominent { @include margin-right(16px); + background: rgba(255, 255, 255, 0.5); border-radius: 3px; } @@ -35,8 +38,10 @@ a, a:visited { @include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75)); + @extend %t-title7; @extend %t-regular; + color: $gray-d1; display: block; text-align: center; @@ -88,11 +93,15 @@ &#login { display: block; + @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%)); + border: 1px solid transparent; border-color: $uxpl-blue-base; border-radius: 3px; + @include box-sizing(border-box); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); color: $white; display: inline-block; @@ -135,7 +144,7 @@ .course-header { @include float(left); - @include margin(10px, 10px, 0px, 10px); + @include margin(10px, 10px, 0, 10px); display: inline-block; width: 65%; diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss index aa1b76acee3..4f2e932c973 100644 --- a/lms/static/sass/course/layout/_courseware_preview.scss +++ b/lms/static/sass/course/layout/_courseware_preview.scss @@ -58,6 +58,7 @@ // STATE: Fixed to viewport (used for scrolling) &.is-fixed { @extend %ui-depth4; + box-shadow: 0 3px 3px $shadow-d1; position: fixed; top: 0; diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss index 7efe6d8ae0c..1ca33ebe40b 100644 --- a/lms/static/sass/course/layout/_footer.scss +++ b/lms/static/sass/course/layout/_footer.scss @@ -1,4 +1,4 @@ footer { - box-shadow: $courseware-footer-shadow; - margin-top: $courseware-footer-margin; + box-shadow: $courseware-footer-shadow; + margin-top: $courseware-footer-margin; } diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss index 37806c24b66..84fd5eb6de0 100644 --- a/lms/static/sass/course/modules/_calculator.scss +++ b/lms/static/sass/course/modules/_calculator.scss @@ -7,7 +7,9 @@ bottom: -126px; left: 0; position: fixed; + @include transition(bottom $tmg-avg linear 0s); + -webkit-appearance: none; width: 100%; @@ -19,6 +21,7 @@ @include transition(background-color $tmg-f2 ease-in-out 0s); @include float(right); @include right($baseline*.75); + position: relative; top: -42px; border-bottom: 0; @@ -62,7 +65,9 @@ form { @extend .clearfix; + @include box-sizing(border-box); + padding: lh(); .calc-output-label { @@ -74,7 +79,9 @@ border: 1px solid $white; border-radius: 0; box-shadow: none; + @include box-sizing(border-box); + color: $black; float: left; font-size: 30px; @@ -102,7 +109,9 @@ background: $white; border: 1px solid $white; box-shadow: none; + @include box-sizing(border-box); + color: $black; float: left; font-size: 16px; @@ -113,13 +122,14 @@ width: flex-grid(4); &.has-result { - border: 1px solid $green-d1; - box-shadow: inset 0px 0px ($baseline/3) $green-d1; + border: 1px solid $green-d1; + box-shadow: inset 0 0 ($baseline/3) $green-d1; } } .input-wrapper { @extend .clearfix; + float: left; margin: 0; position: relative; @@ -134,7 +144,9 @@ direction: ltr; // Almost all of the real-world calculators are LTR border: none; box-shadow: none; + @include box-sizing(border-box); + font-size: 16px; padding: 10px; -webkit-appearance: none; @@ -156,6 +168,7 @@ #calculator_hint { @include hide-text; + display: block; height: 35px; width: 35px; @@ -177,6 +190,7 @@ .help { @include transition(none); + background: $white; border-radius: 3px; box-shadow: 0 0 3px #999; diff --git a/lms/static/sass/course/modules/_student-notes.scss b/lms/static/sass/course/modules/_student-notes.scss index 737e4dff011..514cd2e54a9 100644 --- a/lms/static/sass/course/modules/_student-notes.scss +++ b/lms/static/sass/course/modules/_student-notes.scss @@ -17,6 +17,7 @@ %bubble { @include transform(rotate(45deg)); @include left(12px); + position: absolute; bottom: -($baseline/2); display: block; @@ -66,17 +67,19 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // +toggling notes // -------------------- .edx-notes-visibility { - .edx-notes-visibility-error { @extend %t-copy-sub2; @extend %text-truncated; + position: relative; bottom: -($baseline/20); // needed to sync up with current rogue/more complex calc utility alignment max-width: ($baseline*15); display: none; vertical-align: bottom; + @include margin-right(-($baseline/4)); @include border-right(($baseline/4) solid $error-color); + padding: ($baseline/2) $baseline; background: $black-t3; text-align: center; @@ -85,7 +88,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // STATE: has error &.has-error { - .edx-notes-visibility-error { display: inline-block; } @@ -100,6 +102,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator .annotator-notice { @extend %t-weight4; @extend %t-copy-sub1; + padding: ($baseline/4) $baseline; background: $black-t3; } @@ -109,6 +112,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator .annotator-notice { @extend %t-weight4; @extend %t-copy-sub1; + padding: ($baseline/2) $baseline; background: $gray-d4; } @@ -140,7 +144,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator margin: 0 !important; .annotator-widget { - &:after { + &::after { @extend %bubble; } } @@ -148,8 +152,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator .annotator-editor { .annotator-widget { - &:after { + &::after { @extend %bubble; + background: $gray-l5; } } @@ -169,23 +174,30 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator button { @extend %notes-bubble; + position: relative; display: block; - &:after { + &::after { @extend %notes-reset-icon; @extend %shame-link-base; + @include font-size(30); + position: absolute; top: 35%; + @include left(15%); + content: "\f14b"; } // using annotatorJS triangle styling for adder - &:before { + &::before { @extend %bubble; + @include left(10px); + background: whitesmoke; } } @@ -193,11 +205,12 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // editing .annotator-editor { - .annotator-controls { @include text-align(left); @include clearfix(); + @extend %ui-depth1; + position: relative; padding: 8px; border: none !important; @@ -208,6 +221,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // actions .annotator-save, .annotator-cancel { @extend %notes-reset-background; + padding: ($baseline/4) ($baseline/2) !important; border: none; box-shadow: none; @@ -216,7 +230,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator text-shadow: none !important; // removing vendor icons - &:after { + &::after { display: none !important; } } @@ -231,10 +245,10 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator } .annotator-item { - textarea { @extend %notes-reset-font; @extend %t-demi-strong; + padding: ($baseline/5) !important; font-size: 14px !important; line-height: 22px !important; @@ -268,6 +282,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // STATE: disabled &:disabled, &.is-disabled { @extend %ui-disabled; + opacity: 0.5; cursor: not-allowed; } @@ -286,7 +301,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // content .annotator-viewer { - .annotator-widget.annotator-listing { outline: none; } @@ -294,6 +308,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // poorly scoped selector for content of a note's comment div:first-of-type { @extend %notes-reset-font; + padding: ($baseline/4) !important; font-size: 14px !important; line-height: 22px !important; @@ -305,7 +320,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator opacity: 1; // RTL support @include right(0); + top: 0; + @include float(right); @include padding-left($baseline/4); @@ -314,10 +331,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator display: inline-block; vertical-align: middle; - &:before { + &::before { @extend %notes-reset-icon; @extend %shame-link-base; @extend %t-icon4; + position: absolute; } } @@ -325,9 +343,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator .annotator-edit { @include margin-right($baseline/2); - &:before { + &::before { top: 0; + @include left(0); + content: "\f040"; // .fa-pencil } } @@ -335,18 +355,21 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator .annotator-delete { @include margin-right($baseline/3); - &:before { + &::before { top: -($baseline/20); + @include left(0); + content: "\f1f8"; // .fa-trash } } .annotator-close { - - &:before { + &::before { top: -($baseline/20); + @include left(0); + content: "\f00d"; // .fa-close } } @@ -357,7 +380,8 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator // -------------------- .edx-notes-wrapper .annotator-wrapper.annotator-wrapper .annotator-outer.annotator-viewer .annotator-controls button { @extend %notes-reset-background; - opacity: 1.0; + + opacity: 1; } .edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-save { diff --git a/lms/static/sass/course/modules/_timer.scss b/lms/static/sass/course/modules/_timer.scss index 84bbb8c5681..af22961e14c 100644 --- a/lms/static/sass/course/modules/_timer.scss +++ b/lms/static/sass/course/modules/_timer.scss @@ -3,6 +3,7 @@ div.timer-main { @extend %ui-depth2; + position: fixed; top: 0; right: 0; diff --git a/lms/static/sass/course/wiki/_basic-html.scss b/lms/static/sass/course/wiki/_basic-html.scss index e46b5aba710..0224ddfbd21 100644 --- a/lms/static/sass/course/wiki/_basic-html.scss +++ b/lms/static/sass/course/wiki/_basic-html.scss @@ -1,9 +1,9 @@ section.wiki-body { - h1 { + h1 { font-weight: bold; font-size: 2em; margin-bottom: 25px; - } + } div#wiki_article { html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { @@ -67,19 +67,19 @@ section.wiki-body { h1 { font-size: 1.6em; margin: .67em 0; - letter-spacing: 0px; + letter-spacing: 0; } h2 { text-transform: none; font-size: 1.4em; margin: .75em 0; - letter-spacing: 0px; + letter-spacing: 0; } h3 { font-size: 1.2em; - margin: .83em 0; + margin: 0.83em 0; } h4 { @@ -131,7 +131,7 @@ section.wiki-body { } small, sub, sup { - font-size: .83em; + font-size: 0.83em; } sub { @@ -181,7 +181,7 @@ section.wiki-body { text-decoration: underline; } - br:before { + br::before { content: "\A"; white-space: pre-line; } diff --git a/lms/static/sass/course/wiki/_create.scss b/lms/static/sass/course/wiki/_create.scss index af9c167d9df..8e283bb7fc5 100644 --- a/lms/static/sass/course/wiki/_create.scss +++ b/lms/static/sass/course/wiki/_create.scss @@ -15,13 +15,16 @@ form#wiki_revision { .CodeMirror { @extend textarea; + @include box-sizing(border-box); + font-family: monospace; margin-bottom: $baseline; } textarea { @include box-sizing(border-box); + margin-bottom: $baseline; min-height: 450px; width: 100%; @@ -59,7 +62,7 @@ form#wiki_revision { .markdown-example { background-color: #e3e3e3; - line-height: 1.0; + line-height: 1; margin: 5px 0 7px; padding: { top: 5px; @@ -67,6 +70,7 @@ form#wiki_revision { bottom: 5px; left: 5px; } + text-shadow: 0 1px 0 #fff; } } diff --git a/lms/static/sass/course/wiki/_sidebar.scss b/lms/static/sass/course/wiki/_sidebar.scss index 512d85bc2f3..4301d489ada 100644 --- a/lms/static/sass/course/wiki/_sidebar.scss +++ b/lms/static/sass/course/wiki/_sidebar.scss @@ -1,5 +1,6 @@ div#wiki_panel { @extend .sidebar; + overflow: auto; ul { @@ -16,6 +17,7 @@ div#wiki_panel { div#wiki_create_form { @extend .clearfix; + padding: lh(0.5) lh() lh(0.5) 0; label { @@ -25,6 +27,7 @@ div#wiki_panel { input[type="text"] { @include box-sizing(border-box); + display: block; width: 100%; margin-bottom: lh(0.5); diff --git a/lms/static/sass/course/wiki/_table.scss b/lms/static/sass/course/wiki/_table.scss index 37d6364125a..26e83108f06 100644 --- a/lms/static/sass/course/wiki/_table.scss +++ b/lms/static/sass/course/wiki/_table.scss @@ -28,11 +28,12 @@ table.wiki-history { } } } - tbody { + + tbody { tr td { padding: 8px 15px; } - } + } tr.dark { background-color: #efefef; diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index 934f253eac2..d4598c7a7ec 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -1,5 +1,4 @@ .wiki-wrapper section.wiki { - .pull-left { float: left; } @@ -53,7 +52,7 @@ color: $link-color; } - &:after { + &::after { content: '›'; display: inline; margin-left: ($baseline/2); @@ -84,6 +83,7 @@ .add-article-btn { @include button(simple, #eee); + margin-left: 25px; padding: 7px 15px !important; font-size: 0.72em; @@ -107,6 +107,7 @@ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset; font-family: $sans-serif; font-size: 12px; + @include transition(border-color .1s linear 0s); &:-webkit-input-placholder { @@ -149,6 +150,7 @@ width: flex-grid(9); padding: 40px 0 40px 40px; color: $base-font-color; + @include box-sizing(border-box); } @@ -180,14 +182,14 @@ h5 { margin: 20px 0 10px; - font-size: .8em; + font-size: 0.8em; font-weight: bold; text-transform: uppercase; } h6 { margin: 20px 0 10px; - font-size: .8em; + font-size: 0.8em; font-weight: bold; color: #999; text-transform: uppercase; @@ -238,6 +240,7 @@ float: left; width: flex-grid(3); padding: 40px 40px; + @include box-sizing(border-box); .timestamp{ @@ -383,8 +386,9 @@ box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 6px $shadow; } - &:before { + &::before { @extend %ui-depth4; + content: 'click to edit schematic'; position: absolute; top: 10px; @@ -421,6 +425,7 @@ .btn { @include button(simple, #eee); + font-size: 0.8em; margin-right: ($baseline/4); line-height: 1.2em; @@ -434,16 +439,19 @@ &.btn-primary { @include button(simple, $btn-default-color); + font-size: 0.8em; } &.btn-danger { @include button(simple, $pink); + font-size: 0.8em; } &.btn-info { @include button(simple, $gray-l3); + font-size: 0.8em; } } @@ -454,6 +462,7 @@ .modal { @extend %ui-depth4; + width: 960px; min-height: 500px; margin-left: -480px; @@ -570,6 +579,7 @@ text-align: left; padding: 20px; font-size: 14px; + @include clearfix(); h3 { @@ -666,6 +676,7 @@ #settings_form { .well { margin-bottom: ($baseline*0.75); + @include clearfix(); } @@ -815,8 +826,8 @@ li { margin-bottom: ($baseline*0.75); - border: 1px solid #DDD; - background: #F9F9F9; + border: 1px solid #ddd; + background: #f9f9f9; border-radius: 5px; } @@ -906,9 +917,9 @@ .alert { position: relative; width: auto; - margin: 24px 0px; + margin: 24px 0; padding: 8px 12px; - border: 1px solid #EBE8BF; + border: 1px solid #ebe8bf; border-radius: 3px; background: $yellow; color: $black; @@ -951,7 +962,9 @@ color: $white; font-weight: bold; font-size: em(18); + @include transition(none); + text-align: center; -webkit-font-smoothing: antialiased; @@ -965,6 +978,7 @@ .modal-backdrop { @extend %ui-depth3; + position: fixed; top: 0; left: 0; diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss index a95051ee01f..481eee73110 100644 --- a/lms/static/sass/discussion/_discussion-v1.scss +++ b/lms/static/sass/discussion/_discussion-v1.scss @@ -4,72 +4,75 @@ // Note: replace with globals from common/static/sass/edx-pattern-library-shims when available %pattern-library-btn { - @include transition( - color 0.125s ease-in-out 0s, + @include transition( + color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s - ); - display: inline-block; - border: 1px solid $forum-color-active-thread; - border-radius: 3px; - margin: 0; - background-image: none; - box-shadow: none; - height: 40px; - text-shadow: none; - font-family: $f-sans-serif; // without this, it would fallback to lms button tag style - font-size: 14px; - font-weight: 600; - word-wrap: break-word; - white-space: nowrap; + ); - // Display: block, one button per line, full width - &.block { - display: block; - width: 100%; - } + display: inline-block; + border: 1px solid $forum-color-active-thread; + border-radius: 3px; + margin: 0; + background-image: none; + box-shadow: none; + height: 40px; + text-shadow: none; + font-family: $f-sans-serif; // without this, it would fallback to lms button tag style + font-size: 14px; + font-weight: 600; + word-wrap: break-word; + white-space: nowrap; - // STATE: is disabled - &:disabled, - &.is-disabled { - pointer-events: none; - outline: none; - cursor: not-allowed; - } + // Display: block, one button per line, full width + &.block { + display: block; + width: 100%; + } - &:hover, - &:active, - &:focus { - // Note:these rules all need !important in order to beat out - // the base button styling defined in the courseware. - border-color: $forum-color-hover !important; - background-color: $forum-color-hover !important; - background-image: none !important; - box-shadow: none !important; - color: $forum-color-active-text !important; - text-decoration: none !important; // Don't show underlines on links that are styled as buttons - } + // STATE: is disabled + &:disabled, + &.is-disabled { + pointer-events: none; + outline: none; + cursor: not-allowed; + } + + &:hover, + &:active, + &:focus { + // Note:these rules all need !important in order to beat out + // the base button styling defined in the courseware. + border-color: $forum-color-hover !important; + background-color: $forum-color-hover !important; + background-image: none !important; + box-shadow: none !important; + color: $forum-color-active-text !important; + text-decoration: none !important; // Don't show underlines on links that are styled as buttons + } } // Use pattern library buttons for discussion components .discussion-module, .wmd-prompt-dialog { - .btn { - @extend %pattern-library-btn; - background-color: $forum-color-background; - color: $forum-color-active-thread; - } + .btn { + @extend %pattern-library-btn; + + background-color: $forum-color-background; + color: $forum-color-active-thread; + } + + .btn-brand { + @extend %pattern-library-btn; - .btn-brand { - @extend %pattern-library-btn; - background-color: $forum-color-active-thread; - color: $forum-color-active-text; - } + background-color: $forum-color-active-thread; + color: $forum-color-active-text; + } } // Layout control for discussion modules that does not apply to the discussion board .discussion-module { - .discussion { - clear: both; - } + .discussion { + clear: both; + } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 5c6f16aa3cc..2ec331d28d0 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -4,6 +4,7 @@ .discussion-body { @include clearfix(); + border: none; background: transparent; box-shadow: none; @@ -50,6 +51,7 @@ // inline discussion module .discussion-module { @extend .discussion-body; + display: block; position: relative; border-radius: $forum-border-radius; @@ -71,12 +73,14 @@ .discussion-module-header { @include float(left); + width: flex-grid(7); margin-bottom: ($baseline * 0.75); } .add_post_btn_container { @include text-align(right); + width: flex-grid(12); height: (2 * $baseline); } @@ -90,6 +94,7 @@ .discussion-show { @include float(right); + position: relative; top: 3px; font-size: $forum-base-font-size; @@ -136,6 +141,7 @@ section.discussion-pagination { ol { li { @include padding-right($baseline/2); + list-style: none; display: inline-block; diff --git a/lms/static/sass/discussion/_layouts.scss b/lms/static/sass/discussion/_layouts.scss index 9b55da8aac0..aaf7c649d72 100644 --- a/lms/static/sass/discussion/_layouts.scss +++ b/lms/static/sass/discussion/_layouts.scss @@ -2,35 +2,35 @@ @import '../course/base/extends'; .discussion-user-profile-board { + .discussion-profile-title { + margin-bottom: $baseline / 5; + font-size: $forum-x-large-font-size; + } - .discussion-profile-title { - margin-bottom: $baseline / 5; - font-size: $forum-x-large-font-size; - } + .discussion-profile-count { + margin-top: $baseline / 4; + } - .discussion-profile-count { - margin-top: $baseline / 4; - } + .discussion-profile-info { + @include margin-right($baseline); + } - .discussion-profile-info { - @include margin-right($baseline); - } + .user-name { + @include margin-right($baseline); - .user-name { - @include margin-right($baseline); - font-size: $forum-x-large-font-size; - } + font-size: $forum-x-large-font-size; + } - .user-roles { - font-size: $forum-small-font-size; - font-style: italic; - } + .user-roles { + font-size: $forum-small-font-size; + font-style: italic; + } } .discussion-column { - min-height: 500px; + min-height: 500px; - .new-post-article { - margin-top: -$baseline; - } + .new-post-article { + margin-top: -$baseline; + } } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 24c89e863e8..a61760a7273 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -17,6 +17,7 @@ @mixin white-button { @include discussion-button(); + border-color: #aaa; background-color: $white; color: $dark-gray; @@ -28,6 +29,7 @@ @mixin discussion-wmd-input { @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); + box-sizing: border-box; margin-top: 0; border: 1px solid $forum-color-border; @@ -42,6 +44,7 @@ @mixin discussion-wmd-preview-container { @include border-radius(0, 0, $forum-border-radius, $forum-border-radius); + box-sizing: border-box; border: 1px solid $forum-color-border; width: 100%; @@ -50,11 +53,13 @@ @mixin discussion-new-post-wmd-preview-container { @include discussion-wmd-preview-container; + border-color: $forum-color-border; } @mixin discussion-wmd-preview-label { @include padding-left($baseline/4); + padding-top: 3px; width: 100%; color: $forum-color-editor-preview-label; @@ -73,8 +78,8 @@ } @-webkit-keyframes fadeIn { - 0% { opacity: 0.0; } - 100% { opacity: 1.0; } + 0% { opacity: 0; } + 100% { opacity: 1; } } // extends - content - text overflow by ellipsis diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 2aa2f9e645f..bbb4c95260c 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -8,6 +8,7 @@ .response-actions-list, .comment-actions-list { @extend %ui-no-list; + @include text-align(right); .actions-item { @@ -53,7 +54,9 @@ .actions-dropdown { @extend %ui-no-list; @extend %ui-depth1; + @include right(0); + display: none; position: absolute; top: 100%; @@ -77,9 +80,10 @@ background: $forum-color-background; // ui triangle/nub - &:after, - &:before { + &::after, + &::before { @include right(6px); + bottom: 100%; border: solid transparent; content: " "; @@ -89,14 +93,15 @@ pointer-events: none; } - &:after { + &::after { @include margin-right(1px); + border-color: $transparent; border-bottom-color: $white; border-width: 6px; } - &:before { + &::before { border-color: $transparent; border-bottom-color: $forum-color-border; border-width: 7px; @@ -118,6 +123,7 @@ // UI: general action .action-button { @include transition(border .5s linear 0s); + box-sizing: border-box; display: inline-block; border: 1px solid transparent; @@ -136,19 +142,20 @@ .icon { @include margin-right(0); + vertical-align: middle; } } .action-label { @extend %t-copy-sub2; + display: none; vertical-align: middle; padding: 2px 8px; } &:hover, &:focus { - .action-label { display: inline-block; } @@ -160,13 +167,11 @@ // specific button styles &.action-follow { - .action-label { color: $blue-d1; } &.is-checked, &:hover, &:focus { - .action-icon { background-color: $forum-color-following; border: 1px solid $blue-d1; @@ -180,13 +185,11 @@ } &.action-vote { - .action-label { opacity: 1; } &.is-checked, &:hover, &:focus { - .action-icon { background-color: $green-d1; border: 1px solid $green-d2; @@ -204,9 +207,7 @@ } &.action-endorse { - &.is-checked, &:hover, &:focus { - .action-icon { background-color: $blue-d1; border: 1px solid $blue-d2; @@ -225,9 +226,7 @@ } &.action-answer { - &.is-checked, &:hover, &:focus { - .action-icon { border: 1px solid $green-d1; background-color: $green-d1; @@ -274,7 +273,9 @@ // UI: secondary action .action-list-item { @extend %t-copy-sub2; + @include text-align(right); + display: block; width: 100%; padding: ($baseline/10) 0; @@ -287,6 +288,7 @@ .action-icon { @include margin-left($baseline/4); + display: inline-block; width: ($baseline/2); color: inherit; @@ -320,6 +322,7 @@ .action-button, .action-list-item { .action-label { @include float(left); + .label-checked { display: none; } diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index 830921dcdf2..ae3646c07c4 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -47,6 +47,7 @@ .wmd-button-row { @include transition(all .2s ease-out 0s); + position: relative; overflow: hidden; margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4); @@ -56,6 +57,7 @@ .wmd-spacer { @include margin-left(14px); + position: absolute; display: inline-block; width: 1px; @@ -107,6 +109,7 @@ .wmd-input { @include discussion-wmd-input; + box-sizing: border-box; width: 100%; background: $forum-color-background; @@ -118,6 +121,7 @@ .wmd-prompt-dialog { @extend .modal; + background: $forum-color-background; padding: $baseline; @@ -147,6 +151,7 @@ .field-group .field .field-hint { @include margin-left(0); + width: 100%; } diff --git a/lms/static/sass/discussion/elements/_labels.scss b/lms/static/sass/discussion/elements/_labels.scss index 3930034aaad..38bffa2ac00 100644 --- a/lms/static/sass/discussion/elements/_labels.scss +++ b/lms/static/sass/discussion/elements/_labels.scss @@ -4,7 +4,9 @@ .discussion { .post-label { @include margin($baseline/4, $baseline/2, 0, 0); + @extend %t-light; + font-size: $forum-small-font-size; display: inline; white-space: nowrap; diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index 760a51b84d7..c003522eb62 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -4,76 +4,79 @@ @import '../../edx-pattern-library-shims/base/variables'; .forum-nav { - border: 1px solid #aaa; - border-radius: $forum-border-radius; + border: 1px solid #aaa; + border-radius: $forum-border-radius; } // ------ // Discussion Forums Page Header // ------ .discussion-board > .page-header { - $searchBoxPadding: rem($baseline / 2 + 2); - $searchBoxHeight: (rem($baseline) + ($searchBoxPadding * 2)); + $searchBoxPadding: rem($baseline / 2 + 2); + $searchBoxHeight: (rem($baseline) + ($searchBoxPadding * 2)); - div { - display: inline-block; - vertical-align: middle; - } + div { + display: inline-block; + vertical-align: middle; + } - .has-breadcrumbs .breadcrumbs { - margin-bottom: ($baseline / 2); - font-size: font-size(base); - font-weight: font-weight(semi-bold); - line-height: $base-line-height; - } + .has-breadcrumbs .breadcrumbs { + margin-bottom: ($baseline / 2); + font-size: font-size(base); + font-weight: font-weight(semi-bold); + line-height: $base-line-height; + } - .page-header-main { - line-height: $searchBoxHeight; - } + .page-header-main { + line-height: $searchBoxHeight; + } - .page-header-secondary > .form-actions > button { - // Overrides base size set in lms/static/sass/shared-v2/_layouts.scss - // Done to match size of UXPL's search box. This is bad, I know. - height: $searchBoxHeight !important; - } + .page-header-secondary > .form-actions > button { + // Overrides base size set in lms/static/sass/shared-v2/_layouts.scss + // Done to match size of UXPL's search box. This is bad, I know. + height: $searchBoxHeight !important; + } } // ----------- // Browse menu // ----------- .forum-nav-browse-menu-wrapper { - border-bottom: 1px solid $forum-color-border; - background: $gray-l5; + border-bottom: 1px solid $forum-color-border; + background: $gray-l5; } .forum-nav-browse-filter { - position: relative; - border-bottom: 1px solid $forum-color-border; - padding: ($baseline/4); + position: relative; + border-bottom: 1px solid $forum-color-border; + padding: ($baseline/4); } .forum-nav-browse-filter .icon { - @include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding - font-size: $forum-small-font-size; - position: absolute; - margin-top: -6px; - top: 50%; + @include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding + + font-size: $forum-small-font-size; + position: absolute; + margin-top: -6px; + top: 50%; } .forum-nav-browse-filter-input { - width: 100%; + width: 100%; } .forum-nav-browse-menu-following { - .icon { - @include float(left); - @include left($baseline / 2); - position: relative; - top: 13px; - } - .forum-nav-browse-title { - @include padding-left($baseline * 1.5); - } + .icon { + @include float(left); + @include left($baseline / 2); + + position: relative; + top: 13px; + } + + .forum-nav-browse-title { + @include padding-left($baseline * 1.5); + } } .forum-nav-browse-menu-item { @@ -81,49 +84,49 @@ } .forum-nav-browse-title { - @include text-align(left); - display: block; - width: 100%; - border: 0; - border-radius: 0; - border-bottom: 1px solid $forum-color-border; - padding: ($baseline/2); - background: transparent; - box-shadow: none; - background-image: none; - cursor: pointer; - - &:hover, - &:focus, - &.is-focused { - // switched from a to button; - // need to override button styles - background-image: none !important; - box-shadow: none !important; - background: $forum-color-background !important; - } + @include text-align(left); + + display: block; + width: 100%; + border: 0; + border-radius: 0; + border-bottom: 1px solid $forum-color-border; + padding: ($baseline/2); + background: transparent; + box-shadow: none; + background-image: none; + cursor: pointer; + + &:hover, + &:focus, + &.is-focused { + // switched from a to button; + // need to override button styles + background-image: none !important; + box-shadow: none !important; + background: $forum-color-background !important; + } } .forum-nav-browse-title .icon { - @include margin-right($baseline/2); + @include margin-right($baseline/2); } .forum-nav-browse-menu { - font-size: $forum-base-font-size; - overflow-y: scroll; - list-style: none; + font-size: $forum-base-font-size; + overflow-y: scroll; + list-style: none; } .forum-nav-browse-submenu { - list-style: none; - padding: 0; + list-style: none; + padding: 0; - li { - - .forum-nav-browse-title { - @include padding-left($baseline); - } + li { + .forum-nav-browse-title { + @include padding-left($baseline); } + } } // ------------------- @@ -131,264 +134,285 @@ // ------------------- .forum-nav-refine-bar { - @include clearfix(); - @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); - font-size: $forum-small-font-size; - border-bottom: 1px solid $forum-color-border; - background-color: $gray-l5; - padding: ($baseline/4) ($baseline/2); - color: $black; + @include clearfix(); + @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); + + font-size: $forum-small-font-size; + border-bottom: 1px solid $forum-color-border; + background-color: $gray-l5; + padding: ($baseline/4) ($baseline/2); + color: $black; } .forum-nav-filter-main { - @include text-align(left); - @include float(left); - box-sizing: border-box; - width: 50%; + @include text-align(left); + @include float(left); + + box-sizing: border-box; + width: 50%; } .forum-nav-filter-cohort, .forum-nav-sort { - @include text-align(right); - box-sizing: border-box; + @include text-align(right); + + box-sizing: border-box; } .forum-nav-filter-cohort { - .discussion-board & { - @include float(right); - @include text-align(right); - width: 50%; - } + .discussion-board & { + @include float(right); + @include text-align(right); + + width: 50%; + } } .forum-nav-sort { - @include float(right); + @include float(right); } %forum-nav-select { - border: none; - max-width: 100%; - background-color: transparent; + border: none; + max-width: 100%; + background-color: transparent; } .forum-nav-filter-main-control { - @extend %forum-nav-select; + @extend %forum-nav-select; } .forum-nav-filter-cohort-control { - @extend %forum-nav-select; - max-width: 60%; + @extend %forum-nav-select; + + max-width: 60%; } .forum-nav-sort-control { - @extend %forum-nav-select; + @extend %forum-nav-select; } // ----------- // Thread list // ----------- .forum-nav-thread-list { - padding-left: 0 !important; // should *not* be RTLed, see below for explanation - min-height: 60px; // @TODO: Remove this when we have a real empty state for the discussion thread list - margin: 0; - overflow-y: auto; - list-style: none; - border-radius: 0 0 3px 3px; - - .forum-nav-thread-labels { - margin: 5px 0 0; - // Overrides overspecific courseware CSS from: - // https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L470 - // note this should *not* be RTLed, as the rule it overrides is not RTLed - padding-left: 0 !important; - } + padding-left: 0 !important; // should *not* be RTLed, see below for explanation + min-height: 60px; // @TODO: Remove this when we have a real empty state for the discussion thread list + margin: 0; + overflow-y: auto; + list-style: none; + border-radius: 0 0 3px 3px; + + .forum-nav-thread-labels { + margin: 5px 0 0; + // Overrides overspecific courseware CSS from: + // https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L470 + // note this should *not* be RTLed, as the rule it overrides is not RTLed + padding-left: 0 !important; + } + + .thread-preview-body { + margin-top: $baseline / 4; + color: $forum-color-response-count; + font-size: $forum-small-font-size; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; - .thread-preview-body { - margin-top: $baseline / 4; - color: $forum-color-response-count; - font-size: $forum-small-font-size; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - @include rtl { - // This is counterintuitive, but when showing a preview of the first part of RTL text, using direction: rtl - // will actually show the _last_ part of that text. - direction: ltr; - } + @include rtl { + // This is counterintuitive, but when showing a preview of the first part of RTL text, using direction: rtl + // will actually show the _last_ part of that text. + direction: ltr; } + } } // Overrides underspecific styles from courseware css .course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list { - @include padding-left(0); - list-style: none; + @include padding-left(0); - .forum-nav-thread { - margin: 0; - } + list-style: none; + + .forum-nav-thread { + margin: 0; + } } .forum-nav-thread { + border-bottom: 1px solid $forum-color-border; + background-color: $forum-color-background; + margin-bottom: 0; + + &:last-child { + // Overrides pattern library default li:last-child style border-bottom: 1px solid $forum-color-border; - background-color: $forum-color-background; - margin-bottom: 0; + } + + .forum-nav-thread-link { + @include border-left(3px solid transparent); + + display: flex; + padding: $baseline / 2; + transition: none; + align-items: center; + justify-content: space-between; + color: $forum-color-read-post; - &:last-child { - // Overrides pattern library default li:last-child style - border-bottom: 1px solid $forum-color-border; + &:hover, + &:active, + &:focus { + text-decoration: none; } - .forum-nav-thread-link { - @include border-left(3px solid transparent); - display: flex; - padding: $baseline / 2; - transition: none; - align-items: center; - justify-content: space-between; - color: $forum-color-read-post; - - &:hover, - &:active, - &:focus { - text-decoration: none; - } - - &:hover { - background-color: $forum-color-hover-thread; - } - - &.is-active { - background-color: $forum-color-reading-thread; - } - - .forum-nav-thread-unread-comments-count { - display: inline-block; - font-size: $forum-small-font-size; - white-space: nowrap; - } + &:hover { + background-color: $forum-color-hover-thread; } - &.never-read { - .forum-nav-thread-link { - @include border-left(3px solid $forum-color-never-read-post); - color: $forum-color-never-read-post; - } + &.is-active { + background-color: $forum-color-reading-thread; + } + + .forum-nav-thread-unread-comments-count { + display: inline-block; + font-size: $forum-small-font-size; + white-space: nowrap; + } + } + + &.never-read { + .forum-nav-thread-link { + @include border-left(3px solid $forum-color-never-read-post); + + color: $forum-color-never-read-post; } + } } %forum-nav-thread-wrapper { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } .forum-nav-thread-wrapper-0 { - @extend %forum-nav-thread-wrapper; - @include margin-right($baseline/5); - align-self: flex-start; + @extend %forum-nav-thread-wrapper; + + @include margin-right($baseline/5); - .icon { - font-size: $forum-base-font-size; - width: 18px; - text-align: center; + align-self: flex-start; - &:before { + .icon { + font-size: $forum-base-font-size; + width: 18px; + text-align: center; - @include rtl { - @include transform(scale(-1, 1)); // RTL for font awesome question mark - } - } + &::before { + @include rtl { + @include transform(scale(-1, 1)); // RTL for font awesome question mark + } } + } } .forum-nav-thread-wrapper-1 { - @extend %forum-nav-thread-wrapper; - 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 - // at the same length whether there are unread comments for this story or not. - max-width: calc(100% - 125px); - flex-grow: 1; // This column should consume all the available space + @extend %forum-nav-thread-wrapper; + + 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 + // at the same length whether there are unread comments for this story or not. + max-width: calc(100% - 125px); + flex-grow: 1; // This column should consume all the available space } .forum-nav-thread-wrapper-2 { - @extend %forum-nav-thread-wrapper; - @include text-align(right); - min-width: 90px; - white-space: nowrap; + @extend %forum-nav-thread-wrapper; + + @include text-align(right); + + min-width: 90px; + white-space: nowrap; } .forum-nav-thread-title { - @include margin-left(0); - font-size: $forum-base-font-size; - display: block; + @include margin-left(0); + + font-size: $forum-base-font-size; + display: block; } %forum-nav-thread-wrapper-2-content { - @include margin-right($baseline/4); - font-size: $forum-small-font-size; - display: inline-block; - text-align: center; - color: $black; + @include margin-right($baseline/4); - &:last-child { - @include margin-right(0); - } + font-size: $forum-small-font-size; + display: inline-block; + text-align: center; + color: $black; + + &:last-child { + @include margin-right(0); + } } .forum-nav-thread-votes-count { - @extend %forum-nav-thread-wrapper-2-content; + @extend %forum-nav-thread-wrapper-2-content; } .forum-nav-thread-comments-count { - @extend %forum-nav-thread-wrapper-2-content; - @extend %t-weight4; - position: relative; - @include margin-left($baseline/4); - margin-bottom: ($baseline/4); // Because tail is position: absolute - border-radius: $forum-border-radius; - padding: ($baseline/10) ($baseline/5); - min-width: 2em; // Fit most comment counts but allow expansion if necessary - background-color: $gray-l4; - - // Speech bubble tail - &:after { - content: ''; - display: block; - position: absolute; - bottom: (-$baseline/4); - @include right($baseline/4); - width: 0; - height: 0; - border-style: solid; - @include border-width(0, ($baseline/4), ($baseline/4), 0); - @include border-color(transparent, $gray-l4, transparent, transparent); - } + @extend %forum-nav-thread-wrapper-2-content; + @extend %t-weight4; + + position: relative; + + @include margin-left($baseline/4); + + margin-bottom: ($baseline/4); // Because tail is position: absolute + border-radius: $forum-border-radius; + padding: ($baseline/10) ($baseline/5); + min-width: 2em; // Fit most comment counts but allow expansion if necessary + background-color: $gray-l4; + + // Speech bubble tail + &::after { + content: ''; + display: block; + position: absolute; + bottom: (-$baseline/4); + + @include right($baseline/4); + + width: 0; + height: 0; + border-style: solid; + + @include border-width(0, ($baseline/4), ($baseline/4), 0); + @include border-color(transparent, $gray-l4, transparent, transparent); + } } .forum-nav-load-more { - border-bottom: 1px solid $forum-color-border; - background-color: $gray-l5; + border-bottom: 1px solid $forum-color-border; + background-color: $gray-l5; } %forum-nav-load-more-content { - display: block; - padding: $baseline 0; - text-align: center; + display: block; + padding: $baseline 0; + text-align: center; } .forum-nav-load-more-link { - @extend %forum-nav-load-more-content; - color: $link-color; - width: 100%; + @extend %forum-nav-load-more-content; - &:hover, - &:focus { - color: $forum-color-active-text; - // !important overrides the one set here: - // https://github.com/edx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472 - background-color: $forum-color-active-thread !important; - } + color: $link-color; + width: 100%; + + &:hover, + &:focus { + color: $forum-color-active-text; + // !important overrides the one set here: + // https://github.com/edx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472 + background-color: $forum-color-active-thread !important; + } } .forum-nav-loading { - @extend %forum-nav-load-more-content; + @extend %forum-nav-load-more-content; } diff --git a/lms/static/sass/discussion/lms-discussion-main-rtl.scss b/lms/static/sass/discussion/lms-discussion-main-rtl.scss index fc0a81dd511..c1585c0a7bc 100644 --- a/lms/static/sass/discussion/lms-discussion-main-rtl.scss +++ b/lms/static/sass/discussion/lms-discussion-main-rtl.scss @@ -6,6 +6,7 @@ // Load the RTL version of the edX Pattern Library $pattern-library-path: '../../edx-pattern-library' !default; + @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; // Configure RTL variables diff --git a/lms/static/sass/discussion/lms-discussion-main.scss b/lms/static/sass/discussion/lms-discussion-main.scss index 84367a47431..32b16a7b7fb 100644 --- a/lms/static/sass/discussion/lms-discussion-main.scss +++ b/lms/static/sass/discussion/lms-discussion-main.scss @@ -6,6 +6,7 @@ // Load the LTR version of the edX Pattern Library $pattern-library-path: '../../edx-pattern-library' !default; + @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; // Configure LTR variables diff --git a/lms/static/sass/discussion/utilities/_developer.scss b/lms/static/sass/discussion/utilities/_developer.scss index 831c21a5566..ab27d508838 100644 --- a/lms/static/sass/discussion/utilities/_developer.scss +++ b/lms/static/sass/discussion/utilities/_developer.scss @@ -28,6 +28,7 @@ // a single alert, which can be independently displayed / dismissed .search-alert { @include transition(none); + padding: ($baseline/2) 11px ($baseline/2) 18px; background-color: $black; } @@ -48,6 +49,7 @@ em { @extend %t-weight5; + font-style: italic; } } @@ -55,6 +57,7 @@ // links to jump to users/content in alerts .link-jump { @include transition(none); + @extend %t-weight5; } } @@ -62,11 +65,14 @@ // alert controls .search-alert-controls { @include text-align(right); + width: 28%; .control { @include transition(none); + @extend %t-weight5; + padding: ($baseline/4) ($baseline/2); color: $white; font-size: $forum-base-font-size; diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index b9bd9460a64..350e15c6091 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -30,6 +30,7 @@ .forum-nav-browse-filter-input { @include padding-left($baseline/4); @include padding-right($baseline/2 + 12px); // Leave room for icon + box-shadow: none !important; border-radius: $forum-border-radius !important; height: auto !important; @@ -75,7 +76,7 @@ li[class*=forum-nav-thread-label-] { } // Override clearfix stuff in .sidebar ul li rules - &:before, &:after { + &::before, &::after { display: none !important; } } @@ -101,7 +102,6 @@ li[class*=forum-nav-thread-label-] { // Inline Discussion Module Overrides // ------- .discussion-module { - .post-header { margin-bottom: 0 !important; // overrides default header styling padding-bottom: 0 !important; // overrides default header styling diff --git a/lms/static/sass/discussion/utilities/_v1-compatibility.scss b/lms/static/sass/discussion/utilities/_v1-compatibility.scss index afdd9fa7998..73021b549ba 100644 --- a/lms/static/sass/discussion/utilities/_v1-compatibility.scss +++ b/lms/static/sass/discussion/utilities/_v1-compatibility.scss @@ -9,18 +9,18 @@ } %text-sr { - // clip has been deprecated but is still supported - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); - position: absolute; - margin: -1px; - height: 1px; - width: 1px; - border: 0; - padding: 0; - overflow: hidden; - // ensure there are spaces in sr text - word-wrap: normal; + // clip has been deprecated but is still supported + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + position: absolute; + margin: -1px; + height: 1px; + width: 1px; + border: 0; + padding: 0; + overflow: hidden; + // ensure there are spaces in sr text + word-wrap: normal; } // extends - UI - depth levels @@ -33,22 +33,27 @@ // weights %t-ultrastrong { - font-weight: 700; + font-weight: 700; } + %t-strong { - font-weight: 600; + font-weight: 600; } + %t-demi-strong { - font-weight: 500; + font-weight: 500; } + %t-regular { - font-weight: 400; + font-weight: 400; } + %t-light { - font-weight: 300; + font-weight: 300; } + %t-ultralight { - font-weight: 200; + font-weight: 200; } // copy @@ -58,13 +63,17 @@ %t-copy-sub1 { @extend %t-copy; + @include line-height(14); + font-size: $forum-base-font-size; } %t-copy-sub2 { @extend %t-copy; + @include line-height(12); + font-size: $forum-small-font-size; } diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index 39f291e1c87..fa8a85f4431 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -5,6 +5,7 @@ .forum-new-post-form, .edit-post-form { @include clearfix(); + box-sizing: border-box; margin: 0; border-radius: $forum-border-radius; @@ -38,6 +39,7 @@ .field-input { display: inline-block; vertical-align: top; + &:not([type="text"]) { border-width: 0; padding: 0; @@ -69,7 +71,7 @@ } &#new-post-editor-description { - @include padding-left(0); + @include padding-left(0); } } @@ -93,45 +95,47 @@ } .edit-post-form { - @include clearfix(); - box-sizing: border-box; - width: 100%; - padding-top: 0; + @include clearfix(); - h1 { - font-size: $forum-large-font-size; - } + box-sizing: border-box; + width: 100%; + padding-top: 0; - .form-row { - margin-top: $baseline; - } + h1 { + font-size: $forum-large-font-size; + } - .post-cancel { - @include float(left); - @include margin($baseline/2, 0, 0, $baseline*0.75); - } + .form-row { + margin-top: $baseline; + } - .post-update { - @include float(left); - margin-top: ($baseline/2); + .post-cancel { + @include float(left); + @include margin($baseline/2, 0, 0, $baseline*0.75); + } - &:hover, &:focus { - border-color: #222; - } - } + .post-update { + @include float(left); - .edit-post-title { - box-sizing: border-box; - border: 1px solid $forum-color-border; - border-radius: $forum-border-radius; - padding: 0 ($baseline/2); - width: 100%; - height: 40px; - box-shadow: 0 1px 3px $shadow-l1 inset; - color: $dark-gray; - font-size: $forum-large-font-size; - font-family: $sans-serif; + margin-top: ($baseline/2); + + &:hover, &:focus { + border-color: #222; } + } + + .edit-post-title { + box-sizing: border-box; + border: 1px solid $forum-color-border; + border-radius: $forum-border-radius; + padding: 0 ($baseline/2); + width: 100%; + height: 40px; + box-shadow: 0 1px 3px $shadow-l1 inset; + color: $dark-gray; + font-size: $forum-large-font-size; + font-family: $sans-serif; + } } // CASE: inline styling @@ -144,9 +148,9 @@ // UI: inputs .forum-new-post-form, .edit-post-form { - .post-type-label { @include margin-right($baseline); + color: $gray-d3; } @@ -170,7 +174,9 @@ .post-option { box-sizing: border-box; display: inline-block; + @include margin-right($baseline); + border-radius: $forum-border-radius; padding: ($baseline/2); cursor: pointer; diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss index bbe42275e4c..28aa364634a 100644 --- a/lms/static/sass/discussion/views/_home.scss +++ b/lms/static/sass/discussion/views/_home.scss @@ -11,6 +11,7 @@ .label { @extend %t-copy-sub2; + display: block; } @@ -28,10 +29,13 @@ color: $black; margin-bottom: ($baseline/4); } + .home-description { @extend %t-copy-sub2; + margin-bottom: ($baseline/2); } + .home-stats { padding: $baseline 0; @@ -48,11 +52,13 @@ .stats-grouping { @include padding-left($baseline); + display: inline-block; width: 70%; .profile-stat { @extend %t-copy-sub2; + display: inline-block; width: 32.5%; vertical-align: middle; @@ -113,11 +119,13 @@ } .row-item-full { - .notification-checkbox { @include margin-right($baseline/2); + display: inline-block; + @include padding($baseline/4, 0, $baseline/2, 0); + border-radius: $forum-border-radius; border: 1px solid gray; @@ -125,6 +133,7 @@ display: inline-block; text-align: center; vertical-align: middle; + @include margin-left($baseline/2); } diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss index 19584bc9e96..54b16384ff5 100644 --- a/lms/static/sass/discussion/views/_inline.scss +++ b/lms/static/sass/discussion/views/_inline.scss @@ -4,53 +4,54 @@ @import '../../edx-pattern-library-shims/form'; .discussion.inline-discussion { - .inline-threads { - border: 1px solid $forum-color-border; - border-radius: $forum-border-radius; - } - - .inline-thread { - border: 1px solid $forum-color-border; - border-radius: $forum-border-radius; + .inline-threads { + border: 1px solid $forum-color-border; + border-radius: $forum-border-radius; + } - .forum-nav-bar { - padding: ($baseline / 2) ($baseline / 4); - color: $forum-color-navigation-bar; - position: relative; + .inline-thread { + border: 1px solid $forum-color-border; + border-radius: $forum-border-radius; - .all-posts-btn { - color: $forum-color-primary; + .forum-nav-bar { + padding: ($baseline / 2) ($baseline / 4); + color: $forum-color-navigation-bar; + position: relative; - .icon { - @include margin-left($baseline / 2); - } - } - } + .all-posts-btn { + color: $forum-color-primary; - .forum-content { - padding: $baseline / 2; - overflow-y: auto; + .icon { + @include margin-left($baseline / 2); } + } } - .new-post-article { - position: relative; - border: 1px solid $forum-color-border; - - .add-post-cancel { - @include right($baseline / 2); - top: $baseline / 2; - position: absolute; - color: $uxpl-primary-blue; - - &:hover, - &:focus { - border-color: transparent; - box-shadow: none; - background-color: transparent; - background-image: none; - } - } + .forum-content { + padding: $baseline / 2; + overflow-y: auto; + } + } + + .new-post-article { + position: relative; + border: 1px solid $forum-color-border; + + .add-post-cancel { + @include right($baseline / 2); + + top: $baseline / 2; + position: absolute; + color: $uxpl-primary-blue; + + &:hover, + &:focus { + border-color: transparent; + box-shadow: none; + background-color: transparent; + background-image: none; + } } + } } diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index 2712e073508..b0b3a414a2b 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/lms/static/sass/discussion/views/_response.scss @@ -21,6 +21,7 @@ // wrapper - response plus comment area .forum-response { @include animation(fadeIn .3s); + position: relative; margin: $baseline 0; border: 1px solid $forum-color-border; @@ -31,7 +32,9 @@ // wrapper - main response area .discussion-response { box-sizing: border-box; + @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); + padding: $baseline; background-color: $forum-color-background; } @@ -48,6 +51,7 @@ // CASE: larger username for responses .username { @extend %t-weight5; + font-size: $forum-base-font-size; } } @@ -96,6 +100,7 @@ .staff-banner { @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include left(0); + position: absolute; top: 0; width: 100%; @@ -109,9 +114,10 @@ } // CASE: banner - community TA response - .community-ta-banner{ + .community-ta-banner { @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include left(0); + position: absolute; top: 0; width: 100%; @@ -137,7 +143,9 @@ // +comments styling .discussion .comments { @extend %ui-no-list; + @include border-radius(0, 0, $forum-border-radius, $forum-border-radius); + background: $gray-l6; box-shadow: 0 1px 3px -1px $shadow inset; @@ -156,6 +164,7 @@ .comment-form { @include clearfix(); + padding: ($baseline/2) 0; .comment-form-input { @@ -166,11 +175,13 @@ .discussion-submit-comment { @include float(left); + margin-top: 8px; } .wmd-input { @include transition(all .2s linear 0s); + height: 40px; } @@ -183,6 +194,7 @@ .response-count { @include float(right); @include margin-right($baseline / 2); + color: $forum-color-response-count; font-size: $forum-base-font-size; } @@ -204,6 +216,7 @@ .load-response-button { @include text-align(left); + position: relative; margin: ($baseline/2) 0; width: 100%; diff --git a/lms/static/sass/discussion/views/_search.scss b/lms/static/sass/discussion/views/_search.scss index d5318627e20..4f6c4d50619 100644 --- a/lms/static/sass/discussion/views/_search.scss +++ b/lms/static/sass/discussion/views/_search.scss @@ -1,8 +1,9 @@ .forum-search { - @include margin-left($baseline); - display: inline-block; + @include margin-left($baseline); - .search-input { - width: input-width(short); - } + display: inline-block; + + .search-input { + width: input-width(short); + } } diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 5980d492964..c9d511debf8 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -11,272 +11,288 @@ // post layout .discussion-post { - padding: 0 ($baseline/2); + padding: 0 ($baseline/2); - .post-header-actions { - @include float(right); - } + .post-header-actions { + @include float(right); + } } // post article .discussion-article { - .posted-details { - @extend %t-copy-sub2; - @extend %t-light; - margin: ($baseline/5) 0; - color: $forum-color-copy-light; - - .username { - @extend %t-strong; - display: inline; - } + .posted-details { + @extend %t-copy-sub2; + @extend %t-light; - .timeago, .top-post-status { - color: inherit; - } + margin: ($baseline/5) 0; + color: $forum-color-copy-light; + + .username { + @extend %t-strong; + + display: inline; + } + + .timeago, .top-post-status { + color: inherit; } + } } .thread-title { - display: block; - margin-bottom: $baseline; - font-size: $forum-x-large-font-size; - color: $gray-d3; - font-weight: 600; + display: block; + margin-bottom: $baseline; + font-size: $forum-x-large-font-size; + color: $gray-d3; + font-weight: 600; } .thread-responses-wrapper, .post-extended-content { - padding: 0 ($baseline/2); + padding: 0 ($baseline/2); } // response layout .discussion-response { - min-height: ($baseline*5); + min-height: ($baseline*5); - .response-header-content { - display: inline-block; - vertical-align: top; - width: flex-grid(11,12); - } + .response-header-content { + display: inline-block; + vertical-align: top; + width: flex-grid(11,12); + } - .response-header-actions { - @include float(right); - @include right($baseline); - position: absolute; - top: ($baseline/2); - } + .response-header-actions { + @include float(right); + @include right($baseline); - // response body - .response-body { - @extend %t-copy-sub1; - } + position: absolute; + top: ($baseline/2); + } + + // response body + .response-body { + @extend %t-copy-sub1; + } } // comments layout .discussion-comment { + .response-body { + @extend %t-copy-sub2; - .response-body { - @extend %t-copy-sub2; - display: inline-block; - margin-bottom: ($baseline/2); - width: flex-grid(10,12); + display: inline-block; + margin-bottom: ($baseline/2); + width: flex-grid(10,12); - p + p { - margin-top: ($baseline/2); - } + p + p { + margin-top: ($baseline/2); } + } - .comment-actions-list { - @include float(right); - @include right($baseline / 2); - position: absolute; - top: $baseline / 2; - } + .comment-actions-list { + @include float(right); + @include right($baseline / 2); + + position: absolute; + top: $baseline / 2; + } } // +thread - wrapper styling .thread-wrapper { - .response-btn-count-wrapper { - margin: $baseline 0; - } + .response-btn-count-wrapper { + margin: $baseline 0; + } } // +thread - elements - shared styles .discussion-post, .discussion-response, .discussion-comment { - @include clearfix(); + @include clearfix(); - // thread - images - .author-image { - @include margin-right($baseline/2); - display: inline-block; - vertical-align: top; + // thread - images + .author-image { + @include margin-right($baseline/2); - // STATE: No profile image - &:empty { - display: none; - } + display: inline-block; + vertical-align: top; - // CASE: post image - &.level-post { - height: $post-image-dimension; - width: $post-image-dimension; - } + // STATE: No profile image + &:empty { + display: none; + } - // CASE: response image - &.level-response { - height: $response-image-dimension; - width: $response-image-dimension; - } + // CASE: post image + &.level-post { + height: $post-image-dimension; + width: $post-image-dimension; + } - // CASE: comment image - &.level-comment { - height: $comment-image-dimension; - width: $comment-image-dimension; - } + // CASE: response image + &.level-response { + height: $response-image-dimension; + width: $response-image-dimension; + } - img { - border-radius: $forum-border-radius; - } + // CASE: comment image + &.level-comment { + height: $comment-image-dimension; + width: $comment-image-dimension; + } + + img { + border-radius: $forum-border-radius; } + } } .discussion-response .response-body { - @include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions. - margin-bottom: 0.2em; - font-size: $forum-base-font-size; + @include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions. + + margin-bottom: 0.2em; + font-size: $forum-base-font-size; } // +post - individual element styling .discussion-post { - @include clearfix(); + @include clearfix(); - .post-header-content { - max-width: calc(100% - #{$actions-dropdown-offset}); + .post-header-content { + max-width: calc(100% - #{$actions-dropdown-offset}); - // post title - .post-title { - font-size: $forum-x-large-font-size; - margin-bottom: ($baseline/4); - } + // post title + .post-title { + font-size: $forum-x-large-font-size; + margin-bottom: ($baseline/4); } + } - // post body - .post-body { - @extend %t-copy-sub1; - padding: ($baseline/2) 0; - max-width: calc(100% - #{$actions-dropdown-offset}); - } + // post body + .post-body { + @extend %t-copy-sub1; - // post context - .post-context { - @extend %t-copy-sub2; - @extend %t-light; - color: $forum-color-copy-light; + padding: ($baseline/2) 0; + max-width: calc(100% - #{$actions-dropdown-offset}); + } - // CASE: no courseware context or cohort visibility rules - &:empty { - display: none; - } + // post context + .post-context { + @extend %t-copy-sub2; + @extend %t-light; + + color: $forum-color-copy-light; + + // CASE: no courseware context or cohort visibility rules + &:empty { + display: none; } + } } // Styling for discussion threads .discussion-thread { - padding: 0; - margin-bottom: $baseline; - @include transition(all .25s linear 0s); + padding: 0; + margin-bottom: $baseline; + + @include transition(all .25s linear 0s); + + p { + margin-bottom: 0; + } + + .discussion-article { + @include transition(all .2s linear 0s); + + border: 1px solid $forum-color-border; + border-radius: $forum-border-radius; + min-height: 0; + background: $forum-color-background; + box-shadow: 0 1px 0 $shadow; + + @include transition(all .2s linear 0s); + + .thread-wrapper { + @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); + + position: relative; + overflow-x: hidden; + overflow-y: auto; + max-height: 600px; + background-color: $forum-color-background; - p { - margin-bottom: 0; + .discussion-post { + .inline-comment-count { + @include margin-right($baseline/2); + + @extend %ui-depth2; + + @include float(right); + + position: relative; + display: block; + height: 27px; + margin-top: 6px; + padding: 0 8px; + border-radius: $forum-border-radius; + font-size: $forum-small-font-size; + font-weight: 400; + line-height: 25px; + color: #888; + } + } + + .responses { + header { + padding-bottom: 0; + margin-bottom: ($baseline*0.75); + + .posted-by { + @include margin-right($baseline/4); + @include float(left); + + font-size: $forum-large-font-size; + } + } + } + + .discussion-reply-new { + .wmd-input { + height: 120px; + } + } + + // Content that is hidden by default in the inline view + .post-extended-content { + display: none; + } } - .discussion-article { - @include transition(all .2s linear 0s); - border: 1px solid $forum-color-border; - border-radius: $forum-border-radius; - min-height: 0; - background: $forum-color-background; - box-shadow: 0 1px 0 $shadow; - @include transition(all .2s linear 0s); - - .thread-wrapper { - @include border-radius($forum-border-radius, $forum-border-radius, 0, 0); - position: relative; - overflow-x: hidden; - overflow-y: auto; - max-height: 600px; - background-color: $forum-color-background; - - .discussion-post { - - .inline-comment-count { - @include margin-right($baseline/2); - @extend %ui-depth2; - @include float(right); - position: relative; - display: block; - height: 27px; - margin-top: 6px; - padding: 0 8px; - border-radius: $forum-border-radius; - font-size: $forum-small-font-size; - font-weight: 400; - line-height: 25px; - color: #888; - } - } - - .responses { - header { - padding-bottom: 0; - margin-bottom: ($baseline*0.75); - - .posted-by { - @include margin-right($baseline/4); - @include float(left); - font-size: $forum-large-font-size; - } - } - } - - .discussion-reply-new { - .wmd-input { - height: 120px; - } - } - - // Content that is hidden by default in the inline view - .post-extended-content { - display: none; - } + .post-tools { + box-shadow: 0 1px 1px $shadow inset; + background: $white; + + &:hover { + background: $forum-color-hover-thread; + + .icon { + color: $link-hover; } + } + + .btn-link { + display: block; + padding: ($baseline*0.25) $baseline; + font-size: $forum-small-font-size; + line-height: 30px; - .post-tools { - box-shadow: 0 1px 1px $shadow inset; - background: $white; - - &:hover { - background: $forum-color-hover-thread; - - .icon { - color: $link-hover; - } - } - - .btn-link { - display: block; - padding: ($baseline*0.25) $baseline; - font-size: $forum-small-font-size; - line-height: 30px; - - .icon { - @include margin-right($baseline*0.25); - color: $link-color; - } - } + .icon { + @include margin-right($baseline*0.25); + + color: $link-color; } + } } + } } .thread-wrapper, diff --git a/lms/static/sass/elements-v2/_pagination.scss b/lms/static/sass/elements-v2/_pagination.scss index c85b4d83ca8..d42abdbd037 100644 --- a/lms/static/sass/elements-v2/_pagination.scss +++ b/lms/static/sass/elements-v2/_pagination.scss @@ -1,134 +1,139 @@ // Copied from elements/_pagination.scss .pagination { - @include clearfix(); + @include clearfix(); + + display: inline-block; + width: flex-grid(3, 12); + + &.pagination-compact { + @include text-align(right); + } + + &.pagination-full { + display: block; + width: flex-grid(4, 12); + margin: $baseline auto; + } + + .nav-item { + position: relative; display: inline-block; - width: flex-grid(3, 12); + vertical-align: middle; + } - &.pagination-compact { - @include text-align(right); - } + .nav-link { + @include transition(all $tmg-f2 ease-in-out 0s); - &.pagination-full { - display: block; - width: flex-grid(4, 12); - margin: $baseline auto; - } + display: block; + border: 0; + background-image: none; + background-color: transparent; + padding: ($baseline/2) ($baseline*0.75); - .nav-item { - position: relative; - display: inline-block; - vertical-align: middle; + &.previous { + margin-right: ($baseline/2); } - .nav-link { - @include transition(all $tmg-f2 ease-in-out 0s); - display: block; - border: 0; - background-image: none; - background-color: transparent; - padding: ($baseline/2) ($baseline*0.75); - - &.previous { - margin-right: ($baseline/2); - } - - &.next { - margin-left: ($baseline/2); - } - - &:hover { - background-color: $lms-active-color; - background-image: none; - border-radius: 3px; - color: $white; - } - - &.is-disabled { - background-color: transparent; - color: $lms-gray; - pointer-events: none; - } + &.next { + margin-left: ($baseline/2); } - .nav-label { - @extend .sr-only; + &:hover { + background-color: $lms-active-color; + background-image: none; + border-radius: 3px; + color: $white; } - .pagination-form, - .current-page, - .page-divider, - .total-pages { - display: inline-block; + &.is-disabled { + background-color: transparent; + color: $lms-gray; + pointer-events: none; } + } - .current-page, - .page-number-input, - .total-pages { - width: ($baseline*2.5); - vertical-align: middle; - margin: 0 ($baseline*0.75); - padding: ($baseline/4); - text-align: center; - color: $lms-gray; - } + .nav-label { + @extend .sr-only; + } - .current-page { - position: absolute; - @include left(-($baseline/4)); - } + .pagination-form, + .current-page, + .page-divider, + .total-pages { + display: inline-block; + } + + .current-page, + .page-number-input, + .total-pages { + width: ($baseline*2.5); + vertical-align: middle; + margin: 0 ($baseline*0.75); + padding: ($baseline/4); + text-align: center; + color: $lms-gray; + } + + .current-page { + position: absolute; + + @include left(-($baseline/4)); + } + + .page-divider { + vertical-align: middle; + color: $lms-gray; + } - .page-divider { - vertical-align: middle; - color: $lms-gray; + .pagination-form { + position: relative; + z-index: 100; + + .page-number-label, + .submit-pagination-form { + @extend .sr-only; } - .pagination-form { - position: relative; - z-index: 100; - - .page-number-label, - .submit-pagination-form { - @extend .sr-only; - } - - .page-number-input { - @include transition(all $tmg-f2 ease-in-out 0s); - border: 1px solid transparent; - border-bottom: 1px dotted $lms-gray; - border-radius: 0; - box-shadow: none; - background: none; - - &:hover { - background-color: $white; - opacity: 0.6; - } - - &:focus { - // borrowing the base input focus styles to match overall app - @include linear-gradient($yellow-l4, tint($yellow-l4, 90%)); - opacity: 1.0; - box-shadow: 0 0 3px $black inset; - background-color: $white; - border: 1px solid transparent; - border-radius: 3px; - } - } + .page-number-input { + @include transition(all $tmg-f2 ease-in-out 0s); + + border: 1px solid transparent; + border-bottom: 1px dotted $lms-gray; + border-radius: 0; + box-shadow: none; + background: none; + + &:hover { + background-color: $white; + opacity: 0.6; + } + + &:focus { + // borrowing the base input focus styles to match overall app + @include linear-gradient($yellow-l4, tint($yellow-l4, 90%)); + + opacity: 1; + box-shadow: 0 0 3px $black inset; + background-color: $white; + border: 1px solid transparent; + border-radius: 3px; + } } + } } // styles for search/pagination metadata and sorting .listing-tools { - color: $lms-gray; + color: $lms-gray; - label { // override - color: inherit; - font-size: inherit; - cursor: auto; - } + label { // override + color: inherit; + font-size: inherit; + cursor: auto; + } - .listing-sort-select { - border: 0; - } + .listing-sort-select { + border: 0; + } } diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 9582ee74727..d99cd1b199e 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -4,6 +4,7 @@ %btn { @include box-sizing(border-box); @include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out); + display: inline-block; cursor: pointer; text-decoration: none; @@ -34,6 +35,7 @@ %btn-inherited { @include transition(background-color 0.15s, box-shadow 0.15s); + border-radius: 3px; box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0); padding: ($baseline/2) $baseline; @@ -49,7 +51,9 @@ %btn-inherited-primary { @extend %btn-inherited; + @include linear-gradient(top, rgba($white, .3), rgba($white, 0)); + border: 1px solid shade($action-primary-bg, 10%); background-color: $action-primary-bg; color: $action-primary-fg; @@ -73,6 +77,7 @@ @extend %t-weight3; @extend %btn; @extend %btn-edged; + border: none; padding: ($baseline*0.75) $baseline; text-align: center; @@ -83,7 +88,6 @@ } &.current, &.active { - &:hover, &:active, &:focus { } @@ -98,6 +102,7 @@ // blue primary gray %btn-primary-gray { @extend %btn-primary; + box-shadow: 0 2px 1px 0 $m-gray-d2; background: $m-gray; color: $white; @@ -126,6 +131,7 @@ // blue primary error color %btn-primary-error { @extend %btn-primary; + box-shadow: 0 2px 1px 0 shade($error-color, 25%); background: shade($error-color, 25%); color: $white; @@ -143,6 +149,7 @@ // blue primary button %btn-primary-blue { @extend %btn-primary; + background: $m-blue-d3; color: $white; @@ -168,6 +175,7 @@ // pink primary button %btn-primary-pink { @extend %btn-primary; + box-shadow: 0 2px 1px 0 $m-pink-d2; background: $m-pink; color: $white; @@ -196,6 +204,7 @@ // green primary button %btn-primary-green { @extend %btn-primary; + box-shadow: 0 2px 1px 0 $m-green-d2; background: $m-green-d1; color: $white; @@ -240,6 +249,7 @@ @extend %t-action2; @extend %btn; @extend %btn-edged; + box-shadow: none; border: 1px solid $m-blue-d3; padding: ($baseline/2) $baseline; @@ -271,6 +281,7 @@ // grey secondary button outline style %btn-secondary-grey-outline { @extend %btn-secondary-blue-outline; + border: 1px solid $gray-l4; &:hover, &:active, &:focus { @@ -287,9 +298,13 @@ // starts with overrides %btn-pl-default-base { @include box-sizing(border-box); + @extend %t-copy-base; + letter-spacing: 0; // reset letterspacing from elsewhere + @extend %btn-primary; + border: 1px solid darken($action-primary-bg,10%); border-radius: 3px; padding: 8px $baseline; @@ -308,18 +323,21 @@ %btn-pl-primary-base { @extend %btn-pl-default-base; + background-color: darken($action-primary-bg,10%); color: $action-primary-fg; } %btn-pl-white-base{ @extend %btn-pl-default-base; + background-color: $action-primary-fg; color: $action-primary-bg; } %btn-pl-green-base { @extend %btn-pl-default-base; + background-color: darken($green-d1,10%); color: $action-primary-fg; @@ -332,6 +350,7 @@ %btn-pl-yellow-base { @extend %btn-pl-default-base; + border: 1px solid transparent; background-color: $credit-color-base; color: $base-font-color; @@ -345,6 +364,7 @@ %btn-pl-black-border { @extend %btn-pl-default-base; + border: 1px solid $m-gray-d4; background-color: transparent; color: $base-font-color; @@ -358,6 +378,7 @@ %btn-pl-black-base { @extend %btn-pl-default-base; + border: 1px solid transparent; background-color: $m-gray-d4; color: $very-light-text; @@ -372,7 +393,9 @@ %btn-pl-secondary-base { @extend %btn-pl-default-base; + @include transition(border $tmg-f2 ease-in-out); + border: 1px solid transparent; color: $action-primary-bg; @@ -385,6 +408,7 @@ %btn-pl-elevated-alt { @extend %btn-pl-default-base; + box-shadow: 0 3px 0 0 $gray-l4; border: 1px solid $gray-l4; @@ -398,93 +422,96 @@ // ==================== - // application: canned actions - .btn { - font-family: $f-sans-serif; - } +// application: canned actions +.btn { + font-family: $f-sans-serif; +} - .btn-large { - @extend %t-action1; - @extend %t-weight3; - display: block; - padding:($baseline*0.75) ($baseline*1.5); - } +.btn-large { + @extend %t-action1; + @extend %t-weight3; - .btn-avg { - @extend %t-action2; - @extend %t-weight3; - } + display: block; + padding:($baseline*0.75) ($baseline*1.5); +} - .btn-blue { - @extend %btn-primary-blue; - margin-bottom: $baseline; +.btn-avg { + @extend %t-action2; + @extend %t-weight3; +} +.btn-blue { + @extend %btn-primary-blue; - &:last-child { - margin-bottom: none; - } + margin-bottom: $baseline; + + + &:last-child { + margin-bottom: none; } +} - .btn-pink { - @extend %btn-primary-pink; - margin-bottom: $baseline; +.btn-pink { + @extend %btn-primary-pink; + margin-bottom: $baseline; - &:last-child { - margin-bottom: none; - } + + &:last-child { + margin-bottom: none; } +} - .btn-secondary { - @extend %btn-pl-secondary-base; +.btn-secondary { + @extend %btn-pl-secondary-base; - background-image: none; + background-image: none; - &:focus, - &:hover { - background-image: none !important; - background-color: transparent !important; - color: $link-color; - } + &:focus, + &:hover { + background-image: none !important; + background-color: transparent !important; + color: $link-color; } +} .btn-link { - @extend %shame-link-text; - - // reset of inherited buttons - border-radius: 0; - border-color: $transparent; - padding: 1px; - background: $transparent; - background-image: none; - box-shadow: none; - text-shadow: none; - white-space: nowrap; + @extend %shame-link-text; + + // reset of inherited buttons + border-radius: 0; + border-color: $transparent; + padding: 1px; + background: $transparent; + background-image: none; + box-shadow: none; + text-shadow: none; + white-space: nowrap; - @extend %t-action3; - @extend %t-strong; + @extend %t-action3; + @extend %t-strong; - &:focus, - &:hover { - background-image: none !important; - background-color: $transparent !important; - box-shadow: none !important; - } + &:focus, + &:hover { + background-image: none !important; + background-color: $transparent !important; + box-shadow: none !important; + } } // enlarge the clickable area of a control. %expand-clickable-area { - position: relative; - - &, &:link, &:visited, &:hover, &:active, &:focus { - &:after { - content: " "; - position: absolute; - left: 0; - top: calc( 50% - #{($baseline * 1.1)}); - min-height: ($baseline * 2.2); - width: 100%; - cursor: pointer; - } + position: relative; + + &, &:link, &:visited, &:hover, &:active, &:focus { + &::after { + content: " "; + position: absolute; + left: 0; + top: calc(50% - #{($baseline * 1.1)}); + min-height: ($baseline * 2.2); + width: 100%; + cursor: pointer; } + } } diff --git a/lms/static/sass/elements/_course-card.scss b/lms/static/sass/elements/_course-card.scss index a76a056f3a0..052d9bb8815 100644 --- a/lms/static/sass/elements/_course-card.scss +++ b/lms/static/sass/elements/_course-card.scss @@ -7,10 +7,12 @@ right: auto; bottom: $baseline; } + padding: $baseline/2 0; .section { @extend .grid-manual; + padding: $baseline/2 $baseline; } @@ -19,7 +21,8 @@ .header-img { max-width: 100%; - @media(min-width: $bp-screen-sm) { + + @media (min-width: $bp-screen-sm) { max-width: 191px; } } @@ -27,8 +30,11 @@ .course-details { @include float(right); + width: 100%; - @media(min-width: $bp-screen-sm) { width: calc(100% - 191px); } + + @media (min-width: $bp-screen-sm) { width: calc(100% - 191px); } + padding-left: $baseline*1.5; .course-title { @@ -47,7 +53,6 @@ } .course-actions { - .enrollment-info { width: $baseline*10; text-align: center; @@ -78,6 +83,7 @@ .enrollment-opens { text-align: center; margin-bottom: $baseline/2; + .enrollment-open-date { white-space: nowrap; } @@ -135,7 +141,7 @@ .message { margin-bottom: $baseline; - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { margin-bottom: 0; } } @@ -145,7 +151,7 @@ border-top: 1px solid palette(grayscale, back); padding-top: $baseline; - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { display: flex; align-items: center; } diff --git a/lms/static/sass/elements/_creative-commons.scss b/lms/static/sass/elements/_creative-commons.scss index dc3a5a0b05e..0acb91cdda9 100644 --- a/lms/static/sass/elements/_creative-commons.scss +++ b/lms/static/sass/elements/_creative-commons.scss @@ -2,25 +2,25 @@ font-family: 'CreativeCommons'; src: url('#{$static-path}/fonts/CreativeCommons/cc.eot'); 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'); + 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'); font-weight: normal; font-style: normal; } -[class^="icon-cc"]:before, [class*=" icon-cc"]:before { +[class^="icon-cc"]::before, [class*=" icon-cc"]::before { font-family: "CreativeCommons"; } -.icon-cc:before { content: '\e800'; } /* '' */ -.icon-cc-by:before { content: '\e801'; } /* '' */ -.icon-cc-nc:before { content: '\e802'; } /* '' */ -.icon-cc-nc-eu:before { content: '\e803'; } /* '' */ -.icon-cc-nc-jp:before { content: '\e804'; } /* '' */ -.icon-cc-sa:before { content: '\e805'; } /* '' */ -.icon-cc-nd:before { content: '\e806'; } /* '' */ -.icon-cc-pd:before { content: '\e807'; } /* '' */ -.icon-cc-zero:before { content: '\e808'; } /* '' */ -.icon-cc-share:before { content: '\e809'; } /* '' */ -.icon-cc-remix:before { content: '\e80a'; } /* '' */ +.icon-cc::before { content: '\e800'; } /* '' */ +.icon-cc-by::before { content: '\e801'; } /* '' */ +.icon-cc-nc::before { content: '\e802'; } /* '' */ +.icon-cc-nc-eu::before { content: '\e803'; } /* '' */ +.icon-cc-nc-jp::before { content: '\e804'; } /* '' */ +.icon-cc-sa::before { content: '\e805'; } /* '' */ +.icon-cc-nd::before { content: '\e806'; } /* '' */ +.icon-cc-pd::before { content: '\e807'; } /* '' */ +.icon-cc-zero::before { content: '\e808'; } /* '' */ +.icon-cc-share::before { content: '\e809'; } /* '' */ +.icon-cc-remix::before { content: '\e80a'; } /* '' */ diff --git a/lms/static/sass/elements/_navigation.scss b/lms/static/sass/elements/_navigation.scss index 1a0c5754f69..2c72fbec15c 100644 --- a/lms/static/sass/elements/_navigation.scss +++ b/lms/static/sass/elements/_navigation.scss @@ -29,19 +29,23 @@ // -------------------- .nav-utilities { @extend %ui-depth3; + position: fixed; right: ($baseline/4); bottom: 0; .wrapper-utility { @extend %wipe-last-child; + display: inline-block; vertical-align: bottom; + @include margin-right(6px); } .utility-control { @include transition(background-color $tmg-f2 ease-in-out 0s, color $tmg-f2 ease-in-out 0s); + position: relative; bottom: -($baseline/5); display: inline-block; @@ -93,9 +97,12 @@ .action-toggle-message { @extend %t-title8; @extend %t-strong; + position: absolute; bottom: 0; + @include right($baseline*2.5); + display: inline-block; min-width: ($baseline*5); padding: ($baseline/2) ($baseline*0.75); @@ -133,6 +140,7 @@ .nav-item { @extend %button-reset; + display: inline-block; padding: ($baseline*.75); color: $gray-d2; @@ -154,18 +162,15 @@ // +tabs - styles for tabs and tabpanels (teams and learner profile, currently) // -------------------- .page-content-nav { - - .tab { + .tab { - } + } } .page-content-main { - - .tabs { - - .tabpanel { - outline: none; - } + .tabs { + .tabpanel { + outline: none; } + } } diff --git a/lms/static/sass/elements/_pagination.scss b/lms/static/sass/elements/_pagination.scss index fa907f93ea8..f41d0c7aeee 100644 --- a/lms/static/sass/elements/_pagination.scss +++ b/lms/static/sass/elements/_pagination.scss @@ -4,6 +4,7 @@ .pagination { @include clearfix(); + display: inline-block; width: flex-grid(3, 12); @@ -25,6 +26,7 @@ .nav-link { @include transition(all $tmg-f2 ease-in-out 0s); + display: block; border: 0; background-image: none; @@ -69,6 +71,7 @@ .total-pages { @extend %t-copy-base; @extend %t-strong; + width: ($baseline*2.5); vertical-align: middle; margin: 0 ($baseline*0.75); @@ -79,19 +82,23 @@ .current-page { @extend %ui-depth1; + position: absolute; + @include left(-($baseline/4)); } .page-divider { @extend %t-title4; @extend %t-regular; + vertical-align: middle; color: $gray-l2; } .pagination-form { @extend %ui-depth2; + position: relative; .page-number-label, @@ -101,6 +108,7 @@ .page-number-input { @include transition(all $tmg-f2 ease-in-out 0s); + border: 1px solid transparent; border-bottom: 1px dotted $gray-l2; border-radius: 0; @@ -115,7 +123,8 @@ &:focus { // borrowing the base input focus styles to match overall app @include linear-gradient($yellow-l4, tint($yellow-l4, 90%)); - opacity: 1.0; + + opacity: 1; box-shadow: 0 0 3px $shadow-d1 inset; background-color: $white; border: 1px solid transparent; @@ -128,6 +137,7 @@ // styles for search/pagination metadata and sorting .listing-tools { @extend %t-copy-sub1; + color: $gray-d1; label { // override @@ -139,6 +149,7 @@ .listing-sort-select { @extend %t-copy-sub1; @extend %t-regular; + border: 0; } } diff --git a/lms/static/sass/elements/_program-card.scss b/lms/static/sass/elements/_program-card.scss index 344d1440bda..edbd94d6a18 100644 --- a/lms/static/sass/elements/_program-card.scss +++ b/lms/static/sass/elements/_program-card.scss @@ -1,5 +1,6 @@ %hide-until-focus { @include left(0); + display: inline-block; position: absolute; top: -999999px; @@ -8,17 +9,19 @@ .program-card { @include span(12); + border: 1px solid $border-color-l3; border-bottom: none; margin-bottom: $baseline; position: relative; - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(6); &:nth-child(2n) { @include span(6, before); } + &:nth-child(2n+1) { @include span(6, after); } @@ -27,6 +30,7 @@ .card-link { @include left(0); @include right(0); + position: absolute; top: 0; bottom: 0; @@ -45,12 +49,15 @@ overflow: hidden; height: 166px; - @media(min-width: $bp-screen-sm) { height: 242px; } - @media(min-width: $bp-screen-md) { height: 116px; } - @media(min-width: $bp-screen-lg) { height: 145px; } + @media (min-width: $bp-screen-sm) { height: 242px; } + + @media (min-width: $bp-screen-md) { height: 116px; } + + @media (min-width: $bp-screen-lg) { height: 145px; } .banner-image { @include left(50%); + position: absolute; top: 0; z-index: 0; @@ -65,9 +72,11 @@ position: relative; margin-top: 156px; - @media(min-width: $bp-screen-sm) { margin-top: 232px; } - @media(min-width: $bp-screen-md) { margin-top: 106px; } - @media(min-width: $bp-screen-lg) { margin-top: 135px; } + @media (min-width: $bp-screen-sm) { margin-top: 232px; } + + @media (min-width: $bp-screen-md) { margin-top: 106px; } + + @media (min-width: $bp-screen-lg) { margin-top: 135px; } } .meta-info { @@ -80,6 +89,7 @@ .organization { @include span(6, none); + white-space: nowrap; overflow: hidden; } @@ -95,6 +105,7 @@ .category-icon { @include float(right); @include margin-right($baseline*0.25); + background-color: transparent; background-size: 100%; width: ($baseline*0.7); @@ -121,6 +132,7 @@ right: 5px; bottom: 8px; } + margin-top: -8px; font-size: 1em; font-family: $f-sans-serif; @@ -169,12 +181,15 @@ &.completed { background: $blue; } + &.enrolled { background: $green; } + &.not-enrolled { background: lightgray; } + &.not-enrolled:last-of-type { margin-right: 0; } diff --git a/lms/static/sass/elements/_progress-circle.scss b/lms/static/sass/elements/_progress-circle.scss index 2ca098a2280..ff4fa8327d1 100644 --- a/lms/static/sass/elements/_progress-circle.scss +++ b/lms/static/sass/elements/_progress-circle.scss @@ -6,61 +6,62 @@ $progress-incomplete-number-color: $gray !default; $progress-number-label-color: palette(grayscale, base) !default; .program-progress { - width: 300px; - margin: 0 auto 30px; + width: 300px; + margin: 0 auto 30px; - @media(min-width: $bp-screen-md) { - margin-left: 0; - } + @media (min-width: $bp-screen-md) { + margin-left: 0; + } } .progress-heading { - color: $progress-title-color; - text-align: center; - margin-bottom: 0; - font: { - size: 1.1em; - weight: 700; - } + color: $progress-title-color; + text-align: center; + margin-bottom: 0; + font: { + size: 1.1em; + weight: 700; + } } .progress-circle-wrapper { - position: relative; - margin-top: -20px; - width: 300px; - height: 300px; + position: relative; + margin-top: -20px; + width: 300px; + height: 300px; - .progress-label { - position: absolute; - width: 100%; - top: 92px; - text-align: center; - } + .progress-label { + position: absolute; + width: 100%; + top: 92px; + text-align: center; + } - .numbers { - font-size: 3em; - color: $progress-incomplete-number-color; + .numbers { + font-size: 3em; + color: $progress-incomplete-number-color; - .complete { - color: $progress-complete-number-color; - } + .complete { + color: $progress-complete-number-color; } + } - .label { - font: { - size: 1.1em; - weight: 600; - } - color: $progress-number-label-color; + .label { + font: { + size: 1.1em; + weight: 600; } + + color: $progress-number-label-color; + } } .progress-circle { - .complete { - stroke: $progress-complete-color; - } + .complete { + stroke: $progress-complete-color; + } - .incomplete { - stroke: $progress-incomplete-color; - } + .incomplete { + stroke: $progress-incomplete-color; + } } diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss index 8b3eea07a55..1a3ee672b24 100644 --- a/lms/static/sass/elements/_system-feedback.scss +++ b/lms/static/sass/elements/_system-feedback.scss @@ -12,6 +12,7 @@ // basic object .msg { @include clearfix(); + max-width: grid-width(12); min-width: 760px; width: flex-grid(12); @@ -25,10 +26,10 @@ } .msg-content { - .title { @extend %t-title5; @extend %t-weight4; + margin-bottom: ($baseline/4); color: inherit; text-transform: none; @@ -37,17 +38,18 @@ .copy { @extend %t-copy-sub1; + color: inherit; p { // nasty reset @extend %t-copy-sub1; + color: inherit; } } } .has-actions { - .msg-content { width: flex-grid(10,12); } @@ -66,7 +68,6 @@ } .is-dismissable { - .msg-content { width: flex-grid(11,12); } @@ -79,6 +80,7 @@ .button-dismiss { //ugly reset on button element @extend %t-icon4; + background: none; box-shadow: none; border: none; @@ -120,13 +122,16 @@ &.urgency-info { background: $msg-bg; + .msg { color: $white; } + .msg-icon { font-size: 2.5em; padding: 20px; } + .msg-content { max-width: 80%; } @@ -174,13 +179,16 @@ // messages .message { @extend %t-copy-sub1; + display: block; } .message-status { @include border-top-radius(2px); @include box-sizing(border-box); + @extend %t-strong; + display: none; margin: 0 0 $baseline 0; padding: ($baseline/2) $baseline; @@ -188,6 +196,7 @@ .feedback-symbol { @extend %t-icon5; + position: relative; top: 1px; display: inline-block; @@ -232,7 +241,6 @@ } .nav-actions { - .action-primary { color: $gray-d4; } @@ -244,10 +252,11 @@ // types - confirm &.confirm { - .nav-actions .action-primary { @include blue-button(); + @extend %t-action4; + border-color: $blue-d2; } @@ -262,10 +271,11 @@ // types - warning &.warning { - .nav-actions .action-primary { @include orange-button(); + @extend %t-action4; + border-color: $orange-d2; color: $gray-d4; } @@ -281,10 +291,11 @@ // types - error &.error { - .nav-actions .action-primary { @include red-button(); + @extend %t-action4; + border-color: $red-d2; } @@ -299,10 +310,11 @@ // types - announcement &.announcement { - .nav-actions .action-primary { @include blue-button(); + @extend %t-action4; + border-color: $blue-d2; } @@ -317,10 +329,11 @@ // types - confirmation &.confirmation { - .nav-actions .action-primary { @include green-button(); + @extend %t-action4; + border-color: $green-d2; } @@ -335,10 +348,11 @@ // types - step required &.step-required { - .nav-actions .action-primary { @include pink-button(); + @extend %t-action4; + border-color: $pink-d2; } @@ -355,7 +369,9 @@ // prompts .wrapper-prompt { @extend %ui-depth5; + @include transition(all $tmg-f3 ease-in-out 0s); + position: fixed; top: 0; background: $black-t1; @@ -363,7 +379,7 @@ height: 100%; text-align: center; - &:before { + &::before { content: ''; display: inline-block; height: 100%; @@ -378,6 +394,7 @@ vertical-align: middle; width: $baseline*17.5; border: 4px solid $black; + @include text-align(left); .copy { @@ -393,6 +410,7 @@ .nav-item { display: inline-block; + @include margin-right($baseline*0.75); &:last-child { @@ -413,7 +431,6 @@ // types of prompts - error .prompt.error { - .feedback-symbol { color: $red-l1; } @@ -425,7 +442,6 @@ // types of prompts - confirmation .prompt.confirmation { - .feedback-symbol { color: $green; } @@ -437,7 +453,6 @@ // types of prompts - error .prompt.warning { - .feedback-symbol { color: $orange; } @@ -453,7 +468,9 @@ // notifications .wrapper-notification { @extend %ui-depth5; + @include clearfix(); + box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue; position: fixed; bottom: 0; @@ -491,6 +508,7 @@ // shorter/status notifications &.wrapper-notification-status { @include border-top-radius(3px); + right: ($baseline); width: auto; border: 4px solid $black; @@ -500,6 +518,7 @@ .notification { @include box-sizing(border-box); @include clearfix(); + width: 100%; max-width: none; min-width: none; @@ -526,6 +545,7 @@ // help notifications &.wrapper-notification-help { @include border-top-radius(3px); + width: ($baseline*14); right: ($baseline); border: 4px solid $black; @@ -535,6 +555,7 @@ .notification { @include box-sizing(border-box); @include clearfix(); + width: 100%; max-width: none; min-width: none; @@ -558,6 +579,7 @@ .notification { @include box-sizing(border-box); @include clearfix(); + margin: 0 auto; width: flex-grid(12); max-width: $fg-max-width; @@ -574,7 +596,9 @@ .feedback-symbol { @include transition (color $tmg-f1 ease-in-out 0s); + @extend %t-icon3; + width: flex-grid(1, 12); height: ($baseline*1.25); margin-top: ($baseline/4); @@ -585,11 +609,13 @@ .copy { @extend %t-copy-sub1; + width: flex-grid(10, 12); color: $gray-l2; .title { @extend %t-title7; + margin-bottom: 0; color: $white; } @@ -597,25 +623,28 @@ // with actions &.has-actions { - .feedback-symbol { width: flex-grid(1, 12); } .copy { width: flex-grid(7, 12); + @include margin-right(flex-gutter()); } .nav-actions { width: flex-grid(4, 12); + @include float(left); + margin-top: ($baseline/4); text-align: right; .nav-item { display: inline-block; vertical-align: middle; + @include margin-right($baseline/2); &:last-child { @@ -626,18 +655,18 @@ .action-primary { @include blue-button(); + @extend %t-strong; + border-color: $blue-d2; } .action-secondary { - @extend %t-action4; } } &.confirmation { - .copy { margin-top: ($baseline/5); } @@ -650,8 +679,10 @@ .feedback-symbol { @include animation(rotateCW $tmg-s3 linear infinite); + width: 25px; margin: -4px 10px 0 0; + @include transform-origin(52% 60%); } @@ -674,7 +705,9 @@ // alerts .wrapper-alert { @extend %ui-depth2; + @include box-sizing(border-box); + box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue; position: relative; overflow: hidden; @@ -736,6 +769,7 @@ .alert:not(.pattern-library-shim) { @include box-sizing(border-box); @include clearfix(); + margin: 0 auto; width: flex-grid(12); max-width: $fg-max-width; @@ -752,7 +786,9 @@ .feedback-symbol { @include transition (color $tmg-f1 ease-in-out 0s); + @extend %t-icon3; + width: flex-grid(1, 12); margin: ($baseline/4) flex-gutter() 0 0; text-align: right; @@ -765,6 +801,7 @@ .title { @extend %t-title7; + margin-bottom: 0; color: $white; } @@ -772,46 +809,50 @@ // with actions &.has-actions { - .feedback-symbol { width: flex-grid(1, 12); } - .copy { - width: flex-grid(7, 12); - @include margin-right(flex-gutter()); - } + .copy { + width: flex-grid(7, 12); + + @include margin-right(flex-gutter()); + } + + .nav-actions { + width: flex-grid(4, 12); - .nav-actions { - width: flex-grid(4, 12); @include float(left); + margin-top: ($baseline/2); - text-align: right; + text-align: right; - .nav-item { - display: inline-block; - vertical-align: middle; - @include margin-right($baseline/2); + .nav-item { + display: inline-block; + vertical-align: middle; - &:last-child { - @include margin-right(0); - } + @include margin-right($baseline/2); - .action-primary { - @extend %t-action4; - @extend %t-strong; - } + &:last-child { + @include margin-right(0); + } - .action-secondary { - @extend %t-action4; + .action-primary { + @extend %t-action4; + @extend %t-strong; + } + + .action-secondary { + @extend %t-action4; + } } } } -} // with cancel .action-alert-close { @include border-bottom-radius(($baseline/5)); + position: absolute; top: -($baseline/10); right: $baseline; @@ -825,6 +866,7 @@ .icon { @extend %t-icon6; + color: $white; width: auto; margin: 0; @@ -838,7 +880,6 @@ // with dismiss (to sunset action-alert-clos) .action-dismiss { - .button { // I tried moving the btn-secondary-white into lms/static/sass/elements/_controls.scss // but sass compiler fails to find ui-btn-secondary, ui-btn-secondary is defined in @@ -846,6 +887,7 @@ // lms/static/sass/_build-lms.scss but issue is still there, so i made it optional. // Making this optional wouldn't cause any issue for confirmation dialog at-least. @extend %btn-secondary-white !optional; + padding:($baseline/4) ($baseline/2); } @@ -856,6 +898,7 @@ .icon { @extend %t-icon4; + margin-right: ($baseline/4); } @@ -882,7 +925,6 @@ // prompt showing &.prompt-is-shown { - .wrapper-prompt.is-shown { visibility: visible; pointer-events: auto; @@ -895,9 +937,7 @@ // prompt hiding &.prompt-is-hiding { - .wrapper-prompt { - .prompt { @include animation(bounceOut $tmg-f1 ease-in-out 1); } @@ -928,9 +968,9 @@ // block-level messages and validation .wrapper-message { - .message { @extend %t-copy-sub1; + background-color: $gray-d2; padding: ($baseline/2) ($baseline*0.75); color: $white; @@ -941,6 +981,7 @@ &.information { @extend %t-copy-sub1; + background-color: $gray-l5; color: $gray-d2; } @@ -992,16 +1033,19 @@ // temporary body.uxdesign.alerts { - .content-primary, .content-supplementary { @include box-sizing(border-box); + float: left; } .content-primary { @extend %ui-window; + width: flex-grid(12, 12); + @include margin-right(flex-gutter()); + padding: $baseline ($baseline*1.5); > section { @@ -1013,9 +1057,9 @@ body.uxdesign.alerts { } ul { - li { @include clearfix(); + width: flex-grid(12, 12); margin-bottom: ($baseline/4); border-bottom: 1px solid $gray-l4; @@ -1029,7 +1073,9 @@ body.uxdesign.alerts { a { @include float(left); + width: flex-grid(5, 12); + @include margin-right(flex-gutter()); } } @@ -1041,9 +1087,9 @@ body.uxdesign.alerts { // artifact styles .main-wrapper { - .alert { @extend %t-copy-sub1; + padding: 15px 20px; margin-bottom: ($baseline*1.5); border-radius: 3px; @@ -1055,6 +1101,7 @@ body.uxdesign.alerts { .alert-message { @include float(left); + margin: 4px 0 0 0; color: $gray-d3; } @@ -1093,6 +1140,7 @@ body.error { h1 { @extend %t-title1; @extend %t-light; + float: none; margin: 0; color: $gray-d3; @@ -1100,12 +1148,15 @@ body.error { .description { @extend %t-copy-lead2; + margin-bottom: 50px; } .back-button { @include blue-button(); + @extend %t-action1; + padding: 14px 40px 18px; } } diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 931d050f9be..b4c6e931b73 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -5,22 +5,27 @@ // weights %t-ultrastrong { - font-weight: 700; + font-weight: 700; } + %t-strong { - font-weight: 600; + font-weight: 600; } + %t-demi-strong { - font-weight: 500; + font-weight: 500; } + %t-regular { - font-weight: 400; + font-weight: 400; } + %t-light { - font-weight: 300; + font-weight: 300; } + %t-ultralight { - font-weight: 200; + font-weight: 200; } // headings/titles @@ -30,54 +35,63 @@ %t-title1 { @extend %t-title; + @include font-size(60); @include line-height(60); } %t-title2 { @extend %t-title; + @include font-size(48); @include line-height(48); } %t-title3 { @extend %t-title; + @include font-size(36); @include line-height(36); } %t-title4 { @extend %t-title; + @include font-size(24); @include line-height(24); } %t-title5 { @extend %t-title; + @include font-size(18); @include line-height(18); } %t-title6 { @extend %t-title; + @include font-size(16); @include line-height(16); } %t-title7 { @extend %t-title; + @include font-size(14); @include line-height(14); } %t-title8 { @extend %t-title; + @include font-size(12); @include line-height(12); } %t-title9 { @extend %t-title; + @include font-size(11); @include line-height(11); } @@ -91,30 +105,35 @@ %t-copy-base { @extend %t-copy; + @include font-size(16); @include line-height(16); } %t-copy-lead1 { @extend %t-copy; + @include font-size(18); @include line-height(18); } %t-copy-lead2 { @extend %t-copy; + @include font-size(24); @include line-height(24); } %t-copy-sub1 { @extend %t-copy; + @include font-size(14); @include line-height(14); } %t-copy-sub2 { @extend %t-copy; + @include font-size(12); @include line-height(12); } @@ -223,6 +242,7 @@ %hd-lv1 { @extend %t-title1; @extend %t-weight1; + color: $m-gray-d4; margin: 0 0 ($baseline*2) 0; } @@ -230,6 +250,7 @@ %hd-lv2 { @extend %t-title4; @extend %t-weight1; + margin: 0 0 ($baseline*0.75) 0; border-bottom: 1px solid $m-gray-l3; padding-bottom: ($baseline/2); @@ -239,6 +260,7 @@ %hd-lv3 { @extend %t-title6; @extend %t-weight4; + margin: 0 0 ($baseline/4) 0; color: $m-gray-d4; } @@ -246,6 +268,7 @@ %hd-lv4 { @extend %t-title6; @extend %t-weight2; + margin: 0 0 $baseline 0; color: $m-gray-d4; } @@ -253,6 +276,7 @@ %hd-lv5 { @extend %t-title7; @extend %t-weight4; + margin: 0 0 ($baseline/4) 0; color: $m-gray-d4; } @@ -260,22 +284,26 @@ // application: canned copy %copy-base { @extend %t-copy-base; + color: $m-gray-d2; } %copy-lead1 { @extend %t-copy-lead2; + color: $m-gray; } %copy-detail { @extend %t-copy-sub1; @extend %t-weight3; + color: $m-gray-d1; } %copy-metadata { @extend %t-copy-sub2; + color: $m-gray-d1; @@ -300,6 +328,7 @@ %copy-badge { @extend %t-title9; @extend %t-weight3; + border-radius: ($baseline/5); padding: ($baseline/2) $baseline; text-transform: uppercase; diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss index 9c73a150319..723b283e45d 100644 --- a/lms/static/sass/features/_course-experience.scss +++ b/lms/static/sass/features/_course-experience.scss @@ -230,7 +230,6 @@ .goal { @include float(left); @include padding-left($baseline*0.4); - } .response-icon { @@ -459,6 +458,7 @@ .fa.fa-spinner { @include left(50%); + font-size: 2rem; margin-top: $baseline*3; position: absolute; diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss index e4e579e4bd3..95659a93daa 100644 --- a/lms/static/sass/features/_learner-profile.scss +++ b/lms/static/sass/features/_learner-profile.scss @@ -314,6 +314,7 @@ @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap @include margin-left(0); + flex-wrap: wrap; } } diff --git a/lms/static/sass/lms-course-rtl.scss b/lms/static/sass/lms-course-rtl.scss index d7b20b2b3db..1e84e375779 100644 --- a/lms/static/sass/lms-course-rtl.scss +++ b/lms/static/sass/lms-course-rtl.scss @@ -1,10 +1,8 @@ @import 'bourbon/bourbon'; @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages - @import 'base/reset'; @import 'base/variables'; @import 'base/font_face'; @import 'base/mixins'; @import 'base/theme'; - @import 'build-course'; // shared app style assets/rendering diff --git a/lms/static/sass/lms-course.scss b/lms/static/sass/lms-course.scss index 4faa14b9f44..78f9d45f611 100644 --- a/lms/static/sass/lms-course.scss +++ b/lms/static/sass/lms-course.scss @@ -1,10 +1,8 @@ @import 'bourbon/bourbon'; @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages - @import 'base/reset'; @import 'base/variables'; @import 'base/font_face'; @import 'base/mixins'; @import 'base/theme'; - @import 'build-course'; // shared app style assets/rendering diff --git a/lms/static/sass/lms-footer-rtl.scss b/lms/static/sass/lms-footer-rtl.scss index ea5f2ab9ea2..8e248cddfb7 100644 --- a/lms/static/sass/lms-footer-rtl.scss +++ b/lms/static/sass/lms-footer-rtl.scss @@ -11,9 +11,9 @@ @import 'base/theme'; footer#footer-openedx { - @import 'base/reset'; - @import 'base/extends'; - @import 'base/base'; + @import 'base/reset'; + @import 'base/extends'; + @import 'base/base'; } // base - elements diff --git a/lms/static/sass/lms-footer.scss b/lms/static/sass/lms-footer.scss index 975c1a211a8..23578fdd957 100644 --- a/lms/static/sass/lms-footer.scss +++ b/lms/static/sass/lms-footer.scss @@ -11,9 +11,9 @@ @import 'base/theme'; footer#footer-openedx { - @import 'base/reset'; - @import 'base/extends'; - @import 'base/base'; + @import 'base/reset'; + @import 'base/extends'; + @import 'base/base'; } // base - elements diff --git a/lms/static/sass/lms-main-v2-rtl.scss b/lms/static/sass/lms-main-v2-rtl.scss index 195b752386a..0d3a279c881 100644 --- a/lms/static/sass/lms-main-v2-rtl.scss +++ b/lms/static/sass/lms-main-v2-rtl.scss @@ -8,6 +8,7 @@ // Load the RTL version of the edX Pattern Library $pattern-library-path: '../edx-pattern-library' !default; + @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; // Load the shared build diff --git a/lms/static/sass/lms-main-v2.scss b/lms/static/sass/lms-main-v2.scss index ca43dfc041a..965398b9d06 100644 --- a/lms/static/sass/lms-main-v2.scss +++ b/lms/static/sass/lms-main-v2.scss @@ -8,6 +8,7 @@ // Load the RTL version of the edX Pattern Library $pattern-library-path: '../edx-pattern-library' !default; + @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; // Load the shared build diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss index b457856b77b..649b25c2a11 100644 --- a/lms/static/sass/multicourse/_about_pages.scss +++ b/lms/static/sass/multicourse/_about_pages.scss @@ -8,6 +8,7 @@ &::after { @extend %faded-hr-divider; + content: ""; display: block; } @@ -19,9 +20,11 @@ font-style: italic; display: inline-block; letter-spacing: 1px; - margin: 0px 15px; + margin: 0 15px; padding: 20px 10px; + @include transition(all 0.15s linear 0s); + text-transform: lowercase; &:hover, &:active, &:focus { @@ -39,7 +42,9 @@ .our-mission { border-bottom: 1px solid rgb(220,220,220); + @include clearfix(); + margin: 0 auto 100px; padding-bottom: 40px; @@ -47,8 +52,11 @@ @include border-right(1px solid rgb(200,200,200)); @include box-sizing(border-box); @include float(left); + height: 115px; + @include margin-right(flex-gutter()); + text-align: center; width: flex-grid(3); @@ -62,10 +70,13 @@ h2.mission-quote { @include box-sizing(border-box); @include float(right); + font-style: italic; line-height: 1.4; margin: 0; - @include padding(5px, 0px, 5px, 20px); + + @include padding(5px, 0, 5px, 20px); + text-transform: none; width: flex-grid(9); } @@ -73,13 +84,15 @@ .message { border-bottom: 1px solid rgb(220,220,220); + @include clearfix(); + margin-bottom: ($baseline*4); padding-bottom: 80px; position: relative; hr { - bottom: 0px; + bottom: 0; display: none; margin: 0; position: absolute; @@ -93,6 +106,7 @@ .photo { @include box-sizing(border-box); + background: rgb(255,255,255); border: 1px solid rgb(210,210,210); margin-top: 37px; @@ -110,6 +124,7 @@ @include box-sizing(border-box); @include float(left); @include padding-left($baseline); + width: flex-grid(9); } @@ -128,7 +143,7 @@ } &:last-child { - margin-bottom: 0px; + margin-bottom: 0; } } @@ -137,6 +152,7 @@ > article { @include float(left); + width: flex-grid(6); &:first-child { @@ -152,17 +168,21 @@ nav.categories { border: 1px solid rgb(220,220,220); + @include box-sizing(border-box); @include float(left); @include margin-left(flex-gutter()); + padding: 20px; width: flex-grid(3); a { display: block; letter-spacing: 1px; - margin: 0px -20px; - @include padding(12px, 0px, 12px, 20px); + margin: 0 -20px; + + @include padding(12px, 0, 12px, 20px); + text-align: left; &:hover, &:focus { @@ -174,13 +194,14 @@ .responses { @include float(left); + width: flex-grid(9); .category { padding-top: 40px; &:first-child { - padding-top: 0px; + padding-top: 0; } > h2 { @@ -205,23 +226,29 @@ .press { .press-story { border-bottom: 1px solid rgb(220,220,220); + @include clearfix(); + margin-bottom: ($baseline*2); padding-bottom: 40px; &:last-child { border: none; margin: 0; - padding: 0px; + padding: 0; } .article-cover { background: rgb(255,255,255); border: 1px solid rgb(120,120,120); + @include box-sizing(border-box); @include float(left); + height: 140px; + @include margin-right(flex-gutter()); + overflow: hidden; width: flex-grid(2); @@ -234,6 +261,7 @@ .press-info { @include float(left); + width: flex-grid(10); header { @@ -247,6 +275,7 @@ span.post-date { color: $lighter-base-font-color; + @include margin-right($baseline/2); } } @@ -256,14 +285,18 @@ .contact { @include clearfix(); + margin: 0 auto; .photo { @include box-sizing(border-box); + background: rgb(255,255,255); border: 1px solid rgb(210,210,210); padding: 1px; + @include float(left); + width: flex-grid(3); img { @@ -275,12 +308,13 @@ @include box-sizing(border-box); @include float(left); @include padding-left(40px); + width: flex-grid(9); ul { list-style: none; margin: 0; - padding: 0px; + padding: 0; li { margin-bottom: ($baseline/2); diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 3b27f1dd04f..02492a939db 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -63,7 +63,9 @@ // specific examples - buttons %button-primary { border-radius: 0; + @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%); + display: inline-block; padding: $baseline/2 $baseline*2.5; text-transform: lowercase; @@ -81,6 +83,7 @@ %button-secondary { @include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%); + display: inline-block; padding: $baseline/2 $baseline*2.5; text-transform: lowercase; @@ -104,6 +107,7 @@ .container, .introduction { @include box-sizing(border-box); @include clearfix(); + margin: 0 auto; width: 960px; background: $container-bg; @@ -122,7 +126,9 @@ // CASE: normal typographical headings h1 { @extend %heading-2; + @include text-align(left); + margin-bottom: $baseline; padding-bottom: $baseline; } @@ -131,10 +137,12 @@ .title { position: absolute; top: ($baseline*2.5); + @include left($baseline*1.5); .title-super, .title-sub { @extend %t-weight1; + display: block; letter-spacing: 0; } @@ -142,6 +150,7 @@ .title-super { @include font-size(26); @include line-height(18); + text-transform: uppercase; color: $header-graphic-super-color; } @@ -149,6 +158,7 @@ .title-sub { @include font-size(20); @include margin-left($baseline*2); + text-transform: lowercase; color: $header-graphic-sub-color; } @@ -192,17 +202,20 @@ // basic layout .content, aside { @include box-sizing(border-box); + margin: $baseline 0 0 0; } .content { @include float(left); @include margin-right($baseline*2); + width: 600px; } aside { @include float(left); + width: 280px; p, ol, ul { @@ -216,7 +229,6 @@ // aside aside { - .btn { margin: 0 0 ($baseline*2) 0; @@ -226,12 +238,12 @@ h3 { @extend %heading-4; + margin: 0 0 ($baseline/4) 0; } } .btn-login { - h3.title, .instructions { display: inline-block; @@ -240,7 +252,9 @@ .btn-login-action { @extend %btn-secondary-grey-outline; + padding: ($baseline/10) ($baseline*0.75); + @include margin-left($baseline/4); } } @@ -248,9 +262,9 @@ // forms form { - .instructions { @extend %body-text-emphasized; + margin-bottom: $baseline; } @@ -269,11 +283,13 @@ // field groups .field-group { @include clearfix(); + margin: 0 0 $baseline 0; .field { @include float(left); @include margin(0, ($baseline*1.5), 0, 0); + display: block; border-bottom: none; padding-bottom: 0; @@ -290,7 +306,6 @@ } .group-form-personalinformation { - .field-education-level, .field-gender, .field-yob { @@ -317,12 +332,14 @@ label { @include transition(color 0.15s ease-in-out 0s); + margin: 0 0 ($baseline/4) 0; color: tint($black, 20%); } .tip { @include transition(color 0.15s ease-in-out 0s); + display: block; margin-top: ($baseline/4); color: $lighter-base-font-color; @@ -335,6 +352,7 @@ .tip { position: absolute; top: 0; + @include right(0); } } @@ -365,7 +383,6 @@ // types - select &.select { - select { width: 100%; } @@ -373,10 +390,10 @@ // types - checkboxes/radio buttons &.checkbox { - input[type="checkbox"] { display: inline-block; width: auto; + @include margin-right($baseline/4); } @@ -392,7 +409,7 @@ label { cursor: text; - &:after { + &::after { @include margin-left($baseline/4); } } @@ -405,7 +422,6 @@ // states - focused &.is-focused { - label { color: saturate($link-color-d1,15%); } @@ -417,14 +433,13 @@ // states - disabled &.disabled { - label:after { + label::after { color: rgba(0,0,0,.35); content: "(Disabled Currently)"; } } &.error { - label { color: $red; } @@ -435,7 +450,6 @@ } &.required { - label { font-weight: 600; @@ -444,8 +458,9 @@ } } - label:after { + label::after { @include margin-left($baseline/4); + content: "*"; } } @@ -472,10 +487,13 @@ .action-secondary { display: block; + @include float(right); + width: flex-grid(3,8); margin: $baseline $baseline 0 0; font-size: em(14); + @include text-align(right); } @@ -496,9 +514,12 @@ .copy { @extend %t-copy-lead1; @extend %t-weight4; + position: absolute; top: -($baseline); + @include left(43%); + padding: ($baseline/4) ($baseline*1.5); background: white; text-align: center; @@ -509,6 +530,7 @@ // downplay required note .instructions .note { @extend %t-copy-sub2; + display: block; font-weight: normal; color: $gray; @@ -520,12 +542,16 @@ button[type="submit"] { @extend %btn-secondary-blue-outline; + width: flex-grid(4,8); + @include margin-right($baseline/2); .icon { @extend %sso-icon; + @include margin-right($baseline/2); + color: inherit; } @@ -535,29 +561,29 @@ &.button-oa2-google-oauth2:hover, &.button-oa2-google-oauth2:focus { background-color: $google-red; - border: 1px solid #A5382B; + border: 1px solid #a5382b; } &.button-oa2-google-oauth2:hover { - box-shadow: 0 2px 1px 0 #8D3024; + box-shadow: 0 2px 1px 0 #8d3024; } &.button-oa2-facebook:hover, &.button-oa2-facebook:focus { background-color: $facebook-blue; - border: 1px solid #263A62; + border: 1px solid #263a62; } &.button-oa2-facebook:hover { - box-shadow: 0 2px 1px 0 #30487C; + box-shadow: 0 2px 1px 0 #30487c; } &.button-oa2-linkedin-oauth2:hover , &.button-oa2-linkedin-oauth2:focus { background-color: $linkedin-blue; - border: 1px solid #06527D; + border: 1px solid #06527d; } &.button-oa2-linkedin-oauth2:hover { - box-shadow: 0 2px 1px 0 #005D8E; + box-shadow: 0 2px 1px 0 #005d8e; } } @@ -566,6 +592,7 @@ // forms - messages/status .status { @include box-sizing(border-box); + margin: 0 0 $baseline 0; border-bottom: 3px solid shade($yellow, 10%); padding: $baseline $baseline; @@ -573,6 +600,7 @@ .message-title { @extend %heading-4; + margin: 0 0 ($baseline/4) 0; font-size: em(14); font-weight: 600; @@ -580,6 +608,7 @@ .message-copy { @extend %body-text; + margin: 0 !important; padding: 0; list-style: none; @@ -607,7 +636,6 @@ } #register-form, #login-form, #passwordreset-form { - .status.message { display: none; @@ -630,7 +658,6 @@ // login .view-login { - .header-global .nav-courseware .btn-login { display: none; } @@ -645,7 +672,6 @@ // register .view-register { - .introduction { header { height: 120px; @@ -656,7 +682,6 @@ // password reset .view-passwordreset { - .header-global .nav-courseware .btn-login { display: none; } @@ -692,12 +717,13 @@ margin: 0; padding: 0; - &:before { + &::before { background-image: none; } h2 { @extend %heading-2; + @include text-align(left); } } @@ -723,9 +749,7 @@ padding: 0; .field { - &.text, &.email, &.textarea { - input { background: #fafafa; margin-bottom: 0; @@ -747,8 +771,11 @@ .modal-form-error { @extend %body-text; + box-shadow: inset 0 -1px 2px 0 tint($red, 85%); + @include box-sizing(border-box); + margin: $baseline 0 ($baseline/2) 0 !important; padding: $baseline; border: none; diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index c25cc8ea1e0..b3fa9ddf81f 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -21,8 +21,10 @@ background: $course-header-bg; border: 1px solid $border-color-3; box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); + @include box-sizing(border-box); @include clearfix(); + margin: 0 auto; max-width: 1200px; min-width: 760px; @@ -33,9 +35,11 @@ display: table; width: 100%; } + .intro { @include box-sizing(border-box); @include clearfix(); + display: table-cell; vertical-align: middle; padding: $baseline; @@ -55,24 +59,27 @@ font-weight: normal; display: inline-block; margin: 0; - letter-spacing: 0px; + letter-spacing: 0; + @include text-align(left); + text-shadow: 0 1px rgba(255,255,255, 0.6); .button-org { - @include margin-left($baseline*0.75); - background: transparent !important; - border: none !important; - box-shadow: none !important; - text-shadow: none !important; - text-transform: normal !important; - font-size: $body-font-size; - color: $base-font-color !important; - letter-spacing: 0px !important; - - &:hover, &:focus { - color: $link-color; - } + @include margin-left($baseline*0.75); + + background: transparent !important; + border: none !important; + box-shadow: none !important; + text-shadow: none !important; + text-transform: normal !important; + font-size: $body-font-size; + color: $base-font-color !important; + letter-spacing: 0 !important; + + &:hover, &:focus { + color: $link-color; + } } } @@ -83,7 +90,7 @@ a { color: $base-font-color; font: italic 700 1em/1em $sans-serif; - letter-spacing: 0px; + letter-spacing: 0; text-shadow: 0 1px rgba(255,255,255, 0.6); text-transform: none; @@ -99,11 +106,13 @@ @include float(left); @include margin-right(flex-gutter()); @include transition(all 0.15s linear 0s); + width: flex-grid(12); > a.find-courses, a.register, a.add-to-cart { @include button(shiny, $button-color); @include box-sizing(border-box); + border-radius: 3px; display: block; font: normal 1.2rem/1.6rem $sans-serif; @@ -116,6 +125,7 @@ &:hover, &:focus { color: rgb(255,255,255); } + span { display: inline-block; } @@ -130,9 +140,12 @@ strong { @include button(shiny, $button-color); @include box-sizing(border-box); + border-radius: 3px; display: block; + @include float(left); + font: normal 1.2rem/1.6rem $sans-serif; letter-spacing: 1px; padding: ($baseline/2) 0; @@ -148,16 +161,20 @@ span.register, span.add-to-cart { background: $button-archive-color; border: 1px solid darken($button-archive-color, 50%); + @include box-sizing(border-box); + color: darken($button-archive-color, 50%); display: block; letter-spacing: 1px; - padding: 10px 0px 8px; + padding: 10px 0 8px; text-transform: uppercase; text-align: center; + @include float(left); @include margin(1px, flex-gutter(8), 0, 0); @include transition(none); + width: flex-grid(5, 8); } @@ -174,7 +191,9 @@ .media { background: transparent; + @include box-sizing(border-box); + display: table-cell; padding: 20px; position: relative; @@ -189,13 +208,18 @@ .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); + border-radius: 4px; box-shadow: 0 1px 12px 0 $shadow-d1; border: 2px solid rgba(255,255,255, 0.8); height: 80px; + @include left(50%); + margin-top: -40px; + @include margin-left(-40px); + position: absolute; top: 50%; width: 80px; @@ -205,8 +229,10 @@ content: "\25B6"; display: block; font: normal 2em/1em $sans-serif; + @include left(50%); @include margin-left(-11px); + margin-top: -16px; position: absolute; text-shadow: 0 -1px rgba(0,0,0, 0.8); @@ -225,6 +251,7 @@ .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); + box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5); border-color: rgba(255,255,255, 0.9); @@ -248,11 +275,15 @@ .instructor-info-action { @extend %t-copy-sub2; + @include float(right); + padding: ($baseline/4) ($baseline/2); border-radius: ($baseline/4); background-color: $light-gray1; + @include text-align(right); + text-transform: uppercase; color: $staff-color; @@ -267,6 +298,7 @@ .details { @include float(left); @include margin-right(flex-gutter()); + width: flex-grid(8); font: normal 1em/1.6em $serif; @@ -289,9 +321,9 @@ } .course-staff { - .teacher { @include clearfix(); + margin-bottom: ($baseline*2); h3 { @@ -306,8 +338,10 @@ background: rgb(255,255,255); border: 1px solid $border-color-2; height: 115px; + @include float(left); - margin: 0 15px 0px 0; + + margin: 0 15px 0 0; overflow: hidden; padding: 1px; width: 115px; @@ -326,8 +360,9 @@ li { font: normal 1em/1.6em $serif; } + ul { - margin: 5px 0px 10px; + margin: 5px 0 10px; } } } @@ -355,6 +390,7 @@ .course-sidebar { @include box-sizing(border-box); @include float(left); + width: flex-grid(4); > section { @@ -380,12 +416,15 @@ ul { @include padding-left(0); + margin-bottom: 0; } li { list-style: none; + @include padding-left(29px); + background: url('#{$static-path}/images/link-icon.png') left center no-repeat; } } @@ -399,23 +438,26 @@ &::after { @extend %faded-hr-divider; + content: ""; display: block; height: 1px; position: absolute; - bottom: 0px; + bottom: 0; width: 100%; z-index: 1; } a.university-name { @include border-right(1px solid $border-color-2); + color: $base-font-color; font-family: $sans-serif; font-style: italic; font-weight: 700; display: inline-block; - letter-spacing: 0px; + letter-spacing: 0; + @include margin-right($baseline*0.75); @include padding-right(15px); @@ -427,40 +469,49 @@ .social-sharing { @include box-sizing(border-box); @include float(left); + height: 44px; position: relative; text-align: center; width: flex-grid(12); z-index: 2; - float: none; &:hover, &:focus { .sharing-message { - opacity: 1.0; + opacity: 1; top: 56px; } } .sharing-message { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, - rgba(0,0,0, 0.7) 100%)); + rgba(0,0,0, 0.7) 100%)); + border: 1px solid rgba(0,0,0, 0.5); border-radius: 4px; box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); + @include box-sizing(border-box); + color: rgb(255,255,255); + @include float(right); + font-family: $serif; font-size: 0.9em; font-style: italic; + @include left(50%); @include margin-left(-110px); + opacity: 0; padding: 6px 10px; position: absolute; text-align: center; + @include transition(all 0.15s ease-out 0s); + top: 65px; width: 220px; @@ -473,16 +524,19 @@ display: inline-block; height: 35px; width: 35px; + @include margin-right($baseline); + margin-top: ($baseline/4); font-size: 1.75em; text-decoration: none; color: $black; opacity: 0.5; + @include transition(all 0.15s linear 0s); &:hover, &:focus { - opacity: 1.0; + opacity: 1; } &:last-child { @@ -506,31 +560,38 @@ li { @include clearfix(); + border-bottom: 1px dotted $border-color-2; margin-bottom: $baseline; padding-bottom: ($baseline/2); &:hover, &:focus { .icon { - opacity: 1.0; + opacity: 1; } } .important-dates-item-title { color: $lighter-base-font-color; + @include float(left); + font-family: $sans-serif; } .icon { - @include float(left); - padding: 1px; - @include margin(($baseline/5), ($baseline/2), 0, 0); - opacity: .6; + @include float(left); + + padding: 1px; + + @include margin(($baseline/5), ($baseline/2), 0, 0); + + opacity: .6; } .important-dates-item-text { @include float(right); + font-weight: 700; } } @@ -538,10 +599,13 @@ .prerequisite-course { .pre-requisite { max-width: 39%; + @extend %text-truncated; } + .tip { @include float(left); + margin: $baseline 0 ($baseline/2); font-size: 0.8em; color: $lighter-base-font-color; diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index e3977044238..5622fd2972f 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -24,10 +24,11 @@ $facet-background-color: #007db8; // +Layout - Courses Container // ==================== .find-courses, .university-profile { - .discovery-button:not(:disabled) { @extend %t-action2; + @include text-align(left); + outline: 0 none; box-shadow:none; border: 0; @@ -51,6 +52,7 @@ $facet-background-color: #007db8; .courses-listing .courses-listing-item { @include fill-parent(); + margin: ($baseline*0.75) 0 ($baseline*1.5) 0; max-height: $course-card-height; } @@ -130,7 +132,6 @@ $facet-background-color: #007db8; // +Hero - Home Header // ==================== .find-courses, .university-profile { - header.search { background: $gray-l5; background-size: cover; @@ -172,6 +173,7 @@ $facet-background-color: #007db8; @include border-right(1px solid $light-gray); @include margin-right(30px); @include padding-right(30px); + display: inline-block; height: 80px; position: relative; @@ -179,11 +181,12 @@ $facet-background-color: #007db8; &::after { @include right(0px); + content: ""; display: block; height: 80px; position: absolute; - top: 0px; + top: 0; } img { @@ -196,7 +199,7 @@ $facet-background-color: #007db8; font-family: $sans-serif; font-style: italic; font-weight: 700; - letter-spacing: 0px; + letter-spacing: 0; text-transform: none; } @@ -215,14 +218,16 @@ $facet-background-color: #007db8; // +Search Input // ==================== .find-courses { - .wrapper-search-context { @include outer-container; + @include rtl() { $layout-direction: "RTL"; } .search-status-label { @extend %t-title3; + @include span-columns(9); + min-height: $course-search-input-height; @include media($bp-tiny) { @@ -247,7 +252,9 @@ $facet-background-color: #007db8; .wrapper-search-input { @include span-columns(3); + @extend %ui-depth0; + position: relative; @include media($bp-tiny) { @@ -272,8 +279,10 @@ $facet-background-color: #007db8; @extend %ui-depth1; @extend %t-copy-sub1; @extend %t-demi-strong; + @include border-radius(3px); @include padding-right(55px); + border: 2px solid $gray-l3; width: 100%; height: $course-search-input-height; @@ -283,6 +292,7 @@ $facet-background-color: #007db8; //STATE: focus &:focus { @extend %no-outline; + box-shadow: none; border-color: $m-blue-d6; } @@ -292,8 +302,10 @@ $facet-background-color: #007db8; @extend %ui-depth2; @extend %t-icon3; @extend %t-strong; + @include margin-left(-2px); @include right(0); + position: absolute; top: 0; border: 2px solid $m-blue-d6; @@ -313,6 +325,7 @@ $facet-background-color: #007db8; .loading-spinner { @include transition(all $tmg-f1 ease-out 0s); + background: $blue; position: absolute; top: ($baseline*0.7); // same as padding rule for .discovery-submit @@ -322,9 +335,9 @@ $facet-background-color: #007db8; // +Filters and Facets - Search // ==================== .find-courses { - .filters { @include clearfix(); + margin-top: ($baseline/2); width: 100%; height: auto; @@ -341,12 +354,14 @@ $facet-background-color: #007db8; .filters-inner { @include clearfix(); + border-top: 2px solid $courseware-button-border-color; border-bottom: 2px solid $courseware-button-border-color; } ul { @include padding-left(0); + margin: 0; list-style: outside none none; } @@ -354,6 +369,7 @@ $facet-background-color: #007db8; li { @include float(left); @include margin(($baseline/2), $baseline, ($baseline/2), 0); + position: relative; padding: ($baseline/2) ($baseline*0.75); width: auto; @@ -361,6 +377,7 @@ $facet-background-color: #007db8; .facet-option { @extend %t-strong; + color: $gray-d2; text-decoration: none; @@ -372,8 +389,10 @@ $facet-background-color: #007db8; .clear-filters { @include line-height(29.73); + @extend %t-icon5; @extend %t-strong; + margin: ($baseline/2); width: auto; color: $blue-d1; // WCAG 2.0 AA requirements @@ -395,7 +414,9 @@ $facet-background-color: #007db8; @include fill-parent(); @include omega(); @include box-sizing(border-box); + @extend %ui-depth1; + position: relative; margin: ($baseline*2) 0 ($baseline*3.5) 0; box-shadow: 1px 2px 5px $black-t0; @@ -430,8 +451,9 @@ $facet-background-color: #007db8; overflow: visible; } - &:before { + &::before { @include right(0); + position: absolute; top: (-$baseline*0.15); opacity: 0; @@ -445,6 +467,7 @@ $facet-background-color: #007db8; .header-search-facets, .header-facet { @extend %t-title6; @extend %t-strong; + margin: 0; padding: ($baseline/2); color: $facet-text-color; @@ -457,7 +480,9 @@ $facet-background-color: #007db8; .facet-list { @extend %ui-no-list; + @include clearfix(); + padding-bottom: ($baseline/2); &.collapse { @@ -467,6 +492,7 @@ $facet-background-color: #007db8; li { @include clearfix(); + position: relative; padding: 0; height: ($baseline*1.5); @@ -478,10 +504,12 @@ $facet-background-color: #007db8; @include float(left); @include transition(all $tmg-f2 ease-out 0s); @include clearfix(); + @extend %t-action3; @extend %text-truncated; + opacity: 1; - border-radius: 0px; + border-radius: 0; padding: ($baseline/4) ($baseline/2); width: 100%; color: $facet-text-color; @@ -491,6 +519,7 @@ $facet-background-color: #007db8; @include text-align(right); @include box-sizing(border-box); @include transition(all 0.2s ease-out); + position: absolute; width: ($baseline*2); } @@ -521,8 +550,9 @@ $facet-background-color: #007db8; } } - .count:before { + .count::before { @include left($baseline*0.75); + position: absolute; width: ($baseline*2); color: $gray-l1; @@ -539,6 +569,7 @@ $facet-background-color: #007db8; button { @extend %t-icon6; @extend %t-strong; + padding: ($baseline/4) ($baseline/2); color: $facet-background-color; text-transform: uppercase; @@ -557,6 +588,7 @@ $facet-background-color: #007db8; section.message { @include columns(2 20px); @include clearfix(); + border-top: 1px solid $border-color-2; margin-top: $baseline; padding-top: ($baseline*3); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 13926464f01..55a38c53d12 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -13,46 +13,58 @@ // ==================== .dashboard { @include clearfix(); + padding: ($baseline*2) 0 $baseline 0; .wrapper-find-courses { @include float(right); @include margin-left(flex-gutter()); + width: flex-grid(3); .course-advertise { @include clearfix(); + box-sizing: border-box; padding: $baseline; border: 1px solid $border-color-l3; + .advertise-message { @include font-size(12); + color: $gray-d4; margin-bottom: $baseline; } + .ad-link { @include text-align(center); + .btn-neutral { padding-bottom: 12px; padding-top: 12px; } + a { @include font-size(16); @include line-height(17); + padding: $baseline * 0.5; border: 1px solid $blue; color: $blue; text-decoration: none; display: block; + &:hover, &:focus, &:active { color: $white; background-color: $blue; } + span { @include margin-left($baseline*0.25); } + .icon { @include margin-right($baseline*0.25); } @@ -63,8 +75,10 @@ .profile-sidebar { background: transparent; + @include float(right); @include margin-left(flex-gutter()); + width: flex-grid(3); margin-top: ($baseline*2); @@ -74,12 +88,14 @@ > ul { @include box-sizing(border-box); @include clearfix(); + margin: 0; padding: 0; width: flex-grid(12); li { @include clearfix(); + border-bottom: 1px dotted $border-color-2; list-style: none; margin-bottom: ($baseline*0.75); @@ -87,7 +103,7 @@ &:hover, &:focus { .title .icon { - opacity: 1.0; + opacity: 1; } } @@ -138,6 +154,7 @@ .copy { @extend %t-copy-sub2; + display: inline; } } @@ -149,6 +166,7 @@ .status-item { @extend %t-copy-sub2; + margin-bottom: 7px; border-bottom: 0; padding: 0; @@ -181,6 +199,7 @@ .course-name { @include line-height(12); + display: inline-block; vertical-align: top; width: 80%; @@ -191,8 +210,8 @@ // status .status { - @include clearfix(); + box-sizing: border-box; padding: $baseline; border: 1px solid $border-color-l3; @@ -204,7 +223,9 @@ .nav__item { @extend %t-weight4; + @include font-size(13); + margin-left: 26px; } } @@ -213,45 +234,48 @@ } // CASE: empty dashboard - .empty-dashboard-message { - border: 3px solid $gray-l4; - background: $gray-l6; - padding: ($baseline*2) 0; - text-align: center; - - p { - @include font-size(24); - color: $lighter-base-font-color; - margin-bottom: $baseline; - text-shadow: 0 1px rgba(255,255,255, 0.6); - } +.empty-dashboard-message { + border: 3px solid $gray-l4; + background: $gray-l6; + padding: ($baseline*2) 0; + text-align: center; - a { - background-color: $blue; - border: 1px solid $blue; - box-shadow: 0 1px 8px 0 $shadow-l1; - @include box-sizing(border-box); - color: $white; - font-family: $sans-serif; - display: inline-block; - letter-spacing: 1px; - margin-top: ($baseline/4); - margin-left: ($baseline/4); - padding: 15px 20px; - - &:hover, &:focus { - background: $blue-l2; - text-decoration: none; - } - } + p { + @include font-size(24); + + color: $lighter-base-font-color; + margin-bottom: $baseline; + text-shadow: 0 1px rgba(255,255,255, 0.6); + } + + a { + background-color: $blue; + border: 1px solid $blue; + box-shadow: 0 1px 8px 0 $shadow-l1; + + @include box-sizing(border-box); + + color: $white; + font-family: $sans-serif; + display: inline-block; + letter-spacing: 1px; + margin-top: ($baseline/4); + margin-left: ($baseline/4); + padding: 15px 20px; + + &:hover, &:focus { + background: $blue-l2; + text-decoration: none; } + } +} // +Dashboard - Course Listing // ==================== .dashboard { - .my-courses { @include float(left); + margin: 0; margin-bottom: $baseline * 2; width: flex-grid(9); @@ -263,6 +287,7 @@ .header-courses { @extend %t-title5; + @include padding-right($baseline/2); } } @@ -293,7 +318,6 @@ // +Dashboard - Course // ==================== .dashboard .my-courses { - &:focus { outline: none; } @@ -303,7 +327,9 @@ @include box-sizing(box); @include transition(all 0.15s linear 0s); @include clearfix(); + @extend %ui-depth2; + margin: ($baseline/2); .details { @@ -312,12 +338,14 @@ .wrapper-course-image { @include float(left); @include margin-right(flex-gutter()); + width: flex-grid(3); .cover { @include box-sizing(border-box); @include transition(all 0.15s linear 0s); @include float(left); + overflow: hidden; position: relative; max-height: 120px; @@ -333,6 +361,7 @@ // "enrolled as" status .sts-enrollment { @include float(left); + width: 100%; position: relative; bottom: 15px; @@ -346,6 +375,7 @@ .deco-graphic { position: absolute; top: -5px; + @include right(0); } @@ -353,6 +383,7 @@ @extend %ui-depth1; @extend %copy-badge; @extend %t-demi-strong; + font-size: 0.6em; line-height: 1.5em; border-radius: 0; @@ -364,16 +395,18 @@ .wrapper-course-details { display: block; + @include float(left); + width: flex-grid(9); padding: 0; } .course-title { - a, span { @extend %t-title3; @extend %t-light; + display: inline-block; margin-bottom: ($baseline/2); @@ -385,19 +418,24 @@ .course-info { display: block; + @include float(left); + width: flex-grid(4); padding: 0; margin-top: ($baseline/2); [class*="info-"] { color: $gray-d1; + @extend %t-title6; + display: inline-block; } .info-date-block { @extend %t-title7; + color: $gray; // WCAG 2.0 AA compliant display: block; } @@ -405,7 +443,9 @@ .wrapper-course-actions { display: block; + @include float(right); + width: flex-grid(8); padding: 0; margin-top: ($baseline/2); @@ -418,6 +458,7 @@ @include box-sizing(border-box); @include margin-right($baseline/2); @include float(right); + min-width: ($baseline*2); color: $gray-d3; border-radius: 3px; @@ -450,10 +491,12 @@ .wrapper-action-more { display: inline-block; position: relative; + @include float(right); .action-more { @include font-size(14); + box-shadow: none; background: $white; background-image: none; @@ -465,10 +508,13 @@ .actions-dropdown { @extend %ui-no-list; @extend %ui-depth1; + display: none; position: absolute; top: ($baseline*2); + @include right(19px); + pointer-events: none; min-width: ($baseline*7); @@ -479,7 +525,9 @@ .actions-dropdown-list { @extend %ui-no-list; + @include box-sizing(border-box); + display: table; box-shadow: 0 1px 1px $shadow-l1; position: relative; @@ -491,10 +539,12 @@ background: $white; // ui triangle/nub - &:after, - &:before { + &::after, + &::before { bottom: 100%; + @include right(6px); + border: solid transparent; content: " "; height: 0; @@ -503,14 +553,15 @@ pointer-events: none; } - &:after { + &::after { border-color: $transparent; border-bottom-color: $white; border-width: 6px; + @include margin-right(1px); } - &:before { + &::before { border-color: $transparent; border-bottom-color: $gray-l3; border-width: 7px; @@ -519,6 +570,7 @@ .actions-item { @extend %t-title7; + display: block; margin: 0; @@ -531,7 +583,7 @@ &:hover, &:focus { border: 1px solid transparent; - } + } } } } @@ -543,9 +595,12 @@ border: 1px solid $border-color-2; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); margin-top: 17px; + @include margin-right(flex-gutter()); + padding: ($baseline/4); width: flex-grid(8); + @include float(left); @include box-sizing(border-box); @@ -572,6 +627,7 @@ .enter-course { @extend %btn-pl-white-base; + @include float(right); &.archived { @@ -593,6 +649,7 @@ .message { @extend %ui-depth1; + border-radius: 3px; display: none; margin: $baseline 0 ($baseline/2) 0; @@ -603,6 +660,7 @@ // STATE: shown &.is-shown { @include clearfix(); + display: block; } @@ -620,6 +678,7 @@ .actions { @include clearfix(); + list-style: none; margin: 0; padding: 0; @@ -629,6 +688,7 @@ .message-copy .title { @extend %t-title6; @extend %t-weight4; + line-height: 1em; margin-bottom: ($baseline/4); } @@ -636,14 +696,13 @@ .message-copy, .message-copy .copy { @extend %t-copy-sub1; + margin: 2px 0 0 0; } // CASE: expandable &.is-expandable { - .wrapper-tip { - .message-title, .message-copy { margin-bottom: 0; display: inline-block; @@ -665,14 +724,14 @@ .wrapper-extended { @include transition(opacity $tmg-f2 ease-in-out 0); + display: none; - opacity: 0.0; + opacity: 0; } } // STATE: is expanded &.is-expanded { - .ui-toggle-expansion { @include rtl { @include transform(rotate(-90deg)); @@ -681,18 +740,18 @@ @include ltr { @include transform(rotate(90deg)); } + @include transform-origin(50% 50%); } .wrapper-extended { display: block; - opacity: 1.0; + opacity: 1; } } // TYPE: upsell &.message-upsell { - .wrapper-tip { @include clearfix(); @@ -703,8 +762,10 @@ .ui-toggle-expansion { @include transition(all $tmg-f2 ease-in-out 0s); @include font-size(18); + display: inline-block; vertical-align: middle; + @include margin-right($baseline/4); } @@ -726,35 +787,44 @@ } } - .action-upgrade-container{ + .action-upgrade-container { @include float(right); + display: inline-block; margin-top: ($baseline/2); } + .action-upgrade { @extend %btn-primary-green; + @include clearfix(); + position: relative; + @include left($baseline/2); @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75)); .action-upgrade-icon{ @include float(left); + display: inline; @include margin-right($baseline*0.4); + margin-top: ($baseline/4); background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat; background-position: -($baseline*0.3); background-color: white; - width: ($baseline*0.8); height: ($baseline*0.7); } + .deco-graphic { position: absolute; top: -($baseline/4); + @include left(-($baseline*0.75)); + width: ($baseline*2); } @@ -770,11 +840,13 @@ .copy { @extend %t-action3; @extend %t-weight4; + @include margin-right($baseline); } .copy-sub { @extend %t-action4; + opacity: 0.875; } } @@ -790,14 +862,17 @@ .message-copy { @extend %t-copy-sub1; + margin: 0; } .credit-action { .credit-btn { @extend %btn-pl-yellow-base; + @include float(right); @include margin-right(5px); + background-image: none ; text-shadow: none; box-shadow: none; @@ -806,7 +881,6 @@ } .actions { - .action { @include float(left); @include margin(0, 15px, 0, 0); @@ -818,6 +892,7 @@ .btn { @include box-sizing(border-box); @include float(left); + border-radius: 3px; font: normal 0.8rem/1.2rem $sans-serif; letter-spacing: 1px; @@ -828,7 +903,8 @@ cursor: default !important; &:hover, &:focus { - @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100% )); + @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%)); + background: #eee; } } @@ -836,6 +912,7 @@ .btn { @include float(left); + font: normal 0.8rem/1.2rem $sans-serif; letter-spacing: 1px; padding: 6px 12px; @@ -854,7 +931,6 @@ } &.exam-register { - .message-copy { margin-top: ($baseline/4); width: 55%; @@ -870,6 +946,7 @@ .exam-button { @include button(simple, $pink); @include float(right); + margin-top: 0; } @@ -892,17 +969,16 @@ &.course-status-certrendering { - .btn { margin-top: 2px; } } &.course-status-certavailable { - .message-copy { width: flex-grid(6, 12); position: relative; + @include float(left); } @@ -911,6 +987,7 @@ .action { @include margin(0, 0, ($baseline/2), ($baseline*.75)); + float: none; text-align: center; @@ -925,11 +1002,15 @@ .action-certificate .btn { @extend %btn-inherited-primary; + @include box-sizing(border-box); + float: none; border-radius: 3px; display: block; + @include padding(7px, ($baseline*.75), 7px, ($baseline*.75)); + text-align: center; a:link, a:visited { @@ -951,12 +1032,14 @@ .action-share { @include float(right); + margin: 0; } } .certificate-explanation { @extend %t-copy-sub1; + margin-top: ($baseline/2); border-top: 1px solid $gray-l4; padding-top: ($baseline/2); @@ -964,17 +1047,22 @@ .verification-reminder { width: flex-grid(8, 12); + @include float(left); + position: relative; } .verification-cta { width: flex-grid(4, 12); + @include float(left); + position: relative; .btn { @extend %btn-pl-green-base; + @include float(right); } } @@ -988,6 +1076,7 @@ .related-programs-preface { @include float(left); + font-weight: bold; } @@ -999,6 +1088,7 @@ li { @include float(left); + display: inline; padding: 0 0.5em; border-right: 1px solid; @@ -1006,6 +1096,7 @@ .category-icon { @include float(left); @include margin-right($baseline/4); + margin-top: ($baseline/10); background-color: transparent; background-size: 100%; @@ -1075,9 +1166,11 @@ .deco-graphic { @extend %ui-depth3; + width: 40px; position: absolute; top: -5px; + @include right(0); } @@ -1124,9 +1217,9 @@ // ==================== // status - language .status-language { - .icon { @include font-size(17); + display: inline-block; vertical-align: middle; margin-right: ($baseline/4); @@ -1140,7 +1233,6 @@ // status - verification .status-verification { - .status-title { margin: 0 0 ($baseline/4) 0; } @@ -1152,6 +1244,7 @@ .status-data-message { @extend %t-copy-sub1; @extend %t-weight4; + margin-bottom: ($baseline/2); } @@ -1160,22 +1253,29 @@ .action { @extend %t-weight4; + display: block; + @include font-size(14); } } .status-note { @extend %t-copy-sub2; + position: relative; + p { @extend %t-copy-sub2; } .deco-arrow { @include triangle(($baseline/2), $m-gray-d3, up); + position: absolute; + @include left(45%); + top: -6px; } } @@ -1192,7 +1292,9 @@ .action-reverify { @extend %btn-primary-error; @extend %t-weight4; + display: block; + @include font-size(14); } @@ -1231,7 +1333,7 @@ // Warning for status verification &.warning { - border-top: 3px solid #ffc01f !important; + border-top: 3px solid #ffc01f !important; .status-title { font-weight: 400 !important; @@ -1250,6 +1352,7 @@ text-decoration: none; display: block; } + .btn:hover { cursor: pointer; color: #fff; @@ -1261,7 +1364,6 @@ // status - verification .status--verification { - .data { white-space: normal !important; text-overflow: no !important; @@ -1274,7 +1376,6 @@ // STATE: is denied &.is-denied { - .data { color: $error-color !important; } @@ -1288,29 +1389,33 @@ .msg__title { @extend %hd-lv5; + color: $lighter-base-font-color; } .msg__copy { @extend %copy-metadata; + color: $lighter-base-font-color; p { @extend %t-copy; } } - p.course-block{ + +p.course-block{ border-style: solid; - border-color: #E3DC86; + border-color: #e3dc86; padding: ($baseline/4); border-width: 1px; - background: #FDFBE4; + background: #fdfbe4; } -.enter-course-blocked{ +.enter-course-blocked{ @include box-sizing(border-box); @include float(left); + display: block; font: normal 15px/1.6rem $sans-serif; letter-spacing: 0; @@ -1325,6 +1430,7 @@ &.archived { @include button(simple, $button-archive-color); + font: normal 15px/1.6rem $sans-serif; padding: 6px 32px 7px; @@ -1338,8 +1444,9 @@ a.disable-look{ color: #808080; } -a.fade-cover{ +a.fade-cover { @extend .cover; + opacity: 0.5; } @@ -1347,7 +1454,6 @@ a.fade-cover{ // +Dashboard - Banner // ==================== .dashboard-banner { - &:empty { display: none; } @@ -1357,6 +1463,7 @@ a.fade-cover{ .msg { @include clearfix(); + font-family: $sans-serif; padding-bottom: $baseline; border-bottom: thin solid $gray; @@ -1364,6 +1471,7 @@ a.fade-cover{ &.title { @extend %t-title5; @extend %t-weight4; + font-family: $f-sans-serif; // Overriding Platform h2 styles @@ -1372,7 +1480,6 @@ a.fade-cover{ } &.has-actions { - .donate-content { width: flex-grid(8, 12); } @@ -1402,6 +1509,7 @@ a.fade-cover{ .action-donate { @extend %btn-primary-blue; + vertical-align: middle; padding-top: ($baseline/2); padding-bottom: ($baseline/2); @@ -1424,6 +1532,7 @@ a.fade-cover{ // Dashboard alert messages .activation-message-container { @include clearfix(); + margin: 0 auto 0; padding-top: ($baseline/2); max-width: grid-width(12); @@ -1432,7 +1541,6 @@ a.fade-cover{ } .account-activation { - .message-copy { position: relative; left: 2em; @@ -1454,7 +1562,7 @@ a.fade-cover{ margin-bottom: 0; } - &.aa-icon .message-copy:before { + &.aa-icon .message-copy::before { position: absolute; left: -1em; content: "\f05a"; // fa-info-circle @@ -1469,7 +1577,7 @@ a.fade-cover{ background-color: $palette-success-back; border: $palette-success-border 1px solid; - &.aa-icon .message-copy:before { + &.aa-icon .message-copy::before { position: absolute; left: -1em; content: "\f00c"; // fa-check @@ -1484,7 +1592,7 @@ a.fade-cover{ background-color: $palette-error-back; border: $palette-error-border 1px solid; - &.aa-icon .message-copy:before { + &.aa-icon .message-copy::before { position: absolute; left: -1em; content: "\f06a"; // fa-exclamation-circle diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss index acbc946ee4f..710790b639f 100644 --- a/lms/static/sass/multicourse/_error-pages.scss +++ b/lms/static/sass/multicourse/_error-pages.scss @@ -1,10 +1,13 @@ section.outside-app { @extend .container; + @include text-align(left); + padding: ($baseline*4) 0; h1 { @extend h2; + margin-bottom: ($baseline*2); text-align: center; } diff --git a/lms/static/sass/multicourse/_help.scss b/lms/static/sass/multicourse/_help.scss index 6d2d718691a..3127ff2f436 100644 --- a/lms/static/sass/multicourse/_help.scss +++ b/lms/static/sass/multicourse/_help.scss @@ -1,21 +1,23 @@ .static-container.help { - section.questions { @include clearfix(); nav.categories { border: 1px solid rgb(220,220,220); + @include box-sizing(border-box); @include float(left); @include margin-left(flex-gutter()); + padding: 20px; width: flex-grid(3); a { display: block; letter-spacing: 1px; - margin: 0px -20px; - @include padding(12px, 0px, 12px, 20px); + margin: 0 -20px; + + @include padding(12px, 0, 12px, 20px); @include text-align(left); &:hover, &:focus { @@ -27,13 +29,14 @@ .responses { @include float(left); + width: flex-grid(9); .category { padding-top: 40px; &:first-child { - padding-top: 0px; + padding-top: 0; } > h2 { @@ -58,8 +61,11 @@ .answer { display: none; color: #3c3c3c; + @include padding-left(16px); + font-family: $serif; + li { line-height: 1.6em; } @@ -67,7 +73,6 @@ // opened states &.opened { - h3 { background: url('/static/images/bullet-open.png') no-repeat left 0.25em; } diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index 2b40654f00f..db4462dcca8 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -10,12 +10,14 @@ $course-search-input-height: ($button-size); > .container { @include box-sizing(border-box); + width: flex-grid(12); } > header { @include linear-gradient($homepage__header--gradient__color--alpha, $homepage__header--gradient__color--bravo); @include clearfix(); + background-size: cover; background-image: $homepage-bg-image; box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1; @@ -25,7 +27,9 @@ $course-search-input-height: ($button-size); .outer-wrapper { @include clearfix(); + @extend .animation-home-header-pop-up; + position: relative; margin: 0 auto; padding: ($baseline*3); @@ -41,6 +45,7 @@ $course-search-input-height: ($button-size); @include shift(2); @include box-sizing(border-box); @include transition(all 0.2s linear 0s); + position: relative; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.5); background: $white; @@ -78,13 +83,15 @@ $course-search-input-height: ($button-size); @include box-sizing(border-box); @include transition(all 0.2s linear 0s); @include text-align(left); + display: inline-block; top: 0; - opacity: 1.0; + opacity: 1; padding-bottom: ($baseline); h1 { @include text-align(left); + margin-bottom: 0; text-shadow: 0 1px rgba(255,255,255, 0.6); text-transform: none; @@ -92,6 +99,7 @@ $course-search-input-height: ($button-size); p { @extend h2; + margin-bottom: 0; text-transform: none; font-style: italic; @@ -105,8 +113,10 @@ $course-search-input-height: ($button-size); @include float(left); @include padding-right($button-size); @include padding-left($baseline*0.5); + @extend %ui-depth1; @extend %t-title5; + border: 2px solid $gray-l3; border-radius: 3px; box-shadow: none; @@ -119,6 +129,7 @@ $course-search-input-height: ($button-size); // STATE: focus &:focus { @extend %no-outline; + border-color: $m-blue-d1; } } @@ -126,9 +137,11 @@ $course-search-input-height: ($button-size); .search-button { @include right($baseline*1.5); @include border-radius(1px, 3px, 3px, 1px); + @extend %ui-depth2; @extend %t-icon3; @extend %t-strong; + position: absolute; border: 2px solid $m-blue-d1; box-shadow: none; @@ -154,11 +167,14 @@ $course-search-input-height: ($button-size); background: $white; background: $course-header-bg; border: 1px solid $border-color-3; + @include border-left(0); @include box-sizing(border-box); // box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5); height: 120px; + @include float(left); + padding: 4px; position: relative; vertical-align: top; @@ -178,17 +194,26 @@ $course-search-input-height: ($button-size); .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); + border-radius: 4px; box-shadow: 0 1px 12px 0 $shadow-d1; + @include box-sizing(border-box); + border: 2px solid rgba(255,255,255, 0.8); height: 60px; + @include left(50%); + margin-top: -30px; + @include margin-left(-($baseline*1.5)); + position: absolute; top: 50%; + @include transition(all 0.15s linear 0s); + width: 60px; &::after { @@ -197,8 +222,10 @@ $course-search-input-height: ($button-size); content: "\25B6"; display: block; font: normal 2em/1em $sans-serif; + @include left(50%); @include margin-left(-11px); + margin-top: -16px; position: absolute; text-shadow: 0 -1px rgba(0,0,0, 0.8); @@ -215,6 +242,7 @@ $course-search-input-height: ($button-size); &:hover, &:focus { .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); + box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5); border-color: rgba(255,255,255, 0.9); @@ -229,6 +257,7 @@ $course-search-input-height: ($button-size); .highlighted-courses { @include box-sizing(border-box); + margin-bottom: ($baseline*2); position: relative; width: flex-grid(12); @@ -236,13 +265,14 @@ $course-search-input-height: ($button-size); > h2 { @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); + border: 1px solid $border-color-2; border-radius: 4px; border-top-color: $border-color-1; - box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 $shadow; + box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0 12px 0 $shadow; color: $lighter-base-font-color; letter-spacing: 1px; - margin-bottom: 0px; + margin-bottom: 0; margin-top: -15px; padding: 10px 10px 8px; text-align: center; @@ -253,19 +283,21 @@ $course-search-input-height: ($button-size); .university-partners { border-bottom: 1px solid $border-color-2; - margin-bottom: 0px; + margin-bottom: 0; overflow: hidden; position: relative; width: flex-grid(12); &::before { @extend %faded-hr-divider-medium; + content: ""; display: block; } &::after { @extend %faded-hr-divider-medium; + content: ""; display: block; } @@ -273,6 +305,7 @@ $course-search-input-height: ($button-size); hr { @extend %faded-hr-divider-light; + border: none; margin: 0; position: relative; @@ -280,7 +313,8 @@ $course-search-input-height: ($button-size); &::after { @extend %faded-hr-divider; - bottom: 0px; + + bottom: 0; content: ""; display: block; position: absolute; @@ -290,22 +324,25 @@ $course-search-input-height: ($button-size); .partners { margin: 0 auto; - padding: 20px 0px; + padding: 20px 0; text-align: center; li.partner { display: inline-block; - padding: 0px 30px; + padding: 0 30px; position: relative; vertical-align: middle; overflow: hidden; &::before { @extend %faded-vertical-divider; + content: ""; display: block; height: 80px; + @include right(0); + position: absolute; top: -5px; width: 1px; @@ -313,10 +350,13 @@ $course-search-input-height: ($button-size); &::after { @extend %faded-vertical-divider-light; + content: ""; display: block; height: 80px; + @include right(1px); + position: absolute; top: -5px; width: 1px; @@ -338,26 +378,35 @@ $course-search-input-height: ($button-size); &::before { @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); + content: ""; display: block; height: 200px; + @include left(50%); @include margin-left(-100px); + margin-top: -100px; opacity: 0; width: 200px; position: absolute; + @include transition(all $tmg-f2 ease-in-out 0s); + top: 50%; z-index: 1; } .name { bottom: -60px; + @include left(0); + position: absolute; text-align: center; + @include transition(all $tmg-f2 ease-in-out 0s); + width: 100%; z-index: 2; @@ -365,6 +414,7 @@ $course-search-input-height: ($button-size); color: $base-font-color; font: 700 italic 1.4em/1.4em $sans-serif; text-shadow: 0 1px rgba(255,255,255, 0.6); + @include transition(all 0.15s ease-in-out 0s); &:hover, &:focus { @@ -375,7 +425,9 @@ $course-search-input-height: ($button-size); img { position: relative; + @include transition(all $tmg-f2 ease-in-out 0s); + vertical-align: middle; z-index: 2; } @@ -384,7 +436,7 @@ $course-search-input-height: ($button-size); text-decoration: none; &::before { - opacity: 1.0; + opacity: 1; } .name { @@ -400,23 +452,27 @@ $course-search-input-height: ($button-size); &.university-partners2x6 { @include box-sizing(border-box); + width: flex-grid(12, 12); .partners { @include box-sizing(border-box); @include clearfix(); @include margin-left(60px); + padding: 12px 0; .partner { @include box-sizing(border-box); + width: flex-grid(2, 12); display: block; + @include float(left); + padding: 0 12px; a { - img { width: 100%; height: auto; @@ -444,30 +500,37 @@ $course-search-input-height: ($button-size); header { @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); + border-bottom: 1px solid $border-color-2; + @include clearfix(); + padding: 10px 20px 8px; position: relative; h2 { @include float(left); + margin: 0; text-shadow: 0 1px rgba(255,255,255, 0.6); } .action.action-mediakit { @include float(right); + position: relative; top: 1px; font-family: $sans-serif; font-size: 14px; text-shadow: 0 1px rgba(255,255,255, 0.6); - &:after { + &::after { position: relative; top: -1px; display: inline-block; + @include margin(0, 0, 0, 5px); + content: "➤"; font-size: 11px; } @@ -482,6 +545,7 @@ $course-search-input-height: ($button-size); .news { @include box-sizing(border-box); + box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15); padding: 20px; width: flex-grid(12); @@ -490,17 +554,22 @@ $course-search-input-height: ($button-size); border-bottom: 1px solid $border-color-2; margin-bottom: $baseline; padding-bottom: $baseline; + @include clearfix(); > article { border: 1px dotted transparent; border-color: $border-color-2; + @include box-sizing(border-box); @include clearfix(); @include float(left); @include margin-right(flex-gutter()); + padding: 10px; + @include transition(all 0.15s linear 0s); + width: flex-grid(4); &:hover, &:focus { @@ -515,11 +584,17 @@ $course-search-input-height: ($button-size); .post-graphics { border: 1px solid $border-color-1; + @include box-sizing(border-box); + display: block; + @include float(left); + height: 84px; + @include margin-right(flex-gutter()); + overflow: hidden; width: flex-grid(4); vertical-align: top; @@ -532,6 +607,7 @@ $course-search-input-height: ($button-size); .post-name { @include float(left); + width: flex-grid(8); vertical-align: top; @@ -566,10 +642,12 @@ $course-search-input-height: ($button-size); line-height: 1.6em; font-family: $serif; font-style: italic; + @include margin-left($baseline/2); &.read-more { @include float(right); + color: lighten($base-font-color, 50%); &:hover, &:focus { diff --git a/lms/static/sass/multicourse/_jobs.scss b/lms/static/sass/multicourse/_jobs.scss index 1fe54e98a0f..a32fc58c0de 100644 --- a/lms/static/sass/multicourse/_jobs.scss +++ b/lms/static/sass/multicourse/_jobs.scss @@ -10,6 +10,7 @@ small.author { @include text-align(right); + display: block; color: rgb(100, 100, 100); } @@ -20,14 +21,17 @@ .message { @include clearfix(); + margin-bottom: ($baseline*4); position: relative; .photo { background: rgb(255,255,255); border: 1px solid rgb(210,210,210); + @include float(left); @include margin-right(flex-gutter()); + padding: 1px; width: flex-grid(4); @@ -40,10 +44,12 @@ header { @include float(left); + width: flex-grid(7); blockquote { @include margin-left(0); + margin-bottom: ($baseline*2); &:last-child { @@ -52,6 +58,7 @@ p { @include margin-left(0); + font-style: italic; line-height: 1.6; font-size: 1.1em; @@ -71,6 +78,7 @@ .jobs-wrapper { @include clearfix(); @include float(left); + padding-top: 80px; width: flex-grid(12); @@ -82,8 +90,11 @@ .jobs-sidebar { @include box-sizing(border-box); + border: 1px solid rgb(220,220,220); + @include float(left); + padding: 20px; width: flex-grid(3); @@ -93,8 +104,9 @@ a { display: block; letter-spacing: 1px; - margin: 0px -20px; - @include padding(12px, 0px, 12px, 20px); + margin: 0 -20px; + + @include padding(12px, 0, 12px, 20px); @include text-align(left); &:hover, &:focus { @@ -112,19 +124,20 @@ .jobs-listing { @include float(left); @include margin-right(flex-gutter()); + width: flex-grid(9); .job { border-bottom: 1px solid rgb(220,220,220); - padding: 40px 0px; + padding: 40px 0; &:first-child { - padding-top: 0px; + padding-top: 0; } &:last-child { border: none; - padding-bottom: 0px; + padding-bottom: 0; } .inner-wrapper { diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss index 81f6c0a22d1..e4054de0e4e 100644 --- a/lms/static/sass/multicourse/_media-kit.scss +++ b/lms/static/sass/multicourse/_media-kit.scss @@ -4,13 +4,16 @@ $white: rgb(255,255,255); .mediakit { @include box-sizing(border-box); + margin: 0 auto; padding: ($baseline*3) 0; width: 980px; .wrapper-mediakit { border-radius: 4px; + @include box-sizing(border-box); + box-shadow: 0 1px 10px 0 $shadow-l1; margin: ($baseline*3) 0 0 0; border: 1px solid $border-color; @@ -37,6 +40,7 @@ $white: rgb(255,255,255); hr { @extend %faded-hr-divider-light; + border: none; margin: 0; position: relative; @@ -44,7 +48,8 @@ $white: rgb(255,255,255); &::after { @extend %faded-hr-divider; - bottom: 0px; + + bottom: 0; content: ""; display: block; position: absolute; @@ -58,6 +63,7 @@ $white: rgb(255,255,255); color: $blue; font-family: $sans-serif; text-decoration: none; + @include transition(all 0.1s linear 0s); .note { @@ -66,19 +72,21 @@ $white: rgb(255,255,255); font-family: $sans-serif; font-size: 13px; text-decoration: none; + @include transition(all 0.1s linear 0s); - &:before { + &::before { position: relative; top: -1px; + @include margin(0, 5px, 0, 0); + content: "➤"; font-size: 11px; } } &:hover, &:focus { - .note { color: shade($blue, 25%); } @@ -107,17 +115,23 @@ $white: rgb(255,255,255); article { @include box-sizing(border-box); + width: 500px; + @include margin-right($baseline); @include float(left); } aside { border-radius: 2px; + @include box-sizing(border-box); + box-shadow: 0 1px 4px 0 $shadow; width: 330px; + @include float(left); + border: 3px solid tint(rgb(96, 155, 216), 35%); background: tint(rgb(96, 155, 216), 35%); @@ -138,7 +152,6 @@ $white: rgb(255,255,255); } a.action-download { - .note { width: 100%; display: inline-block; @@ -148,6 +161,7 @@ $white: rgb(255,255,255); figure { @include box-sizing(border-box); + background: $white; width: 100%; @@ -172,7 +186,9 @@ $white: rgb(255,255,255); // library section .library { border-radius: 2px; + @include box-sizing(border-box); + box-shadow: 0 1px 4px 0 $shadow; border: 3px solid tint($light-gray,50%); padding: 0; @@ -200,6 +216,7 @@ $white: rgb(255,255,255); .listing { @include clearfix(); + background: $white; margin: 0; padding: ($baseline*2); @@ -207,9 +224,13 @@ $white: rgb(255,255,255); li { @include box-sizing(border-box); + overflow-y: auto; + @include float(left); + width: 350px; + @include margin(0, 0, $baseline, 0); &:nth-child(odd) { @@ -218,10 +239,11 @@ $white: rgb(255,255,255); } figure { - a { border-radius: 2px; + @include box-sizing(border-box); + box-shadow: 0 1px 2px 0 $shadow-l1; display: block; min-height: 380px; diff --git a/lms/static/sass/multicourse/_press_release.scss b/lms/static/sass/multicourse/_press_release.scss index d66148cbf59..017ec5b3250 100644 --- a/lms/static/sass/multicourse/_press_release.scss +++ b/lms/static/sass/multicourse/_press_release.scss @@ -36,7 +36,9 @@ > article { border: 1px solid rgb(220,220,220); border-radius: 10px; + @include box-sizing(border-box); + box-shadow: 0 2px 16px 0 $shadow-l1; margin: 0 auto; padding: 80px 80px 40px; @@ -44,15 +46,17 @@ .footer { hr { - margin: 80px 0px 40px; + margin: 80px 0 40px; } } } figure { display: block; + @include float(right); - @include margin(20px, 0px, 60px, 20px); + @include margin(20px, 0, 60px, 20px); + width: 300px; img { @@ -62,6 +66,7 @@ figcaption { font: normal 0.8em/1em $serif; padding: ($baseline/4); + a { font: normal 1em $serif; } @@ -80,7 +85,7 @@ margin-top: $baseline; p + p { - margin-top: 0; + margin-top: 0; } } @@ -98,18 +103,22 @@ .fb-like { margin-top: 8px; + @include margin-left($baseline/2); @include float(left); } p { @include float(left); + margin-top: 8px; + @include margin-right($baseline/2); } a { display: block; + @include float(left); } } diff --git a/lms/static/sass/multicourse/_survey-page.scss b/lms/static/sass/multicourse/_survey-page.scss index 7ed0894494c..f31438e3df3 100644 --- a/lms/static/sass/multicourse/_survey-page.scss +++ b/lms/static/sass/multicourse/_survey-page.scss @@ -1,7 +1,6 @@ // full-page course survey styles .view-survey { - .container { padding: ($baseline*1.5) 0; } @@ -9,20 +8,22 @@ .content-primary { @include float(left); @include margin-right(flex-gutter()); + width: flex-grid(9,12); } .content-supplementary { @include float(left); + width: flex-grid(3,12); margin-top: ($baseline*2); } .header-survey { - .title { @extend %t-title4; @extend %t-weight4; + margin-bottom: $baseline; border-bottom: 1px solid $gray-l4; padding-bottom: ($baseline/2); @@ -30,12 +31,14 @@ .course-info { @extend %t-title; + padding-bottom: ($baseline/4); } .course-org, .course-number { @extend %t-title8; + display: inline-block; text-transform: uppercase; color: $gray-l1; @@ -47,13 +50,13 @@ .course-name { @extend %t-title5; + display: block; } } // reset nasty LMS default styles form { - h1, h2 { text-align: inherit; letter-spacing: inherit; @@ -64,6 +67,7 @@ .instructions { margin-bottom: $baseline; font-style: italic; + @extend %t-copy-base; } @@ -71,18 +75,22 @@ display: block; margin-bottom: ($baseline); border-top: 3px solid $error-color; - @include padding( ($baseline), ($baseline*1.5), ($baseline*1.5), ($baseline*1.5) ); + + @include padding(($baseline), ($baseline*1.5), ($baseline*1.5), ($baseline*1.5)); + background-color: tint($error-color,85%); .message-title { @extend %t-title5; @extend %t-weight4; + margin-bottom: ($baseline/2); color: $error-color; } .message-copy { @extend %ui-no-list; + line-height: 1.3; .error-item { @@ -101,20 +109,21 @@ .field { margin-bottom: $baseline; - &.required label:after { + &.required label::after { content: "*"; + @include margin-left($baseline/4); } .tip { @extend %t-copy-sub2; + display: block; margin-top: ($baseline/4); color: $gray; } &.is-focused { - .tip { color: $base-font-color; } @@ -125,11 +134,13 @@ .action-primary { @extend %m-btn-primary; @extend %t-copy-base; + @include padding-left($baseline*2); } .action-cancel { @extend %t-copy-sub1; + @include margin-left($baseline); } @@ -137,6 +148,7 @@ label { @extend %t-copy-base; @extend %t-weight4; + display: block; font-style: normal; } @@ -156,6 +168,7 @@ p { @extend %t-copy-sub1; + color: $gray; } } diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss index 112096a5d4e..e976d458cce 100644 --- a/lms/static/sass/partials/base/_variables.scss +++ b/lms/static/sass/partials/base/_variables.scss @@ -197,11 +197,11 @@ $ui-notification-height: ($baseline*10); // ==================== // social platforms -$twitter-blue: #55ACEE; -$facebook-blue: #3B5998; -$linkedin-blue: #0077B5; -$google-red: #D73924; -$microsoft-black: #000000; +$twitter-blue: #55acee; +$facebook-blue: #3b5998; +$linkedin-blue: #0077b5; +$google-red: #d73924; +$microsoft-black: #000; // shadows $shadow: rgba(0,0,0,0.2) !default; @@ -296,7 +296,7 @@ $m-blue-d2: $blue !default; $m-blue-d3: rgb(18,111,154) !default; $m-blue-d4: rgb(10,74,103) !default; $m-blue-d5: rgb(0,158,231) !default; -$m-blue-d6: #256A97 !default; +$m-blue-d6: #256a97 !default; $m-blue-t0: rgba($m-blue,0.125) !default; $m-blue-t1: rgba($m-blue,0.25) !default; $m-blue-t2: rgba($m-blue,0.50) !default; @@ -510,7 +510,7 @@ $courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238 $courseware-header-bg: transparent !default; $courseware-footer-border: none !default; $courseware-footer-shadow: none !default; -$courseware-footer-margin: 0px !default; +$courseware-footer-margin: 0 !default; $courseware-border-bottom-color: rgb(68,162,222) !default; $courseware-button-border-color: rgb(230,230,230) !default; $courseware-hover-color: rgb(51,52,53) !default; diff --git a/lms/static/sass/search/_search.scss b/lms/static/sass/search/_search.scss index e6ad472c8eb..1af315ae20f 100644 --- a/lms/static/sass/search/_search.scss +++ b/lms/static/sass/search/_search.scss @@ -1,6 +1,6 @@ .search-bar { - @include box-sizing(border-box); + position: relative; .search-field-wrapper { @@ -9,7 +9,9 @@ .search-field { @extend %t-weight2; + @include box-sizing(border-box); + top: 5px; width: 100%; border-radius: 4px; @@ -21,15 +23,19 @@ .search-button:hover, .cancel-button:hover { @extend %t-regular; + @include box-sizing(border-box); @include right(0); + display: block; position: absolute; top: 0; border: none; border-radius: 0; + @include border-top-right-radius(3px); @include border-bottom-right-radius(3px); + background: $uxpl-blue-base; padding: 0 10px; height: 35px; @@ -42,9 +48,9 @@ &:hover, &:focus, &:active { - background: $uxpl-blue-hover-active; - box-shadow: none; - border: none; + background: $uxpl-blue-hover-active; + box-shadow: none; + border: none; } } @@ -55,7 +61,6 @@ } .search-results { - display: none; .search-info { @@ -65,6 +70,7 @@ .search-count { @include float(right); + color: $gray-l1; } } @@ -76,6 +82,7 @@ .search-results-item { @include padding-right(140px); + position: relative; border-bottom: 1px solid $gray-l4; padding: $baseline ($baseline/2); @@ -89,34 +96,43 @@ .result-excerpt { margin-bottom: $baseline; } + .result-type { @include right($baseline/2); + position: absolute; bottom: $baseline; font-size: 14px; color: $gray-l1; } + .result-course-name { @include margin-right(1em); + font-size: 14px; color: $gray-l1; } + .result-location { font-size: 14px; color: $gray-l1; } + .result-link { @include right($baseline/2); + position: absolute; top: $baseline; line-height: 1.6em; text-transform: uppercase; } + .search-results-ellipsis { @extend %t-copy-sub2; + color: $gray; - &:after { + &::after { content: '\2026'; } } @@ -134,24 +150,28 @@ } .courseware-search-bar { - width: flex-grid(7); + width: flex-grid(7); } .dashboard-search-bar { @include float(right); @include margin-left(flex-gutter()); + margin-bottom: $baseline; padding: 0; width: flex-grid(3); + label { @extend %t-regular; + font-family: $sans-serif; color: $gray; font-size: 13px; font-style: normal; text-transform: uppercase; } + .search-field { background: $white; box-shadow: 0 1px 0 0 $white, inset 0 0 3px 0 $shadow-l2; @@ -162,19 +182,24 @@ .dashboard-search-results { @include float(left); + margin: 0; padding: 0; width: flex-grid(9); min-height: 300px; + .search-info { padding-bottom: lh(1.75); + a { display: block; margin-bottom: lh(.5); font-size: 13px; } + h2 { @extend %t-title5; + @include float(left); @include clear(left); } diff --git a/lms/static/sass/shared-v2/_base.scss b/lms/static/sass/shared-v2/_base.scss index dc4d73e39d7..d114bcb9d1d 100644 --- a/lms/static/sass/shared-v2/_base.scss +++ b/lms/static/sass/shared-v2/_base.scss @@ -2,24 +2,25 @@ // removing the outline on any element that we make programmatically focusable [tabindex="-1"] { - outline: none; + outline: none; } .window-wrap { - background-color: $lms-background-color; + background-color: $lms-background-color; } .content-wrapper { - @include span(12, none); - margin: 0 auto; + @include span(12, none); - @media print { - padding-bottom: 0; - } + margin: 0 auto; + + @media print { + padding-bottom: 0; + } } // Support .sr as well as .sr-only for backward compatibility .sr { - @extend .sr-only; + @extend .sr-only; } diff --git a/lms/static/sass/shared-v2/_footer.scss b/lms/static/sass/shared-v2/_footer.scss index dd66047bada..579d1a35d8c 100644 --- a/lms/static/sass/shared-v2/_footer.scss +++ b/lms/static/sass/shared-v2/_footer.scss @@ -2,199 +2,212 @@ // ==================== .wrapper-footer { + @include clearfix(); + + @extend %ui-print-excluded; + + box-shadow: 0 -1px 5px 0 $shadow-l1; + border-top: 1px solid palette(grayscale, x-back); + padding: 25px ($baseline/2) ($baseline*1.5); + background: $footer-bg; + + footer#footer-openedx { @include clearfix(); - @extend %ui-print-excluded; - box-shadow: 0 -1px 5px 0 $shadow-l1; - border-top: 1px solid palette(grayscale, x-back); - padding: 25px ($baseline/2) ($baseline*1.5); - background: $footer-bg; - footer#footer-openedx { + box-sizing: border-box; + margin: 0 auto; + + p, ol, ul { + font-family: $sans-serif; + + // override needed for poorly scoped font-family styling on p a:link {} + a { + font-family: $sans-serif; + } + } + + a { + @extend %link-text; + + border-bottom: none; + + &:hover, + &:focus, + &:active { + border-bottom: 1px dotted $link-color; + } + } + + // colophon + .colophon { + @include span(12); + + @media (min-width: $bp-screen-sm) { + @include span(8); + } + + .nav-colophon { @include clearfix(); - box-sizing: border-box; - margin: 0 auto; - p, ol, ul { - font-family: $sans-serif; + margin: $footer_margin; - // override needed for poorly scoped font-family styling on p a:link {} - a { - font-family: $sans-serif; - } + ol { + list-style: none; } - a { - @extend %link-text; - border-bottom: none; + li { + @include float(left); + @include margin-right($baseline*0.75); + + a { + color: tint($black, 20%); &:hover, &:focus, &:active { - border-bottom: 1px dotted $link-color; + color: $link-color; } + } + + &:last-child { + @include margin-right(0); + } } + } - // colophon - .colophon { - @include span(12); + .colophon-about { + @include clearfix(); - @media(min-width: $bp-screen-sm) { - @include span(8); - } + img { + @include float(left); + @include margin-right(0); + + width: 68px; + height: 34px; + } - .nav-colophon { - @include clearfix(); - margin: $footer_margin; + p { + @include float(left); + @include span(9); + @include margin-left($baseline); + @include padding-left($baseline); - ol { - list-style: none; - } + font-size: font-size(small); + background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat; + } + } + } - li { - @include float(left); - @include margin-right($baseline*0.75); + // references + .references { + @include span(4); - a { - color: tint($black, 20%); + margin: -10px 0 0 0; + display: inline-block; + } - &:hover, - &:focus, - &:active { - color: $link-color; - } - } + .wrapper-logo { + margin: ($baseline*0.75) 0; - &:last-child { - @include margin-right(0); - } - } - } + a { + display: inline-block; - .colophon-about { - @include clearfix(); - - img { - @include float(left); - @include margin-right(0); - width: 68px; - height: 34px; - } - - p { - @include float(left); - @include span(9); - @include margin-left($baseline); - @include padding-left($baseline); - font-size: font-size(small); - background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat; - } - } + &:hover, + &:focus { + border-bottom: 0; } + } + } - // references - .references { - @include span(4); - margin: -10px 0 0 0; - display: inline-block; - } + .copyright { + @include text-align(left); + + margin: -2px 0 8px; + font-size: font-size(xx-small); + color: palette(grayscale, dark); + } - .wrapper-logo { - margin: ($baseline*0.75) 0; + .nav-legal { + @include clearfix(); + @include text-align(left); - a { - display: inline-block; + li { + display: inline-block; + font-size: font-size(xx-small); + } - &:hover, - &:focus { - border-bottom: 0; - } - } - } + .nav-legal-02 a { + &::before { + @include margin-right(($baseline/4)); - .copyright { - @include text-align(left); - margin: -2px 0 8px; - font-size: font-size(xx-small); - color: palette(grayscale, dark); + content: "-"; } + } + } - .nav-legal { - @include clearfix(); - @include text-align(left); + .nav-social { + @include text-align(right); - li { - display: inline-block; - font-size: font-size(xx-small); - } + margin: 0; - .nav-legal-02 a { - &:before { - @include margin-right(($baseline/4)); - content: "-"; - } - } + li { + display: inline-block; + + &:last-child { + @include margin-right(0); } - .nav-social { - @include text-align(right); - margin: 0; + a { + display: block; - li { - display: inline-block; + &:hover, + &:focus, + &:active { + border: none; + } + } - &:last-child { - @include margin-right(0); - } + img { + display: block; + } + } + } - a { - display: block; + // platform Open edX logo and link + .footer-about-openedx { + @include span(12); + @include text-align(right); - &:hover, - &:focus, - &:active { - border: none; - } - } + vertical-align: bottom; - img { - display: block; - } - } - } - - // platform Open edX logo and link - .footer-about-openedx { - @include span(12); - @include text-align(right); - vertical-align: bottom; + @media (min-width: $bp-screen-sm) { + @include span(4); + @include margin-right(0); + } - @media(min-width: $bp-screen-sm) { - @include span(4); - @include margin-right(0); - } + a { + @include float(right); - a { - @include float(right); - display: inline-block; + display: inline-block; - &:hover { - border-bottom: none; - } - } + &:hover { + border-bottom: none; } + } } + } } // marketing site design syncing .view-register, .view-login, .view-passwordreset { - .wrapper-footer footer { - width: 960px; + .wrapper-footer footer { + width: 960px; - .colophon-about img { - margin-top: ($baseline*1.5); - } + .colophon-about img { + margin-top: ($baseline*1.5); } + } } diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss index bf769628741..82cacb550d8 100644 --- a/lms/static/sass/shared-v2/_header.scss +++ b/lms/static/sass/shared-v2/_header.scss @@ -1,156 +1,165 @@ // LMS header styles .header-global { - @extend %ui-depth1; + @extend %ui-depth1; + + box-sizing: border-box; + position: relative; + width: 100%; + border-bottom: 1px solid $header-border-color; + box-shadow: 0 1px 5px 0 $shadow-l1; + background: $header-bg; + + .logo-header { + display: inline; + } + + .wrapper-header { + @include clearfix(); + box-sizing: border-box; - position: relative; + margin: 0 auto; + padding: 10px 10px 0; width: 100%; - border-bottom: 1px solid $header-border-color; - box-shadow: 0 1px 5px 0 $shadow-l1; - background: $header-bg; + max-width: $lms-max-width; - .logo-header { - display: inline; + .left { + @include float(left); } - .wrapper-header { - @include clearfix(); - box-sizing: border-box; - margin: 0 auto; - padding: 10px 10px 0; - width: 100%; - max-width: $lms-max-width; - - .left { - @include float(left); - } + .right { + @include float(right); + } - .right { - @include float(right); - } + .logo { + @include float(left); + @include margin-right(10px); - .logo { - @include float(left); - @include margin-right(10px); - margin-top: 4px; - margin-bottom: 0; - position: relative; - } + margin-top: 4px; + margin-bottom: 0; + position: relative; + } - .course-header { - @include float(left); - @include margin(12px, 10px, 0px, 10px); - color: $lms-label-color; - .provider { - font-weight: bold; - } - } + .course-header { + @include float(left); + @include margin(12px, 10px, 0, 10px); - .wrapper-user-menu { - @include float(right); - margin-top: 4px; - width: auto; - } + color: $lms-label-color; - .dropdown-menu { - @include text-align(left); - top: inherit; - } + .provider { + font-weight: bold; + } + } + + .wrapper-user-menu { + @include float(right); + + margin-top: 4px; + width: auto; + } - .user-menu { - display: inline; + .dropdown-menu { + @include text-align(left); + + top: inherit; + } + + .user-menu { + display: inline; + } + + .list-inline { + &.nav-global { + @include margin(0, 0, 0, $baseline/2); + + .btn { + text-transform: uppercase; + border: none; + padding: 0; + color: $lms-active-color; + background: transparent; + + &:hover { + background: transparent; + color: $link-hover; + text-decoration: underline; + } } + } - .list-inline { - &.nav-global { - @include margin(0, 0, 0, $baseline/2); - - .btn { - text-transform: uppercase; - border: none; - padding: 0; - color: $lms-active-color; - background: transparent; - - &:hover { - background: transparent; - color: $link-hover; - text-decoration: underline; - } - } - } - - .item { - font-weight: font-weight(semi-bold); - - &.active { - a { - text-decoration: none; - color: $link-color; - } - } - } + .item { + font-weight: font-weight(semi-bold); + + &.active { + a { + text-decoration: none; + color: $link-color; + } } + } + } + + .tab-nav-item{ + @include float(left); + + display: flex; + margin: 0; + justify-content: center; - .tab-nav-item{ - @include float(left); - display: flex; - margin: 0; - justify-content: center; - - .tab-nav-link{ - font-size: font-size(base); - font-weight: font-weight(semi-bold); - color: palette(grayscale, dark); - padding: 5px 25px 23px; - display: inline-block; - - &:active, - &:focus, - &:hover { - border-bottom: 4px solid $lms-border-color; - } - } - - .active{ - border-bottom: 4px solid $black-t3 !important; - } + .tab-nav-link{ + font-size: font-size(base); + font-weight: font-weight(semi-bold); + color: palette(grayscale, dark); + padding: 5px 25px 23px; + display: inline-block; + + &:active, + &:focus, + &:hover { + border-bottom: 4px solid $lms-border-color; } + } + + .active{ + border-bottom: 4px solid $black-t3 !important; + } } + } - // Style the courseware's slim version of the header - &.slim { - .wrapper-header { - height: 60px; + // Style the courseware's slim version of the header + &.slim { + .wrapper-header { + height: 60px; - .logo img { - margin-top: 4px; - height: 30px; - } + .logo img { + margin-top: 4px; + height: 30px; + } - .course-header { - margin-top: 10px; - } + .course-header { + margin-top: 10px; + } - .list-inline.nav-global { - margin-top: 10px; - } + .list-inline.nav-global { + margin-top: 10px; + } - .wrapper-user-menu { - margin-top: 0; - } - } + .wrapper-user-menu { + margin-top: 0; + } } + } } .doc-link { - @include float(right); - @include margin(($baseline*0.75), ($baseline*0.75), ($baseline*0.75), ($baseline*0.75)); - font-size: 14px; - font-weight: bold; - color: $base-font-color; + @include float(right); + @include margin(($baseline*0.75), ($baseline*0.75), ($baseline*0.75), ($baseline*0.75)); - &:visited { - color: $base-font-color; - } + font-size: 14px; + font-weight: bold; + color: $base-font-color; + + &:visited { + color: $base-font-color; + } } diff --git a/lms/static/sass/shared-v2/_help-tab.scss b/lms/static/sass/shared-v2/_help-tab.scss index c47d5dadee8..63a07ff7b37 100644 --- a/lms/static/sass/shared-v2/_help-tab.scss +++ b/lms/static/sass/shared-v2/_help-tab.scss @@ -1,86 +1,88 @@ .help-tab { - @include transform(rotate(-90deg)); - @include transform-origin(0 0); - z-index: z-index(front); - top: 250px; - left: 0; - position: fixed; + @include transform(rotate(-90deg)); + @include transform-origin(0 0); - a:link, - a:visited { - cursor: pointer; - border: 1px solid $lms-border-color; - border-top-style: none; - border-radius: 0 0 ($baseline/2) ($baseline/2); - background: transparentize($white, 0.25); - color: transparentize(palette(grayscale, dark), 0.25); - font-weight: bold; - text-decoration: none; - padding: 6px 22px 11px; - display: inline-block; + z-index: z-index(front); + top: 250px; + left: 0; + position: fixed; - &:hover, - &:focus { - color: $white; - background: palette(primary, base); - } + a:link, + a:visited { + cursor: pointer; + border: 1px solid $lms-border-color; + border-top-style: none; + border-radius: 0 0 ($baseline/2) ($baseline/2); + background: transparentize($white, 0.25); + color: transparentize(palette(grayscale, dark), 0.25); + font-weight: bold; + text-decoration: none; + padding: 6px 22px 11px; + display: inline-block; + + &:hover, + &:focus { + color: $white; + background: palette(primary, base); } + } } .help-buttons { - padding: ($baseline/2) ($baseline*2.5); + padding: ($baseline/2) ($baseline*2.5); - a:link, - a:visited { - padding: ($baseline*0.75) 0; - text-align: center; - cursor: pointer; - background: $white; - text-decoration: none; - display: block; - border: 1px solid $lms-border-color; + a:link, + a:visited { + padding: ($baseline*0.75) 0; + text-align: center; + cursor: pointer; + background: $white; + text-decoration: none; + display: block; + border: 1px solid $lms-border-color; - &#feedback_link_problem { - border-bottom-style: none; - border-radius: ($baseline/2) ($baseline/2) 0 0; - } + &#feedback_link_problem { + border-bottom-style: none; + border-radius: ($baseline/2) ($baseline/2) 0 0; + } - &#feedback_link_question { - border-top-style: none; - border-radius: 0 0 ($baseline/2) ($baseline/2); - } + &#feedback_link_question { + border-top-style: none; + border-radius: 0 0 ($baseline/2) ($baseline/2); + } - &:hover, - &:focus { - color: $white; - background: palette(primary, base); - } + &:hover, + &:focus { + color: $white; + background: palette(primary, base); } + } } #feedback_form { - input, - textarea { - font: { - size: font-size(base); - family: $font-family-sans-serif; - } - line-height: 1.4; + input, + textarea { + font: { + size: font-size(base); + family: $font-family-sans-serif; } - textarea[name="details"] { - height: 150px; - } + line-height: 1.4; + } + + textarea[name="details"] { + height: 150px; + } } #feedback_success_wrapper { - p { - padding: 0 $baseline $baseline; - } + p { + padding: 0 $baseline $baseline; + } } .feedback-form-select { - background: $white; - margin-bottom: $baseline; - width: 100%; + background: $white; + margin-bottom: $baseline; + width: 100%; } diff --git a/lms/static/sass/shared-v2/_modal.scss b/lms/static/sass/shared-v2/_modal.scss index d7f1894dc06..57fa8a47aaf 100644 --- a/lms/static/sass/shared-v2/_modal.scss +++ b/lms/static/sass/shared-v2/_modal.scss @@ -1,287 +1,300 @@ #lean_overlay { - @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2)); - display: none; - height:100%; - left: 0; - position: fixed; - top: 0; - width:100%; - z-index: 100; + @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2)); + + display: none; + height:100%; + left: 0; + position: fixed; + top: 0; + width:100%; + z-index: 100; } .modal { - @include span(5); + @include span(5); + + z-index: z-index(mid-front); + display: none; + position: absolute; + left: 50%; + padding: 8px; + border-radius: 3px; + box-shadow: 0 0 5px 0 $shadow-d1; + background: $gray-d2; + color: $base-font-color; + + .inner-wrapper { z-index: z-index(mid-front); - display: none; - position: absolute; - left: 50%; - padding: 8px; - border-radius: 3px; - box-shadow: 0 0 5px 0 $shadow-d1; - background: $gray-d2; - color: $base-font-color; - - .inner-wrapper { - z-index: z-index(mid-front); - background: $modal-bg-color; - border-radius: 0; - border: 1px solid $lms-border-color; - box-shadow: inset 0 1px 0 0 $white-opacity-70; - overflow: hidden; - padding-left: ($baseline/2); - padding-right: ($baseline/2); - padding-bottom: ($baseline/2); - position: relative; - - p { - font-size: font-size(small); - line-height: 1.4; - } + background: $modal-bg-color; + border-radius: 0; + border: 1px solid $lms-border-color; + box-shadow: inset 0 1px 0 0 $white-opacity-70; + overflow: hidden; + padding-left: ($baseline/2); + padding-right: ($baseline/2); + padding-bottom: ($baseline/2); + position: relative; + + p { + font-size: font-size(small); + line-height: 1.4; + } - a { - &:hover, - &:focus { - text-decoration: underline; - } - } + a { + &:hover, + &:focus { + text-decoration: underline; + } + } - header { - z-index: z-index(mid-front); - margin-bottom: ($baseline*1.5); - overflow: hidden; - padding: 28px $baseline 0; - position: relative; + header { + z-index: z-index(mid-front); + margin-bottom: ($baseline*1.5); + overflow: hidden; + padding: 28px $baseline 0; + position: relative; - &::before { - @include background-image( - radial-gradient( + &::before { + @include background-image( + radial-gradient( 50% 50%, circle closest-side, $white-opacity-80 0%, $white-transparent 100% - ) - ); - content: ''; - display: block; - height: 400px; - left: 0; - margin: 0 auto; - position: absolute; - top: -140px; - width: 100%; - z-index: z-index(base); - } - - hr { - @include background-image( - linear-gradient( + ) + ); + + content: ''; + display: block; + height: 400px; + left: 0; + margin: 0 auto; + position: absolute; + top: -140px; + width: 100%; + z-index: z-index(base); + } + + hr { + @include background-image( + linear-gradient( 180deg, $white-transparent 0%, $white-opacity-80 50%, $white-transparent - ) - ); - height: 1px; - width: 100%; - border: none; - margin: 0; - position: relative; - z-index: z-index(base); - - &::after { - @include background-image( - linear-gradient( + ) + ); + + height: 1px; + width: 100%; + border: none; + margin: 0; + position: relative; + z-index: z-index(base); + + &::after { + @include background-image( + linear-gradient( 180deg, $light-grey-transparent 0%, $light-grey-solid 50%, $light-grey-transparent - ) - ); - height: 1px; - width: 100%; - bottom: 0; - content: ''; - display: block; - position: absolute; - top: -1px; - } - } - - h2 { - @extend .hd-4; - position: relative; - text-align: center; - text-shadow: 0 1px $white-opacity-40; - z-index: z-index(base); - text-transform: uppercase; - font-family: $font-family-serif; - - .edx { - text-transform: none; - } - } + ) + ); + + height: 1px; + width: 100%; + bottom: 0; + content: ''; + display: block; + position: absolute; + top: -1px; } + } - .modal-form-error { - background: palette(error, back); - border: 1px solid palette(error, accent); - color: palette(error, text); - display: none; - margin-bottom: $baseline; - padding: 12px; - } + h2 { + @extend .hd-4; - .notice { - background: $yellow; - border: 1px solid darken($yellow, 60%); - color: darken($yellow, 60%); - display: none; - margin-bottom: $baseline; - padding: 12px; + position: relative; + text-align: center; + text-shadow: 0 1px $white-opacity-40; + z-index: z-index(base); + text-transform: uppercase; + font-family: $font-family-serif; + + .edx { + text-transform: none; } + } + } + + .modal-form-error { + background: palette(error, back); + border: 1px solid palette(error, accent); + color: palette(error, text); + display: none; + margin-bottom: $baseline; + padding: 12px; + } + + .notice { + background: $yellow; + border: 1px solid darken($yellow, 60%); + color: darken($yellow, 60%); + display: none; + margin-bottom: $baseline; + padding: 12px; + } - .activation-message, .message { - padding: 0 ($baseline*2) ($baseline/2); + .activation-message, .message { + padding: 0 ($baseline*2) ($baseline/2); - p { - margin-bottom: ($baseline/2); - } + p { + margin-bottom: ($baseline/2); + } + } + + form { + margin-bottom: 12px; + padding: 0 ($baseline*2) $baseline; + position: relative; + z-index: 2; + + .input-group { + @include clearfix(); + + border-bottom: 1px solid palette(grayscale, back); + box-shadow: 0 1px 0 0 $white-opacity-60; + margin-bottom: ($baseline*1.5); + padding-bottom: ($baseline/2); + } + + label { + color: $text-color; + font: { + family: $font-family-serif; + style: italic; } - form { - margin-bottom: 12px; - padding: 0 ($baseline*2) $baseline; - position: relative; - z-index: 2; - - .input-group { - @include clearfix(); - border-bottom: 1px solid palette(grayscale, back); - box-shadow: 0 1px 0 0 $white-opacity-60; - margin-bottom: ($baseline*1.5); - padding-bottom: ($baseline/2); - } - - label { - color: $text-color; - font: { - family: $font-family-serif; - style: italic; - } - line-height: 1.6; - - &.field-error { - display: block; - color: palette(error, text); - - + input, - + textarea { - border: 1px solid palette(error, accent); - color: palette(error, text); - } - } - } - - input[type="checkbox"] { - @include margin-right($baseline/4); - } - - textarea { - background: $white; - display: block; - height: 45px; - margin-bottom: $baseline; - width: 100%; - } - - input[type="email"], - input[type="text"], - input[type="password"] { - background: $white; - display: block; - height: 45px; - margin-bottom: $baseline; - width: 100%; - } - - .submit { - padding-top: ($baseline/2); - - input[type="submit"] { - @extend .btn-brand; - display: block; - height: auto; - margin: 0 auto; - width: 100%; - white-space: normal; - } - } + line-height: 1.6; + + &.field-error { + display: block; + color: palette(error, text); + + + input, + + textarea { + border: 1px solid palette(error, accent); + color: palette(error, text); + } } + } - .close-modal { - @include transition(all 0.15s ease-out 0s); - border-radius: 2px; - cursor: pointer; - display: inline-block; - padding: 10px; - position: absolute; - right: 2px; - top: 0; - z-index: z-index(front); - color: $lighter-base-font-color; - font: { - size: font-size(large); - family: $font-family-sans-serif; - } - line-height: 1; - text-align: center; - border: none; - background: transparent; - text-shadow: none; - letter-spacing: 0; - text-transform: none; - - &:hover, - &:focus { - color: $base-font-color; - text-decoration: none; - opacity: 0.8; - } - - &:focus { - border: none !important; - } + input[type="checkbox"] { + @include margin-right($baseline/4); + } + + textarea { + background: $white; + display: block; + height: 45px; + margin-bottom: $baseline; + width: 100%; + } + + input[type="email"], + input[type="text"], + input[type="password"] { + background: $white; + display: block; + height: 45px; + margin-bottom: $baseline; + width: 100%; + } + + .submit { + padding-top: ($baseline/2); + + input[type="submit"] { + @extend .btn-brand; + + display: block; + height: auto; + margin: 0 auto; + width: 100%; + white-space: normal; } + } } - #help_wrapper, - #feedback_form_wrapper, - .discussion-alert-wrapper { - padding: 0 ($baseline*1.5) ($baseline*1.5); + .close-modal { + @include transition(all 0.15s ease-out 0s); + + border-radius: 2px; + cursor: pointer; + display: inline-block; + padding: 10px; + position: absolute; + right: 2px; + top: 0; + z-index: z-index(front); + color: $lighter-base-font-color; + font: { + size: font-size(large); + family: $font-family-sans-serif; + } + + line-height: 1; + text-align: center; + border: none; + background: transparent; + text-shadow: none; + letter-spacing: 0; + text-transform: none; + + &:hover, + &:focus { + color: $base-font-color; + text-decoration: none; + opacity: 0.8; + } + + &:focus { + border: none !important; + } + } + } - header { - @include padding-left(0); - @include padding-right(0); - margin-bottom: $baseline; - } + #help_wrapper, + #feedback_form_wrapper, + .discussion-alert-wrapper { + padding: 0 ($baseline*1.5) ($baseline*1.5); - .note { - font: { - size: font-size(x-small); - family: $font-family-sans-serif; - } - line-height: 1.475; - margin-top: ($baseline/2); - color: $lighter-base-font-color; - } + header { + @include padding-left(0); + @include padding-right(0); + + margin-bottom: $baseline; } - .tip { - font-size: font-size(x-small); - display: block; - color: $dark-gray; + .note { + font: { + size: font-size(x-small); + family: $font-family-sans-serif; + } + + line-height: 1.475; + margin-top: ($baseline/2); + color: $lighter-base-font-color; } + } + + .tip { + font-size: font-size(x-small); + display: block; + color: $dark-gray; + } } .leanModal_box { - @extend .modal; + @extend .modal; } diff --git a/lms/static/sass/shared-v2/_navigation.scss b/lms/static/sass/shared-v2/_navigation.scss index cf604ab96ad..450286ea250 100644 --- a/lms/static/sass/shared-v2/_navigation.scss +++ b/lms/static/sass/shared-v2/_navigation.scss @@ -2,22 +2,22 @@ // skip navigation .nav-skip { - font-size: font-size(small); - display: inline-block; - position: absolute; - left: 0; - top: -($baseline*30); - overflow: hidden; - background: $white; - border-bottom: 1px solid $lms-border-color; - padding: ($baseline*0.75) ($baseline/2); + font-size: font-size(small); + display: inline-block; + position: absolute; + left: 0; + top: -($baseline*30); + overflow: hidden; + background: $white; + border-bottom: 1px solid $lms-border-color; + padding: ($baseline*0.75) ($baseline/2); - &:focus, - &:active { - position: relative; - top: auto; - width: auto; - height: auto; - margin: 0; - } + &:focus, + &:active { + position: relative; + top: auto; + width: auto; + height: auto; + margin: 0; + } } diff --git a/lms/static/sass/shared/_alerts_pattern_library_shim.scss b/lms/static/sass/shared/_alerts_pattern_library_shim.scss index a5e17c993ae..63b1cd15473 100644 --- a/lms/static/sass/shared/_alerts_pattern_library_shim.scss +++ b/lms/static/sass/shared/_alerts_pattern_library_shim.scss @@ -43,155 +43,158 @@ $bp-screen-md: 768px !default; // #UTILITIES // ---------------------------- @mixin alert($shim-alert-color, $shim-alert-color-glow) { - border: 1px solid $shim-alert-color; - box-shadow: inset 0 0 0 4px $shim-alert-color-glow; + border: 1px solid $shim-alert-color; + box-shadow: inset 0 0 0 4px $shim-alert-color-glow; - .alert-icon { - color: $white; - background-color: $shim-alert-color; - } + .alert-icon { + color: $white; + background-color: $shim-alert-color; + } } @mixin alert-message($width) { - box-sizing: border-box; + box-sizing: border-box; - @media (min-width: $bp-screen-md) { - @include float(left); - width: $width; - padding: $spacing-vertical-small; - padding-top: 0; - padding-bottom: 0; - } + @media (min-width: $bp-screen-md) { + @include float(left); - :last-child { - // keeps the message compact - margin-bottom: 0; - } + width: $width; + padding: $spacing-vertical-small; + padding-top: 0; + padding-bottom: 0; + } + + :last-child { + // keeps the message compact + margin-bottom: 0; + } } // everything below here gets added specificity pattern-library-shim .pattern-library-shim { - // ---------------------------- - // #GENERAL - // ---------------------------- - &.alert { - background-color: $white; - border: 1px solid $palette-grey-accent; + // ---------------------------- + // #GENERAL + // ---------------------------- + &.alert { + background-color: $white; + border: 1px solid $palette-grey-accent; + padding: $spacing-vertical-small $spacing-horizontal-base; + box-shadow: inset 0 0 0 4px $palette-grey-back; + overflow: auto; + + &.alert-slim { + padding: $spacing-vertical-x-small; + + .alert-message { padding: $spacing-vertical-small $spacing-horizontal-base; - box-shadow: inset 0 0 0 4px $palette-grey-back; - overflow: auto; - - &.alert-slim { - padding: $spacing-vertical-x-small; - - .alert-message { - padding: $spacing-vertical-small $spacing-horizontal-base; - font-size: $font-size-small; + font-size: $font-size-small; - .copy { - margin-bottom: 0; - } - } + .copy { + margin-bottom: 0; } + } + } - &.alert-tiny { - padding: $spacing-vertical-x-small; + &.alert-tiny { + padding: $spacing-vertical-x-small; - .alert-message { - padding: $spacing-vertical-x-small $spacing-horizontal-small; - font-size: $font-size-small; + .alert-message { + padding: $spacing-vertical-x-small $spacing-horizontal-small; + font-size: $font-size-small; - .copy { - margin-bottom: 0; + .copy { + margin-bottom: 0; - .icon { - display: inline-block; - margin-right: $baseline; - } - } - } + .icon { + display: inline-block; + margin-right: $baseline; + } } + } } + } - .alert-icon { - // hide icons on small screens - display: none; - - @media (min-width: $bp-screen-md) { - @include float(left); - display: block; + .alert-icon { + // hide icons on small screens + display: none; - // create a circle around the icon - border-radius: 50%; + @media (min-width: $bp-screen-md) { + @include float(left); - // create room around the icon for the circle - padding: $spacing-vertical-x-small; - } - } + display: block; - .alert-message-with-action { - // provide room for the action to be displayed next to the alert message - @include alert-message(70%); - } + // create a circle around the icon + border-radius: 50%; - .alert-message { - @include alert-message(90%); + // create room around the icon for the circle + padding: $spacing-vertical-x-small; } + } - .alert-title { - @extend %hd-5; - @extend %headings-emphasized; + .alert-message-with-action { + // provide room for the action to be displayed next to the alert message + @include alert-message(70%); + } - @media (min-width: $bp-screen-md) { - // shift the section up to make the alert more compact - margin-top: - $spacing-vertical-x-small; - } - - } + .alert-message { + @include alert-message(90%); + } - .alert-copy { - @extend %copy-base; + .alert-title { + @extend %hd-5; + @extend %headings-emphasized; - @media (min-width: $bp-screen-md) { - // shift the message down to be in line with the icon - margin-top: $spacing-vertical-xx-small; - } + @media (min-width: $bp-screen-md) { + // shift the section up to make the alert more compact + margin-top: - $spacing-vertical-x-small; } - .alert-copy-with-title { - @extend %copy-base; - } + } - .alert-action { - width: 100%; + .alert-copy { + @extend %copy-base; - @media (min-width: $bp-screen-md) { - @include float(right); - width: inherit; - } + @media (min-width: $bp-screen-md) { + // shift the message down to be in line with the icon + margin-top: $spacing-vertical-xx-small; } + } - // ---------------------------- - // #INDIVIDUAL CASES - // ---------------------------- - - // information-based alert - &.alert-information { - @include alert($palette-brand-accent, $palette-brand-back); - } + .alert-copy-with-title { + @extend %copy-base; + } - // warning-based alert - &.alert-warning { - @include alert($palette-warning-accent, $palette-warning-back); - } + .alert-action { + width: 100%; - // error-based alert - &.alert-error { - @include alert($palette-error-accent, $palette-error-back); - } + @media (min-width: $bp-screen-md) { + @include float(right); - // success-based alert - &.alert-success { - @include alert($palette-success-accent, $palette-success-back); + width: inherit; } + } + + // ---------------------------- + // #INDIVIDUAL CASES + // ---------------------------- + + // information-based alert + &.alert-information { + @include alert($palette-brand-accent, $palette-brand-back); + } + + // warning-based alert + &.alert-warning { + @include alert($palette-warning-accent, $palette-warning-back); + } + + // error-based alert + &.alert-error { + @include alert($palette-error-accent, $palette-error-back); + } + + // success-based alert + &.alert-success { + @include alert($palette-success-accent, $palette-success-back); + } } diff --git a/lms/static/sass/shared/_course_filter.scss b/lms/static/sass/shared/_course_filter.scss index 3b6aafca58a..53de8cabee5 100644 --- a/lms/static/sass/shared/_course_filter.scss +++ b/lms/static/sass/shared/_course_filter.scss @@ -3,13 +3,18 @@ nav { @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); + box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), inset 0 0 0 -1px rgba(255,255,255, 0.4); + @include box-sizing(border-box); + border: 1px solid rgb(190,190,190); border-bottom-color: rgb(200,200,200); border-top: none; + @include border-bottom-radius(4px); @include clearfix(); + height: 60px; padding: 12px 10px; position: relative; @@ -19,7 +24,7 @@ box-shadow: 0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4); max-width: 1200px; position: fixed; - top: 0px; + top: 0; width: flex-grid(12); } @@ -30,8 +35,11 @@ .filter-heading { @include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%)); + border-radius: 4px; + @include box-sizing(border-box); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6); border: 1px solid rgb(200,200,200); color: $base-font-color; @@ -47,10 +55,10 @@ ul { background: rgb(255,255,255); - border-radius: 0px 4px 4px 4px; + border-radius: 0 4px 4px 4px; border: 1px solid rgb(200,200,200); box-shadow: 0 2px 15px 0 $shadow; - padding: 20px 0px 5px 20px; + padding: 20px 0 5px 20px; position: absolute; visibility: hidden; width: 200px; @@ -65,8 +73,10 @@ &:hover, &:focus { .filter-heading { background: rgb(255,255,255); + @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255))); - border-radius: 4px 4px 0px 0px; + + border-radius: 4px 4px 0 0; border-bottom: 1px dotted rgb(200,200,200); box-shadow: 0 2px 0 -1px rgb(255,255,255); color: $base-font-color; @@ -83,14 +93,14 @@ float: right; input[type="text"] { - border-radius: 3px 0px 0px 3px; + border-radius: 3px 0 0 3px; float: left; height: 36px; width: 200px; } input[type="submit"] { - border-radius: 0px 3px 3px 0px; + border-radius: 0 3px 3px 0; float: left; height: 36px; padding: 2px 20px; diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index 18848679b6a..9bac04d6892 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -1,11 +1,14 @@ .highlighted-courses, .find-courses { .courses { @include clearfix(); + padding: ($baseline*2) 0 ($baseline*0.75) ; .university-column { width: flex-grid(4); + @include margin-right(flex-gutter()); + float: left; &:nth-child(3n+3) { @@ -17,15 +20,19 @@ background: $body-bg; border: 1px solid $border-color-1; border-radius: 2px; + @include box-sizing(border-box); + box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9); margin-bottom: ($baseline*1.5); position: relative; width: 100%; + @include transition(all 0.15s linear 0s); .status { @extend %ui-depth3; + background: $link-color; color: white; font-size: 10px; @@ -37,7 +44,7 @@ top: -6px; } - .status:after { + .status::after { border-bottom: 6px solid shade($link-color, 50%); border-right: 6px solid transparent; content: ""; @@ -62,11 +69,16 @@ background: $dark-trans-bg; bottom: 6px; border: 1px solid rgba(0,0,0, 0.5); + @include border-right-radius(2px); + box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15); + @include clearfix(); + position: absolute; right: -4px; + @include transition(all 0.15s linear 0s); p { @@ -86,90 +98,96 @@ } header.course-preview { - left: 0px; + left: 0; position: absolute; - top: 0px; + top: 0; width: 100%; z-index: 3; // > a { - @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85))); - box-shadow: inset 0 -1px 0 0 rgba(255,255,255, 0.2); - border-bottom: 1px solid rgba(150,150,150, 0.7); - display: block; - height: 50px; - - &:hover, &:focus { - @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8))); - text-decoration: none; - - .info-link { - color: $link-color; - opacity: 1.0; - } + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85))); - h2 { - color: $link-color; - } - } + box-shadow: inset 0 -1px 0 0 rgba(255,255,255, 0.2); + border-bottom: 1px solid rgba(150,150,150, 0.7); + display: block; + height: 50px; - .heading-group { - left: 0px; - padding: 0px 10px; - position: absolute; - right: 60px; - top: 0px; - - h2 { - color: $base-font-color; - display: table-cell; - font-family: $sans-serif; - font-size: 0.8em; - font-weight: 700; - height: 48px; - letter-spacing: 0px; - margin-bottom: 0px; - padding-top: 0px; - text-shadow: 0 1px rgba(255,255,255, 0.6); - text-overflow: ellipsis; - text-transform: none; - vertical-align: middle; + &:hover, &:focus { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8))); - .course-number { - font-weight: 700; - text-transform: none; - } - } - } + text-decoration: none; .info-link { - border-left: 1px solid rgba(150,150,150, 0.5); - @include box-sizing(border-box); + color: $link-color; + opacity: 1; + } + + h2 { + color: $link-color; + } + } + + .heading-group { + left: 0; + padding: 0 10px; + position: absolute; + right: 60px; + top: 0; + + h2 { color: $base-font-color; - display: inline-block; - font: bold 1.6em/1.2em $sans-serif; - height: 100%; - opacity: 0.6; - padding-top: ($baseline/2); - position: absolute; - right: 0px; - text-align: center; + display: table-cell; + font-family: $sans-serif; + font-size: 0.8em; + font-weight: 700; + height: 48px; + letter-spacing: 0; + margin-bottom: 0; + padding-top: 0; text-shadow: 0 1px rgba(255,255,255, 0.6); - top: 0px; - width: 60px; + text-overflow: ellipsis; + text-transform: none; vertical-align: middle; + + .course-number { + font-weight: 700; + text-transform: none; + } } + } + .info-link { + border-left: 1px solid rgba(150,150,150, 0.5); + + @include box-sizing(border-box); + + color: $base-font-color; + display: inline-block; + font: bold 1.6em/1.2em $sans-serif; + height: 100%; + opacity: 0.6; + padding-top: ($baseline/2); + position: absolute; + right: 0; + text-align: center; + text-shadow: 0 1px rgba(255,255,255, 0.6); + top: 0; + width: 60px; + vertical-align: middle; } + + } // } .info { background: $content-wrapper-bg; height: 220px + 130px; - left: 0px; + left: 0; position: absolute; - top: 0px; + top: 0; + @include transition(all 0.15s linear 0s); + width: 100%; overflow: hidden; @@ -187,6 +205,7 @@ .desc { @include box-sizing(border-box); + height: 120px; overflow: hidden; padding: 10px 10px 12px 10px; @@ -205,7 +224,8 @@ .bottom { @include box-sizing(border-box); - padding: 0px 10px 10px 10px; + + padding: 0 10px 10px 10px; width: 100%; .university { @@ -244,6 +264,7 @@ width: flex-grid(4); margin-right: flex-gutter(); float: left; + &:nth-child(3n+3) { margin-right: 0; } diff --git a/lms/static/sass/shared/_fields.scss b/lms/static/sass/shared/_fields.scss index e2d3e8a022b..d58464335dd 100644 --- a/lms/static/sass/shared/_fields.scss +++ b/lms/static/sass/shared/_fields.scss @@ -3,142 +3,145 @@ .u-field { - padding: $baseline 0; - border-bottom: 1px solid $gray-l5; - border: 1px dashed transparent; + padding: $baseline 0; + border-bottom: 1px solid $gray-l5; + border: 1px dashed transparent; - &.mode-placeholder { - border: 2px dashed transparent; - border-radius: 3px; + &.mode-placeholder { + border: 2px dashed transparent; + border-radius: 3px; - span { - color: $gray-d1; - } + span { + color: $gray-d1; + } - &:hover { - border: 2px dashed $link-color; + &:hover { + border: 2px dashed $link-color; - span { - color: $link-color; - } - } + span { + color: $link-color; + } } + } - &.editable-toggle.mode-display:hover { - background-color: $m-blue-l4; - border-radius: 3px; - - .message-can-edit { - display: inline-block; - color: $link-color; - } + &.editable-toggle.mode-display:hover { + background-color: $m-blue-l4; + border-radius: 3px; + .message-can-edit { + display: inline-block; + color: $link-color; } - &.mode-hidden { - display: none; - } + } - i { - color: $gray-l2; - vertical-align:text-bottom; - @include margin-right(5px); - } + &.mode-hidden { + display: none; + } - .message-can-edit { - display: none; - } + i { + color: $gray-l2; + vertical-align:text-bottom; - .message-error { - color: $alert-color; - } + @include margin-right(5px); + } - .message-validation-error { - color: $warning-color; - } + .message-can-edit { + display: none; + } - .message-in-progress { - color: $gray-d2; - } + .message-error { + color: $alert-color; + } - .message-success { - color: $success-color; - } + .message-validation-error { + color: $warning-color; + } + + .message-in-progress { + color: $gray-d2; + } + + .message-success { + color: $success-color; + } } .u-field-readonly { - input[type="text"], - input[type="text"]:focus { - background-color: transparent; - padding: 0; - border: none; - box-shadow: none; - } + input[type="text"], + input[type="text"]:focus { + background-color: transparent; + padding: 0; + border: none; + box-shadow: none; + } } .u-field-icon { - width: $baseline; - color: $gray-l2; + width: $baseline; + color: $gray-l2; } .u-field-title { - width: flex-grid(3, 12); - display: inline-block; - color: $gray-d1; - vertical-align: top; - margin-bottom: 0; - -webkit-font-smoothing: antialiased; - - label, span { - @include margin-left($baseline/2); - } + width: flex-grid(3, 12); + display: inline-block; + color: $gray-d1; + vertical-align: top; + margin-bottom: 0; + -webkit-font-smoothing: antialiased; + + label, span { + @include margin-left($baseline/2); + } } .u-field-value { - width: flex-grid(3, 12); - display: inline-block; - vertical-align: top; + width: flex-grid(3, 12); + display: inline-block; + vertical-align: top; - select, input { - width: 100%; - } + select, input { + width: 100%; + } } .u-field-message { - @extend %t-copy-sub1; - @include padding-left($baseline/2); - width: flex-grid(6, 12); - display: inline-block; - vertical-align: top; - color: $gray-l1; - - i { - @include margin-right($baseline/4); - } + @extend %t-copy-sub1; - .u-field-message-help, - .u-field-message-notification { - color: $gray; - } -} + @include padding-left($baseline/2); -.u-field-dropdown { - &.mode-display select, &.mode-placeholder select { - display: none; - } + width: flex-grid(6, 12); + display: inline-block; + vertical-align: top; + color: $gray-l1; - button.u-field-value-display, button.u-field-value-display:active, button.u-field-value-display:focus, button.u-field-value-display:hover{ - border-color: transparent; - background: transparent; - padding: 0; - box-shadow: none; - font-size: inherit; - font-weight: inherit; - text-shadow: none; - } + i { + @include margin-right($baseline/4); + } + .u-field-message-help, + .u-field-message-notification { + color: $gray; + } +} - &.mode-edit button.u-field-value-display { - display: none; - } +.u-field-dropdown { + &.mode-display select, &.mode-placeholder select { + display: none; + } + + button.u-field-value-display, button.u-field-value-display:active, button.u-field-value-display:focus, button.u-field-value-display:hover { + border-color: transparent; + background: transparent; + padding: 0; + box-shadow: none; + font-size: inherit; + font-weight: inherit; + text-shadow: none; + } + + + &.mode-edit button.u-field-value-display { + display: none; + } } diff --git a/lms/static/sass/shared/_footer-edx.scss b/lms/static/sass/shared/_footer-edx.scss index 9da43b62ad1..51b51627a9b 100644 --- a/lms/static/sass/shared/_footer-edx.scss +++ b/lms/static/sass/shared/_footer-edx.scss @@ -30,6 +30,7 @@ footer#footer-edx-v3 { p { @include font-size(14); @include line-height(14); + font-family: $sans-serif; } @@ -43,6 +44,7 @@ footer#footer-edx-v3 { @include font-size(14); @include line-height(14); @include margin-right(20px); + color: $edx-footer-link-color; &:last-of-type { @@ -77,6 +79,7 @@ footer#footer-edx-v3 { .openedx-link { @include margin(10px, 0, 30px, -8px); + width: 141px; a { @@ -92,15 +95,16 @@ footer#footer-edx-v3 { .legal-links, .social-media-links, .mobile-app-links { - @extend %ui-no-list; + @extend %ui-no-list; - .list-item { - display: inline-block; - } + .list-item { + display: inline-block; + } } .mobile-app-links { @include clearfix(); + position: relative; width: 260px; height: 42px; @@ -108,6 +112,7 @@ footer#footer-edx-v3 { .social-media-links { @include clearfix(); + margin-bottom: 30px; } @@ -122,6 +127,7 @@ footer#footer-edx-v3 { @include margin(0, 0, 10px, 10px); @include font-size(28); @include line-height(28); + width: 35px; height: 30px; line-height: 1; @@ -142,7 +148,6 @@ footer#footer-edx-v3 { } .app-link { - &:first-of-type { @include left(0); } @@ -171,11 +176,12 @@ footer#footer-edx-v3 { .openedx-link { margin: 0; + @include float(right); } } - @include media( $edx-bp-large ) { + @include media($edx-bp-large) { padding: 20px 10px; .site-details { @@ -196,7 +202,7 @@ footer#footer-edx-v3 { } } - @include media( $edx-bp-huge ) { + @include media($edx-bp-huge) { .footer-logo { @include span-columns(2); } diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 987a0e395d3..b470dd3b8e7 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -5,6 +5,7 @@ .wrapper-footer { @extend %ui-print-excluded; + box-shadow: 0 -1px 5px 0 $shadow-l1; border-top: 1px solid tint($m-gray, 50%); padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2); @@ -15,6 +16,7 @@ @include clearfix(); @include box-sizing(border-box); @include outer-container; + margin: 0 auto; p, ol, ul { @@ -28,6 +30,7 @@ a { @include transition(link-color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s); + border-bottom: none; color: $link-color; text-decoration: none !important; @@ -57,10 +60,12 @@ .nav-colophon { @include clearfix(); + margin: $footer_margin; li { @include float(left); + margin-right: ($baseline*0.75); a { @@ -121,6 +126,7 @@ margin: -2px 0 8px 0; font-size: em(11); color: $gray; // WCAG 2.0 AA requirements + @include text-align(left); } @@ -132,7 +138,7 @@ display: inline-block; font-size: em(11); - &:not(:first-child) a:before { + &:not(:first-child) a::before { margin-right: ($baseline/4); content: "-"; } @@ -168,6 +174,7 @@ .footer-about-openedx { @include span-columns(4); @include text-align(right); + vertical-align: bottom; @include media($bp-small) { @@ -180,6 +187,7 @@ a { @include float(right); + display: inline-block; &:hover { @@ -212,7 +220,6 @@ // marketing site design syncing .view-register, .view-login, .view-passwordreset { - .wrapper-footer footer { width: 960px; diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss index 74c9d9ffe12..ae7e9b57456 100644 --- a/lms/static/sass/shared/_forms.scss +++ b/lms/static/sass/shared/_forms.scss @@ -15,7 +15,7 @@ label { font-size: 12px; line-height: 1.5em; font-weight: normal; - width: calc( 100% - 25px ); + width: calc(100% - 25px); padding-top: 2px; position: relative; float: right; @@ -33,7 +33,9 @@ input[type="tel"] { border: 1px solid $border-color-2; border-radius: 3px; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1; + @include box-sizing(border-box); + font: italic 300 1rem/1.6rem $serif; height: 35px; padding: ($baseline/4) 12px; @@ -58,7 +60,9 @@ input[type="submit"], input[type="button"], button,.button { border-radius: 3px; + @include button(shiny, $button-color); + font: normal 1.2rem/1.6rem $sans-serif; letter-spacing: 1px; padding: 4px 20px; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 6eabedef18c..c9f16a17d6c 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -3,6 +3,7 @@ .header-global { @extend %ui-depth1; + border-bottom: 1px solid $header-border-color; box-shadow: 0 1px 5px 0 $shadow-l1; background: $header-bg; @@ -12,6 +13,7 @@ .wrapper-header { @include clearfix(); + height: 40px; margin: 0 auto; padding: 18px ($baseline/2) 0; @@ -25,6 +27,7 @@ .logo { @include float(left); @include margin(-2px, 39px, 0, 0); + position: relative; a { @@ -35,6 +38,7 @@ nav { @include clearfix(); + height: 40px; margin: 0 auto; padding: 18px ($baseline/2) 0; @@ -91,8 +95,11 @@ > a { @include background-image($button-bg-image); + background-color: $button-bg-color; + @include box-sizing(border-box); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); color: $base-font-color; display: inline-block; @@ -118,12 +125,15 @@ .user { @include float(right); + @extend %ui-print-excluded; + padding-left: 0; margin: 0; .settings-language-form { margin: 4px; + .language-selector { width: 120px; } @@ -131,7 +141,9 @@ > .primary { display: block; + @include float(left); + margin: 0; position: relative; @@ -147,7 +159,9 @@ &.shopping-cart { border-radius: 4px; border: 1px solid $border-color-2; + @include margin-right(10px); + padding-bottom: 6px; } } @@ -171,8 +185,10 @@ .icon { display: inline-block; + @include float(left); @include margin(2px, 6px, -3px, 3px); + font-size: 1.2em; color: $m-gray; } @@ -202,7 +218,9 @@ margin-top: 0; padding: 5px 10px; position: absolute; + @include right(0px); + top: 37px; min-width: 120px; z-index: 3; @@ -219,15 +237,18 @@ bottom: 6px solid transparent; left: 6px solid transparent; } + box-shadow: 1px 0 0 0 $gray-l3, 0 -1px 0 0 $gray-l3; content: ""; display: block; - height: 0px; + height: 0; position: absolute; + @include transform(rotate(-45deg)); @include right(7px); + top: -5px; - width: 0px; + width: 0; } li { @@ -243,15 +264,19 @@ > a { border: 1px solid transparent; border-radius: 3px; + @include box-sizing(border-box); + color: $link-color; cursor: pointer; display: block; - margin: 5px 0px; + margin: 5px 0; overflow: hidden; padding: 3px 5px 4px; text-overflow: ellipsis; + @include transition(padding 0.15s linear 0s); + white-space: nowrap; width: 100%; @@ -267,27 +292,35 @@ .nav-global { margin-top: ($baseline/2); list-style: none; + @include float(left); + .tab-nav-item{ display: flex; - margin: 0px; + margin: 0; text-transform: none; + @include float(left); + justify-content: center; + .tab-nav-link{ font-size: em(16); color: $gray; padding: 5px 25px 23px; display: inline-block; + &:hover, &:focus{ border-bottom: 4px solid $courseware-border-bottom-color; } } + .active{ border-bottom: 4px solid $black-t3 !important; } } + li, div { display: inline-block; @@ -314,7 +347,6 @@ } &.active { - a { text-decoration: none; color: $link-color; @@ -330,6 +362,7 @@ .nav-courseware { @include float(right); + list-style: none; li, div { @@ -344,7 +377,6 @@ // marketing site design syncing .view-register, .view-login, .view-passwordreset { - .header-global nav { width: 960px; } @@ -367,8 +399,10 @@ // CASE: marketing/course discovery .header-global-new { @extend %ui-depth1; + /* Temp. fix until applied globally */ @include box-sizing(border-box); + position: relative; width: 100%; border-bottom: 1px solid $gray-l1; @@ -378,6 +412,7 @@ .wrapper-header { @include clearfix(); @include box-sizing(border-box); + height: 74px; margin: 0 auto; padding: 17px 0; @@ -390,6 +425,7 @@ .logo { @include float(left); + margin: -2px 39px 0 10px; position: relative; @@ -400,22 +436,28 @@ .nav-global { @include float(left); + .tab-nav-item{ display: flex; - margin: 0px; + margin: 0; text-transform: none; + @include float(left); + justify-content: center; + .tab-nav-link{ font-size: em(16); color: $gray; display: inline-block; padding: 5px 25px 19px; + &:hover, &:focus{ border-bottom: 4px solid $courseware-border-bottom-color; } } + .active{ border-bottom: 4px solid $black-t3 !important; } @@ -475,8 +517,11 @@ > a { @include background-image($button-bg-image); + background-color: $button-bg-color; + @include box-sizing(border-box); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); color: $base-font-color; font-family: $header-sans-serif; @@ -501,17 +546,22 @@ .user { @include float(right); + margin-top: 0; > .primary { display: block; + @include float(left); + margin: 0; position: relative; > a { margin: 0; + @include border-right-radius(0); + background-image: none; } @@ -519,6 +569,7 @@ > a { @include border-radius(0, 4px, 4px, 0); @include border-left(none); + padding: ($baseline/2) ($baseline/2); &.shopping-cart { @@ -530,6 +581,7 @@ } } } + .user-link { padding: 0; position: relative; @@ -545,8 +597,10 @@ .icon { display: inline-block; + @include float(left); @include margin(2px, 6px, -3px, 3px); + font-size: 1.2em; color: $m-gray; } @@ -576,7 +630,9 @@ margin-top: 0; padding: 5px 10px; position: absolute; + @include right(0); + top: 34px; width: 170px; z-index: 3; @@ -593,15 +649,18 @@ bottom: 6px solid transparent; left: 6px solid transparent; } + box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3; content: ""; display: block; - height: 0px; + height: 0; position: absolute; + @include transform(rotate(-45deg)); @include right(7px); + top: -6px; - width: 0px; + width: 0; } li { @@ -617,15 +676,19 @@ > a { border: 1px solid transparent; border-radius: 3px; + @include box-sizing(border-box); + color: $link-color; cursor: pointer; display: block; - margin: 5px 0px; + margin: 5px 0; overflow: hidden; padding: 3px 5px 4px; text-overflow: ellipsis; + @include transition(padding 0.15s linear 0s); + white-space: nowrap; width: 100%; @@ -641,6 +704,7 @@ %default-header-nav { margin-top: ($baseline/4); list-style: none; + @include float(left); li, @@ -674,6 +738,7 @@ .nav-courseware { @extend %default-header-nav; + @include float(right); div { @@ -711,6 +776,7 @@ .mobile-menu-button { @include float(left); + display: inline; text-decoration: none; color: $m-gray; @@ -727,7 +793,9 @@ .logo { position: absolute; top: 20px; + @include left(calc(50% - 90px)); + width: 54px; img { @@ -755,7 +823,7 @@ .nav-global { position: absolute; top: 73px; - left: calc( 50% - 160px ); + left: calc(50% - 160px); z-index: 1000; width: 320px; background: $m-blue-d3; @@ -791,7 +859,7 @@ } } - @include media( $edx-bp-large ) { + @include media($edx-bp-large) { .wrapper-header { width: 100%; min-width: 800px; @@ -804,7 +872,9 @@ .logo { position: relative; top: 0; + @include left(0); + width: auto; img { @@ -854,7 +924,7 @@ } } - @include media( $edx-bp-huge ) { + @include media($edx-bp-huge) { .wrapper-header { padding: 17px 0; } @@ -875,7 +945,6 @@ // marketing site design syncing .view-register, .view-login { - .header-global nav { width: 960px; } @@ -886,7 +955,6 @@ .view-courses .nav-global-02, .view-schools .nav-global-03, .view-register .nav-global-04 { - a { text-decoration: none; color: $link-color !important; @@ -896,6 +964,7 @@ .doc-link { @include float(right); @include margin(($baseline*0.75), ($baseline*0.75), ($baseline*0.75), ($baseline*0.75)); + font-size: 14px; font-weight: bold; color: $base-font-color; diff --git a/lms/static/sass/shared/_help-tab.scss b/lms/static/sass/shared/_help-tab.scss index 7af1407ac01..e7c274bfdd3 100644 --- a/lms/static/sass/shared/_help-tab.scss +++ b/lms/static/sass/shared/_help-tab.scss @@ -1,5 +1,5 @@ .feedback-form-select { - background: $white; - margin-bottom: $baseline; - width: 100%; + background: $white; + margin-bottom: $baseline; + width: 100%; } diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss index f3aacb5e5ca..275396e343d 100644 --- a/lms/static/sass/shared/_modal.scss +++ b/lms/static/sass/shared/_modal.scss @@ -1,24 +1,27 @@ #lean_overlay { - background: transparent; - @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2)); - display: none; - height:100%; - left: 0; - position: fixed; - top: 0; - width:100%; - z-index: 100; + background: transparent; + + @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2)); + + display: none; + height:100%; + left: 0; + position: fixed; + top: 0; + width:100%; + z-index: 100; } .modal { @extend %ui-depth1; + display: none; position: absolute; left: 50%; padding: 8px; width: grid-width(5); border-radius: 3px; - box-shadow: 0 0px 5px 0 $shadow-d1; + box-shadow: 0 0 5px 0 $shadow-d1; background: $gray-d2; color: $base-font-color; @@ -52,6 +55,7 @@ .inner-wrapper { @extend %ui-depth1; + background: $modal-bg-color; border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.9); @@ -69,6 +73,7 @@ header { @extend %ui-depth1; + margin-bottom: ($baseline*1.5); overflow: hidden; padding: 28px $baseline 0; @@ -76,6 +81,7 @@ &::before { @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%)); + content: ""; display: block; height: 400px; @@ -89,6 +95,7 @@ hr { @extend %faded-hr-divider-light; + border: none; margin: 0; position: relative; @@ -96,6 +103,7 @@ &::after { @extend %faded-hr-divider; + bottom: 0; content: ""; display: block; @@ -146,6 +154,7 @@ .input-group { @include clearfix(); + border-bottom: 1px solid rgb(210,210,210); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); margin-bottom: ($baseline*1.5); @@ -157,11 +166,11 @@ &.field-error { display: block; - color: #8F0E0E; + color: #8f0e0e; + input, + textarea { - border: 1px solid #CA1111; - color: #8F0E0E; + border: 1px solid #ca1111; + color: #8f0e0e; } } } @@ -204,7 +213,7 @@ } &.field-error { - border: 1px solid #CA1111; + border: 1px solid #ca1111; } a { @@ -224,7 +233,9 @@ select { width: 100%; + @include box-sizing(border-box); + display: block; } } @@ -285,12 +296,13 @@ padding: 10px; position: absolute; right: 2px; - top: 0px; + top: 0; z-index: 100; color: $lighter-base-font-color; font: normal 1.2rem/1.2rem $sans-serif; text-align: center; text-shadow: 0 1px rgba(255,255,255, 0.8); + @include transition(all 0.15s ease-out 0s); &:hover, &:focus { @@ -312,6 +324,7 @@ .note { @include font-size(12); @include line-height(12); + margin-top: ($baseline/2); color: $lighter-base-font-color; } @@ -358,6 +371,7 @@ .list-actions-item { @extend %t-copy-sub1; + color: $base-font-color; text-align: center; } diff --git a/lms/static/sass/shared/_tooltips.scss b/lms/static/sass/shared/_tooltips.scss index bce8b23e86e..1242053eee7 100644 --- a/lms/static/sass/shared/_tooltips.scss +++ b/lms/static/sass/shared/_tooltips.scss @@ -1,5 +1,5 @@ .ui-tooltip.qtip .ui-tooltip-content { - background: rgba($pink, .8); + background: rgba($pink, 0.8); border: 0; color: $white; font: bold 12px $body-font-family; @@ -16,47 +16,52 @@ @mixin tooltip-hover-style ($margin-top) { p { @extend %ui-depth2; - background: $dark-gray; - border-radius: ($baseline/5); - color: $white; - font-family: $sans-serif; - line-height: lh(); - opacity: 0.0; - padding: 6px; - position: absolute; - text-shadow: 0 -1px 0 $black; - @include transition(all .1s $ease-in-out-quart 0s); - white-space: pre; - visibility: hidden; - pointer-events: none; - right: 0; - - &:empty { - background: none; - - &::after { - display: none; - } - } + + background: $dark-gray; + border-radius: ($baseline/5); + color: $white; + font-family: $sans-serif; + line-height: lh(); + opacity: 0; + padding: 6px; + position: absolute; + text-shadow: 0 -1px 0 $black; + + @include transition(all .1s $ease-in-out-quart 0s); + + white-space: pre; + visibility: hidden; + pointer-events: none; + right: 0; + + &:empty { + background: none; &::after { - background: $dark-gray; - content: " "; - display: block; - height: ($baseline/2); - right: 18px; - position: absolute; - top: ($baseline + ($baseline/4)); - @include transform(rotate(45deg)); - width: ($baseline/2); + display: none; } + } + + &::after { + background: $dark-gray; + content: " "; + display: block; + height: ($baseline/2); + right: 18px; + position: absolute; + top: ($baseline + ($baseline/4)); + + @include transform(rotate(45deg)); + + width: ($baseline/2); + } } &:hover, &:focus { p { display: block; margin-top: $margin-top; - opacity: 1.0; + opacity: 1; visibility: visible; } } diff --git a/lms/static/sass/shared/_unsubscribe.scss b/lms/static/sass/shared/_unsubscribe.scss index c8691231f2f..7bbf62e4758 100644 --- a/lms/static/sass/shared/_unsubscribe.scss +++ b/lms/static/sass/shared/_unsubscribe.scss @@ -4,6 +4,7 @@ h1 { margin-bottom: $baseline; padding: ($baseline/2); + @extend %success-message-colors; } diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss index 8cbdd9df0cd..d6714e83d8b 100644 --- a/lms/static/sass/views/_account-settings.scss +++ b/lms/static/sass/views/_account-settings.scss @@ -9,373 +9,394 @@ // +Container - Account Settings .wrapper-account-settings { - background: $white; - width: 100%; - - .account-settings-container { - max-width: grid-width(12); - padding: 10px; - margin: 0 auto; + background: $white; + width: 100%; + + .account-settings-container { + max-width: grid-width(12); + padding: 10px; + margin: 0 auto; + } + + .ui-loading-indicator, + .ui-loading-error { + @extend .ui-loading-base; + // center horizontally + @include margin-left(auto); + @include margin-right(auto); + + padding: ($baseline*3); + text-align: center; + + .message-error { + color: $alert-color; } + } +} - .ui-loading-indicator, - .ui-loading-error { - @extend .ui-loading-base; - // center horizontally - @include margin-left(auto); - @include margin-right(auto); - padding: ($baseline*3); +// +Main - Header +.wrapper-account-settings { + .wrapper-header { + max-width: grid-width(12); + height: 139px; + border-bottom: 4px solid $m-gray-l4; - text-align: center; + .header-title { + @extend %t-title4; - .message-error { - color: $alert-color; - } + margin-bottom: ($baseline/2); + padding-top: ($baseline*2); } -} -// +Main - Header -.wrapper-account-settings { + .header-subtitle { + color: $gray-l2; + } - .wrapper-header { - max-width: grid-width(12); - height: 139px; - border-bottom: 4px solid $m-gray-l4; + .account-nav { + @include float(left); - .header-title { - @extend %t-title4; - margin-bottom: ($baseline/2); - padding-top: ($baseline*2); - } + margin: ($baseline/2) 0; + padding: 0; + list-style: none; - .header-subtitle { - color: $gray-l2; - } + .account-nav-link { + @include float(left); - .account-nav { - @include float(left); - margin: ($baseline/2) 0; - padding: 0; - list-style: none; - - .account-nav-link { - @include float(left); - font-size: em(14); - color: $gray; - padding: 5px 25px 23px; - display: inline-block; - box-shadow: none; - border: none; - border-radius: 0; - background: transparent none; - } + font-size: em(14); + color: $gray; + padding: 5px 25px 23px; + display: inline-block; + box-shadow: none; + border: none; + border-radius: 0; + background: transparent none; + } - button { - @extend %ui-clear-button; - @extend %btn-no-style; - @include appearance(none); - display:block; - padding: ($baseline/4); - - &:hover, - &:focus { - text-decoration: none; - border-bottom: 4px solid $courseware-border-bottom-color !important; - } - &.active{ - border-bottom: 4px solid $black-t3 !important; - } - } + button { + @extend %ui-clear-button; + @extend %btn-no-style; + + @include appearance(none); + + display:block; + padding: ($baseline/4); + + &:hover, + &:focus { + text-decoration: none; + border-bottom: 4px solid $courseware-border-bottom-color !important; + } + + &.active{ + border-bottom: 4px solid $black-t3 !important; } + } } + } } // +Settings Section .account-settings-sections { - - .section-header { - @extend %t-title5; - @extend %t-strong; - padding-top: ($baseline/2)*3; - color: $dark-gray1; + .section-header { + @extend %t-title5; + @extend %t-strong; + + padding-top: ($baseline/2)*3; + color: $dark-gray1; + } + + .section { + background-color: $white; + margin: $baseline 5% 0; + border-bottom: 4px solid $m-gray-l4; + + .account-settings-header-subtitle { + font-size: em(14); + line-height: normal; + color: $dark-gray; + padding-bottom: 10px; } - .section { - background-color: $white; - margin: $baseline 5% 0; - border-bottom: 4px solid $m-gray-l4; + .account-settings-section-body { + .u-field { + border-bottom: 2px solid $m-gray-l4; + padding: $baseline*0.75 0; + + .field { + width: 30%; + vertical-align: top; + display: inline-block; + position: relative; + + select { + @include appearance(none); + + padding: 14px 30px 14px 15px; + border: 1px solid $light-gray; + background-color: transparent; + border-radius: 2px; + position: relative; + z-index: 10; + + &::-ms-expand{ + display: none; + } - .account-settings-header-subtitle { - font-size: em(14); - line-height: normal; + ~ .icon-caret-down{ + &::after { + content: ""; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 7px solid $blue; + position: absolute; + right: 10px; + bottom: 20px; + z-index: 0; + } + } + } + + .field-label { + display: block; + width: auto; + margin-bottom: 0.625rem; + font-size: 1rem; + line-height: 1; + color: $dark-gray; + } + + .field-input { + @include transition(all 0.125s ease-in-out 0s); + + display: inline-block; + padding: 0.625rem; + border: 1px solid $light-gray; + border-radius: 2px; + background: $white; + font-size: $body-font-size; color: $dark-gray; - padding-bottom: 10px; + width: 100%; + height: 48px; + box-shadow: none; + } + + .u-field-link { + @extend %ui-clear-button; + + // set styles + @extend %btn-pl-default-base; + + @include font-size(18); + + width: 100%; + border: 1px solid $blue; + color: $blue; + padding: 11px 14px; + line-height: normal; + } } - .account-settings-section-body { - - .u-field { - border-bottom: 2px solid $m-gray-l4; - padding: $baseline*0.75 0; - - .field { - width: 30%; - vertical-align: top; - display: inline-block; - position: relative; - - select { - @include appearance(none); - padding: 14px 30px 14px 15px; - border: 1px solid $light-gray; - background-color: transparent; - border-radius: 2px; - position: relative; - z-index: 10; - &::-ms-expand{ - display: none; - } - ~ .icon-caret-down{ - &:after{ - content: ""; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 7px solid $blue; - position: absolute; - right: 10px; - bottom: 20px; - z-index: 0; - } - } - } - .field-label { - display: block; - width: auto; - margin-bottom: 0.625rem; - font-size: 1rem; - line-height: 1; - color: $dark-gray; - } - - .field-input { - @include transition(all 0.125s ease-in-out 0s); - display: inline-block; - padding: 0.625rem; - border: 1px solid $light-gray; - border-radius: 2px; - background: $white; - font-size: $body-font-size; - color: $dark-gray; - width: 100%; - height: 48px; - box-shadow: none; - } - - .u-field-link { - @extend %ui-clear-button; - - // set styles - @extend %btn-pl-default-base; - @include font-size(18); - width: 100%; - border: 1px solid $blue; - color: $blue; - padding: 11px 14px; - line-height: normal; - } - } - - .u-field-order { - display: flex; - align-items: center; - font-size: em(16); - font-weight: 600; - color: $dark-gray; - width: 100%; - padding-top: $baseline; - padding-bottom: $baseline; - line-height: normal; - flex-direction: row; - flex-wrap: wrap; - - span { - padding: $baseline; - } - - .u-field-order-number { - @include float(left); - width: 30%; - } - - .u-field-order-date { - @include float(left); - padding-left: 30px; - width: 20%; - } - - .u-field-order-price { - @include float(left); - width: 15%; - } - - .u-field-order-link { - width: 10%; - padding: 0; - - .u-field-link { - @extend %ui-clear-button; - @extend %btn-pl-default-base; - @include font-size(14); - border: 1px solid $blue; - color: $blue; - line-height: normal; - padding: 10px; - width: 110px; - } - } - } - - .u-field-order-lines { - @extend .u-field-order; - padding: 5px 0 0; - font-weight: 100; - - .u-field-order-number { - padding: 20px 10px 20px 30px; - } - } - - .social-field-linked { - background: $m-gray-l4; - box-shadow: 0 1px 2px 1px $shadow-l2; - padding: 1.25rem; - box-sizing: border-box; - margin: 10px; - width: 100%; - - .field-label { - @include font-size(24); - } - - .u-field-social-help { - display: inline-block; - padding: 20px 0 6px; - } - - .u-field-link { - @include font-size(14); - @include text-align(left); - border: none; - margin-top: $baseline; - font-weight: $font-semibold; - padding: 0; - - &:focus, &:hover, &:active { - background-color: transparent; - color: $m-blue-d3; - border: none; - } - } - } - - .social-field-unlinked { - background: $m-gray-l4; - box-shadow: 0 1px 2px 1px $shadow-l2; - padding: 1.25rem; - box-sizing: border-box; - text-align: center; - margin: 10px; - width: 100%; - - .field-label { - @include font-size(24); - text-align: center; - } - - .u-field-link { - @include font-size(14); - margin-top: $baseline; - font-weight: $font-semibold; - } - } - - .u-field-message { - position: relative; - padding: $baseline*0.75 0 0 ($baseline*4); - width: 60%; - - .u-field-message-notification { - position: absolute; - left: 0; - top: 0; - bottom: 0; - margin: auto; - padding: 38px 0 0 ($baseline*5); - } - } - - &:last-child { - border-bottom: none; - margin-bottom: ($baseline*2); - } - } + .u-field-order { + display: flex; + align-items: center; + font-size: em(16); + font-weight: 600; + color: $dark-gray; + width: 100%; + padding-top: $baseline; + padding-bottom: $baseline; + line-height: normal; + flex-direction: row; + flex-wrap: wrap; + + span { + padding: $baseline; + } + + .u-field-order-number { + @include float(left); - .u-field-readonly .u-field-value { - padding-top: ($baseline/2); - } + width: 30%; + } - .u-field-orderHistory { - border-bottom: none; - border: 1px solid $m-gray-l4; - margin-bottom: $baseline; - padding: 0; + .u-field-order-date { + @include float(left); - &:last-child { - border-bottom: 1px solid $m-gray-l4; - } + padding-left: 30px; + width: 20%; + } - &:hover, &:focus { - background-color: $light-gray4; - } - } + .u-field-order-price { + @include float(left); + + width: 15%; + } - .u-field-order-orderId { - border: none; - margin-top: $baseline; - margin-bottom: 0; - padding-bottom: 0; - - &:hover, &:focus { - background-color: transparent; - } - - .u-field-order { - font-weight: $font-semibold; - padding-top: 0; - padding-bottom: 0; - - .u-field-order-title { - font-size: em(16); - } - } + .u-field-order-link { + width: 10%; + padding: 0; + + .u-field-link { + @extend %ui-clear-button; + @extend %btn-pl-default-base; + + @include font-size(14); + + border: 1px solid $blue; + color: $blue; + line-height: normal; + padding: 10px; + width: 110px; } + } + } - .u-field-social { - border-bottom: none; - margin-right: 20px; - width: 30%; - display: inline-block; - vertical-align: top; - - .u-field-social-help { - @include font-size(12); - color: $m-gray-d1; - } + .u-field-order-lines { + @extend .u-field-order; + + padding: 5px 0 0; + font-weight: 100; + + .u-field-order-number { + padding: 20px 10px 20px 30px; + } + } + + .social-field-linked { + background: $m-gray-l4; + box-shadow: 0 1px 2px 1px $shadow-l2; + padding: 1.25rem; + box-sizing: border-box; + margin: 10px; + width: 100%; + + .field-label { + @include font-size(24); + } + + .u-field-social-help { + display: inline-block; + padding: 20px 0 6px; + } + + .u-field-link { + @include font-size(14); + @include text-align(left); + + border: none; + margin-top: $baseline; + font-weight: $font-semibold; + padding: 0; + + &:focus, &:hover, &:active { + background-color: transparent; + color: $m-blue-d3; + border: none; } + } + } + + .social-field-unlinked { + background: $m-gray-l4; + box-shadow: 0 1px 2px 1px $shadow-l2; + padding: 1.25rem; + box-sizing: border-box; + text-align: center; + margin: 10px; + width: 100%; + + .field-label { + @include font-size(24); + + text-align: center; + } + + .u-field-link { + @include font-size(14); + + margin-top: $baseline; + font-weight: $font-semibold; + } + } + + .u-field-message { + position: relative; + padding: $baseline*0.75 0 0 ($baseline*4); + width: 60%; + + .u-field-message-notification { + position: absolute; + left: 0; + top: 0; + bottom: 0; + margin: auto; + padding: 38px 0 0 ($baseline*5); + } } &:last-child { - border-bottom: none; + border-bottom: none; + margin-bottom: ($baseline*2); } + } + + .u-field-readonly .u-field-value { + padding-top: ($baseline/2); + } + + .u-field-orderHistory { + border-bottom: none; + border: 1px solid $m-gray-l4; + margin-bottom: $baseline; + padding: 0; + + &:last-child { + border-bottom: 1px solid $m-gray-l4; + } + + &:hover, &:focus { + background-color: $light-gray4; + } + } + + .u-field-order-orderId { + border: none; + margin-top: $baseline; + margin-bottom: 0; + padding-bottom: 0; + + &:hover, &:focus { + background-color: transparent; + } + + .u-field-order { + font-weight: $font-semibold; + padding-top: 0; + padding-bottom: 0; + + .u-field-order-title { + font-size: em(16); + } + } + } + + .u-field-social { + border-bottom: none; + margin-right: 20px; + width: 30%; + display: inline-block; + vertical-align: top; + + .u-field-social-help { + @include font-size(12); + + color: $m-gray-d1; + } + } + } + + &:last-child { + border-bottom: none; } + } } diff --git a/lms/static/sass/views/_api-access.scss b/lms/static/sass/views/_api-access.scss index ea5e4a6b4ec..afdeb3f564d 100644 --- a/lms/static/sass/views/_api-access.scss +++ b/lms/static/sass/views/_api-access.scss @@ -1,20 +1,24 @@ #api-access-wrapper { - h1 { @extend %t-title4; + margin-bottom: 0; padding: $baseline; + @include text-align(left); } h2 { @extend %t-title5; + margin: $baseline; + @include text-align(left); } p { @extend %t-copy-sub1; + margin: $baseline; } @@ -47,10 +51,10 @@ .api-form-container { @include float(left); + width: 50%; .api-form { - padding: 0 $baseline $baseline $baseline; p { @@ -58,12 +62,14 @@ .helptext { @extend %t-copy-sub1; + display: block; } } label { @extend %t-copy-base; + display: block; font-style: normal; } @@ -74,6 +80,7 @@ input, textarea { @extend %t-copy-base; + font-family: 'Open Sans'; font-style: normal; width: 300px; @@ -81,11 +88,13 @@ &[type=checkbox] { display: inline-block; width: initial; + @include margin-right(0.5*$baseline); } &[type=submit] { @extend %t-copy-base; + border-radius: 3px; border: none; background-color: $blue; @@ -97,12 +106,12 @@ } .errorlist { - padding: 0; list-style-type: none; li { @extend %t-copy-base; + margin: 0; color: $red; } @@ -110,6 +119,7 @@ #api-access-submit, .preview-query { @extend %t-copy-base; + border-radius: 3px; border: none; background-color: $blue; @@ -123,6 +133,7 @@ .preview-results { @include float(right); + width: 50%; } @@ -136,6 +147,7 @@ p { @extend %t-copy-base; + margin: $baseline/2 0; .application-label { diff --git a/lms/static/sass/views/_decoupled-verification.scss b/lms/static/sass/views/_decoupled-verification.scss index e5aee1bebce..210d50c7b97 100644 --- a/lms/static/sass/views/_decoupled-verification.scss +++ b/lms/static/sass/views/_decoupled-verification.scss @@ -1,263 +1,271 @@ // Updates for decoupled verification A/B test .verification-process { - .pay-and-verify, .incourse-reverify, .reverify { - .review { - .title.center-col { - padding: 0 calc( ( 100% - 750px ) / 2 ) 10px; - } - h2 { - font-size: 16px; - font-weight: 600; - text-transform: unset; - color: #4a4a4a; - margin-bottom: 40px; - - .course-title { - display: block; - font-weight: 100; - font-size: 24px; - margin-top: 5px; - } - } + .pay-and-verify, .incourse-reverify, .reverify { + .review { + .title.center-col { + padding: 0 calc((100% - 750px) / 2) 10px; + } + + h2 { + font-size: 16px; + font-weight: 600; + text-transform: unset; + color: #4a4a4a; + margin-bottom: 40px; + + .course-title { + display: block; + font-weight: 100; + font-size: 24px; + margin-top: 5px; } + } + } - .instruction { - &.center-col { - width: 750px; - margin-left: auto; - margin-right: auto; - } - .instruction-info { - font-size: 24px; - font-weight: 100; - color: #57595a; - margin-bottom: 30px; - - .fa-envelope-o { - color: #b92167; - font-size: 26px; - margin-right: 8px; - } - } - .activate { - font-size: 16px; - font-weight: 600; - color: #4a4a4a; - } - .activate-info { - font-size: 16px; - font-weight: 100; - color: #4a4a4a; - } + .instruction { + &.center-col { + width: 750px; + margin-left: auto; + margin-right: auto; + } + + .instruction-info { + font-size: 24px; + font-weight: 100; + color: #57595a; + margin-bottom: 30px; + + .fa-envelope-o { + color: #b92167; + font-size: 26px; + margin-right: 8px; } + } + + .activate { + font-size: 16px; + font-weight: 600; + color: #4a4a4a; + } + + .activate-info { + font-size: 16px; + font-weight: 100; + color: #4a4a4a; + } + } - .payment-info { - padding: 5px 0 30px; + .payment-info { + padding: 5px 0 30px; - .copy { - margin: 20px 0; - } + .copy { + margin: 20px 0; + } + } + + .placeholder-cam { + .copy { + font-weight: bold !important; + } + } + + .requirements-container { + .list-reqs { + .req { + width: 300px; + height: 250px; + min-height: 250px; + margin-right: 45px; + + &:last-of-type { + margin-right: 0; + } } - .placeholder-cam { - .copy { - font-weight: bold !important; - } + &.account-not-activated { + width: 300px; + + .req { + height: 290px; + min-height: 290px; + } } + } + } - .requirements-container { + .no-content { + margin-bottom: 50px; + } - .list-reqs { + .nav-wizard { + &.center { + text-align: center; + } - .req { - width: 300px; - height: 250px; - min-height: 250px; - margin-right: 45px; + .right { + @include float(right); - &:last-of-type { - margin-right: 0; - } - } + padding: 15px 50px; + } - &.account-not-activated { - width: 300px; + .nav-link { + line-height: 45px; + } - .req { - height: 290px; - min-height: 290px; - } - } - } - } + .prompt-verify .title { + @include float(left); + @include text-align(left); - .no-content { - margin-bottom: 50px; - } + width: 600px; + position: relative; + display: inline; + line-height: 45px; + color: black; + } + + .wizard-steps { + width: auto; + } + } - .nav-wizard { - &.center { - text-align: center; - } - - .right { - @include float(right); - padding: 15px 50px; - } - - .nav-link { - line-height: 45px; - } - - .prompt-verify .title { - @include float(left); - @include text-align(left); - width: 600px; - position: relative; - display: inline; - line-height: 45px; - color: black; - } - - .wizard-steps { - width: auto; - } + .photo-controls { + position: relative; + text-align: center; + + .control { + &.control-do { + left: 45%; + left: calc((50%) - (69px / 2)); } - .photo-controls { - position: relative; - text-align: center; - - .control { - &.control-do { - left: 45%; - left: calc( ( 50% ) - ( 69px / 2 ) ); - } - - &.control-retake { - left: 40%; - left: calc( ( 50% ) - ( 131px / 2 ) ); - } - - .action-redo { - line-height: 28px; - } - } + &.control-retake { + left: 40%; + left: calc((50%) - (131px / 2)); } - .retake-photos { - color: $blue; - background:none!important; - border:0!important; - padding:0!important; - box-shadow: none; - cursor: pointer; - - &:hover, &:focus { - text-decoration: underline; - } + .action-redo { + line-height: 28px; } + } + } - .tip { - .is-expandable { - .title-expand { - color: $blue !important; - } - } - - .expandable-area { - margin-top: 5px; - padding-bottom: 20px; - } + .retake-photos { + color: $blue; + background:none!important; + border:0!important; + padding:0!important; + box-shadow: none; + cursor: pointer; + + &:hover, &:focus { + text-decoration: underline; + } + } + + .tip { + .is-expandable { + .title-expand { + color: $blue !important; } + } - .help-tips { - margin-left: 0 !important; + .expandable-area { + margin-top: 5px; + padding-bottom: 20px; + } + } - .title { - font-size: 16px !important; - } + .help-tips { + margin-left: 0 !important; - .list-tips { - .tip { - font-size: 16px; - line-height: 1.5em; - } - } - } + .title { + font-size: 16px !important; + } - .photo-tip { - @extend %t-copy-sub1; - color: black; - margin-bottom: 20px; + .list-tips { + .tip { + font-size: 16px; + line-height: 1.5em; } + } + } - .list-help { - list-style: disc; - @include padding-left($baseline); - } + .photo-tip { + @extend %t-copy-sub1; - .list-faq { - dd { - color: black; - } - } + color: black; + margin-bottom: 20px; + } - .wrapper-task { - .msg-retake { - margin-top: 0; - } + .list-help { + list-style: disc; - .wrapper-photos { - margin-bottom: 0 !important; - } - } + @include padding-left($baseline); + } - .report-course { - .course-actions { - td:last-of-type { - width: 300px; - } - } - } + .list-faq { + dd { + color: black; + } + } - .enrollment-status-footer { - margin: 50px 0; + .wrapper-task { + .msg-retake { + margin-top: 0; + } - h4 { - font-weight: 600; - } + .wrapper-photos { + margin-bottom: 0 !important; + } + } - .verify-pending-msg { - margin: 20px 0; - } + .report-course { + .course-actions { + td:last-of-type { + width: 300px; } + } } - .tooltip { - @include transition(opacity $tmg-f3 ease-out 0s); - @include font-size(12); - position: absolute; - width: 350px; - top: 0; - left: 0; - padding: 10px 20px; - border-radius: 3px; - background: rgba(0, 0, 0, 0.85); - line-height: 26px; - color: $white; - pointer-events: none; - opacity: 0.0; - - &:after { - @include font-size(20); - content: '▾'; - display: block; - position: absolute; - bottom: -14px; - left: 50%; - margin-left: -7px; - color: rgba(0, 0, 0, 0.85); - } + .enrollment-status-footer { + margin: 50px 0; + + h4 { + font-weight: 600; + } + + .verify-pending-msg { + margin: 20px 0; + } + } + } + + .tooltip { + @include transition(opacity $tmg-f3 ease-out 0s); + @include font-size(12); + + position: absolute; + width: 350px; + top: 0; + left: 0; + padding: 10px 20px; + border-radius: 3px; + background: rgba(0, 0, 0, 0.85); + line-height: 26px; + color: $white; + pointer-events: none; + opacity: 0; + + &::after { + @include font-size(20); + + content: '▾'; + display: block; + position: absolute; + bottom: -14px; + left: 50%; + margin-left: -7px; + color: rgba(0, 0, 0, 0.85); } + } } diff --git a/lms/static/sass/views/_financial-assistance.scss b/lms/static/sass/views/_financial-assistance.scss index 5d0e85dcc29..a177625c5e3 100644 --- a/lms/static/sass/views/_financial-assistance.scss +++ b/lms/static/sass/views/_financial-assistance.scss @@ -1,5 +1,6 @@ %fa-copy { @extend %t-copy-base; + padding: ($baseline/2) 0; margin: 0; color: $m-gray-d2; @@ -12,7 +13,9 @@ h1 { @extend %t-title4; + @include text-align(left); + margin: 0; padding: ($baseline/2) 0; border-bottom: 4px solid $gray-l5; @@ -22,12 +25,14 @@ h2 { @extend %t-title6; @extend %t-strong; + margin-top: ($baseline/2); text-transform: none; } p { @extend %fa-copy; + font-size: 0.875em; } @@ -53,6 +58,7 @@ .about-me-item { @include margin-right(150px); + display: inline-block; p { @@ -73,6 +79,7 @@ .action-link { @include float(right); + padding: $baseline/2; background-color: $m-blue-d2; color: $gray-l7; @@ -97,6 +104,7 @@ .btn-dashboard { @include float(right); + color: $white; &:hover, @@ -108,18 +116,21 @@ .user-info { @include clearfix(); + border-bottom: 2px solid $gray-l5; padding: 20px 0; margin-bottom: 20px; .info-column { @include float(left); + width: 100%; margin: 10px 0; } .title { @extend %fa-copy; + padding: 0; &.error { @@ -129,6 +140,7 @@ .data { @extend %fa-copy; + padding: 0; color: $black; font-size: 1.125em; @@ -140,6 +152,7 @@ .action-primary { @include float(left); + width: auto; margin-top: 0; } @@ -166,6 +179,7 @@ bottom: 3px solid $gray-l1; left: none; }; + box-shadow: none; } @@ -180,6 +194,7 @@ & + label { @include margin-left(30px); + display: inline-block; } } diff --git a/lms/static/sass/views/_homepage.scss b/lms/static/sass/views/_homepage.scss index a12aa754325..5e83f3d2ca9 100644 --- a/lms/static/sass/views/_homepage.scss +++ b/lms/static/sass/views/_homepage.scss @@ -10,6 +10,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .courses { @include row(); @include float(left); + width:100%; .courses-listing { @@ -24,6 +25,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .course { @include box-sizing(border-box); @include transition(all $tmg-f3 linear 0s); + position: relative; border-bottom: 3px solid $action-primary-bg; box-shadow: 0 1px 10px 0 $black-t0, inset 0 0 0 1px $white-t3; @@ -35,9 +37,11 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi overflow: hidden; // places the shadow on top of the course image while hovering over the course card - &:before { + &::before { @include left(0); + @extend %ui-depth1; + position: absolute; top: 0; opacity: 0; @@ -55,7 +59,9 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .learn-more { @include left($learn-more-horizontal-position); @include box-sizing(border-box); + @extend %ui-depth2; + position: absolute; top: ($baseline*2.75); padding: 0 $baseline; @@ -82,6 +88,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .course-organization, .course-code, .course-date { @extend %t-icon6; + color: $gray-d2; } @@ -92,17 +99,21 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .course-organization { @include line-height(11); + padding: ($baseline/2) ($baseline*0.75) ($baseline/10) ($baseline*0.75); } .course-code { @include line-height(16); + padding: 0 ($baseline*0.75); } .course-title { @include line-height(16); + @extend %t-icon4; + margin: ($baseline*0.25) 0 ($baseline*1.75) 0; padding: 0 ($baseline*0.75); height: $course-title-height; @@ -111,6 +122,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .course-date { @include line-height(14); + padding: ($baseline/10) ($baseline*0.75); } } @@ -119,13 +131,15 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi &:hover, &:focus { .cover-image { - &:before { + &::before { @include transition(opacity $tmg-f2 ease-out $tmg-f2); + opacity: 0.6; } .learn-more { @include transition(opacity $tmg-f2 ease-out $tmg-f2); + opacity: 1; } } @@ -135,6 +149,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .courses-more { @include margin-right(0); + text-align: center; @include media($large-min-width) { @@ -145,7 +160,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi .courses-more-cta { font-weight: $font-semibold; - &:after { + &::after { content: " ›"; } } @@ -154,8 +169,8 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi /* Set homepage specific media queries */ .home .courses-container .courses .courses-listing .courses-listing-item { - @include rtl() { $layout-direction: "RTL"; } + @include fill-parent(); @include media($bp-medium) { diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index a2472668b81..a26235a7c1c 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -4,808 +4,835 @@ @import "neat/neat"; // lib - Neat @media (min-width: 768px) { - .enterprise-content { - width: 20%; - float: left; - height: 100%; - padding-left: $baseline; - padding-right: $baseline; - } - - .login-register.border-left { - border-left: 1px solid #d9d9d9; - padding-left: ($baseline*1.5); - padding-right: $baseline; - } + .enterprise-content { + width: 20%; + float: left; + height: 100%; + padding-left: $baseline; + padding-right: $baseline; + } + + .login-register.border-left { + border-left: 1px solid #d9d9d9; + padding-left: ($baseline*1.5); + padding-right: $baseline; + } } @media (max-width: 767px) { - .enterprise-content { - margin: auto auto; - display: block; - padding-left: ($baseline/2); - padding-right: ($baseline/2); - - img.enterprise-logo { - display: none; - } + .enterprise-content { + margin: auto auto; + display: block; + padding-left: ($baseline/2); + padding-right: ($baseline/2); + + img.enterprise-logo { + display: none; } + } } .window-wrap { - background: $white; + background: $white; } .login-register-content { + @include box-sizing(border-box); + @include outer-container; + + width: 100%; + justify-content: center; + margin-top: $baseline; + background: $white; + display: flex; + flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + + h2 { + @extend %t-title4; + + margin-top: $baseline; + letter-spacing: normal; + font-family: $sans-serif; + color: $uxpl-blue-hover-active; + } + + h3 { + @extend %t-title6; + @extend %t-light; + + margin: 0; + letter-spacing: normal; + font-family: $sans-serif; + color: $uxpl-gray-dark; + } + + a, label { + @extend %expand-clickable-area; + } + + a { + text-decoration: underline; + } +} + +.login-register { + $grid-columns: 12; + + background: $white; + min-height: 100%; + padding-left: ($baseline/2); + padding-right: ($baseline/2); + $third-party-button-height: ($baseline*1.75); + + display: block; + margin:auto; + max-width: 500px; + + .instructions { + @extend %t-copy-base; + } + + /* Temp. fix until applied globally */ + > { @include box-sizing(border-box); + } + + + /* Remove autocomplete yellow background */ + input:-webkit-autofill { + -webkit-box-shadow:0 0 0 50px white inset; + -webkit-text-fill-color: #333; + } + + input:-webkit-autofill:focus { + -webkit-box-shadow: white, 0 0 0 50px white inset; + -webkit-text-fill-color: #333; + } + + .header { @include outer-container; + + border-bottom: 1px solid $gray-l4; width: 100%; - justify-content: center; - margin-top: $baseline; - background: $white; - display: flex; - flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; + padding-top: 35px; + padding-bottom: 35px; + overflow: hidden; - h2 { - @extend %t-title4; - margin-top: $baseline; - letter-spacing: normal; - font-family: $sans-serif; - color: $uxpl-blue-hover-active; + .headline { + @include box-sizing(border-box); + @include font-size(35); + + padding: 0 10px; + font-family: $sans-serif; + font-weight: $font-semibold; + text-align: left; + margin-bottom: 0; + color: $m-blue-d5; } - h3 { - @extend %t-title6; - @extend %t-light; - margin: 0; - letter-spacing: normal; - font-family: $sans-serif; - color: $uxpl-gray-dark; + .tagline { + @include box-sizing(border-box); + @include font-size(24); + + padding: 0 10px; + font-family: $sans-serif; + font-weight: $font-regular; } + } + + .section-title { + position: relative; + margin: $baseline 0 ($baseline/2); - a, label { - @extend %expand-clickable-area; + &.lines { + margin-bottom: $baseline; + margin-top: $baseline; + text-align: center; + + &::after { + position: absolute; + left: 0; + top: ($baseline/2); + width: 100%; + height: 1px; + background: $gray-l3; + content: ''; + z-index: 5; + } + + .text { + position: relative; + top: -2px; // Aligns center of text with center of line (CR) + z-index: 6; + padding: 0 $baseline; + background: $white; + } } - a { - text-decoration: underline; + h2 { + text-align: center; + text-transform: none; } -} + } + + %nav-btn-base { + @extend %btn-secondary-blue-outline; + + width: 100%; + height: ($baseline*2); + text-transform: none; + text-shadow: none; + letter-spacing: normal; + } + + .nav-btn { + @extend %nav-btn-base; + @extend %t-strong; + } + + .form-type, + .toggle-form { + @include box-sizing(border-box); + + max-width: 600px; + min-width: 250px; + margin: 0 auto; + } + + .toggle-form { + @extend %t-action1; + } + + .note { + @extend %t-copy-sub2; -.login-register { - $grid-columns: 12; - background: $white; - min-height: 100%; - padding-left: ($baseline/2); - padding-right: ($baseline/2); - $third-party-button-height: ($baseline*1.75); display: block; - margin:auto; - max-width: 500px; + margin: ($baseline/2) ($baseline/2) 0 ($baseline/2); + color: $m-gray-l1; + text-align: center; + } + + /** The forms **/ + .form-wrapper { + padding-top: $baseline; + padding-bottom: $baseline; - .instructions { - @extend %t-copy-base; + form { + @include clearfix(); + + clear: both; } - /* Temp. fix until applied globally */ - > { - @include box-sizing(border-box); + .login-providers { + text-align: center; } + } + .login-form, + .password-reset-form, + .register-form { + &:focus { + outline: none; + } - /* Remove autocomplete yellow background */ - input:-webkit-autofill { - -webkit-box-shadow:0 0 0 50px white inset; - -webkit-text-fill-color: #333; + div[class*="hidden-"] { + margin: 0; + display: none; } - input:-webkit-autofill:focus { - -webkit-box-shadow: white, 0 0 0 50px white inset; - -webkit-text-fill-color: #333; + .auto-register-message { + font-size: 1.1em; + line-height: 1.3em; } + } - .header { - @include outer-container; - border-bottom: 1px solid $gray-l4; - width: 100%; - padding-top: 35px; - padding-bottom: 35px; - overflow: hidden; - - .headline { - @include box-sizing(border-box); - @include font-size(35); - padding: 0 10px; - font-family: $sans-serif; - font-weight: $font-semibold; - text-align: left; - margin-bottom: 0; - color: $m-blue-d5; - } + %bold-label { + @include font-size(16); - .tagline { - @include box-sizing(border-box); - @include font-size(24); - padding: 0 10px; - font-family: $sans-serif; - font-weight: $font-regular; - } - } + font-family: $sans-serif; + font-weight: $font-semibold; + } - .section-title { - position: relative; - margin: $baseline 0 ($baseline/2); - - &.lines { - margin-bottom: $baseline; - margin-top: $baseline; - text-align: center; - - &:after { - position: absolute; - left: 0; - top: ($baseline/2); - width: 100%; - height: 1px; - background: $gray-l3; - content: ''; - z-index: 5; - } - - .text { - position: relative; - top: -2px; // Aligns center of text with center of line (CR) - z-index: 6; - padding: 0 $baseline; - background: $white; - } - } + .form-label { + @extend %bold-label; - h2 { - text-align: center; - text-transform: none; - } - } + padding: 0 0 0 ($baseline/4); + } - %nav-btn-base { - @extend %btn-secondary-blue-outline; - width: 100%; - height: ($baseline*2); - text-transform: none; - text-shadow: none; - letter-spacing: normal; + .action-label { + @include font-size(13); + + font-family: $sans-serif; + } + + .form-field { + @include clearfix(); + + clear: both; + position: relative; + width: 100%; + margin: ($baseline/2) 0 0 0; + + &.select-year_of_birth { + @include margin-left(15px); } - .nav-btn { - @extend %nav-btn-base; - @extend %t-strong; + &.select-gender, + &.select-year_of_birth { + display: inline-block; + width: calc(50% - 10px); } - .form-type, - .toggle-form { - @include box-sizing(border-box); - max-width: 600px; - min-width: 250px; - margin: 0 auto; + /** FROM _accounts.scss - start **/ + label, + input, + select, + textarea { + height: auto; + line-height: 1.5em; + border-radius: 0; + font-family: $sans-serif; + font-style: normal; + font-weight: 500; } - .toggle-form { - @extend %t-action1; + #login-remember { + line-height: 0; + height: auto; } - .note { - @extend %t-copy-sub2; - display: block; - margin: ($baseline/2) ($baseline/2) 0 ($baseline/2); - color: $m-gray-l1; - text-align: center; + label { + display: block; + margin: 0; + color: $black; + + &.inline { + display: inline; + } + + &[for="register-data_sharing_consent"], + &[for="register-honor_code"], + &[for="register-terms_of_service"] { + display: inline-block; + margin: 5px 5px 0 0; + vertical-align: top; + } + + &[for="login-remember"] { + display: inline-block; + } + } + + .field-link { + @extend %t-copy-sub2; + + display: block; + margin-bottom: ($baseline/2); + margin-top: ($baseline/4); + border: none; + padding: 0; + background: transparent; + box-shadow: none; + text-transform: initial; + letter-spacing: normal; + color: $uxpl-blue-base; + font-weight: $font-regular; + text-decoration: none; + text-shadow: none; + font-family: $sans-serif; + + &:hover, + &:focus { + text-decoration: underline; + } } - /** The forms **/ - .form-wrapper { - padding-top: $baseline; - padding-bottom: $baseline; + input, + select, + textarea { + display: block; + height: 32px; + width: 100%; + margin: 0 0 ($baseline/4); + padding: 0 ($baseline/2); - form { - @include clearfix(); - clear: both; - } + &.long { + width: 100%; + } - .login-providers { - text-align: center; - } - } + &.short { + width: 25%; + } - .login-form, - .password-reset-form, - .register-form { - &:focus { - outline: none; - } + &.checkbox { + display: inline; + width: auto; + height: auto; + margin-right: ($baseline/4); - div[class*="hidden-"] { - margin: 0; - display: none; + & + label { + display: inline; } + } - .auto-register-message { - font-size: 1.1em; - line-height: 1.3em; - } - } + &.error { + border-color: $red; + } - %bold-label { - @include font-size(16); - font-family: $sans-serif; - font-weight: $font-semibold; + &.success { + border-color: $success-color-hover; + } } - .form-label { - @extend %bold-label; - padding: 0 0 0 ($baseline/4); + textarea, + select { + &.error { + outline-color: $red; + } + + &.success { + outline-color: $success-color-hover; + } } - .action-label { - @include font-size(13); - font-family: $sans-serif; + textarea { + resize: none; + height: ($baseline*5); } - .form-field { - @include clearfix(); - clear: both; - position: relative; - width: 100%; - margin: ($baseline/2) 0 0 0; + select { + background: transparent; + opacity: 0.85; + border: none; + outline: solid 1px $gray-l3; + cursor: pointer; - &.select-year_of_birth { - @include margin-left(15px); - } + &:active, &:focus { + outline: auto; + } + } - &.select-gender, - &.select-year_of_birth { - display: inline-block; - width: calc( 50% - 10px ); - } + span, + label { + &.error { + color: $red; + } - /** FROM _accounts.scss - start **/ - label, - input, - select, - textarea { - height: auto; - line-height: 1.5em; - border-radius: 0; - font-family: $sans-serif; - font-style: normal; - font-weight: 500; - } + &.success { + color: $success-color-hover; + } + } - #login-remember { - line-height: 0; - height: auto; - } + .tip, .label-optional { + @extend %t-copy-sub1; - label { - display: block; - margin: 0; - color: $black; - - &.inline { - display: inline; - } - - &[for="register-data_sharing_consent"], - &[for="register-honor_code"], - &[for="register-terms_of_service"] { - display: inline-block; - margin: 5px 5px 0 0; - vertical-align: top; - } - - &[for="login-remember"] { - display: inline-block; - } - } + color: $uxpl-gray-base; + } - .field-link { - @extend %t-copy-sub2; - display: block; - margin-bottom: ($baseline/2); - margin-top: ($baseline/4); - border: none; - padding: 0; - background: transparent; - box-shadow: none; - text-transform: initial; - letter-spacing: normal; - color: $uxpl-blue-base; - font-weight: $font-regular; - text-decoration: none; - text-shadow: none; - font-family: $sans-serif; - - &:hover, - &:focus { - text-decoration: underline; - } - } + .tip { + display: block; + } - input, - select, - textarea { - display: block; - height: 32px; - width: 100%; - margin: 0 0 ($baseline/4); - padding: 0 ($baseline/2); - - &.long { - width: 100%; - } - - &.short { - width: 25%; - } - - &.checkbox { - display: inline; - width: auto; - height: auto; - margin-right: ($baseline/4); - - & + label { - display: inline; - } - } - - &.error { - border-color: $red; - } - - &.success { - border-color: $success-color-hover; - } - } + /** FROM _accounts.scss - end **/ + } - textarea, - select { - &.error { - outline-color: $red; - } + .input-block { + width: 100%; + } - &.success { - outline-color: $success-color-hover; - } - } + .input-inline { + display: inline; + } - textarea { - resize: none; - height: ($baseline*5); - } + .desc { + @include transition(color 0.15s ease-in-out 0s); - select { - background: transparent; - opacity: 0.85; - border: none; - outline: solid 1px $gray-l3; - cursor: pointer; + display: block; + margin-top: ($baseline/4); + color: $lighter-base-font-color; + font-size: em(13); + } + + .action-primary { + @extend %btn-primary-blue; + + padding: 1ex 1em; + text-transform: none; + font-weight: 600; + letter-spacing: normal; + margin-top: $baseline; - &:active, &:focus { - outline: auto; - } - } + .icon { + @extend %sso-icon; + } + } - span, - label { - &.error { - color: $red; - } + .login-provider { + @extend %btn-secondary-grey-outline; + @extend %t-action4; - &.success { - color: $success-color-hover; - } - } + @include padding(0, 0, 0, $baseline*2); + @include text-align(left); - .tip, .label-optional { - @extend %t-copy-sub1; - color: $uxpl-gray-base; - } + position: relative; + margin-right: ($baseline/4); + margin-bottom: ($baseline/4); + border-color: $lightGrey1; + width: $baseline*6.5; + height: $third-party-button-height; + text-shadow: none; + text-transform: none; - .tip { - display: block; - } - /** FROM _accounts.scss - end **/ - } + .icon { + @extend %sso-icon; - .input-block { - width: 100%; - } + @include left(0); - .input-inline { - display: inline; + position: absolute; + top: -1px; + width: 30px; + bottom: -1px; + background: $m-blue-d3; + line-height: $third-party-button-height; + text-align: center; + color: $white; } - .desc { - @include transition(color 0.15s ease-in-out 0s); - display: block; - margin-top: ($baseline/4); - color: $lighter-base-font-color; - font-size: em(13); + span { + color: inherit; } - .action-primary { - @extend %btn-primary-blue; - padding: 1ex 1em; - text-transform: none; - font-weight: 600; - letter-spacing: normal; - margin-top: $baseline; + &:hover, + &:focus { + background-image: none; - .icon { - @extend %sso-icon; - } + .icon { + top: 0; + bottom: 0; + line-height: ($third-party-button-height - 2px); + } } - .login-provider { - @extend %btn-secondary-grey-outline; - @extend %t-action4; + &.button-oa2-google-oauth2 { + color: $google-red; - @include padding(0, 0, 0, $baseline*2); - @include text-align(left); + .icon { + background: $google-red; + } - position: relative; - margin-right: ($baseline/4); - margin-bottom: ($baseline/4); - border-color: $lightGrey1; - width: $baseline*6.5; - height: $third-party-button-height; - text-shadow: none; - text-transform: none; - - .icon { - @extend %sso-icon; - @include left(0); - - position: absolute; - top: -1px; - width: 30px; - bottom: -1px; - background: $m-blue-d3; - line-height: $third-party-button-height; - text-align: center; - color: $white; - } + &:hover, + &:focus { + background-color: $google-red; + border: 1px solid #a5382b; + color: $white; + } + } - span { - color: inherit; - } + &.button-oa2-facebook { + color: $facebook-blue; - &:hover, - &:focus { - background-image: none; + .icon { + background: $facebook-blue; + } - .icon { - top: 0; - bottom: 0; - line-height: ($third-party-button-height - 2px); - } - } + &:hover, + &:focus { + background-color: $facebook-blue; + border: 1px solid #263a62; + color: $white; + } + } - &.button-oa2-google-oauth2 { - color: $google-red; + &.button-oa2-linkedin-oauth2 { + color: $linkedin-blue; - .icon { - background: $google-red; - } + .icon { + background: $linkedin-blue; + } - &:hover, - &:focus { - background-color: $google-red; - border: 1px solid #A5382B; - color: $white; - } - } + &:hover, + &:focus { + background-color: $linkedin-blue; + border: 1px solid #06527d; + color: $white; + } + } - &.button-oa2-facebook { - color: $facebook-blue; + &.button-oa2-azuread-oauth2 { + color: $microsoft-black; - .icon { - background: $facebook-blue; - } + .icon { + background: $microsoft-black; + } - &:hover, - &:focus { - background-color: $facebook-blue; - border: 1px solid #263A62; - color: $white; - } - } + &:hover, + &:focus { + background-color: $microsoft-black; + border: 1px solid $microsoft-black; + color: $white; + } + } - &.button-oa2-linkedin-oauth2 { - color: $linkedin-blue; + } - .icon { - background: $linkedin-blue; - } + .button-secondary-login { + @extend %nav-btn-base; + @extend %t-action4; + @extend %t-regular; - &:hover, - &:focus { - background-color: $linkedin-blue; - border: 1px solid #06527D; - color: $white; - } - } + border-color: $lightGrey1; + padding: 0; + height: $third-party-button-height; + + &:hover { + border-color: $m-blue-d3; + } + } - &.button-oa2-azuread-oauth2 { - color: $microsoft-black; + /** Error Container - from _account.scss **/ + .status { + @include box-sizing(border-box); - .icon { - background: $microsoft-black; - } + margin: 0 0 25px 0; + border-bottom: 3px solid shade($yellow, 10%); + padding: 25px; + background: tint($yellow,20%); - &:hover, - &:focus { - background-color: $microsoft-black; - border: 1px solid $microsoft-black; - color: $white; - } - } + .message-title { + @extend %t-title5; + font-family: $sans-serif; + margin: 0 0 ($baseline/4) 0; + font-weight: 600; } - .button-secondary-login { - @extend %nav-btn-base; - @extend %t-action4; - @extend %t-regular; - border-color: $lightGrey1; - padding: 0; - height: $third-party-button-height; + .message-copy, + .message-copy p { + @extend %t-copy-base; - &:hover { - border-color: $m-blue-d3; - } - } + font-family: $sans-serif; + margin: 0 !important; + padding: 0; - /** Error Container - from _account.scss **/ - .status { - @include box-sizing(border-box); - margin: 0 0 25px 0; - border-bottom: 3px solid shade($yellow, 10%); - padding: 25px; - background: tint($yellow,20%); + li { + margin: 0 0 ($baseline/4) $baseline; + } + } - .message-title { - @extend %t-title5; - font-family: $sans-serif; - margin: 0 0 ($baseline/4) 0; - font-weight: 600; - } + &.account-activation { + .message-copy { + padding: 0 1em !important; + } - .message-copy, - .message-copy p { - @extend %t-copy-base; - font-family: $sans-serif; - margin: 0 !important; - padding: 0; + &.info { + background-color: $palette-info-back; + border: $palette-info-border 1px solid; + color: $palette-info-text; + } - li { - margin: 0 0 ($baseline/4) $baseline; - } - } + &.success { + background-color: $palette-success-back; + border: $palette-success-border 1px solid; + color: $palette-success-text; + } - &.account-activation { - .message-copy { - padding: 0 1em !important; - } - - &.info { - background-color: $palette-info-back; - border: $palette-info-border 1px solid; - color: $palette-info-text; - } - - &.success { - background-color: $palette-success-back; - border: $palette-success-border 1px solid; - color: $palette-success-text; - } - - &.error { - background-color: $palette-error-back; - border: $palette-error-border 1px solid; - color: $palette-error-text 1px solid; - } - } + &.error { + background-color: $palette-error-back; + border: $palette-error-border 1px solid; + color: $palette-error-text 1px solid; + } } + } - .submission-error, .system-error { - box-shadow: inset 0 -1px 2px 0 tint($red, 85%); - border-bottom: 3px solid shade($red, 10%); - background: tint($red,95%); + .submission-error, .system-error { + box-shadow: inset 0 -1px 2px 0 tint($red, 85%); + border-bottom: 3px solid shade($red, 10%); + background: tint($red,95%); - .message-title { - color: shade($red, 10%) !important; - } + .message-title { + color: shade($red, 10%) !important; + } - .message-copy { + .message-copy { - } } + } - .submission-success { - box-shadow: inset 0 -1px 2px 0 tint($green, 85%); - border-bottom: 3px solid shade($green, 10%); - background: tint($green, 95%); + .submission-success { + box-shadow: inset 0 -1px 2px 0 tint($green, 85%); + border-bottom: 3px solid shade($green, 10%); + background: tint($green, 95%); - .message-title { - color: shade($green, 10%) !important; - } + .message-title { + color: shade($green, 10%) !important; + } - .message-copy { + .message-copy { - } } + } - .institution-list { - - .institution { - @extend %t-copy-base; - } + .institution-list { + .institution { + @extend %t-copy-base; } + } - @include media( max-width 330px) { - .form-type { - width: 98%; - margin: 0 1%; - } + @include media(max-width 330px) { + .form-type { + width: 98%; + margin: 0 1%; + } - .login-provider { - width: 100%; - margin: 10px 0; - } + .login-provider { + width: 100%; + margin: 10px 0; } + } } .finish-auth { + @include box-sizing(border-box); + @include outer-container; + $grid-columns: 12; + + background: $white; + min-height: 100%; + width: 100%; + + .finish-auth-inner { @include box-sizing(border-box); - @include outer-container; - $grid-columns: 12; - background: $white; - min-height: 100%; - width: 100%; - .finish-auth-inner { - @include box-sizing(border-box); - max-width: 650px; - margin: 1em auto; - } + max-width: 650px; + margin: 1em auto; + } - #finish-auth-status { - padding-top: 30px; // Make room for the absolutely positioned loading animation - } + #finish-auth-status { + padding-top: 30px; // Make room for the absolutely positioned loading animation + } - #finish-auth-status li:last-child { - font-weight: bold; - } + #finish-auth-status li:last-child { + font-weight: bold; + } } .supplemental-link { - margin: 1rem 0; + margin: 1rem 0; } .enterprise-content { - display: inline-block; - text-align: left; - vertical-align: top; - max-width: 500px; - - .centered-div { - margin: 0 auto; - margin-right: 0px; - float: right; - } + display: inline-block; + text-align: left; + vertical-align: top; + max-width: 500px; - img { - height: 100px; - } + .centered-div { + margin: 0 auto; + margin-right: 0; + float: right; + } - p { - &:first-of-type { - margin-top: 20px; - } - - font-size: 16px; - line-height: 1.5; - color: $gray-d2; + img { + height: 100px; + } + + p { + &:first-of-type { + margin-top: 20px; } + + font-size: 16px; + line-height: 1.5; + color: $gray-d2; + } } .tos-modal { - background-color: $black-t1; - display: none; - height: 120%; - left: -10%; - overflow: auto; + background-color: $black-t1; + display: none; + height: 120%; + left: -10%; + overflow: auto; + position: fixed; + top: -10%; + width: 120%; + z-index: 1; + + .modal-content { + background-color: $white; + bottom: auto; + left: 50%; + margin: auto; + max-width: 650px; + min-height: 540px; + min-width: 300px; position: fixed; - top: -10%; - width: 120%; - z-index: 1; - - .modal-content { - background-color: $white; - bottom: auto; - left: 50%; - margin: auto; - max-width: 650px; - min-height: 540px; - min-width: 300px; - position: fixed; - right: auto; + right: auto; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; + + .header { + height: 50px; + position: relative; + + h1#modal-header-text { + float: left; + font-family: $sans-serif; + font-size: font-size(large); + font-weight: bold; + margin-bottom: 0; + padding-left: 20px; + position: absolute; + text-align: left; top: 50%; - transform: translate(-50%, -50%); - width: 100%; + transform: translate(0, -50%); + width: 75%; + } + + .modal-close-button { + background: $white; + border: none; + border-radius: 0; + box-shadow: none; + box-sizing: border-box; + color: $uxpl-blue-base; + float: right; + font-size: font-size(large); + height: 48px; + letter-spacing: normal; + padding: 0; + position: absolute; + right: 0; + text-shadow: none; + text-transform: lowercase; + top: 50%; + transform: translate(0, -50%); + width: 80px; + } - .header { - height: 50px; - position: relative; - - h1#modal-header-text { - float: left; - font-family: $sans-serif; - font-size: font-size(large); - font-weight: bold; - margin-bottom: 0; - padding-left: 20px; - position: absolute; - text-align: left; - top: 50%; - transform: translate(0, -50%); - width: 75%; - } - - .modal-close-button { - background: $white; - border: none; - border-radius: 0; - box-shadow: none; - box-sizing: border-box; - color: $uxpl-blue-base; - float: right; - font-size: font-size(large); - height: 48px; - letter-spacing: normal; - padding: 0; - position: absolute; - right: 0; - text-shadow: none; - text-transform: lowercase; - top: 50%; - transform: translate(0, -50%); - width: 80px; - } - - .modal-close-button:hover { - background: $white; - color: $uxpl-blue-hover-active; - text-decoration: underline; - } - - .modal-close-button:focus { - color: $uxpl-blue-hover-active; - text-decoration: underline; - } - } + .modal-close-button:hover { + background: $white; + color: $uxpl-blue-hover-active; + text-decoration: underline; + } - iframe { - border: 0; - width: 100%; - } + .modal-close-button:focus { + color: $uxpl-blue-hover-active; + text-decoration: underline; + } } + + iframe { + border: 0; + width: 100%; + } + } } body.open-modal { - overflow: hidden; + overflow: hidden; } diff --git a/lms/static/sass/views/_oauth2.scss b/lms/static/sass/views/_oauth2.scss index dd6431c192d..2a85a10fa7b 100644 --- a/lms/static/sass/views/_oauth2.scss +++ b/lms/static/sass/views/_oauth2.scss @@ -1,11 +1,9 @@ @import 'neat/neat'; // lib - Neat .oauth2 { - @include outer-container(); .authorization-confirmation { - @include span-columns(6); @include shift(3); @@ -18,38 +16,41 @@ // For the django-oauth-toolkit Authorization view .wrapper-authorize { - background: $white; - width: 60%; - padding-right: 140px; - padding-left: 140px; - - font-family: $sans-serif; - - h1 { - @extend %t-title4; - margin-bottom: 0; - margin-left: 0; - padding: $baseline; - padding-left: 0px; - @include text-align(left); - } - - p { - @extend %t-copy-base; - margin: $baseline/2 0; - } - - .control-group { - float: right; - } - - .btn-authorization-allow { - @extend %btn-primary-blue; - margin-left: 20px; - line-height: 0.7em; - } - - .btn-authorization-cancel { - @extend %btn-secondary-blue-outline; - } + background: $white; + width: 60%; + padding-right: 140px; + padding-left: 140px; + font-family: $sans-serif; + + h1 { + @extend %t-title4; + + margin-bottom: 0; + margin-left: 0; + padding: $baseline; + padding-left: 0; + + @include text-align(left); + } + + p { + @extend %t-copy-base; + + margin: $baseline/2 0; + } + + .control-group { + float: right; + } + + .btn-authorization-allow { + @extend %btn-primary-blue; + + margin-left: 20px; + line-height: 0.7em; + } + + .btn-authorization-cancel { + @extend %btn-secondary-blue-outline; + } } diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index b2fbbfa6e53..46da9634bdc 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -1,708 +1,734 @@ .program-details { - .content-wrapper { - max-width: 100%; - padding-top: 0; - } + .content-wrapper { + max-width: 100%; + padding-top: 0; + } } .program-header { - .banner-content { - padding-top: 100px; - } + .banner-content { + padding-top: 100px; + } + + .title { + margin: 0; + } + + .title, + .subtitle { + color: $white; + font-weight: font-weight(semi-bold); + } + + .org-wrapper { + position: absolute; + top: 0; + background: $white; + opacity: 0.7; + left: 0; + padding: 20px; + } + + .org-logo { + height: 50px; + } + + .breadcrumb-wrapper { + padding: $full-width-banner-margin; + + @media (min-width: $bp-screen-xl) { + padding-left: 0; + } + } + + .breadcrumb-list { + list-style-type: none; + margin: 0; + } + + .crumb { + @include float(left); + + position: relative; + font-size: font-size(x-small); + line-height: line-height(x-small); + color: palette(grayscale, dark); + + &.active { + color: palette(grayscale, dark); + } + } + + .crumb-link { + font-size: inherit; + line-height: inherit; + color: palette(primary, base); + + &:hover, + &:focus { + color: palette(grayscale, black); + text-decoration: underline; + } + } + + .crumb-separator { + font-size: font-size(xx-small); + line-height: line-height(xx-small); + padding: 0 $full-width-banner-margin/4; + } +} - .title { - margin: 0; +// CSS for April 2017 version of Program Details Page +.program-details { + .window-wrap { + background-color: $white; + } + + .wrapper-footer, + footer#footer-edx-v3 { + @include clearfix(); + + clear: both; + } +} + +.program-details-wrapper { + .program-details-header { + background-color: $light-gray4; + display: flex; + color: black; + font-family: 'Open Sans'; + font-weight: normal; + flex-wrap: wrap; + padding: 40px 10px 35px; + + @media (min-width: $bp-screen-md) { + padding: { + left: 30px; + right: 30px; + } } - .title, - .subtitle { - color: $white; - font-weight: font-weight(semi-bold); + @media (min-width: $lms-max-width) { + padding: { + left: calc(((100% - 1180px) / 2) + 30px); + right: calc(((100% - 1180px) / 2) + 30px); + } } - .org-wrapper { - position: absolute; - top: 0; - background: $white; - opacity: 0.7; - left: 0; - padding: 20px; + .hd-1 { + font-size: 1.5em; + + @media (min-width: $bp-screen-md) { + font-size: 2.375em; + } } - .org-logo { + .program-details-icon { + @include margin-left(3px); + + margin-top: 10px; + height: auto; + + svg { + width: inherit; + } + + /* IE11 CSS styles */ + @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { height: 50px; + } } - .breadcrumb-wrapper { - padding: $full-width-banner-margin; + .micromasters { + fill: $micromasters-color; + width: 200px; - @media(min-width: $bp-screen-xl) { - padding-left: 0; - } + @media (min-width: $bp-screen-md) { + width: 250px; + } } - .breadcrumb-list { - list-style-type: none; - margin: 0; + .xseries { + fill: xseries-color; + width: 150px; + + @media (min-width: $bp-screen-md) { + width: 200px; + } } - .crumb { - @include float(left); - position: relative; - font-size: font-size(x-small); - line-height: line-height(x-small); - color: palette(grayscale, dark); + .professional.certificate { + fill: $professional-certificate-color; + width: 250px; - &.active { - color: palette(grayscale, dark); - } + @media (min-width: $bp-screen-md) { + width: 300px; + } } - .crumb-link { - font-size: inherit; - line-height: inherit; - color: palette(primary, base); + .meta-info { + margin: 0; + display: block; - &:hover, - &:focus { - color: palette(grayscale, black); - text-decoration: underline; - } + @media (min-width: $bp-screen-md) { + width: 70%; + } + + @media (min-width: $bp-screen-lg) { + width: 75%; + } + + .program-title { + font-weight: normal; + font-size: 2em; + } } - .crumb-separator { - font-size: font-size(xx-small); - line-height: line-height(xx-small); - padding: 0 $full-width-banner-margin/4; + .authoring-organizations { + text-align: center; + display: flex; + + @media (min-width: $bp-screen-md) { + display: block; + } + + .heading { + font-family: "Open Sans"; + font-weight: bold; + color: palette(primary, dark); + font-size: 0.9375em; + margin-top: auto; + margin-bottom: auto; + + @media (min-width: $bp-screen-md) { + @include margin-right(10px 0 0 0); + } + } + + @media (min-width: $bp-screen-md) { + margin: initial; + width: 30%; + + .orgs .org-logo { + @include margin-left(2.5%); + + width: 46.5%; + height: auto; + } + } + + @media (min-width: $bp-screen-lg) { + width: 25%; + } } -} + } -// CSS for April 2017 version of Program Details Page -.program-details { - .window-wrap { - background-color: $white; + .program-details-content { + width: 100%; + margin-bottom: 30px; + padding: 30px 10px; + + @media (min-width: $bp-screen-md) { + @include float(left); + padding: { + left: 30px; + right: 30px; + } + + width: calc(100% - 330px); + position: relative; } - .wrapper-footer, - footer#footer-edx-v3 { - @include clearfix(); - clear: both; + @media (min-width: $bp-screen-lg) { + width: calc(100% - 510px); + max-width: 700px; } -} -.program-details-wrapper { - .program-details-header { - background-color: $light-gray4; - display: flex; - color: black; - font-family: 'Open Sans'; - font-weight: normal; - flex-wrap: wrap; - padding: 40px 10px 35px; + @media (min-width: $lms-max-width) { + @include margin-left(calc((100% - 1180px) / 2)); + } + } - @media(min-width: $bp-screen-md) { - padding: { - left: 30px; - right: 30px; - } - } + .course-list-heading { + font-family: "Open Sans"; + font-weight: bold; + text-transform: uppercase; + color: palette(primary, dark); + font-size: 0.9375em; + line-height: normal; + padding-bottom: 5px; + border-bottom: 3px solid $divider-color; + margin: { + top: 10px; + bottom: 20px; + } - @media(min-width: $lms-max-width) { - padding: { - left: calc(((100% - 1180px) / 2) + 30px); - right: calc(((100% - 1180px) / 2) + 30px); - } - } + .status { + @include margin-right(7px); + } + } - .hd-1 { - font-size: 1.5em; - @media(min-width: $bp-screen-md) { - font-size: 2.375em; - } - } + .course-list > div:nth-of-type(even) { + background-color: $zebra-stripe-color; + } - .program-details-icon { - @include margin-left(3px); - margin-top: 10px; - height: auto; + .course-list-headings { + .motivating-section { + @include margin-left(15px); - svg { - width: inherit; - } + font-size: 0.9375em; + width: 310px; - /* IE11 CSS styles */ - @media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { - height: 50px; - } - } + @media (min-width: $bp-screen-sm) { + width: auto; + } - .micromasters { - fill: $micromasters-color; - width: 200px; - @media(min-width: $bp-screen-md) { - width: 250px; - } - } + .motivating-heading { + margin-bottom: 0; + font-weight: 600; + } - .xseries { - fill: xseries-color; - width: 150px; - @media(min-width: $bp-screen-md) { - width: 200px; - } - } + .motivating-message { + color: #414141; + } + } + } - .professional.certificate { - fill: $professional-certificate-color; - width: 250px; - @media(min-width: $bp-screen-md) { - width: 300px; - } - } + .program-heading { + margin-bottom: 40px; + display: flex; + justify-content: flex-start; + flex-direction: column; - .meta-info { - margin: 0; - display: block; - @media(min-width: $bp-screen-md) { - width: 70%; - } - @media(min-width: $bp-screen-lg) { - width: 75%; - } - - .program-title { - font-weight: normal; - font-size: 2em; - } - } + .program-heading-title { + font-family: "Open Sans"; + font-weight: 600; + font-size: 1.3em; + color: palette(grayscale, base); + margin-bottom: 5px; + line-height: normal; + } - .authoring-organizations { - text-align: center; - - display: flex; - @media(min-width: $bp-screen-md) { - display: block; - } - - .heading { - font-family: "Open Sans"; - font-weight: bold; - color: palette(primary, dark); - font-size: 0.9375em; - - margin-top: auto; - margin-bottom: auto; - @media(min-width: $bp-screen-md) { - @include margin-right(10px 0 0 0); - } - - } - - @media(min-width: $bp-screen-md) { - margin: initial; - width: 30%; - - .orgs .org-logo { - @include margin-left(2.5%); - width: 46.5%; - height: auto; - } - } - - @media(min-width: $bp-screen-lg) { - width: 25%; - } - } + .program-heading-message { + font-weight: 300; } - .program-details-content { - width: 100%; - margin-bottom: 30px; - padding: 30px 10px; - - @media(min-width: $bp-screen-md) { - @include float(left); - padding: { - left: 30px; - right: 30px; - } - width: calc( 100% - 330px ); - position: relative; - } + } - @media(min-width: $bp-screen-lg) { - width: calc( 100% - 510px ); - max-width: 700px; - } + .course-enroll-view { + .view-course-button { + background: palette(primary, dark); + border-color: palette(primary, dark); + height: 37px; + padding: 7px 18.5px 0 18.5px; + width: auto; + border-radius: 0; + text-align: center; + font-size: 0.9375em; + margin-top: 5px; - @media(min-width: $lms-max-width) { - @include margin-left(calc((100% - 1180px) / 2)); - } + /* IE11 CSS styles */ + @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { + @include float(right); + } + + @media (min-width: $bp-screen-lg) { + margin-top: 0; + } } - .course-list-heading { - font-family: "Open Sans"; - font-weight: bold; - text-transform: uppercase; - color: palette(primary, dark); + .enroll-button { + width: 100%; + + @media (min-width: $bp-screen-sm) { + width: initial; + margin-bottom: 0; + margin-top: 17px; + } + + @media (min-width: $bp-screen-md) { + width: initial; + margin-top: 0; + margin-bottom: 0; + } + + button { + background-color: palette(primary, dark); + height: 37px; + width: 128px; + border-radius: 0; + padding: 0; + margin-bottom: 5px; + margin-top: 7px; font-size: 0.9375em; - line-height: normal; - padding-bottom: 5px; - border-bottom: 3px solid $divider-color; - margin: { - top: 10px; - bottom: 20px; - } - .status { - @include margin-right(7px); + /* IE11 CSS styles */ + @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { + @include float(right); } + } } - .course-list > div:nth-of-type(even) { - background-color: $zebra-stripe-color; + .select-choice { + @include margin-right(2px); + + font-family: "Open Sans"; + font-weight: bold; + font-size: 0.9375em; + color: palette(grayscale, base); + margin-top: 6px; + display: block; + + @media (min-width: $bp-screen-md) { + display: inline; + } } - .course-list-headings { - .motivating-section { - @include margin-left(15px); - font-size: 0.9375em; - width: 310px; - @media(min-width: $bp-screen-sm) { - width: auto; - } + .run-select-container { + @media (min-width: $bp-screen-md) { + margin-top: 8px; + display: flex; + flex-wrap: wrap; + } + } - .motivating-heading { - margin-bottom: 0px; - font-weight: 600; - } + .run-select { + @include margin-right(10px); - .motivating-message { - color: #414141; - } + width: 95%; - } + @media (min-width: $bp-screen-sm) { + width: 300px; + } + + height: 34px; + padding: 0; } + } - .program-heading { - margin-bottom: 40px; - display: flex; - justify-content: flex-start; - flex-direction: column; - - .program-heading-title { - font-family: "Open Sans"; - font-weight: 600; - font-size: 1.3em; - color: palette(grayscale, base); - margin-bottom: 5px; - line-height: normal; - } + .upgrade-button { + background: palette(success, text); + border-color: palette(success, text); + border-radius: 0; + padding: 7px; + text-align: center; + font-size: 0.9375em; - .program-heading-message { - font-weight: 300; - } + /* IE11 CSS styles */ + @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { + @include float(right); + } + + &.complete-program { + margin: 10px 15px 10px 5px; + align-self: flex-start; + + @media (min-width: $bp-screen-md) { + align-self: flex-end; + } + .list-price { + text-decoration: line-through; + } } + } - .course-enroll-view { - .view-course-button { - background: palette(primary, dark); - border-color: palette(primary, dark); - height: 37px; - padding: 7px 18.5px 0 18.5px; - width: auto; - border-radius: 0; - text-align: center; - font-size: 0.9375em; - margin-top: 5px; + .program-course-card { + width: 100%; + padding: 15px; + margin-bottom: 10px; - /* IE11 CSS styles */ - @media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { - @include float(right); - } + @media (min-width: $bp-screen-md) { + height: auto; + } - @media(min-width: $bp-screen-lg) { - margin-top: 0px; - } - } + .section { + display: flex; + justify-content: space-between; - .enroll-button { - width: 100%; - - @media(min-width: $bp-screen-sm) { - width: initial; - margin-bottom: 0; - margin-top: 17px; - } - - @media(min-width: $bp-screen-md) { - width: initial; - margin-top: 0px; - margin-bottom: 0; - } - - button { - background-color: palette(primary, dark); - height: 37px; - width: 128px; - border-radius: 0; - padding: 0; - margin-bottom: 5px; - margin-top: 7px; - font-size: 0.9375em; - - /* IE11 CSS styles */ - @media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { - @include float(right); - } - } - } - .select-choice { - @include margin-right(2px); - font-family: "Open Sans"; - font-weight: bold; - font-size: 0.9375em; - color: palette(grayscale, base); - margin-top: 6px; - display: block; - - @media(min-width: $bp-screen-md) { - display: inline; - } + @media (min-width: $bp-screen-md) { + flex-wrap: wrap; + } + } - } - .run-select-container { - @media(min-width: $bp-screen-md) { - margin-top: 8px; - display: flex; - flex-wrap: wrap; - } - } - .run-select { - @include margin-right(10px); - width: 95%; - @media(min-width: $bp-screen-sm) { - width: 300px; - } - height: 34px; - padding: 0; - } + .section:not(:first-child) { + margin-top: 0; } - .upgrade-button { - background: palette(success, text); - border-color: palette(success, text); - border-radius: 0; - padding: 7px; - text-align: center; + .course-details { + float: left; + + .course-title { + font-size: 1em; + color: palette(primary, base); + font-weight: 600; + text-decoration: underline; + margin: 0; + } + + .run-period { + color: palette(grayscale, base); font-size: 0.9375em; + } - /* IE11 CSS styles */ - @media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { - @include float(right); - } - &.complete-program { - margin: 10px 15px 10px 5px; - align-self: flex-start; - - @media(min-width: $bp-screen-md) { - align-self: flex-end; - } - - .list-price { - text-decoration: line-through; - } - } + .course-text .enrolled { + color: palette(grayscale, base); + } } - - .program-course-card { + .course-meta-container { + @media (min-width: $bp-screen-md) { + display: table; width: 100%; - padding: 15px; - margin-bottom: 10px; + } - @media(min-width: $bp-screen-md) { - height: auto; - } + .course-content { + overflow: hidden; + } + } - .section { - display: flex; - justify-content: space-between; + .course-details { + width: 100%; + float: none; - @media(min-width: $bp-screen-md) { - flex-wrap: wrap; - } + @media (min-width: $bp-screen-md) { + display: table-cell; + vertical-align: top; + padding: 0 10px 0 0; + float: left; + width: calc(100% - 205px); + } + } - } + .course-actions { + @media (min-width: $bp-screen-md) { + width: 200px; + text-align: right; + float: right; + } - .section:not(:first-child) { - margin-top: 0; + .course-enroll-view { + @media (min-width: $bp-screen-md) { + text-align: right; } + } + } - .course-details { - float: left; - - .course-title { - font-size: 1em; - color: palette(primary, base); - font-weight: 600; - text-decoration: underline; - margin: 0; - } - - .run-period { - color: palette(grayscale, base); - font-size: 0.9375em; - } - - .course-text .enrolled { - color: palette(grayscale, base); - } - } + .course-certificate { + width: 100%; + } - .course-meta-container { - @media(min-width: $bp-screen-md) { - display: table; - width: 100%; - } - .course-content { - overflow: hidden; - } - } + .upgrade-message { + flex-wrap: wrap; + + .action { + width: 100%; + margin: 5px 0; - .course-details { - width: 100%; - float: none; - @media(min-width: $bp-screen-md) { - display: table-cell; - vertical-align: top; - padding: 0 10px 0 0; - float: left; - width: calc(100% - 205px); - } + @media (min-width: $bp-screen-md) { + margin-left: auto; + width: initial; } + } - .course-actions { - @media(min-width: $bp-screen-md) { - width: 200px; - text-align: right; - float: right; - } - - .course-enroll-view { - @media(min-width: $bp-screen-md) { - text-align: right; - } - } + .certificate-status { + padding-top: 0; + width: initial; + + @media (min-width: $bp-screen-sm) { + width: 300px; } - .course-certificate { - width: 100%; + @media (min-width: $bp-screen-md) { + width: initial; } - .upgrade-message { - flex-wrap: wrap; - - .action { - width: 100%; - margin: 5px 0; - - @media(min-width: $bp-screen-md) { - margin-left: auto; - width: initial; - } - } - - .certificate-status{ - padding-top: 0px; - - width: initial; - @media(min-width: $bp-screen-sm) { - width: 300px; - } - @media(min-width: $bp-screen-md) { - width: initial; - } - - .card-msg { - font-family: "Open Sans"; - font-weight: bold; - font-size: 0.9375em; - color: palette(grayscale, base); - display: block; - @media(min-width: $bp-screen-sm) { - display: inline; - } - } - - .price { - color: palette(success, text); - font-weight: bold; - } - } + .card-msg { + font-family: "Open Sans"; + font-weight: bold; + font-size: 0.9375em; + color: palette(grayscale, base); + display: block; + @media (min-width: $bp-screen-sm) { + display: inline; + } } - .certificate-status { - .fa-check-circle { - color: palette(success, text); - } - - .card-msg { - font-family: "Open Sans"; - font-weight: bold; - font-size: 0.9375em; - color: palette(grayscale, base); - } - - .certificate-status-msg { - color: palette(grayscale, base); - font-size: 0.9375em; - } + .price { + color: palette(success, text); + font-weight: bold; } + } - .expired-notification { - display: inline-block; - padding-top: 5px; - width: 300px; - - @media(min-width: $bp-screen-sm) { - padding-top: 10px; - width: 500px; - } - @media(min-width: $bp-screen-md) { - width: initial; - } - } + } - .expired-icon { - @include float(left); - color: palette(primary, dark); - } + .certificate-status { + .fa-check-circle { + color: palette(success, text); + } - .expired-text { - overflow: hidden; - padding-left: 10px; - } + .card-msg { + font-family: "Open Sans"; + font-weight: bold; + font-size: 0.9375em; + color: palette(grayscale, base); + } + + .certificate-status-msg { + color: palette(grayscale, base); + font-size: 0.9375em; + } } -} -.program-sidebar { - padding: 30px 10px; + .expired-notification { + display: inline-block; + padding-top: 5px; + width: 300px; - @media(min-width: $bp-screen-md) { - @include float(right); - width: 300px; - padding-right: 30px; - position: relative; + @media (min-width: $bp-screen-sm) { + padding-top: 10px; + width: 500px; + } + + @media (min-width: $bp-screen-md) { + width: initial; + } } - @media(min-width: $bp-screen-lg) { - width: 450px; + .expired-icon { + @include float(left); - .program-progress { - @include margin-left(50px); - } + color: palette(primary, dark); } - @media(min-width: $lms-max-width) { - @include margin-right(calc((100% - 1180px) / 2)); + .expired-text { + overflow: hidden; + padding-left: 10px; } + } } -.certificate-heading { - margin-bottom: 10px; +.program-sidebar { + padding: 30px 10px; - @media(min-width: $bp-screen-md) { - @include margin-right(30px); - } + @media (min-width: $bp-screen-md) { + @include float(right); + + width: 300px; + padding-right: 30px; + position: relative; + } - @media(min-width: $bp-screen-lg) { - @include margin-left(10px); - @include margin-right(0); + @media (min-width: $bp-screen-lg) { + width: 450px; + + .program-progress { + @include margin-left(50px); } + } + + @media (min-width: $lms-max-width) { + @include margin-right(calc((100% - 1180px) / 2)); + } +} + +.certificate-heading { + margin-bottom: 10px; + + @media (min-width: $bp-screen-md) { + @include margin-right(30px); + } + + @media (min-width: $bp-screen-lg) { + @include margin-left(10px); + @include margin-right(0); + } } .program-cert-link { - display: inline-block; + display: inline-block; - &:active, - &:focus, - &:hover { - .program-cert { - border-color: $blue-d1; - } + &:active, + &:focus, + &:hover { + .program-cert { + border-color: $blue-d1; } + } } .program-cert { - width: 100%; - border: 1px solid $divider-color; + width: 100%; + border: 1px solid $divider-color; - @media(min-width: $bp-screen-md) { - width: calc(100% - 30px); - } + @media (min-width: $bp-screen-md) { + width: calc(100% - 30px); + } - @media(min-width: $bp-screen-lg) { - width: 100%; - } + @media (min-width: $bp-screen-lg) { + width: 100%; + } } .certificate-list { - @include margin(0, 0, 0, 10px); - list-style: none; + @include margin(0, 0, 0, 10px); - .certificate { - display: flex; - flex-direction: row; - padding: 5px 0 10px; - - .image-link { - flex: 0 0 100px; - @media(min-width: $bp-screen-md) { - flex: 0 0 120px; - } - } + list-style: none; + + .certificate { + display: flex; + flex-direction: row; + padding: 5px 0 10px; + + .image-link { + flex: 0 0 100px; + + @media (min-width: $bp-screen-md) { + flex: 0 0 120px; + } } + } - .certificate-link { - @include margin-left(20px); - color: $black; - font: { - size: 1.1em; - weight: 600; - } + .certificate-link { + @include margin-left(20px); - @media(min-width: $bp-screen-md) { - font-size: 0.9em; - } + color: $black; + font: { + size: 1.1em; + weight: 600; + } - @media(min-width: $bp-screen-lg) { - font-size: 1.1em; - } + @media (min-width: $bp-screen-md) { + font-size: 0.9em; + } - &:active, - &:focus, - &:hover { - .sample-cert { - border-color: $blue-d1; - } - } + @media (min-width: $bp-screen-lg) { + font-size: 1.1em; } - - .sample-cert { - width: 120px; - border: 3px solid $gray-l3; - border-radius: 5px; - @media(min-width: $bp-screen-md) { - width: 100px; - } + &:active, + &:focus, + &:hover { + .sample-cert { + border-color: $blue-d1; + } + } + } - @media(min-width: $bp-screen-lg) { - width: 120px; - } + .sample-cert { + width: 120px; + border: 3px solid $gray-l3; + border-radius: 5px; + + @media (min-width: $bp-screen-md) { + width: 100px; + } + + @media (min-width: $bp-screen-lg) { + width: 120px; } + } } diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss index 17dd16f0f72..8c4f6f0547b 100644 --- a/lms/static/sass/views/_program-list.scss +++ b/lms/static/sass/views/_program-list.scss @@ -6,7 +6,7 @@ @include grid-container(); @include span(12); - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(9); } } @@ -14,9 +14,10 @@ .sidebar { @include span(12); @include float(right); + margin-bottom: $baseline; - @media(min-width: $bp-screen-md) { + @media (min-width: $bp-screen-md) { @include span(3); } @@ -47,6 +48,7 @@ .empty-programs-message { @include span(12); + border: 3px solid $gray-l4; background: $gray-l6; padding: ($baseline*2) 0; diff --git a/lms/static/sass/views/_program-marketing-page.scss b/lms/static/sass/views/_program-marketing-page.scss index 2cc222fe562..d3c56ab9abb 100644 --- a/lms/static/sass/views/_program-marketing-page.scss +++ b/lms/static/sass/views/_program-marketing-page.scss @@ -1,1767 +1,1963 @@ /* Box shadow mixin */ -// example: @include box-shadow( 2px, 3px, 6px, rgba(0, 0, 0, 0.3) ); +// example: @include box-shadow(2px, 3px, 6px, rgba(0, 0, 0, 0.3)); @mixin box-shadow($x, $y, $blur, $color, $inset: false) { - @if $inset { - -webkit-box-shadow: inset $x $y $blur $color; - -moz-box-shadow: inset $x $y $blur $color; - box-shadow: inset $x $y $blur $color; - } @else { - -webkit-box-shadow: $x $y $blur $color; - -moz-box-shadow: $x $y $blur $color; - box-shadow: $x $y $blur $color; - } + @if $inset { + -webkit-box-shadow: inset $x $y $blur $color; + -moz-box-shadow: inset $x $y $blur $color; + box-shadow: inset $x $y $blur $color; + } + + @else { + -webkit-box-shadow: $x $y $blur $color; + -moz-box-shadow: $x $y $blur $color; + box-shadow: $x $y $blur $color; + } } #program-details-page { - .main-banner { - height: 260px; - background: palette(primary, dark); + .main-banner { + height: 260px; + background: palette(primary, dark); + margin-bottom: 20px; + position: relative; + + @media (max-width: 767px){ + padding: 0 12px 25px; + height: auto; + } + + @media (min-width: 768px) { + height: 333px; margin-bottom: 20px; + } + + @media (min-width: 1024px) { + margin-bottom: 50px + } + + .btn-play { + background-image: none; + background-color: transparent; + box-shadow: none; + padding: 0; + margin-left: -moz-calc((100% - 74px) / 2); + margin-left: -webkit-calc((100% - 74px) / 2); + margin-left: calc((100% - 74px) / 2); + margin-top: 125px; + margin-bottom: 94px; + height: 74px; + width: 74px; + color: #fff; + background: none; + border: 4px solid #fff; + border-radius: 50%; + + .icon { + padding-left: 8px; + } + + &:hover { + opacity: 0.7; + outline: none; + } + } + + .org-logo { + display: inline-block; position: relative; - @media(max-width: 767px){ - padding: 0 12px 25px; - height: auto; + overflow: hidden; + margin-bottom: 8px; + background: rgba(255, 255, 255, 0.8); + + @include box-shadow(0, 3px, 4px, rgba(0, 0, 0, 0.5)); + + @media (max-width: 767px) { + margin-bottom: 12px; + max-width: 120px; + box-shadow: none; } + @media (min-width: 768px) { - height: 333px; - margin-bottom: 20px; + max-width: 150px; + position: absolute; + top: 0; } + @media (min-width: 1024px) { - margin-bottom: 50px + max-width: 200px; } - .btn-play { - background-image: none; - background-color: transparent; - box-shadow: none; - padding: 0; - margin-left: -moz-calc((100% - 74px) / 2); - margin-left: -webkit-calc((100% - 74px) / 2); - margin-left: calc((100% - 74px) / 2); - margin-top: 125px; - margin-bottom: 94px; - height: 74px; - width: 74px; - color: #fff; - background: none; - border: 4px solid #fff; - border-radius: 50%; + img { + max-width: 100%; + max-height: 95px; + } - .icon { - padding-left: 8px; - } + &::after { + content: ""; + position: absolute; + top: 0; + left: -2px; + right: -2px; + box-shadow: 0 1px 3px #333; + height: 1px; + background: #a1a5a5; + z-index: 1; + } + } - &:hover { - opacity: 0.7; - outline: none; - } + .banner-title, + .banner-description { + color: $white; + } + + .banner-title { + font-size: 1.5em; + font-weight: 600; + text-align: left; + letter-spacing: inherit; + margin-bottom: 10px; + + @media (min-width: 768px) { + margin-top: 105px; + font-size: 1.9em; } - .org-logo { - display: inline-block; - position: relative; - overflow: hidden; - margin-bottom: 8px; - background: rgba(255, 255, 255, .8); - @include box-shadow(0, 3px, 4px, rgba(0, 0, 0, 0.5)); - @media (max-width: 767px) { - margin-bottom: 12px; - max-width: 120px; - box-shadow: none; - } - @media (min-width: 768px) { - max-width: 150px; - position: absolute; - top: 0; - } - @media (min-width: 1024px) { - max-width: 200px; - } + @media (min-width: 1024px) { + font-size: 2em; + } - img { - max-width: 100%; - max-height: 95px; - } - &:after{ - content: ""; - position: absolute; - top: 0; - left: -2px; - right: -2px; - box-shadow: 0px 1px 3px #333; - height: 1px; - background: #a1a5a5; - z-index: 1; - } + @media (min-width: 1280px) { + font-size: 2.25em; } + } + + .banner-description { + min-height: 60px; + font-size: 1.06em; + font-weight: 600; + line-height: 1.35em; - .banner-title, - .banner-description { - color: $white; + @media (max-width: 767px) { + margin-bottom: 14px; + font-weight: normal; } - .banner-title { - font-size: 1.5em; - font-weight: 600; - text-align: left; - letter-spacing: inherit; - margin-bottom: 10px; - @media (min-width: 768px) { - margin-top: 105px; - font-size: 1.9em; - } - @media (min-width: 1024px) { - font-size: 2em; - } - @media (min-width: 1280px) { - font-size: 2.25em; - } + @media (min-width: 768px) { + font-size: 1.1em; } - .banner-description { - min-height: 60px; - font-size: 1.06em; - font-weight: 600; - line-height: 1.35em; - @media (max-width: 767px) { - margin-bottom: 14px; - font-weight: normal; - } - @media (min-width: 768px) { - font-size: 1.1em; - } - @media (min-width: 1024px) { - font-size: 1.25em; - } + @media (min-width: 1024px) { + font-size: 1.25em; } - .grid-manual, .row{ - @media(max-width: 767px){ - display: block; - } + } + + .grid-manual, .row{ + @media (max-width: 767px){ + display: block; } - .grid-manual{ - .btn-start{ - min-width: 300px; - padding: 0.75rem 2rem; - font-size: 1.25rem; - text-decoration: none; - text-align: center; - font-weight: 600; - border-radius: 0; - background: #008100; - background: -moz-linear-gradient(top, #008100 0%, #0a570a 100%); - background: -webkit-linear-gradient(top, #008100 0%,#0a570a 100%); - background: linear-gradient(to bottom, #008100 0%,#0a570a 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008100', endColorstr='#0a570a',GradientType=0 ); - border: 0; - &:hover{ - background: -moz-linear-gradient(top, #006200 0%, #006200 100%); - background: -webkit-linear-gradient(top, #006200 0%,#006200 100%); - background: linear-gradient(to bottom, #006200 0%,#006200 100%); - } + } + + .grid-manual{ + .btn-start{ + min-width: 300px; + padding: 0.75rem 2rem; + font-size: 1.25rem; + text-decoration: none; + text-align: center; + font-weight: 600; + border-radius: 0; + background: #008100; + background: -moz-linear-gradient(top, #008100 0%, #0a570a 100%); + background: -webkit-linear-gradient(top, #008100 0%,#0a570a 100%); + background: linear-gradient(to bottom, #008100 0%,#0a570a 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008100', endColorstr='#0a570a',GradientType=0); + border: 0; + + &:hover { + background: -moz-linear-gradient(top, #006200 0%, #006200 100%); + background: -webkit-linear-gradient(top, #006200 0%,#006200 100%); + background: linear-gradient(to bottom, #006200 0%,#006200 100%); } } } + } - .left-col, - .right-col { - @media (min-width: 768px) { - padding: 0 0 15px; - } - @media (min-width: 1024px) { - padding: 15px 0; - } + .left-col, + .right-col { + @media (min-width: 768px) { + padding: 0 0 15px; } - .left-col { - @media (min-width: 768px) { - border-right: 1px solid #979797; - padding-right: 20px; - } - @media (min-width: 1024px) { - padding-right: 50px; - } + @media (min-width: 1024px) { + padding: 15px 0; } + } - .right-col { - @media (min-width: 768px) { - padding-left: 0; - } - @media (min-width: 1024px) { - padding-left: 30px; - } + .left-col { + @media (min-width: 768px) { + border-right: 1px solid #979797; + padding-right: 20px; } - .courses-in-program .course-card .tbl-view .tbl-col:first-child{ - width: 70% !important; - @media (max-width: 768px) { - width: 95% !important; - } + @media (min-width: 1024px) { + padding-right: 50px; } + } - .courses-in-program .course-card { - background: $white; - padding: 10px; - margin-bottom: 30px; - border: 1px solid palette(grayscale, back); - @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 0.4)); - border-radius: 4px; - @media (min-width: 768px) { - padding: 20px; - border: 1px solid #979797; - box-shadow: none; - border-radius: 0; - } + .right-col { + @media (min-width: 768px) { + padding-left: 0; + } - .title { - margin-bottom: 10px; - font-size: 18px; - text-decoration: underline; - a{ - color: #005686; - } + @media (min-width: 1024px) { + padding-left: 30px; + } + } - small { - display: block; - font-size: 0; - margin-top: 5px; + .courses-in-program .course-card .tbl-view .tbl-col:first-child{ + width: 70% !important; - > span { - display: inline-block; - text-decoration: none; - font-size: 1rem !important; - &:first-child { - border-right: 1px solid #4a4a4a; - padding-right: 6px; - margin-right: 6px; - @media (min-width: 768px) { - padding-right: 10px; - margin-right: 10px; - } - } - } - } - } + @media (max-width: 768px) { + width: 95% !important; + } + } - p { - margin-bottom: 0; - font-weight: normal; - font-size: 1rem; - } + .courses-in-program .course-card { + background: $white; + padding: 10px; + margin-bottom: 30px; + border: 1px solid palette(grayscale, back); - &:last-child { - margin-bottom: 0; - } + @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 0.4)); + + border-radius: 4px; + + @media (min-width: 768px) { + padding: 20px; + border: 1px solid #979797; + box-shadow: none; + border-radius: 0; } - .courses-in-program.container { - display: block; - padding: 20px 0; - background: #ececec; - margin-top: 15px; - @media (min-width: 768px) { - margin-top: 0; - background: $white; - padding: 20px; - } + .title { + margin-bottom: 10px; + font-size: 18px; + text-decoration: underline; - .course-cards { - padding-top: 5px; - @media (min-width: 768px) { - width: 100% !important; - transform: none !important; - } - } + a{ + color: #005686; + } - > .hd { - padding: 0 1.25rem !important; - margin-bottom: 15px; - @media (min-width: 768px) { - padding: 0; - font-size: 18px !important; - } - @media (min-width: 1024px) { - font-size: 22px !important; - } - } + small { + display: block; + font-size: 0; + margin-top: 5px; - .course-card { - margin-bottom: 20px; - min-height: 283px; - position: relative; - @media (max-width: 767px) { - min-height: 300px; - margin-left: 5px; - margin-right: 5px; - padding-bottom: 50px; - overflow: hidden; - position: relative; - } + > span { + display: inline-block; + text-decoration: none; + font-size: 1rem !important; - .tbl-view { - .tbl-col { - .btn-enroll-now { - position: absolute; - left: 0; - right: 0; - bottom: 0; - width: 100%; - border-radius: 0; - line-height: 22px; - background: #0f8012; - @media (min-width: 768px) { - position: relative; - border: 1px solid #ccc; - max-width: 200px; - } - } - - &:first-child { - @media (min-width: 768px) { - width: 75%; - } - - p { - @media (min-width: 768px) { - max-width: 700px; - } - } - } - } - } - .btn-enroll-now{ - width: 100% !important; - max-width: 300px !important; - min-height: 50px; - font-size: 1.33rem; - font-weight: bold; - } - } + &:first-child { + border-right: 1px solid #4a4a4a; + padding-right: 6px; + margin-right: 6px; - .pagingInfo { - display: block; - text-align: center; @media (min-width: 768px) { - display: none; + padding-right: 10px; + margin-right: 10px; } + } } + } } - .copy-meta-mobile{ - font-size: 0.875rem; - line-height: 1.6em; + p { + margin-bottom: 0; + font-weight: normal; + font-size: 1rem; } - //Helper Classes - .pull-left{ - float: left !important; + &:last-child { + margin-bottom: 0; } - - .pull-right{ - float: right !important; + } + + .courses-in-program.container { + display: block; + padding: 20px 0; + background: #ececec; + margin-top: 15px; + + @media (min-width: 768px) { + margin-top: 0; + background: $white; + padding: 20px; } - .block{ - display: block; + .course-cards { + padding-top: 5px; + + @media (min-width: 768px) { + width: 100% !important; + transform: none !important; + } } - a{ - text-decoration: none; - &:hover{ - opacity: 0.8; - text-decoration: none; + > .hd { + padding: 0 1.25rem !important; + margin-bottom: 15px; + + @media (min-width: 768px) { + padding: 0; + font-size: 18px !important; } - &:focus{ - text-decoration: none; + + @media (min-width: 1024px) { + font-size: 22px !important; } } - .no-padding{ - padding: 0 !important; + + .course-card { + margin-bottom: 20px; + min-height: 283px; + position: relative; + + @media (max-width: 767px) { + min-height: 300px; + margin-left: 5px; + margin-right: 5px; + padding-bottom: 50px; + overflow: hidden; + position: relative; + } + + .tbl-view { + .tbl-col { + .btn-enroll-now { + position: absolute; + left: 0; + right: 0; + bottom: 0; + width: 100%; + border-radius: 0; + line-height: 22px; + background: #0f8012; + + @media (min-width: 768px) { + position: relative; + border: 1px solid #ccc; + max-width: 200px; + } + } + + &:first-child { + @media (min-width: 768px) { + width: 75%; + } + + p { + @media (min-width: 768px) { + max-width: 700px; + } + } + } + } + } + + .btn-enroll-now{ + width: 100% !important; + max-width: 300px !important; + min-height: 50px; + font-size: 1.33rem; + font-weight: bold; + } } - #success-message{ - padding: 0; - .alert { - min-width: 0; - border-left-width: 0; - border-right-width: 0; - border-bottom-width: 0; - box-shadow: none; + + .pagingInfo { + display: block; + text-align: center; + + @media (min-width: 768px) { + display: none; } } - .window-wrap{ - background-color: transparent; + } + + .copy-meta-mobile{ + font-size: 0.875rem; + line-height: 1.6em; + } + + //Helper Classes + .pull-left{ + float: left !important; + } + + .pull-right{ + float: right !important; + } + + .block{ + display: block; + } + + a{ + text-decoration: none; + + &:hover { + opacity: 0.8; + text-decoration: none; } - .content-wrapper{ - max-width: none; - padding-top: 0; - padding-bottom: 0; - .container { - border: none; - } + + &:focus{ + text-decoration: none; } - .grid-container{ - padding: 0 1rem; + } + + .no-padding{ + padding: 0 !important; + } + + #success-message{ + padding: 0; + + .alert { + min-width: 0; + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + box-shadow: none; } - .show-user-menu{ - display: block !important; - right: -16px !important; + } + + .window-wrap{ + background-color: transparent; + } + + .content-wrapper { + max-width: none; + padding-top: 0; + padding-bottom: 0; + + .container { + border: none; } + } - .hidden-mobile{ - display: none; + .grid-container { + padding: 0 1rem; + } + + .show-user-menu{ + display: block !important; + right: -16px !important; + } + + .hidden-mobile{ + display: none; + } + + .visible-mobile{ + display: block; + } + + .btn-success{ + background-color: palette(success, text) !important; + color: $white !important; + border-color: palette(success, text); + + &:hover { + background-color: palette(success, accent) !important; } - .visible-mobile{ + } + + .btn-block{ + width: 100% !important; + } + + .bookmark-button:hover { + color: #0071bb !important; + border-color: transparent !important; + } + + .inner-container { + @include grid-container(); + @include span(12); + + padding: 0 1.25rem; + } + + h2{ + font-size: 1.5rem; + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; + margin: 1.25rem 0; + text-transform: none; + } + + h1, h2, h3, h4, h5, h6{ + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; + } + + .col-centered{ + float: none !important; + margin-left: auto !important; + margin-right: auto !important; + } + + .input-group{ + margin-bottom: 1.25rem; + } + + .input-lg{ + line-height: 55px !important; + height: 55px !important; + padding: 0 1.25rem !important; + } + + .form-block{ + label, input, select, button, textarea{ display: block; - } - .btn-success{ - background-color: palette(success, text) !important; - color: $white !important; - border-color: palette(success, text); - &:hover{ - background-color: palette(success, accent) !important; + width: 100%; + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; + font-style: normal; + margin-bottom: 0.5rem !important; + + &.has-error { + border-color: palette(error, text); + border-radius: 4px 4px 0 0; + margin-bottom: 0 !important; + + + .field-message{ + border-radius: 0 0 4px 4px; + width: 100%; + } } } - .btn-block{ - width: 100% !important; - } - .bookmark-button:hover { - color: #0071bb !important; - border-color: transparent !important; + + input{ + box-shadow: none; + border: 1px solid palette(grayscale, back); + border-radius: 4px; + font-size: 1rem; + width: 100%; + + &:focus, &:active{ + box-shadow: none; + border-color: palette(grayscale, base); + } } - .inner-container{ - @include grid-container(); - @include span(12); - padding: 0 1.25rem; + + select{ + -webkit-appearance: none; + -moz-appearance: none; + border-color: palette(grayscale, back); + appearance: none; + + &::-ms-expand{ + display: none; + } } - h2{ - font-size: 1.5rem; - font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; - margin: 1.25rem 0; - text-transform: none; + + textarea{ + height: 280px; + border-color: palette(grayscale, back); + box-shadow: none; + resize: none; + padding: 1rem; } - h1, h2, h3, h4, h5, h6{ - font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; + + button{ + margin-top: 2.5rem; + padding: 1.25rem; } - .col-centered{ - float: none !important; - margin-left: auto !important; - margin-right: auto !important; + } + + .list-bulleted{ + li{ + margin-bottom: 0.2rem !important; + padding-left: 0.5rem !important; + line-height: 1.5rem; + color: palette(grayscale, base); + + .brand-link{ + display: inline; + } } - .input-group{ - margin-bottom: 1.25rem; + } + + .btn-enroll-mobile{ + margin-bottom: 2rem; + + .btn-enroll{ + max-width: 95%; + margin: auto; + border-radius: 3px; } - .input-lg{ - line-height: 55px !important; - height: 55px !important; - padding: 0 1.25rem !important; + } + + #course-trailer { + .trailer-link { + color: $white; + font-weight: bold; + + span { + text-decoration: underline; + } + + &:hover { + cursor: pointer; + } } - .form-block{ - label, input, select, button, textarea{ - display: block; - width: 100%; - font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; - font-style: normal; - margin-bottom: 0.5rem !important; - &.has-error{ - border-color: palette(error, text); - border-radius: 4px 4px 0 0; - margin-bottom: 0 !important; - + .field-message{ - border-radius: 0 0 4px 4px; - width: 100%; + } + + #accordion-group { + font-family: "Open Sans", Arial, Helvetica, sans-serif; + + .accordion-item { + border-bottom: 1px solid palette(primary, dark); + + .accordion-head { + background: #004165; + padding: 18px 18px 18px 84px; + color: $white; + border-radius: 0; + border: none; + margin: 0; + font-size: 1.13em; + position: relative; + + &:hover, + &.active, + &:focus{ + cursor: pointer; + } + + &::before { + content: "\f054"; + font-family: FontAwesome; + position: absolute; + left: 44px; + top: 20px; + width: 18px; + height: 22px; + } + + &.ui-state-active { + &::before { + content: "\f078"; + left: 40px; } } } - input{ - box-shadow: none; - border: 1px solid palette(grayscale, back); - border-radius: 4px; - font-size: 1rem; - width: 100%; - &:focus, &:active{ - box-shadow: none; - border-color: palette(grayscale, base); + + .accordion-content { + display: none; + padding: 15px; + background: #f6f6f6; + border: none; + + p, + ul { + color: $dark-gray1 !important; + font-size: 1em !important; + line-height: 1.5em; + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + } + + p { + &:last-child { + margin: 0; + } + } + + ul { + li { + padding-left: 0 !important; + + + div { + color: $dark-gray1; + } + } } } - select{ - -webkit-appearance: none; - -moz-appearance: none; - border-color: palette(grayscale, back); - appearance: none; - &::-ms-expand{ - display: none; + + &.show { + .accordion-content { + display: block; } } - textarea{ - height: 280px; - border-color: palette(grayscale, back); - box-shadow: none; - resize: none; - padding: 1rem; + + &:nth-of-type(2) .accordion-head { + background: #004a74; } - button{ - margin-top: 2.5rem; - padding: 1.25rem; + + &:nth-of-type(3) .accordion-head { + background: #00527f; } - } - .list-bulleted{ - li{ - margin-bottom: 0.2rem !important; - padding-left: 0.5rem !important; - line-height: 1.5rem; - color: palette(grayscale, base); - .brand-link{ - display: inline; + &:nth-of-type(4) .accordion-head { + background: #005d91; + } + + &:nth-of-type(5) .accordion-head { + background: #016fad; + } + + &:nth-of-type(6) .accordion-head { + background: #1878ad; + } + + &.instructors-mobile-list { + @extend .visible-sm; + + .accordion-content { + background: $white; + padding: 0; + + .instructor-profiles { + margin: 0; + + .profile-item { + padding: 15px 25px; + margin: 0; + + .details { + padding-left: 10px; + + .name { + font-size: 0.8em; + } + + .dept { + font-size: .7em; + } + } + + &:nth-child(even) { + background: #f0f0f0; + } + } + } } } } + } + + // Program marketing page + .main-banner { + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; + opacity: 0.35; + } - .btn-enroll-mobile{ - margin-bottom: 2rem; - .btn-enroll{ - max-width: 95%; - margin: auto; - border-radius: 3px; + .grid-manual { + z-index: 1; + position: relative; + + .btn-start { + color: #fff !important; + text-transform: none; } } + } + + #courses { + .btn-enroll { + text-align: center; + font-size: 1.3em; + font-weight: bold; + } + } + + // Program catalog listing - #course-trailer { - .trailer-link { + .program-list { + .programs-listing-item { + box-sizing: border-box; + box-shadow: 1px 2px 5px #ccc; + position: relative; + height: 360px; + overflow: visible; + min-height: 0; + border: none; + display: block; + margin: 0 auto 40px; + background: $white; + border-radius: 0; + + .program-image { + height: 142px; + position: relative; + overflow: hidden; + + .cover-image { + height: 142px; + + img { + width: 100%; + height: auto; + } + + &::before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + background: black; + opacity: 0; + transition: all 0.2s ease-out; + } + + .learn-more { + left: calc(50% - 100px); + box-sizing: border-box; + position: absolute; + z-index: 100; + top: 62px; + padding: 0 20px; + width: 200px; + height: 50px; + border-color: #0074b4; + border-radius: 3px; + background: #0074b4; + color: #fff; + line-height: 50px; + text-align: center; + opacity: 0; + text-transform: none; + transition: all 0.25s ease; + } + } + } + + .banner { + background: #065784; color: $white; + padding-right: 15px; + line-height: 18px; font-weight: bold; + font-size: 0.7em; + text-align: right; + text-transform: uppercase; + } - span { - text-decoration: underline; + .program-info { + padding: 12px 15px 5px; + + .program-org { + font-weight: normal; + font-size: 0.9em; + color: #3d3e3f; + margin: 0; + line-height: 16px; } - &:hover { - cursor: pointer; + .program-title { + max-height: 55px; + overflow: hidden; + color: #222; + font-size: 1.25em; + line-height: 1.333em; + margin-bottom: 5px; + } + + .program-subtitle { + font-size: 1em; + margin-bottom: 33px; + line-height: 1.25em; + height: 40px; + color: palette(primary, dark); + overflow: hidden; } } - } - #accordion-group { - font-family: "Open Sans", Arial, Helvetica, sans-serif; + .program-footer { + display: table; + width: 100%; + padding: 0 15px 15px; + position: absolute; + bottom: 0; - .accordion-item { - border-bottom: 1px solid palette(primary, dark); - .accordion-head { - background: #004165; - padding: 18px 18px 18px 84px; - color: $white; - border-radius: 0; - border: none; - margin: 0; - font-size: 1.13em; - position: relative; + .availability, + .program-logo { + display: table-cell; + } - &:hover, - &.active, - &:focus{ - cursor: pointer; - } + .availability { + text-align: left; + font-size: 0.9em; + line-height: 20px; + color: palette(primary, dark); + } - &:before { - content: "\f054"; - font-family: FontAwesome; - position: absolute; - left: 44px; - top: 20px; - width: 18px; - height: 22px; - } + .program-logo { + text-align: right; + width: 75px; + } + } - &.ui-state-active { + &::before, + &::after { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #d5d5d5; + border: 1px solid #b5b5b5; + } - &:before { - content: "\f078"; - left: 40px; - } - } + &::before { + left: -5px; + top: -5px; + z-index: -1; + } + + &::after { + left: -10px; + top: -10px; + z-index: -2; + } + + &:hover { + opacity: 1; + + .program-image { + .cover-image { + .learn-more { + opacity: 1; + } + + &::before { + opacity: .6; + } } + } + } + } + } + + .container { + min-width: auto; + border: none; + max-width: 73.125rem; + padding: 20px 1rem; + } + + > .grid-manual { + > .row { + align-items: stretch; + + [class*='col'] { + @media (max-width: 767px) { + margin: 0 auto; + width: 100%; + padding: 0; + } + } + } + } - .accordion-content { - display: none; - padding: 15px; - background: #f6f6f6; - border: none; - - p, - ul { - color: $dark-gray1 !important; - font-size: 1em !important; - line-height: 1.5em; - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - } + .instructors-title { + color: palette(primary, dark); + font-family: $sans-serif; + text-transform: none; + letter-spacing: 0; + + @media (min-width: 768px) { + margin-top: 5px; + font-size: 18px !important; + } + + @media (min-width: 1024px) { + font-size: 22px !important; + } + } + + .instructor-profiles { + margin-bottom: 30px; + + .profile-item { + @extend .tbl-view; + + margin-bottom: 25px; + + .avatar, + .details { + @extend .tbl-col; + + display: table-cell; + } - p { + .avatar { + width: 54px; - &:last-child { - margin: 0; - } - } + @media (min-width: 768px) { + width: 60px; + } - ul { + .img-holder { + width: 70px; + height: 70px; + border-radius: 50%; + border: 2px solid palette(primary, dark); + overflow: hidden; - li { - padding-left: 0 !important; - + div { - color: $dark-gray1; - } - } - } + img { + max-width: 100%; } + } + } - &.show { - .accordion-content { - display: block; - } - } + .details { + padding-left: 15px; - &:nth-of-type(2) .accordion-head { - background: #004a74; - } - &:nth-of-type(3) .accordion-head { - background: #00527f; - } - &:nth-of-type(4) .accordion-head { - background: #005d91; - } - &:nth-of-type(5) .accordion-head { - background: #016fad; - } - &:nth-of-type(6) .accordion-head { - background: #1878ad; + .name { + color: palette(primary, dark); + font-size: 1em; + margin-bottom: 0; + + a{ + font-weight: 600; + text-decoration: underline; } + } + + .dept { + font-size: 1em; + line-height: 1.5em; + } + } - &.instructors-mobile-list { - @extend .visible-sm; + &:last-child { + margin-bottom: 0; + } + } + } + + .visible-sm { + @media (min-width: 768px) { + display: none !important; + } + } - .accordion-content { - background: $white; - padding: 0; + .hidden-sm { + @media (max-width: 767px) { + display: none !important; + } + } + + .pagination { + margin: 10px 0 50px; + width: 100%; + display: block; + + .pages{ + width: calc(100% - 120px); + text-align: right; + display: inline-block; + font-size: 14px; + } - .instructor-profiles { - margin: 0; + .controls{ + text-align: center; + display: inline-block; + width: 115px; - .profile-item { - padding: 15px 25px; - margin: 0; + a{ + display: inline-block; + width: 50px; - .details { - padding-left: 10px; + &:first-child{ + border-right: 1px solid $light-gray2; + } - .name { - font-size: .8em; - } - .dept { - font-size: .7em; - } - } + .fa{ + font-size: 1.75rem; + color: $border-color; + } - &:nth-child(even) { - background: #f0f0f0; - } - } - } - } + &.active{ + .fa{ + color: palette(primary, dark); } + } } } + } - // Program marketing page - .main-banner { - &:before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #000; - opacity: 0.35; - } + .program-desc-tbl { + margin-bottom: 20px; - .grid-manual { - z-index: 1; - position: relative; + @extend .tbl-view; - .btn-start { - color: #ffffff !important; - text-transform: none; - } - } - } + border: 1px solid #e3e3e3; + border-radius: 6px; - #courses { - .btn-enroll { - text-align: center; - font-size: 1.3em; - font-weight: bold; - } + @media (min-width: 768px) { + border: 2px solid palette(primary, base); + border-radius: 0; + padding: 5px 15px; } - // Program catalog listing + @media (min-width: 1024px) { + padding: 8px 15px; + } - .program-list { - .programs-listing-item { - box-sizing: border-box; - box-shadow: 1px 2px 5px #ccc; - position: relative; - height: 360px; - overflow: visible; - min-height: 0; - border: none; - display: block; - margin: 0 auto 40px; - background: $white; - border-radius: 0; + .item { + padding: 10px 10px 12px !important; + font-size: .9em; + border-color: #d0d0d0; + margin: 0; - .program-image { - height: 142px; - position: relative; - overflow: hidden; + @media (min-width: 768px) { + font-size: 1em; + padding: 15px 0 !important; + } - .cover-image { - height: 142px; + @media (min-width: 1024px) { + font-size: 1em; + padding: 15px !important; + } - img { - width: 100%; - height: auto; - } + span { + font-size: 1em !important; - &:before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; - background: black; - opacity: 0; - transition: all 0.2s ease-out; - } - .learn-more { - left: calc(50% - 100px); - box-sizing: border-box; - position: absolute; - z-index: 100; - top: 62px; - padding: 0 20px; - width: 200px; - height: 50px; - border-color: #0074b4; - border-radius: 3px; - background: #0074b4; - color: #fff; - line-height: 50px; - text-align: center; - opacity: 0; - text-transform: none; - transition: all 0.25s ease; - } - } + + a{ + font-weight: 600; + font-size: 1em !important; + text-decoration: underline; } + } - .banner { - background: #065784; - color: $white; - padding-right: 15px; - line-height: 18px; - font-weight: bold; - font-size: 0.7em; - text-align: right; - text-transform: uppercase; - } + > span { + @extend .tbl-col; - .program-info { - padding: 12px 15px 5px; + display: block; + width: 100%; + color: $dark-gray1 !important; + line-height: 1.4em; - .program-org { - font-weight: normal; - font-size: 0.9em; - color: #3d3e3f; - margin: 0; - line-height: 16px; - } + @media (min-width: 768px) { + display: inline-block; + width: 50%; + } - .program-title { - max-height: 55px; - overflow: hidden; - color: #222; - font-size: 1.25em; - line-height: 1.333em; - margin-bottom: 5px; + .fa { + display: none; + margin-right: 30px; + margin-left: 20px; + font-size: 1.4em !important; + + @media (min-width: 1024px) { + display: inline-block; } + } - .program-subtitle { - font-size: 1em; - margin-bottom: 33px; - line-height: 1.25em; - height: 40px; + + a { + @media (max-width: 767px) { color: palette(primary, dark); - overflow: hidden; } } - .program-footer { - display: table; - width: 100%; - padding: 0 15px 15px; - position: absolute; - bottom: 0; + &:first-child { + color: $dark-gray1 !important; + margin-bottom: 5px; - .availability, - .program-logo { - display: table-cell; + @media (max-width: 767px) { + margin-bottom: 0; } - .availability { - text-align: left; - font-size: 0.9em; - line-height: 20px; - color: palette(primary, dark); + font-size: 0.85em; + + @media (max-width: 767px) { + text-transform: uppercase; } - .program-logo { - text-align: right; - width: 75px; + @media (min-width: 768px) { + width: 48%; + color: $dark-gray1 !important; + margin-bottom: 0; + font-size: 1.024em; } } + } - &:before, - &:after { - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); - content: ''; - position: absolute; - width: 100%; - height: 100%; - background: #d5d5d5; - border: 1px solid #b5b5b5; - } + .description { + display: block; + float: left; + } - &:before { - left: -5px; - top: -5px; - z-index: -1; + .price { + .green-highlight { + font-weight: 700; + color: palette(success, text); } - &:after { - left: -10px; - top: -10px; - z-index: -2; + .original-price { + text-decoration: line-through; } - &:hover { - opacity: 1; - - .program-image { - .cover-image { - .learn-more { - opacity: 1; - } - &:before { - opacity: .6; - } - } - } + .savings { + display: block; } } } + } - .container { - min-width: auto; - border: none; - max-width: 73.125rem; - padding: 20px 1rem; + .data-table{ + @media (max-width: 767px){ + padding: 0 20px; } - > .grid-manual { - > .row { - align-items: stretch; - - [class*='col'] { - @media (max-width: 767px) { - margin: 0 auto; - width: 100%; - padding: 0; - } - } + .list-divided{ + @media (min-width: 767px){ + padding: 0 12px !important; } - } - .instructors-title { - color: palette(primary, dark); - font-family: $sans-serif; - text-transform: none; - letter-spacing: 0px; + .item{ + margin-top: 0.625rem; + line-height: 1.4em; + padding: 15px 15px 19px 25px !important; + border-bottom: 1px solid $m-gray-l3 !important; + @media (min-width: 768px) { - margin-top: 5px; - font-size: 18px !important; - } - @media (min-width: 1024px) { - font-size: 22px !important; + padding: 15px 0 19px 0 !important; } - } - - .instructor-profiles { - margin-bottom: 30px; - - .profile-item { - @extend .tbl-view; - margin-bottom: 25px; - .avatar, - .details { - @extend .tbl-col; - display: table-cell; - } + @media (max-width: 767px){ + margin: 0 !important; + } - .avatar { - width: 54px; - @media (min-width: 768px) { - width: 60px; - } + &:last-child{ + border-bottom: 0 !important; + } + } + } + } + + .program-quote { + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + line-height: 1.4; + font-size: 0.8em; + + @media (min-width: 768px) { + line-height: 1.8; + font-size: 1em; + } - .img-holder { - width: 70px; - height: 70px; - border-radius: 50%; - border: 2px solid palette(primary, dark); - overflow: hidden; - img { - max-width: 100%; - } - } - } + span { + display: block; + margin-bottom: 10px; - .details { - padding-left: 15px; + @media (min-width: 768px) { + display: inline; + } - .name { - color: palette(primary, dark); - font-size: 1em; - margin-bottom: 0; - a{ - font-weight: 600; - text-decoration: underline; - } - } - .dept { - font-size: 1em; - line-height: 1.5em; - } - } + &.writer { + font-weight: 600; + padding-left: 50px; - &:last-child { - margin-bottom: 0; - } + @media (min-width: 768px) { + padding-left: 0; } - } - .visible-sm { - @media (min-width: 768px) { - display: none !important; + &::before { + @media (min-width: 768px) { + //content: '—'; + content: '\2014'; + margin-right: 3px; + margin-left: 5px; + } + } } - } - .hidden-sm { - @media (max-width: 767px) { - display: none !important; + img{ + height: auto; + margin-left: 6px; + width: 100%; } } - .pagination { - margin: 10px 0 50px; - width: 100%; - display: block; - .pages{ - width: calc(100% - 120px); - text-align: right; - display: inline-block; - font-size: 14px; - } - .controls{ - text-align: center; - display: inline-block; - width: 115px; - a{ - display: inline-block; - width: 50px; - &:first-child{ - border-right: 1px solid $light-gray2; - } - .fa{ - font-size: 1.75rem; - color: $border-color; - } - &.active{ - .fa{ - color: palette(primary, dark); - } - } - } - } + &.visible-mobile { + font-size: 1em; + line-height: 1.5; } + } - .program-desc-tbl { - margin-bottom: 20px; - - @extend .tbl-view; - border: 1px solid #e3e3e3; - border-radius: 6px; - @media (min-width: 768px) { - border: 2px solid palette(primary, base); - border-radius: 0; - padding: 5px 15px; - } - @media (min-width: 1024px) { - padding: 8px 15px; - } - - .item { - padding: 10px 10px 12px !important; - font-size: .9em; - border-color: #d0d0d0; - margin: 0; - @media (min-width: 768px) { - font-size: 1em; - padding: 15px 0 !important; - } - @media (min-width: 1024px) { - font-size: 1em; - padding: 15px !important; - } - span { - font-size: 1em !important; - + a{ - font-weight: 600; - font-size: 1em !important; - text-decoration: underline; - } - } - - > span { - @extend .tbl-col; - display: block; - width: 100%; - color: $dark-gray1 !important; - line-height: 1.4em; + .faq-links-list { + li { + margin-bottom: 15px; - @media (min-width: 768px) { - display: inline-block; - width: 50%; - } + a { + display: block; + position: relative; + color: $blue; + padding-left: 30px; - .fa { - display: none; - margin-right: 30px; - margin-left: 20px; - font-size: 1.4em !important; - @media (min-width: 1024px) { - display: inline-block; - } - } + &::before { + font-family: "FontAwesome"; + content: "\f105"; + position: absolute; + left: 5px; + top: 1px; + } - + a { - @media (max-width: 767px) { - color: palette(primary, dark); - } - } + & + div { + padding: 10px 30px; + font-size: 1rem; + color: $dark-gray1 !important; + } + } - &:first-child { - color: $dark-gray1 !important; - margin-bottom: 5px; - @media (max-width: 767px) { - margin-bottom: 0; - } - font-size: .85em; - @media (max-width: 767px) { - text-transform: uppercase; - } - @media (min-width: 768px) { - width: 48%; - color: $dark-gray1 !important; - margin-bottom: 0; - font-size: 1.024em; - } - } - } + &.expanded { + a::before { + content: "\f107"; + } + } + } - .description { - display: block; - float: left; - } + } - .price { - .green-highlight { - font-weight: 700; - color: palette(success, text); - } + .ui-state-default .ui-icon { + display: none; + } - .original-price { - text-decoration: line-through; - } + //Modals + .modal { + border-radius: 0 !important; + background: #fff !important; - .savings { - display: block; - } - } - } + .inner-wrapper { + padding: 0 !important; + border: none !important; + } + } + + .modal-custom { + width: 320px; + background-color: $white; + padding: 30px 30px; + position: fixed !important; + overflow: auto; + overflow-x: hidden; + top: 10%; + bottom: 10%; + left: calc(50% - 160px) !important; + margin-left: 0 !important; + z-index: 999; + + .btn-close { + position: absolute !important; + right: 20px !important; + top: 20px !important; + cursor: pointer; + + .fa { + font-size: 1.75em; + color: black; + } } - .data-table{ - @media(max-width: 767px){ - padding: 0 20px; - } - .list-divided{ - @media(min-width: 767px){ - padding: 0 12px !important; - } + &.custom-video-modal { + padding: 10px; + max-height: 360px; - .item{ - margin-top: 0.625rem; - line-height: 1.4em; - padding: 15px 15px 19px 25px !important; - border-bottom: 1px solid $m-gray-l3 !important; - @media (min-width: 768px) { - padding: 15px 0px 19px 0 !important; - } - @media(max-width: 767px){ - margin: 0 !important; - } - &:last-child{ - border-bottom: 0 !important; - } - } - } + .inner-wrapper, iframe { + height: 100%; + width: 100%; + } } - .program-quote { - margin-left: 0; - margin-right: 0; - margin-bottom: 0; - line-height: 1.4; - font-size: .8em; - @media (min-width: 768px) { - line-height: 1.8; - font-size: 1em; - } + .modal-body{ + overflow: hidden !important; + position: relative !important; + width: 100%; - span { + .modal-header { display: block; - margin-bottom: 10px; - @media (min-width: 768px) { - display: inline; - } + width: 100%; + margin-bottom: 2rem !important; + margin-left: 0 !important; + margin-right: 0 !important; - &.writer { - font-weight: 600; - padding-left: 50px; - @media (min-width: 768px) { - padding-left: 0; + .instructor-data{ + display: block; + + .thumbnail{ + display: block; + width: 100%; + padding-bottom: 0; + + img{ + border-radius: 50%; + border: 5px solid palette(grayscale, back); + margin-bottom: 1rem; } + } - &:before { - @media (min-width: 768px) { - //content: '—'; - content: '\2014'; - margin-right: 3px; - margin-left: 5px; + h3{ + display: block; + width: 100%; + vertical-align: middle; + font-size: 1.5em; + line-height: normal; + color: black; + margin-bottom: 0; + + span{ + display: block; + font-size: 1rem; + line-height: 1.1rem; + color: black; + + &:last-child { + color: black; + font-size: 0.8rem; + line-height: 1.1rem; + margin-top: 5px; } } + } } - img{ - height: auto; - margin-left: 6px; - width: 100%; - } } - &.visible-mobile { - font-size: 1em; - line-height: 1.5; + .instructor-bio { + line-height: 1.5rem; + margin-bottom: 2rem; + color: black; + margin: 0 !important; + font-size: 1rem; + } + + .links{ + a{ + margin-right: 0; + display: block; + margin-bottom: 0.5rem; + } } } + } - .faq-links-list { + //Media Queries - li { - margin-bottom: 15px; + @media screen and (min-width: 30em) { + .hero { + .tint-dark { + .grid-manual { + .text-tint { + .btn-neutral { + padding: 0.8em 2em; + } + } + } + } + } - a { - display: block; - position: relative; - color: $blue; - padding-left: 30px; - - &:before { - font-family: "FontAwesome"; - content: "\f105"; - position: absolute; - left: 5px; - top: 1px; - } - & + div { - padding: 10px 30px; - font-size: 1rem; - color: $dark-gray1 !important; - } + .courses-section { + .courses-container { + .highlighted-courses { + .courses { + .course-info { + height: 165px; } - &.expanded { - a:before { - content: "\f107"; - } + + .course-list { + .courses-listing-item { + padding: 0; + } } + + } } + } + } + .footer-main{ + .footer-logo{ + text-align: center; + } } - .ui-state-default .ui-icon { - display: none; + .visible-mobile{ + display: none; + } + + .hidden-mobile{ + display: block; } - //Modals - .modal { - border-radius: 0px !important; - background: #FFFFFF !important; + .testimonial-main{ + p{ + text-align: left; + } - .inner-wrapper { - padding: 0px !important; - border: none !important; + img{ + margin-bottom: 0; } } - .modal-custom { - width: 320px; - background-color: $white; - padding: 30px 30px; - position: fixed !important; - overflow: auto; - overflow-x: hidden; - top: 10%; - bottom: 10%; - left: calc(50% - 160px) !important; - margin-left: 0 !important; - z-index: 999; - .btn-close { - position: absolute !important; - right: 20px !important; - top: 20px !important; - cursor: pointer; - .fa { - font-size: 1.75em; - color: black; - } + } + + @media screen and (min-width: 48em){ + .btn-enroll-mobile{ + display: none; + } + + header.header-main{ + .logo a img { + height: 44px; } - &.custom-video-modal { - padding: 10px; - max-height: 360px; - .inner-wrapper, iframe { - height: 100%; - width: 100%; - } + + .collapsed-button{ + display: none; } - .modal-body{ - overflow: hidden !important; - position: relative !important; - width: 100%; - .modal-header{ - display: block; - width: 100%; - margin-bottom: 2rem !important; - margin-left: 0 !important; - margin-right: 0 !important; - .instructor-data{ - display: block; - .thumbnail{ - display: block; - width: 100%; - padding-bottom: 0; - img{ - border-radius: 50%; - border: 5px solid palette(grayscale, back); - margin-bottom: 1rem; - } - } - h3{ - display: block; - width: 100%; - vertical-align: middle; - font-size: 1.5em; - line-height: normal; - color: black; - margin-bottom: 0; - span{ - display: block; - font-size: 1rem; - line-height: 1.1rem; - color: black; - &:last-child{ - color: black; - font-size: .8rem; - line-height: 1.1rem; - margin-top: 5px; - } - } - } - } - } - .instructor-bio{ - line-height: 1.5rem; - margin-bottom: 2rem; - color: black; - margin: 0 !important; - font-size: 1rem; - } - .links{ - a{ - margin-right: 0; - display: block; - margin-bottom: 0.5rem; - } - } - } - } - - //Media Queries - - @media screen and (min-width: 30em){ - .hero{ - .tint-dark { - .grid-manual { - .text-tint { - .btn-neutral { - padding: 0.8em 2em; + + .nav-collapse{ + ul{ + display: block; + transition: all .2s; + position: relative; + top: inherit; + right: inherit; + left: inherit; + border-top: 0; + background-color: transparent; + box-shadow: none; + padding: 0; + + li{ + width: auto; + text-align: left; + line-height: 100px; + padding: 0 0.5rem; + + a{ + &.btn-neutral{ + padding: 0.625rem 1.25rem; } } - } - } - } - .courses-section { - .courses-container { - .highlighted-courses { - .courses { - .course-info{ - height: 165px; - } - .course-list{ - .courses-listing-item{ - padding: 0; + + &.user-account{ + ul{ + position: absolute; + right: 1rem; + top: 100%; + width: 100%; + margin-top: -1.5rem; + + li{ + display: block; + float: none; + line-height: normal; + + a{ + padding: 0.5rem; + display: inline-block; + } } } - } } } } - .footer-main{ - .footer-logo{ - text-align: center; - } - } - .visible-mobile{ - display: none; - } - .hidden-mobile{ - display: block; - } - .testimonial-main{ - p{ - text-align: left; - } - img{ - margin-bottom: 0; - } - } } - @media screen and (min-width: 48em){ - .btn-enroll-mobile{ - display: none; + .footer-main{ + .footer-logo{ + text-align: left; } - header.header-main{ - .logo a img { - height: 44px; - } - .collapsed-button{ - display: none; - } - .nav-collapse{ - ul{ - display: block; - transition: all .2s; - position: relative; - top: inherit; - right: inherit; - left: inherit; - border-top: 0; - background-color: transparent; - box-shadow: none; - padding: 0; - li{ - width: auto; - text-align: left; - line-height: 100px; - padding: 0 0.5rem; - a{ - &.btn-neutral{ - padding: 0.625rem 1.25rem; - } - } - &.user-account{ - ul{ - position: absolute; - right: 1rem; - top: 100%; - width: 100%; - margin-top: -1.5rem; - li{ - display: block; - float: none; - line-height: normal; - a{ - padding: 0.5rem; - display: inline-block; - } - } - } - } + + .open-edx-logo{ + ul{ + li{ + text-align: right; + + img{ + max-width: 80%; } } } } - .footer-main{ - .footer-logo{ - text-align: left; - } - .open-edx-logo{ - ul{ - li{ - text-align: right; - img{ - max-width: 80%; + } + + .hero { + .tint-dark { + max-height: 350px; + + .grid-manual { + .text-tint { + p { + font-size: 40px; + + span { + display: block; + font-size: 1.5rem; } } } } } - .hero { + + &.hero-video{ + background: rgba(0,0,0,0.6); + + .hero-image { + display: block; + background-size: cover !important; + } + .tint-dark { - max-height: 350px; - .grid-manual { - .text-tint { - p { - font-size: 40px; - span { - display: block; - font-size: 1.5rem; - } - } - } - } + background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */ } - &.hero-video{ - background: rgba(0,0,0,0.6); - .hero-image { - display: block; - background-size: cover !important; - } - .tint-dark { - background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */ - } - .grid-container{ - padding: 0 1rem; - .row{ - height: 22rem; - .description{ - .data{ - padding: 11.5% 2% 0 0; - h1{ - color: $white; - font-size: 2.2rem; - } - p{ - color: $white; - font-size: 1.3rem; - } + + .grid-container { + padding: 0 1rem; + + .row{ + height: 22rem; + + .description{ + .data{ + padding: 11.5% 2% 0 0; + + h1{ + color: $white; + font-size: 2.2rem; + } + + p{ + color: $white; + font-size: 1.3rem; } } - .video{ - float: right; - padding-left: 1.04167%; - padding-right: 1.04167%; - .video-data{ - line-height: 352px; - max-width: 95%; - img{ - border: 3px solid $white; - width: auto; - } + } + + .video{ + float: right; + padding-left: 1.04167%; + padding-right: 1.04167%; + + .video-data{ + line-height: 352px; + max-width: 95%; + + img{ + border: 3px solid $white; + width: auto; } } } } - &.no-video .grid-container .row .description .data{ - margin: 0; - } + } + + &.no-video .grid-container .row .description .data{ + margin: 0; } } - .course-info { - .course-detail { - [class*="col"] { - margin-bottom: 0; - } - .btn-enroll{ - margin-top: 0; - } + } + + .course-info { + .course-detail { + [class*="col"] { + margin-bottom: 0; } - .description-container{ - .expandable{ - max-height: 224px; - } + + .btn-enroll{ + margin-top: 0; } } - .modal-custom{ - display:none; - width: 540px; - padding: 30px 30px; - left: calc(50% - 270px) !important; - .focusKeeper { - width: 0; - height: 0; - overflow: hidden; - } - .modal-body{ - .modal-header{ - display: table; - width: 100%; - .instructor-data{ - display: table-row; - .thumbnail{ - display: table-cell; - width: 25%; - padding-bottom: 0; - img{ - margin-bottom: 0; - } - } - h3{ - display: table-cell; - width: 65%; - padding: 1rem; - } - } - } - - .links{ - a{ - margin-right: 1.5rem; - display: inline-block; - margin-bottom: 0; - } - } - } - } - .rtl .hero.hero-video .tint-dark .grid-container .row .description{ - padding-right: 1.04167%; - } - .course-card{ - .title{ - small{ - > span{ - font-size: 0.8rem !important; - } - } + + .description-container { + .expandable{ + max-height: 224px; } } } - @media screen and (min-width: 64em){ /* 980px */ - header.header-main { - .nav-collapse { - ul { - li { - padding: 0 0.9rem; + .modal-custom{ + display:none; + width: 540px; + padding: 30px 30px; + left: calc(50% - 270px) !important; + + .focusKeeper { + width: 0; + height: 0; + overflow: hidden; + } + + .modal-body{ + .modal-header { + display: table; + width: 100%; + + .instructor-data{ + display: table-row; + + .thumbnail{ + display: table-cell; + width: 25%; + padding-bottom: 0; + + img{ + margin-bottom: 0; + } + } + + h3{ + display: table-cell; + width: 65%; + padding: 1rem; } } } - } - .hero{ - &.hero-video .grid-container .row .description .data h1 { - font-size: 2.5rem; + + .links{ + a{ + margin-right: 1.5rem; + display: inline-block; + margin-bottom: 0; + } } } - .footer-main { - .footer-logo { - text-align: left; + } + + .rtl .hero.hero-video .tint-dark .grid-container .row .description{ + padding-right: 1.04167%; + } + + .course-card{ + .title{ + small{ + > span{ + font-size: 0.8rem !important; + } } } - .course-card{ - .title{ - small{ - > span{ - font-size: 1rem !important; - } + } + } + + @media screen and (min-width: 64em){ /* 980px */ + header.header-main { + .nav-collapse { + ul { + li { + padding: 0 0.9rem; } } } } - @media screen and (min-width: 80em){ - .footer-main { - .footer-logo { - text-align: left; - } + .hero{ + &.hero-video .grid-container .row .description .data h1 { + font-size: 2.5rem; } } - // For RTL - .rtl { - header{ - &.header-main{ - .list-inline li{ - float: left; - } - .nav-collapse .collapsed-button{ - left: 20px; - right: auto; - } - } + .footer-main { + .footer-logo { + text-align: left; } - .hero.hero-video .grid-container .row { - .description{ - padding-right: 2%; - .data { - h1 { - text-align: right; - } + } + + .course-card{ + .title{ + small{ + > span{ + font-size: 1rem !important; } } - .video{ - float: left; - } } - .footer-main ul li:last-child{ - text-align: right; - } - .course-index .accordion .course-navigation .button-chapter .group-heading { - padding: 15px 40px 15px 20px; - } - .ui-state-default.slick-header-column { - float: right !important; - left: inherit !important; - width: 84px !important; - height: 25px; - padding: 5px; + } + } + + @media screen and (min-width: 80em){ + .footer-main { + .footer-logo { + text-align: left; } - .grid-canvas { - width: 1097px !important; + } + } + + // For RTL + .rtl { + header { + &.header-main{ + .list-inline li{ + float: left; + } + + .nav-collapse .collapsed-button{ + left: 20px; + right: auto; + } } - .instructor-dashboard-content-2 { - .slickgrid .slick-cell { - float: right; - right: 0; - left: inherit; - position: relative !important; - width: 84px; + } - &.l0.r0 { - border-right: 1px dotted silver; - } - &.l12.r12 { - border-right: 0; + .hero.hero-video .grid-container .row { + .description{ + padding-right: 2%; + + .data { + h1 { + text-align: right; } } - .content-history-table-inner .slickgrid .slick-cell { - width: 219px; + } + + .video{ + float: left; + } + } + + .footer-main ul li:last-child{ + text-align: right; + } + + .course-index .accordion .course-navigation .button-chapter .group-heading { + padding: 15px 40px 15px 20px; + } + + .ui-state-default.slick-header-column { + float: right !important; + left: inherit !important; + width: 84px !important; + height: 25px; + padding: 5px; + } + + .grid-canvas { + width: 1097px !important; + } + + .instructor-dashboard-content-2 { + .slickgrid .slick-cell { + float: right; + right: 0; + left: inherit; + position: relative !important; + width: 84px; + + &.l0.r0 { + border-right: 1px dotted silver; } - .report-downloads-table .slickgrid .slick-cell { - width: 100%; + + &.l12.r12 { + border-right: 0; } } - .slick-header-columns { - right: 0 !important; - left: inherit !important; - width: 1097px !important; + + .content-history-table-inner .slickgrid .slick-cell { + width: 219px; } - .content-history-table-inner .ui-state-default.slick-header-column { - width: 219px !important; + + .report-downloads-table .slickgrid .slick-cell { + width: 100%; } } - @media(min-width: 768px) { - header.header-main .list-inline li.user-account ul:before { - right: 0.4rem; + .slick-header-columns { + right: 0 !important; + left: inherit !important; + width: 1097px !important; + } + + .content-history-table-inner .ui-state-default.slick-header-column { + width: 219px !important; + } + } + + @media (min-width: 768px) { + header.header-main .list-inline li.user-account ul::before { + right: 0.4rem; + } + + .course-card{ + display: inline-block; + margin: 0 calc(0.5 * 2.6rem) 30px calc(0.5 * 1rem) !important; + width: calc(50% - 22px); + vertical-align: top; + position: absolute; + height: 283px; + max-height: 283px; + overflow: hidden; + + &:nth-child(even){ + margin-right: 0 !important; } - .course-card{ - display: inline-block; - margin: 0 calc(0.5 * 2.6rem) 30px calc(0.5 * 1rem) !important; - width: calc(50% - 22px); - vertical-align: top; - position: absolute; - height: 283px; - max-height: 283px; - overflow: hidden; - &:nth-child(even){ - margin-right: 0 !important; - } - .title{ - a{ - height: auto; - max-height: 50px; - overflow: hidden; - display: block; - color: #005686; - text-decoration: underline; - } - small{ - margin-top: 10px; - > span{ - font-size: 0.9rem; - } - } - } - p{ - margin-bottom: 30px; - min-height: 75px; - max-height: 75px; + + .title{ + a{ + height: auto; + max-height: 50px; overflow: hidden; - position: absolute; - bottom: 66px; - left: 20px; - right: 20px; + display: block; + color: #005686; + text-decoration: underline; } - .btn-enroll{ - display: inline-block; - background-color: $green !important; - min-width: 220px; - padding: 10px 30px; - font-size: 16px !important; - font-weight: 600 !important; - text-decoration: none; - position: absolute; - bottom: 20px; - left: 20px; + + small{ + margin-top: 10px; + + > span{ + font-size: 0.9rem; + } } } - } - img{ - max-width: 100%; - } + p{ + margin-bottom: 30px; + min-height: 75px; + max-height: 75px; + overflow: hidden; + position: absolute; + bottom: 66px; + left: 20px; + right: 20px; + } - @media(min-width: 1024px) { - header.header-main .list-inline li.user-account ul:before { - right: 0.72rem; + .btn-enroll{ + display: inline-block; + background-color: $green !important; + min-width: 220px; + padding: 10px 30px; + font-size: 16px !important; + font-weight: 600 !important; + text-decoration: none; + position: absolute; + bottom: 20px; + left: 20px; } } + } + + img{ + max-width: 100%; + } + + @media (min-width: 1024px) { + header.header-main .list-inline li.user-account ul::before { + right: 0.72rem; + } + } } diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index f7f811560a0..98c60fe4f82 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -17,7 +17,7 @@ $light-border: 1px solid $gray-l5; .fa-caret-right { // flip the icon for RTL - &:before { + &::before { @include rtl { content: "\f0d9"; // FA icon arrow to the right } @@ -37,7 +37,9 @@ $light-border: 1px solid $gray-l5; .cart-errors { @include text-align(center); + @extend %t-copy-base; + display: none; margin-bottom: $baseline; border-bottom: 1px solid $pink; @@ -48,57 +50,68 @@ $light-border: 1px solid $gray-l5; #expiry-msg { @extend %t-copy-sub1; + margin-top: ($baseline*0.15); border-top: $light-border; background-color: $gray-l5; padding: ($baseline*0.75); - text-shadow: 0px 1px 1px $white; + text-shadow: 0 1px 1px $white; } .confirm-enrollment { .title { @include text-align(left); + @extend %t-title4; + border-bottom: $light-border; } .course-image { @include float(left); @include margin-right($baseline/2); + width: ($baseline*11.15); vertical-align: top; } .enrollment-details { @include float(left); + margin-bottom: ($baseline); width: calc(100% - #{$enrollment-details-width-difference}); .sub-title { @extend %t-title5; + text-transform: uppercase; color: $gray-l1; } .course-date-label { @include float(right); + color: $gray-l1; } .course-dates { @include float(right); + @extend %t-copy-lead1; } .course-title h1 { @include text-align(left); + @extend %t-title4; @extend %t-strong; + color: $black-t3; } .enrollment-text { @extend %t-copy-base; + line-height: normal; color: $gray-l1; } @@ -123,7 +136,9 @@ $light-border: 1px solid $gray-l5; @include float(right); @include border-radius(3px); @include text-align(center); + @extend %t-copy-lead2; + display: inline-block; background-clip: padding-box; padding: ($baseline*0.3) ($baseline*0.9); @@ -143,7 +158,9 @@ $light-border: 1px solid $gray-l5; button[type="submit"] { @include float(right); @include border-radius(3px); + @extend %t-copy-lead2; + display: inline-block; box-shadow: 0 1px 0 0 $blue2 inset; border: 1px solid $blue2; @@ -169,8 +186,10 @@ $light-border: 1px solid $gray-l5; .shopping-cart { a.blue { @include border-radius(3px); + @extend %t-copy-lead2; @extend %t-regular; + display: inline-block; margin: ($baseline/2) 0 $baseline 0; background: $blue2; @@ -190,6 +209,7 @@ $light-border: 1px solid $gray-l5; input[type="text"], input[type="email"], select { @extend %t-action2; @extend %t-strong; + border: $input-border; padding: ($baseline*0.4) ($baseline*0.6); width: ($baseline*13); @@ -218,7 +238,9 @@ $light-border: 1px solid $gray-l5; h1 { @include text-align(left); + @extend %t-title4; + margin: ($baseline/2) 0 0 0; padding: ($baseline*1.5) 0; letter-spacing: 0; @@ -227,11 +249,13 @@ $light-border: 1px solid $gray-l5; .steps { @extend %ui-no-list; + border-top: $steps-border; border-bottom: $steps-border; li { @include font-size(20); + display: inline-block; position: relative; margin: 0 ($baseline*1.5); @@ -242,6 +266,7 @@ $light-border: 1px solid $gray-l5; //STATE: active &.active { @extend %t-regular; + border-bottom: $steps-border; } @@ -256,12 +281,12 @@ $light-border: 1px solid $gray-l5; @include margin-right(0); @include padding-right($baseline*1.5); - &:after { + &::after { display: none; } } - &:after { + &::after { @include ltr { right: -($baseline*2); content: "\f178"; @@ -271,6 +296,7 @@ $light-border: 1px solid $gray-l5; left: -($baseline*2); content: "\f177"; } + position: absolute; top: ($baseline*1.3); color: $light-gray; @@ -289,16 +315,19 @@ $light-border: 1px solid $gray-l5; .image { @include float(left); + width: ($baseline*11); } .data-input { @include float(left); @include margin-left($baseline*1.25); + width: calc(100% - #{$data-input-width-difference}); h3, h3 span { @extend %t-title6; + padding: 0; text-transform: uppercase; color: $light-gray2; @@ -312,6 +341,7 @@ $light-border: 1px solid $gray-l5; .course-meta-info { @include float(right); @include text-align(right); + display: inline-block; width: 35%; } @@ -319,6 +349,7 @@ $light-border: 1px solid $gray-l5; .course-registration-title, .course-dates-title { @extend %t-title6; + display: block; padding: 0; text-transform: uppercase; @@ -328,6 +359,7 @@ $light-border: 1px solid $gray-l5; .course-display-name, .course-display-dates { @extend %t-title4; + display: block; color: $dark-gray2; } @@ -338,14 +370,16 @@ $light-border: 1px solid $gray-l5; h1 { @include float(left); + @extend %t-title4; + padding: 0 0 ($baseline/2) 0; width: ($baseline*35); text-transform: capitalize; color: $dark-gray1; // Adding this content to ensure proper display of closing parentheses - &:after { + &::after { content: "\200E‎"; } @@ -357,6 +391,7 @@ $light-border: 1px solid $gray-l5; span.date { @include float(right); @include text-align(right); + width: calc(100% - #{$date-span-width-difference}); } @@ -368,8 +403,10 @@ $light-border: 1px solid $gray-l5; .three-col { .col-1 { @include float(left); + @extend %t-copy-base; @extend %t-regular; + padding-top: ($baseline*0.55); width: ($baseline*22.5); text-transform: uppercase; @@ -378,7 +415,9 @@ $light-border: 1px solid $gray-l5; .price { span { @include padding-left($baseline); + @extend %t-copy-lead2; + color: $dark-gray1; } @@ -396,6 +435,7 @@ $light-border: 1px solid $gray-l5; .col-2 { @include float(left); @include line-height(29.73); + margin-top: ($baseline*0.15); width: ($baseline*17.5); text-transform: uppercase; @@ -407,6 +447,7 @@ $light-border: 1px solid $gray-l5; label { @extend %t-copy-base; @extend %t-strong; + cursor: text; text-transform: uppercase; color: $light-gray2; @@ -417,13 +458,16 @@ $light-border: 1px solid $gray-l5; @include margin-left($baseline*1.25); @include border-radius(3px); @include padding($baseline*0.3, $baseline*1.5, $baseline*0.3, $baseline/2); + display: inline-block; border: $input-border; input[type="text"] { @include text-align(center); + @extend %t-copy-lead2; @extend %t-strong; + box-shadow: none; border: none; padding: ($baseline*0.4) 0; @@ -441,6 +485,7 @@ $light-border: 1px solid $gray-l5; button { @include margin-left(-$baseline*1.5); + position: absolute; box-shadow: none; border: none; @@ -451,6 +496,7 @@ $light-border: 1px solid $gray-l5; i { @extend %t-icon3; + color: $dark-gray2; span { @@ -461,6 +507,7 @@ $light-border: 1px solid $gray-l5; //CASE: has class inc &.inc { @extend %no-outline; + top: ($baseline*0.45); width: auto; } @@ -468,6 +515,7 @@ $light-border: 1px solid $gray-l5; //CASE: has class dec &.dec { @extend %no-outline; + top: ($baseline*1.5); width: auto; height: ($baseline*1.1); @@ -497,7 +545,9 @@ $light-border: 1px solid $gray-l5; .updateBtn { @include float(right); @include padding($baseline*1.25, $baseline*1.75, $baseline*1.25, 0); + @extend %t-action2; + display: inline-block; // STATE: focus @@ -519,11 +569,13 @@ $light-border: 1px solid $gray-l5; .col-3 { @include float(right); + padding-top: ($baseline*0.65); width: ($baseline*2); button.btn-remove { @include float(right); + opacity: 0.8; box-shadow: none; border: none; @@ -534,7 +586,9 @@ $light-border: 1px solid $gray-l5; i { @include line-height(27.02); + @extend %t-icon3; + color: $dark-gray2; } @@ -562,6 +616,7 @@ $light-border: 1px solid $gray-l5; a { @extend %t-copy-lead1; @extend %t-strong; + display: inline-block; cursor: pointer; padding: ($baseline/2) 0; @@ -571,13 +626,16 @@ $light-border: 1px solid $gray-l5; span { @include margin-right(-$baseline); + display: inline-block; padding: ($baseline*0.45) 0; b { @include padding-left($baseline); + @extend %t-copy-lead2; @extend %t-strong; + letter-spacing: 0; } } @@ -585,11 +643,13 @@ $light-border: 1px solid $gray-l5; .code-input { @include float(left); + display: inline-block; input[type="text"] { @extend %t-copy-base; @extend %t-strong; + border: $input-border; padding: ($baseline*0.4) ($baseline*0.6); width: ($baseline*13); @@ -610,6 +670,7 @@ $light-border: 1px solid $gray-l5; .error-text { @extend %t-copy-sub2; + display: block; padding-bottom: 0; color: $red1; @@ -627,7 +688,9 @@ $light-border: 1px solid $gray-l5; .green { @include margin-right($baseline); + @extend %t-strong; + color: $green1; } @@ -651,6 +714,7 @@ $light-border: 1px solid $gray-l5; button[type="submit"] { @extend %t-action2; @extend %t-strong; + float: none; padding: ($baseline*0.35) $baseline; width: auto; @@ -673,12 +737,15 @@ $light-border: 1px solid $gray-l5; .row-inside { @include float(left); + padding: ($baseline/2) 0; width: 50%; .billing-detail-label { @include margin-right($baseline); + @extend %t-copy-sub1; + display: inline-block; width: ($baseline*9.5); vertical-align: top; @@ -686,6 +753,7 @@ $light-border: 1px solid $gray-l5; .billing-detail-value { @extend %t-copy-sub1; + display: inline-block; margin: 0; cursor: text; @@ -698,11 +766,13 @@ $light-border: 1px solid $gray-l5; .col-1 { @include float(left); + width: 35%; span.radio-group { @include margin($baseline/2, 0, $baseline/2, $baseline/4); @include border-radius(3px); + display: inline-block; border: $input-border; @@ -722,8 +792,10 @@ $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; + display: inline-block; margin-bottom: 0; color: $dark-gray2; @@ -738,14 +810,17 @@ $light-border: 1px solid $gray-l5; .col-2 { @include float(right); + width: 65%; button[type="submit"] { @include float(right); @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; + width: auto; height: ($baseline*3.35); letter-spacing: 0; @@ -764,7 +839,9 @@ $light-border: 1px solid $gray-l5; p { @include text-align(right); + @extend %t-copy-base; + padding: ($baseline*0.65) 0; } @@ -774,7 +851,9 @@ $light-border: 1px solid $gray-l5; .fa-caret-right { @include right($baseline*1.5); + @extend %t-icon3; + position: absolute; top: ($baseline*1.1); color: $white; @@ -784,7 +863,9 @@ $light-border: 1px solid $gray-l5; .disclaimer { @include text-align(right); + @extend %t-light; + padding: ($baseline/2) 0; color: $light-gray2; } @@ -792,6 +873,7 @@ $light-border: 1px solid $gray-l5; h3 { @extend %t-title6; @extend %t-regular; + padding: ($baseline*1.5) $baseline; color: $dark-gray1; } @@ -802,6 +884,7 @@ $light-border: 1px solid $gray-l5; h3 { @extend %t-title5; + margin-bottom: ($baseline/4); padding: ($baseline*0.6) 0; color: $dark-gray1; @@ -814,6 +897,7 @@ $light-border: 1px solid $gray-l5; .col-half { @include float(left); @include border-radius(4px); + margin-bottom: ($baseline*0.75); background: $light-gray1; padding: $baseline; @@ -831,6 +915,7 @@ $light-border: 1px solid $gray-l5; label { @extend %t-copy-base; @extend %t-regular; + display: block; color: $dark-gray2; font-style: normal; @@ -838,6 +923,7 @@ $light-border: 1px solid $gray-l5; input { @extend %t-copy-base; + margin-bottom: ($baseline/4); width: 100%; } @@ -852,6 +938,7 @@ $light-border: 1px solid $gray-l5; .error-text{ @extend %t-copy-sub2; + display: block; padding-bottom: 0; color: $red1; @@ -860,6 +947,7 @@ $light-border: 1px solid $gray-l5; .gray-bg { @include border-radius(3px); @include padding($baseline, $baseline, $baseline, $baseline*1.5); + margin: $baseline 0; background: $light-gray1; overflow: hidden; @@ -867,6 +955,7 @@ $light-border: 1px solid $gray-l5; .message-left { @include float(left); @include line-height(16.22); + width: 100%; color: $dark-gray1; @@ -897,16 +986,19 @@ $light-border: 1px solid $gray-l5; h2 { @extend %t-strong; + margin-bottom: 0; color: $dark-gray1; span { @include padding-left($baseline*3); + text-transform: capitalize; letter-spacing: 0; .blue-link { @extend %t-copy-sub1; + color: $blue2; // STATE: hover @@ -944,6 +1036,7 @@ $light-border: 1px solid $gray-l5; thead th { @include text-align(center); + border-bottom: $hr-border; padding: ($baseline*0.4) 0; text-transform: uppercase; @@ -971,6 +1064,7 @@ $light-border: 1px solid $gray-l5; td { @include text-align(center); + padding: ($baseline*0.75) 0; width: 30%; color: $dark-gray1; @@ -988,7 +1082,9 @@ $light-border: 1px solid $gray-l5; // CASE: has first child &:first-child { @extend %t-copy-lead1; + @include text-align(left); + text-transform: capitalize; } @@ -999,7 +1095,9 @@ $light-border: 1px solid $gray-l5; span { @include border-radius(3px); @include text-align(center); + @extend %t-copy-sub1; + display: inline-block; padding: ($baseline/10) ($baseline/2); min-width: ($baseline*2.75); @@ -1031,14 +1129,17 @@ $light-border: 1px solid $gray-l5; .empty-cart { @include border-radius(3px); @include text-align(center); + margin: $baseline 0; background: $light-gray1; padding: $baseline 0; h2 { @include text-align(center); + @extend %t-title5; @extend %t-strong; + margin-top: $baseline; margin-bottom: ($baseline/4); text-transform: initial; @@ -1048,15 +1149,19 @@ $light-border: 1px solid $gray-l5; p { @include text-align(center); + @extend %t-copy-sub1; + text-shadow: 0 1px 1px $white; color: $gray-l1; } a.blue { @include border-radius(3px); + @extend %t-copy-lead2; @extend %t-regular; + display: inline-block; margin: ($baseline/2) 0 $baseline 0; background: $blue2; @@ -1073,8 +1178,7 @@ $light-border: 1px solid $gray-l5; // Print @media print { - - a[href]:after { + a[href]::after { content: none !important; } @@ -1084,6 +1188,7 @@ $light-border: 1px solid $gray-l5; .shopping-cart { @include padding-right($baseline*2); + font-size: 14px; .gray-bg { @@ -1112,7 +1217,7 @@ $light-border: 1px solid $gray-l5; table.course-receipt { .redemption-url { - &:before { + &::before { display: inline-block; content:" " attr(data-base-url) " "; } diff --git a/lms/static/sass/views/_support.scss b/lms/static/sass/views/_support.scss index 1d3cdc7788f..389c80f2f87 100644 --- a/lms/static/sass/views/_support.scss +++ b/lms/static/sass/views/_support.scss @@ -3,8 +3,8 @@ // =================================================================== .certificates-search, .enrollment-search { - margin: 40px 0; + input[name="query"] { width: 350px; } @@ -17,27 +17,27 @@ .certificates-results { - table { - margin: 0 auto; - } + table { + margin: 0 auto; + } - th { - text-align: center; - text-decoration: underline; - } + th { + text-align: center; + text-decoration: underline; + } - th, td { - padding: 10px 10px; - vertical-align: middle; - } + th, td { + padding: 10px 10px; + vertical-align: middle; + } } .btn-cert-regenerate { - font-size: 12px; + font-size: 12px; } .btn-cert-generate { - font-size: 12px; + font-size: 12px; } .enrollment-modal-wrapper.is-shown { @@ -60,7 +60,9 @@ .enrollment-change-title { @extend %t-title6; @extend %t-strong; + @include text-align(left); + margin-bottom: 0; text-transform: none; } @@ -72,6 +74,7 @@ p, label, select, input { @extend %t-copy-sub1; + display: inline; font-style: normal; } @@ -80,6 +83,7 @@ .enrollment-change-errors { @extend %t-copy-sub1; @extend %t-light; + color: $red; } @@ -91,6 +95,7 @@ .enrollment-change-submit, .enrollment-change-cancel { @extend %t-action4; + margin: ($baseline/4) auto; text-transform: none; background-image: none; @@ -122,6 +127,7 @@ .change-enrollment-btn, .change-enrollment-btn:hover { @extend %t-action4; + margin: ($baseline/4) auto; padding: ($baseline/4) 1px; letter-spacing: normal; @@ -170,9 +176,9 @@ &:hover, &:focus { - color: $blue; - background-color: $mediumGrey !important; - } + color: $blue; + background-color: $mediumGrey !important; + } } .label-course { @@ -222,6 +228,7 @@ .file-action { @include float(right); + font-size: $support-form-base-font-size + 2; margin-bottom: $baseline - 10; } diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index 37b0475b9ce..59d704858b9 100644 --- a/lms/static/sass/views/_teams.scss +++ b/lms/static/sass/views/_teams.scss @@ -22,11 +22,13 @@ // layout .page-header { @include clearfix(); + border-bottom: 1px solid $gray-l3; padding: $baseline $baseline ($baseline/2) $baseline; .page-title { @extend %t-title4; + margin-bottom: ($baseline/4); text-transform: none; color: $black; @@ -34,13 +36,13 @@ .page-description { @extend %t-copy-sub1; + margin-bottom: ($baseline/4); color: $gray; } } .page-header.has-secondary { - .page-header-main { display: inline-block; width: flex-grid(8,12); @@ -48,6 +50,7 @@ .page-header-secondary { @include text-align(right); + display: inline-block; width: flex-grid(4,12); vertical-align: text-bottom; @@ -60,11 +63,13 @@ .nav-item { @include margin-right($baseline/2); + display: inline-block; } .icon { @include margin-right($baseline/4); + display: inline-block; color: $gray-l2; @@ -75,7 +80,6 @@ } .page-header-search { - .wrapper-search-input { display: inline-block; position: relative; @@ -97,6 +101,7 @@ .action-search { @extend %button-reset; + background-color: $gray-l3; padding: ($baseline/5) ($baseline/2); text-shadow: none; @@ -116,7 +121,9 @@ .action-clear { @include right(0); @include margin(0, ($baseline/4), 0, 0); + @extend %button-reset; + position: absolute; top: 0; padding: ($baseline/4); @@ -155,6 +162,7 @@ .card { @include clearfix(); + transition: all $tmg-f2 ease-in-out; position: relative; display: inline-block; @@ -180,11 +188,13 @@ .wrapper-card-core { @include clearfix(); + padding: ($baseline); } .card-type { @extend %t-copy-sub2; + text-transform: uppercase; color: $gray; } @@ -192,6 +202,7 @@ .card-title { @extend %t-title5; @extend %t-strong; + margin-bottom: rem(.5); overflow: hidden; text-overflow: ellipsis; @@ -200,6 +211,7 @@ .card-description { @extend %t-copy-sub1; + color: $gray; } @@ -208,20 +220,25 @@ .action-view { @extend %btn-pl-default-base; + @include float(right); + margin: ($baseline/4) 0; } } .wrapper-card-meta { @include clearfix(); + @extend %t-copy-sub1; + padding: ($baseline/2) $baseline; background-color: $gray-l6; color: $gray; .meta-detail { @include margin(($baseline/4) ($baseline*.75) ($baseline/4) 0); + color: $gray-d1; abbr { @@ -237,11 +254,13 @@ .member-count { display: inline-block; vertical-align: middle; + @include margin-right($baseline/4); } .list-member-thumbs { @extend %ui-no-list; + display: inline-block; vertical-align: middle; @@ -260,14 +279,12 @@ } &.square-card { - .card-description { // replace with js or char limit height: 4rem; overflow: hidden; } .wrapper-card-meta { - &.has-actions { .card-meta, .card-actions { @@ -310,14 +327,16 @@ } &.has-pennant { - .pennant { @extend %t-copy-sub2; @extend %t-strong; + display: block; position: absolute; top: ($baseline/2); + @include left(-($baseline/4)); + box-shadow: 1px 1px 1px 0 $blue-d1; background-color: $m-blue-l2; padding: ($baseline/10) ($baseline*.75); @@ -336,7 +355,6 @@ } .team-profile { - .page-content-main { display: inline-block; width: flex-grid(8, 12); @@ -346,10 +364,13 @@ .page-content-secondary { display: inline-block; width: flex-grid(4,12); + @include margin-left($baseline * 0.75); + margin-bottom: $baseline; @extend %t-copy-sub1; + color: $gray; div, .team-detail-header { @@ -375,6 +396,7 @@ margin-top: ($baseline); margin-bottom: ($baseline/2); } + .invite-link-input { width: 100%; } @@ -389,15 +411,16 @@ } .create-team { - legend { @extend %t-title6; @extend %t-weight4; + margin-bottom: ($baseline/4); } .description { @extend %t-copy-sub1; + margin-bottom: ($baseline/2); color: $gray-l1; } @@ -413,14 +436,16 @@ &.is-required { @extend %t-weight4; - .label:after { + .label::after { @include margin-left($baseline/4); + content: "*"; } } .input-text { @extend %t-copy-base; + transition: all $tmg-f2 ease-in-out 0s; display: block; width: 90%; @@ -432,6 +457,7 @@ .input-select { @extend %t-copy-base; + width: 90%; margin-bottom: ($baseline/4); border: 1px solid $gray-l2; @@ -439,7 +465,6 @@ .input-text, .input-select { - &:focus { border: 1px solid $blue; @@ -450,7 +475,6 @@ } &.has-errors { - .input-text, .input-select { border: 1px solid $alert-color; @@ -463,6 +487,7 @@ .tip { @extend %t-copy-sub1; + display: block; color: $gray-l1; } @@ -478,7 +503,9 @@ display: inline-block; vertical-align: top; width: 35%; // TODO: susy grid + @include margin-left(2%); + border-left: 2px solid $gray-l4; padding-left: 2%; } @@ -491,18 +518,22 @@ .action { @extend %t-copy; @extend %t-action2; + @include margin-right ($baseline/2); + padding: ($baseline/2) $baseline; } .action-primary { @extend %btn-primary-blue; + display: inline-block; text-shadow: none; } .action-cancel { @extend %button-reset; + display: inline-block; border: 1px solid transparent; color: $gray; @@ -527,7 +558,9 @@ .join-team-message { @extend %t-copy-sub1; + @include text-align(right); + color: $gray-l1; display: block; margin-bottom: ($baseline/4); @@ -535,6 +568,7 @@ .team-actions { @extend %ui-well; + margin: 20px 1.2%; color: $gray; text-align: center; @@ -542,6 +576,7 @@ .title { @extend %t-title6; @extend %t-strong; + margin-bottom: ($baseline/2); text-align: inherit; color: inherit; @@ -555,17 +590,17 @@ } .teams-content { - .teams-main { - .team-edit-fields { overflow: hidden; position: relative; width: 100%; + @include clearfix(); .team-required-fields { @include float(left); + width: 55%; .u-field { @@ -586,13 +621,13 @@ .u-field-message { @include padding-left(0); + padding-top: ($baseline/4); width: 100%; } } .u-field.u-field-description { - .u-field-value { width: 100%; @@ -604,11 +639,13 @@ } .u-field-footer { - .u-field-message { display: block; + @extend %t-copy-sub1; + @include padding-left(0); + margin-top: ($baseline/4); color: $gray-l1; width: 100%; @@ -626,6 +663,7 @@ .team-optional-fields { @include float(left); @include margin-left($baseline*2); + width: 40%; .u-field.u-field-optional_description { @@ -686,7 +724,7 @@ } // vertical line between required and optional fields -.vertical-line:after { +.vertical-line::after { height: 100%; border-left: 2px solid $gray-l4; content: ""; diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index cba3deb9e7b..f8d2bbee0ee 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -12,12 +12,9 @@ // MISC: expandable UI .is-expandable { - - .title-expand { - } - .expandable-icon { @include transition(all $tmg-f2 ease-in-out 0s); + display: inline-block; vertical-align: middle; margin-right: ($baseline/4); @@ -25,16 +22,17 @@ // STATE: active &.is-ready { - .expandable-icon { @include transform(rotate(-90deg)); } .title-expand { @extend %ui-fake-link; + color: $m-blue-d2; - &:hover, &:focus { + &:hover, + &:focus { color: $m-blue; } } @@ -42,7 +40,6 @@ // STATE: expanded &.is-expanded { - .expandable-icon { @include transform(rotate(0)); @include transform-origin(50% 50%); @@ -64,20 +61,37 @@ font-family: $sans-serif; // reset: typography - heading - h1, h2, h3, h4, h5 ,h6 { + h1, + h2, + h3, + h4, + h5, + h6 { @extend %t-title; + color: $m-gray-d4; } // reset: typography - copy - p, ol, ul, dl, input, select, textarea { + p, + ol, + ul, + dl, + input, + select, + textarea { font-family: $f-sans-serif; color: $m-gray-d1; } .copy { - - p, ul, li, dl, blockquote, input, select { + p, + ul, + li, + dl, + blockquote, + input, + select { margin-bottom: ($baseline*0.75); &:last-child { @@ -90,10 +104,13 @@ // reset: forms - input,textarea { + input, + textarea { font-style: normal; font-weight: 400; + @include margin-right($baseline/5); + padding: ($baseline/4) ($baseline/2); } @@ -103,6 +120,7 @@ label { @extend %t-weight4; + font-family: $sans-serif; font-style: normal; color: $m-gray-d4; @@ -119,9 +137,14 @@ } // HACK: nasty override due to our bad input/button styling - button, input[type="submit"], input[type="button"], button[type="submit"] { + button, + input[type="submit"], + input[type="button"], + button[type="submit"] { @include font-size(16); + @extend %t-weight4; + text-transform: none; text-shadow: none; letter-spacing: 0; @@ -136,7 +159,22 @@ } // reset: lists - .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-nav, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info { + .list-actions, + .list-steps, + .progress-steps, + .list-controls, + .list-fields, + .list-nav, + .list-help, + .list-faq, + .nav-wizard, + .list-reqs, + .list-faq, + .review-tasks, + .list-tips, + .wrapper-photos, + .field-group, + .list-info { @extend %ui-no-list; } @@ -150,6 +188,7 @@ .container { background-color: $white; + @include padding(($baseline*1.5), ($baseline*1.5), ($baseline*2), ($baseline*1.5)); } @@ -198,12 +237,12 @@ // UI: reports/tables .wrapper-report { - .report { @extend %ui-window; - width: flex-grid(12,12); + + width: flex-grid(12, 12); border-color: $m-gray-t3; - border-collapse:collapse; + border-collapse: collapse; tr { @include text-align(left); @@ -211,6 +250,7 @@ td { @extend %t-weight3; + vertical-align: middle; padding: ($baseline*0.75) $baseline; color: $m-gray-d3; @@ -218,11 +258,11 @@ th { @extend %t-weight2; + padding: ($baseline/2) $baseline; } thead { - tr { border-bottom: 1px solid $m-gray-l3; } @@ -230,6 +270,7 @@ th[scope="col"] { @extend %t-title7; @extend %t-weight2; + vertical-align: middle; color: $m-gray-d3; background: $m-gray-l4; @@ -237,7 +278,6 @@ } tbody { - tr { border-bottom: 1px solid $m-gray-l3; } @@ -245,19 +285,18 @@ tfoot { background: $m-blue-t0; - - th[scope="row"] { - - } } } } + .report-receipt-provider { @extend %ui-window; + padding: ($baseline*0.75) $baseline; .provider-wrapper { width: 70%; + @include float(left); .provider-info { @@ -271,8 +310,8 @@ @include text-align(center); .provider-logo img { - max-width: 160px; - margin-bottom: $baseline * 0.5; + max-width: 160px; + margin-bottom: $baseline * 0.5; } .complete-order { @@ -280,6 +319,7 @@ button { @extend %btn-pl-primary-base; + white-space: nowrap; } } @@ -289,9 +329,9 @@ // UI: help .help-item { - .title { @extend %hd-lv4; + margin-bottom: ($baseline/4); } @@ -315,19 +355,22 @@ .msg { @include clearfix(); + max-width: grid-width(12); min-width: 760px; width: flex-grid(12); margin: 0 auto; } - .msg-content, .msg-icon { + .msg-content, + .msg-icon { display: block; + @include float(left); } .msg-content { - width: flex-grid(11,12); + width: flex-grid(11, 12); .title { @extend %t-title6; @@ -340,9 +383,12 @@ } .msg-icon { - width: flex-grid(1,12); + width: flex-grid(1, 12); + @extend %t-icon2; + @include margin-right(flex-gutter()); + text-align: center; color: $m-blue; } @@ -358,7 +404,6 @@ } .msg-content { - .title { color: $red; } @@ -375,7 +420,6 @@ } .msg-content { - .title { color: $m-pink; } @@ -386,10 +430,9 @@ // UI: inline messages .msg-inline { - &.msg-error { - - .copy, .copy p { + .copy, + .copy p { color: $red; } } @@ -399,51 +442,59 @@ // UI: page header .page-header { - width: flex-grid(12,12); + width: flex-grid(12, 12); margin-bottom: 0; border-bottom: none; .title { @include clearfix(); - width: flex-grid(12,12); + + width: flex-grid(12, 12); margin: 0; - .sts-course, .sts-track { + .sts-course, + .sts-track { display: inline-block; vertical-align: middle; } .sts-track { - width: flex-grid(3,12); + width: flex-grid(3, 12); + @include text-align(right); .sts-track-value { @extend %copy-badge; + display: inline-block; background: $verified-color-lvl3; color: $white; font-weight: 600; .context { - opacity: 0.80; + opacity: 0.8; color: $white; letter-spacing: 0.1rem; } } &.professional-ed { - .sts-track-value { background-color: $professional-color-lvl1; } } } - .sts-label, .sts-course-org, .sts-course-number, .sts-course-name { + .sts-label, + .sts-course-org, + .sts-course-number, + .sts-course-name { @extend %t-title5; @extend %t-weight4; + @include font-size(14); @include line-height(14); + display: inline-block; color: $gray; text-transform: none; @@ -477,7 +528,6 @@ } &.professional-ed { - .sts-track-value { background-color: $professional-color-lvl1; } @@ -496,10 +546,14 @@ .progress-sts { @include size($baseline/4); + @extend %ui-depth1; + position: absolute; top: 43px; + @include left(7%); + display: block; width: 83%; margin: 0 auto; @@ -520,6 +574,7 @@ .progress-steps { @include clearfix(); + position: relative; top: ($baseline/4); display: table; @@ -528,6 +583,7 @@ .progress-step { @extend %ui-depth2; + position: relative; display: table-cell; height: ($baseline*6); @@ -540,6 +596,7 @@ .wrapper-step-number { @include size(($baseline*2) ($baseline*2)); + margin: 0 auto ($baseline/2) auto; border-radius: ($baseline*10); border: ($baseline/5) solid $m-gray-l4; @@ -548,8 +605,10 @@ .step-number { @extend %t-title7; @extend %t-weight4; + @include line-height(0); @include margin(16px, auto, 0, auto); + color: $m-gray-l1; } } @@ -557,12 +616,12 @@ .step-name { @extend %t-title7; @extend %t-weight4; + color: $m-gray-l1; } // confirmation step w/ icon &.progress-step-icon { - .step-number { margin-top: ($baseline/2); } @@ -576,7 +635,8 @@ border-color: $verified-color-lvl3; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-l3; } } @@ -584,7 +644,7 @@ // STATE: is current &.is-current { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; @@ -604,29 +664,26 @@ // carousel item .carousel-item { - opacity: 0.0; + opacity: 0; } // STATE: active .carousel-active { - opacity: 1.0; - } - - // indiv slides - .wrapper-view { - + opacity: 1; } .view { - width: flex-grid(12,12); + width: flex-grid(12, 12); > .title { @extend %hd-lv2; + color: $m-blue-d1; } .instruction { @extend %t-copy-lead1; + margin-bottom: $baseline; } } @@ -649,10 +706,12 @@ .requirements { margin-bottom: 10px; + @include outer-container; .title { @extend %hd-lv3; + margin-bottom: 10px; } @@ -662,7 +721,7 @@ border: 1px solid #e5e5e5; border-top: 5px solid #f4d78a; padding: 10px; - box-shadow: 1px 1px 3px #888888; + box-shadow: 1px 1px 3px #888; // TODO Determine why this is not responsive. @include span-columns(6); @@ -671,12 +730,14 @@ .wrapper-task { @include clearfix(); + width: flex-grid(12,12); margin: $baseline 0; .wrapper-help { @include float(right); - width: flex-grid(6,12); + + width: flex-grid(6, 12); padding: 0 $baseline; .help { @@ -721,9 +782,11 @@ .task { @extend %ui-window; + @include float(left); @include margin-right(flex-gutter()); - width: flex-grid(6,12); + + width: flex-grid(6, 12); } .controls { @@ -736,13 +799,14 @@ } .control { - .action { @extend %btn-primary-blue; + padding: ($baseline/2) ($baseline*0.75); .icon { @extend %t-icon4; + padding: ($baseline*.25) ($baseline*.5); display: block; } @@ -760,9 +824,9 @@ // STATE: approved &.approved { - .action { @extend %btn-verify-primary; + padding: ($baseline/2) ($baseline*0.75); } } @@ -771,41 +835,52 @@ // control - redo .control-redo { position: absolute; + @include left($baseline/2); } // control - take/do, retake - .control-do, .control-retake { + .control-do, + .control-retake { @include left(45%); } // control - approve .control-approve { position: absolute; + @include right($baseline/2); } } .msg { @include clearfix(); + margin-top: ($baseline*2); .copy { @include float(left); - width: flex-grid(8,12); + + width: flex-grid(8, 12); + @include margin-right(flex-gutter()); } .list-actions { position: relative; top: -($baseline/2); + @include float(left); + width: flex-grid(4,12); + @include text-align(right); .action-retakephotos a { @extend %btn-primary-blue; + @include font-size(14); + padding: ($baseline/2) ($baseline*0.75); } } @@ -817,54 +892,50 @@ } } - // indiv slides - photo - #wrapper-facephoto { - - } - - // indiv slides - ID - #wrapper-idphoto { - - } - // indiv slides - review #wrapper-review { color: $black; .page-title { - @extend %t-strong; - border-bottom: 2px solid $m-gray-d3; - padding-bottom: ($baseline*0.75); - margin-bottom: $baseline; - text-transform: inherit; - } + @extend %t-strong; - .review { + border-bottom: 2px solid $m-gray-d3; + padding-bottom: ($baseline*0.75); + margin-bottom: $baseline; + text-transform: inherit; + } + .review { .certificate { @include font-size(18); + background-repeat: no-repeat; padding-left: ($baseline*2.5); overflow: hidden; min-height: 32px; - p { - @include line-height(22); - @extend %t-strong; - margin-top: 0; - color: $black; - } + p { + @include line-height(22); - .purchase { - @include float(right); - @include margin-left($baseline*0.75); - text-align: right; + @extend %t-strong; - .product-info { - @include font-size(22); - @extend %t-strong; - color: $blue; - } + margin-top: 0; + color: $black; + } + + .purchase { + @include float(right); + @include margin-left($baseline*0.75); + + text-align: right; + + .product-info { + @include font-size(22); + + @extend %t-strong; + + color: $blue; + } } &.verified_icon { @@ -881,14 +952,15 @@ overflow: auto; padding-bottom: ($baseline/4); margin: { - top: ($baseline / 2); - bottom: ($baseline * 0.75); + top: ($baseline / 2); + bottom: ($baseline * 0.75); }; .payment-button { padding: ($baseline*0.4) $baseline; min-width: 200px; } + .action-primary-blue { &.is-selected { background: $blue !important; @@ -900,17 +972,20 @@ border-bottom: 2px solid $gray; margin: ($baseline*1.12) 0; } - } + } .container { padding: ($baseline*0.75) 0; p { @include line-height(22); + color: $black; } + .photo-requirement { @include font-size(12); + position: relative; padding-left: ($baseline*2); margin-top: ($baseline*0.75); @@ -918,15 +993,15 @@ background-position: left top; .fa { - position: absolute; - left:0; - color: $mediumGrey; - } + position: absolute; + left: 0; + color: $mediumGrey; + } - h6 { - font-weight: bold; - color: $extraDarkGrey; - } + h6 { + font-weight: bold; + color: $extraDarkGrey; + } } } @@ -952,6 +1027,7 @@ strong { @extend %t-weight5; + color: $m-gray-d4; } } @@ -959,15 +1035,17 @@ // individual task - photos .review-task-photos { - .wrapper-photos { @include clearfix(); - width: flex-grid(12,12); + + width: flex-grid(12, 12); margin: $baseline 0; .wrapper-photo { @include float(left); - width: flex-grid(6,12); + + width: flex-grid(6, 12); + @include margin-right(flex-gutter()); &:last-child { @@ -976,6 +1054,7 @@ .placeholder-photo { @extend %ui-window; + padding: ($baseline*0.75) $baseline; img { @@ -1023,20 +1102,27 @@ .copy { @include float(left); - width: flex-grid(8,12); + + width: flex-grid(8, 12); + @include margin-right(flex-gutter()); } .list-actions { position: relative; top: -($baseline); + @include float(left); - width: flex-grid(4,12); + + width: flex-grid(4, 12); + @include text-align(right); .action-editname a { @extend %btn-primary-blue; + @include font-size(14); + padding: ($baseline/2) ($baseline*0.75); } } @@ -1044,14 +1130,15 @@ // individual task - contribution .review-task-contribution { - .list-fields { @include clearfix(); + margin: $baseline 0; .field { @include float(left); @include margin-right(($baseline/2)); + padding: ($baseline/2) ($baseline*0.75); background: $m-gray-t0; @@ -1061,11 +1148,12 @@ } .field-group-other { - .contribution-option { display: inline-block; vertical-align: middle; + @include margin-right($baseline/4); + padding: 3px 0; &:last-child { @@ -1080,12 +1168,10 @@ } } } - } // UI: camera states .cam { - .placeholder-cam { position: relative; width: 95%; @@ -1102,6 +1188,7 @@ position: absolute; top: 40%; margin: 0 40px; + @include text-align(center); } } @@ -1110,7 +1197,9 @@ video, canvas { position: relative; display: block; + @include size(100% 100%); + z-index: 500; } } @@ -1137,9 +1226,10 @@ .copy { @extend %t-copy-lead1; @extend %t-weight4; + @include left(calc(50% - 46px)); + position: absolute; top: -($baseline*1.25); - @include left(calc( 50% - 46px )); padding: ($baseline/2) ($baseline*1.5); background: white; text-align: center; @@ -1153,20 +1243,21 @@ // UI: nav - wizard .nav-wizard { @extend %ui-well; + @include clearfix(); - width: flex-grid(12,12); + + width: flex-grid(12, 12); border-radius: ($baseline/10); background: $m-gray-l4; padding: ($baseline*0.75) $baseline; - .help-inline, .wizard-steps { - - } - .help-inline { @extend %t-copy-sub1; + @include float(left); - width: flex-grid(6,12); + + width: flex-grid(6, 12); + @include margin(($baseline*0.75), flex-gutter(), 0, 0); } @@ -1188,16 +1279,18 @@ // UI: forms - payment .contribution-options { - .contribution-option { border-radius: ($baseline/5); - .label, label, input { + .label, + label, + input { display: inline-block; vertical-align: middle; } - .label, label { + .label, + label { margin-bottom: 0; padding: 6px 0; } @@ -1211,15 +1304,13 @@ vertical-align: middle; } - .deco-denomination { - } - .label-value { @extend %t-weight4; } .denomination-name { @include font-size(14); + color: $m-gray-l1; } @@ -1235,9 +1326,9 @@ // help - faq .list-faq { - .faq-question { @extend %hd-lv3; + border-bottom: 1px solid $m-gray-l4; padding-bottom: ($baseline/4); } @@ -1251,15 +1342,17 @@ // UI: main content .content-main { - width: flex-grid(12,12); + width: flex-grid(12, 12); > .title { @extend %hd-lv2; + color: $m-blue-d1; } .instruction { @extend %t-copy-lead1; + margin-bottom: $baseline; } } @@ -1282,6 +1375,7 @@ .help-item { @include fill-parent; + margin-bottom: 25px; &:last-child { @@ -1290,10 +1384,11 @@ } } - @include media( 550px ) { + @include media(550px) { .list-help { .help-item { @include span-columns(4); + margin-bottom: 0; &.help-item-technical { @@ -1319,6 +1414,7 @@ .form-register-choose { @include clearfix(); + margin: ($baseline*2) 0; .deco-divider { @@ -1334,6 +1430,7 @@ .register-choice { @include fill-parent; @include margin(0, flex-gutter(), $baseline, 0); + border-top: ($baseline/4) solid $m-gray-d4; padding: $baseline ($baseline*1.5); background: $m-gray-l4; @@ -1351,6 +1448,7 @@ @include fill-parent; @include text-align(right); @include float(right); + margin: ($baseline/4) 0; border-top: none; clear: both; @@ -1359,8 +1457,9 @@ .title { @extend %t-title5; @extend %t-weight5; + margin-bottom: ($baseline/2); - width: calc( 100% - 30px ); + width: calc(100% - 30px); } .copy { @@ -1369,12 +1468,14 @@ .wrapper-copy-inline { @extend %t-copy-base; + display: inline-block; width: 100%; } .copy-inline { @extend %t-copy-base; + display: inline-block; } @@ -1383,6 +1484,7 @@ input { @extend %t-weight4; + padding: ($baseline/2) ($baseline*0.75); width: 100%; white-space: normal; @@ -1396,8 +1498,10 @@ .deco-ribbon { position: relative; top: -($baseline*2.5); + @include right(-($baseline*0.35)); @include float(right); + display: block; width: ($baseline*2.9); height: ($baseline*4.2); @@ -1419,21 +1523,26 @@ .deco-ribbon { position: absolute; top: -10px; + @include right($baseline); + display: block; width: 45px; height: 45px; background: transparent url('#{$static-path}/images/verified-ribbon.png') no-repeat 0 0; } - .action-intro, .action-select { + .action-intro, + .action-select { display: inline-block; vertical-align: middle; } .action-intro { @include fill-parent; + @extend %copy-detail; + @include text-align(left); } @@ -1441,13 +1550,10 @@ @extend %btn-verify-primary; } - .action-intro { - - } - // extra register options/info .title-expand { @extend %t-copy-sub1; + font-weight: 500 !important; display: inline-block; margin: 0; @@ -1464,6 +1570,7 @@ .title { @extend %hd-lv4; @extend %t-weight4; + margin-top: $baseline; margin-bottom: ($baseline/2); } @@ -1485,6 +1592,7 @@ .label { @extend %hd-lv4; @extend %t-weight4; + margin-bottom: ($baseline/2); } } @@ -1492,9 +1600,10 @@ .contribution-options { @include clearfix(); @include fill-parent; + margin: 0; - &:after{ + &::after { clear: none; display: none; } @@ -1503,6 +1612,7 @@ @include fill-parent; @include float(left); @include margin(0, ($baseline/2), ($baseline/2), 0); + padding: ($baseline/2) ($baseline*0.75); background: $m-gray-t0; @@ -1522,11 +1632,12 @@ } .field-group-other { - .contribution-option { display: inline-block; vertical-align: middle; + @include margin-right($baseline/4); + padding: 1px 0; &:last-child { @@ -1554,6 +1665,7 @@ .register-choice { .list-actions { @include float(left); + width: auto; } @@ -1567,7 +1679,7 @@ } } - @include media( $edx-bp-large ) { + @include media($edx-bp-large) { .contribution-options { .field { width: auto; @@ -1577,6 +1689,7 @@ .register-choice { .list-actions { @include span-columns(4); + width: auto; } @@ -1590,10 +1703,11 @@ } } - @include media( $edx-bp-huge ) { + @include media($edx-bp-huge) { .register-choice { .list-actions { @include float(right); + clear: none; } } @@ -1602,7 +1716,6 @@ // VIEW: requirements &.step-requirements { - .help-item-technical { display: none; } @@ -1613,13 +1726,14 @@ // STATE: is current &#progress-step0 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-d3; } } @@ -1632,15 +1746,18 @@ .list-reqs { @include clearfix(); - width: flex-grid(12,12); + + width: flex-grid(12, 12); text-align: center; .req { @extend %ui-window; + @include margin-right(flex-gutter()); + display: inline-block; vertical-align: top; - width: flex-grid(4,12); + width: flex-grid(4, 12); min-height: ($baseline*15); border-color: $verified-color-lvl4; text-align: center; @@ -1652,6 +1769,7 @@ .title { @extend %t-title5; @extend %t-weight4; + padding: $baseline; border-bottom: 1px solid $verified-color-lvl4; background: $verified-color-lvl5; @@ -1668,6 +1786,7 @@ *[class^="icon"] { @extend %t-icon1; + color: $white; } @@ -1682,8 +1801,11 @@ .fa-stack-1x { @extend %ui-depth2; @extend %t-icon5; + position: absolute; + @include left(24px); + top: 34px; background: $verified-color-lvl3; padding: 3px 5px; @@ -1704,7 +1826,9 @@ .id-photo { top: 13px; + @include left(-3px); + line-height: 1.1em; } } @@ -1720,6 +1844,7 @@ .copy-super { @extend %t-copy-base; + margin-bottom: ($baseline/2); color: $verified-color-lvl1; } @@ -1736,12 +1861,14 @@ // specific requirements .req-activate { @include float(left); + text-align: center; border-color: $m-pink-l3; .title { @extend %t-title5; @extend %t-weight4; + border-bottom-color: $m-pink-l3; background: tint($m-pink, 95%); color: $m-pink; @@ -1753,6 +1880,7 @@ .copy-super { @extend %t-copy-lead1; + color: $m-pink; } @@ -1763,9 +1891,8 @@ // CASE: account not activated &.account-not-activated { - .req { - width: flex-grid(3,12); + width: flex-grid(3, 12); min-height: ($baseline*18); } } @@ -1784,14 +1911,15 @@ .progress .progress-step { // STATE: is completed - &#progress-step0 { + &#progress-step0 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { border-color: $verified-color-lvl3; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-l3; } } @@ -1799,13 +1927,14 @@ // STATE: is current &#progress-step1 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-d3; } } @@ -1824,7 +1953,8 @@ .progress .progress-step { // STATE: is completed - &#progress-step0, &#progress-step1 { + &#progress-step0, + &#progress-step1 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { @@ -1839,13 +1969,14 @@ // STATE: is current &#progress-step2 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-d3; } } @@ -1859,7 +1990,6 @@ // VIEW: review photos &.step-review { - .help-item-technical { display: none; } @@ -1869,13 +1999,13 @@ } .modal { - fieldset { margin-top: $baseline; } .close-modal { @include font-size(24); + color: $m-blue-d3; &:hover, &:focus { @@ -1886,14 +2016,15 @@ } .nav-wizard { - .prompt-verify { @include float(left); @include margin(0, flex-gutter(), 0, 0); - width: flex-grid(6,12); + + width: flex-grid(6, 12); .title { @extend %hd-lv4; + margin-bottom: ($baseline/4); } @@ -1916,6 +2047,7 @@ .wizard-step { @include margin-right(flex-gutter()); + display: inline-block; vertical-align: middle; @@ -1926,7 +2058,6 @@ } .step-match { - label { @extend %t-copy-sub1; } @@ -1941,14 +2072,15 @@ .progress .progress-step { // STATE: is completed - &#progress-step0, &#progress-step1, &#progress-step2 { + &#progress-step0, &#progress-step1, &#progress-step2 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { border-color: $verified-color-lvl3; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-l3; } } @@ -1956,13 +2088,14 @@ // STATE: is current &#progress-step3 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-d3; } } @@ -1976,7 +2109,6 @@ // VIEW: confirmation/receipt &.step-confirmation { - .help-item-technical { display: none; } @@ -1985,14 +2117,19 @@ .progress .progress-step { // STATE: is completed - &#progress-step0, &#progress-step1, &#progress-step2, &#progress-step3, &#progress-step4 { + &#progress-step0, + &#progress-step1, + &#progress-step2, + &#progress-step3, + &#progress-step4 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { border-color: $verified-color-lvl3; } - .step-number, .step-name { + .step-number, + .step-name { color: $m-gray-l3; } } @@ -2000,7 +2137,7 @@ // STATE: is current &#progress-step5 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; @@ -2019,7 +2156,6 @@ // information elements .list-info { - .info-item { margin-bottom: ($baseline*1.5); border-bottom: ($baseline/4) solid $m-gray-l4; @@ -2033,11 +2169,13 @@ > .title { @extend %hd-lv3; + margin-bottom: $baseline; } .copy { @extend %copy-base; + margin-bottom: $baseline; } } @@ -2045,18 +2183,17 @@ // information - course .course-info { - .options { - .action-course { @extend %btn-primary-blue; + @include font-size(14); + padding: 5px 10px; } } .course-actions { - .action-dashboard { @extend %btn-primary-blue; } @@ -2075,7 +2212,6 @@ // UI: table/report .wrapper-report { - .report { } @@ -2083,23 +2219,25 @@ .instruction { display: inline-block; - width: flex-grid(8,12); + width: flex-grid(8, 12); vertical-align: top; } .actions-next { display: inline-block; - width: flex-grid(4,12); + width: flex-grid(4, 12); vertical-align: top; margin-top: $baseline; } .nav-item { display: block; + @include margin(0, 0, $baseline, 0); + text-align: center; - &.conditional:after { + &.conditional::after { content: "or"; display: block; margin: $baseline 0; @@ -2110,6 +2248,7 @@ .reverify-success-step { .title { @extend %t-title4; + text-align: left; text-transform: none; } @@ -2121,11 +2260,11 @@ } .reverify-blocked { - @include padding(($baseline*1.5), ($baseline*1.5), ($baseline*2), ($baseline*1.5)); .title { @extend %t-title4; + text-align: left; text-transform: none; } @@ -2135,7 +2274,7 @@ } .action-primary { - @extend %btn-primary-blue; + @extend %btn-primary-blue; } } @@ -2162,10 +2301,11 @@ // STATE: already verified .register.is-verified { - .nav-wizard .price-value { @extend %t-weight4; + @include font-size(16); + margin-top: 18px; color: $m-blue-d1; } @@ -2178,7 +2318,7 @@ .progress .progress-step { // STATE: is completed - &#progress-step1 { + &#progress-step1 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { @@ -2193,7 +2333,7 @@ // STATE: is current &#progress-step2 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; @@ -2208,6 +2348,7 @@ // progress indicator .progress-sts { width: 75%; + @include left(13%); } @@ -2220,7 +2361,6 @@ // STATE: upgrading registration type .register.is-upgrading { - .form-register-choose { margin-top: ($baseline*2) !important; } @@ -2228,7 +2368,6 @@ // STATE: re-verifying .register.is-not-verified { - .help-item-emphasis { color: $m-pink; } @@ -2236,6 +2375,7 @@ // progress indicator .progress-sts { width: 72%; + @include left(15%); } @@ -2248,7 +2388,7 @@ // STATE: is current &#progress-step1 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; @@ -2272,7 +2412,7 @@ .progress .progress-step { // STATE: is completed - &#progress-step1 { + &#progress-step1 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { @@ -2287,7 +2427,7 @@ // STATE: is current &#progress-step2 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; @@ -2311,7 +2451,7 @@ .progress .progress-step { // STATE: is completed - &#progress-step1, &#progress-step2 { + &#progress-step1, &#progress-step2 { border-bottom: ($baseline/5) solid $verified-color-lvl3; .wrapper-step-number { @@ -2326,7 +2466,7 @@ // STATE: is current &#progress-step3 { border-bottom: ($baseline/5) solid $m-blue-d1; - opacity: 1.0; + opacity: 1; .wrapper-step-number { border-color: $m-blue-d1; @@ -2344,20 +2484,20 @@ } &.step-confirmation { - .content-confirmation { margin-bottom: ($baseline*2); } .view { - .title { @extend %hd-lv2; + color: $m-blue-d1; } .instruction { @extend %t-copy-lead1; + margin-bottom: $baseline; } } diff --git a/scripts/all-tests.sh b/scripts/all-tests.sh index e76c51c17a0..f0746297a3b 100755 --- a/scripts/all-tests.sh +++ b/scripts/all-tests.sh @@ -13,7 +13,7 @@ set -e # Violations thresholds for failing the build export PYLINT_THRESHOLD=3600 export ESLINT_THRESHOLD=9134 -export STYLELINT_THRESHOLD=15852 +export STYLELINT_THRESHOLD=5155 XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json` export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}