Created
September 25, 2017 08:22
-
-
Save pentaphobe/9ed2193c79d39c5b5f1d1a7ea4809e50 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
| 'use strict'; | |
| var _templateObject = _taggedTemplateLiteral(['\n @media screen and (min-width: 980px){\n ', '\n }\n '], ['\n @media screen and (min-width: 980px){\n ', '\n }\n ']), | |
| _templateObject2 = _taggedTemplateLiteral(['\n @media screen and (min-width: 768px) {\n ', '\n }\n '], ['\n @media screen and (min-width: 768px) {\n ', '\n }\n ']), | |
| _templateObject3 = _taggedTemplateLiteral(['\n @media screen and (min-width:480px) {\n ', '\n }\n '], ['\n @media screen and (min-width:480px) {\n ', '\n }\n ']), | |
| _templateObject4 = _taggedTemplateLiteral(['\n *, ::after, ::before {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: \'myriad-pro\', sans-serif;\n color: ', ';\n -webkit-font-smoothing: antialiased;\n min-width: 320px;\n }\n\n a {\n color: ', ';\n text-decoration: none;\n\n &:hover,\n &:focus {\n text-decoration: underline;\n }\n }\n'], ['\n *, ::after, ::before {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: \'myriad-pro\', sans-serif;\n color: ', ';\n -webkit-font-smoothing: antialiased;\n min-width: 320px;\n }\n\n a {\n color: ', ';\n text-decoration: none;\n\n &:hover,\n &:focus {\n text-decoration: underline;\n }\n }\n']), | |
| _templateObject5 = _taggedTemplateLiteral(['\n font-family: \'myriad-pro\', sans-serif;\n font-weight: 600;\n border-radius: 3px;\n cursor: pointer;\n text-decoration: none;\n font-size: 14px;\n line-height: 20px;\n padding: 11px 14px;\n user-select: none;\n display: inline-block;\n color: ', ';\n background-color: ', ';\n border: 1px solid ', ';\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n outline: none;\n\n &:hover,\n &:focus {\n background-color: ', ';\n }\n\n &[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n background-color: ', ';\n }\n }\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n'], ['\n font-family: \'myriad-pro\', sans-serif;\n font-weight: 600;\n border-radius: 3px;\n cursor: pointer;\n text-decoration: none;\n font-size: 14px;\n line-height: 20px;\n padding: 11px 14px;\n user-select: none;\n display: inline-block;\n color: ', ';\n background-color: ', ';\n border: 1px solid ', ';\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n outline: none;\n\n &:hover,\n &:focus {\n background-color: ', ';\n }\n\n &[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n background-color: ', ';\n }\n }\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n']), | |
| _templateObject6 = _taggedTemplateLiteral(['\n width: 100%;\n '], ['\n width: 100%;\n ']), | |
| _templateObject7 = _taggedTemplateLiteral(['\n font-size: 16px;\n line-height: 22px;\n '], ['\n font-size: 16px;\n line-height: 22px;\n ']), | |
| _templateObject8 = _taggedTemplateLiteral(['\n background-color: ', ';\n\n &:hover,\n &:focus {\n background-color: ', ';\n }\n\n &[disabled] {\n &:hover,\n &:focus {\n background-color: ', ';\n }\n }\n '], ['\n background-color: ', ';\n\n &:hover,\n &:focus {\n background-color: ', ';\n }\n\n &[disabled] {\n &:hover,\n &:focus {\n background-color: ', ';\n }\n }\n ']), | |
| _templateObject9 = _taggedTemplateLiteral(['\n background-color: transparent;\n border-color: ', ';\n color: ', ';\n\n &:hover,\n &:focus {\n color: ', ';\n border-color: ', ';\n }\n\n &[disabled] {\n &:hover,\n &:focus {\n background-color: transparent;\n color: ', ';\n border-color: ', ';\n }\n }\n '], ['\n background-color: transparent;\n border-color: ', ';\n color: ', ';\n\n &:hover,\n &:focus {\n color: ', ';\n border-color: ', ';\n }\n\n &[disabled] {\n &:hover,\n &:focus {\n background-color: transparent;\n color: ', ';\n border-color: ', ';\n }\n }\n ']), | |
| _templateObject10 = _taggedTemplateLiteral(['\n padding: 0;\n text-align: left;\n color: ', ';\n background: transparent;\n border: 0;\n font-weight: 400;\n\n &:hover,\n &:focus {\n background: transparent;\n text-decoration: underline;\n\n &[disabled] {\n background: transparent;\n text-decoration: none;\n }\n }\n\n i {\n font-size: 10px;\n }\n '], ['\n padding: 0;\n text-align: left;\n color: ', ';\n background: transparent;\n border: 0;\n font-weight: 400;\n\n &:hover,\n &:focus {\n background: transparent;\n text-decoration: underline;\n\n &[disabled] {\n background: transparent;\n text-decoration: none;\n }\n }\n\n i {\n font-size: 10px;\n }\n ']); | |
| var _react = require('react'); | |
| var _react2 = _interopRequireDefault(_react); | |
| var _reactDom = require('react-dom'); | |
| var _reactDom2 = _interopRequireDefault(_reactDom); | |
| var _styledComponents = require('styled-components'); | |
| var _styledComponents2 = _interopRequireDefault(_styledComponents); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } | |
| var styleVars = { | |
| app: { | |
| // Assets path to map images and fonts | |
| 'assets-path': '../assets/' | |
| }, | |
| color: { | |
| // Color theme | |
| 'darkGrey': '#494949', | |
| 'lightGrey': '#CCCCCC', | |
| 'labelGrey': '#747678', | |
| 'bgGrey': '#F5F5F5', | |
| 'borderGrey': '#E5E5E5', | |
| 'darkBlue': '#004165', | |
| 'oceanBlue': '#007DBA', | |
| 'lightOceanBlue': '#0093D8', | |
| 'darkOceanBlue': '#005682', | |
| 'mediumOceanBlue': '#0E6C9E', | |
| 'htmlLink': '#007DBA', | |
| 'white': '#FFFFFF', | |
| 'grayscale97': '#f7f7f7', | |
| 'grayscale96': '#f5f5f5', | |
| 'grayscale93': '#eee', | |
| 'grayscale90': '#e5e5e5', | |
| 'grayscale88': '#e0e0e0', | |
| 'grayscale80': '#ccc', | |
| 'grayscale60': '#8e8e8e', | |
| 'grayscale50': '#747678', | |
| 'grayscale40': '#666', | |
| 'grayscale29': '#494949', | |
| 'black': '#000000', | |
| // Translucents | |
| 'black10': 'rgba(0, 0, 0, 0.1)', | |
| 'black20': 'rgba(0, 0, 0, 0.2)', | |
| 'black30': 'rgba(0, 0, 0, 0.3)', | |
| 'black40': 'rgba(0, 0, 0, 0.4)', | |
| 'black50': 'rgba(0, 0, 0, 0.5)', | |
| 'black60': 'rgba(0, 0, 0, 0.6)', | |
| 'black70': 'rgba(0, 0, 0, 0.7)', | |
| 'black80': 'rgba(0, 0, 0, 0.8)', | |
| 'black90': 'rgba(0, 0, 0, 0.9)', | |
| // Messaging | |
| 'm1': '#008a02', | |
| 'm2': '#d53d39', | |
| 'm3': '#df7a00', | |
| 'm1Lt': '#00a303', | |
| 'm2Lt': '#d9534f', | |
| 'm2Ult': '#ffede9', | |
| // Errors | |
| 'warningBg': '#FEF0E3', | |
| 'warningBorder': '#EBD4BF', | |
| 'warningIcon': '#EA8B26', | |
| 'errorBg': '#FFEDE9', | |
| 'errorBorder': '#EFC9C0', | |
| 'errorIcon': '#DA5149', | |
| // Information | |
| 'informationBg': '#f0faff', | |
| 'informationBorder': '#93c7e5' | |
| }, | |
| dimensions: { | |
| maxPageWidth: '968px', | |
| border: '1px', | |
| gap3: '3px', | |
| gap4: '4px', | |
| gap12: '12px', | |
| gap14: '14px', | |
| gap16: '16px', | |
| gap20: '20px', | |
| gap24: '24px', | |
| gap28: '28px', | |
| gap32: '32px', | |
| gap36: '36px', | |
| gap40: '40px', | |
| gap44: '44px', | |
| gap60: '60px', | |
| gap64: '64px', | |
| font30: '30px', | |
| font14: '14px', | |
| font16: '16px', | |
| width32: '32px', | |
| height32: '32px', | |
| height60: '60px', | |
| height212: '212px', | |
| height280: '280px' | |
| }, | |
| screen: { | |
| desktop: function desktop() { | |
| return (0, _styledComponents.css)(_templateObject, _styledComponents.css.apply(undefined, arguments)); | |
| }, | |
| laptop: function laptop() { | |
| return (0, _styledComponents.css)(_templateObject2, _styledComponents.css.apply(undefined, arguments)); | |
| }, | |
| tablet: function tablet() { | |
| return (0, _styledComponents.css)(_templateObject3, _styledComponents.css.apply(undefined, arguments)); | |
| } | |
| } | |
| }; | |
| (0, _styledComponents.injectGlobal)(_templateObject4, styleVars.color.darkGrey, styleVars.color.htmlLink); | |
| var Button = _styledComponents2.default.button(_templateObject5, styleVars.color.white, styleVars.color.oceanBlue, styleVars.color.white, styleVars.color.lightOceanBlue, styleVars.color.oceanBlue, function (props) { | |
| return props.fullWidth && (0, _styledComponents.css)(_templateObject6); | |
| }, function (props) { | |
| return props.large && (0, _styledComponents.css)(_templateObject7); | |
| }, function (props) { | |
| return props.action && (0, _styledComponents.css)(_templateObject8, styleVars.color.m1, styleVars.color.m1Lt, styleVars.color.m1); | |
| }, function (props) { | |
| return props.ghost && (0, _styledComponents.css)(_templateObject9, styleVars.color.oceanBlue, styleVars.color.oceanBlue, styleVars.color.white, styleVars.color.white, styleVars.color.oceanBlue, styleVars.color.oceanBlue); | |
| }, function (props) { | |
| return props.text && (0, _styledComponents.css)(_templateObject10, styleVars.color.oceanBlue); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment