weex-nuke/lib/node_modules/nuke-normal-input/src/styles/index.js

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

'use strict';

import VariableMix from './variable';
import { fixSmallUnit } from 'nuke-helper';

function styleProvider(theme = {}) {
  const Variables = VariableMix(theme);
  const core = theme.Core;

  return {
    Input: {
      'input-wrap': {},
      'input-inner': {
        flex: 1,
      },
      'single-wrap': {
        borderRadius: Variables['single-radius'],
        borderColor: Variables['single-line-color'],
        borderWidth: Variables['line-width'],
        borderStyle: Variables['border-style'],
        backgroundColor: Variables['bg-color'],
        height: Variables['single-height'],
        ...core.padding(0, Variables['single-padding-left-right']),
      },
      'single-disabled': {
        borderColor: Variables['disabled-line-color'],
        backgroundColor: Variables['disabled-bg-color'],
      },
      'single-disabled-input': {
        color: Variables['disabled-color'],
      },
      'multiple-wrap': {
        borderWidth: Variables['line-width'],
        borderStyle: Variables.borderStyle,
        borderColor: Variables['multiple-border-color'],
        borderRadius: Variables['multiple-radius'],
        backgroundColor: Variables['bg-color'],
        height: Variables['multiple-height'],
        padding: Variables['multiple-padding'],
      },

      'multiple-disabled': {
        backgroundColor: Variables['disabled-bg-color'],
      },

      'multiple-disabled-input': {
        backgroundColor: Variables['disabled-bg-color'],
        color: Variables['disabled-color'],
      },

      'single-input': {
        backgroundColor: 'transparent',
        color: Variables['single-color'],
        height: Variables['single-height'],
        lineHeight: Variables['single-height'],
        fontSize: Variables['single-font-size'],
      },

      readonly: {
        color: Variables['readonly-color'],
      },

      'multiple-input': {
        fontSize: Variables['multiple-font-size'],
      },

      'static-placeholder': {
        paddingTop: 0,
      },

      'input-ele': {
        borderTopWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        paddingLeft: 0,
        paddingRight: 0,
      },
      'input-has-clear': {
        paddingRight: 36,
      },

      'web-normalize': {
        webkitAppearance: 'none',
        outline: 'none',
        boxSizing: 'border-box',
        width: '100%',
        border: 'none',
        resize: 'none',
        zIndex: 1,
      },
      'single-count-wrap': {
        // position: 'absolute',
        alignSelf: 'flex-end',
        // bottom: Variables['single-count-bottom'],
        // right: Variables['single-count-right'],
        maxWidth: Variables['single-count-min-width'],
        // flexDirection: 'row',
        // justifyContent: 'flex-end',
        // backgroundColor: 'red'
      },
      'single-count-text': {
        flex: 1,
        textAlign: 'right',
        fontSize: Variables['count-font-size'],
        color: Variables['count-color'],
      },
      'count-error': {
        color: Variables['count-error-color'],
      },
      'multiple-count-wrap': {
        alignSelf: 'flex-end',
        // position: 'absolute',
        // bottom: Variables['multiple-count-bottom'],
        // right: Variables['multiple-count-right'],
        maxWidth: Variables['multiple-count-min-width'],
        // flexDirection: 'row',
        // justifyContent: 'flex-end',
        // backgroundColor: 'red'
      },
      'multiple-count-text': {
        flex: 1,
        textAlign: 'right',
        fontSize: Variables['count-font-size'],
        color: Variables['count-color'],
      },

      // 'clear-image': {
      //   width: Variables['clear-width'],
      //   height: Variables['clear-height'],
      // },
      'icon-image': {
        width: Variables['icon-width'],
        height: Variables['icon-height'],
      },

      help: {
        minHeight: Variables['error-height'],
        justifyContent: 'center',
      },
      clear: {
        width: Variables['clear-width'],
        fontSize: Variables['clear-font-size'],
        color: Variables['clear-color'],
        height: Variables['clear-height'],
        position: 'absolute',
        top: Variables['clear-top'],
        right: Variables['clear-right'],
        zIndex: 2, // for web
      },
      icon: {
        width: Variables['icon-width'],
        height: Variables['icon-height'],
        position: 'absolute',
        top: Variables['icon-top'],
        right: Variables['icon-right'],
        zIndex: 2, // for web
      },
      'error-text': {
        color: Variables['error-text-color'],
        lineHeight: Variables['error-text-line-height'],
        // justifyContent: 'center',
        fontSize: Variables['error-text-font-size'],
        paddingTop: Variables['error-text-padding-top'],
      },
      'error-input-wrap': {
        borderColor: Variables['error-border-color'],
      },
      'focus-input-wrap': {
        borderColor: Variables['focus-border-color'],
      },
      warning: {
        width: Variables['warning-width'],
        height: Variables['warning-height'],
        position: 'absolute',
        bottom: Variables['warning-bottom'],
        right: Variables['warning-right'],
      },

      'text-for-height': {
        position: 'absolute',
        top: 10,
        left: 10,
        fontSize: Variables['multiple-font-size'],
        lineHeight: 36,
        // color: 'red',
        visibility: 'hidden',
      },

      placeholder: {
        position: 'absolute',
        // width: '90%',
        flexDirection: 'row',
        left: 0,
        top: Variables['placeholder-top'],
        justifyContent: 'flex-start',
        alignItems: 'center',
        minWidth: Variables['placeholder-min-width'],
        height: Variables['placeholder-height'],
        // lineHeight: Variables['placeholder-height'],
        ...core.padding(0, 0),
      },
      'placeholder-text': {
        color: Variables['placeholder-color'],
        fontSize: Variables['placeholder-font-size'],
      },
    },
  };
}
module.exports = styleProvider;