.dropdown-wrapper > label.switch { align-self: center; flex-shrink: 0; } .dropdown-wrapper { /*flex-direction: column;*/ min-height: 2em; /* same height as input (when its visible) */ height: unset !important; padding: 0.1em !important; overflow: visible; align-items: stretch; } .dropdown-wrapper:not(.disabled) { cursor: pointer; } .input-wrapper.dropdown-wrapper > .btn-icon { height: unset; margin-top: -0.1em; margin-bottom: -0.1em; } .input-wrapper.dropdown-wrapper > .btn-icon:not(.left):last-of-type { margin-right: -0.1em !important; } .input-wrapper.dropdown-wrapper > .btn-icon.left { margin-left: -0.1em !important; } /* #region embedded dropdown */ /* this is for dropdowns that share an input-wrapper with another input */ .input-wrapper > .dropdown-wrapper { border: none !important; box-shadow: none !important; background: transparent; margin-right: -0.5em; } /* #endregion */ /* #region open / close */ .dropdown-wrapper.open .dropdown-options { display: block; } .dropdown-wrapper.open .dropdown-options.wrap { display: flex; } .dropdown-wrapper:not(.open) .dropdown-options { display: none; } .dropdown-wrapper.has-options.open.upward { border-top-left-radius: 0; border-top-right-radius: 0; } .dropdown-wrapper.has-options.open:not(.upward) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown-wrapper.has-options.open.upward > label { /* when dropdown opens upward, have to swap label to bottom, or hide it entirely. it's a bit weird sweapping it to bottom, so i'm just hiding it for now top: unset; bottom: -0.6em; margin-bottom: 0;*/ display: none; } .dropdown-wrapper:not(.loading):not(.clearable).has-options.open .value-container:after { /* triangle shape (upward) */ border-left: 0.3em solid transparent; border-right: 0.3em solid transparent; border-bottom: 0.3em solid var(--color-text); border-top: none; } .dropdown-wrapper.clearable.open:not(.loading):after { border: none; } .dropdown-wrapper.clearable.open:not(.loading) .btn-clear { display: unset; } /* #region custom render (hide input when closed) */ .dropdown-wrapper.custom-render.has-value:not(.open) > .value-container > input { display: none; } .dropdown-wrapper.custom-render.has-value:not(.open) > .value-container > .value { margin-top: 0.25em; /* 04-09-2020: added this to prevent label overlap */ padding: 0 1.25em 0 0.25em; justify-content: center; } /* 06-29-21: hide custom rendered value when open. prevents dropdown height from changing */ .dropdown-wrapper.custom-render.has-value.open > .value-container > .value { display: none; } /* #endregion */ /* #endregion */ .dropdown-wrapper .btn-clear { display: none; position: absolute; font-size: 1.5em; right: 0; bottom: 0.05em; margin: 0; border-width: .08em; overflow: visible; background-color: var(--color-container); padding: 0 0.15em; } .dropdown-wrapper .value-container { display: flex; flex-direction: column; flex-grow: 1; position: relative; width: 100%; } .dropdown-wrapper:not(.loading) .value-container:after { content: ""; position: absolute; z-index: 1; right: 0.5em; bottom: 0.6em; pointer-events: none; } .dropdown-wrapper:not(.loading):not(.open) .value-container:after { /* triangle shape (downward) */ border-left: 0.3em solid transparent; border-right: 0.3em solid transparent; border-top: 0.3em solid var(--color-text); border-bottom: none; } .dropdown-wrapper.disabled .value-container:after { border-top-color: var(--color-auxiliary) !important; } .dropdown-wrapper.disabled:after { opacity: 0.5; } /* #region error colors */ .dropdown-wrapper.error { border-color: var(--color-error); } .dropdown-wrapper.error > * { color: var(--color-error); } .dropdown-wrapper.error:not(.loading):after { border-top-color: var(--color-error); } .dropdown-wrapper.error:not(.loading).open:after { border-bottom-color: var(--color-error); } /* #endregion error colors */ .dropdown-wrapper .value-container > input[type=number]::-webkit-inner-spin-button, .dropdown-wrapper .value-container > input[type=number]::-webkit-outer-spin-button { /* hiding number spinners */ -webkit-appearance: none; margin: 0; } .dropdown-wrapper .value-container > input { padding: 0 1.25em 0 0.25em; /* offsetting for arrow */ } .dropdown-wrapper.read-only .value-container > input:not(:disabled) { cursor: pointer; } .dropdown-wrapper:not(.loading):after { cursor: pointer; } .dropdown-wrapper > .value-container > .value { display: flex; flex-grow: 100; flex-direction: column; width: 100%; max-height: 10em; overflow-y: auto; } .dropdown-wrapper > .value-container > .value:not(:empty) { padding: 0.25em 0.35em; } .dropdown-wrapper > .value-container > .value:not(:empty) { margin-top: 0.125em; } .dropdown-wrapper > .value-container > .value.placeholder { opacity: 0.75; font-style: italic; } .dropdown-wrapper > .value-container > .value .pill:first-child { margin-top: 0.25em; } .dropdown-wrapper > .value-container > .value .pill { border-radius: 8px; background: var(--color-accent); display: flex; align-items: center; margin-bottom: 0.35em; padding: 0.2em 0.2em 0.2em 0.5em; user-select: none; } .dropdown-wrapper > .value-container > .value .pill > * { color: var(--color-accent-text); } .dropdown-wrapper > .value-container > .value .pill .btn-icon { border-radius: 5em; padding: 0.1em; } .dropdown-wrapper > .value-container > .value.wrap .pill .btn-icon { margin-left: 0.25em; padding: 0.05em; height: 100%; } .dropdown-wrapper > .value-container > .value .pill .btn-icon:not([disabled]):hover { background: var(--color-error); color: var(--color-error-text); } /* #region value wrap */ .dropdown-wrapper > .value-container > .value.wrap { flex-wrap: wrap; flex-direction: row; grid-gap: 0.5em; } .dropdown-wrapper > .value-container > .value.wrap .pill { margin: 0; } /* #endregion */ .dropdown-options { background: var(--color-container); box-sizing: content-box; border: 0.1rem solid var(--color-accent); border-top: none; border-radius: 0 0 0.25em 0.25em; overflow-x: hidden; overflow-y: auto; max-height: 9em; position: absolute; top: 100%; left: -0.1rem; width: 100%; display: none; z-index: 3; /*box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.25);*/ box-shadow: 0px 0px 2px 1px var(--color-accent); } .dropdown-options:empty { display: none !important; } .dropdown-options.large { max-height: 16em; } .dropdown-wrapper.upward .dropdown-options { top: unset; bottom: 100%; border-top: 2px solid var(--color-accent); border-bottom: none; border-radius: 0.25em 0.25em 0 0; } .dropdown-options > div { display: flex; align-items: center; min-height: 1.5em; padding: 0.25em 0.5em; color: var(--color-text); border-top: 1px solid var(--color-stripe-border); cursor: pointer; white-space: pre; /*making sure spaces appear after search highlights */ } .dropdown-wrapper.upward .dropdown-options > div { border-top: none; border-bottom: 1px solid var(--color-stripe-border); } .dropdown-options .option.selected mark { background: var(--color-accent-text) !important; color: var(--color-accent) !important; } .dropdown-options > div:nth-child(odd) { background: var(--color-header); } .dropdown-options > .option.selected { background: var(--color-accent); color: var(--color-accent-text); } /* #region custom scrollbar */ .dropdown-options::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: var(--color-header-border); } .dropdown-options::-webkit-scrollbar { width: 0.5em; background-color: var(--color-header-border); } .dropdown-options::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: var(--color-accent); } /* #endregion */ /* #region options wrap */ .dropdown-options.wrap { flex-wrap: wrap; grid-gap: 0.5em; padding: 0.5em; /* have to reduce width due to additional horizontal padding */ width: calc(100% - 1em); } .dropdown-options.wrap > div { padding: 0.5em; border: none !important; background: var(--color-text); color: var(--color-text-text); border-radius: 8px; } @media screen and (max-width: 600px) { .dropdown-options.wrap > div { flex-grow: 1; } } /* #endregion */ /* #region grouping */ .dropdown-options .group-label { padding-left: 0.25em; background: var(--color-text); color: var(--color-text-text); display: flex; font-size: 1.1em; padding: 0.125em .25em; font-style: italic; } .dropdown-options .group-label::after { content: "..."; } .dropdown-options.grouped .option { padding-left: 0.75em; } /* #endregion */ /* TODO: might add a "custom-render" class for all dropdowns that display value outsside of input. when dropdown value is displayed inside the value container and the input is readonly, it doesn't need to eixst */ .dropdown-wrapper.multi-select.read-only input { /* hack to allow input focus without it being visible. "display: none;" prevents the input focusout event from closing dropdown */ height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; pointer-events: none; }