Skip to content

E
edx-platform
Commit 9f0fba0a by Andy Armstrong
Options

Sass quality fixes in the LMS

parent 0702df51
Showing with 804 additions and 237 deletions
.stylelintignore 0 → 100644
common/static/sass/bourbon
lms/static/sass/vendor
lms/static/sass/_build-lms-v1.scss
......@@ -81,7 +81,6 @@
// news
@import 'notifications';
@import 'mixins';
@import 'mixins-inherited';
@import 'elements/system-feedback';
......
lms/static/sass/_developer.scss
......@@ -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 {
......@@ -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;
......
lms/static/sass/_experiments.scss
......@@ -5,6 +5,7 @@
// --------------------
// 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
......@@ -28,11 +29,11 @@
display: inline-block !important;
padding: 10px 15px !important;
border-radius: 3px !important;
border: 1px solid #D7548E !important;
border: 1px solid #d7548e !important;
box-shadow: 0 2px 1px 0 #982c62 !important;
background: white !important;
text-align: center !important;
color: #D7548E !important;
color: #d7548e !important;
float: left !important;
font-size: 15px;
font-weight: 500 !important;
......@@ -95,7 +96,7 @@
}
.v2.register-choice-continue {
border-color: #D7548E !important;
border-color: #d7548e !important;
}
.v2 .wrapper-copy-inline {
......@@ -128,12 +129,12 @@
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;
box-shadow: rgb(0, 77, 0) 0 2px 1px 0;
cursor: pointer;
font-family: "Open Sans";
height: auto;
margin-right: 4px;
margin-top: 0px;
margin-top: 0;
padding: 10px 15px;
width: initial;
background-image: none !important;
......@@ -143,7 +144,7 @@
&:hover, &:focus {
background-color: #009b00 !important;
border-color: #009b00;
box-shadow: #004d00 0px 2px 1px 0px;
box-shadow: #004d00 0 2px 1px 0;
}
}
......@@ -151,6 +152,7 @@
margin-top: 10px;
font-size: 11px;
}
@media screen and (min-width: 375px) {
.savings-message {
font-size: 13px;
......@@ -259,7 +261,7 @@
.v2.register-choice .list-actions:last-child {
float: left;
width: 100%;
margin-top: 0px;
margin-top: 0;
}
.v2.register-choice .action-select {
......@@ -268,7 +270,7 @@
.v2 .continue-link:hover,
.v2 .continue-link:focus {
background-color: #D7548E !important;
background-color: #d7548e !important;
color: white !important;
text-decoration: none;
}
......@@ -294,7 +296,7 @@
}
.v2 .wrapper-copy-inline .wrapper-copy ul {
margin-top: 0px;
margin-top: 0;
padding-left: 30px;
}
......@@ -310,7 +312,7 @@
.v2 .img-donate {
margin-top: 0;
float: right;
border: 2px solid #D7548E !important;
border: 2px solid #d7548e !important;
display: none;
}
......@@ -342,7 +344,7 @@
float: left;
display: inline-block;
height: 250px;
margin: 0px 0 40px 0 !important;
margin: 0 0 40px 0 !important;
border-left: 4px solid #f5f5f5 !important; border-top:none !important;
.copy {
......@@ -371,6 +373,7 @@
.v2 .continue-link {
width: 55%;
}
.v2.deco-divider .copy {
margin-left: 15px;
}
......@@ -382,10 +385,12 @@
.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;
......
lms/static/sass/_notifications.scss
......@@ -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;
}
......
lms/static/sass/_shame.scss
......@@ -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;
}
......
lms/static/sass/base/_animations.scss
......@@ -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% {
......
lms/static/sass/base/_base.scss
......@@ -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%;
}
......@@ -212,8 +218,10 @@ 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;
......@@ -244,6 +252,7 @@ mark {
button {
@extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial;
text-shadow: none;
......@@ -265,6 +274,7 @@ mark {
input, textarea {
font: normal 1em/1.4em $sans-serif;
}
textarea[name="details"] {
height: 150px;
}
......
lms/static/sass/base/_extends.scss
%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;
......
lms/static/sass/base/_headings.scss
......@@ -114,9 +114,9 @@ $headings-base-color: $gray-d2;
// H3 was problematic in xblocks, we so we'll keep it as it was
.xblock .xblock {
h2 {
@extend %hd-2;
font-weight: $headings-font-weight-bold;
// override external modules and xblocks that use inline CSS
text-transform: initial;
......
lms/static/sass/base/_mixins.scss
......@@ -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;
......@@ -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;
......@@ -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;
......
lms/static/sass/base/_reset.scss
......@@ -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; }
......
lms/static/sass/course/_auto-cert.scss
.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
.errors-info {
......@@ -16,19 +17,20 @@
background: $gray-l5;
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
text-shadow: none;
}
}
......
lms/static/sass/course/_gradebook.scss
......@@ -11,11 +11,12 @@ $table-border-color: #c8c8c8;
}
div.gradebook-wrapper {
section.gradebook-content {
@extend .content;
display: block;
width: 100%;
@include clearfix();
.student-search {
......@@ -26,13 +27,16 @@ div.gradebook-wrapper {
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);
&::-webkit-input-placeholder,
......@@ -100,6 +104,7 @@ div.gradebook-wrapper {
.left-shadow,
.right-shadow {
@extend %ui-depth4;
position: absolute;
top: 0;
width: 20px;
......@@ -131,6 +136,7 @@ div.gradebook-wrapper {
left: 0;
width: 1000px;
cursor: move;
@include transition(none);
@include user-select(none);
......@@ -143,7 +149,9 @@ div.gradebook-wrapper {
thead th {
position: relative;
height: 50px;
@include linear-gradient(top, $cell-border-color, #ddd);
font-size: 10px;
line-height: 10px;
font-weight: bold;
......@@ -174,7 +182,9 @@ div.gradebook-wrapper {
.max {
height: 12px;
@include linear-gradient(top, #c6c6c6, #bababa);
font-size: 9px;
line-height: 12px;
color: $white;
......@@ -219,7 +229,9 @@ div.gradebook-wrapper {
.student-table tr.highlight td,
.grade-table tr.highlight td {
border-color: #74b7d6;
@include linear-gradient(#8ed6f7, #76cbf4);
color: #333;
a {
......
lms/static/sass/course/_info.scss
......@@ -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;
}
......
lms/static/sass/course/_profile.scss
......@@ -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();
> .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;
......
lms/static/sass/course/_student-notes.scss
......@@ -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,8 +178,11 @@ $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;
......@@ -173,15 +196,18 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// 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,13 +284,13 @@ $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 {
span.reference-meta.reference-tags:last-child::after {
content: "";
}
......@@ -273,7 +303,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// 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);
}
......
lms/static/sass/course/_syllabus.scss
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);
......
lms/static/sass/course/_tabs.scss
div.static_tab_wrapper {
@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 {
......
lms/static/sass/course/_textbook.scss
......@@ -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;
......@@ -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 {
......
lms/static/sass/course/base/_base.scss
......@@ -41,6 +41,7 @@ body {
body, h1, h2, h3, h4, h5, h6, p, label {
@include text-align(left);
font-family: $sans-serif;
}
......@@ -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;
}
......
lms/static/sass/course/base/_extends.scss
......@@ -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);
}
......@@ -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,15 +189,17 @@ 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 {
}
@else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left
}
}
......@@ -195,20 +207,24 @@ h1.top-header {
// 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 {
}
@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 {
}
@else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right
}
}
......
lms/static/sass/course/base/_mixins.scss
......@@ -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;
......
lms/static/sass/course/ccx_coach/_dashboard.scss
......@@ -9,31 +9,39 @@ table.ccx-schedule {
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;
}
......@@ -57,6 +65,7 @@ form.ccx-form {
// 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;
......@@ -68,33 +77,39 @@ form.ccx-form {
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;
background: #fcfcfc none repeat scroll 0% 0%;
border: 1px solid #e7e6e6;
box-sizing: border-box;
color: #34383A;
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;
}
}
.field {
margin: 5px 0 5px 0;
}
......@@ -106,18 +121,22 @@ button.ccx-button-link {
padding: 0;
color: #069;
cursor: pointer;
&:after {
&::after {
content: "\00a0 ";
}
&:active {
background: none;
border: none;
padding: 0;
}
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
......
lms/static/sass/course/courseware/_amplifier.scss
// 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%);
}
}
}
......
lms/static/sass/course/courseware/_courseware.scss
......@@ -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,11 +57,12 @@ html.video-fullscreen {
}
.content-wrapper {
.course-license,
.xblock-license {
@include text-align(right);
@extend %t-title7;
display: block;
width: auto;
padding: ($baseline/4) 0;
......@@ -121,6 +124,7 @@ html.video-fullscreen {
.course-content,
.courseware-results-wrapper {
@extend .content;
line-height: 1.6;
.xblock {
......@@ -133,43 +137,55 @@ html.video-fullscreen {
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,6 +559,7 @@ html.video-fullscreen {
.vert {
@extend .clearfix;
border-bottom: 1px solid #ddd;
margin-bottom: ($baseline*0.75);
padding: 0 0 15px;
......@@ -509,8 +567,8 @@ html.video-fullscreen {
.vert > .xblock-student_view.is-hidden {
display: none;
border-bottom: 0px;
margin-bottom: 0px;
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,6 +616,7 @@ html.video-fullscreen {
p.error {
color: $error-color
}
p.success {
color: $success-color;
}
......@@ -570,7 +632,9 @@ html.video-fullscreen {
div.staff_info {
display: none;
@include clearfix();
white-space: pre-wrap;
border-top: 1px solid $gray-l3;
padding-top: lh();
......@@ -680,7 +744,6 @@ section.self-assessment {
*/
.CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt {
color: $gray-d3 !important;
}
......
lms/static/sass/course/courseware/_sidebar.scss
.course-index {
@include transition( all .2s $ease-in-out-quad 0s);
@include transition(all .2s $ease-in-out-quad 0s);
@include border-right(1px solid $border-color-2);
@include border-radius(3px, 0, 0, 3px);
display: table-cell; // needed to extend the sidebar the full height of the area
// provides sufficient contrast for all screen reader-only elements
......@@ -20,12 +21,12 @@
@extend %t-copy-sub1;
.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);
display: block;
width: 100%;
border: 0;
......@@ -38,14 +39,18 @@
.group-heading {
@extend %t-title6;
position: relative;
display: block;
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
@include text-align(left);
.icon {
position: absolute;
@include left($baseline);
top: $baseline;
font-size: $body-font-size;
color: $gray-l3;
......@@ -58,9 +63,9 @@
}
&.active {
.group-heading {
@extend %t-strong;
color: $base-font-color;
}
}
......@@ -89,24 +94,28 @@
.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;
......@@ -147,9 +156,9 @@
}
&.graded {
.menu-icon {
@include right($baseline/2.5);
position: absolute;
bottom: ($baseline/2);
color: $link-color;
......@@ -157,9 +166,9 @@
}
&.active {
a {
@extend %t-ultrastrong;
background: $gray-l4;
}
}
......
lms/static/sass/course/layout/_courseware_header.scss
.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%;
......
lms/static/sass/course/layout/_courseware_preview.scss
......@@ -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;
......
lms/static/sass/course/modules/_calculator.scss
......@@ -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;
......@@ -114,12 +123,13 @@
&.has-result {
border: 1px solid $green-d1;
box-shadow: inset 0px 0px ($baseline/3) $green-d1;
box-shadow: inset 0 0 ($baseline/3) $green-d1;
}
}
.input-wrapper {
@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;
......
lms/static/sass/course/modules/_student-notes.scss
......@@ -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 {
......
lms/static/sass/course/modules/_timer.scss
......@@ -3,6 +3,7 @@
div.timer-main {
@extend %ui-depth2;
position: fixed;
top: 0;
right: 0;
......
lms/static/sass/course/wiki/_basic-html.scss
......@@ -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;
}
......
lms/static/sass/course/wiki/_create.scss
......@@ -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;
}
}
lms/static/sass/course/wiki/_sidebar.scss
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);
......
lms/static/sass/course/wiki/_table.scss
......@@ -28,6 +28,7 @@ table.wiki-history {
}
}
}
tbody {
tr td {
padding: 8px 15px;
......
lms/static/sass/course/wiki/_wiki.scss
.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;
......
lms/static/sass/discussion/_discussion-v1.scss
......@@ -10,6 +10,7 @@
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;
......@@ -56,12 +57,14 @@
.discussion-module, .wmd-prompt-dialog {
.btn {
@extend %pattern-library-btn;
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;
}
......
lms/static/sass/discussion/_discussion.scss
......@@ -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;
......
lms/static/sass/discussion/_layouts.scss
......@@ -2,7 +2,6 @@
@import '../course/base/extends';
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
......@@ -18,6 +17,7 @@
.user-name {
@include margin-right($baseline);
font-size: $forum-x-large-font-size;
}
......
lms/static/sass/discussion/_mixins.scss
......@@ -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
......
lms/static/sass/discussion/elements/_actions.scss
......@@ -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;
}
......
lms/static/sass/discussion/elements/_editor.scss
......@@ -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%;
}
......
lms/static/sass/discussion/elements/_labels.scss
......@@ -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;
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -54,6 +54,7 @@
.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;
......@@ -68,9 +69,11 @@
.icon {
@include float(left);
@include left($baseline / 2);
position: relative;
top: 13px;
}
.forum-nav-browse-title {
@include padding-left($baseline * 1.5);
}
......@@ -82,6 +85,7 @@
.forum-nav-browse-title {
@include text-align(left);
display: block;
width: 100%;
border: 0;
......@@ -119,7 +123,6 @@
padding: 0;
li {
.forum-nav-browse-title {
@include padding-left($baseline);
}
......@@ -133,6 +136,7 @@
.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;
......@@ -143,12 +147,14 @@
.forum-nav-filter-main {
@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;
}
......@@ -156,6 +162,7 @@
.discussion-board & {
@include float(right);
@include text-align(right);
width: 50%;
}
}
......@@ -176,6 +183,7 @@
.forum-nav-filter-cohort-control {
@extend %forum-nav-select;
max-width: 60%;
}
......@@ -221,6 +229,7 @@
// 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;
.forum-nav-thread {
......@@ -240,6 +249,7 @@
.forum-nav-thread-link {
@include border-left(3px solid transparent);
display: flex;
padding: $baseline / 2;
transition: none;
......@@ -271,6 +281,7 @@
&.never-read {
.forum-nav-thread-link {
@include border-left(3px solid $forum-color-never-read-post);
color: $forum-color-never-read-post;
}
}
......@@ -283,7 +294,9 @@
.forum-nav-thread-wrapper-0 {
@extend %forum-nav-thread-wrapper;
@include margin-right($baseline/5);
align-self: flex-start;
.icon {
......@@ -291,8 +304,7 @@
width: 18px;
text-align: center;
&:before {
&::before {
@include rtl {
@include transform(scale(-1, 1)); // RTL for font awesome question mark
}
......@@ -302,6 +314,7 @@
.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.
......@@ -311,19 +324,23 @@
.forum-nav-thread-wrapper-2 {
@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;
}
%forum-nav-thread-wrapper-2-content {
@include margin-right($baseline/4);
font-size: $forum-small-font-size;
display: inline-block;
text-align: center;
......@@ -341,8 +358,11 @@
.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);
......@@ -350,15 +370,18 @@
background-color: $gray-l4;
// Speech bubble tail
&:after {
&::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);
}
......@@ -377,6 +400,7 @@
.forum-nav-load-more-link {
@extend %forum-nav-load-more-content;
color: $link-color;
width: 100%;
......
lms/static/sass/discussion/lms-discussion-main-rtl.scss
......@@ -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
......
lms/static/sass/discussion/lms-discussion-main.scss
......@@ -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
......
lms/static/sass/discussion/utilities/_developer.scss
......@@ -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;
......
lms/static/sass/discussion/utilities/_shame.scss
......@@ -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
......
lms/static/sass/discussion/utilities/_v1-compatibility.scss
......@@ -35,18 +35,23 @@
%t-ultrastrong {
font-weight: 700;
}
%t-strong {
font-weight: 600;
}
%t-demi-strong {
font-weight: 500;
}
%t-regular {
font-weight: 400;
}
%t-light {
font-weight: 300;
}
%t-ultralight {
font-weight: 200;
}
......@@ -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;
}
......
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -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;
......@@ -94,6 +96,7 @@
.edit-post-form {
@include clearfix();
box-sizing: border-box;
width: 100%;
padding-top: 0;
......@@ -113,6 +116,7 @@
.post-update {
@include float(left);
margin-top: ($baseline/2);
&:hover, &:focus {
......@@ -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;
......
lms/static/sass/discussion/views/_home.scss
......@@ -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);
}
......
lms/static/sass/discussion/views/_inline.scss
......@@ -39,6 +39,7 @@
.add-post-cancel {
@include right($baseline / 2);
top: $baseline / 2;
position: absolute;
color: $uxpl-primary-blue;
......
lms/static/sass/discussion/views/_response.scss
......@@ -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%;
......
lms/static/sass/discussion/views/_search.scss
.forum-search {
@include margin-left($baseline);
display: inline-block;
.search-input {
......
lms/static/sass/discussion/views/_thread.scss
......@@ -23,11 +23,13 @@
.posted-details {
@extend %t-copy-sub2;
@extend %t-light;
margin: ($baseline/5) 0;
color: $forum-color-copy-light;
.username {
@extend %t-strong;
display: inline;
}
......@@ -63,6 +65,7 @@
.response-header-actions {
@include float(right);
@include right($baseline);
position: absolute;
top: ($baseline/2);
}
......@@ -75,9 +78,9 @@
// comments layout
.discussion-comment {
.response-body {
@extend %t-copy-sub2;
display: inline-block;
margin-bottom: ($baseline/2);
width: flex-grid(10,12);
......@@ -90,6 +93,7 @@
.comment-actions-list {
@include float(right);
@include right($baseline / 2);
position: absolute;
top: $baseline / 2;
}
......@@ -109,6 +113,7 @@
// thread - images
.author-image {
@include margin-right($baseline/2);
display: inline-block;
vertical-align: top;
......@@ -143,6 +148,7 @@
.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;
}
......@@ -164,6 +170,7 @@
// post body
.post-body {
@extend %t-copy-sub1;
padding: ($baseline/2) 0;
max-width: calc(100% - #{$actions-dropdown-offset});
}
......@@ -172,6 +179,7 @@
.post-context {
@extend %t-copy-sub2;
@extend %t-light;
color: $forum-color-copy-light;
// CASE: no courseware context or cohort visibility rules
......@@ -185,6 +193,7 @@
.discussion-thread {
padding: 0;
margin-bottom: $baseline;
@include transition(all .25s linear 0s);
p {
......@@ -193,15 +202,18 @@
.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;
......@@ -209,11 +221,13 @@
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;
......@@ -235,6 +249,7 @@
.posted-by {
@include margin-right($baseline/4);
@include float(left);
font-size: $forum-large-font-size;
}
}
......@@ -272,6 +287,7 @@
.icon {
@include margin-right($baseline*0.25);
color: $link-color;
}
}
......
lms/static/sass/elements-v2/_pagination.scss
......@@ -2,6 +2,7 @@
.pagination {
@include clearfix();
display: inline-block;
width: flex-grid(3, 12);
......@@ -23,6 +24,7 @@
.nav-link {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
border: 0;
background-image: none;
......@@ -75,6 +77,7 @@
.current-page {
position: absolute;
@include left(-($baseline/4));
}
......@@ -94,6 +97,7 @@
.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;
......@@ -108,7 +112,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 $black inset;
background-color: $white;
border: 1px solid transparent;
......
lms/static/sass/elements/_controls.scss
......@@ -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,44 +422,47 @@
// ====================
// application: canned actions
.btn {
// application: canned actions
.btn {
font-family: $f-sans-serif;
}
}
.btn-large {
.btn-large {
@extend %t-action1;
@extend %t-weight3;
display: block;
padding:($baseline*0.75) ($baseline*1.5);
}
}
.btn-avg {
.btn-avg {
@extend %t-action2;
@extend %t-weight3;
}
}
.btn-blue {
.btn-blue {
@extend %btn-primary-blue;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
}
.btn-pink {
.btn-pink {
@extend %btn-primary-pink;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
}
.btn-secondary {
.btn-secondary {
@extend %btn-pl-secondary-base;
background-image: none;
......@@ -446,7 +473,7 @@
background-color: transparent !important;
color: $link-color;
}
}
}
.btn-link {
@extend %shame-link-text;
......@@ -477,11 +504,11 @@
position: relative;
&, &:link, &:visited, &:hover, &:active, &:focus {
&:after {
&::after {
content: " ";
position: absolute;
left: 0;
top: calc( 50% - #{($baseline * 1.1)});
top: calc(50% - #{($baseline * 1.1)});
min-height: ($baseline * 2.2);
width: 100%;
cursor: pointer;
......
lms/static/sass/elements/_course-card.scss
......@@ -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;
}
......
lms/static/sass/elements/_creative-commons.scss
......@@ -9,18 +9,18 @@
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'; } /* '' */
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment