Skip to content
Permalink
Browse files

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

  • Loading branch information...
brandyscarney committed Mar 15, 2019
1 parent 7d01207 commit f6783dbd2ed9136194e24e522624ecbcf36dc422
Showing with 32 additions and 18 deletions.
  1. +32 −18 core/src/components/chip/chip.scss
@@ -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) {

0 comments on commit f6783db

Please sign in to comment.
You can’t perform that action at this time.