Skip to content

Commit 954c9e3

Browse files
vpatrinhanivpatrinhani
committed
Adjust paper-chip layout for material design
1 parent b10af31 commit 954c9e3

File tree

1 file changed

+71
-48
lines changed

1 file changed

+71
-48
lines changed

‎paper-chip.html‎

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ <h1>[email protected]</h1>
6464
margin: 8px 0;
6565
height: 32px;
6666
overflow: visible;
67+
68+
font-family: 'Roboto', 'Noto', sans-serif;
69+
6770
@apply(--paper-chip);
6871
}
6972
:host([animated]) *,
@@ -72,40 +75,42 @@ <h1>[email protected]</h1>
7275
}
7376

7477
/* initially hidden elements */
75-
:host(:not([opened])) #label ::content h2 {
78+
:host(:not([opened])) #labelContainer ::content h2 {
7679
color: var(--paper-chip-secondary-text-color, --secondary-text-color);
7780
font-size: 0;
7881
height: 0;
7982
}
80-
81-
#main, #chip {
83+
:host([no-image]) #iconContainer {
84+
display: none;
85+
}
86+
#mainContainer, #iconContainer {
8287
border-radius: 16px;
8388
}
8489

85-
#main {
86-
background-color: var(--paper-chip-background-color, --paper-grey-200);
90+
#mainContainer {
91+
background-color: var(--paper-chip-background-color, --paper-grey-300);
8792
position: relative;
8893
color: var(--paper-chip-secondary-text-color, --secondary-text-color);
8994
@apply(--layout-vertical);
9095
}
9196

92-
#chip {
97+
#chipContainer {
9398
box-sizing: border-box;
9499
height: 32px;
95100
@apply(--layout-horizontal);
96101
@apply(--layout-center);
97102
}
98-
99103
paper-material {
100104
border-radius: 16px;
101105
}
102-
103-
#icon {
106+
#iconContainer {
107+
width: 32px;
108+
height: 32px;
104109
@apply(--layout-horizontal);
105110
@apply(--layout-center);
106111
@apply(--layout-center-justified);
107112
}
108-
#icon ::content .icon {
113+
#iconContainer ::content .icon {
109114
width: 32px;
110115
height: 32px;
111116
line-height: 32px;
@@ -115,7 +120,7 @@ <h1>[email protected]</h1>
115120
vertical-align: middle;
116121
font-size: 16px;
117122
font-weight: bold;
118-
background-color: var(--paper-chip-icon-background-color, --paper-grey-500);
123+
background-color: var(--paper-chip-icon-background-color, --secondary-text-color);
119124
color: var(--paper-chip-icon-text-color, --text-primary-color);
120125
@apply(--layout-flex);
121126
}
@@ -127,50 +132,65 @@ <h1>[email protected]</h1>
127132
width: 32px;
128133
height: 32px;
129134
}
130-
131-
#label {
135+
136+
#labelContainer {
132137
font-family: 'Roboto', 'Noto', sans-serif;
133-
padding-top: 8px;
138+
padding-top: 8px;
134139
padding-right: 12px;
135140
padding-bottom: 8px;
136141
padding-left: 8px;
137142
@apply(--layout-flex-auto);
138143
@apply(--layout-self-center);
139144
}
140-
#label ::content h1,
141-
#label ::content h2 {
145+
#labelContainer ::content h1 {
146+
font-size: 13px;
147+
font-weight: normal;
148+
color: var(--paper-chip-label-text-color, --primary-text-color);
149+
}
150+
#labelContainer ::content h2 {
151+
font-size: 14px;
142152
white-space: nowrap;
143153
margin: 0;
144154
font-weight: normal;
145-
font-size: 14px;
155+
}
156+
:host([no-image]) #labelContainer {
157+
padding-left: 12px;
146158
}
147159

148-
.icon-btn-wrapper {
149-
@apply(--layout-self-center);
160+
:host([removable]) #labelContainer {
161+
padding-right: 4px;
150162
}
151-
152-
:host(:not([opened])) #removeBtn {
153-
background-color: transparent;
163+
164+
#removeBtnContainer {
165+
width: 24px;
166+
height: 24px;
167+
margin-left: 0px;
168+
margin-right: 4px;
169+
@apply(--layout-horizontal);
170+
@apply(--layout-center-center);
154171
}
172+
155173
#removeBtn {
156-
width: 20px;
157-
height: 20px;
174+
width: 18px;
175+
height: 18px;
158176
border-radius: 100%;
159-
margin-left: -4px;
160-
margin-right: 8px;
161177
cursor: pointer;
178+
background-color: var(--paper-chip-removebtn-background-color, --paper-grey-500);
179+
color: var(--paper-chip-removebtn-icon-color, --text-primary-color);
180+
@apply(--layout-horizontal);
181+
@apply(--layout-center-center);
162182
}
163183
#removeBtn iron-icon {
164184
padding: 2px;
165185
width: 16px;
166186
height: 16px;
167187
}
168-
:host(:not([removable])) #removeBtn {
188+
:host(:not([removable])) #removeBtnContainer {
169189
display: none;
170190
}
171191

172192
/* pressed state */
173-
:host([pressed]) #main {
193+
:host([pressed]) #mainContainer {
174194
background-color: var(--paper-chip-pressed-background-color, --paper-grey-300);
175195
}
176196

@@ -180,12 +200,9 @@ <h1>[email protected]</h1>
180200
min-width: 100%;
181201
overflow: hidden;
182202
}
183-
:host(:not([opened])) #label ::content h1 {
184-
color: var(--paper-chip-secondary-text-color, --secondary-text-color);
185-
}
186-
203+
187204
/* opened state */
188-
:host([opened]) #main, :host([opened]) #chip {
205+
:host([opened]) #mainContainer, :host([opened]) #chipContainer {
189206
border-radius: 0;
190207
}
191208
:host([opened]) #content {
@@ -194,35 +211,38 @@ <h1>[email protected]</h1>
194211
min-width: 100%;
195212
overflow: hidden;
196213
}
197-
:host([opened]) #chip {
214+
:host([opened]) #chipContainer {
198215
height: 72px;
199216
}
200-
:host([opened]) #chip,
217+
:host([opened]) #chipContainer,
201218
:host([opened]) #content ::content > * {
202219
padding: 16px 12px;
203220
background-color: var(--paper-chip-opened-background-color, --paper-grey-50);
204221
}
205-
:host([opened]) #label ::content h1 {
222+
:host([opened]) #labelContainer ::content h1 {
206223
color: var(--paper-chip-primary-text-color, --primary-text-color);
207224
font-size: 16px;
208225
}
209226
:host([opened]) paper-material {
210227
border-radius: 0;
211228
}
212229
:host([opened]) #removeBtn {
213-
background-color: var(--paper-chip-removebtn-background-color, --paper-grey-400);
230+
background-color: var(--paper-chip-removebtn-background-color, --paper-grey-600);
214231
color: var(--paper-chip-removebtn-icon-color, --text-primary-color);
215232
}
233+
:host([opened]) #iconContainer {
234+
width: 40px;
235+
height: 40px;
236+
}
216237
:host([opened]) #icon ::content .icon,
217238
:host([opened]) #icon ::content iron-icon.icon svg {
218239
font-size: 20px;
219240
width: 40px;
220241
height: 40px;
221242
line-height: 40px;
222243
}
223-
224244
/* open + active state */
225-
:host([opened][active]) #chip,
245+
:host([opened][active]) #chipContainer,
226246
:host([opened][active]) ::content {
227247
background-color: var(--paper-chip-active-color, --accent-color);
228248
color: var(--paper-chip-active-text-color, --text-primary-color);
@@ -231,26 +251,29 @@ <h1>[email protected]</h1>
231251
background-color: var(--paper-chip-active-text-color, --text-primary-color);
232252
color: var(--paper-chip-active-color, --accent-color);
233253
}
234-
:host([opened][active]) #chip #label ::content h1 {
254+
:host([opened][active]) #chipContainer #labelContainer ::content h1 {
235255
color: var(--paper-chip-active-text-color, --text-primary-color);
236256
}
237-
:host([opened][active]) #chip #label ::content h2 {
257+
:host([opened][active]) #chipContainer #labelContainer ::content h2 {
238258
color: var(--paper-chip-active-secondary-text-color, --text-primary-color);
239259
}
240260
</style>
241261
<iron-a11y-keys target="{{}}" keys="space enter" on-keys-pressed="toggleOpened"></iron-a11y-keys>
242-
<paper-material id="shadow" elevation="{{_elevation}}" animated$="{{animated}}">
243-
<div id="main">
244-
<div id="chip">
245-
<div id="icon">
262+
<iron-a11y-keys target="{{}}" keys="del" on-keys-pressed="remove"></iron-a11y-keys>
263+
<paper-material elevation="{{_elevation}}" animated$="{{animated}}">
264+
<div id="mainContainer">
265+
<div id="chipContainer">
266+
<div id="iconContainer">
246267
<content select=".icon"></content>
247268
</div>
248-
<div id="label">
269+
<div id="labelContainer">
249270
<content select="h1"></content>
250271
<content select="h2"></content>
251272
</div>
252-
<div id="removeBtn" on-tap="remove" aria-label="remove button">
253-
<iron-icon icon="close"></iron-icon>
273+
<div id="removeBtnContainer">
274+
<div id="removeBtn" on-tap="remove" aria-label="remove button">
275+
<iron-icon icon="close"></iron-icon>
276+
</div>
254277
</div>
255278
</div>
256279
<div id="content">

0 commit comments

Comments
 (0)