Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #16205 from edx/andya/more-stylelint-fixes-2

Browse Source 
Sass quality fixes in the LMS
This commit is contained in:
Andy Armstrong
2017-10-11 16:24:52 -04:00
committed by GitHub
parent b26d48010a 9f0fba0a8e
commit 4feb57d044
128 changed files with 9520 additions and 7343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintignore Normal file
View File

@@ -0,0 +1,2 @@
common/static/sass/bourbon
lms/static/sass/vendor

6
lms/static/sass/_build-footer-edx.scss
View File

@@ -7,10 +7,10 @@
@import 'base/theme';
footer#footer-edx-v3 {
@import 'base/extends';
@import 'base/extends';
// base - starter
@import 'base/base';
// base - starter
@import 'base/base';
}
// base - elements

1
lms/static/sass/_build-lms-v1.scss
View File

@@ -81,7 +81,6 @@
// news
@import 'notifications';
@import 'mixins';
@import 'mixins-inherited';
@import 'elements/system-feedback';

17
lms/static/sass/_developer.scss
View File

@@ -30,10 +30,12 @@
.ui-loading-base {
@include animation(fadeIn $tmg-f2 linear 1);
@extend %t-copy-base;
.spin {
@extend %anim-rotateCW;
display: inline-block;
}
@@ -45,6 +47,7 @@
.ui-loading {
@extend .ui-loading-base;
@extend %ui-well;
opacity: 0.6;
background-color: $white;
padding: ($baseline*1.5) $baseline;
@@ -67,20 +70,21 @@
// for verify_student/make_payment_step.underscore
.payment-buttons {
.purchase {
float: left;
padding: ($baseline*.5) 0;
.product-info, .product-name, .price {
@extend %t-ultrastrong;
color: $m-blue-d3;
}
}
.payment-button {
float: right;
@include margin-left( ($baseline/2) );
@include margin-left(($baseline/2));
&.is-selected {
background: $m-green-s1 !important;
@@ -94,12 +98,14 @@
.view-teams {
.wrapper-msg {
@include clearfix();
max-width: grid-width(12);
margin: 0 auto;
border-top: 3px solid $orange;
.left-floater {
@include float(left);
text-transform: uppercase;
font-weight: $font-semibold;
color: $white;
@@ -108,6 +114,7 @@
.right-floater {
@include float(right);
line-height: $body-line-height;
button {
@@ -126,7 +133,7 @@
}
&:focus {
box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
}
}
@@ -135,6 +142,7 @@
.members-info {
margin: 0;
padding: 0;
li {
display: inline;
}
@@ -151,6 +159,7 @@
.member-info-container {
display: inline-block;
vertical-align: middle;
@include margin-left($baseline/2);
.primary {
@@ -191,6 +200,7 @@
//along with some "hide the inherited value, we want none" action
.prompt.warning button {
@extend %btn-no-style;
box-shadow: none;
text-shadow: none;
@@ -211,6 +221,7 @@
//along with some "hide the inherited value, we want none" action
.prompt.warning button {
@extend %btn-no-style;
box-shadow: none;
text-shadow: none;

501
lms/static/sass/_experiments.scss
View File

@@ -5,389 +5,394 @@
// --------------------
// LEARNER-1726 Track Selection V3
/* This css was added as part of the LEARNER-1726 experiment */
.v2.register-choice {
margin: 0 2% 20px 0 !important
margin: 0 2% 20px 0 !important
}
.v2.register-choice-certificate .list-actions {
text-align: left !important;
text-align: left !important;
}
.v2.register-choice-continue .list-actions {
margin-bottom: 0 !important;
margin-bottom: 0 !important;
}
.v2.register-choice-continue .action-select {
display: inline-block !important;
list-style-type: none !important;
width: 100% !important;
display: inline-block !important;
list-style-type: none !important;
width: 100% !important;
}
.v2.register-choice-continue .continue-link {
display: inline-block !important;
padding: 10px 15px !important;
border-radius: 3px !important;
border: 1px solid #D7548E !important;
box-shadow: 0 2px 1px 0 #982c62 !important;
background: white !important;
text-align: center !important;
color: #D7548E !important;
float: left !important;
font-size: 15px;
font-weight: 500 !important;
display: inline-block !important;
padding: 10px 15px !important;
border-radius: 3px !important;
border: 1px solid #d7548e !important;
box-shadow: 0 2px 1px 0 #982c62 !important;
background: white !important;
text-align: center !important;
color: #d7548e !important;
float: left !important;
font-size: 15px;
font-weight: 500 !important;
}
.v2.register-choice-v2-donate {
height: 300px;
background: none !important;
border-top-color: grey !important;
border-top-width: 1px !important;
height: 300px;
background: none !important;
border-top-color: grey !important;
border-top-width: 1px !important;
}
@media screen and (min-width: 375px) {
.v2.register-choice-v2-donate {
height: 250px;
}
.v2.register-choice-v2-donate {
height: 250px;
}
}
.v2.register-choice-v2-donate .list-actions {
margin-bottom: 0 !important;
margin-bottom: 0 !important;
}
.v2.register-choice-v2-donate .list-actions a {
background: transparent !important;
color: #0075b4 !important;
box-shadow: none !important;
text-decoration: underline !important;
border: none !important;
white-space: normal;
background: transparent !important;
color: #0075b4 !important;
box-shadow: none !important;
text-decoration: underline !important;
border: none !important;
white-space: normal;
}
.v2.register-choice-v2-donate .wrapper-copy-inline {
height: 70px !important;
width: 100% !important;
display: flex !important;
height: 70px !important;
width: 100% !important;
display: flex !important;
}
.v2.register-choice-v2-donate .wrapper-copy {
width: 70% !important;
height: auto !important;
width: 70% !important;
height: auto !important;
}
.v2.page-header {
padding: 0;
padding: 0;
}
.v2 img {
margin-top: 20px;
margin-left: 5px;
margin-top: 20px;
margin-left: 5px;
}
.v2 .continue-link {
font-weight: bold !important;
font-weight: bold !important;
}
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.register-choice-view {
width: 100%;
width: 100%;
}
.v2.register-choice-continue {
border-color: #D7548E !important;
border-color: #d7548e !important;
}
.v2 .wrapper-copy-inline {
max-height: 115px;
max-height: 115px;
}
.v2.register-choice-v2-donate .wrapper-copy-inline {
display: block !important;
display: block !important;
}
.v2.register-choice-v2-donate .copy-inline {
width: 100% !important;
width: 100% !important;
}
.v2.register-choice-v2-donate .list-actions {
width: 100% !important;
margin-top: 20px !important;
text-align: center !important;
width: 100% !important;
margin-top: 20px !important;
text-align: center !important;
}
.v2 .wrapper-copy-inline .wrapper-copy {
width: 100% !important;
width: 100% !important;
}
.v2 input, .v2 a {
font-size: 15px !important;
font-size: 15px !important;
}
.v2 button {
background-color: rgb(0, 103, 0);
border-color: rgb(0, 103, 0);
border-radius: 2px;
box-shadow: rgb(0, 77, 0) 0px 2px 1px 0px;
cursor: pointer;
font-family: "Open Sans";
height: auto;
margin-right: 4px;
margin-top: 0px;
padding: 10px 15px;
width: initial;
background-image: none !important;
font-size: 14px !important;
font-weight: 500 !important;
background-color: rgb(0, 103, 0);
border-color: rgb(0, 103, 0);
border-radius: 2px;
box-shadow: rgb(0, 77, 0) 0 2px 1px 0;
cursor: pointer;
font-family: "Open Sans";
height: auto;
margin-right: 4px;
margin-top: 0;
padding: 10px 15px;
width: initial;
background-image: none !important;
font-size: 14px !important;
font-weight: 500 !important;
&:hover, &:focus {
background-color: #009b00 !important;
border-color: #009b00;
box-shadow: #004d00 0px 2px 1px 0px;
}
&:hover, &:focus {
background-color: #009b00 !important;
border-color: #009b00;
box-shadow: #004d00 0 2px 1px 0;
}
}
.savings-message {
margin-top: 10px;
font-size: 11px;
margin-top: 10px;
font-size: 11px;
}
@media screen and (min-width: 375px) {
.savings-message {
font-size: 13px;
margin-left: 16px;
}
.savings-message {
font-size: 13px;
margin-left: 16px;
}
}
.v2 .continue-link, .v2 input, .v2 button, .v2 a {
width: 100%;
width: 100%;
}
.v2 img {
display: none;
display: none;
}
.v2 .deco-divider {
display: none;
display: none;
}
.v2 .visual-reference {
width: 38%;
width: 38%;
}
@media (min-width: 420px) {
.v2 button {
height: 45px;
font-size: 16px !important;
}
.v2 button {
height: 45px;
font-size: 16px !important;
}
}
@media (min-width: 768px) {
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.deco-divider {
width: 46.5% !important;
display: inline-block;
min-height: 270px;
}
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.deco-divider {
width: 46.5% !important;
display: inline-block;
min-height: 270px;
}
.v2.register-choice-v2-donate .wrapper-copy-inline {
display: flex !important;
}
.v2.register-choice-v2-donate .wrapper-copy-inline {
display: flex !important;
}
.v2.register-choice-v2-donate .copy-inline {
width: 40% !important;
}
.v2.register-choice-v2-donate .copy-inline {
width: 40% !important;
}
.v2.register-choice-v2-donate .list-actions {
margin-top: 0 !important;
text-align: right !important;
}
.v2.register-choice-v2-donate .list-actions {
margin-top: 0 !important;
text-align: right !important;
}
.v2 .wrapper-copy-inline .wrapper-copy {
width: 100% !important;
}
.v2 .wrapper-copy-inline .wrapper-copy {
width: 100% !important;
}
.v2 input, .v2 a {
font-size: 15px !important;
}
.v2 input, .v2 a {
font-size: 15px !important;
}
.v2 .continue-link, .v2.register-choice-certificate button, .v2.register-choice-certificate input {
margin-top: 20px;
width: initial;
}
.v2 .continue-link, .v2.register-choice-certificate button, .v2.register-choice-certificate input {
margin-top: 20px;
width: initial;
}
.v2.register-choice-v2-donate a {
width: 100% !important;
}
.v2.register-choice-v2-donate a {
width: 100% !important;
}
.v2.register-choice-view {
height: 250px;
}
.v2.register-choice-view {
height: 250px;
}
.v2 img {
display: initial;
}
.v2 img {
display: initial;
}
.v2.register-choice {
margin: 0 2% 20px 0;
}
.v2.register-choice {
margin: 0 2% 20px 0;
}
.v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
width: 60%;
}
.v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
width: 60%;
}
.v2.register-choice-view .wrapper-copy-inline .wrapper-copy {
width: 100%;
}
.v2.register-choice-view .wrapper-copy-inline .wrapper-copy {
width: 100%;
}
.v2.register-choice {
padding: 15px !important;
}
.v2.register-choice {
padding: 15px !important;
}
.v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
width: 60%;
}
.v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
width: 60%;
}
.v2.register-choice {
padding: 20px !important;
}
.v2.register-choice {
padding: 20px !important;
}
.v2.register-choice.register-choice-view {
margin-right: 0;
}
.v2.register-choice.register-choice-view {
margin-right: 0;
}
.v2.register-choice .list-actions:last-child {
float: left;
width: 100%;
margin-top: 0px;
}
.v2.register-choice .list-actions:last-child {
float: left;
width: 100%;
margin-top: 0;
}
.v2.register-choice .action-select {
width: 100% !important;
}
.v2.register-choice .action-select {
width: 100% !important;
}
.v2 .continue-link:hover,
.v2 .continue-link:focus {
background-color: #D7548E !important;
color: white !important;
text-decoration: none;
}
.v2 .continue-link:hover,
.v2 .continue-link:focus {
background-color: #d7548e !important;
color: white !important;
text-decoration: none;
}
.v2 .continue-link:hover {
cursor: pointer;
}
.v2 .continue-link:hover {
cursor: pointer;
}
.v2 .copy li {
margin-bottom: 5px;
}
.v2 .copy li {
margin-bottom: 5px;
}
.v2.register-choice .copy-inline {
width: 100%;
}
.v2.register-choice .copy-inline {
width: 100%;
}
.v2 .register-choice-view {
border-color: #2991c3 !important;
}
.v2 .register-choice-view {
border-color: #2991c3 !important;
}
.v2 .visual-reference {
vertical-align: top;
}
.v2 .visual-reference {
vertical-align: top;
}
.v2 .wrapper-copy-inline .wrapper-copy ul {
margin-top: 0px;
padding-left: 30px;
}
.v2 .wrapper-copy-inline .wrapper-copy ul {
margin-top: 0;
padding-left: 30px;
}
.v2 .img-certificate {
border: 2px solid #009b00 !important;
float: right;
height: 120px;
width: auto;
margin-top: 0 !important;
display: none;
}
.v2 .img-certificate {
border: 2px solid #009b00 !important;
float: right;
height: 120px;
width: auto;
margin-top: 0 !important;
display: none;
}
.v2 .img-donate {
margin-top: 0;
float: right;
border: 2px solid #D7548E !important;
display: none;
}
.v2 .img-donate {
margin-top: 0;
float: right;
border: 2px solid #d7548e !important;
display: none;
}
.v2 .img-view {
border: 2px solid #2991c3 !important;
}
.v2 .img-view {
border: 2px solid #2991c3 !important;
}
.v2.register-choice .title {
width: 100%;
margin-bottom: 20px;
}
.v2.register-choice .title {
width: 100%;
margin-bottom: 20px;
}
.v2.register-choice.register-choice-view .action-select {
border: 1px solid transparent !important;
border-radius: 3px;
}
.v2.register-choice.register-choice-view .action-select {
border: 1px solid transparent !important;
border-radius: 3px;
}
.v2.register-choice.register-choice-view .action-select button {
border: 1px solid transparent !important;
}
.v2.register-choice.register-choice-view .action-select button {
border: 1px solid transparent !important;
}
.v2.register-choice.register-choice-view .action-select:hover {
border: 1px solid #0075b4 !important;
}
.v2.register-choice.register-choice-view .action-select:hover {
border: 1px solid #0075b4 !important;
}
.v2.deco-divider {
width: 3% !important;
box-sizing: border-box;
float: left;
display: inline-block;
height: 250px;
margin: 0px 0 40px 0 !important;
border-left: 4px solid #f5f5f5 !important; border-top:none !important;
.v2.deco-divider {
width: 3% !important;
box-sizing: border-box;
float: left;
display: inline-block;
height: 250px;
margin: 0 0 40px 0 !important;
border-left: 4px solid #f5f5f5 !important; border-top:none !important;
.copy {
position: absolute;
top: 110px !important;
left: calc(50% - 40px) !important;
margin-left: 20px;
background: white;
text-align: center;
color: #474747;
width: 10px;
padding: 0 !important;
}
.copy {
position: absolute;
top: 110px !important;
left: calc(50% - 40px) !important;
margin-left: 20px;
background: white;
text-align: center;
color: #474747;
width: 10px;
padding: 0 !important;
}
}
}
@media (min-width: 835px) {
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.deco-divider {
min-height: 250px;
}
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.deco-divider {
min-height: 250px;
}
}
@media (min-width: 1024px) {
.v2 .continue-link {
width: 55%;
}
.v2.deco-divider .copy {
margin-left: 15px;
}
.v2 .continue-link {
width: 55%;
}
.v2.deco-divider .copy {
margin-left: 15px;
}
}
@media (min-width: 1096px) {
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.deco-divider {
min-height: 260px;
}
.v2 .img-certificate, .v2 .img-donate {
margin-top: 10px;
display: initial;
}
.v2 .continue-link, .v2.register-choice-certificate button,
.v2.register-choice-certificate input {
margin-top: -22px !important;
}
}
.v2.register-choice-certificate,
.v2.register-choice-continue,
.v2.deco-divider {
min-height: 260px;
}
.v2 .img-certificate, .v2 .img-donate {
margin-top: 10px;
display: initial;
}
.v2 .continue-link, .v2.register-choice-certificate button,
.v2.register-choice-certificate input {
margin-top: -22px !important;
}
}

4
lms/static/sass/_notifications.scss
View File

@@ -4,6 +4,7 @@
.notifications {
@include news-font;
font-size: 0.9em;
padding-left: $baseline;
padding-top: $baseline;
@@ -11,6 +12,7 @@
.notification {
@include news-font;
margin-top: ($baseline*0.75);
margin-bottom: ($baseline*0.75);
@@ -22,6 +24,7 @@
.site-status {
@include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0));
padding: ($baseline / 2);
background-color: $site-status-color;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
@@ -30,6 +33,7 @@
.icon {
@include margin-right($baseline / 2);
@include float(left);
color: $white !important; // some pages have color inherit
font-size: 18px;
}

9
lms/static/sass/_shame.scss
View File

@@ -9,6 +9,7 @@
%m-btn {
@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);
display: inline-block;
cursor: pointer;
text-decoration: none;
@@ -39,6 +40,7 @@
%m-btn-base {
@extend %m-btn;
@extend %m-btn-edged;
border: none;
padding:($baseline/2) ($baseline);
text-align: center;
@@ -58,6 +60,7 @@
// primary button
%m-btn-primary {
@extend %m-btn-base;
box-shadow: 0 2px 1px 0 $action-primary-shadow;
background: $action-primary-bg;
color: $action-primary-fg;
@@ -65,6 +68,7 @@
&:hover, &:active, &:focus {
background: $action-primary-focused-bg;
}
&:focus {
box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow;
}
@@ -89,6 +93,7 @@
// secondary button
%m-btn-secondary {
@extend %m-btn-base;
box-shadow: 0 2px 1px 0 $action-secondary-shadow;
background: $action-secondary-bg;
color: $action-secondary-fg;
@@ -96,6 +101,7 @@
&:hover, &:active, &:focus {
background: $action-secondary-focused-bg;
}
&:focus {
box-shadow: 0 0 6px 0 $action-primary-active-focused-shadow;
}
@@ -122,7 +128,6 @@
// edx.org marketing site - needed, but bad overrides with importants
.view-register, .view-login, .view-passwordreset, .view-survey {
.form-actions button[type="submit"] {
text-transform: none;
vertical-align: middle;
@@ -140,7 +145,6 @@
//overriding reset link style for nav/header
.header-global {
.logo a:hover, .logo:active, .logo a:focus {
border: none;
text-decoration: none;
@@ -213,6 +217,7 @@ footer .references {
.action-secondary {
@extend %btn-no-style;
@extend %t-strong;
box-shadow: none;
text-shadow: none;
}

127
lms/static/sass/base/_animations.scss
View File

@@ -9,28 +9,34 @@
@mixin home-header-pop-up-keyframes {
0% {
opacity: 0.0;
opacity: 0;
top: 300px;
//@include transform(scale(0.9));
}
45% {
opacity: 1.0;
opacity: 1;
}
65% {
top: -40px;
//@include transform(scale(1));
}
85% {
top: 10px;
}
100% {
top: 0px;
top: 0;
}
}
@-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
//************************************************************************//
@@ -43,30 +49,39 @@
@mixin title-appear-keyframes {
0% {
opacity: 0.0;
opacity: 0;
top: 60px;
@include transform(scale(0.9));
}
20% {
opacity: 1.0;
opacity: 1;
}
27% { // this % of total-time should be ~ 1.25s
top: 40px;
@include transform(scale(1));
}
90% { // this % of total-time is when 2nd half of animation starts
opacity: 1.0;
opacity: 1;
top: 40px;
@include transform(scale(1));
}
100% {
top: 0px;
top: 0;
}
}
@-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
//************************************************************************//
@@ -79,32 +94,42 @@
@mixin home-appear-keyframes {
0% {
opacity: 0.0;
opacity: 0;
top: 60px;
@include transform(scale(0.9));
}
20% {
opacity: 1.0;
opacity: 1;
}
30% { // this % of total-time should be ~ 1.25s
top: 40px;
@include transform(scale(1));
}
80% { // this % of total-time is when 2nd half of animation starts
opacity: 1.0;
opacity: 1;
top: 40px;
@include transform(scale(1));
}
100% {
opacity: 0.0;
opacity: 0;
top: 60px;
@include transform(scale(0.7));
}
}
@-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
//************************************************************************//
@@ -117,16 +142,19 @@
@mixin edx-appear-keyframes {
0% {
opacity: 0.0;
opacity: 0;
}
100% {
opacity: 1.0;
opacity: 1;
}
}
@-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
//************************************************************************//
@@ -141,14 +169,17 @@
0% {
left: 80px;
}
100% {
left: 0px;
left: 0;
}
}
@-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
//************************************************************************//
@@ -163,14 +194,17 @@
0% {
right: 80px;
}
100% {
right: 0px;
right: 0;
}
}
@-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
//************************************************************************//
@@ -185,14 +219,17 @@
0% {
left: 340px;
}
100% {
left: 200px;
}
}
@-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
//************************************************************************//
@@ -207,14 +244,17 @@
0% {
left: 340px;
}
100% {
left: 480px;
}
}
@-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
//************************************************************************//
@@ -230,17 +270,21 @@
bottom: -270px;
opacity: 0.9;
}
80% {
opacity: 1.0;
opacity: 1;
}
100% {
bottom: 0px;
bottom: 0;
}
}
@-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
//************************************************************************//
@@ -251,16 +295,19 @@
@mixin fade-in-keyframes {
0% {
opacity: 0.0;
opacity: 0;
}
100% {
opacity: 1.0;
opacity: 1;
}
}
@-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
@@ -272,7 +319,7 @@
}
25%, 75% {
opacity: 1.0;
opacity: 1;
}
100% {

94
lms/static/sass/base/_base.scss
View File

@@ -22,7 +22,7 @@ body {
// removing the outline on any element that we make programmatically focusable
[tabindex="-1"] {
outline: none;
outline: none;
}
h1, h2, h3, h4, h5, h6 {
@@ -83,6 +83,7 @@ p {
font: inherit;
font-weight: inherit;
text-decoration: none;
@include transition(all 0.1s linear 0s);
&:hover, &:focus {
@@ -96,6 +97,7 @@ a, a:visited {
color: $link-color;
font: inherit;
text-decoration: none;
@include transition(all 0.1s linear 0s);
&:hover,
@@ -106,6 +108,7 @@ a, a:visited {
&:disabled, &.is-disabled, &.disabled {
@extend %ui-disabled;
opacity: 0.5;
cursor: not-allowed;
}
@@ -124,6 +127,7 @@ a, a:visited {
.container {
@include clearfix();
@include box-sizing(border-box);
margin: 0 auto 0;
padding: ($baseline*2) 0;
max-width: grid-width(12);
@@ -132,7 +136,7 @@ a, a:visited {
}
.no-min-scale {
min-width: 0px !important;
min-width: 0 !important;
}
span.edx {
@@ -142,6 +146,7 @@ span.edx {
.static-container {
@include clearfix();
margin: 0 auto 0;
max-width: 1200px;
padding: ($baseline*3) 0 ($baseline*6);
@@ -181,6 +186,7 @@ span.edx {
.loading-animation {
@include animation(fa-spin 2s infinite linear);
text-align: center;
width: 100%;
}
@@ -210,61 +216,65 @@ mark {
}
.help-tab {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
@extend %ui-depth2;
@extend %ui-print-excluded;
position: fixed;
top: 250px;
left: 0;
@include transform(rotate(-90deg));
@include transform-origin(0 0);
a:link,
a:visited {
border: 1px solid $gray-l3;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize($base-font-color, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
@extend %ui-depth2;
@extend %ui-print-excluded;
&:hover,
&:focus {
color: $white;
background: $link-color;
}
position: fixed;
top: 250px;
left: 0;
a:link,
a:visited {
border: 1px solid $gray-l3;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize($base-font-color, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: $white;
background: $link-color;
}
}
}
.help-buttons {
padding: ($baseline/2) ($baseline*2.5);
text-align: center;
padding: ($baseline/2) ($baseline*2.5);
text-align: center;
button {
@extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial;
text-shadow: none;
letter-spacing: initial !important;
text-transform: normal !important;
vertical-align: initial;
button {
@extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial;
text-shadow: none;
letter-spacing: initial !important;
text-transform: normal !important;
vertical-align: initial;
&:hover,
&:focus {
background: $link-color !important;
color: $white;
box-shadow: none !important;
text-shadow: none !important;
}
&:hover,
&:focus {
background: $link-color !important;
color: $white;
box-shadow: none !important;
text-shadow: none !important;
}
}
}
#feedback_form {
input, textarea {
font: normal 1em/1.4em $sans-serif;
}
textarea[name="details"] {
height: 150px;
}

14
lms/static/sass/base/_extends.scss
View File

@@ -1,29 +1,34 @@
%faded-hr-divider {
@include background-image($faded-hr-image-1);
height: 1px;
width: 100%;
}
%faded-hr-divider-medium {
@include background-image($faded-hr-image-4);
height: 1px;
width: 100%;
}
%faded-hr-divider-light {
@include background-image($faded-hr-image-5);
height: 1px;
width: 100%;
}
%faded-vertical-divider {
@include background-image($faded-hr-image-1);
height: 100%;
width: 1px;
}
%faded-vertical-divider-light {
@include background-image($faded-hr-image-6);
background: transparent;
height: 100%;
width: 1px;
@@ -31,10 +36,12 @@
%vertical-divider {
@extend %faded-vertical-divider;
position: relative;
&::after {
@extend %faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
@@ -44,11 +51,14 @@
%horizontal-divider {
border: none;
@extend %faded-hr-divider;
position: relative;
&::after {
@extend %faded-hr-divider-light;
content: "";
display: block;
position: absolute;
@@ -58,11 +68,13 @@
%fade-right-hr-divider {
@include background-image($faded-hr-image-2);
border: none;
}
%fade-left-hr-divider {
@include background-image($faded-hr-image-3);
border: none;
}
@@ -134,6 +146,7 @@
%ui-deprecated {
@extend %t-weight4;
background: tint($warning-color, 85%);
padding: ($baseline/5) ($baseline/2);
color: shade($warning-color, 45%);
@@ -142,6 +155,7 @@
// extends - content - text overflow by ellipsis
%cont-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

112
lms/static/sass/base/_font_face.scss
View File

@@ -1,81 +1,81 @@
// LMS - assets - fonts
// ====================
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}

104
lms/static/sass/base/_headings.scss
View File

@@ -17,74 +17,74 @@ $headings-base-font-family: inherit;
$headings-base-color: $gray-d2;
%reset-headings {
margin: 0;
font-weight: $headings-font-weight-normal;
font-size: inherit;
line-height: inherit;
color: $headings-base-color;
margin: 0;
font-weight: $headings-font-weight-normal;
font-size: inherit;
line-height: inherit;
color: $headings-base-color;
}
%hd-1 {
margin-bottom: 1.41575em;
font-size: 2em;
line-height: 1.4em;
margin-bottom: 1.41575em;
font-size: 2em;
line-height: 1.4em;
}
%hd-2 {
font-size: 1.5em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
font-size: 1.5em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-3 {
margin-bottom: ($baseline / 2);
font-size: 1.35em;
font-weight: $headings-font-weight-normal;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1.35em;
font-weight: $headings-font-weight-normal;
line-height: 1.4em;
}
%hd-4 {
margin-bottom: ($baseline / 2);
font-size: 1.25em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1.25em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-5 {
margin-bottom: ($baseline / 2);
font-size: 1.1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1.1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-6 {
margin-bottom: ($baseline / 2);
font-size: 1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-7 {
margin-bottom: ($baseline / 4);
font-size: 14px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.6em;
letter-spacing: 1px;
margin-bottom: ($baseline / 4);
font-size: 14px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.6em;
letter-spacing: 1px;
}
%hd-8 {
margin-bottom: ($baseline / 8);
font-size: 12px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.5em;
letter-spacing: 1px;
margin-bottom: ($baseline / 8);
font-size: 12px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.5em;
letter-spacing: 1px;
}
// let's make these classnames available to the entire LMS!
@@ -97,7 +97,7 @@ $headings-base-color: $gray-d2;
.hd-6,
.hd-7,
.hd-8 {
@extend %reset-headings;
@extend %reset-headings;
}
@@ -106,25 +106,25 @@ $headings-base-color: $gray-d2;
// ----------------------------
// canned heading classes
@for $i from 1 through $headings-count {
.hd-#{$i} {
@extend %hd-#{$i};
}
.hd-#{$i} {
@extend %hd-#{$i};
}
}
// H3 was problematic in xblocks, we so we'll keep it as it was
.xblock .xblock {
h2 {
@extend %hd-2;
h2 {
@extend %hd-2;
font-weight: $headings-font-weight-bold;
// override external modules and xblocks that use inline CSS
text-transform: initial;
font-weight: $headings-font-weight-bold;
// override external modules and xblocks that use inline CSS
text-transform: initial;
&.discussion-module-title {
margin-bottom: 0;
display: inline-block;
}
&.discussion-module-title {
margin-bottom: 0;
display: inline-block;
}
}
}

38
lms/static/sass/base/_mixins.scss
View File

@@ -4,13 +4,13 @@
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
// font-size: ($sizeValue/10) + rem;
// font-size: ($sizeValue/10) + rem;
}
// mixins - line height
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
// line-height: (($fontSize/10)*1.48) + rem;
// line-height: (($fontSize/10)*1.48) + rem;
}
// image-replacement hidden text
@@ -20,7 +20,7 @@
overflow: hidden;
}
@mixin vertically-and-horizontally-centered ( $height, $width ) {
@mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%;
margin-left: -$width / 2;
//margin-top: -$height / 2;
@@ -38,7 +38,7 @@
}
@mixin show-hover-state() {
opacity: 1;
opacity: 1;
}
@function em($pxval, $base: 16) {
@@ -54,6 +54,7 @@
// theme mixin styles
@mixin login_register_h1_style {}
@mixin footer_references_style {}
// ====================
@@ -62,12 +63,14 @@
%ui-wrapper {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
}
// extends - UI - window
%ui-window {
@include clearfix();
border-radius: 3px;
box-shadow: 0 1px 2px 1px $shadow-l1;
margin-bottom: $baseline;
@@ -103,7 +106,6 @@
// extends - UI - utility - nth-type style clearing
%wipe-first-child {
&:first-child {
margin-top: 0;
border-top: none;
@@ -113,7 +115,6 @@
// extends - UI - utility - nth-type style clearing
%wipe-last-child {
&:last-child {
margin-bottom: 0;
border-bottom: none;
@@ -123,18 +124,18 @@
// extends -hidden elems - screenreaders
%text-sr {
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
}
// extends - ensures proper contrast for automated checkers
@@ -174,6 +175,7 @@
// extends - text - text overflow by ellipsis
%text-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

13
lms/static/sass/base/_reset.scss
View File

@@ -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: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; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
@@ -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; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
q::before, q::after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
@@ -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.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }
.clearfix { *zoom: 1; }
@media print {
* { 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; }
a, a:visited { text-decoration: underline; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; }
abbr[title]::after { content: " (" attr(title) ")"; }
.ir a::after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 1cm 1.2cm 2cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }

2
lms/static/sass/base/_utilities.scss
View File

@@ -8,5 +8,5 @@
.sr-is-focusable,
.sr-is-focusable:focus,
.sr-is-focusable:active {
@extend %no-outline;
@extend %no-outline;
}

2
lms/static/sass/bootstrap/_legacy.scss
View File

@@ -15,7 +15,7 @@
// Support .sr as a synonym for .sr-only
.sr {
@extend .sr-only;
@extend .sr-only;
}
// ----------------------------

56
lms/static/sass/course/_auto-cert.scss
View File

@@ -1,37 +1,39 @@
.wrapper-msg.wrapper-auto-cert {
@include margin(0, 0, 0, 0); // Overrides .wrapper-msg
@include padding(0, 0, 0, 0); // Overrides .wrapper-msg
background: none; // Overrides .wrapper-msg
@include margin(0, 0, 0, 0); // Overrides .wrapper-msg
@include padding(0, 0, 0, 0); // Overrides .wrapper-msg
.errors-info {
margin-top: $baseline;
margin-bottom: $baseline;
color: $error-color;
}
background: none; // Overrides .wrapper-msg
.auto-cert-message {
margin: $baseline 0;
padding: $baseline;
border-left: 3px solid $m-blue-d1;
background: $gray-l5;
.errors-info {
margin-top: $baseline;
margin-bottom: $baseline;
color: $error-color;
}
.has-actions {
.auto-cert-message {
margin: $baseline 0;
padding: $baseline;
border-left: 3px solid $m-blue-d1;
background: $gray-l5;
.msg-content {
width: flex-grid(9,12);
}
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.msg-actions {
@extend %t-copy-base;
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
text-shadow: none;
}
}
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
text-shadow: none;
}
}
}
}
}

364
lms/static/sass/course/_gradebook.scss
View File

@@ -2,230 +2,242 @@ $cell-border-color: #e1e1e1;
$table-border-color: #c8c8c8;
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.gradebook-wrapper {
section.gradebook-content {
@extend .content;
display: block;
width: 100%;
@include clearfix();
.student-search {
padding: 0 $baseline 0 ($baseline*0.75);
padding: 0 $baseline 0 ($baseline*0.75);
}
.student-search-field {
width: 100%;
height: 27px;
padding: 0 ($baseline*0.75) 0 35px;
@include box-sizing(border-box);
border-radius: 13px;
border: 1px solid $table-border-color;
background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6;
font-family: $sans-serif;
font-size: 11px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
@include transition(border-color .15s linear 0s);
width: 100%;
height: 27px;
padding: 0 ($baseline*0.75) 0 35px;
&::-webkit-input-placeholder,
&::-moz-input-placeholder {
font-style: italic;
}
@include box-sizing(border-box);
&:focus {
border-color: #1d9dd9;
}
border-radius: 13px;
border: 1px solid $table-border-color;
background: url('#{$static-path}/images/search-icon.png') no-repeat 9px center $gray-l6;
font-family: $sans-serif;
font-size: 11px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
@include transition(border-color .15s linear 0s);
&::-webkit-input-placeholder,
&::-moz-input-placeholder {
font-style: italic;
}
&:focus {
border-color: #1d9dd9;
}
}
.student-table {
float: left;
width: 24%;
border-radius: 3px 0 0 3px;
color: #3c3c3c;
float: left;
width: 24%;
border-radius: 3px 0 0 3px;
color: #3c3c3c;
th {
height: 50px;
}
th {
height: 50px;
}
tr:first-child td {
border-top: 1px solid $table-border-color;
border-radius: ($baseline/4) 0 0 0;
}
tr:first-child td {
border-top: 1px solid $table-border-color;
border-radius: ($baseline/4) 0 0 0;
}
tr:last-child td {
border-bottom: 1px solid $table-border-color;
border-radius: 0 0 0 ($baseline/4);
}
tr:last-child td {
border-bottom: 1px solid $table-border-color;
border-radius: 0 0 0 ($baseline/4);
}
td {
height: 50px;
padding-left: $baseline;
border-bottom: 1px solid $cell-border-color;
border-left: 1px solid $table-border-color;
background: $gray-l5;
font-size: 13px;
line-height: 50px;
}
td {
height: 50px;
padding-left: $baseline;
border-bottom: 1px solid $cell-border-color;
border-left: 1px solid $table-border-color;
background: $gray-l5;
font-size: 13px;
line-height: 50px;
}
tr:nth-child(odd) td {
background-color: #fbfbfb;
}
}
tr:nth-child(odd) td {
background-color: #fbfbfb;
}
}
.grade-book-footer {
position: relative;
top: 15px;
width: 100%;
border: 0;
box-shadow: 0;
text-align: center;
display: inline-block;
}
.grade-book-footer {
position: relative;
top: 15px;
width: 100%;
border: 0;
box-shadow: 0;
text-align: center;
display: inline-block;
}
.grades {
position: relative;
float: left;
width: 76%;
overflow-x: auto;
overflow-y: hidden;
.grades {
position: relative;
float: left;
width: 76%;
overflow-x: auto;
overflow-y: hidden;
.left-shadow,
.right-shadow {
@extend %ui-depth4;
position: absolute;
top: 0;
width: 20px;
pointer-events: none;
}
.left-shadow,
.right-shadow {
@extend %ui-depth4;
.left-shadow {
left: 0;
background-image: -webkit-gradient(linear, left, $shadow-l1, $transparent 20%), -webkit-gradient(linear, left, $shadow-l1, $transparent);
background-image: -webkit-linear-gradient(left, $shadow-l1, $transparent 20%), -webkit-linear-gradient(left, $shadow-l1, $transparent);
background-image: -moz-linear-gradient(left, $shadow-l1, $transparent 20%), -moz-linear-gradient(left, $shadow-l1, $transparent);
background-image: -ms-linear-gradient(left, $shadow-l1, $transparent 20%), -ms-linear-gradient(left, $shadow-l1, $transparent);
background-image: -o-linear-gradient(left, $shadow-l1, $transparent 20%), -o-linear-gradient(left, $shadow-l1, $transparent);
}
position: absolute;
top: 0;
width: 20px;
pointer-events: none;
}
.right-shadow {
right: 0;
background-image: -webkit-gradient(linear, right, $shadow-l1, $transparent 20%), -webkit-gradient(linear, right, $shadow-l1, $transparent);
background-image: -webkit-linear-gradient(right, $shadow-l1, $transparent 20%), -webkit-linear-gradient(right, $shadow-l1, $transparent);
background-image: -moz-linear-gradient(right, $shadow-l1, $transparent 20%), -moz-linear-gradient(right, $shadow-l1, $transparent);
background-image: -ms-linear-gradient(right, $shadow-l1, $transparent 20%), -ms-linear-gradient(right, $shadow-l1, $transparent);
background-image: -o-linear-gradient(right, $shadow-l1, $transparent 20%), -o-linear-gradient(right, $shadow-l1, $transparent);
}
}
.left-shadow {
left: 0;
background-image: -webkit-gradient(linear, left, $shadow-l1, $transparent 20%), -webkit-gradient(linear, left, $shadow-l1, $transparent);
background-image: -webkit-linear-gradient(left, $shadow-l1, $transparent 20%), -webkit-linear-gradient(left, $shadow-l1, $transparent);
background-image: -moz-linear-gradient(left, $shadow-l1, $transparent 20%), -moz-linear-gradient(left, $shadow-l1, $transparent);
background-image: -ms-linear-gradient(left, $shadow-l1, $transparent 20%), -ms-linear-gradient(left, $shadow-l1, $transparent);
background-image: -o-linear-gradient(left, $shadow-l1, $transparent 20%), -o-linear-gradient(left, $shadow-l1, $transparent);
}
.grade-table {
position: absolute;
top: 0;
left: 0;
width: 1000px;
cursor: move;
@include transition(none);
@include user-select(none);
.right-shadow {
right: 0;
background-image: -webkit-gradient(linear, right, $shadow-l1, $transparent 20%), -webkit-gradient(linear, right, $shadow-l1, $transparent);
background-image: -webkit-linear-gradient(right, $shadow-l1, $transparent 20%), -webkit-linear-gradient(right, $shadow-l1, $transparent);
background-image: -moz-linear-gradient(right, $shadow-l1, $transparent 20%), -moz-linear-gradient(right, $shadow-l1, $transparent);
background-image: -ms-linear-gradient(right, $shadow-l1, $transparent 20%), -ms-linear-gradient(right, $shadow-l1, $transparent);
background-image: -o-linear-gradient(right, $shadow-l1, $transparent 20%), -o-linear-gradient(right, $shadow-l1, $transparent);
}
}
td,
th {
width: 50px;
text-align: center;
}
.grade-table {
position: absolute;
top: 0;
left: 0;
width: 1000px;
cursor: move;
thead th {
position: relative;
height: 50px;
@include linear-gradient(top, $cell-border-color, #ddd);
font-size: 10px;
line-height: 10px;
font-weight: bold;
text-align: center;
box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
border-left: 1px solid $gray-l3;
@include transition(none);
@include user-select(none);
&:first-child {
border-radius: 5px 0 0 0;
box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
border-left: none;
}
td,
th {
width: 50px;
text-align: center;
}
&:last-child {
border-radius: 0 3px 0 0;
box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
}
thead th {
position: relative;
height: 50px;
.assignment {
margin: 9px 0;
}
@include linear-gradient(top, $cell-border-color, #ddd);
.type,
.number,
.max {
display: block;
}
font-size: 10px;
line-height: 10px;
font-weight: bold;
text-align: center;
box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
border-left: 1px solid $gray-l3;
.max {
height: 12px;
@include linear-gradient(top, #c6c6c6, #bababa);
font-size: 9px;
line-height: 12px;
color: $white;
}
}
&:first-child {
border-radius: 5px 0 0 0;
box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
border-left: none;
}
tr {
border-right: 1px solid $table-border-color;
}
&:last-child {
border-radius: 0 3px 0 0;
box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
}
tr:first-child td {
border-top: 1px solid $table-border-color;
}
.assignment {
margin: 9px 0;
}
tr:last-child td {
border-bottom: 1px solid $table-border-color;
}
.type,
.number,
.max {
display: block;
}
td {
height: 50px;
border-bottom: 1px solid $cell-border-color;
background: #f3f3f3;
font-size: 13px;
line-height: 50px;
border-left: 1px solid $cell-border-color;
}
.max {
height: 12px;
tr:nth-child(odd) td {
background-color: #fbfbfb;
}
}
@include linear-gradient(top, #c6c6c6, #bababa);
font-size: 9px;
line-height: 12px;
color: $white;
}
}
tr {
border-right: 1px solid $table-border-color;
}
tr:first-child td {
border-top: 1px solid $table-border-color;
}
tr:last-child td {
border-bottom: 1px solid $table-border-color;
}
td {
height: 50px;
border-bottom: 1px solid $cell-border-color;
background: #f3f3f3;
font-size: 13px;
line-height: 50px;
border-left: 1px solid $cell-border-color;
}
tr:nth-child(odd) td {
background-color: #fbfbfb;
}
}
h1 {
@extend .top-header;
}
}
.student-table tr:hover td,
.grade-table tr:hover td,
.student-table tr:focus td,
.grade-table tr:focus td,
.student-table tr.highlight td,
.grade-table tr.highlight td {
border-color: #74b7d6;
@include linear-gradient(#8ed6f7, #76cbf4);
color: #333;
.student-table tr:hover td,
.grade-table tr:hover td,
.student-table tr:focus td,
.grade-table tr:focus td,
.student-table tr.highlight td,
.grade-table tr.highlight td {
border-color: #74b7d6;
a {
color: #333;
}
}
@include linear-gradient(#8ed6f7, #76cbf4);
color: #333;
a {
color: #333;
}
}
}

36
lms/static/sass/course/_info.scss
View File

@@ -5,8 +5,9 @@ $notification-highlight-border-color: $uxpl-green-base !default;
$lms-border-color: $uxpl-gray-background !default;
$notification-background: rgb(255, 255, 255) !default
.home {
.home{
@include clearfix();
max-width: 1140px;
margin: 0 auto;
padding: $baseline $baseline ($baseline/2) $baseline;
@@ -31,6 +32,7 @@ $notification-background: rgb(255, 255, 255) !default
.page-header-secondary {
@include float(right);
display: inline-block;
margin: ($baseline/2);
padding: ($baseline/2) ($baseline*0.75);
@@ -39,18 +41,20 @@ $notification-background: rgb(255, 255, 255) !default
.last-accessed-link {
@extend %t-title6;
color: $very-light-text;
}
}
}
div.info-wrapper {
background-color: $homepage-background;
section.updates {
@extend .content;
@include padding-left($baseline);
line-height: lh();
width: 100%;
display: block;
@@ -120,6 +124,7 @@ div.info-wrapper {
border-radius:3px;
background-color: $white;
border:1px solid transparent;
&:hover {
border: 1px solid $gray-l3;
}
@@ -127,8 +132,11 @@ div.info-wrapper {
.show-older-updates {
@extend %btn-pl-white-base;
padding: ($baseline/2);
@include font-size(14);
width: 100%;
display: block;
text-align: center;
@@ -144,6 +152,7 @@ div.info-wrapper {
> li,article {
@extend .clearfix;
padding: $baseline;
list-style-type: none;
margin-bottom: lh(1.5);
@@ -157,9 +166,11 @@ div.info-wrapper {
.date {
@extend %t-title9;
margin-bottom: ($baseline/4);
text-transform: none;
background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat;
@include padding-left($baseline);
@include float(left);
}
@@ -167,7 +178,9 @@ div.info-wrapper {
.toggle-visibility-button {
@extend %t-title9;
@include float(right);
padding: 0;
cursor: pointer;
background: none;
@@ -185,13 +198,14 @@ div.info-wrapper {
section.update-description {
section {
&.primary {
border: 1px solid #DDD;
border: 1px solid #ddd;
background: $gray-l6;
padding: 20px;
p {
font-weight: bold;
}
.author {
font-weight: normal;
font-style: italic;
@@ -225,7 +239,9 @@ div.info-wrapper {
section.handouts {
padding: 20px 30px;
margin: 0;
@extend .sidebar;
background: rgba(0, 0, 0, 0);
box-shadow: none;
font-size: 14px;
@@ -245,15 +261,17 @@ div.info-wrapper {
}
}
&:after {
&::after {
left: -1px;
right: auto;
}
.handouts-header {
@include text-align(left);
@extend %t-strong;
@extend %t-title6;
margin-bottom: 0;
padding: 12px 26px 10px 0;
}
@@ -264,6 +282,7 @@ div.info-wrapper {
ol {
margin-bottom: 14px;
li {
@include text-align(left);
@@ -281,6 +300,7 @@ div.info-wrapper {
&.expandable,
&.collapsable {
margin: 0 16px 14px 16px;
@include transition(all .2s linear 0s);
h4 {
@@ -303,7 +323,6 @@ div.info-wrapper {
}
&.multiple {
a {
display: inline-block;
padding: 0;
@@ -354,12 +373,13 @@ div.info-wrapper {
+ h4 {
@extend a:hover;
text-decoration: underline;
}
}
&.expandable-hitarea {
background-position: -72px 0px;
background-position: -72px 0;
}
&.collapsable-hitarea {
@@ -383,7 +403,7 @@ div.info-wrapper {
a {
padding-right: 8px;
&:before {
&::before {
color: $gray-l3;
content: "•";
display: inline-block;
@@ -391,7 +411,7 @@ div.info-wrapper {
}
&:first-child {
&:before {
&::before {
content: "";
padding-right: 0;
}

46
lms/static/sass/course/_profile.scss
View File

@@ -3,17 +3,19 @@
.user-info {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
border-radius: 0px 4px 4px 0;
border-radius: 0 4px 4px 0;
border-right: 0;
&:after {
&::after {
left: -1px;
right: auto;
}
header {
@extend .bottom-border;
margin: 0;
padding: lh(0.5);
@@ -34,6 +36,7 @@
padding: lh(0.5) 0 lh(0.5) lh(0.5);
position: relative;
text-decoration: none;
@include transition(none);
div#location_sub, div#language_sub {
@@ -45,9 +48,9 @@
}
input {
&[type="text"] {
@include box-sizing(border-box);
margin: lh(0.5) 0;
width: 100%;
}
@@ -118,7 +121,7 @@
#change_password_pop {
border-bottom: 1px solid #d3d3d3;
box-shadow: 0 1px 0 #eee;
color: #4D4D4D;
color: #4d4d4d;
padding: 7px lh();
h2 {
@@ -136,10 +139,12 @@
header {
@extend .clearfix;
@extend h1.top-header;
margin-bottom: lh();
.hd {
@include float(left);
font-size: 1em;
font-weight: 100;
margin: 0;
@@ -155,9 +160,11 @@
#course-success {
margin-bottom: ($baseline*1.5);
text-align: center;
> a {
@include button(simple, $button-color);
@include box-sizing(border-box);
border-radius: 3px;
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
@@ -178,10 +185,12 @@
> .credit-eligibility{
border-top: 1px solid $lightGrey;
margin-top: lh();
@include padding-left(0);
> .credit-eligibility-container {
padding: lh();
padding: lh();
> .credit-help {
display: inline-block;
background: $blue;
@@ -192,42 +201,57 @@
border-radius: lh(0.9);
border-color: $white;
text-shadow: None;
@include padding-left(0.2em);
}
> .detail-collapse{
border: none;
box-shadow: none;
background: $white;
padding: 0;
color: $blue;
> i {
padding: lh(0.25);
}
> span{
color: inherit;
}
}
> .requirement-container{
> .requirement-container {
padding: lh();
> .requirement{
border-bottom: 1px solid $lightGrey;
padding: lh(0.5);
> .requirement-name {
width: bi-app-invert-percentage(40%);
display: inline-block;
}
> .requirement-status{
width: bi-app-invert-percentage(60%);
@include float(right);
display: inline-block;
.fa-times{
@extend %t-icon6;
color: $alert-color;
}
.fa-check{
@extend %t-icon6;
color: $success-color;
}
> .not-achieve{
color: $darkGrey;
}
@@ -244,18 +268,20 @@
> section {
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
display: table;
padding: lh() 0;
width: 100%;
&:last-child {
border-bottom: 0px;
border-bottom: 0;
}
.hd {
@include border-right(1px dashed #ddd);
@include box-sizing(border-box);
display: table-cell;
letter-spacing: 0;
margin: 0;
@@ -268,7 +294,9 @@
.sections {
display: inline-block;
@include padding-left(flex-gutter(9));
width: flex-grid(7, 9);
> div {
@@ -310,7 +338,9 @@
display: inline-block;
width: auto;
margin: initial;
@include margin-right($baseline);
border: initial;
padding: initial;
font-size: em(14);
@@ -319,8 +349,10 @@
dd {
display: inline-block;
margin: 0;
@include margin-right($baseline);
@include padding-right(1em);
font-size: em(14);
font-weight: normal;
color: $gray-d2;

59
lms/static/sass/course/_student-notes.scss
View File

@@ -26,7 +26,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
%notes-tab-control {
@include transition(none);
@extend %shame-link-base;
display: inline-block;
vertical-align: middle;
border-bottom: ($baseline/5) solid $transparent;
@@ -38,11 +40,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// --------------------
.wrapper-student-notes {
@include clearfix();
padding-bottom: $baseline;
.student-notes {
@include clearfix();
@extend .content; // needed extend carried over from course handouts UI, but should be cleaned up
width: 100%;
}
}
@@ -51,20 +56,24 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// --------------------
.title-search-container {
@include clearfix();
margin-bottom: $baseline;
.wrapper-title {
@include float(left);
width: flex-grid(7,12);
.page-title {
@extend %t-title4;
@extend %t-weight1;
margin-bottom: 0;
.page-subtitle {
@extend %t-title7;
@extend %t-weight2;
display: block;
margin-top: ($baseline/4);
color: $gray-l1;
@@ -75,7 +84,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.wrapper-notes-search {
@include float(right);
width: flex-grid(5,12);
@include text-align(right);
}
@@ -86,8 +97,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.search-notes-input {
@extend %t-demi-strong;
position: relative;
@include right(-6px); // manually positioning input right next to submit
width: 55%;
padding: ($baseline/2) ($baseline*0.75);
color: $gray-d3;
@@ -96,6 +110,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.search-notes-submit {
@extend %btn-inherited-primary;
@extend %t-action2;
padding: 8px $baseline 9px $baseline; // manually syncing up height with search input
}
}
@@ -111,6 +126,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.course-title, .tags-title {
@extend %t-title6;
@extend %t-weight4;
margin: 0 0 ($baseline/2) 0;
color: $gray-d3;
}
@@ -118,6 +134,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.course-subtitle {
@extend %t-title7;
@extend %t-weight4;
margin: 0 0 ($baseline/4) 0;
border-bottom: $divider-visual-tertiary;
padding-bottom: ($baseline/2);
@@ -132,10 +149,12 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// individual note
.note {
@include clearfix();
margin: ($baseline*1.5) 0;
.wrapper-note-excerpts {
@include transition(box-shadow $tmg-avg ease-in-out 0, border-color $tmg-avg ease-in-out 0);
display: inline-block;
width: flex-grid(9, 12);
border: 1px solid $gray-l5;
@@ -144,6 +163,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// note - highlighted content
.note-excerpt {
@include transition(background-color $tmg-avg ease-in-out 0);
padding: $baseline;
background: $student-notes-highlight-color;
@@ -158,30 +178,36 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
@extend %t-copy-sub1;
@extend %t-weight2;
@extend %shame-link-text;
display: inline;
@include margin-left($baseline/4);
border: 0;
background: transparent;
padding: 0;
&:active {
background: transparent;
box-shadow: none;
background: transparent;
box-shadow: none;
}
}
// note - comment made on highlighted content
.note-comments {
@extend %ui-no-list;
border-top: ($baseline/5) solid $student-notes-highlight-color-focus;
.note-comment {
@include transition(color $tmg-avg ease-in-out 0);
padding: ($baseline*0.75) $baseline;
color: $gray;
.note-comment-title {
@extend %t-title8;
letter-spacing: ($baseline/20);
margin: 0 0 ($baseline/4) 0;
color: $gray-l2;
@@ -192,6 +218,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.note-comment-ol {
@extend %t-copy-sub1;
@extend %t-weight2;
padding: 0;
margin: 0;
background: transparent;
@@ -218,6 +245,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// note reference
.reference {
@extend %t-copy-sub1;
display: inline-block;
width: flex-grid(3, 12);
vertical-align: top;
@@ -229,6 +257,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.reference-title {
@extend %t-title8;
@extend %t-weight3;
margin-top: ($baseline/2);
text-transform: uppercase;
letter-spacing: ($baseline/20);
@@ -242,6 +271,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.reference-meta {
@extend %t-weight2;
color: $m-gray-d2;
}
@@ -254,26 +284,25 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
}
}
// Put commas between tags.
span.reference-meta.reference-tags:after {
span.reference-meta.reference-tags::after {
content: ",";
color: $m-gray-d2;
}
// But not after the last tag.
span.reference-meta.reference-tags:last-child:after {
content: "";
span.reference-meta.reference-tags:last-child::after {
content: "";
}
// needed for poor base LMS styling scope
a.reference-meta {
@extend %shame-link-text;
@extend %shame-link-text;
}
}
}
// STATE: hover/focus
&:hover, &:focus {
.wrapper-note-excerpts {
box-shadow: 0 2px 0 1px $shadow-l2;
border-color: $gray-l4;
@@ -294,9 +323,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// +tabbed views
// --------------------
.wrapper-tabs {
.tab-panel, .inline-error, .ui-loading {
@extend %no-outline;
border-top: $divider-visual-primary;
.listing-tools {
@@ -321,6 +350,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tab-list {
@include clearfix();
position: relative;
top: ($baseline/5);
@@ -331,16 +361,21 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tabs-label {
@extend %hd-lv5;
margin-bottom: 0;
padding: ($baseline*0.75) 0;
@include padding-right($baseline);
color: $gray-l2;
font-weight: $font-semibold !important; // needed for poor base LMS styling scope
}
.tabs {
@include clearfix();
@extend %ui-no-list;
position: relative;
bottom: -($baseline/4);
}
@@ -351,6 +386,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tab-label {
@extend %notes-tab-control;
padding: ($baseline/2) ($baseline*0.75);
text-align: center;
@@ -361,7 +397,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// STATE: active/current tab being viewed
&.is-active {
.tab-label {
border-bottom-color: $gray-d3;
color: $gray-d3;
@@ -376,8 +411,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// CASE: tab-label can be closed
.action-close {
@extend %notes-tab-control;
position: relative;
@include left(-($baseline*0.75));
padding: ($baseline/2);
}
}
@@ -390,6 +428,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
#no-results-panel {
p {
@extend %t-copy-lead1;
margin: ($baseline*1.5) 0;
}
}
@@ -410,6 +449,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.placeholder-title {
@extend %hd-lv3;
margin-bottom: $baseline;
text-transform: none; // 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;
li {
@extend %wipe-last-child;
display: block;
margin-bottom: ($baseline/2);
}

7
lms/static/sass/course/_syllabus.scss
View File

@@ -1,7 +1,5 @@
div.syllabus {
padding: 2em 2.5em;
text-align: center;
h1 {
@@ -9,13 +7,12 @@ div.syllabus {
}
.notes {
margin: 0px auto 20px;
margin: 0 auto 20px;
}
table {
table-layout: auto;
text-align: left;
margin: ($baseline/2) 0;
thead {
@@ -49,7 +46,7 @@ div.syllabus {
}
&.week_separator {
padding: 0px !important;
padding: 0 !important;
hr {
margin: ($baseline/2);

5
lms/static/sass/course/_tabs.scss
View File

@@ -1,5 +1,6 @@
div.static_tab_wrapper {
@include box-sizing(border-box);
@include box-sizing(border-box);
padding: 2em 2.5em;
h1 {
@@ -7,7 +8,7 @@ div.static_tab_wrapper {
}
section {
margin: 0px 0px 20px;
margin: 0 0 20px;
}
@media print {

35
lms/static/sass/course/_textbook.scss
View File

@@ -2,6 +2,7 @@ div.book-wrapper {
max-width: 1150px;
margin: 0 auto;
width: 100%;
/*background-color: $white;*/
#open_close_accordion {
@@ -20,7 +21,9 @@ div.book-wrapper {
section.book-sidebar {
@extend .sidebar;
@extend .tran;
@include box-sizing(border-box);
padding: ($baseline/2) 0;
border-radius: 3px 0 0 3px;
border: 1px solid $gray-l3;
@@ -28,7 +31,7 @@ div.book-wrapper {
width: 180px;
#booknav {
list-style: none;
list-style: none;
.chapter {
line-height: 1.4em;
@@ -36,12 +39,14 @@ div.book-wrapper {
.page-number {
@include float(right);
width: 12%;
font-size: .8em;
font-size: 0.8em;
line-height: 2.1em;
text-align: right;
color: #9a9a9a;
opacity: 0.0;
opacity: 0;
@include transition(opacity .15s linear 0s);
}
@@ -52,6 +57,7 @@ div.book-wrapper {
a {
@include clearfix();
padding: 0;
color: $uxpl-blue-base;
@@ -60,14 +66,13 @@ div.book-wrapper {
color: $uxpl-blue-hover-active;
.page-number {
opacity: 1.0;
opacity: 1;
}
}
}
div.hitarea {
background-image: url('#{$static-path}/images/treeview-default.gif');
position: relative;
top: 4px;
@@ -97,6 +102,7 @@ div.book-wrapper {
.book {
@extend .content;
padding: 0;
width:76%;
@@ -105,6 +111,7 @@ div.book-wrapper {
a {
@extend .block-link;
padding: 0 lh();
}
@@ -121,18 +128,22 @@ div.book-wrapper {
background-color: rgba(#000, .7);
background-position: center;
background-repeat: no-repeat;
@include box-sizing(border-box);
display: table;
height: 100%;
opacity: 0.0;
opacity: 0;
filter: alpha(opacity=0);
text-indent: -9999px;
@include transition(none);
vertical-align: middle;
width: 100%;
&:hover, &:focus {
opacity: 1.0;
opacity: 1;
}
&.is-disabled {
@@ -183,12 +194,12 @@ div.book-wrapper {
div {
text-align: left;
line-height: 1.6em;
margin: ($baseline/4);
line-height: 1.6em;
margin: ($baseline/4);
.Paragraph, h2 {
margin-top: ($baseline/2);
}
.Paragraph, h2 {
margin-top: ($baseline/2);
}
}
}
}

14
lms/static/sass/course/base/_base.scss
View File

@@ -41,12 +41,13 @@ body {
body, h1, h2, h3, h4, h5, h6, p, label {
@include text-align(left);
font-family: $sans-serif;
}
// we want to hide the outline on the focusable <main> element
main {
outline: none;
outline: none;
}
table {
@@ -74,6 +75,7 @@ form {
form.choicegroup {
label {
clear: both;
@include float(left);
}
}
@@ -87,7 +89,9 @@ input[type="password"] {
border: 1px solid $border-color-2;
border-radius: 0;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1;
@include box-sizing(border-box);
font: normal 1em $sans-serif;
height: 35px;
padding: ($baseline/4) 12px;
@@ -135,16 +139,17 @@ img {
z-index: 99999;
padding: 0 10px;
border-radius: 3px;
background: rgba(0, 0, 0, .85);
background: rgba(0, 0, 0, 0.85);
font-size: 11px;
font-weight: 400;
line-height: 26px;
color: $white;
pointer-events: none;
opacity: 0;
@include transition(opacity .1s linear 0s);
&:after {
&::after {
content: '▾';
display: block;
position: absolute;
@@ -152,7 +157,7 @@ img {
left: 50%;
margin-left: -7px;
font-size: 20px;
color: rgba(0, 0, 0, .85);
color: rgba(0, 0, 0, 0.85);
}
}
@@ -215,6 +220,7 @@ img {
.action-btn {
@include dark-grey-button;
margin-top: ($baseline/2);
text-align: center;
}

56
lms/static/sass/course/base/_extends.scss
View File

@@ -11,7 +11,9 @@
// Older Course Extends - to review/remove with LMS cleanup
h1.top-header {
border-bottom: 1px solid $border-color-2;
@include text-align(left);
font-size: em(24);
font-weight: 100;
padding-bottom: lh();
@@ -29,19 +31,25 @@ h1.top-header {
.light-button, a.light-button, // only used in askbot as classes
.gray-button {
@include simple($gray-l5);
@extend .button-reset;
font-size: em(13);
}
.blue-button {
@include simple($blue);
@extend .button-reset;
font-size: em(13);
}
.pink-button {
@include simple($pink);
@extend .button-reset;
font-size: em(13);
}
@@ -68,12 +76,12 @@ h1.top-header {
background: $sidebar-color;
h1, h2, h3, h4 {
font-weight: bold;
letter-spacing: 0;
text-transform: none;
font-family: $sans-serif;
text-align: left;
font-style: normal;
font-weight: bold;
letter-spacing: 0;
text-transform: none;
font-family: $sans-serif;
text-align: left;
font-style: normal;
}
h1 {
@@ -112,6 +120,7 @@ h1.top-header {
li {
@include margin-left(20px);
background: none;
position: relative;
padding: 0;
@@ -136,7 +145,7 @@ h1.top-header {
a {
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;
height: 16px;
padding: 6px;
@@ -160,6 +169,7 @@ h1.top-header {
.topbar {
@extend .clearfix;
border-bottom: 1px solid $border-color;
@media print {
@@ -179,37 +189,43 @@ h1.top-header {
}
.tran {
@include transition( all .2s $ease-in-out-quad 0s);
@include transition(all .2s $ease-in-out-quad 0s);
}
// FontAwesome rtl chevron next
.fa-chevron-next {
&:before {
&::before {
@if $bi-app-direction == ltr {
content: "\f054"; // .fa-chevron-right
} @else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left
content: "\f054"; // .fa-chevron-right
}
@else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left
}
}
}
// FontAwesome rtl chevron prev
.fa-chevron-prev {
&:before {
&::before {
@if $bi-app-direction == ltr {
content: "\f053"; // .fa-chevron-left
} @else if $bi-app-direction == rtl {
content: "\f054"; // .fa-chevron-right
content: "\f053"; // .fa-chevron-left
}
@else if $bi-app-direction == rtl {
content: "\f054"; // .fa-chevron-right
}
}
}
.fa-arrow-circle-prev {
&:before {
&::before {
@if $bi-app-direction == ltr {
content: "\f0a8"; // .fa-arrow-circle-left
} @else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right
content: "\f0a8"; // .fa-arrow-circle-left
}
@else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right
}
}
}

5
lms/static/sass/course/base/_mixins.scss
View File

@@ -5,7 +5,9 @@
padding: 0 15px;
border-radius: 3px;
border: 1px solid #2d81ad;
@include linear-gradient(top, #6dccf1, #38a8e5);
font-size: 13px;
font-weight: 700;
line-height: 32px;
@@ -15,6 +17,7 @@
&:hover, &:focus {
border-color: #297095;
@include linear-gradient(top, #4fbbe4, #2090d0);
}
}
@@ -25,7 +28,9 @@
padding: 0 15px;
border-radius: 3px;
border: 1px solid #444;
@include linear-gradient(top, #eee, $gray-l3);
font-size: 13px;
font-weight: 700;
line-height: 32px;

219
lms/static/sass/course/ccx_coach/_dashboard.scss
View File

@@ -1,128 +1,147 @@
.ccx-schedule-container {
float: left;
width: 750px;
float: left;
width: 750px;
}
table.ccx-schedule {
width: 100%;
width: 100%;
thead {
border-bottom: 2px solid black;
}
th:first-child {
width: 40%;
}
th:last-child {
width: 18%;
}
th, td {
padding: 10px;
}
td.no-link {
font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none;
}
.sequential .unit {
padding-left: 25px;
}
.vertical .unit {
padding-left: 40px;
}
a.empty {
display: block;
width: 100%;
color: white;
}
a.empty:hover {
color: #cbcbcb;
}
thead {
border-bottom: 2px solid black;
}
th:first-child {
width: 40%;
}
th:last-child {
width: 18%;
}
th, td {
padding: 10px;
}
td.no-link {
font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none;
}
.sequential .unit {
padding-left: 25px;
}
.vertical .unit {
padding-left: 40px;
}
a.empty {
display: block;
width: 100%;
color: white;
}
a.empty:hover {
color: #cbcbcb;
}
}
.ccx-schedule-sidebar {
float: left;
width: 295px;
margin-left: 20px;
float: left;
width: 295px;
margin-left: 20px;
}
.ccx-sidebar-panel {
border: 1px solid #cbcbcb;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #cbcbcb;
padding: 15px;
margin-bottom: 20px;
}
form.ccx-form {
line-height: 1.5;
// inspiration was taken from https://github.com/edx/ux-pattern-library
select {
@include font-size(16);
background: #fcfcfc;
border: 1px solid #e9e8e8;
box-sizing: padding-box;
color: #282c2e;
display: inline-block;
font-size: ($baseline*.9.5);
height: 40px;
line-height: 20px;
padding: 10px;
transition: all 125ms ease-in-out 0s;
width: 100%;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
line-height: 1.5;
// inspiration was taken from https://github.com/edx/ux-pattern-library
select {
@include font-size(16);
background: #fcfcfc;
border: 1px solid #e9e8e8;
box-sizing: padding-box;
color: #282c2e;
display: inline-block;
font-size: ($baseline*.9.5);
height: 40px;
line-height: 20px;
padding: 10px;
transition: all 125ms ease-in-out 0s;
width: 100%;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
input {
@include font-size(15);
background: #FCFCFC none repeat scroll 0% 0%;
border: 1px solid #E7E6E6;
box-sizing: border-box;
color: #34383A;
display: inline-block;
line-height: normal;
transition: all 0.125s ease-in-out 0s;
padding: 5px 10px 5px 10px;
&:focus {
border-color: #0ea6ec;
color: #282c2e;
outline: 0;
}
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
}
input {
@include font-size(15);
background: #fcfcfc none repeat scroll 0% 0%;
border: 1px solid #e7e6e6;
box-sizing: border-box;
color: #34383a;
display: inline-block;
line-height: normal;
transition: all 0.125s ease-in-out 0s;
padding: 5px 10px 5px 10px;
&:focus {
border-color: #0ea6ec;
color: #282c2e;
outline: 0;
}
.field {
margin: 5px 0 5px 0;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
}
.field {
margin: 5px 0 5px 0;
}
}
button.ccx-button-link {
background: none;
border: none;
padding: 0;
color: #069;
cursor: pointer;
&::after {
content: "\00a0 ";
}
&:active {
background: none;
border: none;
padding: 0;
color: #069;
cursor: pointer;
&:after {
content: "\00a0 ";
}
&:active {
background: none;
border: none;
padding: 0;
}
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
}
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
}
.ccx-manage-student-form input#student-id {
width: 60%;
width: 60%;
}

23
lms/static/sass/course/courseware/_amplifier.scss
View File

@@ -1,6 +1,7 @@
// JM MOSFET AMPLIFIER
section.tool-wrapper {
@extend .clearfix;
background: #073642;
border-bottom: 1px solid darken(#002b36, 10%);
border-top: 1px solid darken(#002b36, 10%);
@@ -11,7 +12,9 @@ section.tool-wrapper {
div#graph-container {
background: none;
@include box-sizing(border-box);
display: table-cell;
padding: lh();
vertical-align: top;
@@ -74,19 +77,22 @@ section.tool-wrapper {
div#controlls-container {
@extend .clearfix;
background: darken(#073642, 2%);
border-right: 1px solid darken(#002b36, 6%);
box-shadow: 1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%);
@include box-sizing(border-box);
display: table-cell;
padding: lh();
vertical-align: top;
width: flex-grid(4.5, 9);
div.graph-controls {
div.music-wrapper {
@extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%);
box-shadow: 0 1px 0 lighten(#073642, 2%);
margin-bottom: lh();
@@ -94,7 +100,9 @@ section.tool-wrapper {
input#playButton {
border-color: darken(#002b36, 6%);
@include button(simple, lighten( #586e75, 5% ));
@include button(simple, lighten(#586e75, 5%));
display: block;
float: right;
font: bold 14px $body-font-family;
@@ -106,6 +114,7 @@ section.tool-wrapper {
&[value="Stop"] {
@include button(simple, darken(#268bd2, 30%));
font: bold 14px $body-font-family;
&:active {
@@ -117,9 +126,12 @@ section.tool-wrapper {
div.inputs-wrapper {
@extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%);
box-shadow: 0 1px 0 lighten(#073642, 2%);
@include clearfix();
margin-bottom: lh();
margin-bottom: lh();
padding: 0 0 lh();
@@ -192,6 +204,7 @@ section.tool-wrapper {
div.schematic-sliders {
div.top-sliders {
@extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%);
box-shadow: 0 1px 0 lighten(#073642, 2%);
margin-bottom: lh();
@@ -231,13 +244,13 @@ section.tool-wrapper {
}
.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%);
box-shadow: inset 0 1px 0 lighten( #586e75, 20% );
box-shadow: inset 0 1px 0 lighten(#586e75, 20%);
margin-top: -.3em;
&:hover, &:active, &:focus {
background-color: lighten( #586e75, 10% );
background-color: lighten(#586e75, 10%);
}
}
}

193
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -27,9 +27,11 @@ html.video-fullscreen {
.instructor-info-action {
@extend %t-copy-sub2;
@include float(right);
@include margin-left($baseline/2);
@include text-align(right);
padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4);
background-color: $light-gray1;
@@ -44,9 +46,9 @@ html.video-fullscreen {
}
.content-wrapper {
.container-footer {
@include text-align(right);
margin: 0 auto;
max-width: grid-width(12);
min-width: 760px;
@@ -55,47 +57,48 @@ html.video-fullscreen {
}
.content-wrapper {
.course-license,
.xblock-license {
@include text-align(right);
.course-license,
.xblock-license {
@include text-align(right);
@extend %t-title7;
display: block;
width: auto;
padding: ($baseline/4) 0;
color: $base-font-color;
@extend %t-title7;
span {
color: inherit;
}
display: block;
width: auto;
padding: ($baseline/4) 0;
color: $base-font-color;
a:link,
a:visited {
color: $base-font-color;
}
a:active,
a:hover {
color: $uxpl-blue-base;
}
.license-label,
.license-value,
.license-actions {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
}
i,
em {
font-style: normal;
}
img {
display: inline;
}
span {
color: inherit;
}
a:link,
a:visited {
color: $base-font-color;
}
a:active,
a:hover {
color: $uxpl-blue-base;
}
.license-label,
.license-value,
.license-actions {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
}
i,
em {
font-style: normal;
}
img {
display: inline;
}
}
}
// TO-DO should this be content wrapper?
@@ -121,55 +124,68 @@ html.video-fullscreen {
.course-content,
.courseware-results-wrapper {
@extend .content;
line-height: 1.6;
.xblock {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
h1 {
margin: 0 0 lh();
letter-spacing: 0;
}
div.timed-exam {
h3 {
margin-bottom: 12px;
font-size: 22px;
font-weight: 600;
}
h1 {
margin-bottom: ($baseline/2);
font-size: 26px;
font-weight: 600;
}
h4 {
margin: 20px 0;
font-weight: 600;
b.success {
color: #2B8048;
color: #2b8048;
}
b.success {
color: #2B8048;
color: #2b8048;
}
b.failure {
color: #CB4765;
color: #cb4765;
}
}
p {
color: #797676;
strong {
font-weight: 600;
}
}
button.gated-sequence {
background: $transparent;
color: $uxpl-blue-base;
border: none;
box-shadow: none;
@include text-align(left);
@extend %t-copy-base;
width: 100%;
&:hover {
@@ -182,34 +198,41 @@ html.video-fullscreen {
margin-top: 5px;
font-size: 1.3em;
}
.gated-sequence {
color: $uxpl-blue-base;
font-weight: 600;
padding: ($baseline / 1.5) ($baseline / 4);
a.start-timed-exam {
cursor: pointer;
color: $uxpl-blue-base;
font-weight: 600;
position: relative;
top: ($baseline/10);
i.fa-arrow-circle-right {
font-size: $baseline;
}
}
}
.proctored-exam-select-code {
@include margin-left(30px);
}
.exam-action-button {
@extend %t-weight4;
@include margin-right($baseline);
background-image: none;
box-shadow: none;
text-shadow: none;
&.btn-pl-primary {
@extend %btn-pl-primary-base;
border: 0;
&:hover,
@@ -219,41 +242,50 @@ html.video-fullscreen {
}
}
background-color: #F2F8FB;
background-color: #f2f8fb;
padding: 30px;
font-size: 16px;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);
border: 1px solid #ddd;
&.critical-time {
border-left: 4px solid #b30101 !important;
margin: 0 auto;
}
&.success {
border-left: 4px solid #22B557 !important;
border-left: 4px solid #22b557 !important;
margin: 0 auto;
}
&.success-top-bar {
border-top: 4px solid #22B557 !important;
border-top: 4px solid #22b557 !important;
margin: 0 auto;
}
&.success-left-bar {
border-left: 4px solid #22B557 !important;
border-left: 4px solid #22b557 !important;
margin: 0 auto;
}
&.message-top-bar {
border-top: 4px solid #FAB95C !important;
border-top: 4px solid #fab95c !important;
margin: 0 auto;
}
&.message-left-bar {
border-left: 4px solid #FAB95C !important;
border-left: 4px solid #fab95c !important;
margin: 0 auto;
}
&.failure {
border-left: 4px solid #C93B34 !important;
border-left: 4px solid #c93b34 !important;
margin: 0 auto;
}
&.warning {
@include border-left(4px solid $warning-color);
margin: 0 auto;
}
}
@@ -299,6 +331,7 @@ html.video-fullscreen {
p {
color: $uxpl-gray-base;
strong {
font-weight: 600;
}
@@ -306,6 +339,7 @@ html.video-fullscreen {
.icon {
@include right(35px);
position: absolute;
font-size: 30px;
color: $uxpl-gray-base;
@@ -337,64 +371,81 @@ html.video-fullscreen {
.proctored-exam-skip-actions {
@include float(right);
margin-top: $baseline;
}
}
.footer-sequence {
padding: 30px 0px 20px 0px;
border-bottom: ($baseline/10) solid #CFD9DD;
padding: 30px 0 20px 0;
border-bottom: ($baseline/10) solid #cfd9dd;
hr {
border-bottom: 1px solid $uxpl-gray-background;
}
.clearfix {
clear: both;
}
h4 {
margin-bottom: 12px;
font-size: 22px;
font-weight: 400;
}
span {
margin-bottom: 10px;
display: inline-block;
font-weight: 600;
}
p.proctored-exam-option {
float: left;
width: 80%;
margin-bottom: 25px;
}
a.contest-review {
@include float(right);
@include text-align(right);
font-size: 12px;
margin: 0;
width: 20%;
}
p {
margin-bottom: ($baseline/20);
color: #797676;
}
.proctored-exam-instruction {
padding: ($baseline/2) 0;
border-bottom: 2px solid $uxpl-gray-background;
}
}
.border-b-0 {
border-bottom: none;
}
.padding-b-0 {
padding-bottom: ($baseline/20);
}
.faq-proctoring-exam {
@extend .footer-sequence;
border-bottom : none;
a.footer-link {
display: block;
padding: ($baseline/2) 0;
}
}
p {
margin-bottom: lh();
}
@@ -404,6 +455,7 @@ html.video-fullscreen {
background-color: $gray-l5;
padding: ($baseline * 0.75);
border-radius: 3px;
@include font-size(13);
}
@@ -415,6 +467,7 @@ html.video-fullscreen {
.path {
@extend %t-copy-sub1;
margin-top: -($baseline);
margin-bottom: $baseline;
color: $gray;
@@ -446,6 +499,7 @@ html.video-fullscreen {
header {
@extend h1.top-header;
border-radius: 0 4px 0 0;
margin-bottom: -16px;
border-bottom: 0;
@@ -458,6 +512,7 @@ html.video-fullscreen {
h2 {
@include border-right(0);
@include padding-right(0);
margin: 12px 0 0;
font-size: em(14, 24);
}
@@ -476,10 +531,12 @@ html.video-fullscreen {
ul {
@include padding-left(1em);
list-style: disc outside none;
&.discussion-errors {
@include padding-left(2em);
list-style: none;
}
@@ -502,15 +559,16 @@ html.video-fullscreen {
.vert {
@extend .clearfix;
border-bottom: 1px solid #ddd;
margin-bottom: ($baseline*0.75);
padding: 0 0 15px;
}
.vert > .xblock-student_view.is-hidden {
display: none;
border-bottom: 0px;
margin-bottom: 0px;
display: none;
border-bottom: 0;
margin-bottom: 0;
}
}
@@ -525,13 +583,16 @@ html.video-fullscreen {
ul {
margin: 0;
@include clearfix();
padding: 0;
list-style: none;
li {
@include float(left);
@include margin-right(flex-gutter(9));
width: flex-grid(3, 9);
margin-bottom: lh();
line-height: lh();
@@ -555,22 +616,25 @@ html.video-fullscreen {
p.error {
color: $error-color
}
p.success {
color: $success-color;
}
}
.xqa-modal, .staff-modal, .history-modal {
width: 80%;
height: 80%;
left: left(20%);
overflow: auto;
display: none;
width: 80%;
height: 80%;
left: left(20%);
overflow: auto;
display: none;
}
div.staff_info {
display: none;
@include clearfix();
white-space: pre-wrap;
border-top: 1px solid $gray-l3;
padding-top: lh();
@@ -680,8 +744,7 @@ section.self-assessment {
*/
.CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important;
}
.CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important;
}
}

329
lms/static/sass/course/courseware/_sidebar.scss
View File

@@ -1,175 +1,184 @@
.course-index {
@include transition( all .2s $ease-in-out-quad 0s);
@include border-right(1px solid $border-color-2);
@include border-radius(3px, 0, 0, 3px);
display: table-cell; // needed to extend the sidebar the full height of the area
@include transition(all .2s $ease-in-out-quad 0s);
@include border-right(1px solid $border-color-2);
@include border-radius(3px, 0, 0, 3px);
// provides sufficient contrast for all screen reader-only elements
.sr, .sr-only {
color: $black;
background: $white;
}
display: table-cell; // needed to extend the sidebar the full height of the area
// reseting bolded fonts for the course index
.group-heading {
@extend %t-regular;
}
// provides sufficient contrast for all screen reader-only elements
.sr, .sr-only {
color: $black;
background: $white;
}
// we're targetting the .class now, instead of the #id
.accordion {
@extend %t-copy-sub1;
// reseting bolded fonts for the course index
.group-heading {
@extend %t-regular;
}
.course-navigation {
// we're targetting the .class now, instead of the #id
.accordion {
@extend %t-copy-sub1;
.button-chapter {
@include transition(all $tmg-s3 ease-in-out);
@include box-sizing(border-box);
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
@include transition(background-color .1s linear 0s);
display: block;
width: 100%;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
background-color: $sidebar-chapter-bg;
color: $link-color;
-webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue
.course-navigation {
.button-chapter {
@include transition(all $tmg-s3 ease-in-out);
@include box-sizing(border-box);
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
@include transition(background-color .1s linear 0s);
.group-heading {
@extend %t-title6;
position: relative;
display: block;
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
@include text-align(left);
display: block;
width: 100%;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
background-color: $sidebar-chapter-bg;
color: $link-color;
-webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue
.icon {
position: absolute;
@include left($baseline);
top: $baseline;
font-size: $body-font-size;
color: $gray-l3;
}
}
.group-heading {
@extend %t-title6;
&.is-open {
background: $white;
box-shadow: none;
}
position: relative;
display: block;
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
&.active {
@include text-align(left);
.group-heading {
@extend %t-strong;
color: $base-font-color;
}
}
.icon {
position: absolute;
&:hover,
&:focus {
background: $white;
}
@include left($baseline);
&:active {
outline: none;
}
}
.chapter-content-container {
background: $white;
&.is-open {
border-bottom: 1px solid $shadow-l1;
}
.chapter-menu {
display: none;
padding: 0 14px;
overflow: hidden;
.menu-item {
@extend %t-strong;
margin: ($baseline/5) 0;
background: inherit;
a {
@extend %t-action3;
@extend %t-strong;
position: relative;
display: block;
@include padding(($baseline/4) ($baseline/2));
border-radius: ($baseline/4);
font-family: $sans-serif;
color: $base-font-color;
p {
&.subtitle {
@extend %t-action4;
@extend %t-regular;
display: block;
margin: 0;
color: $gray-d1;
&:empty {
// hide empty subtitles
display: none;
}
// definitions for proctored exam attempt status indicators
.verified {
color: $success-color;
}
.rejected {
color: $alert-color;
}
.error {
color: $alert-color;
}
}
.subtitle-name {
margin-right: 5px;
}
}
&:hover,
&:focus {
color: $base-font-color;
background: $gray-l5;
.subtitle {
color: $gray-d1;
}
}
}
&.graded {
.menu-icon {
@include right($baseline/2.5);
position: absolute;
bottom: ($baseline/2);
color: $link-color;
}
}
&.active {
a {
@extend %t-ultrastrong;
background: $gray-l4;
}
}
&:last-of-type {
padding-bottom: ($baseline/2);
}
}
}
}
top: $baseline;
font-size: $body-font-size;
color: $gray-l3;
}
}
&.is-open {
background: $white;
box-shadow: none;
}
&.active {
.group-heading {
@extend %t-strong;
color: $base-font-color;
}
}
&:hover,
&:focus {
background: $white;
}
&:active {
outline: none;
}
}
.chapter-content-container {
background: $white;
&.is-open {
border-bottom: 1px solid $shadow-l1;
}
.chapter-menu {
display: none;
padding: 0 14px;
overflow: hidden;
.menu-item {
@extend %t-strong;
margin: ($baseline/5) 0;
background: inherit;
a {
@extend %t-action3;
@extend %t-strong;
position: relative;
display: block;
@include padding(($baseline/4) ($baseline/2));
border-radius: ($baseline/4);
font-family: $sans-serif;
color: $base-font-color;
p {
&.subtitle {
@extend %t-action4;
@extend %t-regular;
display: block;
margin: 0;
color: $gray-d1;
&:empty {
// hide empty subtitles
display: none;
}
// definitions for proctored exam attempt status indicators
.verified {
color: $success-color;
}
.rejected {
color: $alert-color;
}
.error {
color: $alert-color;
}
}
.subtitle-name {
margin-right: 5px;
}
}
&:hover,
&:focus {
color: $base-font-color;
background: $gray-l5;
.subtitle {
color: $gray-d1;
}
}
}
&.graded {
.menu-icon {
@include right($baseline/2.5);
position: absolute;
bottom: ($baseline/2);
color: $link-color;
}
}
&.active {
a {
@extend %t-ultrastrong;
background: $gray-l4;
}
}
&:last-of-type {
padding-bottom: ($baseline/2);
}
}
}
}
}
}
}
}

2
lms/static/sass/course/instructor/_email.scss
View File

@@ -63,7 +63,7 @@
}
.email-content-message {
padding: 5px 5% 40px 5%;
padding: 5px 5% 40px 5%;
}
.email-modal {

800
lms/static/sass/course/instructor/_instructor_2.scss
View File

@@ -1,6 +1,8 @@
@mixin idashbutton ($color) {
@include button(simple, $color);
@extend .button-reset;
margin-bottom: 1em;
padding: 8px 17px;
font-size: em(13);
@@ -20,6 +22,7 @@
.olddash-button-wrapper {
position: absolute;
top: 16px;
@include right(15px);
@include font-size(16);
}
@@ -27,6 +30,7 @@
.studio-edit-link{
position: absolute;
top: 40px;
@include right(15px);
@include font-size(16);
}
@@ -57,7 +61,9 @@
// TYPE: inline
.msg-inline {
display: inline-block;
@include margin-left($baseline);
padding: 0;
.icon,
@@ -102,7 +108,7 @@
min-width: 150px;
option {
padding: ($baseline/5) $baseline ($baseline/10) ($baseline/4);
padding: ($baseline/5) $baseline ($baseline/10) ($baseline/4);
}
}
@@ -117,6 +123,7 @@
.copy-error {
@include font-size(14);
color: $error-color;
}
@@ -135,75 +142,81 @@
}
}
.btn-blue {
@extend %btn-primary-blue;
margin-bottom: 0;
padding: ($baseline/2.5) ($baseline/2);
text-shadow: none;
.btn-blue {
@extend %btn-primary-blue;
margin-bottom: 0;
padding: ($baseline/2.5) ($baseline/2);
text-shadow: none;
}
// Custom File upload
.customBrowseBtn {
display: inline-block;
position: relative;
margin: ($baseline/2) 0 0;
width: 350px;
overflow: hidden;
vertical-align: bottom;
.enhanced-input-file {
@include border-radius(4px 0 0 4px);
@include padding(23px 6px 5px);
position: relative;
display: inline-block;
width: 250px;
vertical-align: middle;
border: 1px solid $lightGrey1;
background: $white;
cursor: not-allowed;
z-index: 2;
}
// Custom File upload
.customBrowseBtn {
display: inline-block;
position: relative;
margin: ($baseline/2) 0 0;
width: 350px;
overflow: hidden;
vertical-align: bottom;
.file-browse {
@include margin-left(-4px);
.enhanced-input-file {
@include border-radius(4px 0 0 4px);
@include padding(23px 6px 5px);
position: relative;
display: inline-block;
width: 250px;
vertical-align: middle;
border: 1px solid $lightGrey1;
background: $white;
cursor: not-allowed;
z-index: 2;
}
.file-browse {
@include margin-left(-4px);
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
.browse {
@include button(simple, $uxpl-blue-base);
@include margin-left(268px);
border-radius: 0 3px 3px 0;
padding: 6px ($baseline/2);
font-size: 12px;
}
.file_field {
@include left(-27%);
position: absolute;
z-index: 3;
height: 24px; // To match bull browse button
width: 124%;
margin: 0;
padding: 4px 0 0 0;
cursor: pointer;
// for visual sync, need to make button similar to firefox
&::-webkit-file-upload-button {
width: 100px;
}
}
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
.browse {
@include button(simple, $uxpl-blue-base);
@include margin-left(268px);
border-radius: 0 3px 3px 0;
padding: 6px ($baseline/2);
font-size: 12px;
}
.file_field {
@include left(-27%);
position: absolute;
z-index: 3;
height: 24px; // To match bull browse button
width: 124%;
margin: 0;
padding: 4px 0 0 0;
cursor: pointer;
// for visual sync, need to make button similar to firefox
&::-webkit-file-upload-button {
width: 100px;
}
}
}
}
}
// instructor dashboard 2
// ====================
.instructor-dashboard-content-2 {
@extend .content;
display: block; // override the table-cell display set in .content
width: 100%;
padding: 40px;
@@ -231,8 +244,9 @@
.slickgrid {
@include margin-left(1px);
@include font-size(14);
font-family: verdana,arial,sans-serif;
color: #333333;
color: #333;
.slick-cell {
border: 1px dotted silver;
@@ -244,6 +258,7 @@
.instructor-dashboard-title {
@extend .top-header;
display: inline-block;
margin-bottom: ($baseline*.75);
padding-bottom: 0;
@@ -256,39 +271,43 @@
.instructor_dash_glob_info {
position: absolute;
@include right(50px);
top: 46px;
text-align: right;
}
.instructor-nav {
@extend %ui-no-list;
border-top: 1px solid $gray-l3;
border-bottom: 1px solid $gray-l3;
@extend %ui-no-list;
.nav-item {
@extend %t-copy-base;
display: inline-block;
border-top: 1px solid $gray-l3;
border-bottom: 1px solid $gray-l3;
.btn-link {
display: inline-block;
padding: ($baseline/2) $baseline;
border: 0;
box-shadow: none;
text-shadow: none;
.nav-item {
@extend %t-copy-base;
&:hover,
&:focus {
background: $gray-l5 !important;
}
display: inline-block;
&.active-section {
background: $gray-l5;
color: $black;
}
}
.btn-link {
display: inline-block;
padding: ($baseline/2) $baseline;
border: 0;
box-shadow: none;
text-shadow: none;
&:hover,
&:focus {
background: $gray-l5 !important;
}
&.active-section {
background: $gray-l5;
color: $black;
}
}
}
}
}
// elements - general
@@ -307,6 +326,7 @@
.message-title {
@extend %t-title6;
@extend %t-weight4;
margin-bottom: ($baseline/4);
}
@@ -387,6 +407,7 @@
.section-title {
@include clearfix();
margin-bottom: ($baseline/2);
.value {
@@ -395,8 +416,10 @@
.description {
@extend %t-title7;
@include float(right);
@include text-align(right);
text-transform: none;
letter-spacing: 0;
color: $gray;
@@ -406,6 +429,7 @@
.subsection-title {
@extend %hd-lv5;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
}
@@ -418,7 +442,7 @@
margin-top: 2em;
h2 {
color: #D60000;
color: #d60000;
}
&.open {
@@ -427,6 +451,7 @@
background-image: url('/static/images/bullet-open.png');
}
}
.course-errors-visibility-wrapper {
display: block;
}
@@ -435,6 +460,7 @@
.toggle-wrapper {
width: 300px;
cursor: pointer;
div {
@include float(left);
}
@@ -445,6 +471,7 @@
.triangle {
@include float(left);
width: 20px;
height: 20px;
background-image: url('/static/images/bullet-closed.png');
@@ -459,6 +486,7 @@
.course-error {
margin-bottom: 1em;
@include margin-left(0.5em);
code {
@@ -510,14 +538,14 @@
input[name="send_to"]:checked+label {
// "bolds" the text without causing a width recalculation
text-shadow: 1px 0px 0px;
text-shadow: 1px 0 0;
}
input[name="send_to"]:focus+label, input[name="send_to"]:hover:not([disabled])+label {
background-color: #EFEFEF;
background-color: #efefef;
* {
background-color: #EFEFEF;
background-color: #efefef;
}
}
@@ -535,6 +563,7 @@
.email-targets-secondary {
display: table-cell;
margin: 0;
@include columns(2);
.subheading {
@@ -545,10 +574,13 @@
&:last-child {
margin-bottom: 0;
}
.tip {
display: block;
margin-top: ($baseline/4);
@include font-size(12);
color: $gray-d1;
}
}
@@ -558,7 +590,6 @@
// view - membership
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#membership {
.membership-section {
margin-bottom: ($baseline*1.5);
@@ -567,9 +598,9 @@
}
legend {
// use the same styles as H3s
font-size: 1.2em;
margin-bottom: 15px;
// use the same styles as H3s
font-size: 1.2em;
margin-bottom: 15px;
}
}
@@ -605,6 +636,7 @@
.results {
}
.enrollment_signup_button {
@include margin-right($baseline/4);
}
@@ -616,6 +648,7 @@
.hint {
@extend %t-copy-sub2;
display: block;
position: absolute;
top: ($baseline/2);
@@ -629,9 +662,11 @@
display: block;
position: absolute;
top: 0;
@include left(-15px);
@include border-right(8px solid $light-gray3);
@include border-left(8px solid transparent);
border-top: 8px solid $light-gray3;
border-bottom: 8px solid transparent;
}
@@ -641,12 +676,13 @@
* Ideally we want to handle functionality with JS.
* This functionality should eventually be moved into CS/JS, and out of here. */
.has-hint:hover > .hint {
@include left($baseline*10);
@include left($baseline*10);
}
.has-hint input:focus ~ .hint {
@include left($baseline*10);
@include left($baseline*10);
}
/* *** */
}
@@ -655,7 +691,6 @@
}
.member-lists-management {
.wrapper-member-select {
padding: ($baseline/2);
background-color: $light-gray;
@@ -676,10 +711,10 @@
}
.member-list-widget {
.header {
@include box-sizing(border-box);
@include border-top-radius(3);
position: relative;
padding: ($baseline/2);
background-color: #efefef;
@@ -694,16 +729,18 @@
.label,
.form-label {
@extend %t-copy-sub1;
color: $lighter-base-font-color;
}
.info {
@include box-sizing(border-box);
padding: ($baseline/2);
border: 1px solid $light-gray;
color: $lighter-base-font-color;
line-height: 1.3em;
font-size: .85em;
font-size: 0.85em;
}
.member-list {
@@ -724,10 +761,13 @@
th,
td {
@extend %t-copy-sub1;
vertical-align: middle;
padding: ($baseline/2) ($baseline/4);
@include border-left(1px solid $light-gray);
@include border-right(1px solid $light-gray);
word-wrap: break-word;
}
}
@@ -735,19 +775,22 @@
.bottom-bar {
@include box-sizing(border-box);
@include border-bottom-radius(3);
position: relative;
padding: ($baseline/2);
margin-top: -1px;
border: 1px solid $light-gray;
background-color: #efefef;
box-shadow: inset #bbb 0px 1px 1px 0px;
box-shadow: inset #bbb 0 1px 1px 0;
}
// .add-field
input[type="button"].add {
@include idashbutton($uxpl-blue-base);
position: absolute;
@include right($baseline);
}
}
@@ -771,9 +814,7 @@
// cohort management
%cohort-management-form {
.form-fields {
.label,
.form-label,
.input,
@@ -785,11 +826,13 @@
.form-label {
@extend %t-title7;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
.tip {
@extend %t-copy-sub1;
margin-top: ($baseline/4);
color: $gray-l2;
}
@@ -799,6 +842,7 @@
// needed to reset poor input styling
input[type="text"] {
height: auto;
&.readonly {
background-color: transparent;
padding: 0;
@@ -827,10 +871,12 @@
@extend %t-copy-sub1;
}
}
.form-submit {
@include idashbutton($uxpl-blue-base);
@include font-size(14);
@include line-height(14);
margin-right: ($baseline/2);
margin-bottom: 0;
text-shadow: none;
@@ -841,6 +887,7 @@
.cohort-management-nav-form {
width: 60%;
@include float(left);
}
@@ -851,16 +898,17 @@
.action-create {
@include idashbutton($uxpl-blue-base);
@extend %t-weight4;
@include float(right);
@include text-align(right);
text-shadow: none;
}
// STATE: is disabled
&.is-disabled {
.cohort-select {
opacity: 0.25;
}
@@ -883,11 +931,13 @@
.cohort-management-settings,
.cohort-management-edit {
@extend %cohort-management-form;
margin-bottom: $baseline;
.form-title {
@extend %t-title5;
@extend %t-weight4;
padding: $baseline;
background: $gray-l5;
border-bottom: ($baseline/10) solid $gray-l4;
@@ -908,9 +958,9 @@
.cohort-management-assignment-type-settings,
.cohorts-state-section {
&.is-disabled {
opacity: 0.25;
}
&.is-disabled {
opacity: 0.25;
}
}
// cohort
@@ -925,9 +975,8 @@
border-bottom: 1px solid $gray-l4;
&:hover, &:active, &:focus {
.action-edit-name {
opacity: 1.0;
opacity: 1;
pointer-events: auto;
}
}
@@ -941,6 +990,7 @@
.title-value {
@extend %t-title5;
@extend %t-weight4;
@include margin-right($baseline/4);
}
@@ -955,33 +1005,39 @@
@include font-size(14);
@include line-height(14);
@include margin-left($baseline/2);
padding: ($baseline/4) ($baseline/2);
margin-bottom: 0;
opacity: 0.0;
opacity: 0;
pointer-events: none;
}
}
.cohort-management-group-setup {
@include clearfix();
@extend %t-copy-sub1;
color: $gray-l2;
.setup-value {
@include float(left);
@include margin-right(5%);
width: 70%;
}
.setup-actions {
@include float(right);
@include text-align(right);
width: 20%;
}
}
.cohort-management-group-add {
@extend %cohort-management-form;
border: 1px solid $gray-l5;
.message-title {
@@ -991,6 +1047,7 @@
.form-title {
@extend %t-title6;
@extend %t-weight4;
margin-bottom: ($baseline/4);
padding: 0;
border: none;
@@ -999,6 +1056,7 @@
.form-introduction {
@extend %t-copy-sub1;
margin-bottom: $baseline;
p {
@@ -1023,30 +1081,31 @@
// CSV-based file upload for auto cohort assigning and
// cohort the discussion topics.
.toggle-cohort-management-secondary,
.toggle-cohort-management-discussions {
@extend %t-copy-sub1;
background: transparent;
border: none;
box-shadow: none;
text-shadow: none;
padding: 0;
color: $uxpl-blue-base;
.toggle-cohort-management-secondary,
.toggle-cohort-management-discussions {
@extend %t-copy-sub1;
background: transparent;
border: none;
box-shadow: none;
text-shadow: none;
padding: 0;
color: $uxpl-blue-base;
&:hover,
&:focus {
text-decoration: underline;
}
&:hover,
&:focus {
text-decoration: underline;
}
}
.cohort-management-file-upload {
.message-title {
@extend %t-title7;
}
.form-introduction {
@extend %t-copy-sub1;
margin-bottom: $baseline;
p {
@@ -1066,6 +1125,7 @@
@include idashbutton($uxpl-blue-base);
// needed to override very poor specificity and base rules for blue button
@include font-size(14);
margin-bottom: 0;
font-weight: 700;
text-shadow: none;
@@ -1074,6 +1134,7 @@
.cohort-management-supplemental {
@extend %t-copy-sub1;
margin-top: $baseline;
padding: ($baseline/2) $baseline;
background: $gray-l6;
@@ -1082,6 +1143,7 @@
.icon {
@include margin-right($baseline/4);
color: $gray-l1;
}
}
@@ -1120,6 +1182,7 @@
.cohort-management-settings {
@include clearfix();
background: $gray-l5;
.cohort-management-group-header {
@@ -1146,6 +1209,7 @@
display: inline-block;
width: flex-grid(3);
vertical-align: top;
@include text-align(right);
}
}
@@ -1164,6 +1228,7 @@
.cohort-details-name {
@extend %t-action1;
display: block;
width: 100%;
padding: ($baseline/2);
@@ -1172,6 +1237,7 @@
.cohort-section-header {
margin-top: ($baseline*1.5);
@include padding($baseline 0 ($baseline/2) 0);
}
@@ -1184,6 +1250,7 @@
.wrapper-tabs { // This applies to the tab-like interface that toggles between the student management and the group settings
@extend %ui-no-list;
@extend %ui-depth1;
position: relative;
top: 1px;
padding: 0 $baseline;
@@ -1213,7 +1280,9 @@
.toggle-button {
padding-bottom: ($baseline - 5);
border-style: solid;
@include border-width(1px 1px 0 1px);
border-color: $gray-l4;
background: $white;
color: inherit;
@@ -1225,6 +1294,7 @@
.tab-content {
@include padding($baseline $baseline 0 $baseline);
border: 1px solid $gray-l5;
&.new-cohort-form {
@@ -1240,7 +1310,6 @@
// view - discussions management
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#discussions_management {
.division-scheme-container {
// See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
display: flex;
@@ -1258,15 +1327,15 @@
}
.three-column-layout {
max-width: 30%;
max-width: 30%;
}
.two-column-layout {
max-width: 47%;
max-width: 47%;
}
.field-message {
font-size: 13px;
font-size: 13px;
}
}
@@ -1275,6 +1344,7 @@
@include idashbutton($uxpl-blue-base);
@include font-size(14);
@include line-height(14);
margin-right: ($baseline/2);
margin-bottom: 0;
text-shadow: none;
@@ -1282,6 +1352,7 @@
.discussions-management-supplemental {
@extend %t-copy-sub1;
margin-top: $baseline;
padding: ($baseline/2) $baseline;
background: $gray-l6;
@@ -1290,9 +1361,7 @@
// cohort discussions interface.
.discussions-nav {
.cohort-course-wide-discussions-form {
.form-actions {
padding-top: ($baseline/2);
}
@@ -1322,6 +1391,7 @@
.discussions-wrapper {
@extend %ui-no-list;
padding: 0 ($baseline/2);
.subcategories {
@@ -1329,9 +1399,11 @@
}
}
}
.wrapper-tabs {
@extend %ui-no-list;
@extend %ui-depth1;
position: relative;
top: 1px;
padding: 0 $baseline;
@@ -1342,8 +1414,7 @@
// view - student admin
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#student_admin {
.action-type-container{
.action-type-container {
margin-bottom: $baseline * 2;
}
@@ -1387,6 +1458,7 @@
height: 400px;
}
}
.report-downloads-table {
.slickgrid {
height: 300px;
@@ -1403,17 +1475,19 @@
// view - metrics
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#metrics {
.metrics-container, .metrics-header-container {
position: relative;
clear: both;
width: 100%;
@include float(left);
margin-top: 25px;
.metrics-left, .metrics-left-header {
position: relative;
width: 30%;
@include float(left);
@include margin-right(2.5%);
@@ -1421,15 +1495,18 @@
width: 100%;
}
}
.metrics-section.metrics-left {
height: 640px;
height: 640px;
}
.metrics-right, .metrics-right-header {
position: relative;
width: 65%;
@include float(left);
@include margin-left(2.5%);
margin-bottom: 25px;
svg {
@@ -1438,7 +1515,7 @@
}
.metrics-section.metrics-right {
height: 295px;
height: 295px;
}
svg {
@@ -1492,6 +1569,7 @@
.header {
background-color: #ddd;
}
th, td {
padding: 10px;
}
@@ -1505,13 +1583,17 @@
.download-csv {
position: absolute;
display: none;
@include right(2%);
bottom: 2%;
}
.close-button {
position: absolute;
@include right(1.5%);
top: 2%;
font-size: 2em;
}
@@ -1559,23 +1641,29 @@ input[name="subject"] {
color: green;
font-weight: bold;
}
table {
tr {
height: 21px;
td {
width: 120px;
}
}
}
}
.ecommerce-wrapper{
.ecommerce-wrapper {
h2{
height: 26px;
line-height: 26px;
span{
@include float(right);
font-size: 16px;
font-weight: bold;
span{
background: #ddd;
padding: 2px 9px;
@@ -1585,6 +1673,7 @@ input[name="subject"] {
}
}
}
span.tip{
display: block;
padding: 10px 15px;
@@ -1593,15 +1682,20 @@ input[name="subject"] {
background: #f8f4ec;
color: #3c3c3c;
line-height: 30px;
.add{
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
@include float(right);
}
}
}
#e-commerce{
input[name='list-order-sale-csv'] {
@include margin-right(14px);
@@ -1611,12 +1705,14 @@ input[name="subject"] {
margin-bottom: 1em;
line-height: 1.3em;
}
.reports-download-container {
.data-display-table {
.slickgrid {
height: 400px;
}
}
.report-downloads-table {
.slickgrid {
height: 300px;
@@ -1628,20 +1724,21 @@ input[name="subject"] {
}
}
}
.error-msgs {
background: #FFEEF5;
color:#B72667;
background: #ffeef5;
color:#b72667;
text-align: center;
padding: ($baseline/2) 0;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-size: 15px;
border-bottom: 1px solid #B72667;
border-bottom: 1px solid #b72667;
margin-bottom: $baseline;
display: none;
}
.success-msgs {
background: #D0F5D5;
background: #d0f5d5;
color:#008801;
text-align: center;
padding: ($baseline/2) 0;
@@ -1651,6 +1748,7 @@ input[name="subject"] {
margin-bottom: $baseline;
display: none;
}
.content{
padding: 0 !important;
}
@@ -1658,37 +1756,46 @@ input[name="subject"] {
input[name="download_company_name"],
input[name="active_company_name"], input[name="spent_company_name"] {
@include margin-right(8px);
height: 36px;
width: 254px;
border-radius: 3px;
}
.coupons-table {
width: 100%;
tr:nth-child(even){
background-color: $gray-l6;
border-bottom: 1px solid #f3f3f3;
}
background-color: $gray-l6;
border-bottom: 1px solid #f3f3f3;
}
tr.always-gray{
background: #eee !important;
border-top: 2px solid $white;
}
tr.always-white{
background: #fff !important;
td{
padding: ($baseline*1.5) 0 ($baseline/2);
}
}
.coupons-headings {
height: 40px;
border-bottom: 1px solid #BEBEBE;
border-bottom: 1px solid #bebebe;
th:nth-child(5){
text-align: center;
width: 120px;
}
th:first-child{
padding-left: $baseline;
}
th {
text-align: left;
border-bottom: 1px solid $border-color-1;
@@ -1697,22 +1804,28 @@ input[name="subject"] {
&.c_code {
width: 110px;
}
&.c_count {
width: 60px;
}
&.c_course_id {
width: 320px;
word-wrap: break-word;
}
&.c_discount {
width: 90px;
}
&.c_expiry {
width: 150px;
}
&.c_action {
width: 60px;
}
&.c_dsc{
width: 200px;
word-wrap: break-word;
@@ -1722,10 +1835,11 @@ input[name="subject"] {
// in_active coupon rows style
.inactive_coupon{
background: #FFF0F0 !important;
background: #fff0f0 !important;
text-decoration: line-through;
color: rgba(51,51,51,0.2);
border-bottom: 1px solid #fff;
td {
a {
color: rgba(51,51,51,0.2);
@@ -1734,10 +1848,10 @@ input[name="subject"] {
}
// in_active coupon rows style
.expired_coupon{
background: #FEEFB3 !important;
background: #feefb3 !important;
color: rgba(51,51,51,0.2);
border-bottom: 1px solid #fff;
td:nth-child(3) {
text-decoration: line-through;
}
@@ -1750,27 +1864,37 @@ input[name="subject"] {
position: relative;
line-height: normal;
font-size: 14px;
span.old-price{
top: -1px;
@include left(-75px);
position: relative;
text-decoration: line-through;
color: red;
font-size: 12px;
}
}
td:nth-child(5),td:first-child{
@include padding-left($baseline);
}
td:nth-child(2){
line-height: 22px;
@include padding-right(0px);
word-wrap: break-word;
}
td:nth-child(5){
@include padding-left(0);
text-align: center;
}
td{
a.edit-right{
@include margin-left(15px);
@@ -1778,41 +1902,54 @@ input[name="subject"] {
}
}
}
section#registration_code_generation_modal {
@include margin-left(-442px);
width: 930px;
}
@include margin-left(-442px);
width: 930px;
}
// coupon edit and add modals
#add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal,
#set-course-mode-price-modal, #registration_code_generation_modal{
.inner-wrapper {
background: $white;
}
span.tip-text {
display: block;
margin-top: ($baseline/4);
font-size: 12px;
color: #646464
}
width: 650px;
@include margin-left(-325px);
border-radius: 2px;
input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button,
input[type="button"]#set_course_button, input[type="button"]#lookup_regcode {
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
display: block;
height: auto;
margin: 0 auto;
width: 100%;
white-space: normal;
}
input[name="generate-registration-codes-csv"]{
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
}
.modal-form-error {
@include margin($baseline 0 ($baseline/2) 0);
padding: $baseline;
box-shadow: inset 0 -1px 2px 0 #f3d9db;
-webkit-box-sizing: border-box;
@@ -1822,166 +1959,219 @@ input[name="subject"] {
border-bottom: 3px solid #a0050e;
background: #fbf2f3;
}
ol.list-input{
li{
width: 278px;
@include float(left);
label.required:after {
label.required::after {
content: "*";
@include margin-left(5px);
}
}
li:nth-child(even){
@include margin-left(30px !important);
}
li:nth-child(3), li:nth-child(4){
width: 100%;
@include margin-left(0px !important);
}
li:nth-child(3) {
margin-bottom: 0px !important;
margin-bottom: 0 !important;
textarea {
min-height: 100px;
}
}
li:last-child{
margin-bottom: 0px !important;
margin-bottom: 0 !important;
}
}
table.tb_registration_code_status{
margin-top: $baseline;
color: #555;
thead {
font-size: 14px;
tr th:last-child {
text-align: center;
}
}
tbody {
font-size: 14px;
tr td:last-child {
text-align: center;
a:first-child{
margin-right: 10px;
}
}
}
}
form#generate_codes ol.list-input{
li{
width: 278px;
@include float(left);
label.required:after {
label.required::after {
content: "*";
@include margin-left(5px);
}
min-height: 120px;
}
li.address_fields {
min-height: 45px !important;
}
li#generate-registration-modal-field-city, li#generate-registration-modal-field-state,
li#generate-registration-modal-field-zipcode{
width: 205px;
}
li#generate-registration-modal-field-country {
width: 204px;
@include margin-left(15px !important);
margin-bottom: $baseline;
}
li:nth-child(even){
@include margin-left(0px !important);
}
li:nth-child(3n) {
@include margin-left(15px !important);
}
li#generate-registration-modal-field-company-contact-name,
li#generate-registration-modal-field-address-line-3,
li#generate-registration-modal-field-zipcode {
@include margin-left(15px !important);
}
li:last-child{
label {
@include float(right);
@include right(27px);
margin-top: -5px;
}
min-height: 5px;
@include margin-left(0px !important);
input[type='checkbox'] {
width: auto;
height: auto;
}
}
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-unit-price,
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference {
@include margin-left(0px !important);
@include margin-right(15px !important);
}
li#generate-registration-modal-field-custom-reference-number {
width: auto;
}
}
li#set-course-mode-modal-field-price{
width: 100%;
label.required:after {
label.required::after {
content: "*";
margin-left: ($baseline/4);
}
}
li#set-course-mode-modal-field-currency{
@include margin-left(0px !important);
select {
width: 100%;
}
}
#registration-content form .field.text input {
background: $white;
margin-bottom: 0;
height: 40px;
border-radius: 3px;
}
background: $white;
margin-bottom: 0;
height: 40px;
border-radius: 3px;
}
#coupon-content, #course-content, #content, #registration-content, #regcode-content {
padding: $baseline;
header {
margin: 0;
padding: 0;
h2 {
font-size: 24px;
font-weight: 100;
color: $uxpl-blue-base;
@include text-align(left);
}
}
.instructions p {
margin-bottom: ($baseline/4);
}
form {
margin: 0;
padding: 0;
border-radius: 0;
box-shadow: none;
border: none;
.group-form {
margin: 0;
padding-top: 0;
padding-bottom: $baseline;
}
.list-input {
margin: 0;
padding: 0;
list-style: none;
}
.readonly {
background-color: #eee !important;
color: #aaa;
}
.field {
margin: 0 0 20px 0;
}
.field.required label {
font-weight: 600;
}
.field label {
margin: 0 0 5px 0;
-webkit-transition: color 0.15s ease-in-out 0s;
@@ -1989,10 +2179,12 @@ input[name="subject"] {
transition: color 0.15s ease-in-out 0s;
color: #333;
}
.field.text input {
background: $white;
margin-bottom: 0;
}
.field input {
width: 100%;
margin: 0;
@@ -2000,27 +2192,30 @@ input[name="subject"] {
}
}
}
#registration-content form {
.field {
margin: 0;
}
.group-form {
margin: 0;
padding-top: 0;
padding-bottom: 0px;
padding-bottom: 0;
}
}
}
#add-coupon-modal{
ol.list-input{
li{
input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;}
&.full-width{width: 100%;}
input#coupon_expiration_date{width: 278px;display: inline-block;float: right;}
ol.list-input{
li{
input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;}
&.full-width{width: 100%;}
input#coupon_expiration_date{width: 278px;display: inline-block;float: right;}
}
}
}
}
}
.certificates-wrapper {
.generate-example-certificates-wrapper {
@@ -2046,15 +2241,19 @@ input[name="subject"] {
}
}
.ecommerce-wrapper, .proctoring-wrapper{
.ecommerce-wrapper, .proctoring-wrapper {
h2{
height: 26px;
line-height: 26px;
@include padding-left(25px);
span{
@include float(right);
font-size: 16px;
font-weight: bold;
span{
float: none;
padding: 2px 9px;
@@ -2064,6 +2263,7 @@ input[name="subject"] {
}
}
}
span.tip{
display: block;
padding: 10px 15px;
@@ -2072,114 +2272,155 @@ input[name="subject"] {
background: #f8f4ec;
color: #3c3c3c;
line-height: 30px;
.add{
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
@include float(right);
line-height: 14px;
font-size: 0.7em;
}
}
.content {
display: block;
width: 100%;
}
span.code_tip {
display: block;
margin-bottom: 30px;
@include padding(($baseline/2) 15px ($baseline/2) 0);
color: #3C3C3C;
color: #3c3c3c;
line-height: 30px;
.add{
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
}
}
span.csv_tip {
span.csv_tip {
display: block;
line-height: 30px;
margin-bottom: 6px;
@include padding(($baseline/2) 15px ($baseline/2) 1px);
.add{
font-size: em(13);
}
}
span.invalid_sale {
span.invalid_sale {
display: block;
height: 37px;
margin-bottom: 6px;
@include padding(($baseline/2) 15px ($baseline/2) 1px);
background: none repeat scroll 0 0 #F8F4EC;
color: #3C3C3C;
background: none repeat scroll 0 0 #f8f4ec;
color: #3c3c3c;
line-height: 30px;
.add{
@include button(simple, $uxpl-blue-base);
@extend .button-reset;
font-size: em(13);
}
}
}
.special-allowance-container, .student-proctored-exam-container{
.special-allowance-container, .student-proctored-exam-container {
.allowance-table, .exam-attempts-table {
width: 100%;
tr:nth-child(even){
background-color: $gray-l6;
border-bottom: 1px solid #f3f3f3;
}
background-color: $gray-l6;
border-bottom: 1px solid #f3f3f3;
}
.allowance-headings, .exam-attempt-headings {
height: 40px;
border-bottom: 1px solid #BEBEBE;
border-bottom: 1px solid #bebebe;
th:nth-child(5), th:nth-child(4){
text-align: center;
}
th:first-child{
padding-left: $baseline;
}
th {
@extend %t-action2;
text-align: left;
border-bottom: 1px solid $border-color-1;
&.attempt-allowed-time {
width: 90px;
width: 90px;
}
&.attempt-type {
width: 90px;
}
&.attempt-started-at {
width: 170px;
}
&.attempt-completed-at {
width: 160px;
text-align: center;
}
&.attempt-status {
width: 100px;
text-align: center;
}
&.exam-name {
width: 150px;
}
&.username {
width: 140px;
}
&.email {
@include text-align(center);
width: ($baseline*8);
word-wrap: break-word;
}
&.allowance-name {
width: ($baseline*5);
text-align: center;
}
&.allowance-value {
@include text-align(center);
width: ($baseline*5);
}
&.c_action {
@include text-align(center);
width: 60px;
}
}
@@ -2192,22 +2433,30 @@ input[name="subject"] {
line-height: normal;
font-size: 14px;
}
td:first-child{
@include padding-left($baseline);
}
td:nth-child(2){
line-height: 22px;
@include padding-right(0px);
word-wrap: break-word;
}
td:nth-child(5), td:nth-child(4), td:nth-child(6){
@include padding-left(0);
text-align: center;
}
td:nth-child(3){
word-wrap: break-word;
text-align: center;
}
td:nth-child(7){
word-wrap: break-word;
text-align: center;
@@ -2218,18 +2467,22 @@ input[name="subject"] {
}
}
}
.exam-attempts-content, .exam-allowances-content {
padding-left: 0;
padding-right: 0;
}
.top-header {
margin-top: -30px;
margin-bottom: 20px;
.search-attempts {
border: 1px solid #ccc;
display: inline-block;
border-radius: 5px;
float: left;
input {
border: none;
box-shadow: none;
@@ -2237,9 +2490,11 @@ input[name="subject"] {
font-size: 14px;
width: 285px;
}
span:first-child {
margin-right: -5px;
}
span {
background-color: #ccc;
display: inline-block;
@@ -2248,80 +2503,86 @@ input[name="subject"] {
}
}
}
.pagination {
display: inline-block;
padding-left: 0;
float: right;
margin: 0;
border-radius: 4px;
> li {
display: inline; // Remove list-style and block-level defaults
display: inline-block;
padding-left: 0;
float: right;
margin: 0;
border-radius: 4px;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
padding: 6px 12px;
line-height: 1.41;
text-decoration: none;
color: #00095f;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
> a.active {
background-color: #ccc;
}
&:first-child {
> a,
> span {
padding: 6px 12px;
line-height: 1.41;
text-decoration: none;
color: #00095f;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
> a.active {
background-color: #ccc;
}
&:first-child {
> a,
> span {
margin-left: 0;
@include border-left-radius(4px);
}
}
&:last-child {
> a,
> span {
@include border-right-radius(4px);
}
margin-left: 0;
@include border-left-radius(4px);
}
}
> li > a,
> li > span {
&:hover,
&:focus {
z-index: 3;
color: darken(#003a7d, 15%);
background-color: lighten(#000, 93.5%);
border-color: #ddd;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: #fff;
background-color: $uxpl-blue-base;
border-color: $uxpl-blue-base;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
&:last-child {
> a,
> a:hover,
> a:focus {
color: lighten(#000, 46.7%);
background-color: #fff;
border-color: #ddd;
cursor: not-allowed;
> span {
@include border-right-radius(4px);
}
}
}
> li > a,
> li > span {
&:hover,
&:focus {
z-index: 3;
color: darken(#003a7d, 15%);
background-color: lighten(#000, 93.5%);
border-color: #ddd;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: #fff;
background-color: $uxpl-blue-base;
border-color: $uxpl-blue-base;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: lighten(#000, 46.7%);
background-color: #fff;
border-color: #ddd;
cursor: not-allowed;
}
}
}
}
.rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper,
@@ -2333,14 +2594,14 @@ input[name="subject"] {
// view - certificates
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#certificates {
%exception-message {
margin-top: 15px;
background-color: $gray-l4;
border-top-style: groove;
color: $black;
}
.certificates-wrapper{
margin-top: 15px;
background-color: $gray-l4;
border-top-style: groove;
color: $black;
}
.certificates-wrapper {
.message{
@extend %exception-message;
}
@@ -2351,7 +2612,7 @@ input[name="subject"] {
line-height: 23px;
}
hr.section-divider{
hr.section-divider {
margin: 25px 0;
border-top: 7px solid #646464;
}
@@ -2359,10 +2620,11 @@ input[name="subject"] {
.certificate-generation-history{
table{
thead{
tr{
tr {
td.task-name{
width: 150px;
}
td.task-date{
width: 200px;
}
@@ -2370,7 +2632,7 @@ input[name="subject"] {
}
tbody{
tr{
tr {
td{
padding: 5px;
vertical-align: middle;
@@ -2382,20 +2644,23 @@ input[name="subject"] {
}
.student-username-or-email {
width: 300px;
margin-bottom: 10px;
}
.notes-field {
width: 400px;
}
width: 300px;
margin-bottom: 10px;
}
.notes-field {
width: 400px;
}
#certificate-white-list-editor {
padding-top: 5px;
.certificate-exception-inputs {
p + p {
margin-top: 5px;
}
.message {
@extend %exception-message;
}
@@ -2405,6 +2670,7 @@ input[name="subject"] {
.white-listed-students, .invalidation-history {
margin-top: 10px;
padding-top: 5px;
table {
margin-top: 5px;
width: 100%;
@@ -2412,6 +2678,7 @@ input[name="subject"] {
th {
@extend %t-copy-sub2;
background-color: $gray-l5;
padding: ($baseline*0.75) ($baseline/2) ($baseline*0.75) ($baseline/2);
vertical-align: middle;
@@ -2425,6 +2692,7 @@ input[name="subject"] {
&.user-name {
width: 120px;
}
&.user-email {
width: 200px;
}
@@ -2448,6 +2716,7 @@ input[name="subject"] {
tr {
@include transition(all $tmg-f2 ease-in-out 0s);
border-top: 1px solid $gray-l4;
&:first-child {
@@ -2474,8 +2743,8 @@ input[name="subject"] {
}
.message {
@extend %exception-message;
}
@extend %exception-message;
}
}
.certificate-exception-container {
@@ -2488,6 +2757,7 @@ input[name="subject"] {
.bulk-white-list-exception {
margin-top: 10px;
padding-top: 5px;
.white-list-csv {
.bulk-exception-results {
margin-top: 10px;
@@ -2503,14 +2773,16 @@ input[name="subject"] {
}
}
.arrow {
@include margin-right($baseline/2);
border: none;
background: transparent;
box-shadow: none;
color: $uxpl-blue-base;
font-weight: bold;
}
.arrow {
@include margin-right($baseline/2);
border: none;
background: transparent;
box-shadow: none;
color: $uxpl-blue-base;
font-weight: bold;
}
}
}
}

11
lms/static/sass/course/layout/_courseware_header.scss
View File

@@ -1,6 +1,7 @@
.wrapper-course-material {
@include clearfix();
@include box-sizing(border-box);
@extend %ui-print-excluded;
border-bottom: none;
@@ -15,6 +16,7 @@
.course-tabs {
@include border-top-radius(4px);
@include clearfix();
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
li {
@@ -23,6 +25,7 @@
&.prominent {
@include margin-right(16px);
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
@@ -35,8 +38,10 @@
a,
a:visited {
@include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75));
@extend %t-title7;
@extend %t-regular;
color: $gray-d1;
display: block;
text-align: center;
@@ -88,11 +93,15 @@
&#login {
display: block;
@include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
border: 1px solid transparent;
border-color: $uxpl-blue-base;
border-radius: 3px;
@include box-sizing(border-box);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $white;
display: inline-block;
@@ -135,7 +144,7 @@
.course-header {
@include float(left);
@include margin(10px, 10px, 0px, 10px);
@include margin(10px, 10px, 0, 10px);
display: inline-block;
width: 65%;

1
lms/static/sass/course/layout/_courseware_preview.scss
View File

@@ -58,6 +58,7 @@
// STATE: Fixed to viewport (used for scrolling)
&.is-fixed {
@extend %ui-depth4;
box-shadow: 0 3px 3px $shadow-d1;
position: fixed;
top: 0;

4
lms/static/sass/course/layout/_footer.scss
View File

@@ -1,4 +1,4 @@
footer {
box-shadow: $courseware-footer-shadow;
margin-top: $courseware-footer-margin;
box-shadow: $courseware-footer-shadow;
margin-top: $courseware-footer-margin;
}

18
lms/static/sass/course/modules/_calculator.scss
View File

@@ -7,7 +7,9 @@
bottom: -126px;
left: 0;
position: fixed;
@include transition(bottom $tmg-avg linear 0s);
-webkit-appearance: none;
width: 100%;
@@ -19,6 +21,7 @@
@include transition(background-color $tmg-f2 ease-in-out 0s);
@include float(right);
@include right($baseline*.75);
position: relative;
top: -42px;
border-bottom: 0;
@@ -62,7 +65,9 @@
form {
@extend .clearfix;
@include box-sizing(border-box);
padding: lh();
.calc-output-label {
@@ -74,7 +79,9 @@
border: 1px solid $white;
border-radius: 0;
box-shadow: none;
@include box-sizing(border-box);
color: $black;
float: left;
font-size: 30px;
@@ -102,7 +109,9 @@
background: $white;
border: 1px solid $white;
box-shadow: none;
@include box-sizing(border-box);
color: $black;
float: left;
font-size: 16px;
@@ -113,13 +122,14 @@
width: flex-grid(4);
&.has-result {
border: 1px solid $green-d1;
box-shadow: inset 0px 0px ($baseline/3) $green-d1;
border: 1px solid $green-d1;
box-shadow: inset 0 0 ($baseline/3) $green-d1;
}
}
.input-wrapper {
@extend .clearfix;
float: left;
margin: 0;
position: relative;
@@ -134,7 +144,9 @@
direction: ltr; // Almost all of the real-world calculators are LTR
border: none;
box-shadow: none;
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
-webkit-appearance: none;
@@ -156,6 +168,7 @@
#calculator_hint {
@include hide-text;
display: block;
height: 35px;
width: 35px;
@@ -177,6 +190,7 @@
.help {
@include transition(none);
background: $white;
border-radius: 3px;
box-shadow: 0 0 3px #999;

56
lms/static/sass/course/modules/_student-notes.scss
View File

@@ -17,6 +17,7 @@
%bubble {
@include transform(rotate(45deg));
@include left(12px);
position: absolute;
bottom: -($baseline/2);
display: block;
@@ -66,17 +67,19 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// +toggling notes
// --------------------
.edx-notes-visibility {
.edx-notes-visibility-error {
@extend %t-copy-sub2;
@extend %text-truncated;
position: relative;
bottom: -($baseline/20); // needed to sync up with current rogue/more complex calc utility alignment
max-width: ($baseline*15);
display: none;
vertical-align: bottom;
@include margin-right(-($baseline/4));
@include border-right(($baseline/4) solid $error-color);
padding: ($baseline/2) $baseline;
background: $black-t3;
text-align: center;
@@ -85,7 +88,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// STATE: has error
&.has-error {
.edx-notes-visibility-error {
display: inline-block;
}
@@ -100,6 +102,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-notice {
@extend %t-weight4;
@extend %t-copy-sub1;
padding: ($baseline/4) $baseline;
background: $black-t3;
}
@@ -109,6 +112,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-notice {
@extend %t-weight4;
@extend %t-copy-sub1;
padding: ($baseline/2) $baseline;
background: $gray-d4;
}
@@ -140,7 +144,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
margin: 0 !important;
.annotator-widget {
&:after {
&::after {
@extend %bubble;
}
}
@@ -148,8 +152,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-editor {
.annotator-widget {
&:after {
&::after {
@extend %bubble;
background: $gray-l5;
}
}
@@ -169,23 +174,30 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
button {
@extend %notes-bubble;
position: relative;
display: block;
&:after {
&::after {
@extend %notes-reset-icon;
@extend %shame-link-base;
@include font-size(30);
position: absolute;
top: 35%;
@include left(15%);
content: "\f14b";
}
// using annotatorJS triangle styling for adder
&:before {
&::before {
@extend %bubble;
@include left(10px);
background: whitesmoke;
}
}
@@ -193,11 +205,12 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// editing
.annotator-editor {
.annotator-controls {
@include text-align(left);
@include clearfix();
@extend %ui-depth1;
position: relative;
padding: 8px;
border: none !important;
@@ -208,6 +221,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// actions
.annotator-save, .annotator-cancel {
@extend %notes-reset-background;
padding: ($baseline/4) ($baseline/2) !important;
border: none;
box-shadow: none;
@@ -216,7 +230,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
text-shadow: none !important;
// removing vendor icons
&:after {
&::after {
display: none !important;
}
}
@@ -231,10 +245,10 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
}
.annotator-item {
textarea {
@extend %notes-reset-font;
@extend %t-demi-strong;
padding: ($baseline/5) !important;
font-size: 14px !important;
line-height: 22px !important;
@@ -268,6 +282,7 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// STATE: disabled
&:disabled, &.is-disabled {
@extend %ui-disabled;
opacity: 0.5;
cursor: not-allowed;
}
@@ -286,7 +301,6 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
// content
.annotator-viewer {
.annotator-widget.annotator-listing {
outline: none;
}
@@ -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
div:first-of-type {
@extend %notes-reset-font;
padding: ($baseline/4) !important;
font-size: 14px !important;
line-height: 22px !important;
@@ -305,7 +320,9 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
opacity: 1;
// RTL support
@include right(0);
top: 0;
@include float(right);
@include padding-left($baseline/4);
@@ -314,10 +331,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
display: inline-block;
vertical-align: middle;
&:before {
&::before {
@extend %notes-reset-icon;
@extend %shame-link-base;
@extend %t-icon4;
position: absolute;
}
}
@@ -325,9 +343,11 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-edit {
@include margin-right($baseline/2);
&:before {
&::before {
top: 0;
@include left(0);
content: "\f040"; // .fa-pencil
}
}
@@ -335,18 +355,21 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
.annotator-delete {
@include margin-right($baseline/3);
&:before {
&::before {
top: -($baseline/20);
@include left(0);
content: "\f1f8"; // .fa-trash
}
}
.annotator-close {
&:before {
&::before {
top: -($baseline/20);
@include left(0);
content: "\f00d"; // .fa-close
}
}
@@ -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 {
@extend %notes-reset-background;
opacity: 1.0;
opacity: 1;
}
.edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-save {

1
lms/static/sass/course/modules/_timer.scss
View File

@@ -3,6 +3,7 @@
div.timer-main {
@extend %ui-depth2;
position: fixed;
top: 0;
right: 0;

14
lms/static/sass/course/wiki/_basic-html.scss
View File

@@ -1,9 +1,9 @@
section.wiki-body {
h1 {
h1 {
font-weight: bold;
font-size: 2em;
margin-bottom: 25px;
}
}
div#wiki_article {
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
@@ -67,19 +67,19 @@ section.wiki-body {
h1 {
font-size: 1.6em;
margin: .67em 0;
letter-spacing: 0px;
letter-spacing: 0;
}
h2 {
text-transform: none;
font-size: 1.4em;
margin: .75em 0;
letter-spacing: 0px;
letter-spacing: 0;
}
h3 {
font-size: 1.2em;
margin: .83em 0;
margin: 0.83em 0;
}
h4 {
@@ -131,7 +131,7 @@ section.wiki-body {
}
small, sub, sup {
font-size: .83em;
font-size: 0.83em;
}
sub {
@@ -181,7 +181,7 @@ section.wiki-body {
text-decoration: underline;
}
br:before {
br::before {
content: "\A";
white-space: pre-line;
}

6
lms/static/sass/course/wiki/_create.scss
View File

@@ -15,13 +15,16 @@ form#wiki_revision {
.CodeMirror {
@extend textarea;
@include box-sizing(border-box);
font-family: monospace;
margin-bottom: $baseline;
}
textarea {
@include box-sizing(border-box);
margin-bottom: $baseline;
min-height: 450px;
width: 100%;
@@ -59,7 +62,7 @@ form#wiki_revision {
.markdown-example {
background-color: #e3e3e3;
line-height: 1.0;
line-height: 1;
margin: 5px 0 7px;
padding: {
top: 5px;
@@ -67,6 +70,7 @@ form#wiki_revision {
bottom: 5px;
left: 5px;
}
text-shadow: 0 1px 0 #fff;
}
}

3
lms/static/sass/course/wiki/_sidebar.scss
View File

@@ -1,5 +1,6 @@
div#wiki_panel {
@extend .sidebar;
overflow: auto;
ul {
@@ -16,6 +17,7 @@ div#wiki_panel {
div#wiki_create_form {
@extend .clearfix;
padding: lh(0.5) lh() lh(0.5) 0;
label {
@@ -25,6 +27,7 @@ div#wiki_panel {
input[type="text"] {
@include box-sizing(border-box);
display: block;
width: 100%;
margin-bottom: lh(0.5);

5
lms/static/sass/course/wiki/_table.scss
View File

@@ -28,11 +28,12 @@ table.wiki-history {
}
}
}
tbody {
tbody {
tr td {
padding: 8px 15px;
}
}
}
tr.dark {
background-color: #efefef;

32
lms/static/sass/course/wiki/_wiki.scss
View File

@@ -1,5 +1,4 @@
.wiki-wrapper section.wiki {
.pull-left {
float: left;
}
@@ -53,7 +52,7 @@
color: $link-color;
}
&:after {
&::after {
content: '›';
display: inline;
margin-left: ($baseline/2);
@@ -84,6 +83,7 @@
.add-article-btn {
@include button(simple, #eee);
margin-left: 25px;
padding: 7px 15px !important;
font-size: 0.72em;
@@ -107,6 +107,7 @@
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
font-family: $sans-serif;
font-size: 12px;
@include transition(border-color .1s linear 0s);
&:-webkit-input-placholder {
@@ -149,6 +150,7 @@
width: flex-grid(9);
padding: 40px 0 40px 40px;
color: $base-font-color;
@include box-sizing(border-box);
}
@@ -180,14 +182,14 @@
h5 {
margin: 20px 0 10px;
font-size: .8em;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
h6 {
margin: 20px 0 10px;
font-size: .8em;
font-size: 0.8em;
font-weight: bold;
color: #999;
text-transform: uppercase;
@@ -238,6 +240,7 @@
float: left;
width: flex-grid(3);
padding: 40px 40px;
@include box-sizing(border-box);
.timestamp{
@@ -383,8 +386,9 @@
box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 6px $shadow;
}
&:before {
&::before {
@extend %ui-depth4;
content: 'click to edit schematic';
position: absolute;
top: 10px;
@@ -421,6 +425,7 @@
.btn {
@include button(simple, #eee);
font-size: 0.8em;
margin-right: ($baseline/4);
line-height: 1.2em;
@@ -434,16 +439,19 @@
&.btn-primary {
@include button(simple, $btn-default-color);
font-size: 0.8em;
}
&.btn-danger {
@include button(simple, $pink);
font-size: 0.8em;
}
&.btn-info {
@include button(simple, $gray-l3);
font-size: 0.8em;
}
}
@@ -454,6 +462,7 @@
.modal {
@extend %ui-depth4;
width: 960px;
min-height: 500px;
margin-left: -480px;
@@ -570,6 +579,7 @@
text-align: left;
padding: 20px;
font-size: 14px;
@include clearfix();
h3 {
@@ -666,6 +676,7 @@
#settings_form {
.well {
margin-bottom: ($baseline*0.75);
@include clearfix();
}
@@ -815,8 +826,8 @@
li {
margin-bottom: ($baseline*0.75);
border: 1px solid #DDD;
background: #F9F9F9;
border: 1px solid #ddd;
background: #f9f9f9;
border-radius: 5px;
}
@@ -906,9 +917,9 @@
.alert {
position: relative;
width: auto;
margin: 24px 0px;
margin: 24px 0;
padding: 8px 12px;
border: 1px solid #EBE8BF;
border: 1px solid #ebe8bf;
border-radius: 3px;
background: $yellow;
color: $black;
@@ -951,7 +962,9 @@
color: $white;
font-weight: bold;
font-size: em(18);
@include transition(none);
text-align: center;
-webkit-font-smoothing: antialiased;
@@ -965,6 +978,7 @@
.modal-backdrop {
@extend %ui-depth3;
position: fixed;
top: 0;
left: 0;

109
lms/static/sass/discussion/_discussion-v1.scss
View File

@@ -4,72 +4,75 @@
// Note: replace with globals from common/static/sass/edx-pattern-library-shims when available
%pattern-library-btn {
@include transition(
color 0.125s ease-in-out 0s,
@include transition(
color 0.125s ease-in-out 0s,
border-color 0.125s ease-in-out 0s,
background 0.125s ease-in-out 0s,
box-shadow 0.125s ease-in-out 0s
);
display: inline-block;
border: 1px solid $forum-color-active-thread;
border-radius: 3px;
margin: 0;
background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
white-space: nowrap;
);
// Display: block, one button per line, full width
&.block {
display: block;
width: 100%;
}
display: inline-block;
border: 1px solid $forum-color-active-thread;
border-radius: 3px;
margin: 0;
background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
white-space: nowrap;
// STATE: is disabled
&:disabled,
&.is-disabled {
pointer-events: none;
outline: none;
cursor: not-allowed;
}
// Display: block, one button per line, full width
&.block {
display: block;
width: 100%;
}
&:hover,
&:active,
&:focus {
// Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
// STATE: is disabled
&:disabled,
&.is-disabled {
pointer-events: none;
outline: none;
cursor: not-allowed;
}
&:hover,
&:active,
&:focus {
// Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
}
// Use pattern library buttons for discussion components
.discussion-module, .wmd-prompt-dialog {
.btn {
@extend %pattern-library-btn;
background-color: $forum-color-background;
color: $forum-color-active-thread;
}
.btn {
@extend %pattern-library-btn;
.btn-brand {
@extend %pattern-library-btn;
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
}
background-color: $forum-color-background;
color: $forum-color-active-thread;
}
.btn-brand {
@extend %pattern-library-btn;
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
}
}
// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
.discussion {
clear: both;
}
.discussion {
clear: both;
}
}

6
lms/static/sass/discussion/_discussion.scss
View File

@@ -4,6 +4,7 @@
.discussion-body {
@include clearfix();
border: none;
background: transparent;
box-shadow: none;
@@ -50,6 +51,7 @@
// inline discussion module
.discussion-module {
@extend .discussion-body;
display: block;
position: relative;
border-radius: $forum-border-radius;
@@ -71,12 +73,14 @@
.discussion-module-header {
@include float(left);
width: flex-grid(7);
margin-bottom: ($baseline * 0.75);
}
.add_post_btn_container {
@include text-align(right);
width: flex-grid(12);
height: (2 * $baseline);
}
@@ -90,6 +94,7 @@
.discussion-show {
@include float(right);
position: relative;
top: 3px;
font-size: $forum-base-font-size;
@@ -136,6 +141,7 @@ section.discussion-pagination {
ol {
li {
@include padding-right($baseline/2);
list-style: none;
display: inline-block;

44
lms/static/sass/discussion/_layouts.scss
View File

@@ -2,35 +2,35 @@
@import '../course/base/extends';
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-count {
margin-top: $baseline / 4;
}
.discussion-profile-count {
margin-top: $baseline / 4;
}
.discussion-profile-info {
@include margin-right($baseline);
}
.discussion-profile-info {
@include margin-right($baseline);
}
.user-name {
@include margin-right($baseline);
.user-name {
@include margin-right($baseline);
font-size: $forum-x-large-font-size;
}
font-size: $forum-x-large-font-size;
}
.user-roles {
font-size: $forum-small-font-size;
font-style: italic;
}
.user-roles {
font-size: $forum-small-font-size;
font-style: italic;
}
}
.discussion-column {
min-height: 500px;
min-height: 500px;
.new-post-article {
margin-top: -$baseline;
}
.new-post-article {
margin-top: -$baseline;
}
}

9
lms/static/sass/discussion/_mixins.scss
View File

@@ -17,6 +17,7 @@
@mixin white-button {
@include discussion-button();
border-color: #aaa;
background-color: $white;
color: $dark-gray;
@@ -28,6 +29,7 @@
@mixin discussion-wmd-input {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
box-sizing: border-box;
margin-top: 0;
border: 1px solid $forum-color-border;
@@ -42,6 +44,7 @@
@mixin discussion-wmd-preview-container {
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
box-sizing: border-box;
border: 1px solid $forum-color-border;
width: 100%;
@@ -50,11 +53,13 @@
@mixin discussion-new-post-wmd-preview-container {
@include discussion-wmd-preview-container;
border-color: $forum-color-border;
}
@mixin discussion-wmd-preview-label {
@include padding-left($baseline/4);
padding-top: 3px;
width: 100%;
color: $forum-color-editor-preview-label;
@@ -73,8 +78,8 @@
}
@-webkit-keyframes fadeIn {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
0% { opacity: 0; }
100% { opacity: 1; }
}
// extends - content - text overflow by ellipsis

29
lms/static/sass/discussion/elements/_actions.scss
View File

@@ -8,6 +8,7 @@
.response-actions-list,
.comment-actions-list {
@extend %ui-no-list;
@include text-align(right);
.actions-item {
@@ -53,7 +54,9 @@
.actions-dropdown {
@extend %ui-no-list;
@extend %ui-depth1;
@include right(0);
display: none;
position: absolute;
top: 100%;
@@ -77,9 +80,10 @@
background: $forum-color-background;
// ui triangle/nub
&:after,
&:before {
&::after,
&::before {
@include right(6px);
bottom: 100%;
border: solid transparent;
content: " ";
@@ -89,14 +93,15 @@
pointer-events: none;
}
&:after {
&::after {
@include margin-right(1px);
border-color: $transparent;
border-bottom-color: $white;
border-width: 6px;
}
&:before {
&::before {
border-color: $transparent;
border-bottom-color: $forum-color-border;
border-width: 7px;
@@ -118,6 +123,7 @@
// UI: general action
.action-button {
@include transition(border .5s linear 0s);
box-sizing: border-box;
display: inline-block;
border: 1px solid transparent;
@@ -136,19 +142,20 @@
.icon {
@include margin-right(0);
vertical-align: middle;
}
}
.action-label {
@extend %t-copy-sub2;
display: none;
vertical-align: middle;
padding: 2px 8px;
}
&:hover, &:focus {
.action-label {
display: inline-block;
}
@@ -160,13 +167,11 @@
// specific button styles
&.action-follow {
.action-label {
color: $blue-d1;
}
&.is-checked, &:hover, &:focus {
.action-icon {
background-color: $forum-color-following;
border: 1px solid $blue-d1;
@@ -180,13 +185,11 @@
}
&.action-vote {
.action-label {
opacity: 1;
}
&.is-checked, &:hover, &:focus {
.action-icon {
background-color: $green-d1;
border: 1px solid $green-d2;
@@ -204,9 +207,7 @@
}
&.action-endorse {
&.is-checked, &:hover, &:focus {
.action-icon {
background-color: $blue-d1;
border: 1px solid $blue-d2;
@@ -225,9 +226,7 @@
}
&.action-answer {
&.is-checked, &:hover, &:focus {
.action-icon {
border: 1px solid $green-d1;
background-color: $green-d1;
@@ -274,7 +273,9 @@
// UI: secondary action
.action-list-item {
@extend %t-copy-sub2;
@include text-align(right);
display: block;
width: 100%;
padding: ($baseline/10) 0;
@@ -287,6 +288,7 @@
.action-icon {
@include margin-left($baseline/4);
display: inline-block;
width: ($baseline/2);
color: inherit;
@@ -320,6 +322,7 @@
.action-button, .action-list-item {
.action-label {
@include float(left);
.label-checked {
display: none;
}

5
lms/static/sass/discussion/elements/_editor.scss
View File

@@ -47,6 +47,7 @@
.wmd-button-row {
@include transition(all .2s ease-out 0s);
position: relative;
overflow: hidden;
margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
@@ -56,6 +57,7 @@
.wmd-spacer {
@include margin-left(14px);
position: absolute;
display: inline-block;
width: 1px;
@@ -107,6 +109,7 @@
.wmd-input {
@include discussion-wmd-input;
box-sizing: border-box;
width: 100%;
background: $forum-color-background;
@@ -118,6 +121,7 @@
.wmd-prompt-dialog {
@extend .modal;
background: $forum-color-background;
padding: $baseline;
@@ -147,6 +151,7 @@
.field-group .field .field-hint {
@include margin-left(0);
width: 100%;
}

2
lms/static/sass/discussion/elements/_labels.scss
View File

@@ -4,7 +4,9 @@
.discussion {
.post-label {
@include margin($baseline/4, $baseline/2, 0, 0);
@extend %t-light;
font-size: $forum-small-font-size;
display: inline;
white-space: nowrap;

510
lms/static/sass/discussion/elements/_navigation.scss
View File

@@ -4,76 +4,79 @@
@import '../../edx-pattern-library-shims/base/variables';
.forum-nav {
border: 1px solid #aaa;
border-radius: $forum-border-radius;
border: 1px solid #aaa;
border-radius: $forum-border-radius;
}
// ------
// Discussion Forums Page Header
// ------
.discussion-board > .page-header {
$searchBoxPadding: rem($baseline / 2 + 2);
$searchBoxHeight: (rem($baseline) + ($searchBoxPadding * 2));
$searchBoxPadding: rem($baseline / 2 + 2);
$searchBoxHeight: (rem($baseline) + ($searchBoxPadding * 2));
div {
display: inline-block;
vertical-align: middle;
}
div {
display: inline-block;
vertical-align: middle;
}
.has-breadcrumbs .breadcrumbs {
margin-bottom: ($baseline / 2);
font-size: font-size(base);
font-weight: font-weight(semi-bold);
line-height: $base-line-height;
}
.has-breadcrumbs .breadcrumbs {
margin-bottom: ($baseline / 2);
font-size: font-size(base);
font-weight: font-weight(semi-bold);
line-height: $base-line-height;
}
.page-header-main {
line-height: $searchBoxHeight;
}
.page-header-main {
line-height: $searchBoxHeight;
}
.page-header-secondary > .form-actions > button {
// Overrides base size set in lms/static/sass/shared-v2/_layouts.scss
// Done to match size of UXPL's search box. This is bad, I know.
height: $searchBoxHeight !important;
}
.page-header-secondary > .form-actions > button {
// Overrides base size set in lms/static/sass/shared-v2/_layouts.scss
// Done to match size of UXPL's search box. This is bad, I know.
height: $searchBoxHeight !important;
}
}
// -----------
// Browse menu
// -----------
.forum-nav-browse-menu-wrapper {
border-bottom: 1px solid $forum-color-border;
background: $gray-l5;
border-bottom: 1px solid $forum-color-border;
background: $gray-l5;
}
.forum-nav-browse-filter {
position: relative;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4);
position: relative;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4);
}
.forum-nav-browse-filter .icon {
@include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
font-size: $forum-small-font-size;
position: absolute;
margin-top: -6px;
top: 50%;
@include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
font-size: $forum-small-font-size;
position: absolute;
margin-top: -6px;
top: 50%;
}
.forum-nav-browse-filter-input {
width: 100%;
width: 100%;
}
.forum-nav-browse-menu-following {
.icon {
@include float(left);
@include left($baseline / 2);
position: relative;
top: 13px;
}
.forum-nav-browse-title {
@include padding-left($baseline * 1.5);
}
.icon {
@include float(left);
@include left($baseline / 2);
position: relative;
top: 13px;
}
.forum-nav-browse-title {
@include padding-left($baseline * 1.5);
}
}
.forum-nav-browse-menu-item {
@@ -81,49 +84,49 @@
}
.forum-nav-browse-title {
@include text-align(left);
display: block;
width: 100%;
border: 0;
border-radius: 0;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/2);
background: transparent;
box-shadow: none;
background-image: none;
cursor: pointer;
@include text-align(left);
&:hover,
&:focus,
&.is-focused {
// switched from a to button;
// need to override button styles
background-image: none !important;
box-shadow: none !important;
background: $forum-color-background !important;
}
display: block;
width: 100%;
border: 0;
border-radius: 0;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/2);
background: transparent;
box-shadow: none;
background-image: none;
cursor: pointer;
&:hover,
&:focus,
&.is-focused {
// switched from a to button;
// need to override button styles
background-image: none !important;
box-shadow: none !important;
background: $forum-color-background !important;
}
}
.forum-nav-browse-title .icon {
@include margin-right($baseline/2);
@include margin-right($baseline/2);
}
.forum-nav-browse-menu {
font-size: $forum-base-font-size;
overflow-y: scroll;
list-style: none;
font-size: $forum-base-font-size;
overflow-y: scroll;
list-style: none;
}
.forum-nav-browse-submenu {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
li {
.forum-nav-browse-title {
@include padding-left($baseline);
}
li {
.forum-nav-browse-title {
@include padding-left($baseline);
}
}
}
// -------------------
@@ -131,264 +134,285 @@
// -------------------
.forum-nav-refine-bar {
@include clearfix();
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
padding: ($baseline/4) ($baseline/2);
color: $black;
@include clearfix();
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
padding: ($baseline/4) ($baseline/2);
color: $black;
}
.forum-nav-filter-main {
@include text-align(left);
@include float(left);
box-sizing: border-box;
width: 50%;
@include text-align(left);
@include float(left);
box-sizing: border-box;
width: 50%;
}
.forum-nav-filter-cohort, .forum-nav-sort {
@include text-align(right);
box-sizing: border-box;
@include text-align(right);
box-sizing: border-box;
}
.forum-nav-filter-cohort {
.discussion-board & {
@include float(right);
@include text-align(right);
width: 50%;
}
.discussion-board & {
@include float(right);
@include text-align(right);
width: 50%;
}
}
.forum-nav-sort {
@include float(right);
@include float(right);
}
%forum-nav-select {
border: none;
max-width: 100%;
background-color: transparent;
border: none;
max-width: 100%;
background-color: transparent;
}
.forum-nav-filter-main-control {
@extend %forum-nav-select;
@extend %forum-nav-select;
}
.forum-nav-filter-cohort-control {
@extend %forum-nav-select;
max-width: 60%;
@extend %forum-nav-select;
max-width: 60%;
}
.forum-nav-sort-control {
@extend %forum-nav-select;
@extend %forum-nav-select;
}
// -----------
// Thread list
// -----------
.forum-nav-thread-list {
padding-left: 0 !important; // should *not* be RTLed, see below for explanation
min-height: 60px; // @TODO: Remove this when we have a real empty state for the discussion thread list
margin: 0;
overflow-y: auto;
list-style: none;
border-radius: 0 0 3px 3px;
padding-left: 0 !important; // should *not* be RTLed, see below for explanation
min-height: 60px; // @TODO: Remove this when we have a real empty state for the discussion thread list
margin: 0;
overflow-y: auto;
list-style: none;
border-radius: 0 0 3px 3px;
.forum-nav-thread-labels {
margin: 5px 0 0;
// Overrides overspecific courseware CSS from:
// https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L470
// note this should *not* be RTLed, as the rule it overrides is not RTLed
padding-left: 0 !important;
}
.thread-preview-body {
margin-top: $baseline / 4;
color: $forum-color-response-count;
font-size: $forum-small-font-size;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include rtl {
// This is counterintuitive, but when showing a preview of the first part of RTL text, using direction: rtl
// will actually show the _last_ part of that text.
direction: ltr;
}
.forum-nav-thread-labels {
margin: 5px 0 0;
// Overrides overspecific courseware CSS from:
// https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L470
// note this should *not* be RTLed, as the rule it overrides is not RTLed
padding-left: 0 !important;
}
.thread-preview-body {
margin-top: $baseline / 4;
color: $forum-color-response-count;
font-size: $forum-small-font-size;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include rtl {
// This is counterintuitive, but when showing a preview of the first part of RTL text, using direction: rtl
// will actually show the _last_ part of that text.
direction: ltr;
}
}
}
// Overrides underspecific styles from courseware css
.course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list {
@include padding-left(0);
list-style: none;
@include padding-left(0);
.forum-nav-thread {
margin: 0;
}
list-style: none;
.forum-nav-thread {
margin: 0;
}
}
.forum-nav-thread {
border-bottom: 1px solid $forum-color-border;
background-color: $forum-color-background;
margin-bottom: 0;
&:last-child {
// Overrides pattern library default li:last-child style
border-bottom: 1px solid $forum-color-border;
background-color: $forum-color-background;
margin-bottom: 0;
}
&:last-child {
// Overrides pattern library default li:last-child style
border-bottom: 1px solid $forum-color-border;
.forum-nav-thread-link {
@include border-left(3px solid transparent);
display: flex;
padding: $baseline / 2;
transition: none;
align-items: center;
justify-content: space-between;
color: $forum-color-read-post;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&:hover {
background-color: $forum-color-hover-thread;
}
&.is-active {
background-color: $forum-color-reading-thread;
}
.forum-nav-thread-unread-comments-count {
display: inline-block;
font-size: $forum-small-font-size;
white-space: nowrap;
}
}
&.never-read {
.forum-nav-thread-link {
@include border-left(3px solid transparent);
display: flex;
padding: $baseline / 2;
transition: none;
align-items: center;
justify-content: space-between;
color: $forum-color-read-post;
@include border-left(3px solid $forum-color-never-read-post);
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&:hover {
background-color: $forum-color-hover-thread;
}
&.is-active {
background-color: $forum-color-reading-thread;
}
.forum-nav-thread-unread-comments-count {
display: inline-block;
font-size: $forum-small-font-size;
white-space: nowrap;
}
}
&.never-read {
.forum-nav-thread-link {
@include border-left(3px solid $forum-color-never-read-post);
color: $forum-color-never-read-post;
}
color: $forum-color-never-read-post;
}
}
}
%forum-nav-thread-wrapper {
display: inline-block;
vertical-align: middle;
display: inline-block;
vertical-align: middle;
}
.forum-nav-thread-wrapper-0 {
@extend %forum-nav-thread-wrapper;
@include margin-right($baseline/5);
align-self: flex-start;
@extend %forum-nav-thread-wrapper;
.icon {
font-size: $forum-base-font-size;
width: 18px;
text-align: center;
@include margin-right($baseline/5);
&:before {
align-self: flex-start;
@include rtl {
@include transform(scale(-1, 1)); // RTL for font awesome question mark
}
}
.icon {
font-size: $forum-base-font-size;
width: 18px;
text-align: center;
&::before {
@include rtl {
@include transform(scale(-1, 1)); // RTL for font awesome question mark
}
}
}
}
.forum-nav-thread-wrapper-1 {
@extend %forum-nav-thread-wrapper;
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
// at the same length whether there are unread comments for this story or not.
max-width: calc(100% - 125px);
flex-grow: 1; // This column should consume all the available space
@extend %forum-nav-thread-wrapper;
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
// at the same length whether there are unread comments for this story or not.
max-width: calc(100% - 125px);
flex-grow: 1; // This column should consume all the available space
}
.forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper;
@include text-align(right);
min-width: 90px;
white-space: nowrap;
@extend %forum-nav-thread-wrapper;
@include text-align(right);
min-width: 90px;
white-space: nowrap;
}
.forum-nav-thread-title {
@include margin-left(0);
font-size: $forum-base-font-size;
display: block;
@include margin-left(0);
font-size: $forum-base-font-size;
display: block;
}
%forum-nav-thread-wrapper-2-content {
@include margin-right($baseline/4);
font-size: $forum-small-font-size;
display: inline-block;
text-align: center;
color: $black;
@include margin-right($baseline/4);
&:last-child {
@include margin-right(0);
}
font-size: $forum-small-font-size;
display: inline-block;
text-align: center;
color: $black;
&:last-child {
@include margin-right(0);
}
}
.forum-nav-thread-votes-count {
@extend %forum-nav-thread-wrapper-2-content;
@extend %forum-nav-thread-wrapper-2-content;
}
.forum-nav-thread-comments-count {
@extend %forum-nav-thread-wrapper-2-content;
@extend %t-weight4;
position: relative;
@include margin-left($baseline/4);
margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: $forum-border-radius;
padding: ($baseline/10) ($baseline/5);
min-width: 2em; // Fit most comment counts but allow expansion if necessary
background-color: $gray-l4;
@extend %forum-nav-thread-wrapper-2-content;
@extend %t-weight4;
// Speech bubble tail
&:after {
content: '';
display: block;
position: absolute;
bottom: (-$baseline/4);
@include right($baseline/4);
width: 0;
height: 0;
border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $gray-l4, transparent, transparent);
}
position: relative;
@include margin-left($baseline/4);
margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: $forum-border-radius;
padding: ($baseline/10) ($baseline/5);
min-width: 2em; // Fit most comment counts but allow expansion if necessary
background-color: $gray-l4;
// Speech bubble tail
&::after {
content: '';
display: block;
position: absolute;
bottom: (-$baseline/4);
@include right($baseline/4);
width: 0;
height: 0;
border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $gray-l4, transparent, transparent);
}
}
.forum-nav-load-more {
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
}
%forum-nav-load-more-content {
display: block;
padding: $baseline 0;
text-align: center;
display: block;
padding: $baseline 0;
text-align: center;
}
.forum-nav-load-more-link {
@extend %forum-nav-load-more-content;
color: $link-color;
width: 100%;
@extend %forum-nav-load-more-content;
&:hover,
&:focus {
color: $forum-color-active-text;
// !important overrides the one set here:
// https://github.com/edx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472
background-color: $forum-color-active-thread !important;
}
color: $link-color;
width: 100%;
&:hover,
&:focus {
color: $forum-color-active-text;
// !important overrides the one set here:
// https://github.com/edx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472
background-color: $forum-color-active-thread !important;
}
}
.forum-nav-loading {
@extend %forum-nav-load-more-content;
@extend %forum-nav-load-more-content;
}

1
lms/static/sass/discussion/lms-discussion-main-rtl.scss
View File

@@ -6,6 +6,7 @@
// Load the RTL version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
// Configure RTL variables

1
lms/static/sass/discussion/lms-discussion-main.scss
View File

@@ -6,6 +6,7 @@
// Load the LTR version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
// Configure LTR variables

6
lms/static/sass/discussion/utilities/_developer.scss
View File

@@ -28,6 +28,7 @@
// a single alert, which can be independently displayed / dismissed
.search-alert {
@include transition(none);
padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black;
}
@@ -48,6 +49,7 @@
em {
@extend %t-weight5;
font-style: italic;
}
}
@@ -55,6 +57,7 @@
// links to jump to users/content in alerts
.link-jump {
@include transition(none);
@extend %t-weight5;
}
}
@@ -62,11 +65,14 @@
// alert controls
.search-alert-controls {
@include text-align(right);
width: 28%;
.control {
@include transition(none);
@extend %t-weight5;
padding: ($baseline/4) ($baseline/2);
color: $white;
font-size: $forum-base-font-size;

4
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -30,6 +30,7 @@
.forum-nav-browse-filter-input {
@include padding-left($baseline/4);
@include padding-right($baseline/2 + 12px); // Leave room for icon
box-shadow: none !important;
border-radius: $forum-border-radius !important;
height: auto !important;
@@ -75,7 +76,7 @@ li[class*=forum-nav-thread-label-] {
}
// Override clearfix stuff in .sidebar ul li rules
&:before, &:after {
&::before, &::after {
display: none !important;
}
}
@@ -101,7 +102,6 @@ li[class*=forum-nav-thread-label-] {
// Inline Discussion Module Overrides
// -------
.discussion-module {
.post-header {
margin-bottom: 0 !important; // overrides default header styling
padding-bottom: 0 !important; // overrides default header styling

45
lms/static/sass/discussion/utilities/_v1-compatibility.scss
View File

@@ -9,18 +9,18 @@
}
%text-sr {
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
}
// extends - UI - depth levels
@@ -33,22 +33,27 @@
// weights
%t-ultrastrong {
font-weight: 700;
font-weight: 700;
}
%t-strong {
font-weight: 600;
font-weight: 600;
}
%t-demi-strong {
font-weight: 500;
font-weight: 500;
}
%t-regular {
font-weight: 400;
font-weight: 400;
}
%t-light {
font-weight: 300;
font-weight: 300;
}
%t-ultralight {
font-weight: 200;
font-weight: 200;
}
// copy
@@ -58,13 +63,17 @@
%t-copy-sub1 {
@extend %t-copy;
@include line-height(14);
font-size: $forum-base-font-size;
}
%t-copy-sub2 {
@extend %t-copy;
@include line-height(12);
font-size: $forum-small-font-size;
}

84
lms/static/sass/discussion/views/_create-edit-post.scss
View File

@@ -5,6 +5,7 @@
.forum-new-post-form,
.edit-post-form {
@include clearfix();
box-sizing: border-box;
margin: 0;
border-radius: $forum-border-radius;
@@ -38,6 +39,7 @@
.field-input {
display: inline-block;
vertical-align: top;
&:not([type="text"]) {
border-width: 0;
padding: 0;
@@ -69,7 +71,7 @@
}
&#new-post-editor-description {
@include padding-left(0);
@include padding-left(0);
}
}
@@ -93,45 +95,47 @@
}
.edit-post-form {
@include clearfix();
@include clearfix();
box-sizing: border-box;
width: 100%;
padding-top: 0;
h1 {
font-size: $forum-large-font-size;
}
.form-row {
margin-top: $baseline;
}
.post-cancel {
@include float(left);
@include margin($baseline/2, 0, 0, $baseline*0.75);
}
.post-update {
@include float(left);
margin-top: ($baseline/2);
&:hover, &:focus {
border-color: #222;
}
}
.edit-post-title {
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 ($baseline/2);
width: 100%;
padding-top: 0;
h1 {
font-size: $forum-large-font-size;
}
.form-row {
margin-top: $baseline;
}
.post-cancel {
@include float(left);
@include margin($baseline/2, 0, 0, $baseline*0.75);
}
.post-update {
@include float(left);
margin-top: ($baseline/2);
&:hover, &:focus {
border-color: #222;
}
}
.edit-post-title {
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 ($baseline/2);
width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
color: $dark-gray;
font-size: $forum-large-font-size;
font-family: $sans-serif;
}
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
color: $dark-gray;
font-size: $forum-large-font-size;
font-family: $sans-serif;
}
}
// CASE: inline styling
@@ -144,9 +148,9 @@
// UI: inputs
.forum-new-post-form,
.edit-post-form {
.post-type-label {
@include margin-right($baseline);
color: $gray-d3;
}
@@ -170,7 +174,9 @@
.post-option {
box-sizing: border-box;
display: inline-block;
@include margin-right($baseline);
border-radius: $forum-border-radius;
padding: ($baseline/2);
cursor: pointer;

11
lms/static/sass/discussion/views/_home.scss
View File

@@ -11,6 +11,7 @@
.label {
@extend %t-copy-sub2;
display: block;
}
@@ -28,10 +29,13 @@
color: $black;
margin-bottom: ($baseline/4);
}
.home-description {
@extend %t-copy-sub2;
margin-bottom: ($baseline/2);
}
.home-stats {
padding: $baseline 0;
@@ -48,11 +52,13 @@
.stats-grouping {
@include padding-left($baseline);
display: inline-block;
width: 70%;
.profile-stat {
@extend %t-copy-sub2;
display: inline-block;
width: 32.5%;
vertical-align: middle;
@@ -113,11 +119,13 @@
}
.row-item-full {
.notification-checkbox {
@include margin-right($baseline/2);
display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0);
border-radius: $forum-border-radius;
border: 1px solid gray;
@@ -125,6 +133,7 @@
display: inline-block;
text-align: center;
vertical-align: middle;
@include margin-left($baseline/2);
}

83
lms/static/sass/discussion/views/_inline.scss
View File

@@ -4,53 +4,54 @@
@import '../../edx-pattern-library-shims/form';
.discussion.inline-discussion {
.inline-threads {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
.inline-threads {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
}
.inline-thread {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
.forum-nav-bar {
padding: ($baseline / 2) ($baseline / 4);
color: $forum-color-navigation-bar;
position: relative;
.all-posts-btn {
color: $forum-color-primary;
.icon {
@include margin-left($baseline / 2);
}
}
}
.inline-thread {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
.forum-nav-bar {
padding: ($baseline / 2) ($baseline / 4);
color: $forum-color-navigation-bar;
position: relative;
.all-posts-btn {
color: $forum-color-primary;
.icon {
@include margin-left($baseline / 2);
}
}
}
.forum-content {
padding: $baseline / 2;
overflow-y: auto;
}
.forum-content {
padding: $baseline / 2;
overflow-y: auto;
}
}
.new-post-article {
position: relative;
border: 1px solid $forum-color-border;
.new-post-article {
position: relative;
border: 1px solid $forum-color-border;
.add-post-cancel {
@include right($baseline / 2);
top: $baseline / 2;
position: absolute;
color: $uxpl-primary-blue;
.add-post-cancel {
@include right($baseline / 2);
&:hover,
&:focus {
border-color: transparent;
box-shadow: none;
background-color: transparent;
background-image: none;
}
}
top: $baseline / 2;
position: absolute;
color: $uxpl-primary-blue;
&:hover,
&:focus {
border-color: transparent;
box-shadow: none;
background-color: transparent;
background-image: none;
}
}
}
}

15
lms/static/sass/discussion/views/_response.scss
View File

@@ -21,6 +21,7 @@
// wrapper - response plus comment area
.forum-response {
@include animation(fadeIn .3s);
position: relative;
margin: $baseline 0;
border: 1px solid $forum-color-border;
@@ -31,7 +32,9 @@
// wrapper - main response area
.discussion-response {
box-sizing: border-box;
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
padding: $baseline;
background-color: $forum-color-background;
}
@@ -48,6 +51,7 @@
// CASE: larger username for responses
.username {
@extend %t-weight5;
font-size: $forum-base-font-size;
}
}
@@ -96,6 +100,7 @@
.staff-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include left(0);
position: absolute;
top: 0;
width: 100%;
@@ -109,9 +114,10 @@
}
// CASE: banner - community TA response
.community-ta-banner{
.community-ta-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include left(0);
position: absolute;
top: 0;
width: 100%;
@@ -137,7 +143,9 @@
// +comments styling
.discussion .comments {
@extend %ui-no-list;
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
background: $gray-l6;
box-shadow: 0 1px 3px -1px $shadow inset;
@@ -156,6 +164,7 @@
.comment-form {
@include clearfix();
padding: ($baseline/2) 0;
.comment-form-input {
@@ -166,11 +175,13 @@
.discussion-submit-comment {
@include float(left);
margin-top: 8px;
}
.wmd-input {
@include transition(all .2s linear 0s);
height: 40px;
}
@@ -183,6 +194,7 @@
.response-count {
@include float(right);
@include margin-right($baseline / 2);
color: $forum-color-response-count;
font-size: $forum-base-font-size;
}
@@ -204,6 +216,7 @@
.load-response-button {
@include text-align(left);
position: relative;
margin: ($baseline/2) 0;
width: 100%;

11
lms/static/sass/discussion/views/_search.scss
View File

@@ -1,8 +1,9 @@
.forum-search {
@include margin-left($baseline);
display: inline-block;
@include margin-left($baseline);
.search-input {
width: input-width(short);
}
display: inline-block;
.search-input {
width: input-width(short);
}
}

410
lms/static/sass/discussion/views/_thread.scss
View File

@@ -11,272 +11,288 @@
// post layout
.discussion-post {
padding: 0 ($baseline/2);
padding: 0 ($baseline/2);
.post-header-actions {
@include float(right);
}
.post-header-actions {
@include float(right);
}
}
// post article
.discussion-article {
.posted-details {
@extend %t-copy-sub2;
@extend %t-light;
margin: ($baseline/5) 0;
color: $forum-color-copy-light;
.posted-details {
@extend %t-copy-sub2;
@extend %t-light;
.username {
@extend %t-strong;
display: inline;
}
margin: ($baseline/5) 0;
color: $forum-color-copy-light;
.timeago, .top-post-status {
color: inherit;
}
.username {
@extend %t-strong;
display: inline;
}
.timeago, .top-post-status {
color: inherit;
}
}
}
.thread-title {
display: block;
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
color: $gray-d3;
font-weight: 600;
display: block;
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
color: $gray-d3;
font-weight: 600;
}
.thread-responses-wrapper,
.post-extended-content {
padding: 0 ($baseline/2);
padding: 0 ($baseline/2);
}
// response layout
.discussion-response {
min-height: ($baseline*5);
min-height: ($baseline*5);
.response-header-content {
display: inline-block;
vertical-align: top;
width: flex-grid(11,12);
}
.response-header-content {
display: inline-block;
vertical-align: top;
width: flex-grid(11,12);
}
.response-header-actions {
@include float(right);
@include right($baseline);
position: absolute;
top: ($baseline/2);
}
.response-header-actions {
@include float(right);
@include right($baseline);
// response body
.response-body {
@extend %t-copy-sub1;
}
position: absolute;
top: ($baseline/2);
}
// response body
.response-body {
@extend %t-copy-sub1;
}
}
// comments layout
.discussion-comment {
.response-body {
@extend %t-copy-sub2;
.response-body {
@extend %t-copy-sub2;
display: inline-block;
margin-bottom: ($baseline/2);
width: flex-grid(10,12);
display: inline-block;
margin-bottom: ($baseline/2);
width: flex-grid(10,12);
p + p {
margin-top: ($baseline/2);
}
p + p {
margin-top: ($baseline/2);
}
}
.comment-actions-list {
@include float(right);
@include right($baseline / 2);
position: absolute;
top: $baseline / 2;
}
.comment-actions-list {
@include float(right);
@include right($baseline / 2);
position: absolute;
top: $baseline / 2;
}
}
// +thread - wrapper styling
.thread-wrapper {
.response-btn-count-wrapper {
margin: $baseline 0;
}
.response-btn-count-wrapper {
margin: $baseline 0;
}
}
// +thread - elements - shared styles
.discussion-post, .discussion-response, .discussion-comment {
@include clearfix();
@include clearfix();
// thread - images
.author-image {
@include margin-right($baseline/2);
display: inline-block;
vertical-align: top;
// thread - images
.author-image {
@include margin-right($baseline/2);
// STATE: No profile image
&:empty {
display: none;
}
display: inline-block;
vertical-align: top;
// CASE: post image
&.level-post {
height: $post-image-dimension;
width: $post-image-dimension;
}
// CASE: response image
&.level-response {
height: $response-image-dimension;
width: $response-image-dimension;
}
// CASE: comment image
&.level-comment {
height: $comment-image-dimension;
width: $comment-image-dimension;
}
img {
border-radius: $forum-border-radius;
}
// STATE: No profile image
&:empty {
display: none;
}
// CASE: post image
&.level-post {
height: $post-image-dimension;
width: $post-image-dimension;
}
// CASE: response image
&.level-response {
height: $response-image-dimension;
width: $response-image-dimension;
}
// CASE: comment image
&.level-comment {
height: $comment-image-dimension;
width: $comment-image-dimension;
}
img {
border-radius: $forum-border-radius;
}
}
}
.discussion-response .response-body {
@include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions.
margin-bottom: 0.2em;
font-size: $forum-base-font-size;
@include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions.
margin-bottom: 0.2em;
font-size: $forum-base-font-size;
}
// +post - individual element styling
.discussion-post {
@include clearfix();
@include clearfix();
.post-header-content {
max-width: calc(100% - #{$actions-dropdown-offset});
.post-header-content {
max-width: calc(100% - #{$actions-dropdown-offset});
// post title
.post-title {
font-size: $forum-x-large-font-size;
margin-bottom: ($baseline/4);
}
// post title
.post-title {
font-size: $forum-x-large-font-size;
margin-bottom: ($baseline/4);
}
}
// post body
.post-body {
@extend %t-copy-sub1;
padding: ($baseline/2) 0;
max-width: calc(100% - #{$actions-dropdown-offset});
}
// post context
.post-context {
@extend %t-copy-sub2;
@extend %t-light;
color: $forum-color-copy-light;
// CASE: no courseware context or cohort visibility rules
&:empty {
display: none;
}
// post body
.post-body {
@extend %t-copy-sub1;
padding: ($baseline/2) 0;
max-width: calc(100% - #{$actions-dropdown-offset});
}
// post context
.post-context {
@extend %t-copy-sub2;
@extend %t-light;
color: $forum-color-copy-light;
// CASE: no courseware context or cohort visibility rules
&:empty {
display: none;
}
}
}
// Styling for discussion threads
.discussion-thread {
padding: 0;
margin-bottom: $baseline;
@include transition(all .25s linear 0s);
padding: 0;
margin-bottom: $baseline;
p {
margin-bottom: 0;
@include transition(all .25s linear 0s);
p {
margin-bottom: 0;
}
.discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
min-height: 0;
background: $forum-color-background;
box-shadow: 0 1px 0 $shadow;
@include transition(all .2s linear 0s);
.thread-wrapper {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
background-color: $forum-color-background;
.discussion-post {
.inline-comment-count {
@include margin-right($baseline/2);
@extend %ui-depth2;
@include float(right);
position: relative;
display: block;
height: 27px;
margin-top: 6px;
padding: 0 8px;
border-radius: $forum-border-radius;
font-size: $forum-small-font-size;
font-weight: 400;
line-height: 25px;
color: #888;
}
}
.responses {
header {
padding-bottom: 0;
margin-bottom: ($baseline*0.75);
.posted-by {
@include margin-right($baseline/4);
@include float(left);
font-size: $forum-large-font-size;
}
}
}
.discussion-reply-new {
.wmd-input {
height: 120px;
}
}
// Content that is hidden by default in the inline view
.post-extended-content {
display: none;
}
}
.discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
min-height: 0;
background: $forum-color-background;
box-shadow: 0 1px 0 $shadow;
@include transition(all .2s linear 0s);
.post-tools {
box-shadow: 0 1px 1px $shadow inset;
background: $white;
.thread-wrapper {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
background-color: $forum-color-background;
&:hover {
background: $forum-color-hover-thread;
.discussion-post {
.inline-comment-count {
@include margin-right($baseline/2);
@extend %ui-depth2;
@include float(right);
position: relative;
display: block;
height: 27px;
margin-top: 6px;
padding: 0 8px;
border-radius: $forum-border-radius;
font-size: $forum-small-font-size;
font-weight: 400;
line-height: 25px;
color: #888;
}
}
.responses {
header {
padding-bottom: 0;
margin-bottom: ($baseline*0.75);
.posted-by {
@include margin-right($baseline/4);
@include float(left);
font-size: $forum-large-font-size;
}
}
}
.discussion-reply-new {
.wmd-input {
height: 120px;
}
}
// Content that is hidden by default in the inline view
.post-extended-content {
display: none;
}
.icon {
color: $link-hover;
}
}
.post-tools {
box-shadow: 0 1px 1px $shadow inset;
background: $white;
.btn-link {
display: block;
padding: ($baseline*0.25) $baseline;
font-size: $forum-small-font-size;
line-height: 30px;
&:hover {
background: $forum-color-hover-thread;
.icon {
@include margin-right($baseline*0.25);
.icon {
color: $link-hover;
}
}
.btn-link {
display: block;
padding: ($baseline*0.25) $baseline;
font-size: $forum-small-font-size;
line-height: 30px;
.icon {
@include margin-right($baseline*0.25);
color: $link-color;
}
}
color: $link-color;
}
}
}
}
}
.thread-wrapper,

223
lms/static/sass/elements-v2/_pagination.scss
View File

@@ -1,134 +1,139 @@
// Copied from elements/_pagination.scss
.pagination {
@include clearfix();
@include clearfix();
display: inline-block;
width: flex-grid(3, 12);
&.pagination-compact {
@include text-align(right);
}
&.pagination-full {
display: block;
width: flex-grid(4, 12);
margin: $baseline auto;
}
.nav-item {
position: relative;
display: inline-block;
width: flex-grid(3, 12);
vertical-align: middle;
}
&.pagination-compact {
@include text-align(right);
.nav-link {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
border: 0;
background-image: none;
background-color: transparent;
padding: ($baseline/2) ($baseline*0.75);
&.previous {
margin-right: ($baseline/2);
}
&.pagination-full {
display: block;
width: flex-grid(4, 12);
margin: $baseline auto;
&.next {
margin-left: ($baseline/2);
}
.nav-item {
position: relative;
display: inline-block;
vertical-align: middle;
&:hover {
background-color: $lms-active-color;
background-image: none;
border-radius: 3px;
color: $white;
}
.nav-link {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
border: 0;
background-image: none;
background-color: transparent;
padding: ($baseline/2) ($baseline*0.75);
&.is-disabled {
background-color: transparent;
color: $lms-gray;
pointer-events: none;
}
}
&.previous {
margin-right: ($baseline/2);
}
.nav-label {
@extend .sr-only;
}
&.next {
margin-left: ($baseline/2);
}
.pagination-form,
.current-page,
.page-divider,
.total-pages {
display: inline-block;
}
&:hover {
background-color: $lms-active-color;
background-image: none;
border-radius: 3px;
color: $white;
}
.current-page,
.page-number-input,
.total-pages {
width: ($baseline*2.5);
vertical-align: middle;
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $lms-gray;
}
&.is-disabled {
background-color: transparent;
color: $lms-gray;
pointer-events: none;
}
.current-page {
position: absolute;
@include left(-($baseline/4));
}
.page-divider {
vertical-align: middle;
color: $lms-gray;
}
.pagination-form {
position: relative;
z-index: 100;
.page-number-label,
.submit-pagination-form {
@extend .sr-only;
}
.nav-label {
@extend .sr-only;
}
.pagination-form,
.current-page,
.page-divider,
.total-pages {
display: inline-block;
}
.current-page,
.page-number-input,
.total-pages {
width: ($baseline*2.5);
vertical-align: middle;
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $lms-gray;
}
.current-page {
position: absolute;
@include left(-($baseline/4));
}
.page-divider {
vertical-align: middle;
color: $lms-gray;
}
.pagination-form {
position: relative;
z-index: 100;
.page-number-label,
.submit-pagination-form {
@extend .sr-only;
}
.page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent;
border-bottom: 1px dotted $lms-gray;
border-radius: 0;
box-shadow: none;
background: none;
&:hover {
background-color: $white;
opacity: 0.6;
}
&:focus {
// borrowing the base input focus styles to match overall app
@include linear-gradient($yellow-l4, tint($yellow-l4, 90%));
opacity: 1.0;
box-shadow: 0 0 3px $black inset;
background-color: $white;
border: 1px solid transparent;
border-radius: 3px;
}
}
.page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent;
border-bottom: 1px dotted $lms-gray;
border-radius: 0;
box-shadow: none;
background: none;
&:hover {
background-color: $white;
opacity: 0.6;
}
&:focus {
// borrowing the base input focus styles to match overall app
@include linear-gradient($yellow-l4, tint($yellow-l4, 90%));
opacity: 1;
box-shadow: 0 0 3px $black inset;
background-color: $white;
border: 1px solid transparent;
border-radius: 3px;
}
}
}
}
// styles for search/pagination metadata and sorting
.listing-tools {
color: $lms-gray;
color: $lms-gray;
label { // override
color: inherit;
font-size: inherit;
cursor: auto;
}
label { // override
color: inherit;
font-size: inherit;
cursor: auto;
}
.listing-sort-select {
border: 0;
}
.listing-sort-select {
border: 0;
}
}

175
lms/static/sass/elements/_controls.scss
View File

@@ -4,6 +4,7 @@
%btn {
@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);
display: inline-block;
cursor: pointer;
text-decoration: none;
@@ -34,6 +35,7 @@
%btn-inherited {
@include transition(background-color 0.15s, box-shadow 0.15s);
border-radius: 3px;
box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0);
padding: ($baseline/2) $baseline;
@@ -49,7 +51,9 @@
%btn-inherited-primary {
@extend %btn-inherited;
@include linear-gradient(top, rgba($white, .3), rgba($white, 0));
border: 1px solid shade($action-primary-bg, 10%);
background-color: $action-primary-bg;
color: $action-primary-fg;
@@ -73,6 +77,7 @@
@extend %t-weight3;
@extend %btn;
@extend %btn-edged;
border: none;
padding: ($baseline*0.75) $baseline;
text-align: center;
@@ -83,7 +88,6 @@
}
&.current, &.active {
&:hover, &:active, &:focus {
}
@@ -98,6 +102,7 @@
// blue primary gray
%btn-primary-gray {
@extend %btn-primary;
box-shadow: 0 2px 1px 0 $m-gray-d2;
background: $m-gray;
color: $white;
@@ -126,6 +131,7 @@
// blue primary error color
%btn-primary-error {
@extend %btn-primary;
box-shadow: 0 2px 1px 0 shade($error-color, 25%);
background: shade($error-color, 25%);
color: $white;
@@ -143,6 +149,7 @@
// blue primary button
%btn-primary-blue {
@extend %btn-primary;
background: $m-blue-d3;
color: $white;
@@ -168,6 +175,7 @@
// pink primary button
%btn-primary-pink {
@extend %btn-primary;
box-shadow: 0 2px 1px 0 $m-pink-d2;
background: $m-pink;
color: $white;
@@ -196,6 +204,7 @@
// green primary button
%btn-primary-green {
@extend %btn-primary;
box-shadow: 0 2px 1px 0 $m-green-d2;
background: $m-green-d1;
color: $white;
@@ -240,6 +249,7 @@
@extend %t-action2;
@extend %btn;
@extend %btn-edged;
box-shadow: none;
border: 1px solid $m-blue-d3;
padding: ($baseline/2) $baseline;
@@ -271,6 +281,7 @@
// grey secondary button outline style
%btn-secondary-grey-outline {
@extend %btn-secondary-blue-outline;
border: 1px solid $gray-l4;
&:hover, &:active, &:focus {
@@ -287,9 +298,13 @@
// starts with overrides
%btn-pl-default-base {
@include box-sizing(border-box);
@extend %t-copy-base;
letter-spacing: 0; // reset letterspacing from elsewhere
@extend %btn-primary;
border: 1px solid darken($action-primary-bg,10%);
border-radius: 3px;
padding: 8px $baseline;
@@ -308,18 +323,21 @@
%btn-pl-primary-base {
@extend %btn-pl-default-base;
background-color: darken($action-primary-bg,10%);
color: $action-primary-fg;
}
%btn-pl-white-base{
@extend %btn-pl-default-base;
background-color: $action-primary-fg;
color: $action-primary-bg;
}
%btn-pl-green-base {
@extend %btn-pl-default-base;
background-color: darken($green-d1,10%);
color: $action-primary-fg;
@@ -332,6 +350,7 @@
%btn-pl-yellow-base {
@extend %btn-pl-default-base;
border: 1px solid transparent;
background-color: $credit-color-base;
color: $base-font-color;
@@ -345,6 +364,7 @@
%btn-pl-black-border {
@extend %btn-pl-default-base;
border: 1px solid $m-gray-d4;
background-color: transparent;
color: $base-font-color;
@@ -358,6 +378,7 @@
%btn-pl-black-base {
@extend %btn-pl-default-base;
border: 1px solid transparent;
background-color: $m-gray-d4;
color: $very-light-text;
@@ -372,7 +393,9 @@
%btn-pl-secondary-base {
@extend %btn-pl-default-base;
@include transition(border $tmg-f2 ease-in-out);
border: 1px solid transparent;
color: $action-primary-bg;
@@ -385,6 +408,7 @@
%btn-pl-elevated-alt {
@extend %btn-pl-default-base;
box-shadow: 0 3px 0 0 $gray-l4;
border: 1px solid $gray-l4;
@@ -398,93 +422,96 @@
// ====================
// application: canned actions
.btn {
font-family: $f-sans-serif;
// application: canned actions
.btn {
font-family: $f-sans-serif;
}
.btn-large {
@extend %t-action1;
@extend %t-weight3;
display: block;
padding:($baseline*0.75) ($baseline*1.5);
}
.btn-avg {
@extend %t-action2;
@extend %t-weight3;
}
.btn-blue {
@extend %btn-primary-blue;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
.btn-large {
@extend %t-action1;
@extend %t-weight3;
display: block;
padding:($baseline*0.75) ($baseline*1.5);
.btn-pink {
@extend %btn-primary-pink;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
.btn-avg {
@extend %t-action2;
@extend %t-weight3;
}
.btn-blue {
@extend %btn-primary-blue;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
.btn-pink {
@extend %btn-primary-pink;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
.btn-secondary {
@extend %btn-pl-secondary-base;
background-image: none;
&:focus,
&:hover {
background-image: none !important;
background-color: transparent !important;
color: $link-color;
}
.btn-secondary {
@extend %btn-pl-secondary-base;
background-image: none;
&:focus,
&:hover {
background-image: none !important;
background-color: transparent !important;
color: $link-color;
}
}
.btn-link {
@extend %shame-link-text;
@extend %shame-link-text;
// reset of inherited buttons
border-radius: 0;
border-color: $transparent;
padding: 1px;
background: $transparent;
background-image: none;
box-shadow: none;
text-shadow: none;
white-space: nowrap;
// reset of inherited buttons
border-radius: 0;
border-color: $transparent;
padding: 1px;
background: $transparent;
background-image: none;
box-shadow: none;
text-shadow: none;
white-space: nowrap;
@extend %t-action3;
@extend %t-strong;
@extend %t-action3;
@extend %t-strong;
&:focus,
&:hover {
background-image: none !important;
background-color: $transparent !important;
box-shadow: none !important;
}
&:focus,
&:hover {
background-image: none !important;
background-color: $transparent !important;
box-shadow: none !important;
}
}
// enlarge the clickable area of a control.
%expand-clickable-area {
position: relative;
position: relative;
&, &:link, &:visited, &:hover, &:active, &:focus {
&:after {
content: " ";
position: absolute;
left: 0;
top: calc( 50% - #{($baseline * 1.1)});
min-height: ($baseline * 2.2);
width: 100%;
cursor: pointer;
}
&, &:link, &:visited, &:hover, &:active, &:focus {
&::after {
content: " ";
position: absolute;
left: 0;
top: calc(50% - #{($baseline * 1.1)});
min-height: ($baseline * 2.2);
width: 100%;
cursor: pointer;
}
}
}

16
lms/static/sass/elements/_course-card.scss
View File

@@ -7,10 +7,12 @@
right: auto;
bottom: $baseline;
}
padding: $baseline/2 0;
.section {
@extend .grid-manual;
padding: $baseline/2 $baseline;
}
@@ -19,7 +21,8 @@
.header-img {
max-width: 100%;
@media(min-width: $bp-screen-sm) {
@media (min-width: $bp-screen-sm) {
max-width: 191px;
}
}
@@ -27,8 +30,11 @@
.course-details {
@include float(right);
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;
.course-title {
@@ -47,7 +53,6 @@
}
.course-actions {
.enrollment-info {
width: $baseline*10;
text-align: center;
@@ -78,6 +83,7 @@
.enrollment-opens {
text-align: center;
margin-bottom: $baseline/2;
.enrollment-open-date {
white-space: nowrap;
}
@@ -135,7 +141,7 @@
.message {
margin-bottom: $baseline;
@media(min-width: $bp-screen-md) {
@media (min-width: $bp-screen-md) {
margin-bottom: 0;
}
}
@@ -145,7 +151,7 @@
border-top: 1px solid palette(grayscale, back);
padding-top: $baseline;
@media(min-width: $bp-screen-md) {
@media (min-width: $bp-screen-md) {
display: flex;
align-items: center;
}

30
lms/static/sass/elements/_creative-commons.scss
View File

@@ -2,25 +2,25 @@
font-family: 'CreativeCommons';
src: url('#{$static-path}/fonts/CreativeCommons/cc.eot');
src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-cc"]:before, [class*=" icon-cc"]:before {
[class^="icon-cc"]::before, [class*=" icon-cc"]::before {
font-family: "CreativeCommons";
}
.icon-cc:before { content: '\e800'; } /* '' */
.icon-cc-by:before { content: '\e801'; } /* '' */
.icon-cc-nc:before { content: '\e802'; } /* '' */
.icon-cc-nc-eu:before { content: '\e803'; } /* '' */
.icon-cc-nc-jp:before { content: '\e804'; } /* '' */
.icon-cc-sa:before { content: '\e805'; } /* '' */
.icon-cc-nd:before { content: '\e806'; } /* '' */
.icon-cc-pd:before { content: '\e807'; } /* '' */
.icon-cc-zero:before { content: '\e808'; } /* '' */
.icon-cc-share:before { content: '\e809'; } /* '' */
.icon-cc-remix:before { content: '\e80a'; } /* '' */
.icon-cc::before { content: '\e800'; } /* '' */
.icon-cc-by::before { content: '\e801'; } /* '' */
.icon-cc-nc::before { content: '\e802'; } /* '' */
.icon-cc-nc-eu::before { content: '\e803'; } /* '' */
.icon-cc-nc-jp::before { content: '\e804'; } /* '' */
.icon-cc-sa::before { content: '\e805'; } /* '' */
.icon-cc-nd::before { content: '\e806'; } /* '' */
.icon-cc-pd::before { content: '\e807'; } /* '' */
.icon-cc-zero::before { content: '\e808'; } /* '' */
.icon-cc-share::before { content: '\e809'; } /* '' */
.icon-cc-remix::before { content: '\e80a'; } /* '' */

23
lms/static/sass/elements/_navigation.scss
View File

@@ -29,19 +29,23 @@
// --------------------
.nav-utilities {
@extend %ui-depth3;
position: fixed;
right: ($baseline/4);
bottom: 0;
.wrapper-utility {
@extend %wipe-last-child;
display: inline-block;
vertical-align: bottom;
@include margin-right(6px);
}
.utility-control {
@include transition(background-color $tmg-f2 ease-in-out 0s, color $tmg-f2 ease-in-out 0s);
position: relative;
bottom: -($baseline/5);
display: inline-block;
@@ -93,9 +97,12 @@
.action-toggle-message {
@extend %t-title8;
@extend %t-strong;
position: absolute;
bottom: 0;
@include right($baseline*2.5);
display: inline-block;
min-width: ($baseline*5);
padding: ($baseline/2) ($baseline*0.75);
@@ -133,6 +140,7 @@
.nav-item {
@extend %button-reset;
display: inline-block;
padding: ($baseline*.75);
color: $gray-d2;
@@ -154,18 +162,15 @@
// +tabs - styles for tabs and tabpanels (teams and learner profile, currently)
// --------------------
.page-content-nav {
.tab {
.tab {
}
}
}
.page-content-main {
.tabs {
.tabpanel {
outline: none;
}
.tabs {
.tabpanel {
outline: none;
}
}
}

13
lms/static/sass/elements/_pagination.scss
View File

@@ -4,6 +4,7 @@
.pagination {
@include clearfix();
display: inline-block;
width: flex-grid(3, 12);
@@ -25,6 +26,7 @@
.nav-link {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
border: 0;
background-image: none;
@@ -69,6 +71,7 @@
.total-pages {
@extend %t-copy-base;
@extend %t-strong;
width: ($baseline*2.5);
vertical-align: middle;
margin: 0 ($baseline*0.75);
@@ -79,19 +82,23 @@
.current-page {
@extend %ui-depth1;
position: absolute;
@include left(-($baseline/4));
}
.page-divider {
@extend %t-title4;
@extend %t-regular;
vertical-align: middle;
color: $gray-l2;
}
.pagination-form {
@extend %ui-depth2;
position: relative;
.page-number-label,
@@ -101,6 +108,7 @@
.page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent;
border-bottom: 1px dotted $gray-l2;
border-radius: 0;
@@ -115,7 +123,8 @@
&:focus {
// borrowing the base input focus styles to match overall app
@include linear-gradient($yellow-l4, tint($yellow-l4, 90%));
opacity: 1.0;
opacity: 1;
box-shadow: 0 0 3px $shadow-d1 inset;
background-color: $white;
border: 1px solid transparent;
@@ -128,6 +137,7 @@
// styles for search/pagination metadata and sorting
.listing-tools {
@extend %t-copy-sub1;
color: $gray-d1;
label { // override
@@ -139,6 +149,7 @@
.listing-sort-select {
@extend %t-copy-sub1;
@extend %t-regular;
border: 0;
}
}

29
lms/static/sass/elements/_program-card.scss
View File

@@ -1,5 +1,6 @@
%hide-until-focus {
@include left(0);
display: inline-block;
position: absolute;
top: -999999px;
@@ -8,17 +9,19 @@
.program-card {
@include span(12);
border: 1px solid $border-color-l3;
border-bottom: none;
margin-bottom: $baseline;
position: relative;
@media(min-width: $bp-screen-md) {
@media (min-width: $bp-screen-md) {
@include span(6);
&:nth-child(2n) {
@include span(6, before);
}
&:nth-child(2n+1) {
@include span(6, after);
}
@@ -27,6 +30,7 @@
.card-link {
@include left(0);
@include right(0);
position: absolute;
top: 0;
bottom: 0;
@@ -45,12 +49,15 @@
overflow: hidden;
height: 166px;
@media(min-width: $bp-screen-sm) { height: 242px; }
@media(min-width: $bp-screen-md) { height: 116px; }
@media(min-width: $bp-screen-lg) { height: 145px; }
@media (min-width: $bp-screen-sm) { height: 242px; }
@media (min-width: $bp-screen-md) { height: 116px; }
@media (min-width: $bp-screen-lg) { height: 145px; }
.banner-image {
@include left(50%);
position: absolute;
top: 0;
z-index: 0;
@@ -65,9 +72,11 @@
position: relative;
margin-top: 156px;
@media(min-width: $bp-screen-sm) { margin-top: 232px; }
@media(min-width: $bp-screen-md) { margin-top: 106px; }
@media(min-width: $bp-screen-lg) { margin-top: 135px; }
@media (min-width: $bp-screen-sm) { margin-top: 232px; }
@media (min-width: $bp-screen-md) { margin-top: 106px; }
@media (min-width: $bp-screen-lg) { margin-top: 135px; }
}
.meta-info {
@@ -80,6 +89,7 @@
.organization {
@include span(6, none);
white-space: nowrap;
overflow: hidden;
}
@@ -95,6 +105,7 @@
.category-icon {
@include float(right);
@include margin-right($baseline*0.25);
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7);
@@ -121,6 +132,7 @@
right: 5px;
bottom: 8px;
}
margin-top: -8px;
font-size: 1em;
font-family: $f-sans-serif;
@@ -169,12 +181,15 @@
&.completed {
background: $blue;
}
&.enrolled {
background: $green;
}
&.not-enrolled {
background: lightgray;
}
&.not-enrolled:last-of-type {
margin-right: 0;
}

85
lms/static/sass/elements/_progress-circle.scss
View File

@@ -6,61 +6,62 @@ $progress-incomplete-number-color: $gray !default;
$progress-number-label-color: palette(grayscale, base) !default;
.program-progress {
width: 300px;
margin: 0 auto 30px;
width: 300px;
margin: 0 auto 30px;
@media(min-width: $bp-screen-md) {
margin-left: 0;
}
@media (min-width: $bp-screen-md) {
margin-left: 0;
}
}
.progress-heading {
color: $progress-title-color;
text-align: center;
margin-bottom: 0;
font: {
size: 1.1em;
weight: 700;
}
color: $progress-title-color;
text-align: center;
margin-bottom: 0;
font: {
size: 1.1em;
weight: 700;
}
}
.progress-circle-wrapper {
position: relative;
margin-top: -20px;
width: 300px;
height: 300px;
position: relative;
margin-top: -20px;
width: 300px;
height: 300px;
.progress-label {
position: absolute;
width: 100%;
top: 92px;
text-align: center;
}
.numbers {
font-size: 3em;
color: $progress-incomplete-number-color;
.complete {
color: $progress-complete-number-color;
}
.progress-label {
position: absolute;
width: 100%;
top: 92px;
text-align: center;
}
.numbers {
font-size: 3em;
color: $progress-incomplete-number-color;
.complete {
color: $progress-complete-number-color;
}
}
.label {
font: {
size: 1.1em;
weight: 600;
}
color: $progress-number-label-color;
.label {
font: {
size: 1.1em;
weight: 600;
}
color: $progress-number-label-color;
}
}
.progress-circle {
.complete {
stroke: $progress-complete-color;
}
.complete {
stroke: $progress-complete-color;
}
.incomplete {
stroke: $progress-incomplete-color;
}
.incomplete {
stroke: $progress-incomplete-color;
}
}

145
lms/static/sass/elements/_system-feedback.scss
View File

@@ -12,6 +12,7 @@
// basic object
.msg {
@include clearfix();
max-width: grid-width(12);
min-width: 760px;
width: flex-grid(12);
@@ -25,10 +26,10 @@
}
.msg-content {
.title {
@extend %t-title5;
@extend %t-weight4;
margin-bottom: ($baseline/4);
color: inherit;
text-transform: none;
@@ -37,17 +38,18 @@
.copy {
@extend %t-copy-sub1;
color: inherit;
p { // nasty reset
@extend %t-copy-sub1;
color: inherit;
}
}
}
.has-actions {
.msg-content {
width: flex-grid(10,12);
}
@@ -66,7 +68,6 @@
}
.is-dismissable {
.msg-content {
width: flex-grid(11,12);
}
@@ -79,6 +80,7 @@
.button-dismiss { //ugly reset on button element
@extend %t-icon4;
background: none;
box-shadow: none;
border: none;
@@ -120,13 +122,16 @@
&.urgency-info {
background: $msg-bg;
.msg {
color: $white;
}
.msg-icon {
font-size: 2.5em;
padding: 20px;
}
.msg-content {
max-width: 80%;
}
@@ -174,13 +179,16 @@
// messages
.message {
@extend %t-copy-sub1;
display: block;
}
.message-status {
@include border-top-radius(2px);
@include box-sizing(border-box);
@extend %t-strong;
display: none;
margin: 0 0 $baseline 0;
padding: ($baseline/2) $baseline;
@@ -188,6 +196,7 @@
.feedback-symbol {
@extend %t-icon5;
position: relative;
top: 1px;
display: inline-block;
@@ -232,7 +241,6 @@
}
.nav-actions {
.action-primary {
color: $gray-d4;
}
@@ -244,10 +252,11 @@
// types - confirm
&.confirm {
.nav-actions .action-primary {
@include blue-button();
@extend %t-action4;
border-color: $blue-d2;
}
@@ -262,10 +271,11 @@
// types - warning
&.warning {
.nav-actions .action-primary {
@include orange-button();
@extend %t-action4;
border-color: $orange-d2;
color: $gray-d4;
}
@@ -281,10 +291,11 @@
// types - error
&.error {
.nav-actions .action-primary {
@include red-button();
@extend %t-action4;
border-color: $red-d2;
}
@@ -299,10 +310,11 @@
// types - announcement
&.announcement {
.nav-actions .action-primary {
@include blue-button();
@extend %t-action4;
border-color: $blue-d2;
}
@@ -317,10 +329,11 @@
// types - confirmation
&.confirmation {
.nav-actions .action-primary {
@include green-button();
@extend %t-action4;
border-color: $green-d2;
}
@@ -335,10 +348,11 @@
// types - step required
&.step-required {
.nav-actions .action-primary {
@include pink-button();
@extend %t-action4;
border-color: $pink-d2;
}
@@ -355,7 +369,9 @@
// prompts
.wrapper-prompt {
@extend %ui-depth5;
@include transition(all $tmg-f3 ease-in-out 0s);
position: fixed;
top: 0;
background: $black-t1;
@@ -363,7 +379,7 @@
height: 100%;
text-align: center;
&:before {
&::before {
content: '';
display: inline-block;
height: 100%;
@@ -378,6 +394,7 @@
vertical-align: middle;
width: $baseline*17.5;
border: 4px solid $black;
@include text-align(left);
.copy {
@@ -393,6 +410,7 @@
.nav-item {
display: inline-block;
@include margin-right($baseline*0.75);
&:last-child {
@@ -413,7 +431,6 @@
// types of prompts - error
.prompt.error {
.feedback-symbol {
color: $red-l1;
}
@@ -425,7 +442,6 @@
// types of prompts - confirmation
.prompt.confirmation {
.feedback-symbol {
color: $green;
}
@@ -437,7 +453,6 @@
// types of prompts - error
.prompt.warning {
.feedback-symbol {
color: $orange;
}
@@ -453,7 +468,9 @@
// notifications
.wrapper-notification {
@extend %ui-depth5;
@include clearfix();
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
position: fixed;
bottom: 0;
@@ -491,6 +508,7 @@
// shorter/status notifications
&.wrapper-notification-status {
@include border-top-radius(3px);
right: ($baseline);
width: auto;
border: 4px solid $black;
@@ -500,6 +518,7 @@
.notification {
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
@@ -526,6 +545,7 @@
// help notifications
&.wrapper-notification-help {
@include border-top-radius(3px);
width: ($baseline*14);
right: ($baseline);
border: 4px solid $black;
@@ -535,6 +555,7 @@
.notification {
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
@@ -558,6 +579,7 @@
.notification {
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
@@ -574,7 +596,9 @@
.feedback-symbol {
@include transition (color $tmg-f1 ease-in-out 0s);
@extend %t-icon3;
width: flex-grid(1, 12);
height: ($baseline*1.25);
margin-top: ($baseline/4);
@@ -585,11 +609,13 @@
.copy {
@extend %t-copy-sub1;
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@extend %t-title7;
margin-bottom: 0;
color: $white;
}
@@ -597,25 +623,28 @@
// with actions
&.has-actions {
.feedback-symbol {
width: flex-grid(1, 12);
}
.copy {
width: flex-grid(7, 12);
@include margin-right(flex-gutter());
}
.nav-actions {
width: flex-grid(4, 12);
@include float(left);
margin-top: ($baseline/4);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/2);
&:last-child {
@@ -626,18 +655,18 @@
.action-primary {
@include blue-button();
@extend %t-strong;
border-color: $blue-d2;
}
.action-secondary {
@extend %t-action4;
}
}
&.confirmation {
.copy {
margin-top: ($baseline/5);
}
@@ -650,8 +679,10 @@
.feedback-symbol {
@include animation(rotateCW $tmg-s3 linear infinite);
width: 25px;
margin: -4px 10px 0 0;
@include transform-origin(52% 60%);
}
@@ -674,7 +705,9 @@
// alerts
.wrapper-alert {
@extend %ui-depth2;
@include box-sizing(border-box);
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
position: relative;
overflow: hidden;
@@ -736,6 +769,7 @@
.alert:not(.pattern-library-shim) {
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
@@ -752,7 +786,9 @@
.feedback-symbol {
@include transition (color $tmg-f1 ease-in-out 0s);
@extend %t-icon3;
width: flex-grid(1, 12);
margin: ($baseline/4) flex-gutter() 0 0;
text-align: right;
@@ -765,6 +801,7 @@
.title {
@extend %t-title7;
margin-bottom: 0;
color: $white;
}
@@ -772,46 +809,50 @@
// with actions
&.has-actions {
.feedback-symbol {
width: flex-grid(1, 12);
}
.copy {
width: flex-grid(7, 12);
@include margin-right(flex-gutter());
}
.copy {
width: flex-grid(7, 12);
@include margin-right(flex-gutter());
}
.nav-actions {
width: flex-grid(4, 12);
.nav-actions {
width: flex-grid(4, 12);
@include float(left);
margin-top: ($baseline/2);
text-align: right;
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/2);
.nav-item {
display: inline-block;
vertical-align: middle;
&:last-child {
@include margin-right(0);
}
@include margin-right($baseline/2);
.action-primary {
@extend %t-action4;
@extend %t-strong;
}
&:last-child {
@include margin-right(0);
}
.action-secondary {
@extend %t-action4;
.action-primary {
@extend %t-action4;
@extend %t-strong;
}
.action-secondary {
@extend %t-action4;
}
}
}
}
}
// with cancel
.action-alert-close {
@include border-bottom-radius(($baseline/5));
position: absolute;
top: -($baseline/10);
right: $baseline;
@@ -825,6 +866,7 @@
.icon {
@extend %t-icon6;
color: $white;
width: auto;
margin: 0;
@@ -838,7 +880,6 @@
// with dismiss (to sunset action-alert-clos)
.action-dismiss {
.button {
// I tried moving the btn-secondary-white into lms/static/sass/elements/_controls.scss
// but sass compiler fails to find ui-btn-secondary, ui-btn-secondary is defined in
@@ -846,6 +887,7 @@
// lms/static/sass/_build-lms.scss but issue is still there, so i made it optional.
// Making this optional wouldn't cause any issue for confirmation dialog at-least.
@extend %btn-secondary-white !optional;
padding:($baseline/4) ($baseline/2);
}
@@ -856,6 +898,7 @@
.icon {
@extend %t-icon4;
margin-right: ($baseline/4);
}
@@ -882,7 +925,6 @@
// prompt showing
&.prompt-is-shown {
.wrapper-prompt.is-shown {
visibility: visible;
pointer-events: auto;
@@ -895,9 +937,7 @@
// prompt hiding
&.prompt-is-hiding {
.wrapper-prompt {
.prompt {
@include animation(bounceOut $tmg-f1 ease-in-out 1);
}
@@ -928,9 +968,9 @@
// block-level messages and validation
.wrapper-message {
.message {
@extend %t-copy-sub1;
background-color: $gray-d2;
padding: ($baseline/2) ($baseline*0.75);
color: $white;
@@ -941,6 +981,7 @@
&.information {
@extend %t-copy-sub1;
background-color: $gray-l5;
color: $gray-d2;
}
@@ -992,16 +1033,19 @@
// temporary
body.uxdesign.alerts {
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
@extend %ui-window;
width: flex-grid(12, 12);
@include margin-right(flex-gutter());
padding: $baseline ($baseline*1.5);
> section {
@@ -1013,9 +1057,9 @@ body.uxdesign.alerts {
}
ul {
li {
@include clearfix();
width: flex-grid(12, 12);
margin-bottom: ($baseline/4);
border-bottom: 1px solid $gray-l4;
@@ -1029,7 +1073,9 @@ body.uxdesign.alerts {
a {
@include float(left);
width: flex-grid(5, 12);
@include margin-right(flex-gutter());
}
}
@@ -1041,9 +1087,9 @@ body.uxdesign.alerts {
// artifact styles
.main-wrapper {
.alert {
@extend %t-copy-sub1;
padding: 15px 20px;
margin-bottom: ($baseline*1.5);
border-radius: 3px;
@@ -1055,6 +1101,7 @@ body.uxdesign.alerts {
.alert-message {
@include float(left);
margin: 4px 0 0 0;
color: $gray-d3;
}
@@ -1093,6 +1140,7 @@ body.error {
h1 {
@extend %t-title1;
@extend %t-light;
float: none;
margin: 0;
color: $gray-d3;
@@ -1100,12 +1148,15 @@ body.error {
.description {
@extend %t-copy-lead2;
margin-bottom: 50px;
}
.back-button {
@include blue-button();
@extend %t-action1;
padding: 14px 40px 18px;
}
}

41
lms/static/sass/elements/_typography.scss
View File

@@ -5,22 +5,27 @@
// weights
%t-ultrastrong {
font-weight: 700;
font-weight: 700;
}
%t-strong {
font-weight: 600;
font-weight: 600;
}
%t-demi-strong {
font-weight: 500;
font-weight: 500;
}
%t-regular {
font-weight: 400;
font-weight: 400;
}
%t-light {
font-weight: 300;
font-weight: 300;
}
%t-ultralight {
font-weight: 200;
font-weight: 200;
}
// headings/titles
@@ -30,54 +35,63 @@
%t-title1 {
@extend %t-title;
@include font-size(60);
@include line-height(60);
}
%t-title2 {
@extend %t-title;
@include font-size(48);
@include line-height(48);
}
%t-title3 {
@extend %t-title;
@include font-size(36);
@include line-height(36);
}
%t-title4 {
@extend %t-title;
@include font-size(24);
@include line-height(24);
}
%t-title5 {
@extend %t-title;
@include font-size(18);
@include line-height(18);
}
%t-title6 {
@extend %t-title;
@include font-size(16);
@include line-height(16);
}
%t-title7 {
@extend %t-title;
@include font-size(14);
@include line-height(14);
}
%t-title8 {
@extend %t-title;
@include font-size(12);
@include line-height(12);
}
%t-title9 {
@extend %t-title;
@include font-size(11);
@include line-height(11);
}
@@ -91,30 +105,35 @@
%t-copy-base {
@extend %t-copy;
@include font-size(16);
@include line-height(16);
}
%t-copy-lead1 {
@extend %t-copy;
@include font-size(18);
@include line-height(18);
}
%t-copy-lead2 {
@extend %t-copy;
@include font-size(24);
@include line-height(24);
}
%t-copy-sub1 {
@extend %t-copy;
@include font-size(14);
@include line-height(14);
}
%t-copy-sub2 {
@extend %t-copy;
@include font-size(12);
@include line-height(12);
}
@@ -223,6 +242,7 @@
%hd-lv1 {
@extend %t-title1;
@extend %t-weight1;
color: $m-gray-d4;
margin: 0 0 ($baseline*2) 0;
}
@@ -230,6 +250,7 @@
%hd-lv2 {
@extend %t-title4;
@extend %t-weight1;
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid $m-gray-l3;
padding-bottom: ($baseline/2);
@@ -239,6 +260,7 @@
%hd-lv3 {
@extend %t-title6;
@extend %t-weight4;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
@@ -246,6 +268,7 @@
%hd-lv4 {
@extend %t-title6;
@extend %t-weight2;
margin: 0 0 $baseline 0;
color: $m-gray-d4;
}
@@ -253,6 +276,7 @@
%hd-lv5 {
@extend %t-title7;
@extend %t-weight4;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
@@ -260,22 +284,26 @@
// application: canned copy
%copy-base {
@extend %t-copy-base;
color: $m-gray-d2;
}
%copy-lead1 {
@extend %t-copy-lead2;
color: $m-gray;
}
%copy-detail {
@extend %t-copy-sub1;
@extend %t-weight3;
color: $m-gray-d1;
}
%copy-metadata {
@extend %t-copy-sub2;
color: $m-gray-d1;
@@ -300,6 +328,7 @@
%copy-badge {
@extend %t-title9;
@extend %t-weight3;
border-radius: ($baseline/5);
padding: ($baseline/2) $baseline;
text-transform: uppercase;

2
lms/static/sass/features/_course-experience.scss
View File

@@ -230,7 +230,6 @@
.goal {
@include float(left);
@include padding-left($baseline*0.4);
}
.response-icon {
@@ -459,6 +458,7 @@
.fa.fa-spinner {
@include left(50%);
font-size: 2rem;
margin-top: $baseline*3;
position: absolute;

1
lms/static/sass/features/_learner-profile.scss
View File

@@ -314,6 +314,7 @@
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(0);
flex-wrap: wrap;
}
}

2
lms/static/sass/lms-course-rtl.scss
View File

@@ -1,10 +1,8 @@
@import 'bourbon/bourbon';
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
@import 'base/reset';
@import 'base/variables';
@import 'base/font_face';
@import 'base/mixins';
@import 'base/theme';
@import 'build-course'; // shared app style assets/rendering

2
lms/static/sass/lms-course.scss
View File

@@ -1,10 +1,8 @@
@import 'bourbon/bourbon';
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
@import 'base/reset';
@import 'base/variables';
@import 'base/font_face';
@import 'base/mixins';
@import 'base/theme';
@import 'build-course'; // shared app style assets/rendering

6
lms/static/sass/lms-footer-rtl.scss
View File

@@ -11,9 +11,9 @@
@import 'base/theme';
footer#footer-openedx {
@import 'base/reset';
@import 'base/extends';
@import 'base/base';
@import 'base/reset';
@import 'base/extends';
@import 'base/base';
}
// base - elements

6
lms/static/sass/lms-footer.scss
View File

@@ -11,9 +11,9 @@
@import 'base/theme';
footer#footer-openedx {
@import 'base/reset';
@import 'base/extends';
@import 'base/base';
@import 'base/reset';
@import 'base/extends';
@import 'base/base';
}
// base - elements

1
lms/static/sass/lms-main-v2-rtl.scss
View File

@@ -8,6 +8,7 @@
// Load the RTL version of the edX Pattern Library
$pattern-library-path: '../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
// Load the shared build

1
lms/static/sass/lms-main-v2.scss
View File

@@ -8,6 +8,7 @@
// Load the RTL version of the edX Pattern Library
$pattern-library-path: '../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
// Load the shared build

52
lms/static/sass/multicourse/_about_pages.scss
View File

@@ -8,6 +8,7 @@
&::after {
@extend %faded-hr-divider;
content: "";
display: block;
}
@@ -19,9 +20,11 @@
font-style: italic;
display: inline-block;
letter-spacing: 1px;
margin: 0px 15px;
margin: 0 15px;
padding: 20px 10px;
@include transition(all 0.15s linear 0s);
text-transform: lowercase;
&:hover, &:active, &:focus {
@@ -39,7 +42,9 @@
.our-mission {
border-bottom: 1px solid rgb(220,220,220);
@include clearfix();
margin: 0 auto 100px;
padding-bottom: 40px;
@@ -47,8 +52,11 @@
@include border-right(1px solid rgb(200,200,200));
@include box-sizing(border-box);
@include float(left);
height: 115px;
@include margin-right(flex-gutter());
text-align: center;
width: flex-grid(3);
@@ -62,10 +70,13 @@
h2.mission-quote {
@include box-sizing(border-box);
@include float(right);
font-style: italic;
line-height: 1.4;
margin: 0;
@include padding(5px, 0px, 5px, 20px);
@include padding(5px, 0, 5px, 20px);
text-transform: none;
width: flex-grid(9);
}
@@ -73,13 +84,15 @@
.message {
border-bottom: 1px solid rgb(220,220,220);
@include clearfix();
margin-bottom: ($baseline*4);
padding-bottom: 80px;
position: relative;
hr {
bottom: 0px;
bottom: 0;
display: none;
margin: 0;
position: absolute;
@@ -93,6 +106,7 @@
.photo {
@include box-sizing(border-box);
background: rgb(255,255,255);
border: 1px solid rgb(210,210,210);
margin-top: 37px;
@@ -110,6 +124,7 @@
@include box-sizing(border-box);
@include float(left);
@include padding-left($baseline);
width: flex-grid(9);
}
@@ -128,7 +143,7 @@
}
&:last-child {
margin-bottom: 0px;
margin-bottom: 0;
}
}
@@ -137,6 +152,7 @@
> article {
@include float(left);
width: flex-grid(6);
&:first-child {
@@ -152,17 +168,21 @@
nav.categories {
border: 1px solid rgb(220,220,220);
@include box-sizing(border-box);
@include float(left);
@include margin-left(flex-gutter());
padding: 20px;
width: flex-grid(3);
a {
display: block;
letter-spacing: 1px;
margin: 0px -20px;
@include padding(12px, 0px, 12px, 20px);
margin: 0 -20px;
@include padding(12px, 0, 12px, 20px);
text-align: left;
&:hover, &:focus {
@@ -174,13 +194,14 @@
.responses {
@include float(left);
width: flex-grid(9);
.category {
padding-top: 40px;
&:first-child {
padding-top: 0px;
padding-top: 0;
}
> h2 {
@@ -205,23 +226,29 @@
.press {
.press-story {
border-bottom: 1px solid rgb(220,220,220);
@include clearfix();
margin-bottom: ($baseline*2);
padding-bottom: 40px;
&:last-child {
border: none;
margin: 0;
padding: 0px;
padding: 0;
}
.article-cover {
background: rgb(255,255,255);
border: 1px solid rgb(120,120,120);
@include box-sizing(border-box);
@include float(left);
height: 140px;
@include margin-right(flex-gutter());
overflow: hidden;
width: flex-grid(2);
@@ -234,6 +261,7 @@
.press-info {
@include float(left);
width: flex-grid(10);
header {
@@ -247,6 +275,7 @@
span.post-date {
color: $lighter-base-font-color;
@include margin-right($baseline/2);
}
}
@@ -256,14 +285,18 @@
.contact {
@include clearfix();
margin: 0 auto;
.photo {
@include box-sizing(border-box);
background: rgb(255,255,255);
border: 1px solid rgb(210,210,210);
padding: 1px;
@include float(left);
width: flex-grid(3);
img {
@@ -275,12 +308,13 @@
@include box-sizing(border-box);
@include float(left);
@include padding-left(40px);
width: flex-grid(9);
ul {
list-style: none;
margin: 0;
padding: 0px;
padding: 0;
li {
margin-bottom: ($baseline/2);

77
lms/static/sass/multicourse/_account.scss
View File

@@ -63,7 +63,9 @@
// specific examples - buttons
%button-primary {
border-radius: 0;
@include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
display: inline-block;
padding: $baseline/2 $baseline*2.5;
text-transform: lowercase;
@@ -81,6 +83,7 @@
%button-secondary {
@include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%);
display: inline-block;
padding: $baseline/2 $baseline*2.5;
text-transform: lowercase;
@@ -104,6 +107,7 @@
.container, .introduction {
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
width: 960px;
background: $container-bg;
@@ -122,7 +126,9 @@
// CASE: normal typographical headings
h1 {
@extend %heading-2;
@include text-align(left);
margin-bottom: $baseline;
padding-bottom: $baseline;
}
@@ -131,10 +137,12 @@
.title {
position: absolute;
top: ($baseline*2.5);
@include left($baseline*1.5);
.title-super, .title-sub {
@extend %t-weight1;
display: block;
letter-spacing: 0;
}
@@ -142,6 +150,7 @@
.title-super {
@include font-size(26);
@include line-height(18);
text-transform: uppercase;
color: $header-graphic-super-color;
}
@@ -149,6 +158,7 @@
.title-sub {
@include font-size(20);
@include margin-left($baseline*2);
text-transform: lowercase;
color: $header-graphic-sub-color;
}
@@ -192,17 +202,20 @@
// basic layout
.content, aside {
@include box-sizing(border-box);
margin: $baseline 0 0 0;
}
.content {
@include float(left);
@include margin-right($baseline*2);
width: 600px;
}
aside {
@include float(left);
width: 280px;
p, ol, ul {
@@ -216,7 +229,6 @@
// aside
aside {
.btn {
margin: 0 0 ($baseline*2) 0;
@@ -226,12 +238,12 @@
h3 {
@extend %heading-4;
margin: 0 0 ($baseline/4) 0;
}
}
.btn-login {
h3.title,
.instructions {
display: inline-block;
@@ -240,7 +252,9 @@
.btn-login-action {
@extend %btn-secondary-grey-outline;
padding: ($baseline/10) ($baseline*0.75);
@include margin-left($baseline/4);
}
}
@@ -248,9 +262,9 @@
// forms
form {
.instructions {
@extend %body-text-emphasized;
margin-bottom: $baseline;
}
@@ -269,11 +283,13 @@
// field groups
.field-group {
@include clearfix();
margin: 0 0 $baseline 0;
.field {
@include float(left);
@include margin(0, ($baseline*1.5), 0, 0);
display: block;
border-bottom: none;
padding-bottom: 0;
@@ -290,7 +306,6 @@
}
.group-form-personalinformation {
.field-education-level,
.field-gender,
.field-yob {
@@ -317,12 +332,14 @@
label {
@include transition(color 0.15s ease-in-out 0s);
margin: 0 0 ($baseline/4) 0;
color: tint($black, 20%);
}
.tip {
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $lighter-base-font-color;
@@ -335,6 +352,7 @@
.tip {
position: absolute;
top: 0;
@include right(0);
}
}
@@ -365,7 +383,6 @@
// types - select
&.select {
select {
width: 100%;
}
@@ -373,10 +390,10 @@
// types - checkboxes/radio buttons
&.checkbox {
input[type="checkbox"] {
display: inline-block;
width: auto;
@include margin-right($baseline/4);
}
@@ -392,7 +409,7 @@
label {
cursor: text;
&:after {
&::after {
@include margin-left($baseline/4);
}
}
@@ -405,7 +422,6 @@
// states - focused
&.is-focused {
label {
color: saturate($link-color-d1,15%);
}
@@ -417,14 +433,13 @@
// states - disabled
&.disabled {
label:after {
label::after {
color: rgba(0,0,0,.35);
content: "(Disabled Currently)";
}
}
&.error {
label {
color: $red;
}
@@ -435,7 +450,6 @@
}
&.required {
label {
font-weight: 600;
@@ -444,8 +458,9 @@
}
}
label:after {
label::after {
@include margin-left($baseline/4);
content: "*";
}
}
@@ -472,10 +487,13 @@
.action-secondary {
display: block;
@include float(right);
width: flex-grid(3,8);
margin: $baseline $baseline 0 0;
font-size: em(14);
@include text-align(right);
}
@@ -496,9 +514,12 @@
.copy {
@extend %t-copy-lead1;
@extend %t-weight4;
position: absolute;
top: -($baseline);
@include left(43%);
padding: ($baseline/4) ($baseline*1.5);
background: white;
text-align: center;
@@ -509,6 +530,7 @@
// downplay required note
.instructions .note {
@extend %t-copy-sub2;
display: block;
font-weight: normal;
color: $gray;
@@ -520,12 +542,16 @@
button[type="submit"] {
@extend %btn-secondary-blue-outline;
width: flex-grid(4,8);
@include margin-right($baseline/2);
.icon {
@extend %sso-icon;
@include margin-right($baseline/2);
color: inherit;
}
@@ -535,29 +561,29 @@
&.button-oa2-google-oauth2:hover, &.button-oa2-google-oauth2:focus {
background-color: $google-red;
border: 1px solid #A5382B;
border: 1px solid #a5382b;
}
&.button-oa2-google-oauth2:hover {
box-shadow: 0 2px 1px 0 #8D3024;
box-shadow: 0 2px 1px 0 #8d3024;
}
&.button-oa2-facebook:hover, &.button-oa2-facebook:focus {
background-color: $facebook-blue;
border: 1px solid #263A62;
border: 1px solid #263a62;
}
&.button-oa2-facebook:hover {
box-shadow: 0 2px 1px 0 #30487C;
box-shadow: 0 2px 1px 0 #30487c;
}
&.button-oa2-linkedin-oauth2:hover , &.button-oa2-linkedin-oauth2:focus {
background-color: $linkedin-blue;
border: 1px solid #06527D;
border: 1px solid #06527d;
}
&.button-oa2-linkedin-oauth2:hover {
box-shadow: 0 2px 1px 0 #005D8E;
box-shadow: 0 2px 1px 0 #005d8e;
}
}
@@ -566,6 +592,7 @@
// forms - messages/status
.status {
@include box-sizing(border-box);
margin: 0 0 $baseline 0;
border-bottom: 3px solid shade($yellow, 10%);
padding: $baseline $baseline;
@@ -573,6 +600,7 @@
.message-title {
@extend %heading-4;
margin: 0 0 ($baseline/4) 0;
font-size: em(14);
font-weight: 600;
@@ -580,6 +608,7 @@
.message-copy {
@extend %body-text;
margin: 0 !important;
padding: 0;
list-style: none;
@@ -607,7 +636,6 @@
}
#register-form, #login-form, #passwordreset-form {
.status.message {
display: none;
@@ -630,7 +658,6 @@
// login
.view-login {
.header-global .nav-courseware .btn-login {
display: none;
}
@@ -645,7 +672,6 @@
// register
.view-register {
.introduction {
header {
height: 120px;
@@ -656,7 +682,6 @@
// password reset
.view-passwordreset {
.header-global .nav-courseware .btn-login {
display: none;
}
@@ -692,12 +717,13 @@
margin: 0;
padding: 0;
&:before {
&::before {
background-image: none;
}
h2 {
@extend %heading-2;
@include text-align(left);
}
}
@@ -723,9 +749,7 @@
padding: 0;
.field {
&.text, &.email, &.textarea {
input {
background: #fafafa;
margin-bottom: 0;
@@ -747,8 +771,11 @@
.modal-form-error {
@extend %body-text;
box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
@include box-sizing(border-box);
margin: $baseline 0 ($baseline/2) 0 !important;
padding: $baseline;
border: none;

122
lms/static/sass/multicourse/_course_about.scss
View File

@@ -21,8 +21,10 @@
background: $course-header-bg;
border: 1px solid $border-color-3;
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
max-width: 1200px;
min-width: 760px;
@@ -33,9 +35,11 @@
display: table;
width: 100%;
}
.intro {
@include box-sizing(border-box);
@include clearfix();
display: table-cell;
vertical-align: middle;
padding: $baseline;
@@ -55,24 +59,27 @@
font-weight: normal;
display: inline-block;
margin: 0;
letter-spacing: 0px;
letter-spacing: 0;
@include text-align(left);
text-shadow: 0 1px rgba(255,255,255, 0.6);
.button-org {
@include margin-left($baseline*0.75);
background: transparent !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
text-transform: normal !important;
font-size: $body-font-size;
color: $base-font-color !important;
letter-spacing: 0px !important;
@include margin-left($baseline*0.75);
&:hover, &:focus {
color: $link-color;
}
background: transparent !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
text-transform: normal !important;
font-size: $body-font-size;
color: $base-font-color !important;
letter-spacing: 0 !important;
&:hover, &:focus {
color: $link-color;
}
}
}
@@ -83,7 +90,7 @@
a {
color: $base-font-color;
font: italic 700 1em/1em $sans-serif;
letter-spacing: 0px;
letter-spacing: 0;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
@@ -99,11 +106,13 @@
@include float(left);
@include margin-right(flex-gutter());
@include transition(all 0.15s linear 0s);
width: flex-grid(12);
> a.find-courses, a.register, a.add-to-cart {
@include button(shiny, $button-color);
@include box-sizing(border-box);
border-radius: 3px;
display: block;
font: normal 1.2rem/1.6rem $sans-serif;
@@ -116,6 +125,7 @@
&:hover, &:focus {
color: rgb(255,255,255);
}
span {
display: inline-block;
}
@@ -130,9 +140,12 @@
strong {
@include button(shiny, $button-color);
@include box-sizing(border-box);
border-radius: 3px;
display: block;
@include float(left);
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: ($baseline/2) 0;
@@ -148,16 +161,20 @@
span.register, span.add-to-cart {
background: $button-archive-color;
border: 1px solid darken($button-archive-color, 50%);
@include box-sizing(border-box);
color: darken($button-archive-color, 50%);
display: block;
letter-spacing: 1px;
padding: 10px 0px 8px;
padding: 10px 0 8px;
text-transform: uppercase;
text-align: center;
@include float(left);
@include margin(1px, flex-gutter(8), 0, 0);
@include transition(none);
width: flex-grid(5, 8);
}
@@ -174,7 +191,9 @@
.media {
background: transparent;
@include box-sizing(border-box);
display: table-cell;
padding: 20px;
position: relative;
@@ -189,13 +208,18 @@
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
border-radius: 4px;
box-shadow: 0 1px 12px 0 $shadow-d1;
border: 2px solid rgba(255,255,255, 0.8);
height: 80px;
@include left(50%);
margin-top: -40px;
@include margin-left(-40px);
position: absolute;
top: 50%;
width: 80px;
@@ -205,8 +229,10 @@
content: "\25B6";
display: block;
font: normal 2em/1em $sans-serif;
@include left(50%);
@include margin-left(-11px);
margin-top: -16px;
position: absolute;
text-shadow: 0 -1px rgba(0,0,0, 0.8);
@@ -225,6 +251,7 @@
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
border-color: rgba(255,255,255, 0.9);
@@ -248,11 +275,15 @@
.instructor-info-action {
@extend %t-copy-sub2;
@include float(right);
padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4);
background-color: $light-gray1;
@include text-align(right);
text-transform: uppercase;
color: $staff-color;
@@ -267,6 +298,7 @@
.details {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(8);
font: normal 1em/1.6em $serif;
@@ -289,9 +321,9 @@
}
.course-staff {
.teacher {
@include clearfix();
margin-bottom: ($baseline*2);
h3 {
@@ -306,8 +338,10 @@
background: rgb(255,255,255);
border: 1px solid $border-color-2;
height: 115px;
@include float(left);
margin: 0 15px 0px 0;
margin: 0 15px 0 0;
overflow: hidden;
padding: 1px;
width: 115px;
@@ -326,8 +360,9 @@
li {
font: normal 1em/1.6em $serif;
}
ul {
margin: 5px 0px 10px;
margin: 5px 0 10px;
}
}
}
@@ -355,6 +390,7 @@
.course-sidebar {
@include box-sizing(border-box);
@include float(left);
width: flex-grid(4);
> section {
@@ -380,12 +416,15 @@
ul {
@include padding-left(0);
margin-bottom: 0;
}
li {
list-style: none;
@include padding-left(29px);
background: url('#{$static-path}/images/link-icon.png') left center no-repeat;
}
}
@@ -399,23 +438,26 @@
&::after {
@extend %faded-hr-divider;
content: "";
display: block;
height: 1px;
position: absolute;
bottom: 0px;
bottom: 0;
width: 100%;
z-index: 1;
}
a.university-name {
@include border-right(1px solid $border-color-2);
color: $base-font-color;
font-family: $sans-serif;
font-style: italic;
font-weight: 700;
display: inline-block;
letter-spacing: 0px;
letter-spacing: 0;
@include margin-right($baseline*0.75);
@include padding-right(15px);
@@ -427,40 +469,49 @@
.social-sharing {
@include box-sizing(border-box);
@include float(left);
height: 44px;
position: relative;
text-align: center;
width: flex-grid(12);
z-index: 2;
float: none;
&:hover, &:focus {
.sharing-message {
opacity: 1.0;
opacity: 1;
top: 56px;
}
}
.sharing-message {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%));
rgba(0,0,0, 0.7) 100%));
border: 1px solid rgba(0,0,0, 0.5);
border-radius: 4px;
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
@include box-sizing(border-box);
color: rgb(255,255,255);
@include float(right);
font-family: $serif;
font-size: 0.9em;
font-style: italic;
@include left(50%);
@include margin-left(-110px);
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center;
@include transition(all 0.15s ease-out 0s);
top: 65px;
width: 220px;
@@ -473,16 +524,19 @@
display: inline-block;
height: 35px;
width: 35px;
@include margin-right($baseline);
margin-top: ($baseline/4);
font-size: 1.75em;
text-decoration: none;
color: $black;
opacity: 0.5;
@include transition(all 0.15s linear 0s);
&:hover, &:focus {
opacity: 1.0;
opacity: 1;
}
&:last-child {
@@ -506,31 +560,38 @@
li {
@include clearfix();
border-bottom: 1px dotted $border-color-2;
margin-bottom: $baseline;
padding-bottom: ($baseline/2);
&:hover, &:focus {
.icon {
opacity: 1.0;
opacity: 1;
}
}
.important-dates-item-title {
color: $lighter-base-font-color;
@include float(left);
font-family: $sans-serif;
}
.icon {
@include float(left);
padding: 1px;
@include margin(($baseline/5), ($baseline/2), 0, 0);
opacity: .6;
@include float(left);
padding: 1px;
@include margin(($baseline/5), ($baseline/2), 0, 0);
opacity: .6;
}
.important-dates-item-text {
@include float(right);
font-weight: 700;
}
}
@@ -538,10 +599,13 @@
.prerequisite-course {
.pre-requisite {
max-width: 39%;
@extend %text-truncated;
}
.tip {
@include float(left);
margin: $baseline 0 ($baseline/2);
font-size: 0.8em;
color: $lighter-base-font-color;

50
lms/static/sass/multicourse/_courses.scss
View File

@@ -24,10 +24,11 @@ $facet-background-color: #007db8;
// +Layout - Courses Container
// ====================
.find-courses, .university-profile {
.discovery-button:not(:disabled) {
@extend %t-action2;
@include text-align(left);
outline: 0 none;
box-shadow:none;
border: 0;
@@ -51,6 +52,7 @@ $facet-background-color: #007db8;
.courses-listing .courses-listing-item {
@include fill-parent();
margin: ($baseline*0.75) 0 ($baseline*1.5) 0;
max-height: $course-card-height;
}
@@ -130,7 +132,6 @@ $facet-background-color: #007db8;
// +Hero - Home Header
// ====================
.find-courses, .university-profile {
header.search {
background: $gray-l5;
background-size: cover;
@@ -172,6 +173,7 @@ $facet-background-color: #007db8;
@include border-right(1px solid $light-gray);
@include margin-right(30px);
@include padding-right(30px);
display: inline-block;
height: 80px;
position: relative;
@@ -179,11 +181,12 @@ $facet-background-color: #007db8;
&::after {
@include right(0px);
content: "";
display: block;
height: 80px;
position: absolute;
top: 0px;
top: 0;
}
img {
@@ -196,7 +199,7 @@ $facet-background-color: #007db8;
font-family: $sans-serif;
font-style: italic;
font-weight: 700;
letter-spacing: 0px;
letter-spacing: 0;
text-transform: none;
}
@@ -215,14 +218,16 @@ $facet-background-color: #007db8;
// +Search Input
// ====================
.find-courses {
.wrapper-search-context {
@include outer-container;
@include rtl() { $layout-direction: "RTL"; }
.search-status-label {
@extend %t-title3;
@include span-columns(9);
min-height: $course-search-input-height;
@include media($bp-tiny) {
@@ -247,7 +252,9 @@ $facet-background-color: #007db8;
.wrapper-search-input {
@include span-columns(3);
@extend %ui-depth0;
position: relative;
@include media($bp-tiny) {
@@ -272,8 +279,10 @@ $facet-background-color: #007db8;
@extend %ui-depth1;
@extend %t-copy-sub1;
@extend %t-demi-strong;
@include border-radius(3px);
@include padding-right(55px);
border: 2px solid $gray-l3;
width: 100%;
height: $course-search-input-height;
@@ -283,6 +292,7 @@ $facet-background-color: #007db8;
//STATE: focus
&:focus {
@extend %no-outline;
box-shadow: none;
border-color: $m-blue-d6;
}
@@ -292,8 +302,10 @@ $facet-background-color: #007db8;
@extend %ui-depth2;
@extend %t-icon3;
@extend %t-strong;
@include margin-left(-2px);
@include right(0);
position: absolute;
top: 0;
border: 2px solid $m-blue-d6;
@@ -313,6 +325,7 @@ $facet-background-color: #007db8;
.loading-spinner {
@include transition(all $tmg-f1 ease-out 0s);
background: $blue;
position: absolute;
top: ($baseline*0.7); // same as padding rule for .discovery-submit
@@ -322,9 +335,9 @@ $facet-background-color: #007db8;
// +Filters and Facets - Search
// ====================
.find-courses {
.filters {
@include clearfix();
margin-top: ($baseline/2);
width: 100%;
height: auto;
@@ -341,12 +354,14 @@ $facet-background-color: #007db8;
.filters-inner {
@include clearfix();
border-top: 2px solid $courseware-button-border-color;
border-bottom: 2px solid $courseware-button-border-color;
}
ul {
@include padding-left(0);
margin: 0;
list-style: outside none none;
}
@@ -354,6 +369,7 @@ $facet-background-color: #007db8;
li {
@include float(left);
@include margin(($baseline/2), $baseline, ($baseline/2), 0);
position: relative;
padding: ($baseline/2) ($baseline*0.75);
width: auto;
@@ -361,6 +377,7 @@ $facet-background-color: #007db8;
.facet-option {
@extend %t-strong;
color: $gray-d2;
text-decoration: none;
@@ -372,8 +389,10 @@ $facet-background-color: #007db8;
.clear-filters {
@include line-height(29.73);
@extend %t-icon5;
@extend %t-strong;
margin: ($baseline/2);
width: auto;
color: $blue-d1; // WCAG 2.0 AA requirements
@@ -395,7 +414,9 @@ $facet-background-color: #007db8;
@include fill-parent();
@include omega();
@include box-sizing(border-box);
@extend %ui-depth1;
position: relative;
margin: ($baseline*2) 0 ($baseline*3.5) 0;
box-shadow: 1px 2px 5px $black-t0;
@@ -430,8 +451,9 @@ $facet-background-color: #007db8;
overflow: visible;
}
&:before {
&::before {
@include right(0);
position: absolute;
top: (-$baseline*0.15);
opacity: 0;
@@ -445,6 +467,7 @@ $facet-background-color: #007db8;
.header-search-facets, .header-facet {
@extend %t-title6;
@extend %t-strong;
margin: 0;
padding: ($baseline/2);
color: $facet-text-color;
@@ -457,7 +480,9 @@ $facet-background-color: #007db8;
.facet-list {
@extend %ui-no-list;
@include clearfix();
padding-bottom: ($baseline/2);
&.collapse {
@@ -467,6 +492,7 @@ $facet-background-color: #007db8;
li {
@include clearfix();
position: relative;
padding: 0;
height: ($baseline*1.5);
@@ -478,10 +504,12 @@ $facet-background-color: #007db8;
@include float(left);
@include transition(all $tmg-f2 ease-out 0s);
@include clearfix();
@extend %t-action3;
@extend %text-truncated;
opacity: 1;
border-radius: 0px;
border-radius: 0;
padding: ($baseline/4) ($baseline/2);
width: 100%;
color: $facet-text-color;
@@ -491,6 +519,7 @@ $facet-background-color: #007db8;
@include text-align(right);
@include box-sizing(border-box);
@include transition(all 0.2s ease-out);
position: absolute;
width: ($baseline*2);
}
@@ -521,8 +550,9 @@ $facet-background-color: #007db8;
}
}
.count:before {
.count::before {
@include left($baseline*0.75);
position: absolute;
width: ($baseline*2);
color: $gray-l1;
@@ -539,6 +569,7 @@ $facet-background-color: #007db8;
button {
@extend %t-icon6;
@extend %t-strong;
padding: ($baseline/4) ($baseline/2);
color: $facet-background-color;
text-transform: uppercase;
@@ -557,6 +588,7 @@ $facet-background-color: #007db8;
section.message {
@include columns(2 20px);
@include clearfix();
border-top: 1px solid $border-color-2;
margin-top: $baseline;
padding-top: ($baseline*3);

242
lms/static/sass/multicourse/_dashboard.scss
View File

@@ -13,46 +13,58 @@
// ====================
.dashboard {
@include clearfix();
padding: ($baseline*2) 0 $baseline 0;
.wrapper-find-courses {
@include float(right);
@include margin-left(flex-gutter());
width: flex-grid(3);
.course-advertise {
@include clearfix();
box-sizing: border-box;
padding: $baseline;
border: 1px solid $border-color-l3;
.advertise-message {
@include font-size(12);
color: $gray-d4;
margin-bottom: $baseline;
}
.ad-link {
@include text-align(center);
.btn-neutral {
padding-bottom: 12px;
padding-top: 12px;
}
a {
@include font-size(16);
@include line-height(17);
padding: $baseline * 0.5;
border: 1px solid $blue;
color: $blue;
text-decoration: none;
display: block;
&:hover,
&:focus,
&:active {
color: $white;
background-color: $blue;
}
span {
@include margin-left($baseline*0.25);
}
.icon {
@include margin-right($baseline*0.25);
}
@@ -63,8 +75,10 @@
.profile-sidebar {
background: transparent;
@include float(right);
@include margin-left(flex-gutter());
width: flex-grid(3);
margin-top: ($baseline*2);
@@ -74,12 +88,14 @@
> ul {
@include box-sizing(border-box);
@include clearfix();
margin: 0;
padding: 0;
width: flex-grid(12);
li {
@include clearfix();
border-bottom: 1px dotted $border-color-2;
list-style: none;
margin-bottom: ($baseline*0.75);
@@ -87,7 +103,7 @@
&:hover, &:focus {
.title .icon {
opacity: 1.0;
opacity: 1;
}
}
@@ -138,6 +154,7 @@
.copy {
@extend %t-copy-sub2;
display: inline;
}
}
@@ -149,6 +166,7 @@
.status-item {
@extend %t-copy-sub2;
margin-bottom: 7px;
border-bottom: 0;
padding: 0;
@@ -181,6 +199,7 @@
.course-name {
@include line-height(12);
display: inline-block;
vertical-align: top;
width: 80%;
@@ -191,8 +210,8 @@
// status
.status {
@include clearfix();
box-sizing: border-box;
padding: $baseline;
border: 1px solid $border-color-l3;
@@ -204,7 +223,9 @@
.nav__item {
@extend %t-weight4;
@include font-size(13);
margin-left: 26px;
}
}
@@ -213,45 +234,48 @@
}
// CASE: empty dashboard
.empty-dashboard-message {
border: 3px solid $gray-l4;
background: $gray-l6;
padding: ($baseline*2) 0;
text-align: center;
.empty-dashboard-message {
border: 3px solid $gray-l4;
background: $gray-l6;
padding: ($baseline*2) 0;
text-align: center;
p {
@include font-size(24);
color: $lighter-base-font-color;
margin-bottom: $baseline;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
p {
@include font-size(24);
a {
background-color: $blue;
border: 1px solid $blue;
box-shadow: 0 1px 8px 0 $shadow-l1;
@include box-sizing(border-box);
color: $white;
font-family: $sans-serif;
display: inline-block;
letter-spacing: 1px;
margin-top: ($baseline/4);
margin-left: ($baseline/4);
padding: 15px 20px;
color: $lighter-base-font-color;
margin-bottom: $baseline;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
&:hover, &:focus {
background: $blue-l2;
text-decoration: none;
}
}
a {
background-color: $blue;
border: 1px solid $blue;
box-shadow: 0 1px 8px 0 $shadow-l1;
@include box-sizing(border-box);
color: $white;
font-family: $sans-serif;
display: inline-block;
letter-spacing: 1px;
margin-top: ($baseline/4);
margin-left: ($baseline/4);
padding: 15px 20px;
&:hover, &:focus {
background: $blue-l2;
text-decoration: none;
}
}
}
// +Dashboard - Course Listing
// ====================
.dashboard {
.my-courses {
@include float(left);
margin: 0;
margin-bottom: $baseline * 2;
width: flex-grid(9);
@@ -263,6 +287,7 @@
.header-courses {
@extend %t-title5;
@include padding-right($baseline/2);
}
}
@@ -293,7 +318,6 @@
// +Dashboard - Course
// ====================
.dashboard .my-courses {
&:focus {
outline: none;
}
@@ -303,7 +327,9 @@
@include box-sizing(box);
@include transition(all 0.15s linear 0s);
@include clearfix();
@extend %ui-depth2;
margin: ($baseline/2);
.details {
@@ -312,12 +338,14 @@
.wrapper-course-image {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(3);
.cover {
@include box-sizing(border-box);
@include transition(all 0.15s linear 0s);
@include float(left);
overflow: hidden;
position: relative;
max-height: 120px;
@@ -333,6 +361,7 @@
// "enrolled as" status
.sts-enrollment {
@include float(left);
width: 100%;
position: relative;
bottom: 15px;
@@ -346,6 +375,7 @@
.deco-graphic {
position: absolute;
top: -5px;
@include right(0);
}
@@ -353,6 +383,7 @@
@extend %ui-depth1;
@extend %copy-badge;
@extend %t-demi-strong;
font-size: 0.6em;
line-height: 1.5em;
border-radius: 0;
@@ -364,16 +395,18 @@
.wrapper-course-details {
display: block;
@include float(left);
width: flex-grid(9);
padding: 0;
}
.course-title {
a, span {
@extend %t-title3;
@extend %t-light;
display: inline-block;
margin-bottom: ($baseline/2);
@@ -385,19 +418,24 @@
.course-info {
display: block;
@include float(left);
width: flex-grid(4);
padding: 0;
margin-top: ($baseline/2);
[class*="info-"] {
color: $gray-d1;
@extend %t-title6;
display: inline-block;
}
.info-date-block {
@extend %t-title7;
color: $gray; // WCAG 2.0 AA compliant
display: block;
}
@@ -405,7 +443,9 @@
.wrapper-course-actions {
display: block;
@include float(right);
width: flex-grid(8);
padding: 0;
margin-top: ($baseline/2);
@@ -418,6 +458,7 @@
@include box-sizing(border-box);
@include margin-right($baseline/2);
@include float(right);
min-width: ($baseline*2);
color: $gray-d3;
border-radius: 3px;
@@ -450,10 +491,12 @@
.wrapper-action-more {
display: inline-block;
position: relative;
@include float(right);
.action-more {
@include font-size(14);
box-shadow: none;
background: $white;
background-image: none;
@@ -465,10 +508,13 @@
.actions-dropdown {
@extend %ui-no-list;
@extend %ui-depth1;
display: none;
position: absolute;
top: ($baseline*2);
@include right(19px);
pointer-events: none;
min-width: ($baseline*7);
@@ -479,7 +525,9 @@
.actions-dropdown-list {
@extend %ui-no-list;
@include box-sizing(border-box);
display: table;
box-shadow: 0 1px 1px $shadow-l1;
position: relative;
@@ -491,10 +539,12 @@
background: $white;
// ui triangle/nub
&:after,
&:before {
&::after,
&::before {
bottom: 100%;
@include right(6px);
border: solid transparent;
content: " ";
height: 0;
@@ -503,14 +553,15 @@
pointer-events: none;
}
&:after {
&::after {
border-color: $transparent;
border-bottom-color: $white;
border-width: 6px;
@include margin-right(1px);
}
&:before {
&::before {
border-color: $transparent;
border-bottom-color: $gray-l3;
border-width: 7px;
@@ -519,6 +570,7 @@
.actions-item {
@extend %t-title7;
display: block;
margin: 0;
@@ -531,7 +583,7 @@
&:hover, &:focus {
border: 1px solid transparent;
}
}
}
}
}
@@ -543,9 +595,12 @@
border: 1px solid $border-color-2;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-top: 17px;
@include margin-right(flex-gutter());
padding: ($baseline/4);
width: flex-grid(8);
@include float(left);
@include box-sizing(border-box);
@@ -572,6 +627,7 @@
.enter-course {
@extend %btn-pl-white-base;
@include float(right);
&.archived {
@@ -593,6 +649,7 @@
.message {
@extend %ui-depth1;
border-radius: 3px;
display: none;
margin: $baseline 0 ($baseline/2) 0;
@@ -603,6 +660,7 @@
// STATE: shown
&.is-shown {
@include clearfix();
display: block;
}
@@ -620,6 +678,7 @@
.actions {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
@@ -629,6 +688,7 @@
.message-copy .title {
@extend %t-title6;
@extend %t-weight4;
line-height: 1em;
margin-bottom: ($baseline/4);
}
@@ -636,14 +696,13 @@
.message-copy,
.message-copy .copy {
@extend %t-copy-sub1;
margin: 2px 0 0 0;
}
// CASE: expandable
&.is-expandable {
.wrapper-tip {
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
@@ -665,14 +724,14 @@
.wrapper-extended {
@include transition(opacity $tmg-f2 ease-in-out 0);
display: none;
opacity: 0.0;
opacity: 0;
}
}
// STATE: is expanded
&.is-expanded {
.ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
@@ -681,18 +740,18 @@
@include ltr {
@include transform(rotate(90deg));
}
@include transform-origin(50% 50%);
}
.wrapper-extended {
display: block;
opacity: 1.0;
opacity: 1;
}
}
// TYPE: upsell
&.message-upsell {
.wrapper-tip {
@include clearfix();
@@ -703,8 +762,10 @@
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(18);
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/4);
}
@@ -726,35 +787,44 @@
}
}
.action-upgrade-container{
.action-upgrade-container {
@include float(right);
display: inline-block;
margin-top: ($baseline/2);
}
.action-upgrade {
@extend %btn-primary-green;
@include clearfix();
position: relative;
@include left($baseline/2);
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
.action-upgrade-icon{
@include float(left);
display: inline;
@include margin-right($baseline*0.4);
margin-top: ($baseline/4);
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
background-position: -($baseline*0.3);
background-color: white;
width: ($baseline*0.8);
height: ($baseline*0.7);
}
.deco-graphic {
position: absolute;
top: -($baseline/4);
@include left(-($baseline*0.75));
width: ($baseline*2);
}
@@ -770,11 +840,13 @@
.copy {
@extend %t-action3;
@extend %t-weight4;
@include margin-right($baseline);
}
.copy-sub {
@extend %t-action4;
opacity: 0.875;
}
}
@@ -790,14 +862,17 @@
.message-copy {
@extend %t-copy-sub1;
margin: 0;
}
.credit-action {
.credit-btn {
@extend %btn-pl-yellow-base;
@include float(right);
@include margin-right(5px);
background-image: none ;
text-shadow: none;
box-shadow: none;
@@ -806,7 +881,6 @@
}
.actions {
.action {
@include float(left);
@include margin(0, 15px, 0, 0);
@@ -818,6 +892,7 @@
.btn {
@include box-sizing(border-box);
@include float(left);
border-radius: 3px;
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
@@ -828,7 +903,8 @@
cursor: default !important;
&:hover, &:focus {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100% ));
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
background: #eee;
}
}
@@ -836,6 +912,7 @@
.btn {
@include float(left);
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
@@ -854,7 +931,6 @@
}
&.exam-register {
.message-copy {
margin-top: ($baseline/4);
width: 55%;
@@ -870,6 +946,7 @@
.exam-button {
@include button(simple, $pink);
@include float(right);
margin-top: 0;
}
@@ -892,17 +969,16 @@
&.course-status-certrendering {
.btn {
margin-top: 2px;
}
}
&.course-status-certavailable {
.message-copy {
width: flex-grid(6, 12);
position: relative;
@include float(left);
}
@@ -911,6 +987,7 @@
.action {
@include margin(0, 0, ($baseline/2), ($baseline*.75));
float: none;
text-align: center;
@@ -925,11 +1002,15 @@
.action-certificate .btn {
@extend %btn-inherited-primary;
@include box-sizing(border-box);
float: none;
border-radius: 3px;
display: block;
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
text-align: center;
a:link, a:visited {
@@ -951,12 +1032,14 @@
.action-share {
@include float(right);
margin: 0;
}
}
.certificate-explanation {
@extend %t-copy-sub1;
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
@@ -964,17 +1047,22 @@
.verification-reminder {
width: flex-grid(8, 12);
@include float(left);
position: relative;
}
.verification-cta {
width: flex-grid(4, 12);
@include float(left);
position: relative;
.btn {
@extend %btn-pl-green-base;
@include float(right);
}
}
@@ -988,6 +1076,7 @@
.related-programs-preface {
@include float(left);
font-weight: bold;
}
@@ -999,6 +1088,7 @@
li {
@include float(left);
display: inline;
padding: 0 0.5em;
border-right: 1px solid;
@@ -1006,6 +1096,7 @@
.category-icon {
@include float(left);
@include margin-right($baseline/4);
margin-top: ($baseline/10);
background-color: transparent;
background-size: 100%;
@@ -1075,9 +1166,11 @@
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -5px;
@include right(0);
}
@@ -1124,9 +1217,9 @@
// ====================
// status - language
.status-language {
.icon {
@include font-size(17);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
@@ -1140,7 +1233,6 @@
// status - verification
.status-verification {
.status-title {
margin: 0 0 ($baseline/4) 0;
}
@@ -1152,6 +1244,7 @@
.status-data-message {
@extend %t-copy-sub1;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
@@ -1160,22 +1253,29 @@
.action {
@extend %t-weight4;
display: block;
@include font-size(14);
}
}
.status-note {
@extend %t-copy-sub2;
position: relative;
p {
@extend %t-copy-sub2;
}
.deco-arrow {
@include triangle(($baseline/2), $m-gray-d3, up);
position: absolute;
@include left(45%);
top: -6px;
}
}
@@ -1192,7 +1292,9 @@
.action-reverify {
@extend %btn-primary-error;
@extend %t-weight4;
display: block;
@include font-size(14);
}
@@ -1231,7 +1333,7 @@
// Warning for status verification
&.warning {
border-top: 3px solid #ffc01f !important;
border-top: 3px solid #ffc01f !important;
.status-title {
font-weight: 400 !important;
@@ -1250,6 +1352,7 @@
text-decoration: none;
display: block;
}
.btn:hover {
cursor: pointer;
color: #fff;
@@ -1261,7 +1364,6 @@
// status - verification
.status--verification {
.data {
white-space: normal !important;
text-overflow: no !important;
@@ -1274,7 +1376,6 @@
// STATE: is denied
&.is-denied {
.data {
color: $error-color !important;
}
@@ -1288,29 +1389,33 @@
.msg__title {
@extend %hd-lv5;
color: $lighter-base-font-color;
}
.msg__copy {
@extend %copy-metadata;
color: $lighter-base-font-color;
p {
@extend %t-copy;
}
}
p.course-block{
p.course-block{
border-style: solid;
border-color: #E3DC86;
border-color: #e3dc86;
padding: ($baseline/4);
border-width: 1px;
background: #FDFBE4;
background: #fdfbe4;
}
.enter-course-blocked{
.enter-course-blocked{
@include box-sizing(border-box);
@include float(left);
display: block;
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
@@ -1325,6 +1430,7 @@
&.archived {
@include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
padding: 6px 32px 7px;
@@ -1338,8 +1444,9 @@ a.disable-look{
color: #808080;
}
a.fade-cover{
a.fade-cover {
@extend .cover;
opacity: 0.5;
}
@@ -1347,7 +1454,6 @@ a.fade-cover{
// +Dashboard - Banner
// ====================
.dashboard-banner {
&:empty {
display: none;
}
@@ -1357,6 +1463,7 @@ a.fade-cover{
.msg {
@include clearfix();
font-family: $sans-serif;
padding-bottom: $baseline;
border-bottom: thin solid $gray;
@@ -1364,6 +1471,7 @@ a.fade-cover{
&.title {
@extend %t-title5;
@extend %t-weight4;
font-family: $f-sans-serif;
// Overriding Platform h2 styles
@@ -1372,7 +1480,6 @@ a.fade-cover{
}
&.has-actions {
.donate-content {
width: flex-grid(8, 12);
}
@@ -1402,6 +1509,7 @@ a.fade-cover{
.action-donate {
@extend %btn-primary-blue;
vertical-align: middle;
padding-top: ($baseline/2);
padding-bottom: ($baseline/2);
@@ -1424,6 +1532,7 @@ a.fade-cover{
// Dashboard alert messages
.activation-message-container {
@include clearfix();
margin: 0 auto 0;
padding-top: ($baseline/2);
max-width: grid-width(12);
@@ -1432,7 +1541,6 @@ a.fade-cover{
}
.account-activation {
.message-copy {
position: relative;
left: 2em;
@@ -1454,7 +1562,7 @@ a.fade-cover{
margin-bottom: 0;
}
&.aa-icon .message-copy:before {
&.aa-icon .message-copy::before {
position: absolute;
left: -1em;
content: "\f05a"; // fa-info-circle
@@ -1469,7 +1577,7 @@ a.fade-cover{
background-color: $palette-success-back;
border: $palette-success-border 1px solid;
&.aa-icon .message-copy:before {
&.aa-icon .message-copy::before {
position: absolute;
left: -1em;
content: "\f00c"; // fa-check
@@ -1484,7 +1592,7 @@ a.fade-cover{
background-color: $palette-error-back;
border: $palette-error-border 1px solid;
&.aa-icon .message-copy:before {
&.aa-icon .message-copy::before {
position: absolute;
left: -1em;
content: "\f06a"; // fa-exclamation-circle

3
lms/static/sass/multicourse/_error-pages.scss
View File

@@ -1,10 +1,13 @@
section.outside-app {
@extend .container;
@include text-align(left);
padding: ($baseline*4) 0;
h1 {
@extend h2;
margin-bottom: ($baseline*2);
text-align: center;
}

15
lms/static/sass/multicourse/_help.scss
View File

@@ -1,21 +1,23 @@
.static-container.help {
section.questions {
@include clearfix();
nav.categories {
border: 1px solid rgb(220,220,220);
@include box-sizing(border-box);
@include float(left);
@include margin-left(flex-gutter());
padding: 20px;
width: flex-grid(3);
a {
display: block;
letter-spacing: 1px;
margin: 0px -20px;
@include padding(12px, 0px, 12px, 20px);
margin: 0 -20px;
@include padding(12px, 0, 12px, 20px);
@include text-align(left);
&:hover, &:focus {
@@ -27,13 +29,14 @@
.responses {
@include float(left);
width: flex-grid(9);
.category {
padding-top: 40px;
&:first-child {
padding-top: 0px;
padding-top: 0;
}
> h2 {
@@ -58,8 +61,11 @@
.answer {
display: none;
color: #3c3c3c;
@include padding-left(16px);
font-family: $serif;
li {
line-height: 1.6em;
}
@@ -67,7 +73,6 @@
// opened states
&.opened {
h3 {
background: url('/static/images/bullet-open.png') no-repeat left 0.25em;
}

98
lms/static/sass/multicourse/_home.scss
View File

@@ -10,12 +10,14 @@ $course-search-input-height: ($button-size);
> .container {
@include box-sizing(border-box);
width: flex-grid(12);
}
> header {
@include linear-gradient($homepage__header--gradient__color--alpha, $homepage__header--gradient__color--bravo);
@include clearfix();
background-size: cover;
background-image: $homepage-bg-image;
box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1;
@@ -25,7 +27,9 @@ $course-search-input-height: ($button-size);
.outer-wrapper {
@include clearfix();
@extend .animation-home-header-pop-up;
position: relative;
margin: 0 auto;
padding: ($baseline*3);
@@ -41,6 +45,7 @@ $course-search-input-height: ($button-size);
@include shift(2);
@include box-sizing(border-box);
@include transition(all 0.2s linear 0s);
position: relative;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.5);
background: $white;
@@ -78,13 +83,15 @@ $course-search-input-height: ($button-size);
@include box-sizing(border-box);
@include transition(all 0.2s linear 0s);
@include text-align(left);
display: inline-block;
top: 0;
opacity: 1.0;
opacity: 1;
padding-bottom: ($baseline);
h1 {
@include text-align(left);
margin-bottom: 0;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
@@ -92,6 +99,7 @@ $course-search-input-height: ($button-size);
p {
@extend h2;
margin-bottom: 0;
text-transform: none;
font-style: italic;
@@ -105,8 +113,10 @@ $course-search-input-height: ($button-size);
@include float(left);
@include padding-right($button-size);
@include padding-left($baseline*0.5);
@extend %ui-depth1;
@extend %t-title5;
border: 2px solid $gray-l3;
border-radius: 3px;
box-shadow: none;
@@ -119,6 +129,7 @@ $course-search-input-height: ($button-size);
// STATE: focus
&:focus {
@extend %no-outline;
border-color: $m-blue-d1;
}
}
@@ -126,9 +137,11 @@ $course-search-input-height: ($button-size);
.search-button {
@include right($baseline*1.5);
@include border-radius(1px, 3px, 3px, 1px);
@extend %ui-depth2;
@extend %t-icon3;
@extend %t-strong;
position: absolute;
border: 2px solid $m-blue-d1;
box-shadow: none;
@@ -154,11 +167,14 @@ $course-search-input-height: ($button-size);
background: $white;
background: $course-header-bg;
border: 1px solid $border-color-3;
@include border-left(0);
@include box-sizing(border-box);
// box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
height: 120px;
@include float(left);
padding: 4px;
position: relative;
vertical-align: top;
@@ -178,17 +194,26 @@ $course-search-input-height: ($button-size);
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
border-radius: 4px;
box-shadow: 0 1px 12px 0 $shadow-d1;
@include box-sizing(border-box);
border: 2px solid rgba(255,255,255, 0.8);
height: 60px;
@include left(50%);
margin-top: -30px;
@include margin-left(-($baseline*1.5));
position: absolute;
top: 50%;
@include transition(all 0.15s linear 0s);
width: 60px;
&::after {
@@ -197,8 +222,10 @@ $course-search-input-height: ($button-size);
content: "\25B6";
display: block;
font: normal 2em/1em $sans-serif;
@include left(50%);
@include margin-left(-11px);
margin-top: -16px;
position: absolute;
text-shadow: 0 -1px rgba(0,0,0, 0.8);
@@ -215,6 +242,7 @@ $course-search-input-height: ($button-size);
&:hover, &:focus {
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
border-color: rgba(255,255,255, 0.9);
@@ -229,6 +257,7 @@ $course-search-input-height: ($button-size);
.highlighted-courses {
@include box-sizing(border-box);
margin-bottom: ($baseline*2);
position: relative;
width: flex-grid(12);
@@ -236,13 +265,14 @@ $course-search-input-height: ($button-size);
> h2 {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border: 1px solid $border-color-2;
border-radius: 4px;
border-top-color: $border-color-1;
box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 $shadow;
box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0 12px 0 $shadow;
color: $lighter-base-font-color;
letter-spacing: 1px;
margin-bottom: 0px;
margin-bottom: 0;
margin-top: -15px;
padding: 10px 10px 8px;
text-align: center;
@@ -253,19 +283,21 @@ $course-search-input-height: ($button-size);
.university-partners {
border-bottom: 1px solid $border-color-2;
margin-bottom: 0px;
margin-bottom: 0;
overflow: hidden;
position: relative;
width: flex-grid(12);
&::before {
@extend %faded-hr-divider-medium;
content: "";
display: block;
}
&::after {
@extend %faded-hr-divider-medium;
content: "";
display: block;
}
@@ -273,6 +305,7 @@ $course-search-input-height: ($button-size);
hr {
@extend %faded-hr-divider-light;
border: none;
margin: 0;
position: relative;
@@ -280,7 +313,8 @@ $course-search-input-height: ($button-size);
&::after {
@extend %faded-hr-divider;
bottom: 0px;
bottom: 0;
content: "";
display: block;
position: absolute;
@@ -290,22 +324,25 @@ $course-search-input-height: ($button-size);
.partners {
margin: 0 auto;
padding: 20px 0px;
padding: 20px 0;
text-align: center;
li.partner {
display: inline-block;
padding: 0px 30px;
padding: 0 30px;
position: relative;
vertical-align: middle;
overflow: hidden;
&::before {
@extend %faded-vertical-divider;
content: "";
display: block;
height: 80px;
@include right(0);
position: absolute;
top: -5px;
width: 1px;
@@ -313,10 +350,13 @@ $course-search-input-height: ($button-size);
&::after {
@extend %faded-vertical-divider-light;
content: "";
display: block;
height: 80px;
@include right(1px);
position: absolute;
top: -5px;
width: 1px;
@@ -338,26 +378,35 @@ $course-search-input-height: ($button-size);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 200px;
@include left(50%);
@include margin-left(-100px);
margin-top: -100px;
opacity: 0;
width: 200px;
position: absolute;
@include transition(all $tmg-f2 ease-in-out 0s);
top: 50%;
z-index: 1;
}
.name {
bottom: -60px;
@include left(0);
position: absolute;
text-align: center;
@include transition(all $tmg-f2 ease-in-out 0s);
width: 100%;
z-index: 2;
@@ -365,6 +414,7 @@ $course-search-input-height: ($button-size);
color: $base-font-color;
font: 700 italic 1.4em/1.4em $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all 0.15s ease-in-out 0s);
&:hover, &:focus {
@@ -375,7 +425,9 @@ $course-search-input-height: ($button-size);
img {
position: relative;
@include transition(all $tmg-f2 ease-in-out 0s);
vertical-align: middle;
z-index: 2;
}
@@ -384,7 +436,7 @@ $course-search-input-height: ($button-size);
text-decoration: none;
&::before {
opacity: 1.0;
opacity: 1;
}
.name {
@@ -400,23 +452,27 @@ $course-search-input-height: ($button-size);
&.university-partners2x6 {
@include box-sizing(border-box);
width: flex-grid(12, 12);
.partners {
@include box-sizing(border-box);
@include clearfix();
@include margin-left(60px);
padding: 12px 0;
.partner {
@include box-sizing(border-box);
width: flex-grid(2, 12);
display: block;
@include float(left);
padding: 0 12px;
a {
img {
width: 100%;
height: auto;
@@ -444,30 +500,37 @@ $course-search-input-height: ($button-size);
header {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border-bottom: 1px solid $border-color-2;
@include clearfix();
padding: 10px 20px 8px;
position: relative;
h2 {
@include float(left);
margin: 0;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
.action.action-mediakit {
@include float(right);
position: relative;
top: 1px;
font-family: $sans-serif;
font-size: 14px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:after {
&::after {
position: relative;
top: -1px;
display: inline-block;
@include margin(0, 0, 0, 5px);
content: "➤";
font-size: 11px;
}
@@ -482,6 +545,7 @@ $course-search-input-height: ($button-size);
.news {
@include box-sizing(border-box);
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
padding: 20px;
width: flex-grid(12);
@@ -490,17 +554,22 @@ $course-search-input-height: ($button-size);
border-bottom: 1px solid $border-color-2;
margin-bottom: $baseline;
padding-bottom: $baseline;
@include clearfix();
> article {
border: 1px dotted transparent;
border-color: $border-color-2;
@include box-sizing(border-box);
@include clearfix();
@include float(left);
@include margin-right(flex-gutter());
padding: 10px;
@include transition(all 0.15s linear 0s);
width: flex-grid(4);
&:hover, &:focus {
@@ -515,11 +584,17 @@ $course-search-input-height: ($button-size);
.post-graphics {
border: 1px solid $border-color-1;
@include box-sizing(border-box);
display: block;
@include float(left);
height: 84px;
@include margin-right(flex-gutter());
overflow: hidden;
width: flex-grid(4);
vertical-align: top;
@@ -532,6 +607,7 @@ $course-search-input-height: ($button-size);
.post-name {
@include float(left);
width: flex-grid(8);
vertical-align: top;
@@ -566,10 +642,12 @@ $course-search-input-height: ($button-size);
line-height: 1.6em;
font-family: $serif;
font-style: italic;
@include margin-left($baseline/2);
&.read-more {
@include float(right);
color: lighten($base-font-color, 50%);
&:hover, &:focus {

23
lms/static/sass/multicourse/_jobs.scss
View File

@@ -10,6 +10,7 @@
small.author {
@include text-align(right);
display: block;
color: rgb(100, 100, 100);
}
@@ -20,14 +21,17 @@
.message {
@include clearfix();
margin-bottom: ($baseline*4);
position: relative;
.photo {
background: rgb(255,255,255);
border: 1px solid rgb(210,210,210);
@include float(left);
@include margin-right(flex-gutter());
padding: 1px;
width: flex-grid(4);
@@ -40,10 +44,12 @@
header {
@include float(left);
width: flex-grid(7);
blockquote {
@include margin-left(0);
margin-bottom: ($baseline*2);
&:last-child {
@@ -52,6 +58,7 @@
p {
@include margin-left(0);
font-style: italic;
line-height: 1.6;
font-size: 1.1em;
@@ -71,6 +78,7 @@
.jobs-wrapper {
@include clearfix();
@include float(left);
padding-top: 80px;
width: flex-grid(12);
@@ -82,8 +90,11 @@
.jobs-sidebar {
@include box-sizing(border-box);
border: 1px solid rgb(220,220,220);
@include float(left);
padding: 20px;
width: flex-grid(3);
@@ -93,8 +104,9 @@
a {
display: block;
letter-spacing: 1px;
margin: 0px -20px;
@include padding(12px, 0px, 12px, 20px);
margin: 0 -20px;
@include padding(12px, 0, 12px, 20px);
@include text-align(left);
&:hover, &:focus {
@@ -112,19 +124,20 @@
.jobs-listing {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(9);
.job {
border-bottom: 1px solid rgb(220,220,220);
padding: 40px 0px;
padding: 40px 0;
&:first-child {
padding-top: 0px;
padding-top: 0;
}
&:last-child {
border: none;
padding-bottom: 0px;
padding-bottom: 0;
}
.inner-wrapper {

32
lms/static/sass/multicourse/_media-kit.scss
View File

@@ -4,13 +4,16 @@ $white: rgb(255,255,255);
.mediakit {
@include box-sizing(border-box);
margin: 0 auto;
padding: ($baseline*3) 0;
width: 980px;
.wrapper-mediakit {
border-radius: 4px;
@include box-sizing(border-box);
box-shadow: 0 1px 10px 0 $shadow-l1;
margin: ($baseline*3) 0 0 0;
border: 1px solid $border-color;
@@ -37,6 +40,7 @@ $white: rgb(255,255,255);
hr {
@extend %faded-hr-divider-light;
border: none;
margin: 0;
position: relative;
@@ -44,7 +48,8 @@ $white: rgb(255,255,255);
&::after {
@extend %faded-hr-divider;
bottom: 0px;
bottom: 0;
content: "";
display: block;
position: absolute;
@@ -58,6 +63,7 @@ $white: rgb(255,255,255);
color: $blue;
font-family: $sans-serif;
text-decoration: none;
@include transition(all 0.1s linear 0s);
.note {
@@ -66,19 +72,21 @@ $white: rgb(255,255,255);
font-family: $sans-serif;
font-size: 13px;
text-decoration: none;
@include transition(all 0.1s linear 0s);
&:before {
&::before {
position: relative;
top: -1px;
@include margin(0, 5px, 0, 0);
content: "➤";
font-size: 11px;
}
}
&:hover, &:focus {
.note {
color: shade($blue, 25%);
}
@@ -107,17 +115,23 @@ $white: rgb(255,255,255);
article {
@include box-sizing(border-box);
width: 500px;
@include margin-right($baseline);
@include float(left);
}
aside {
border-radius: 2px;
@include box-sizing(border-box);
box-shadow: 0 1px 4px 0 $shadow;
width: 330px;
@include float(left);
border: 3px solid tint(rgb(96, 155, 216), 35%);
background: tint(rgb(96, 155, 216), 35%);
@@ -138,7 +152,6 @@ $white: rgb(255,255,255);
}
a.action-download {
.note {
width: 100%;
display: inline-block;
@@ -148,6 +161,7 @@ $white: rgb(255,255,255);
figure {
@include box-sizing(border-box);
background: $white;
width: 100%;
@@ -172,7 +186,9 @@ $white: rgb(255,255,255);
// library section
.library {
border-radius: 2px;
@include box-sizing(border-box);
box-shadow: 0 1px 4px 0 $shadow;
border: 3px solid tint($light-gray,50%);
padding: 0;
@@ -200,6 +216,7 @@ $white: rgb(255,255,255);
.listing {
@include clearfix();
background: $white;
margin: 0;
padding: ($baseline*2);
@@ -207,9 +224,13 @@ $white: rgb(255,255,255);
li {
@include box-sizing(border-box);
overflow-y: auto;
@include float(left);
width: 350px;
@include margin(0, 0, $baseline, 0);
&:nth-child(odd) {
@@ -218,10 +239,11 @@ $white: rgb(255,255,255);
}
figure {
a {
border-radius: 2px;
@include box-sizing(border-box);
box-shadow: 0 1px 2px 0 $shadow-l1;
display: block;
min-height: 380px;

15
lms/static/sass/multicourse/_press_release.scss
View File

@@ -36,7 +36,9 @@
> article {
border: 1px solid rgb(220,220,220);
border-radius: 10px;
@include box-sizing(border-box);
box-shadow: 0 2px 16px 0 $shadow-l1;
margin: 0 auto;
padding: 80px 80px 40px;
@@ -44,15 +46,17 @@
.footer {
hr {
margin: 80px 0px 40px;
margin: 80px 0 40px;
}
}
}
figure {
display: block;
@include float(right);
@include margin(20px, 0px, 60px, 20px);
@include margin(20px, 0, 60px, 20px);
width: 300px;
img {
@@ -62,6 +66,7 @@
figcaption {
font: normal 0.8em/1em $serif;
padding: ($baseline/4);
a {
font: normal 1em $serif;
}
@@ -80,7 +85,7 @@
margin-top: $baseline;
p + p {
margin-top: 0;
margin-top: 0;
}
}
@@ -98,18 +103,22 @@
.fb-like {
margin-top: 8px;
@include margin-left($baseline/2);
@include float(left);
}
p {
@include float(left);
margin-top: 8px;
@include margin-right($baseline/2);
}
a {
display: block;
@include float(left);
}
}

25
lms/static/sass/multicourse/_survey-page.scss
View File

@@ -1,7 +1,6 @@
// full-page course survey styles
.view-survey {
.container {
padding: ($baseline*1.5) 0;
}
@@ -9,20 +8,22 @@
.content-primary {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(9,12);
}
.content-supplementary {
@include float(left);
width: flex-grid(3,12);
margin-top: ($baseline*2);
}
.header-survey {
.title {
@extend %t-title4;
@extend %t-weight4;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
@@ -30,12 +31,14 @@
.course-info {
@extend %t-title;
padding-bottom: ($baseline/4);
}
.course-org,
.course-number {
@extend %t-title8;
display: inline-block;
text-transform: uppercase;
color: $gray-l1;
@@ -47,13 +50,13 @@
.course-name {
@extend %t-title5;
display: block;
}
}
// reset nasty LMS default styles
form {
h1, h2 {
text-align: inherit;
letter-spacing: inherit;
@@ -64,6 +67,7 @@
.instructions {
margin-bottom: $baseline;
font-style: italic;
@extend %t-copy-base;
}
@@ -71,18 +75,22 @@
display: block;
margin-bottom: ($baseline);
border-top: 3px solid $error-color;
@include padding( ($baseline), ($baseline*1.5), ($baseline*1.5), ($baseline*1.5) );
@include padding(($baseline), ($baseline*1.5), ($baseline*1.5), ($baseline*1.5));
background-color: tint($error-color,85%);
.message-title {
@extend %t-title5;
@extend %t-weight4;
margin-bottom: ($baseline/2);
color: $error-color;
}
.message-copy {
@extend %ui-no-list;
line-height: 1.3;
.error-item {
@@ -101,20 +109,21 @@
.field {
margin-bottom: $baseline;
&.required label:after {
&.required label::after {
content: "*";
@include margin-left($baseline/4);
}
.tip {
@extend %t-copy-sub2;
display: block;
margin-top: ($baseline/4);
color: $gray;
}
&.is-focused {
.tip {
color: $base-font-color;
}
@@ -125,11 +134,13 @@
.action-primary {
@extend %m-btn-primary;
@extend %t-copy-base;
@include padding-left($baseline*2);
}
.action-cancel {
@extend %t-copy-sub1;
@include margin-left($baseline);
}
@@ -137,6 +148,7 @@
label {
@extend %t-copy-base;
@extend %t-weight4;
display: block;
font-style: normal;
}
@@ -156,6 +168,7 @@
p {
@extend %t-copy-sub1;
color: $gray;
}
}

14
lms/static/sass/partials/base/_variables.scss
View File

@@ -197,11 +197,11 @@ $ui-notification-height: ($baseline*10);
// ====================
// social platforms
$twitter-blue: #55ACEE;
$facebook-blue: #3B5998;
$linkedin-blue: #0077B5;
$google-red: #D73924;
$microsoft-black: #000000;
$twitter-blue: #55acee;
$facebook-blue: #3b5998;
$linkedin-blue: #0077b5;
$google-red: #d73924;
$microsoft-black: #000;
// shadows
$shadow: rgba(0,0,0,0.2) !default;
@@ -296,7 +296,7 @@ $m-blue-d2: $blue !default;
$m-blue-d3: rgb(18,111,154) !default;
$m-blue-d4: rgb(10,74,103) !default;
$m-blue-d5: rgb(0,158,231) !default;
$m-blue-d6: #256A97 !default;
$m-blue-d6: #256a97 !default;
$m-blue-t0: rgba($m-blue,0.125) !default;
$m-blue-t1: rgba($m-blue,0.25) !default;
$m-blue-t2: rgba($m-blue,0.50) !default;
@@ -510,7 +510,7 @@ $courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238
$courseware-header-bg: transparent !default;
$courseware-footer-border: none !default;
$courseware-footer-shadow: none !default;
$courseware-footer-margin: 0px !default;
$courseware-footer-margin: 0 !default;
$courseware-border-bottom-color: rgb(68,162,222) !default;
$courseware-button-border-color: rgb(230,230,230) !default;
$courseware-hover-color: rgb(51,52,53) !default;

39
lms/static/sass/search/_search.scss
View File

@@ -1,6 +1,6 @@
.search-bar {
@include box-sizing(border-box);
position: relative;
.search-field-wrapper {
@@ -9,7 +9,9 @@
.search-field {
@extend %t-weight2;
@include box-sizing(border-box);
top: 5px;
width: 100%;
border-radius: 4px;
@@ -21,15 +23,19 @@
.search-button:hover,
.cancel-button:hover {
@extend %t-regular;
@include box-sizing(border-box);
@include right(0);
display: block;
position: absolute;
top: 0;
border: none;
border-radius: 0;
@include border-top-right-radius(3px);
@include border-bottom-right-radius(3px);
background: $uxpl-blue-base;
padding: 0 10px;
height: 35px;
@@ -42,9 +48,9 @@
&:hover,
&:focus,
&:active {
background: $uxpl-blue-hover-active;
box-shadow: none;
border: none;
background: $uxpl-blue-hover-active;
box-shadow: none;
border: none;
}
}
@@ -55,7 +61,6 @@
}
.search-results {
display: none;
.search-info {
@@ -65,6 +70,7 @@
.search-count {
@include float(right);
color: $gray-l1;
}
}
@@ -76,6 +82,7 @@
.search-results-item {
@include padding-right(140px);
position: relative;
border-bottom: 1px solid $gray-l4;
padding: $baseline ($baseline/2);
@@ -89,34 +96,43 @@
.result-excerpt {
margin-bottom: $baseline;
}
.result-type {
@include right($baseline/2);
position: absolute;
bottom: $baseline;
font-size: 14px;
color: $gray-l1;
}
.result-course-name {
@include margin-right(1em);
font-size: 14px;
color: $gray-l1;
}
.result-location {
font-size: 14px;
color: $gray-l1;
}
.result-link {
@include right($baseline/2);
position: absolute;
top: $baseline;
line-height: 1.6em;
text-transform: uppercase;
}
.search-results-ellipsis {
@extend %t-copy-sub2;
color: $gray;
&:after {
&::after {
content: '\2026';
}
}
@@ -134,24 +150,28 @@
}
.courseware-search-bar {
width: flex-grid(7);
width: flex-grid(7);
}
.dashboard-search-bar {
@include float(right);
@include margin-left(flex-gutter());
margin-bottom: $baseline;
padding: 0;
width: flex-grid(3);
label {
@extend %t-regular;
font-family: $sans-serif;
color: $gray;
font-size: 13px;
font-style: normal;
text-transform: uppercase;
}
.search-field {
background: $white;
box-shadow: 0 1px 0 0 $white, inset 0 0 3px 0 $shadow-l2;
@@ -162,19 +182,24 @@
.dashboard-search-results {
@include float(left);
margin: 0;
padding: 0;
width: flex-grid(9);
min-height: 300px;
.search-info {
padding-bottom: lh(1.75);
a {
display: block;
margin-bottom: lh(.5);
font-size: 13px;
}
h2 {
@extend %t-title5;
@include float(left);
@include clear(left);
}

17
lms/static/sass/shared-v2/_base.scss
View File

@@ -2,24 +2,25 @@
// removing the outline on any element that we make programmatically focusable
[tabindex="-1"] {
outline: none;
outline: none;
}
.window-wrap {
background-color: $lms-background-color;
background-color: $lms-background-color;
}
.content-wrapper {
@include span(12, none);
margin: 0 auto;
@include span(12, none);
@media print {
padding-bottom: 0;
}
margin: 0 auto;
@media print {
padding-bottom: 0;
}
}
// Support .sr as well as .sr-only for backward compatibility
.sr {
@extend .sr-only;
@extend .sr-only;
}

353
lms/static/sass/shared-v2/_footer.scss
View File

@@ -2,199 +2,212 @@
// ====================
.wrapper-footer {
@include clearfix();
@extend %ui-print-excluded;
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid palette(grayscale, x-back);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;
footer#footer-openedx {
@include clearfix();
@extend %ui-print-excluded;
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid palette(grayscale, x-back);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;
footer#footer-openedx {
box-sizing: border-box;
margin: 0 auto;
p, ol, ul {
font-family: $sans-serif;
// override needed for poorly scoped font-family styling on p a:link {}
a {
font-family: $sans-serif;
}
}
a {
@extend %link-text;
border-bottom: none;
&:hover,
&:focus,
&:active {
border-bottom: 1px dotted $link-color;
}
}
// colophon
.colophon {
@include span(12);
@media (min-width: $bp-screen-sm) {
@include span(8);
}
.nav-colophon {
@include clearfix();
box-sizing: border-box;
margin: 0 auto;
p, ol, ul {
font-family: $sans-serif;
margin: $footer_margin;
// override needed for poorly scoped font-family styling on p a:link {}
a {
font-family: $sans-serif;
}
ol {
list-style: none;
}
a {
@extend %link-text;
border-bottom: none;
li {
@include float(left);
@include margin-right($baseline*0.75);
a {
color: tint($black, 20%);
&:hover,
&:focus,
&:active {
border-bottom: 1px dotted $link-color;
color: $link-color;
}
}
&:last-child {
@include margin-right(0);
}
}
}
.colophon-about {
@include clearfix();
img {
@include float(left);
@include margin-right(0);
width: 68px;
height: 34px;
}
// colophon
.colophon {
@include span(12);
p {
@include float(left);
@include span(9);
@include margin-left($baseline);
@include padding-left($baseline);
@media(min-width: $bp-screen-sm) {
@include span(8);
}
.nav-colophon {
@include clearfix();
margin: $footer_margin;
ol {
list-style: none;
}
li {
@include float(left);
@include margin-right($baseline*0.75);
a {
color: tint($black, 20%);
&:hover,
&:focus,
&:active {
color: $link-color;
}
}
&:last-child {
@include margin-right(0);
}
}
}
.colophon-about {
@include clearfix();
img {
@include float(left);
@include margin-right(0);
width: 68px;
height: 34px;
}
p {
@include float(left);
@include span(9);
@include margin-left($baseline);
@include padding-left($baseline);
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
}
}
}
// references
.references {
@include span(4);
margin: -10px 0 0 0;
display: inline-block;
}
.wrapper-logo {
margin: ($baseline*0.75) 0;
a {
display: inline-block;
&:hover,
&:focus {
border-bottom: 0;
}
}
}
.copyright {
@include text-align(left);
margin: -2px 0 8px;
font-size: font-size(xx-small);
color: palette(grayscale, dark);
}
.nav-legal {
@include clearfix();
@include text-align(left);
li {
display: inline-block;
font-size: font-size(xx-small);
}
.nav-legal-02 a {
&:before {
@include margin-right(($baseline/4));
content: "-";
}
}
}
.nav-social {
@include text-align(right);
margin: 0;
li {
display: inline-block;
&:last-child {
@include margin-right(0);
}
a {
display: block;
&:hover,
&:focus,
&:active {
border: none;
}
}
img {
display: block;
}
}
}
// platform Open edX logo and link
.footer-about-openedx {
@include span(12);
@include text-align(right);
vertical-align: bottom;
@media(min-width: $bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
a {
@include float(right);
display: inline-block;
&:hover {
border-bottom: none;
}
}
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
}
}
}
// references
.references {
@include span(4);
margin: -10px 0 0 0;
display: inline-block;
}
.wrapper-logo {
margin: ($baseline*0.75) 0;
a {
display: inline-block;
&:hover,
&:focus {
border-bottom: 0;
}
}
}
.copyright {
@include text-align(left);
margin: -2px 0 8px;
font-size: font-size(xx-small);
color: palette(grayscale, dark);
}
.nav-legal {
@include clearfix();
@include text-align(left);
li {
display: inline-block;
font-size: font-size(xx-small);
}
.nav-legal-02 a {
&::before {
@include margin-right(($baseline/4));
content: "-";
}
}
}
.nav-social {
@include text-align(right);
margin: 0;
li {
display: inline-block;
&:last-child {
@include margin-right(0);
}
a {
display: block;
&:hover,
&:focus,
&:active {
border: none;
}
}
img {
display: block;
}
}
}
// platform Open edX logo and link
.footer-about-openedx {
@include span(12);
@include text-align(right);
vertical-align: bottom;
@media (min-width: $bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
a {
@include float(right);
display: inline-block;
&:hover {
border-bottom: none;
}
}
}
}
}
// marketing site design syncing
.view-register,
.view-login,
.view-passwordreset {
.wrapper-footer footer {
width: 960px;
.wrapper-footer footer {
width: 960px;
.colophon-about img {
margin-top: ($baseline*1.5);
}
.colophon-about img {
margin-top: ($baseline*1.5);
}
}
}

283
lms/static/sass/shared-v2/_header.scss
View File

@@ -1,156 +1,165 @@
// LMS header styles
.header-global {
@extend %ui-depth1;
@extend %ui-depth1;
box-sizing: border-box;
position: relative;
width: 100%;
border-bottom: 1px solid $header-border-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.logo-header {
display: inline;
}
.wrapper-header {
@include clearfix();
box-sizing: border-box;
position: relative;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
border-bottom: 1px solid $header-border-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
max-width: $lms-max-width;
.logo-header {
display: inline;
.left {
@include float(left);
}
.right {
@include float(right);
}
.logo {
@include float(left);
@include margin-right(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.course-header {
@include float(left);
@include margin(12px, 10px, 0, 10px);
color: $lms-label-color;
.provider {
font-weight: bold;
}
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.user-menu {
display: inline;
}
.list-inline {
&.nav-global {
@include margin(0, 0, 0, $baseline/2);
.btn {
text-transform: uppercase;
border: none;
padding: 0;
color: $lms-active-color;
background: transparent;
&:hover {
background: transparent;
color: $link-hover;
text-decoration: underline;
}
}
}
.item {
font-weight: font-weight(semi-bold);
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
}
.tab-nav-item{
@include float(left);
display: flex;
margin: 0;
justify-content: center;
.tab-nav-link{
font-size: font-size(base);
font-weight: font-weight(semi-bold);
color: palette(grayscale, dark);
padding: 5px 25px 23px;
display: inline-block;
&:active,
&:focus,
&:hover {
border-bottom: 4px solid $lms-border-color;
}
}
.active{
border-bottom: 4px solid $black-t3 !important;
}
}
}
// Style the courseware's slim version of the header
&.slim {
.wrapper-header {
@include clearfix();
box-sizing: border-box;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
max-width: $lms-max-width;
height: 60px;
.left {
@include float(left);
}
.logo img {
margin-top: 4px;
height: 30px;
}
.right {
@include float(right);
}
.course-header {
margin-top: 10px;
}
.logo {
@include float(left);
@include margin-right(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.list-inline.nav-global {
margin-top: 10px;
}
.course-header {
@include float(left);
@include margin(12px, 10px, 0px, 10px);
color: $lms-label-color;
.provider {
font-weight: bold;
}
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.user-menu {
display: inline;
}
.list-inline {
&.nav-global {
@include margin(0, 0, 0, $baseline/2);
.btn {
text-transform: uppercase;
border: none;
padding: 0;
color: $lms-active-color;
background: transparent;
&:hover {
background: transparent;
color: $link-hover;
text-decoration: underline;
}
}
}
.item {
font-weight: font-weight(semi-bold);
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
}
.tab-nav-item{
@include float(left);
display: flex;
margin: 0;
justify-content: center;
.tab-nav-link{
font-size: font-size(base);
font-weight: font-weight(semi-bold);
color: palette(grayscale, dark);
padding: 5px 25px 23px;
display: inline-block;
&:active,
&:focus,
&:hover {
border-bottom: 4px solid $lms-border-color;
}
}
.active{
border-bottom: 4px solid $black-t3 !important;
}
}
}
// Style the courseware's slim version of the header
&.slim {
.wrapper-header {
height: 60px;
.logo img {
margin-top: 4px;
height: 30px;
}
.course-header {
margin-top: 10px;
}
.list-inline.nav-global {
margin-top: 10px;
}
.wrapper-user-menu {
margin-top: 0;
}
}
.wrapper-user-menu {
margin-top: 0;
}
}
}
}
.doc-link {
@include float(right);
@include margin(($baseline*0.75), ($baseline*0.75), ($baseline*0.75), ($baseline*0.75));
font-size: 14px;
font-weight: bold;
color: $base-font-color;
@include float(right);
@include margin(($baseline*0.75), ($baseline*0.75), ($baseline*0.75), ($baseline*0.75));
&:visited {
color: $base-font-color;
}
font-size: 14px;
font-weight: bold;
color: $base-font-color;
&:visited {
color: $base-font-color;
}
}

130
lms/static/sass/shared-v2/_help-tab.scss
View File

@@ -1,86 +1,88 @@
.help-tab {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
z-index: z-index(front);
top: 250px;
left: 0;
position: fixed;
@include transform(rotate(-90deg));
@include transform-origin(0 0);
a:link,
a:visited {
cursor: pointer;
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize(palette(grayscale, dark), 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
z-index: z-index(front);
top: 250px;
left: 0;
position: fixed;
&:hover,
&:focus {
color: $white;
background: palette(primary, base);
}
a:link,
a:visited {
cursor: pointer;
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize(palette(grayscale, dark), 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: $white;
background: palette(primary, base);
}
}
}
.help-buttons {
padding: ($baseline/2) ($baseline*2.5);
padding: ($baseline/2) ($baseline*2.5);
a:link,
a:visited {
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: $white;
text-decoration: none;
display: block;
border: 1px solid $lms-border-color;
a:link,
a:visited {
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: $white;
text-decoration: none;
display: block;
border: 1px solid $lms-border-color;
&#feedback_link_problem {
border-bottom-style: none;
border-radius: ($baseline/2) ($baseline/2) 0 0;
}
&#feedback_link_question {
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
}
&:hover,
&:focus {
color: $white;
background: palette(primary, base);
}
&#feedback_link_problem {
border-bottom-style: none;
border-radius: ($baseline/2) ($baseline/2) 0 0;
}
&#feedback_link_question {
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
}
&:hover,
&:focus {
color: $white;
background: palette(primary, base);
}
}
}
#feedback_form {
input,
textarea {
font: {
size: font-size(base);
family: $font-family-sans-serif;
}
line-height: 1.4;
input,
textarea {
font: {
size: font-size(base);
family: $font-family-sans-serif;
}
textarea[name="details"] {
height: 150px;
}
line-height: 1.4;
}
textarea[name="details"] {
height: 150px;
}
}
#feedback_success_wrapper {
p {
padding: 0 $baseline $baseline;
}
p {
padding: 0 $baseline $baseline;
}
}
.feedback-form-select {
background: $white;
margin-bottom: $baseline;
width: 100%;
background: $white;
margin-bottom: $baseline;
width: 100%;
}

513
lms/static/sass/shared-v2/_modal.scss
View File

@@ -1,287 +1,300 @@
#lean_overlay {
@include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
display: none;
height:100%;
left: 0;
position: fixed;
top: 0;
width:100%;
z-index: 100;
@include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
display: none;
height:100%;
left: 0;
position: fixed;
top: 0;
width:100%;
z-index: 100;
}
.modal {
@include span(5);
@include span(5);
z-index: z-index(mid-front);
display: none;
position: absolute;
left: 50%;
padding: 8px;
border-radius: 3px;
box-shadow: 0 0 5px 0 $shadow-d1;
background: $gray-d2;
color: $base-font-color;
.inner-wrapper {
z-index: z-index(mid-front);
display: none;
position: absolute;
left: 50%;
padding: 8px;
border-radius: 3px;
box-shadow: 0 0 5px 0 $shadow-d1;
background: $gray-d2;
color: $base-font-color;
background: $modal-bg-color;
border-radius: 0;
border: 1px solid $lms-border-color;
box-shadow: inset 0 1px 0 0 $white-opacity-70;
overflow: hidden;
padding-left: ($baseline/2);
padding-right: ($baseline/2);
padding-bottom: ($baseline/2);
position: relative;
.inner-wrapper {
z-index: z-index(mid-front);
background: $modal-bg-color;
border-radius: 0;
border: 1px solid $lms-border-color;
box-shadow: inset 0 1px 0 0 $white-opacity-70;
overflow: hidden;
padding-left: ($baseline/2);
padding-right: ($baseline/2);
padding-bottom: ($baseline/2);
position: relative;
p {
font-size: font-size(small);
line-height: 1.4;
}
p {
font-size: font-size(small);
line-height: 1.4;
}
a {
&:hover,
&:focus {
text-decoration: underline;
}
}
a {
&:hover,
&:focus {
text-decoration: underline;
}
}
header {
z-index: z-index(mid-front);
margin-bottom: ($baseline*1.5);
overflow: hidden;
padding: 28px $baseline 0;
position: relative;
header {
z-index: z-index(mid-front);
margin-bottom: ($baseline*1.5);
overflow: hidden;
padding: 28px $baseline 0;
position: relative;
&::before {
@include background-image(
radial-gradient(
&::before {
@include background-image(
radial-gradient(
50% 50%, circle closest-side,
$white-opacity-80 0%,
$white-transparent 100%
)
);
content: '';
display: block;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: z-index(base);
}
)
);
hr {
@include background-image(
linear-gradient(
content: '';
display: block;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: z-index(base);
}
hr {
@include background-image(
linear-gradient(
180deg,
$white-transparent 0%,
$white-opacity-80 50%,
$white-transparent
)
);
height: 1px;
width: 100%;
border: none;
margin: 0;
position: relative;
z-index: z-index(base);
)
);
&::after {
@include background-image(
linear-gradient(
height: 1px;
width: 100%;
border: none;
margin: 0;
position: relative;
z-index: z-index(base);
&::after {
@include background-image(
linear-gradient(
180deg,
$light-grey-transparent 0%,
$light-grey-solid 50%,
$light-grey-transparent
)
);
height: 1px;
width: 100%;
bottom: 0;
content: '';
display: block;
position: absolute;
top: -1px;
}
}
)
);
h2 {
@extend .hd-4;
position: relative;
text-align: center;
text-shadow: 0 1px $white-opacity-40;
z-index: z-index(base);
text-transform: uppercase;
font-family: $font-family-serif;
height: 1px;
width: 100%;
bottom: 0;
content: '';
display: block;
position: absolute;
top: -1px;
}
}
.edx {
text-transform: none;
}
}
h2 {
@extend .hd-4;
position: relative;
text-align: center;
text-shadow: 0 1px $white-opacity-40;
z-index: z-index(base);
text-transform: uppercase;
font-family: $font-family-serif;
.edx {
text-transform: none;
}
}
}
.modal-form-error {
background: palette(error, back);
border: 1px solid palette(error, accent);
color: palette(error, text);
display: none;
margin-bottom: $baseline;
padding: 12px;
}
.notice {
background: $yellow;
border: 1px solid darken($yellow, 60%);
color: darken($yellow, 60%);
display: none;
margin-bottom: $baseline;
padding: 12px;
}
.activation-message, .message {
padding: 0 ($baseline*2) ($baseline/2);
p {
margin-bottom: ($baseline/2);
}
}
form {
margin-bottom: 12px;
padding: 0 ($baseline*2) $baseline;
position: relative;
z-index: 2;
.input-group {
@include clearfix();
border-bottom: 1px solid palette(grayscale, back);
box-shadow: 0 1px 0 0 $white-opacity-60;
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
}
label {
color: $text-color;
font: {
family: $font-family-serif;
style: italic;
}
.modal-form-error {
background: palette(error, back);
line-height: 1.6;
&.field-error {
display: block;
color: palette(error, text);
+ input,
+ textarea {
border: 1px solid palette(error, accent);
color: palette(error, text);
display: none;
margin-bottom: $baseline;
padding: 12px;
}
}
}
.notice {
background: $yellow;
border: 1px solid darken($yellow, 60%);
color: darken($yellow, 60%);
display: none;
margin-bottom: $baseline;
padding: 12px;
}
input[type="checkbox"] {
@include margin-right($baseline/4);
}
.activation-message, .message {
padding: 0 ($baseline*2) ($baseline/2);
p {
margin-bottom: ($baseline/2);
}
}
form {
margin-bottom: 12px;
padding: 0 ($baseline*2) $baseline;
position: relative;
z-index: 2;
.input-group {
@include clearfix();
border-bottom: 1px solid palette(grayscale, back);
box-shadow: 0 1px 0 0 $white-opacity-60;
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
}
label {
color: $text-color;
font: {
family: $font-family-serif;
style: italic;
}
line-height: 1.6;
&.field-error {
display: block;
color: palette(error, text);
+ input,
+ textarea {
border: 1px solid palette(error, accent);
color: palette(error, text);
}
}
}
input[type="checkbox"] {
@include margin-right($baseline/4);
}
textarea {
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;
width: 100%;
}
input[type="email"],
input[type="text"],
input[type="password"] {
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;
width: 100%;
}
.submit {
padding-top: ($baseline/2);
input[type="submit"] {
@extend .btn-brand;
display: block;
height: auto;
margin: 0 auto;
width: 100%;
white-space: normal;
}
}
}
.close-modal {
@include transition(all 0.15s ease-out 0s);
border-radius: 2px;
cursor: pointer;
display: inline-block;
padding: 10px;
position: absolute;
right: 2px;
top: 0;
z-index: z-index(front);
color: $lighter-base-font-color;
font: {
size: font-size(large);
family: $font-family-sans-serif;
}
line-height: 1;
text-align: center;
border: none;
background: transparent;
text-shadow: none;
letter-spacing: 0;
text-transform: none;
&:hover,
&:focus {
color: $base-font-color;
text-decoration: none;
opacity: 0.8;
}
&:focus {
border: none !important;
}
}
}
#help_wrapper,
#feedback_form_wrapper,
.discussion-alert-wrapper {
padding: 0 ($baseline*1.5) ($baseline*1.5);
header {
@include padding-left(0);
@include padding-right(0);
margin-bottom: $baseline;
}
.note {
font: {
size: font-size(x-small);
family: $font-family-sans-serif;
}
line-height: 1.475;
margin-top: ($baseline/2);
color: $lighter-base-font-color;
}
}
.tip {
font-size: font-size(x-small);
textarea {
background: $white;
display: block;
color: $dark-gray;
height: 45px;
margin-bottom: $baseline;
width: 100%;
}
input[type="email"],
input[type="text"],
input[type="password"] {
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;
width: 100%;
}
.submit {
padding-top: ($baseline/2);
input[type="submit"] {
@extend .btn-brand;
display: block;
height: auto;
margin: 0 auto;
width: 100%;
white-space: normal;
}
}
}
.close-modal {
@include transition(all 0.15s ease-out 0s);
border-radius: 2px;
cursor: pointer;
display: inline-block;
padding: 10px;
position: absolute;
right: 2px;
top: 0;
z-index: z-index(front);
color: $lighter-base-font-color;
font: {
size: font-size(large);
family: $font-family-sans-serif;
}
line-height: 1;
text-align: center;
border: none;
background: transparent;
text-shadow: none;
letter-spacing: 0;
text-transform: none;
&:hover,
&:focus {
color: $base-font-color;
text-decoration: none;
opacity: 0.8;
}
&:focus {
border: none !important;
}
}
}
#help_wrapper,
#feedback_form_wrapper,
.discussion-alert-wrapper {
padding: 0 ($baseline*1.5) ($baseline*1.5);
header {
@include padding-left(0);
@include padding-right(0);
margin-bottom: $baseline;
}
.note {
font: {
size: font-size(x-small);
family: $font-family-sans-serif;
}
line-height: 1.475;
margin-top: ($baseline/2);
color: $lighter-base-font-color;
}
}
.tip {
font-size: font-size(x-small);
display: block;
color: $dark-gray;
}
}
.leanModal_box {
@extend .modal;
@extend .modal;
}

Some files were not shown because too many files have changed in this diff Show More