perfect-gui 4.12.0 → 4.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "description": "GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -389,7 +389,7 @@ export default class GUI {
 
         const container = document.createElement('div');
         container.textContent = label;
-        container.className = 'p-gui__switch';
+        container.className = 'p-gui__toggle';
         if ( tooltip ) {
             container.setAttribute('title', tooltip);
         }
@@ -400,11 +400,11 @@ export default class GUI {
             
             let value = true;
             
-            if (checkbox.classList.contains('p-gui__switch-checkbox--active')) {
+            if (checkbox.classList.contains('p-gui__toggle-checkbox--active')) {
                 value = false;
             }
             
-            checkbox.classList.toggle('p-gui__switch-checkbox--active');
+            checkbox.classList.toggle('p-gui__toggle-checkbox--active');
 
             if ( isObject ) {
                 obj[prop] = value;
@@ -425,14 +425,14 @@ export default class GUI {
 
         let activeClass = (() => {
             if (!isObject) {
-                return value ? ' p-gui__switch-checkbox--active' : '';
+                return value ? ' p-gui__toggle-checkbox--active' : '';
             } else {
-                return obj[prop] ? ' p-gui__switch-checkbox--active' : '';
+                return obj[prop] ? ' p-gui__toggle-checkbox--active' : '';
             }
         })();
 
         const checkbox = document.createElement('div');
-        checkbox.className = 'p-gui__switch-checkbox' + activeClass;
+        checkbox.className = 'p-gui__toggle-checkbox' + activeClass;
         container.append(checkbox);
 
         if ( isObject ) {
@@ -441,9 +441,9 @@ export default class GUI {
                     this.propReferences[propReferenceIndex] = val;
 
                     if (val) {
-                        checkbox.classList.add('p-gui__switch-checkbox--active');
+                        checkbox.classList.add('p-gui__toggle-checkbox--active');
                     } else {
-                        checkbox.classList.remove('p-gui__switch-checkbox--active');
+                        checkbox.classList.remove('p-gui__toggle-checkbox--active');
                     }
 
                     if (typeof callback == 'function') {

package/src/styles/_folder.css.js

@@ -2,7 +2,7 @@ export default /* css */ `
     .p-gui__folder {
         width: 100%;
         position: relative;
-        background: #333333;
+        background: var(--color-bg);
         overflow: auto;
         margin-bottom: 2px;
         display: flex;

package/src/styles/_slider.css.js

@@ -49,7 +49,7 @@ export default /* css */ `
     position: absolute;
     top: -25%;
     left: 0;
-    height: 150%;
+    height: 100%;
     background: var(--color-accent);
     width: 0;
 }
@@ -59,8 +59,8 @@ export default /* css */ `
 }
 
 .p-gui__slider-handle {
-    width: 15px;
-    height: 8px;
+    width: 9px;
+    height: 9px;
     position: absolute;
     top: 50%;
     left: 0;

package/src/styles/_toggle.css.js

@@ -0,0 +1,34 @@
+export default /* css */ `
+.p-gui__toggle {
+    color: var(--color-text-dark);
+    transition: var(--transition) background, var(--transition) color;
+}
+
+.p-gui__toggle:hover {
+    background: rgba(255, 255, 255, .1);
+    color: var(--color-text-light);
+}
+
+.p-gui__folder .p-gui__toggle {
+    margin-inline: 0;
+}
+
+.p-gui__toggle-checkbox {
+    width: 10px;
+    height: 10px;
+    background-color: rgba(255, 255, 255, 0.1);
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    margin: auto;
+    border-radius: 2px;
+    pointer-events: none;
+    transition: .5s all ease;
+}
+
+.p-gui__toggle-checkbox--active {
+    background-color: #ddd;
+    box-shadow: 0 0 7px #ddd;
+}
+`;

package/src/styles/styles.js

@@ -1,7 +1,7 @@
 import _button from "./_button.css.js"
 import _slider from "./_slider.css.js"
 import _list from "./_list.css.js"
-import _switch from "./_switch.css.js"
+import _toggle from "./_toggle.css.js"
 import _color from "./_color.css.js"
 import _vector2 from "./_vector2.css.js"
 import _image from "./_image.css.js"
@@ -16,7 +16,7 @@ export default function( position_type ) {
     return /* css */`
     .p-gui {
         --main-border-radius: 3px;
-        --color-bg: #121212;
+        --color-bg: #161616;
         --color-border: #222222;
         --color-border-2: transparent;
         --color-text-light: #ffffff;
@@ -117,7 +117,7 @@ export default function( position_type ) {
     
     .p-gui__slider, 
     .p-gui__button, 
-    .p-gui__switch,
+    .p-gui__toggle,
     .p-gui__list,
     .p-gui__vector2,
     .p-gui__color {
@@ -134,7 +134,7 @@ export default function( position_type ) {
     
     .p-gui__slider:hover, 
     .p-gui__button:hover, 
-    .p-gui__switch:hover,
+    .p-gui__toggle:hover,
     .p-gui__list:hover,
     .p-gui__vector2:hover,
     .p-gui__color:hover {
@@ -147,7 +147,7 @@ export default function( position_type ) {
     
     ${ _list }
     
-    ${ _switch }
+    ${ _toggle }
 
     ${ _slider }
     

package/src/styles/_switch.css.js

@@ -1,35 +0,0 @@
-export default /* css */ `
-.p-gui__switch {
-    background: rgba(255, 255, 255, .05);
-    color: var(--color-text-dark);
-    transition: var(--transition) background, var(--transition) color;
-}
-
-.p-gui__switch:hover {
-    background: rgba(255, 255, 255, .1);
-    color: var(--color-text-light);
-}
-
-.p-gui__folder .p-gui__switch {
-    margin-inline: 0;
-}
-
-.p-gui__switch-checkbox {
-    width: 5px;
-    height: 5px;
-    background-color: rgba(0, 0, 0, .5);
-    border: 1px solid grey;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    margin: auto;
-    border-radius: 50%;
-    pointer-events: none;
-}
-
-.p-gui__switch-checkbox--active {
-    background-color: #00ff89;
-    box-shadow: 0 0 7px #00ff89;
-}
-`;