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

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

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 caculateRemToPx = _nukeHelper.rem.caculateRemToPx;
var alignCenter = _nukeHelper.layout.alignCenter;

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

  var Variables = (0, _variable2.default)(theme);
  var core = theme.Core;
  return {
    Checkbox: {
      // / type = normal
      'wrap-normal-small': _extends({}, core.border(Variables['normal-border-width'], Variables['normal-border-style'], Variables['normal-border-color']), {
        height: caculateRemToPx(Variables['small-size-height']),
        width: caculateRemToPx(Variables['small-size-width'])
      }, alignCenter()),
      'wrap-normal-medium': _extends({}, core.border(Variables['normal-border-width'], Variables['normal-border-style'], Variables['normal-border-color']), {
        height: caculateRemToPx(Variables['medium-size-height']),
        width: caculateRemToPx(Variables['medium-size-width'])
      }, alignCenter()),
      'normal-checked': {
        borderColor: Variables['normal-border-color-selected'],
        color: Variables['normal-icon-color-selected'],
        backgroundColor: Variables['normal-bg-color-selected']
      },
      disabled: {
        opacity: 1,
        borderColor: Variables['normal-border-color-disabled'],
        backgroundColor: Variables['normal-bg-color-disabled'],
        color: Variables['normal-icon-color-disabled']
      },
      'checked-disabled': {
        opacity: 1,
        borderColor: Variables['normal-border-color-checked-disabled'],
        backgroundColor: Variables['normal-bg-color-checked-disabled'],
        color: Variables['normal-icon-color-checked-disabled']
      },
      // / type = empty
      'wrap-empty-small': _extends({}, core.border(Variables['empty-border-width'], Variables['empty-border-style'], Variables['empty-border-color']), {
        height: caculateRemToPx(Variables['small-size-height']),
        width: caculateRemToPx(Variables['small-size-width'])
      }, alignCenter()),
      'wrap-empty-medium': _extends({}, core.border(Variables['empty-border-width'], Variables['empty-border-style'], Variables['empty-border-color']), {
        height: caculateRemToPx(Variables['medium-size-height']),
        width: caculateRemToPx(Variables['medium-size-width'])
      }, alignCenter()),
      'empty-checked': _extends({}, core.border(Variables['empty-border-width'], Variables['empty-border-style'], Variables['empty-border-color-selected']), {
        color: Variables['empty-icon-color-selected'],
        backgroundColor: '#ffffff'
      }),
      // / type = list

      'wrap-list-small': _extends({
        // ...core.border(
        //   Variables['list-border-width'],
        //   Variables['list-border-style'],
        //   Variables['list-border-color']
        // ),
        border: 'none',
        height: Variables['small-size-height'],
        width: Variables['small-size-width']
      }, alignCenter()),
      'wrap-list-medium': _extends({
        // ...core.border(
        //   Variables['list-border-width'],
        //   Variables['list-border-style'],
        //   Variables['list-border-color']
        // ),
        border: 'none',
        height: Variables['medium-size-height'],
        width: Variables['medium-size-width']
      }, alignCenter()),

      'list-checked': {
        color: Variables['list-icon-color-selected']
        // backgroundColor: '#ffffff',
      },

      'list-disabled': {
        opacity: 1,
        backgroundColor: 'transparent',
        color: Variables['normal-icon-color-disabled']
      },
      medium: {
        backgroundColor: 'transparent',
        fontSize: caculateRemToPx(Variables['medium-icon-size']),
        lineHeight: caculateRemToPx(Variables['medium-icon-size']),
        borderRadius: Variables['medium-border-radius']
      },
      small: {
        backgroundColor: 'transparent',
        fontSize: caculateRemToPx(Variables['small-icon-size']),
        lineHeight: caculateRemToPx(Variables['small-icon-size']),
        borderRadius: Variables['small-border-radius']
      },
      'touch-small': _extends({
        width: Variables['small-touch-width'],
        height: Variables['small-touch-height'],
        lineHeight: Variables['small-touch-height']
      }, alignCenter()),
      'touch-medium': _extends({
        width: Variables['medium-touch-width'],
        height: Variables['medium-touch-height'],
        lineHeight: Variables['medium-touch-height']
      }, alignCenter())
    },
    CheckboxGroup: {
      group: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: 5
      },
      'group-small-text': {
        marginLeft: 5,
        lineHeight: Variables['small-touch-height']
      },
      'group-medium-text': {
        marginLeft: 5,
        lineHeight: Variables['medium-touch-height']
      }
    }
  };
}

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