Skip to content

E
edx-platform
Commit 9f0fba0a by Andy Armstrong
Options

Sass quality fixes in the LMS

parent 0702df51
Showing with 1212 additions and 780 deletions
.stylelintignore 0 → 100644
common/static/sass/bourbon
lms/static/sass/vendor
lms/static/sass/_build-footer-edx.scss
......@@ -7,10 +7,10 @@
@import 'base/theme';
footer#footer-edx-v3 {
@import 'base/extends';
@import 'base/extends';
// base - starter
@import 'base/base';
// base - starter
@import 'base/base';
}
// base - elements
......
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 {
......@@ -126,7 +133,7 @@
}
&:focus {
box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
}
}
......@@ -135,6 +142,7 @@
.members-info {
margin: 0;
padding: 0;
li {
display: inline;
}
......@@ -151,6 +159,7 @@
.member-info-container {
display: inline-block;
vertical-align: middle;
@include margin-left($baseline/2);
.primary {
......@@ -191,6 +200,7 @@
//along with some "hide the inherited value, we want none" action
.prompt.warning button {
@extend %btn-no-style;
box-shadow: none;
text-shadow: none;
......@@ -211,6 +221,7 @@
//along with some "hide the inherited value, we want none" action
.prompt.warning button {
@extend %btn-no-style;
box-shadow: none;
text-shadow: none;
......
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
......@@ -22,7 +22,7 @@ body {
// removing the outline on any element that we make programmatically focusable
[tabindex="-1"] {
outline: none;
outline: none;
}
h1, h2, h3, h4, h5, h6 {
......@@ -83,6 +83,7 @@ p {
font: inherit;
font-weight: inherit;
text-decoration: none;
@include transition(all 0.1s linear 0s);
&:hover, &:focus {
......@@ -96,6 +97,7 @@ a, a:visited {
color: $link-color;
font: inherit;
text-decoration: none;
@include transition(all 0.1s linear 0s);
&:hover,
......@@ -106,6 +108,7 @@ a, a:visited {
&:disabled, &.is-disabled, &.disabled {
@extend %ui-disabled;
opacity: 0.5;
cursor: not-allowed;
}
......@@ -124,6 +127,7 @@ a, a:visited {
.container {
@include clearfix();
@include box-sizing(border-box);
margin: 0 auto 0;
padding: ($baseline*2) 0;
max-width: grid-width(12);
......@@ -132,7 +136,7 @@ a, a:visited {
}
.no-min-scale {
min-width: 0px !important;
min-width: 0 !important;
}
span.edx {
......@@ -142,6 +146,7 @@ span.edx {
.static-container {
@include clearfix();
margin: 0 auto 0;
max-width: 1200px;
padding: ($baseline*3) 0 ($baseline*6);
......@@ -181,6 +186,7 @@ span.edx {
.loading-animation {
@include animation(fa-spin 2s infinite linear);
text-align: center;
width: 100%;
}
......@@ -210,61 +216,65 @@ mark {
}
.help-tab {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
@extend %ui-depth2;
@extend %ui-print-excluded;
position: fixed;
top: 250px;
left: 0;
a:link,
a:visited {
border: 1px solid $gray-l3;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize($base-font-color, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: $white;
background: $link-color;
}
@include transform(rotate(-90deg));
@include transform-origin(0 0);
@extend %ui-depth2;
@extend %ui-print-excluded;
position: fixed;
top: 250px;
left: 0;
a:link,
a:visited {
border: 1px solid $gray-l3;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize($base-font-color, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: $white;
background: $link-color;
}
}
}
.help-buttons {
padding: ($baseline/2) ($baseline*2.5);
text-align: center;
button {
@extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial;
text-shadow: none;
letter-spacing: initial !important;
text-transform: normal !important;
vertical-align: initial;
padding: ($baseline/2) ($baseline*2.5);
text-align: center;
button {
@extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial;
text-shadow: none;
letter-spacing: initial !important;
text-transform: normal !important;
vertical-align: initial;
&:hover,
&:focus {
background: $link-color !important;
color: $white;
box-shadow: none !important;
text-shadow: none !important;
}
&:hover,
&:focus {
background: $link-color !important;
color: $white;
box-shadow: none !important;
text-shadow: none !important;
}
}
}
#feedback_form {
input, textarea {
font: normal 1em/1.4em $sans-serif;
}
textarea[name="details"] {
height: 150px;
}
......
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/_font_face.scss
// LMS - assets - fonts
// ====================
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-family: 'Open Sans';
src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
lms/static/sass/base/_headings.scss
......@@ -17,74 +17,74 @@ $headings-base-font-family: inherit;
$headings-base-color: $gray-d2;
%reset-headings {
margin: 0;
font-weight: $headings-font-weight-normal;
font-size: inherit;
line-height: inherit;
color: $headings-base-color;
margin: 0;
font-weight: $headings-font-weight-normal;
font-size: inherit;
line-height: inherit;
color: $headings-base-color;
}
%hd-1 {
margin-bottom: 1.41575em;
font-size: 2em;
line-height: 1.4em;
margin-bottom: 1.41575em;
font-size: 2em;
line-height: 1.4em;
}
%hd-2 {
font-size: 1.5em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
font-size: 1.5em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-3 {
margin-bottom: ($baseline / 2);
font-size: 1.35em;
font-weight: $headings-font-weight-normal;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1.35em;
font-weight: $headings-font-weight-normal;
line-height: 1.4em;
}
%hd-4 {
margin-bottom: ($baseline / 2);
font-size: 1.25em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1.25em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-5 {
margin-bottom: ($baseline / 2);
font-size: 1.1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1.1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-6 {
margin-bottom: ($baseline / 2);
font-size: 1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
margin-bottom: ($baseline / 2);
font-size: 1em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
%hd-7 {
margin-bottom: ($baseline / 4);
font-size: 14px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.6em;
letter-spacing: 1px;
margin-bottom: ($baseline / 4);
font-size: 14px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.6em;
letter-spacing: 1px;
}
%hd-8 {
margin-bottom: ($baseline / 8);
font-size: 12px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.5em;
letter-spacing: 1px;
margin-bottom: ($baseline / 8);
font-size: 12px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.5em;
letter-spacing: 1px;
}
// let's make these classnames available to the entire LMS!
......@@ -97,7 +97,7 @@ $headings-base-color: $gray-d2;
.hd-6,
.hd-7,
.hd-8 {
@extend %reset-headings;
@extend %reset-headings;
}
......@@ -106,25 +106,25 @@ $headings-base-color: $gray-d2;
// ----------------------------
// canned heading classes
@for $i from 1 through $headings-count {
.hd-#{$i} {
@extend %hd-#{$i};
}
.hd-#{$i} {
@extend %hd-#{$i};
}
}
// H3 was problematic in xblocks, we so we'll keep it as it was
.xblock .xblock {
h2 {
@extend %hd-2;
h2 {
@extend %hd-2;
font-weight: $headings-font-weight-bold;
// override external modules and xblocks that use inline CSS
text-transform: initial;
font-weight: $headings-font-weight-bold;
// override external modules and xblocks that use inline CSS
text-transform: initial;
&.discussion-module-title {
margin-bottom: 0;
display: inline-block;
}
&.discussion-module-title {
margin-bottom: 0;
display: inline-block;
}
}
}
lms/static/sass/base/_mixins.scss
......@@ -4,13 +4,13 @@
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
// font-size: ($sizeValue/10) + rem;
// font-size: ($sizeValue/10) + rem;
}
// mixins - line height
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
// line-height: (($fontSize/10)*1.48) + rem;
// line-height: (($fontSize/10)*1.48) + rem;
}
// image-replacement hidden text
......@@ -20,7 +20,7 @@
overflow: hidden;
}
@mixin vertically-and-horizontally-centered ( $height, $width ) {
@mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%;
margin-left: -$width / 2;
//margin-top: -$height / 2;
......@@ -38,7 +38,7 @@
}
@mixin show-hover-state() {
opacity: 1;
opacity: 1;
}
@function em($pxval, $base: 16) {
......@@ -54,6 +54,7 @@
// theme mixin styles
@mixin login_register_h1_style {}
@mixin footer_references_style {}
// ====================
......@@ -62,12 +63,14 @@
%ui-wrapper {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
}
// extends - UI - window
%ui-window {
@include clearfix();
border-radius: 3px;
box-shadow: 0 1px 2px 1px $shadow-l1;
margin-bottom: $baseline;
......@@ -103,7 +106,6 @@
// extends - UI - utility - nth-type style clearing
%wipe-first-child {
&:first-child {
margin-top: 0;
border-top: none;
......@@ -113,7 +115,6 @@
// extends - UI - utility - nth-type style clearing
%wipe-last-child {
&:last-child {
margin-bottom: 0;
border-bottom: none;
......@@ -123,18 +124,18 @@
// extends -hidden elems - screenreaders
%text-sr {
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
}
// extends - ensures proper contrast for automated checkers
......@@ -174,6 +175,7 @@
// extends - text - text overflow by ellipsis
%text-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......
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/base/_utilities.scss
......@@ -8,5 +8,5 @@
.sr-is-focusable,
.sr-is-focusable:focus,
.sr-is-focusable:active {
@extend %no-outline;
@extend %no-outline;
}
lms/static/sass/bootstrap/_legacy.scss
......@@ -15,7 +15,7 @@
// Support .sr as a synonym for .sr-only
.sr {
@extend .sr-only;
@extend .sr-only;
}
// ----------------------------
......
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 {
margin-top: $baseline;
margin-bottom: $baseline;
color: $error-color;
}
@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 {
margin-top: $baseline;
margin-bottom: $baseline;
color: $error-color;
}
.auto-cert-message {
margin: $baseline 0;
padding: $baseline;
border-left: 3px solid $m-blue-d1;
background: $gray-l5;
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
.auto-cert-message {
margin: $baseline 0;
padding: $baseline;
border-left: 3px solid $m-blue-d1;
background: $gray-l5;
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
text-shadow: none;
}
}
text-shadow: none;
}
}
}
}
}
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();
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,30 +178,36 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
@extend %t-copy-sub1;
@extend %t-weight2;
@extend %shame-link-text;
display: inline;
@include margin-left($baseline/4);
border: 0;
background: transparent;
padding: 0;
&:active {
background: transparent;
box-shadow: none;
background: transparent;
box-shadow: none;
}
}
// note - comment made on highlighted content
.note-comments {
@extend %ui-no-list;
border-top: ($baseline/5) solid $student-notes-highlight-color-focus;
.note-comment {
@include transition(color $tmg-avg ease-in-out 0);
padding: ($baseline*0.75) $baseline;
color: $gray;
.note-comment-title {
@extend %t-title8;
letter-spacing: ($baseline/20);
margin: 0 0 ($baseline/4) 0;
color: $gray-l2;
......@@ -192,6 +218,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.note-comment-ol {
@extend %t-copy-sub1;
@extend %t-weight2;
padding: 0;
margin: 0;
background: transparent;
......@@ -218,6 +245,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// note reference
.reference {
@extend %t-copy-sub1;
display: inline-block;
width: flex-grid(3, 12);
vertical-align: top;
......@@ -229,6 +257,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.reference-title {
@extend %t-title8;
@extend %t-weight3;
margin-top: ($baseline/2);
text-transform: uppercase;
letter-spacing: ($baseline/20);
......@@ -242,6 +271,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.reference-meta {
@extend %t-weight2;
color: $m-gray-d2;
}
......@@ -254,26 +284,25 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
}
}
// Put commas between tags.
span.reference-meta.reference-tags:after {
span.reference-meta.reference-tags::after {
content: ",";
color: $m-gray-d2;
}
// But not after the last tag.
span.reference-meta.reference-tags:last-child:after {
content: "";
span.reference-meta.reference-tags:last-child::after {
content: "";
}
// needed for poor base LMS styling scope
a.reference-meta {
@extend %shame-link-text;
@extend %shame-link-text;
}
}
}
// STATE: hover/focus
&:hover, &:focus {
.wrapper-note-excerpts {
box-shadow: 0 2px 0 1px $shadow-l2;
border-color: $gray-l4;
......@@ -294,9 +323,9 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// +tabbed views
// --------------------
.wrapper-tabs {
.tab-panel, .inline-error, .ui-loading {
@extend %no-outline;
border-top: $divider-visual-primary;
.listing-tools {
......@@ -321,6 +350,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tab-list {
@include clearfix();
position: relative;
top: ($baseline/5);
......@@ -331,16 +361,21 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tabs-label {
@extend %hd-lv5;
margin-bottom: 0;
padding: ($baseline*0.75) 0;
@include padding-right($baseline);
color: $gray-l2;
font-weight: $font-semibold !important; // needed for poor base LMS styling scope
}
.tabs {
@include clearfix();
@extend %ui-no-list;
position: relative;
bottom: -($baseline/4);
}
......@@ -351,6 +386,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.tab-label {
@extend %notes-tab-control;
padding: ($baseline/2) ($baseline*0.75);
text-align: center;
......@@ -361,7 +397,6 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// STATE: active/current tab being viewed
&.is-active {
.tab-label {
border-bottom-color: $gray-d3;
color: $gray-d3;
......@@ -376,8 +411,11 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
// CASE: tab-label can be closed
.action-close {
@extend %notes-tab-control;
position: relative;
@include left(-($baseline*0.75));
padding: ($baseline/2);
}
}
......@@ -390,6 +428,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
#no-results-panel {
p {
@extend %t-copy-lead1;
margin: ($baseline*1.5) 0;
}
}
......@@ -410,6 +449,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
.placeholder-title {
@extend %hd-lv3;
margin-bottom: $baseline;
text-transform: none; // reset needed for poor h2 element styling
letter-spacing: 0; // reset needed for poor h2 element styling
......@@ -423,6 +463,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
li {
@extend %wipe-last-child;
display: block;
margin-bottom: ($baseline/2);
}
......
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);
@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;
......@@ -28,7 +31,7 @@ div.book-wrapper {
width: 180px;
#booknav {
list-style: none;
list-style: none;
.chapter {
line-height: 1.4em;
......@@ -36,12 +39,14 @@ div.book-wrapper {
.page-number {
@include float(right);
width: 12%;
font-size: .8em;
font-size: 0.8em;
line-height: 2.1em;
text-align: right;
color: #9a9a9a;
opacity: 0.0;
opacity: 0;
@include transition(opacity .15s linear 0s);
}
......@@ -52,6 +57,7 @@ div.book-wrapper {
a {
@include clearfix();
padding: 0;
color: $uxpl-blue-base;
......@@ -60,14 +66,13 @@ div.book-wrapper {
color: $uxpl-blue-hover-active;
.page-number {
opacity: 1.0;
opacity: 1;
}
}
}
div.hitarea {
background-image: url('#{$static-path}/images/treeview-default.gif');
position: relative;
top: 4px;
......@@ -97,6 +102,7 @@ div.book-wrapper {
.book {
@extend .content;
padding: 0;
width:76%;
......@@ -105,6 +111,7 @@ div.book-wrapper {
a {
@extend .block-link;
padding: 0 lh();
}
......@@ -121,18 +128,22 @@ div.book-wrapper {
background-color: rgba(#000, .7);
background-position: center;
background-repeat: no-repeat;
@include box-sizing(border-box);
display: table;
height: 100%;
opacity: 0.0;
opacity: 0;
filter: alpha(opacity=0);
text-indent: -9999px;
@include transition(none);
vertical-align: middle;
width: 100%;
&:hover, &:focus {
opacity: 1.0;
opacity: 1;
}
&.is-disabled {
......@@ -183,12 +194,12 @@ div.book-wrapper {
div {
text-align: left;
line-height: 1.6em;
margin: ($baseline/4);
line-height: 1.6em;
margin: ($baseline/4);
.Paragraph, h2 {
margin-top: ($baseline/2);
}
.Paragraph, h2 {
margin-top: ($baseline/2);
}
}
}
}
......
lms/static/sass/course/base/_base.scss
......@@ -41,12 +41,13 @@ body {
body, h1, h2, h3, h4, h5, h6, p, label {
@include text-align(left);
font-family: $sans-serif;
}
// we want to hide the outline on the focusable <main> element
main {
outline: none;
outline: none;
}
table {
......@@ -74,6 +75,7 @@ form {
form.choicegroup {
label {
clear: both;
@include float(left);
}
}
......@@ -87,7 +89,9 @@ input[type="password"] {
border: 1px solid $border-color-2;
border-radius: 0;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 $shadow-l1;
@include box-sizing(border-box);
font: normal 1em $sans-serif;
height: 35px;
padding: ($baseline/4) 12px;
......@@ -135,16 +139,17 @@ img {
z-index: 99999;
padding: 0 10px;
border-radius: 3px;
background: rgba(0, 0, 0, .85);
background: rgba(0, 0, 0, 0.85);
font-size: 11px;
font-weight: 400;
line-height: 26px;
color: $white;
pointer-events: none;
opacity: 0;
@include transition(opacity .1s linear 0s);
&:after {
&::after {
content: '▾';
display: block;
position: absolute;
......@@ -152,7 +157,7 @@ img {
left: 50%;
margin-left: -7px;
font-size: 20px;
color: rgba(0, 0, 0, .85);
color: rgba(0, 0, 0, 0.85);
}
}
......@@ -215,6 +220,7 @@ img {
.action-btn {
@include dark-grey-button;
margin-top: ($baseline/2);
text-align: center;
}
......
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);
}
......@@ -68,12 +76,12 @@ h1.top-header {
background: $sidebar-color;
h1, h2, h3, h4 {
font-weight: bold;
letter-spacing: 0;
text-transform: none;
font-family: $sans-serif;
text-align: left;
font-style: normal;
font-weight: bold;
letter-spacing: 0;
text-transform: none;
font-family: $sans-serif;
text-align: left;
font-style: normal;
}
h1 {
......@@ -112,6 +120,7 @@ h1.top-header {
li {
@include margin-left(20px);
background: none;
position: relative;
padding: 0;
......@@ -136,7 +145,7 @@ h1.top-header {
a {
background: #f6f6f6 url('#{$static-path}/images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3;
border: 1px solid #d3d3d3;
border-radius: 3px 0 0 3px;
height: 16px;
padding: 6px;
......@@ -160,6 +169,7 @@ h1.top-header {
.topbar {
@extend .clearfix;
border-bottom: 1px solid $border-color;
@media print {
......@@ -179,37 +189,43 @@ h1.top-header {
}
.tran {
@include transition( all .2s $ease-in-out-quad 0s);
@include transition(all .2s $ease-in-out-quad 0s);
}
// FontAwesome rtl chevron next
.fa-chevron-next {
&:before {
&::before {
@if $bi-app-direction == ltr {
content: "\f054"; // .fa-chevron-right
} @else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left
content: "\f054"; // .fa-chevron-right
}
@else if $bi-app-direction == rtl {
content: "\f053"; // .fa-chevron-left
}
}
}
// FontAwesome rtl chevron prev
.fa-chevron-prev {
&:before {
&::before {
@if $bi-app-direction == ltr {
content: "\f053"; // .fa-chevron-left
} @else if $bi-app-direction == rtl {
content: "\f054"; // .fa-chevron-right
content: "\f053"; // .fa-chevron-left
}
@else if $bi-app-direction == rtl {
content: "\f054"; // .fa-chevron-right
}
}
}
.fa-arrow-circle-prev {
&:before {
&::before {
@if $bi-app-direction == ltr {
content: "\f0a8"; // .fa-arrow-circle-left
} @else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right
content: "\f0a8"; // .fa-arrow-circle-left
}
@else if $bi-app-direction == rtl {
content: "\f0a9"; // .fa-arrow-circle-right
}
}
}
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
.ccx-schedule-container {
float: left;
width: 750px;
float: left;
width: 750px;
}
table.ccx-schedule {
width: 100%;
thead {
border-bottom: 2px solid black;
}
th:first-child {
width: 40%;
}
th:last-child {
width: 18%;
}
th, td {
padding: 10px;
}
td.no-link {
font-size: 13px;
text-shadow: 0 1px 0 #fcfbfb;
text-decoration: none;
}
.sequential .unit {
padding-left: 25px;
}
.vertical .unit {
padding-left: 40px;
}
a.empty {
display: block;
width: 100%;
color: white;
}
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;
}
a.empty:hover {
color: #cbcbcb;
}
}
.ccx-schedule-sidebar {
float: left;
width: 295px;
margin-left: 20px;
float: left;
width: 295px;
margin-left: 20px;
}
.ccx-sidebar-panel {
border: 1px solid #cbcbcb;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #cbcbcb;
padding: 15px;
margin-bottom: 20px;
}
form.ccx-form {
line-height: 1.5;
// inspiration was taken from https://github.com/edx/ux-pattern-library
select {
@include font-size(16);
background: #fcfcfc;
border: 1px solid #e9e8e8;
box-sizing: padding-box;
color: #282c2e;
display: inline-block;
font-size: ($baseline*.9.5);
height: 40px;
line-height: 20px;
padding: 10px;
transition: all 125ms ease-in-out 0s;
width: 100%;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
line-height: 1.5;
// inspiration was taken from https://github.com/edx/ux-pattern-library
select {
@include font-size(16);
background: #fcfcfc;
border: 1px solid #e9e8e8;
box-sizing: padding-box;
color: #282c2e;
display: inline-block;
font-size: ($baseline*.9.5);
height: 40px;
line-height: 20px;
padding: 10px;
transition: all 125ms ease-in-out 0s;
width: 100%;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
input {
@include font-size(15);
background: #FCFCFC none repeat scroll 0% 0%;
border: 1px solid #E7E6E6;
box-sizing: border-box;
color: #34383A;
display: inline-block;
line-height: normal;
transition: all 0.125s ease-in-out 0s;
padding: 5px 10px 5px 10px;
&:focus {
border-color: #0ea6ec;
color: #282c2e;
outline: 0;
}
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
}
input {
@include font-size(15);
background: #fcfcfc none repeat scroll 0% 0%;
border: 1px solid #e7e6e6;
box-sizing: border-box;
color: #34383a;
display: inline-block;
line-height: normal;
transition: all 0.125s ease-in-out 0s;
padding: 5px 10px 5px 10px;
&:focus {
border-color: #0ea6ec;
color: #282c2e;
outline: 0;
}
.field {
margin: 5px 0 5px 0;
&:disabled {
border-color: #cfd8dc;
background: #e7ecee;
cursor: not-allowed;
}
}
.field {
margin: 5px 0 5px 0;
}
}
button.ccx-button-link {
background: none;
border: none;
padding: 0;
color: #069;
cursor: pointer;
&::after {
content: "\00a0 ";
}
&:active {
background: none;
border: none;
padding: 0;
color: #069;
cursor: pointer;
&:after {
content: "\00a0 ";
}
&:active {
background: none;
border: none;
padding: 0;
}
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
}
&:hover {
color: brown;
background: none;
}
&:focus {
background: none;
}
}
.ccx-manage-student-form input#student-id {
width: 60%;
width: 60%;
}
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/instructor/_email.scss
......@@ -63,7 +63,7 @@
}
.email-content-message {
padding: 5px 5% 40px 5%;
padding: 5px 5% 40px 5%;
}
.email-modal {
......
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/layout/_footer.scss
footer {
box-shadow: $courseware-footer-shadow;
margin-top: $courseware-footer-margin;
box-shadow: $courseware-footer-shadow;
margin-top: $courseware-footer-margin;
}
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;
......@@ -113,13 +122,14 @@
width: flex-grid(4);
&.has-result {
border: 1px solid $green-d1;
box-shadow: inset 0px 0px ($baseline/3) $green-d1;
border: 1px solid $green-d1;
box-shadow: inset 0 0 ($baseline/3) $green-d1;
}
}
.input-wrapper {
@extend .clearfix;
float: left;
margin: 0;
position: relative;
......@@ -134,7 +144,9 @@
direction: ltr; // Almost all of the real-world calculators are LTR
border: none;
box-shadow: none;
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
-webkit-appearance: none;
......@@ -156,6 +168,7 @@
#calculator_hint {
@include hide-text;
display: block;
height: 35px;
width: 35px;
......@@ -177,6 +190,7 @@
.help {
@include transition(none);
background: $white;
border-radius: 3px;
box-shadow: 0 0 3px #999;
......
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
section.wiki-body {
h1 {
h1 {
font-weight: bold;
font-size: 2em;
margin-bottom: 25px;
}
}
div#wiki_article {
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
......@@ -67,19 +67,19 @@ section.wiki-body {
h1 {
font-size: 1.6em;
margin: .67em 0;
letter-spacing: 0px;
letter-spacing: 0;
}
h2 {
text-transform: none;
font-size: 1.4em;
margin: .75em 0;
letter-spacing: 0px;
letter-spacing: 0;
}
h3 {
font-size: 1.2em;
margin: .83em 0;
margin: 0.83em 0;
}
h4 {
......@@ -131,7 +131,7 @@ section.wiki-body {
}
small, sub, sup {
font-size: .83em;
font-size: 0.83em;
}
sub {
......@@ -181,7 +181,7 @@ section.wiki-body {
text-decoration: underline;
}
br:before {
br::before {
content: "\A";
white-space: pre-line;
}
......
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,11 +28,12 @@ table.wiki-history {
}
}
}
tbody {
tbody {
tr td {
padding: 8px 15px;
}
}
}
tr.dark {
background-color: #efefef;
......
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
......@@ -4,72 +4,75 @@
// Note: replace with globals from common/static/sass/edx-pattern-library-shims when available
%pattern-library-btn {
@include transition(
color 0.125s ease-in-out 0s,
@include transition(
color 0.125s ease-in-out 0s,
border-color 0.125s ease-in-out 0s,
background 0.125s ease-in-out 0s,
box-shadow 0.125s ease-in-out 0s
);
display: inline-block;
border: 1px solid $forum-color-active-thread;
border-radius: 3px;
margin: 0;
background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
white-space: nowrap;
);
// Display: block, one button per line, full width
&.block {
display: block;
width: 100%;
}
display: inline-block;
border: 1px solid $forum-color-active-thread;
border-radius: 3px;
margin: 0;
background-image: none;
box-shadow: none;
height: 40px;
text-shadow: none;
font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
white-space: nowrap;
// STATE: is disabled
&:disabled,
&.is-disabled {
pointer-events: none;
outline: none;
cursor: not-allowed;
}
// Display: block, one button per line, full width
&.block {
display: block;
width: 100%;
}
&:hover,
&:active,
&:focus {
// Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
// STATE: is disabled
&:disabled,
&.is-disabled {
pointer-events: none;
outline: none;
cursor: not-allowed;
}
&:hover,
&:active,
&:focus {
// Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
}
// Use pattern library buttons for discussion components
.discussion-module, .wmd-prompt-dialog {
.btn {
@extend %pattern-library-btn;
background-color: $forum-color-background;
color: $forum-color-active-thread;
}
.btn {
@extend %pattern-library-btn;
background-color: $forum-color-background;
color: $forum-color-active-thread;
}
.btn-brand {
@extend %pattern-library-btn;
.btn-brand {
@extend %pattern-library-btn;
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
}
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
}
}
// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
.discussion {
clear: both;
}
.discussion {
clear: both;
}
}
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,35 +2,35 @@
@import '../course/base/extends';
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-count {
margin-top: $baseline / 4;
}
.discussion-profile-count {
margin-top: $baseline / 4;
}
.discussion-profile-info {
@include margin-right($baseline);
}
.discussion-profile-info {
@include margin-right($baseline);
}
.user-name {
@include margin-right($baseline);
.user-name {
@include margin-right($baseline);
font-size: $forum-x-large-font-size;
}
font-size: $forum-x-large-font-size;
}
.user-roles {
font-size: $forum-small-font-size;
font-style: italic;
}
.user-roles {
font-size: $forum-small-font-size;
font-style: italic;
}
}
.discussion-column {
min-height: 500px;
min-height: 500px;
.new-post-article {
margin-top: -$baseline;
}
.new-post-article {
margin-top: -$baseline;
}
}
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/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;
......
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