javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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;
}
:host(:focus) {
outline: none;
}
:host(:focus) {
--background: rgba(0, 0, 0, .16);
}
:host(.activated) {
--background: rgba(0, 0, 0, .20);
}
// Colors
// Chip Colors
// ---------------------------------------------
:host(.ion-color) {
background: current-color(base, .08);
@ -66,14 +55,16 @@
}
// Outline
// Outline Chip
// ---------------------------------------------
:host(.chip-outline) {
border-width: 1px;
border-style: solid;
}
:host(.chip-outline:not(.ion-color)) {
:host(.chip-outline) {
border-color: rgba(0, 0, 0, .32);
background: transparent;
@ -92,7 +83,8 @@
}
// Icon
// Chip Icon
// ---------------------------------------------
::slotted(ion-icon) {
font-size: 20px;
@ -111,7 +103,8 @@
}
// Avatar
// Chip Avatar
// ---------------------------------------------
::slotted(ion-avatar) {
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) {
:host(:hover) {