goblin-gadgets 3.2.2 → 3.2.3

package/widgets/checkbox-nc/styles.js

@@ -1,122 +1,122 @@
-import {ColorManipulator} from 'goblin-theme';
-
-/******************************************************************************/
-
-export const propNames = [
-  'backgroundBrigtness',
-  'checked',
-  'disabled',
-  'readonly',
-  'text',
-];
-
-export default function styles(theme, props) {
-  const {backgroundBrigtness, checked, disabled, readonly, text} = props;
-
-  const isInactive = disabled || readonly;
-  const isDark = backgroundBrigtness === 'dark';
-
-  const f1 = isDark ? 0.0 : 0.2;
-  const f2 = isDark ? 0.0 : 0.6;
-
-  const colorBorderTop = ColorManipulator.lighten('#888', f1);
-  const colorBorderBottom = ColorManipulator.lighten('#444', f1);
-  const colorBackground1 = checked
-    ? ColorManipulator.lighten('#888', f2)
-    : ColorManipulator.lighten('#666', f2);
-  const colorBackground2 = checked
-    ? ColorManipulator.lighten('#555', f2)
-    : ColorManipulator.lighten('#333', f2);
-
-  const buttonRetro = {
-    'display': 'flex',
-    'flexDirection': text ? 'row' : 'column',
-    'alignItems': 'center',
-    ':hover .main-hover': {
-      background: isInactive
-        ? null
-        : `radial-gradient(at 75% 75%, ${ColorManipulator.lighten(
-            colorBackground1,
-            0.2
-          )}, ${ColorManipulator.lighten(colorBackground2, 0.2)})`,
-    },
-  };
-
-  const buttonRetroMain = {
-    position: 'relative',
-    minWidth: '32px',
-    minHeight: '32px',
-    maxWidth: '32px',
-    maxHeight: '32px',
-    margin: `5px ${text ? '15px' : '0px'} 5px 0px`,
-    boxSizing: 'border-box',
-    borderRadius: '16px',
-    borderTop: `3px solid ${colorBorderTop}`,
-    borderLeft: `3px solid ${colorBorderTop}`,
-    borderBottom: `3px solid ${colorBorderBottom}`,
-    borderRight: `3px solid ${colorBorderBottom}`,
-    background: `radial-gradient(at 75% 75%, ${colorBackground1}, ${colorBackground2})`,
-    boxShadow: isDark
-      ? '2px 5px 12px 0px rgba(0,0,0,1)'
-      : '2px 5px 12px 0px rgba(0,0,0,0.4)',
-    opacity: isInactive ? 0.5 : 1,
-    transition: '0.2s ease-out',
-  };
-
-  const checkButtonRetroStem = {
-    position: 'absolute',
-    top: '4px',
-    bottom: '4px',
-    left: '10px',
-    right: '10px',
-    boxSizing: 'border-box',
-    borderRadius: '8px',
-    border: `1px solid ${isDark ? '#aaa' : '#eee'}`,
-    backgroundColor: '#333',
-  };
-
-  const checkButtonRetroTip = {
-    position: 'absolute',
-    top: checked ? '-6px' : '16px',
-    left: '5px',
-    width: '16px',
-    height: '16px',
-    boxSizing: 'border-box',
-    borderRadius: '8px',
-    border: '1px solid #111',
-    boxShadow: '2px 5px 17px 0px #111',
-    background: checked
-      ? 'radial-gradient(at 30% 30%, #bbb, #333 40%)'
-      : 'radial-gradient(at 30% 30%, #fff, #bbb 40%)',
-    transition: '0.2s ease-out',
-  };
-
-  const radioButtonRetroBullet = {
-    position: 'absolute',
-    top: checked ? '5px' : '2px',
-    bottom: checked ? '5px' : '2px',
-    left: checked ? '5px' : '2px',
-    right: checked ? '5px' : '2px',
-    boxSizing: 'border-box',
-    borderRadius: '16px',
-    border: `1px solid ${checked ? '#111' : '#888'}`,
-    background: checked
-      ? 'radial-gradient(at 30% 30%, #bbb, #333 40%)'
-      : 'radial-gradient(at 30% 30%, #fff, #bbb 40%)',
-    transition: '0.2s ease-out',
-  };
-
-  /******************************************************************************/
-
-  return {
-    buttonRetro,
-    buttonRetroMain,
-
-    checkButtonRetroStem,
-    checkButtonRetroTip,
-
-    radioButtonRetroBullet,
-  };
-}
-
-/******************************************************************************/
+import {ColorManipulator} from 'goblin-theme';
+
+/******************************************************************************/
+
+export const propNames = [
+  'backgroundBrigtness',
+  'checked',
+  'disabled',
+  'readonly',
+  'text',
+];
+
+export default function styles(theme, props) {
+  const {backgroundBrigtness, checked, disabled, readonly, text} = props;
+
+  const isInactive = disabled || readonly;
+  const isDark = backgroundBrigtness === 'dark';
+
+  const f1 = isDark ? 0.0 : 0.2;
+  const f2 = isDark ? 0.0 : 0.6;
+
+  const colorBorderTop = ColorManipulator.lighten('#888', f1);
+  const colorBorderBottom = ColorManipulator.lighten('#444', f1);
+  const colorBackground1 = checked
+    ? ColorManipulator.lighten('#888', f2)
+    : ColorManipulator.lighten('#666', f2);
+  const colorBackground2 = checked
+    ? ColorManipulator.lighten('#555', f2)
+    : ColorManipulator.lighten('#333', f2);
+
+  const buttonRetro = {
+    'display': 'flex',
+    'flexDirection': text ? 'row' : 'column',
+    'alignItems': 'center',
+    ':hover .main-hover': {
+      background: isInactive
+        ? null
+        : `radial-gradient(at 75% 75%, ${ColorManipulator.lighten(
+            colorBackground1,
+            0.2
+          )}, ${ColorManipulator.lighten(colorBackground2, 0.2)})`,
+    },
+  };
+
+  const buttonRetroMain = {
+    position: 'relative',
+    minWidth: '32px',
+    minHeight: '32px',
+    maxWidth: '32px',
+    maxHeight: '32px',
+    margin: `5px ${text ? '15px' : '0px'} 5px 0px`,
+    boxSizing: 'border-box',
+    borderRadius: '16px',
+    borderTop: `3px solid ${colorBorderTop}`,
+    borderLeft: `3px solid ${colorBorderTop}`,
+    borderBottom: `3px solid ${colorBorderBottom}`,
+    borderRight: `3px solid ${colorBorderBottom}`,
+    background: `radial-gradient(at 75% 75%, ${colorBackground1}, ${colorBackground2})`,
+    boxShadow: isDark
+      ? '2px 5px 12px 0px rgba(0,0,0,1)'
+      : '2px 5px 12px 0px rgba(0,0,0,0.4)',
+    opacity: isInactive ? 0.5 : 1,
+    transition: '0.2s ease-out',
+  };
+
+  const checkButtonRetroStem = {
+    position: 'absolute',
+    top: '4px',
+    bottom: '4px',
+    left: '10px',
+    right: '10px',
+    boxSizing: 'border-box',
+    borderRadius: '8px',
+    border: `1px solid ${isDark ? '#aaa' : '#eee'}`,
+    backgroundColor: '#333',
+  };
+
+  const checkButtonRetroTip = {
+    position: 'absolute',
+    top: checked ? '-6px' : '16px',
+    left: '5px',
+    width: '16px',
+    height: '16px',
+    boxSizing: 'border-box',
+    borderRadius: '8px',
+    border: '1px solid #111',
+    boxShadow: '2px 5px 17px 0px #111',
+    background: checked
+      ? 'radial-gradient(at 30% 30%, #bbb, #333 40%)'
+      : 'radial-gradient(at 30% 30%, #fff, #bbb 40%)',
+    transition: '0.2s ease-out',
+  };
+
+  const radioButtonRetroBullet = {
+    position: 'absolute',
+    top: checked ? '5px' : '2px',
+    bottom: checked ? '5px' : '2px',
+    left: checked ? '5px' : '2px',
+    right: checked ? '5px' : '2px',
+    boxSizing: 'border-box',
+    borderRadius: '16px',
+    border: `1px solid ${checked ? '#111' : '#888'}`,
+    background: checked
+      ? 'radial-gradient(at 30% 30%, #bbb, #333 40%)'
+      : 'radial-gradient(at 30% 30%, #fff, #bbb 40%)',
+    transition: '0.2s ease-out',
+  };
+
+  /******************************************************************************/
+
+  return {
+    buttonRetro,
+    buttonRetroMain,
+
+    checkButtonRetroStem,
+    checkButtonRetroTip,
+
+    radioButtonRetroBullet,
+  };
+}
+
+/******************************************************************************/

package/widgets/checkbox-nc/widget.js

@@ -1,116 +1,116 @@
-//T:2019-02-27
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import props from './props';
-import scenarios from './scenarios';
-import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import Label from 'goblin-gadgets/widgets/label/widget';
-import SwitchOnOff from 'goblin-gadgets/widgets/switch-on-off/widget';
-
-/******************************************************************************/
-
-export default class CheckboxNC extends Widget {
-  constructor() {
-    super(...arguments);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange() {
-    const checked = !this.props.checked;
-    if (this.props.onChange) {
-      this.props.onChange(checked);
-    }
-  }
-
-  /******************************************************************************/
-
-  renderRadioRetro() {
-    return (
-      <div
-        className={this.styles.classNames.buttonRetro}
-        onClick={this.onChange}
-      >
-        <div className={`main-hover ${this.styles.classNames.buttonRetroMain}`}>
-          <div className={this.styles.classNames.radioButtonRetroBullet} />
-        </div>
-        <Label kind="check-button" wrap="no" text={this.props.text} />
-      </div>
-    );
-  }
-
-  renderCheckRetro() {
-    return (
-      <div
-        className={this.styles.classNames.buttonRetro}
-        onClick={this.onChange}
-      >
-        <div className={`main-hover ${this.styles.classNames.buttonRetroMain}`}>
-          <div className={this.styles.classNames.checkButtonRetroStem} />
-          <div className={this.styles.classNames.checkButtonRetroTip} />
-        </div>
-        <Label kind="check-button" wrap="no" text={this.props.text} />
-      </div>
-    );
-  }
-
-  render() {
-    if (
-      this.context.theme.look.name === 'retro' &&
-      this.props.look !== 'modern' &&
-      this.props.kind !== 'active'
-    ) {
-      if (this.props.kind === 'radio') {
-        return this.renderRadioRetro();
-      } else {
-        return this.renderCheckRetro();
-      }
-    }
-
-    const {checked, ...otherProps} = this.props;
-
-    let kind, border, glyph, glyphColor, active;
-    if (this.props.kind === 'on-off') {
-      return (
-        <SwitchOnOff
-          checked={this.props.checked}
-          disabled={this.props.disabled}
-          onClick={this.onChange}
-        />
-      );
-    } else if (this.props.kind === 'switch') {
-      kind = 'check-button';
-      glyph = checked ? 'light/toggle-on' : 'light/toggle-off'; // [ o] [x ]
-    } else if (this.props.kind === 'big') {
-      kind = null;
-      glyph = 'solid/check';
-      glyphColor = checked ? this.props.glyphColor : 'transparent';
-    } else if (this.props.kind === 'radio') {
-      kind = 'check-button';
-      glyph = checked ? 'regular/dot-circle' : 'regular/circle'; // o
-    } else if (this.props.kind === 'active') {
-      border = 'none';
-      glyph = this.props.glyph;
-      active = checked;
-    } else {
-      kind = 'check-button';
-      glyph = checked ? 'solid/check-square' : 'regular/square'; // [v] [ ]
-    }
-
-    return (
-      <Button
-        {...otherProps}
-        kind={kind}
-        border={border}
-        glyph={glyph}
-        glyphColor={glyphColor}
-        active={active}
-        onClick={this.onChange}
-      />
-    );
-  }
-}
-
-/******************************************************************************/
-
-registerWidget(CheckboxNC, props, scenarios);
+//T:2019-02-27
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import props from './props';
+import scenarios from './scenarios';
+import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import Label from 'goblin-gadgets/widgets/label/widget';
+import SwitchOnOff from 'goblin-gadgets/widgets/switch-on-off/widget';
+
+/******************************************************************************/
+
+export default class CheckboxNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange() {
+    const checked = !this.props.checked;
+    if (this.props.onChange) {
+      this.props.onChange(checked);
+    }
+  }
+
+  /******************************************************************************/
+
+  renderRadioRetro() {
+    return (
+      <div
+        className={this.styles.classNames.buttonRetro}
+        onClick={this.onChange}
+      >
+        <div className={`main-hover ${this.styles.classNames.buttonRetroMain}`}>
+          <div className={this.styles.classNames.radioButtonRetroBullet} />
+        </div>
+        <Label kind="check-button" wrap="no" text={this.props.text} />
+      </div>
+    );
+  }
+
+  renderCheckRetro() {
+    return (
+      <div
+        className={this.styles.classNames.buttonRetro}
+        onClick={this.onChange}
+      >
+        <div className={`main-hover ${this.styles.classNames.buttonRetroMain}`}>
+          <div className={this.styles.classNames.checkButtonRetroStem} />
+          <div className={this.styles.classNames.checkButtonRetroTip} />
+        </div>
+        <Label kind="check-button" wrap="no" text={this.props.text} />
+      </div>
+    );
+  }
+
+  render() {
+    if (
+      this.context.theme.look.name === 'retro' &&
+      this.props.look !== 'modern' &&
+      this.props.kind !== 'active'
+    ) {
+      if (this.props.kind === 'radio') {
+        return this.renderRadioRetro();
+      } else {
+        return this.renderCheckRetro();
+      }
+    }
+
+    const {checked, ...otherProps} = this.props;
+
+    let kind, border, glyph, glyphColor, active;
+    if (this.props.kind === 'on-off') {
+      return (
+        <SwitchOnOff
+          checked={this.props.checked}
+          disabled={this.props.disabled}
+          onClick={this.onChange}
+        />
+      );
+    } else if (this.props.kind === 'switch') {
+      kind = 'check-button';
+      glyph = checked ? 'light/toggle-on' : 'light/toggle-off'; // [ o] [x ]
+    } else if (this.props.kind === 'big') {
+      kind = null;
+      glyph = 'solid/check';
+      glyphColor = checked ? this.props.glyphColor : 'transparent';
+    } else if (this.props.kind === 'radio') {
+      kind = 'check-button';
+      glyph = checked ? 'regular/dot-circle' : 'regular/circle'; // o
+    } else if (this.props.kind === 'active') {
+      border = 'none';
+      glyph = this.props.glyph;
+      active = checked;
+    } else {
+      kind = 'check-button';
+      glyph = checked ? 'solid/check-square' : 'regular/square'; // [v] [ ]
+    }
+
+    return (
+      <Button
+        {...otherProps}
+        kind={kind}
+        border={border}
+        glyph={glyph}
+        glyphColor={glyphColor}
+        active={active}
+        onClick={this.onChange}
+      />
+    );
+  }
+}
+
+/******************************************************************************/
+
+registerWidget(CheckboxNC, props, scenarios);