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

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

import { buttonSize, buttonColor, buttonDisabled } from './mixin';
import VariableMix from './variable';

function btnStyleMix(theme = {}) {
  const Variables = VariableMix(theme);
  return {
    Button: {
      base: {
        backgroundColor: 'transparent',
        cursor: 'pointer',
        justifyContent: 'center',
        flexDirection: 'row',
        alignSelf: 'center',
        alignItems: 'center',
      },
      large: {
        ...buttonSize(
          Variables['size-l-padding-lr'],
          Variables['size-l-height'],
          Variables['size-l-font'],
          Variables['icon-size-l'],
          Variables['icon-l-margin-lr'],
          Variables['corner-l'],
          Variables['border-width-l']
        ),
      },
      small: {
        ...buttonSize(
          Variables['size-s-padding-lr'],
          Variables['size-s-height'],
          Variables['size-s-font'],
          Variables['icon-size-s'],
          Variables['icon-s-margin-lr'],
          Variables['corner-s'],
          Variables['border-width-s']
        ),
      },
      medium: {
        ...buttonSize(
          Variables['size-m-padding-lr'],
          Variables['size-m-height'],
          Variables['size-m-font'],
          Variables['icon-size-m'],
          Variables['icon-m-margin-lr'],
          Variables['corner-m'],
          Variables['border-width-m']
        ),
      },
      primary: {
        borderStyle: Variables['normal-line-style'],
        ...buttonColor(
          Variables['prim-color'],
          Variables['prim-active-color'],
          Variables['prim-bg-color'],
          Variables['prim-active-bg-color'],
          Variables['prim-border-color'],
          Variables['prim-active-border-color']
        ),
      },
      secondary: {
        borderStyle: Variables['normal-line-style'],
        ...buttonColor(
          Variables['second-color'],
          Variables['second-active-color'],
          Variables['second-bg-color'],
          Variables['second-active-bg-color'],
          Variables['second-border-color'],
          Variables['second-active-border-color']
        ),
      },
      normal: {
        borderStyle: Variables['normal-line-style'],
        ...buttonColor(
          Variables['normal-color'],
          Variables['normal-active-color'],
          Variables['normal-bg-color'],
          Variables['normal-active-bg-color'],
          Variables['normal-border-color'],
          Variables['normal-active-border-color']
        ),
      },
      block: {
        alignSelf: 'stretch',
      },

      third: {
        ...buttonColor(
          Variables['third-color'],
          Variables['third-active-color'],
          Variables['third-bg-color'],
          Variables['third-active-bg-color'],
          Variables['third-border-color'],
          Variables['third-active-border-color']
        ),
      },

      'warning-normal': {
        borderStyle: Variables['w-line-style'],
        ...buttonColor(
          Variables['w-normal-color'],
          Variables['w-normal-active-color'],
          Variables['w-normal-bg-color'],
          Variables['w-normal-active-bg-color'],
          Variables['w-normal-border-color'],
          Variables['w-normal-active-border-color']
        ),
      },
      'warning-primary': {
        borderStyle: Variables['w-line-style'],
        ...buttonColor(
          Variables['w-prim-color'],
          Variables['w-prim-active-color'],
          Variables['w-prim-bg-color'],
          Variables['w-prim-active-bg-color'],
          Variables['w-prim-border-color'],
          Variables['w-prim-active-border-color']
        ),
      },
      'normal-disabled': {
        ...buttonDisabled(
          Variables['normal-disabled-color'],
          Variables['normal-disabled-bg-color'],
          Variables['normal-disabled-border-color'],
          1
        ),
      },
      'primary-disabled': {
        ...buttonDisabled(
          Variables['prim-disabled-color'],
          Variables['prim-disabled-bg-color'],
          Variables['prim-disabled-border-color'],
          1
        ),
      },
      'secondary-disabled': {
        ...buttonDisabled(
          Variables['second-disabled-color'],
          Variables['second-disabled-bg-color'],
          Variables['second-disabled-border-color'],
          1
        ),
      },
      'third-disabled': {
        ...buttonDisabled(
          Variables['third-disabled-color'],
          Variables['third-disabled-bg-color'],
          Variables['third-disabled-border-color'],
          1
        ),
      },
      'warning-disabled': {
        ...buttonDisabled(
          Variables['w-disabled-color'],
          Variables['w-disabled-bg-color'],
          Variables['w-disabled-border-color'],
          1
        ),
      },
    },
    ButtonGroup: {
      group: {
        maxWidth: '750rem',
        flexDirection: 'row',
      },
      'group-button': {
        flex: 1,
        marginRight: Variables['group-margin'],
      },
      'group-button-last': {
        marginRight: 0,
      },
      'group-block': {
        flexDirection: 'column',
      },
      'group-block-button': {
        alignSelf: 'stretch',
      },
    },
  };
}
module.exports = btnStyleMix;