diff options
| author | Joris | 2025-04-19 12:36:38 +0200 |
|---|---|---|
| committer | Joris | 2025-04-19 12:38:24 +0200 |
| commit | 632eef6424d8dc8d40c2906177892697679e7b85 (patch) | |
| tree | 48d9cd60e9e96eab810b5f7bb3c7b1fa79e0438f /frontend/styles/ui | |
| parent | 063d8ef9eaf874a941f4459e831057dd0a1b7ddd (diff) | |
Add ZIG server
Diffstat (limited to 'frontend/styles/ui')
| -rw-r--r-- | frontend/styles/ui/layout.sass | 25 | ||||
| -rw-r--r-- | frontend/styles/ui/modal.sass | 57 |
2 files changed, 82 insertions, 0 deletions
diff --git a/frontend/styles/ui/layout.sass b/frontend/styles/ui/layout.sass new file mode 100644 index 0000000..93f5a69 --- /dev/null +++ b/frontend/styles/ui/layout.sass @@ -0,0 +1,25 @@ +@use '../colors' + +.g-Columns + display: flex + gap: 1rem + + & > * + flex-basis: 50% + flex-grow: 1 + +.g-Loading + display: flex + align-items: center + justify-content: center + height: 100% + + & > svg + width: 20px + +.g-Error + display: flex + align-items: center + justify-content: center + height: 100% + color: colors.$red diff --git a/frontend/styles/ui/modal.sass b/frontend/styles/ui/modal.sass new file mode 100644 index 0000000..81e91d6 --- /dev/null +++ b/frontend/styles/ui/modal.sass @@ -0,0 +1,57 @@ +@use '../colors' + +$transition-duration: 0.15s + +.g-Modal + width: 100vw + height: 100vh + position: fixed + top: 0 + left: 0 + display: flex + justify-content: center + align-items: center + z-index: 1000 // To be over leaflet + color: black + background-color: rgba(0, 0, 0, 0.5) + + &--Danger + .g-Modal__Content + border-left: 5px solid colors.$red + + &__Content + position: relative + background-color: white + width: 50% + min-width: 400px; + max-width: 600px; + border-radius: 0.2rem + line-height: normal + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) + + &__Header + display: flex + justify-content: space-between + align-items: center + padding: 1rem 2rem + border-bottom: 1px solid #EEE + font-weight: bold + + &__Body + padding: 2rem + max-height: 50vh + overflow-y: scroll + + &__Close + cursor: pointer + font-weight: bold + border-radius: 50% + border: 1px solid #EEE + background-color: transparent + width: 3rem + height: 3rem + font-size: 1.7rem + flex-shrink: 0 + + &__Close:hover, &__Close:focus + background-color: #EEE |