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

Merge branch 'next' into ROU-4837

Browse Source
This commit is contained in:
Bernardo Cardoso
2024-04-08 16:24:50 +01:00
parent 557efc203e 7ce115993a
commit daa8742df4
2 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,9 @@
// Chip
// --------------------------------------------------
$ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet for this one, but it should be created in the future, once UX team has figma tokens done
// TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done
$ionic-states-focus-primary: #9ec4fd;
$ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba().
:host {
--background: #{tokens.$ionic-color-neutral-10};
@ -24,6 +26,8 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
align-items: center;
gap: tokens.$ionic-space-xxxs;
min-height: 32px;
border-width: tokens.$ionic-border-size-small;
@ -42,6 +46,8 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
overflow: hidden;
box-sizing: border-box;
vertical-align: middle;
}
// Outline Chip
@ -65,7 +71,7 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
@media (any-hover: hover) {
:host(:hover) {
--background: #{rgba(tokens.$ionic-color-neutral-900, 0.16)};
--background: #{$ionic-states-hover};
}
}
@ -89,3 +95,9 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
:host(.chip-rectangular) {
--border-radius: #{tokens.$ionic-border-radius-square};
}
// Chip Icon
// ---------------------------------------------
::slotted(ion-icon) {
font-size: tokens.$ionic-font-size-l;
}