@quidgest/ui 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui.esm.js +1246 -804
- package/dist/ui.esm.js.map +1 -1
- package/dist/ui.js +4 -4
- package/dist/ui.js.map +1 -1
- package/dist/ui.min.js +261 -218
- package/dist/ui.min.js.map +1 -1
- package/lib/components/QButton/QButton.vue.d.ts +4 -4
- package/lib/components/QButton/QButton.vue.d.ts.map +1 -1
- package/lib/components/QIcon/QIcon.vue.d.ts +23 -19
- package/lib/components/QIcon/QIcon.vue.d.ts.map +1 -1
- package/lib/components/QIcon/QIconFont.vue.d.ts.map +1 -1
- package/lib/components/QIcon/QIconImg.vue.d.ts.map +1 -1
- package/lib/components/QIcon/index.d.ts +2 -0
- package/lib/components/QIcon/index.d.ts.map +1 -1
- package/lib/components/QInput/QInput.vue.d.ts +43 -0
- package/lib/components/QInput/QInput.vue.d.ts.map +1 -0
- package/lib/components/QInput/index.d.ts +3 -0
- package/lib/components/QInput/index.d.ts.map +1 -0
- package/lib/components/QList/QList.vue.d.ts +66 -0
- package/lib/components/QList/QList.vue.d.ts.map +1 -0
- package/lib/components/QList/QListItem.vue.d.ts +80 -0
- package/lib/components/QList/QListItem.vue.d.ts.map +1 -0
- package/lib/components/QList/QListItemGroup.vue.d.ts +54 -0
- package/lib/components/QList/QListItemGroup.vue.d.ts.map +1 -0
- package/lib/components/QList/index.d.ts +7 -0
- package/lib/components/QList/index.d.ts.map +1 -0
- package/lib/components/QOverlay/QOverlay.vue.d.ts +31 -13
- package/lib/components/QOverlay/QOverlay.vue.d.ts.map +1 -1
- package/lib/components/QPopover/QPopover.vue.d.ts +6 -6
- package/lib/components/QPopover/QPopover.vue.d.ts.map +1 -1
- package/lib/components/QSelect/QSelect.vue.d.ts +135 -0
- package/lib/components/QSelect/QSelect.vue.d.ts.map +1 -0
- package/lib/components/QSelect/index.d.ts +3 -0
- package/lib/components/QSelect/index.d.ts.map +1 -0
- package/lib/components/QTooltip/QTooltip.vue.d.ts +6 -6
- package/lib/components/QTooltip/QTooltip.vue.d.ts.map +1 -1
- package/lib/components/index.d.ts +3 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/composables/overlay.d.ts +3 -2
- package/lib/composables/overlay.d.ts.map +1 -1
- package/lib/composables/theme.d.ts.map +1 -1
- package/lib/composables/uid.d.ts +2 -0
- package/lib/composables/uid.d.ts.map +1 -0
- package/lib/directives/click-outside/index.d.ts +7 -0
- package/lib/directives/click-outside/index.d.ts.map +1 -0
- package/lib/directives/index.d.ts +2 -0
- package/lib/directives/index.d.ts.map +1 -0
- package/lib/framework.d.ts +2 -2
- package/lib/framework.d.ts.map +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/styles/ui.css +238 -10
- package/lib/styles/ui.min.css +1 -1
- package/lib/styles/ui.scss +270 -23
- package/lib/types/primitive.d.ts +2 -0
- package/lib/types/primitive.d.ts.map +1 -0
- package/lib/utils/color.d.ts +22 -30
- package/lib/utils/color.d.ts.map +1 -1
- package/package.json +2 -2
- package/lib/utils/getUid.d.ts +0 -5
- package/lib/utils/getUid.d.ts.map +0 -1
package/lib/styles/ui.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.fade-enter-active,.fade-leave-active{transition:opacity 0.15s ease-in-out}.q-btn{--outline-color:var(--q-theme-primary);position:relative;display:flex;flex-direction:row;align-items:center;padding:0.4rem;border:thin solid;background-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;border-radius:0.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:0.15s;outline-offset:1px;line-height:15px}.q-btn:hover:not(:disabled){cursor:pointer}.q-btn:focus{outline:2px solid var(--outline-color);z-index:3}.q-btn:focus:not(:focus-visible){outline:0;box-shadow:none}.q-btn__content{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:0.9rem;white-space:nowrap;gap:0.25rem;pointer-events:none;line-height:15px;min-width:15px}.q-btn .e-icon__svg{padding:0;margin:0;fill:currentColor;width:15px;height:15px}.q-btn .q-spinner-loader{color:currentColor}.q-btn--active{z-index:2;background-color:var(--q-theme-primary-light)}.q-btn:disabled{opacity:0.6}.q-btn--loading{cursor:progress}.q-btn--loading span{visibility:hidden}.q-btn--primary{background-color:var(--q-theme-primary);border-color:var(--q-theme-primary);color:var(--q-theme-on-primary)}.q-btn--primary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark)}.q-btn--secondary{border-color:currentColor;color:var(--q-theme-primary)}.q-btn--secondary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark);color:var(--q-theme-on-primary)}.q-btn--tertiary{background-color:transparent;border-color:transparent;color:var(--q-theme-primary)}.q-btn--tertiary:focus:not(:disabled),.q-btn--tertiary:hover:not(:disabled){color:var(--q-theme-primary-dark)}.q-btn--danger{--outline-color:var(--q-theme-danger-light);background-color:var(--q-theme-danger);border-color:var(--q-theme-danger);color:var(--q-theme-on-danger)}.q-btn--danger:hover:not(:disabled){background-color:var(--q-theme-danger-dark);border-color:var(--q-theme-danger-dark)}.q-btn--small{padding:0.25rem;line-height:14px}.q-btn--small span{font-size:0.75rem;line-height:14px}.q-btn--small .e-icon__svg{width:14px;height:14px}.q-btn--borderless{border-color:transparent!important}.q-btn--elevated{box-shadow:0px 2px 4px -1px rgba(0,0,0,.2),0px 4px 5px 0px rgba(0,0,0,.14),0px 1px 10px 0px rgba(0,0,0,.12)}.q-btn--block{display:block;width:100%;padding:0.5rem}.q-btn--block span{gap:0.5rem}.q-btn--block+.q-btn--block{margin-top:0.5rem}.q-btn__spinner{position:absolute;left:50%;transform:translateX(-50%)}.q-btn-group{position:relative;display:inline-flex;border-radius:0.25rem}.q-btn-group--elevated{box-shadow:0px 2px 4px -1px rgba(0,0,0,.2),0px 4px 5px 0px rgba(0,0,0,.14),0px 1px 10px 0px rgba(0,0,0,.12)}.q-btn-group>.q-btn{position:relative;flex:0 1 auto}.q-btn-group>.q-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.q-btn-group>.q-btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.q-btn-group>.q-btn:hover{z-index:3}.q-icon{display:inline-block}.q-icon__svg{fill:currentColor;width:1em;height:1em}.q-line-loader{width:100%;height:2px;display:inline-block;position:relative;background:transparent;overflow:hidden}.q-line-loader:after{content:"";min-width:33%;height:2px;background:linear-gradient(to right,#edebe9 0%,var(--q-theme-primary) 50%,#edebe9 100%);position:absolute;top:0;left:0;box-sizing:border-box;animation:q-move 2s linear infinite}@keyframes q-move{0%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0%)}}.q-overlay{--q-overlay-bg:var(--q-theme-background);--q-overlay-color:var(--q-theme-on-background);--q-overlay-border-color:rgb(var(--q-theme-on-background-rgb)/0.1);position:absolute}.q-overlay__content{display:block;position:relative;transform:translateX(-50%);width:-moz-max-content;width:max-content;z-index:1070;background-color:var(--q-overlay-bg);color:var(--q-overlay-color);background-clip:padding-box;border:1px solid var(--q-overlay-border-color);border-radius:0.25rem;box-shadow:0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.q-overlay__arrow{position:absolute;display:block;width:1rem;height:0.5rem}.q-overlay__arrow:after,.q-overlay__arrow:before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.q-overlay--top .q-overlay__arrow{left:calc(50% - 0.5rem);bottom:calc(-0.5rem - 1px)}.q-overlay--top .q-overlay__arrow:after,.q-overlay--top .q-overlay__arrow:before{border-width:0.5rem 0.5rem 0}.q-overlay--top .q-overlay__arrow:before{bottom:0;border-top-color:var(--q-overlay-border-color)}.q-overlay--top .q-overlay__arrow:after{bottom:1px;border-top-color:var(--q-overlay-bg)}.q-overlay--bottom .q-overlay__arrow{top:calc(-0.5rem - 1px);left:calc(50% - 0.5rem)}.q-overlay--bottom .q-overlay__arrow:after,.q-overlay--bottom .q-overlay__arrow:before{border-width:0 0.5rem 0.5rem}.q-overlay--bottom .q-overlay__arrow:before{top:0;border-bottom-color:var(--q-overlay-border-color)}.q-overlay--bottom .q-overlay__arrow:after{top:1px;border-bottom-color:var(--q-overlay-bg)}.q-overlay--left .q-overlay__arrow{top:calc(50% - 0.5rem);right:-0.5rem;width:0.5rem;height:1rem}.q-overlay--left .q-overlay__arrow:after,.q-overlay--left .q-overlay__arrow:before{border-width:0.5rem 0 0.5rem 0.5rem}.q-overlay--left .q-overlay__arrow:before{right:0;border-left-color:var(--q-overlay-border-color)}.q-overlay--left .q-overlay__arrow:after{right:1px;border-left-color:var(--q-overlay-bg)}.q-overlay--right .q-overlay__arrow{top:calc(50% - 0.5rem);left:-0.5rem;width:0.5rem;height:1rem}.q-overlay--right .q-overlay__arrow:after,.q-overlay--right .q-overlay__arrow:before{border-width:0.5rem 0.5rem 0.5rem 0}.q-overlay--right .q-overlay__arrow:before{left:0;border-right-color:var(--q-overlay-border-color)}.q-overlay--right .q-overlay__arrow:after{left:1px;border-right-color:var(--q-overlay-bg)}.q-overlay--inverted{--q-overlay-bg:var(--q-theme-on-background);--q-overlay-color:var(--q-theme-background);--q-overlay-border-color:transparent}.q-popover .q-overlay__content{z-index:1070;position:relative;max-width:276px;line-height:1.5;word-break:normal;word-spacing:normal;word-wrap:break-word;white-space:normal;line-break:auto;font-size:0.7875rem}.q-popover__header{padding:0.5rem 1rem;margin:0;font-size:0.9rem;background-color:rgb(var(--q-theme-on-background-rgb)/0.04);border-bottom:1px solid var(--q-overlay-border-color);border-top-left-radius:inherit;border-top-right-radius:inherit}.q-popover__body{padding:1rem}.q-popover.q-overlay--bottom .q-overlay__arrow:after{border-bottom-color:rgb(var(--q-theme-on-background-rgb)/0.04)}.q-spinner-loader{display:flex;position:relative;width:1em;height:1em;font-size:48px;line-height:1;align-items:center;justify-content:center;color:var(--q-theme-primary)}.q-spinner-loader svg{width:100%;height:100%;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;animation:q-spin 2s linear infinite;transform-origin:center center}.q-spinner-loader .path{stroke-dasharray:1,250;stroke-dashoffset:0;animation:q-md-dash 1.5s ease-in-out infinite}@keyframes q-spin{0%{transform:rotate3d(0,0,1,0)}25%{transform:rotate3d(0,0,1,90deg)}50%{transform:rotate3d(0,0,1,180deg)}75%{transform:rotate3d(0,0,1,270deg)}to{transform:rotate3d(0,0,1,359deg)}}@keyframes q-md-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.q-tooltip .q-overlay__content{padding:0.5rem;text-align:center;font-style:normal;font-size:0.7875rem;font-weight:400;text-decoration:none;text-shadow:none;text-transform:none;line-height:1.5;line-break:auto;word-wrap:break-word;word-break:normal;word-spacing:normal;white-space:normal;letter-spacing:normal;max-width:200px}
|
|
1
|
+
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}*,:after,:before{box-sizing:border-box;border:0 solid #dce3e8;outline-offset:1px}body{font-size:0.9rem}*{scrollbar-color:#ccc #f1f1f1;scrollbar-width:thin}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:0.25rem}::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:0.25rem}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.fade-enter-active,.fade-leave-active{transition:opacity 0.2s}.q-btn{--box-shadow-tint:0 0 0;position:relative;display:flex;flex-direction:row;align-items:center;padding:0.4rem;border-width:1px;background-color:transparent;color:var(--q-theme-on-background);user-select:none;-webkit-user-select:none;-moz-user-select:none;border-radius:0.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:0.15s;line-height:15px}.q-btn:hover:not(:disabled){cursor:pointer}.q-btn:focus{outline:2px solid rgb(var(--q-theme-primary-rgb)/0.25);z-index:3}.q-btn:focus:not(:focus-visible){outline:0;box-shadow:none}.q-btn__content{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:0.9rem;white-space:nowrap;gap:0.25rem;pointer-events:none;line-height:15px;min-width:15px}.q-btn .e-icon__svg{padding:0;margin:0;fill:currentColor;width:15px;height:15px}.q-btn .q-spinner-loader{color:currentColor}.q-btn--active{z-index:2;background-color:var(--q-theme-primary-light)}.q-btn:disabled{opacity:0.6}.q-btn--loading{cursor:progress}.q-btn--loading span{visibility:hidden}.q-btn--primary{--box-shadow-tint:var(--q-theme-primary-rgb);background-color:var(--q-theme-primary);border-color:var(--q-theme-primary);color:var(--q-theme-on-primary)}.q-btn--primary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark)}.q-btn--secondary{--box-shadow-tint:var(--q-theme-primary-rgb);border-color:currentColor;color:var(--q-theme-primary)}.q-btn--secondary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark);color:var(--q-theme-on-primary)}.q-btn--tertiary{--box-shadow-tint:var(--q-theme-primary-rgb);background-color:transparent;border-color:transparent;color:var(--q-theme-primary)}.q-btn--tertiary:focus:not(:disabled),.q-btn--tertiary:hover:not(:disabled){color:var(--q-theme-primary-dark)}.q-btn--danger{--outline-color:var(--q-theme-danger-light);--box-shadow-tint:var(--q-theme-danger-rgb);background-color:var(--q-theme-danger);border-color:var(--q-theme-danger);color:var(--q-theme-on-danger)}.q-btn--danger:hover:not(:disabled){background-color:var(--q-theme-danger-dark);border-color:var(--q-theme-danger-dark)}.q-btn--plain:hover:not(:disabled){background-color:rgb(var(--q-theme-on-background-rgb)/0.1)}.q-btn--small{padding:0.25rem;line-height:14px}.q-btn--small span{font-size:0.75rem;line-height:14px}.q-btn--small .e-icon__svg{width:14px;height:14px}.q-btn--borderless{border-color:transparent!important}.q-btn--elevated{box-shadow:0px 2px 4px -1px rgb(var(--box-shadow-tint)/0.2),0px 4px 5px 0px rgb(var(--box-shadow-tint)/0.14),0px 1px 10px 0px rgb(var(--box-shadow-tint)/0.12)}.q-btn--block{display:block;width:100%;padding:0.5rem}.q-btn--block span{gap:0.5rem}.q-btn--block+.q-btn--block{margin-top:0.5rem}.q-btn__spinner{position:absolute;left:50%;transform:translateX(-50%)}.q-btn-group{position:relative;display:inline-flex;border-radius:0.25rem}.q-btn-group--elevated{box-shadow:0px 2px 4px -1px rgba(0,0,0,.2),0px 4px 5px 0px rgba(0,0,0,.14),0px 1px 10px 0px rgba(0,0,0,.12)}.q-btn-group>.q-btn{position:relative;flex:0 1 auto}.q-btn-group>.q-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.q-btn-group>.q-btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.q-btn-group>.q-btn:hover{z-index:3}.q-icon{display:inline-block}.q-icon__svg{fill:currentColor;width:1em;height:1em}.q-input{display:flex;align-items:center;height:2.25rem;width:100%;border-radius:0.375rem;border-width:1px;background-color:transparent;padding:0.26rem 0.25rem;font-size:0.9rem;line-height:1.5rem;transition:color var(--transition-duration) var(--transition-timing-function)}.q-input:focus-within{outline:2px solid rgb(var(--q-theme-primary-rgb)/0.25)}.q-input__append,.q-input__prepend{display:flex;align-items:center}.q-input__append{margin-left:auto}.q-input--readonly{background-color:#eaebec}.q-input--disabled{cursor:not-allowed;opacity:0.5}.q-input--mini{width:4.35rem}.q-input--small{width:6.525rem}.q-input--medium{width:10.875rem}.q-input--large{width:15.225rem}.q-input--x-large{width:19.575rem}.q-input--xx-large{width:36.975rem}.q-input--block{width:100%}.q-line-loader{width:100%;height:2px;display:inline-block;position:relative;background:transparent;overflow:hidden}.q-line-loader:after{content:"";min-width:33%;height:2px;background:linear-gradient(to right,#edebe9 0%,var(--q-theme-primary) 50%,#edebe9 100%);position:absolute;top:0;left:0;box-sizing:border-box;animation:q-move 2s linear infinite}@keyframes q-move{0%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0%)}}.q-list{display:flex;flex-direction:column;align-items:center;position:relative;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;-webkit-overflow-scrolling:touch;width:100%;border-radius:0.25rem}.q-list:focus-visible{outline:2px solid rgb(var(--q-theme-primary-rgb)/0.25)}.q-list-item-group{display:flex;flex-direction:column;align-items:center;gap:1px;list-style:none;padding:0;margin:0;width:inherit}.q-list-item-group__title{color:rgb(var(--q-theme-on-background-rgb)/0.62);padding:5px 6px;line-height:15px;width:inherit}.q-list-item-group+.q-list-item-group{padding-top:0.25rem;margin-top:0.25rem;border-top-width:1px}.q-list-item{display:flex;gap:0.25rem;align-items:center;padding:5px 6px;list-style:none;line-height:15px;word-wrap:break-word;-webkit-touch-callout:none;width:inherit;cursor:pointer;border-radius:0.25rem;outline:none}.q-list-item--disabled{cursor:not-allowed;pointer-events:none;opacity:0.5}.q-list-item--highlighted,.q-list-item:focus-visible,.q-list-item:hover{background-color:var(--q-theme-primary-light)}.q-list-item--selected{background-color:rgb(var(--q-theme-primary-rgb)/0.24)}.q-list-item--selected--highlighted,.q-list-item--selected:focus-visible,.q-list-item--selected:hover{background-color:rgb(var(--q-theme-primary-rgb)/0.39)}.q-list-item em{font-style:normal;text-decoration:underline}.q-list-item__check{margin-left:auto}.q-list-item+.q-list-item{margin-top:1px}.q-overlay{--q-overlay-bg:var(--q-theme-background);--q-overlay-color:var(--q-theme-on-background);--q-overlay-border-color:rgb(var(--q-theme-on-background-rgb)/0.1);position:absolute;z-index:1070}.q-overlay__content{display:block;position:relative;width:100%;background-color:var(--q-overlay-bg);color:var(--q-overlay-color);background-clip:padding-box;border:1px solid var(--q-overlay-border-color);border-radius:0.25rem;box-shadow:0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.q-overlay__arrow{position:absolute;display:block;width:1rem;height:0.5rem}.q-overlay__arrow:after,.q-overlay__arrow:before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.q-overlay--top .q-overlay__arrow{left:calc(50% - 0.5rem);bottom:calc(-0.5rem - 1px)}.q-overlay--top .q-overlay__arrow:after,.q-overlay--top .q-overlay__arrow:before{border-width:0.5rem 0.5rem 0}.q-overlay--top .q-overlay__arrow:before{bottom:0;border-top-color:var(--q-overlay-border-color)}.q-overlay--top .q-overlay__arrow:after{bottom:1px;border-top-color:var(--q-overlay-bg)}.q-overlay--bottom .q-overlay__arrow{top:calc(-0.5rem - 1px);left:calc(50% - 0.5rem)}.q-overlay--bottom .q-overlay__arrow:after,.q-overlay--bottom .q-overlay__arrow:before{border-width:0 0.5rem 0.5rem}.q-overlay--bottom .q-overlay__arrow:before{top:0;border-bottom-color:var(--q-overlay-border-color)}.q-overlay--bottom .q-overlay__arrow:after{top:1px;border-bottom-color:var(--q-overlay-bg)}.q-overlay--left .q-overlay__arrow{top:calc(50% - 0.5rem);right:-0.5rem;width:0.5rem;height:1rem}.q-overlay--left .q-overlay__arrow:after,.q-overlay--left .q-overlay__arrow:before{border-width:0.5rem 0 0.5rem 0.5rem}.q-overlay--left .q-overlay__arrow:before{right:0;border-left-color:var(--q-overlay-border-color)}.q-overlay--left .q-overlay__arrow:after{right:1px;border-left-color:var(--q-overlay-bg)}.q-overlay--right .q-overlay__arrow{top:calc(50% - 0.5rem);left:-0.5rem;width:0.5rem;height:1rem}.q-overlay--right .q-overlay__arrow:after,.q-overlay--right .q-overlay__arrow:before{border-width:0.5rem 0.5rem 0.5rem 0}.q-overlay--right .q-overlay__arrow:before{left:0;border-right-color:var(--q-overlay-border-color)}.q-overlay--right .q-overlay__arrow:after{left:1px;border-right-color:var(--q-overlay-bg)}.q-overlay--inverted{--q-overlay-bg:var(--q-theme-on-background);--q-overlay-color:var(--q-theme-background);--q-overlay-border-color:transparent}.q-popover .q-overlay__content{z-index:1070;position:relative;max-width:276px;line-height:1.5;word-break:normal;word-spacing:normal;word-wrap:break-word;white-space:normal;line-break:auto;font-size:0.7875rem}.q-popover__header{padding:0.5rem 1rem;margin:0;font-size:0.9rem;background-color:rgb(var(--q-theme-on-background-rgb)/0.04);border-bottom:1px solid var(--q-overlay-border-color);border-top-left-radius:inherit;border-top-right-radius:inherit}.q-popover__body{padding:1rem}.q-popover.q-overlay--bottom .q-overlay__arrow:after{border-bottom-color:rgb(var(--q-theme-on-background-rgb)/0.04)}.q-select:not(.q-select--readonly){background-color:transparent}.q-select:not(.q-select--readonly):not(.q-select--disabled){cursor:pointer}.q-select__placeholder{font-style:italic;color:rgb(var(--q-theme-on-background-rgb)/0.5)}.q-select--expanded .q-select__chevron{transform:rotate(-180deg)}.q-select .q-input__prepend{padding-left:6px;padding-right:0.25rem}.q-select__chevron,.q-select__clear,.q-select__search-icon{opacity:0.5}.q-select__chevron:hover,.q-select__clear:hover{opacity:1}.q-select__chevron{transition:all 0.2s}.q-select__body{display:flex;flex-direction:column;align-items:center;gap:0.25rem;width:100%;padding:0.25rem 0}.q-select__body .q-list-item,.q-select__search{width:calc(100% - 0.5rem)}.q-select__search:focus-within{outline:none}.q-select__items{max-height:240px}.q-select__empty,.q-select__loader{margin:1rem 0}.q-spinner-loader{display:flex;position:relative;width:1em;height:1em;font-size:48px;line-height:1;align-items:center;justify-content:center;color:var(--q-theme-primary)}.q-spinner-loader svg{width:100%;height:100%;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;animation:q-spin 2s linear infinite;transform-origin:center center}.q-spinner-loader .path{stroke-dasharray:1,250;stroke-dashoffset:0;animation:q-md-dash 1.5s ease-in-out infinite}@keyframes q-spin{0%{transform:rotate3d(0,0,1,0)}25%{transform:rotate3d(0,0,1,90deg)}50%{transform:rotate3d(0,0,1,180deg)}75%{transform:rotate3d(0,0,1,270deg)}to{transform:rotate3d(0,0,1,359deg)}}@keyframes q-md-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.q-tooltip .q-overlay__content{padding:0.5rem;text-align:center;font-style:normal;font-size:0.7875rem;font-weight:400;text-decoration:none;text-shadow:none;text-transform:none;line-height:1.5;line-break:auto;word-wrap:break-word;word-break:normal;word-spacing:normal;white-space:normal;letter-spacing:normal;max-width:200px}
|
package/lib/styles/ui.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Quid UI Framework v0.
|
|
2
|
+
* Quid UI Framework v0.4.0
|
|
3
3
|
* (c) 2023 Quidgest - Consultores de Gestão, SA
|
|
4
4
|
*/
|
|
5
5
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
@@ -167,18 +167,6 @@ template {
|
|
|
167
167
|
[hidden] {
|
|
168
168
|
display: none;
|
|
169
169
|
}
|
|
170
|
-
.fade-enter-from,
|
|
171
|
-
.fade-leave-to {
|
|
172
|
-
opacity: 0;
|
|
173
|
-
}
|
|
174
|
-
.fade-enter-to,
|
|
175
|
-
.fade-leave-from {
|
|
176
|
-
opacity: 1;
|
|
177
|
-
}
|
|
178
|
-
.fade-enter-active,
|
|
179
|
-
.fade-leave-active {
|
|
180
|
-
transition: opacity 0.15s ease-in-out;
|
|
181
|
-
}
|
|
182
170
|
$border-radius: 0.25rem !default;
|
|
183
171
|
$compact: true !default;
|
|
184
172
|
$space-base: 0.25rem !default;
|
|
@@ -232,6 +220,15 @@ $spaces: (
|
|
|
232
220
|
'lg': $space-lg,
|
|
233
221
|
'xl': $space-xl
|
|
234
222
|
) !default;
|
|
223
|
+
$shadow-sm:
|
|
224
|
+
0 0 #0000,
|
|
225
|
+
0 0 #0000,
|
|
226
|
+
0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
227
|
+
$shadow-md:
|
|
228
|
+
0 0 #0000,
|
|
229
|
+
0 0 #0000,
|
|
230
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
231
|
+
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
235
232
|
$breakpoint-xs: 599px !default;
|
|
236
233
|
$breakpoint-sm: 1023px !default;
|
|
237
234
|
$breakpoint-md: 1439px !default;
|
|
@@ -244,6 +241,50 @@ $font-weight-regular: 400;
|
|
|
244
241
|
$font-weight-italic: 400;
|
|
245
242
|
$font-weight-bold: 700;
|
|
246
243
|
$font-weight-black: 900;
|
|
244
|
+
$border: #dce3e8;
|
|
245
|
+
$outline-width: 2px;
|
|
246
|
+
$outline-style: solid;
|
|
247
|
+
$outline-color: rgb(var(--q-theme-primary-rgb) / 0.25);
|
|
248
|
+
$outline: $outline-width $outline-style $outline-color;
|
|
249
|
+
*,
|
|
250
|
+
:after,
|
|
251
|
+
:before {
|
|
252
|
+
box-sizing: border-box;
|
|
253
|
+
border: 0 solid $border;
|
|
254
|
+
outline-offset: 1px;
|
|
255
|
+
}
|
|
256
|
+
body {
|
|
257
|
+
font-size: $font-size-base;
|
|
258
|
+
}
|
|
259
|
+
* {
|
|
260
|
+
|
|
261
|
+
&::-webkit-scrollbar {
|
|
262
|
+
width: 7px;
|
|
263
|
+
}
|
|
264
|
+
&::-webkit-scrollbar-thumb {
|
|
265
|
+
background-color: #ccc;
|
|
266
|
+
border-radius: $border-radius;
|
|
267
|
+
}
|
|
268
|
+
&::-webkit-scrollbar-track {
|
|
269
|
+
background-color: #f1f1f1;
|
|
270
|
+
border-radius: $border-radius;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
scrollbar-color: #ccc #f1f1f1;
|
|
274
|
+
scrollbar-width: thin;
|
|
275
|
+
}
|
|
276
|
+
.fade-enter-from,
|
|
277
|
+
.fade-leave-to {
|
|
278
|
+
opacity: 0;
|
|
279
|
+
}
|
|
280
|
+
.fade-enter-to,
|
|
281
|
+
.fade-leave-from {
|
|
282
|
+
opacity: 1;
|
|
283
|
+
}
|
|
284
|
+
.fade-enter-active,
|
|
285
|
+
.fade-leave-active {
|
|
286
|
+
transition: opacity 0.2s;
|
|
287
|
+
}
|
|
247
288
|
$btn-bg-primary: var(--q-theme-primary);
|
|
248
289
|
$btn-color-primary: var(--q-theme-on-primary);
|
|
249
290
|
$btn-hover-bg-primary: var(--q-theme-primary-dark);
|
|
@@ -253,18 +294,20 @@ $btn-color-tertiary: var(--q-theme-primary);
|
|
|
253
294
|
$btn-bg-danger: var(--q-theme-danger);
|
|
254
295
|
$btn-color-danger: var(--q-theme-on-danger);
|
|
255
296
|
$btn-hover-bg-danger: var(--q-theme-danger-dark);
|
|
297
|
+
$btn-hover-bg-plain: rgb(var(--q-theme-on-background-rgb) / 0.1);
|
|
256
298
|
$btn-bg-active: var(--q-theme-primary-light);
|
|
257
299
|
$btn-outline: var(--q-theme-primary-light);
|
|
258
300
|
.q-btn {
|
|
259
301
|
$this: &;
|
|
260
|
-
--
|
|
302
|
+
--box-shadow-tint: 0 0 0;
|
|
261
303
|
position: relative;
|
|
262
304
|
display: flex;
|
|
263
305
|
flex-direction: row;
|
|
264
306
|
align-items: center;
|
|
265
307
|
padding: 0.4rem;
|
|
266
|
-
border:
|
|
308
|
+
border-width: 1px;
|
|
267
309
|
background-color: transparent;
|
|
310
|
+
color: var(--q-theme-on-background);
|
|
268
311
|
user-select: none;
|
|
269
312
|
-webkit-user-select: none;
|
|
270
313
|
-moz-user-select: none;
|
|
@@ -272,7 +315,6 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
272
315
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
273
316
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
274
317
|
transition-duration: 0.15s;
|
|
275
|
-
outline-offset: 1px;
|
|
276
318
|
@if $compact {
|
|
277
319
|
line-height: 15px;
|
|
278
320
|
} @else {
|
|
@@ -282,7 +324,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
282
324
|
cursor: pointer;
|
|
283
325
|
}
|
|
284
326
|
&:focus {
|
|
285
|
-
outline:
|
|
327
|
+
outline: $outline;
|
|
286
328
|
z-index: 3;
|
|
287
329
|
&:not(:focus-visible) {
|
|
288
330
|
outline: 0;
|
|
@@ -338,6 +380,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
338
380
|
}
|
|
339
381
|
|
|
340
382
|
&--primary {
|
|
383
|
+
--box-shadow-tint: var(--q-theme-primary-rgb);
|
|
341
384
|
background-color: $btn-bg-primary;
|
|
342
385
|
border-color: $btn-bg-primary;
|
|
343
386
|
color: $btn-color-primary;
|
|
@@ -347,6 +390,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
347
390
|
}
|
|
348
391
|
}
|
|
349
392
|
&--secondary {
|
|
393
|
+
--box-shadow-tint: var(--q-theme-primary-rgb);
|
|
350
394
|
border-color: currentColor;
|
|
351
395
|
color: $btn-color-secondary;
|
|
352
396
|
&:hover:not(:disabled) {
|
|
@@ -356,6 +400,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
356
400
|
}
|
|
357
401
|
}
|
|
358
402
|
&--tertiary {
|
|
403
|
+
--box-shadow-tint: var(--q-theme-primary-rgb);
|
|
359
404
|
background-color: transparent;
|
|
360
405
|
border-color: transparent;
|
|
361
406
|
color: $btn-color-tertiary;
|
|
@@ -366,6 +411,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
366
411
|
}
|
|
367
412
|
&--danger {
|
|
368
413
|
--outline-color: var(--q-theme-danger-light);
|
|
414
|
+
--box-shadow-tint: var(--q-theme-danger-rgb);
|
|
369
415
|
background-color: $btn-bg-danger;
|
|
370
416
|
border-color: $btn-bg-danger;
|
|
371
417
|
color: $btn-color-danger;
|
|
@@ -374,6 +420,11 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
374
420
|
border-color: $btn-hover-bg-danger;
|
|
375
421
|
}
|
|
376
422
|
}
|
|
423
|
+
&--plain {
|
|
424
|
+
&:hover:not(:disabled) {
|
|
425
|
+
background-color: $btn-hover-bg-plain;
|
|
426
|
+
}
|
|
427
|
+
}
|
|
377
428
|
|
|
378
429
|
&--small {
|
|
379
430
|
padding: 0.25rem;
|
|
@@ -393,9 +444,9 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
393
444
|
}
|
|
394
445
|
&--elevated {
|
|
395
446
|
box-shadow:
|
|
396
|
-
0px 2px 4px -1px
|
|
397
|
-
0px 4px 5px 0px
|
|
398
|
-
0px 1px 10px 0px
|
|
447
|
+
0px 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
|
|
448
|
+
0px 4px 5px 0px rgb(var(--box-shadow-tint) / 0.14),
|
|
449
|
+
0px 1px 10px 0px rgb(var(--box-shadow-tint) / 0.12);
|
|
399
450
|
}
|
|
400
451
|
|
|
401
452
|
&--block {
|
|
@@ -451,6 +502,62 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
451
502
|
height: 1em;
|
|
452
503
|
}
|
|
453
504
|
}
|
|
505
|
+
$input-padding-y: 0.26rem;
|
|
506
|
+
$input-padding-x: 0.25rem;
|
|
507
|
+
.q-input {
|
|
508
|
+
display: flex;
|
|
509
|
+
align-items: center;
|
|
510
|
+
height: 2.25rem;
|
|
511
|
+
width: 100%;
|
|
512
|
+
border-radius: 0.375rem;
|
|
513
|
+
border-width: 1px;
|
|
514
|
+
background-color: transparent;
|
|
515
|
+
padding: $input-padding-y $input-padding-x;
|
|
516
|
+
font-size: 0.9rem;
|
|
517
|
+
line-height: 1.5rem;
|
|
518
|
+
transition: color var(--transition-duration) var(--transition-timing-function);
|
|
519
|
+
&:focus-within {
|
|
520
|
+
outline: $outline;
|
|
521
|
+
}
|
|
522
|
+
&__prepend,
|
|
523
|
+
&__append {
|
|
524
|
+
display: flex;
|
|
525
|
+
align-items: center;
|
|
526
|
+
}
|
|
527
|
+
&__append {
|
|
528
|
+
margin-left: auto;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
&--readonly {
|
|
532
|
+
background-color: #eaebec;
|
|
533
|
+
}
|
|
534
|
+
&--disabled {
|
|
535
|
+
cursor: not-allowed;
|
|
536
|
+
opacity: 0.5;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
&--mini {
|
|
540
|
+
width: 4.35rem;
|
|
541
|
+
}
|
|
542
|
+
&--small {
|
|
543
|
+
width: 6.525rem;
|
|
544
|
+
}
|
|
545
|
+
&--medium {
|
|
546
|
+
width: 10.875rem;
|
|
547
|
+
}
|
|
548
|
+
&--large {
|
|
549
|
+
width: 15.225rem;
|
|
550
|
+
}
|
|
551
|
+
&--x-large {
|
|
552
|
+
width: 19.575rem;
|
|
553
|
+
}
|
|
554
|
+
&--xx-large {
|
|
555
|
+
width: 36.975rem;
|
|
556
|
+
}
|
|
557
|
+
&--block {
|
|
558
|
+
width: 100%;
|
|
559
|
+
}
|
|
560
|
+
}
|
|
454
561
|
$line-color: var(--q-theme-primary);
|
|
455
562
|
.q-line-loader {
|
|
456
563
|
width: 100%;
|
|
@@ -490,6 +597,86 @@ $line-color: var(--q-theme-primary);
|
|
|
490
597
|
transform: translateX(0%);
|
|
491
598
|
}
|
|
492
599
|
}
|
|
600
|
+
.q-list {
|
|
601
|
+
display: flex;
|
|
602
|
+
flex-direction: column;
|
|
603
|
+
align-items: center;
|
|
604
|
+
position: relative;
|
|
605
|
+
overflow-x: hidden;
|
|
606
|
+
overflow-y: auto;
|
|
607
|
+
margin: 0;
|
|
608
|
+
padding: 0;
|
|
609
|
+
-webkit-overflow-scrolling: touch;
|
|
610
|
+
width: 100%;
|
|
611
|
+
border-radius: $border-radius;
|
|
612
|
+
&:focus-visible {
|
|
613
|
+
outline: $outline;
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
.q-list-item-group {
|
|
617
|
+
display: flex;
|
|
618
|
+
flex-direction: column;
|
|
619
|
+
align-items: center;
|
|
620
|
+
gap: 1px;
|
|
621
|
+
list-style: none;
|
|
622
|
+
padding: 0;
|
|
623
|
+
margin: 0;
|
|
624
|
+
width: inherit;
|
|
625
|
+
&__title {
|
|
626
|
+
color: rgb(var(--q-theme-on-background-rgb) / 0.62);
|
|
627
|
+
padding: 5px 6px;
|
|
628
|
+
line-height: 15px;
|
|
629
|
+
width: inherit;
|
|
630
|
+
}
|
|
631
|
+
& + & {
|
|
632
|
+
padding-top: $space-base;
|
|
633
|
+
margin-top: $space-base;
|
|
634
|
+
border-top-width: 1px;
|
|
635
|
+
}
|
|
636
|
+
}
|
|
637
|
+
.q-list-item {
|
|
638
|
+
$this: &;
|
|
639
|
+
display: flex;
|
|
640
|
+
gap: 0.25rem;
|
|
641
|
+
align-items: center;
|
|
642
|
+
padding: 5px 6px;
|
|
643
|
+
list-style: none;
|
|
644
|
+
line-height: 15px;
|
|
645
|
+
word-wrap: break-word;
|
|
646
|
+
-webkit-touch-callout: none;
|
|
647
|
+
width: inherit;
|
|
648
|
+
cursor: pointer;
|
|
649
|
+
border-radius: $border-radius;
|
|
650
|
+
outline: none;
|
|
651
|
+
&--disabled {
|
|
652
|
+
cursor: not-allowed;
|
|
653
|
+
pointer-events: none;
|
|
654
|
+
opacity: 0.5;
|
|
655
|
+
}
|
|
656
|
+
&:hover,
|
|
657
|
+
&:focus-visible,
|
|
658
|
+
&--highlighted {
|
|
659
|
+
background-color: var(--q-theme-primary-light);
|
|
660
|
+
}
|
|
661
|
+
&--selected {
|
|
662
|
+
background-color: rgb(var(--q-theme-primary-rgb) / 0.24);
|
|
663
|
+
&:hover,
|
|
664
|
+
&:focus-visible,
|
|
665
|
+
&--highlighted {
|
|
666
|
+
background-color: rgb(var(--q-theme-primary-rgb) / 0.39);
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
em {
|
|
670
|
+
font-style: normal;
|
|
671
|
+
text-decoration: underline;
|
|
672
|
+
}
|
|
673
|
+
&__check {
|
|
674
|
+
margin-left: auto;
|
|
675
|
+
}
|
|
676
|
+
& + & {
|
|
677
|
+
margin-top: 1px;
|
|
678
|
+
}
|
|
679
|
+
}
|
|
493
680
|
$overlay-border-width: 1px;
|
|
494
681
|
$overlay-arrow-width: 1rem;
|
|
495
682
|
$overlay-arrow-height: 0.5rem;
|
|
@@ -499,12 +686,11 @@ $overlay-arrow-height: 0.5rem;
|
|
|
499
686
|
--q-overlay-color: var(--q-theme-on-background);
|
|
500
687
|
--q-overlay-border-color: rgb(var(--q-theme-on-background-rgb) / 0.1);
|
|
501
688
|
position: absolute;
|
|
689
|
+
z-index: 1070;
|
|
502
690
|
&__content {
|
|
503
691
|
display: block;
|
|
504
692
|
position: relative;
|
|
505
|
-
|
|
506
|
-
width: max-content;
|
|
507
|
-
z-index: 1070;
|
|
693
|
+
width: 100%;
|
|
508
694
|
background-color: var(--q-overlay-bg);
|
|
509
695
|
color: var(--q-overlay-color);
|
|
510
696
|
background-clip: padding-box;
|
|
@@ -648,6 +834,67 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
|
|
|
648
834
|
.q-popover.q-overlay--bottom .q-overlay__arrow::after {
|
|
649
835
|
border-bottom-color: $popover-header-bg;
|
|
650
836
|
}
|
|
837
|
+
.q-select {
|
|
838
|
+
$this: &;
|
|
839
|
+
&:not(#{$this}--readonly) {
|
|
840
|
+
background-color: transparent;
|
|
841
|
+
}
|
|
842
|
+
&:not(#{$this}--readonly):not(#{$this}--disabled) {
|
|
843
|
+
cursor: pointer;
|
|
844
|
+
}
|
|
845
|
+
&__placeholder {
|
|
846
|
+
font-style: italic;
|
|
847
|
+
color: rgb(var(--q-theme-on-background-rgb) / 0.5);
|
|
848
|
+
}
|
|
849
|
+
&--expanded {
|
|
850
|
+
#{$this}__chevron {
|
|
851
|
+
transform: rotate(-180deg);
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.q-input__prepend {
|
|
856
|
+
padding-left: 6px;
|
|
857
|
+
padding-right: $space-base;
|
|
858
|
+
}
|
|
859
|
+
}
|
|
860
|
+
.q-select__clear,
|
|
861
|
+
.q-select__chevron,
|
|
862
|
+
.q-select__search-icon {
|
|
863
|
+
opacity: 0.5;
|
|
864
|
+
}
|
|
865
|
+
.q-select__clear,
|
|
866
|
+
.q-select__chevron {
|
|
867
|
+
&:hover {
|
|
868
|
+
opacity: 1;
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
.q-select__chevron {
|
|
872
|
+
transition: all 0.2s;
|
|
873
|
+
}
|
|
874
|
+
.q-select__body {
|
|
875
|
+
display: flex;
|
|
876
|
+
flex-direction: column;
|
|
877
|
+
align-items: center;
|
|
878
|
+
gap: $space-base;
|
|
879
|
+
width: 100%;
|
|
880
|
+
padding: $space-base 0;
|
|
881
|
+
.q-list-item {
|
|
882
|
+
width: calc(100% - 2 * $space-base);
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
.q-select__search {
|
|
886
|
+
width: calc(100% - 2 * $space-base);
|
|
887
|
+
&:focus-within {
|
|
888
|
+
outline: none;
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
.q-select__items {
|
|
892
|
+
max-height: 240px;
|
|
893
|
+
}
|
|
894
|
+
.q-select__loader,
|
|
895
|
+
.q-select__empty {
|
|
896
|
+
margin: calc(4 * $space-base) 0;
|
|
897
|
+
}
|
|
651
898
|
$spinner-color: var(--q-theme-primary);
|
|
652
899
|
.q-spinner-loader {
|
|
653
900
|
display: flex;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"primitive.d.ts","sourceRoot":"","sources":["../../src/types/primitive.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA"}
|
package/lib/utils/color.d.ts
CHANGED
|
@@ -32,51 +32,43 @@ export type ColorScheme = {
|
|
|
32
32
|
/**
|
|
33
33
|
* Represents a color in RGB space.
|
|
34
34
|
*/
|
|
35
|
-
export
|
|
36
|
-
/**
|
|
37
|
-
* Red component of the color, in the range [0, 255].
|
|
38
|
-
*/
|
|
35
|
+
export type RGB = {
|
|
39
36
|
r: number;
|
|
40
|
-
/**
|
|
41
|
-
* Green component of the color, in the range [0, 255].
|
|
42
|
-
*/
|
|
43
37
|
g: number;
|
|
44
|
-
/**
|
|
45
|
-
* Blue component of the color, in the range [0, 255].
|
|
46
|
-
*/
|
|
47
38
|
b: number;
|
|
48
|
-
|
|
49
|
-
* Constructs a new color with the specified red, green, and blue components.
|
|
50
|
-
* @param r Red component of the color, in the range [0, 255].
|
|
51
|
-
* @param g Green component of the color, in the range [0, 255].
|
|
52
|
-
* @param b Blue component of the color, in the range [0, 255].
|
|
53
|
-
*/
|
|
54
|
-
constructor(r: number, g: number, b: number);
|
|
55
|
-
}
|
|
39
|
+
};
|
|
56
40
|
/**
|
|
57
|
-
*
|
|
58
|
-
* @param color A hex string representing the color, e.g., "#aabbcc".
|
|
59
|
-
* @returns A `Color` object representing the parsed color.
|
|
41
|
+
* Represents a color in HSL space.
|
|
60
42
|
*/
|
|
61
|
-
export
|
|
43
|
+
export type HSL = {
|
|
44
|
+
h: number;
|
|
45
|
+
s: number;
|
|
46
|
+
l: number;
|
|
47
|
+
};
|
|
62
48
|
/**
|
|
63
|
-
*
|
|
64
|
-
* @param color
|
|
65
|
-
* @returns A
|
|
49
|
+
* Parses a color from a hex string.
|
|
50
|
+
* @param color A hex string representing the color, e.g., "#aabbcc".
|
|
51
|
+
* @returns A `RGB` object representing the parsed color.
|
|
66
52
|
*/
|
|
67
|
-
export declare function
|
|
53
|
+
export declare function parseColor(color: string): RGB;
|
|
68
54
|
/**
|
|
69
55
|
* Lightens a color by a specified amount.
|
|
70
|
-
* @param
|
|
56
|
+
* @param rgb The color to lighten.
|
|
71
57
|
* @param amount The amount to lighten the color by, in the range [0, 100].
|
|
72
58
|
* @returns The lightened color.
|
|
73
59
|
*/
|
|
74
|
-
export declare function lighten(
|
|
60
|
+
export declare function lighten(rgb: RGB, amount: number): RGB;
|
|
75
61
|
/**
|
|
76
62
|
* Darkens a color by a specified amount.
|
|
77
|
-
* @param
|
|
63
|
+
* @param rgb The color to darken.
|
|
78
64
|
* @param amount The amount to darken the color by, in the range [0, 100].
|
|
79
65
|
* @returns The darkened color.
|
|
80
66
|
*/
|
|
81
|
-
export declare function darken(
|
|
67
|
+
export declare function darken(rgb: RGB, amount: number): RGB;
|
|
68
|
+
/**
|
|
69
|
+
* Converts a `Color` object to a hex string.
|
|
70
|
+
* @param rgb The color to convert.
|
|
71
|
+
* @returns A hex string representing the color.
|
|
72
|
+
*/
|
|
73
|
+
export declare function colorToHex(rgb: RGB): string;
|
|
82
74
|
//# sourceMappingURL=color.d.ts.map
|
package/lib/utils/color.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IAEzB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IAEnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IAEpB,SAAS,EAAE,MAAM,CAAA;IAGjB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IAEd,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;GAEG;AACH,
|
|
1
|
+
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IAEzB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IAEnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IAEpB,SAAS,EAAE,MAAM,CAAA;IAGjB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IAEd,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,GAAG,GAAG;IACjB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACT,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,GAAG,GAAG;IACjB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACT,CAAA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAe7C;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAYrD;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAYpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAM3C"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@quidgest/ui",
|
|
3
3
|
"private": false,
|
|
4
4
|
"description": "Quidgest UI kit",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.4.0",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Quidgest"
|
|
8
8
|
},
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"vue-tsc": "^1.8.15"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
|
-
"vue": "^3.
|
|
88
|
+
"vue": "^3.3.4"
|
|
89
89
|
},
|
|
90
90
|
"eslintConfig": {
|
|
91
91
|
"extends": [
|
package/lib/utils/getUid.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getUid.d.ts","sourceRoot":"","sources":["../../src/utils/getUid.ts"],"names":[],"mappings":"AASA,wBAAgB,MAAM,IAAI,MAAM,CAS/B;yBATe,MAAM"}
|