🎨 Isolate infra and ui components

The src/base.rs is still to be reworked.
2024-04-04 14:27:58 +02:00
parent 92bf860101
commit 0ce0764204
67 changed files with 64 additions and 59 deletions
--- a/src/ui/components/text_input.scss
+++ b/src/ui/components/text_input.scss
@@ -0,0 +1,130 @@
+@import "../_base.scss"
+
+%base-text-input {
+    $horizontal-padding: 1vw;
+
+    height: 100%;
+    width: calc(100% - (2 * $horizontal-padding));
+
+    border: $border-normal;
+    border-color: get-color(primary, 90);
+    border-radius: $border-radius;
+
+    padding-left: $horizontal-padding;
+    padding-right: $horizontal-padding;
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+%base-input {
+    $horizontal-padding: 1vw;
+
+    height: 100%;
+    width: 100%;
+
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    font-size: 2vh;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.invalid {
+        border-color: get-color(critical, 100);
+    }
+}
+
+%base-helper-text {
+    margin: 0;
+    margin-top: 0.3vh;
+
+    font-size: 1.2vh;
+
+    color: get-color(primary, 90);
+
+    p {
+        margin: 0;
+
+        &.invalid {
+            color: get-color(critical, 100);
+        }
+    }
+}
+
+.text-input {
+    @extend %base-text-input;
+
+    &__input {
+        @extend %base-input;
+    }
+
+    &__helper-text {
+        @extend %base-helper-text;
+    }
+}
+
+.password-text-input {
+    @extend %base-text-input;
+
+    display: grid;
+    grid-template-columns: auto 7.5% 1% 7.5%;
+    grid-template-rows: 100%;
+    grid-template-areas:
+        "input strength . toggle"
+        "helper helper helper helper"
+    ;
+
+    transition: $transition-duration;
+
+    &.no-strength {
+            grid-template-columns: auto 0% 0% 7.5%;
+    }
+
+    &__input {
+        @extend %base-input;
+
+        grid-area: input;
+    }
+
+    %inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__strength-level {
+        @extend %inner;
+
+        grid-area: strength;
+
+        p {
+            margin: 0;
+            text-align: center;
+            width: 100%;
+
+            font-size: 2vh;
+        }
+    }
+
+    &__show-toggle {
+        @extend %inner;
+
+        grid-area: toggle;
+
+        svg {
+            height: 100%;
+            width: 100%;
+
+            color: get-color(secondary, 100),
+        }
+    }
+
+    &__helper-text {
+        @extend %base-helper-text;
+
+        grid-area: helper;
+    }
+}