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