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: 27 border $pf-anim-timing, 28 box-shadow $pf-anim-timing, 29 background $pf-anim-timing; 30 // Round only the top corners to avoid rounding the edges of the underline 31 border-radius: $pf-border-radius $pf-border-radius 0 0; 32 cursor: pointer; 33 34 // Very opinionated min width for a select input 35 // ... any smaller and it stops looking like a select input! 36 min-width: 80px; 37 38 & > .material-icons { 39 font-size: inherit; 40 line-height: inherit; 41 float: left; 42 } 43 44 &:hover { 45 background: $pf-minimal-background-hover; 46 } 47 48 &:focus { 49 background: $pf-minimal-background-hover; 50 border-bottom: solid 1px $pf-primary-background; 51 52 // The box-shadow thickens the bottom border, without adding to the height. 53 // This is the same technique used by materializecss: 54 // See https://materializecss.com/text-inputs.html 55 box-shadow: 0 1px 0 $pf-primary-background; 56 } 57 58 &[disabled] { 59 border-bottom-color: $pf-minimal-foreground-disabled; 60 color: $pf-minimal-foreground-disabled; 61 background: $pf-minimal-background-disabled; 62 cursor: not-allowed; 63 } 64} 65