mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
61 lines
1.6 KiB
SCSS
61 lines
1.6 KiB
SCSS
@import "./chip.vars";
|
|
|
|
// Chip
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background: Background of the chip
|
|
* @prop --color: Color of the chip
|
|
*
|
|
* @prop --label-margin-top: Margin top of the chip label
|
|
* @prop --label-margin-end: Margin end of the chip label
|
|
* @prop --label-margin-bottom: Margin bottom of the chip label
|
|
* @prop --label-margin-start: Margin start of the chip label
|
|
*
|
|
* @prop --avatar-width: Width of the chip avatar
|
|
* @prop --avatar-height: Height of the chip avatar
|
|
* @prop --avatar-margin-top: Margin top of the chip avatar
|
|
* @prop --avatar-margin-end: Margin end of the chip avatar
|
|
* @prop --avatar-margin-bottom: Margin bottom of the chip avatar
|
|
* @prop --avatar-margin-start: Margin start of the chip avatar
|
|
*/
|
|
|
|
@include font-smoothing();
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
align-self: center;
|
|
|
|
background: var(--background);
|
|
color: var(--color);
|
|
|
|
font-family: $font-family-base;
|
|
font-weight: normal;
|
|
|
|
vertical-align: middle;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:host(.ion-color) {
|
|
background: current-color(base);
|
|
color: current-color(contrast);
|
|
}
|
|
|
|
:host(.ion-color)::slotted(*) ion-chip-icon,
|
|
:host(.ion-color)::slotted(*) ion-chip-button {
|
|
--color: currentColor;
|
|
}
|
|
|
|
::slotted(*) ion-label {
|
|
@include margin(var(--label-margin-top), var(--label-margin-end), var(--label-margin-bottom), var(--label-margin-start));
|
|
}
|
|
|
|
::slotted(*) ion-avatar {
|
|
@include margin(var(--avatar-margin-top), var(--avatar-margin-end), var(--avatar-margin-bottom), var(--avatar-margin-start));
|
|
|
|
width: var(--avatar-width);
|
|
height: var(--avatar-height);
|
|
}
|