javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chip): use transparent outline on color chips (#17719)

Browse Source
This commit is contained in:
Brandy Carney
2019-03-15 12:47:31 -04:00
committed by GitHub
parent 7d0120789c
commit f6783dbd2e
1 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
core/src/components/chip/chip.scss
View File

@ -37,20 +37,9 @@
box-sizing: border-box; box-sizing: border-box;
} }
:host(:focus) {
outline: none;
}
:host(:focus) { // Chip Colors
--background: rgba(0, 0, 0, .16); // ---------------------------------------------
}
:host(.activated) {
--background: rgba(0, 0, 0, .20);
}
// Colors
:host(.ion-color) { :host(.ion-color) {
background: current-color(base, .08); background: current-color(base, .08);
@ -66,14 +55,16 @@
} }
// Outline // Outline Chip
// ---------------------------------------------
:host(.chip-outline) { :host(.chip-outline) {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
} }
:host(.chip-outline:not(.ion-color)) { :host(.chip-outline) {
border-color: rgba(0, 0, 0, .32); border-color: rgba(0, 0, 0, .32);
background: transparent; background: transparent;
@ -92,7 +83,8 @@
} }
// Icon // Chip Icon
// ---------------------------------------------
::slotted(ion-icon) { ::slotted(ion-icon) {
font-size: 20px; font-size: 20px;
@ -111,7 +103,8 @@
} }
// Avatar // Chip Avatar
// ---------------------------------------------
::slotted(ion-avatar) { ::slotted(ion-avatar) {
width: 24px; width: 24px;
@ -127,7 +120,28 @@
} }
// Hover // Chip: Focus
// ---------------------------------------------
:host(:focus) {
outline: none;
}
:host(:focus) {
--background: rgba(0, 0, 0, .16);
}
// Chip: Activated
// ---------------------------------------------
:host(.activated) {
--background: rgba(0, 0, 0, .20);
}
// Chip: Hover
// ---------------------------------------------
@media (any-hover: hover) { @media (any-hover: hover) {
:host(:hover) { :host(:hover) {