Add basic Bootstrap theme to Studio
LEARNER-1982
This commit is contained in:
Andy Armstrong
@@ -710,6 +710,10 @@ base_vendor_js = [
|
||||
'edx-ui-toolkit/js/utils/string-utils.js',
|
||||
'edx-ui-toolkit/js/utils/html-utils.js',
|
||||
|
||||
# Load Bootstrap and supporting libraries
|
||||
'common/js/vendor/tether.js',
|
||||
'common/js/vendor/bootstrap.js',
|
||||
|
||||
# Finally load RequireJS
|
||||
'common/js/vendor/require.js'
|
||||
]
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'partials/variables';
|
||||
@import 'cms/base/variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
|
||||
@@ -6,10 +6,13 @@
|
||||
// Configuration
|
||||
@import 'config';
|
||||
|
||||
// Extensions
|
||||
@import 'partials/variables';
|
||||
// +Base - Utilities
|
||||
// ====================
|
||||
@import 'partials/cms/base/variables';
|
||||
@import 'mixins-v2';
|
||||
@import 'base-v2';
|
||||
|
||||
// Pattern Library styling
|
||||
@import 'elements-v2/controls';
|
||||
@import 'elements-v2/header';
|
||||
@import 'elements-v2/navigation';
|
||||
|
||||
11
cms/static/sass/bootstrap/_base.scss
Normal file
11
cms/static/sass/bootstrap/_base.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// Open edX: Studio base styles
|
||||
// ============================
|
||||
//
|
||||
// Note: these styles replicate the Studio styles directly
|
||||
// rather than benefiting from any Bootstrap classes. Ideally
|
||||
// the code base should be rebuilt using Bootstrap and then
|
||||
// these styles will no longer be necessary.
|
||||
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
195
cms/static/sass/bootstrap/_components.scss
Normal file
195
cms/static/sass/bootstrap/_components.scss
Normal file
@@ -0,0 +1,195 @@
|
||||
// Open edX: components
|
||||
// ====================
|
||||
|
||||
// Skip nav
|
||||
.nav-skip,
|
||||
.transcript-skip {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -($baseline*30);
|
||||
overflow: hidden;
|
||||
background: $white;
|
||||
border-bottom: 1px solid $gray-lightest;
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
position: relative;
|
||||
top: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Page banner
|
||||
.page-banner {
|
||||
max-width: $studio-max-width;
|
||||
margin: 0 auto;
|
||||
|
||||
.user-messages {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
// Alerts
|
||||
.alert {
|
||||
.icon-alert {
|
||||
margin-right: $baseline / 4;
|
||||
}
|
||||
}
|
||||
|
||||
// Sock
|
||||
.wrapper-sock {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
margin: ($baseline*2) 0 0 0;
|
||||
border-top: 1px solid $gray-light;
|
||||
width: 100%;
|
||||
|
||||
.wrapper-inner {
|
||||
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;
|
||||
list-style: none;
|
||||
|
||||
.cta-show-sock {
|
||||
@extend %ui-btn-pill;
|
||||
@extend %t-action4;
|
||||
background: $gray-lightest;
|
||||
padding: ($baseline/2) $baseline;
|
||||
color: $gray-light;
|
||||
|
||||
.icon {
|
||||
margin-right: $baseline/4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sock - additional help
|
||||
.sock {
|
||||
@include clearfix();
|
||||
@extend %t-copy-sub2;
|
||||
max-width: $studio-max-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
padding: ($baseline*2) 0;
|
||||
color: $gray-light;
|
||||
|
||||
// support body
|
||||
header {
|
||||
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// shared elements
|
||||
.support, .feedback {
|
||||
.title {
|
||||
@extend %t-title6;
|
||||
color: $white;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
@include clearfix();
|
||||
|
||||
.action-item {
|
||||
float: left;
|
||||
margin-right: $baseline/2;
|
||||
margin-bottom: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.action {
|
||||
@extend %t-action4;
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
@extend %t-icon4;
|
||||
vertical-align: middle;
|
||||
margin-right: $baseline/4;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// studio support content
|
||||
.support {
|
||||
width: flex-grid(8,12);
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
|
||||
.action-item {
|
||||
width: flexgrid(4,8);
|
||||
}
|
||||
}
|
||||
|
||||
// studio feedback content
|
||||
.feedback {
|
||||
width: flex-grid(4,12);
|
||||
float: left;
|
||||
|
||||
.action-item {
|
||||
width: flexgrid(4,4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// case: sock content is shown
|
||||
&.is-shown {
|
||||
border-color: $gray-dark;
|
||||
|
||||
.list-cta .cta-show-sock {
|
||||
background: $gray-dark;
|
||||
border-color: $gray-dark;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
96
cms/static/sass/bootstrap/_footer.scss
Normal file
96
cms/static/sass/bootstrap/_footer.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
// Open edX: Studio footer
|
||||
// =======================
|
||||
//
|
||||
// Note: these styles replicate the Studio styles directly
|
||||
// rather than benefiting from any Bootstrap classes. Ideally
|
||||
// the header should be reimagined using Bootstrap and then
|
||||
// these styles will no longer be necessary.
|
||||
|
||||
.wrapper-footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 0 $baseline 0;
|
||||
padding: $baseline;
|
||||
|
||||
footer.primary {
|
||||
@extend %t-copy-sub2;
|
||||
@include clearfix();
|
||||
max-width: $studio-max-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
color: $gray-light;
|
||||
|
||||
.footer-content-primary {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.colophon {
|
||||
width: flex-grid(4, 12);
|
||||
float: left;
|
||||
margin-right: flex-gutter(2);
|
||||
}
|
||||
|
||||
.nav-peripheral {
|
||||
width: flex-grid(6, 12);
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin-right: $baseline/4;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 2px;
|
||||
padding: ($baseline/2) ($baseline/2);
|
||||
background: transparent;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: $baseline/4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-content-secondary {
|
||||
@include clearfix();
|
||||
margin-top: $baseline;
|
||||
}
|
||||
|
||||
.footer-about-copyright, .footer-about-openedx {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// platform trademarks
|
||||
.footer-about-copyright {
|
||||
width: flex-grid(4, 12);
|
||||
float: left;
|
||||
margin-right: flex-gutter(2);
|
||||
}
|
||||
|
||||
// platform Open edX logo and link
|
||||
.footer-about-openedx {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: ($baseline* 6);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
568
cms/static/sass/bootstrap/_header.scss
Normal file
568
cms/static/sass/bootstrap/_header.scss
Normal file
@@ -0,0 +1,568 @@
|
||||
// Open edX: Studio header
|
||||
// =======================
|
||||
//
|
||||
// Note: these styles replicate the Studio styles directly
|
||||
// rather than benefiting from any Bootstrap classes. Ideally
|
||||
// the header should be reimagined using Bootstrap and then
|
||||
// these styles will no longer be necessary.
|
||||
|
||||
// studio - elements - global header
|
||||
// ====================
|
||||
|
||||
.wrapper-header {
|
||||
@extend %ui-depth3;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 2px 0 $shadow-l1;
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
background: $white;
|
||||
|
||||
header.primary {
|
||||
@include clearfix();
|
||||
max-width: $studio-max-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// basic layout
|
||||
.wrapper-l, .wrapper-r {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.wrapper-l {
|
||||
float: left;
|
||||
width: flex-grid(7,12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
float: right;
|
||||
width: flex-grid(4,12);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
|
||||
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 {
|
||||
|
||||
> ol > .nav-item {
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// basic layout - dropdowns
|
||||
.nav-dd {
|
||||
|
||||
.title {
|
||||
@extend %t-action2;
|
||||
@extend %ui-btn-dd-nav-primary;
|
||||
|
||||
.label, .fa-caret-down {
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
}
|
||||
|
||||
.fa-caret-down {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.fa-caret-down {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub .nav-item {
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - branding
|
||||
.branding {
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
max-height: ($baseline*2);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - course name/info
|
||||
.info-course {
|
||||
margin-right: flex-gutter();
|
||||
border-right: 1px solid $gray-lighter;
|
||||
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
|
||||
|
||||
.course-org, .course-number {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 45%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 1.0;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.course-org {
|
||||
margin-right: $baseline/4;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// entire link
|
||||
.course-link {
|
||||
display: block;
|
||||
color: $gray-dark;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - course nav
|
||||
.nav-course {
|
||||
padding: ($baseline*0.75) 0;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - account-based nav
|
||||
.nav-account {
|
||||
position: relative;
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-account-help {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
width: ($baseline*10);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-account-user {
|
||||
|
||||
.title {
|
||||
max-width: ($baseline*6.5);
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
max-width: 84%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-language-form {
|
||||
margin-top: 4px;
|
||||
.language-selector {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - pitch/how it works nav
|
||||
.nav-pitch {
|
||||
position: relative;
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: user signed in
|
||||
.is-signedin {
|
||||
|
||||
.wrapper-l {
|
||||
width: flex-grid(8,12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
width: flex-grid(4,12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.nav-account {
|
||||
top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: in course {
|
||||
.is-signedin.course {
|
||||
|
||||
.wrapper-header {
|
||||
|
||||
.wrapper-l {
|
||||
width: flex-grid(9,12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
width: flex-grid(3,12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.info-course {
|
||||
width: 25%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.nav-course {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: user not signed in
|
||||
.not-signedin,
|
||||
.view-util {
|
||||
|
||||
.wrapper-header {
|
||||
|
||||
.wrapper-l {
|
||||
width: flex-grid(2,12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
width: flex-grid(10,12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-pitch {
|
||||
top: ($baseline/4);
|
||||
|
||||
.nav-item {
|
||||
margin-right: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-signup {
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.action-signin {
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.nav-dd {
|
||||
|
||||
.title {
|
||||
|
||||
.label, .fa-caret-down {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-toggle-dd {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// dropped down state
|
||||
&.is-selected {
|
||||
|
||||
.ui-toggle-dd {
|
||||
transform: rotate(-180deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
|
||||
&.nav-course-settings {
|
||||
.wrapper-nav-sub {
|
||||
width: ($baseline*9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-nav-sub {
|
||||
position: absolute;
|
||||
top: ($baseline*2.5);
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
width: ($baseline*8);
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
|
||||
|
||||
// dropped down state
|
||||
&.is-shown {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 1px $shadow-l1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid $gray-light;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
background: $white;
|
||||
|
||||
&:after, &:before {
|
||||
bottom: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: $white;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(178, 178, 178, 0);
|
||||
border-bottom-color: $gray-light;
|
||||
border-width: 11px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@extend %t-action3;
|
||||
@extend %t-regular;
|
||||
display: block;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
border-bottom: 1px solid $gray-lighter;
|
||||
padding: 0 0($baseline/4) 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: left-hand side arrow/dd
|
||||
&.ui-left {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
left: $baseline;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: $baseline;
|
||||
margin-left: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: right-hand side arrow/dd
|
||||
&.ui-right {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
left: none;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
right: $baseline;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: $baseline;
|
||||
margin-right: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// STATE: active/current nav states
|
||||
|
||||
.nav-item.is-current,
|
||||
body.howitworks .nav-not-signedin-hiw,
|
||||
|
||||
// dashboard
|
||||
body.dashboard .nav-account-dashboard,
|
||||
|
||||
// course content
|
||||
body.course.view-outline .nav-course-courseware .title,
|
||||
body.course.view-updates .nav-course-courseware .title,
|
||||
body.course.view-static-pages .nav-course-courseware .title,
|
||||
body.course.view-uploads .nav-course-courseware .title,
|
||||
body.course.view-textbooks .nav-course-courseware .title,
|
||||
body.course.view-video-uploads .nav-course-courseware .title,
|
||||
|
||||
body.course.view-outline .nav-course-courseware-outline,
|
||||
body.course.view-updates .nav-course-courseware-updates,
|
||||
body.course.view-static-pages .nav-course-courseware-pages,
|
||||
body.course.view-uploads .nav-course-courseware-uploads,
|
||||
body.course.view-textbooks .nav-course-courseware-textbooks,
|
||||
body.course.view-video-uploads .nav-course-courseware-videos,
|
||||
|
||||
// course settings
|
||||
body.course.schedule .nav-course-settings .title,
|
||||
body.course.grading .nav-course-settings .title,
|
||||
body.course.view-team .nav-course-settings .title,
|
||||
body.course.view-group-configurations .nav-course-settings .title,
|
||||
body.course.advanced .nav-course-settings .title,
|
||||
body.course.view-certificates .nav-course-settings .title,
|
||||
|
||||
body.course.schedule .nav-course-settings-schedule,
|
||||
body.course.grading .nav-course-settings-grading,
|
||||
body.course.view-team .nav-course-settings-team,
|
||||
body.course.view-group-configurations .nav-course-settings-group-configurations,
|
||||
body.course.advanced .nav-course-settings-advanced,
|
||||
body.course.view-certificates .nav-course-settings-certificates,
|
||||
|
||||
// course tools
|
||||
body.course.view-import .nav-course-tools .title,
|
||||
body.course.view-export .nav-course-tools .title,
|
||||
body.course.view-export-git .nav-course-tools .title,
|
||||
|
||||
body.course.view-import .nav-course-tools-import,
|
||||
body.course.view-export .nav-course-tools-export,
|
||||
body.course.view-export-git .nav-course-tools-export-git,
|
||||
|
||||
// content library settings
|
||||
body.course.view-team .nav-library-settings .title,
|
||||
|
||||
body.course.view-team .nav-library-settings-team
|
||||
|
||||
{
|
||||
color: $brand-primary;
|
||||
|
||||
a {
|
||||
color: $brand-primary;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
362
cms/static/sass/bootstrap/_layouts.scss
Normal file
362
cms/static/sass/bootstrap/_layouts.scss
Normal file
@@ -0,0 +1,362 @@
|
||||
// Open edX: Studio layout
|
||||
// =======================
|
||||
//
|
||||
// Note: these styles replicate the Studio styles directly
|
||||
// rather than benefiting from any Bootstrap classes. Ideally
|
||||
// the layouts should be reimagined using Bootstrap and then
|
||||
// these styles will no longer be necessary.
|
||||
|
||||
.content-wrapper {
|
||||
margin-top: $baseline;
|
||||
|
||||
.course-tabs {
|
||||
padding-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
&.active, &:hover{
|
||||
.nav-link {
|
||||
border-bottom-color: $brand-primary;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $baseline/2 $baseline*3/4 $baseline*13/20;
|
||||
border-style: solid;
|
||||
border-width: 0 0 $baseline/5 0;
|
||||
border-bottom-color: transparent;
|
||||
|
||||
@media (max-width: map-get($grid-breakpoints, md)) {
|
||||
border: none;
|
||||
text-align: left;
|
||||
padding: 0 0 $baseline/2 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
border: 1px solid $inverse-color;
|
||||
background-color: $body-bg;
|
||||
|
||||
.page-header {
|
||||
border-bottom: 1px solid $inverse-color;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.container-fluid {
|
||||
max-width: $studio-max-width;
|
||||
}
|
||||
}
|
||||
|
||||
// studio - elements - layouts
|
||||
// ====================
|
||||
|
||||
// layout - basic
|
||||
// the wrapper around the viewable page area, excluding modal and other extra-view content
|
||||
.wrapper-view {
|
||||
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - basic page header
|
||||
.wrapper-mast {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
|
||||
.mast,
|
||||
.metadata {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
max-width: $studio-max-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto $baseline auto;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.mast {
|
||||
border-bottom: 1px solid $gray-light;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
// layout without actions
|
||||
.page-header {
|
||||
width: flex-grid(12);
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
&.has-actions {
|
||||
@include clearfix();
|
||||
|
||||
.page-header {
|
||||
float: left;
|
||||
width: flex-grid(6,12);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
position: relative;
|
||||
bottom: -($baseline*0.75);
|
||||
float: right;
|
||||
width: flex-grid(6,12);
|
||||
text-align: right;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
.button {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %sizing;
|
||||
|
||||
.action-button-text {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// CASE: new/create button
|
||||
&.new-button,
|
||||
&.button-new {
|
||||
@extend %btn-primary-green;
|
||||
@extend %sizing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
&.has-subtitle {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// layout with breadcrumb navigation
|
||||
&.has-navigation {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
@extend %cont-truncated;
|
||||
display: inline-block;
|
||||
vertical-align: bottom; // correct for extra padding in FF
|
||||
max-width: 250px;
|
||||
color: $gray-dark;
|
||||
|
||||
&.navigation-current {
|
||||
@extend %ui-disabled;
|
||||
color: $gray;
|
||||
max-width: 250px;
|
||||
|
||||
&:before {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-link:hover {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.navigation-item:before {
|
||||
content: " / ";
|
||||
margin: ($baseline/4);
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation .navigation-item:first-child:before {
|
||||
content: "";
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: wizard-based mast
|
||||
.mast-wizard {
|
||||
|
||||
.page-header-sub {
|
||||
@extend %t-title4;
|
||||
color: $gray;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.page-header-super {
|
||||
@extend %t-title4;
|
||||
float: left;
|
||||
width: flex-grid(12,12);
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-lighter;
|
||||
padding-top: ($baseline/2);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// page metadata/action bar
|
||||
.metadata {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// layout - basic page content
|
||||
.wrapper-content {
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include clearfix();
|
||||
@extend %t-copy-base;
|
||||
max-width: $studio-max-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
color: $gray-dark;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-lighter;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
.title-sub {
|
||||
@extend %t-copy-sub1;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
@extend %t-strong;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3/4 - 1/4 two col layout
|
||||
%two-col-1 {
|
||||
.content-primary {
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
width: flex-grid(9,12);
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
float: left;
|
||||
width: flex-grid(3,12);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// layout - primary content
|
||||
.content-primary {
|
||||
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
}
|
||||
|
||||
.title-2 {
|
||||
@extend %t-title4;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
@extend %t-title6;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
header {
|
||||
@include clearfix();
|
||||
|
||||
.title-2 {
|
||||
width: flex-grid(5, 12);
|
||||
margin: 0 flex-gutter() 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
width: flex-grid(7, 12);
|
||||
float: right;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout - supplemental content
|
||||
.content-supplementary {
|
||||
|
||||
> section {
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - grandfathered
|
||||
.main-wrapper {
|
||||
position: relative;
|
||||
margin: 0 ($baseline*2);
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
|
||||
> article {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.main-column {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: right;
|
||||
width: 28%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
239
cms/static/sass/bootstrap/_mixins.scss
Normal file
239
cms/static/sass/bootstrap/_mixins.scss
Normal file
@@ -0,0 +1,239 @@
|
||||
// common - utilities - mixins and extends
|
||||
// ====================
|
||||
//
|
||||
// Note: these mixins replicate the Studio mixins directly
|
||||
// to simplify the usage of Studio Sass partials. They
|
||||
// should be deprecated in favor of using native Bootstrap
|
||||
// functionality.
|
||||
|
||||
|
||||
// Table of Contents
|
||||
// * +Font Sizing - Mixin
|
||||
// * +Line Height - Mixin
|
||||
// * +Sizing - Mixin
|
||||
// * +Square - Mixin
|
||||
// * +Placeholder Styling - Mixin
|
||||
// * +Flex Support - Mixin
|
||||
// * +Flex Polyfill - Extends
|
||||
// * +UI - Wrapper - Extends
|
||||
// * +UI - Window - Extend
|
||||
// * +UI - Visual Link - Extend
|
||||
// * +UI - Functional Disable - Extend
|
||||
// * +UI - Visual Link - Extend
|
||||
// * +UI - Depth Levels - Extends
|
||||
// * +UI - Clear Children - Extends
|
||||
// * +UI - Buttons - Extends
|
||||
// * +UI - Well Archetype - Extends
|
||||
// * +Content - No List - Extends
|
||||
// * +Content - Hidden Image Text - Extend
|
||||
// * +Content - Screenreader Text - Extend
|
||||
// * +Content - Text Wrap - Extend
|
||||
// * +Content - Text Truncate - Extend
|
||||
// * +Icon - Font-Awesome - Extend
|
||||
// * +Icon - SSO icon images
|
||||
|
||||
// +Font Sizing - Mixin
|
||||
// ====================
|
||||
@mixin font-size($sizeValue: 16){
|
||||
font-size: $sizeValue + px;
|
||||
font-size: ($sizeValue/10) + rem;
|
||||
}
|
||||
|
||||
// +Line Height - Mixin
|
||||
// ====================
|
||||
@mixin line-height($fontSize: auto){
|
||||
line-height: ($fontSize*1.48) + px;
|
||||
line-height: (($fontSize/10)*1.48) + rem;
|
||||
}
|
||||
|
||||
// +Sizing - Mixin
|
||||
// ====================
|
||||
@mixin size($width: $baseline, $height: $baseline) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
}
|
||||
|
||||
// +Square - Mixin
|
||||
// ====================
|
||||
@mixin square($size: $baseline) {
|
||||
@include size($size);
|
||||
}
|
||||
|
||||
// +Placeholder Styling - Mixin
|
||||
// ====================
|
||||
@mixin placeholder($color) {
|
||||
:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// +Flex Support - Mixin
|
||||
// ====================
|
||||
@mixin ui-flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// +Flex PolyFill - Extends
|
||||
// ====================
|
||||
|
||||
// justify-content right for display:flex alignment in older browsers
|
||||
%ui-justify-right-flex {
|
||||
-webkit-box-pack: flex-end;
|
||||
-moz-box-pack: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// justify-content left for display:flex alignment in older browsers
|
||||
%ui-justify-left-flex {
|
||||
-webkit-box-pack: flex-start;
|
||||
-moz-box-pack: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
// align items center for display:flex alignment in older browsers
|
||||
%ui-align-center-flex {
|
||||
-webkit-flex-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
// +UI - Wrapper - Extends
|
||||
// ====================
|
||||
// used for page/view-level wrappers (for centering/grids)
|
||||
%ui-wrapper {
|
||||
@include clearfix();
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// +UI - Depth Levels - Extends
|
||||
// ====================
|
||||
%ui-depth0 { z-index: 0; }
|
||||
%ui-depth1 { z-index: 10; }
|
||||
%ui-depth2 { z-index: 100; }
|
||||
%ui-depth3 { z-index: 1000; }
|
||||
%ui-depth4 { z-index: 10000; }
|
||||
%ui-depth5 { z-index: 100000; }
|
||||
|
||||
|
||||
// +UI - Clear Children - Extends
|
||||
// ====================
|
||||
// extends - UI - utility - first child clearing
|
||||
%wipe-first-child {
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// extends - UI - utility - last child clearing
|
||||
%wipe-last-child {
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// +Content - No List - Extends
|
||||
// ====================
|
||||
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
|
||||
%cont-no-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-indent: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// +Content - Hidden Image Text - Extend
|
||||
// ====================
|
||||
// image-replacement hidden text
|
||||
%cont-text-hide {
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// +Content - Screenreader Text - Extend
|
||||
// ====================
|
||||
%cont-text-sr {
|
||||
// clip has been deprecated but is still supported
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
position: absolute;
|
||||
margin: -1px;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
// ensure there are spaces in sr text
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
// +Content - Text Wrap - Extend
|
||||
// ====================
|
||||
%cont-text-wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// +Content - Text Truncate - Extend
|
||||
// ====================
|
||||
%cont-truncated {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// * +Icon - Font-Awesome - Extend
|
||||
// ====================
|
||||
%use-font-awesome {
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
speak: none;
|
||||
}
|
||||
|
||||
%btn-no-style {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// * +Icon - SSO icon images
|
||||
// ====================
|
||||
|
||||
%sso-icon {
|
||||
.icon-image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 1.4em;
|
||||
max-width: 1.4em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
95
cms/static/sass/bootstrap/_navigation.scss
Normal file
95
cms/static/sass/bootstrap/_navigation.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
// Local overrides for bootstrap navigation bar theming
|
||||
.navigation-container {
|
||||
border-bottom: 2px solid $brand-primary;
|
||||
text-decoration: none;
|
||||
background-color: $header-bg;
|
||||
|
||||
&.slim {
|
||||
border-bottom: 1px solid $inverse-color;
|
||||
box-shadow: 0 1px 5px 0 $black-t0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 auto;
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
|
||||
.logo.slim a {
|
||||
height: $baseline*3/2;
|
||||
margin-top: $baseline/5;
|
||||
}
|
||||
|
||||
.course-header {
|
||||
font-size: $font-size-lg;
|
||||
margin: $baseline/2 $baseline/2 0 0;
|
||||
|
||||
.provider {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 $baseline 0 0;
|
||||
font-weight: $font-weight-normal;
|
||||
font-family: $font-family-base;
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
|
||||
.nav-link {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.user-image-frame {
|
||||
max-width: $baseline*2;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Dealing with creating a collapsed menu
|
||||
&.nav-item-open-collapsed-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: map-get($grid-breakpoints,md)) {
|
||||
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
|
||||
display: initial;
|
||||
margin: $baseline/4 $baseline/2;
|
||||
|
||||
a {
|
||||
color: $brand-primary;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $input-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-item-hidden-collapsed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-shopping-cart{
|
||||
padding-top: 0.7rem; // $btn-padding-y-lg once themed
|
||||
}
|
||||
|
||||
.navbar-right .nav-item {
|
||||
@media (min-width: map-get($grid-breakpoints,md)) {
|
||||
.nav-link {
|
||||
text-transform: none;
|
||||
color: $brand-inverse;
|
||||
font-weight: $font-weight-bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown {
|
||||
cursor: pointer;
|
||||
|
||||
.dropdown-item {
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
cms/static/sass/bootstrap/_variables.scss
Normal file
71
cms/static/sass/bootstrap/_variables.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
// Studio - bootstrap utilities - variables
|
||||
// ========================================
|
||||
|
||||
// #Units: Unit 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
|
||||
|
||||
// ----------------------------
|
||||
// #UNITS
|
||||
// ----------------------------
|
||||
$baseline: 20px !default;
|
||||
|
||||
// ----------------------------
|
||||
// #GRID
|
||||
// ----------------------------
|
||||
$studio-max-width: 1180px !default;
|
||||
|
||||
// ----------------------------
|
||||
// #COLORS
|
||||
// ----------------------------
|
||||
|
||||
$studio-gray: palette(grayscale, base) !default;
|
||||
$studio-background-color: palette(grayscale, x-back) !default;
|
||||
$studio-container-background-color: $white !default;
|
||||
$studio-border-color: palette(grayscale, back) !default;
|
||||
$studio-label-color: palette(grayscale, black) !default;
|
||||
$studio-active-color: palette(primary, base) !default;
|
||||
$studio-preview-menu-color: #c8c8c8 !default;
|
||||
$success-color: palette(success, accent) !default;
|
||||
$success-color-hover: palette(success, text) !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-bg: $white !default;
|
||||
$footer-bg: $white !default;
|
||||
|
||||
// ----------------------------
|
||||
// #TYPOGRAPHY
|
||||
// ----------------------------
|
||||
$font-light: 300 !default;
|
||||
$font-regular: 400 !default;
|
||||
$font-semibold: 600 !default;
|
||||
$font-bold: 700 !default;
|
||||
|
||||
// ----------------------------
|
||||
// #ICONS
|
||||
// ----------------------------
|
||||
// Icons
|
||||
$studio-dark-icon-color: $white !default;
|
||||
$studio-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;
|
||||
19
cms/static/sass/bootstrap/studio-main.scss
Normal file
19
cms/static/sass/bootstrap/studio-main.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// -----------------------------
|
||||
// Studio main styles for Bootstrap
|
||||
// -----------------------------
|
||||
|
||||
// Bootstrap theme
|
||||
@import 'bootstrap/theme';
|
||||
@import 'bootstrap/scss/bootstrap';
|
||||
|
||||
// Variables
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'base';
|
||||
|
||||
// Elements
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
@import 'navigation';
|
||||
@import 'layouts';
|
||||
@import 'components';
|
||||
5
cms/static/sass/partials/bootstrap/_theme.scss
Normal file
5
cms/static/sass/partials/bootstrap/_theme.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// Default bootstrap theming
|
||||
|
||||
$body-bg: #f5f5f5 !default;
|
||||
|
||||
@import 'edx-bootstrap/sass/open-edx/theme';
|
||||
@@ -44,7 +44,11 @@ from openedx.core.djangolib.js_utils import (
|
||||
<%static:css group='style-vendor-tinymce-content'/>
|
||||
<%static:css group='style-vendor-tinymce-skin'/>
|
||||
|
||||
<%static:css group='${self.attr.main_css}'/>
|
||||
% if uses_bootstrap:
|
||||
<link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
|
||||
% else:
|
||||
<%static:css group='${self.attr.main_css}'/>
|
||||
% endif
|
||||
|
||||
<%include file="widgets/segment-io.html" />
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<!-- NOTE:
|
||||
|
||||
This file is a static reference template used by the edX design and development teams while
|
||||
building new features. These files are not generally maintained or updated once a feature has
|
||||
been completed. Additionally, these templates are subject to the following:
|
||||
|
||||
* inconsistent markup/UI with current UI
|
||||
* deletion by the edX design or development if not needed
|
||||
* not compliant with internationalization, javascript, or accessibility standards used
|
||||
throughout the rest of the platform
|
||||
|
||||
-->
|
||||
408
cms/templates/ux/reference/bootstrap/test.html
Normal file
408
cms/templates/ux/reference/bootstrap/test.html
Normal file
@@ -0,0 +1,408 @@
|
||||
## Override the default styles_version to use Bootstrap
|
||||
<%! main_css = "css/bootstrap/studio-main.css" %>
|
||||
|
||||
<%page expression_filter="h"/>
|
||||
|
||||
<%!
|
||||
from openedx.core.djangoapps.util.user_messages import (
|
||||
register_error_message,
|
||||
register_info_message,
|
||||
register_success_message,
|
||||
register_warning_message,
|
||||
)
|
||||
%>
|
||||
|
||||
<%
|
||||
register_info_message(request, _('This is a test message'))
|
||||
%>
|
||||
|
||||
<%inherit file="/base.html" />
|
||||
<%block name="title">Bootstrap Test Page</%block>
|
||||
<%block name="bodyclass">bootstrap-test</%block>
|
||||
|
||||
<%block name="content">
|
||||
<div class="wrapper-mast wrapper">
|
||||
<header class="mast has-actions has-subtitle">
|
||||
<h1 class="page-header">
|
||||
<small class="subtitle">Content</small>
|
||||
<span class="sr">> </span>Course Outline
|
||||
</h1>
|
||||
|
||||
<nav class="nav-actions" aria-label="Page Actions">
|
||||
<h3 class="sr">Page Actions</h3>
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="button button-new" data-category="chapter" data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-default-name="Section" title="Click to add a new section">
|
||||
<span class="icon fa fa-plus" aria-hidden="true"></span>New Section
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/course/course-v1:AndyA+AA101+1/search_reindex" class="button button-reindex" data-category="reindex" title="Reindex current course">
|
||||
<span class="icon-arrow-right" aria-hidden="true"></span>Reindex
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
|
||||
<span class="collapse-all"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">Collapse All Sections</span></span>
|
||||
<span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <span class="label">Expand All Sections</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="//localhost:8000/courses/course-v1:AndyA+AA101+1/jump_to/block-v1:AndyA+AA101+1+type@course+block@course" rel="external" class="button view-button view-live-button" title="Click to open the courseware in the LMS in a new tab" target="_blank">View Live</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-content wrapper">
|
||||
<section class="content">
|
||||
<article class="content-primary" role="main">
|
||||
<div class="course-status">
|
||||
<div class="status-release">
|
||||
<h2 class="status-release-label">Course Start Date:</h2>
|
||||
<p class="status-release-value">Jan 01, 2015 at 00:00 UTC</p>
|
||||
|
||||
<ul class="status-actions">
|
||||
<li class="action-item action-edit">
|
||||
<a href="/settings/details/course-v1:AndyA+AA101+1" class="edit-button action-button" data-tooltip="Edit Start Date">
|
||||
<span class="icon fa fa-pencil" aria-hidden="true"></span>
|
||||
<span class="action-button-text sr">Edit Start Date</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-dnd" lang="en">
|
||||
|
||||
<h2 class="sr">Course Outline</h2>
|
||||
<article class="outline outline-complex outline-course" data-locator="block-v1:AndyA+AA101+1+type@course+block@course" data-course-key="course-v1:AndyA+AA101+1">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="outline-content course-content">
|
||||
<ol class="list-sections is-sortable">
|
||||
<li class="ui-splint ui-splint-indicator">
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
</li>
|
||||
<li class="outline-item outline-section is-live is-draggable is-collapsible " data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-locator="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" style="position: relative;">
|
||||
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
|
||||
<div class="section-header">
|
||||
|
||||
<h3 class="section-header-details expand-collapse collapse ui-toggle-expansion" title="Collapse/Expand this section">
|
||||
<span class="icon fa fa-caret-down" aria-hidden="true"></span>
|
||||
|
||||
|
||||
<span class="wrapper-section-title wrapper-xblock-field incontext-editor is-editable" data-field="display_name" data-field-display-name="Display Name">
|
||||
<span class="section-title item-title xblock-field-value incontext-editor-value">Section</span>
|
||||
|
||||
<div class="incontext-editor-action-wrapper">
|
||||
<a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="Edit the name">
|
||||
<span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> Edit</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="xblock-string-field-editor incontext-editor-form">
|
||||
<form>
|
||||
|
||||
<label><span class="sr">Edit Display Name (required)</span>
|
||||
<input type="text" value="Section" class="xblock-field-input incontext-editor-input" data-metadata-name="display_name" title="Edit the name">
|
||||
</label>
|
||||
<button class="sr action action-primary" name="submit" type="submit">Save</button>
|
||||
<button class="sr action action-secondary" name="cancel" type="button">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
|
||||
</h3>
|
||||
|
||||
<div class="section-header-actions">
|
||||
<ul class="actions-list">
|
||||
|
||||
<li class="action-item action-publish">
|
||||
<a href="#" data-tooltip="Publish" class="publish-button action-button">
|
||||
<span class="icon fa fa-upload" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Publish</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-configure">
|
||||
<a href="#" data-tooltip="Configure" class="configure-button action-button">
|
||||
<span class="icon fa fa-gear" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Configure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-duplicate">
|
||||
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
|
||||
<span class="icon fa fa-copy" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Duplicate</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-delete">
|
||||
<a href="#" data-tooltip="Delete" class="delete-button action-button">
|
||||
<span class="icon fa fa-trash-o" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-drag">
|
||||
<span data-tooltip="Drag to reorder" class="drag-handle section-drag-handle action">
|
||||
<span class="sr">Drag to reorder</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-status">
|
||||
|
||||
|
||||
<div class="status-release">
|
||||
<p>
|
||||
<span class="sr status-release-label">Release Status:</span>
|
||||
<span class="status-release-value">
|
||||
|
||||
|
||||
<span class="icon fa fa-check" aria-hidden="true"></span>
|
||||
Released:
|
||||
|
||||
|
||||
Jan 01, 2015 at 00:00 UTC
|
||||
|
||||
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="status-hide-after-due">
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="outline-content section-content">
|
||||
<ol class="list-subsections is-sortable">
|
||||
<li class="ui-splint ui-splint-indicator">
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
</li>
|
||||
<li class="outline-item outline-subsection is-live is-draggable is-collapsible is-collapsed" data-parent="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" data-locator="block-v1:AndyA+AA101+1+type@sequential+block@dc1b2b84c9be4646a404f6425792eb90" style="position: relative;">
|
||||
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
|
||||
<div class="subsection-header">
|
||||
|
||||
<h3 class="subsection-header-details expand-collapse expand ui-toggle-expansion" title="Collapse/Expand this subsection">
|
||||
<span class="icon fa fa-caret-down" aria-hidden="true"></span>
|
||||
|
||||
|
||||
<span class="wrapper-subsection-title wrapper-xblock-field incontext-editor is-editable" data-field="display_name" data-field-display-name="Display Name">
|
||||
<span class="subsection-title item-title xblock-field-value incontext-editor-value">Subsection</span>
|
||||
|
||||
<div class="incontext-editor-action-wrapper">
|
||||
<a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="Edit the name">
|
||||
<span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> Edit</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="xblock-string-field-editor incontext-editor-form">
|
||||
<form>
|
||||
|
||||
<label><span class="sr">Edit Display Name (required)</span>
|
||||
<input type="text" value="Subsection" class="xblock-field-input incontext-editor-input" data-metadata-name="display_name" title="Edit the name">
|
||||
</label>
|
||||
<button class="sr action action-primary" name="submit" type="submit">Save</button>
|
||||
<button class="sr action action-secondary" name="cancel" type="button">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
|
||||
</h3>
|
||||
|
||||
<div class="subsection-header-actions">
|
||||
<ul class="actions-list">
|
||||
|
||||
<li class="action-item action-publish">
|
||||
<a href="#" data-tooltip="Publish" class="publish-button action-button">
|
||||
<span class="icon fa fa-upload" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Publish</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-configure">
|
||||
<a href="#" data-tooltip="Configure" class="configure-button action-button">
|
||||
<span class="icon fa fa-gear" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Configure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-duplicate">
|
||||
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
|
||||
<span class="icon fa fa-copy" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Duplicate</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-delete">
|
||||
<a href="#" data-tooltip="Delete" class="delete-button action-button">
|
||||
<span class="icon fa fa-trash-o" aria-hidden="true"></span>
|
||||
<span class="sr action-button-text">Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="action-item action-drag">
|
||||
<span data-tooltip="Drag to reorder" class="drag-handle subsection-drag-handle action">
|
||||
<span class="sr">Drag to reorder</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subsection-status">
|
||||
|
||||
|
||||
<div class="status-release">
|
||||
<p>
|
||||
<span class="sr status-release-label">Release Status:</span>
|
||||
<span class="status-release-value">
|
||||
|
||||
|
||||
<span class="icon fa fa-check" aria-hidden="true"></span>
|
||||
Released:
|
||||
|
||||
|
||||
Jan 01, 2015 at 00:00 UTC
|
||||
|
||||
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="status-hide-after-due">
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="outline-content subsection-content">
|
||||
<ol class="list-units is-sortable">
|
||||
<li class="ui-splint ui-splint-indicator">
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<div class="add-unit add-item">
|
||||
<a href="#" class="button button-new" data-category="vertical" data-parent="block-v1:AndyA+AA101+1+type@sequential+block@dc1b2b84c9be4646a404f6425792eb90" data-default-name="Unit" title="Click to add a new Unit">
|
||||
<span class="icon fa fa-plus" aria-hidden="true"></span>New Unit
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
</li></ol>
|
||||
|
||||
|
||||
|
||||
<div class="add-subsection add-item">
|
||||
<a href="#" class="button button-new" data-category="sequential" data-parent="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" data-default-name="Subsection" title="Click to add a new Subsection">
|
||||
<span class="icon fa fa-plus" aria-hidden="true"></span>New Subsection
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
|
||||
</li></ol>
|
||||
|
||||
|
||||
|
||||
<div class="add-section add-item">
|
||||
<a href="#" class="button button-new" data-category="chapter" data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-default-name="Section" title="Click to add a new Section">
|
||||
<span class="icon fa fa-plus" aria-hidden="true"></span>New Section
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
</div>
|
||||
<div class="ui-loading is-hidden">
|
||||
<p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
|
||||
</div>
|
||||
</article>
|
||||
<aside class="content-supplementary" role="complementary">
|
||||
<div class="bit">
|
||||
<h3 class="title-3">Creating your course organization</h3>
|
||||
<p>You add sections, subsections, and units directly in the outline.</p>
|
||||
<p>Create a section, then add subsections and units. Open a unit to add course components.</p>
|
||||
</div>
|
||||
<div class="bit">
|
||||
<h3 class="title-3">Reorganizing your course</h3>
|
||||
<p>Drag sections, subsections, and units to new locations in the outline.</p>
|
||||
<div class="external-help">
|
||||
<a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_outline.html" target="_blank" class="button external-help-button">Learn more about the course outline</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bit">
|
||||
<h3 class="title-3">Setting release dates and grading policies</h3>
|
||||
<p>Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.</p>
|
||||
<div class="external-help">
|
||||
<a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/grading/index.html" target="_blank" class="button external-help-button">Learn more about grading policy settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bit">
|
||||
<h3 class="title-3">Changing the content learners see</h3>
|
||||
<p>To publish draft content, select the Publish icon for a section, subsection, or unit.</p>
|
||||
<p>To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate <strong>Hide</strong> option. Grades for hidden sections, subsections, and units are not included in grade calculations.</p>
|
||||
<p>To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select <strong>Hide content after due date</strong>. Grades for the subsection remain included in grade calculations.</p>
|
||||
<div class="external-help">
|
||||
<a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/controlling_content_visibility.html" target="_blank" class="button external-help-button">Learn more about content visibility settings</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</%block>
|
||||
@@ -1,35 +1,24 @@
|
||||
## Override the default styles_version to the Pattern Library version (version 2)
|
||||
<%! main_css = "style-main-v2" %>
|
||||
## Override the default styles_version to use Bootstrap
|
||||
<%! main_css = "css/bootstrap/studio-main.css" %>
|
||||
|
||||
<%page expression_filter="h"/>
|
||||
|
||||
<%inherit file="../../base.html" />
|
||||
|
||||
<%block name="view_notes">
|
||||
<%include file="_note-usage.html" />
|
||||
</%block>
|
||||
|
||||
<%block name="title">UX Style Reference</%block>
|
||||
<%block name="bodyclass">is-signedin course uploads view-container</%block>
|
||||
<%block name="bodyclass">ux-reference</%block>
|
||||
|
||||
<%block name="content">
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<div class="main-column">
|
||||
<article class="window unit-body">
|
||||
<h1>UX Style Reference</h1>
|
||||
<h2>UX Style Reference</h2>
|
||||
|
||||
<ol class="components">
|
||||
<li class="component">
|
||||
<div class="wrapper wrapper-component-action-header">
|
||||
<h2>Page Types</h2>
|
||||
</div>
|
||||
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
|
||||
<ul>
|
||||
<li><a href="pattern-library-test.html">Pattern Library test page</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<a href="bootstrap/test.html">Bootstrap Test Page</a>
|
||||
<a href="pattern-library/test.html">Pattern Library Test Page</a>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
## mako
|
||||
|
||||
## Override the default styles_version to use Bootstrap
|
||||
<%! main_css = "css/bootstrap/lms-main.css" %>
|
||||
|
||||
<%page expression_filter="h"/>
|
||||
<%inherit file="/main.html" />
|
||||
|
||||
|
||||
@@ -28,16 +28,27 @@ def show_reference_template(request, template):
|
||||
e.g. /template/ux/reference/index.html?name=Foo
|
||||
"""
|
||||
try:
|
||||
uses_bootstrap = u'/bootstrap/' in request.path
|
||||
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
|
||||
context = {
|
||||
"disable_courseware_js": not is_v1,
|
||||
"uses_pattern_library": uses_pattern_library,
|
||||
"uses_bootstrap": uses_bootstrap,
|
||||
'request': request,
|
||||
'disable_courseware_js': not is_v1,
|
||||
'uses_pattern_library': uses_pattern_library,
|
||||
'uses_bootstrap': uses_bootstrap,
|
||||
}
|
||||
context.update(request.GET.dict())
|
||||
|
||||
# Support dynamic rendering of messages
|
||||
if request.GET.get('alert'):
|
||||
register_info_message(request, request.GET.get('alert'))
|
||||
if request.GET.get('success'):
|
||||
register_success_message(request, request.GET.get('success'))
|
||||
if request.GET.get('warning'):
|
||||
register_warning_message(request, request.GET.get('warning'))
|
||||
if request.GET.get('error'):
|
||||
register_error_message(request, request.GET.get('error'))
|
||||
|
||||
# Add some messages to the course skeleton pages
|
||||
if u'course-skeleton.html' in request.path:
|
||||
register_info_message(request, _('This is a test message'))
|
||||
@@ -47,4 +58,4 @@ def show_reference_template(request, template):
|
||||
|
||||
return render_to_response(template, context)
|
||||
except TopLevelLookupException:
|
||||
return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
|
||||
return HttpResponseNotFound('Missing template {template}'.format(template=template))
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"backbone.paginator": "~2.0.3",
|
||||
"coffee-loader": "^0.7.3",
|
||||
"coffee-script": "1.6.1",
|
||||
"edx-bootstrap": "~0.1.6",
|
||||
"edx-bootstrap": "~0.1.7",
|
||||
"edx-pattern-library": "0.18.1",
|
||||
"edx-ui-toolkit": "1.5.2",
|
||||
"exports-loader": "^0.6.4",
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
// Override theming for edx.org bootstrap
|
||||
|
||||
$body-bg: #f5f5f5 !default;
|
||||
|
||||
@import 'edx-bootstrap/sass/edx/theme';
|
||||
@@ -0,0 +1,5 @@
|
||||
// Override theming for edx.org bootstrap
|
||||
|
||||
$body-bg: #f5f5f5 !default;
|
||||
|
||||
@import 'edx-bootstrap/sass/edx/theme';
|
||||
BIN
themes/red-theme/cms/static/images/favicon.ico
Normal file
BIN
themes/red-theme/cms/static/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
themes/red-theme/cms/static/images/studio-logo.png
Normal file
BIN
themes/red-theme/cms/static/images/studio-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,13 @@
|
||||
// Sample red theme to demonstrate SASS overrides
|
||||
|
||||
// Theme colors
|
||||
//
|
||||
// Note: define colors needed by your theme first
|
||||
$red: #d9534f !default;
|
||||
$brand-primary: $red;
|
||||
|
||||
// Theme fonts
|
||||
$font-family-sans-serif: cursive;
|
||||
|
||||
// Initialize the Open edX bootstrap theme
|
||||
@import 'edx-bootstrap/sass/open-edx/theme';
|
||||
14
themes/red-theme/cms/static/sass/partials/cms/base/_variables.scss
Executable file
14
themes/red-theme/cms/static/sass/partials/cms/base/_variables.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
// Color overrides
|
||||
$white: rgb(255,255,255);
|
||||
$red: #d9534f !default;
|
||||
|
||||
$footer-bg: $white;
|
||||
$header-bg: $white;
|
||||
$header-border-color: $red;
|
||||
|
||||
$base-font-color: $red;
|
||||
$link-color: $red;
|
||||
$lms-active-color: $red;
|
||||
$lms-label-color: $red;
|
||||
|
||||
@import 'cms/static/sass/partials/cms/base/variables';
|
||||
Reference in New Issue
Block a user