Input for mobile users done

2025-10-13 00:42:32 +00:00 · 2021-10-19 20:30:31 -03:00
parent 6b65f9afdc
commit ff02ece0dc
44 changed files with 4399 additions and 23328 deletions
--- a/build/sass/_categories.scss
+++ b/build/sass/_categories.scss
@@ -0,0 +1,152 @@
+.categories-container {
+
+    overflow-y: hidden;
+
+    .categories {
+        
+        position: absolute;
+        
+        top: 15vh;
+        left: 0;
+        
+        height: 85vh;
+        width: 100vw;
+        
+        background-color: rgb(225, 225, 225);
+
+        transition: opacity 0.4s ease-in-out;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+
+        box-sizing: border-box;
+
+        padding-top: 10vh;
+        padding-bottom: 10vh;
+
+        button, select {
+            height: 10vh;
+            width: 50vw;
+            
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 22pt;
+
+            border: none;
+            border-radius: 10px;
+
+            text-align: center;
+            text-align-last: center;
+            -moz-text-align-last: center;
+
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            img, .blank-space {
+                height: 4vw;
+                width: 4vw;
+            }
+
+            @mixin backgroundAndHoverDefiner($buttonColor, $textColor: #000) {
+
+                color: $textColor;
+                
+                background-color: $buttonColor; 
+                border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
+
+                cursor: pointer;
+
+                transition: 0.4s ease-in-out;
+                
+                &:hover {
+                    background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
+                    transition: 0.4s ease-in-out;
+                    
+                    & img {
+                        animation: bounce;
+                        animation-duration: 0.5s;
+                    }
+                }
+
+            }
+
+            &.Select {
+                $buttonColor: #E96363;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Cities, &.Ciudades {
+                $buttonColor: #5f9ea0;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Pokemon {
+                $buttonColor: #ffcb05;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Programming.Languages, &.Lenguajes.De.Programación {
+                $buttonColor: #e46f01;
+                $textColor: #fff;
+
+                @include backgroundAndHoverDefiner($buttonColor, $textColor);
+            }
+
+            &.Animals, &.Animales {
+                $buttonColor: #efa482;
+
+                @include backgroundAndHoverDefiner($buttonColor)
+            }
+
+            &.Countries, &.Países {
+                $buttonColor: #9f0000;
+                $textColor: #fff;
+
+                @include backgroundAndHoverDefiner($buttonColor, $textColor);
+            }
+
+            &.Random {
+                $buttonColor: #4285f4;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+        }
+        
+        &.hidden {
+            opacity: 0%;
+            
+            top: 0;
+            height: 85vh;
+
+            button, select {
+
+                height: 5vh;
+            }
+        }
+        
+        &.show {
+            opacity: 100%;
+            
+        }
+        
+        &.stretch {
+            height: auto;
+            width: 100%;
+            
+            button, select {
+                
+                margin-bottom: 5vh;
+            }
+
+            &:last-child {
+
+                margin-bottom: 0vh !important;
+            }
+        }
+    }
+}