UNPKG

weex-nuke

Version:

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

181 lines (170 loc) 6.07 kB
import { rem, layout } from 'nuke-helper'; import VariableMix from './variable'; const { caculateRemToPx } = rem; const { alignCenter } = layout; function StyleMix(theme = {}) { const Variables = VariableMix(theme); return { Radio: { 'touch-small': { width: Variables['small-touch-width'], height: Variables['small-touch-height'], justifyContent: 'center', alignItems: 'center', }, 'touch-medium': { width: Variables['medium-touch-width'], height: Variables['medium-touch-height'], justifyContent: 'center', alignItems: 'center', }, 'wrap-small': { justifyContent: 'center', alignItems: 'center', borderStyle: Variables['border-style'], width: Variables['small-size'], height: Variables['small-size'], borderRadius: Variables['border-radius'], }, 'wrap-medium': { borderStyle: Variables['border-style'], width: Variables['medium-size'], height: Variables['medium-size'], borderRadius: Variables['border-radius'], justifyContent: 'center', alignItems: 'center', }, 'wrap-normal': { borderWidth: Variables['normal-border-width'], borderColor: Variables['normal-border-color'], backgroundColor: Variables['normal-bg-color'], }, 'wrap-dot': { borderWidth: Variables['dot-border-width'], borderColor: Variables['dot-border-color'], backgroundColor: Variables['dot-bg-color'], }, 'wrap-empty': { borderWidth: Variables['empty-border-width'], borderColor: Variables['empty-border-color'], backgroundColor: Variables['empty-bg-color'], }, 'wrap-list': { borderWidth: Variables['list-border-width'], borderColor: Variables['list-border-color'], backgroundColor: Variables['list-bg-color'], }, 'wrap-normal-checked': { backgroundColor: Variables['normal-bg-color-selected'], borderColor: Variables['normal-border-color-selected'], }, 'wrap-normal-disabled': { borderColor: Variables['normal-border-color-disabled'], backgroundColor: Variables['normal-bg-color-disabled'], color: Variables['normal-icon-color-disabled'], }, 'wrap-normal-checked-disabled': { borderColor: Variables['normal-border-color-selected-disabled'], backgroundColor: Variables['normal-bg-color-selected-disabled'], }, 'normal-inner-checked': { color: Variables['normal-icon-color-selected'], // borderColor: Variables[`normal-border-color-selected`], // backgroundColor: Variables[`normal-bg-color-selected`], }, 'normal-inner-disabled': { color: Variables['normal-icon-color-disabled'], // borderColor: Variables[`normal-border-color-disabled`], // backgroundColor: Variables[`normal-bg-color-disabled`], }, 'wrap-empty-checked': { backgroundColor: Variables['empty-bg-color-selected'], borderColor: Variables['empty-border-color-selected'], }, 'wrap-empty-disabled': { backgroundColor: Variables['empty-bg-color-disabled'], borderColor: Variables['empty-border-color-disabled'], }, 'wrap-empty-checked-disabled': { backgroundColor: Variables['empty-bg-color-selected-disabled'], borderColor: Variables['empty-border-color-selected-disabled'], }, 'empty-inner-checked': { color: Variables['empty-color-selected'], }, 'empty-inner-disabled': { color: Variables['empty-color-disabled'], }, 'wrap-list-checked': { borderColor: Variables['list-border-color'], backgroundColor: Variables['list-bg-color-selected'], }, 'wrap-list-disabled': { borderColor: Variables['list-border-color-disabled'], backgroundColor: 'transparent', }, 'wrap-list-checked-disabled': { borderColor: Variables['list-border-color-disabled'], backgroundColor: 'transparent', }, 'list-inner-checked': { color: Variables['list-icon-color-selected'], }, 'list-inner-disabled': { color: Variables['list-border-color-disabled'], }, 'wrap-dot-checked': { borderWidth: 4, borderStyle: Variables['dot-border-style'], borderColor: Variables['dot-selected-border-color'], backgroundColor: Variables['dot-bg-color'], }, 'wrap-dot-disabled': { borderColor: Variables['dot-border-color-disabled'], backgroundColor: Variables['dot-bg-color-disabled'], }, 'wrap-dot-checked-disabled': { color: Variables['dot-border-color-disabled'], borderColor: Variables['dot-border-color-disabled'], backgroundColor: Variables['dot-bg-color-selected-disabled'], }, 'dot-inner': { backgroundColor: Variables['dot-bg-color-selected'], borderRadius: Variables['border-radius'], }, 'dot-inner-small': { width: Variables['dot-small-size'], height: Variables['dot-small-size'], }, 'dot-inner-medium': { width: caculateRemToPx(Variables['dot-medium-size']), height: caculateRemToPx(Variables['dot-medium-size']), }, 'dot-inner-disabled': { borderColor: Variables['dot-border-color-disabled'], backgroundColor: Variables['dot-point-bg-color-disabled'], }, 'icon-small': { fontSize: Variables['icon-small'], }, 'icon-medium': { fontSize: Variables['icon-medium'], }, }, RadioGroup: { group: { flexDirection: 'row', alignItems: 'center', height: Variables['group-item-height'], width: Variables['group-item-width'], }, 'group-small-text': { marginLeft: 5, }, 'group-medium-text': { marginLeft: 5, }, }, }; } export default StyleMix;