diff --git a/lms/static/sass/shared-v2/_components.scss b/lms/static/sass/shared-v2/_components.scss index 6044de724a..a2709e7db0 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-input { + display: inline-block; + position: relative; + vertical-align: middle; + } + + .search-field { + @include padding($baseline/4, $baseline*1.5, $baseline/4, $baseline/2); + transition: all $tmg-f2 ease-in-out; + border: 1px solid $gray-l4; + border-radius: 3px; + font-family: inherit; + } + + .action-search { + @include padding($baseline/5, $baseline/2, $baseline/5, $baseline/2); + text-shadow: none; + vertical-align: middle; + } + + .action-clear { + @include right(0); + @include margin(0, ($baseline/4), 0, 0); + @include padding($baseline/4, $baseline/4, $baseline/4, $baseline/4); + position: absolute; + top: 0; + color: $lms-gray; + + // 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..e0e501d2b0 100644 --- a/lms/static/sass/shared-v2/_footer.scss +++ b/lms/static/sass/shared-v2/_footer.scss @@ -3,7 +3,6 @@ .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); diff --git a/lms/static/sass/shared-v2/_layouts.scss b/lms/static/sass/shared-v2/_layouts.scss index 1001eaeb61..619b723673 100644 --- a/lms/static/sass/shared-v2/_layouts.scss +++ b/lms/static/sass/shared-v2/_layouts.scss @@ -2,12 +2,18 @@ .content-wrapper { max-width: 1180px; - padding-top: 10px; + padding-top: ($baseline/2); + padding-bottom: ($baseline*2); + + .container { + border: 1px solid #c8c8c8; + 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 +27,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 > * { + margin-left: ($baseline/2); + vertical-align: middle; + min-width: 200px; + height: 34px; + } + + .form-actions > button { + @include padding($baseline/5, $baseline/5, $baseline/5, $baseline/5); + min-width: 200px; + height: 34px; + } + + .form-actions > *:first-child { + 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/_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..0e40b771ac --- /dev/null +++ b/lms/templates/ux/reference/course-skeleton.html @@ -0,0 +1,70 @@ +## 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"> + +
+
+
+
+

Skeleton Page

+

This demonstrates the pieces available to a courseware page.

+
+
+
+ +
+
+
+ + + +
+ +
+
+
+
+
+
+

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