weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
181 lines (170 loc) • 6.07 kB
JavaScript
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;