feat: dev components

tblivet · Aug 12, 2024 · d49a24b · d49a24b
1 parent fcc39d9
commit d49a24b
Show file tree

Hide file tree

Showing 26 changed files with 847 additions and 164 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/img/check.svg b/img/check.svg
diff --git a/img/close.svg b/img/close.svg
diff --git a/img/unfold_more.svg b/img/unfold_more.svg
diff --git a/img/warning.svg b/img/warning.svg
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -0,0 +1,9 @@
+/* Animations */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/scss/components/_alert.scss b/scss/components/_alert.scss
@@ -0,0 +1,9 @@
+@use "../variables" as *;
+
+$e: ".alert";
+
+#{$ua-prefix} {
+  #{$e} {
+    margin-block-end: 0;
+  }
+}
diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
@@ -4,15 +4,6 @@ $e: ".badge";
 
 #{$ua-prefix} {
   #{$e} {
-    --ua-badge-color: #1D1D1B;
-    --ua-badge-background-color: #D1DCFC;
-    all: unset;
-    padding: 0.125rem 0.5rem;
-    background-color: var(--ua-badge-background-color);
-    border-radius: 2rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--ua-badge-color);
-    line-height: 1.4;
+
   }
 }
diff --git a/scss/components/_check-requirements.scss b/scss/components/_check-requirements.scss
@@ -0,0 +1,87 @@
+@use "../mixins" as *;
+@use "../variables" as *;
+
+$e: ".check-requirements";
+
+#{$ua-prefix} {
+  #{$e} {
+    --ua-requirements-background-color: #f7f7f7;
+    --ua-requirements-loader-color: #1d1d1b;
+    --ua-requirements-loader-dot-color: #5C92AA;
+    background-color: var(--ua-requirements-background-color);
+    padding: 1rem;
+    margin-block-start: 0.5rem;
+
+    &__loader {
+      position: relative;
+      text-align: center;
+      width: 1.625rem;
+      height: 1.625rem;
+      margin-inline: auto;
+      margin-block-end: 1rem;
+      background:
+        linear-gradient(
+            var(--ua-requirements-background-color),
+            var(--ua-requirements-background-color)
+          )
+          padding-box,
+        conic-gradient(from 0, transparent, #78c4d8) border-box;
+      border-radius: 50em;
+      border: 0.1875rem solid transparent;
+      animation: rotate 1.5s linear infinite;
+
+      &:before {
+        content: "";
+        display: block;
+        width: 0.1875rem;
+        height: 0.1875rem;
+        background: #5C92AA;
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translate(-50%, -100%);
+        border-radius: 50%;
+      }
+    }
+
+    &__loader-title {
+      text-align: center;
+      font-size: 0.875rem;
+      line-height: 1.4;
+      font-weight: 700;
+      color: var(--ua-requirements-loader-color);
+    }
+
+    &__message {
+      margin-block-end: 1rem;
+    }
+
+    &__list {
+      margin-block-end: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    &__requirement {
+      font-size: 0.875rem;
+      line-height: 1.4;
+      padding-inline-start: 2rem;
+      background-size: 1.5rem 1.5rem;
+      background-position: left center;
+      background-repeat: no-repeat;
+
+      &--nok {
+        background-image: url("../img/close.svg");
+      }
+
+      &--warning {
+        background-image: url("../img/warning.svg");
+      }
+
+      &--ok {
+        background-image: url("../img/check.svg");
+      }
+    }
+  }
+}
diff --git a/scss/components/_index.scss b/scss/components/_index.scss
@@ -1,3 +1,6 @@
+@use "alert";
 @use "badge";
-@use "radio";
-@use "radio-block";
+@use "check-requirements";
+@use "form";
+@use "radio-card";
+@use "typography";