monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 5.32 kB
JavaScript
var n={clickable:"clickable","focus-visible":"focus-visible",disabled:"disabled",disableTextSelection:"disableTextSelection",clickableWrapper:"clickableWrapper",label:"label",small:"small",withLeg:"withLeg",legWrapper:"legWrapper",withAnimation:"withAnimation","label-spin-in-emphasized":"label-spin-in-emphasized",kindFill:"kindFill",colorPrimary:"colorPrimary",colorDark:"colorDark",colorNegative:"colorNegative",colorPositive:"colorPositive",kindLine:"kindLine",smallText:"smallText"};!function(n){const i="s_id-8f42736258c1_2_149_4";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+i))return;const e=document.createElement("style");e.id=i,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=n)}(".clickable {\n cursor: pointer;\n}\n.clickable:focus-visible, .clickable.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickable:focus:not(.focus-visible) {\n outline: none;\n}\n.clickable.disabled {\n cursor: default;\n}\n.disableTextSelection {\n -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.clickableWrapper {\n cursor: pointer;\n}\n.clickableWrapper:focus-visible, .clickableWrapper.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickableWrapper:focus:not(.focus-visible) {\n outline: none;\n}\n.clickableWrapper:active {\n transform: scale(0.95) translate3d(0, 0, 0);\n transition: var(--motion-productive-short) transform;\n}\n.label {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--border-radius-small);\n padding: 2px var(--spacing-small);\n position: relative;\n}\n.label.small {\n padding: 0 var(--spacing-xs);\n border-radius: 2px;\n}\n.withLeg {\n border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-small) 0;\n}\n.legWrapper {\n position: absolute;\n height: 8px;\n top: 100%;\n left: 0;\n display: inline-flex;\n}\n.withAnimation {\n animation: label-spin-in-emphasized var(--motion-expressive-short) var(--motion-timing-emphasize);\n transform-origin: bottom left;\n}\n.kindFill.colorPrimary {\n background-color: var(--primary-color);\n}\n.kindFill.colorPrimary svg path {\n fill: var(--primary-color);\n}\n.kindFill.colorPrimary.clickable:hover, .kindFill.colorPrimary.clickable:active {\n background-color: var(--primary-hover-color);\n}\n.kindFill.colorDark {\n background-color: var(--inverted-color-background);\n}\n.kindFill.colorDark svg path {\n fill: var(--inverted-color-background);\n}\n.kindFill.colorNegative {\n background-color: var(--negative-color);\n}\n.kindFill.colorNegative svg path {\n fill: var(--negative-color);\n}\n.kindFill.colorNegative.clickable:hover, .kindFill.colorNegative.clickable:active {\n background-color: var(--negative-color-hover);\n}\n.kindFill.colorPositive {\n background-color: var(--positive-color);\n}\n.kindFill.colorPositive svg path {\n fill: var(--positive-color);\n}\n.kindFill.colorPositive.clickable:hover, .kindFill.colorPositive.clickable:active {\n background-color: var(--positive-color-hover);\n}\n.kindLine {\n border: 1px solid currentColor;\n padding: 1px var(--spacing-small);\n}\n.kindLine .legWrapper {\n left: -1px;\n top: calc(100% + 1px);\n}\n.kindLine.colorPrimary {\n color: var(--primary-color);\n}\n.kindLine.colorPrimary svg path {\n fill: var(--primary-color);\n}\n.kindLine.colorPrimary.clickable:hover, .kindLine.colorPrimary.clickable:active {\n background-color: var(--primary-background-hover-color);\n}\n.kindLine.colorDark {\n color: var(--inverted-color-background);\n}\n.kindLine.colorDark svg path {\n fill: var(--inverted-color-background);\n}\n.kindLine.colorDark.clickable:hover, .kindLine.colorDark.clickable:active {\n background-color: var(--primary-background-hover-color);\n}\n.kindLine.colorNegative {\n color: var(--negative-color);\n}\n.kindLine.colorNegative svg path {\n fill: var(--negative-color);\n}\n.kindLine.colorNegative.clickable:hover, .kindLine.colorNegative.clickable:active {\n background-color: var(--negative-color-selected);\n}\n.kindLine.colorPositive {\n color: var(--positive-color);\n}\n.kindLine.colorPositive svg path {\n fill: var(--positive-color);\n}\n.kindLine.colorPositive.clickable:hover, .kindLine.colorPositive.clickable:active {\n background-color: var(--positive-color-selected);\n}\n.kindLine .smallText {\n line-height: 14px;\n}\n@keyframes label-spin-in-emphasized {\n 0% {\n transform: rotate(25deg);\n opacity: 0;\n }\n 70% {\n opacity: 1;\n }\n 100% {\n transform: rotate(0deg);\n }\n}");export{n as default};
//# sourceMappingURL=Label.module.scss.js.map