Skip to content

E
edx-platform
Commit 9f0fba0a by Andy Armstrong
Options

Sass quality fixes in the LMS

parent 0702df51
Showing with 804 additions and 237 deletions
.stylelintignore 0 → 100644
common/static/sass/bourbon
lms/static/sass/vendor
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 {
...@@ -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/_experiments.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
// -------------------- // --------------------
// LEARNER-1726 Track Selection V3 // LEARNER-1726 Track Selection V3
/* This css was added as part of the LEARNER-1726 experiment */ /* This css was added as part of the LEARNER-1726 experiment */
.v2.register-choice { .v2.register-choice {
margin: 0 2% 20px 0 !important margin: 0 2% 20px 0 !important
...@@ -28,11 +29,11 @@ ...@@ -28,11 +29,11 @@
display: inline-block !important; display: inline-block !important;
padding: 10px 15px !important; padding: 10px 15px !important;
border-radius: 3px !important; border-radius: 3px !important;
border: 1px solid #D7548E !important; border: 1px solid #d7548e !important;
box-shadow: 0 2px 1px 0 #982c62 !important; box-shadow: 0 2px 1px 0 #982c62 !important;
background: white !important; background: white !important;
text-align: center !important; text-align: center !important;
color: #D7548E !important; color: #d7548e !important;
float: left !important; float: left !important;
font-size: 15px; font-size: 15px;
font-weight: 500 !important; font-weight: 500 !important;
...@@ -95,7 +96,7 @@ ...@@ -95,7 +96,7 @@
} }
.v2.register-choice-continue { .v2.register-choice-continue {
border-color: #D7548E !important; border-color: #d7548e !important;
} }
.v2 .wrapper-copy-inline { .v2 .wrapper-copy-inline {
...@@ -128,12 +129,12 @@ ...@@ -128,12 +129,12 @@
background-color: rgb(0, 103, 0); background-color: rgb(0, 103, 0);
border-color: rgb(0, 103, 0); border-color: rgb(0, 103, 0);
border-radius: 2px; border-radius: 2px;
box-shadow: rgb(0, 77, 0) 0px 2px 1px 0px; box-shadow: rgb(0, 77, 0) 0 2px 1px 0;
cursor: pointer; cursor: pointer;
font-family: "Open Sans"; font-family: "Open Sans";
height: auto; height: auto;
margin-right: 4px; margin-right: 4px;
margin-top: 0px; margin-top: 0;
padding: 10px 15px; padding: 10px 15px;
width: initial; width: initial;
background-image: none !important; background-image: none !important;
...@@ -143,7 +144,7 @@ ...@@ -143,7 +144,7 @@
&:hover, &:focus { &:hover, &:focus {
background-color: #009b00 !important; background-color: #009b00 !important;
border-color: #009b00; border-color: #009b00;
box-shadow: #004d00 0px 2px 1px 0px; box-shadow: #004d00 0 2px 1px 0;
} }
} }
...@@ -151,6 +152,7 @@ ...@@ -151,6 +152,7 @@
margin-top: 10px; margin-top: 10px;
font-size: 11px; font-size: 11px;
} }
@media screen and (min-width: 375px) { @media screen and (min-width: 375px) {
.savings-message { .savings-message {
font-size: 13px; font-size: 13px;
...@@ -259,7 +261,7 @@ ...@@ -259,7 +261,7 @@
.v2.register-choice .list-actions:last-child { .v2.register-choice .list-actions:last-child {
float: left; float: left;
width: 100%; width: 100%;
margin-top: 0px; margin-top: 0;
} }
.v2.register-choice .action-select { .v2.register-choice .action-select {
...@@ -268,7 +270,7 @@ ...@@ -268,7 +270,7 @@
.v2 .continue-link:hover, .v2 .continue-link:hover,
.v2 .continue-link:focus { .v2 .continue-link:focus {
background-color: #D7548E !important; background-color: #d7548e !important;
color: white !important; color: white !important;
text-decoration: none; text-decoration: none;
} }
...@@ -294,7 +296,7 @@ ...@@ -294,7 +296,7 @@
} }
.v2 .wrapper-copy-inline .wrapper-copy ul { .v2 .wrapper-copy-inline .wrapper-copy ul {
margin-top: 0px; margin-top: 0;
padding-left: 30px; padding-left: 30px;
} }
...@@ -310,7 +312,7 @@ ...@@ -310,7 +312,7 @@
.v2 .img-donate { .v2 .img-donate {
margin-top: 0; margin-top: 0;
float: right; float: right;
border: 2px solid #D7548E !important; border: 2px solid #d7548e !important;
display: none; display: none;
} }
...@@ -342,7 +344,7 @@ ...@@ -342,7 +344,7 @@
float: left; float: left;
display: inline-block; display: inline-block;
height: 250px; height: 250px;
margin: 0px 0 40px 0 !important; margin: 0 0 40px 0 !important;
border-left: 4px solid #f5f5f5 !important; border-top:none !important; border-left: 4px solid #f5f5f5 !important; border-top:none !important;
.copy { .copy {
...@@ -371,6 +373,7 @@ ...@@ -371,6 +373,7 @@
.v2 .continue-link { .v2 .continue-link {
width: 55%; width: 55%;
} }
.v2.deco-divider .copy { .v2.deco-divider .copy {
margin-left: 15px; margin-left: 15px;
} }
...@@ -382,10 +385,12 @@ ...@@ -382,10 +385,12 @@
.v2.deco-divider { .v2.deco-divider {
min-height: 260px; min-height: 260px;
} }
.v2 .img-certificate, .v2 .img-donate { .v2 .img-certificate, .v2 .img-donate {
margin-top: 10px; margin-top: 10px;
display: initial; display: initial;
} }
.v2 .continue-link, .v2.register-choice-certificate button, .v2 .continue-link, .v2.register-choice-certificate button,
.v2.register-choice-certificate input { .v2.register-choice-certificate input {
margin-top: -22px !important; margin-top: -22px !important;
......
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
...@@ -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%;
} }
...@@ -212,8 +218,10 @@ mark { ...@@ -212,8 +218,10 @@ 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-depth2;
@extend %ui-print-excluded; @extend %ui-print-excluded;
position: fixed; position: fixed;
top: 250px; top: 250px;
left: 0; left: 0;
...@@ -244,6 +252,7 @@ mark { ...@@ -244,6 +252,7 @@ mark {
button { button {
@extend %btn-secondary-blue-outline; @extend %btn-secondary-blue-outline;
margin: .5rem 0; margin: .5rem 0;
font-weight: initial; font-weight: initial;
text-shadow: none; text-shadow: none;
...@@ -265,6 +274,7 @@ mark { ...@@ -265,6 +274,7 @@ mark {
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/_headings.scss
...@@ -114,9 +114,9 @@ $headings-base-color: $gray-d2; ...@@ -114,9 +114,9 @@ $headings-base-color: $gray-d2;
// 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 { h2 {
@extend %hd-2; @extend %hd-2;
font-weight: $headings-font-weight-bold; font-weight: $headings-font-weight-bold;
// override external modules and xblocks that use inline CSS // override external modules and xblocks that use inline CSS
text-transform: initial; text-transform: initial;
......
lms/static/sass/base/_mixins.scss
...@@ -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;
...@@ -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;
...@@ -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/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 { .errors-info {
...@@ -16,19 +17,20 @@ ...@@ -16,19 +17,20 @@
background: $gray-l5; background: $gray-l5;
.has-actions { .has-actions {
.msg-content { .msg-content {
width: flex-grid(9,12); width: flex-grid(9,12);
} }
.msg-actions { .msg-actions {
@extend %t-copy-base; @extend %t-copy-base;
display: inline-block; display: inline-block;
width: flex-grid(3,12); width: flex-grid(3,12);
.btn { .btn {
@extend %btn-primary-blue; @extend %btn-primary-blue;
@extend %t-weight4; @extend %t-weight4;
text-shadow: none; text-shadow: none;
} }
} }
......
lms/static/sass/course/_gradebook.scss
...@@ -11,11 +11,12 @@ $table-border-color: #c8c8c8; ...@@ -11,11 +11,12 @@ $table-border-color: #c8c8c8;
} }
div.gradebook-wrapper { div.gradebook-wrapper {
section.gradebook-content { section.gradebook-content {
@extend .content; @extend .content;
display: block; display: block;
width: 100%; width: 100%;
@include clearfix(); @include clearfix();
.student-search { .student-search {
...@@ -26,13 +27,16 @@ div.gradebook-wrapper { ...@@ -26,13 +27,16 @@ div.gradebook-wrapper {
width: 100%; width: 100%;
height: 27px; height: 27px;
padding: 0 ($baseline*0.75) 0 35px; padding: 0 ($baseline*0.75) 0 35px;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 13px; border-radius: 13px;
border: 1px solid $table-border-color; border: 1px solid $table-border-color;
background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6; background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 11px; font-size: 11px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
@include transition(border-color .15s linear 0s); @include transition(border-color .15s linear 0s);
&::-webkit-input-placeholder, &::-webkit-input-placeholder,
...@@ -100,6 +104,7 @@ div.gradebook-wrapper { ...@@ -100,6 +104,7 @@ div.gradebook-wrapper {
.left-shadow, .left-shadow,
.right-shadow { .right-shadow {
@extend %ui-depth4; @extend %ui-depth4;
position: absolute; position: absolute;
top: 0; top: 0;
width: 20px; width: 20px;
...@@ -131,6 +136,7 @@ div.gradebook-wrapper { ...@@ -131,6 +136,7 @@ div.gradebook-wrapper {
left: 0; left: 0;
width: 1000px; width: 1000px;
cursor: move; cursor: move;
@include transition(none); @include transition(none);
@include user-select(none); @include user-select(none);
...@@ -143,7 +149,9 @@ div.gradebook-wrapper { ...@@ -143,7 +149,9 @@ div.gradebook-wrapper {
thead th { thead th {
position: relative; position: relative;
height: 50px; height: 50px;
@include linear-gradient(top, $cell-border-color, #ddd); @include linear-gradient(top, $cell-border-color, #ddd);
font-size: 10px; font-size: 10px;
line-height: 10px; line-height: 10px;
font-weight: bold; font-weight: bold;
...@@ -174,7 +182,9 @@ div.gradebook-wrapper { ...@@ -174,7 +182,9 @@ div.gradebook-wrapper {
.max { .max {
height: 12px; height: 12px;
@include linear-gradient(top, #c6c6c6, #bababa); @include linear-gradient(top, #c6c6c6, #bababa);
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
color: $white; color: $white;
...@@ -219,7 +229,9 @@ div.gradebook-wrapper { ...@@ -219,7 +229,9 @@ div.gradebook-wrapper {
.student-table tr.highlight td, .student-table tr.highlight td,
.grade-table tr.highlight td { .grade-table tr.highlight td {
border-color: #74b7d6; border-color: #74b7d6;
@include linear-gradient(#8ed6f7, #76cbf4); @include linear-gradient(#8ed6f7, #76cbf4);
color: #333; color: #333;
a { a {
......
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,8 +178,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -158,8 +178,11 @@ $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;
...@@ -173,15 +196,18 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -173,15 +196,18 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// 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,13 +284,13 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -254,13 +284,13 @@ $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: "";
} }
...@@ -273,7 +303,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4; ...@@ -273,7 +303,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// 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;
...@@ -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 {
......
lms/static/sass/course/base/_base.scss
...@@ -41,6 +41,7 @@ body { ...@@ -41,6 +41,7 @@ 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;
} }
...@@ -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);
} }
...@@ -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,15 +189,17 @@ h1.top-header { ...@@ -179,15 +189,17 @@ 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 { }
@else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left content: "\f053"; // .fa-chevron-left
} }
} }
...@@ -195,20 +207,24 @@ h1.top-header { ...@@ -195,20 +207,24 @@ h1.top-header {
// 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 { }
@else if $bi-app-direction == rtl {
content: "\f054"; // .fa-chevron-right 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 { }
@else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right 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
...@@ -9,31 +9,39 @@ table.ccx-schedule { ...@@ -9,31 +9,39 @@ table.ccx-schedule {
thead { thead {
border-bottom: 2px solid black; border-bottom: 2px solid black;
} }
th:first-child { th:first-child {
width: 40%; width: 40%;
} }
th:last-child { th:last-child {
width: 18%; width: 18%;
} }
th, td { th, td {
padding: 10px; padding: 10px;
} }
td.no-link { td.no-link {
font-size: 13px; font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb; text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none; text-decoration: none;
} }
.sequential .unit { .sequential .unit {
padding-left: 25px; padding-left: 25px;
} }
.vertical .unit { .vertical .unit {
padding-left: 40px; padding-left: 40px;
} }
a.empty { a.empty {
display: block; display: block;
width: 100%; width: 100%;
color: white; color: white;
} }
a.empty:hover { a.empty:hover {
color: #cbcbcb; color: #cbcbcb;
} }
...@@ -57,6 +65,7 @@ form.ccx-form { ...@@ -57,6 +65,7 @@ form.ccx-form {
// 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; background: #fcfcfc;
border: 1px solid #e9e8e8; border: 1px solid #e9e8e8;
box-sizing: padding-box; box-sizing: padding-box;
...@@ -68,33 +77,39 @@ form.ccx-form { ...@@ -68,33 +77,39 @@ form.ccx-form {
padding: 10px; padding: 10px;
transition: all 125ms ease-in-out 0s; transition: all 125ms ease-in-out 0s;
width: 100%; width: 100%;
&:disabled { &:disabled {
border-color: #cfd8dc; border-color: #cfd8dc;
background: #e7ecee; background: #e7ecee;
cursor: not-allowed; cursor: not-allowed;
} }
} }
input { input {
@include font-size(15); @include font-size(15);
background: #FCFCFC none repeat scroll 0% 0%;
border: 1px solid #E7E6E6; background: #fcfcfc none repeat scroll 0% 0%;
border: 1px solid #e7e6e6;
box-sizing: border-box; box-sizing: border-box;
color: #34383A; color: #34383a;
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;
transition: all 0.125s ease-in-out 0s; transition: all 0.125s ease-in-out 0s;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
&:focus { &:focus {
border-color: #0ea6ec; border-color: #0ea6ec;
color: #282c2e; color: #282c2e;
outline: 0; outline: 0;
} }
&:disabled { &:disabled {
border-color: #cfd8dc; border-color: #cfd8dc;
background: #e7ecee; background: #e7ecee;
cursor: not-allowed; cursor: not-allowed;
} }
} }
.field { .field {
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
} }
...@@ -106,18 +121,22 @@ button.ccx-button-link { ...@@ -106,18 +121,22 @@ button.ccx-button-link {
padding: 0; padding: 0;
color: #069; color: #069;
cursor: pointer; cursor: pointer;
&:after {
&::after {
content: "\00a0 "; content: "\00a0 ";
} }
&:active { &:active {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
} }
&:hover { &:hover {
color: brown; color: brown;
background: none; background: none;
} }
&:focus { &:focus {
background: none; background: none;
} }
......
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/courseware/_courseware.scss
...@@ -27,9 +27,11 @@ html.video-fullscreen { ...@@ -27,9 +27,11 @@ html.video-fullscreen {
.instructor-info-action { .instructor-info-action {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include float(right); @include float(right);
@include margin-left($baseline/2); @include margin-left($baseline/2);
@include text-align(right); @include text-align(right);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4); border-radius: ($baseline/4);
background-color: $light-gray1; background-color: $light-gray1;
...@@ -44,9 +46,9 @@ html.video-fullscreen { ...@@ -44,9 +46,9 @@ html.video-fullscreen {
} }
.content-wrapper { .content-wrapper {
.container-footer { .container-footer {
@include text-align(right); @include text-align(right);
margin: 0 auto; margin: 0 auto;
max-width: grid-width(12); max-width: grid-width(12);
min-width: 760px; min-width: 760px;
...@@ -55,11 +57,12 @@ html.video-fullscreen { ...@@ -55,11 +57,12 @@ html.video-fullscreen {
} }
.content-wrapper { .content-wrapper {
.course-license, .course-license,
.xblock-license { .xblock-license {
@include text-align(right); @include text-align(right);
@extend %t-title7; @extend %t-title7;
display: block; display: block;
width: auto; width: auto;
padding: ($baseline/4) 0; padding: ($baseline/4) 0;
...@@ -121,6 +124,7 @@ html.video-fullscreen { ...@@ -121,6 +124,7 @@ html.video-fullscreen {
.course-content, .course-content,
.courseware-results-wrapper { .courseware-results-wrapper {
@extend .content; @extend .content;
line-height: 1.6; line-height: 1.6;
.xblock { .xblock {
...@@ -133,43 +137,55 @@ html.video-fullscreen { ...@@ -133,43 +137,55 @@ html.video-fullscreen {
margin: 0 0 lh(); margin: 0 0 lh();
letter-spacing: 0; letter-spacing: 0;
} }
div.timed-exam { div.timed-exam {
h3 { h3 {
margin-bottom: 12px; margin-bottom: 12px;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
} }
h1 { h1 {
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
font-size: 26px; font-size: 26px;
font-weight: 600; font-weight: 600;
} }
h4 { h4 {
margin: 20px 0; margin: 20px 0;
font-weight: 600; font-weight: 600;
b.success { b.success {
color: #2B8048; color: #2b8048;
} }
b.success { b.success {
color: #2B8048; color: #2b8048;
} }
b.failure { b.failure {
color: #CB4765; color: #cb4765;
} }
} }
p { p {
color: #797676; color: #797676;
strong { strong {
font-weight: 600; font-weight: 600;
} }
} }
button.gated-sequence { button.gated-sequence {
background: $transparent; background: $transparent;
color: $uxpl-blue-base; color: $uxpl-blue-base;
border: none; border: none;
box-shadow: none; box-shadow: none;
@include text-align(left); @include text-align(left);
@extend %t-copy-base; @extend %t-copy-base;
width: 100%; width: 100%;
&:hover { &:hover {
...@@ -182,34 +198,41 @@ html.video-fullscreen { ...@@ -182,34 +198,41 @@ html.video-fullscreen {
margin-top: 5px; margin-top: 5px;
font-size: 1.3em; font-size: 1.3em;
} }
.gated-sequence { .gated-sequence {
color: $uxpl-blue-base; color: $uxpl-blue-base;
font-weight: 600; font-weight: 600;
padding: ($baseline / 1.5) ($baseline / 4); padding: ($baseline / 1.5) ($baseline / 4);
a.start-timed-exam { a.start-timed-exam {
cursor: pointer; cursor: pointer;
color: $uxpl-blue-base; color: $uxpl-blue-base;
font-weight: 600; font-weight: 600;
position: relative; position: relative;
top: ($baseline/10); top: ($baseline/10);
i.fa-arrow-circle-right { i.fa-arrow-circle-right {
font-size: $baseline; font-size: $baseline;
} }
} }
} }
.proctored-exam-select-code { .proctored-exam-select-code {
@include margin-left(30px); @include margin-left(30px);
} }
.exam-action-button { .exam-action-button {
@extend %t-weight4; @extend %t-weight4;
@include margin-right($baseline); @include margin-right($baseline);
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
&.btn-pl-primary { &.btn-pl-primary {
@extend %btn-pl-primary-base; @extend %btn-pl-primary-base;
border: 0; border: 0;
&:hover, &:hover,
...@@ -219,41 +242,50 @@ html.video-fullscreen { ...@@ -219,41 +242,50 @@ html.video-fullscreen {
} }
} }
background-color: #F2F8FB; background-color: #f2f8fb;
padding: 30px; padding: 30px;
font-size: 16px; font-size: 16px;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);
border: 1px solid #ddd; border: 1px solid #ddd;
&.critical-time { &.critical-time {
border-left: 4px solid #b30101 !important; border-left: 4px solid #b30101 !important;
margin: 0 auto; margin: 0 auto;
} }
&.success { &.success {
border-left: 4px solid #22B557 !important; border-left: 4px solid #22b557 !important;
margin: 0 auto; margin: 0 auto;
} }
&.success-top-bar { &.success-top-bar {
border-top: 4px solid #22B557 !important; border-top: 4px solid #22b557 !important;
margin: 0 auto; margin: 0 auto;
} }
&.success-left-bar { &.success-left-bar {
border-left: 4px solid #22B557 !important; border-left: 4px solid #22b557 !important;
margin: 0 auto; margin: 0 auto;
} }
&.message-top-bar { &.message-top-bar {
border-top: 4px solid #FAB95C !important; border-top: 4px solid #fab95c !important;
margin: 0 auto; margin: 0 auto;
} }
&.message-left-bar { &.message-left-bar {
border-left: 4px solid #FAB95C !important; border-left: 4px solid #fab95c !important;
margin: 0 auto; margin: 0 auto;
} }
&.failure { &.failure {
border-left: 4px solid #C93B34 !important; border-left: 4px solid #c93b34 !important;
margin: 0 auto; margin: 0 auto;
} }
&.warning { &.warning {
@include border-left(4px solid $warning-color); @include border-left(4px solid $warning-color);
margin: 0 auto; margin: 0 auto;
} }
} }
...@@ -299,6 +331,7 @@ html.video-fullscreen { ...@@ -299,6 +331,7 @@ html.video-fullscreen {
p { p {
color: $uxpl-gray-base; color: $uxpl-gray-base;
strong { strong {
font-weight: 600; font-weight: 600;
} }
...@@ -306,6 +339,7 @@ html.video-fullscreen { ...@@ -306,6 +339,7 @@ html.video-fullscreen {
.icon { .icon {
@include right(35px); @include right(35px);
position: absolute; position: absolute;
font-size: 30px; font-size: 30px;
color: $uxpl-gray-base; color: $uxpl-gray-base;
...@@ -337,64 +371,81 @@ html.video-fullscreen { ...@@ -337,64 +371,81 @@ html.video-fullscreen {
.proctored-exam-skip-actions { .proctored-exam-skip-actions {
@include float(right); @include float(right);
margin-top: $baseline; margin-top: $baseline;
} }
} }
.footer-sequence { .footer-sequence {
padding: 30px 0px 20px 0px; padding: 30px 0 20px 0;
border-bottom: ($baseline/10) solid #CFD9DD; border-bottom: ($baseline/10) solid #cfd9dd;
hr { hr {
border-bottom: 1px solid $uxpl-gray-background; border-bottom: 1px solid $uxpl-gray-background;
} }
.clearfix { .clearfix {
clear: both; clear: both;
} }
h4 { h4 {
margin-bottom: 12px; margin-bottom: 12px;
font-size: 22px; font-size: 22px;
font-weight: 400; font-weight: 400;
} }
span { span {
margin-bottom: 10px; margin-bottom: 10px;
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
} }
p.proctored-exam-option { p.proctored-exam-option {
float: left; float: left;
width: 80%; width: 80%;
margin-bottom: 25px; margin-bottom: 25px;
} }
a.contest-review { a.contest-review {
@include float(right); @include float(right);
@include text-align(right); @include text-align(right);
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
width: 20%; width: 20%;
} }
p { p {
margin-bottom: ($baseline/20); margin-bottom: ($baseline/20);
color: #797676; color: #797676;
} }
.proctored-exam-instruction { .proctored-exam-instruction {
padding: ($baseline/2) 0; padding: ($baseline/2) 0;
border-bottom: 2px solid $uxpl-gray-background; border-bottom: 2px solid $uxpl-gray-background;
} }
} }
.border-b-0 { .border-b-0 {
border-bottom: none; border-bottom: none;
} }
.padding-b-0 { .padding-b-0 {
padding-bottom: ($baseline/20); padding-bottom: ($baseline/20);
} }
.faq-proctoring-exam { .faq-proctoring-exam {
@extend .footer-sequence; @extend .footer-sequence;
border-bottom : none; border-bottom : none;
a.footer-link { a.footer-link {
display: block; display: block;
padding: ($baseline/2) 0; padding: ($baseline/2) 0;
} }
} }
p { p {
margin-bottom: lh(); margin-bottom: lh();
} }
...@@ -404,6 +455,7 @@ html.video-fullscreen { ...@@ -404,6 +455,7 @@ html.video-fullscreen {
background-color: $gray-l5; background-color: $gray-l5;
padding: ($baseline * 0.75); padding: ($baseline * 0.75);
border-radius: 3px; border-radius: 3px;
@include font-size(13); @include font-size(13);
} }
...@@ -415,6 +467,7 @@ html.video-fullscreen { ...@@ -415,6 +467,7 @@ html.video-fullscreen {
.path { .path {
@extend %t-copy-sub1; @extend %t-copy-sub1;
margin-top: -($baseline); margin-top: -($baseline);
margin-bottom: $baseline; margin-bottom: $baseline;
color: $gray; color: $gray;
...@@ -446,6 +499,7 @@ html.video-fullscreen { ...@@ -446,6 +499,7 @@ html.video-fullscreen {
header { header {
@extend h1.top-header; @extend h1.top-header;
border-radius: 0 4px 0 0; border-radius: 0 4px 0 0;
margin-bottom: -16px; margin-bottom: -16px;
border-bottom: 0; border-bottom: 0;
...@@ -458,6 +512,7 @@ html.video-fullscreen { ...@@ -458,6 +512,7 @@ html.video-fullscreen {
h2 { h2 {
@include border-right(0); @include border-right(0);
@include padding-right(0); @include padding-right(0);
margin: 12px 0 0; margin: 12px 0 0;
font-size: em(14, 24); font-size: em(14, 24);
} }
...@@ -476,10 +531,12 @@ html.video-fullscreen { ...@@ -476,10 +531,12 @@ html.video-fullscreen {
ul { ul {
@include padding-left(1em); @include padding-left(1em);
list-style: disc outside none; list-style: disc outside none;
&.discussion-errors { &.discussion-errors {
@include padding-left(2em); @include padding-left(2em);
list-style: none; list-style: none;
} }
...@@ -502,6 +559,7 @@ html.video-fullscreen { ...@@ -502,6 +559,7 @@ html.video-fullscreen {
.vert { .vert {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: ($baseline*0.75); margin-bottom: ($baseline*0.75);
padding: 0 0 15px; padding: 0 0 15px;
...@@ -509,8 +567,8 @@ html.video-fullscreen { ...@@ -509,8 +567,8 @@ html.video-fullscreen {
.vert > .xblock-student_view.is-hidden { .vert > .xblock-student_view.is-hidden {
display: none; display: none;
border-bottom: 0px; border-bottom: 0;
margin-bottom: 0px; margin-bottom: 0;
} }
} }
...@@ -525,13 +583,16 @@ html.video-fullscreen { ...@@ -525,13 +583,16 @@ html.video-fullscreen {
ul { ul {
margin: 0; margin: 0;
@include clearfix(); @include clearfix();
padding: 0; padding: 0;
list-style: none; list-style: none;
li { li {
@include float(left); @include float(left);
@include margin-right(flex-gutter(9)); @include margin-right(flex-gutter(9));
width: flex-grid(3, 9); width: flex-grid(3, 9);
margin-bottom: lh(); margin-bottom: lh();
line-height: lh(); line-height: lh();
...@@ -555,6 +616,7 @@ html.video-fullscreen { ...@@ -555,6 +616,7 @@ html.video-fullscreen {
p.error { p.error {
color: $error-color color: $error-color
} }
p.success { p.success {
color: $success-color; color: $success-color;
} }
...@@ -570,7 +632,9 @@ html.video-fullscreen { ...@@ -570,7 +632,9 @@ html.video-fullscreen {
div.staff_info { div.staff_info {
display: none; display: none;
@include clearfix(); @include clearfix();
white-space: pre-wrap; white-space: pre-wrap;
border-top: 1px solid $gray-l3; border-top: 1px solid $gray-l3;
padding-top: lh(); padding-top: lh();
...@@ -680,7 +744,6 @@ section.self-assessment { ...@@ -680,7 +744,6 @@ section.self-assessment {
*/ */
.CodeMirror { .CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt { .CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important; color: $gray-d3 !important;
} }
......
lms/static/sass/course/courseware/_sidebar.scss
.course-index { .course-index {
@include transition( all .2s $ease-in-out-quad 0s); @include transition(all .2s $ease-in-out-quad 0s);
@include border-right(1px solid $border-color-2); @include border-right(1px solid $border-color-2);
@include border-radius(3px, 0, 0, 3px); @include border-radius(3px, 0, 0, 3px);
display: table-cell; // needed to extend the sidebar the full height of the area display: table-cell; // needed to extend the sidebar the full height of the area
// provides sufficient contrast for all screen reader-only elements // provides sufficient contrast for all screen reader-only elements
...@@ -20,12 +21,12 @@ ...@@ -20,12 +21,12 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
.course-navigation { .course-navigation {
.button-chapter { .button-chapter {
@include transition(all $tmg-s3 ease-in-out); @include transition(all $tmg-s3 ease-in-out);
@include box-sizing(border-box); @include box-sizing(border-box);
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom); @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
@include transition(background-color .1s linear 0s); @include transition(background-color .1s linear 0s);
display: block; display: block;
width: 100%; width: 100%;
border: 0; border: 0;
...@@ -38,14 +39,18 @@ ...@@ -38,14 +39,18 @@
.group-heading { .group-heading {
@extend %t-title6; @extend %t-title6;
position: relative; position: relative;
display: block; display: block;
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2); padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
@include text-align(left); @include text-align(left);
.icon { .icon {
position: absolute; position: absolute;
@include left($baseline); @include left($baseline);
top: $baseline; top: $baseline;
font-size: $body-font-size; font-size: $body-font-size;
color: $gray-l3; color: $gray-l3;
...@@ -58,9 +63,9 @@ ...@@ -58,9 +63,9 @@
} }
&.active { &.active {
.group-heading { .group-heading {
@extend %t-strong; @extend %t-strong;
color: $base-font-color; color: $base-font-color;
} }
} }
...@@ -89,24 +94,28 @@ ...@@ -89,24 +94,28 @@
.menu-item { .menu-item {
@extend %t-strong; @extend %t-strong;
margin: ($baseline/5) 0; margin: ($baseline/5) 0;
background: inherit; background: inherit;
a { a {
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
position: relative; position: relative;
display: block; display: block;
@include padding(($baseline/4) ($baseline/2)); @include padding(($baseline/4) ($baseline/2));
border-radius: ($baseline/4); border-radius: ($baseline/4);
font-family: $sans-serif; font-family: $sans-serif;
color: $base-font-color; color: $base-font-color;
p { p {
&.subtitle { &.subtitle {
@extend %t-action4; @extend %t-action4;
@extend %t-regular; @extend %t-regular;
display: block; display: block;
margin: 0; margin: 0;
color: $gray-d1; color: $gray-d1;
...@@ -147,9 +156,9 @@ ...@@ -147,9 +156,9 @@
} }
&.graded { &.graded {
.menu-icon { .menu-icon {
@include right($baseline/2.5); @include right($baseline/2.5);
position: absolute; position: absolute;
bottom: ($baseline/2); bottom: ($baseline/2);
color: $link-color; color: $link-color;
...@@ -157,9 +166,9 @@ ...@@ -157,9 +166,9 @@
} }
&.active { &.active {
a { a {
@extend %t-ultrastrong; @extend %t-ultrastrong;
background: $gray-l4; background: $gray-l4;
} }
} }
......
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/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;
...@@ -114,12 +123,13 @@ ...@@ -114,12 +123,13 @@
&.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
...@@ -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,6 +28,7 @@ table.wiki-history { ...@@ -28,6 +28,7 @@ table.wiki-history {
} }
} }
} }
tbody { tbody {
tr td { tr td {
padding: 8px 15px; padding: 8px 15px;
......
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
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
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; display: inline-block;
border: 1px solid $forum-color-active-thread; border: 1px solid $forum-color-active-thread;
border-radius: 3px; border-radius: 3px;
...@@ -56,12 +57,14 @@ ...@@ -56,12 +57,14 @@
.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; background-color: $forum-color-background;
color: $forum-color-active-thread; color: $forum-color-active-thread;
} }
.btn-brand { .btn-brand {
@extend %pattern-library-btn; @extend %pattern-library-btn;
background-color: $forum-color-active-thread; background-color: $forum-color-active-thread;
color: $forum-color-active-text; color: $forum-color-active-text;
} }
......
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,7 +2,6 @@ ...@@ -2,7 +2,6 @@
@import '../course/base/extends'; @import '../course/base/extends';
.discussion-user-profile-board { .discussion-user-profile-board {
.discussion-profile-title { .discussion-profile-title {
margin-bottom: $baseline / 5; margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size; font-size: $forum-x-large-font-size;
...@@ -18,6 +17,7 @@ ...@@ -18,6 +17,7 @@
.user-name { .user-name {
@include margin-right($baseline); @include margin-right($baseline);
font-size: $forum-x-large-font-size; font-size: $forum-x-large-font-size;
} }
......
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/elements/_navigation.scss
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
.forum-nav-browse-filter .icon { .forum-nav-browse-filter .icon {
@include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding @include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
position: absolute; position: absolute;
margin-top: -6px; margin-top: -6px;
...@@ -68,9 +69,11 @@ ...@@ -68,9 +69,11 @@
.icon { .icon {
@include float(left); @include float(left);
@include left($baseline / 2); @include left($baseline / 2);
position: relative; position: relative;
top: 13px; top: 13px;
} }
.forum-nav-browse-title { .forum-nav-browse-title {
@include padding-left($baseline * 1.5); @include padding-left($baseline * 1.5);
} }
...@@ -82,6 +85,7 @@ ...@@ -82,6 +85,7 @@
.forum-nav-browse-title { .forum-nav-browse-title {
@include text-align(left); @include text-align(left);
display: block; display: block;
width: 100%; width: 100%;
border: 0; border: 0;
...@@ -119,7 +123,6 @@ ...@@ -119,7 +123,6 @@
padding: 0; padding: 0;
li { li {
.forum-nav-browse-title { .forum-nav-browse-title {
@include padding-left($baseline); @include padding-left($baseline);
} }
...@@ -133,6 +136,7 @@ ...@@ -133,6 +136,7 @@
.forum-nav-refine-bar { .forum-nav-refine-bar {
@include clearfix(); @include clearfix();
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5; background-color: $gray-l5;
...@@ -143,12 +147,14 @@ ...@@ -143,12 +147,14 @@
.forum-nav-filter-main { .forum-nav-filter-main {
@include text-align(left); @include text-align(left);
@include float(left); @include float(left);
box-sizing: border-box; box-sizing: border-box;
width: 50%; width: 50%;
} }
.forum-nav-filter-cohort, .forum-nav-sort { .forum-nav-filter-cohort, .forum-nav-sort {
@include text-align(right); @include text-align(right);
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -156,6 +162,7 @@ ...@@ -156,6 +162,7 @@
.discussion-board & { .discussion-board & {
@include float(right); @include float(right);
@include text-align(right); @include text-align(right);
width: 50%; width: 50%;
} }
} }
...@@ -176,6 +183,7 @@ ...@@ -176,6 +183,7 @@
.forum-nav-filter-cohort-control { .forum-nav-filter-cohort-control {
@extend %forum-nav-select; @extend %forum-nav-select;
max-width: 60%; max-width: 60%;
} }
...@@ -221,6 +229,7 @@ ...@@ -221,6 +229,7 @@
// Overrides underspecific styles from courseware css // Overrides underspecific styles from courseware css
.course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list { .course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list {
@include padding-left(0); @include padding-left(0);
list-style: none; list-style: none;
.forum-nav-thread { .forum-nav-thread {
...@@ -240,6 +249,7 @@ ...@@ -240,6 +249,7 @@
.forum-nav-thread-link { .forum-nav-thread-link {
@include border-left(3px solid transparent); @include border-left(3px solid transparent);
display: flex; display: flex;
padding: $baseline / 2; padding: $baseline / 2;
transition: none; transition: none;
...@@ -271,6 +281,7 @@ ...@@ -271,6 +281,7 @@
&.never-read { &.never-read {
.forum-nav-thread-link { .forum-nav-thread-link {
@include border-left(3px solid $forum-color-never-read-post); @include border-left(3px solid $forum-color-never-read-post);
color: $forum-color-never-read-post; color: $forum-color-never-read-post;
} }
} }
...@@ -283,7 +294,9 @@ ...@@ -283,7 +294,9 @@
.forum-nav-thread-wrapper-0 { .forum-nav-thread-wrapper-0 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
@include margin-right($baseline/5); @include margin-right($baseline/5);
align-self: flex-start; align-self: flex-start;
.icon { .icon {
...@@ -291,8 +304,7 @@ ...@@ -291,8 +304,7 @@
width: 18px; width: 18px;
text-align: center; text-align: center;
&:before { &::before {
@include rtl { @include rtl {
@include transform(scale(-1, 1)); // RTL for font awesome question mark @include transform(scale(-1, 1)); // RTL for font awesome question mark
} }
...@@ -302,6 +314,7 @@ ...@@ -302,6 +314,7 @@
.forum-nav-thread-wrapper-1 { .forum-nav-thread-wrapper-1 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
margin: 0 ($baseline / 4); margin: 0 ($baseline / 4);
// 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview // 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview
// at the same length whether there are unread comments for this story or not. // at the same length whether there are unread comments for this story or not.
...@@ -311,19 +324,23 @@ ...@@ -311,19 +324,23 @@
.forum-nav-thread-wrapper-2 { .forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
@include text-align(right); @include text-align(right);
min-width: 90px; min-width: 90px;
white-space: nowrap; white-space: nowrap;
} }
.forum-nav-thread-title { .forum-nav-thread-title {
@include margin-left(0); @include margin-left(0);
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
display: block; display: block;
} }
%forum-nav-thread-wrapper-2-content { %forum-nav-thread-wrapper-2-content {
@include margin-right($baseline/4); @include margin-right($baseline/4);
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
...@@ -341,8 +358,11 @@ ...@@ -341,8 +358,11 @@
.forum-nav-thread-comments-count { .forum-nav-thread-comments-count {
@extend %forum-nav-thread-wrapper-2-content; @extend %forum-nav-thread-wrapper-2-content;
@extend %t-weight4; @extend %t-weight4;
position: relative; position: relative;
@include margin-left($baseline/4); @include margin-left($baseline/4);
margin-bottom: ($baseline/4); // Because tail is position: absolute margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
padding: ($baseline/10) ($baseline/5); padding: ($baseline/10) ($baseline/5);
...@@ -350,15 +370,18 @@ ...@@ -350,15 +370,18 @@
background-color: $gray-l4; background-color: $gray-l4;
// Speech bubble tail // Speech bubble tail
&:after { &::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
bottom: (-$baseline/4); bottom: (-$baseline/4);
@include right($baseline/4); @include right($baseline/4);
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0); @include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $gray-l4, transparent, transparent); @include border-color(transparent, $gray-l4, transparent, transparent);
} }
...@@ -377,6 +400,7 @@ ...@@ -377,6 +400,7 @@
.forum-nav-load-more-link { .forum-nav-load-more-link {
@extend %forum-nav-load-more-content; @extend %forum-nav-load-more-content;
color: $link-color; color: $link-color;
width: 100%; width: 100%;
......
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;
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
.forum-nav-browse-filter-input { .forum-nav-browse-filter-input {
@include padding-left($baseline/4); @include padding-left($baseline/4);
@include padding-right($baseline/2 + 12px); // Leave room for icon @include padding-right($baseline/2 + 12px); // Leave room for icon
box-shadow: none !important; box-shadow: none !important;
border-radius: $forum-border-radius !important; border-radius: $forum-border-radius !important;
height: auto !important; height: auto !important;
...@@ -75,7 +76,7 @@ li[class*=forum-nav-thread-label-] { ...@@ -75,7 +76,7 @@ li[class*=forum-nav-thread-label-] {
} }
// Override clearfix stuff in .sidebar ul li rules // Override clearfix stuff in .sidebar ul li rules
&:before, &:after { &::before, &::after {
display: none !important; display: none !important;
} }
} }
...@@ -101,7 +102,6 @@ li[class*=forum-nav-thread-label-] { ...@@ -101,7 +102,6 @@ li[class*=forum-nav-thread-label-] {
// Inline Discussion Module Overrides // Inline Discussion Module Overrides
// ------- // -------
.discussion-module { .discussion-module {
.post-header { .post-header {
margin-bottom: 0 !important; // overrides default header styling margin-bottom: 0 !important; // overrides default header styling
padding-bottom: 0 !important; // overrides default header styling padding-bottom: 0 !important; // overrides default header styling
......
lms/static/sass/discussion/utilities/_v1-compatibility.scss
...@@ -35,18 +35,23 @@ ...@@ -35,18 +35,23 @@
%t-ultrastrong { %t-ultrastrong {
font-weight: 700; font-weight: 700;
} }
%t-strong { %t-strong {
font-weight: 600; font-weight: 600;
} }
%t-demi-strong { %t-demi-strong {
font-weight: 500; font-weight: 500;
} }
%t-regular { %t-regular {
font-weight: 400; font-weight: 400;
} }
%t-light { %t-light {
font-weight: 300; font-weight: 300;
} }
%t-ultralight { %t-ultralight {
font-weight: 200; font-weight: 200;
} }
...@@ -58,13 +63,17 @@ ...@@ -58,13 +63,17 @@
%t-copy-sub1 { %t-copy-sub1 {
@extend %t-copy; @extend %t-copy;
@include line-height(14); @include line-height(14);
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
} }
%t-copy-sub2 { %t-copy-sub2 {
@extend %t-copy; @extend %t-copy;
@include line-height(12); @include line-height(12);
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
} }
......
lms/static/sass/discussion/views/_create-edit-post.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
.forum-new-post-form, .forum-new-post-form,
.edit-post-form { .edit-post-form {
@include clearfix(); @include clearfix();
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
...@@ -38,6 +39,7 @@ ...@@ -38,6 +39,7 @@
.field-input { .field-input {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
&:not([type="text"]) { &:not([type="text"]) {
border-width: 0; border-width: 0;
padding: 0; padding: 0;
...@@ -94,6 +96,7 @@ ...@@ -94,6 +96,7 @@
.edit-post-form { .edit-post-form {
@include clearfix(); @include clearfix();
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding-top: 0; padding-top: 0;
...@@ -113,6 +116,7 @@ ...@@ -113,6 +116,7 @@
.post-update { .post-update {
@include float(left); @include float(left);
margin-top: ($baseline/2); margin-top: ($baseline/2);
&:hover, &:focus { &:hover, &:focus {
...@@ -144,9 +148,9 @@ ...@@ -144,9 +148,9 @@
// UI: inputs // UI: inputs
.forum-new-post-form, .forum-new-post-form,
.edit-post-form { .edit-post-form {
.post-type-label { .post-type-label {
@include margin-right($baseline); @include margin-right($baseline);
color: $gray-d3; color: $gray-d3;
} }
...@@ -170,7 +174,9 @@ ...@@ -170,7 +174,9 @@
.post-option { .post-option {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@include margin-right($baseline); @include margin-right($baseline);
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
padding: ($baseline/2); padding: ($baseline/2);
cursor: pointer; cursor: pointer;
......
lms/static/sass/discussion/views/_home.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
.label { .label {
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: block; display: block;
} }
...@@ -28,10 +29,13 @@ ...@@ -28,10 +29,13 @@
color: $black; color: $black;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
} }
.home-description { .home-description {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.home-stats { .home-stats {
padding: $baseline 0; padding: $baseline 0;
...@@ -48,11 +52,13 @@ ...@@ -48,11 +52,13 @@
.stats-grouping { .stats-grouping {
@include padding-left($baseline); @include padding-left($baseline);
display: inline-block; display: inline-block;
width: 70%; width: 70%;
.profile-stat { .profile-stat {
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: inline-block; display: inline-block;
width: 32.5%; width: 32.5%;
vertical-align: middle; vertical-align: middle;
...@@ -113,11 +119,13 @@ ...@@ -113,11 +119,13 @@
} }
.row-item-full { .row-item-full {
.notification-checkbox { .notification-checkbox {
@include margin-right($baseline/2); @include margin-right($baseline/2);
display: inline-block; display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0); @include padding($baseline/4, 0, $baseline/2, 0);
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
border: 1px solid gray; border: 1px solid gray;
...@@ -125,6 +133,7 @@ ...@@ -125,6 +133,7 @@
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@include margin-left($baseline/2); @include margin-left($baseline/2);
} }
......
lms/static/sass/discussion/views/_inline.scss
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
.add-post-cancel { .add-post-cancel {
@include right($baseline / 2); @include right($baseline / 2);
top: $baseline / 2; top: $baseline / 2;
position: absolute; position: absolute;
color: $uxpl-primary-blue; color: $uxpl-primary-blue;
......
lms/static/sass/discussion/views/_response.scss
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
// wrapper - response plus comment area // wrapper - response plus comment area
.forum-response { .forum-response {
@include animation(fadeIn .3s); @include animation(fadeIn .3s);
position: relative; position: relative;
margin: $baseline 0; margin: $baseline 0;
border: 1px solid $forum-color-border; border: 1px solid $forum-color-border;
...@@ -31,7 +32,9 @@ ...@@ -31,7 +32,9 @@
// wrapper - main response area // wrapper - main response area
.discussion-response { .discussion-response {
box-sizing: border-box; box-sizing: border-box;
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
padding: $baseline; padding: $baseline;
background-color: $forum-color-background; background-color: $forum-color-background;
} }
...@@ -48,6 +51,7 @@ ...@@ -48,6 +51,7 @@
// CASE: larger username for responses // CASE: larger username for responses
.username { .username {
@extend %t-weight5; @extend %t-weight5;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
} }
} }
...@@ -96,6 +100,7 @@ ...@@ -96,6 +100,7 @@
.staff-banner { .staff-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include left(0); @include left(0);
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
...@@ -109,9 +114,10 @@ ...@@ -109,9 +114,10 @@
} }
// CASE: banner - community TA response // CASE: banner - community TA response
.community-ta-banner{ .community-ta-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include left(0); @include left(0);
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
...@@ -137,7 +143,9 @@ ...@@ -137,7 +143,9 @@
// +comments styling // +comments styling
.discussion .comments { .discussion .comments {
@extend %ui-no-list; @extend %ui-no-list;
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius); @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
background: $gray-l6; background: $gray-l6;
box-shadow: 0 1px 3px -1px $shadow inset; box-shadow: 0 1px 3px -1px $shadow inset;
...@@ -156,6 +164,7 @@ ...@@ -156,6 +164,7 @@
.comment-form { .comment-form {
@include clearfix(); @include clearfix();
padding: ($baseline/2) 0; padding: ($baseline/2) 0;
.comment-form-input { .comment-form-input {
...@@ -166,11 +175,13 @@ ...@@ -166,11 +175,13 @@
.discussion-submit-comment { .discussion-submit-comment {
@include float(left); @include float(left);
margin-top: 8px; margin-top: 8px;
} }
.wmd-input { .wmd-input {
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
height: 40px; height: 40px;
} }
...@@ -183,6 +194,7 @@ ...@@ -183,6 +194,7 @@
.response-count { .response-count {
@include float(right); @include float(right);
@include margin-right($baseline / 2); @include margin-right($baseline / 2);
color: $forum-color-response-count; color: $forum-color-response-count;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
} }
...@@ -204,6 +216,7 @@ ...@@ -204,6 +216,7 @@
.load-response-button { .load-response-button {
@include text-align(left); @include text-align(left);
position: relative; position: relative;
margin: ($baseline/2) 0; margin: ($baseline/2) 0;
width: 100%; width: 100%;
......
lms/static/sass/discussion/views/_search.scss
.forum-search { .forum-search {
@include margin-left($baseline); @include margin-left($baseline);
display: inline-block; display: inline-block;
.search-input { .search-input {
......
lms/static/sass/discussion/views/_thread.scss
...@@ -23,11 +23,13 @@ ...@@ -23,11 +23,13 @@
.posted-details { .posted-details {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@extend %t-light; @extend %t-light;
margin: ($baseline/5) 0; margin: ($baseline/5) 0;
color: $forum-color-copy-light; color: $forum-color-copy-light;
.username { .username {
@extend %t-strong; @extend %t-strong;
display: inline; display: inline;
} }
...@@ -63,6 +65,7 @@ ...@@ -63,6 +65,7 @@
.response-header-actions { .response-header-actions {
@include float(right); @include float(right);
@include right($baseline); @include right($baseline);
position: absolute; position: absolute;
top: ($baseline/2); top: ($baseline/2);
} }
...@@ -75,9 +78,9 @@ ...@@ -75,9 +78,9 @@
// comments layout // comments layout
.discussion-comment { .discussion-comment {
.response-body { .response-body {
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: inline-block; display: inline-block;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
width: flex-grid(10,12); width: flex-grid(10,12);
...@@ -90,6 +93,7 @@ ...@@ -90,6 +93,7 @@
.comment-actions-list { .comment-actions-list {
@include float(right); @include float(right);
@include right($baseline / 2); @include right($baseline / 2);
position: absolute; position: absolute;
top: $baseline / 2; top: $baseline / 2;
} }
...@@ -109,6 +113,7 @@ ...@@ -109,6 +113,7 @@
// thread - images // thread - images
.author-image { .author-image {
@include margin-right($baseline/2); @include margin-right($baseline/2);
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
...@@ -143,6 +148,7 @@ ...@@ -143,6 +148,7 @@
.discussion-response .response-body { .discussion-response .response-body {
@include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions. @include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions.
margin-bottom: 0.2em; margin-bottom: 0.2em;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
} }
...@@ -164,6 +170,7 @@ ...@@ -164,6 +170,7 @@
// post body // post body
.post-body { .post-body {
@extend %t-copy-sub1; @extend %t-copy-sub1;
padding: ($baseline/2) 0; padding: ($baseline/2) 0;
max-width: calc(100% - #{$actions-dropdown-offset}); max-width: calc(100% - #{$actions-dropdown-offset});
} }
...@@ -172,6 +179,7 @@ ...@@ -172,6 +179,7 @@
.post-context { .post-context {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@extend %t-light; @extend %t-light;
color: $forum-color-copy-light; color: $forum-color-copy-light;
// CASE: no courseware context or cohort visibility rules // CASE: no courseware context or cohort visibility rules
...@@ -185,6 +193,7 @@ ...@@ -185,6 +193,7 @@
.discussion-thread { .discussion-thread {
padding: 0; padding: 0;
margin-bottom: $baseline; margin-bottom: $baseline;
@include transition(all .25s linear 0s); @include transition(all .25s linear 0s);
p { p {
...@@ -193,15 +202,18 @@ ...@@ -193,15 +202,18 @@
.discussion-article { .discussion-article {
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
border: 1px solid $forum-color-border; border: 1px solid $forum-color-border;
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
min-height: 0; min-height: 0;
background: $forum-color-background; background: $forum-color-background;
box-shadow: 0 1px 0 $shadow; box-shadow: 0 1px 0 $shadow;
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
.thread-wrapper { .thread-wrapper {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
...@@ -209,11 +221,13 @@ ...@@ -209,11 +221,13 @@
background-color: $forum-color-background; background-color: $forum-color-background;
.discussion-post { .discussion-post {
.inline-comment-count { .inline-comment-count {
@include margin-right($baseline/2); @include margin-right($baseline/2);
@extend %ui-depth2; @extend %ui-depth2;
@include float(right); @include float(right);
position: relative; position: relative;
display: block; display: block;
height: 27px; height: 27px;
...@@ -235,6 +249,7 @@ ...@@ -235,6 +249,7 @@
.posted-by { .posted-by {
@include margin-right($baseline/4); @include margin-right($baseline/4);
@include float(left); @include float(left);
font-size: $forum-large-font-size; font-size: $forum-large-font-size;
} }
} }
...@@ -272,6 +287,7 @@ ...@@ -272,6 +287,7 @@
.icon { .icon {
@include margin-right($baseline*0.25); @include margin-right($baseline*0.25);
color: $link-color; color: $link-color;
} }
} }
......
lms/static/sass/elements-v2/_pagination.scss
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
.pagination { .pagination {
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
width: flex-grid(3, 12); width: flex-grid(3, 12);
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
.nav-link { .nav-link {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
display: block; display: block;
border: 0; border: 0;
background-image: none; background-image: none;
...@@ -75,6 +77,7 @@ ...@@ -75,6 +77,7 @@
.current-page { .current-page {
position: absolute; position: absolute;
@include left(-($baseline/4)); @include left(-($baseline/4));
} }
...@@ -94,6 +97,7 @@ ...@@ -94,6 +97,7 @@
.page-number-input { .page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent; border: 1px solid transparent;
border-bottom: 1px dotted $lms-gray; border-bottom: 1px dotted $lms-gray;
border-radius: 0; border-radius: 0;
...@@ -108,7 +112,8 @@ ...@@ -108,7 +112,8 @@
&:focus { &:focus {
// borrowing the base input focus styles to match overall app // borrowing the base input focus styles to match overall app
@include linear-gradient($yellow-l4, tint($yellow-l4, 90%)); @include linear-gradient($yellow-l4, tint($yellow-l4, 90%));
opacity: 1.0;
opacity: 1;
box-shadow: 0 0 3px $black inset; box-shadow: 0 0 3px $black inset;
background-color: $white; background-color: $white;
border: 1px solid transparent; border: 1px solid transparent;
......
lms/static/sass/elements/_controls.scss
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
%btn { %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;
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
%btn-inherited { %btn-inherited {
@include transition(background-color 0.15s, box-shadow 0.15s); @include transition(background-color 0.15s, box-shadow 0.15s);
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0); box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0);
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
...@@ -49,7 +51,9 @@ ...@@ -49,7 +51,9 @@
%btn-inherited-primary { %btn-inherited-primary {
@extend %btn-inherited; @extend %btn-inherited;
@include linear-gradient(top, rgba($white, .3), rgba($white, 0)); @include linear-gradient(top, rgba($white, .3), rgba($white, 0));
border: 1px solid shade($action-primary-bg, 10%); border: 1px solid shade($action-primary-bg, 10%);
background-color: $action-primary-bg; background-color: $action-primary-bg;
color: $action-primary-fg; color: $action-primary-fg;
...@@ -73,6 +77,7 @@ ...@@ -73,6 +77,7 @@
@extend %t-weight3; @extend %t-weight3;
@extend %btn; @extend %btn;
@extend %btn-edged; @extend %btn-edged;
border: none; border: none;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
text-align: center; text-align: center;
...@@ -83,7 +88,6 @@ ...@@ -83,7 +88,6 @@
} }
&.current, &.active { &.current, &.active {
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
} }
...@@ -98,6 +102,7 @@ ...@@ -98,6 +102,7 @@
// blue primary gray // blue primary gray
%btn-primary-gray { %btn-primary-gray {
@extend %btn-primary; @extend %btn-primary;
box-shadow: 0 2px 1px 0 $m-gray-d2; box-shadow: 0 2px 1px 0 $m-gray-d2;
background: $m-gray; background: $m-gray;
color: $white; color: $white;
...@@ -126,6 +131,7 @@ ...@@ -126,6 +131,7 @@
// blue primary error color // blue primary error color
%btn-primary-error { %btn-primary-error {
@extend %btn-primary; @extend %btn-primary;
box-shadow: 0 2px 1px 0 shade($error-color, 25%); box-shadow: 0 2px 1px 0 shade($error-color, 25%);
background: shade($error-color, 25%); background: shade($error-color, 25%);
color: $white; color: $white;
...@@ -143,6 +149,7 @@ ...@@ -143,6 +149,7 @@
// blue primary button // blue primary button
%btn-primary-blue { %btn-primary-blue {
@extend %btn-primary; @extend %btn-primary;
background: $m-blue-d3; background: $m-blue-d3;
color: $white; color: $white;
...@@ -168,6 +175,7 @@ ...@@ -168,6 +175,7 @@
// pink primary button // pink primary button
%btn-primary-pink { %btn-primary-pink {
@extend %btn-primary; @extend %btn-primary;
box-shadow: 0 2px 1px 0 $m-pink-d2; box-shadow: 0 2px 1px 0 $m-pink-d2;
background: $m-pink; background: $m-pink;
color: $white; color: $white;
...@@ -196,6 +204,7 @@ ...@@ -196,6 +204,7 @@
// green primary button // green primary button
%btn-primary-green { %btn-primary-green {
@extend %btn-primary; @extend %btn-primary;
box-shadow: 0 2px 1px 0 $m-green-d2; box-shadow: 0 2px 1px 0 $m-green-d2;
background: $m-green-d1; background: $m-green-d1;
color: $white; color: $white;
...@@ -240,6 +249,7 @@ ...@@ -240,6 +249,7 @@
@extend %t-action2; @extend %t-action2;
@extend %btn; @extend %btn;
@extend %btn-edged; @extend %btn-edged;
box-shadow: none; box-shadow: none;
border: 1px solid $m-blue-d3; border: 1px solid $m-blue-d3;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
...@@ -271,6 +281,7 @@ ...@@ -271,6 +281,7 @@
// grey secondary button outline style // grey secondary button outline style
%btn-secondary-grey-outline { %btn-secondary-grey-outline {
@extend %btn-secondary-blue-outline; @extend %btn-secondary-blue-outline;
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
...@@ -287,9 +298,13 @@ ...@@ -287,9 +298,13 @@
// starts with overrides // starts with overrides
%btn-pl-default-base { %btn-pl-default-base {
@include box-sizing(border-box); @include box-sizing(border-box);
@extend %t-copy-base; @extend %t-copy-base;
letter-spacing: 0; // reset letterspacing from elsewhere letter-spacing: 0; // reset letterspacing from elsewhere
@extend %btn-primary; @extend %btn-primary;
border: 1px solid darken($action-primary-bg,10%); border: 1px solid darken($action-primary-bg,10%);
border-radius: 3px; border-radius: 3px;
padding: 8px $baseline; padding: 8px $baseline;
...@@ -308,18 +323,21 @@ ...@@ -308,18 +323,21 @@
%btn-pl-primary-base { %btn-pl-primary-base {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
background-color: darken($action-primary-bg,10%); background-color: darken($action-primary-bg,10%);
color: $action-primary-fg; color: $action-primary-fg;
} }
%btn-pl-white-base{ %btn-pl-white-base{
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
background-color: $action-primary-fg; background-color: $action-primary-fg;
color: $action-primary-bg; color: $action-primary-bg;
} }
%btn-pl-green-base { %btn-pl-green-base {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
background-color: darken($green-d1,10%); background-color: darken($green-d1,10%);
color: $action-primary-fg; color: $action-primary-fg;
...@@ -332,6 +350,7 @@ ...@@ -332,6 +350,7 @@
%btn-pl-yellow-base { %btn-pl-yellow-base {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
border: 1px solid transparent; border: 1px solid transparent;
background-color: $credit-color-base; background-color: $credit-color-base;
color: $base-font-color; color: $base-font-color;
...@@ -345,6 +364,7 @@ ...@@ -345,6 +364,7 @@
%btn-pl-black-border { %btn-pl-black-border {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
border: 1px solid $m-gray-d4; border: 1px solid $m-gray-d4;
background-color: transparent; background-color: transparent;
color: $base-font-color; color: $base-font-color;
...@@ -358,6 +378,7 @@ ...@@ -358,6 +378,7 @@
%btn-pl-black-base { %btn-pl-black-base {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
border: 1px solid transparent; border: 1px solid transparent;
background-color: $m-gray-d4; background-color: $m-gray-d4;
color: $very-light-text; color: $very-light-text;
...@@ -372,7 +393,9 @@ ...@@ -372,7 +393,9 @@
%btn-pl-secondary-base { %btn-pl-secondary-base {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
@include transition(border $tmg-f2 ease-in-out); @include transition(border $tmg-f2 ease-in-out);
border: 1px solid transparent; border: 1px solid transparent;
color: $action-primary-bg; color: $action-primary-bg;
...@@ -385,6 +408,7 @@ ...@@ -385,6 +408,7 @@
%btn-pl-elevated-alt { %btn-pl-elevated-alt {
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
box-shadow: 0 3px 0 0 $gray-l4; box-shadow: 0 3px 0 0 $gray-l4;
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
...@@ -398,44 +422,47 @@ ...@@ -398,44 +422,47 @@
// ==================== // ====================
// application: canned actions // application: canned actions
.btn { .btn {
font-family: $f-sans-serif; font-family: $f-sans-serif;
} }
.btn-large { .btn-large {
@extend %t-action1; @extend %t-action1;
@extend %t-weight3; @extend %t-weight3;
display: block; display: block;
padding:($baseline*0.75) ($baseline*1.5); padding:($baseline*0.75) ($baseline*1.5);
} }
.btn-avg { .btn-avg {
@extend %t-action2; @extend %t-action2;
@extend %t-weight3; @extend %t-weight3;
} }
.btn-blue { .btn-blue {
@extend %btn-primary-blue; @extend %btn-primary-blue;
margin-bottom: $baseline; margin-bottom: $baseline;
&:last-child { &:last-child {
margin-bottom: none; margin-bottom: none;
} }
} }
.btn-pink { .btn-pink {
@extend %btn-primary-pink; @extend %btn-primary-pink;
margin-bottom: $baseline; margin-bottom: $baseline;
&:last-child { &:last-child {
margin-bottom: none; margin-bottom: none;
} }
} }
.btn-secondary { .btn-secondary {
@extend %btn-pl-secondary-base; @extend %btn-pl-secondary-base;
background-image: none; background-image: none;
...@@ -446,7 +473,7 @@ ...@@ -446,7 +473,7 @@
background-color: transparent !important; background-color: transparent !important;
color: $link-color; color: $link-color;
} }
} }
.btn-link { .btn-link {
@extend %shame-link-text; @extend %shame-link-text;
...@@ -477,11 +504,11 @@ ...@@ -477,11 +504,11 @@
position: relative; position: relative;
&, &:link, &:visited, &:hover, &:active, &:focus { &, &:link, &:visited, &:hover, &:active, &:focus {
&:after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
top: calc( 50% - #{($baseline * 1.1)}); top: calc(50% - #{($baseline * 1.1)});
min-height: ($baseline * 2.2); min-height: ($baseline * 2.2);
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
......
lms/static/sass/elements/_course-card.scss
...@@ -7,10 +7,12 @@ ...@@ -7,10 +7,12 @@
right: auto; right: auto;
bottom: $baseline; bottom: $baseline;
} }
padding: $baseline/2 0; padding: $baseline/2 0;
.section { .section {
@extend .grid-manual; @extend .grid-manual;
padding: $baseline/2 $baseline; padding: $baseline/2 $baseline;
} }
...@@ -19,7 +21,8 @@ ...@@ -19,7 +21,8 @@
.header-img { .header-img {
max-width: 100%; max-width: 100%;
@media(min-width: $bp-screen-sm) {
@media (min-width: $bp-screen-sm) {
max-width: 191px; max-width: 191px;
} }
} }
...@@ -27,8 +30,11 @@ ...@@ -27,8 +30,11 @@
.course-details { .course-details {
@include float(right); @include float(right);
width: 100%; width: 100%;
@media(min-width: $bp-screen-sm) { width: calc(100% - 191px); }
@media (min-width: $bp-screen-sm) { width: calc(100% - 191px); }
padding-left: $baseline*1.5; padding-left: $baseline*1.5;
.course-title { .course-title {
...@@ -47,7 +53,6 @@ ...@@ -47,7 +53,6 @@
} }
.course-actions { .course-actions {
.enrollment-info { .enrollment-info {
width: $baseline*10; width: $baseline*10;
text-align: center; text-align: center;
...@@ -78,6 +83,7 @@ ...@@ -78,6 +83,7 @@
.enrollment-opens { .enrollment-opens {
text-align: center; text-align: center;
margin-bottom: $baseline/2; margin-bottom: $baseline/2;
.enrollment-open-date { .enrollment-open-date {
white-space: nowrap; white-space: nowrap;
} }
...@@ -135,7 +141,7 @@ ...@@ -135,7 +141,7 @@
.message { .message {
margin-bottom: $baseline; margin-bottom: $baseline;
@media(min-width: $bp-screen-md) { @media (min-width: $bp-screen-md) {
margin-bottom: 0; margin-bottom: 0;
} }
} }
...@@ -145,7 +151,7 @@ ...@@ -145,7 +151,7 @@
border-top: 1px solid palette(grayscale, back); border-top: 1px solid palette(grayscale, back);
padding-top: $baseline; padding-top: $baseline;
@media(min-width: $bp-screen-md) { @media (min-width: $bp-screen-md) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
......
lms/static/sass/elements/_creative-commons.scss
...@@ -9,18 +9,18 @@ ...@@ -9,18 +9,18 @@
font-style: normal; font-style: normal;
} }
[class^="icon-cc"]:before, [class*=" icon-cc"]:before { [class^="icon-cc"]::before, [class*=" icon-cc"]::before {
font-family: "CreativeCommons"; font-family: "CreativeCommons";
} }
.icon-cc:before { content: '\e800'; } /* '' */ .icon-cc::before { content: '\e800'; } /* '' */
.icon-cc-by:before { content: '\e801'; } /* '' */ .icon-cc-by::before { content: '\e801'; } /* '' */
.icon-cc-nc:before { content: '\e802'; } /* '' */ .icon-cc-nc::before { content: '\e802'; } /* '' */
.icon-cc-nc-eu:before { content: '\e803'; } /* '' */ .icon-cc-nc-eu::before { content: '\e803'; } /* '' */
.icon-cc-nc-jp:before { content: '\e804'; } /* '' */ .icon-cc-nc-jp::before { content: '\e804'; } /* '' */
.icon-cc-sa:before { content: '\e805'; } /* '' */ .icon-cc-sa::before { content: '\e805'; } /* '' */
.icon-cc-nd:before { content: '\e806'; } /* '' */ .icon-cc-nd::before { content: '\e806'; } /* '' */
.icon-cc-pd:before { content: '\e807'; } /* '' */ .icon-cc-pd::before { content: '\e807'; } /* '' */
.icon-cc-zero:before { content: '\e808'; } /* '' */ .icon-cc-zero::before { content: '\e808'; } /* '' */
.icon-cc-share:before { content: '\e809'; } /* '' */ .icon-cc-share::before { content: '\e809'; } /* '' */
.icon-cc-remix:before { content: '\e80a'; } /* '' */ .icon-cc-remix::before { content: '\e80a'; } /* '' */
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