Support content headers for Pattern Library pages
This commit is contained in:
Andy Armstrong
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
70
lms/templates/ux/reference/course-skeleton.html
Normal file
70
lms/templates/ux/reference/course-skeleton.html
Normal file
@@ -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>
|
||||
|
||||
<%block name="bodyclass">pattern-library</%block>
|
||||
|
||||
<%block name="content">
|
||||
<nav class="wrapper-course-material">
|
||||
<div class="course-material">
|
||||
<ol class="tabs course-tabs">
|
||||
<li class="tab">
|
||||
<a href="index.html" class="">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tab">
|
||||
<a href="#" class="">
|
||||
Course
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tab">
|
||||
<a href="/courses/course-v1:AndyA+AA101+1/discussion/forum" class="active">
|
||||
Skeleton
|
||||
<span class="sr-only">, current location</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="container">
|
||||
<header class="page-header has-secondary">
|
||||
<div class="page-header-main">
|
||||
<div class="sr-is-focusable" tabindex="-1"></div>
|
||||
<h2 class="hd hd-2 page-title">Skeleton Page</h2>
|
||||
<p class="page-description">This demonstrates the pieces available to a courseware page.</p>
|
||||
</div>
|
||||
<div class="page-header-secondary">
|
||||
<div class="form-actions">
|
||||
<button class="btn-neutral btn-small">Click Me!</button>
|
||||
<div class="page-header-search">
|
||||
<form class="search-form">
|
||||
<div class="search-input">
|
||||
<label for="search-skeleton" class="search-label sr-only">Search</label>
|
||||
<input id="search-skeleton" class="search-field" type="text" value="" placeholder="Search">
|
||||
<button type="button" class="btn action action-clear" aria-label="Clear search">
|
||||
<span class="fa fa-times-circle" aria-hidden="true"></span>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn-brand action action-search">
|
||||
<span class="fa fa-search" aria-hidden="true"></span>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<h3>This is where the page content belongs</h3>
|
||||
<p>Useful stuff goes here</p>
|
||||
</div>
|
||||
</section>
|
||||
</%block>
|
||||
@@ -22,6 +22,7 @@
|
||||
<h3>Page Types</h3>
|
||||
<ul>
|
||||
<li><a href="pattern-library-test.html">Pattern Library test page</a></li>
|
||||
<li><a href="course-skeleton.html">Course skeleton page</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
Reference in New Issue
Block a user