monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 2.34 kB
JavaScript
var n={tabWrapper:"tabWrapper",tabInner:"tabInner",tabIcon:"tabIcon",right:"right",tabFocusVisibleInset:"tabFocusVisibleInset",active:"active",disabled:"disabled"};!function(n){const r="s_id-3a7fa2625108_2_149_4";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=n)}('.tabWrapper {\n position: relative;\n display: inline-block;\n padding-left: 1px;\n padding-right: 1px;\n border-top: 1px solid transparent;\n border-bottom: 2px solid;\n border-bottom-color: var(--ui-background-color);\n color: var(--primary-text-color);\n text-align: center;\n height: 100%;\n}\n\n.tabWrapper:after {\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n content: "";\n border-bottom: solid 2px;\n border-bottom-color: var(--primary-color);\n transform: scaleX(0);\n z-index: 0;\n}\n\n.tabWrapper .tabInner {\n height: calc(100% - 1px);\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n padding: 4px 16px;\n font: var(--font-text1-normal);\n user-select: none;\n margin-bottom: 1px;\n cursor: pointer;\n color: var(--primary-text-color);\n}\n\n.tabWrapper .tabInner:focus {\n outline: none;\n}\n\n.tabWrapper .tabInner .tabIcon {\n color: var(--icon-color);\n margin-right: var(--spacing-small);\n}\n\n.tabWrapper .tabInner .tabIcon.right {\n margin-right: 0;\n margin-left: var(--spacing-small);\n}\n\n.tabWrapper.tabFocusVisibleInset {\n outline: none;\n z-index: 11;\n border-radius: 3px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n position: relative;\n}\n\n.tabWrapper.active:after {\n transform: scaleX(1);\n transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n\n.tabWrapper.disabled .tabInner {\n color: var(--disabled-text-color);\n cursor: not-allowed;\n}\n\n.tabWrapper:not(.disabled) .tabInner:hover {\n border-radius: 4px;\n background-color: var(--primary-background-hover-color);\n}');export{n as default};
//# sourceMappingURL=Tab.module.scss.js.map