weex-nuke/lib/WebPicker/styles/variable.js

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

'use strict';

function VariableMix(theme) {
  var core = theme.Core;
  var ComponentCustomStyle = theme.Picker;
  /**
   * 选择器
   * @namespace component
   * @property module web-picker
   * @property tag WebPicker
   * @property category component
   */
  var pickerVariables = {
    /**
     * height
     * @property namespace size/toolbar
     */
    'toolbar-height': core['s-14'],
    /**
     * padding(l, r)
     * @property namespace size/toolbar
     */
    'toolbar-padding-lr': core['s-3'],
    /**
     * text
     * @property namespace size/title
     */
    'toolbar-title-font-size': core['font-size-body-2'],
    /**
     * text
     * @property namespace size/button
     */
    'toolbar-button-font-size': core['font-size-subhead'],
    /**
     * border-width
     * @property namespace size/toolbar
     */
    'toolbar-line-width': core['line-1'],
    /**
     * height
     * @property namespace size/item
     */
    'item-height': core['s-11'],
    /**
     * top
     * @property namespace size/indicator
     */
    'indicator-top': 176,
    /**
     * top
     * @property namespace size/mask
     */
    'mask-height': 176,
    /**
     * text-current
     * @property namespace size/item
     */
    'item-font-size': core['font-size-body-2'],
    /**
     * text-others
     * @property namespace size/item
     */
    'indicator-font-size': core['font-size-body-2'],
    /**
     * background
     * @property namespace statement
     */
    'background-color': core['color-white'],

    /**
     * title
     * @property namespace statement
     */
    'toolbar-title-color': core['color-text1-3'],
    /**
     * button(l)
     * @property namespace statement
     */
    'toolbar-cancel-color': core['color-brand1-6'],
    /**
     * button(r)
     * @property namespace statement
     */
    'toolbar-done-color': core['color-brand1-6'],

    /**
     * toolbar-background
     * @property namespace statement
     */
    'toolbar-background-color': core['color-white'],
    /**
     * item-current
     * @property namespace statement
     */
    'indicator-text-color': core['color-black'],
    /**
     * item-others
     * @property namespace statement
     */
    'item-text-color': core['color-black'],
    /**
     * item-border
     * @property namespace statement
     */
    'indicator-line-color': core['color-line1-3'],
    /**
     * toolbar-border
     * @property namespace statement
     */
    'toolbar-line-color': core['color-fill1-3'],
    /**
     * font-current
     * @property namespace statement
     */
    'indicator-font-weight': core['font-weight-2'],
    /**
     * toolbar-background
     * @property namespace statement
     */
    'toolbar-line-style': core['line-solid'],
    /**
     * height
     * @property namespace size/bounding
     */
    height: 440,
    /**
     * content-padding(l,r)
     * @property namespace size/bounding
     */
    'content-padding-lr': core['s-3'],
    /**
     * item-border
     * @property namespace statement
     */
    'item-line-color': core['color-line1-3'],
    /**
     * button-background
     * @property namespace statement
     */
    'bottom-button-bg-color': core['color-brand1-6'],
    /**
     * button-text
     * @property namespace statement
     */
    'bottom-button-color': core['color-white'],
    /**
     * button-height
     * @property namespace size
     */
    'bottom-button-height': core['s-12'],
    /**
     * button-text
     * @property namespace statement
     */
    'bottom-button-font-size': core['font-size-subhead']
  };
  pickerVariables['mask-background-size'] = '100% ' + pickerVariables['indicator-top'] + 'rem';
  var variables = Object.assign(pickerVariables, ComponentCustomStyle);
  return variables;
}
module.exports = VariableMix;