From c93ef2dd9948658b5c477bcd4d82080c19c006e3 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Sun, 8 Oct 2023 12:33:26 -0600 Subject: add vehicle modal --- static/logo.png | Bin 0 -> 105561 bytes static/main.css | 171 +++++++++++++++++++++++++++++++++++--------------------- 2 files changed, 108 insertions(+), 63 deletions(-) create mode 100644 static/logo.png (limited to 'static') diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 0000000..31ebc71 Binary files /dev/null and b/static/logo.png differ diff --git a/static/main.css b/static/main.css index b7003e0..de23577 100644 --- a/static/main.css +++ b/static/main.css @@ -705,40 +705,6 @@ select { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .sr-only { position: absolute; width: 1px; @@ -862,14 +828,30 @@ select { margin-bottom: -2rem; } +.-ml-0 { + margin-left: -0px; +} + +.-ml-0\.5 { + margin-left: -0.125rem; +} + .-ml-px { margin-left: -1px; } +.mb-5 { + margin-bottom: 1.25rem; +} + .ml-2 { margin-left: 0.5rem; } +.ml-3 { + margin-left: 0.75rem; +} + .ml-4 { margin-left: 1rem; } @@ -882,6 +864,14 @@ select { margin-right: 4rem; } +.mr-2 { + margin-right: 0.5rem; +} + +.mt-10 { + margin-top: 2.5rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -890,28 +880,16 @@ select { margin-top: 0.625rem; } -.mt-8 { - margin-top: 2rem; -} - .mt-3 { margin-top: 0.75rem; } -.ml-3 { - margin-left: 0.75rem; -} - -.mt-10 { - margin-top: 2.5rem; +.mt-5 { + margin-top: 1.25rem; } -.mr-2 { - margin-right: 0.5rem; -} - -.mb-5 { - margin-bottom: 1.25rem; +.mt-8 { + margin-top: 2rem; } .block { @@ -938,6 +916,10 @@ select { height: 4rem; } +.h-4 { + height: 1rem; +} + .h-5 { height: 1.25rem; } @@ -954,10 +936,6 @@ select { height: 100%; } -.h-4 { - height: 1rem; -} - .w-0 { width: 0px; } @@ -974,6 +952,10 @@ select { width: 8rem; } +.w-4 { + width: 1rem; +} + .w-5 { width: 1.25rem; } @@ -1006,10 +988,6 @@ select { width: 1px; } -.w-4 { - width: 1rem; -} - .min-w-0 { min-width: 0px; } @@ -1097,6 +1075,16 @@ select { justify-content: space-between; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.gap-x-1\.5 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} + .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; @@ -1174,6 +1162,10 @@ select { border-radius: 0.375rem; } +.rounded-sm { + border-radius: 0.125rem; +} + .border { border-width: 1px; } @@ -1200,11 +1192,6 @@ select { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.bg-blue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); @@ -1248,6 +1235,11 @@ select { background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } +.bg-slate-200 { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1567,6 +1559,58 @@ select { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } +/* The Modal (background) */ + +.modal { + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + left: 0; + top: 0; + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0,0,0); + /* Fallback color */ + background-color: rgba(0,0,0,0.4); + /* Black w/ opacity */ + padding-top: 60px; +} + +/* Modal Content */ + +.modal-content { + background-color: #fefefe; + margin: 5% auto; + /* 5% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; + /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, + .close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + .placeholder\:text-gray-400::-moz-placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1757,3 +1801,4 @@ select { padding-left: 24rem; } } + \ No newline at end of file -- cgit v1.2.3