Navbar of buttons done

public/css/index.css

@@ -478,7 +478,7 @@ header .redirect-button:hover {
   margin: 0;
 }
 
-.control-panel {
+.control-panel .buttons-container {
   height: 60vh;
   max-width: 100vw;
   display: flex;
@@ -487,7 +487,7 @@ header .redirect-button:hover {
   flex-wrap: wrap;
   padding: 5vh 15vw;
 }
-.control-panel button {
+.control-panel .buttons-container button {
   width: 16vw;
   max-width: 250px;
   height: 16vw;
@@ -499,136 +499,88 @@ header .redirect-button:hover {
   border-radius: 5px;
   cursor: pointer;
 }
-.control-panel button.add-words {
+.control-panel .buttons-container button {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+}
+.control-panel .buttons-container button:hover, .control-panel .buttons-container button:focus, .control-panel .buttons-container button:active {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+.control-panel .buttons-container button.add-words {
   background-color: #77b3d6;
   border: 1px solid #77a3bd;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.add-words {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-.control-panel button.add-words:hover, .control-panel button.add-words:focus, .control-panel button.add-words:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-.control-panel button.add-words:hover {
+.control-panel .buttons-container button.add-words:hover {
   background-color: #9ec9e2;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.add-category {
+.control-panel .buttons-container button.add-category {
   background-color: #c469cc;
   border: 1px solid #ad69b3;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.add-category {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-.control-panel button.add-category:hover, .control-panel button.add-category:focus, .control-panel button.add-category:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-.control-panel button.add-category:hover {
+.control-panel .buttons-container button.add-category:hover {
   background-color: #d38fd9;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.delete-category {
+.control-panel .buttons-container button.delete-category {
   background-color: #f79143;
   border: 1px solid #de8643;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.delete-category {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-.control-panel button.delete-category:hover, .control-panel button.delete-category:focus, .control-panel button.delete-category:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-.control-panel button.delete-category:hover {
+.control-panel .buttons-container button.delete-category:hover {
   background-color: #f9ae74;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.delete-word {
+.control-panel .buttons-container button.delete-word {
   background-color: #df6767;
   border: 1px solid #c66767;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.delete-word {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-.control-panel button.delete-word:hover, .control-panel button.delete-word:focus, .control-panel button.delete-word:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-.control-panel button.delete-word:hover {
+.control-panel .buttons-container button.delete-word:hover {
   background-color: #e89191;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.edit-word {
+.control-panel .buttons-container button.edit-word {
   background-color: #7dbb4e;
   border: 1px solid #72a24e;
   transition: ease-in-out 0.4s;
 }
-.control-panel button.edit-word {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-}
-.control-panel button.edit-word:hover, .control-panel button.edit-word:focus, .control-panel button.edit-word:active {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-.control-panel button.edit-word:hover {
+.control-panel .buttons-container button.edit-word:hover {
   background-color: #98c973;
   transition: ease-in-out 0.4s;
 }
+.control-panel .buttons-container.nav-mode {
+  height: 5vw;
+  padding: 1vh 5vw;
+  align-items: initial;
+  justify-content: space-between;
+}
+.control-panel .buttons-container.nav-mode button {
+  height: 3vh;
+  width: 15vw;
+  margin: 0px 0.5vw;
+  font-size: 1vw;
+}
 
 @media (max-width: 991.98px) {
-  .control-panel {
+  .control-panel .buttons-container {
     height: auto;
     flex-direction: column;
     justify-content: space-around;
     align-items: initial;
     flex-wrap: nowrap;
   }
-  .control-panel button {
+  .control-panel .buttons-container button {
     max-width: none;
     max-height: none;
     width: 66vw;
@@ -636,6 +588,39 @@ header .redirect-button:hover {
     font-size: 3vw;
     margin-bottom: 3vh;
   }
+  .control-panel .buttons-container.nav-mode {
+    padding: 0;
+    height: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+    align-content: stretch;
+  }
+  .control-panel .buttons-container.nav-mode button {
+    box-sizing: border-box;
+    height: 8vh;
+    border-radius: 0;
+    min-width: 50vw;
+    flex-grow: 1;
+    align-self: stretch;
+    margin: 0;
+    font-size: 2vw;
+  }
+  .control-panel .buttons-container.nav-mode button {
+    display: initial;
+    vertical-align: none;
+    -webkit-transform: none;
+    transform: none;
+    box-shadow: none;
+    -webkit-transition-duration: none;
+    transition-duration: none;
+    -webkit-transition-property: none;
+    transition-property: none;
+  }
+  .control-panel .buttons-container.nav-mode button:hover, .control-panel .buttons-container.nav-mode button:focus, .control-panel .buttons-container.nav-mode button:active {
+    -webkit-transform: none;
+    transform: none;
+  }
 }
 
 /*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/_control-panel.scss"],"names":[],"mappings":"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","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/_control-panel.scss"],"names":[],"mappings":"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","file":"index.css"}

public/sass/_control-panel.scss

@@ -1,38 +1,34 @@
 .control-panel {
-    height: 60vh;
-    max-width: 100vw;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    .buttons-container {
 
-    flex-wrap: wrap;
+        height: 60vh;
+        max-width: 100vw;
 
-    padding: 5vh 15vw;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    button {
-        
-        width: 16vw;
-        max-width: 250px;
-        height: 16vw;
-        max-height: 250px;
+        flex-wrap: wrap;
 
-        margin: 0px 3vw;
+        padding: 5vh 15vw;
 
-        font-size: 1.8vw;
-        font-weight: bold;
-
-        border: none;
-        border-radius: 5px;
-
-        cursor: pointer;
-
-        @mixin generateColors($background-color) {
+        button {
             
-            background-color: $background-color;
-            border: 1px solid adjust-color($color: $background-color, $blackness: 10%, $alpha: 1.0);
-            
-            transition: ease-in-out 0.4s;
+            width: 16vw;
+            max-width: 250px;
+            height: 16vw;
+            max-height: 250px;
+
+            margin: 0px 3vw;
+
+            font-size: 1.8vw;
+            font-weight: bold;
+
+            border: none;
+            border-radius: 5px;
+
+            cursor: pointer;
 
             & {
                 display: inline-block;
@@ -44,54 +40,103 @@
                 transition-duration: 0.3s;
                 -webkit-transition-property: transform;
                 transition-property: transform;
-              }
-              &:hover, &:focus, &:active {
+            }
+
+            &:hover, &:focus, &:active {
                 -webkit-transform: scale(1.1);
                 transform: scale(1.1);
-              }
+            }
 
-            &:hover {
+            @mixin generateColors($background-color) {
+                
+                background-color: $background-color;
+                border: 1px solid adjust-color($color: $background-color, $blackness: 10%, $alpha: 1.0);
                 
-                background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
                 transition: ease-in-out 0.4s;
 
+                
+
+                &:hover {
+                    
+                    background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
+                    transition: ease-in-out 0.4s;
+
+                }
+            }
+
+            &.add-words {
+                
+                $background-color: #77b3d6;
+
+                @include generateColors($background-color);
+            }
+
+            &.add-category {
+
+                $background-color: #c469cc;
+
+                @include generateColors($background-color);
+            }
+
+            &.delete-category {
+
+                $background-color: #f79143;
+
+                @include generateColors($background-color);
+            }
+
+            &.delete-word {
+
+                $background-color: #df6767;
+
+                @include generateColors($background-color);
+            }
+
+            &.edit-word {
+
+                $background-color: #7dbb4e;
+
+                @include generateColors($background-color)
             }
         }
+    }
 
-        &.add-words {
-            
-            $background-color: #77b3d6;
+    .buttons-container.nav-mode {
+        
+        height: 5vw;
 
-            @include generateColors($background-color);
+        padding: 1vh 5vw;
+
+        align-items: initial;
+        justify-content: space-between;
+
+        button {
+            height: 3vh;
+            width: 15vw;
+
+            margin: 0px 0.5vw;
+
+            font-size: 1vw;
         }
+    }
+}
 
-        &.add-category {
-
-            $background-color: #c469cc;
-
-            @include generateColors($background-color);
-        }
-
-        &.delete-category {
-
-            $background-color: #f79143;
-
-            @include generateColors($background-color);
-        }
-
-        &.delete-word {
-
-            $background-color: #df6767;
-
-            @include generateColors($background-color);
-        }
-
-        &.edit-word {
-
-            $background-color: #7dbb4e;
-
-            @include generateColors($background-color)
-        }
+@mixin normalizeButton() {
+    & {
+        display: initial;
+        vertical-align: none;
+        -webkit-transform: none;
+        transform:none;
+        box-shadow:none;
+        -webkit-transition-duration:none;
+        transition-duration: none;
+        -webkit-transition-property:none;
+        transition-property: none;
+    }
+    
+    &:hover, &:focus, &:active {
+        -webkit-transform: none;
+        transform: none;
     }
 }
 
@@ -99,24 +144,56 @@
 
     .control-panel {
 
-        height: auto;
+        .buttons-container {
 
-        flex-direction: column;
-        justify-content: space-around;
-        align-items: initial;        
+            height: auto;
 
-        flex-wrap: nowrap;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: initial;        
 
-        button {
-            max-width: none;
-            max-height: none;
+            flex-wrap: nowrap;
+
+            button {
+                max-width: none;
+                max-height: none;
+                
+                width: 66vw;
+                height: 20vh;
+
+                font-size: 3vw;
+
+                margin-bottom: 3vh;
+            }
+        }
+
+        .buttons-container.nav-mode {
+            padding: 0;
+
+            height: auto;
+
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            align-items: stretch;
+            align-content: stretch;
             
-            width: 66vw;
-            height: 20vh;
+            button {
+                @include normalizeButton();
+                box-sizing: border-box;
+                
+                height: 8vh;
+                border-radius: 0;
+                
+                min-width: 50vw;
 
-            font-size: 3vw;
+                flex-grow: 1;
+                align-self: stretch;
 
-            margin-bottom: 3vh;
+                margin: 0;
+
+                font-size: 2vw;
+            }
         }
     }
 }