nuke-modal/src/styles/index.js

模态框

import VariableMix from './variable';
import { rgba } from './mixin';

function styleProvider(theme = {}) {
  const Variables = VariableMix(theme);
  const core = theme.Core;
  return {
    Toast: {
      mask: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        flex: 1,
        backgroundColor: rgba(
          Variables['mask-bg-color'],
          Variables['mask-opacity']
        ),
      },
      body: {
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: Variables['min-width'],
        maxWidth: Variables['max-width'],
        minHeight: Variables['min-height'],
        backgroundColor: rgba(Variables['bg-color'], Variables.opacity),
        borderRadius: Variables.corner,
        ...core.padding(
          Variables['padding-top-bottom'],
          Variables['padding-left-right']
        ),
        alignSelf: 'center',
      },
      'body-with-icon': {
        minWidth: Variables['icon-min-width'],
        maxWidth: Variables['icon-max-width'],
        minHeight: Variables['icon-min-height'],
      },
      iconfont: {
        fontSize: Variables['icon-size'],
        color: Variables['icon-color'],
      },
      text: {
        fontSize: Variables['font-size'],
        color: Variables.color,
        textAlign: 'center',
      },
      'text-with-icon': {
        marginTop: Variables['icon-margin-bottom'],
      },
    },
  };
}
module.exports = styleProvider;