🎨 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/modal.scss
+++ b/src/ui/components/modal.scss
@@ -0,0 +1,111 @@
+@import "../_base.scss"
+
+$modal-min-height: 15vh;
+$modal-max-height: 55vh;
+
+.modal {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+    top: -100%;
+    margin-bottom: -100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: rgba(0, 0, 0, 0.5);
+
+    &__content {
+        $content-width: 70vw;
+        $title-height: 3vh;
+        $space-height: 1vh;
+        $buttons-height: 5vh;
+        $icon-width: 10vw;
+        $msg-max-width: 50vw;
+
+        $msg-min-height: calc($modal-min-height - $title-height - $space-height - $buttons-height);
+        $msg-max-height: calc($modal-max-height - $title-height - $space-height - $buttons-height);
+
+        min-height: $modal-min-height;
+        max-height: $modal-max-height;
+
+        width: min-content;
+
+        display: grid;
+        grid-template-columns: $icon-width 1vw minmax(max-content, $msg-max-width);
+        grid-template-rows: $title-height $space-height max-content $space-height $buttons-height;
+        grid-template-areas:
+            "icon . title"
+            "icon . ."
+            "icon . msg"
+            ". . ."
+            "buttons buttons buttons"
+        ;
+
+        padding: 2.5%;
+
+        background: get-color(greyscale, 0);
+
+        border: $border-normal;
+        border-radius: $border-radius;
+        border-color: get-color(greyscale, 90);
+
+        &__icon {
+            grid-area: icon;
+
+            aspect-ratio: 1;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            overflow: hidden;
+
+            border: $border-normal;
+            border-radius: $border-radius;
+
+            &__placeholder {
+                width: calc(100% + (2 * $border-normal-width));
+                height: calc(100% - (2 * $border-normal-width));
+            }
+
+            svg {
+                width: 105%;
+            }
+        }
+
+        &__title {
+            grid-area: title;
+
+            width: max-content;
+
+            font-size: calc($title-height - 0.5vh);
+            font-weight: bold;
+        }
+
+        &__msg {
+            grid-area: msg;
+
+            height: fit-content;
+
+            min-height: $msg-min-height;
+            max-height: $msg-max-height;
+            max-width: $msg-max-width;
+
+            overflow: scroll;
+
+            font-size: 1.5vh;
+            color: get-color(greyscale, 80);
+        }
+
+        &__buttons {
+            grid-area: buttons;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}