Skip to content

E
edx-platform
Unverified Commit 19c2faee by Andy Armstrong Committed by GitHub
Options

Merge pull request #16391 from edx/andya/responsive-course-content 

Make the course content page responsive
parents ea4582ab 268bea9e
Showing with 650 additions and 396 deletions
.stylelintignore
common/lib/xmodule/xmodule/css
common/static/sass/bourbon
common/static/xmodule/modules/css
common/test/test-theme
lms/static/sass/vendor
cms/static/sass/views/_certificates.scss
......@@ -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;
}
}
......
cms/static/sass/views/_container.scss
......@@ -427,7 +427,8 @@
}
}
&:hover, &:focus {
&:hover,
&:focus {
background: $color-background-alternate;
}
}
......
cms/static/sass/views/_group-configuration.scss
......@@ -75,7 +75,8 @@
display: inline-block;
color: $black;
&:hover, &:focus {
&:hover,
&:focus {
color: $blue;
}
......
cms/static/sass/views/_outline.scss
......@@ -48,7 +48,8 @@
}
// STATE: hover/focus
&:hover, &:focus {
&:hover,
&:focus {
.incontext-editor-open-action {
opacity: 1;
}
......
common/lib/xmodule/xmodule/css/annotatable/display.scss
......@@ -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;
......
common/lib/xmodule/xmodule/css/capa/display.scss
......@@ -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');
......
common/lib/xmodule/xmodule/css/html/display.scss
......@@ -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;
......
common/lib/xmodule/xmodule/css/poll/display.scss
......@@ -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 {
......
common/lib/xmodule/xmodule/css/problem/edit.scss
......@@ -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;
}
}
......
common/lib/xmodule/xmodule/css/sequence/display.scss
......@@ -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;
@include media-breakpoint-up(md) {
min-width: 120px;
max-width: 200px;
text-overflow: ellipsis;
span:not(:last-child) {
@include padding-right($baseline / 2);
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);
......
common/lib/xmodule/xmodule/css/tabs/codemirror.scss
.editor{
.editor {
@include clearfix();
.CodeMirror {
......
common/lib/xmodule/xmodule/css/tabs/tabs.scss
// 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 {
......
common/lib/xmodule/xmodule/css/video/accessible_menu.scss
$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;
......
common/lib/xmodule/xmodule/css/video/display.scss
......@@ -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;
......
common/static/sass/_mixins-inherited.scss
......@@ -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);
}
}
......
common/static/sass/_mixins.scss
......@@ -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;
......
common/static/sass/bourbon/addons/_button.scss
......@@ -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 {
......
common/static/sass/bourbon/functions/_tint-shade.scss
// 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);
}
common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
......@@ -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;
......
lms/static/sass/_experiments.scss
......@@ -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;
......
lms/static/sass/_variables.scss
// 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;
......
lms/static/sass/base/_base.scss
......@@ -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;
......
lms/static/sass/base/_layouts.scss
......@@ -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
......
lms/static/sass/base/_mixins.scss
......@@ -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;
......
lms/static/sass/bootstrap/_layouts.scss
// 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,
......
lms/static/sass/course/_info.scss
//// 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%;
......
lms/static/sass/course/base/_extends.scss
......@@ -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;
}
}
......
lms/static/sass/course/base/_mixins.scss
......@@ -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);
}
}
lms/static/sass/course/courseware/_courseware.scss
......@@ -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;
......
lms/static/sass/course/layout/_courseware_header.scss
......@@ -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 {
......
lms/static/sass/course/layout/_courseware_preview.scss
.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;
......
lms/static/sass/course/wiki/_basic-html.scss
......@@ -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;
}
......
lms/static/sass/course/wiki/_create.scss
......@@ -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;
}
......
lms/static/sass/discussion/utilities/_v1-compatibility.scss
// 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;
}
......
lms/static/sass/features/_bookmarks-v1.scss
......@@ -52,6 +52,8 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
.bookmark-button {
&::before {
@include padding-right($baseline / 4);
content: $bookmark-icon;
font-family: FontAwesome;
}
......
lms/static/sass/multicourse/_about_pages.scss
......@@ -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);
......
lms/static/sass/multicourse/_account.scss
......@@ -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;
......
lms/static/sass/multicourse/_courses.scss
......@@ -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);
}
}
lms/static/sass/multicourse/_help.scss
......@@ -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;
}
......
lms/static/sass/multicourse/_home.scss
......@@ -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;
}
......
lms/static/sass/shared-v2/_layouts.scss
......@@ -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);
}
}
}
}
......
lms/static/sass/views/_verification.scss
......@@ -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;
}
}
......
lms/templates/courseware/course_navigation.html
......@@ -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:
<%
......
lms/templates/seq_module.html
......@@ -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>
......
lms/templates/ux/reference/bootstrap/course-skeleton.html
......@@ -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>
......
lms/templates/ux/reference/bootstrap/unit-page.html
......@@ -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>
......
package.json
......@@ -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",
......
scripts/all-tests.sh
......@@ -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:]]/}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment