feat: use background for icons

tblivet · Dec 16, 2024 · 3c2fa6d · 3c2fa6d
1 parent 454784a
commit 3c2fa6d
Showing 1 changed file with 6 additions and 27 deletions.
diff --git a/_dev/src/scss/components/_check-requirements.scss b/_dev/src/scss/components/_check-requirements.scss
@@ -27,44 +27,23 @@ $e: ".check-requirements";
     }
 
     &__requirement {
-      position: relative;
       padding-inline-start: 1.75rem;
+      background-repeat: no-repeat;
+      background-position: left center;
+      background-size: 1.5rem 1.5rem;
       font-size: 0.875rem;
       line-height: 1.4;
 
-      &::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        display: block;
-        width: 1.375rem;
-        height: 1.25rem;
-        font-family: var(--#{$ua-prefix}font-family-material-icons);
-        font-size: 1.25rem;
-        line-height: 1;
-        transform: translateY(-50%);
-      }
-
       &--success {
-        &::before {
-          content: "check";
-          color: var(--#{$ua-prefix}green-500);
-        }
+        background-image: url("../../img/check.svg");
       }
 
       &--warning {
-        &::before {
-          content: "warning";
-          color: var(--#{$ua-prefix}yellow-500);
-        }
+        background-image: url("../../img/warning.svg");
       }
 
       &--error {
-        &::before {
-          content: "close";
-          color: var(--#{$ua-prefix}red-500);
-        }
+        background-image: url("../../img/close.svg");
       }
     }