| /******************************************************************************** |
| * Copyright (c) 2020 Contributors to the Eclipse Foundation |
| * |
| * See the NOTICE file(s) distributed with this work for additional |
| * information regarding copyright ownership. |
| * |
| * This program and the accompanying materials are made available under the |
| * terms of the Eclipse Public License 2.0 which is available at |
| * http://www.eclipse.org/legal/epl-2.0 |
| * |
| * SPDX-License-Identifier: EPL-2.0 |
| ********************************************************************************/ |
| |
| @import "openk.styles"; |
| |
| :host { |
| display: inline-flex; |
| font-size: 0.875em; |
| } |
| |
| .select-toggle { |
| display: inline-flex; |
| padding-right: 0.25em; |
| width: 100%; |
| font-size: 1em; |
| text-align: left; |
| cursor: pointer; |
| |
| &:disabled { |
| cursor: initial; |
| } |
| } |
| |
| .select-toggle---small { |
| padding: 0; |
| border: 0; |
| background: 0; |
| |
| &:focus { |
| border: 0; |
| outline: 0; |
| } |
| } |
| |
| .select-toggle-text { |
| overflow-x: hidden; |
| text-overflow: ellipsis; |
| min-height: 1.5em; |
| padding-right: 0.5em; |
| } |
| |
| .select-toggle-text---small { |
| color: get-color($openk-info-palette, A300); |
| padding-right: 0; |
| font-size: initial; |
| } |
| |
| .select-toggle-text-placeholder { |
| color: get-color($openk-default-palette, 800); |
| font-style: italic; |
| } |
| |
| .select-toggle-icon { |
| margin: auto 0 auto auto; |
| font-size: 1em; |
| width: initial; |
| height: initial; |
| transform: rotate(90deg); |
| transition: transform 100ms ease-in, color 100ms ease-in; |
| color: get-color($openk-default-palette, 800); |
| |
| &.select-toggle-icon-opened { |
| color: get-color($openk-info-palette, A300); |
| } |
| } |
| |
| .select-toggle-icon-opened { |
| transform: rotate(270deg); |
| } |
| |
| .select-toggle-icon---color-small { |
| color: get-color($openk-info-palette, A300); |
| font-size: initial; |
| } |
| |
| .select-toggle-opened-bottom { |
| border-bottom-right-radius: 0; |
| } |
| |
| .select-toggle-opened-top { |
| border-top-right-radius: 0; |
| } |
| |
| .select-options { |
| box-sizing: border-box; |
| width: 100%; |
| overflow: auto; |
| max-height: calc(7.5 * 2.5em); |
| background: get-color($openk-default-palette); |
| border: 1px solid get-color($openk-default-palette, 800); |
| border-color: get-color($openk-info-palette, A300); |
| font-size: 0.875em; |
| box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .select-options---static-size { |
| display: flex; |
| flex-flow: column nowrap; |
| width: calc(100% - 4px); |
| } |
| |
| .select-options-bottom { |
| border-top: 0; |
| } |
| |
| .select-options-top { |
| border-bottom: 0; |
| box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .select-options-button { |
| min-height: 2.5em; |
| box-sizing: border-box; |
| padding: 0 0.85em 0 0.85em; |
| line-height: 1.5; |
| cursor: pointer; |
| width: 100%; |
| display: inline-flex; |
| justify-content: flex-start; |
| border: 0; |
| border-top: 1px dotted get-color($openk-default-palette, 800); |
| border-radius: 0; |
| |
| &:first-child, |
| &.select-options-button-selected, |
| &.select-options-button-selected + & { |
| border-color: transparent; |
| } |
| } |
| |
| .select-options-button---small { |
| display: flex; |
| } |
| |
| .select-options-button-label { |
| text-overflow: ellipsis; |
| overflow-x: hidden; |
| white-space: nowrap; |
| width: 100%; |
| display: inline-block; |
| text-align: left; |
| } |
| |
| .select-options-button-selected { |
| background: get-color($openk-info-palette, A300); |
| color: get-color($openk-info-palette, 500, contrast); |
| filter: none !important; |
| } |