Removed custom styling from DatBoolean component and fixed minor style issues

Author: rohan-deshpande

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Release Notes
 
+## (2017-10-08) `v0.0.21`
+
+### Changed
+
+* Removed custom check box styling from `DatBoolean` component
+* Ensured sliders are the same height as number inputs
+* Minor style changes for consistency
+
 ## (2017-10-08) `v0.0.20`
 
 ### Changed  

build/react-dat-gui.css

@@ -6384,16 +6384,7 @@ var DatBoolean = function (_Component) {
             type: 'checkbox',
             checked: this.state.value,
             onChange: this.handleChange
-          }),
-          _react2.default.createElement(
-            'div',
-            { className: 'checkbox' },
-            _react2.default.createElement(
-              'svg',
-              { className: 'checkmark', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 50 50' },
-              _react2.default.createElement('path', { d: 'M0,0L50,50M50,0L0,50Z' })
-            )
-          )
+          })
         )
       );
     }

build/react-dat-gui.js

@@ -1,5 +1,12 @@
 @charset "UTF-8";
 
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 /**
 * @see https://workshop.chromeexperiments.com/css/examples.css
 */

build/react-dat-gui.js.map

@@ -53,11 +53,6 @@ export default class DatBoolean extends Component {
             checked={this.state.value}
             onChange={this.handleChange}
           />
-          <div className="checkbox">
-            <svg className="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
-              <path d="M0,0L50,50M50,0L0,50Z" />
-            </svg>
-          </div>
         </label>
       </li>
     );

dev/src/chrome-experiments.css

@@ -2,52 +2,17 @@
   position: relative;
   border-left: $border-left-size solid $boolean-color;
 
+  label {
+    cursor: pointer;
+  }
+
   .label-text {
     display: block;
     padding: 5px 0;
-    width: calc(100% - 2em);
-  }
 
-  .checkbox,
-  input[type=checkbox] {
-    position: absolute;
-    top: 1px;
-    right: 2px;
-    bottom: 1px;
-    width: 2em;
-  }
-
-  .checkbox {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 3px solid $background-color;
-    background: $input-color;
-    z-index: 0;
-
-    > .checkmark {
-      display: none;
-      width: 0.6em;
-      height: 0.6em;
-      stroke-width: 7px;
-      stroke: lighten($boolean-color, 20%);
-    }
   }
 
   input[type=checkbox] {
-    height: calc(100% - 4px);
     margin: 0;
-    opacity: 0;
-    z-index: 1;
-  }
-
-  input[type=checkbox]:hover ~ .checkbox {
-    background-color: lighten($input-color, $hover-lighten);
-  }
-
-  input[type=checkbox]:checked ~ .checkbox {
-    > .checkmark {
-      display: block;
-    }
   }
 }

dev/src/react-dat-gui/components/DatBoolean.js

@@ -14,7 +14,7 @@
   .popover {
     position: absolute;
     z-index: 2;
-    right: 4px;
+    right: 5px;
   }
 
   .cover {
@@ -27,11 +27,11 @@
 
   .picker {
     background: '#fff';
-    border-radius: 2px;
     box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);
     box-sizing: initial;
     width: auto;
     font-family: 'Menlo';
+    margin-top: -3px;
 
     .body {
       padding: 0px;
@@ -58,7 +58,6 @@
       width: 100%;
       padding-bottom: 55%;
       position: relative;
-      border-radius: 2px 2px 0 0;
       overflow: hidden;
 
       .saturation {
@@ -82,7 +81,6 @@
         input {
           font-size: 11px;
           color: #333;
-          width: 100%;
           border-radius: 2px;
           border: none;
           box-shadow: inset 0 0 0 1px #dadada;

dev/src/react-dat-gui/style/_boolean.scss

@@ -59,7 +59,7 @@
 
       label {
         display: flex;
-        align-items: baseline;
+        align-items: center;
         justify-content: flex-start;
         width: 100%;
         padding: 1px 2px 1px 8px;

dev/src/react-dat-gui/style/_color.scss

@@ -15,11 +15,6 @@
     background-size: 0% 100%;
     background-repeat: no-repeat;
     cursor: ew-resize;
-
-    &:before {
-      content: '\A0';
-      display: block;
-      padding: 2px;
-    }
+    height: 25px;
   }
 }