rat-button/lib/styles/index.js

button component for Rax.

'use strict';

var _variable = require('./variable');

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 {
    Button: {
      /*风格*/
      'btn': {
        'position': 'relative',
        'display': 'inline-block',
        '-webkit-box-shadow': 'none',
        'box-shadow': 'none',
        'text-decoration': 'none',
        'text-align': 'center',
        'text-transform': 'none',
        'white-space': 'nowrap',
        'vertical-align': 'middle',
        '-webkit-user-select': 'none',
        '-moz-user-select': 'none',
        '-ms-user-select': 'none',
        'user-select': 'none',
        '-webkit-transition': 'all .3s ease-out',
        'transition': 'all .3s ease-out',
        'cursor': 'pointer'
      },
      'normal': {
        'border-style': 'solid',
        'background-color': Variables['$btn-pure-normal-bg'],
        'border-color': Variables['$btn-pure-normal-border-color'],
        'color': Variables['$btn-pure-normal-color'],
        'cursor': 'pointer',
        'border-radius': '3px',
        'outline': 'none'
      },
      'normal-hover': {
        'background-color': Variables['$btn-pure-normal-bg-hover'],
        'border-color': Variables['$btn-pure-normal-border-color-hover'],
        'color': Variables['$btn-pure-normal-color-hover']
      },
      'primary': {
        'border-style': 'solid',
        'background-color': Variables['$btn-pure-primary-bg'],
        'color': Variables['$btn-pure-primary-color'],
        'border-color': Variables['$btn-pure-primary-border-color'],
        'cursor': 'pointer',
        'border-radius': '3px',
        'outline': 'none'
      },
      'primary-hover': {
        'background-color': Variables['$btn-pure-primary-bg-hover'],
        'border-color': Variables['$btn-pure-primary-border-color-hover'],
        'color': Variables['$btn-pure-primary-color-hover']
      },
      'secondary': {
        'border-style': 'solid',
        'background-color': Variables['$btn-pure-secondary-bg'], //'#fff',
        'border-color': Variables['$btn-pure-secondary-border-color'], //'#5584ff',
        'color': Variables['$btn-pure-secondary-color'],
        'cursor': 'pointer',
        'border-radius': '3px',
        'outline': 'none'
      },
      'secondary-hover': {
        'background-color': Variables['$btn-pure-secondary-bg-hover'],
        'border-color': Variables['$btn-pure-secondary-border-color-hover'],
        'color': Variables['$btn-pure-secondary-color-hover']
      },
      /*尺寸*/
      'large': {
        'border-radius': '3px',
        'padding': '0 16px',
        'height': '40px',
        'line-height': '38px',
        'font-size': '16px',
        'border-width': '1px'
      },
      'medium': {
        'border-radius': '3px',
        'padding': '0 12px',
        'height': '28px',
        'line-height': '26px',
        'font-size': '12px',
        'border-width': '1px'
      },
      'small': {
        'border-radius': '3px',
        'padding': '0 8px',
        'height': '20px',
        'line-height': '18px',
        'font-size': '12px',
        'border-width': '1px'
      },
      /*类型*/
      /*文字类按钮*/
      'text-size': {
        'border-radius': '0',
        'padding': '0',
        'border-width': '0',
        'cursor': 'normal'
      },
      'text-normal': {
        'color': '#5584ff'
      },
      'text-primary': {
        'color': '#5584ff'
      },
      'text-secondary': {
        'color': '#666'
      },
      'warning-normal': {
        'background-color': '#fff',
        'border-color': '#ff3000',
        'color': '#ff3000'
      },
      'warning-primary': {
        'background-color': '#ff3000',
        'border-color': '#ff3000',
        'color': '#fff'
      },
      'disabled': {
        'cursor': 'not-allowed',
        'background-color': '#f7f8fa',
        'border-color': '#e6e7eb',
        'color': '#ccc'
      }
    }
  };
}

module.exports = styleProvider;