monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 2.74 kB
JavaScript
var n={counterContainer:"counterContainer","focus-visible":"focus-visible",small:"small",medium:"medium",large:"large",primary:"primary",dark:"dark",negative:"negative",light:"light",disabled:"disabled",menu:"menu"};!function(n){const e="s_id-abc6ab3af47c_2_149_4";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".counterContainer {\n background: var(--ui-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: calc(-1 * var(--spacing-small));\n z-index: 1;\n border: 1px solid var(--primary-background-color);\n}\n.counterContainer:focus-visible, .counterContainer.focus-visible {\n outline: none;\n}\n.counterContainer:focus-visible:focus-visible, .counterContainer:focus-visible.focus-visible, .counterContainer.focus-visible:focus-visible, .counterContainer.focus-visible.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer:focus-visible:focus:not(.focus-visible), .counterContainer.focus-visible:focus:not(.focus-visible) {\n outline: none;\n}\n.counterContainer.small {\n height: 28px;\n min-width: 28px;\n border-radius: 14px;\n padding: 0 1px;\n}\n.counterContainer.medium {\n height: 32px;\n min-width: 32px;\n border-radius: 16px;\n padding: 0 2px;\n}\n.counterContainer.large {\n height: 50px;\n min-width: 50px;\n border-radius: 25px;\n padding: 0 var(--spacing-xs);\n}\n.counterContainer.primary {\n color: var(--text-color-on-primary);\n background-color: var(--primary-color);\n}\n.counterContainer.dark {\n color: var(--text-color-on-inverted);\n background-color: var(--inverted-color-background);\n}\n.counterContainer.negative {\n color: var(--text-color-on-primary);\n background-color: var(--negative-color);\n}\n.counterContainer.light {\n color: var(--primary-text-color);\n background-color: var(--ui-background-color);\n}\n.counterContainer .disabled, .counterContainer.disabled {\n background-color: var(--disabled-background-color);\n color: var(--disabled-text-color);\n}\n.menu {\n max-height: 300px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n.menu::-webkit-scrollbar {\n width: 4px;\n height: 6px;\n}\n.menu::-webkit-scrollbar-thumb {\n background-color: var(--ui-border-color);\n border-radius: 4px;\n}");export{n as default};
//# sourceMappingURL=AvatarGroupCounter.module.scss.js.map