weex-nuke/lib/Switch/styles/index.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _nukeHelper = require('../../Helper/index.js');

var _variable = require('./variable.js');

var _variable2 = _interopRequireDefault(_variable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var rgba = _nukeHelper.hex.rgba;

function StyleMix() {
  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var Variables = (0, _variable2.default)(theme);
  return {
    Switch: {
      wrap: {
        width: Variables['wrap-width-android'],
        height: Variables['wrap-height-android'],
        borderRadius: Variables['wrap-border-radius'],
        position: 'relative',
        display: 'inline-block',
        margin: Variables['wrap-margin-android'],
        padding: Variables['wrap-padding-android'],
        cursor: 'default', // pointer will cause a grey background color on chrome
        verticalAlign: 'middle',
        borderWidth: Variables['wrap-border-width-android'],

        WebkitUserSelect: 'none',
        WebkitBoxSizing: 'content-box',
        WebkitBackfaceVisibility: 'hidden'
      },
      checkedWrap: {
        borderColor: Variables['c-border-color-android'],
        backgroundColor: Variables['c-bg-color-android'],
        WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s'
      },
      uncheckedWrap: {
        borderColor: Variables['unc-border-color'], // '#dfdfdf',
        backgroundColor: Variables['unc-bg-color-android'],
        WebkitTransition: 'border 0.2s, box-shadow 0.2s'
      },
      disabledWrap: {
        cursor: 'not-allowed',
        boxShadow: 'none'
      },
      disabledCheckedWrap: {
        borderColor: rgba(Variables['dis-c-border-color-android'], 0.5),
        backgroundColor: rgba(Variables['dis-c-bg-color-android'], 0.26)
      },
      disabledUnCheckedWrap: {
        backgroundColor: rgba(Variables['dis-unc-bg-color-android'], 0.26)
        // borderColor: Variables['unc-border-color']
      },
      dot: {
        position: 'absolute',
        top: Variables['dot-top-android'],
        left: Variables['dot-left-android'],
        width: Variables['dot-size-android'], // 60,
        height: Variables['dot-size-android'], // 60,
        backgroundColor: Variables['dot-bg-color-android'],
        borderRadius: Variables['dot-size-android'],
        boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
        WebkitTransition: '-webkit-transform 0.2s ease-in'
      },
      checkedDot: {
        WebkitTransform: 'translateX(' + Variables['dot-transform-android'] + 'rem)', // should with rem unit that the value is string type
        backgroundColor: Variables['dot-checked-bg-color-android']
      },
      uncheckedDot: {
        WebkitTransform: 'translateX(0)'
      },
      disabledDot: {
        backgroundColor: rgba(Variables['dot-disabled-bg-color-android'], 0.5)
      },
      wrapIOS: {
        width: Variables['wrap-width-ios'],
        height: Variables['wrap-height-ios'],
        borderRadius: Variables['wrap-border-radius'],
        position: 'relative',
        display: 'inline-block',
        margin: Variables['wrap-margin-ios'],
        padding: Variables['wrap-padding-ios'],
        cursor: 'default', // pointer will cause a grey background color on chrome
        verticalAlign: 'middle',
        borderWidth: Variables['wrap-border-width-ios'],
        borderStyle: 'solid',
        // borderColor: Variables['wrap-border-color'],// todo

        WebkitUserSelect: 'none',
        WebkitBoxSizing: 'content-box',
        WebkitBackfaceVisibility: 'hidden'
      },
      checkedWrapIOS: {
        borderColor: Variables['c-border-color-ios'],
        backgroundColor: Variables['c-bg-color-ios'],
        WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s'
      },
      uncheckedWrapIOS: {
        borderColor: Variables['unc-border-color'], // '#dfdfdf',
        backgroundColor: Variables['unc-bg-color-ios'],
        WebkitTransition: 'border 0.2s, box-shadow 0.2s'
      },

      disabledCheckedWrapIOS: {
        borderColor: rgba(Variables['dis-c-border-color-ios'], 0.5),
        backgroundColor: rgba(Variables['dis-c-bg-color-ios'], 0.5)
      },
      disabledUnCheckedWrapIOS: {
        backgroundColor: Variables['dis-unc-bg-color-ios']
        // borderColor: Variables['unc-border-color']
      },
      dotIOS: {
        position: 'absolute',
        top: Variables['dot-top-ios'],
        left: Variables['dot-left-ios'],
        width: Variables['dot-size-ios'], // 60,
        height: Variables['dot-size-ios'], // 60,
        backgroundColor: Variables['dot-bg-color-ios'],
        borderRadius: Variables['dot-size-ios'],
        boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
        WebkitTransition: '-webkit-transform 0.2s ease-in'
      },
      checkedDotIOS: {
        WebkitTransform: 'translateX(' + Variables['dot-transform-ios'] + 'rem)', // should with rem unit that the value is string type
        backgroundColor: Variables['dot-checked-bg-color-ios']
      },

      disabledDotIOS: {
        backgroundColor: Variables['dot-disabled-bg-color-ios']
      }
    }
  };
}

exports.default = StyleMix;
module.exports = exports['default'];