1// Copyright (C) 2023 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15@import "theme"; 16 17// Select field styled to look similar to a text input with a thin underline. 18// Inspired by matherial design. 19.pf-select { 20 font-family: $pf-font; 21 font-size: inherit; 22 outline: none; // Disable the default outline 23 border: none; // Disable the default border 24 border-bottom: solid 1px $pf-minimal-foreground; // Thin underline 25 background: none; 26 transition: border $pf-anim-timing, box-shadow $pf-anim-timing, 27 background $pf-anim-timing; 28 // Round only the top corners to avoid rounding the edges of the underline 29 border-radius: $pf-border-radius $pf-border-radius 0 0; 30 cursor: pointer; 31 32 // Very opinionated min width for a select input 33 // ... any smaller and it stops looking like a select input! 34 min-width: 80px; 35 36 & > .material-icons { 37 font-size: inherit; 38 line-height: inherit; 39 float: left; 40 } 41 42 &:hover { 43 background: $pf-minimal-background-hover; 44 } 45 46 &:focus { 47 background: $pf-minimal-background-hover; 48 border-bottom: solid 1px $pf-primary-background; 49 50 // The box-shadow thickens the bottom border, without adding to the height. 51 // This is the same technique used by materializecss: 52 // See https://materializecss.com/text-inputs.html 53 box-shadow: 0 1px 0 $pf-primary-background; 54 } 55 56 &[disabled] { 57 border-bottom-color: $pf-minimal-foreground-disabled; 58 color: $pf-minimal-foreground-disabled; 59 background: $pf-minimal-background-disabled; 60 cursor: not-allowed; 61 } 62} 63