| /******************************************************************************** |
| * 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 "../../../../../styles/openk.styles"; |
| |
| $nav-drop-down-menu-toggle-contrast: get-color($openk-info-palette, 500); |
| $nav-drop-down-menu-toggle-background: get-color($openk-info-palette, 100); |
| $nav-drop-down-menu-toggle-border: rgba(0, 0, 0, 0.05); |
| $nav-drop-down-menu-contrast: get-color($openk-default-palette, 500, contrast); |
| $nav-drop-down-menu-background: get-color($openk-info-palette, A100); |
| |
| :host { |
| display: inline-flex; |
| justify-content: center; |
| align-items: center; |
| border-radius: 6px; |
| min-width: 9em; |
| height: 2em; |
| } |
| |
| |
| .nav-drop-down-button { |
| width: 100%; |
| height: 100%; |
| outline: none; |
| display: inline-flex; |
| justify-content: center; |
| align-items: center; |
| padding: 0.25em 0.5em; |
| margin: 0; |
| font-size: 1em; |
| text-align: center; |
| border-radius: inherit; |
| transition: filter 100ms ease-in; |
| |
| &:hover { |
| filter: brightness(0.98); |
| } |
| |
| &:focus { |
| filter: brightness(0.96); |
| } |
| |
| &:active { |
| filter: brightness(0.94); |
| } |
| } |
| |
| .nav-drop-down-button-label { |
| margin: 0 auto; |
| padding: 1px 3px 0 3px; |
| line-height: 1.5; |
| font-weight: 400; |
| white-space: nowrap; |
| font-size: 0.875em; |
| } |
| |
| .nav-drop-down-button-icon { |
| text-align: center; |
| vertical-align: middle; |
| height: initial; |
| width: initial; |
| font-size: 1em; |
| transition: transform 100ms ease-in; |
| transform: rotate(90deg); |
| } |
| |
| .nav-drop-down-button-opened { |
| border-bottom-left-radius: 0; |
| border-bottom-right-radius: 0; |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); |
| |
| .nav-drop-down-button-icon { |
| transform: rotate(270deg); |
| } |
| } |
| |
| |
| .nav-drop-down-toggle { |
| color: $nav-drop-down-menu-toggle-contrast; |
| background-color: $nav-drop-down-menu-toggle-background; |
| border: 1px solid $nav-drop-down-menu-toggle-border; |
| } |
| |
| |
| .nav-drop-down-menu { |
| display: flex; |
| flex-flow: column; |
| width: 100%; |
| background-color: $nav-drop-down-menu-background; |
| color: $nav-drop-down-menu-contrast; |
| border: 1px solid $nav-drop-down-menu-toggle-border; |
| border-top: 0; |
| border-radius: 4px; |
| border-top-left-radius: 0; |
| border-top-right-radius: 0; |
| overflow: hidden; |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); |
| } |
| |
| .nav-drop-down-menu-item { |
| border: 0; |
| background: inherit; |
| border-bottom: 1px solid $nav-drop-down-menu-toggle-border; |
| border-radius: 0; |
| |
| &:last-child { |
| border-bottom: 0; |
| } |
| } |