accounts

Rangers-Hackathon · May 13, 2024 · 851e39b · 851e39b
1 parent 16842f1
commit 851e39b
Show file tree

Hide file tree

Showing 13 changed files with 1,962 additions and 73 deletions.
diff --git a/assets/css/_root.scss b/assets/css/_root.scss
@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins');
 
-$primary-color: lighten(#b40b5a, 1%);
+$primary-color: lighten(#970046, 1%);
 $navy: #00040e;
 $secondary-color: #0874c2;
 $white: #fff;
@@ -192,7 +192,7 @@ html
 
 .btn-primary
 {
-    background-color: lighten($primary-color, 10);
+    background-color: lighten($primary-color, 15);
     color: $white;
     border: none;
     padding: 10px 20px;
@@ -827,3 +827,123 @@ html
         transform: scale(1);
     }
 }
+
+table
+{
+    width: 100%;
+    align-items: start;
+    border: inherit;
+    border-collapse: collapse;
+    padding: 10px;
+
+    thead
+    {
+        background-color: lighten($primary-color, 15);
+        text-align: start;
+        height: 50px;
+        padding: 10px;
+
+        th
+        {
+            text-align: start;
+            padding: 10px;
+            color: $white;
+            font-weight: 500;
+        }
+    }
+
+    tbody
+    {
+        tr
+        {
+            padding: 10px;
+            height: 50px;
+
+            &:nth-of-type(odd)
+            {
+                background-color: darken($white, 4);
+            }
+
+            td
+            {
+                padding: 10px;
+                font-size: 13px;
+                font-weight: 500;
+                height: 35px;
+                text-transform: none;
+
+                .btn-primary
+                {
+                    background-color: lighten($primary-color, 15);
+                    font-size: 10px;
+                    height: 80%;
+                }
+            }
+        }
+    }
+}
+
+.modal
+{
+    height: 100vh;
+    width: 100%;
+    z-index: 999;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.17);
+    backdrop-filter: blur(5px);
+    @extend .flex-column;
+    display: none;
+
+    .modal-content
+    {
+        width: 50%;
+        height: 85%;
+        background-color: $white;
+        border-radius: 10px;
+        padding: 3%;
+        @extend .flex-column, .x-start, .y-start;
+        position: relative;
+        opacity: 0;
+        animation: fadeUp 0.5s ease-in forwards 1;
+        animation-delay: 0.2s;
+
+        h3
+        {
+            color: lighten($primary-color, 15);
+        }
+
+        span
+        {
+            position: relative;
+            padding: 10px;
+            background-color: lighten($primary-color, 15);
+            color: $white;
+            width: 30px;
+            height: 30px;
+            @extend .flex-column;
+            border-radius: 50%;
+            left: 95%;
+            top: -7%;
+            cursor: pointer;
+        }
+
+        form
+        {
+            height: 80%;
+            width: 100%;
+            margin-top: 3%;
+            @extend .flex-column, .x-start;
+
+            input
+            {
+                width: 100%;
+                height: 50px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                border-radius: 10px;
+                background-color: darken($white, 5);
+                border-color: transparent;
+            }
+        }
+    }
+}