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