menu getting closer :cry:

1 files changed, 118 insertions, 2 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index fef99ce83..c1f5282d0 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -38,11 +38,15 @@
 
     &.clickBtn {
         cursor: pointer;
-        width: 40px;
 
         &:hover {
             background-color: rgba(0, 0, 0, 0.3) !important;
         }
+
+        svg {
+            width: 50% !important;
+            height: 50%;
+        }
     }
 
     &.tglBtn {
@@ -157,9 +161,58 @@
         }
     }
 
+    &.numBtn {
+        cursor: pointer;
+        background: transparent;
+
+        &.slider {
+            .numberBtn-slider {}
+
+            .menuButton-dropdownBox {
+                position: absolute;
+                width: fit-content;
+                height: fit-content;
+                top: 100%;
+                z-index: 21;
+                background-color: #e3e3e3;
+                box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+                border-radius: $standard-border-radius;
+            }
+        }
+
+        &.dropdown {
+            .menuButton-dropdownList {
+                position: absolute;
+                width: fit-content;
+                height: fit-content;
+                top: 100%;
+                z-index: 21;
+                background-color: $white;
+                box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+                padding: 1px;
+
+                .list-item {
+                    color: $black;
+                    width: 100%;
+                    height: 25px;
+                    font-weight: 400;
+                    display: flex;
+                    justify-content: left;
+                    align-items: center;
+                    padding-left: 5px;
+                }
+
+                .list-item:hover {
+                    background-color: lightgrey;
+                }
+            }
+        }
+    }
+
     &.drpDownBtn {
         cursor: pointer;
         background: transparent;
+        border: solid 0.5px grey;
 
         &.true {
             background: rgba(0, 0, 0, 0.3);
@@ -172,7 +225,7 @@
             top: 100%;
             background-color: #e3e3e3;
             box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-            border-radius: 3px;
+            border-radius: $standard-border-radius;
         }
     }
 
@@ -208,4 +261,67 @@
         position: fixed;
     }
 
+}
+
+
+//TOGGLE
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: lightgrey;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked+.slider {
+    background-color: $medium-blue;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px $medium-blue;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: $standard-border-radius;
+}
+
+.slider.round:before {
+    border-radius: $standard-border-radius;
 }
\ No newline at end of file