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.pf-text-input { 18 font-family: $pf-font; 19 font-size: inherit; 20 outline: none; // Disable the default outline 21 border: none; // Disable the default border 22 border-bottom: solid 1px $pf-minimal-foreground; // Thin underline 23 background: none; 24 transition: 25 border $pf-anim-timing, 26 box-shadow $pf-anim-timing, 27 background $pf-anim-timing; 28 29 // Round only the top corners to avoid rounding the edges of the underline 30 border-radius: $pf-border-radius $pf-border-radius 0 0; 31 32 // The gentle hover effect indicates this component is interactive 33 &:hover { 34 background: $pf-minimal-background-hover; 35 } 36 37 &:focus { 38 background: $pf-minimal-background-hover; 39 border-bottom: solid 1px $pf-primary-background; 40 41 // The box-shadow thickens the bottom border, without adding to the height. 42 // This is the same technique used by materializecss: 43 // See https://materializecss.com/text-inputs.html 44 box-shadow: 0 1px 0 $pf-primary-background; 45 } 46 47 &[disabled] { 48 border-bottom-color: $pf-minimal-foreground-disabled; 49 color: $pf-minimal-foreground-disabled; 50 background: $pf-minimal-background-disabled; 51 cursor: not-allowed; 52 } 53} 54