[BD-10] [DEPR-92] Remove scss files that use pattern library
This commit is contained in:
Aura Milena Alba
@@ -1094,18 +1094,6 @@ PIPELINE['STYLESHEETS'] = {
|
||||
],
|
||||
'output_filename': 'css/studio-main-v1-rtl.css',
|
||||
},
|
||||
'style-main-v2': {
|
||||
'source_filenames': [
|
||||
'css/studio-main-v2.css',
|
||||
],
|
||||
'output_filename': 'css/studio-main-v2.css',
|
||||
},
|
||||
'style-main-v2-rtl': {
|
||||
'source_filenames': [
|
||||
'css/studio-main-v2-rtl.css',
|
||||
],
|
||||
'output_filename': 'css/studio-main-v2-rtl.css',
|
||||
},
|
||||
'style-xmodule-annotations': {
|
||||
'source_filenames': [
|
||||
'css/vendor/ova/annotator.css',
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
// studio - base styling
|
||||
// ====================
|
||||
html {
|
||||
height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: $fg-min-width;
|
||||
background: $uxpl-grayscale-x-back;
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
footer.primary {
|
||||
font-size: font-size(x-small);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// ------------------------------
|
||||
// Studio: Shared Build Compile
|
||||
// Version 2 - introduces the Pattern Library
|
||||
|
||||
// Base build
|
||||
@import 'build';
|
||||
|
||||
// Configuration
|
||||
@import 'config';
|
||||
|
||||
// Legacy variables
|
||||
//
|
||||
// Note: these should be replaced by Bootstrap theme variables
|
||||
@import 'cms/theme/variables-v1';
|
||||
|
||||
// Utilities
|
||||
@import 'mixins-v2';
|
||||
@import 'base-v2';
|
||||
|
||||
// Pattern Library styling
|
||||
@import 'elements-v2/controls';
|
||||
@import 'elements-v2/header';
|
||||
@import 'elements-v2/navigation';
|
||||
@import 'elements/footer';
|
||||
@import 'elements-v2/sock';
|
||||
@import 'elements-v2/tooltip';
|
||||
|
||||
// Extra theme-specific rules
|
||||
@import 'cms/theme/extras';
|
||||
@@ -1,76 +0,0 @@
|
||||
// pill button
|
||||
%ui-btn-pill {
|
||||
border-radius: ($baseline/5);
|
||||
}
|
||||
|
||||
.announcements-editor {
|
||||
padding: 40px;
|
||||
width: 60%;
|
||||
|
||||
.announcement-content {
|
||||
margin-bottom: 20px;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.announcement-active {
|
||||
label {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-announcement {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.announcements-list {
|
||||
display: table;
|
||||
border-spacing: 2em;
|
||||
|
||||
.announcement-label {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.announcement-item {
|
||||
display: table-row;
|
||||
|
||||
.announcement-content {
|
||||
display: table-cell;
|
||||
background-color: $color-draft;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
padding: 22px 33px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.announcement-active {
|
||||
display: table-cell;
|
||||
padding: 22px 2px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:disabled,
|
||||
a[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
// +UI Dropdown Button - Extend
|
||||
// ====================
|
||||
%ui-btn-dd {
|
||||
@extend %ui-btn;
|
||||
@extend %ui-btn-pill;
|
||||
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
|
||||
&.current,
|
||||
&.active,
|
||||
&.is-selected {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow-l1;
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
// +UI Nav Dropdown Button - Extend
|
||||
// ====================
|
||||
%ui-btn-dd-nav-primary {
|
||||
@extend %ui-btn-dd;
|
||||
|
||||
background: $white;
|
||||
border-color: $white;
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $white;
|
||||
color: $blue-s1;
|
||||
}
|
||||
|
||||
&.current,
|
||||
&.active {
|
||||
background: $white;
|
||||
color: $gray-d4;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $blue-s1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,178 +0,0 @@
|
||||
// studio - elements - global header
|
||||
// ====================
|
||||
|
||||
.wrapper-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 2px 0 $shadow-l1;
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
background: $white;
|
||||
|
||||
header.primary {
|
||||
@include clearfix();
|
||||
@include grid-container();
|
||||
@include float(none);
|
||||
|
||||
box-sizing: border-box;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// basic layout
|
||||
.wrapper-l,
|
||||
.wrapper-r {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.wrapper-l {
|
||||
@include span(7);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
@include span(4, before);
|
||||
@include text-align(right);
|
||||
}
|
||||
|
||||
.branding,
|
||||
.info-course,
|
||||
.nav-course,
|
||||
.nav-account,
|
||||
.nav-pitch {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.user-language-selector {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
margin: 0 10px 0 5px;
|
||||
vertical-align: sub;
|
||||
|
||||
.language-selector {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-account {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// basic layout - nav items
|
||||
.nav-dd {
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
@extend %ui-btn-dd-nav-primary;
|
||||
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
line-height: 16px;
|
||||
margin-top: 6px;
|
||||
font-size: font-size(base);
|
||||
font-weight: font-weight(semi-bold);
|
||||
|
||||
.nav-sub .nav-item {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $blue-s1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - branding
|
||||
.branding {
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.brand-link {
|
||||
display: block;
|
||||
|
||||
.brand-image {
|
||||
max-height: ($baseline*2);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - account-based nav
|
||||
.nav-account {
|
||||
position: relative;
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.nav-sub {
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
.nav-account-help {
|
||||
.wrapper-nav-sub {
|
||||
width: ($baseline*10);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-account-user {
|
||||
.title {
|
||||
display: inline-block;
|
||||
max-width: 84%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-language-form {
|
||||
margin-top: 4px;
|
||||
|
||||
.language-selector {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ====================
|
||||
|
||||
// CASE: user signed in
|
||||
.is-signedin {
|
||||
.wrapper-l {
|
||||
width: flex-grid(8, 12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
width: flex-grid(4, 12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
@include margin-right(2%);
|
||||
}
|
||||
|
||||
.nav-account {
|
||||
top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
// skip navigation
|
||||
.nav-skip,
|
||||
.transcript-skip {
|
||||
@include left(0);
|
||||
|
||||
font-size: font-size(small);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -($baseline*30);
|
||||
overflow: hidden;
|
||||
background: $white;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
position: relative;
|
||||
top: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
// studio - elements - support sock
|
||||
// ====================
|
||||
|
||||
.wrapper-sock {
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
margin: ($baseline*2) 0 0 0;
|
||||
border-top: 1px solid $gray-l4;
|
||||
width: 100%;
|
||||
|
||||
.wrapper-inner {
|
||||
@include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
|
||||
|
||||
display: none;
|
||||
width: 100% !important;
|
||||
border-bottom: 1px solid $white;
|
||||
padding: 0 $baseline !important;
|
||||
}
|
||||
|
||||
// sock - actions
|
||||
.list-cta {
|
||||
@extend %ui-depth1;
|
||||
|
||||
position: absolute;
|
||||
top: -($baseline*0.75);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.cta-show-sock {
|
||||
@extend %ui-btn-pill;
|
||||
|
||||
background: $uxpl-grayscale-x-back;
|
||||
font-size: font-size(x-small);
|
||||
padding: ($baseline/2) $baseline;
|
||||
color: $gray-d3;
|
||||
|
||||
.icon {
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sock - additional help
|
||||
.sock {
|
||||
@include clearfix();
|
||||
@include span(12);
|
||||
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
margin: 0 auto;
|
||||
padding: ($baseline*2) 0;
|
||||
color: $gray-l3;
|
||||
|
||||
// shared elements
|
||||
.support,
|
||||
.feedback {
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
color: $white;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.copy {
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
list-style: none;
|
||||
|
||||
.action-item {
|
||||
@include float(left);
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
.action {
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend .sr-only;
|
||||
}
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-brand;
|
||||
@extend %btn-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// studio support content
|
||||
.support {
|
||||
@include float(left);
|
||||
@include span(8);
|
||||
|
||||
margin-right: flex-gutter();
|
||||
|
||||
.action-item {
|
||||
width: flexgrid(4, 8);
|
||||
}
|
||||
}
|
||||
|
||||
// studio feedback content
|
||||
.feedback {
|
||||
@include float(left);
|
||||
@include span(4);
|
||||
|
||||
.action-item {
|
||||
width: flexgrid(4, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// case: sock content is shown
|
||||
&.is-shown {
|
||||
border-color: $gray-d3;
|
||||
|
||||
.list-cta .cta-show-sock {
|
||||
background: $gray-d3;
|
||||
border-color: $gray-d3;
|
||||
color: $white;
|
||||
font-size: font-size(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
.tooltip {
|
||||
@include transition(opacity $tmg-f3 ease-out 0s);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0 10px;
|
||||
border-radius: 3px;
|
||||
background: $black-t4;
|
||||
line-height: 26px;
|
||||
font-size: font-size(x-small);
|
||||
color: $white;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
|
||||
&::after {
|
||||
font-size: font-size(x-large);
|
||||
content: '▾';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
color: $black-t4;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
// ------------------------------
|
||||
// Studio main styling
|
||||
// Version 2 - introduces the Pattern Library
|
||||
|
||||
// NOTE: This is the right-to-left (RTL) configured style compile.
|
||||
// It should mirror main-ltr w/ the exception of bi-app references.
|
||||
|
||||
|
||||
// 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
|
||||
@import 'build-v2';
|
||||
@@ -1,15 +0,0 @@
|
||||
// ------------------------------
|
||||
// Studio main styling
|
||||
// Version 2 - introduces the Pattern Library
|
||||
|
||||
// NOTE: This is the left-to-right (LTR) configured style compile.
|
||||
// It should mirror main-rtl w/ the exception of bi-app references.
|
||||
|
||||
|
||||
// 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';
|
||||
|
||||
// Load the shared build
|
||||
@import 'build-v2';
|
||||
@@ -19,11 +19,6 @@
|
||||
<li><a href="v1/course-settings.html">Course settings page</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Pattern Library</h3>
|
||||
<ul>
|
||||
<li><a href="pattern-library/test.html">Test page</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Bootstrap</h3>
|
||||
<ul>
|
||||
<li><a href="bootstrap/course-settings.html">Course settings page</a></li>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
## Override the default styles_version to the Pattern Library version (version 2)
|
||||
<%! main_css = "style-main-v2" %>
|
||||
|
||||
<%inherit file="../../base.html" />
|
||||
|
||||
<%block name="title">Pattern Library Test Page</%block>
|
||||
<%block name="bodyclass">is-signedin pattern-library</%block>
|
||||
|
||||
<%block name="content">
|
||||
<h1>Pattern Library test page</h1>
|
||||
|
||||
<div class="alert alert-warning" role="alert" tabindex="-1">
|
||||
<span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
|
||||
|
||||
<div class="alert-message">
|
||||
<p class="alert-copy">
|
||||
Interesting pattern library content to come...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</%block>
|
||||
@@ -65,19 +65,6 @@ class ProgramsFragmentView(EdxFragmentView):
|
||||
"""
|
||||
return _('Programs')
|
||||
|
||||
def css_dependencies(self):
|
||||
"""
|
||||
Returns list of CSS files that this view depends on.
|
||||
|
||||
The helper function that it uses to obtain the list of CSS files
|
||||
works in conjunction with the Django pipeline to ensure that in development mode
|
||||
the files are loaded individually, but in production just the single bundle is loaded.
|
||||
"""
|
||||
if get_language_bidi():
|
||||
return self.get_css_dependencies('style-learner-dashboard-rtl')
|
||||
else:
|
||||
return self.get_css_dependencies('style-learner-dashboard')
|
||||
|
||||
|
||||
class ProgramDetailsFragmentView(EdxFragmentView):
|
||||
"""
|
||||
@@ -161,16 +148,3 @@ class ProgramDetailsFragmentView(EdxFragmentView):
|
||||
Return page title for the standalone page.
|
||||
"""
|
||||
return _('Program Details')
|
||||
|
||||
def css_dependencies(self):
|
||||
"""
|
||||
Returns list of CSS files that this view depends on.
|
||||
|
||||
The helper function that it uses to obtain the list of CSS files
|
||||
works in conjunction with the Django pipeline to ensure that in development mode
|
||||
the files are loaded individually, but in production just the single bundle is loaded.
|
||||
"""
|
||||
if get_language_bidi():
|
||||
return self.get_css_dependencies('style-learner-dashboard-rtl')
|
||||
else:
|
||||
return self.get_css_dependencies('style-learner-dashboard')
|
||||
|
||||
@@ -1805,18 +1805,6 @@ PIPELINE['STYLESHEETS'] = {
|
||||
],
|
||||
'output_filename': 'css/lms-main-v1-rtl.css',
|
||||
},
|
||||
'style-main-v2': {
|
||||
'source_filenames': [
|
||||
'css/lms-main-v2.css',
|
||||
],
|
||||
'output_filename': 'css/lms-main-v2.css',
|
||||
},
|
||||
'style-main-v2-rtl': {
|
||||
'source_filenames': [
|
||||
'css/lms-main-v2-rtl.css',
|
||||
],
|
||||
'output_filename': 'css/lms-main-v2-rtl.css',
|
||||
},
|
||||
'style-course-vendor': {
|
||||
'source_filenames': [
|
||||
'js/vendor/CodeMirror/codemirror.css',
|
||||
@@ -1893,18 +1881,6 @@ PIPELINE['STYLESHEETS'] = {
|
||||
],
|
||||
'output_filename': 'css/certificates-style-rtl.css'
|
||||
},
|
||||
'style-learner-dashboard': {
|
||||
'source_filenames': [
|
||||
'css/lms-learner-dashboard.css',
|
||||
],
|
||||
'output_filename': 'css/lms-learner-dashboard.css',
|
||||
},
|
||||
'style-learner-dashboard-rtl': {
|
||||
'source_filenames': [
|
||||
'css/lms-learner-dashboard-rtl.css',
|
||||
],
|
||||
'output_filename': 'css/lms-learner-dashboard-rtl.css',
|
||||
},
|
||||
'style-mobile': {
|
||||
'source_filenames': [
|
||||
'css/lms-mobile.css',
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
// ------------------------------
|
||||
// Learner Dashboard: Shared Build Compile
|
||||
|
||||
// Base build
|
||||
@import 'base/build';
|
||||
|
||||
// Pattern Library
|
||||
@import 'elements/banners';
|
||||
@import 'elements/course-card';
|
||||
@import 'elements/program-card';
|
||||
@import 'elements-v2/icons';
|
||||
@import 'elements/progress-circle';
|
||||
@@ -1,43 +0,0 @@
|
||||
// ------------------------------
|
||||
// LMS: Shared Build Compile
|
||||
// Version 2 - introduces the Pattern Library
|
||||
|
||||
// Base build
|
||||
@import 'base-v2/build';
|
||||
|
||||
// Configuration
|
||||
@import 'config';
|
||||
@import 'base-v2/extends';
|
||||
|
||||
// Extensions
|
||||
@import 'shared-v2/variables';
|
||||
@import 'shared-v2/base';
|
||||
@import 'shared-v2/navigation';
|
||||
@import 'shared-v2/header';
|
||||
@import 'shared-v2/footer';
|
||||
@import 'shared-v2/layouts';
|
||||
@import 'shared-v2/components';
|
||||
@import 'shared-v2/modal';
|
||||
@import 'shared-v2/help-tab';
|
||||
|
||||
// Elements
|
||||
@import 'notifications';
|
||||
@import 'elements/controls';
|
||||
@import 'elements-v2/buttons';
|
||||
@import 'elements-v2/pagination';
|
||||
|
||||
// Features
|
||||
@import 'features/bookmarks';
|
||||
@import 'features/course-experience';
|
||||
@import 'features/course-search';
|
||||
@import 'features/course-sock';
|
||||
@import 'features/course-upgrade-message';
|
||||
@import 'features/content-type-gating';
|
||||
|
||||
|
||||
// Responsive Design
|
||||
@import 'header';
|
||||
|
||||
// Extra theme-specific rules
|
||||
@import 'lms/theme/extras';
|
||||
@import 'lms/theme/extras-v2';
|
||||
@@ -1,6 +0,0 @@
|
||||
// Base rules for Pattern Library pages
|
||||
|
||||
.container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
// LMS common build
|
||||
|
||||
// Theme-specific variables
|
||||
@import 'lms/theme/variables';
|
||||
|
||||
// Core Bootstrap functions, variables and mixins
|
||||
@import 'bootstrap/variables';
|
||||
@import 'bootstrap/scss/functions';
|
||||
@import 'bootstrap/scss/variables';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import 'bootstrap/scss/mixins/grid';
|
||||
|
||||
// Pattern Library extensions
|
||||
@import 'base';
|
||||
@import 'extends';
|
||||
|
||||
// LMS-specific variables
|
||||
@import '../variables';
|
||||
|
||||
// Import legacy variables
|
||||
//
|
||||
// Note: these should be replaced by Bootstrap theme variables
|
||||
@import 'lms/theme/variables-v1';
|
||||
|
||||
// Cookie Policy Banner
|
||||
@import '@edx/frontend-component-cookie-policy-banner/build/_cookie-policy-banner.scss';
|
||||
@@ -1,6 +0,0 @@
|
||||
// Adds a simple extend that indicates that this user interface element should not print
|
||||
%ui-print-excluded {
|
||||
@media print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
// ------------------------------
|
||||
// Discussion shared build
|
||||
|
||||
// Set the relative path to the static root
|
||||
$static-path: '../..' !default;
|
||||
|
||||
// Base build
|
||||
@import '../base-v2/build';
|
||||
|
||||
// Configuration
|
||||
@import '../config';
|
||||
|
||||
// Common extensions
|
||||
@import '../shared-v2/variables';
|
||||
@import '../shared-v2/base';
|
||||
@import '../shared-v2/navigation';
|
||||
@import '../shared-v2/header';
|
||||
@import '../shared-v2/footer';
|
||||
@import '../shared-v2/layouts';
|
||||
@import '../shared-v2/components';
|
||||
@import '../shared-v2/modal';
|
||||
@import '../shared-v2/help-tab';
|
||||
|
||||
// Compatibility support for non-Pattern Library mixins and extensions
|
||||
@import 'utilities/variables-v2';
|
||||
@import 'utilities/v1-compatibility';
|
||||
|
||||
// Discussion styling
|
||||
@import 'mixins';
|
||||
@import 'discussion'; // Process old file after definitions but before everything else, partial is deprecated.
|
||||
@import 'layouts';
|
||||
@import 'elements/actions';
|
||||
@import 'elements/editor';
|
||||
@import 'elements/labels';
|
||||
@import 'elements/navigation';
|
||||
@import 'views/home';
|
||||
@import 'views/thread';
|
||||
@import 'views/create-edit-post';
|
||||
@import 'views/response';
|
||||
@import 'views/search';
|
||||
@import 'views/inline';
|
||||
@import 'utilities/developer';
|
||||
@import 'utilities/shame';
|
||||
|
||||
// Site status banner
|
||||
@import '../notifications';
|
||||
|
||||
// Extra theme-specific rules
|
||||
@import 'lms/theme/extras';
|
||||
@import 'lms/theme/extras-v2';
|
||||
@@ -1,46 +0,0 @@
|
||||
// ----------------------------
|
||||
// #UPGRADE
|
||||
// ----------------------------
|
||||
$upgrade-color: #009b00 !default;
|
||||
$upgrade-dark-color: #008100 !default;
|
||||
|
||||
.btn-primary {
|
||||
@extend .btn-brand;
|
||||
}
|
||||
|
||||
.btn-upgrade {
|
||||
@extend %btn;
|
||||
|
||||
border-color: $upgrade-color;
|
||||
background: $upgrade-color;
|
||||
color: palette(primary, x-back);
|
||||
text-decoration: none;
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
border-color: $upgrade-dark-color;
|
||||
background: $upgrade-dark-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
border-color: $upgrade-dark-color;
|
||||
background: $upgrade-dark-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: $btn-disabled-border-color;
|
||||
background: $btn-disabled-background-color;
|
||||
color: $btn-disabled-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
.xseries-icon {
|
||||
background: url('#{$static-path}/images/programs/xseries-icon.svg') no-repeat;
|
||||
}
|
||||
|
||||
.micromasters-icon {
|
||||
margin-top: $baseline * 0.05;
|
||||
background: url('#{$static-path}/images/programs/micromasters-icon.svg') no-repeat;
|
||||
}
|
||||
|
||||
.certificate-body {
|
||||
// Use the ampersand to reference parent selectors.
|
||||
.certificate-icon & {
|
||||
@include float(left);
|
||||
@include margin-right($baseline*0.4);
|
||||
|
||||
margin-top: ($baseline/10);
|
||||
width: 23px;
|
||||
height: 20px;
|
||||
padding: 2px;
|
||||
background-color: $white;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.green-icon & {
|
||||
fill: palette(success, text);
|
||||
border-color: palette(success, text);
|
||||
}
|
||||
|
||||
.blue-icon & {
|
||||
fill: palette(primary, dark);
|
||||
border-color: palette(primary, dark);
|
||||
}
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
// Copied from elements/_pagination.scss
|
||||
|
||||
.pagination {
|
||||
@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;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.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: theme-color("primary");
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: transparent;
|
||||
color: theme-color("disabled");
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
@extend .sr-only;
|
||||
}
|
||||
|
||||
.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: theme-color("dark");
|
||||
}
|
||||
|
||||
.current-page {
|
||||
position: absolute;
|
||||
|
||||
@include left(-($baseline/4));
|
||||
}
|
||||
|
||||
.page-divider {
|
||||
vertical-align: middle;
|
||||
color: theme-color("dark");
|
||||
}
|
||||
|
||||
.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 $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: theme-color("dark");
|
||||
|
||||
label { // override
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.listing-sort-select {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
// ------------------------------
|
||||
// LMS Learner Dashboard styling
|
||||
// users the Pattern Library
|
||||
|
||||
// NOTE: This is the right-to-left (RTL) configured style compile.
|
||||
// It should mirror lms-learner-dashboard-rtl w/ the exception of bi-app references.
|
||||
|
||||
|
||||
// Load the RTL version of lms main
|
||||
@import 'lms-main-v2-rtl';
|
||||
|
||||
// Load the shared build
|
||||
@import 'build-learner-dashboard';
|
||||
@@ -1,13 +0,0 @@
|
||||
// ------------------------------
|
||||
// LMS Learner Dashboard styling
|
||||
// users the Pattern Library
|
||||
|
||||
// NOTE: This is the left-to-right (LTR) configured style compile.
|
||||
// It should mirror lms-learner-dashboard-rtl w/ the exception of bi-app references.
|
||||
|
||||
|
||||
// Load the LTR version of lms main
|
||||
@import 'lms-main-v2';
|
||||
|
||||
// Load the shared build
|
||||
@import 'build-learner-dashboard';
|
||||
@@ -1,15 +0,0 @@
|
||||
// ------------------------------
|
||||
// LMS main styling
|
||||
// Version 2 - introduces the Pattern Library
|
||||
|
||||
// NOTE: This is the right-to-left (RTL) configured style compile.
|
||||
// It should mirror lms-main-v2 w/ the exception of bi-app references.
|
||||
|
||||
|
||||
// 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
|
||||
@import 'build-lms-v2';
|
||||
@@ -1,15 +0,0 @@
|
||||
// ------------------------------
|
||||
// LMS main styling
|
||||
// Version 2 - introduces the Pattern Library
|
||||
|
||||
// NOTE: This is the left-to-right (LTR) configured style compile.
|
||||
// It should mirror lms-main-v2-rtl w/ the exception of bi-app references.
|
||||
|
||||
|
||||
// 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
|
||||
@import 'build-lms-v2';
|
||||
@@ -1,26 +0,0 @@
|
||||
// LMS base styles
|
||||
|
||||
// removing the outline on any element that we make programmatically focusable
|
||||
[tabindex="-1"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@include span(12, none);
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
@media print {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Support .sr as well as .sr-only for backward compatibility
|
||||
.sr {
|
||||
@extend .sr-only;
|
||||
}
|
||||
|
||||
@@ -1,205 +0,0 @@
|
||||
// TODO: tabs should be added to the Pattern Library
|
||||
.tabs {
|
||||
@include clearfix();
|
||||
|
||||
@extend %reset-lists;
|
||||
|
||||
@include border-top-radius(4px);
|
||||
|
||||
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
|
||||
|
||||
.tab {
|
||||
@include float(left);
|
||||
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.prominent {
|
||||
@include margin-right(16px);
|
||||
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.prominent + li {
|
||||
@include border-left(1px solid $border-color);
|
||||
@include padding-left($baseline*0.75);
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
@include padding($baseline/2, $baseline*0.75, 13px, $baseline*0.75);
|
||||
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-style: solid;
|
||||
border-width: 0 0 4px;
|
||||
border-bottom-color: transparent;
|
||||
color: $gray-700;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: theme-color("primary");
|
||||
border-bottom-color: theme-color("primary");
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $uxpl-blue-hover-active;
|
||||
border-bottom-color: $uxpl-blue-hover-active;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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-input {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.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: $gray;
|
||||
padding: $baseline/4;
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $body-color;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-banner {
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
margin: 0 auto;
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
margin-top: $baseline;
|
||||
border: 1px solid;
|
||||
|
||||
.icon-alert {
|
||||
@include margin-right($baseline);
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
@include margin-left($baseline);
|
||||
}
|
||||
|
||||
&.alert-info {
|
||||
color: $state-info-text;
|
||||
background-color: $state-info-bg;
|
||||
border-color: $state-info-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
color: $state-success-text;
|
||||
background-color: $state-success-bg;
|
||||
border-color: $state-success-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
color: $state-warning-text;
|
||||
background-color: $state-warning-bg;
|
||||
border-color: $state-warning-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-danger {
|
||||
color: $state-danger-text;
|
||||
background-color: $state-danger-bg;
|
||||
border-color: $state-danger-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-preview-menu {
|
||||
@include clearfix();
|
||||
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
padding: ($baseline*0.75) 20px;
|
||||
background-color: theme-color("primary");
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-menu {
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
@include margin-left(0);
|
||||
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
|
||||
.action-preview {
|
||||
display: inline-block;
|
||||
|
||||
.action-preview-label {
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
color: theme-color("inverse");
|
||||
}
|
||||
|
||||
.action-preview-select {
|
||||
@include margin-right($baseline);
|
||||
}
|
||||
|
||||
.action-preview-username-container {
|
||||
display: none;
|
||||
|
||||
.action-preview-username {
|
||||
vertical-align: middle;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-specific-student-notice {
|
||||
margin-top: ($baseline/2);
|
||||
font-size: 90%;
|
||||
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
// Open edX: LMS footer
|
||||
// ====================
|
||||
|
||||
.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: $body-bg;
|
||||
|
||||
footer#footer-openedx {
|
||||
@include clearfix();
|
||||
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
font-family: $font-family-sans-serif;
|
||||
|
||||
// override needed for poorly scoped font-family styling on p a:link {}
|
||||
a {
|
||||
font-family: $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();
|
||||
|
||||
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;
|
||||
|
||||
@media (min-width: $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;
|
||||
|
||||
.colophon-about img {
|
||||
margin-top: ($baseline*1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
// LMS header styles
|
||||
|
||||
.header-global {
|
||||
@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;
|
||||
margin: 0 auto;
|
||||
padding: 10px 10px 0;
|
||||
width: 100%;
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
|
||||
.left {
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.right {
|
||||
@include float(right);
|
||||
}
|
||||
|
||||
.logo {
|
||||
@include float(left);
|
||||
@include margin-right(10px);
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.course-header {
|
||||
@include float(left);
|
||||
@include margin(12px, 10px, 0, 10px);
|
||||
|
||||
color: $body-color;
|
||||
|
||||
.provider {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-user-menu {
|
||||
@include float(right);
|
||||
|
||||
margin-top: 4px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include text-align(left);
|
||||
|
||||
top: inherit;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
&.nav-global {
|
||||
@include margin(0, 0, 0, $baseline/2);
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: theme-color("primary");
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 4px solid $black-t3 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style the courseware's slim version of the header
|
||||
&.slim {
|
||||
.wrapper-header {
|
||||
height: 60px;
|
||||
|
||||
.logo img {
|
||||
margin-top: 4px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.course-header {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.list-inline.nav-global {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.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: $body-color;
|
||||
|
||||
&:visited {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
#help-modal {
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
@media (max-width: $grid-breakpoints-md) {
|
||||
width: 90% !important;
|
||||
margin-left: -47% !important;
|
||||
}
|
||||
|
||||
@media (min-width: $grid-breakpoints-md) {
|
||||
width: 700px !important;
|
||||
margin-left: -350px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.help-tab {
|
||||
@include transform(rotate(-90deg));
|
||||
@include transform-origin(0 0);
|
||||
|
||||
z-index: z-index(front);
|
||||
bottom: $baseline;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
cursor: pointer;
|
||||
border: 1px solid $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 {
|
||||
.btn {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
padding: ($baseline*0.75) 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: $white;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
&#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);
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
textarea[name="details"] {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
#feedback_success_wrapper {
|
||||
p {
|
||||
padding: 0 $baseline $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-form-select {
|
||||
background: $white;
|
||||
margin-bottom: $baseline;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
// LMS layouts
|
||||
|
||||
.content-wrapper {
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
margin-top: $baseline;
|
||||
padding: 0 0 $baseline/2;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0 $baseline $baseline/2;
|
||||
}
|
||||
|
||||
.page-content-container {
|
||||
@include clearfix();
|
||||
|
||||
border: 1px solid $border-color;
|
||||
background-color: $body-bg;
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@include clearfix();
|
||||
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: $baseline;
|
||||
|
||||
.page-title {
|
||||
@extend %t-title4;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
text-transform: none;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
&.has-secondary {
|
||||
.page-header-main {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.page-header-secondary {
|
||||
@include float(right);
|
||||
@include text-align(right);
|
||||
|
||||
display: flex;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
.form-actions {
|
||||
@include margin-left($baseline/2);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-actions > *:first-child {
|
||||
@include margin-left(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: $baseline;
|
||||
|
||||
@media (min-width: $grid-breakpoints-md) {
|
||||
display: flex;
|
||||
|
||||
.page-content-main {
|
||||
flex-grow: 1; // This column should consume all the available space
|
||||
}
|
||||
|
||||
.page-content-secondary {
|
||||
min-width: 350px; // Note: setting width only is not obeyed
|
||||
max-width: 350px; // Note: setting width only is not obeyed
|
||||
margin-left: $baseline*2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,300 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@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: $body-color;
|
||||
|
||||
.inner-wrapper {
|
||||
z-index: z-index(mid-front);
|
||||
background: $modal-bg-color;
|
||||
border-radius: 0;
|
||||
border: 1px solid $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;
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
$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(
|
||||
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(
|
||||
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);
|
||||
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);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: $body-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);
|
||||
|
||||
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;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.leanModal_box {
|
||||
@extend .modal;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
// LMS navigation styles
|
||||
|
||||
// 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 $border-color;
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@include left(50%);
|
||||
@include margin-left(-6.5em)
|
||||
margin-top: 0;
|
||||
|
||||
padding: 10px 0.5em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 12em;
|
||||
z-index: 1050;
|
||||
top: 0;
|
||||
background-color: $black !important;
|
||||
opacity: 0.8;
|
||||
color: $white !important;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
// LMS - utilities - variables
|
||||
// ====================
|
||||
|
||||
// #GRID: Grid and layout variables
|
||||
// #COLORS: Base, palette and theme color definitions + application
|
||||
// #TYPOGRAPHY: Font definitions and scales
|
||||
// #ICONS: Icon specific colors + other styling
|
||||
|
||||
// ----------------------------
|
||||
// #GRID
|
||||
// ----------------------------
|
||||
$grid-breakpoints-sm: 576px !default;
|
||||
$grid-breakpoints-md: 768px !default;
|
||||
$grid-breakpoints-lg: 992px !default;
|
||||
|
||||
// ----------------------------
|
||||
// #COLORS
|
||||
// ----------------------------
|
||||
|
||||
$gray: $gray-600 !default;
|
||||
$lms-container-background-color: theme-color("inverse") !default;
|
||||
$lms-preview-menu-color: $gray-400 !default;
|
||||
$success-color-hover: darken($success, 15%) !default;
|
||||
$lms-hero-color: #005e90 !default;
|
||||
|
||||
$button-bg-hover-color: $white !default;
|
||||
|
||||
$white-transparent: rgba(255, 255, 255, 0) !default;
|
||||
$white-opacity-40: rgba(255, 255, 255, 0.4) !default;
|
||||
$white-opacity-60: rgba(255, 255, 255, 0.6) !default;
|
||||
$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
|
||||
$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
|
||||
|
||||
$black: rgb(0, 0, 0) !default;
|
||||
$black-t0: rgba($black, 0.125) !default;
|
||||
$black-t1: rgba($black, 0.25) !default;
|
||||
$black-t2: rgba($black, 0.5) !default;
|
||||
$black-t3: rgba($black, 0.75) !default;
|
||||
|
||||
$light-grey-transparent: rgba(200, 200, 200, 0) !default;
|
||||
$light-grey-solid: rgba(200, 200, 200, 1) !default;
|
||||
|
||||
$header-border-color: $gray-l1 !default;
|
||||
|
||||
$table-bg-accent: #f9f9f9 !default;
|
||||
|
||||
// ----------------------------
|
||||
// #TYPOGRAPHY
|
||||
// ----------------------------
|
||||
$font-light: 300 !default;
|
||||
$font-regular: 400 !default;
|
||||
$font-semibold: 600 !default;
|
||||
$font-bold: 700 !default;
|
||||
|
||||
// ----------------------------
|
||||
// #ICONS
|
||||
// ----------------------------
|
||||
// Icons
|
||||
$lms-dark-icon-color: $white !default;
|
||||
$lms-dark-icon-background-color: palette(grayscale, black) !default;
|
||||
|
||||
$site-status-color: rgb(182, 37, 103) !default;
|
||||
|
||||
$shadow-l1: rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
$error-color: rgb(203, 7, 18) !default;
|
||||
$warning-color: rgb(255, 192, 31) !default;
|
||||
$confirm-color: rgb(0, 132, 1) !default;
|
||||
$active-color: $blue !default;
|
||||
$highlight-color: rgb(255, 255, 0) !default;
|
||||
$alert-color: rgb(212, 64, 64) !default;
|
||||
|
||||
// ----------------------------
|
||||
// #ALERTS
|
||||
// ----------------------------
|
||||
|
||||
$state-success-text: $black !default;
|
||||
$state-success-bg: #dff0d8 !default;
|
||||
$state-success-border: darken($state-success-bg, 5%) !default;
|
||||
|
||||
$state-info-text: $black !default;
|
||||
$state-info-bg: #d9edf7 !default;
|
||||
$state-info-border: darken($state-info-bg, 7%) !default;
|
||||
|
||||
$state-warning-text: $black !default;
|
||||
$state-warning-bg: #fcf8e3 !default;
|
||||
$state-warning-border: darken($state-warning-bg, 5%) !default;
|
||||
|
||||
$state-danger-text: $black !default;
|
||||
$state-danger-bg: #f2dede !default;
|
||||
$state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||
@@ -26,12 +26,6 @@
|
||||
<li><a href="v1/unit-page.html">Unit page</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Pattern Library</h3>
|
||||
<ul>
|
||||
<li><a href="pattern-library/course-skeleton.html">Course skeleton page</a></li>
|
||||
<li><a href="pattern-library/unit-page.html">Unit page</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Bootstrap</h3>
|
||||
<ul>
|
||||
<li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li>
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
## mako
|
||||
|
||||
## 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">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tab">
|
||||
<a href="#">
|
||||
Course
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tab">
|
||||
<a href="#" 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 btn-small">Click Me!</button>
|
||||
## TODO: note that this search component markup is provisional
|
||||
## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
|
||||
## - update the Pattern Library's markup to match
|
||||
<div class="page-header-search navbar">
|
||||
<form class="search-form" role="search">
|
||||
<label class="field-label sr-only" for="search" id="search-hint">Search all the things</label>
|
||||
<input
|
||||
class="field-input input-text search-input"
|
||||
type="search"
|
||||
name="search"
|
||||
id="search"
|
||||
placeholder="Search all the things"
|
||||
/>
|
||||
<button type="button" class="action action-clear" aria-label="Clear search">
|
||||
<span class="icon fa fa-times-circle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary search-button" type="button">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<div class="layout layout-1t2t">
|
||||
<aside class="layout-col layout-col-a" role="complementary" aria-label="Navigation">
|
||||
<h3>Sidebar</h3>
|
||||
<ul>
|
||||
<li>Item one</li>
|
||||
<li>Item two</li>
|
||||
<li>Item three</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<main id="main" aria-label="Content" tabindex="-1" class="layout-col layout-col-b">
|
||||
<article tabindex="-1" aria-label="Main Content">
|
||||
<h3>Main content goes here.</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare,
|
||||
augue urna fermentum ex, vitae dignissim magna est sit amet diam. Nunc sodales dolor finibus
|
||||
pulvinar placerat. Suspendisse vitae tellus auctor, sodales erat ac, venenatis quam. Etiam
|
||||
purus est, consequat nec erat vel, bibendum volutpat ex. Fusce vitae consectetur ante.
|
||||
Suspendisse elit mauris, iaculis sed diam eu, efficitur tempor dui. Praesent tristique nunc
|
||||
quam, in tincidunt ligula accumsan et. Etiam augue sem, commodo ac ipsum vel, fringilla dapibus
|
||||
lacus. Sed facilisis euismod felis, non malesuada massa scelerisque sed. Etiam et placerat
|
||||
lorem. Nullam quis tincidunt sapien.</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</%block>
|
||||
@@ -1,46 +0,0 @@
|
||||
## mako
|
||||
|
||||
## Override the default styles_version to the Pattern Library version (version 2)
|
||||
<%! main_css = "style-main-v2" %>
|
||||
|
||||
<%page expression_filter="h"/>
|
||||
|
||||
<%namespace name='static' file='/static_content.html'/>
|
||||
<%inherit file="/main.html" />
|
||||
|
||||
<%block name="pagetitle">Course Skeleton</%block>
|
||||
|
||||
<%block name="bodyclass">view-in-course view-courseware courseware</%block>
|
||||
|
||||
<%block name="headextra">
|
||||
<%static:css group='style-course-vendor'/>
|
||||
<%static:css group='style-course'/>
|
||||
</%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">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tab">
|
||||
<a href="#">
|
||||
Course
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="tab">
|
||||
<a href="#" class="active">
|
||||
Skeleton
|
||||
<span class="sr-only">, current location</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
<%include file="../fragments/unit-fragment.html"/>
|
||||
</%block>
|
||||
@@ -27,12 +27,10 @@ def show_reference_template(request, template):
|
||||
e.g. /template/ux/reference/index.html?name=Foo
|
||||
"""
|
||||
try:
|
||||
uses_pattern_library = u'/pattern-library/' in request.path
|
||||
is_v1 = u'/v1/' in request.path
|
||||
uses_bootstrap = not uses_pattern_library and not is_v1
|
||||
uses_bootstrap = not is_v1
|
||||
context = {
|
||||
'request': request,
|
||||
'uses_pattern_library': uses_pattern_library,
|
||||
'uses_bootstrap': uses_bootstrap,
|
||||
}
|
||||
context.update(request.GET.dict())
|
||||
|
||||
Reference in New Issue
Block a user