UNPKG

quasar-framework

Version:

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

2,182 lines 263 kB
/* * Quasar Framework v0.17.20 * (c) 2016-present Razvan Stoenescu * Released under the MIT License. */ *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; } html, body, #q-app { width: 100%; } html[dir=ltr], [dir=ltr] body, [dir=ltr] #q-app { direction: ltr; } html[dir=rtl], [dir=rtl] body, [dir=rtl] #q-app { direction: rtl; } html, body { -webkit-box-sizing: border-box; box-sizing: border-box; } html[dir], [dir] body { margin: 0; } input[type='text'], input[type='email'], input[type='search'], input[type='password'] { -webkit-appearance: none; -moz-appearance: none /* mobile firefox too! */; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio:not([controls]) { display: none; height: 0; } abbr[title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } [dir] abbr[title] { border-bottom: none; } dfn { font-style: italic; } [dir] img { border-style: none; } svg:not(:root) { overflow: hidden; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } button, input, select, textarea { font: inherit; } [dir] button, [dir] input, [dir] select, [dir] textarea { margin: 0; } optgroup { font-weight: bold; } button, input, select { overflow: visible; } [dir] button::-moz-focus-inner, [dir] input::-moz-focus-inner { border: 0; padding: 0; } button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; } textarea { overflow: auto; } input[type='search'] { -webkit-appearance: textfield; } input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } .q-icon { line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; } [dir=ltr] .q-icon { direction: ltr; } [dir=rtl] .q-icon { direction: rtl; } .q-icon, .material-icons { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: inherit; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; } [dir] .q-icon, [dir] .material-icons { cursor: inherit; } .q-actionsheet { max-width: 95%; overflow: hidden; } [dir] .q-actionsheet { border-radius: 13px; background: #fff; margin-bottom: 10px; } [dir=ltr] .q-actionsheet { margin-left: auto; margin-right: auto; } [dir=rtl] .q-actionsheet { margin-right: auto; margin-left: auto; } .q-actionsheet-title { min-height: 48px; color: #777; color: var(--q-color-faded); } [dir] .q-actionsheet-title { padding: 0 16px; text-align: center; } [dir] .q-actionsheet-grid { padding: 8px 16px; } [dir] .q-actionsheet-grid .q-item-separator-component { margin: 18px 0; } .q-actionsheet-grid-item { transition: background 0.3s; } [dir] .q-actionsheet-grid-item { padding: 8px 16px; -webkit-transition: background 0.3s; } .q-actionsheet-grid-item:hover, .q-actionsheet-grid-item:focus { outline: 0; } [dir] .q-actionsheet-grid-item:hover, [dir] .q-actionsheet-grid-item:focus { background: #d0d0d0; } .q-actionsheet-grid-item i, .q-actionsheet-grid-item img { font-size: 48px; } [dir] .q-actionsheet-grid-item i, [dir] .q-actionsheet-grid-item img { margin-bottom: 4px; } .q-actionsheet-grid-item .avatar { width: 48px; height: 48px; } .q-actionsheet-grid-item span { color: #777; color: var(--q-color-faded); } .q-loading-bar { position: fixed; z-index: 9998; transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.5s; transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1); } [dir] .q-loading-bar { -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1); } .q-loading-bar.top { left: 0 /* rtl:ignore */; right: 0 /* rtl:ignore */; top: 0; width: 100%; } .q-loading-bar.bottom { left: 0 /* rtl:ignore */; right: 0 /* rtl:ignore */; bottom: 0; width: 100%; } .q-loading-bar.right { top: 0; bottom: 0; height: 100%; } [dir=ltr] .q-loading-bar.right { right: 0; } [dir=rtl] .q-loading-bar.right { left: 0; } .q-loading-bar.left { top: 0; bottom: 0; height: 100%; } [dir=ltr] .q-loading-bar.left { left: 0; } [dir=rtl] .q-loading-bar.left { right: 0; } .q-alert { -webkit-box-shadow: none; } [dir] .q-alert { border-radius: 4px; box-shadow: none; } .q-alert .avatar { width: 32px; height: 32px; } .q-alert-side, .q-alert-content { font-size: 16px; word-break: break-word; } [dir] .q-alert-side, [dir] .q-alert-content { padding: 12px; } .q-alert-side { font-size: 24px; } [dir] .q-alert-side { background: rgba(0,0,0,0.1); } [dir=ltr] .q-alert-actions { padding: 12px 12px 12px 0; } [dir=rtl] .q-alert-actions { padding: 12px 0 12px 12px; } .q-alert-detail { font-size: 12px; } .q-breadcrumbs .q-icon, .q-breadcrumbs .q-breadcrumbs-separator { font-size: 150%; } .q-breadcrumbs-last a { pointer-events: none; } [dir=rtl] .q-breadcrumbs-separator .q-icon { -webkit-transform: scaleX(-1) /* rtl:ignore */; transform: scaleX(-1) /* rtl:ignore */; } .q-btn { outline: 0; vertical-align: middle; font-size: 14px; text-decoration: none; color: inherit; transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); min-height: 2.572em; } [dir] .q-btn { border: 0; cursor: pointer; padding: 4px 16px; background: transparent; -webkit-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); } button.q-btn { -webkit-appearance: button; } a.q-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .q-btn .q-icon, .q-btn .q-spinner { font-size: 1.4em; } .q-btn .q-btn-inner { transition: opacity 0.6s; } [dir] .q-btn .q-btn-inner { -webkit-transition: opacity 0.6s; } .q-btn .q-btn-inner--hidden { opacity: 0; } .q-btn .q-btn-inner:before { content: ''; } .q-btn.disabled { opacity: 0.7 !important; } .q-btn-progress { transition: all 0.3s; height: 100%; } [dir] .q-btn-progress { -webkit-transition: all 0.3s; background: rgba(255,255,255,0.25); } [dir] .q-btn-progress.q-btn-dark-progress { background: rgba(0,0,0,0.2); } [dir] .q-btn-rectangle { border-radius: 4px; } [dir] .q-btn-outline { border: 1px solid currentColor; background: transparent !important; } [dir] .q-btn-push { border-radius: 7px; border-bottom: 3px solid rgba(0,0,0,0.15); } .q-btn-push:active:not(.disabled), .q-btn-push.active:not(.disabled) { -webkit-transform: translateY(3px); } [dir] .q-btn-push:active:not(.disabled), [dir] .q-btn-push.active:not(.disabled) { transform: translateY(3px); border-bottom-color: transparent; } .q-btn-push .q-focus-helper, .q-btn-push .q-ripple-container { height: auto; bottom: -3px; } [dir] .q-btn-rounded { border-radius: 28px; } .q-btn-round { min-height: 0; height: 3em; width: 3em; } [dir] .q-btn-round { border-radius: 50%; padding: 0; } .q-btn-dense { min-height: 2em; } [dir] .q-btn-dense { padding: 0.285em; } .q-btn-dense.q-btn-round { height: 2.4em; width: 2.4em; } [dir] .q-btn-dense.q-btn-round { padding: 0; } [dir=ltr] .q-btn-dense .on-left { margin-right: 6px; } [dir=rtl] .q-btn-dense .on-left { margin-left: 6px; } [dir=ltr] .q-btn-dense .on-right { margin-left: 6px; } [dir=rtl] .q-btn-dense .on-right { margin-right: 6px; } .q-btn-fab .q-icon, .q-btn-fab-mini .q-icon { font-size: 24px; } .q-btn-fab { height: 56px; width: 56px; } .q-btn-fab-mini { height: 40px; width: 40px; } .q-transition--fade-leave-active { position: absolute; } .q-transition--fade-enter-active, .q-transition--fade-leave-active { transition: opacity 0.4s ease-out; } [dir] .q-transition--fade-enter-active, [dir] .q-transition--fade-leave-active { -webkit-transition: opacity 0.4s ease-out; } .q-transition--fade-enter, .q-transition--fade-leave, .q-transition--fade-leave-to { opacity: 0; } [dir] .q-btn-dropdown-split .q-btn-dropdown-arrow { padding: 0 4px; } [dir=ltr] .q-btn-dropdown-split .q-btn-dropdown-arrow { border-left: 1px solid rgba(255,255,255,0.3); } [dir=rtl] .q-btn-dropdown-split .q-btn-dropdown-arrow { border-right: 1px solid rgba(255,255,255,0.3); } .q-btn-group { vertical-align: middle; } [dir] .q-btn-group { border-radius: 4px; } [dir=ltr] .q-btn-group > .q-btn-group > .q-btn:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } [dir=rtl] .q-btn-group > .q-btn-group > .q-btn:first-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } [dir=ltr] .q-btn-group > .q-btn-group > .q-btn:last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } [dir=rtl] .q-btn-group > .q-btn-group > .q-btn:last-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } [dir=ltr] .q-btn-group > .q-btn-group:not(:first-child) > .q-btn:first-child { border-left: 0; } [dir=rtl] .q-btn-group > .q-btn-group:not(:first-child) > .q-btn:first-child { border-right: 0; } [dir=ltr] .q-btn-group > .q-btn-group:not(:last-child) > .q-btn:last-child { border-right: 0; } [dir=rtl] .q-btn-group > .q-btn-group:not(:last-child) > .q-btn:last-child { border-left: 0; } [dir=ltr] .q-btn-group > .q-btn-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=rtl] .q-btn-group > .q-btn-item:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=ltr] .q-btn-group > .q-btn-item + .q-btn-item { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] .q-btn-group > .q-btn-item + .q-btn-item { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir] .q-btn-group-push { border-radius: 7px; } .q-btn-group-push > .q-btn-push .q-btn-inner { transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); } [dir] .q-btn-group-push > .q-btn-push .q-btn-inner { -webkit-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); } .q-btn-group-push > .q-btn-push:active:not(.disabled), .q-btn-group-push > .q-btn-push.active:not(.disabled) { -webkit-transform: translateY(0); } [dir] .q-btn-group-push > .q-btn-push:active:not(.disabled), [dir] .q-btn-group-push > .q-btn-push.active:not(.disabled) { border-bottom-color: rgba(0,0,0,0.15); transform: translateY(0); } .q-btn-group-push > .q-btn-push:active:not(.disabled) .q-btn-inner, .q-btn-group-push > .q-btn-push.active:not(.disabled) .q-btn-inner { -webkit-transform: translateY(3px); } [dir] .q-btn-group-push > .q-btn-push:active:not(.disabled) .q-btn-inner, [dir] .q-btn-group-push > .q-btn-push.active:not(.disabled) .q-btn-inner { transform: translateY(3px); } [dir] .q-btn-group-rounded { border-radius: 28px; } [dir=ltr] .q-btn-group-outline > .q-btn-item + .q-btn-item { border-left: 0; } [dir=rtl] .q-btn-group-outline > .q-btn-item + .q-btn-item { border-right: 0; } [dir=ltr] .q-btn-group-outline > .q-btn-item:not(:last-child) { border-right: 0; } [dir=rtl] .q-btn-group-outline > .q-btn-item:not(:last-child) { border-left: 0; } .q-card { -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12); vertical-align: top; } [dir] .q-card { border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12); } [dir=ltr] .q-card > div:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } [dir=rtl] .q-card > div:first-child { border-top-right-radius: inherit; border-top-left-radius: inherit; } [dir=ltr] .q-card > div:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } [dir=rtl] .q-card > div:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } [dir] .q-card > .q-list { border: 0; } .q-card-separator { height: 1px; } [dir] .q-card-separator { background: rgba(0,0,0,0.1); } [dir] .q-card-separator.inset { margin: 0 16px; } [dir] .q-card-container { padding: 16px; } .q-card-title { font-size: 18px; font-weight: 400; letter-spacing: normal; line-height: 2rem; } .q-card-title:empty { display: none; } .q-card-subtitle, .q-card-title-extra { font-size: 14px; color: rgba(0,0,0,0.4); } .q-card-subtitle .q-icon, .q-card-title-extra .q-icon { font-size: 24px; } .q-card-main { font-size: 14px; } [dir] .q-card-primary + .q-card-main { padding-top: 0; } [dir] .q-card-actions { padding: 8px; } [dir] .q-card-actions .q-btn { padding: 0 8px; } [dir=ltr] .q-card-actions-horiz .q-btn:not(:last-child) { margin-right: 8px; } [dir=rtl] .q-card-actions-horiz .q-btn:not(:last-child) { margin-left: 8px; } [dir] .q-card-actions-vert .q-btn + .q-btn { margin-top: 4px; } .q-card-media { overflow: hidden; } .q-card-media > img { display: block; width: 100%; max-width: 100%; } [dir] .q-card-media > img { border: 0; } .q-card-media-overlay { color: #fff; } [dir] .q-card-media-overlay { background: rgba(0,0,0,0.47); } .q-card-media-overlay .q-card-subtitle { color: #fff; } [dir] .q-card-dark .q-card-separator { background: rgba(255,255,255,0.2); } .q-card-dark .q-card-subtitle, .q-card-dark .q-card-title-extra { color: rgba(255,255,255,0.6); } .q-carousel { overflow: hidden; position: relative; } .q-carousel-inner { position: relative; height: 100%; } .q-carousel-slide { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } [dir] .q-carousel-slide { margin: 0; padding: 18px; } .q-carousel-track { will-change: transform; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; } [dir] .q-carousel-track { padding: 0; margin: 0; } .q-carousel-track.infinite-left > div:nth-last-child(2) { -webkit-box-ordinal-group: -999; -ms-flex-order: -1000; order: -1000; } [dir=ltr] .q-carousel-track.infinite-left > div:nth-last-child(2) { margin-left: -100%; } [dir=rtl] .q-carousel-track.infinite-left > div:nth-last-child(2) { margin-right: -100%; } .q-carousel-track.infinite-right > div:nth-child(2) { -webkit-box-ordinal-group: 1001; -ms-flex-order: 1000; order: 1000; } .q-carousel-left-arrow, .q-carousel-right-arrow { top: 50%; -webkit-transform: translateY(-50%); } [dir] .q-carousel-left-arrow, [dir] .q-carousel-right-arrow { transform: translateY(-50%); background: rgba(0,0,0,0.3); } [dir=ltr] .q-carousel-left-arrow { left: 5px; } [dir=rtl] .q-carousel-left-arrow { right: 5px; } [dir=ltr] .q-carousel-right-arrow { right: 5px; } [dir=rtl] .q-carousel-right-arrow { left: 5px; } [dir] .q-carousel-quick-nav { padding: 2px 0; background: rgba(0,0,0,0.3); } .q-carousel-quick-nav .q-icon { font-size: 18px !important; } .q-carousel-quick-nav .q-btn.inactive { opacity: 0.5; } .q-carousel-quick-nav .q-btn.inactive .q-icon { font-size: 14px !important; } .q-carousel-thumbnails { will-change: transform; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform: translateY(105%); width: 100%; height: auto; max-height: 60%; overflow: auto; -webkit-box-shadow: 0 -3px 6px rgba(0,0,0,0.16), 0 -5px 6px rgba(0,0,0,0.23); } [dir] .q-carousel-thumbnails { -webkit-transition: -webkit-transform 0.3s; transform: translateY(105%); background: #000; padding: 0.5rem; text-align: center; box-shadow: 0 -3px 6px rgba(0,0,0,0.16), 0 -5px 6px rgba(0,0,0,0.23); } .q-carousel-thumbnails.active { -webkit-transform: translateY(0); } [dir] .q-carousel-thumbnails.active { transform: translateY(0); } .q-carousel-thumbnails img { height: auto; width: 100%; display: block; opacity: 0.5; will-change: opacity; transition: opacity 0.3s; } [dir] .q-carousel-thumbnails img { -webkit-transition: opacity 0.3s; cursor: pointer; border: 1px solid #000; } .q-carousel-thumbnails > div > div { -webkit-box-flex: 0; -ms-flex: 0 0 108px; flex: 0 0 108px; } .q-carousel-thumbnails > div > div.active img, .q-carousel-thumbnails > div > div img.active { opacity: 1; } [dir] .q-carousel-thumbnails > div > div.active img, [dir] .q-carousel-thumbnails > div > div img.active { border-color: #fff; } .q-carousel-thumbnail-btn { top: 5px; } [dir] .q-carousel-thumbnail-btn { background: rgba(0,0,0,0.3); } [dir=ltr] .q-carousel-thumbnail-btn { right: 5px; } [dir=rtl] .q-carousel-thumbnail-btn { left: 5px; } body.desktop .q-carousel-thumbnails img:hover { opacity: 1; } .q-message-name, .q-message-stamp, .q-message-label { font-size: small; } [dir=ltr] .q-message-name { padding-left: 11px; } [dir=rtl] .q-message-name { padding-right: 11px; } [dir] .q-message-label { margin: 24px 0; } .q-message-stamp { color: inherit; opacity: 0.6; display: none; } [dir] .q-message-stamp { margin-top: 4px; } .q-message-avatar { width: 48px; height: 48px; } [dir] .q-message-avatar { border-radius: 50%; } [dir] .q-message { margin-bottom: 8px; } [dir] .q-message:first-child .q-message-label { margin-top: 0; } [dir=ltr] .q-message-received .q-message-avatar { margin-right: 8px; } [dir=rtl] .q-message-received .q-message-avatar { margin-left: 8px; } .q-message-received .q-message-text { color: #81c784; } [dir] .q-message-received .q-message-text { border-radius: 20px; } [dir=ltr] .q-message-received .q-message-text:last-child:before { left: -7px; border-left: 20px solid currentColor; border-bottom-right-radius: 16px 14px; } [dir=rtl] .q-message-received .q-message-text:last-child:before { right: -7px; border-right: 20px solid currentColor; border-bottom-left-radius: 16px 14px; } [dir=ltr] .q-message-received .q-message-text:last-child:after { left: 23px; border-bottom-right-radius: 10px; } [dir=rtl] .q-message-received .q-message-text:last-child:after { right: 23px; border-bottom-left-radius: 10px; } .q-message-received .q-message-text-content { color: #000; } [dir=ltr] .q-message-sent .q-message-name { text-align: right; padding-right: 11px; } [dir=rtl] .q-message-sent .q-message-name { text-align: left; padding-left: 11px; } [dir=ltr] .q-message-sent .q-message-avatar { margin-left: 8px; } [dir=rtl] .q-message-sent .q-message-avatar { margin-right: 8px; } .q-message-sent .q-message-container { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .q-message-sent .q-message-text { color: #e0e0e0; } [dir] .q-message-sent .q-message-text { border-radius: 20px; } [dir=ltr] .q-message-sent .q-message-text:last-child:before { right: -7px; border-right: 20px solid currentColor; border-bottom-left-radius: 16px 14px; } [dir=rtl] .q-message-sent .q-message-text:last-child:before { left: -7px; border-left: 20px solid currentColor; border-bottom-right-radius: 16px 14px; } [dir=ltr] .q-message-sent .q-message-text:last-child:after { right: -37px; border-bottom-left-radius: 10px; } [dir=rtl] .q-message-sent .q-message-text:last-child:after { left: -37px; border-bottom-right-radius: 10px; } .q-message-sent .q-message-text-content { color: #000; } .q-message-text { line-height: 1.2; word-break: break-word; position: relative; -webkit-transform: translate3d(0, 0, 0); } [dir] .q-message-text { background: currentColor; padding: 9px 11px; transform: translate3d(0, 0, 0); } [dir] .q-message-text + .q-message-text { margin-top: 3px; } .q-message-text:last-child { min-height: 48px; } .q-message-text:last-child .q-message-stamp { display: block; } .q-message-text:last-child:before, .q-message-text:last-child:after { content: ''; position: absolute; bottom: -2px; height: 20px; -webkit-transform: translate(0, -2px); } [dir] .q-message-text:last-child:before, [dir] .q-message-text:last-child:after { transform: translate(0, -2px); } .q-message-text:last-child:after { width: 7px; } [dir] .q-message-text:last-child:after { background: #fff; } [dir=ltr] .q-message-text:last-child:after { -webkit-transform: translate(-30px, -2px); transform: translate(-30px, -2px); } [dir=rtl] .q-message-text:last-child:after { -webkit-transform: translate(30px, -2px); transform: translate(30px, -2px); } .q-checkbox-icon { height: 21px; width: 21px; font-size: 21px; opacity: 0; } .q-chip { min-height: 32px; max-width: 100%; font-size: 14px; vertical-align: middle; color: #000; } [dir] .q-chip { padding: 0 12px; border: #e0e0e0; border-radius: 2rem; background: #eee; } .q-chip:focus .q-chip-close { opacity: 0.8; } .q-chip .q-icon { font-size: 24px; line-height: 1; } .q-chip-main { line-height: initial; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .q-chip-side { height: 32px; width: 32px; min-width: 32px; overflow: hidden; } [dir] .q-chip-side { border-radius: 50%; } .q-chip-side img { width: 100%; height: 100%; } [dir=ltr] .q-chip-left { margin-left: -12px; margin-right: 8px; } [dir=rtl] .q-chip-left { margin-right: -12px; margin-left: 8px; } [dir=ltr] .q-chip-right { margin-left: 2px; margin-right: -12px; } [dir=rtl] .q-chip-right { margin-right: 2px; margin-left: -12px; } [dir] .q-chip-square { border-radius: 2px; } .q-chip-floating { position: absolute; top: -0.3em; pointer-events: none; z-index: 1; } [dir=ltr] .q-chip-floating { right: -0.3em; } [dir=rtl] .q-chip-floating { left: -0.3em; } .q-chip-tag { position: relative; } [dir=ltr] .q-chip-tag { padding-left: 1.7rem; } [dir=rtl] .q-chip-tag { padding-right: 1.7rem; } .q-chip-tag:after { content: ''; position: absolute; top: 50%; width: 0.5rem; height: 0.5rem; -webkit-box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.3); } [dir] .q-chip-tag:after { margin-top: -0.25rem; background: #fff; box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.3); border-radius: 50%; } [dir=ltr] .q-chip-tag:after { left: 0.5rem; } [dir=rtl] .q-chip-tag:after { right: 0.5rem; } .q-chip-pointing { position: relative; z-index: 0; } .q-chip-pointing:before { content: ''; z-index: -1; width: 16px; height: 16px; position: absolute; } [dir] .q-chip-pointing:before { background: inherit; } [dir] .q-chip-pointing-up { margin-top: 0.8rem; } .q-chip-pointing-up:before { top: 0; } [dir=ltr] .q-chip-pointing-up:before { left: 50%; -webkit-transform: translateX(-50%) translateY(-22%) rotate(45deg); transform: translateX(-50%) translateY(-22%) rotate(45deg); } [dir=rtl] .q-chip-pointing-up:before { right: 50%; -webkit-transform: translateX(50%) translateY(-22%) rotate(-45deg); transform: translateX(50%) translateY(-22%) rotate(-45deg); } [dir] .q-chip-pointing-down { margin-bottom: 0.8rem; } .q-chip-pointing-down:before { top: 100%; } [dir=ltr] .q-chip-pointing-down:before { right: auto; left: 50%; -webkit-transform: translateX(-50%) translateY(-78%) rotate(45deg); transform: translateX(-50%) translateY(-78%) rotate(45deg); } [dir=rtl] .q-chip-pointing-down:before { left: auto; right: 50%; -webkit-transform: translateX(50%) translateY(-78%) rotate(-45deg); transform: translateX(50%) translateY(-78%) rotate(-45deg); } [dir=ltr] .q-chip-pointing-right { margin-right: 0.8rem; } [dir=rtl] .q-chip-pointing-right { margin-left: 0.8rem; } .q-chip-pointing-right:before { top: 50%; bottom: auto; } [dir=ltr] .q-chip-pointing-right:before { right: 2px; left: auto; -webkit-transform: translateX(33%) translateY(-50%) rotate(45deg); transform: translateX(33%) translateY(-50%) rotate(45deg); } [dir=rtl] .q-chip-pointing-right:before { left: 2px; right: auto; -webkit-transform: translateX(-33%) translateY(-50%) rotate(-45deg); transform: translateX(-33%) translateY(-50%) rotate(-45deg); } [dir=ltr] .q-chip-pointing-left { margin-left: 0.8rem; } [dir=rtl] .q-chip-pointing-left { margin-right: 0.8rem; } .q-chip-pointing-left:before { top: 50%; bottom: auto; } [dir=ltr] .q-chip-pointing-left:before { left: 2px; right: auto; -webkit-transform: translateX(-33%) translateY(-50%) rotate(45deg); transform: translateX(-33%) translateY(-50%) rotate(45deg); } [dir=rtl] .q-chip-pointing-left:before { right: 2px; left: auto; -webkit-transform: translateX(33%) translateY(-50%) rotate(-45deg); transform: translateX(33%) translateY(-50%) rotate(-45deg); } .q-chip-detail { opacity: 0.8; } [dir] .q-chip-detail { background: rgba(0,0,0,0.1); padding: 0 5px; border-radius: inherit; } [dir=ltr] .q-chip-detail { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=rtl] .q-chip-detail { border-top-left-radius: 0; border-bottom-left-radius: 0; } .q-chip-small { min-height: 26px; } .q-chip-small .q-chip-main { line-height: initial; } [dir] .q-chip-small .q-chip-main { padding: 4px 1px; } .q-chip-small .q-chip-side { height: 26px; width: 26px; min-width: 26px; } .q-chip-small .q-chip-icon { font-size: 16px; } .q-chip-dense { min-height: 1px; font-size: 12px; } [dir] .q-chip-dense { padding: 0 3px; } [dir=ltr] .q-chip-dense.q-chip-tag { padding-left: 1.3rem; } [dir=rtl] .q-chip-dense.q-chip-tag { padding-right: 1.3rem; } .q-chip-dense.q-chip-pointing:before { width: 9px; height: 9px; } [dir] .q-chip-dense .q-chip-main { padding: 1px; } .q-chip-dense .q-chip-side { height: 18px; width: 18px; min-width: 16px; font-size: 14px; } [dir=ltr] .q-chip-dense .q-chip-left { margin-left: -3px; margin-right: 2px; } [dir=rtl] .q-chip-dense .q-chip-left { margin-right: -3px; margin-left: 2px; } [dir=ltr] .q-chip-dense .q-chip-right { margin-left: 2px; margin-right: -2px; } [dir=rtl] .q-chip-dense .q-chip-right { margin-right: 2px; margin-left: -2px; } .q-chip-dense .q-icon { font-size: 16px; } [dir] .q-input-chips { margin-top: -1px; margin-bottom: -1px; } [dir] .q-input-chips .q-chip { margin: 1px; } .q-input-chips input.q-input-target { min-width: 70px !important; } [dir] .q-collapsible-sub-item { padding: 8px 16px; } [dir=ltr] .q-collapsible-sub-item.indent { padding-left: 48px; padding-right: 0; } [dir=rtl] .q-collapsible-sub-item.indent { padding-right: 48px; padding-left: 0; } [dir] .q-collapsible-sub-item .q-card { margin-bottom: 0; } [dir] .q-collapsible.router-link-active > .q-item { background: rgba(189,189,189,0.4); } .q-collapsible { transition: padding 0.5s; } [dir] .q-collapsible { -webkit-transition: padding 0.5s; } [dir] .q-collapsible-popup-closed { padding: 0 15px; } [dir] .q-collapsible-popup-closed .q-collapsible-inner { border: 1px solid #e0e0e0; } [dir] .q-collapsible-popup-closed + .q-collapsible-popup-closed .q-collapsible-inner { border-top: 0; } [dir] .q-collapsible-popup-opened { padding: 15px 0; } .q-collapsible-popup-opened .q-collapsible-inner { -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12); } [dir] .q-collapsible-popup-opened .q-collapsible-inner { box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12); } [dir] .q-collapsible-popup-opened + .q-collapsible-popup-opened, [dir] .q-collapsible-popup-opened:first-child { padding-top: 0; } [dir] .q-collapsible-popup-opened:last-child { padding-bottom: 0; } [dir] .q-collapsible-cursor-pointer > .q-collapsible-inner > .q-item { cursor: pointer; } .q-collapsible-toggle-icon { width: 1em; } [dir] .q-collapsible-toggle-icon { border-radius: 50%; text-align: center; } .q-color { max-width: 100vw; display: inline-block; width: 100%; } [dir] .q-color { border: 1px solid #e0e0e0; background: #fff; } .q-color-saturation { width: 100%; height: 123px; } [dir=ltr] .q-color-saturation-white { background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255,255,255,0))); background: linear-gradient(to right, #fff, rgba(255,255,255,0)); } [dir=rtl] .q-color-saturation-white { background: -webkit-gradient(linear, right top, left top, from(#fff), to(rgba(255,255,255,0))); background: linear-gradient(to left, #fff, rgba(255,255,255,0)); } [dir] .q-color-saturation-black { background: linear-gradient(to top, #000, rgba(0,0,0,0)); } [dir=ltr] .q-color-saturation-black { background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0,0,0,0))); } [dir=rtl] .q-color-saturation-black { background: -webkit-gradient(linear, right bottom, right top, from(#000), to(rgba(0,0,0,0))); } .q-color-saturation-circle { width: 10px; height: 10px; -webkit-box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4); } [dir] .q-color-saturation-circle { box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4); border-radius: 50%; } [dir=ltr] .q-color-saturation-circle { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px); } [dir=rtl] .q-color-saturation-circle { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } [dir] .q-color-swatch, [dir] .q-color-alpha .q-slider-track { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==") !important; } .q-color-swatch { position: relative; width: 32px; height: 32px; } [dir] .q-color-swatch { border-radius: 50%; background: #fff; border: 1px solid #e0e0e0; } .q-color-hue .q-slider-track { opacity: 1; height: 8px; } [dir] .q-color-hue .q-slider-track { border-radius: 2px; } [dir=ltr] .q-color-hue .q-slider-track { background: -webkit-gradient(linear, left top, right top, from(#f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(#f00)); background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } [dir=rtl] .q-color-hue .q-slider-track { background: -webkit-gradient(linear, right top, left top, from(#f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(#f00)); background: linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .q-color-hue .q-slider-track.active-track { opacity: 0; } .q-color-alpha .q-slider-track { position: relative; opacity: 1; height: 8px; } [dir] .q-color-alpha .q-slider-track { background: #fff; } .q-color-alpha .q-slider-track:after { content: ''; position: absolute; top: 0; bottom: 0; } [dir=ltr] .q-color-alpha .q-slider-track:after { left: 0; right: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(#757575)); background: linear-gradient(90deg, rgba(255,255,255,0), #757575); } [dir=rtl] .q-color-alpha .q-slider-track:after { right: 0; left: 0; background: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0)), to(#757575)); background: linear-gradient(-90deg, rgba(255,255,255,0), #757575); } .q-color-alpha .q-slider-track.active-track { opacity: 0; } .q-color-sliders { height: 66px; } .q-color-sliders .q-slider { height: 24px; } .q-color-sliders .q-slider-handle { height: 18px; width: 18px; -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); } [dir] .q-color-sliders .q-slider-handle { box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); } .q-color-sliders .q-slider-ring { display: none; } .q-color-inputs { font-size: 11px; color: #757575; } .q-color-inputs input { outline: 0; } [dir] .q-color-inputs input { border: 1px solid #e0e0e0; } [dir] .q-color-padding { padding: 0 2px; } [dir] .q-color-label { padding-top: 4px; } [dir] .q-color-dark { background: #000; border: 1px solid #424242; } .q-color-dark input { color: #bdbdbd; color: var(--q-color-light); } [dir] .q-color-dark input { background: #000; border: 1px solid #424242; border: 1px solid var(--q-color-dark); } .q-color-dark .q-color-inputs { color: #bdbdbd; color: var(--q-color-light); } [dir] .q-color-dark .q-color-swatch { border: 1px solid #424242; border: 1px solid var(--q-color-dark); } .q-datetime-input { min-width: 70px; } [dir] .q-datetime { border: 1px solid #e0e0e0; } .q-datetime.type-date, .q-datetime.type-datetime { min-width: 320px; } .q-datetime.type-time { min-width: 250px; } .q-datetime-content { height: 200px; position: relative; } .q-datetime-inner { font-size: 21px; overflow: hidden; -webkit-perspective: 1200px; perspective: 1200px; height: 100%; position: relative; direction: ltr /* rtl:ignore */; } [dir] .q-datetime-inner { padding: 0; } [dir=ltr] .q-datetime-inner { text-align: right; } [dir=rtl] .q-datetime-inner { text-align: left; } .q-datetime-col { display: block; overflow: visible; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; max-height: 100%; } .q-datetime-col-wrapper, .q-datetime-item { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.2s ease-out; } [dir] .q-datetime-col-wrapper, [dir] .q-datetime-item { -webkit-transition: all 0.2s ease-out; cursor: pointer; } .q-datetime-col-divider { max-height: 100%; width: 10px; } .q-datetime-col-month { width: 117px; } [dir=ltr] .q-datetime-col-month { text-align: left; } [dir=rtl] .q-datetime-col-month { text-align: right; } .q-datetime-col-day { width: 37px; } .q-datetime-col-year { width: 61px; } .q-datetime-col-hour { width: 37px; } .q-datetime-col-minute { width: 37px; } .q-datetime-item { font-size: 85%; height: 36px; line-height: 36px; color: rgba(0,0,0,0.87); position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; top: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: center center -110px; } [dir] .q-datetime-item { transform-origin: center center -110px; } [dir=ltr] .q-datetime-item { left: 0; } [dir=rtl] .q-datetime-item { right: 0; } [dir=rtl] .q-datetime-col-month .q-datetime-item { padding-right: 5px; } .q-datetime-mask { position: absolute; top: 0; bottom: 0; height: 100%; width: 100%; pointer-events: none; } [dir] .q-datetime-mask { background: linear-gradient(to top, #fff, rgba(255,255,255,0) 50%, #fff); } [dir=ltr] .q-datetime-mask { right: 0; left: 0; background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(50%, rgba(255,255,255,0)), to(#fff)); } [dir=rtl] .q-datetime-mask { left: 0; right: 0; background: -webkit-gradient(linear, right bottom, right top, from(#fff), color-stop(50%, rgba(255,255,255,0)), to(#fff)); } .q-datetime-highlight { height: 36px; position: absolute; width: 100%; top: 50%; pointer-events: none; } [dir] .q-datetime-highlight { margin-top: -18px; border-top: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; } [dir=ltr] .q-datetime-highlight { left: 0; right: 0; } [dir=rtl] .q-datetime-highlight { right: 0; left: 0; } [dir=ltr] .q-datetime-range.row .q-datetime-range-left { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=rtl] .q-datetime-range.row .q-datetime-range-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=ltr] .q-datetime-range.row .q-datetime-range-right { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] .q-datetime-range.row .q-datetime-range-right { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir] .q-datetime-range.column > div + div { margin-top: 10px; } [dir] .q-datetime-dark { background: #424242; background: var(--q-color-dark); } [dir] .q-datetime-dark .modal-buttons { background: #000; } .q-datetime-dark .q-datetime-item { color: rgba(255,255,255,0.87); } [dir] .q-datetime-dark .q-datetime-mask { background: linear-gradient(to top, #000, rgba(0,0,0,0) 50%, #000); } [dir=ltr] .q-datetime-dark .q-datetime-mask { background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(50%, rgba(0,0,0,0)), to(#000)); } [dir=rtl] .q-datetime-dark .q-datetime-mask { background: -webkit-gradient(linear, right bottom, right top, from(#000), color-stop(50%, rgba(0,0,0,0)), to(#000)); } @media (max-width: 767px) { .datetime-ios-modal.type-date, .datetime-ios-modal.type-datetime { min-width: 320px; width: auto; } .datetime-ios-modal.type-time { min-width: 250px; width: auto; } } @media (min-width: 768px) { .datetime-ios-modal.type-time { min-width: 280px; } } .q-dot { position: absolute; top: -2px; height: 10px; width: 10px; opacity: 0.8; } [dir] .q-dot { border-radius: 50%; background: #f44336; } [dir=ltr] .q-dot { right: -10px; } [dir=rtl] .q-dot { left: -10px; } [dir] .q-editor { border: 1px solid #ccc; } [dir] .q-editor.disabled { border-style: dashed; } [dir] .q-editor.fullscreen { border: 0 !important; } .q-editor-content { outline: 0; min-height: 10em; } [dir] .q-editor-content { padding: 10px; background: #fff; } .q-editor-content hr { outline: 0; height: 1px; } [dir] .q-editor-content hr { border: 0; margin: 1px; background: #ccc; } [dir] .q-editor-toolbar-padding { padding: 4px; } .q-editor-toolbar { min-height: 37px; } [dir] .q-editor-toolbar { border-bottom: 1px solid #ccc; background: #e0e0e0; } .q-editor-toolbar .q-btn-group { -webkit-box-shadow: none; } [dir] .q-editor-toolbar .q-btn-group { box-shadow: none; } [dir=ltr] .q-editor-toolbar .q-btn-group + .q-btn-group { margin-left: 5px; } [dir=rtl] .q-editor-toolbar .q-btn-group + .q-btn-group { margin-right: 5px; } [dir=ltr] .q-editor-toolbar-separator .q-btn-group + .q-btn-group { padding-left: 5px; } [dir=rtl] .q-editor-toolbar-separator .q-btn-group + .q-btn-group { padding-right: 5px; } .q-editor-toolbar-separator .q-btn-group + .q-btn-group:before { content: ''; position: absolute; top: 0; bottom: 0; height: 100%; width: 1px; } [dir] .q-editor-toolbar-separator .q-btn-group + .q-btn-group:before { background: #ccc; } [dir=ltr] .q-editor-toolbar-separator .q-btn-group + .q-btn-group:before { left: 0; } [dir=rtl] .q-editor-toolbar-separator .q-btn-group + .q-btn-group:before { right: 0; } .q-editor-input input { color: inherit; } .q-fab { position: relative; vertical-align: middle; } .z-fab { z-index: 990; } .q-fab-opened .q-fab-actions { opacity: 1; -webkit-transform: scaleX(1) scaleY(1) translateX(0) translateY(0); pointer-events: all; } [dir] .q-fab-opened .q-fab-actions { transform: scaleX(1) scaleY(1) translateX(0) translateY(0); } .q-fab-opened .q-fab-icon { opacity: 0; } [dir=ltr] .q-fab-opened .q-fab-icon { -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); } [dir=rtl] .q-fab-opened .q-fab-icon { -webkit-transform: rotate3d(0, 0, 1, -180deg); transform: rotate3d(0, 0, 1, -180deg); } .q-fab-opened .q-fab-active-icon { -webkit-transform: rotate3d(0, 0, 1, 0deg); opacity: 1; } [dir] .q-fab-opened .q-fab-active-icon { transform: rotate3d(0, 0, 1, 0deg); } .q-fab-icon, .q-fab-active-icon { transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s; } [dir] .q-fab-icon, [dir] .q-fab-active-icon { -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; } .q-fab-icon { opacity: 1; -webkit-transform: rotate3d(0, 0, 1, 0deg); } [dir] .q-fab-icon { transform: rotate3d(0, 0, 1, 0deg); } .q-fab-active-icon { opacity: 0; } [dir=ltr] .q-fab-active-icon { -webkit-transform: rotate3d(0, 0, 1, -180deg); transform: rotate3d(0, 0, 1, -180deg); } [dir=rtl] .q-fab-active-icon { -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); } .q-fab-actions { position: absolute; opacity: 0; transition: all 0.2s ease-in; pointer-events: none; } [dir] .q-fab-actions { -webkit-transition: all 0.2s ease-in; } [dir] .q-fab-actions .q-btn { margin: 5px; } .q-fab-right { top: 0; bottom: 0; } [dir=ltr] .q-fab-right { -webkit-transform: scaleX(0.4) scaleY(0.4) translateX(-100%); transform: scaleX(0.4) scaleY(0.4) translateX(-100%); left: 120%; } [dir=rtl] .q-fab-right { -webkit-transform: scaleX(0.4) scaleY(0.4) translateX(100%); transform: scaleX(0.4) scaleY(0.4) translateX(100%); right: 120%; } .q-fab-left { top: 0; bottom: 0; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } [dir=ltr] .q-fab-left { -webkit-transform: scaleX(0.4) scaleY(0.4) translateX(100%); transform: scaleX(0.4) scaleY(0.4) translateX(100%); right: 120%; } [dir=rtl] .q-fab-left { -webkit-transform: scaleX(0.4) scaleY(0.4) translateX(-100%); transform: scaleX(0.4) scaleY(0.4) translateX(-100%); left: 120%; } .q-fab-up { -webkit-transform: scaleX(0.4) scaleY(0.4) translateY(100%); -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: 120%; } [dir] .q-fab-up { transform: scaleX(0.4) scaleY(0.4) translateY(100%); } [dir=ltr] .q-fab-up { left: 0; right: 0; } [dir=rtl] .q-fab-up { right: 0; left: 0; } .q-fab-down { -webkit-transform: scaleX(0.4) scaleY(0.4) translateY(-100%); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 120%; } [dir] .q-fab-down { transform: scaleX(0.4) scaleY(0.4) translateY(-100%); } [dir=ltr] .q-fab-down { left: 0; right: 0; } [dir=rtl] .q-fab-down { right: 0; left: 0; } .q-field-icon { width: 28px; height: 28px; min-width: 28px; font-size: 28px; color: #424242; } [dir=ltr] .q-field-icon { margin-right: 16px; } [dir=rtl] .q-field-icon { margin-left: 16px; } .q-field-label { color: #424242; } [dir=ltr] .q-field-label { padding-right: 8px; } [dir=rtl] .q-field-label { padding-left: 8px; } .q-field-label-inner { min-height: 28px; } [dir=ltr] .q-field-label-hint { padding-left: 8px; } [dir=rtl] .q-field-label-hint { padding-right: 8px; } .q-field-bottom { font-size: 12px; color: #979797; } [dir] .q-field-bottom { padding-top: 8px; } [dir] .q-field-no-input .q-field-bottom { margin-top: 8px; border-top: 1px solid rgba(0,0,0,0.12); } .q-field-counter { color: #424242; } [dir=ltr] .q-field-counter { padding-left: 8px; } [dir=rtl] .q-field-counter { padding-right: 8px; } .q-field-dark .q-field-label, .q-field-dark .q-field-icon, .q-field-dark .q-field-counter, .q-field-dark .q-field-bottom { color: #a7a7a7; } [dir] .q-field-dark .q-field-no-input .q-field-bottom { border-top: 1px solid #424242; } .q-field-with-error .q-field-icon, .q-field-with-error .q-field-label, .q-field-with-error .q-field-bottom { color: #db2828; color: var(--q-color-negative); } [dir] .q-field-with-error .q-field-no-input .q-field-bottom { border-top: 1px solid #db2828; border-top: 1px solid var(--q-color-negative); } .q-field-with-warning .q-field-icon, .q-field-with-warning .q-field-label, .q-field-with-warning .q-field-bottom { color: #f2c037; color: var(--q-color-warning); } [dir] .q-field-with-warning .q-field-no-input .q-field-bottom { border-top: 1px solid #f2c037; border-top: 1px solid var(--q-color-warning); } [dir] .q-field-margin { margin-top: 5px; } [dir] .q-field-floating .q-field-margin { margin-top: 23px; } [dir] .q-field-no-input .q-field-margin { margin-top: 3px; } [dir] .q-field-content .q-if.q-if-has-label:not(.q-if-standard) { margin-top: 9px; } [dir] .q-field-content .q-if-standard:not(.q-if-has-label) { padding-top: 6px; } [dir] .q-field-content .q-option-group { padding-top: 0; } [dir] .q-field-no-input .q-field-content { padding-top: 6px; } [dir] .q-field-vertical:not(.q-field-no-label) .q-field-margin { margin-top: 0; } [dir] .q-field-vertical:not(.q-field-no-label) .q-if-standard:not(.q-if-has-label) { padding-top: 0; } [dir] .q-field-vertical:not(.q-field-no-label) .q-if.q-if-has-label:not(.q-if-standard) { margin-top: 0px; } .q-field-vertical.q-field-no-label .q-field-label { display: none; } @media (max-width: 575px) { [dir] .q-field-responsive:not(.q-field-no-label) .q-field-margin { margin-top: 0; } [dir] .q-field-responsive:not(.q-field-no-label) .q-if-standard:not(.q-if-has-label) { padding-top: 0; } [dir] .q-field-responsive:not(.q-field-no-label) .q-if.q-if-has-label:not(.q-if-standard) { margin-top: 0px; } .q-field-responsive.q-field-no-label .q-field-label { display: none; } } [dir] .q-inner-loading { background: rgba(255,255,255,0.6); } [dir] .q-inner-loading.dark { background: rgba(0,0,0,0.4); } .q-if, .q-if:before, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom { transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1), display 0s 0s; } [dir] .q-if, [dir] .q-if:before, [dir] .q-if-label, [dir] .q-if-addon, [dir] .q-field-icon, [dir] .q-field-label, [dir] .q-if-control, [dir] .q-field-bottom { -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1), display 0s 0s; } .q-if.q-if-hide-underline:before, .q-if.q-if-inverted:before, .q-if.q-if-hide-underline:after, .q-if.q-if-inverted:after { content: none; } [dir=ltr] .q-if-inverted { padding-left: 8px; padding-right: 8px; } [dir=rtl] .q-if-inverted { padding-right: 8px; padding-left: 8px; } [dir] .q-if-inverted .q-if-inner { margin-top: 7px; margin-bottom: 7px; } [dir] .q-if-inverted.q-if-has-label .q-if-inner { margin-top: 25px; } .q-if:before, .q-if:after { position: absolute; top: 0; bottom: 0; pointer-events: none; content: ''; } [dir] .q-if:before, [dir] .q-if:after { border: 1px hidden currentColor; border-bottom-style: solid; background: transparent; } [dir=ltr] .q-if:before, [dir=ltr] .q-if:after { left: 0; right: 0; } [dir=rtl] .q-if:before, [dir=rtl] .q-if:after { right: 0; left: 0; } .q-if:before { color: #bdbdbd; color: var(--q-color-light); } .q-if:after { opacity: 0; } [dir] .q-if:after { border-width: 2px; } .q-if:not(.q-if-disabled):not(.q-if-error):not(.q-if-warning):hover:before, .q-if.q-if-readonly:not(.q-if-error):not(.q-if-warning):after { color: #000; } .q-if-dark.q-if:not(.q-if-disabled):not(.q-if-error):not(.q-if-warning):hover:before, .q-if-dark.q-if.q-if-readonly:not(.q-if-error):not(.q-if-warning):after { color: #fff; } .q-if-focused:after { opacity: 1; transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1); } [dir] .q-if-focused:after { -webkit-transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1); } .q-if { outline: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; } .q-if .q-if-inner { min-height: 24px; } [dir] .q-if-standard { padding-top: 7px; padding-bottom: 7px; } [dir] .q-if-standard.q-if-has-label { padding-top: 25px; } [dir] .q-if-hide-underline { padding-top: 0; padding-bottom: 0; } [dir] .q-if-hide-underline.q-if-has-label { padding-top: 18px; } .q-if-standard .q-if-label, .q-if-inverted .q-if-label { position: absolute; -webkit-transform: translate(0, 0); } [dir] .q-if-standard .q-if-label, [dir] .q-if-inverted .q-if-label { transform: translate(0, 0); } [dir=ltr] .q-if-standard .q-if-label, [dir=ltr] .q-if-inverted .q-if-label { left: 0; -webkit-transform-origin: top left; transform-origin: top left; } [dir=rtl] .q-if-standard .q-if-label, [dir=rtl] .q-if-inverted .q-if-label { right: 0; -webkit-transform-origin: top right; transform-origin: top right; } .q-if-standard .q-if-label.q-if-label-above, .q-if-inverted .q-if-label.q-if-label-above { font-size: 0.75rem; -webkit-transform: translate(0, -100%); line-height: 18px; } [dir] .q-if-standard .q-if-label.q-if-label-above, [dir] .q-if-inverted .q-if-label.q-if-label-above { transform: translate(0, -100%); } .q-if-inverted { -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12); } [dir] .q-if-inverted { box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12); border-radius: 4px; } .q-if-inverted .q-if-label { top: 50%; -webkit-transform: translate(0, -21px); } [dir] .q-if-inverted .q-if-label { transform: translate(0, -21px); } .q-if-inverted .q-if-label.q-if-label-above { top: 4px; -webkit-transform: translate(0, -125%); } [di