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 110 additions and 79 deletions
lms/static/sass/features/_bookmarks-v1.scss
...@@ -8,6 +8,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -8,6 +8,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
> div { > div {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
} }
} }
...@@ -22,11 +23,13 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -22,11 +23,13 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// set styles // set styles
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
@include font-size(13); @include font-size(13);
width: 100%; width: 100%;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
&:before { &::before {
content: $bookmarked-icon; content: $bookmarked-icon;
font-family: FontAwesome; font-family: FontAwesome;
} }
...@@ -35,9 +38,9 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -35,9 +38,9 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for bookmark icon shown on each sequence nav item // Rules for bookmark icon shown on each sequence nav item
.course-content { .course-content {
.bookmark-icon.bookmarked { .bookmark-icon.bookmarked {
@include right($baseline / 4); @include right($baseline / 4);
top: -3px; top: -3px;
position: absolute; position: absolute;
} }
...@@ -48,17 +51,15 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -48,17 +51,15 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
} }
.bookmark-button { .bookmark-button {
&::before {
&:before {
content: $bookmark-icon; content: $bookmark-icon;
font-family: FontAwesome; font-family: FontAwesome;
} }
&.bookmarked { &.bookmarked {
&:before { &::before {
content: $bookmarked-icon; content: $bookmarked-icon;
} }
} }
} }
} }
lms/static/sass/features/_bookmarks.scss
...@@ -3,85 +3,87 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -3,85 +3,87 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for Bookmarks Results Header // Rules for Bookmarks Results Header
.bookmarks-results-header { .bookmarks-results-header {
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
// Rules for Bookmarks Results // Rules for Bookmarks Results
.bookmarks-results-list { .bookmarks-results-list {
padding-top: ($baseline/2); padding-top: ($baseline/2);
.bookmarks-results-list-item { .bookmarks-results-list-item {
@include padding(0, $baseline, ($baseline/4), $baseline); @include padding(0, $baseline, ($baseline/4), $baseline);
display: block;
border: 1px solid $lms-border-color;
margin-bottom: $baseline;
&:hover { display: block;
border-color: palette(primary, base); border: 1px solid $lms-border-color;
margin-bottom: $baseline;
.list-item-breadcrumbtrail {
color: palette(primary, base);
}
}
}
.results-list-item-view {
@include float(right);
margin-top: $baseline;
}
.list-item-date { &:hover {
margin-top: ($baseline/4); border-color: palette(primary, base);
color: $lms-gray;
font-size: font-size(small);
}
.bookmarks-results-list-item:before { .list-item-breadcrumbtrail {
content: $bookmarked-icon;
position: relative;
top: -7px;
font-family: FontAwesome;
color: palette(primary, base); color: palette(primary, base);
}
} }
}
.list-item-content { .results-list-item-view {
overflow: hidden; @include float(right);
}
.list-item-left-section { margin-top: $baseline;
display: inline-block; }
vertical-align: middle;
width: 90%; .list-item-date {
} margin-top: ($baseline/4);
color: $lms-gray;
.list-item-right-section { font-size: font-size(small);
display: inline-block; }
vertical-align: middle;
.bookmarks-results-list-item::before {
.fa-arrow-right { content: $bookmarked-icon;
position: relative;
@include rtl { top: -7px;
@include transform(rotate(180deg)); font-family: FontAwesome;
} color: palette(primary, base);
} }
.list-item-content {
overflow: hidden;
}
.list-item-left-section {
display: inline-block;
vertical-align: middle;
width: 90%;
}
.list-item-right-section {
display: inline-block;
vertical-align: middle;
.fa-arrow-right {
@include rtl {
@include transform(rotate(180deg));
}
} }
}
} }
// Rules for empty bookmarks list // Rules for empty bookmarks list
.bookmarks-empty { .bookmarks-empty {
margin-top: $baseline; margin-top: $baseline;
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
padding: $baseline; padding: $baseline;
background-color: $white; background-color: $white;
} }
.bookmarks-empty-header { .bookmarks-empty-header {
@extend %t-title5; @extend %t-title5;
margin-bottom: ($baseline/2);
margin-bottom: ($baseline/2);
} }
.bookmarks-empty-detail { .bookmarks-empty-detail {
@extend %t-copy-sub1; @extend %t-copy-sub1;
} }
lms/static/sass/features/_course-experience.scss
...@@ -26,8 +26,10 @@ ...@@ -26,8 +26,10 @@
margin: $baseline 0; margin: $baseline 0;
} }
&:after, &:before { &::after,
&::before {
@include left(0); @include left(0);
bottom: 35%; bottom: 35%;
border: solid transparent; border: solid transparent;
height: 0; height: 0;
...@@ -40,15 +42,17 @@ ...@@ -40,15 +42,17 @@
} }
} }
&:after { &::after {
@include border-right-color($white); @include border-right-color($white);
@include margin-left($baseline*-1+1); @include margin-left($baseline*-1+1);
border-width: $baseline/2; border-width: $baseline/2;
} }
&:before { &::before {
@include margin-left($baseline*-1); @include margin-left($baseline*-1);
@include border-right-color($lms-border-color); @include border-right-color($lms-border-color);
border-width: $baseline/2; border-width: $baseline/2;
} }
...@@ -65,14 +69,19 @@ ...@@ -65,14 +69,19 @@
} }
// Welcome message / Latest Update message // Welcome message / Latest Update message
.welcome-message, .update-message{ .welcome-message,
.update-message {
border: solid 1px $lms-border-color; border: solid 1px $lms-border-color;
@include border-left(solid 4px $black); @include border-left(solid 4px $black);
margin-bottom: $baseline; margin-bottom: $baseline;
padding: $baseline; padding: $baseline;
overflow: hidden; overflow: hidden;
h1, h2, h3 { h1,
h2,
h3 {
font-size: font-size(large); font-size: font-size(large);
font-weight: $font-bold; font-weight: $font-bold;
color: $black; color: $black;
...@@ -80,14 +89,16 @@ ...@@ -80,14 +89,16 @@
img { img {
@include float(left); @include float(left);
margin: $baseline/2; margin: $baseline/2;
max-width: 100%; max-width: 100%;
} }
.dismiss-message { .dismiss-message {
@include float(right); @include float(right);
.btn-link { .btn-link {
color: palette(grayscale, base); color: palette(grayscale, base);
} }
} }
} }
...@@ -123,6 +134,7 @@ ...@@ -123,6 +134,7 @@
.section-name { .section-name {
@include margin(0, 0, ($baseline / 2), ($baseline / 2)); @include margin(0, 0, ($baseline / 2), ($baseline / 2));
padding: 0; padding: 0;
h3 { h3 {
...@@ -140,7 +152,6 @@ ...@@ -140,7 +152,6 @@
padding-bottom: $baseline; padding-bottom: $baseline;
border-bottom: 1px solid $light-grey-solid; border-bottom: 1px solid $light-grey-solid;
margin: 0 0 ($baseline / 2) 0; margin: 0 0 ($baseline / 2) 0;
.subsection { .subsection {
list-style-type: none; list-style-type: none;
...@@ -157,7 +168,8 @@ ...@@ -157,7 +168,8 @@
margin: 0; margin: 0;
} }
&:hover, &:focus { &:hover,
&:focus {
background-color: palette(primary, x-back); background-color: palette(primary, x-back);
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
text-decoration: none; text-decoration: none;
...@@ -205,6 +217,7 @@ ...@@ -205,6 +217,7 @@
.date-summary { .date-summary {
@include clearfix; @include clearfix;
@include border-left(3px solid $gray-l3); @include border-left(3px solid $gray-l3);
padding: $baseline/2; padding: $baseline/2;
.heading { .heading {
...@@ -223,6 +236,7 @@ ...@@ -223,6 +236,7 @@
.date-summary-link { .date-summary-link {
font-weight: $font-semibold; font-weight: $font-semibold;
a { a {
color: $link-color; color: $link-color;
font-weight: $font-regular; font-weight: $font-regular;
...@@ -284,7 +298,7 @@ ...@@ -284,7 +298,7 @@
// Course Reviews Page // Course Reviews Page
.course-reviews { .course-reviews {
.page-header.has-secondary > .page-header-main { .page-header.has-secondary > .page-header-main {
display: block; display: block;
position: relative; position: relative;
......
lms/static/sass/features/_course-search.scss
...@@ -17,12 +17,14 @@ ...@@ -17,12 +17,14 @@
.search-count { .search-count {
@include text-align(right); @include text-align(right);
display: block; display: block;
color: $lms-gray; color: $lms-gray;
} }
.search-results-item { .search-results-item {
@include padding-right(140px); @include padding-right(140px);
position: relative; position: relative;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
padding: $baseline ($baseline/2); padding: $baseline ($baseline/2);
...@@ -51,6 +53,7 @@ ...@@ -51,6 +53,7 @@
.result-link { .result-link {
@include right($baseline/2); @include right($baseline/2);
position: absolute; position: absolute;
top: $baseline; top: $baseline;
line-height: 1.6em; line-height: 1.6em;
...@@ -58,6 +61,7 @@ ...@@ -58,6 +61,7 @@
.result-type { .result-type {
@include right($baseline/2); @include right($baseline/2);
position: absolute; position: absolute;
color: $lms-gray; color: $lms-gray;
font-size: 14px; font-size: 14px;
......
lms/static/sass/features/_course-sock.scss
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 100%; width: 100%;
margin-top: $baseline;
max-width: $lms-max-width; max-width: $lms-max-width;
margin: $baseline auto 0; margin: $baseline auto 0;
-webkit-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out;
...@@ -14,6 +13,7 @@ ...@@ -14,6 +13,7 @@
.action-toggle-verification-sock { .action-toggle-verification-sock {
@include left(50%); @include left(50%);
@include margin-left(-1 * $baseline * 15/2); @include margin-left(-1 * $baseline * 15/2);
position: absolute; position: absolute;
top: (-1 * $baseline); top: (-1 * $baseline);
width: ($baseline * 15); width: ($baseline * 15);
...@@ -71,6 +71,7 @@ ...@@ -71,6 +71,7 @@
.mini-cert { .mini-cert {
@include right($baseline); @include right($baseline);
position: absolute; position: absolute;
top: $baseline; top: $baseline;
width: ($baseline * 13); width: ($baseline * 13);
...@@ -96,7 +97,7 @@ ...@@ -96,7 +97,7 @@
width: ($baseline * 5/2); width: ($baseline * 5/2);
} }
.story-quote > .author{ .story-quote > .author {
display: block; display: block;
margin-top: ($baseline / 4); margin-top: ($baseline / 4);
font-weight: 600; font-weight: 600;
...@@ -135,6 +136,7 @@ ...@@ -135,6 +136,7 @@
&.attached { &.attached {
@include right($baseline); @include right($baseline);
position: fixed; position: fixed;
bottom: $baseline; bottom: $baseline;
top: auto; top: auto;
......
lms/static/sass/features/_course-upgrade-message.scss
...@@ -17,7 +17,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -17,7 +17,7 @@ $upgrade-message-background-color: $blue-d1;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:after { &::after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
...@@ -28,12 +28,14 @@ $upgrade-message-background-color: $blue-d1; ...@@ -28,12 +28,14 @@ $upgrade-message-background-color: $blue-d1;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1rem; margin-bottom: 1rem;
@include float(left); @include float(left);
} }
.vc-selling-points { .vc-selling-points {
@include clear(left); @include clear(left);
@include padding-left(0); @include padding-left(0);
font-size: 0.825rem; font-size: 0.825rem;
margin: 1rem 0; margin: 1rem 0;
display: table; display: table;
...@@ -42,19 +44,21 @@ $upgrade-message-background-color: $blue-d1; ...@@ -42,19 +44,21 @@ $upgrade-message-background-color: $blue-d1;
list-style: none; list-style: none;
display: table-row; display: table-row;
&:before { &::before {
content: "\2022"; content: "\2022";
display: table-cell; display: table-cell;
@include padding-right($baseline/2); @include padding-right($baseline/2);
} }
&:after { &::after {
content: ""; content: "";
display: table-row; display: table-row;
height: 0.25rem; height: 0.25rem;
} }
} }
} }
img { img {
max-width: 100%; max-width: 100%;
} }
...@@ -62,12 +66,14 @@ $upgrade-message-background-color: $blue-d1; ...@@ -62,12 +66,14 @@ $upgrade-message-background-color: $blue-d1;
// Show/hide button // Show/hide button
.vc-toggle { .vc-toggle {
@include float(right); @include float(right);
color: $white; color: $white;
} }
// Upgrade Button // Upgrade Button
.btn-upgrade { .btn-upgrade {
@extend %btn-primary-green; @extend %btn-primary-green;
background: $uxpl-green-base; background: $uxpl-green-base;
} }
...@@ -75,6 +81,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -75,6 +81,7 @@ $upgrade-message-background-color: $blue-d1;
.vc-hero { .vc-hero {
@include float(right); @include float(right);
@include padding-left(1rem); @include padding-left(1rem);
clear: both; clear: both;
width: 35%; width: 35%;
...@@ -95,6 +102,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -95,6 +102,7 @@ $upgrade-message-background-color: $blue-d1;
.vc-title { .vc-title {
margin: 0; margin: 0;
@include margin-right(auto); @include margin-right(auto);
} }
......
scripts/all-tests.sh
...@@ -13,7 +13,7 @@ set -e ...@@ -13,7 +13,7 @@ set -e
# Violations thresholds for failing the build # Violations thresholds for failing the build
export PYLINT_THRESHOLD=3600 export PYLINT_THRESHOLD=3600
export ESLINT_THRESHOLD=9134 export ESLINT_THRESHOLD=9134
export STYLELINT_THRESHOLD=18431 export STYLELINT_THRESHOLD=18416
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json` XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/} 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