Actions style done

public/sass/control-panel/_action-form.scss

@@ -0,0 +1,157 @@
+.action-form {
+    //height: 40vh;
+
+    box-sizing: border-box;
+    padding: 0px 16.5vw;
+
+    form {
+
+        height: 100%;
+        max-width: 742px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        //margin-top: 2.5vh;
+        padding-top: 3vh;
+
+        //border-top: 1px solid rgb(163, 163, 163);
+
+        select {
+            height: 4vh;
+            outline: none;
+        }
+
+        textarea {
+            resize: none;
+            outline: none;
+
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        input[type="submit"] {
+
+            $background-color: #2f71d5; 
+
+            font-size: 12pt;
+
+            margin-top: 1vh;
+            height: 5vh;
+
+            background-color: $background-color;
+            color: #fff;
+
+            border: none;
+            border: 1px solid adjust-color($color: $background-color, $saturation: 30%, $lightness: 15%, $alpha: 1.0);
+
+            &:hover {
+                background-color: adjust-color($color: $background-color, $saturation: 10%, $lightness: 5%, $alpha: 1.0);
+
+            }
+        }
+
+        input[type="text"] {
+
+            height: 5vh;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 2vw;
+
+            border: none;
+            border-bottom: 1px solid rgb(162, 162, 162);
+        }
+        
+    }
+
+    &.add-word {
+
+        form {
+            
+            select {
+                margin-bottom: 0.5vh;
+            }
+
+            textarea {
+
+                margin-top: 2vh;
+            }
+        }
+    }
+
+    &.add-category {
+
+        form {
+
+            input[type="text"] {
+
+                margin-bottom: 1vh;
+            }
+        }
+    }
+
+    &.delete-word {
+
+        form {
+
+            select {
+
+                margin-bottom: 0.5vh;
+            }
+        }
+    }
+
+    &.edit-word {
+
+        form {
+
+            select {
+
+                margin-bottom: 0.5vh;
+            }
+        }
+    }
+
+}
+
+@media (max-width: 991.98px) {
+
+    .action-form {
+
+        form {
+            
+            input[type="submit"] {
+                font-size: 2.4vw;
+
+            }
+        }
+    }
+}
+
+@media (max-width: 576px) {
+
+    .action-form {
+
+        padding-left: 0;
+        padding-right: 0;
+
+        form {
+
+            select {
+
+                border: none;
+                border-bottom: 1px solid rgb(162, 162, 162);
+                background-color: #fff;
+            }
+            
+            input[type="submit"] {
+                font-size: 12pt;
+
+            }
+
+            input[type="text"] {
+                font-size: 12pt;
+
+            }
+        }
+    }
+}

public/sass/control-panel/_control-panel.scss

@@ -1,5 +1,7 @@
 .control-panel {
 
+   // height: 80vh;
+
     .buttons-container {
 
         height: 60vh;
@@ -125,6 +127,8 @@
             font-size: 1vw;
         }
     }
+
+    @import 'action-form';
 }
 
 @mixin normalizeButton() {
@@ -134,10 +138,10 @@
         -webkit-transform: none;
         transform:none;
         box-shadow:none;
-        -webkit-transition-duration:none;
-        transition-duration: none;
-        -webkit-transition-property:none;
-        transition-property: none;
+        //-webkit-transition-duration:none;
+        //transition-duration: none;
+        //-webkit-transition-property:none;
+        //transition-property: none;
     }
     
     &:hover, &:focus, &:active {
@@ -186,12 +190,14 @@
             
             button {
                 @include normalizeButton();
+                transition: 0.4 ease-in-out;
+
                 box-sizing: border-box;
                 
                 height: 8vh;
                 border-radius: 0;
                 
-                min-width: 50vw;
+                width: 50vw;
 
                 flex-grow: 1;
                 align-self: stretch;
@@ -211,4 +217,22 @@
 
 @media (max-width: 576px) {
 
+    .control-panel {
+
+        .buttons-container {
+            
+            button {
+
+                font-size: 12pt;
+            }
+        }
+
+        .buttons-container.nav-mode {
+
+            button {
+
+                font-size: 12pt;
+            }
+        }
+    }
 }

public/sass/index.scss

@@ -28,4 +28,4 @@ html, body {
 @import 'letter-input';
 @import 'form';
 @import 'message';
-@import 'control-panel';
+@import './control-panel/control-panel';