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

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

'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.js');

var _variable2 = _interopRequireDefault(_variable);

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 {
    SearchBar: {
      wrap: _extends({
        height: Variables.height
      }, core.border(Variables['border-width'], Variables['border-style'], 'transparent', 'bottom'), core.padding(0, Variables['padding-left-right']), {
        backgroundColor: Variables['bg-color'],
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
      }),
      body: {
        justifyContent: 'flex-start',
        borderRadius: Variables['border-radius'],
        backgroundColor: Variables['input-bg-color'],
        height: Variables['body-height'],

        flexDirection: 'row',
        flex: 1
      },
      'body-centered': {
        justifyContent: 'center'
      },

      icon: {
        // marginRight: Variables['icon-margin-right'],
        color: Variables['placeholder-color'],
        fontSize: Variables['icon-size']
      },

      placeholder: _extends({
        position: 'absolute',
        height: Variables['body-height'],
        zIndex: 1
      }, core.padding(0, Variables['body-padding-l-r']), {
        width: '100%', // for web
        color: Variables['placeholder-color'],
        fontSize: Variables['font-size'],
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
      }),
      'input-wrap': {
        height: Variables['body-height'],
        color: Variables.color,
        borderWidth: 0,
        flex: 1,
        zIndex: 2,
        backgroundColor: 'transparent',
        paddingLeft: Variables['input-padding-left']
      },
      'input-ele': {
        height: Variables['body-height'],
        lineHeight: Variables['body-height'],
        fontSize: Variables['font-size'],
        color: Variables.color,
        borderWidth: 0,
        paddingLeft: 0,
        paddingRight: 0,
        flex: 1,
        backgroundColor: 'transparent'
      },
      button: _extends({
        height: '100%'
      }, core.padding(0, Variables['cancel-margin-left'], 0, Variables['cancel-margin-left']), {
        alignItems: 'center',
        flexDirection: 'row'
      }),
      'button-text': {
        color: '#333333',
        'color:active': '#666666',
        fontSize: Variables['font-size']
      }
    }
  };
}
module.exports = styleProvider;