weex-nuke/lib/node_modules/nuke-search-bar/src/styles/index.js

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

'use strict';

import VariableMix from './variable';

function styleProvider(theme = {}) {
  const Variables = VariableMix(theme);
  const core = theme.Core;
  return {
    SearchBar: {
      wrap: {
        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: {
        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: {
        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;