@gssfed/vital-ui-kit-react
Version:
Vital UI Kit for React!
87 lines (82 loc) • 7.35 kB
JavaScript
var _templateObject = _taggedTemplateLiteral(['\n position: relative;\n background: ', ';\n color: ', ';\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ', ';\n font-size: ', ';\n border-radius: ', ';\n padding: ', ';\n line-height: 1;\n font-weight: normal;\n margin: 0;\n outline: none;\n padding: ', ';\n box-sizing: border-box;\n vertical-align: middle;\n text-align: center;\n text-decoration: none;\n\n &:hover {\n background: ', ';\n }\n\n &:active {\n background: ', ';\n }\n\n ', ';\n\n ', ';\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n\n &[disabled] {\n color: ', ';\n border-color: ', ';\n background-color: ', ';\n cursor: not-allowed;\n pointer-events: none;\n }\n'], ['\n position: relative;\n background: ', ';\n color: ', ';\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ', ';\n font-size: ', ';\n border-radius: ', ';\n padding: ', ';\n line-height: 1;\n font-weight: normal;\n margin: 0;\n outline: none;\n padding: ', ';\n box-sizing: border-box;\n vertical-align: middle;\n text-align: center;\n text-decoration: none;\n\n &:hover {\n background: ', ';\n }\n\n &:active {\n background: ', ';\n }\n\n ', ';\n\n ', ';\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n\n &[disabled] {\n color: ', ';\n border-color: ', ';\n background-color: ', ';\n cursor: not-allowed;\n pointer-events: none;\n }\n']),
_templateObject2 = _taggedTemplateLiteral(['\n background: ', ';\n color: ', ';\n border: 1px solid transparent;\n\n &:hover {\n background: ', ';\n }\n '], ['\n background: ', ';\n color: ', ';\n border: 1px solid transparent;\n\n &:hover {\n background: ', ';\n }\n ']),
_templateObject3 = _taggedTemplateLiteral(['\n background: ', ';\n color: ', ';\n border-color: ', ';\n\n &:hover {\n background: ', ';\n border-color: ', ';\n }\n &:active {\n background: ', ';\n border-color: ', ';\n }\n '], ['\n background: ', ';\n color: ', ';\n border-color: ', ';\n\n &:hover {\n background: ', ';\n border-color: ', ';\n }\n &:active {\n background: ', ';\n border-color: ', ';\n }\n ']),
_templateObject4 = _taggedTemplateLiteral(['\n background: ', ';\n color: ', ';\n\n &:hover {\n background: ', ';\n }\n '], ['\n background: ', ';\n color: ', ';\n\n &:hover {\n background: ', ';\n }\n ']),
_templateObject5 = _taggedTemplateLiteral(['\n background: ', ';\n color: ', ';\n border: 1px solid transparent;\n\n &:hover {\n background: ', ';\n color: ', ';\n }\n '], ['\n background: ', ';\n color: ', ';\n border: 1px solid transparent;\n\n &:hover {\n background: ', ';\n color: ', ';\n }\n ']),
_templateObject6 = _taggedTemplateLiteral(['\n color: ', ';\n\n &:hover {\n color: ', ';\n }\n '], ['\n color: ', ';\n\n &:hover {\n color: ', ';\n }\n ']),
_templateObject7 = _taggedTemplateLiteral(['\n &:hover {\n text-decoration: underline;\n }\n '], ['\n &:hover {\n text-decoration: underline;\n }\n ']),
_templateObject8 = _taggedTemplateLiteral(['\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n border-radius: 100%;\n width: 2.066rem;\n line-height: 2.066rem;\n height: 2.066rem;\n '], ['\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n border-radius: 100%;\n width: 2.066rem;\n line-height: 2.066rem;\n height: 2.066rem;\n ']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled, { css } from 'styled-components';
import { darken, lighten } from 'polished';
import { size as SIZE, natureColor } from './constant';
var ButtonElement = styled.button(_templateObject, function (_ref) {
var theme = _ref.theme;
return theme.button.default.bg;
}, function (_ref2) {
var theme = _ref2.theme,
nature = _ref2.nature;
return natureColor(theme)[nature];
}, function (_ref3) {
var theme = _ref3.theme;
return theme.borderColor;
}, function (_ref4) {
var size = _ref4.size;
return SIZE[size].fontSize;
}, function (_ref5) {
var size = _ref5.size;
return SIZE[size].borderRadius;
}, function (_ref6) {
var size = _ref6.size;
return SIZE[size].padding;
}, function (_ref7) {
var size = _ref7.size;
return SIZE[size].padding;
}, function (_ref8) {
var theme = _ref8.theme;
return theme.button.default.hoverBg;
}, function (_ref9) {
var theme = _ref9.theme;
return theme.button.default.activeBg;
}, function (_ref10) {
var subtle = _ref10.subtle,
selected = _ref10.selected,
theme = _ref10.theme,
nature = _ref10.nature;
return subtle && css(_templateObject2, selected ? theme.button.subtle.bg : 'transparent', nature === 'default' ? theme.button.subtle.color : natureColor(theme)[nature], theme.button.subtle.hoverBg);
}, function (_ref11) {
var flat = _ref11.flat,
nature = _ref11.nature,
theme = _ref11.theme;
return flat && css(_templateObject3, nature === 'default' ? theme.button.flat.bg : natureColor(theme)[nature], nature === 'default' ? natureColor(theme).default : theme.button.flat.color, nature === 'default' ? theme.button.flat.bg : natureColor(theme)[nature], nature === 'default' ? theme.button.flat.hoverBg : lighten(0.1, natureColor(theme)[nature]), nature === 'default' ? theme.borderColor : lighten(0.1, natureColor(theme)[nature]), nature === 'default' ? theme.button.flat.activeBg : darken(0.12, natureColor(theme)[nature]), nature === 'default' ? theme.button.flat.activeBorderColor : darken(0.12, natureColor(theme)[nature]));
}, function (_ref12) {
var light = _ref12.light,
theme = _ref12.theme,
nature = _ref12.nature;
return light && css(_templateObject4, theme.button.light.bg, natureColor(theme)[nature], theme.button.light.hoverBg);
}, function (_ref13) {
var link = _ref13.link,
theme = _ref13.theme;
return link && css(_templateObject5, theme.button.link.bg, theme.button.link.color, theme.button.link.hoverBg, theme.button.link.hoverColor);
}, function (_ref14) {
var link = _ref14.link,
dark = _ref14.dark,
theme = _ref14.theme;
return link && dark && css(_templateObject6, theme.button.link.darkColor, theme.button.link.hoverDarkColor);
}, function (_ref15) {
var underline = _ref15.underline;
return underline && css(_templateObject7);
}, function (_ref16) {
var circle = _ref16.circle;
return circle && css(_templateObject8);
}, function (_ref17) {
var theme = _ref17.theme;
return theme.button.disabled.color;
}, function (_ref18) {
var theme = _ref18.theme;
return theme.button.disabled.borderColor;
}, function (_ref19) {
var theme = _ref19.theme;
return theme.button.disabled.bg;
});
export default ButtonElement;