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

More Sass quality fixes

Browse Source
This commit is contained in:
Andy Armstrong
2017-10-11 17:18:58 -04:00
parent 6387e3a813
commit bd1a0d96cf
78 changed files with 1869 additions and 1641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
common/static/sass/_mixins-inherited.scss
View File

@@ -26,50 +26,57 @@
// inherited - dividers
.faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px;
width: 100%;
}
.faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 100%;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
height: 100%;
width: 1px;
}
.vertical-divider {
@extend .faded-vertical-divider;
position: relative;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
@@ -79,11 +86,14 @@
.horizontal-divider {
border: none;
@extend .faded-hr-divider;
position: relative;
&::after {
@extend .faded-hr-divider-light;
content: "";
display: block;
position: absolute;
@@ -93,13 +103,15 @@
.fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1)));
rgba(200,200,200, 1)));
border: none;
}
.fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0)));
rgba(200,200,200, 0)));
border: none;
}
@@ -108,6 +120,7 @@
// inherited - ui
.window {
@include clearfix();
box-shadow: 0 1px 1px $shadow-l1;
border-radius: 3px;
margin-bottom: $baseline;
@@ -120,8 +133,10 @@
// mixins - grandfathered
@mixin button {
@include transition(background-color 0.15s, box-shadow 0.15s);
@extend %t-action3;
@extend %t-strong;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
display: inline-block;
padding: ($baseline/5) $baseline ($baseline/4);
@@ -133,6 +148,7 @@
color: $gray-d1 !important;
pointer-events: none;
cursor: none;
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
@@ -146,6 +162,7 @@
@mixin green-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $uxpl-green-base;
border-radius: 3px;
@@ -168,6 +185,7 @@
@mixin blue-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $uxpl-blue-base;
border-radius: 3px;
background-color: $uxpl-blue-base;
@@ -189,6 +207,7 @@
@mixin red-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $red-d1;
border-radius: 3px;
background-color: $red;
@@ -210,6 +229,7 @@
@mixin pink-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid $pink-d1;
border-radius: 3px;
background-color: $pink;
@@ -231,6 +251,7 @@
@mixin orange-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $orange-d1;
border-radius: 3px;
@@ -253,6 +274,7 @@
@mixin white-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $mediumGrey;
border-radius: 3px;
@@ -269,6 +291,7 @@
@mixin grey-button {
@include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid $gray-d2;
border-radius: 3px;
@@ -284,6 +307,7 @@
.gray-button {
@include button;
@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 $white-t1 inset;
border: 1px solid $gray-d1;
border-radius: 3px;
@@ -319,6 +343,7 @@
h5 {
@extend %t-strong;
margin-bottom: 8px;
color: $white;
}
@@ -331,11 +356,13 @@
.save-button {
@include blue-button;
margin-top: 0;
}
.cancel-button {
@include white-button;
margin-top: 0;
}
}
@@ -345,6 +372,7 @@
// sunsetted mixins
@mixin active {
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
background-color: rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

12
common/static/sass/assets/_anims.scss
View File

@@ -98,11 +98,13 @@
@include keyframes(bounceIn) {
0% {
opacity: 0.0;
@include transform(scale(0.3));
}
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
@@ -119,11 +121,13 @@
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
100% {
opacity: 0.0;
@include transform(scale(0.3));
}
}
@@ -144,11 +148,11 @@
// flash - double
@include keyframes(flashDouble) {
0%, 50%, 100% {
opacity: 1.0;
}
0%, 50%, 100% {
opacity: 1.0;
}
25%, 75% {
25%, 75% {
opacity: 0.0;
}
}

6
common/static/sass/edx-pattern-library-shims/base/_variables.scss
View File

@@ -61,6 +61,7 @@ $spacing-horizontal: (
}
@warn "Unknown `#{$key}` in $spacing-vertical.";
@return null;
}
@@ -71,6 +72,7 @@ $spacing-horizontal: (
}
@warn "Unknown `#{$key}` in $spacing-horizontal.";
@return null;
}
@@ -104,6 +106,7 @@ $font-sizes: (
}
@warn "Unknown `#{$key}` in $font-sizes.";
@return null;
}
@@ -114,6 +117,7 @@ $font-sizes: (
}
@warn "Unknown `#{$key}` in $font-weights.";
@return null;
}
@@ -233,8 +237,10 @@ $btn-small-padding-horizontal: spacing-horizontal(small);
@mixin notification-by-type($color) {
border-top: 3px solid $color;
.icon {
@include margin-right(3 * $baseline/ 4);
color: $color;
}
}

1
common/static/sass/neat/functions/_new-breakpoint.scss
View File

@@ -1,5 +1,4 @@
@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 {
$query: $default-feature nth($query, 1) $total-columns;
}

12
common/static/sass/neat/functions/_private.scss
View File

@@ -31,11 +31,13 @@
@function container-span($span: $span) {
@if length($span) == 3 {
$container-columns: nth($span, 3);
@return $container-columns;
}
@else if length($span) == 2 {
$container-columns: nth($span, 2);
@return $container-columns;
}
@@ -49,11 +51,13 @@
@if length($shift) == 3 {
$container-columns: nth($shift, 3);
@return $container-columns;
}
@else if length($shift) == 2 {
$container-columns: nth($shift, 2);
@return $container-columns;
}
@@ -95,7 +99,9 @@
@if $layout == LTR or $layout == RTL {
$direction: direction-from-layout($layout);
} @else {
}
@else {
$direction: direction-from-layout($default);
}
@@ -107,7 +113,9 @@
@if $layout == LTR {
$direction: right;
} @else {
}
@else {
$direction: left;
}

2
common/static/sass/neat/grid/_media.scss
View File

@@ -3,6 +3,7 @@
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
@content;
$grid-columns: $default-grid-columns !global;
}
@@ -20,6 +21,7 @@
}
$i: 1;
@while $i <= $loopTo {
$mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';

4
common/static/sass/neat/grid/_omega.scss
View File

@@ -5,7 +5,9 @@
@if $direction != default {
@warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
} @else {
}
@else {
$direction: get-direction($layout-direction, $default-layout-direction);
}

1
common/static/sass/neat/grid/_outer-container.scss
View File

@@ -1,5 +1,6 @@
@mixin outer-container {
@include clearfix();
max-width: $max-width;
margin: {
left: auto;

2
common/static/sass/neat/grid/_pad.scss
View File

@@ -1,8 +1,10 @@
@mixin pad($padding: flex-gutter()) {
$padding-list: null;
@each $value in $padding {
$value: if($value == 'default', flex-gutter(), $value);
$padding-list: join($padding-list, $value);
}
padding: $padding-list;
}

10
common/static/sass/neat/grid/_private.scss
View File

@@ -8,11 +8,13 @@ $layout-direction: nil !default;
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
@@ -23,7 +25,9 @@ $layout-direction: nil !default;
@function get-parent-columns($columns) {
@if $columns != $grid-columns {
$parent-columns: $columns !global;
} @else {
}
@else {
$parent-columns: $grid-columns !global;
}
@@ -35,7 +39,9 @@ $layout-direction: nil !default;
@if $container-is-display-table == true {
$display-table: true;
} @else if $display == table {
}
@else if $display == table {
$display-table: true;
}

2
common/static/sass/neat/grid/_row.scss
View File

@@ -4,7 +4,9 @@
@if $display == table {
display: table;
@include fill-parent;
table-layout: fixed;
$container-display-table: true !global;
}

8
common/static/sass/neat/grid/_span-columns.scss
View File

@@ -13,7 +13,9 @@
@if $display-table {
display: table-cell;
width: percentage($columns / $container-columns);
} @else {
}
@else {
float: #{$opposite-direction};
@if $display != no-display {
@@ -31,7 +33,9 @@
width: flex-grid($columns, $container-columns);
}
} @else {
}
@else {
margin-#{$direction}: flex-gutter($container-columns);
width: flex-grid($columns, $container-columns);

6
common/static/sass/neat/grid/_to-deprecate.scss
View File

@@ -5,6 +5,7 @@
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
@@ -14,6 +15,7 @@
@media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
@@ -23,6 +25,7 @@
@media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns;
$grid-columns: nth($query, 3);
@content;
$grid-columns: $default-grid-columns;
}
@@ -32,6 +35,7 @@
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
@@ -41,6 +45,7 @@
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns;
$grid-columns: nth($query, 5);
@content;
$grid-columns: $default-grid-columns;
}
@@ -53,5 +58,6 @@
@mixin nth-omega($nth, $display: block, $direction: default) {
@warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
@include omega($nth $display, $direction);
}

2
common/static/sass/neat/grid/_visual-grid.scss
View File

@@ -11,7 +11,9 @@
body:before {
content: '';
display: inline-block;
@include grid-column-gradient(gradient-stops($grid-columns));
height: 100%;
left: 0;
margin: 0 auto;

2
common/static/sass/neat/settings/_visual-grid.scss
View File

@@ -1,5 +1,5 @@
$visual-grid: false !default; // Display the base grid
$visual-grid-color: #EEE !default;
$visual-grid-color: #eee !default;
$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
$visual-grid-opacity: 0.4 !default;
$visual-grid-breakpoints: () !default;