weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
128 lines (122 loc) • 4.89 kB
JavaScript
import { hex } from 'nuke-helper';
import VariableMix from './variable';
const { rgba } = hex;
function StyleMix(theme = {}) {
const Variables = VariableMix(theme);
return {
Switch: {
wrap: {
width: Variables['wrap-width-android'],
height: Variables['wrap-height-android'],
borderRadius: Variables['wrap-border-radius'],
position: 'relative',
display: 'inline-block',
margin: Variables['wrap-margin-android'],
padding: Variables['wrap-padding-android'],
cursor: 'default', // pointer will cause a grey background color on chrome
verticalAlign: 'middle',
borderWidth: Variables['wrap-border-width-android'],
WebkitUserSelect: 'none',
WebkitBoxSizing: 'content-box',
WebkitBackfaceVisibility: 'hidden',
},
checkedWrap: {
borderColor: Variables['c-border-color-android'],
backgroundColor: Variables['c-bg-color-android'],
WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s',
},
uncheckedWrap: {
borderColor: Variables['unc-border-color'], // '#dfdfdf',
backgroundColor: Variables['unc-bg-color-android'],
WebkitTransition: 'border 0.2s, box-shadow 0.2s',
},
disabledWrap: {
cursor: 'not-allowed',
boxShadow: 'none',
},
disabledCheckedWrap: {
borderColor: rgba(Variables['dis-c-border-color-android'], 0.5),
backgroundColor: rgba(Variables['dis-c-bg-color-android'], 0.26),
},
disabledUnCheckedWrap: {
backgroundColor: rgba(Variables['dis-unc-bg-color-android'], 0.26),
// borderColor: Variables['unc-border-color']
},
dot: {
position: 'absolute',
top: Variables['dot-top-android'],
left: Variables['dot-left-android'],
width: Variables['dot-size-android'], // 60,
height: Variables['dot-size-android'], // 60,
backgroundColor: Variables['dot-bg-color-android'],
borderRadius: Variables['dot-size-android'],
boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
WebkitTransition: '-webkit-transform 0.2s ease-in',
},
checkedDot: {
WebkitTransform: `translateX(${Variables['dot-transform-android']}rem)`, // should with rem unit that the value is string type
backgroundColor: Variables['dot-checked-bg-color-android'],
},
uncheckedDot: {
WebkitTransform: 'translateX(0)',
},
disabledDot: {
backgroundColor: rgba(Variables['dot-disabled-bg-color-android'], 0.5),
},
wrapIOS: {
width: Variables['wrap-width-ios'],
height: Variables['wrap-height-ios'],
borderRadius: Variables['wrap-border-radius'],
position: 'relative',
display: 'inline-block',
margin: Variables['wrap-margin-ios'],
padding: Variables['wrap-padding-ios'],
cursor: 'default', // pointer will cause a grey background color on chrome
verticalAlign: 'middle',
borderWidth: Variables['wrap-border-width-ios'],
borderStyle: 'solid',
// borderColor: Variables['wrap-border-color'],// todo
WebkitUserSelect: 'none',
WebkitBoxSizing: 'content-box',
WebkitBackfaceVisibility: 'hidden',
},
checkedWrapIOS: {
borderColor: Variables['c-border-color-ios'],
backgroundColor: Variables['c-bg-color-ios'],
WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s',
},
uncheckedWrapIOS: {
borderColor: Variables['unc-border-color'], // '#dfdfdf',
backgroundColor: Variables['unc-bg-color-ios'],
WebkitTransition: 'border 0.2s, box-shadow 0.2s',
},
disabledCheckedWrapIOS: {
borderColor: rgba(Variables['dis-c-border-color-ios'], 0.5),
backgroundColor: rgba(Variables['dis-c-bg-color-ios'], 0.5),
},
disabledUnCheckedWrapIOS: {
backgroundColor: Variables['dis-unc-bg-color-ios'],
// borderColor: Variables['unc-border-color']
},
dotIOS: {
position: 'absolute',
top: Variables['dot-top-ios'],
left: Variables['dot-left-ios'],
width: Variables['dot-size-ios'], // 60,
height: Variables['dot-size-ios'], // 60,
backgroundColor: Variables['dot-bg-color-ios'],
borderRadius: Variables['dot-size-ios'],
boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
WebkitTransition: '-webkit-transform 0.2s ease-in',
},
checkedDotIOS: {
WebkitTransform: `translateX(${Variables['dot-transform-ios']}rem)`, // should with rem unit that the value is string type
backgroundColor: Variables['dot-checked-bg-color-ios'],
},
disabledDotIOS: {
backgroundColor: Variables['dot-disabled-bg-color-ios'],
},
},
};
}
export default StyleMix;