weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
306 lines (303 loc) • 6.62 kB
JavaScript
'use strict';
function VariableMix(theme) {
const core = theme.Core;
const ComponentCustomStyle = theme.Input || {};
/**
* 输入框
* @namespace component
* @property module input
* @property tag Input
* @property category component
*/
const inputVariables = {
/**
* background
* @property namespace statement
*/
'bg-color': core['color-white'],
/**
* background
* @property namespace statement/disabled
*/
'disabled-bg-color': core['color-fill1-3'],
/**
* border
* @property namespace statement/disabled
*/
'disabled-line-color': core['color-line1-1'],
/**
* text
* @property namespace statement/disabled
*/
'disabled-color': core['color-text1-1'],
/**
* border
* @property namespace statement
*/
'border-color': core['color-line1-2'],
/**
* border-style
* @property namespace statement
*/
'border-style': core['line-solid'],
/**
* border
* @property namespace statement
*/
'line-width': core['line-1'],
/**
* height
* @property namespace size/bouncing
*/
'single-height': core['s-10'],
/**
* text
* @property namespace size/text
*/
'single-font-size': core['font-size-body-3'],
/**
* text
* @property namespace statement
*/
'single-readonly-color': core['color-text1-2'],
/**
* text
* @property namespace statement/placeholder
*/
'placeholder-color': core['color-text1-2'],
/**
* text
* @property namespace size/placeholder
*/
'placeholder-font-size': core['font-size-subhead'],
/**
* height
* @property namespace size/placeholder
*/
'placeholder-height': core['s-6'],
/**
* min-width
* @property namespace size/placeholder
*/
'placeholder-min-width': 200,
/**
* top
* @property namespace size/placeholder
*/
'placeholder-top': 10,
/**
* padding(l, r)
* @property namespace size/bouncing
*/
'single-padding-left-right': 20,
/**
* corner
* @property namespace statement
*/
'single-radius': core['corner-1'],
/**
* text
* @property namespace statement
*/
'single-color': core['color-text1-4'],
/**
* border
* @property namespace statement
*/
'single-line-color': core['color-line1-2'],
/**
* height
* @property namespace size/bounding
*/
'multiple-height': core['s-20'],
/**
* text
* @property namespace size/text
*/
'multiple-font-size': core['font-size-body-3'],
/**
* padding
* @property namespace size/bounding
*/
'multiple-inset-padding': core['s-1'],
/**
* text
* @property namespace statement
*/
'multiple-inset-color': core['color-text1-4'],
/**
* padding(l, r)
* @property namespace size/bouncing
*/
'multiple-padding': core['s-1'],
/**
* corner
* @property namespace statement
*/
'multiple-radius': core['corner-0'],
/**
* text
* @property namespace statement
*/
'multiple-color': core['color-text1-4'],
/**
* border
* @property namespace statement
*/
'multiple-border-color': core['color-line1-2'],
/**
* bottom
* @property namespace size/count
*/
'single-count-bottom': 14,
/**
* right
* @property namespace size/count
*/
'single-count-right': 10,
/**
* min-width
* @property namespace size/count
*/
'single-count-min-width': 200,
/**
* text
* @property namespace statement/count
*/
'count-color': core['color-text1-1'],
/**
* text
* @property namespace statement/count
*/
'count-font-size': core['font-size-caption'],
/**
* text
* @property namespace statement/count
*/
'count-error-color': core['color-error-3'],
/**
* bottom
* @property namespace size/count
*/
'multiple-count-bottom': 16,
/**
* right
* @property namespace size/count
*/
'multiple-count-right': 10,
/**
* min-width
* @property namespace size/count
*/
'multiple-count-min-width': 200,
/**
* height
* @property namespace size/error
*/
'error-height': core['s-6'],
/**
* text
* @property namespace statement/error
*/
'error-text-color': core['color-error-3'],
/**
* lineHeight
* @property namespace size/error
*/
'error-text-line-height': core['s-6'],
/**
* text
* @property namespace size/error
*/
'error-text-font-size': core['font-size-caption'],
/**
* padding(t)
* @property namespace size/error
*/
'error-text-padding-top': 6,
/**
* border
* @property namespace statement/error
*/
'error-border-color': core['color-error-3'],
/**
* border
* @property namespace statement/focus
*/
'focus-border-color': core['color-brand1-6'],
/**
* font-size
* @property namespace statement/clear
*/
'clear-font-size': 48,
/**
* color
* @property namespace statement/clear
*/
'clear-color': core['color-text1-1'],
/**
* width
* @property namespace size/clear
*/
'clear-width': 50,
/**
* height
* @property namespace size/clear
*/
'clear-height': 50,
/**
* top
* @property namespace size/clear
*/
'clear-top': 16,
/**
* right
* @property namespace size/clear
*/
'clear-right': 20,
/**
* width
* @property namespace size/icon
*/
'icon-width': 34,
/**
* height
* @property namespace size/icon
*/
'icon-height': 34,
/**
* top
* @property namespace size/icon
*/
'icon-top': 26,
/**
* right
* @property namespace size/icon
*/
'icon-right': 20,
/**
* width
* @property namespace size/warning
*/
'warning-width': 38,
/**
* height
* @property namespace size/warning
*/
'warning-height': 38,
/**
* bottom
* @property namespace size/warning
*/
'warning-bottom': 6,
/**
* right
* @property namespace size/warning
*/
'warning-right': 4,
};
// should alway use var statement to carray a assigngg
const variable = Object.assign(inputVariables, ComponentCustomStyle);
return variable;
}
module.exports = VariableMix;