Add no-leading-zero lint rule/fix

mozilla · Aug 3, 2021 · 4b9ef5f · 4b9ef5f
1 parent 4758b7d
commit 4b9ef5f
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 124 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -12,6 +12,7 @@
   "rules": {
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "number-leading-zero": "never"
   }
 }
diff --git a/static/scss/components/banners.scss b/static/scss/components/banners.scss
@@ -27,16 +27,16 @@
         width: 100%;
         display: block;
         border-radius: 4px;
-        padding: 0.5rem 1rem;
-        margin-bottom: 0.5rem;
+        padding: .5rem 1rem;
+        margin-bottom: .5rem;
         &[type='text'] {
             border: 1px solid #CCCCCC;
             width: 100%;
         }
 
     }
     .warning {
-        font-size: 0.9rem;
+        font-size: .9rem;
         font-weight: 700;
         color: $color-warning;
     }

diff --git a/static/scss/components/buttons.scss b/static/scss/components/buttons.scss
@@ -2,7 +2,7 @@
   appearance: none;
   border: 0;
   font-weight: 600;
-  padding: 0.5rem 1rem;
+  padding: .5rem 1rem;
   display: inline-block;
   border-radius: 4px;
   cursor: pointer;

diff --git a/static/scss/components/filter-bar.scss b/static/scss/components/filter-bar.scss
@@ -48,7 +48,7 @@
         margin-bottom: 0;
         padding-right: 1.75rem;
         &:focus + .c-filter-case-count {
-            opacity: 0.5;
+            opacity: .5;
         }
         &:focus + .c-filter-case-count + .c-filter-reset {
             opacity: 1;
@@ -63,7 +63,7 @@
         top: 0;
         align-items: center;
         height: 100%;
-        transition: opacity 0.2s ease-out;
+        transition: opacity .2s ease-out;
     }
 
     @media #{$mq-md} {
@@ -142,8 +142,8 @@
     appearance: none;
     border: 0;
     position: absolute;
-    right: 0.5rem;
-    top: 0.5rem;
+    right: .5rem;
+    top: .5rem;
     opacity: 0;
 
     img {

diff --git a/static/scss/includes/variables.scss b/static/scss/includes/variables.scss
@@ -1,9 +1,9 @@
 // CSS Custom Properties
 :root {
-  --buttonFocus: 0 0 0 1px #0a84ff, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+  --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, 0.09), 0 6px 22px 4px rgba(4, 25, 59, 0.87), 0 6px 10px -4px rgba(14, 13, 26, 0.12);
+  --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);
 }
@@ -15,7 +15,7 @@ $font-metropolis: "Metropolis", Arial, Helvetica, sans-serif;
 $color-mpp-background: #E5E5E5;
 $color-mpp-gray-30: #ECECEC;
 
-$box-shadow-mpp-sm: 0px 0px 4px rgba(0, 0, 0, 0.12);
+$box-shadow-mpp-sm: 0px 0px 4px rgba(0, 0, 0, .12);
 
 
 // NEBULA COLORS
@@ -58,10 +58,10 @@ $color-grey-05: #F9F9FA;
 
 // Whites:
 $color-white: #FFFFFF;
-$color-white-80: rgba($color-white, 0.8);
-$color-white-60: rgba($color-white, 0.6);
-$color-white-40: rgba($color-white, 0.4);
-$color-white-20: rgba($color-white, 0.2);
+$color-white-80: rgba($color-white, .8);
+$color-white-60: rgba($color-white, .6);
+$color-white-40: rgba($color-white, .4);
+$color-white-20: rgba($color-white, .2);
 
 
 // Functional Colors

diff --git a/static/scss/partials/dashboard.scss b/static/scss/partials/dashboard.scss
@@ -40,7 +40,7 @@
 }
 
 .mpp-dashbaord-header-stats li {
-    padding: 0 0.25rem;
+    padding: 0 .25rem;
     border-right: 1px solid #ECECEC;
     width: 100%;
     span {
@@ -55,7 +55,7 @@
         color: #666666;
         line-height: 1rem;
         font-weight: 400;
-        margin-bottom: 0.25rem;
+        margin-bottom: .25rem;
     }
     &:last-child {
         border-right: 0;
@@ -71,10 +71,10 @@
   display: flex;
   align-items: center;
   .margin-right {
-      margin-right: 0.25rem;
+      margin-right: .25rem;
   }
   .margin-left {
-      margin-left: 0.25rem;
+      margin-left: .25rem;
   }
   &:hover {
       color: $color-blue-40;
@@ -168,7 +168,7 @@
 
 // Alias Card
 .c-alias {
-    background-color: rgba($color-white, 0.5);
+    background-color: rgba($color-white, .5);
     border-radius: $border-radius-md;
     padding: $spacing-md $spacing-md 0;
     box-shadow: $box-shadow-sm;
@@ -252,7 +252,7 @@
     border-top: 1px solid transparent;
     overflow: hidden;
     max-height: 0;
-    transition: all 0.2s ease-out;
+    transition: all .2s ease-out;
 
     @media #{$mq-sm} {
         display: flex;
@@ -266,7 +266,7 @@
 }
 
 .c-alias-toggle-button {
-    transition: transform 0.2s ease-out;
+    transition: transform .2s ease-out;
     margin: auto 0;
     &.is-active {
         transform: rotate(180deg);

diff --git a/static/scss/partials/fx-bento.scss b/static/scss/partials/fx-bento.scss
@@ -54,7 +54,7 @@ firefox-apps:active {
   top: calc(var(--bentoButtonHeight) + 10px);
   min-width: 260px;
   z-index: calc(var(--zIndex) + 1);
-  box-shadow: 0 7px 12px -3px rgba(28, 28, 29, 0.502);
+  box-shadow: 0 7px 12px -3px rgba(28, 28, 29, .502);
   right: -18px;
   background: var(--backgroundColor);
   border-radius: 8px;
@@ -77,9 +77,9 @@ firefox-apps:active {
   display: block;
   height: auto;
   transform: translateY(12px);
-  animation: fxBentoAppear ease 0.3s;
-  -webkit-animation: fxBentoAppear ease 0.3s;
-  -moz-animation: fxBentoAppear ease 0.3s;
+  animation: fxBentoAppear ease .3s;
+  -webkit-animation: fxBentoAppear ease .3s;
+  -moz-animation: fxBentoAppear ease .3s;
 }
 
 .active .fx-bento-content-wrapper::after { /* tool tip top notch */
@@ -241,7 +241,7 @@ a.fx-bento-link:focus,
 firefox-apps,
 firefox-apps:hover,
 firefox-apps:focus-within {
-  transition: 0.2s ease-in-out;
+  transition: .2s ease-in-out;
 }
 
 body.hide-bento firefox-apps {
@@ -260,7 +260,7 @@ body.hide-bento firefox-apps > button {
   }
 
   .fx-bento-button {
-    transform: scale(0.9);
+    transform: scale(.9);
   }
 }
 

diff --git a/static/scss/partials/glocal-menu.scss b/static/scss/partials/glocal-menu.scss
@@ -19,7 +19,7 @@ glocal-menu {
   color: #000000;
   right: 28px;
   border-radius: 8px;
-  box-shadow: 0 7px 12px -3px rgba(28, 28, 29, 0.502);
+  box-shadow: 0 7px 12px -3px rgba(28, 28, 29, .502);
 }
 
 .glocal-menu-wrapper.fx-bento-fade-out {
@@ -43,12 +43,12 @@ glocal-menu {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0px 5px rgba(255, 255, 255, 0);
   padding: 0;
   border: none;
-  transition: all 0.2s ease;
+  transition: all .2s ease;
 }
 
 .avatar-wrapper:hover {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0px 5px rgba(255, 255, 255, .3);
-  transition: all 0.2s ease;
+  transition: all .2s ease;
 }
 
 .avatar-wrapper:focus {
@@ -75,10 +75,10 @@ glocal-menu {
 .glocal-menu-open {
   visibility: visible;
   transform: translateY(17px);
-  animation: glocalMenuAppear ease 0.3s;
+  animation: glocalMenuAppear ease .3s;
   z-index: 100;
-  -webkit-animation: glocalMenuAppear ease 0.3s;
-  -moz-animation: glocalMenuAppear ease 0.3s;
+  -webkit-animation: glocalMenuAppear ease .3s;
+  -moz-animation: glocalMenuAppear ease .3s;
 }
 
 .glocal-account-info {
@@ -132,12 +132,12 @@ glocal-menu {
   padding: 2px var(--glocalPaddingUnit);
   width: 100%;
   background-color: rgba(255, 255, 255, 0);
-  transition: 0.2s ease-in-out;
+  transition: .2s ease-in-out;
 }
 
 .glocal-site-option:hover {
   background-color: var(--glocalOptionHoverColor);
-  transition: 0.2s ease-in-out;
+  transition: .2s ease-in-out;
 }
 
 .glocal-sign-out {