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

fix(chip): conforms to ion-icon

Browse Source 
fixes #15053
This commit is contained in:
Manu Mtz.-Almeida
2018-08-07 02:21:28 +02:00
parent 8b35e37a43
commit f49fa4a815
5 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/chip-button/chip-button.scss
View File

@ -4,24 +4,25 @@
// --------------------------------------------------
:host {
--background: var(--ion-color-base);
--color: var(--ion-color-contrast);
--size: #{$chip-button-size};
--icon-size: 18px;
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
--size: #{$chip-button-size};
}
:host(.chip-button-clear) {
--color: var(--ion-color-base);
--background: transparent;
--background: #{current-color(base)};
color: #{current-color(contrast)}
}
::slotted(ion-icon) {
font-size: var(--icon-size);
:host(.chip-button-clear) {
--background: transparent;
color: #{current-color(base)};
}
.chip-button-native {
@include text-inherit();
@include border-radius($chip-button-border-radius);
@include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
@ -35,7 +36,6 @@
outline: none;
background: var(--background);
color: var(--color);
appearance: none;
}

3
core/src/components/chip-button/chip-button.tsx
View File

@ -32,7 +32,7 @@ export class ChipButton {
/**
* Set to `"clear"` for a transparent button style.
*/
@Prop() fill = 'default';
@Prop() fill: 'clear' | 'solid' = 'solid';
/**
* Contains a URL or a URL fragment that the hyperlink points to.
@ -54,6 +54,7 @@ export class ChipButton {
return (
<TagType
type="button"
class="chip-button-native"
disabled={this.disabled}
href={this.href}>