Created
December 23, 2015 10:57
-
-
Save kitze/8388d27a48271e4a5dce to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import variables from './variables.config'; | |
| import Color from 'color'; | |
| const debuggingColors = []; | |
| const randomColor = () => { | |
| return '#' + (Math.random() * 0xFFFFFF << 0).toString(16); | |
| }; | |
| const getColor = (color) => { | |
| if (color === 'transparent') { | |
| return Color('white').alpha(0).rgbString(); | |
| } | |
| return Color(color).hexString(); | |
| }; | |
| const toPx = (size) => { | |
| if (size instanceof String) { | |
| return string; | |
| } | |
| return `${size}px`; | |
| } | |
| const mixins = { | |
| unstyle: { | |
| input: { | |
| border: 0, | |
| outline: 'none' | |
| }, | |
| link: { | |
| textDecoration: 'none', | |
| color: getColor('black') | |
| } | |
| }, | |
| stretch: { | |
| width: '100%', | |
| height: '100%' | |
| }, | |
| debug: function (color, borderWidth = 1, background = false) { | |
| debuggingColors.push(color); | |
| color = color || randomColor(); | |
| var backgroundStyle = background === false ? {} : { | |
| backgroundColor: color, | |
| opacity: background === true ? 1 : background | |
| }; | |
| return variables.debugMode && { | |
| border: `${borderWidth}px solid ${color}`, | |
| ...backgroundStyle | |
| } | |
| }, | |
| fontSizeHeight: function (value) { | |
| return { | |
| fontSize: value, | |
| lineHeight: value | |
| } | |
| }, | |
| padding: { | |
| horizontal: function (value) { | |
| return { | |
| paddingLeft: value, | |
| paddingRight: value | |
| } | |
| }, | |
| vertical: function (value) { | |
| return { | |
| paddingTop: value, | |
| paddingBottom: value | |
| } | |
| } | |
| }, | |
| margin: { | |
| horizontal: function (value) { | |
| return { | |
| marginLeft: value, | |
| marginRight: value | |
| } | |
| }, | |
| vertical: function (value) { | |
| return { | |
| marginTop: value, | |
| marginBottom: value | |
| } | |
| } | |
| }, | |
| darken: function (color, amount) { | |
| return Color(color).darken(amount).hexString() | |
| }, | |
| getColor: getColor, | |
| hoverAndClick: function (color) { | |
| return { | |
| 'color': this.getColor(color), | |
| ':hover': { | |
| 'color': this.darken(color, 10) | |
| } | |
| } | |
| }, | |
| insideBorder: { | |
| bottom: function (size, color) { | |
| return { | |
| boxShadow: `inset 0px -${size}px 0px ${color}` | |
| } | |
| } | |
| }, | |
| size: function (size) { | |
| return { | |
| width: size, | |
| height: size | |
| } | |
| }, | |
| maxSize: function (size) { | |
| return { | |
| maxWidth: size, | |
| maxHeight: size | |
| } | |
| }, | |
| transparentColor: function (color, alpha) { | |
| return Color(color).alpha(alpha).rgbString() | |
| }, | |
| gradients: { | |
| topToBottom: function (from, to) { | |
| return { | |
| background: `linear-gradient(to bottom, ${getColor(from)}, ${getColor(to)})` | |
| } | |
| } | |
| }, | |
| circle: function (size) { | |
| size = toPx(size); | |
| return { | |
| width: size, | |
| height: size, | |
| minWidth: size, | |
| minHeight: size, | |
| lineHeight: size, | |
| borderRadius: '100%', | |
| textAlign: 'center', | |
| display: 'flex', | |
| flexDirection: 'row', | |
| justifyContent: 'center', | |
| alignItems: 'center' | |
| } | |
| }, | |
| absolute: { | |
| full: { | |
| position: 'absolute', | |
| left: 0, | |
| right: 0, | |
| top: 0, | |
| bottom: 0 | |
| } | |
| }, | |
| backgroundImg: function (url, cover) { | |
| return { | |
| backgroundImage: `url("${url}")`, | |
| ... cover === true && {backgroundSize: 'cover'} | |
| } | |
| }, | |
| flexGrid: function (cols) { | |
| return { | |
| flex: `0 0 ${100 / cols}%`, | |
| } | |
| }, | |
| maxHeight: function(height){ | |
| return { | |
| height, | |
| maxHeight: height | |
| } | |
| } | |
| }; | |
| export default mixins; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment