Skip to content

E
edx-platform
Commit 9f0fba0a by Andy Armstrong
Options

Sass quality fixes in the LMS

parent 0702df51
Showing with 1212 additions and 780 deletions
.stylelintignore 0 → 100644
common/static/sass/bourbon
lms/static/sass/vendor
lms/static/sass/_build-footer-edx.scss
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
@import 'base/theme'; @import 'base/theme';
footer#footer-edx-v3 { footer#footer-edx-v3 {
@import 'base/extends'; @import 'base/extends';
// base - starter // base - starter
@import 'base/base'; @import 'base/base';
} }
// base - elements // base - elements
......
lms/static/sass/_build-lms-v1.scss
...@@ -81,7 +81,6 @@ ...@@ -81,7 +81,6 @@
// news // news
@import 'notifications'; @import 'notifications';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
@import 'elements/system-feedback'; @import 'elements/system-feedback';
......
lms/static/sass/_developer.scss
...@@ -30,10 +30,12 @@ ...@@ -30,10 +30,12 @@
.ui-loading-base { .ui-loading-base {
@include animation(fadeIn $tmg-f2 linear 1); @include animation(fadeIn $tmg-f2 linear 1);
@extend %t-copy-base; @extend %t-copy-base;
.spin { .spin {
@extend %anim-rotateCW; @extend %anim-rotateCW;
display: inline-block; display: inline-block;
} }
...@@ -45,6 +47,7 @@ ...@@ -45,6 +47,7 @@
.ui-loading { .ui-loading {
@extend .ui-loading-base; @extend .ui-loading-base;
@extend %ui-well; @extend %ui-well;
opacity: 0.6; opacity: 0.6;
background-color: $white; background-color: $white;
padding: ($baseline*1.5) $baseline; padding: ($baseline*1.5) $baseline;
...@@ -67,20 +70,21 @@ ...@@ -67,20 +70,21 @@
// for verify_student/make_payment_step.underscore // for verify_student/make_payment_step.underscore
.payment-buttons { .payment-buttons {
.purchase { .purchase {
float: left; float: left;
padding: ($baseline*.5) 0; padding: ($baseline*.5) 0;
.product-info, .product-name, .price { .product-info, .product-name, .price {
@extend %t-ultrastrong; @extend %t-ultrastrong;
color: $m-blue-d3; color: $m-blue-d3;
} }
} }
.payment-button { .payment-button {
float: right; float: right;
@include margin-left( ($baseline/2) );
@include margin-left(($baseline/2));
&.is-selected { &.is-selected {
background: $m-green-s1 !important; background: $m-green-s1 !important;
...@@ -94,12 +98,14 @@ ...@@ -94,12 +98,14 @@
.view-teams { .view-teams {
.wrapper-msg { .wrapper-msg {
@include clearfix(); @include clearfix();
max-width: grid-width(12); max-width: grid-width(12);
margin: 0 auto; margin: 0 auto;
border-top: 3px solid $orange; border-top: 3px solid $orange;
.left-floater { .left-floater {
@include float(left); @include float(left);
text-transform: uppercase; text-transform: uppercase;
font-weight: $font-semibold; font-weight: $font-semibold;
color: $white; color: $white;
...@@ -108,6 +114,7 @@ ...@@ -108,6 +114,7 @@
.right-floater { .right-floater {
@include float(right); @include float(right);
line-height: $body-line-height; line-height: $body-line-height;
button { button {
...@@ -126,7 +133,7 @@ ...@@ -126,7 +133,7 @@
} }
&:focus { &:focus {
box-shadow: 0 0 0 0; box-shadow: 0 0 0 0;
} }
} }
} }
...@@ -135,6 +142,7 @@ ...@@ -135,6 +142,7 @@
.members-info { .members-info {
margin: 0; margin: 0;
padding: 0; padding: 0;
li { li {
display: inline; display: inline;
} }
...@@ -151,6 +159,7 @@ ...@@ -151,6 +159,7 @@
.member-info-container { .member-info-container {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-left($baseline/2); @include margin-left($baseline/2);
.primary { .primary {
...@@ -191,6 +200,7 @@ ...@@ -191,6 +200,7 @@
//along with some "hide the inherited value, we want none" action //along with some "hide the inherited value, we want none" action
.prompt.warning button { .prompt.warning button {
@extend %btn-no-style; @extend %btn-no-style;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
...@@ -211,6 +221,7 @@ ...@@ -211,6 +221,7 @@
//along with some "hide the inherited value, we want none" action //along with some "hide the inherited value, we want none" action
.prompt.warning button { .prompt.warning button {
@extend %btn-no-style; @extend %btn-no-style;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
......
lms/static/sass/_notifications.scss
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
.notifications { .notifications {
@include news-font; @include news-font;
font-size: 0.9em; font-size: 0.9em;
padding-left: $baseline; padding-left: $baseline;
padding-top: $baseline; padding-top: $baseline;
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
.notification { .notification {
@include news-font; @include news-font;
margin-top: ($baseline*0.75); margin-top: ($baseline*0.75);
margin-bottom: ($baseline*0.75); margin-bottom: ($baseline*0.75);
...@@ -22,6 +24,7 @@ ...@@ -22,6 +24,7 @@
.site-status { .site-status {
@include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0)); @include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0));
padding: ($baseline / 2); padding: ($baseline / 2);
background-color: $site-status-color; background-color: $site-status-color;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset; box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
...@@ -30,6 +33,7 @@ ...@@ -30,6 +33,7 @@
.icon { .icon {
@include margin-right($baseline / 2); @include margin-right($baseline / 2);
@include float(left); @include float(left);
color: $white !important; // some pages have color inherit color: $white !important; // some pages have color inherit
font-size: 18px; font-size: 18px;
} }
......
lms/static/sass/_shame.scss
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
%m-btn { %m-btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out); @include transition(color $tmg-f2 ease-in-out, background $tmg-f2 ease-in-out, box-shadow $tmg-f2 ease-in-out);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
...@@ -39,6 +40,7 @@ ...@@ -39,6 +40,7 @@
%m-btn-base { %m-btn-base {
@extend %m-btn; @extend %m-btn;
@extend %m-btn-edged; @extend %m-btn-edged;
border: none; border: none;
padding:($baseline/2) ($baseline); padding:($baseline/2) ($baseline);
text-align: center; text-align: center;
...@@ -58,6 +60,7 @@ ...@@ -58,6 +60,7 @@
// primary button // primary button
%m-btn-primary { %m-btn-primary {
@extend %m-btn-base; @extend %m-btn-base;
box-shadow: 0 2px 1px 0 $action-primary-shadow; box-shadow: 0 2px 1px 0 $action-primary-shadow;
background: $action-primary-bg; background: $action-primary-bg;
color: $action-primary-fg; color: $action-primary-fg;
...@@ -65,6 +68,7 @@ ...@@ -65,6 +68,7 @@
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-primary-focused-bg; background: $action-primary-focused-bg;
} }
&:focus { &:focus {
box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow; box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow;
} }
...@@ -89,6 +93,7 @@ ...@@ -89,6 +93,7 @@
// secondary button // secondary button
%m-btn-secondary { %m-btn-secondary {
@extend %m-btn-base; @extend %m-btn-base;
box-shadow: 0 2px 1px 0 $action-secondary-shadow; box-shadow: 0 2px 1px 0 $action-secondary-shadow;
background: $action-secondary-bg; background: $action-secondary-bg;
color: $action-secondary-fg; color: $action-secondary-fg;
...@@ -96,6 +101,7 @@ ...@@ -96,6 +101,7 @@
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-secondary-focused-bg; background: $action-secondary-focused-bg;
} }
&:focus { &:focus {
box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow; box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow;
} }
...@@ -122,7 +128,6 @@ ...@@ -122,7 +128,6 @@
// edx.org marketing site - needed, but bad overrides with importants // edx.org marketing site - needed, but bad overrides with importants
.view-register, .view-login, .view-passwordreset, .view-survey { .view-register, .view-login, .view-passwordreset, .view-survey {
.form-actions button[type="submit"] { .form-actions button[type="submit"] {
text-transform: none; text-transform: none;
vertical-align: middle; vertical-align: middle;
...@@ -140,7 +145,6 @@ ...@@ -140,7 +145,6 @@
//overriding reset link style for nav/header //overriding reset link style for nav/header
.header-global { .header-global {
.logo a:hover, .logo:active, .logo a:focus { .logo a:hover, .logo:active, .logo a:focus {
border: none; border: none;
text-decoration: none; text-decoration: none;
...@@ -213,6 +217,7 @@ footer .references { ...@@ -213,6 +217,7 @@ footer .references {
.action-secondary { .action-secondary {
@extend %btn-no-style; @extend %btn-no-style;
@extend %t-strong; @extend %t-strong;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
} }
......
lms/static/sass/base/_animations.scss
...@@ -9,28 +9,34 @@ ...@@ -9,28 +9,34 @@
@mixin home-header-pop-up-keyframes { @mixin home-header-pop-up-keyframes {
0% { 0% {
opacity: 0.0; opacity: 0;
top: 300px; top: 300px;
//@include transform(scale(0.9)); //@include transform(scale(0.9));
} }
45% { 45% {
opacity: 1.0; opacity: 1;
} }
65% { 65% {
top: -40px; top: -40px;
//@include transform(scale(1)); //@include transform(scale(1));
} }
85% { 85% {
top: 10px; top: 10px;
} }
100% { 100% {
top: 0px; top: 0;
} }
} }
@-webkit-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } @-webkit-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
@-moz-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
@keyframes home-header-pop-up { @include home-header-pop-up-keyframes; } @-moz-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
@keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
// title appear animation // title appear animation
//************************************************************************// //************************************************************************//
...@@ -43,30 +49,39 @@ ...@@ -43,30 +49,39 @@
@mixin title-appear-keyframes { @mixin title-appear-keyframes {
0% { 0% {
opacity: 0.0; opacity: 0;
top: 60px; top: 60px;
@include transform(scale(0.9)); @include transform(scale(0.9));
} }
20% { 20% {
opacity: 1.0; opacity: 1;
} }
27% { // this % of total-time should be ~ 1.25s 27% { // this % of total-time should be ~ 1.25s
top: 40px; top: 40px;
@include transform(scale(1)); @include transform(scale(1));
} }
90% { // this % of total-time is when 2nd half of animation starts 90% { // this % of total-time is when 2nd half of animation starts
opacity: 1.0; opacity: 1;
top: 40px; top: 40px;
@include transform(scale(1)); @include transform(scale(1));
} }
100% { 100% {
top: 0px; top: 0;
} }
} }
@-webkit-keyframes title-appear { @include title-appear-keyframes; } @-webkit-keyframes title-appear { @include title-appear-keyframes; }
@-moz-keyframes title-appear { @include title-appear-keyframes; }
@keyframes title-appear { @include title-appear-keyframes; } @-moz-keyframes title-appear { @include title-appear-keyframes; }
@keyframes title-appear { @include title-appear-keyframes; }
// home appear animation // home appear animation
//************************************************************************// //************************************************************************//
...@@ -79,32 +94,42 @@ ...@@ -79,32 +94,42 @@
@mixin home-appear-keyframes { @mixin home-appear-keyframes {
0% { 0% {
opacity: 0.0; opacity: 0;
top: 60px; top: 60px;
@include transform(scale(0.9)); @include transform(scale(0.9));
} }
20% { 20% {
opacity: 1.0; opacity: 1;
} }
30% { // this % of total-time should be ~ 1.25s 30% { // this % of total-time should be ~ 1.25s
top: 40px; top: 40px;
@include transform(scale(1)); @include transform(scale(1));
} }
80% { // this % of total-time is when 2nd half of animation starts 80% { // this % of total-time is when 2nd half of animation starts
opacity: 1.0; opacity: 1;
top: 40px; top: 40px;
@include transform(scale(1)); @include transform(scale(1));
} }
100% { 100% {
opacity: 0.0; opacity: 0;
top: 60px; top: 60px;
@include transform(scale(0.7)); @include transform(scale(0.7));
} }
} }
@-webkit-keyframes home-appear { @include home-appear-keyframes; } @-webkit-keyframes home-appear { @include home-appear-keyframes; }
@-moz-keyframes home-appear { @include home-appear-keyframes; }
@keyframes home-appear { @include home-appear-keyframes; } @-moz-keyframes home-appear { @include home-appear-keyframes; }
@keyframes home-appear { @include home-appear-keyframes; }
// edx animation // edx animation
//************************************************************************// //************************************************************************//
...@@ -117,16 +142,19 @@ ...@@ -117,16 +142,19 @@
@mixin edx-appear-keyframes { @mixin edx-appear-keyframes {
0% { 0% {
opacity: 0.0; opacity: 0;
} }
100% { 100% {
opacity: 1.0; opacity: 1;
} }
} }
@-webkit-keyframes edx-appear { @include edx-appear-keyframes; } @-webkit-keyframes edx-appear { @include edx-appear-keyframes; }
@-moz-keyframes edx-appear { @include edx-appear-keyframes; }
@keyframes edx-appear { @include edx-appear-keyframes; } @-moz-keyframes edx-appear { @include edx-appear-keyframes; }
@keyframes edx-appear { @include edx-appear-keyframes; }
// mit animation // mit animation
//************************************************************************// //************************************************************************//
...@@ -141,14 +169,17 @@ ...@@ -141,14 +169,17 @@
0% { 0% {
left: 80px; left: 80px;
} }
100% { 100% {
left: 0px; left: 0;
} }
} }
@-webkit-keyframes mit-slide { @include mit-slide-keyframes; } @-webkit-keyframes mit-slide { @include mit-slide-keyframes; }
@-moz-keyframes mit-slide { @include mit-slide-keyframes; }
@keyframes mit-slide { @include mit-slide-keyframes; } @-moz-keyframes mit-slide { @include mit-slide-keyframes; }
@keyframes mit-slide { @include mit-slide-keyframes; }
// harvard animation // harvard animation
//************************************************************************// //************************************************************************//
...@@ -163,14 +194,17 @@ ...@@ -163,14 +194,17 @@
0% { 0% {
right: 80px; right: 80px;
} }
100% { 100% {
right: 0px; right: 0;
} }
} }
@-webkit-keyframes harvard-slide { @include harvard-slide-keyframes; } @-webkit-keyframes harvard-slide { @include harvard-slide-keyframes; }
@-moz-keyframes harvard-slide { @include harvard-slide-keyframes; }
@keyframes harvard-slide { @include harvard-slide-keyframes; } @-moz-keyframes harvard-slide { @include harvard-slide-keyframes; }
@keyframes harvard-slide { @include harvard-slide-keyframes; }
// divider left animation // divider left animation
//************************************************************************// //************************************************************************//
...@@ -185,14 +219,17 @@ ...@@ -185,14 +219,17 @@
0% { 0% {
left: 340px; left: 340px;
} }
100% { 100% {
left: 200px; left: 200px;
} }
} }
@-webkit-keyframes divider-left-slide { @include divider-left-slide-keyframes; } @-webkit-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
@-moz-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
@keyframes divider-left-slide { @include divider-left-slide-keyframes; } @-moz-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
@keyframes divider-left-slide { @include divider-left-slide-keyframes; }
// divider right animation // divider right animation
//************************************************************************// //************************************************************************//
...@@ -207,14 +244,17 @@ ...@@ -207,14 +244,17 @@
0% { 0% {
left: 340px; left: 340px;
} }
100% { 100% {
left: 480px; left: 480px;
} }
} }
@-webkit-keyframes divider-right-slide { @include divider-right-slide-keyframes; } @-webkit-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
@-moz-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
@keyframes divider-right-slide { @include divider-right-slide-keyframes; } @-moz-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
@keyframes divider-right-slide { @include divider-right-slide-keyframes; }
// video appear animation // video appear animation
//************************************************************************// //************************************************************************//
...@@ -230,17 +270,21 @@ ...@@ -230,17 +270,21 @@
bottom: -270px; bottom: -270px;
opacity: 0.9; opacity: 0.9;
} }
80% { 80% {
opacity: 1.0; opacity: 1;
} }
100% { 100% {
bottom: 0px; bottom: 0;
} }
} }
@-webkit-keyframes video-appear { @include video-appear-keyframes; } @-webkit-keyframes video-appear { @include video-appear-keyframes; }
@-moz-keyframes video-appear { @include video-appear-keyframes; }
@keyframes video-appear { @include video-appear-keyframes; } @-moz-keyframes video-appear { @include video-appear-keyframes; }
@keyframes video-appear { @include video-appear-keyframes; }
// quick fade-in animation to get user attention // quick fade-in animation to get user attention
//************************************************************************// //************************************************************************//
...@@ -251,16 +295,19 @@ ...@@ -251,16 +295,19 @@
@mixin fade-in-keyframes { @mixin fade-in-keyframes {
0% { 0% {
opacity: 0.0; opacity: 0;
} }
100% { 100% {
opacity: 1.0; opacity: 1;
} }
} }
@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; } @-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; }
@-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
@keyframes fade-in-animation{ @include fade-in-keyframes; } @-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
@keyframes fade-in-animation{ @include fade-in-keyframes; }
// +utility animations // +utility animations
...@@ -272,7 +319,7 @@ ...@@ -272,7 +319,7 @@
} }
25%, 75% { 25%, 75% {
opacity: 1.0; opacity: 1;
} }
100% { 100% {
......
lms/static/sass/base/_base.scss
...@@ -22,7 +22,7 @@ body { ...@@ -22,7 +22,7 @@ body {
// removing the outline on any element that we make programmatically focusable // removing the outline on any element that we make programmatically focusable
[tabindex="-1"] { [tabindex="-1"] {
outline: none; outline: none;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
...@@ -83,6 +83,7 @@ p { ...@@ -83,6 +83,7 @@ p {
font: inherit; font: inherit;
font-weight: inherit; font-weight: inherit;
text-decoration: none; text-decoration: none;
@include transition(all 0.1s linear 0s); @include transition(all 0.1s linear 0s);
&:hover, &:focus { &:hover, &:focus {
...@@ -96,6 +97,7 @@ a, a:visited { ...@@ -96,6 +97,7 @@ a, a:visited {
color: $link-color; color: $link-color;
font: inherit; font: inherit;
text-decoration: none; text-decoration: none;
@include transition(all 0.1s linear 0s); @include transition(all 0.1s linear 0s);
&:hover, &:hover,
...@@ -106,6 +108,7 @@ a, a:visited { ...@@ -106,6 +108,7 @@ a, a:visited {
&:disabled, &.is-disabled, &.disabled { &:disabled, &.is-disabled, &.disabled {
@extend %ui-disabled; @extend %ui-disabled;
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -124,6 +127,7 @@ a, a:visited { ...@@ -124,6 +127,7 @@ a, a:visited {
.container { .container {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 auto 0; margin: 0 auto 0;
padding: ($baseline*2) 0; padding: ($baseline*2) 0;
max-width: grid-width(12); max-width: grid-width(12);
...@@ -132,7 +136,7 @@ a, a:visited { ...@@ -132,7 +136,7 @@ a, a:visited {
} }
.no-min-scale { .no-min-scale {
min-width: 0px !important; min-width: 0 !important;
} }
span.edx { span.edx {
...@@ -142,6 +146,7 @@ span.edx { ...@@ -142,6 +146,7 @@ span.edx {
.static-container { .static-container {
@include clearfix(); @include clearfix();
margin: 0 auto 0; margin: 0 auto 0;
max-width: 1200px; max-width: 1200px;
padding: ($baseline*3) 0 ($baseline*6); padding: ($baseline*3) 0 ($baseline*6);
...@@ -181,6 +186,7 @@ span.edx { ...@@ -181,6 +186,7 @@ span.edx {
.loading-animation { .loading-animation {
@include animation(fa-spin 2s infinite linear); @include animation(fa-spin 2s infinite linear);
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
...@@ -210,61 +216,65 @@ mark { ...@@ -210,61 +216,65 @@ mark {
} }
.help-tab { .help-tab {
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
@include transform-origin(0 0); @include transform-origin(0 0);
@extend %ui-depth2;
@extend %ui-print-excluded; @extend %ui-depth2;
position: fixed; @extend %ui-print-excluded;
top: 250px;
left: 0; position: fixed;
top: 250px;
a:link, left: 0;
a:visited {
border: 1px solid $gray-l3; a:link,
border-top-style: none; a:visited {
border-radius: 0 0 ($baseline/2) ($baseline/2); border: 1px solid $gray-l3;
background: transparentize($white, 0.25); border-top-style: none;
color: transparentize($base-font-color, 0.25); border-radius: 0 0 ($baseline/2) ($baseline/2);
font-weight: bold; background: transparentize($white, 0.25);
text-decoration: none; color: transparentize($base-font-color, 0.25);
padding: 6px 22px 11px; font-weight: bold;
display: inline-block; text-decoration: none;
padding: 6px 22px 11px;
&:hover, display: inline-block;
&:focus {
color: $white; &:hover,
background: $link-color; &:focus {
} color: $white;
background: $link-color;
} }
}
} }
.help-buttons { .help-buttons {
padding: ($baseline/2) ($baseline*2.5); padding: ($baseline/2) ($baseline*2.5);
text-align: center; text-align: center;
button { button {
@extend %btn-secondary-blue-outline; @extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial; margin: .5rem 0;
text-shadow: none; font-weight: initial;
letter-spacing: initial !important; text-shadow: none;
text-transform: normal !important; letter-spacing: initial !important;
vertical-align: initial; text-transform: normal !important;
vertical-align: initial;
&:hover, &:hover,
&:focus { &:focus {
background: $link-color !important; background: $link-color !important;
color: $white; color: $white;
box-shadow: none !important; box-shadow: none !important;
text-shadow: none !important; text-shadow: none !important;
}
} }
}
} }
#feedback_form { #feedback_form {
input, textarea { input, textarea {
font: normal 1em/1.4em $sans-serif; font: normal 1em/1.4em $sans-serif;
} }
textarea[name="details"] { textarea[name="details"] {
height: 150px; height: 150px;
} }
......
lms/static/sass/base/_extends.scss
%faded-hr-divider { %faded-hr-divider {
@include background-image($faded-hr-image-1); @include background-image($faded-hr-image-1);
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
%faded-hr-divider-medium { %faded-hr-divider-medium {
@include background-image($faded-hr-image-4); @include background-image($faded-hr-image-4);
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
%faded-hr-divider-light { %faded-hr-divider-light {
@include background-image($faded-hr-image-5); @include background-image($faded-hr-image-5);
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
%faded-vertical-divider { %faded-vertical-divider {
@include background-image($faded-hr-image-1); @include background-image($faded-hr-image-1);
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
%faded-vertical-divider-light { %faded-vertical-divider-light {
@include background-image($faded-hr-image-6); @include background-image($faded-hr-image-6);
background: transparent; background: transparent;
height: 100%; height: 100%;
width: 1px; width: 1px;
...@@ -31,10 +36,12 @@ ...@@ -31,10 +36,12 @@
%vertical-divider { %vertical-divider {
@extend %faded-vertical-divider; @extend %faded-vertical-divider;
position: relative; position: relative;
&::after { &::after {
@extend %faded-vertical-divider-light; @extend %faded-vertical-divider-light;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -44,11 +51,14 @@ ...@@ -44,11 +51,14 @@
%horizontal-divider { %horizontal-divider {
border: none; border: none;
@extend %faded-hr-divider; @extend %faded-hr-divider;
position: relative; position: relative;
&::after { &::after {
@extend %faded-hr-divider-light; @extend %faded-hr-divider-light;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -58,11 +68,13 @@ ...@@ -58,11 +68,13 @@
%fade-right-hr-divider { %fade-right-hr-divider {
@include background-image($faded-hr-image-2); @include background-image($faded-hr-image-2);
border: none; border: none;
} }
%fade-left-hr-divider { %fade-left-hr-divider {
@include background-image($faded-hr-image-3); @include background-image($faded-hr-image-3);
border: none; border: none;
} }
...@@ -134,6 +146,7 @@ ...@@ -134,6 +146,7 @@
%ui-deprecated { %ui-deprecated {
@extend %t-weight4; @extend %t-weight4;
background: tint($warning-color, 85%); background: tint($warning-color, 85%);
padding: ($baseline/5) ($baseline/2); padding: ($baseline/5) ($baseline/2);
color: shade($warning-color, 45%); color: shade($warning-color, 45%);
...@@ -142,6 +155,7 @@ ...@@ -142,6 +155,7 @@
// extends - content - text overflow by ellipsis // extends - content - text overflow by ellipsis
%cont-truncated { %cont-truncated {
@include box-sizing(border-box); @include box-sizing(border-box);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
......
lms/static/sass/base/_font_face.scss
// LMS - assets - fonts // LMS - assets - fonts
// ==================== // ====================
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
} }
lms/static/sass/base/_headings.scss
...@@ -17,74 +17,74 @@ $headings-base-font-family: inherit; ...@@ -17,74 +17,74 @@ $headings-base-font-family: inherit;
$headings-base-color: $gray-d2; $headings-base-color: $gray-d2;
%reset-headings { %reset-headings {
margin: 0; margin: 0;
font-weight: $headings-font-weight-normal; font-weight: $headings-font-weight-normal;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
color: $headings-base-color; color: $headings-base-color;
} }
%hd-1 { %hd-1 {
margin-bottom: 1.41575em; margin-bottom: 1.41575em;
font-size: 2em; font-size: 2em;
line-height: 1.4em; line-height: 1.4em;
} }
%hd-2 { %hd-2 {
font-size: 1.5em; font-size: 1.5em;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
line-height: 1.4em; line-height: 1.4em;
} }
%hd-3 { %hd-3 {
margin-bottom: ($baseline / 2); margin-bottom: ($baseline / 2);
font-size: 1.35em; font-size: 1.35em;
font-weight: $headings-font-weight-normal; font-weight: $headings-font-weight-normal;
line-height: 1.4em; line-height: 1.4em;
} }
%hd-4 { %hd-4 {
margin-bottom: ($baseline / 2); margin-bottom: ($baseline / 2);
font-size: 1.25em; font-size: 1.25em;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
line-height: 1.4em; line-height: 1.4em;
} }
%hd-5 { %hd-5 {
margin-bottom: ($baseline / 2); margin-bottom: ($baseline / 2);
font-size: 1.1em; font-size: 1.1em;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
line-height: 1.4em; line-height: 1.4em;
} }
%hd-6 { %hd-6 {
margin-bottom: ($baseline / 2); margin-bottom: ($baseline / 2);
font-size: 1em; font-size: 1em;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
line-height: 1.4em; line-height: 1.4em;
} }
%hd-7 { %hd-7 {
margin-bottom: ($baseline / 4); margin-bottom: ($baseline / 4);
font-size: 14px; font-size: 14px;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.6em; line-height: 1.6em;
letter-spacing: 1px; letter-spacing: 1px;
} }
%hd-8 { %hd-8 {
margin-bottom: ($baseline / 8); margin-bottom: ($baseline / 8);
font-size: 12px; font-size: 12px;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.5em; line-height: 1.5em;
letter-spacing: 1px; letter-spacing: 1px;
} }
// let's make these classnames available to the entire LMS! // let's make these classnames available to the entire LMS!
...@@ -97,7 +97,7 @@ $headings-base-color: $gray-d2; ...@@ -97,7 +97,7 @@ $headings-base-color: $gray-d2;
.hd-6, .hd-6,
.hd-7, .hd-7,
.hd-8 { .hd-8 {
@extend %reset-headings; @extend %reset-headings;
} }
...@@ -106,25 +106,25 @@ $headings-base-color: $gray-d2; ...@@ -106,25 +106,25 @@ $headings-base-color: $gray-d2;
// ---------------------------- // ----------------------------
// canned heading classes // canned heading classes
@for $i from 1 through $headings-count { @for $i from 1 through $headings-count {
.hd-#{$i} { .hd-#{$i} {
@extend %hd-#{$i}; @extend %hd-#{$i};
} }
} }
// H3 was problematic in xblocks, we so we'll keep it as it was // H3 was problematic in xblocks, we so we'll keep it as it was
.xblock .xblock { .xblock .xblock {
h2 {
@extend %hd-2;
h2 { font-weight: $headings-font-weight-bold;
@extend %hd-2; // override external modules and xblocks that use inline CSS
font-weight: $headings-font-weight-bold; text-transform: initial;
// override external modules and xblocks that use inline CSS
text-transform: initial;
&.discussion-module-title { &.discussion-module-title {
margin-bottom: 0; margin-bottom: 0;
display: inline-block; display: inline-block;
}
} }
}
} }
lms/static/sass/base/_mixins.scss
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
// mixins - font sizing // mixins - font sizing
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
// font-size: ($sizeValue/10) + rem; // font-size: ($sizeValue/10) + rem;
} }
// mixins - line height // mixins - line height
@mixin line-height($fontSize: auto){ @mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px; line-height: ($fontSize*1.48) + px;
// line-height: (($fontSize/10)*1.48) + rem; // line-height: (($fontSize/10)*1.48) + rem;
} }
// image-replacement hidden text // image-replacement hidden text
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
overflow: hidden; overflow: hidden;
} }
@mixin vertically-and-horizontally-centered ( $height, $width ) { @mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%; left: 50%;
margin-left: -$width / 2; margin-left: -$width / 2;
//margin-top: -$height / 2; //margin-top: -$height / 2;
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
} }
@mixin show-hover-state() { @mixin show-hover-state() {
opacity: 1; opacity: 1;
} }
@function em($pxval, $base: 16) { @function em($pxval, $base: 16) {
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
// theme mixin styles // theme mixin styles
@mixin login_register_h1_style {} @mixin login_register_h1_style {}
@mixin footer_references_style {} @mixin footer_references_style {}
// ==================== // ====================
...@@ -62,12 +63,14 @@ ...@@ -62,12 +63,14 @@
%ui-wrapper { %ui-wrapper {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
} }
// extends - UI - window // extends - UI - window
%ui-window { %ui-window {
@include clearfix(); @include clearfix();
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 2px 1px $shadow-l1; box-shadow: 0 1px 2px 1px $shadow-l1;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -103,7 +106,6 @@ ...@@ -103,7 +106,6 @@
// extends - UI - utility - nth-type style clearing // extends - UI - utility - nth-type style clearing
%wipe-first-child { %wipe-first-child {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
border-top: none; border-top: none;
...@@ -113,7 +115,6 @@ ...@@ -113,7 +115,6 @@
// extends - UI - utility - nth-type style clearing // extends - UI - utility - nth-type style clearing
%wipe-last-child { %wipe-last-child {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
border-bottom: none; border-bottom: none;
...@@ -123,18 +124,18 @@ ...@@ -123,18 +124,18 @@
// extends -hidden elems - screenreaders // extends -hidden elems - screenreaders
%text-sr { %text-sr {
// clip has been deprecated but is still supported // clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px); clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
position: absolute; position: absolute;
margin: -1px; margin: -1px;
height: 1px; height: 1px;
width: 1px; width: 1px;
border: 0; border: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
// ensure there are spaces in sr text // ensure there are spaces in sr text
word-wrap: normal; word-wrap: normal;
} }
// extends - ensures proper contrast for automated checkers // extends - ensures proper contrast for automated checkers
...@@ -174,6 +175,7 @@ ...@@ -174,6 +175,7 @@
// extends - text - text overflow by ellipsis // extends - text - text overflow by ellipsis
%text-truncated { %text-truncated {
@include box-sizing(border-box); @include box-sizing(border-box);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
......
lms/static/sass/base/_reset.scss
...@@ -11,7 +11,7 @@ body { margin: 0; font-size: 1em; line-height: 1.4; } ...@@ -11,7 +11,7 @@ body { margin: 0; font-size: 1em; line-height: 1.4; }
a { color: #005584; } // from the Pattern Library http://ux.edx.org/elements/colors/ a { color: #005584; } // from the Pattern Library http://ux.edx.org/elements/colors/
a:visited { color: #003655; } // from the Pattern Library http://ux.edx.org/elements/colors/ a:visited { color: #003655; } // from the Pattern Library http://ux.edx.org/elements/colors/
a:hover, a:focus { color: #0079BC; } // from the Pattern Library http://ux.edx.org/elements/colors/ a:hover, a:focus { color: #0079bc; } // from the Pattern Library http://ux.edx.org/elements/colors/
abbr[title] { border-bottom: 1px dotted; } abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; } b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; } blockquote { margin: 1em 40px; }
...@@ -23,7 +23,7 @@ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new ...@@ -23,7 +23,7 @@ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; } q { quotes: none; }
q:before, q:after { content: ""; content: none; } q::before, q::after { content: ""; content: none; }
small { font-size: 85%; } small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; } sup { top: -0.5em; }
...@@ -78,20 +78,21 @@ td { vertical-align: top; } ...@@ -78,20 +78,21 @@ td { vertical-align: top; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; } .invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix:after { clear: both; } .clearfix::after { clear: both; }
.clearfix { *zoom: 1; } .clearfix { *zoom: 1; }
@media print { @media print {
* { background: transparent; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } * { background: transparent; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
html, body { background: transparent !important; } html, body { background: transparent !important; }
a, a:visited { text-decoration: underline; } a, a:visited { text-decoration: underline; }
abbr[title]:after { content: " (" attr(title) ")"; } abbr[title]::after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; } .ir a::after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } thead { display: table-header-group; }
tr, img { page-break-inside: avoid; } tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; } img { max-width: 100% !important; }
@page { margin: 1cm 1.2cm 2cm; } @page { margin: 1cm 1.2cm 2cm; }
p, h2, h3 { orphans: 3; widows: 3; } p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; } h2, h3 { page-break-after: avoid; }
......
lms/static/sass/base/_utilities.scss
...@@ -8,5 +8,5 @@ ...@@ -8,5 +8,5 @@
.sr-is-focusable, .sr-is-focusable,
.sr-is-focusable:focus, .sr-is-focusable:focus,
.sr-is-focusable:active { .sr-is-focusable:active {
@extend %no-outline; @extend %no-outline;
} }
lms/static/sass/bootstrap/_legacy.scss
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
// Support .sr as a synonym for .sr-only // Support .sr as a synonym for .sr-only
.sr { .sr {
@extend .sr-only; @extend .sr-only;
} }
// ---------------------------- // ----------------------------
......
lms/static/sass/course/_auto-cert.scss
.wrapper-msg.wrapper-auto-cert { .wrapper-msg.wrapper-auto-cert {
@include margin(0, 0, 0, 0); // Overrides .wrapper-msg @include margin(0, 0, 0, 0); // Overrides .wrapper-msg
@include padding(0, 0, 0, 0); // Overrides .wrapper-msg @include padding(0, 0, 0, 0); // Overrides .wrapper-msg
background: none; // Overrides .wrapper-msg
background: none; // Overrides .wrapper-msg
.errors-info {
margin-top: $baseline; .errors-info {
margin-bottom: $baseline; margin-top: $baseline;
color: $error-color; margin-bottom: $baseline;
} color: $error-color;
}
.auto-cert-message {
margin: $baseline 0;
padding: $baseline;
border-left: 3px solid $m-blue-d1;
background: $gray-l5;
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
.auto-cert-message { text-shadow: none;
margin: $baseline 0;
padding: $baseline;
border-left: 3px solid $m-blue-d1;
background: $gray-l5;
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
text-shadow: none;
}
}
} }
}
} }
}
} }
lms/static/sass/course/_info.scss
...@@ -5,8 +5,9 @@ $notification-highlight-border-color: $uxpl-green-base !default; ...@@ -5,8 +5,9 @@ $notification-highlight-border-color: $uxpl-green-base !default;
$lms-border-color: $uxpl-gray-background !default; $lms-border-color: $uxpl-gray-background !default;
$notification-background: rgb(255, 255, 255) !default $notification-background: rgb(255, 255, 255) !default
.home { .home{
@include clearfix(); @include clearfix();
max-width: 1140px; max-width: 1140px;
margin: 0 auto; margin: 0 auto;
padding: $baseline $baseline ($baseline/2) $baseline; padding: $baseline $baseline ($baseline/2) $baseline;
...@@ -31,6 +32,7 @@ $notification-background: rgb(255, 255, 255) !default ...@@ -31,6 +32,7 @@ $notification-background: rgb(255, 255, 255) !default
.page-header-secondary { .page-header-secondary {
@include float(right); @include float(right);
display: inline-block; display: inline-block;
margin: ($baseline/2); margin: ($baseline/2);
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
...@@ -39,18 +41,20 @@ $notification-background: rgb(255, 255, 255) !default ...@@ -39,18 +41,20 @@ $notification-background: rgb(255, 255, 255) !default
.last-accessed-link { .last-accessed-link {
@extend %t-title6; @extend %t-title6;
color: $very-light-text; color: $very-light-text;
} }
} }
} }
div.info-wrapper { div.info-wrapper {
background-color: $homepage-background; background-color: $homepage-background;
section.updates { section.updates {
@extend .content; @extend .content;
@include padding-left($baseline); @include padding-left($baseline);
line-height: lh(); line-height: lh();
width: 100%; width: 100%;
display: block; display: block;
...@@ -120,6 +124,7 @@ div.info-wrapper { ...@@ -120,6 +124,7 @@ div.info-wrapper {
border-radius:3px; border-radius:3px;
background-color: $white; background-color: $white;
border:1px solid transparent; border:1px solid transparent;
&:hover { &:hover {
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
} }
...@@ -127,8 +132,11 @@ div.info-wrapper { ...@@ -127,8 +132,11 @@ div.info-wrapper {
.show-older-updates { .show-older-updates {
@extend %btn-pl-white-base; @extend %btn-pl-white-base;
padding: ($baseline/2); padding: ($baseline/2);
@include font-size(14); @include font-size(14);
width: 100%; width: 100%;
display: block; display: block;
text-align: center; text-align: center;
...@@ -144,6 +152,7 @@ div.info-wrapper { ...@@ -144,6 +152,7 @@ div.info-wrapper {
> li,article { > li,article {
@extend .clearfix; @extend .clearfix;
padding: $baseline; padding: $baseline;
list-style-type: none; list-style-type: none;
margin-bottom: lh(1.5); margin-bottom: lh(1.5);
...@@ -157,9 +166,11 @@ div.info-wrapper { ...@@ -157,9 +166,11 @@ div.info-wrapper {
.date { .date {
@extend %t-title9; @extend %t-title9;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
text-transform: none; text-transform: none;
background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat; background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat;
@include padding-left($baseline); @include padding-left($baseline);
@include float(left); @include float(left);
} }
...@@ -167,7 +178,9 @@ div.info-wrapper { ...@@ -167,7 +178,9 @@ div.info-wrapper {
.toggle-visibility-button { .toggle-visibility-button {
@extend %t-title9; @extend %t-title9;
@include float(right); @include float(right);
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background: none; background: none;
...@@ -185,13 +198,14 @@ div.info-wrapper { ...@@ -185,13 +198,14 @@ div.info-wrapper {
section.update-description { section.update-description {
section { section {
&.primary { &.primary {
border: 1px solid #DDD; border: 1px solid #ddd;
background: $gray-l6; background: $gray-l6;
padding: 20px; padding: 20px;
p { p {
font-weight: bold; font-weight: bold;
} }
.author { .author {
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
...@@ -225,7 +239,9 @@ div.info-wrapper { ...@@ -225,7 +239,9 @@ div.info-wrapper {
section.handouts { section.handouts {
padding: 20px 30px; padding: 20px 30px;
margin: 0; margin: 0;
@extend .sidebar; @extend .sidebar;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
...@@ -245,15 +261,17 @@ div.info-wrapper { ...@@ -245,15 +261,17 @@ div.info-wrapper {
} }
} }
&:after { &::after {
left: -1px; left: -1px;
right: auto; right: auto;
} }
.handouts-header { .handouts-header {
@include text-align(left); @include text-align(left);
@extend %t-strong; @extend %t-strong;
@extend %t-title6; @extend %t-title6;
margin-bottom: 0; margin-bottom: 0;
padding: 12px 26px 10px 0; padding: 12px 26px 10px 0;
} }
...@@ -264,6 +282,7 @@ div.info-wrapper { ...@@ -264,6 +282,7 @@ div.info-wrapper {
ol { ol {
margin-bottom: 14px; margin-bottom: 14px;
li { li {
@include text-align(left); @include text-align(left);
...@@ -281,6 +300,7 @@ div.info-wrapper { ...@@ -281,6 +300,7 @@ div.info-wrapper {
&.expandable, &.expandable,
&.collapsable { &.collapsable {
margin: 0 16px 14px 16px; margin: 0 16px 14px 16px;
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
h4 { h4 {
...@@ -303,7 +323,6 @@ div.info-wrapper { ...@@ -303,7 +323,6 @@ div.info-wrapper {
} }
&.multiple { &.multiple {
a { a {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
...@@ -354,12 +373,13 @@ div.info-wrapper { ...@@ -354,12 +373,13 @@ div.info-wrapper {
+ h4 { + h4 {
@extend a:hover; @extend a:hover;
text-decoration: underline; text-decoration: underline;
} }
} }
&.expandable-hitarea { &.expandable-hitarea {
background-position: -72px 0px; background-position: -72px 0;
} }
&.collapsable-hitarea { &.collapsable-hitarea {
...@@ -383,7 +403,7 @@ div.info-wrapper { ...@@ -383,7 +403,7 @@ div.info-wrapper {
a { a {
padding-right: 8px; padding-right: 8px;
&:before { &::before {
color: $gray-l3; color: $gray-l3;
content: "•"; content: "•";
display: inline-block; display: inline-block;
...@@ -391,7 +411,7 @@ div.info-wrapper { ...@@ -391,7 +411,7 @@ div.info-wrapper {
} }
&:first-child { &:first-child {
&:before { &::before {
content: ""; content: "";
padding-right: 0; padding-right: 0;
} }
......
lms/static/sass/course/_profile.scss
...@@ -3,17 +3,19 @@ ...@@ -3,17 +3,19 @@
.user-info { .user-info {
@extend .sidebar; @extend .sidebar;
border-left: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3;
border-radius: 0px 4px 4px 0; border-radius: 0 4px 4px 0;
border-right: 0; border-right: 0;
&:after { &::after {
left: -1px; left: -1px;
right: auto; right: auto;
} }
header { header {
@extend .bottom-border; @extend .bottom-border;
margin: 0; margin: 0;
padding: lh(0.5); padding: lh(0.5);
...@@ -34,6 +36,7 @@ ...@@ -34,6 +36,7 @@
padding: lh(0.5) 0 lh(0.5) lh(0.5); padding: lh(0.5) 0 lh(0.5) lh(0.5);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@include transition(none); @include transition(none);
div#location_sub, div#language_sub { div#location_sub, div#language_sub {
...@@ -45,9 +48,9 @@ ...@@ -45,9 +48,9 @@
} }
input { input {
&[type="text"] { &[type="text"] {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: lh(0.5) 0; margin: lh(0.5) 0;
width: 100%; width: 100%;
} }
...@@ -118,7 +121,7 @@ ...@@ -118,7 +121,7 @@
#change_password_pop { #change_password_pop {
border-bottom: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
box-shadow: 0 1px 0 #eee; box-shadow: 0 1px 0 #eee;
color: #4D4D4D; color: #4d4d4d;
padding: 7px lh(); padding: 7px lh();
h2 { h2 {
...@@ -136,10 +139,12 @@ ...@@ -136,10 +139,12 @@
header { header {
@extend .clearfix; @extend .clearfix;
@extend h1.top-header; @extend h1.top-header;
margin-bottom: lh(); margin-bottom: lh();
.hd { .hd {
@include float(left); @include float(left);
font-size: 1em; font-size: 1em;
font-weight: 100; font-weight: 100;
margin: 0; margin: 0;
...@@ -155,9 +160,11 @@ ...@@ -155,9 +160,11 @@
#course-success { #course-success {
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
text-align: center; text-align: center;
> a { > a {
@include button(simple, $button-color); @include button(simple, $button-color);
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 3px; border-radius: 3px;
font: normal 15px/1.6rem $sans-serif; font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0; letter-spacing: 0;
...@@ -178,10 +185,12 @@ ...@@ -178,10 +185,12 @@
> .credit-eligibility{ > .credit-eligibility{
border-top: 1px solid $lightGrey; border-top: 1px solid $lightGrey;
margin-top: lh(); margin-top: lh();
@include padding-left(0); @include padding-left(0);
> .credit-eligibility-container { > .credit-eligibility-container {
padding: lh(); padding: lh();
> .credit-help { > .credit-help {
display: inline-block; display: inline-block;
background: $blue; background: $blue;
...@@ -192,42 +201,57 @@ ...@@ -192,42 +201,57 @@
border-radius: lh(0.9); border-radius: lh(0.9);
border-color: $white; border-color: $white;
text-shadow: None; text-shadow: None;
@include padding-left(0.2em); @include padding-left(0.2em);
} }
> .detail-collapse{ > .detail-collapse{
border: none; border: none;
box-shadow: none; box-shadow: none;
background: $white; background: $white;
padding: 0; padding: 0;
color: $blue; color: $blue;
> i { > i {
padding: lh(0.25); padding: lh(0.25);
} }
> span{ > span{
color: inherit; color: inherit;
} }
} }
> .requirement-container{
> .requirement-container {
padding: lh(); padding: lh();
> .requirement{ > .requirement{
border-bottom: 1px solid $lightGrey; border-bottom: 1px solid $lightGrey;
padding: lh(0.5); padding: lh(0.5);
> .requirement-name { > .requirement-name {
width: bi-app-invert-percentage(40%); width: bi-app-invert-percentage(40%);
display: inline-block; display: inline-block;
} }
> .requirement-status{ > .requirement-status{
width: bi-app-invert-percentage(60%); width: bi-app-invert-percentage(60%);
@include float(right); @include float(right);
display: inline-block; display: inline-block;
.fa-times{ .fa-times{
@extend %t-icon6; @extend %t-icon6;
color: $alert-color; color: $alert-color;
} }
.fa-check{ .fa-check{
@extend %t-icon6; @extend %t-icon6;
color: $success-color; color: $success-color;
} }
> .not-achieve{ > .not-achieve{
color: $darkGrey; color: $darkGrey;
} }
...@@ -244,18 +268,20 @@ ...@@ -244,18 +268,20 @@
> section { > section {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
display: table; display: table;
padding: lh() 0; padding: lh() 0;
width: 100%; width: 100%;
&:last-child { &:last-child {
border-bottom: 0px; border-bottom: 0;
} }
.hd { .hd {
@include border-right(1px dashed #ddd); @include border-right(1px dashed #ddd);
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
letter-spacing: 0; letter-spacing: 0;
margin: 0; margin: 0;
...@@ -268,7 +294,9 @@ ...@@ -268,7 +294,9 @@
.sections { .sections {
display: inline-block; display: inline-block;
@include padding-left(flex-gutter(9)); @include padding-left(flex-gutter(9));
width: flex-grid(7, 9); width: flex-grid(7, 9);
> div { > div {
...@@ -310,7 +338,9 @@ ...@@ -310,7 +338,9 @@
display: inline-block; display: inline-block;
width: auto; width: auto;
margin: initial; margin: initial;
@include margin-right($baseline); @include margin-right($baseline);
border: initial; border: initial;
padding: initial; padding: initial;
font-size: em(14); font-size: em(14);
...@@ -319,8 +349,10 @@ ...@@ -319,8 +349,10 @@
dd { dd {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@include margin-right($baseline); @include margin-right($baseline);
@include padding-right(1em); @include padding-right(1em);
font-size: em(14); font-size: em(14);
font-weight: normal; font-weight: normal;
color: $gray-d2; color: $gray-d2;
......
lms/static/sass/course/_student-notes.scss
...@@ -26,7 +26,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -26,7 +26,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
%notes-tab-control { %notes-tab-control {
@include transition(none); @include transition(none);
@extend %shame-link-base; @extend %shame-link-base;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-bottom: ($baseline/5) solid $transparent; border-bottom: ($baseline/5) solid $transparent;
...@@ -38,11 +40,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -38,11 +40,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// -------------------- // --------------------
.wrapper-student-notes { .wrapper-student-notes {
@include clearfix(); @include clearfix();
padding-bottom: $baseline; padding-bottom: $baseline;
.student-notes { .student-notes {
@include clearfix(); @include clearfix();
@extend .content; // needed extend carried over from course handouts UI, but should be cleaned up @extend .content; // needed extend carried over from course handouts UI, but should be cleaned up
width: 100%; width: 100%;
} }
} }
...@@ -51,20 +56,24 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -51,20 +56,24 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// -------------------- // --------------------
.title-search-container { .title-search-container {
@include clearfix(); @include clearfix();
margin-bottom: $baseline; margin-bottom: $baseline;
.wrapper-title { .wrapper-title {
@include float(left); @include float(left);
width: flex-grid(7,12); width: flex-grid(7,12);
.page-title { .page-title {
@extend %t-title4; @extend %t-title4;
@extend %t-weight1; @extend %t-weight1;
margin-bottom: 0; margin-bottom: 0;
.page-subtitle { .page-subtitle {
@extend %t-title7; @extend %t-title7;
@extend %t-weight2; @extend %t-weight2;
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $gray-l1; color: $gray-l1;
...@@ -75,7 +84,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -75,7 +84,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.wrapper-notes-search { .wrapper-notes-search {
@include float(right); @include float(right);
width: flex-grid(5,12); width: flex-grid(5,12);
@include text-align(right); @include text-align(right);
} }
...@@ -86,8 +97,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -86,8 +97,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.search-notes-input { .search-notes-input {
@extend %t-demi-strong; @extend %t-demi-strong;
position: relative; position: relative;
@include right(-6px); // manually positioning input right next to submit @include right(-6px); // manually positioning input right next to submit
width: 55%; width: 55%;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
color: $gray-d3; color: $gray-d3;
...@@ -96,6 +110,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -96,6 +110,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.search-notes-submit { .search-notes-submit {
@extend %btn-inherited-primary; @extend %btn-inherited-primary;
@extend %t-action2; @extend %t-action2;
padding: 8px $baseline 9px $baseline; // manually syncing up height with search input padding: 8px $baseline 9px $baseline; // manually syncing up height with search input
} }
} }
...@@ -111,6 +126,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -111,6 +126,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.course-title, .tags-title { .course-title, .tags-title {
@extend %t-title6; @extend %t-title6;
@extend %t-weight4; @extend %t-weight4;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
color: $gray-d3; color: $gray-d3;
} }
...@@ -118,6 +134,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -118,6 +134,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.course-subtitle { .course-subtitle {
@extend %t-title7; @extend %t-title7;
@extend %t-weight4; @extend %t-weight4;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
border-bottom: $divider-visual-tertiary; border-bottom: $divider-visual-tertiary;
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
...@@ -132,10 +149,12 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -132,10 +149,12 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// individual note // individual note
.note { .note {
@include clearfix(); @include clearfix();
margin: ($baseline*1.5) 0; margin: ($baseline*1.5) 0;
.wrapper-note-excerpts { .wrapper-note-excerpts {
@include transition(box-shadow $tmg-avg ease-in-out 0, border-color $tmg-avg ease-in-out 0); @include transition(box-shadow $tmg-avg ease-in-out 0, border-color $tmg-avg ease-in-out 0);
display: inline-block; display: inline-block;
width: flex-grid(9, 12); width: flex-grid(9, 12);
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
...@@ -144,6 +163,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -144,6 +163,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// note - highlighted content // note - highlighted content
.note-excerpt { .note-excerpt {
@include transition(background-color $tmg-avg ease-in-out 0); @include transition(background-color $tmg-avg ease-in-out 0);
padding: $baseline; padding: $baseline;
background: $student-notes-highlight-color; background: $student-notes-highlight-color;
...@@ -158,30 +178,36 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -158,30 +178,36 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
@extend %t-copy-sub1; @extend %t-copy-sub1;
@extend %t-weight2; @extend %t-weight2;
@extend %shame-link-text; @extend %shame-link-text;
display: inline; display: inline;
@include margin-left($baseline/4); @include margin-left($baseline/4);
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
&:active { &:active {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
} }
} }
// note - comment made on highlighted content // note - comment made on highlighted content
.note-comments { .note-comments {
@extend %ui-no-list; @extend %ui-no-list;
border-top: ($baseline/5) solid $student-notes-highlight-color-focus; border-top: ($baseline/5) solid $student-notes-highlight-color-focus;
.note-comment { .note-comment {
@include transition(color $tmg-avg ease-in-out 0); @include transition(color $tmg-avg ease-in-out 0);
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
color: $gray; color: $gray;
.note-comment-title { .note-comment-title {
@extend %t-title8; @extend %t-title8;
letter-spacing: ($baseline/20); letter-spacing: ($baseline/20);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
color: $gray-l2; color: $gray-l2;
...@@ -192,6 +218,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -192,6 +218,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.note-comment-ol { .note-comment-ol {
@extend %t-copy-sub1; @extend %t-copy-sub1;
@extend %t-weight2; @extend %t-weight2;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: transparent; background: transparent;
...@@ -218,6 +245,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -218,6 +245,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// note reference // note reference
.reference { .reference {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: inline-block; display: inline-block;
width: flex-grid(3, 12); width: flex-grid(3, 12);
vertical-align: top; vertical-align: top;
...@@ -229,6 +257,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -229,6 +257,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.reference-title { .reference-title {
@extend %t-title8; @extend %t-title8;
@extend %t-weight3; @extend %t-weight3;
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: ($baseline/20); letter-spacing: ($baseline/20);
...@@ -242,6 +271,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -242,6 +271,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.reference-meta { .reference-meta {
@extend %t-weight2; @extend %t-weight2;
color: $m-gray-d2; color: $m-gray-d2;
} }
...@@ -254,26 +284,25 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -254,26 +284,25 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
} }
} }
// Put commas between tags. // Put commas between tags.
span.reference-meta.reference-tags:after { span.reference-meta.reference-tags::after {
content: ","; content: ",";
color: $m-gray-d2; color: $m-gray-d2;
} }
// But not after the last tag. // But not after the last tag.
span.reference-meta.reference-tags:last-child:after { span.reference-meta.reference-tags:last-child::after {
content: ""; content: "";
} }
// needed for poor base LMS styling scope // needed for poor base LMS styling scope
a.reference-meta { a.reference-meta {
@extend %shame-link-text; @extend %shame-link-text;
} }
} }
} }
// STATE: hover/focus // STATE: hover/focus
&:hover, &:focus { &:hover, &:focus {
.wrapper-note-excerpts { .wrapper-note-excerpts {
box-shadow: 0 2px 0 1px $shadow-l2; box-shadow: 0 2px 0 1px $shadow-l2;
border-color: $gray-l4; border-color: $gray-l4;
...@@ -294,9 +323,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -294,9 +323,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// +tabbed views // +tabbed views
// -------------------- // --------------------
.wrapper-tabs { .wrapper-tabs {
.tab-panel, .inline-error, .ui-loading { .tab-panel, .inline-error, .ui-loading {
@extend %no-outline; @extend %no-outline;
border-top: $divider-visual-primary; border-top: $divider-visual-primary;
.listing-tools { .listing-tools {
...@@ -321,6 +350,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -321,6 +350,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tab-list { .tab-list {
@include clearfix(); @include clearfix();
position: relative; position: relative;
top: ($baseline/5); top: ($baseline/5);
...@@ -331,16 +361,21 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -331,16 +361,21 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tabs-label { .tabs-label {
@extend %hd-lv5; @extend %hd-lv5;
margin-bottom: 0; margin-bottom: 0;
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 0;
@include padding-right($baseline); @include padding-right($baseline);
color: $gray-l2; color: $gray-l2;
font-weight: $font-semibold !important; // needed for poor base LMS styling scope font-weight: $font-semibold !important; // needed for poor base LMS styling scope
} }
.tabs { .tabs {
@include clearfix(); @include clearfix();
@extend %ui-no-list; @extend %ui-no-list;
position: relative; position: relative;
bottom: -($baseline/4); bottom: -($baseline/4);
} }
...@@ -351,6 +386,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -351,6 +386,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tab-label { .tab-label {
@extend %notes-tab-control; @extend %notes-tab-control;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
text-align: center; text-align: center;
...@@ -361,7 +397,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -361,7 +397,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// STATE: active/current tab being viewed // STATE: active/current tab being viewed
&.is-active { &.is-active {
.tab-label { .tab-label {
border-bottom-color: $gray-d3; border-bottom-color: $gray-d3;
color: $gray-d3; color: $gray-d3;
...@@ -376,8 +411,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -376,8 +411,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// CASE: tab-label can be closed // CASE: tab-label can be closed
.action-close { .action-close {
@extend %notes-tab-control; @extend %notes-tab-control;
position: relative; position: relative;
@include left(-($baseline*0.75)); @include left(-($baseline*0.75));
padding: ($baseline/2); padding: ($baseline/2);
} }
} }
...@@ -390,6 +428,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -390,6 +428,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
#no-results-panel { #no-results-panel {
p { p {
@extend %t-copy-lead1; @extend %t-copy-lead1;
margin: ($baseline*1.5) 0; margin: ($baseline*1.5) 0;
} }
} }
...@@ -410,6 +449,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -410,6 +449,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.placeholder-title { .placeholder-title {
@extend %hd-lv3; @extend %hd-lv3;
margin-bottom: $baseline; margin-bottom: $baseline;
text-transform: none; // reset needed for poor h2 element styling text-transform: none; // reset needed for poor h2 element styling
letter-spacing: 0; // reset needed for poor h2 element styling letter-spacing: 0; // reset needed for poor h2 element styling
...@@ -423,6 +463,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -423,6 +463,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
li { li {
@extend %wipe-last-child; @extend %wipe-last-child;
display: block; display: block;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
......
lms/static/sass/course/_syllabus.scss
div.syllabus { div.syllabus {
padding: 2em 2.5em; padding: 2em 2.5em;
text-align: center; text-align: center;
h1 { h1 {
...@@ -9,13 +7,12 @@ div.syllabus { ...@@ -9,13 +7,12 @@ div.syllabus {
} }
.notes { .notes {
margin: 0px auto 20px; margin: 0 auto 20px;
} }
table { table {
table-layout: auto; table-layout: auto;
text-align: left; text-align: left;
margin: ($baseline/2) 0; margin: ($baseline/2) 0;
thead { thead {
...@@ -49,7 +46,7 @@ div.syllabus { ...@@ -49,7 +46,7 @@ div.syllabus {
} }
&.week_separator { &.week_separator {
padding: 0px !important; padding: 0 !important;
hr { hr {
margin: ($baseline/2); margin: ($baseline/2);
......
lms/static/sass/course/_tabs.scss
div.static_tab_wrapper { div.static_tab_wrapper {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 2em 2.5em; padding: 2em 2.5em;
h1 { h1 {
...@@ -7,7 +8,7 @@ div.static_tab_wrapper { ...@@ -7,7 +8,7 @@ div.static_tab_wrapper {
} }
section { section {
margin: 0px 0px 20px; margin: 0 0 20px;
} }
@media print { @media print {
......
lms/static/sass/course/_textbook.scss
...@@ -2,6 +2,7 @@ div.book-wrapper { ...@@ -2,6 +2,7 @@ div.book-wrapper {
max-width: 1150px; max-width: 1150px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
/*background-color: $white;*/ /*background-color: $white;*/
#open_close_accordion { #open_close_accordion {
...@@ -20,7 +21,9 @@ div.book-wrapper { ...@@ -20,7 +21,9 @@ div.book-wrapper {
section.book-sidebar { section.book-sidebar {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: ($baseline/2) 0; padding: ($baseline/2) 0;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
...@@ -28,7 +31,7 @@ div.book-wrapper { ...@@ -28,7 +31,7 @@ div.book-wrapper {
width: 180px; width: 180px;
#booknav { #booknav {
list-style: none; list-style: none;
.chapter { .chapter {
line-height: 1.4em; line-height: 1.4em;
...@@ -36,12 +39,14 @@ div.book-wrapper { ...@@ -36,12 +39,14 @@ div.book-wrapper {
.page-number { .page-number {
@include float(right); @include float(right);
width: 12%; width: 12%;
font-size: .8em; font-size: 0.8em;
line-height: 2.1em; line-height: 2.1em;
text-align: right; text-align: right;
color: #9a9a9a; color: #9a9a9a;
opacity: 0.0; opacity: 0;
@include transition(opacity .15s linear 0s); @include transition(opacity .15s linear 0s);
} }
...@@ -52,6 +57,7 @@ div.book-wrapper { ...@@ -52,6 +57,7 @@ div.book-wrapper {
a { a {
@include clearfix(); @include clearfix();
padding: 0; padding: 0;
color: $uxpl-blue-base; color: $uxpl-blue-base;
...@@ -60,14 +66,13 @@ div.book-wrapper { ...@@ -60,14 +66,13 @@ div.book-wrapper {
color: $uxpl-blue-hover-active; color: $uxpl-blue-hover-active;
.page-number { .page-number {
opacity: 1.0; opacity: 1;
} }
} }
} }
div.hitarea { div.hitarea {
background-image: url('#{$static-path}/images/treeview-default.gif'); background-image: url('#{$static-path}/images/treeview-default.gif');
position: relative; position: relative;
top: 4px; top: 4px;
...@@ -97,6 +102,7 @@ div.book-wrapper { ...@@ -97,6 +102,7 @@ div.book-wrapper {
.book { .book {
@extend .content; @extend .content;
padding: 0; padding: 0;
width:76%; width:76%;
...@@ -105,6 +111,7 @@ div.book-wrapper { ...@@ -105,6 +111,7 @@ div.book-wrapper {
a { a {
@extend .block-link; @extend .block-link;
padding: 0 lh(); padding: 0 lh();
} }
...@@ -121,18 +128,22 @@ div.book-wrapper { ...@@ -121,18 +128,22 @@ div.book-wrapper {
background-color: rgba(#000, .7); background-color: rgba(#000, .7);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table; display: table;
height: 100%; height: 100%;
opacity: 0.0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
text-indent: -9999px; text-indent: -9999px;
@include transition(none); @include transition(none);
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
&:hover, &:focus { &:hover, &:focus {
opacity: 1.0; opacity: 1;
} }
&.is-disabled { &.is-disabled {
...@@ -183,12 +194,12 @@ div.book-wrapper { ...@@ -183,12 +194,12 @@ div.book-wrapper {
div { div {
text-align: left; text-align: left;
line-height: 1.6em; line-height: 1.6em;
margin: ($baseline/4); margin: ($baseline/4);
.Paragraph, h2 { .Paragraph, h2 {
margin-top: ($baseline/2); margin-top: ($baseline/2);
} }
} }
} }
} }
......
lms/static/sass/course/base/_base.scss
...@@ -41,12 +41,13 @@ body { ...@@ -41,12 +41,13 @@ body {
body, h1, h2, h3, h4, h5, h6, p, label { body, h1, h2, h3, h4, h5, h6, p, label {
@include text-align(left); @include text-align(left);
font-family: $sans-serif; font-family: $sans-serif;
} }
// we want to hide the outline on the focusable <main> element // we want to hide the outline on the focusable <main> element
main { main {
outline: none; outline: none;
} }
table { table {
...@@ -74,6 +75,7 @@ form { ...@@ -74,6 +75,7 @@ form {
form.choicegroup { form.choicegroup {
label { label {
clear: both; clear: both;
@include float(left); @include float(left);
} }
} }
...@@ -87,7 +89,9 @@ input[type="password"] { ...@@ -87,7 +89,9 @@ input[type="password"] {
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
border-radius: 0; border-radius: 0;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1;
@include box-sizing(border-box); @include box-sizing(border-box);
font: normal 1em $sans-serif; font: normal 1em $sans-serif;
height: 35px; height: 35px;
padding: ($baseline/4) 12px; padding: ($baseline/4) 12px;
...@@ -135,16 +139,17 @@ img { ...@@ -135,16 +139,17 @@ img {
z-index: 99999; z-index: 99999;
padding: 0 10px; padding: 0 10px;
border-radius: 3px; border-radius: 3px;
background: rgba(0, 0, 0, .85); background: rgba(0, 0, 0, 0.85);
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
color: $white; color: $white;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
@include transition(opacity .1s linear 0s); @include transition(opacity .1s linear 0s);
&:after { &::after {
content: '▾'; content: '▾';
display: block; display: block;
position: absolute; position: absolute;
...@@ -152,7 +157,7 @@ img { ...@@ -152,7 +157,7 @@ img {
left: 50%; left: 50%;
margin-left: -7px; margin-left: -7px;
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, .85); color: rgba(0, 0, 0, 0.85);
} }
} }
...@@ -215,6 +220,7 @@ img { ...@@ -215,6 +220,7 @@ img {
.action-btn { .action-btn {
@include dark-grey-button; @include dark-grey-button;
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: center; text-align: center;
} }
......
lms/static/sass/course/base/_extends.scss
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
// Older Course Extends - to review/remove with LMS cleanup // Older Course Extends - to review/remove with LMS cleanup
h1.top-header { h1.top-header {
border-bottom: 1px solid $border-color-2; border-bottom: 1px solid $border-color-2;
@include text-align(left); @include text-align(left);
font-size: em(24); font-size: em(24);
font-weight: 100; font-weight: 100;
padding-bottom: lh(); padding-bottom: lh();
...@@ -29,19 +31,25 @@ h1.top-header { ...@@ -29,19 +31,25 @@ h1.top-header {
.light-button, a.light-button, // only used in askbot as classes .light-button, a.light-button, // only used in askbot as classes
.gray-button { .gray-button {
@include simple($gray-l5); @include simple($gray-l5);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
} }
.blue-button { .blue-button {
@include simple($blue); @include simple($blue);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
} }
.pink-button { .pink-button {
@include simple($pink); @include simple($pink);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
} }
...@@ -68,12 +76,12 @@ h1.top-header { ...@@ -68,12 +76,12 @@ h1.top-header {
background: $sidebar-color; background: $sidebar-color;
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-weight: bold; font-weight: bold;
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
font-family: $sans-serif; font-family: $sans-serif;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
h1 { h1 {
...@@ -112,6 +120,7 @@ h1.top-header { ...@@ -112,6 +120,7 @@ h1.top-header {
li { li {
@include margin-left(20px); @include margin-left(20px);
background: none; background: none;
position: relative; position: relative;
padding: 0; padding: 0;
...@@ -136,7 +145,7 @@ h1.top-header { ...@@ -136,7 +145,7 @@ h1.top-header {
a { a {
background: #f6f6f6 url('#{$static-path}/images/slide-left-icon.png') center center no-repeat; background: #f6f6f6 url('#{$static-path}/images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3; border: 1px solid #d3d3d3;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
height: 16px; height: 16px;
padding: 6px; padding: 6px;
...@@ -160,6 +169,7 @@ h1.top-header { ...@@ -160,6 +169,7 @@ h1.top-header {
.topbar { .topbar {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
@media print { @media print {
...@@ -179,37 +189,43 @@ h1.top-header { ...@@ -179,37 +189,43 @@ h1.top-header {
} }
.tran { .tran {
@include transition( all .2s $ease-in-out-quad 0s); @include transition(all .2s $ease-in-out-quad 0s);
} }
// FontAwesome rtl chevron next // FontAwesome rtl chevron next
.fa-chevron-next { .fa-chevron-next {
&:before { &::before {
@if $bi-app-direction == ltr { @if $bi-app-direction == ltr {
content: "\f054"; // .fa-chevron-right content: "\f054"; // .fa-chevron-right
} @else if $bi-app-direction == rtl { }
content: "\f053"; // .fa-chevron-left
@else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left
} }
} }
} }
// FontAwesome rtl chevron prev // FontAwesome rtl chevron prev
.fa-chevron-prev { .fa-chevron-prev {
&:before { &::before {
@if $bi-app-direction == ltr { @if $bi-app-direction == ltr {
content: "\f053"; // .fa-chevron-left content: "\f053"; // .fa-chevron-left
} @else if $bi-app-direction == rtl { }
content: "\f054"; // .fa-chevron-right
@else if $bi-app-direction == rtl {
content: "\f054"; // .fa-chevron-right
} }
} }
} }
.fa-arrow-circle-prev { .fa-arrow-circle-prev {
&:before { &::before {
@if $bi-app-direction == ltr { @if $bi-app-direction == ltr {
content: "\f0a8"; // .fa-arrow-circle-left content: "\f0a8"; // .fa-arrow-circle-left
} @else if $bi-app-direction == rtl { }
content: "\f0a9"; // .fa-arrow-circle-right
@else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right
} }
} }
} }
lms/static/sass/course/base/_mixins.scss
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
padding: 0 15px; padding: 0 15px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #2d81ad; border: 1px solid #2d81ad;
@include linear-gradient(top, #6dccf1, #38a8e5); @include linear-gradient(top, #6dccf1, #38a8e5);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
...@@ -15,6 +17,7 @@ ...@@ -15,6 +17,7 @@
&:hover, &:focus { &:hover, &:focus {
border-color: #297095; border-color: #297095;
@include linear-gradient(top, #4fbbe4, #2090d0); @include linear-gradient(top, #4fbbe4, #2090d0);
} }
} }
...@@ -25,7 +28,9 @@ ...@@ -25,7 +28,9 @@
padding: 0 15px; padding: 0 15px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #444; border: 1px solid #444;
@include linear-gradient(top, #eee, $gray-l3); @include linear-gradient(top, #eee, $gray-l3);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
......
lms/static/sass/course/ccx_coach/_dashboard.scss
.ccx-schedule-container { .ccx-schedule-container {
float: left; float: left;
width: 750px; width: 750px;
} }
table.ccx-schedule { table.ccx-schedule {
width: 100%;
thead {
border-bottom: 2px solid black;
}
th:first-child {
width: 40%;
}
th:last-child {
width: 18%;
}
th, td {
padding: 10px;
}
td.no-link {
font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none;
}
.sequential .unit {
padding-left: 25px;
}
.vertical .unit {
padding-left: 40px;
}
a.empty {
display: block;
width: 100%; width: 100%;
color: white;
}
thead { a.empty:hover {
border-bottom: 2px solid black; color: #cbcbcb;
} }
th:first-child {
width: 40%;
}
th:last-child {
width: 18%;
}
th, td {
padding: 10px;
}
td.no-link {
font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none;
}
.sequential .unit {
padding-left: 25px;
}
.vertical .unit {
padding-left: 40px;
}
a.empty {
display: block;
width: 100%;
color: white;
}
a.empty:hover {
color: #cbcbcb;
}
} }
.ccx-schedule-sidebar { .ccx-schedule-sidebar {
float: left; float: left;
width: 295px; width: 295px;
margin-left: 20px; margin-left: 20px;
} }
.ccx-sidebar-panel { .ccx-sidebar-panel {
border: 1px solid #cbcbcb; border: 1px solid #cbcbcb;
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
} }
form.ccx-form { form.ccx-form {
line-height: 1.5; line-height: 1.5;
// inspiration was taken from https://github.com/edx/ux-pattern-library // inspiration was taken from https://github.com/edx/ux-pattern-library
select { select {
@include font-size(16); @include font-size(16);
background: #fcfcfc;
border: 1px solid #e9e8e8; background: #fcfcfc;
box-sizing: padding-box; border: 1px solid #e9e8e8;
color: #282c2e; box-sizing: padding-box;
display: inline-block; color: #282c2e;
font-size: ($baseline*.9.5); display: inline-block;
height: 40px; font-size: ($baseline*.9.5);
line-height: 20px; height: 40px;
padding: 10px; line-height: 20px;
transition: all 125ms ease-in-out 0s; padding: 10px;
width: 100%; transition: all 125ms ease-in-out 0s;
&:disabled { width: 100%;
border-color: #cfd8dc;
background: #e7ecee; &:disabled {
cursor: not-allowed; border-color: #cfd8dc;
} background: #e7ecee;
cursor: not-allowed;
} }
input { }
@include font-size(15);
background: #FCFCFC none repeat scroll 0% 0%; input {
border: 1px solid #E7E6E6; @include font-size(15);
box-sizing: border-box;
color: #34383A; background: #fcfcfc none repeat scroll 0% 0%;
display: inline-block; border: 1px solid #e7e6e6;
line-height: normal; box-sizing: border-box;
transition: all 0.125s ease-in-out 0s; color: #34383a;
padding: 5px 10px 5px 10px; display: inline-block;
&:focus { line-height: normal;
border-color: #0ea6ec; transition: all 0.125s ease-in-out 0s;
color: #282c2e; padding: 5px 10px 5px 10px;
outline: 0;
} &:focus {
&:disabled { border-color: #0ea6ec;
border-color: #cfd8dc; color: #282c2e;
background: #e7ecee; outline: 0;
cursor: not-allowed;
}
} }
.field {
margin: 5px 0 5px 0; &:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
} }
}
.field {
margin: 5px 0 5px 0;
}
} }
button.ccx-button-link { button.ccx-button-link {
background: none;
border: none;
padding: 0;
color: #069;
cursor: pointer;
&::after {
content: "\00a0 ";
}
&:active {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
color: #069; }
cursor: pointer;
&:after { &:hover {
content: "\00a0 "; color: brown;
} background: none;
&:active { }
background: none;
border: none; &:focus {
padding: 0; background: none;
} }
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
} }
.ccx-manage-student-form input#student-id { .ccx-manage-student-form input#student-id {
width: 60%; width: 60%;
} }
lms/static/sass/course/courseware/_amplifier.scss
// JM MOSFET AMPLIFIER // JM MOSFET AMPLIFIER
section.tool-wrapper { section.tool-wrapper {
@extend .clearfix; @extend .clearfix;
background: #073642; background: #073642;
border-bottom: 1px solid darken(#002b36, 10%); border-bottom: 1px solid darken(#002b36, 10%);
border-top: 1px solid darken(#002b36, 10%); border-top: 1px solid darken(#002b36, 10%);
...@@ -11,7 +12,9 @@ section.tool-wrapper { ...@@ -11,7 +12,9 @@ section.tool-wrapper {
div#graph-container { div#graph-container {
background: none; background: none;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: lh(); padding: lh();
vertical-align: top; vertical-align: top;
...@@ -74,19 +77,22 @@ section.tool-wrapper { ...@@ -74,19 +77,22 @@ section.tool-wrapper {
div#controlls-container { div#controlls-container {
@extend .clearfix; @extend .clearfix;
background: darken(#073642, 2%); background: darken(#073642, 2%);
border-right: 1px solid darken(#002b36, 6%); border-right: 1px solid darken(#002b36, 6%);
box-shadow: 1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%); box-shadow: 1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%);
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: lh(); padding: lh();
vertical-align: top; vertical-align: top;
width: flex-grid(4.5, 9); width: flex-grid(4.5, 9);
div.graph-controls { div.graph-controls {
div.music-wrapper { div.music-wrapper {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
box-shadow: 0 1px 0 lighten(#073642, 2%); box-shadow: 0 1px 0 lighten(#073642, 2%);
margin-bottom: lh(); margin-bottom: lh();
...@@ -94,7 +100,9 @@ section.tool-wrapper { ...@@ -94,7 +100,9 @@ section.tool-wrapper {
input#playButton { input#playButton {
border-color: darken(#002b36, 6%); border-color: darken(#002b36, 6%);
@include button(simple, lighten( #586e75, 5% ));
@include button(simple, lighten(#586e75, 5%));
display: block; display: block;
float: right; float: right;
font: bold 14px $body-font-family; font: bold 14px $body-font-family;
...@@ -106,6 +114,7 @@ section.tool-wrapper { ...@@ -106,6 +114,7 @@ section.tool-wrapper {
&[value="Stop"] { &[value="Stop"] {
@include button(simple, darken(#268bd2, 30%)); @include button(simple, darken(#268bd2, 30%));
font: bold 14px $body-font-family; font: bold 14px $body-font-family;
&:active { &:active {
...@@ -117,9 +126,12 @@ section.tool-wrapper { ...@@ -117,9 +126,12 @@ section.tool-wrapper {
div.inputs-wrapper { div.inputs-wrapper {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
box-shadow: 0 1px 0 lighten(#073642, 2%); box-shadow: 0 1px 0 lighten(#073642, 2%);
@include clearfix(); @include clearfix();
margin-bottom: lh(); margin-bottom: lh();
margin-bottom: lh(); margin-bottom: lh();
padding: 0 0 lh(); padding: 0 0 lh();
...@@ -192,6 +204,7 @@ section.tool-wrapper { ...@@ -192,6 +204,7 @@ section.tool-wrapper {
div.schematic-sliders { div.schematic-sliders {
div.top-sliders { div.top-sliders {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
box-shadow: 0 1px 0 lighten(#073642, 2%); box-shadow: 0 1px 0 lighten(#073642, 2%);
margin-bottom: lh(); margin-bottom: lh();
...@@ -231,13 +244,13 @@ section.tool-wrapper { ...@@ -231,13 +244,13 @@ section.tool-wrapper {
} }
.ui-slider-handle { .ui-slider-handle {
background: lighten( #586e75, 5% ) url('#{$static-path}/images/amplifier-slider-handle.png') center no-repeat; background: lighten(#586e75, 5%) url('#{$static-path}/images/amplifier-slider-handle.png') center no-repeat;
border: 1px solid darken(#002b36, 8%); border: 1px solid darken(#002b36, 8%);
box-shadow: inset 0 1px 0 lighten( #586e75, 20% ); box-shadow: inset 0 1px 0 lighten(#586e75, 20%);
margin-top: -.3em; margin-top: -.3em;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background-color: lighten( #586e75, 10% ); background-color: lighten(#586e75, 10%);
} }
} }
} }
......
lms/static/sass/course/instructor/_email.scss
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
} }
.email-content-message { .email-content-message {
padding: 5px 5% 40px 5%; padding: 5px 5% 40px 5%;
} }
.email-modal { .email-modal {
......
lms/static/sass/course/layout/_courseware_header.scss
.wrapper-course-material { .wrapper-course-material {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
@extend %ui-print-excluded; @extend %ui-print-excluded;
border-bottom: none; border-bottom: none;
...@@ -15,6 +16,7 @@ ...@@ -15,6 +16,7 @@
.course-tabs { .course-tabs {
@include border-top-radius(4px); @include border-top-radius(4px);
@include clearfix(); @include clearfix();
padding: ($baseline*0.75) 0 ($baseline*0.75) 0; padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
li { li {
...@@ -23,6 +25,7 @@ ...@@ -23,6 +25,7 @@
&.prominent { &.prominent {
@include margin-right(16px); @include margin-right(16px);
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
border-radius: 3px; border-radius: 3px;
} }
...@@ -35,8 +38,10 @@ ...@@ -35,8 +38,10 @@
a, a,
a:visited { a:visited {
@include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75)); @include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75));
@extend %t-title7; @extend %t-title7;
@extend %t-regular; @extend %t-regular;
color: $gray-d1; color: $gray-d1;
display: block; display: block;
text-align: center; text-align: center;
...@@ -88,11 +93,15 @@ ...@@ -88,11 +93,15 @@
&#login { &#login {
display: block; 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%)); @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; border: 1px solid transparent;
border-color: $uxpl-blue-base; border-color: $uxpl-blue-base;
border-radius: 3px; border-radius: 3px;
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $white; color: $white;
display: inline-block; display: inline-block;
...@@ -135,7 +144,7 @@ ...@@ -135,7 +144,7 @@
.course-header { .course-header {
@include float(left); @include float(left);
@include margin(10px, 10px, 0px, 10px); @include margin(10px, 10px, 0, 10px);
display: inline-block; display: inline-block;
width: 65%; width: 65%;
......
lms/static/sass/course/layout/_courseware_preview.scss
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
// STATE: Fixed to viewport (used for scrolling) // STATE: Fixed to viewport (used for scrolling)
&.is-fixed { &.is-fixed {
@extend %ui-depth4; @extend %ui-depth4;
box-shadow: 0 3px 3px $shadow-d1; box-shadow: 0 3px 3px $shadow-d1;
position: fixed; position: fixed;
top: 0; top: 0;
......
lms/static/sass/course/layout/_footer.scss
footer { footer {
box-shadow: $courseware-footer-shadow; box-shadow: $courseware-footer-shadow;
margin-top: $courseware-footer-margin; margin-top: $courseware-footer-margin;
} }
lms/static/sass/course/modules/_calculator.scss
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
bottom: -126px; bottom: -126px;
left: 0; left: 0;
position: fixed; position: fixed;
@include transition(bottom $tmg-avg linear 0s); @include transition(bottom $tmg-avg linear 0s);
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
@include transition(background-color $tmg-f2 ease-in-out 0s); @include transition(background-color $tmg-f2 ease-in-out 0s);
@include float(right); @include float(right);
@include right($baseline*.75); @include right($baseline*.75);
position: relative; position: relative;
top: -42px; top: -42px;
border-bottom: 0; border-bottom: 0;
...@@ -62,7 +65,9 @@ ...@@ -62,7 +65,9 @@
form { form {
@extend .clearfix; @extend .clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: lh(); padding: lh();
.calc-output-label { .calc-output-label {
...@@ -74,7 +79,9 @@ ...@@ -74,7 +79,9 @@
border: 1px solid $white; border: 1px solid $white;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
color: $black; color: $black;
float: left; float: left;
font-size: 30px; font-size: 30px;
...@@ -102,7 +109,9 @@ ...@@ -102,7 +109,9 @@
background: $white; background: $white;
border: 1px solid $white; border: 1px solid $white;
box-shadow: none; box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
color: $black; color: $black;
float: left; float: left;
font-size: 16px; font-size: 16px;
...@@ -113,13 +122,14 @@ ...@@ -113,13 +122,14 @@
width: flex-grid(4); width: flex-grid(4);
&.has-result { &.has-result {
border: 1px solid $green-d1; border: 1px solid $green-d1;
box-shadow: inset 0px 0px ($baseline/3) $green-d1; box-shadow: inset 0 0 ($baseline/3) $green-d1;
} }
} }
.input-wrapper { .input-wrapper {
@extend .clearfix; @extend .clearfix;
float: left; float: left;
margin: 0; margin: 0;
position: relative; position: relative;
...@@ -134,7 +144,9 @@ ...@@ -134,7 +144,9 @@
direction: ltr; // Almost all of the real-world calculators are LTR direction: ltr; // Almost all of the real-world calculators are LTR
border: none; border: none;
box-shadow: none; box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
font-size: 16px; font-size: 16px;
padding: 10px; padding: 10px;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -156,6 +168,7 @@ ...@@ -156,6 +168,7 @@
#calculator_hint { #calculator_hint {
@include hide-text; @include hide-text;
display: block; display: block;
height: 35px; height: 35px;
width: 35px; width: 35px;
...@@ -177,6 +190,7 @@ ...@@ -177,6 +190,7 @@
.help { .help {
@include transition(none); @include transition(none);
background: $white; background: $white;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999;
......
lms/static/sass/course/modules/_student-notes.scss
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
%bubble { %bubble {
@include transform(rotate(45deg)); @include transform(rotate(45deg));
@include left(12px); @include left(12px);
position: absolute; position: absolute;
bottom: -($baseline/2); bottom: -($baseline/2);
display: block; display: block;
...@@ -66,17 +67,19 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -66,17 +67,19 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// +toggling notes // +toggling notes
// -------------------- // --------------------
.edx-notes-visibility { .edx-notes-visibility {
.edx-notes-visibility-error { .edx-notes-visibility-error {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@extend %text-truncated; @extend %text-truncated;
position: relative; position: relative;
bottom: -($baseline/20); // needed to sync up with current rogue/more complex calc utility alignment bottom: -($baseline/20); // needed to sync up with current rogue/more complex calc utility alignment
max-width: ($baseline*15); max-width: ($baseline*15);
display: none; display: none;
vertical-align: bottom; vertical-align: bottom;
@include margin-right(-($baseline/4)); @include margin-right(-($baseline/4));
@include border-right(($baseline/4) solid $error-color); @include border-right(($baseline/4) solid $error-color);
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
background: $black-t3; background: $black-t3;
text-align: center; text-align: center;
...@@ -85,7 +88,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -85,7 +88,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// STATE: has error // STATE: has error
&.has-error { &.has-error {
.edx-notes-visibility-error { .edx-notes-visibility-error {
display: inline-block; display: inline-block;
} }
...@@ -100,6 +102,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -100,6 +102,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-notice { .annotator-notice {
@extend %t-weight4; @extend %t-weight4;
@extend %t-copy-sub1; @extend %t-copy-sub1;
padding: ($baseline/4) $baseline; padding: ($baseline/4) $baseline;
background: $black-t3; background: $black-t3;
} }
...@@ -109,6 +112,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -109,6 +112,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-notice { .annotator-notice {
@extend %t-weight4; @extend %t-weight4;
@extend %t-copy-sub1; @extend %t-copy-sub1;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
background: $gray-d4; background: $gray-d4;
} }
...@@ -140,7 +144,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -140,7 +144,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
margin: 0 !important; margin: 0 !important;
.annotator-widget { .annotator-widget {
&:after { &::after {
@extend %bubble; @extend %bubble;
} }
} }
...@@ -148,8 +152,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -148,8 +152,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-editor { .annotator-editor {
.annotator-widget { .annotator-widget {
&:after { &::after {
@extend %bubble; @extend %bubble;
background: $gray-l5; background: $gray-l5;
} }
} }
...@@ -169,23 +174,30 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -169,23 +174,30 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
button { button {
@extend %notes-bubble; @extend %notes-bubble;
position: relative; position: relative;
display: block; display: block;
&:after { &::after {
@extend %notes-reset-icon; @extend %notes-reset-icon;
@extend %shame-link-base; @extend %shame-link-base;
@include font-size(30); @include font-size(30);
position: absolute; position: absolute;
top: 35%; top: 35%;
@include left(15%); @include left(15%);
content: "\f14b"; content: "\f14b";
} }
// using annotatorJS triangle styling for adder // using annotatorJS triangle styling for adder
&:before { &::before {
@extend %bubble; @extend %bubble;
@include left(10px); @include left(10px);
background: whitesmoke; background: whitesmoke;
} }
} }
...@@ -193,11 +205,12 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -193,11 +205,12 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// editing // editing
.annotator-editor { .annotator-editor {
.annotator-controls { .annotator-controls {
@include text-align(left); @include text-align(left);
@include clearfix(); @include clearfix();
@extend %ui-depth1; @extend %ui-depth1;
position: relative; position: relative;
padding: 8px; padding: 8px;
border: none !important; border: none !important;
...@@ -208,6 +221,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -208,6 +221,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// actions // actions
.annotator-save, .annotator-cancel { .annotator-save, .annotator-cancel {
@extend %notes-reset-background; @extend %notes-reset-background;
padding: ($baseline/4) ($baseline/2) !important; padding: ($baseline/4) ($baseline/2) !important;
border: none; border: none;
box-shadow: none; box-shadow: none;
...@@ -216,7 +230,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -216,7 +230,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
text-shadow: none !important; text-shadow: none !important;
// removing vendor icons // removing vendor icons
&:after { &::after {
display: none !important; display: none !important;
} }
} }
...@@ -231,10 +245,10 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -231,10 +245,10 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
} }
.annotator-item { .annotator-item {
textarea { textarea {
@extend %notes-reset-font; @extend %notes-reset-font;
@extend %t-demi-strong; @extend %t-demi-strong;
padding: ($baseline/5) !important; padding: ($baseline/5) !important;
font-size: 14px !important; font-size: 14px !important;
line-height: 22px !important; line-height: 22px !important;
...@@ -268,6 +282,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -268,6 +282,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// STATE: disabled // STATE: disabled
&:disabled, &.is-disabled { &:disabled, &.is-disabled {
@extend %ui-disabled; @extend %ui-disabled;
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -286,7 +301,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -286,7 +301,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// content // content
.annotator-viewer { .annotator-viewer {
.annotator-widget.annotator-listing { .annotator-widget.annotator-listing {
outline: none; outline: none;
} }
...@@ -294,6 +308,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -294,6 +308,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// poorly scoped selector for content of a note's comment // poorly scoped selector for content of a note's comment
div:first-of-type { div:first-of-type {
@extend %notes-reset-font; @extend %notes-reset-font;
padding: ($baseline/4) !important; padding: ($baseline/4) !important;
font-size: 14px !important; font-size: 14px !important;
line-height: 22px !important; line-height: 22px !important;
...@@ -305,7 +320,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -305,7 +320,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
opacity: 1; opacity: 1;
// RTL support // RTL support
@include right(0); @include right(0);
top: 0; top: 0;
@include float(right); @include float(right);
@include padding-left($baseline/4); @include padding-left($baseline/4);
...@@ -314,10 +331,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -314,10 +331,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&:before { &::before {
@extend %notes-reset-icon; @extend %notes-reset-icon;
@extend %shame-link-base; @extend %shame-link-base;
@extend %t-icon4; @extend %t-icon4;
position: absolute; position: absolute;
} }
} }
...@@ -325,9 +343,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -325,9 +343,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-edit { .annotator-edit {
@include margin-right($baseline/2); @include margin-right($baseline/2);
&:before { &::before {
top: 0; top: 0;
@include left(0); @include left(0);
content: "\f040"; // .fa-pencil content: "\f040"; // .fa-pencil
} }
} }
...@@ -335,18 +355,21 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -335,18 +355,21 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-delete { .annotator-delete {
@include margin-right($baseline/3); @include margin-right($baseline/3);
&:before { &::before {
top: -($baseline/20); top: -($baseline/20);
@include left(0); @include left(0);
content: "\f1f8"; // .fa-trash content: "\f1f8"; // .fa-trash
} }
} }
.annotator-close { .annotator-close {
&::before {
&:before {
top: -($baseline/20); top: -($baseline/20);
@include left(0); @include left(0);
content: "\f00d"; // .fa-close content: "\f00d"; // .fa-close
} }
} }
...@@ -357,7 +380,8 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator ...@@ -357,7 +380,8 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// -------------------- // --------------------
.edx-notes-wrapper .annotator-wrapper.annotator-wrapper .annotator-outer.annotator-viewer .annotator-controls button { .edx-notes-wrapper .annotator-wrapper.annotator-wrapper .annotator-outer.annotator-viewer .annotator-controls button {
@extend %notes-reset-background; @extend %notes-reset-background;
opacity: 1.0;
opacity: 1;
} }
.edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-save { .edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-save {
......
lms/static/sass/course/modules/_timer.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
div.timer-main { div.timer-main {
@extend %ui-depth2; @extend %ui-depth2;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
......
lms/static/sass/course/wiki/_basic-html.scss
section.wiki-body { section.wiki-body {
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 2em; font-size: 2em;
margin-bottom: 25px; margin-bottom: 25px;
} }
div#wiki_article { 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, noframes, ol, p, ul, center, dir, hr, menu, pre {
...@@ -67,19 +67,19 @@ section.wiki-body { ...@@ -67,19 +67,19 @@ section.wiki-body {
h1 { h1 {
font-size: 1.6em; font-size: 1.6em;
margin: .67em 0; margin: .67em 0;
letter-spacing: 0px; letter-spacing: 0;
} }
h2 { h2 {
text-transform: none; text-transform: none;
font-size: 1.4em; font-size: 1.4em;
margin: .75em 0; margin: .75em 0;
letter-spacing: 0px; letter-spacing: 0;
} }
h3 { h3 {
font-size: 1.2em; font-size: 1.2em;
margin: .83em 0; margin: 0.83em 0;
} }
h4 { h4 {
...@@ -131,7 +131,7 @@ section.wiki-body { ...@@ -131,7 +131,7 @@ section.wiki-body {
} }
small, sub, sup { small, sub, sup {
font-size: .83em; font-size: 0.83em;
} }
sub { sub {
...@@ -181,7 +181,7 @@ section.wiki-body { ...@@ -181,7 +181,7 @@ section.wiki-body {
text-decoration: underline; text-decoration: underline;
} }
br:before { br::before {
content: "\A"; content: "\A";
white-space: pre-line; white-space: pre-line;
} }
......
lms/static/sass/course/wiki/_create.scss
...@@ -15,13 +15,16 @@ form#wiki_revision { ...@@ -15,13 +15,16 @@ form#wiki_revision {
.CodeMirror { .CodeMirror {
@extend textarea; @extend textarea;
@include box-sizing(border-box); @include box-sizing(border-box);
font-family: monospace; font-family: monospace;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
textarea { textarea {
@include box-sizing(border-box); @include box-sizing(border-box);
margin-bottom: $baseline; margin-bottom: $baseline;
min-height: 450px; min-height: 450px;
width: 100%; width: 100%;
...@@ -59,7 +62,7 @@ form#wiki_revision { ...@@ -59,7 +62,7 @@ form#wiki_revision {
.markdown-example { .markdown-example {
background-color: #e3e3e3; background-color: #e3e3e3;
line-height: 1.0; line-height: 1;
margin: 5px 0 7px; margin: 5px 0 7px;
padding: { padding: {
top: 5px; top: 5px;
...@@ -67,6 +70,7 @@ form#wiki_revision { ...@@ -67,6 +70,7 @@ form#wiki_revision {
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
} }
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
} }
} }
lms/static/sass/course/wiki/_sidebar.scss
div#wiki_panel { div#wiki_panel {
@extend .sidebar; @extend .sidebar;
overflow: auto; overflow: auto;
ul { ul {
...@@ -16,6 +17,7 @@ div#wiki_panel { ...@@ -16,6 +17,7 @@ div#wiki_panel {
div#wiki_create_form { div#wiki_create_form {
@extend .clearfix; @extend .clearfix;
padding: lh(0.5) lh() lh(0.5) 0; padding: lh(0.5) lh() lh(0.5) 0;
label { label {
...@@ -25,6 +27,7 @@ div#wiki_panel { ...@@ -25,6 +27,7 @@ div#wiki_panel {
input[type="text"] { input[type="text"] {
@include box-sizing(border-box); @include box-sizing(border-box);
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: lh(0.5); margin-bottom: lh(0.5);
......
lms/static/sass/course/wiki/_table.scss
...@@ -28,11 +28,12 @@ table.wiki-history { ...@@ -28,11 +28,12 @@ table.wiki-history {
} }
} }
} }
tbody {
tbody {
tr td { tr td {
padding: 8px 15px; padding: 8px 15px;
} }
} }
tr.dark { tr.dark {
background-color: #efefef; background-color: #efefef;
......
lms/static/sass/course/wiki/_wiki.scss
.wiki-wrapper section.wiki { .wiki-wrapper section.wiki {
.pull-left { .pull-left {
float: left; float: left;
} }
...@@ -53,7 +52,7 @@ ...@@ -53,7 +52,7 @@
color: $link-color; color: $link-color;
} }
&:after { &::after {
content: '›'; content: '›';
display: inline; display: inline;
margin-left: ($baseline/2); margin-left: ($baseline/2);
...@@ -84,6 +83,7 @@ ...@@ -84,6 +83,7 @@
.add-article-btn { .add-article-btn {
@include button(simple, #eee); @include button(simple, #eee);
margin-left: 25px; margin-left: 25px;
padding: 7px 15px !important; padding: 7px 15px !important;
font-size: 0.72em; font-size: 0.72em;
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 12px; font-size: 12px;
@include transition(border-color .1s linear 0s); @include transition(border-color .1s linear 0s);
&:-webkit-input-placholder { &:-webkit-input-placholder {
...@@ -149,6 +150,7 @@ ...@@ -149,6 +150,7 @@
width: flex-grid(9); width: flex-grid(9);
padding: 40px 0 40px 40px; padding: 40px 0 40px 40px;
color: $base-font-color; color: $base-font-color;
@include box-sizing(border-box); @include box-sizing(border-box);
} }
...@@ -180,14 +182,14 @@ ...@@ -180,14 +182,14 @@
h5 { h5 {
margin: 20px 0 10px; margin: 20px 0 10px;
font-size: .8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
h6 { h6 {
margin: 20px 0 10px; margin: 20px 0 10px;
font-size: .8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
color: #999; color: #999;
text-transform: uppercase; text-transform: uppercase;
...@@ -238,6 +240,7 @@ ...@@ -238,6 +240,7 @@
float: left; float: left;
width: flex-grid(3); width: flex-grid(3);
padding: 40px 40px; padding: 40px 40px;
@include box-sizing(border-box); @include box-sizing(border-box);
.timestamp{ .timestamp{
...@@ -383,8 +386,9 @@ ...@@ -383,8 +386,9 @@
box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 6px $shadow; box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 6px $shadow;
} }
&:before { &::before {
@extend %ui-depth4; @extend %ui-depth4;
content: 'click to edit schematic'; content: 'click to edit schematic';
position: absolute; position: absolute;
top: 10px; top: 10px;
...@@ -421,6 +425,7 @@ ...@@ -421,6 +425,7 @@
.btn { .btn {
@include button(simple, #eee); @include button(simple, #eee);
font-size: 0.8em; font-size: 0.8em;
margin-right: ($baseline/4); margin-right: ($baseline/4);
line-height: 1.2em; line-height: 1.2em;
...@@ -434,16 +439,19 @@ ...@@ -434,16 +439,19 @@
&.btn-primary { &.btn-primary {
@include button(simple, $btn-default-color); @include button(simple, $btn-default-color);
font-size: 0.8em; font-size: 0.8em;
} }
&.btn-danger { &.btn-danger {
@include button(simple, $pink); @include button(simple, $pink);
font-size: 0.8em; font-size: 0.8em;
} }
&.btn-info { &.btn-info {
@include button(simple, $gray-l3); @include button(simple, $gray-l3);
font-size: 0.8em; font-size: 0.8em;
} }
} }
...@@ -454,6 +462,7 @@ ...@@ -454,6 +462,7 @@
.modal { .modal {
@extend %ui-depth4; @extend %ui-depth4;
width: 960px; width: 960px;
min-height: 500px; min-height: 500px;
margin-left: -480px; margin-left: -480px;
...@@ -570,6 +579,7 @@ ...@@ -570,6 +579,7 @@
text-align: left; text-align: left;
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
@include clearfix(); @include clearfix();
h3 { h3 {
...@@ -666,6 +676,7 @@ ...@@ -666,6 +676,7 @@
#settings_form { #settings_form {
.well { .well {
margin-bottom: ($baseline*0.75); margin-bottom: ($baseline*0.75);
@include clearfix(); @include clearfix();
} }
...@@ -815,8 +826,8 @@ ...@@ -815,8 +826,8 @@
li { li {
margin-bottom: ($baseline*0.75); margin-bottom: ($baseline*0.75);
border: 1px solid #DDD; border: 1px solid #ddd;
background: #F9F9F9; background: #f9f9f9;
border-radius: 5px; border-radius: 5px;
} }
...@@ -906,9 +917,9 @@ ...@@ -906,9 +917,9 @@
.alert { .alert {
position: relative; position: relative;
width: auto; width: auto;
margin: 24px 0px; margin: 24px 0;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #EBE8BF; border: 1px solid #ebe8bf;
border-radius: 3px; border-radius: 3px;
background: $yellow; background: $yellow;
color: $black; color: $black;
...@@ -951,7 +962,9 @@ ...@@ -951,7 +962,9 @@
color: $white; color: $white;
font-weight: bold; font-weight: bold;
font-size: em(18); font-size: em(18);
@include transition(none); @include transition(none);
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
...@@ -965,6 +978,7 @@ ...@@ -965,6 +978,7 @@
.modal-backdrop { .modal-backdrop {
@extend %ui-depth3; @extend %ui-depth3;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
......
lms/static/sass/discussion/_discussion-v1.scss
...@@ -4,72 +4,75 @@ ...@@ -4,72 +4,75 @@
// Note: replace with globals from common/static/sass/edx-pattern-library-shims when available // Note: replace with globals from common/static/sass/edx-pattern-library-shims when available
%pattern-library-btn { %pattern-library-btn {
@include transition( @include transition(
color 0.125s ease-in-out 0s, color 0.125s ease-in-out 0s,
border-color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s,
background 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s,
box-shadow 0.125s ease-in-out 0s box-shadow 0.125s ease-in-out 0s
); );
display: inline-block;
border: 1px solid $forum-color-active-thread;
border-radius: 3px;
margin: 0;
background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
white-space: nowrap;
// Display: block, one button per line, full width display: inline-block;
&.block { border: 1px solid $forum-color-active-thread;
display: block; border-radius: 3px;
width: 100%; margin: 0;
} background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
white-space: nowrap;
// STATE: is disabled // Display: block, one button per line, full width
&:disabled, &.block {
&.is-disabled { display: block;
pointer-events: none; width: 100%;
outline: none; }
cursor: not-allowed;
}
&:hover, // STATE: is disabled
&:active, &:disabled,
&:focus { &.is-disabled {
// Note:these rules all need !important in order to beat out pointer-events: none;
// the base button styling defined in the courseware. outline: none;
border-color: $forum-color-hover !important; cursor: not-allowed;
background-color: $forum-color-hover !important; }
background-image: none !important;
box-shadow: none !important; &:hover,
color: $forum-color-active-text !important; &:active,
text-decoration: none !important; // Don't show underlines on links that are styled as buttons &:focus {
} // Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
} }
// Use pattern library buttons for discussion components // Use pattern library buttons for discussion components
.discussion-module, .wmd-prompt-dialog { .discussion-module, .wmd-prompt-dialog {
.btn { .btn {
@extend %pattern-library-btn; @extend %pattern-library-btn;
background-color: $forum-color-background;
color: $forum-color-active-thread; background-color: $forum-color-background;
} color: $forum-color-active-thread;
}
.btn-brand {
@extend %pattern-library-btn;
.btn-brand { background-color: $forum-color-active-thread;
@extend %pattern-library-btn; color: $forum-color-active-text;
background-color: $forum-color-active-thread; }
color: $forum-color-active-text;
}
} }
// Layout control for discussion modules that does not apply to the discussion board // Layout control for discussion modules that does not apply to the discussion board
.discussion-module { .discussion-module {
.discussion { .discussion {
clear: both; clear: both;
} }
} }
lms/static/sass/discussion/_discussion.scss
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
.discussion-body { .discussion-body {
@include clearfix(); @include clearfix();
border: none; border: none;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
...@@ -50,6 +51,7 @@ ...@@ -50,6 +51,7 @@
// inline discussion module // inline discussion module
.discussion-module { .discussion-module {
@extend .discussion-body; @extend .discussion-body;
display: block; display: block;
position: relative; position: relative;
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
...@@ -71,12 +73,14 @@ ...@@ -71,12 +73,14 @@
.discussion-module-header { .discussion-module-header {
@include float(left); @include float(left);
width: flex-grid(7); width: flex-grid(7);
margin-bottom: ($baseline * 0.75); margin-bottom: ($baseline * 0.75);
} }
.add_post_btn_container { .add_post_btn_container {
@include text-align(right); @include text-align(right);
width: flex-grid(12); width: flex-grid(12);
height: (2 * $baseline); height: (2 * $baseline);
} }
...@@ -90,6 +94,7 @@ ...@@ -90,6 +94,7 @@
.discussion-show { .discussion-show {
@include float(right); @include float(right);
position: relative; position: relative;
top: 3px; top: 3px;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
...@@ -136,6 +141,7 @@ section.discussion-pagination { ...@@ -136,6 +141,7 @@ section.discussion-pagination {
ol { ol {
li { li {
@include padding-right($baseline/2); @include padding-right($baseline/2);
list-style: none; list-style: none;
display: inline-block; display: inline-block;
......
lms/static/sass/discussion/_layouts.scss
...@@ -2,35 +2,35 @@ ...@@ -2,35 +2,35 @@
@import '../course/base/extends'; @import '../course/base/extends';
.discussion-user-profile-board { .discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-title { .discussion-profile-count {
margin-bottom: $baseline / 5; margin-top: $baseline / 4;
font-size: $forum-x-large-font-size; }
}
.discussion-profile-count { .discussion-profile-info {
margin-top: $baseline / 4; @include margin-right($baseline);
} }
.discussion-profile-info { .user-name {
@include margin-right($baseline); @include margin-right($baseline);
}
.user-name { font-size: $forum-x-large-font-size;
@include margin-right($baseline); }
font-size: $forum-x-large-font-size;
}
.user-roles { .user-roles {
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
font-style: italic; font-style: italic;
} }
} }
.discussion-column { .discussion-column {
min-height: 500px; min-height: 500px;
.new-post-article { .new-post-article {
margin-top: -$baseline; margin-top: -$baseline;
} }
} }
lms/static/sass/discussion/_mixins.scss
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
@mixin white-button { @mixin white-button {
@include discussion-button(); @include discussion-button();
border-color: #aaa; border-color: #aaa;
background-color: $white; background-color: $white;
color: $dark-gray; color: $dark-gray;
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
@mixin discussion-wmd-input { @mixin discussion-wmd-input {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
box-sizing: border-box; box-sizing: border-box;
margin-top: 0; margin-top: 0;
border: 1px solid $forum-color-border; border: 1px solid $forum-color-border;
...@@ -42,6 +44,7 @@ ...@@ -42,6 +44,7 @@
@mixin discussion-wmd-preview-container { @mixin discussion-wmd-preview-container {
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius); @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $forum-color-border; border: 1px solid $forum-color-border;
width: 100%; width: 100%;
...@@ -50,11 +53,13 @@ ...@@ -50,11 +53,13 @@
@mixin discussion-new-post-wmd-preview-container { @mixin discussion-new-post-wmd-preview-container {
@include discussion-wmd-preview-container; @include discussion-wmd-preview-container;
border-color: $forum-color-border; border-color: $forum-color-border;
} }
@mixin discussion-wmd-preview-label { @mixin discussion-wmd-preview-label {
@include padding-left($baseline/4); @include padding-left($baseline/4);
padding-top: 3px; padding-top: 3px;
width: 100%; width: 100%;
color: $forum-color-editor-preview-label; color: $forum-color-editor-preview-label;
...@@ -73,8 +78,8 @@ ...@@ -73,8 +78,8 @@
} }
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
0% { opacity: 0.0; } 0% { opacity: 0; }
100% { opacity: 1.0; } 100% { opacity: 1; }
} }
// extends - content - text overflow by ellipsis // extends - content - text overflow by ellipsis
......
lms/static/sass/discussion/elements/_actions.scss
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
.response-actions-list, .response-actions-list,
.comment-actions-list { .comment-actions-list {
@extend %ui-no-list; @extend %ui-no-list;
@include text-align(right); @include text-align(right);
.actions-item { .actions-item {
...@@ -53,7 +54,9 @@ ...@@ -53,7 +54,9 @@
.actions-dropdown { .actions-dropdown {
@extend %ui-no-list; @extend %ui-no-list;
@extend %ui-depth1; @extend %ui-depth1;
@include right(0); @include right(0);
display: none; display: none;
position: absolute; position: absolute;
top: 100%; top: 100%;
...@@ -77,9 +80,10 @@ ...@@ -77,9 +80,10 @@
background: $forum-color-background; background: $forum-color-background;
// ui triangle/nub // ui triangle/nub
&:after, &::after,
&:before { &::before {
@include right(6px); @include right(6px);
bottom: 100%; bottom: 100%;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
...@@ -89,14 +93,15 @@ ...@@ -89,14 +93,15 @@
pointer-events: none; pointer-events: none;
} }
&:after { &::after {
@include margin-right(1px); @include margin-right(1px);
border-color: $transparent; border-color: $transparent;
border-bottom-color: $white; border-bottom-color: $white;
border-width: 6px; border-width: 6px;
} }
&:before { &::before {
border-color: $transparent; border-color: $transparent;
border-bottom-color: $forum-color-border; border-bottom-color: $forum-color-border;
border-width: 7px; border-width: 7px;
...@@ -118,6 +123,7 @@ ...@@ -118,6 +123,7 @@
// UI: general action // UI: general action
.action-button { .action-button {
@include transition(border .5s linear 0s); @include transition(border .5s linear 0s);
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
border: 1px solid transparent; border: 1px solid transparent;
...@@ -136,19 +142,20 @@ ...@@ -136,19 +142,20 @@
.icon { .icon {
@include margin-right(0); @include margin-right(0);
vertical-align: middle; vertical-align: middle;
} }
} }
.action-label { .action-label {
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: none; display: none;
vertical-align: middle; vertical-align: middle;
padding: 2px 8px; padding: 2px 8px;
} }
&:hover, &:focus { &:hover, &:focus {
.action-label { .action-label {
display: inline-block; display: inline-block;
} }
...@@ -160,13 +167,11 @@ ...@@ -160,13 +167,11 @@
// specific button styles // specific button styles
&.action-follow { &.action-follow {
.action-label { .action-label {
color: $blue-d1; color: $blue-d1;
} }
&.is-checked, &:hover, &:focus { &.is-checked, &:hover, &:focus {
.action-icon { .action-icon {
background-color: $forum-color-following; background-color: $forum-color-following;
border: 1px solid $blue-d1; border: 1px solid $blue-d1;
...@@ -180,13 +185,11 @@ ...@@ -180,13 +185,11 @@
} }
&.action-vote { &.action-vote {
.action-label { .action-label {
opacity: 1; opacity: 1;
} }
&.is-checked, &:hover, &:focus { &.is-checked, &:hover, &:focus {
.action-icon { .action-icon {
background-color: $green-d1; background-color: $green-d1;
border: 1px solid $green-d2; border: 1px solid $green-d2;
...@@ -204,9 +207,7 @@ ...@@ -204,9 +207,7 @@
} }
&.action-endorse { &.action-endorse {
&.is-checked, &:hover, &:focus { &.is-checked, &:hover, &:focus {
.action-icon { .action-icon {
background-color: $blue-d1; background-color: $blue-d1;
border: 1px solid $blue-d2; border: 1px solid $blue-d2;
...@@ -225,9 +226,7 @@ ...@@ -225,9 +226,7 @@
} }
&.action-answer { &.action-answer {
&.is-checked, &:hover, &:focus { &.is-checked, &:hover, &:focus {
.action-icon { .action-icon {
border: 1px solid $green-d1; border: 1px solid $green-d1;
background-color: $green-d1; background-color: $green-d1;
...@@ -274,7 +273,9 @@ ...@@ -274,7 +273,9 @@
// UI: secondary action // UI: secondary action
.action-list-item { .action-list-item {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include text-align(right); @include text-align(right);
display: block; display: block;
width: 100%; width: 100%;
padding: ($baseline/10) 0; padding: ($baseline/10) 0;
...@@ -287,6 +288,7 @@ ...@@ -287,6 +288,7 @@
.action-icon { .action-icon {
@include margin-left($baseline/4); @include margin-left($baseline/4);
display: inline-block; display: inline-block;
width: ($baseline/2); width: ($baseline/2);
color: inherit; color: inherit;
...@@ -320,6 +322,7 @@ ...@@ -320,6 +322,7 @@
.action-button, .action-list-item { .action-button, .action-list-item {
.action-label { .action-label {
@include float(left); @include float(left);
.label-checked { .label-checked {
display: none; display: none;
} }
......
lms/static/sass/discussion/elements/_editor.scss
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
.wmd-button-row { .wmd-button-row {
@include transition(all .2s ease-out 0s); @include transition(all .2s ease-out 0s);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4); margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
...@@ -56,6 +57,7 @@ ...@@ -56,6 +57,7 @@
.wmd-spacer { .wmd-spacer {
@include margin-left(14px); @include margin-left(14px);
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 1px; width: 1px;
...@@ -107,6 +109,7 @@ ...@@ -107,6 +109,7 @@
.wmd-input { .wmd-input {
@include discussion-wmd-input; @include discussion-wmd-input;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
background: $forum-color-background; background: $forum-color-background;
...@@ -118,6 +121,7 @@ ...@@ -118,6 +121,7 @@
.wmd-prompt-dialog { .wmd-prompt-dialog {
@extend .modal; @extend .modal;
background: $forum-color-background; background: $forum-color-background;
padding: $baseline; padding: $baseline;
...@@ -147,6 +151,7 @@ ...@@ -147,6 +151,7 @@
.field-group .field .field-hint { .field-group .field .field-hint {
@include margin-left(0); @include margin-left(0);
width: 100%; width: 100%;
} }
......
lms/static/sass/discussion/elements/_labels.scss
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
.discussion { .discussion {
.post-label { .post-label {
@include margin($baseline/4, $baseline/2, 0, 0); @include margin($baseline/4, $baseline/2, 0, 0);
@extend %t-light; @extend %t-light;
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
display: inline; display: inline;
white-space: nowrap; white-space: nowrap;
......
lms/static/sass/discussion/lms-discussion-main-rtl.scss
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
// Load the RTL version of the edX Pattern Library // Load the RTL version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default; $pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
// Configure RTL variables // Configure RTL variables
......
lms/static/sass/discussion/lms-discussion-main.scss
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
// Load the LTR version of the edX Pattern Library // Load the LTR version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default; $pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
// Configure LTR variables // Configure LTR variables
......
lms/static/sass/discussion/utilities/_developer.scss
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
// a single alert, which can be independently displayed / dismissed // a single alert, which can be independently displayed / dismissed
.search-alert { .search-alert {
@include transition(none); @include transition(none);
padding: ($baseline/2) 11px ($baseline/2) 18px; padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black; background-color: $black;
} }
...@@ -48,6 +49,7 @@ ...@@ -48,6 +49,7 @@
em { em {
@extend %t-weight5; @extend %t-weight5;
font-style: italic; font-style: italic;
} }
} }
...@@ -55,6 +57,7 @@ ...@@ -55,6 +57,7 @@
// links to jump to users/content in alerts // links to jump to users/content in alerts
.link-jump { .link-jump {
@include transition(none); @include transition(none);
@extend %t-weight5; @extend %t-weight5;
} }
} }
...@@ -62,11 +65,14 @@ ...@@ -62,11 +65,14 @@
// alert controls // alert controls
.search-alert-controls { .search-alert-controls {
@include text-align(right); @include text-align(right);
width: 28%; width: 28%;
.control { .control {
@include transition(none); @include transition(none);
@extend %t-weight5; @extend %t-weight5;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
color: $white; color: $white;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
......
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