mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
424b15aefd
* fix(rtl): add correct text-align * feat(text-align): add mixin for backwards compatibility of variables * fix(text-align): default null not empty string * fix(text-align): remove default
85 lines
1.8 KiB
SCSS
85 lines
1.8 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
// Chip
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Border radius of the button in the chip
|
|
$chip-button-border-radius: 50% !default;
|
|
|
|
/// @prop - Margin of the button in the chip
|
|
$chip-button-margin: 0 !default;
|
|
|
|
/// @prop - Width and height of the button in the chip
|
|
$chip-button-size: 32px !default;
|
|
|
|
/// @prop - Border radius of the icon in the chip
|
|
$chip-icon-border-radius: 50% !default;
|
|
|
|
/// @prop - Text alignment of the icon in the chip
|
|
$chip-icon-text-align: center !default;
|
|
|
|
/// @prop - Width and height of the icon in the chip
|
|
$chip-icon-size: 32px !default;
|
|
|
|
/// @prop - Font size of the icon in the chip
|
|
$chip-icon-font-size: 18px !default;
|
|
|
|
/// @prop - Width and height of the avatar in the chip
|
|
$chip-avatar-size: 32px !default;
|
|
|
|
/// @prop - Border radius of the avatar in the chip
|
|
$chip-avatar-border-radius: 50% !default;
|
|
|
|
|
|
ion-chip {
|
|
display: inline-flex;
|
|
|
|
align-self: center;
|
|
|
|
font-weight: normal;
|
|
vertical-align: middle;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
ion-chip .button {
|
|
margin: $chip-button-margin;
|
|
|
|
width: $chip-button-size;
|
|
height: $chip-button-size;
|
|
|
|
border-radius: $chip-button-border-radius;
|
|
}
|
|
|
|
ion-chip ion-icon {
|
|
@include text-align($chip-icon-text-align);
|
|
|
|
width: $chip-icon-size;
|
|
height: $chip-icon-size;
|
|
|
|
border-radius: $chip-icon-border-radius;
|
|
|
|
font-size: $chip-icon-font-size;
|
|
line-height: $chip-icon-size;
|
|
}
|
|
|
|
ion-chip ion-avatar {
|
|
width: $chip-avatar-size;
|
|
min-width: $chip-avatar-size;
|
|
height: $chip-avatar-size;
|
|
min-height: $chip-avatar-size;
|
|
|
|
border-radius: $chip-avatar-border-radius;
|
|
}
|
|
|
|
ion-chip ion-avatar img {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
|
|
border-radius: $chip-avatar-border-radius;
|
|
}
|