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

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

'use strict';

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);
  return {
    Dialog: {
      mask: {
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
        alignItems: 'center',
        justifyContent: 'center'
      },
      maskWeb: {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 100
      },
      main: {
        width: Variables['dialog-width'],
        borderRadius: Variables['content-radius'],
        backgroundColor: Variables['dialog-bg']
      },
      title: {
        marginTop: Variables['title-margin-top'],
        marginBottom: Variables['title-margin-bottom'],
        borderRadius: Variables['content-radius'],
        fontSize: Variables['title-font-size'],
        paddingLeft: Variables['content-padding-l-r'],
        paddingRight: Variables['content-padding-l-r'],
        color: Variables['title-color'],
        lineHeight: Variables['title-line-height'],
        fontWeight: 600,
        textAlign: 'center'
        // fontFamily: 'Helvetica',
      },
      content: {
        lineHeight: Variables['content-line-height'],
        color: Variables['content-color'],
        fontSize: Variables['content-font-size'],
        textAlign: 'center',

        paddingLeft: Variables['content-padding-l-r'],
        paddingRight: Variables['content-padding-l-r']
      },
      footer: {
        marginTop: Variables['footer-margin-top'],
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: Variables['dialog-bg'],
        paddingTop: Variables['footer-padding-top-bottom'],
        paddingBottom: Variables['footer-padding-top-bottom'],
        // height: Variables['footer-height'],
        borderBottomLeftRadius: Variables['content-radius'],
        borderBottomRightRadius: Variables['content-radius'],
        borderTopWidth: Variables['footer-border-top-width'],
        borderTopStyle: 'solid',
        borderTopColor: Variables['footer-border-top-color']
      },
      btn: {
        flex: 1,
        color: Variables['btn-color'],
        height: Variables['btn-height'],
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderWidth: 0,
        backgroundColor: 'transparent',
        borderBottomLeftRadius: Variables['content-radius'],
        borderBottomRightRadius: Variables['content-radius'],
        fontSize: Variables['btn-font-size'],
        fontWeight: 600
      },
      'btn-left': {
        borderBottomLeftRadius: Variables['content-radius'],
        borderBottomRightRadius: 0,
        borderRightWidth: Variables['btn-seperator-width'],
        borderRightStyle: 'solid',
        fontWeight: 400,
        borderRightColor: Variables['btn-seperator-color']
      },
      'btn-right': {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: Variables['content-radius']
      },
      'md-main': {
        width: Variables['md-dialog-width'],
        borderRadius: Variables['md-content-radius'],
        backgroundColor: Variables['md-dialog-bg']
      },
      'md-title': {
        marginTop: Variables['title-margin-top'],
        marginBottom: Variables['md-title-margin-bottom'],
        borderRadius: Variables['md-content-radius'],
        fontSize: Variables['md-title-font-size'],
        paddingLeft: Variables['md-content-padding-l-r'],
        paddingRight: Variables['md-content-padding-l-r'],
        color: Variables['md-title-color'],
        lineHeight: Variables['title-line-height'],
        fontWeight: 600,
        textAlign: 'left'
        // fontFamily: 'Helvetica',
      },
      'md-contentWrap': {
        paddingLeft: Variables['md-content-padding-l-r'],
        paddingRight: Variables['md-content-padding-l-r']
      },
      'md-content': {
        lineHeight: Variables['md-content-line-height'],
        color: Variables['md-content-color'],
        fontSize: Variables['md-content-font-size'],
        textAlign: 'left'
      },
      'md-footer': {
        marginTop: Variables['md-footer-margin-top'],
        marginBottom: Variables['md-footer-margin-bottom'],
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: 'transparent',
        paddingTop: 0,
        paddingBottom: 0,
        // height: Variables['footer-height'],
        borderBottomLeftRadius: Variables['md-content-radius'],
        borderBottomRightRadius: Variables['md-content-radius'],
        // height: Variables['footer-height'],
        borderTopWidth: 0
      },
      'md-btn': {
        color: Variables['md-btn-color'],
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderWidth: 0,
        backgroundColor: Variables['md-btn-bg-color'],
        fontWeight: 600,

        height: Variables['md-btn-height'],
        borderRadius: 0,

        fontSize: Variables['md-btn-font-size']
      },
      'md-btn-left': {
        borderBottomLeftRadius: Variables['content-radius'],
        borderBottomRightRadius: 0,
        borderRightWidth: 0,
        fontWeight: 400
      }
    }
  };
}
module.exports = styleProvider;