1// Copyright (C) 2024 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-chip { 18 font-family: $pf-font; 19 line-height: 1; 20 user-select: none; 21 border-radius: $pf-border-radius; 22 padding: 2px 8px; 23 white-space: nowrap; 24 min-width: max-content; 25 border: solid 1px $pf-minimal-border; 26 27 &.pf-rounded { 28 border-radius: 100px; 29 } 30 31 & > .pf-left-icon { 32 float: left; 33 margin-right: 6px; // Make some room between the icon and label 34 } 35 36 & > .pf-right-icon { 37 float: right; 38 margin-left: 6px; // Make some room between the icon and label 39 } 40 41 & > .material-icons, 42 & > .material-icons-filled { 43 font-size: inherit; 44 line-height: inherit; 45 } 46 47 &:focus-visible { 48 @include focus; 49 } 50 51 background: $pf-minimal-background; 52 color: inherit; 53 54 &[disabled] { 55 color: $pf-minimal-foreground-disabled; 56 background: $pf-minimal-background-disabled; 57 cursor: not-allowed; 58 } 59 60 // Remove default background in minimal mode, showing only the text 61 &.pf-intent-primary { 62 color: $pf-primary-foreground; 63 background: $pf-primary-background; 64 border: solid 1px $pf-primary-border; 65 66 &[disabled] { 67 background: $pf-primary-background-disabled; 68 color: $pf-primary-foreground-disabled; 69 box-shadow: none; 70 cursor: not-allowed; 71 } 72 } 73 74 // Reduce padding when compact 75 &.pf-compact { 76 padding: 0px 4px; 77 & > .pf-left-icon { 78 margin-right: 2px; 79 } 80 81 & > .pf-right-icon { 82 margin-left: 2px; 83 } 84 } 85 86 // Reduce padding when we are icon-only 87 &.pf-icon-only { 88 & > .pf-left-icon { 89 margin: 0; 90 } 91 92 padding: 4px; 93 94 &.pf-compact { 95 padding: 0; 96 } 97 } 98} 99 100.pf-chip-bar { 101 display: flex; 102 flex-direction: row; 103 gap: 2px; 104} 105