javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add shape prop to Chip

Browse Source
This commit is contained in:
Bernardo Cardoso
2024-04-08 15:52:54 +01:00
parent 77c67f2362
commit 557efc203e
4 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/chip/chip.ionic.scss
View File

@ -9,13 +9,14 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
:host {
--background: #{tokens.$ionic-color-neutral-10};
--border-color: transparent;
--border-radius: #{tokens.$ionic-border-radius-rounded-large};
--color: #{tokens.$ionic-color-neutral-900};
--focus-ring-color: #{$ionic-states-focus-primary};
--focus-ring-width: #{tokens.$ionic-border-size-medium};
@include mixins.font-smoothing;
@include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs);
@include mixins.border-radius(tokens.$ionic-border-radius-rounded-large);
@include mixins.border-radius(var(--border-radius));
display: inline-flex;
@ -75,3 +76,16 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
opacity: 0.6;
pointer-events: none;
}
// Chip Shapes
// ---------------------------------------------
:host(.chip-soft) {
--border-radius: #{tokens.$ionic-border-radius-rounded-small};
}
:host(.chip-round) {
--border-radius: #{tokens.$ionic-border-radius-rounded-large};
}
:host(.chip-rectangular) {
--border-radius: #{tokens.$ionic-border-radius-square};
}