weex-nuke/lib/node_modules/nuke-checkbox/src/styles/index.js

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

import { rem, layout } from 'nuke-helper';
import VariableMix from './variable';

const { caculateRemToPx } = rem;
const { alignCenter } = layout;
function StyleMix(theme = {}) {
  const Variables = VariableMix(theme);
  const core = theme.Core;
  return {
    Checkbox: {
      // / type = normal
      'wrap-normal-small': {
        ...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': {
        ...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': {
        ...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': {
        ...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': {
        ...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': {
        // ...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': {
        // ...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': {
        width: Variables['small-touch-width'],
        height: Variables['small-touch-height'],
        lineHeight: Variables['small-touch-height'],
        ...alignCenter(),
      },
      'touch-medium': {
        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'],
      },
    },
  };
}

export default StyleMix;