rules: (props) => {
const rule = {};
const holderRule = {};
css(rule)
.setBackgroundColor(props.useBackgroundColor && props.backgroundColor)
.setProperty('borderRadius', props.useCorners && props.corners)
.setBorder(props.useBorder && props.border)
.setBoxShadows(props.shadow)
.when(props.useMaxWidth)
.setProperty('maxWidth', props.maxWidth)
.setProperty('width', '100%')
.setProperty('display', 'inline-block');
css(holderRule)
.setMarginPadding(props.marginPadding)
.setDisplay(props.display)
.setPosition(props.position)
.when(props.useMaxWidth)
.setProperty('textAlign', props.contentHorizontal);
return {
container: rule,
holder: holderRule
};
},
rules: (props) => {
const rules = {
input: {},
holder: {}
};
// input
css(rules.input)
.setPadding(props.marginPadding)
.setBackgroundColor(props.useBackground && props.backgroundColor)
.setColor(props.color)
.setProperty('borderRadius', props.useCorners && props.corners)
.setProperty('fontSize', props.fontSize)
.setProperty('lineHeight', props.lineHeight)
.setProperty('letterSpacing', props.letterSpacing)
.setProperty('textAlign', props.textAlign)
.setBorder(props.useBorder && props.border)
.setPlaceholderColor(props.placeholderColor)
.setProperty('width', props.width === 'max' && props.maxWidth)
.setFont(props.font);
// input on hover
rules.input[':hover'] = css({})
.setProperty('borderColor', props.useBorderColorOvered && getColorString(props.borderColorOvered))
.setColor(props.useColorOvered && props.colorOvered)
.setBackgroundColor(props.useBackgroundColorOvered && props.backgroundColorOvered)
.rules;
// input on focus
rules.input[':focus'] = css({})
.setProperty('borderColor', props.useBorderColorFocused && getColorString(props.borderColorFocused))
.setColor(props.useColorFocused && props.colorFocused)
.setBackgroundColor(props.useBackgroundColorFocused && props.backgroundColorFocused)
.rules;
// holder
css(rules.holder)
.setMargin(props.marginPadding)
.setDisplay(props.display)
.setPosition(props.position)
.setProperty('textAlign', props.align)
.setCustoms(props.custom);
return rules;
}
rules: (props) => {
const root = css({})
.setDisplay(props.display)
.setPosition(props.position)
.setMarginPadding(props.marginPadding)
.setCustoms(props.custom)
.rules;
return {root};
}
rules: (props) => {
const root = css({})
.setDisplay(props.display)
.setPosition(props.position)
.setMarginPadding(props.marginPadding)
.setCustoms(props.custom)
.rules;
const table = css({})
.setProperty('display', 'flex')
.setProperty('flex-flow', 'row wrap')
.setProperty('align-items', 'stretch')
.setProperty('margin', `-${parseFloat(props.spacingRows, 10) / 2}px -${parseFloat(props.spacing, 10) / 2}px`)
.rules;
return {
root,
table
};
}
rules: (props) => {
const rule = {};
const contentRule = {};
css(rule)
.setDisplay(props.display)
.setPosition(props.position)
.setMarginPadding(props.marginPadding)
.setBackgroundColor(props.useBackgroundColor && props.backgroundColor)
.setProperty('height', props.useFixHeight && `${parseInt(props.heightPerc, 10)}vh`);
if (props.useFixHeight) {
css(contentRule)
.setProperty('position', 'relative')
.setProperty('top', props.contentVertical)
.setProperty('transform', `translateY(-${props.contentVertical})`);
}
return {
section: rule,
content: contentRule
};
},
rules: (props) => {
const menuRules = css({})
.setDisplay(props.display)
.setPosition(props.position)
.setMarginPadding(props.marginPadding)
.setProperty('textAlign', props.alignment)
.setCustoms(props.custom)
.rules;
const entryRules = css({})
.setProperty('marginRight', props.distance)
.rules;
const buttonRules = css({':hover': {}})
.setProperty('fontSize', props.fontSize)
.setProperty('lineHeight', props.lineHeight)
.setProperty('letterSpacing', props.letterSpacing)
.setProperty('textDecoration', props.underline && 'underline')
.setColor(props.color)
.setFont(props.font)
.setTextShadows(props.shadow)
.setBorder(props.useBorder && props.border)
.setBackgroundColor(props.useBackground && props.backgroundColor)
.setProperty('borderRadius', props.useCorners && props.corners)
.setProperty('padding', props.usePadding && props.padding)
.rules;
css(buttonRules[':hover'])
.setColor(props.colorOver)
.setBackgroundColor(props.useBackground && props.backgroundColorOver)
.setProperty('borderColor', getColorString(props.borderColorOver));
const submenuRules = css({})
.setBackgroundColor(props.submenuBackgroundColor)
.setProperty('padding', props.submenuPadding)
.setProperty('borderRadius', props.submenuUseCorners && props.submenuCorners)
.setBorder(props.submenuUseBorder && props.submenuBorder)
.setProperty('transform', `translateY(${props.submenuVertical})`)
.when(props.submenuAlignment === 'left')
.setProperty('left', props.submenuHorizontal)
.when(props.submenuAlignment === 'right')
.setProperty('left', 'auto')
.setProperty('right', -props.submenuHorizontal)
.when(props.submenuAlignment === 'center')
.setProperty('left', '50%')
.setProperty('transform', `translateX(-50%) translateY(${props.submenuVertical})`)
.rules;
const submenuButtonRules = css({':hover': {}})
.setProperty('fontSize', props.submenuButtonsFontSize)
.setProperty('lineHeight', props.submenuButtonsLineHeight)
.setProperty('letterSpacing', props.submenuButtonsLetterSpacing)
.setProperty('textDecoration', props.submenuButtonsUnderline && 'underline')
.setColor(props.submenuButtonsColor)
.setFont(props.submenuButtonsFont)
.setTextShadows(props.submenuButtonsShadow)
.setBorder(props.submenuButtonsUseBorder && props.submenuButtonsBorder)
.setBackgroundColor(props.submenuButtonsUseBackground && props.submenuButtonsBackgroundColor)
.setProperty('borderRadius', props.submenuButtonsUseCorners && props.submenuButtonsCorners)
.setProperty('padding', props.submenuButtonsUsePadding && props.submenuButtonsPadding)
.setProperty('textAlign', props.submenuButtonsAlignment)
.rules;
css(submenuButtonRules[':hover'])
.setColor(props.submenuButtonsColorOver)
.setBackgroundColor(props.submenuButtonsUseBackground && props.submenuButtonsBackgroundColorOver)
.setProperty('borderColor', getColorString(props.submenuButtonsBorderColorOver));
return {
menu: menuRules,
entry: entryRules,
button: buttonRules,
submenu: submenuRules,
submenuButton: submenuButtonRules
};
}