blob: 18e0549d1b47b3a3f0043d913818acf3cdb343e1 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17@import "../variables";
18@import "../mixins";
19
20.mdl-chip {
21 height: $chip-height;
22 font-family: $preferred_font;
23 line-height: $chip-height;
24 padding: 0 12px;
25 border: 0;
26 border-radius: $chip-height / 2;
27 background-color: $chip-bg-color;
28 display: inline-block;
29 color: $text-color-primary;
30 margin: 2px 0;
31 font-size: 0;
32 white-space: nowrap;
33
34 &__text {
35 font-size: $chip-font-size;
36 vertical-align: middle;
37 display: inline-block;
38 }
39
40 &__action {
41 height: 24px;
42 width: 24px;
43 background: transparent;
44 opacity: 0.54;
45 display: inline-block;
46 cursor: pointer;
47 text-align: center;
48 vertical-align: middle;
49 padding: 0;
50 margin: 0 0 0 4px;
51 font-size: $chip-font-size;
52 text-decoration: none;
53 color: $text-color-primary;
54 border: none;
55 outline: none;
56 overflow: hidden;
57 }
58
59 &__contact {
60 height: $chip-height;
61 width: $chip-height;
62 border-radius: $chip-height / 2;
63 display: inline-block;
64 vertical-align: middle;
65 margin-right: 8px;
66 overflow: hidden;
67 text-align: center;
68 font-size: 18px;
69 line-height: 32px;
70 }
71
72 &:focus {
73 outline: 0;
74 @include shadow-2dp();
75 }
76
77 &:active {
78 background-color: $chip-bg-active-color;
79 }
80
81 &--deletable {
82 padding-right: 4px;
83 }
84
85 &--contact {
86 padding-left: 0;
87 }
88}