|
138 | 138 | ); |
139 | 139 | } |
140 | 140 |
|
| 141 | +// Item Divider Slotted Elements |
| 142 | +// --------------------------------------------- |
| 143 | + |
| 144 | +// Slotted Start |
141 | 145 | ::slotted([slot="start"]) { |
142 | 146 | @include mixins.margin-horizontal( |
143 | 147 | var(--ion-item-divider-leading-edge-margin-start, revert-layer), |
144 | 148 | var(--ion-item-divider-leading-edge-margin-end, revert-layer) |
145 | 149 | ); // for ionic this should be 0 |
146 | 150 | } |
147 | 151 |
|
| 152 | +// Slotted End |
148 | 153 | ::slotted([slot="end"]) { |
149 | 154 | @include mixins.margin-horizontal( |
150 | 155 | var(--ion-item-divider-trailing-edge-margin-start, revert-layer), |
151 | 156 | var(--ion-item-divider-trailing-edge-margin-end, revert-layer) |
152 | 157 | ); |
153 | 158 | } |
154 | 159 |
|
155 | | -// Slotted Label |
156 | | -// -------------------------------------------------- |
157 | | - |
| 160 | +// Label |
158 | 161 | ::slotted(ion-label) { |
159 | 162 | @include mixins.margin( |
160 | 163 | var(--ion-item-divider-label-margin-top), |
|
164 | 167 | ); |
165 | 168 | } |
166 | 169 |
|
167 | | -// Slotted Icon |
168 | | -// -------------------------------------------------- |
169 | | - |
| 170 | +// Icon |
170 | 171 | ::slotted(ion-icon) { |
171 | 172 | color: var(--ion-item-divider-icon-default-color); |
172 | 173 |
|
|
195 | 196 | ); |
196 | 197 | } |
197 | 198 |
|
198 | | -// Slotted Note |
199 | | -// -------------------------------------------------- |
200 | | - |
| 199 | +// Note |
201 | 200 | ::slotted(ion-note) { |
202 | 201 | @include mixins.margin( |
203 | 202 | var(--ion-item-divider-note-margin-top), |
|
220 | 219 | ); |
221 | 220 | } |
222 | 221 |
|
223 | | -// Slotted Avatar |
224 | | -// -------------------------------------------------- |
225 | | - |
| 222 | +// Avatar |
226 | 223 | ::slotted(ion-avatar) { |
227 | 224 | @include mixins.margin( |
228 | 225 | var(--ion-item-divider-avatar-margin-top), |
|
249 | 246 | ); |
250 | 247 | } |
251 | 248 |
|
252 | | -// Slotted Thumbnail |
253 | | -// -------------------------------------------------- |
254 | | - |
| 249 | +// Thumbnail |
255 | 250 | ::slotted(ion-thumbnail) { |
256 | 251 | // TODO(FW-6862): separate width and height tokens for thumbnails |
257 | 252 | --size: var(--ion-item-divider-thumbnail-width); |
|
278 | 273 | ); |
279 | 274 | } |
280 | 275 |
|
281 | | -// Slotted Content |
282 | | -// -------------------------------------------------- |
283 | | - |
| 276 | +// Headers |
284 | 277 | ::slotted(h1) { |
285 | 278 | @include mixins.margin( |
286 | 279 | var(--ion-item-divider-header1-margin-top), |
|
380 | 373 | ); |
381 | 374 | } |
382 | 375 |
|
| 376 | +// Paragraph |
383 | 377 | ::slotted(p) { |
384 | 378 | @include mixins.margin( |
385 | 379 | var(--ion-item-divider-paragraph-margin-top), |
|
0 commit comments