/
_chips.styl
executable file
路123 lines (101 loc) 路 2.48 KB
/
_chips.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@import '../bootstrap'
@import '../theme'
chip($material)
background: $material.chips.background
color: $material.chips.color
theme(chip, "chip")
.chip
align-items: center
border-radius: $chip-border-radius
border: 1px solid transparent
display: inline-flex
font-size: $chip-font-size
margin: $chip-margin
outline: none
position: relative
transition: $primary-transition
vertical-align: middle
.chip__content
align-items: center
border-radius: $chip-border-radius
cursor: default
display: inline-flex
height: $chip-height
justify-content: space-between
padding: $chip-padding
vertical-align: middle
white-space: nowrap
z-index: 1
&--removable
.chip__content
padding: $chip-removeable-padding
.avatar
// Important is needed to account for new avatar structure
height: $chip-height !important
margin-left: -12px
margin-right: 8px
min-width: $chip-height
width: $chip-height !important
img
height: 100%
width: 100%
&:focus,
&--active,
&--selected
&:not(.chip--disabled)
border-color: rgba(#000, .13)
overflow: hidden
elevation(2)
&:after
background: currentColor
border-radius: inherit
content: ''
height: 100%
position: absolute
top: 0
left: 0
transition: inherit
width: 100%
pointer-events: none
opacity: .13
&--label
border-radius: $chip-label-border-radius
.chip__content
border-radius: $chip-label-border-radius
&.chip--outline
background: $chip-outline-background
border-color: currentColor
color: $chip-outline-color
&--small
height: $chip-small-height
.avatar
height: $chip-small-height
min-width: $chip-small-height
width: $chip-small-height
.icon
font-size: $chip-small-font-size
&__close
align-items: center
color: inherit
cursor: pointer
display: flex
font-size: $chip-icon-font-size
margin: $chip-close-margin
text-decoration: none
user-select: none
> .icon
color: inherit !important
font-size: 20px
opacity: .5
&:hover
opacity: 1
&--select-multi
margin: $chip-margin $chip-margin $chip-margin 0
.icon
color: inherit
&--right
margin-left: $chip-icon-offset
margin-right: $chip-icon-negative-offset
&--left
margin-left: $chip-icon-negative-offset
margin-right: $chip-icon-offset