Update SCSS for linter, revised lint:css command to only report, not fix

mozilla · Aug 11, 2021 · 75fff1d · 75fff1d
1 parent 1bb99e5
commit 75fff1d
Show file tree

Hide file tree

Showing 11 changed files with 1,699 additions and 1,698 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
   "scripts": {
     "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint .",
-    "lint:css": "stylelint --fix static/scss/",
+    "lint:css": "stylelint static/scss/",
+    "lint:css-fix": "stylelint --fix static/scss/",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
 }
diff --git a/static/scss/components/buttons.scss b/static/scss/components/buttons.scss
@@ -1,39 +1,39 @@
 .btn {
-  appearance: none;
-  border: 0;
-  font-weight: 600;
-  padding: .5rem 1rem;
-  display: inline-block;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: $font-metropolis;
+    appearance: none;
+    border: 0;
+    font-weight: 600;
+    padding: .5rem 1rem;
+    display: inline-block;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: $font-metropolis;
 }
 
 .btn--gray {
-  border: 1px solid #CCCCCC;
-  color: $color-blue-50;
+    border: 1px solid #CCCCCC;
+    color: $color-blue-50;
 }
 
 .btn--blue { 
-  background-color: $color-blue-50;
-  color: $color-white;
+    background-color: $color-blue-50;
+    color: $color-white;
 }
 
 .btn-blue--ghost {
-  border: 2px solid $color-blue-50;
-  color: $color-blue-50;
-  background: none;
-  &:hover {
-      color: $color-white;
-      background-color: $color-blue-50;
-  }
+    border: 2px solid $color-blue-50;
+    color: $color-blue-50;
+    background: none;
+    &:hover {
+        color: $color-white;
+        background-color: $color-blue-50;
+    }
 }
 
 .c-button-toggle {
-  form {
-    display: flex;
-    align-items: center;
-  }    
+    form {
+        display: flex;
+        align-items: center;
+    }    
 }
 
 .mzp-c-button.has-icon {

diff --git a/static/scss/components/filter-bar.scss b/static/scss/components/filter-bar.scss
@@ -68,7 +68,7 @@
 
     @media #{$mq-md} {
         align-self: flex-start;
-         margin-right: auto;
+        margin-right: auto;
         form {
             display: block;
         }
@@ -106,21 +106,21 @@
 
 .c-filter-icon-search {
     background-size: auto 1.25rem;
-    background-image: url(/static/images/icon-search.svg);        
+    background-image: url(/static/images/icon-search.svg);
     &.is-enabled, &:hover {
         background-image: url(/static/images/icon-search-blue.svg);        
     }
 }
 
 .c-filter-icon-calendar {
-    background-image: url(/static/images/icon-calendar.svg);        
+    background-image: url(/static/images/icon-calendar.svg);
     &.is-enabled, &:hover {
         background-image: url(/static/images/icon-calendar-blue.svg);        
     }
 }
 
 .c-filter-icon-filter {
-    background-image: url(/static/images/icon-filter.svg);        
+    background-image: url(/static/images/icon-filter.svg);
     &.is-enabled, &:hover {
         background-image: url(/static/images/icon-filter-blue.svg);        
     }

diff --git a/static/scss/includes/variables.scss b/static/scss/includes/variables.scss
@@ -1,11 +1,11 @@
 // CSS Custom Properties
 :root {
-  --buttonFocus: 0 0 0 1px #0A84FF, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, .3);
-  --darkBlueGradient: linear-gradient(60deg, #2D264E, #26294E);
-  --dropShadowLight: 0 0 10px -3px #3D3F4740;
-  --dropShadowDark: 0 12px 18px 2px rgba(34, 0, 51, .09), 0 6px 22px 4px rgba(4, 25, 59, .87), 0 6px 10px -4px rgba(14, 13, 26, .12);
-  --fxGradient: linear-gradient(-90deg, #FF9100 0%, #F10366 50%, #6173FF 100%);
-  --h1Gradient: linear-gradient(-90deg, #83A0F7, #B66DFF);
+    --buttonFocus: 0 0 0 1px #0A84FF, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, .3);
+    --darkBlueGradient: linear-gradient(60deg, #2D264E, #26294E);
+    --dropShadowLight: 0 0 10px -3px #3D3F4740;
+    --dropShadowDark: 0 12px 18px 2px rgba(34, 0, 51, .09), 0 6px 22px 4px rgba(4, 25, 59, .87), 0 6px 10px -4px rgba(14, 13, 26, .12);
+    --fxGradient: linear-gradient(-90deg, #FF9100 0%, #F10366 50%, #6173FF 100%);
+    --h1Gradient: linear-gradient(-90deg, #83A0F7, #B66DFF);
 }
 
 // Fonts

diff --git a/static/scss/partials/banners.scss b/static/scss/partials/banners.scss
@@ -109,7 +109,7 @@
     margin-left: $spacing-2xl;
 
     .x-close-icon path {
-      fill: $color-black !important; 
+        fill: $color-black !important; 
     }
 
-  }
+}
diff --git a/static/scss/partials/dashboard.scss b/static/scss/partials/dashboard.scss
@@ -16,9 +16,9 @@
 }
 
 .mpp-dashbaord-header-container {
-  max-width: $content-xl;
-  margin: auto;
-  padding: $spacing-xl $spacing-lg;
+    max-width: $content-xl;
+    margin: auto;
+    padding: $spacing-xl $spacing-lg;
 }
 
 .mpp-dashbaord-header-title {
@@ -63,22 +63,22 @@
 }
 
 .mpp-action-link {
-  color: $color-blue-50;
-  appearance: none;
-  background: none;
-  border: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  .margin-right {
-      margin-right: $spacing-xs;
-  }
-  .margin-left {
-      margin-left: $spacing-xs;
-  }
-  &:hover {
-      color: $color-blue-40;
-  }
+    color: $color-blue-50;
+    appearance: none;
+    background: none;
+    border: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    .margin-right {
+        margin-right: $spacing-xs;
+    }
+    .margin-left {
+        margin-left: $spacing-xs;
+    }
+    &:hover {
+        color: $color-blue-40;
+    }
 }
 
 .mpp-action-tooltip-hover {
@@ -95,34 +95,34 @@
 }
 
 .mpp-action-tooltip-hover-wrapper {
+    background-color: white;
+    box-shadow: var(--dropShadowLight);
+    border-radius: $border-radius-sm;
+    position: relative;
+    color: $color-violet-90;
+    padding: $spacing-md;
+    &:after{
         background-color: white;
-        box-shadow: var(--dropShadowLight);
-        border-radius: $border-radius-sm;
-        position: relative;
-        color: $color-violet-90;
-        padding: $spacing-md;
-        &:after{
-            background-color: white;
-            right: $layout-sm;
-
-            // TODO: Fix shadow on bubble triangle
-            // box-shadow: -2px 2px 2px 0 #3d3f4740;
-            content: "\00a0";
-            display: block;
-            height: 20px;
-            position: absolute;
-
-            top: -10px;
-            transform: rotate(135deg);
-            width:  20px;
+        right: $layout-sm;
 
-            @media #{$mq-md} {
-                right: auto;
-                left: $layout-sm;
-            }
+        // TODO: Fix shadow on bubble triangle
+        // box-shadow: -2px 2px 2px 0 #3d3f4740;
+        content: "\00a0";
+        display: block;
+        height: 20px;
+        position: absolute;
+
+        top: -10px;
+        transform: rotate(135deg);
+        width:  20px;
 
+        @media #{$mq-md} {
+            right: auto;
+            left: $layout-sm;
         }
+
     }
+}
 
 .mpp-action-tooltip {
     position: relative;
@@ -141,7 +141,7 @@
         justify-content: space-between;
     }    
     .mpp-dashbaord-header-title {
-        width: 25%;   
+        width: 25%;
         flex-grow: 2;
         margin-bottom: 0;
         display: block;