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

@@ -0,0 +1,238 @@
+.control-panel {
+
+   // height: 80vh;
+
+    .buttons-container {
+
+        height: 60vh;
+        max-width: 100vw;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        flex-wrap: wrap;
+
+        padding: 5vh 15vw;
+
+        button {
+            
+            width: 16vw;
+            max-width: 250px;
+            height: 16vw;
+            max-height: 250px;
+
+            margin: 0px 3vw;
+
+            font-size: 1.5vw;
+            font-weight: bold;
+
+            border: none;
+            border-radius: 5px;
+
+            cursor: pointer;
+
+            & {
+                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;
+            }
+
+            &:hover, &:focus, &:active {
+                -webkit-transform: scale(1.1);
+                transform: scale(1.1);
+            }
+
+            @mixin generateColors($background-color) {
+                
+                background-color: $background-color;
+                border: 1px solid adjust-color($color: $background-color, $blackness: 10%, $alpha: 1.0);
+                
+                transition: ease-in-out 0.4s;
+
+                &.active {
+
+                    background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
+                    transition: ease-in-out 0.4s;
+                    transform: scale(1.1);
+
+                }
+
+                &: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)
+            }
+        }
+    }
+
+    .buttons-container.nav-mode {
+        
+        height: 5vw;
+
+        padding: 1vh 5vw;
+
+        align-items: initial;
+        justify-content: space-between;
+
+        button {
+            height: 3vh;
+            width: 15vw;
+
+            margin: 0px 0.5vw;
+
+            font-size: 1vw;
+        }
+    }
+
+    @import 'action-form';
+}
+
+@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;
+    }
+}
+
+@media (max-width: 991.98px) {
+
+    .control-panel {
+
+        .buttons-container {
+
+            height: auto;
+
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: initial;        
+
+            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;
+            
+            button {
+                @include normalizeButton();
+                transition: 0.4 ease-in-out;
+
+                box-sizing: border-box;
+                
+                height: 8vh;
+                border-radius: 0;
+                
+                width: 50vw;
+
+                flex-grow: 1;
+                align-self: stretch;
+
+                margin: 0;
+
+                font-size: 2vw;
+
+                &.active {
+                    transform: none;
+
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 576px) {
+
+    .control-panel {
+
+        .buttons-container {
+            
+            button {
+
+                font-size: 12pt;
+            }
+        }
+
+        .buttons-container.nav-mode {
+
+            button {
+
+                font-size: 12pt;
+            }
+        }
+    }
+}