Skip to content

E
edx-platform
Commit 3bb63166 by Andy Armstrong
Options

Fix Sass quality issues in lms/static/sass/features 

Sass fixes
parent e5cab618
Showing with 143 additions and 38 deletions
lms/static/sass/features/_bookmarks-v1.scss
......@@ -8,6 +8,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
> div {
@include box-sizing(border-box);
display: inline-block;
}
}
......@@ -22,11 +23,13 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// set styles
@extend %btn-pl-default-base;
@include font-size(13);
width: 100%;
padding: ($baseline/4) ($baseline/2);
&:before {
&::before {
content: $bookmarked-icon;
font-family: FontAwesome;
}
......@@ -35,9 +38,9 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for bookmark icon shown on each sequence nav item
.course-content {
.bookmark-icon.bookmarked {
@include right($baseline / 4);
top: -3px;
position: absolute;
}
......@@ -48,17 +51,15 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
}
.bookmark-button {
&:before {
&::before {
content: $bookmark-icon;
font-family: FontAwesome;
}
&.bookmarked {
&:before {
&::before {
content: $bookmarked-icon;
}
}
}
}
lms/static/sass/features/_bookmarks.scss
......@@ -14,6 +14,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
.bookmarks-results-list-item {
@include padding(0, $baseline, ($baseline/4), $baseline);
display: block;
border: 1px solid $lms-border-color;
margin-bottom: $baseline;
......@@ -29,6 +30,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
.results-list-item-view {
@include float(right);
margin-top: $baseline;
}
......@@ -38,7 +40,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
font-size: font-size(small);
}
.bookmarks-results-list-item:before {
.bookmarks-results-list-item::before {
content: $bookmarked-icon;
position: relative;
top: -7px;
......@@ -61,7 +63,6 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
vertical-align: middle;
.fa-arrow-right {
@include rtl {
@include transform(rotate(180deg));
}
......@@ -79,6 +80,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
.bookmarks-empty-header {
@extend %t-title5;
margin-bottom: ($baseline/2);
}
......
lms/static/sass/features/_course-experience.scss
......@@ -26,8 +26,10 @@
margin: $baseline 0;
}
&:after, &:before {
&::after,
&::before {
@include left(0);
bottom: 35%;
border: solid transparent;
height: 0;
......@@ -40,15 +42,17 @@
}
}
&:after {
&::after {
@include border-right-color($white);
@include margin-left($baseline*-1+1);
border-width: $baseline/2;
}
&:before {
&::before {
@include margin-left($baseline*-1);
@include border-right-color($lms-border-color);
border-width: $baseline/2;
}
......@@ -65,14 +69,19 @@
}
// Welcome message / Latest Update message
.welcome-message, .update-message{
.welcome-message,
.update-message {
border: solid 1px $lms-border-color;
@include border-left(solid 4px $black);
margin-bottom: $baseline;
padding: $baseline;
overflow: hidden;
h1, h2, h3 {
h1,
h2,
h3 {
font-size: font-size(large);
font-weight: $font-bold;
color: $black;
......@@ -80,12 +89,14 @@
img {
@include float(left);
margin: $baseline/2;
max-width: 100%;
}
.dismiss-message {
@include float(right);
.btn-link {
color: palette(grayscale, base);
}
......@@ -123,6 +134,7 @@
.section-name {
@include margin(0, 0, ($baseline / 2), ($baseline / 2));
padding: 0;
h3 {
......@@ -141,7 +153,6 @@
border-bottom: 1px solid $light-grey-solid;
margin: 0 0 ($baseline / 2) 0;
.subsection {
list-style-type: none;
border: 1px solid transparent;
......@@ -157,7 +168,8 @@
margin: 0;
}
&:hover, &:focus {
&:hover,
&:focus {
background-color: palette(primary, x-back);
border-radius: $btn-border-radius;
text-decoration: none;
......@@ -205,6 +217,7 @@
.date-summary {
@include clearfix;
@include border-left(3px solid $gray-l3);
padding: $baseline/2;
.heading {
......@@ -223,6 +236,7 @@
.date-summary-link {
font-weight: $font-semibold;
a {
color: $link-color;
font-weight: $font-regular;
......
lms/static/sass/features/_course-search.scss
......@@ -17,12 +17,14 @@
.search-count {
@include text-align(right);
display: block;
color: $lms-gray;
}
.search-results-item {
@include padding-right(140px);
position: relative;
border-top: 1px solid $border-color;
padding: $baseline ($baseline/2);
......@@ -51,6 +53,7 @@
.result-link {
@include right($baseline/2);
position: absolute;
top: $baseline;
line-height: 1.6em;
......@@ -58,6 +61,7 @@
.result-type {
@include right($baseline/2);
position: absolute;
color: $lms-gray;
font-size: 14px;
......
lms/static/sass/features/_course-sock.scss
......@@ -2,7 +2,6 @@
display: inline-block;
position: relative;
width: 100%;
margin-top: $baseline;
max-width: $lms-max-width;
margin: $baseline auto 0;
-webkit-transition: all 0.4s ease-out;
......@@ -14,6 +13,7 @@
.action-toggle-verification-sock {
@include left(50%);
@include margin-left(-1 * $baseline * 15/2);
position: absolute;
top: (-1 * $baseline);
width: ($baseline * 15);
......@@ -71,6 +71,7 @@
.mini-cert {
@include right($baseline);
position: absolute;
top: $baseline;
width: ($baseline * 13);
......@@ -96,7 +97,7 @@
width: ($baseline * 5/2);
}
.story-quote > .author{
.story-quote > .author {
display: block;
margin-top: ($baseline / 4);
font-weight: 600;
......@@ -135,6 +136,7 @@
&.attached {
@include right($baseline);
position: fixed;
bottom: $baseline;
top: auto;
......
lms/static/sass/features/_course-upgrade-message.scss
......@@ -17,7 +17,7 @@ $upgrade-message-background-color: $blue-d1;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
&:after {
&::after {
content: "";
display: table;
clear: both;
......@@ -28,12 +28,14 @@ $upgrade-message-background-color: $blue-d1;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
@include float(left);
}
.vc-selling-points {
@include clear(left);
@include padding-left(0);
font-size: 0.825rem;
margin: 1rem 0;
display: table;
......@@ -42,19 +44,21 @@ $upgrade-message-background-color: $blue-d1;
list-style: none;
display: table-row;
&:before {
&::before {
content: "\2022";
display: table-cell;
@include padding-right($baseline/2);
}
&:after {
&::after {
content: "";
display: table-row;
height: 0.25rem;
}
}
}
img {
max-width: 100%;
}
......@@ -62,12 +66,14 @@ $upgrade-message-background-color: $blue-d1;
// Show/hide button
.vc-toggle {
@include float(right);
color: $white;
}
// Upgrade Button
.btn-upgrade {
@extend %btn-primary-green;
background: $uxpl-green-base;
}
......@@ -75,6 +81,7 @@ $upgrade-message-background-color: $blue-d1;
.vc-hero {
@include float(right);
@include padding-left(1rem);
clear: both;
width: 35%;
......@@ -95,6 +102,7 @@ $upgrade-message-background-color: $blue-d1;
.vc-title {
margin: 0;
@include margin-right(auto);
}
......
lms/static/sass/features/_learner-profile.scss
......@@ -4,9 +4,11 @@
.learner-achievements {
.learner-message {
@extend %no-content;
margin: $baseline*0.75 0;
.message-header, .message-actions {
.message-header,
.message-actions {
text-align: center;
}
......@@ -36,6 +38,7 @@
.card-logo {
@include margin-right($baseline);
width: 100px;
height: 100px;
......@@ -51,17 +54,20 @@
.card-supertitle {
@extend %t-title6;
color: $lightest-base-font-color;
}
.card-title {
@extend %t-title5;
@extend %t-strong;
margin-bottom: $baseline/2;
}
.card-text {
@extend %t-title8;
color: $lightest-base-font-color;
}
......@@ -108,11 +114,13 @@
.ui-loading-indicator {
@extend .ui-loading-base;
padding-bottom: $baseline;
// center horizontally
@include margin-left(auto);
@include margin-right(auto);
width: ($baseline*5);
}
......@@ -153,10 +161,12 @@
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
border: 2px dashed transparent;
background: rgba(229,241,247, .8);
background: rgba(229, 241, 247, 0.8);
color: $link-color;
text-shadow: none;
@include transition(all $tmg-f1 ease-in-out 0s);
z-index: 6;
i {
......@@ -166,6 +176,7 @@
&:focus,
&:hover {
@include show-hover-state();
border-color: $link-color;
}
......@@ -182,7 +193,9 @@
.upload-button-title {
display: block;
margin-bottom: ($baseline/4);
@include transform(translateY(35px));
line-height: 1.3em;
text-align: center;
z-index: 7;
......@@ -192,7 +205,9 @@
.upload-button-input {
position: absolute;
top: 0;
@include left(0);
width: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
height: 100%;
......@@ -213,7 +228,8 @@
transition: opacity 0.5s;
}
&:hover, &:active {
&:hover,
&:active {
.u-field-remove-button {
opacity: 1;
}
......@@ -234,14 +250,16 @@
.wrapper-profile-field-account-privacy {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
margin: 0 auto 0;
margin: 0 auto;
border: 1px solid $gray-l3;
background-color: $gray-l4;
padding: ($baseline*0.75) 0;
.u-field-account_privacy {
@extend .container;
border: none;
box-shadow: none;
padding: 0 ($baseline*3);
......@@ -249,6 +267,7 @@
.u-field-title {
@extend %t-strong;
width: auto;
color: $base-font-color;
cursor: text;
......@@ -257,11 +276,13 @@
.u-field-value {
width: auto;
@include margin-left($baseline/2);
}
.u-field-message {
@include float(left);
width: 100%;
padding: 0;
color: $base-font-color;
......@@ -275,7 +296,9 @@
.wrapper-profile-sections {
@extend .container;
@include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
min-width: 0;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
......@@ -294,6 +317,7 @@
.header {
@extend %t-title4;
@extend %t-ultrastrong;
display: inline-block;
}
......@@ -311,6 +335,7 @@
.wrapper-profile-section-one {
@include float(left);
@include margin-left($baseline*3);
width: 300px;
background-color: $white;
border-top: 5px solid $blue;
......@@ -318,6 +343,7 @@
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(0);
width: 100%;
}
......@@ -326,6 +352,7 @@
.social-links {
@include padding($baseline/4, 0, 0, $baseline/4);
font-size: 2rem;
& > span {
......@@ -349,11 +376,14 @@
.u-field {
font-weight: $font-semibold;
@include padding(0, 0, 0, 3px);
color: $base-font-color;
margin-top: $baseline/5;
.u-field-value, .u-field-title {
.u-field-value,
.u-field-title {
font-weight: 500;
width: calc(100% - 40px);
color: $lightest-base-font-color;
......@@ -389,7 +419,7 @@
}
}
&>.u-field {
& > .u-field {
&:not(:first-child) {
font-size: $body-font-size;
color: $base-font-color;
......@@ -400,16 +430,18 @@
&:first-child {
@extend %t-title4;
@extend %t-weight4;
font-size: em(24);
}
}
select {
width: 85%
width: 85%;
}
.u-field-message {
@include right(0);
position: absolute;
top: 0;
width: 20px;
......@@ -426,6 +458,7 @@
.wrapper-profile-section-container-two {
@include float(left);
@include padding-left($baseline);
width: calc(100% - 380px);
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
font-family: $sans-serif;
......@@ -437,7 +470,8 @@
}
.u-field-textarea {
@include padding(0, ($baseline*.75), ($baseline*.75), 0);
@include padding(0, ($baseline*0.75), ($baseline*0.75), 0);
margin-bottom: ($baseline/2);
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
......@@ -449,6 +483,7 @@
.u-field-message {
@include right(0);
top: $baseline/4;
position: absolute;
}
......@@ -461,6 +496,7 @@
.u-field-title {
@extend %t-title6;
display: inline-block;
margin-top: 0;
margin-bottom: ($baseline/4);
......@@ -471,6 +507,7 @@
.u-field-value {
@extend %t-copy-base;
width: 100%;
overflow: auto;
......@@ -493,6 +530,7 @@
.u-field-message {
@include float(right);
width: auto;
.message-can-edit {
......@@ -507,10 +545,13 @@
i {
font-size: 12px;
@include padding-right(5px);
vertical-align: middle;
color: $base-font-color;
}
.u-field-title {
width: 100%;
text-align: center;
......@@ -519,14 +560,17 @@
.u-field-value {
text-align: center;
line-height: 1.5em;
@extend %t-copy-sub1;
color: $base-font-color;
}
&:hover {
border: 2px dashed $link-color;
.u-field-title, i {
.u-field-title,
i {
color: $link-color;
}
}
......@@ -536,14 +580,16 @@
font-size: $body-font-size;
color: $base-font-color;
.u-field-header .u-field-title{
.u-field-header .u-field-title {
color: $base-font-color;
}
.u-field-footer {
.field-textarea-character-count {
@extend %t-weight1;
@include float(right);
margin-top: $baseline/4;
}
}
......@@ -551,7 +597,8 @@
.profile-private-message {
@include padding-left($baseline*0.75);
line-height: 3.0em;
line-height: 3em;
}
}
......@@ -565,7 +612,8 @@
.badge-set-display {
@extend .container;
padding: 0 0;
padding: 0;
.badge-list {
// We're using a div instead of ul for accessibility, so we have to match the style
......@@ -579,15 +627,18 @@
display: inline-block;
vertical-align: top;
padding: 2em 0;
.badge-image-container {
padding-right: $baseline;
margin-left: 1em;
width: 20%;
vertical-align: top;
display: inline-block;
img.badge {
width: 100%;
}
.accomplishment-placeholder {
border: 4px dotted $gray-l4;
border-radius: 50%;
......@@ -596,24 +647,31 @@
padding-bottom: 100%;
}
}
.badge-details {
@extend %t-copy-sub1;
@extend %t-regular;
max-width: 70%;
display: inline-block;
color: $gray-d1;
.badge-name {
@extend %t-strong;
@extend %t-copy-base;
color: $gray-d3;
}
.badge-description {
padding-bottom: $baseline;
line-height: 1.5em;
}
.badge-date-stamp{
.badge-date-stamp {
@extend %t-copy-sub1;
}
.find-button-container {
border: 1px solid $blue-l1;
padding: ($baseline / 2) $baseline ($baseline / 2) $baseline;
......@@ -622,9 +680,11 @@
font-weight: bold;
color: $blue-s3;
}
.share-button {
@extend %t-action3;
@extend %button-reset;
background: $gray-l6;
color: $gray-d1;
padding: ($baseline / 4) ($baseline / 2);
......@@ -633,21 +693,26 @@
border-radius: 5px;
border: 2px solid $gray-d1;
cursor: pointer;
transition: background .5s;
transition: background 0.5s;
.share-prefix {
display: inline-block;
vertical-align: middle;
}
.share-icon-container {
display: inline-block;
img.icon-mozillaopenbadges {
max-width: 1.5em;
margin-right: .25em;
margin-right: 0.25em;
}
}
&:hover {
background: $gray-l4;
}
&:active {
box-shadow: inset 0 4px 15px 0 $black-t2;
transition: none;
......@@ -655,6 +720,7 @@
}
}
}
.badge-placeholder {
background-color: $gray-l7;
box-shadow: inset 0 0 4px 0 $gray-l4;
......@@ -666,6 +732,7 @@
// ------------------------------
.badges-overlay {
@extend %ui-depth1;
position: fixed;
top: 0;
left: 0;
......@@ -677,6 +744,7 @@
.badges-modal {
@extend %t-copy-lead1;
@extend %ui-depth2;
color: $lighter-base-font-color;
box-sizing: content-box;
position: fixed;
......@@ -703,14 +771,18 @@
.close {
@extend %button-reset;
@extend %t-strong;
color: $lighter-base-font-color;
position: absolute;
right: ($baseline);
top: $baseline;
cursor: pointer;
padding: ($baseline / 4) ($baseline / 2);
@include transition(all $tmg-f2 ease-in-out 0s);
&:focus, &:hover {
&:focus,
&:hover {
background-color: $blue-d2;
border-radius: 3px;
color: $white;
......@@ -721,13 +793,15 @@
display: table;
}
.image-container{
.image-container {
// Lines the image up with the content of the above list.
@include ltr {
@include padding-left(2em);
}
@include rtl {
@include padding-right(1em);
float: right;
}
}
......
scripts/all-tests.sh
......@@ -13,7 +13,7 @@ set -e
# Violations thresholds for failing the build
export PYLINT_THRESHOLD=3600
export ESLINT_THRESHOLD=9134
export STYLELINT_THRESHOLD=18431
export STYLELINT_THRESHOLD=18416
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
......
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