diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss index a7209f5dfb..08fc6965a8 100644 --- a/lms/static/sass/discussion/views/_home.scss +++ b/lms/static/sass/discussion/views/_home.scss @@ -115,9 +115,9 @@ .row-item-full { .notification-checkbox { + @include margin-right($baseline/2); display: inline-block; @include padding($baseline/4, 0, $baseline/2, 0); - @include margin-right($baseline/2); border-radius: 5px; border: 1px solid gray; diff --git a/lms/static/sass/shared-v2/_components.scss b/lms/static/sass/shared-v2/_components.scss index 6044de724a..cd484b0ba2 100644 --- a/lms/static/sass/shared-v2/_components.scss +++ b/lms/static/sass/shared-v2/_components.scss @@ -18,12 +18,12 @@ &.prominent + li { @include border-left(1px solid $lms-border-color); - padding-left: $baseline*0.75; + @include padding-left($baseline*0.75); } a, a:visited { - padding: ($baseline/2) ($baseline*0.75) 13px ($baseline*0.75); + @include padding($baseline/2, $baseline*0.75, 13px, $baseline*0.75); display: block; text-align: center; text-decoration: none; @@ -47,3 +47,48 @@ } } } + +// TODO: search box should be in the Pattern Library +.page-header-search { + display: inline-block; + + .search-form { + display: inline-block; + } + + .search-box { + display: inline-block; + position: relative; + vertical-align: middle; + } + + .search-field { + transition: all $tmg-f2 ease-in-out; + border: 1px solid $lms-border-color; + border-radius: 3px; + padding: $baseline/4 $baseline*1.5; + font-family: inherit; + } + + .action-search { + text-shadow: none; + vertical-align: middle; + padding: $baseline/5 $baseline/2; + } + + .action-clear { + @include right(0); + @include margin(0, ($baseline/4), 0, 0); + position: absolute; + top: 0; + color: $lms-gray; + padding: $baseline/4; + + // STATE: hover and focus + &:hover, + &:focus { + color: $lms-label-color; + border-width: 0; + } + } +} diff --git a/lms/static/sass/shared-v2/_footer.scss b/lms/static/sass/shared-v2/_footer.scss index bf68aa26fe..c5ffddc311 100644 --- a/lms/static/sass/shared-v2/_footer.scss +++ b/lms/static/sass/shared-v2/_footer.scss @@ -2,199 +2,199 @@ // ==================== .wrapper-footer { - @extend %ui-print-excluded; - margin-top: ($baseline*2); - box-shadow: 0 -1px 5px 0 $shadow-l1; - border-top: 1px solid tint(palette(grayscale, light), 50%); - padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2); - background: $footer-bg; - clear: both; - - footer#footer-openedx { @include clearfix(); - box-sizing: border-box; - margin: 0 auto; + @extend %ui-print-excluded; + box-shadow: 0 -1px 5px 0 $shadow-l1; + border-top: 1px solid tint(palette(grayscale, light), 50%); + padding: 25px ($baseline/2) ($baseline*1.5); + background: $footer-bg; - 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); - - @include susy-media($bp-screen-sm) { - @include span(8); - } - - .nav-colophon { + footer#footer-openedx { @include clearfix(); - margin: $footer_margin; + box-sizing: border-box; + margin: 0 auto; - ol { - list-style: none; + p, ol, ul { + font-family: $sans-serif; + + // override needed for poorly scoped font-family styling on p a:link {} + a { + font-family: $sans-serif; + } } - li { - @include float(left); - margin-right: ($baseline*0.75); - - a { - color: tint($black, 20%); + a { + @extend %link-text; + border-bottom: none; &:hover, &:focus, &:active { - color: $link-color; + border-bottom: 1px dotted $link-color; } - } - - &:last-child { - @include margin-right(0); - } - } - } - - .colophon-about { - @include clearfix(); - - img { - @include float(left); - width: 68px; - height: 34px; - margin-right: 0; } - p { - @include float(left); - @include span(9); - margin-left: $baseline; - padding-left: $baseline; - font-size: font-size(small); - background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat; + // colophon + .colophon { + @include span(12); + + @include susy-media($bp-screen-sm) { + @include span(8); + } + + .nav-colophon { + @include clearfix(); + margin: $footer_margin; + + ol { + list-style: none; + } + + li { + @include float(left); + @include margin-right($baseline*0.75); + + a { + color: tint($black, 20%); + + &:hover, + &:focus, + &:active { + color: $link-color; + } + } + + &:last-child { + @include margin-right(0); + } + } + } + + .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; + } + } + } + + // references + .references { + @include span(4); + margin: -10px 0 0 0; + display: inline-block; + } + + .wrapper-logo { + margin: ($baseline*0.75) 0; + + a { + display: inline-block; + + &:hover, + &:focus { + border-bottom: 0; + } + } + } + + .copyright { + @include text-align(left); + margin: -2px 0 8px; + font-size: font-size(xx-small); + color: palette(grayscale, dark); + } + + .nav-legal { + @include clearfix(); + @include text-align(left); + + li { + display: inline-block; + font-size: font-size(xx-small); + } + + .nav-legal-02 a { + &:before { + @include margin-right(($baseline/4)); + content: "-"; + } + } + } + + .nav-social { + @include text-align(right); + margin: 0; + + li { + display: inline-block; + + &:last-child { + @include margin-right(0); + } + + a { + display: block; + + &:hover, + &:focus, + &:active { + border: none; + } + } + + img { + display: block; + } + } + } + + // platform Open edX logo and link + .footer-about-openedx { + @include span(12); + @include text-align(right); + vertical-align: bottom; + + @include susy-media($bp-screen-sm) { + @include span(4); + @include margin-right(0); + } + + + a { + @include float(right); + display: inline-block; + + &:hover { + border-bottom: none; + } + } } - } } - - // references - .references { - @include span(4); - margin: -10px 0 0 0; - display: inline-block; - } - - .wrapper-logo { - margin: ($baseline*0.75) 0; - - a { - display: inline-block; - - &:hover { - border-bottom: 0; - } - } - } - - .copyright { - @include text-align(left); - margin: -2px 0 8px 0; - font-size: font-size(xx-small); - color: palette(grayscale, dark); - } - - .nav-legal { - @include clearfix(); - @include text-align(left); - - li { - display: inline-block; - font-size: font-size(xx-small); - } - - .nav-legal-02 a { - &:before { - @include margin-right(($baseline/4)); - content: "-"; - } - } - } - - .nav-social { - @include text-align(right); - margin: 0; - - li { - display: inline-block; - - &:last-child { - margin-right: 0; - } - - a { - display: block; - - &:hover, - &:focus, - &:active { - border: none; - } - } - - img { - display: block; - } - } - } - - // platform Open edX logo and link - .footer-about-openedx { - @include span(12); - @include text-align(right); - vertical-align: bottom; - - @include susy-media($bp-screen-sm) { - @include span(4); - @include margin-right(0); - } - - - a { - @include float(right); - display: inline-block; - - &: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/_layouts.scss b/lms/static/sass/shared-v2/_layouts.scss index 1001eaeb61..a54cdd8e73 100644 --- a/lms/static/sass/shared-v2/_layouts.scss +++ b/lms/static/sass/shared-v2/_layouts.scss @@ -2,12 +2,20 @@ .content-wrapper { max-width: 1180px; - padding-top: 10px; + padding: { + top: $baseline/2; + bottom: $baseline*2; + } + + .container { + border: 1px solid $lms-border-color; + background-color: $lms-container-background-color; + padding: $baseline; + } .page-header { @include clearfix(); border-bottom: 1px solid $lms-border-color; - padding: $baseline $baseline ($baseline/2) $baseline; .page-title { @extend %t-title4; @@ -21,26 +29,43 @@ margin-bottom: ($baseline/4); color: $gray; } - } - .page-header.has-secondary { + &.has-secondary { + .page-header-main { + display: inline-block; + } - .page-header-main { - display: inline-block; - width: flex-grid(8,12); - } + .page-header-secondary { + @include float(right); + @include text-align(right); + display: inline-block; + vertical-align: text-bottom; - .page-header-secondary { - @include text-align(right); - display: inline-block; - width: flex-grid(4,12); - vertical-align: text-bottom; + .form-actions { + display: inline-block; + } + + .form-actions > * { + @include margin-left($baseline/2); + vertical-align: middle; + min-width: 200px; + height: 34px; + } + + .form-actions > button { + padding: $baseline/5; + min-width: 200px; + height: 34px; + } + + .form-actions > *:first-child { + @include margin-left(0); + } + } } } - .container { - border: 1px solid #c8c8c8; - background-color: $lms-container-background-color; - padding: $baseline; + .page-content { + padding-top: $baseline; } } diff --git a/lms/static/sass/shared-v2/_modal.scss b/lms/static/sass/shared-v2/_modal.scss index 7d405b44b0..cc95a4b72d 100644 --- a/lms/static/sass/shared-v2/_modal.scss +++ b/lms/static/sass/shared-v2/_modal.scss @@ -11,261 +11,261 @@ } .modal { - @include span(5); - z-index: z-index(mid-front); - display: none; - position: absolute; - left: 50%; - padding: 8px; - border-radius: 3px; - box-shadow: 0 0px 5px 0 $shadow-d1; - background: $gray-d2; - color: $base-font-color; - - .inner-wrapper { + @include span(5); 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 rgba(255, 255, 255, 0.7); - overflow: hidden; - padding-left: ($baseline/2); - padding-right: ($baseline/2); - padding-bottom: ($baseline/2); - position: relative; + 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; - p { - font-size: font-size(small); - line-height: 1.4; - } - - 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; - - &::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; - left: 0; - margin: 0 auto; - position: absolute; - top: -140px; - width: 100%; - z-index: 1; - } - - hr { - @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, - rgba(255,255,255, 0.8) 50%, - rgba(255,255,255, 0))); - height: 1px; - width: 100%; - border: none; - margin: 0; - position: relative; - z-index: 2; - - &::after { - @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, - rgba(200,200,200, 1) 50%, - rgba(200,200,200, 0))); - 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 rgba(255,255,255, 0.4); - z-index: 2; - text-transform: uppercase; - font-family: $font-family-serif; - - .edx { - text-transform: none; - } - } - } - - .modal-form-error { - background: tint($red,90%); - border: 1px solid rgb(143, 14, 14); - color: rgb(143, 14, 14); - 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); - - 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 rgb(210,210,210); - box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); - margin-bottom: ($baseline*1.5); + .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 rgba(255, 255, 255, 0.7); + overflow: hidden; + padding-left: ($baseline/2); + padding-right: ($baseline/2); padding-bottom: ($baseline/2); - } + position: relative; - label { - color: $text-color; - font: { - family: $font-family-serif; - style: italic; + p { + font-size: font-size(small); + line-height: 1.4; } - line-height: 1.6; - &.field-error { - display: block; - color: #8F0E0E; - - + input, + textarea { - border: 1px solid #CA1111; - color: #8F0E0E; - } + a { + &:hover, + &:focus { + text-decoration: underline; + } } - } - input[type="checkbox"] { - margin-right: ($baseline/4); - } + header { + z-index: z-index(mid-front); + margin-bottom: ($baseline*1.5); + overflow: hidden; + padding: 28px $baseline 0; + position: relative; - textarea { - background: rgb(255,255,255); + &::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; + left: 0; + margin: 0 auto; + position: absolute; + top: -140px; + width: 100%; + z-index: 1; + } + + hr { + @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, + rgba(255,255,255, 0.8) 50%, + rgba(255,255,255, 0))); + height: 1px; + width: 100%; + border: none; + margin: 0; + position: relative; + z-index: 2; + + &::after { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, + rgba(200,200,200, 1) 50%, + rgba(200,200,200, 0))); + 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 rgba(255,255,255, 0.4); + z-index: 2; + text-transform: uppercase; + font-family: $font-family-serif; + + .edx { + text-transform: none; + } + } + } + + .modal-form-error { + background: tint($red,90%); + border: 1px solid rgb(143, 14, 14); + color: rgb(143, 14, 14); + 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); + + 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 rgb(210,210,210); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); + 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: #8F0E0E; + + + input, + textarea { + border: 1px solid #CA1111; + color: #8F0E0E; + } + } + } + + input[type="checkbox"] { + @include margin-right($baseline/4); + } + + textarea { + background: rgb(255,255,255); + display: block; + height: 45px; + margin-bottom: $baseline; + width: 100%; + } + + input[type="email"], + input[type="text"], + input[type="password"] { + background: rgb(255,255,255); + 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; + } + } + } + + .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; + } + } + } + + #help_wrapper, + #feedback_form_wrapper, + .discussion-alert-wrapper { + padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); + + header { + @include padding-left(0); + @include padding-right(0); + margin-bottom: $baseline; + } + + .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; - height: 45px; - margin-bottom: $baseline; - width: 100%; - } - - input[type="email"], - input[type="text"], - input[type="password"] { - background: rgb(255,255,255); - 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; - } - } + color: $dark-gray; } - - .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: 0px; - 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; - } - } - } - - #help_wrapper, - #feedback_form_wrapper, - .discussion-alert-wrapper { - padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); - - header { - margin-bottom: $baseline; - padding-right: 0; - padding-left: 0; - } - - .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/_variables.scss b/lms/static/sass/shared-v2/_variables.scss index 00d0a7a101..81542474c0 100644 --- a/lms/static/sass/shared-v2/_variables.scss +++ b/lms/static/sass/shared-v2/_variables.scss @@ -1,7 +1,12 @@ // LMS variables +$lms-gray: palette(grayscale, base); $lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different? $lms-container-background-color: palette(grayscale, white-t); $lms-border-color: palette(grayscale, light); $lms-label-color: palette(grayscale, black); $lms-active-color: palette(primary, base); + +// Icons +$lms-dark-icon-color: palette(grayscale, white-t); +$lms-dark-icon-background-color: palette(grayscale, black); diff --git a/lms/templates/ux/reference/course-skeleton.html b/lms/templates/ux/reference/course-skeleton.html new file mode 100644 index 0000000000..eec46f9d4d --- /dev/null +++ b/lms/templates/ux/reference/course-skeleton.html @@ -0,0 +1,71 @@ +## Override the default styles_version to the Pattern Library version (version 2) +<%! main_css = "style-main-v2" %> + +<%page expression_filter="h"/> +<%inherit file="/main.html" /> + +<%block name="pagetitle">Course Skeleton + +<%block name="bodyclass">pattern-library + +<%block name="content"> + +
+ +
+

This is where the page content belongs

+

Useful stuff goes here

+
+
+ diff --git a/lms/templates/ux/reference/index.html b/lms/templates/ux/reference/index.html index 07da7d7c81..8bb4856a46 100644 --- a/lms/templates/ux/reference/index.html +++ b/lms/templates/ux/reference/index.html @@ -22,6 +22,7 @@

Page Types

diff --git a/lms/urls.py b/lms/urls.py index dfcb5ed2d5..3aabc1d0c2 100644 --- a/lms/urls.py +++ b/lms/urls.py @@ -980,8 +980,7 @@ if settings.DEBUG: document_root=settings.PROFILE_IMAGE_BACKEND['options']['location'] ) - # in debug mode, allow any template to be rendered (most useful for UX reference templates) - urlpatterns += url(r'^template/(?P