nuke-normal-input/lib/styles/index.js

输入框

'use strict';

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 _variable = require('./variable');

var _variable2 = _interopRequireDefault(_variable);

var _nukeHelper = require('nuke-helper');

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

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

  var Variables = (0, _variable2.default)(theme);
  var core = theme.Core;

  return {
    Input: {
      'input-wrap': {},
      'input-inner': {
        flex: 1
      },
      'single-wrap': _extends({
        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: _extends({
        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']
      }, core.padding(0, 0)),
      'placeholder-text': {
        color: Variables['placeholder-color'],
        fontSize: Variables['placeholder-font-size']
      }
    }
  };
}
module.exports = styleProvider;