css changes for toggle button

1 files changed, 109 insertions, 68 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index b6aa2ba60..7a6887d38 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -52,6 +52,71 @@
     &.tglBtn {
         cursor: pointer;
 
+        &.switch {
+            //TOGGLE
+
+            .switch {
+                position: relative;
+                display: inline-block;
+                width: 100%;
+                height: 25px;
+                margin: 0;
+            }
+
+            .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: 21px;
+                width: 21px;
+                left: 2px;
+                bottom: 2px;
+                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;
+            }
+        }
+
         svg {
             width: 50% !important;
             height: 50%;
@@ -115,7 +180,7 @@
     }
 
     &.drpdownList {
-        width: 100px;
+        width: 100%;
         display: grid;
         grid-auto-columns: 80px 20px;
         justify-items: center;
@@ -165,7 +230,16 @@
         cursor: pointer;
         background: transparent;
 
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
+
         &.slider {
+            color: $white;
+            cursor: pointer;
+            flex-direction: column;
+            background: transparent;
+
             .numberBtn-slider {}
 
             .menuButton-dropdownBox {
@@ -180,11 +254,43 @@
             }
         }
 
-        &.dropdown {
+        .button {
+            width: 30%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &.number {
+                width: 40%;
+
+                .button-input {
+                    background: none;
+                    border: none;
+                    text-align: right;
+                    width: 100%;
+                    color: black;
+                    height: 100%;
+                    text-align: center;
+                }
+
+                .button-input:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        &.list {
+            width: 100%;
+            justify-content: space-around;
+            border: $standard-border;
+
             .menuButton-dropdownList {
                 position: absolute;
                 width: fit-content;
                 height: fit-content;
+                min-width: 50px;
+                max-height: 50vh;
+                overflow: scroll;
                 top: 100%;
                 z-index: 21;
                 background-color: $white;
@@ -197,9 +303,8 @@
                     height: 25px;
                     font-weight: 400;
                     display: flex;
-                    justify-content: left;
+                    justify-content: center;
                     align-items: center;
-                    padding-left: 5px;
                 }
 
                 .list-item:hover {
@@ -219,7 +324,6 @@
             background-color: $close-red;
         }
 
-
     }
 
     &.drpDownBtn {
@@ -274,67 +378,4 @@
         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