521 lines
18 KiB
JavaScript
Executable File
521 lines
18 KiB
JavaScript
Executable File
var merge = require('merge');
|
|
|
|
module.exports = {
|
|
switch: function(options) {
|
|
var defaultOptions = {
|
|
checkedColor: 'primary'
|
|
};
|
|
|
|
return function({ config, addComponents }) {
|
|
var defaultOptions = {
|
|
bulletColor: config('colors.primary')
|
|
};
|
|
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options = merge(defaultOptions, options);
|
|
|
|
var c = {
|
|
'.fancy-switch': {
|
|
position: 'relative',
|
|
padding: '20px 0 20px 40px',
|
|
textAlign: 'left',
|
|
display: 'inline-block',
|
|
'span': {
|
|
position: 'relative',
|
|
cursor: 'pointer'
|
|
},
|
|
'input[type="checkbox"] + span:before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '-39px',
|
|
marginTop: '-10px',
|
|
width: '30px',
|
|
height: '20px',
|
|
background: '#f7f7f7',
|
|
borderRadius: '10px',
|
|
boxShadow: '0 0 1px grey'
|
|
},
|
|
|
|
'input[type="checkbox"]': {
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '-9999px',
|
|
visibility: 'hidden'
|
|
},
|
|
|
|
'input[type="checkbox"] + span:after': {
|
|
position: 'absolute',
|
|
content: '""',
|
|
top: '50%',
|
|
left: '-37px',
|
|
width: '16px',
|
|
height: '16px',
|
|
marginTop: '-8px',
|
|
opacity: '0.5',
|
|
zIndex: '10',
|
|
cursor: 'pointer',
|
|
borderRadius: '8px',
|
|
transition: 'left 0.15s ease-in-out, opacity 0.15s ease-in-out',
|
|
background: options.bulletColor
|
|
},
|
|
|
|
|
|
'input[type="checkbox"]:disabled:checked + span:after': {
|
|
opacity: 0.5
|
|
},
|
|
|
|
'input[type="checkbox"]:disabled + span:before': {
|
|
opacity: 0.5
|
|
},
|
|
|
|
'input[type="checkbox"]:checked + span:after': {
|
|
opacity: 1,
|
|
left: '-28px',
|
|
transition: 'left 0.15s ease-in-out, opacity 0.15s ease-in-out'
|
|
}
|
|
}
|
|
};
|
|
|
|
addComponents(c, {
|
|
respectPrefix: false
|
|
});
|
|
};
|
|
},
|
|
|
|
checkbox: function(options) {
|
|
var defaultOptions = {
|
|
checkedColor: 'primary'
|
|
};
|
|
|
|
return function({ config, addComponents }) {
|
|
var defaultOptions = {
|
|
bulletColor: config('colors.primary')
|
|
};
|
|
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options = merge(defaultOptions, options);
|
|
|
|
var c = {
|
|
'.fancy-checkbox': {
|
|
position: 'relative',
|
|
padding: '20px 0 20px 40px',
|
|
textAlign: 'left',
|
|
display: 'inline-block',
|
|
'span': {
|
|
position: 'relative',
|
|
cursor: 'pointer'
|
|
},
|
|
'input[type="checkbox"] + span:before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '-39px',
|
|
marginTop: '-15px',
|
|
width: '30px',
|
|
height: '30px',
|
|
background: '#f7f7f7',
|
|
borderRadius: '2px',
|
|
boxShadow: '0 0 1px grey'
|
|
},
|
|
|
|
'input[type="checkbox"]': {
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '-9999px',
|
|
visibility: 'hidden'
|
|
},
|
|
|
|
'input[type="checkbox"] + span:after': {
|
|
position: 'absolute',
|
|
content: '""',
|
|
top: '50%',
|
|
left: '-34px',
|
|
width: '20px',
|
|
height: '20px',
|
|
marginTop: '-10px',
|
|
opacity: '0',
|
|
zIndex: '9',
|
|
cursor: 'pointer',
|
|
borderRadius: '2px',
|
|
transform: 'translate3d(-40px, 0, 0) scale(0.5)',
|
|
transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out',
|
|
background: options.bulletColor
|
|
},
|
|
|
|
|
|
'input[type="checkbox"]:disabled:checked + span:after': {
|
|
opacity: 0.5
|
|
},
|
|
|
|
'input[type="checkbox"]:disabled + span:before': {
|
|
opacity: 0.5
|
|
},
|
|
|
|
'input[type="checkbox"]:checked + span:after': {
|
|
opacity: 1,
|
|
transform: 'translate3d(0, 0, 0) scale(1)',
|
|
transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out'
|
|
}
|
|
}
|
|
};
|
|
|
|
addComponents(c, {
|
|
respectPrefix: false
|
|
});
|
|
};
|
|
},
|
|
|
|
radio: function(options) {
|
|
return function ({ addComponents, config }) {
|
|
var defaultOptions = {
|
|
bulletColor: config('colors.primary')
|
|
};
|
|
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options = merge(defaultOptions, options);
|
|
|
|
addComponents({
|
|
'.fancy-radio': {
|
|
position: 'relative',
|
|
padding: '20px 0 20px 40px',
|
|
textAlign: 'left',
|
|
display: 'inline-block',
|
|
'span': {
|
|
position: 'relative',
|
|
cursor: 'pointer'
|
|
},
|
|
'input[type="radio"] + span:before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '-40px',
|
|
marginTop: '-15px',
|
|
width: '30px',
|
|
height: '30px',
|
|
background: '#f7f7f7',
|
|
borderRadius: '50%',
|
|
boxShadow: '0 0 1px grey'
|
|
},
|
|
|
|
'input[type="radio"]': {
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '-9999px',
|
|
visibility: 'hidden'
|
|
},
|
|
|
|
'input[type="radio"] + span:after': {
|
|
position: 'absolute',
|
|
content: '""',
|
|
top: '50%',
|
|
left: '-35px',
|
|
width: '20px',
|
|
height: '20px',
|
|
marginTop: '-10px',
|
|
opacity: '0',
|
|
zIndex: '10',
|
|
cursor: 'pointer',
|
|
borderRadius: '50%',
|
|
transform: 'translate3d(-40px, 0, 0) scale(0.5)',
|
|
transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out',
|
|
background: options.bulletColor
|
|
},
|
|
|
|
'input[type="radio"]:checked + span:after': {
|
|
opacity: 1,
|
|
transform: 'translate3d(0, 0, 0) scale(1)',
|
|
transition: 'transform 0.15s ease-in-out, opacity 0.15s ease-in-out'
|
|
}
|
|
}
|
|
}, {
|
|
respectPrefix: false
|
|
});
|
|
};
|
|
},
|
|
|
|
tooltip: function(options) {
|
|
return function({ addComponents, config }) {
|
|
var t = {};
|
|
var colors = config('colors');
|
|
var placements = [
|
|
{ position: 'left', borderAt: 'right' },
|
|
{ position: 'right', borderAt: 'left' },
|
|
{ position: 'top', borderAt: 'bottom' },
|
|
{ position: 'bottom', borderAt: 'top' }
|
|
];
|
|
|
|
t['.tooltip'] = {
|
|
'.tooltip-arrow': {
|
|
borderWidth: '10px',
|
|
borderTopColor: 'transparent',
|
|
borderLeftColor: 'transparent',
|
|
borderRightColor: 'transparent',
|
|
borderBottomColor: 'transparent',
|
|
content: '""',
|
|
position: 'absolute'
|
|
}
|
|
}
|
|
|
|
Object.keys(colors).forEach((color) => {
|
|
placements.forEach((placement) => {
|
|
var arrow = {};
|
|
arrow[placement.borderAt] = '-20px';
|
|
arrow[`border-${placement.position}-color`] = config('colors.'+color);
|
|
t[`.tooltip.tooltip-${color}[x-placement="${placement.position}"]`] = {
|
|
'.tooltip-arrow': arrow
|
|
}
|
|
});
|
|
|
|
t['.tooltip.tooltip-'+color] = {
|
|
background: config('colors.'+color)
|
|
};
|
|
});
|
|
|
|
addComponents(t);
|
|
}
|
|
},
|
|
|
|
range: function(options) {
|
|
return function({ addComponents, config }) {
|
|
// Base Colors
|
|
options = merge({
|
|
'shade10': '#2c3e50',
|
|
'shade1': '#d7dcdf',
|
|
'shade0': '#fff',
|
|
'teal': '#1abc9c',
|
|
'width': '100%',
|
|
'handleColor': '#2c3e50',
|
|
'handleColorHover': '#1abc9c',
|
|
'handleSize': '20px',
|
|
'trackColor': '#d7dcdf',
|
|
'trackHeight': '10px',
|
|
'labelColor': '#2c3e50',
|
|
'labelWidth': 80
|
|
}, options);
|
|
|
|
var c = {
|
|
'.range-slider': {
|
|
'width': options.width
|
|
},
|
|
|
|
'.range-slider__range': {
|
|
'-webkitAppearance': 'none',
|
|
'width': 'calc(100% - ' + (options.labelWidth + 13) + 'px)',
|
|
'height': options.trackHeight,
|
|
'borderRadius': '5px',
|
|
'background': options.trackColor,
|
|
'outline': 'none',
|
|
'padding': 0,
|
|
'margin': 0,
|
|
// Range Handle
|
|
'&::-webkit-slider-thumb': {
|
|
'appearance': 'none',
|
|
'width': options.handleSize,
|
|
'height': options.handleSize,
|
|
'borderRadius': '50%',
|
|
'background': options.handleColor,
|
|
'cursor': 'pointer',
|
|
'transition': 'background 0.15s ease-in-out',
|
|
'&:hover': {
|
|
background: options.handleColorHover
|
|
}
|
|
},
|
|
'&:active::-webkit-slider-thumb': {
|
|
background: options.handleColorHover
|
|
},
|
|
'&::-moz-range-thumb': {
|
|
'width': options.handleSize,
|
|
'height': options.handleSize,
|
|
'border': 0,
|
|
'borderRadius': '50%',
|
|
'background': options.handleColor,
|
|
'cursor': 'pointer',
|
|
'transition': 'background 0.15s ease-in-out',
|
|
'&:hover': {
|
|
background: options.handleColorHover
|
|
}
|
|
},
|
|
'&:active::-moz-range-thumb': {
|
|
background: options.handleColorHover
|
|
},
|
|
'&:focus': {
|
|
'&::-webkit-slider-thumb': {
|
|
boxShadow: '0 0 0 3px ' + options.shade0 + ', 0 0 0 6px ' + options.teal
|
|
}
|
|
}
|
|
},
|
|
'.range-slider__value': {
|
|
'display': 'inline-block',
|
|
'position': 'relative',
|
|
'width': options.labelWidth,
|
|
'color': options.shade0,
|
|
'lineHeight': '20px',
|
|
textAlign: 'center',
|
|
borderRadius: '3px',
|
|
background: options.labelColor,
|
|
padding: '5px 10px',
|
|
marginLeft: '8px',
|
|
'&:after': {
|
|
position: 'absolute',
|
|
top: '8px',
|
|
left: '-7px',
|
|
width: '0',
|
|
height: '0',
|
|
borderTop: '7px solid transparent',
|
|
borderRight: '7px solid '+options.labelColor,
|
|
borderBottom: '7px solid transparent',
|
|
t: '""',
|
|
}
|
|
},
|
|
'::-moz-range-track': {
|
|
background: options.trackColor,
|
|
border: 0
|
|
},
|
|
'input::-moz-focus-inner, input::-moz-focus-outer': {
|
|
border: 0
|
|
}
|
|
};
|
|
|
|
addComponents(c, {
|
|
respectPrefix: false
|
|
});
|
|
}
|
|
},
|
|
stepper: function(options) {
|
|
return function({ addComponents, config }) {
|
|
options = merge({
|
|
c: {}
|
|
}, options);
|
|
|
|
var c = {
|
|
'ul.stepper': {
|
|
position: 'relative',
|
|
listStyleType: 'none !important',
|
|
paddingLeft: '0 !important',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginLeft: '-20px',
|
|
marginRight: '-20px',
|
|
li: {
|
|
flex: '1 0 0',
|
|
padding: '0 20px',
|
|
position: 'relative',
|
|
'&.done': {
|
|
'a .step-icon': {
|
|
backgroundColor: '#575757 !important',
|
|
},
|
|
'a .label': {
|
|
color: '#575757 !important',
|
|
}
|
|
},
|
|
a: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
textDecoration: 'none',
|
|
color: '#ccc',
|
|
zIndex: '5',
|
|
},
|
|
'a .step-icon': {
|
|
width: '50px',
|
|
height: '50px',
|
|
borderRadius: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '25px',
|
|
color: 'white',
|
|
backgroundColor: '#ccc',
|
|
},
|
|
'a .step-icon svg': {
|
|
fill: 'currentColor',
|
|
width: '25px',
|
|
height: '25px'
|
|
},
|
|
'a .label': {
|
|
fontSize: '1.3em',
|
|
marginTop: '10px',
|
|
},
|
|
'&:not(:first-child):before': {
|
|
position: 'absolute',
|
|
content: '""',
|
|
borderBottom: '#ccc solid 1px',
|
|
zIndex: '3',
|
|
top: '25px',
|
|
width: 'calc((100% - 50px))',
|
|
left: 'calc((100% - 50px) / -2)',
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var colors = config('colors');
|
|
Object.keys(colors).forEach((color) => {
|
|
c['ul.stepper.stepper-'+color] = {
|
|
'li.current .step-icon': {
|
|
background: config('colors.'+color)
|
|
},
|
|
'li.current .step-label': {
|
|
color: config('colors.'+color)
|
|
},
|
|
'li.current:not(:first-child):before, li.done:not(:first-child):before': {
|
|
borderBottomColor: config('colors.'+color)
|
|
}
|
|
}
|
|
});
|
|
|
|
addComponents(merge.recursive(c, options.c), {
|
|
respectPrefix: false
|
|
});
|
|
};
|
|
},
|
|
arrow: function(options) {
|
|
return function({ addComponents, config }) {
|
|
options = merge({
|
|
|
|
}, options);
|
|
|
|
var c = {
|
|
'.arrow-down': {
|
|
'position': 'relative',
|
|
'&:after': {
|
|
'top': '100%',
|
|
'left': '50%',
|
|
'border': 'solid transparent',
|
|
'content': '" "',
|
|
'height': '0',
|
|
'width': '0',
|
|
'position': 'absolute',
|
|
'pointerEvents': 'none',
|
|
'borderWidth': '20px',
|
|
'marginLeft': '-20px'
|
|
}
|
|
}
|
|
};
|
|
var colors = config('colors');
|
|
|
|
Object.keys(colors).forEach((color) => {
|
|
c['.arrow-down.bg-'+color] = {
|
|
'&:after': {
|
|
'borderColor': 'rgba(229, 0, 118, 0)',
|
|
'borderTopColor': config('colors.'+color)
|
|
}
|
|
};
|
|
});
|
|
|
|
addComponents(c);
|
|
}
|
|
}
|
|
};
|