light-layout-component
Version:
easy and useful layout component
24 lines (23 loc) • 1.71 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from "styled-components";
var TabMenu = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n\n background: transparent;\n border: none;\n border-bottom: ", ";\n\n transition: all ease 0.3s;\n\n cursor: pointer;\n &:hover {\n opacity: 50%;\n transform: scale(0.98);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n\n background: transparent;\n border: none;\n border-bottom: ", ";\n\n transition: all ease 0.3s;\n\n cursor: pointer;\n &:hover {\n opacity: 50%;\n transform: scale(0.98);\n }\n"])), function (_a) {
var $tabMenuHeight = _a.$tabMenuHeight;
return $tabMenuHeight;
}, function (_a) {
var $isCurrentTab = _a.$isCurrentTab;
return !$isCurrentTab && "gray";
}, function (_a) {
var $isCurrentTab = _a.$isCurrentTab;
return $isCurrentTab && "700";
}, function (_a) {
var $tabMenuFontSize = _a.$tabMenuFontSize;
return $tabMenuFontSize;
}, function (_a) {
var $isCurrentTab = _a.$isCurrentTab, $tabMenuBorderBottomColor = _a.$tabMenuBorderBottomColor;
return $isCurrentTab && "3px solid ".concat($tabMenuBorderBottomColor);
});
export default TabMenu;
var templateObject_1;