Make the course content page responsive
LEARNER-2754
This commit is contained in:
Andy Armstrong
@@ -1,4 +1,5 @@
|
||||
common/lib/xmodule/xmodule/css
|
||||
common/static/sass/bourbon
|
||||
common/static/xmodule/modules/css
|
||||
common/test/test-theme
|
||||
lms/static/sass/vendor
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
// * +Layout - Certificates
|
||||
// ====================
|
||||
.view-certificates {
|
||||
.content-primary, .content-supplementary {
|
||||
.content-primary,
|
||||
.content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
@@ -66,10 +67,11 @@
|
||||
width: flex-grid(3, 12);
|
||||
}
|
||||
|
||||
.certificate-info-section{
|
||||
.certificate-info-section {
|
||||
overflow: auto;
|
||||
|
||||
.course-title-section, .course-number-section{
|
||||
.course-title-section,
|
||||
.course-number-section {
|
||||
min-width: 47%;
|
||||
|
||||
@include margin-right(2%);
|
||||
@@ -150,7 +152,7 @@
|
||||
|
||||
.collection-details {
|
||||
.actions {
|
||||
@include transition(opacity .15s .25s ease-in-out);
|
||||
@include transition(opacity 0.15s 0.25s ease-in-out);
|
||||
|
||||
position: absolute;
|
||||
top: $baseline;
|
||||
@@ -285,7 +287,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
label, input, textarea {
|
||||
label,
|
||||
input,
|
||||
textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -306,7 +310,8 @@
|
||||
}
|
||||
|
||||
//this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
@@ -491,7 +496,8 @@
|
||||
}
|
||||
|
||||
.view-certificates .certificates {
|
||||
.certificate-details, .certificate-edit {
|
||||
.certificate-details,
|
||||
.certificate-edit {
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
@@ -563,7 +569,8 @@
|
||||
// ====================
|
||||
// TO-DO: refactor to use collection styling where possible.
|
||||
.view-certificates .certificates {
|
||||
.signatory-details, .signatory-edit {
|
||||
.signatory-details,
|
||||
.signatory-edit {
|
||||
@extend %ui-window;
|
||||
|
||||
border-color: $gray-l4;
|
||||
@@ -595,7 +602,8 @@
|
||||
}
|
||||
|
||||
.signatory-panel-edit {
|
||||
float:right;
|
||||
@include float(right);
|
||||
|
||||
padding: 8px;
|
||||
position: inherit;
|
||||
}
|
||||
@@ -604,9 +612,11 @@
|
||||
.signatory-edit {
|
||||
|
||||
// TO-DO: remove icon styling, use save / cancel pattern for Studio
|
||||
.signatory-panel-close, .signatory-panel-save, .signatory-panel-delete {
|
||||
float:right;
|
||||
padding:10px;
|
||||
.signatory-panel-close,
|
||||
.signatory-panel-save,
|
||||
.signatory-panel-delete {
|
||||
float: right;
|
||||
padding: $baseline/2;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@@ -637,7 +647,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
label, input, textarea {
|
||||
label,
|
||||
input,
|
||||
textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -658,7 +670,8 @@
|
||||
}
|
||||
|
||||
//TO-DO: this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
@@ -705,7 +718,7 @@
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
.message-error{
|
||||
.message-error {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -427,7 +427,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-background-alternate;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,8 @@
|
||||
display: inline-block;
|
||||
color: $black;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
|
||||
@@ -48,7 +48,8 @@
|
||||
}
|
||||
|
||||
// STATE: hover/focus
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.incontext-editor-open-action {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -12,12 +12,12 @@ $annotatable--body-font-size: em(14);
|
||||
}
|
||||
|
||||
.annotatable-header {
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.annotatable-section {
|
||||
position: relative;
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid $annotatable--border-color;
|
||||
border-radius: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
@@ -55,8 +55,8 @@ $annotatable--body-font-size: em(14);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 2px 1em 2px 0;
|
||||
&.expanded:after { content: " \2191" }
|
||||
&.collapsed:after { content: " \2193" }
|
||||
&.expanded::after { content: " \2191"; }
|
||||
&.collapsed::after { content: " \2193"; }
|
||||
}
|
||||
|
||||
.annotatable-span {
|
||||
@@ -75,9 +75,9 @@ $annotatable--body-font-size: em(14);
|
||||
(purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
|
||||
|
||||
$highlight_index: $highlight_index + 1;
|
||||
$marker: nth($highlight,1);
|
||||
$color: nth($highlight,2);
|
||||
$selected_color: nth($highlight,3);
|
||||
$marker: nth($highlight, 1);
|
||||
$color: nth($highlight, 2);
|
||||
$selected_color: nth($highlight, 3);
|
||||
|
||||
@if $highlight_index == 1 {
|
||||
&.highlight {
|
||||
@@ -177,7 +177,7 @@ $annotatable--body-font-size: em(14);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
|
||||
// +Variables - Capa
|
||||
// ====================
|
||||
$annotation-yellow: rgba(255, 255,10, 0.3);
|
||||
$color-copy-tip: rgb(100,100,100);
|
||||
$annotation-yellow: rgba(255, 255, 10, 0.3);
|
||||
$color-copy-tip: rgb(100, 100, 100);
|
||||
|
||||
// FontAwesome Icon code
|
||||
// ====================
|
||||
@@ -45,9 +45,9 @@ $asterisk-icon: '\f069'; // .fa-asterisk
|
||||
|
||||
// +Mixins - Status Icon - Capa
|
||||
// ====================
|
||||
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
|
||||
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
|
||||
.status-icon {
|
||||
&:after {
|
||||
&::after {
|
||||
@extend %use-font-awesome;
|
||||
|
||||
color: $color;
|
||||
@@ -219,7 +219,7 @@ div.problem {
|
||||
padding: ($baseline/2);
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@include margin-left($baseline*0.75);
|
||||
}
|
||||
|
||||
@@ -365,7 +365,7 @@ div.problem {
|
||||
div.problem {
|
||||
ol.enumerate {
|
||||
li {
|
||||
&:before {
|
||||
&::before {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
@@ -456,7 +456,7 @@ div.problem {
|
||||
margin-top: ($baseline / 2);
|
||||
margin-bottom: 0;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline;
|
||||
@@ -465,7 +465,7 @@ div.problem {
|
||||
}
|
||||
|
||||
&:empty {
|
||||
&:before {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -845,7 +845,7 @@ div.problem {
|
||||
|
||||
.status {
|
||||
.status-icon {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
@@ -871,11 +871,11 @@ div.problem {
|
||||
.indicator-container {
|
||||
display: inline-block;
|
||||
|
||||
.status.correct:after,
|
||||
.status.partially-correct:after,
|
||||
.status.incorrect:after,
|
||||
.status.submitted:after,
|
||||
.status.unanswered:after {
|
||||
.status.correct::after,
|
||||
.status.partially-correct::after,
|
||||
.status.incorrect::after,
|
||||
.status.submitted::after,
|
||||
.status.unanswered::after {
|
||||
@include margin-left(0);
|
||||
}
|
||||
}
|
||||
@@ -1485,7 +1485,7 @@ div.problem {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a.annotation-return:after { content: " \2191" }
|
||||
a.annotation-return::after { content: " \2191" }
|
||||
|
||||
.block, ul.tags {
|
||||
margin: .5em 0;
|
||||
@@ -1557,7 +1557,7 @@ div.problem {
|
||||
|
||||
pre { background-color: $gray-l3; color: $black; }
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
@@ -1603,7 +1603,7 @@ div.problem {
|
||||
}
|
||||
|
||||
label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
|
||||
&:after {
|
||||
&::after {
|
||||
@include margin-left($baseline*0.75);
|
||||
|
||||
content: url('#{$static-path}/images/correct-icon.png');
|
||||
|
||||
@@ -19,7 +19,10 @@ h2 {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include margin(0, 0, ($baseline/2), 0);
|
||||
|
||||
font-weight: 600;
|
||||
@@ -34,7 +37,7 @@ h4 {
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: .83em;
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@@ -48,7 +51,8 @@ p {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
em, i {
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
|
||||
span {
|
||||
@@ -56,7 +60,8 @@ em, i {
|
||||
}
|
||||
}
|
||||
|
||||
strong, b {
|
||||
strong,
|
||||
b {
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
@@ -64,7 +69,9 @@ strong, b {
|
||||
}
|
||||
}
|
||||
|
||||
p + p, ul + p, ol + p {
|
||||
p + p,
|
||||
ul + p,
|
||||
ol + p {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
|
||||
@@ -72,7 +79,8 @@ blockquote {
|
||||
margin: 1em ($baseline*2);
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol,
|
||||
ul {
|
||||
// Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
|
||||
@include bi-app-compact(padding, 0, 0, 0, 1em);
|
||||
|
||||
@@ -93,7 +101,11 @@ ul {
|
||||
}
|
||||
|
||||
a {
|
||||
&:link, &:visited, &:hover, &:active, &:focus {
|
||||
&:link,
|
||||
&:visited,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
@@ -124,7 +136,8 @@ table {
|
||||
border-collapse: collapse;
|
||||
font-size: 16px;
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
margin: $baseline 0;
|
||||
padding: ($baseline/2);
|
||||
border: 1px solid $gray-l3;
|
||||
@@ -162,37 +175,37 @@ th {
|
||||
display: block;
|
||||
padding: ($baseline/4) 7px;
|
||||
border-radius: 5px;
|
||||
opacity: .9;
|
||||
opacity: 0.9;
|
||||
background: $white;
|
||||
color: $black;
|
||||
border: 2px solid $black;
|
||||
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image-link {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
|
||||
.action-fullscreen {
|
||||
display: none;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
||||
&:hover .action-fullscreen {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image-modal {
|
||||
@extend %ui-fake-link;
|
||||
@extend %ui-depth5;
|
||||
@@ -204,7 +217,7 @@ th {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
|
||||
.image-content {
|
||||
position: relative;
|
||||
top: 2.5%;
|
||||
@@ -213,10 +226,10 @@ th {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -226,12 +239,12 @@ th {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-close {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.image-controls {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
@@ -239,16 +252,16 @@ th {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
.image-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
.modal-ui-icon {
|
||||
position: relative;
|
||||
|
||||
|
||||
&.action-zoom-in {
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
@@ -265,17 +278,17 @@ th {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.image-is-fit-to-screen {
|
||||
display: block;
|
||||
|
||||
|
||||
// !important used here to override jQuery.
|
||||
.image-content .image-wrapper {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
|
||||
img {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
@@ -285,7 +298,7 @@ th {
|
||||
|
||||
&.image-is-zoomed {
|
||||
display: block;
|
||||
|
||||
|
||||
.image-content .image-wrapper {
|
||||
img {
|
||||
max-width: none;
|
||||
|
||||
@@ -179,7 +179,7 @@ div.poll_question {
|
||||
|
||||
.percent {
|
||||
background-color: gray;
|
||||
width: 0px;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
|
||||
&.short { }
|
||||
@@ -202,16 +202,16 @@ div.poll_question {
|
||||
}
|
||||
|
||||
.poll_answer.answered {
|
||||
-webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
|
||||
-webkit-box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
|
||||
background-color: rgb(29, 157, 217);
|
||||
background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176));
|
||||
border-bottom-color: rgb(13, 114, 162);
|
||||
border-left-color: rgb(13, 114, 162);
|
||||
border-right-color: rgb(13, 114, 162);
|
||||
border-top-color: rgb(13, 114, 162);
|
||||
box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
|
||||
box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
|
||||
color: rgb(255, 255, 255);
|
||||
text-shadow: rgb(7, 103, 148) 0px 1px 0px;
|
||||
text-shadow: rgb(7, 103, 148) 0 1px 0;
|
||||
}
|
||||
|
||||
.button.reset-button {
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
background-color: $white;
|
||||
overflow: hidden;
|
||||
|
||||
@include transition(width .3s linear 0s);
|
||||
@include transition(width 0.3s linear 0s);
|
||||
|
||||
&.shown {
|
||||
width: 20%;
|
||||
@@ -108,7 +108,7 @@
|
||||
|
||||
.problem-editor {
|
||||
// adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
|
||||
.markdown-box+.CodeMirror {
|
||||
.markdown-box + .CodeMirror {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,8 @@ $seq-nav-height: 44px;
|
||||
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@@ -32,14 +33,15 @@ $seq-nav-height: 44px;
|
||||
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%ui-clear-button {
|
||||
%ui-clear-button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: center 14px;
|
||||
@@ -60,16 +62,13 @@ $seq-nav-height: 44px;
|
||||
.sequence-nav {
|
||||
@extend .topbar;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
margin: 0 auto $baseline;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
z-index: 0;
|
||||
height: $seq-nav-height;
|
||||
display: flex;
|
||||
|
||||
.sequence-nav-button {
|
||||
max-width: 200px;
|
||||
}
|
||||
justify-content: center;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
@@ -81,6 +80,11 @@ $seq-nav-height: 44px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
@@ -88,7 +92,7 @@ $seq-nav-height: 44px;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
min-width: 20px;
|
||||
min-width: 40px;
|
||||
flex-grow: 1;
|
||||
border-color: $seq-nav-border-color;
|
||||
border-width: 1px;
|
||||
@@ -127,28 +131,28 @@ $seq-nav-height: 44px;
|
||||
|
||||
//video
|
||||
&.seq_video {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f008"; // .fa-film
|
||||
}
|
||||
}
|
||||
|
||||
//other
|
||||
&.seq_other {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f02d"; // .fa-book
|
||||
}
|
||||
}
|
||||
|
||||
//vertical
|
||||
&.seq_vertical {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f00b"; // .fa-tasks
|
||||
}
|
||||
}
|
||||
|
||||
//problems
|
||||
&.seq_problem {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f044"; // .fa-pencil-square-o
|
||||
}
|
||||
}
|
||||
@@ -207,38 +211,60 @@ $seq-nav-height: 44px;
|
||||
|
||||
display: block;
|
||||
top: 0;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
height: 100%;
|
||||
text-shadow: none; // overrides default button text-shadow
|
||||
background: none; // overrides default button gradient
|
||||
background-color: white;
|
||||
background-color: theme-color("inverse");
|
||||
border-color: $seq-nav-border-color;
|
||||
box-shadow: none;
|
||||
min-width: 120px;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
padding: 0 $baseline;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
|
||||
span:not(:last-child) {
|
||||
@include padding-right($baseline / 2);
|
||||
@include media-breakpoint-up(md) {
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span:not(:last-child) {
|
||||
@include padding-right($baseline / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.sequence-nav-button-label {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-previous {
|
||||
@include left(0);
|
||||
@include border-top-left-radius(3px);
|
||||
@include border-top-right-radius(0);
|
||||
@include border-bottom-right-radius(0);
|
||||
@include border-bottom-left-radius(3px);
|
||||
order: -999;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include left(0);
|
||||
@include border-top-left-radius(3px);
|
||||
@include border-top-right-radius(0);
|
||||
@include border-bottom-right-radius(0);
|
||||
@include border-bottom-left-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-next {
|
||||
@include right(0);
|
||||
@include border-top-left-radius(0);
|
||||
@include border-top-right-radius(3px);
|
||||
@include border-bottom-right-radius(3px);
|
||||
@include border-bottom-left-radius(0);
|
||||
order: 999;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include right(0);
|
||||
@include border-top-left-radius(0);
|
||||
@include border-top-right-radius(3px);
|
||||
@include border-bottom-right-radius(3px);
|
||||
@include border-bottom-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@@ -250,7 +276,7 @@ $seq-nav-height: 44px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.sequence-bottom {
|
||||
.sequence-bottom {
|
||||
position: relative;
|
||||
height: 45px;
|
||||
margin: lh(2) auto;
|
||||
@@ -259,6 +285,9 @@ nav.sequence-bottom {
|
||||
|
||||
.sequence-nav-button {
|
||||
position: relative;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:last-of-type {
|
||||
@include border-left(none);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.editor{
|
||||
.editor {
|
||||
@include clearfix();
|
||||
|
||||
.CodeMirror {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings)
|
||||
|
||||
|
||||
.tabs-wrapper{
|
||||
.tabs-wrapper {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
a.tab {
|
||||
@include font-size(14);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
border: 1px solid $blue-d1;
|
||||
border-radius: 3px;
|
||||
@@ -83,7 +83,8 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow;
|
||||
background-image: linear-gradient(#009fe6, #009fe6) !important;
|
||||
}
|
||||
@@ -106,7 +107,7 @@
|
||||
.comp-subtitles-import-list {
|
||||
> li {
|
||||
display: block;
|
||||
margin: $baseline/2 0px $baseline/2 0;
|
||||
margin: $baseline/2 0;
|
||||
}
|
||||
|
||||
.blue-button {
|
||||
@@ -118,8 +119,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.component-tab {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$a11y--gray: rgb(127, 127, 127);
|
||||
$a11y--blue: rgb(0, 159, 230);
|
||||
$a11y--gray-d1: shade($gray,20%);
|
||||
$a11y--gray-l2: tint($gray,40%);
|
||||
$a11y--gray-l3: tint($gray,60%);
|
||||
$a11y--blue-s1: saturate($blue,15%);
|
||||
$a11y--gray-d1: shade($gray, 20%);
|
||||
$a11y--gray-l2: tint($gray, 40%);
|
||||
$a11y--gray-l3: tint($gray, 60%);
|
||||
$a11y--blue-s1: saturate($blue, 15%);
|
||||
|
||||
%use-font-awesome {
|
||||
font-family: FontAwesome;
|
||||
@@ -50,12 +50,13 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
font-size: 14px;
|
||||
line-height: 23px;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $a11y--gray-d1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
&.active {
|
||||
a {
|
||||
color: $a11y--blue;
|
||||
}
|
||||
@@ -84,11 +85,10 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
background-color: $action-primary-active-bg;
|
||||
color: $very-light-text;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
color: $very-light-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> a {
|
||||
@@ -106,7 +106,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@extend %use-font-awesome;
|
||||
|
||||
content: "\f0d7";
|
||||
@@ -137,7 +137,8 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
}
|
||||
|
||||
|
||||
.contextmenu, .submenu {
|
||||
.contextmenu,
|
||||
.submenu {
|
||||
@extend %ui-depth5;
|
||||
|
||||
border: 1px solid #333;
|
||||
@@ -157,7 +158,8 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item, .submenu-item {
|
||||
.menu-item,
|
||||
.submenu-item {
|
||||
border-top: 1px solid $gray-l3;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
outline: none;
|
||||
@@ -184,7 +186,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
position: relative;
|
||||
padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '\25B6';
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
|
||||
@@ -57,7 +57,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.video-player {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
@@ -75,16 +75,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.focus_grabber {
|
||||
position: relative;
|
||||
display: inline;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.downloads-heading {
|
||||
margin: 1em 0 0 0;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.wrapper-downloads {
|
||||
display: flex;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hd {
|
||||
margin: 0;
|
||||
@@ -154,8 +156,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
color: theme-color("primary");
|
||||
}
|
||||
|
||||
.btn-play:after {
|
||||
background: $white;
|
||||
.btn-play::after {
|
||||
background: theme-color("inverse");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,7 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
padding: 30px;
|
||||
border-radius: 25%;
|
||||
|
||||
&:after{
|
||||
&::after {
|
||||
@include animation(rotateCW 3s infinite linear);
|
||||
|
||||
content: '';
|
||||
@@ -200,7 +202,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
font-size: 4em;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
background: $white;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
@@ -229,17 +231,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
max-height: ($baseline * 3);
|
||||
border-radius: ($baseline / 5);
|
||||
padding: 8px ($baseline / 2) 8px ($baseline * 1.5);
|
||||
background: rgba(0, 0, 0, .75);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: $yellow;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
|
||||
@include left($baseline);
|
||||
|
||||
margin-top: -.6em;
|
||||
margin-top: -0.6em;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f142";
|
||||
color: $white;
|
||||
@@ -248,11 +250,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
&:hover,
|
||||
&.is-dragging {
|
||||
background: rgba(0, 0, 0, 1.0);
|
||||
background: rgba(0, 0, 0, 1);
|
||||
cursor: move;
|
||||
|
||||
&:before {
|
||||
opacity: 1.0;
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -269,7 +271,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
}
|
||||
|
||||
.video-error, .video-hls-error {
|
||||
.video-error,
|
||||
.video-hls-error {
|
||||
padding: ($baseline / 5);
|
||||
background: black;
|
||||
color: white !important; // the pattern library headings shim is more scoped
|
||||
@@ -355,7 +358,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.slider {
|
||||
@include clearfix();
|
||||
@include transform-origin(bottom left);
|
||||
@include transition(height .7s ease-in-out 0s);
|
||||
@include transition(height 0.7s ease-in-out 0s);
|
||||
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
@@ -386,7 +389,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
@extend %ui-fake-link;
|
||||
|
||||
@include transform-origin(bottom left);
|
||||
@include transition(all .7s ease-in-out 0s);
|
||||
@include transition(all 0.7s ease-in-out 0s);
|
||||
|
||||
box-sizing: border-box;
|
||||
top: -1px;
|
||||
@@ -436,13 +439,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
@extend %t-strong;
|
||||
@extend %t-title7;
|
||||
|
||||
@include padding-left(lh(.75));
|
||||
@include padding-left(lh(0.75));
|
||||
|
||||
display: inline-block;
|
||||
color: rgb(207, 216, 220); // UXPL grayscale-cool light
|
||||
-webkit-font-smoothing: antialiased;;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
@media (max-width: 1120px) {
|
||||
@include padding-left(lh(0.5));
|
||||
}
|
||||
}
|
||||
@@ -801,7 +804,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
&.closed {
|
||||
.video-wrapper {
|
||||
width: flex-grid(9,9);
|
||||
width: flex-grid(9, 9);
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
@@ -846,7 +849,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
&.video-fullscreen {
|
||||
@extend %ui-depth4;
|
||||
|
||||
background: rgba(#000, .95);
|
||||
background: rgba(#000, 0.95);
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
@@ -899,7 +902,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
object,
|
||||
iframe,
|
||||
video{
|
||||
video {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
@@ -974,7 +977,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
background: $black-t2;
|
||||
box-shadow: none;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
// the button class, ties to functionality, also uses an icon font
|
||||
// we're overriding it here so we can use our image instead
|
||||
display: none;
|
||||
|
||||
@@ -141,7 +141,8 @@
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4);
|
||||
|
||||
&.disabled, &.is-disabled {
|
||||
&.disabled,
|
||||
&.is-disabled {
|
||||
border: 1px solid $gray-l1 !important;
|
||||
border-radius: 3px !important;
|
||||
background: $gray-l1 !important;
|
||||
@@ -149,12 +150,15 @@
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,14 +28,14 @@
|
||||
|
||||
// +Font Sizing - Mixin
|
||||
// ====================
|
||||
@mixin font-size($sizeValue: 16){
|
||||
@mixin font-size($sizeValue: 16) {
|
||||
font-size: $sizeValue + px;
|
||||
font-size: ($sizeValue/10) + rem;
|
||||
}
|
||||
|
||||
// +Line Height - Mixin
|
||||
// ====================
|
||||
@mixin line-height($fontSize: auto){
|
||||
@mixin line-height($fontSize: auto) {
|
||||
line-height: ($fontSize*1.48) + px;
|
||||
line-height: (($fontSize/10)*1.48) + rem;
|
||||
}
|
||||
@@ -120,14 +120,14 @@
|
||||
}
|
||||
|
||||
// layout placeholders
|
||||
.ui-col-wide {
|
||||
.ui-col-wide {
|
||||
width: flex-grid(9, 12);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.ui-col-narrow {
|
||||
.ui-col-narrow {
|
||||
width: flex-grid(3, 12);
|
||||
|
||||
@include float(left);
|
||||
@@ -145,7 +145,8 @@
|
||||
background: $white;
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: 0 1px 1px $shadow;
|
||||
}
|
||||
}
|
||||
@@ -203,11 +204,9 @@
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
|
||||
&.disabled, &[disabled], &.is-disabled {
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
border: 1px solid $gray-l3;
|
||||
@@ -237,21 +236,26 @@
|
||||
@extend %ui-btn-pill;
|
||||
@extend %t-strong;
|
||||
|
||||
padding:($baseline/2) $baseline;
|
||||
padding: ($baseline/2) $baseline;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-shadow: none;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 2px 1px $shadow;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
box-shadow: inset 1px 1px 2px $shadow-d1;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 1px 1px 1px $shadow-d1;
|
||||
}
|
||||
}
|
||||
@@ -264,14 +268,14 @@
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding:($baseline/2) $baseline;
|
||||
padding: ($baseline/2) $baseline;
|
||||
background: transparent;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
%ui-btn-flat-outline {
|
||||
@include transition(all .15s);
|
||||
@include transition(all 0.15s);
|
||||
|
||||
@extend %t-strong;
|
||||
@extend %t-action4;
|
||||
@@ -283,14 +287,15 @@
|
||||
background-color: theme-color("inverse");
|
||||
color: theme-color("primary");
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid $uxpl-blue-hover-active;
|
||||
background-color: $uxpl-blue-hover-active;
|
||||
color: theme-color("inverse");
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&[disabled="disabled"]{
|
||||
&[disabled="disabled"] {
|
||||
border: 1px solid $gray-l2;
|
||||
background-color: $gray-l4;
|
||||
color: $gray-l2;
|
||||
@@ -300,7 +305,7 @@
|
||||
|
||||
// button with no button shell until hover for understated actions
|
||||
%ui-btn-non {
|
||||
@include transition(all .15s);
|
||||
@include transition(all 0.15s);
|
||||
|
||||
@extend %ui-btn-pill;
|
||||
|
||||
@@ -313,7 +318,8 @@
|
||||
background: none;
|
||||
color: $gray-l1;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $gray-l1;
|
||||
color: $white;
|
||||
}
|
||||
@@ -323,7 +329,8 @@
|
||||
%ui-btn-non-blue {
|
||||
@extend %ui-btn-non;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: theme-color("primary");
|
||||
color: theme-color("inverse");
|
||||
}
|
||||
@@ -363,7 +370,7 @@
|
||||
@extend %ui-well;
|
||||
@extend %t-copy-base;
|
||||
|
||||
opacity: .6;
|
||||
opacity: 0.6;
|
||||
background-color: $white;
|
||||
padding: ($baseline*1.5) $baseline;
|
||||
text-align: center;
|
||||
|
||||
@@ -349,7 +349,7 @@
|
||||
text-decoration: none;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled){
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Add percentage of white to a color
|
||||
@function tint($color, $percent){
|
||||
@function tint($color, $percent) {
|
||||
@return mix(white, $color, $percent);
|
||||
}
|
||||
|
||||
// Add percentage of black to a color
|
||||
@function shade($color, $percent){
|
||||
@function shade($color, $percent) {
|
||||
@return mix(black, $color, $percent);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,17 @@
|
||||
|
||||
display: inline-block;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
max-width: 60px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.nav-item-course {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: theme-color("primary");
|
||||
@@ -25,6 +36,11 @@
|
||||
.fa-angle-right {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
color: $body-color;
|
||||
|
||||
|
||||
@@ -141,7 +141,8 @@
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #009b00 !important;
|
||||
border-color: #009b00;
|
||||
box-shadow: #004d00 0 2px 1px 0;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
// LMS-specific variables
|
||||
|
||||
$text-width-readability-max: 900px;
|
||||
|
||||
// LMS-only colors
|
||||
$audit-mode-color: rgb(74, 74, 74) !default;
|
||||
$honor-mode-color: theme-color("primary") !default;
|
||||
|
||||
@@ -130,9 +130,13 @@ a:visited:not(.btn) {
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
background: $body-bg;
|
||||
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;
|
||||
}
|
||||
|
||||
@media print {
|
||||
padding-bottom: 0;
|
||||
|
||||
@@ -6,11 +6,6 @@
|
||||
body.view-in-course {
|
||||
background-color: $body-bg;
|
||||
|
||||
// keep application of widths to window-wrap
|
||||
.window-wrap {
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
// courseware header
|
||||
.header-global,
|
||||
.header-global.slim {
|
||||
@@ -19,7 +14,8 @@ body.view-in-course {
|
||||
.wrapper-header {
|
||||
min-width: auto;
|
||||
|
||||
.user-dropdown, .dropdown {
|
||||
.user-dropdown,
|
||||
.dropdown {
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -41,7 +37,7 @@ body.view-in-course {
|
||||
}
|
||||
|
||||
.wrapper-course-material .course-material {
|
||||
padding: ($baseline/2) 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper-course-material .course-material .course-tabs {
|
||||
@@ -53,7 +49,6 @@ body.view-in-course {
|
||||
max-width: none;
|
||||
min-width: initial;
|
||||
width: auto;
|
||||
padding: 0 2%;
|
||||
}
|
||||
|
||||
// course info page
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
// ====================
|
||||
|
||||
// mixins - font sizing
|
||||
@mixin font-size($sizeValue: 16){
|
||||
@mixin font-size($sizeValue: 16) {
|
||||
font-size: $sizeValue + px;
|
||||
// font-size: ($sizeValue/10) + rem;
|
||||
}
|
||||
|
||||
// mixins - line height
|
||||
@mixin line-height($fontSize: auto){
|
||||
@mixin line-height($fontSize: auto) {
|
||||
line-height: ($fontSize*1.48) + px;
|
||||
// line-height: (($fontSize/10)*1.48) + rem;
|
||||
}
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
// sunsetted, but still used mixins
|
||||
@mixin hide-text(){
|
||||
@mixin hide-text() {
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
@@ -1,13 +1,29 @@
|
||||
// LMS layouts
|
||||
|
||||
.content-wrapper {
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
margin-top: $baseline;
|
||||
padding-bottom: $baseline/2;
|
||||
padding: 0 0 $baseline/2;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0 $baseline $baseline/2;
|
||||
}
|
||||
|
||||
.course-tabs {
|
||||
padding: 0 $baseline*2;
|
||||
padding: 0;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: $baseline/2 $baseline*3/4 $baseline*13/20;
|
||||
@@ -15,12 +31,6 @@
|
||||
border-width: 0 0 $baseline/5 0;
|
||||
border-bottom-color: transparent;
|
||||
color: theme-color("secondary");
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: none;
|
||||
text-align: left;
|
||||
padding: 0 0 $baseline/2 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
//// Notifications
|
||||
// Upgrade
|
||||
|
||||
$notification-highlight-border-color: $uxpl-green-base !default;
|
||||
$notification-background: rgb(255, 255, 255) !default
|
||||
$notification-highlight-border-color: $uxpl-green-base !default;
|
||||
$notification-background: rgb(255, 255, 255) !default
|
||||
|
||||
.home {
|
||||
@include clearfix();
|
||||
@@ -60,7 +60,7 @@ div.info-wrapper {
|
||||
|
||||
div.upgrade-banner {
|
||||
// This banner uses the Pattern Library's defined variables
|
||||
@include border-left(0px);
|
||||
@include border-left(0);
|
||||
|
||||
border: 1px solid $border-color;
|
||||
width: 100%;
|
||||
|
||||
@@ -23,12 +23,14 @@ h1.top-header {
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.light-button, a.light-button, // only used in askbot as classes
|
||||
.light-button,
|
||||
a.light-button, // only used in askbot as classes
|
||||
.gray-button {
|
||||
@include simple($gray-l5);
|
||||
|
||||
@@ -130,9 +132,10 @@ h1.top-header {
|
||||
line-height: lh();
|
||||
font-size: 1em;
|
||||
box-sizing: border-box;
|
||||
padding: lh(.25) lh(0.5) lh(.25) 0;
|
||||
padding: lh(0.25) lh(0.5) lh(0.25) 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #666;
|
||||
background: $gray-l6;
|
||||
}
|
||||
@@ -156,7 +159,8 @@ h1.top-header {
|
||||
width: 16px;
|
||||
z-index: 99;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
@@ -181,7 +185,8 @@ h1.top-header {
|
||||
border-left: 1px solid lighten($border-color, 10%);
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #297095;
|
||||
|
||||
@include linear-gradient(top, #4fbbe4, #2090d0);
|
||||
@@ -38,7 +39,8 @@
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include linear-gradient(top, #fff, #ddd);
|
||||
}
|
||||
}
|
||||
@@ -57,7 +59,8 @@
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: -webkit-linear-gradient(top, #888, #666);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,6 +19,11 @@ html.video-fullscreen {
|
||||
@extend %ui-print-excluded;
|
||||
|
||||
margin: ($baseline/2) ($baseline/4) 0 0;
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.studio-view {
|
||||
margin: 0;
|
||||
@@ -100,7 +105,6 @@ html.video-fullscreen {
|
||||
}
|
||||
}
|
||||
|
||||
// TO-DO should this be content wrapper?
|
||||
.course-wrapper {
|
||||
position: relative;
|
||||
|
||||
@@ -132,6 +136,12 @@ html.video-fullscreen {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
// Make text-focused blocks have a maximum width for readability.
|
||||
.xmodule_HtmlModule,
|
||||
.xmodule_CapaModule {
|
||||
max-width: $text-width-readability-max;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 lh();
|
||||
letter-spacing: 0;
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
// TYPE: warning
|
||||
.msg-warning {
|
||||
display: none;
|
||||
background: tint($warning-color,95%);
|
||||
background: tint($warning-color, 95%);
|
||||
border-top: 2px solid $warning-color;
|
||||
color: $warning-color;
|
||||
}
|
||||
@@ -203,7 +203,7 @@
|
||||
height: 24px; // To match bull browse button
|
||||
width: 124%;
|
||||
margin: 0;
|
||||
padding: 4px 0 0 0;
|
||||
padding: 4px 0 0;
|
||||
cursor: pointer;
|
||||
|
||||
// for visual sync, need to make button similar to firefox
|
||||
@@ -376,7 +376,7 @@
|
||||
// type - warning
|
||||
.message-warning {
|
||||
border-top: 2px solid $warning-color;
|
||||
background: tint($warning-color,95%);
|
||||
background: tint($warning-color, 95%);
|
||||
|
||||
.message-title {
|
||||
color: $warning-color;
|
||||
@@ -571,7 +571,7 @@
|
||||
@include columns(2);
|
||||
|
||||
.subheading {
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -608,7 +608,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.batch-enrollment, .batch-beta-testers {
|
||||
.batch-enrollment,
|
||||
.batch-beta-testers {
|
||||
textarea {
|
||||
margin-top: 0.2em;
|
||||
height: auto;
|
||||
@@ -637,10 +638,6 @@
|
||||
}
|
||||
// Auto Enroll Csv Section
|
||||
.auto_enroll_csv {
|
||||
.results {
|
||||
|
||||
}
|
||||
|
||||
.enrollment_signup_button {
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
@@ -867,7 +864,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-submit, .form-cancel {
|
||||
.form-submit,
|
||||
.form-cancel {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -919,7 +917,7 @@
|
||||
}
|
||||
|
||||
.action-create {
|
||||
opacity: 0.50;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -979,7 +977,9 @@
|
||||
padding-bottom: ($baseline/2);
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.action-edit-name {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
@@ -987,7 +987,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.title-value, .group-count, .action-edit {
|
||||
.title-value,
|
||||
.group-count,
|
||||
.action-edit {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -1427,7 +1429,7 @@
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.task-history-all-table {
|
||||
.task-history-all-table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@@ -1480,7 +1482,8 @@
|
||||
// view - metrics
|
||||
// --------------------
|
||||
.instructor-dashboard-wrapper-2 section.idash-section#metrics {
|
||||
.metrics-container, .metrics-header-container {
|
||||
.metrics-container,
|
||||
.metrics-header-container {
|
||||
position: relative;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
@@ -1505,7 +1508,8 @@
|
||||
height: 640px;
|
||||
}
|
||||
|
||||
.metrics-right, .metrics-right-header {
|
||||
.metrics-right,
|
||||
.metrics-right-header {
|
||||
position: relative;
|
||||
width: 65%;
|
||||
|
||||
@@ -1575,7 +1579,8 @@
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1659,7 +1664,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
.ecommerce-wrapper {
|
||||
h2{
|
||||
h2 {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
|
||||
@@ -1759,7 +1764,8 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
input[name="download_company_name"],
|
||||
input[name="active_company_name"], input[name="spent_company_name"] {
|
||||
input[name="active_company_name"],
|
||||
input[name="spent_company_name"] {
|
||||
@include margin-right(8px);
|
||||
|
||||
height: 36px;
|
||||
@@ -1770,7 +1776,7 @@ input[name="subject"] {
|
||||
.coupons-table {
|
||||
width: 100%;
|
||||
|
||||
tr:nth-child(even){
|
||||
tr:nth-child(even) {
|
||||
background-color: $gray-l6;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
@@ -1792,7 +1798,7 @@ input[name="subject"] {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #bebebe;
|
||||
|
||||
th:nth-child(5){
|
||||
th:nth-child(5) {
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
}
|
||||
@@ -1840,7 +1846,7 @@ input[name="subject"] {
|
||||
|
||||
// in_active coupon rows style
|
||||
.inactive_coupon {
|
||||
background: #fff0f0 !important;
|
||||
background: #fff0f0 !important;
|
||||
text-decoration: line-through;
|
||||
color: rgba(51, 51, 51, 0.2);
|
||||
border-bottom: 1px solid #fff;
|
||||
@@ -1882,19 +1888,20 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
td:nth-child(5),td:first-child {
|
||||
td:nth-child(5),
|
||||
td:first-child {
|
||||
@include padding-left($baseline);
|
||||
}
|
||||
|
||||
td:nth-child(2){
|
||||
td:nth-child(2) {
|
||||
line-height: 22px;
|
||||
|
||||
@include padding-right(0px);
|
||||
@include padding-right(0);
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
td:nth-child(5){
|
||||
td:nth-child(5) {
|
||||
@include padding-left(0);
|
||||
|
||||
text-align: center;
|
||||
@@ -1914,8 +1921,11 @@ input[name="subject"] {
|
||||
width: 930px;
|
||||
}
|
||||
// coupon edit and add modals
|
||||
#add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal,
|
||||
#set-course-mode-price-modal, #registration_code_generation_modal {
|
||||
#add-coupon-modal,
|
||||
#invalidate_registration_code_modal,
|
||||
#edit-coupon-modal,
|
||||
#set-course-mode-price-modal,
|
||||
#registration_code_generation_modal {
|
||||
.inner-wrapper {
|
||||
background: $white;
|
||||
}
|
||||
@@ -1924,7 +1934,7 @@ input[name="subject"] {
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
font-size: 12px;
|
||||
color: #646464
|
||||
color: #646464;
|
||||
}
|
||||
|
||||
width: 650px;
|
||||
@@ -1933,8 +1943,10 @@ input[name="subject"] {
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button,
|
||||
input[type="button"]#set_course_button, input[type="button"]#lookup_regcode {
|
||||
input[type="button"]#update_coupon_button,
|
||||
input[type="button"]#add_coupon_button,
|
||||
input[type="button"]#set_course_button,
|
||||
input[type="button"]#lookup_regcode {
|
||||
@include button(simple, $primary);
|
||||
|
||||
@extend .button-reset;
|
||||
@@ -1978,14 +1990,15 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(even){
|
||||
li:nth-child(even) {
|
||||
@include margin-left(30px !important);
|
||||
}
|
||||
|
||||
li:nth-child(3), li:nth-child(4){
|
||||
li:nth-child(3),
|
||||
li:nth-child(4) {
|
||||
width: 100%;
|
||||
|
||||
@include margin-left(0px !important);
|
||||
@include margin-left(0 !important);
|
||||
}
|
||||
|
||||
li:nth-child(3) {
|
||||
@@ -2058,8 +2071,8 @@ input[name="subject"] {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
li:nth-child(even){
|
||||
@include margin-left(0px !important);
|
||||
li:nth-child(even) {
|
||||
@include margin-left(0 !important);
|
||||
}
|
||||
|
||||
li:nth-child(3n) {
|
||||
@@ -2082,7 +2095,7 @@ input[name="subject"] {
|
||||
|
||||
min-height: 5px;
|
||||
|
||||
@include margin-left(0px !important);
|
||||
@include margin-left(0 !important);
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: auto;
|
||||
@@ -2090,9 +2103,9 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-unit-price,
|
||||
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference {
|
||||
@include margin-left(0px !important);
|
||||
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-unit-price,
|
||||
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference {
|
||||
@include margin-left(0 !important);
|
||||
@include margin-right(15px !important);
|
||||
}
|
||||
|
||||
@@ -2111,7 +2124,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
li#set-course-mode-modal-field-currency {
|
||||
@include margin-left(0px !important);
|
||||
@include margin-left(0 !important);
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
@@ -2125,7 +2138,11 @@ input[name="subject"] {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#coupon-content, #course-content, #content, #registration-content, #regcode-content {
|
||||
#coupon-content,
|
||||
#course-content,
|
||||
#content,
|
||||
#registration-content,
|
||||
#regcode-content {
|
||||
padding: $baseline;
|
||||
|
||||
header {
|
||||
@@ -2178,7 +2195,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
.field label {
|
||||
margin: 0 0 5px 0;
|
||||
margin: 0 0 5px;
|
||||
-webkit-transition: color 0.15s ease-in-out 0s;
|
||||
-moz-transition: color 0.15s ease-in-out 0s;
|
||||
transition: color 0.15s ease-in-out 0s;
|
||||
@@ -2259,8 +2276,9 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-wrapper, .proctoring-wrapper {
|
||||
h2{
|
||||
.ecommerce-wrapper,
|
||||
.proctoring-wrapper {
|
||||
h2 {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
|
||||
@@ -2361,20 +2379,24 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
.special-allowance-container, .student-proctored-exam-container {
|
||||
.allowance-table, .exam-attempts-table {
|
||||
.special-allowance-container,
|
||||
.student-proctored-exam-container {
|
||||
.allowance-table,
|
||||
.exam-attempts-table {
|
||||
width: 100%;
|
||||
|
||||
tr:nth-child(even){
|
||||
tr:nth-child(even) {
|
||||
background-color: $gray-l6;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
|
||||
.allowance-headings, .exam-attempt-headings {
|
||||
.allowance-headings,
|
||||
.exam-attempt-headings {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #bebebe;
|
||||
|
||||
th:nth-child(5), th:nth-child(4){
|
||||
th:nth-child(5),
|
||||
th:nth-child(4) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -2456,26 +2478,28 @@ input[name="subject"] {
|
||||
@include padding-left($baseline);
|
||||
}
|
||||
|
||||
td:nth-child(2){
|
||||
td:nth-child(2) {
|
||||
line-height: 22px;
|
||||
|
||||
@include padding-right(0px);
|
||||
@include padding-right(0);
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
td:nth-child(5), td:nth-child(4), td:nth-child(6){
|
||||
td:nth-child(5),
|
||||
td:nth-child(4),
|
||||
td:nth-child(6) {
|
||||
@include padding-left(0);
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:nth-child(3){
|
||||
td:nth-child(3) {
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:nth-child(7){
|
||||
td:nth-child(7) {
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -2486,7 +2510,8 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
.exam-attempts-content, .exam-allowances-content {
|
||||
.exam-attempts-content,
|
||||
.exam-allowances-content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -2626,7 +2651,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
p.under-heading {
|
||||
margin: 12px 0 12px 0;
|
||||
margin: 12px 0;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
@@ -2654,7 +2679,7 @@ input[name="subject"] {
|
||||
td {
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
text-align: left;;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,18 @@
|
||||
@extend %ui-print-excluded;
|
||||
|
||||
border-bottom: none;
|
||||
margin: 0 auto 0;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.course-material {
|
||||
@extend %inner-wrapper;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.course-tabs {
|
||||
@@ -19,7 +25,7 @@
|
||||
|
||||
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
|
||||
|
||||
li {
|
||||
.tab {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
|
||||
@@ -42,7 +48,7 @@
|
||||
@extend %t-title7;
|
||||
@extend %t-regular;
|
||||
|
||||
color: $gray-d1;
|
||||
color: theme-color("dark");
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
@@ -51,8 +57,8 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $uxpl-blue-hover-active;
|
||||
border-bottom-color: $uxpl-blue-hover-active;
|
||||
color: theme-color("primary");
|
||||
border-bottom-color: theme-color("primary");
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -92,8 +98,6 @@
|
||||
display: none;
|
||||
|
||||
&#login {
|
||||
display: block;
|
||||
|
||||
@include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
|
||||
|
||||
border: 1px solid transparent;
|
||||
@@ -103,12 +107,11 @@
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
color: $white;
|
||||
color: theme-color("inverse");
|
||||
display: inline-block;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
letter-spacing: 0;
|
||||
line-height: 1em;
|
||||
margin: 4px;
|
||||
@@ -118,7 +121,9 @@
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include background-image(linear-gradient(-90deg, $primary, $primary 50%, $primary 50%, $primary 100%));
|
||||
}
|
||||
}
|
||||
@@ -156,7 +161,6 @@
|
||||
font: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a#signup {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.wrapper-preview-menu {
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 auto 0;
|
||||
margin: 0 auto;
|
||||
padding: ($baseline*0.75);
|
||||
background-color: $lms-preview-menu-color;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -6,7 +6,32 @@ section.wiki-body {
|
||||
}
|
||||
|
||||
div#wiki_article {
|
||||
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
|
||||
html,
|
||||
address,
|
||||
blockquote,
|
||||
body,
|
||||
dd,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
fieldset,
|
||||
form,
|
||||
frame,
|
||||
frameset,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ol,
|
||||
p,
|
||||
ul,
|
||||
center,
|
||||
dir,
|
||||
hr,
|
||||
menu,
|
||||
pre {
|
||||
display: block;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
@@ -47,7 +72,8 @@ section.wiki-body {
|
||||
display: table-column-group;
|
||||
}
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
@@ -66,14 +92,14 @@ section.wiki-body {
|
||||
|
||||
h1 {
|
||||
font-size: 1.6em;
|
||||
margin: .67em 0;
|
||||
margin: 0.67em 0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: none;
|
||||
font-size: 1.4em;
|
||||
margin: .75em 0;
|
||||
margin: 0.75em 0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -86,7 +112,16 @@ section.wiki-body {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {
|
||||
h4,
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
fieldset,
|
||||
form,
|
||||
ol,
|
||||
dl,
|
||||
dir,
|
||||
menu {
|
||||
margin: 1.12em 0;
|
||||
}
|
||||
|
||||
@@ -100,7 +135,8 @@ section.wiki-body {
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
@@ -110,11 +146,19 @@ section.wiki-body {
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
i, cite, em, var, address {
|
||||
i,
|
||||
cite,
|
||||
em,
|
||||
var,
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre, tt, code, kbd, samp {
|
||||
pre,
|
||||
tt,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@@ -122,7 +166,10 @@ section.wiki-body {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
button, textarea, input, select {
|
||||
button,
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -130,7 +177,9 @@ section.wiki-body {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
|
||||
small, sub, sup {
|
||||
small,
|
||||
sub,
|
||||
sup {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
@@ -146,15 +195,21 @@ section.wiki-body {
|
||||
border-spacing: 2px;
|
||||
}
|
||||
|
||||
thead, tbody, tfoot {
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td, th, tr {
|
||||
td,
|
||||
th,
|
||||
tr {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
s, strike, del {
|
||||
s,
|
||||
strike,
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@@ -164,7 +219,11 @@ section.wiki-body {
|
||||
border: none;
|
||||
}
|
||||
|
||||
ol, ul, dir, menu, dd {
|
||||
ol,
|
||||
ul,
|
||||
dir,
|
||||
menu,
|
||||
dd {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
@@ -172,12 +231,16 @@ section.wiki-body {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ol ul, ul ol, ul ul, ol ol {
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul,
|
||||
ol ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
u, ins {
|
||||
u,
|
||||
ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ form#wiki_revision {
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 7px ;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
@@ -56,7 +56,8 @@ form#wiki_revision {
|
||||
margin-top: lh();
|
||||
width: flex-grid(3, 9);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
// Utilities to provide v1-styling compatibility
|
||||
|
||||
@mixin font-size($sizeValue: 16){
|
||||
@mixin font-size($sizeValue: 16) {
|
||||
font-size: $sizeValue + px;
|
||||
}
|
||||
|
||||
@mixin line-height($fontSize: auto){
|
||||
@mixin line-height($fontSize: auto) {
|
||||
line-height: ($fontSize*1.48) + px;
|
||||
}
|
||||
|
||||
|
||||
@@ -52,6 +52,8 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
|
||||
|
||||
.bookmark-button {
|
||||
&::before {
|
||||
@include padding-right($baseline / 4);
|
||||
|
||||
content: $bookmark-icon;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
@@ -27,8 +27,10 @@
|
||||
|
||||
text-transform: lowercase;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
border-color: rgb(200,200,200);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: rgb(200, 200, 200);
|
||||
color: $body-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -41,7 +43,7 @@
|
||||
}
|
||||
|
||||
.our-mission {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
|
||||
@include clearfix();
|
||||
|
||||
@@ -49,7 +51,7 @@
|
||||
padding-bottom: 40px;
|
||||
|
||||
.logo {
|
||||
@include border-right(1px solid rgb(200,200,200));
|
||||
@include border-right(1px solid rgb(200, 200, 200));
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
|
||||
@@ -83,7 +85,7 @@
|
||||
}
|
||||
|
||||
.message {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
|
||||
@include clearfix();
|
||||
|
||||
@@ -100,7 +102,7 @@
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid rgb(200,200,200);
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@@ -114,7 +116,7 @@
|
||||
width: flex-grid(3);
|
||||
|
||||
img {
|
||||
background: rgb(245,245,245);
|
||||
background: rgb(245, 245, 245);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -167,7 +169,7 @@
|
||||
@include clearfix();
|
||||
|
||||
nav.categories {
|
||||
border: 1px solid rgb(220,220,220);
|
||||
border: 1px solid rgb(220, 220, 220);
|
||||
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
@@ -185,8 +187,9 @@
|
||||
|
||||
text-align: left;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: rgb(245,245,245);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgb(245, 245, 245);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -205,7 +208,7 @@
|
||||
}
|
||||
|
||||
> h2 {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
margin-bottom: ($baseline*2);
|
||||
padding-bottom: $baseline;
|
||||
}
|
||||
@@ -225,7 +228,7 @@
|
||||
|
||||
.press {
|
||||
.press-story {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
|
||||
@include clearfix();
|
||||
|
||||
@@ -240,7 +243,7 @@
|
||||
|
||||
.article-cover {
|
||||
background: rgb(255, 255, 255);
|
||||
border: 1px solid rgb(120,120,120);
|
||||
border: 1px solid rgb(120, 120, 120);
|
||||
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
|
||||
@@ -92,7 +92,6 @@
|
||||
padding: $baseline/2 $baseline*2.5;
|
||||
text-transform: lowercase;
|
||||
color: $very-light-text;
|
||||
letter-spacing: 0.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
@@ -194,7 +193,12 @@
|
||||
@extend %body-text;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -506,7 +510,8 @@
|
||||
@extend %m-btn-primary;
|
||||
@extend %t-action2;
|
||||
|
||||
&:disabled, &.is-disabled {
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default !important;
|
||||
}
|
||||
@@ -564,7 +569,7 @@
|
||||
}
|
||||
|
||||
.form-actions.form-third-party-auth {
|
||||
width: flex-grid(8,8);
|
||||
width: flex-grid(8, 8);
|
||||
margin-bottom: $baseline;
|
||||
|
||||
button[type="submit"] {
|
||||
@@ -615,7 +620,6 @@
|
||||
&.button-oa2-linkedin-oauth2:hover {
|
||||
box-shadow: 0 2px 1px 0 #005d8e;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -626,7 +630,7 @@
|
||||
margin: 0 0 $baseline 0;
|
||||
border-bottom: 3px solid shade($yellow, 10%);
|
||||
padding: $baseline $baseline;
|
||||
background: tint($yellow,20%);
|
||||
background: tint($yellow, 20%);
|
||||
|
||||
.message-title {
|
||||
@extend %heading-4;
|
||||
|
||||
@@ -23,14 +23,15 @@ $facet-background-color: #007db8;
|
||||
|
||||
// +Layout - Courses Container
|
||||
// ====================
|
||||
.find-courses, .university-profile {
|
||||
.find-courses,
|
||||
.university-profile {
|
||||
.discovery-button:not(:disabled) {
|
||||
@extend %t-action2;
|
||||
|
||||
@include text-align(left);
|
||||
|
||||
outline: 0 none;
|
||||
box-shadow:none;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0 ($baseline*0.6);
|
||||
@@ -39,7 +40,7 @@ $facet-background-color: #007db8;
|
||||
text-transform: none;
|
||||
|
||||
//STATE: hover
|
||||
&::hover {
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@@ -131,7 +132,8 @@ $facet-background-color: #007db8;
|
||||
|
||||
// +Hero - Home Header
|
||||
// ====================
|
||||
.find-courses, .university-profile {
|
||||
.find-courses,
|
||||
.university-profile {
|
||||
header.search {
|
||||
background: $gray-l5;
|
||||
background-size: cover;
|
||||
@@ -162,7 +164,8 @@ $facet-background-color: #007db8;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.main-search, &.university-search {
|
||||
&.main-search,
|
||||
&.university-search {
|
||||
text-align: center;
|
||||
|
||||
.heading-group {
|
||||
@@ -180,7 +183,7 @@ $facet-background-color: #007db8;
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
@include right(0px);
|
||||
@include right(0);
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -203,7 +206,8 @@ $facet-background-color: #007db8;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
h1,
|
||||
h2 {
|
||||
display: inline-block;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0;
|
||||
@@ -247,7 +251,6 @@ $facet-background-color: #007db8;
|
||||
@include media($bp-large) {
|
||||
@include span-columns(8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wrapper-search-input {
|
||||
@@ -318,7 +321,8 @@ $facet-background-color: #007db8;
|
||||
text-shadow: none;
|
||||
|
||||
//STATE: hover, focus
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $m-blue-d5;
|
||||
}
|
||||
}
|
||||
@@ -463,7 +467,8 @@ $facet-background-color: #007db8;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.header-search-facets, .header-facet {
|
||||
.header-search-facets,
|
||||
.header-facet {
|
||||
@extend %t-title6;
|
||||
@extend %t-strong;
|
||||
|
||||
@@ -579,7 +584,8 @@ $facet-background-color: #007db8;
|
||||
|
||||
// +All Other Styles
|
||||
// ====================
|
||||
.find-courses, .university-profile {
|
||||
.find-courses,
|
||||
.university-profile {
|
||||
background: $gray-l5;
|
||||
padding-bottom: ($baseline*3);
|
||||
|
||||
@@ -591,6 +597,5 @@ $facet-background-color: #007db8;
|
||||
border-top: 1px solid $border-color-2;
|
||||
margin-top: $baseline;
|
||||
padding-top: ($baseline*3);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@include clearfix();
|
||||
|
||||
nav.categories {
|
||||
border: 1px solid rgb(220,220,220);
|
||||
border: 1px solid rgb(220, 220, 220);
|
||||
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
@@ -20,8 +20,9 @@
|
||||
@include padding(12px, 0, 12px, 20px);
|
||||
@include text-align(left);
|
||||
|
||||
&:hover, &:focus {
|
||||
background: rgb(245,245,245);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgb(245, 245, 245);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -40,7 +41,7 @@
|
||||
}
|
||||
|
||||
> h2 {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
margin-bottom: ($baseline*2);
|
||||
padding-bottom: $baseline;
|
||||
}
|
||||
|
||||
@@ -54,7 +54,8 @@ $course-search-input-height: ($button-size);
|
||||
vertical-align: top;
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.actions {
|
||||
display: none;
|
||||
}
|
||||
@@ -152,7 +153,8 @@ $course-search-input-height: ($button-size);
|
||||
text-shadow: none;
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $m-blue-l1;
|
||||
}
|
||||
}
|
||||
@@ -181,7 +183,8 @@ $course-search-input-height: ($button-size);
|
||||
width: flex-grid(2) + flex-gutter();
|
||||
z-index: 2;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -239,7 +242,8 @@ $course-search-input-height: ($button-size);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.play-intro {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.8)));
|
||||
|
||||
@@ -416,7 +420,8 @@ $course-search-input-height: ($button-size);
|
||||
|
||||
@include transition(all 0.15s ease-in-out 0s);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $lighter-base-font-color;
|
||||
}
|
||||
}
|
||||
@@ -431,7 +436,8 @@ $course-search-input-height: ($button-size);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
@@ -478,10 +484,11 @@ $course-search-input-height: ($button-size);
|
||||
}
|
||||
|
||||
.name > span {
|
||||
font-size: 1.0em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.name {
|
||||
bottom: 14px;
|
||||
}
|
||||
@@ -571,7 +578,8 @@ $course-search-input-height: ($button-size);
|
||||
|
||||
width: flex-grid(4);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $body-bg;
|
||||
border: 1px solid $border-color-2;
|
||||
box-shadow: inset 0 0 3px 0 $shadow-l1;
|
||||
@@ -614,7 +622,8 @@ $course-search-input-height: ($button-size);
|
||||
color: $body-color;
|
||||
font: 700 1em/1.2em $font-family-sans-serif;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -649,7 +658,8 @@ $course-search-input-height: ($button-size);
|
||||
|
||||
color: lighten($body-color, 50%);
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,12 @@
|
||||
|
||||
.content-wrapper {
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
padding-bottom: $baseline*2;
|
||||
margin-top: $baseline;
|
||||
padding: 0 0 $baseline/2;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0 $baseline $baseline/2;
|
||||
}
|
||||
|
||||
.page-content-container {
|
||||
@include clearfix();
|
||||
@@ -39,21 +44,23 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page-header-secondary {
|
||||
@include float(right);
|
||||
@include text-align(right);
|
||||
@include media-breakpoint-up(md) {
|
||||
.page-header-secondary {
|
||||
@include float(right);
|
||||
@include text-align(right);
|
||||
|
||||
display: flex;
|
||||
vertical-align: text-bottom;
|
||||
display: flex;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
.form-actions {
|
||||
@include margin-left($baseline/2);
|
||||
.form-actions {
|
||||
@include margin-left($baseline/2);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-actions > *:first-child {
|
||||
@include margin-left(0);
|
||||
.form-actions > *:first-child {
|
||||
@include margin-left(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -652,7 +652,8 @@
|
||||
border-color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-d3;
|
||||
}
|
||||
}
|
||||
@@ -874,7 +875,7 @@
|
||||
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(4,12);
|
||||
width: flex-grid(4, 12);
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
@@ -1163,7 +1164,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-option-other1 label, .contribution-option-other2 label {
|
||||
.contribution-option-other1 label,
|
||||
.contribution-option-other2 label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
}
|
||||
@@ -1196,7 +1198,8 @@
|
||||
}
|
||||
|
||||
// previously defined in HTML
|
||||
video, canvas {
|
||||
video,
|
||||
canvas {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@@ -1302,7 +1305,9 @@
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
.deco-denomination, .label-value, .denomination-name {
|
||||
.deco-denomination,
|
||||
.label-value,
|
||||
.denomination-name {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -1443,7 +1448,8 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wrapper-copy, .list-actions {
|
||||
.wrapper-copy,
|
||||
.list-actions {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -1784,7 +1790,7 @@
|
||||
.placeholder-art {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: $baseline 0 ($baseline/2) 0;
|
||||
margin: $baseline 0 ($baseline/2);
|
||||
padding: $baseline;
|
||||
background: $verified-color-lvl3;
|
||||
border-radius: ($baseline*10);
|
||||
@@ -1844,7 +1850,8 @@
|
||||
padding: ($baseline/2) $baseline;
|
||||
}
|
||||
|
||||
.copy-super, .copy-sub {
|
||||
.copy-super,
|
||||
.copy-sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1905,11 +1912,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// VIEW: take and review photos
|
||||
&.step-photos {
|
||||
|
||||
}
|
||||
|
||||
// VIEW: take cam photo
|
||||
&.step-photos-cam {
|
||||
|
||||
@@ -1967,7 +1969,8 @@
|
||||
border-color: $verified-color-lvl3;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-l3;
|
||||
}
|
||||
}
|
||||
@@ -2014,7 +2017,8 @@
|
||||
|
||||
color: $m-blue-d3;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $m-blue-d1;
|
||||
border: none;
|
||||
}
|
||||
@@ -2043,7 +2047,7 @@
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.action-verify label {
|
||||
.action-verify label {
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
}
|
||||
@@ -2328,7 +2332,8 @@
|
||||
border-color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-d3;
|
||||
}
|
||||
}
|
||||
@@ -2383,14 +2388,15 @@
|
||||
border-color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-d3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-sts-value {
|
||||
width: 0% !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2423,7 +2429,8 @@
|
||||
border-color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-d3;
|
||||
}
|
||||
}
|
||||
@@ -2448,7 +2455,8 @@
|
||||
border-color: $verified-color-lvl3;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-l3;
|
||||
}
|
||||
}
|
||||
@@ -2462,7 +2470,8 @@
|
||||
border-color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.step-number, .step-name {
|
||||
.step-number,
|
||||
.step-name {
|
||||
color: $m-gray-d3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ if course is not None:
|
||||
tab_list = get_course_tab_list(request, course)
|
||||
%>
|
||||
% if uses_bootstrap:
|
||||
<nav class="navbar course-tabs pb-0 navbar-expand-lg">
|
||||
<nav class="navbar course-tabs pb-0 navbar-expand">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
% for tab in tab_list:
|
||||
<%
|
||||
|
||||
@@ -15,7 +15,11 @@
|
||||
<div class="sequence-nav">
|
||||
<button class="sequence-nav-button button-previous" aria-hidden="true">
|
||||
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
|
||||
<span>${_('Previous')}</span>
|
||||
<span class="sequence-nav-button-label">${_('Previous')}</span>
|
||||
</button>
|
||||
<button class="sequence-nav-button button-next" aria-hidden="true">
|
||||
<span class="sequence-nav-button-label">${_('Next')}</span>
|
||||
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
|
||||
</button>
|
||||
<nav class="sequence-list-wrapper" aria-label="${_('Sequence')}">
|
||||
<ol id="sequence-list" role="tablist">
|
||||
@@ -41,10 +45,6 @@
|
||||
% endfor
|
||||
</ol>
|
||||
</nav>
|
||||
<button class="sequence-nav-button button-next" aria-hidden="true">
|
||||
<span>${_('Next')}</span>
|
||||
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sr-is-focusable" tabindex="-1"></div>
|
||||
|
||||
@@ -15,7 +15,7 @@ from django.utils.translation import ugettext as _
|
||||
%>
|
||||
|
||||
<%block name="content">
|
||||
<nav class="navbar course-tabs navbar-expand-lg">
|
||||
<nav class="navbar course-tabs navbar-expand">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">${_('Course')} <span class="sr-only">(current)</span></a>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</%block>
|
||||
|
||||
<%block name="content">
|
||||
<nav class="navbar course-tabs navbar-expand-lg">
|
||||
<nav class="navbar course-tabs navbar-expand">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"coffee-loader": "^0.7.3",
|
||||
"coffee-script": "1.6.1",
|
||||
"css-loader": "^0.28.5",
|
||||
"@edx/edx-bootstrap": "^0.4.0",
|
||||
"@edx/edx-bootstrap": "^0.4.1",
|
||||
"@edx/paragon": "^0.2.0",
|
||||
"@edx/studio-frontend": "^0.3.0",
|
||||
"edx-pattern-library": "0.18.1",
|
||||
|
||||
@@ -13,7 +13,7 @@ set -e
|
||||
# Violations thresholds for failing the build
|
||||
export PYLINT_THRESHOLD=3600
|
||||
export ESLINT_THRESHOLD=9134
|
||||
export STYLELINT_THRESHOLD=1410
|
||||
export STYLELINT_THRESHOLD=973
|
||||
|
||||
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
|
||||
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
|
||||
|
||||
Reference in New Issue
Block a user