Fix lint errors

aduth · aduth · commit b0d271715685 · 2024-05-07T11:45:07.000-04:00
diff --git a/app/assets/stylesheets/components/_alert-icon.scss b/app/assets/stylesheets/components/_alert-icon.scss
@@ -7,6 +7,6 @@
 .alert-icon--centered-top {
   position: absolute;
   left: 50%;
-  top: 0px;
+  top: 0;
   transform: translate(-50%, -50%);
 }
diff --git a/app/assets/stylesheets/components/_block-link.scss b/app/assets/stylesheets/components/_block-link.scss
@@ -24,13 +24,10 @@
     &::before {
       @include u-border('1px', 'primary');
       border-radius: 6px;
-      bottom: 0;
+      inset: 0 units(-1) 0 units(-1);
       content: '';
-      left: units(-1);
       pointer-events: none;
       position: absolute;
-      right: units(-1);
-      top: 0;
     }
   }
 }
diff --git a/app/assets/stylesheets/components/_full-screen.scss b/app/assets/stylesheets/components/_full-screen.scss
@@ -5,11 +5,8 @@
 }
 
 .full-screen {
-  bottom: 0;
-  left: 0;
+  inset: 0;
   position: fixed;
-  right: 0;
-  top: 0;
   z-index: 1000;
 }
 
diff --git a/app/assets/stylesheets/components/_spinner-dots.scss b/app/assets/stylesheets/components/_spinner-dots.scss
@@ -65,7 +65,7 @@
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     animation-delay: 0.01s; // See: https://stackoverflow.com/a/40028240
-    background-color: currentColor;
+    background-color: currentcolor;
     border-radius: 50%;
     content: '';
     display: block;
diff --git a/app/assets/stylesheets/components/_step-indicator.scss b/app/assets/stylesheets/components/_step-indicator.scss
@@ -6,7 +6,7 @@ $step-indicator-line-height: 4px;
 lg-step-indicator {
   display: block;
   border-bottom: 1px solid color('primary-light');
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
   margin-bottom: units(4);
   position: relative;
 
@@ -29,9 +29,9 @@ lg-step-indicator {
     &::before {
       background: linear-gradient(
         to right,
-        rgba(255, 255, 255, 1),
-        rgba(255, 255, 255, 1) 17%,
-        rgba(255, 255, 255, 0)
+        rgb(255 255 255 / 100%),
+        rgb(255 255 255 / 100%) 17%,
+        rgb(255 255 255 / 0%)
       );
       left: 0;
       z-index: 1;
@@ -40,9 +40,9 @@ lg-step-indicator {
     &::after {
       background: linear-gradient(
         to left,
-        rgba(255, 255, 255, 1),
-        rgba(255, 255, 255, 1) 17%,
-        rgba(255, 255, 255, 0)
+        rgb(255 255 255 / 100%),
+        rgb(255 255 255 / 100%) 17%,
+        rgb(255 255 255 / 0%)
       );
       right: 0;
     }
diff --git a/app/assets/stylesheets/design-system-waiting-room.scss b/app/assets/stylesheets/design-system-waiting-room.scss
@@ -1,7 +1,7 @@
 // To be removed once design system incorporates styles included below.
 
-//basscss-base-typography
-//------------------------------------------------
+// basscss-base-typography
+// ------------------------------------------------
 h1,
 h2,
 h3,
@@ -18,7 +18,7 @@ ul {
 }
 
 // basscss-utility-typography
-//------------------------------------------------
+// ------------------------------------------------
 .break-word {
   word-wrap: break-word;
 }
diff --git a/app/assets/stylesheets/tables-report.css.scss b/app/assets/stylesheets/tables-report.css.scss
@@ -10,7 +10,7 @@
 
 .usa-alert.usa-alert--info.usa-alert--email {
   .usa-alert__body {
-    &:before {
+    &::before {
       background-image: url('email/info.png');
     }
   }
diff --git a/app/assets/stylesheets/variables/_email.scss b/app/assets/stylesheets/variables/_email.scss
@@ -21,8 +21,8 @@ $success-color: #3adb76;
 $warning-color: #ffae00;
 $alert-color: #ec5840;
 $light-gray: #f3f3f3;
-$black: #111111;
-$white: #ffffff;
+$black: #111;
+$white: #fff;
 $gray: #5b616a;
 $medium-gray: #cacaca;
 $dark-gray: #212121;
diff --git a/app/components/icon_component.scss b/app/components/icon_component.scss
@@ -5,5 +5,5 @@
 
 .icon {
   mask-size: 100%;
-  background-color: currentColor;
+  background-color: currentcolor;
 }
diff --git a/app/components/phone_input_component.scss b/app/components/phone_input_component.scss
@@ -10,7 +10,7 @@ lg-phone-input {
   .iti__flag {
     background-image: url('/flags.png');
 
-    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @media (resolution >= 2x) {
       background-image: url('/flags@2x.png');
     }
   }
diff --git a/app/components/security_key_image_component.scss b/app/components/security_key_image_component.scss
@@ -1,13 +1,13 @@
 .security-key-image__key {
-  animation: security-key-image__key__move 4s ease-in-out infinite;
+  animation: security-key-image-key-move 4s ease-in-out infinite;
 
   @media (prefers-reduced-motion) {
     animation: none;
   }
 }
 
 .security-key-image__arrow {
-  animation: security-key-image__arrow__move 4s ease-in-out infinite;
+  animation: security-key-image-arrow-move 4s ease-in-out infinite;
 
   @media (prefers-reduced-motion) {
     animation: none;
@@ -16,15 +16,15 @@
 
 .security-key--mobile {
   .security-key-image__key {
-    animation-name: security-key-image__key__move__mobile;
+    animation-name: security-key-image-key-move-mobile;
   }
 
   .security-key-image__arrow {
-    animation-name: security-key-image__arrow__move__mobile;
+    animation-name: security-key-image-arrow-move-mobile;
   }
 }
 
-@keyframes security-key-image__key__move {
+@keyframes security-key-image-key-move {
   25% {
     transform: translate(0, 0);
   }
@@ -39,7 +39,7 @@
   }
 }
 
-@keyframes security-key-image__key__move__mobile {
+@keyframes security-key-image-key-move-mobile {
   25% {
     transform: translate(0, 0);
   }
@@ -54,7 +54,7 @@
   }
 }
 
-@keyframes security-key-image__arrow__move {
+@keyframes security-key-image-arrow-move {
   7.5% {
     transform: translate(0, 0);
   }
@@ -75,7 +75,7 @@
   }
 }
 
-@keyframes security-key-image__arrow__move__mobile {
+@keyframes security-key-image-arrow-move-mobile {
   7.5% {
     transform: translate(0, 0);
   }
diff --git a/app/components/webauthn_input_component.scss b/app/components/webauthn_input_component.scss
@@ -1,3 +1,3 @@
 .webauthn-input--unsupported-passkey .usa-checkbox__label {
-  background: rgba(255, 0, 0, 0.1);
+  background: rgb(255 0 0 / 10%);
 }
diff --git a/app/javascript/packages/document-capture/components/_file-input.scss b/app/javascript/packages/document-capture/components/_file-input.scss
@@ -10,14 +10,14 @@
   outline-offset: 2px;
 }
 
-.usa-file-input:not(.usa-file-input--has-value):not(.usa-file-input--value-pending)
+.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending)
   .usa-file-input__target,
 .usa-form-group--error .usa-file-input .usa-file-input__target,
 .usa-form-group--success .usa-file-input .usa-file-input__target {
   border-width: 3px;
 }
 
-.usa-file-input:not(.usa-file-input--has-value):not(.usa-file-input--value-pending) {
+.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) {
   .usa-file-input__target {
     border-color: color('primary');
     border-radius: 0.375rem;
diff --git a/app/javascript/packages/document-capture/components/acuant-capture.scss b/app/javascript/packages/document-capture/components/acuant-capture.scss
@@ -16,16 +16,13 @@
 
     .usa-file-input__target {
       align-items: center;
-      bottom: 0;
+      inset: 0;
       display: flex;
       flex-direction: column;
       height: 100%;
       justify-content: center;
-      left: 0;
       margin-top: 0;
       position: absolute;
-      right: 0;
-      top: 0;
     }
 
     &::after {

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,6 @@`
`7`	`7`	`.alert-icon--centered-top {`
`8`	`8`	`position: absolute;`
`9`	`9`	`left: 50%;`
`10`		`- top: 0px;`
	`10`	`+ top: 0;`
`11`	`11`	`transform: translate(-50%, -50%);`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,10 @@`
`24`	`24`	`&::before {`
`25`	`25`	`@include u-border('1px', 'primary');`
`26`	`26`	`border-radius: 6px;`
`27`		`- bottom: 0;`
	`27`	`+ inset: 0 units(-1) 0 units(-1);`
`28`	`28`	`content: '';`
`29`		`- left: units(-1);`
`30`	`29`	`pointer-events: none;`
`31`	`30`	`position: absolute;`
`32`		`- right: units(-1);`
`33`		`- top: 0;`
`34`	`31`	`}`
`35`	`32`	`}`
`36`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,8 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.full-screen {`
`8`		`- bottom: 0;`
`9`		`- left: 0;`
	`8`	`+ inset: 0;`
`10`	`9`	`position: fixed;`
`11`		`- right: 0;`
`12`		`- top: 0;`
`13`	`10`	`z-index: 1000;`
`14`	`11`	`}`
`15`	`12`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`
`11`	`11`	`.usa-alert.usa-alert--info.usa-alert--email {`
`12`	`12`	`.usa-alert__body {`
`13`		`- &:before {`
	`13`	`+ &::before {`
`14`	`14`	`background-image: url('email/info.png');`
`15`	`15`	`}`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@`
`5`	`5`
`6`	`6`	`.icon {`
`7`	`7`	`mask-size: 100%;`
`8`		`- background-color: currentColor;`
	`8`	`+ background-color: currentcolor;`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ lg-phone-input {`
`10`	`10`	`.iti__flag {`
`11`	`11`	`background-image: url('/flags.png');`
`12`	`12`
`13`		`- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {`
	`13`	`+ @media (resolution >= 2x) {`
`14`	`14`	`background-image: url('/[email protected]');`
`15`	`15`	`}`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,13 @@`
`1`	`1`	`.security-key-image__key {`
`2`		`- animation: security-key-image__key__move 4s ease-in-out infinite;`
	`2`	`+ animation: security-key-image-key-move 4s ease-in-out infinite;`
`3`	`3`
`4`	`4`	`@media (prefers-reduced-motion) {`
`5`	`5`	`animation: none;`
`6`	`6`	`}`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.security-key-image__arrow {`
`10`		`- animation: security-key-image__arrow__move 4s ease-in-out infinite;`
	`10`	`+ animation: security-key-image-arrow-move 4s ease-in-out infinite;`
`11`	`11`
`12`	`12`	`@media (prefers-reduced-motion) {`
`13`	`13`	`animation: none;`
`@@ -16,15 +16,15 @@`
`16`	`16`
`17`	`17`	`.security-key--mobile {`
`18`	`18`	`.security-key-image__key {`
`19`		`- animation-name: security-key-image__key__move__mobile;`
	`19`	`+ animation-name: security-key-image-key-move-mobile;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.security-key-image__arrow {`
`23`		`- animation-name: security-key-image__arrow__move__mobile;`
	`23`	`+ animation-name: security-key-image-arrow-move-mobile;`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
`27`		`-@keyframes security-key-image__key__move {`
	`27`	`+@keyframes security-key-image-key-move {`
`28`	`28`	`25% {`
`29`	`29`	`transform: translate(0, 0);`
`30`	`30`	`}`
`@@ -39,7 +39,7 @@`
`39`	`39`	`}`
`40`	`40`	`}`
`41`	`41`
`42`		`-@keyframes security-key-image__key__move__mobile {`
	`42`	`+@keyframes security-key-image-key-move-mobile {`
`43`	`43`	`25% {`
`44`	`44`	`transform: translate(0, 0);`
`45`	`45`	`}`
`@@ -54,7 +54,7 @@`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
`57`		`-@keyframes security-key-image__arrow__move {`
	`57`	`+@keyframes security-key-image-arrow-move {`
`58`	`58`	`7.5% {`
`59`	`59`	`transform: translate(0, 0);`
`60`	`60`	`}`
`@@ -75,7 +75,7 @@`
`75`	`75`	`}`
`76`	`76`	`}`
`77`	`77`
`78`		`-@keyframes security-key-image__arrow__move__mobile {`
	`78`	`+@keyframes security-key-image-arrow-move-mobile {`
`79`	`79`	`7.5% {`
`80`	`80`	`transform: translate(0, 0);`
`81`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`.webauthn-input--unsupported-passkey .usa-checkbox__label {`
`2`		`- background: rgba(255, 0, 0, 0.1);`
	`2`	`+ background: rgb(255 0 0 / 10%);`
`3`	`3`	`}`