fix(chip): remove button dependency and fix standalone styles

This commit is contained in:
Brandy Carney
2018-02-07 17:05:50 -05:00
parent 4299a50461
commit f6410bacbd
8 changed files with 32 additions and 17 deletions

View File

@ -7,6 +7,10 @@
@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);
position: relative;
border: 0;
width: $chip-button-size;
height: $chip-button-size;
@ -15,3 +19,15 @@
outline: none;
}
}
.chip-button-inner {
display: flex;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

View File

@ -64,7 +64,7 @@ export class ChipButton {
class={buttonClasses}
disabled={this.disabled}
href={this.href}>
<span class='button-inner'>
<span class='chip-button-inner'>
<slot></slot>
</span>
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }

View File

@ -12,8 +12,8 @@
height: $chip-md-height;
font-family: $chip-md-font-family;
font-size: $chip-md-font-size;
color: $chip-md-text-color;
background: $chip-md-background-color;
}

View File

@ -12,6 +12,9 @@ ion-chip {
font-weight: normal;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
ion-chip > ion-icon {

View File

@ -110,6 +110,14 @@
</ion-chip>
</ion-item>
<style>
body {
margin: 0;
padding: 16px;
text-align: center;
}
</style>
<script>
function del(chip) {
console.log('called del', chip);

View File

@ -8,7 +8,6 @@
@include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start);
font-family: $label-ios-font-family;
color: $label-ios-text-color;
}

View File

@ -8,7 +8,6 @@
@include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
font-family: $label-md-font-family;
color: $label-md-text-color;
}
[text-wrap] .label-md {

View File

@ -3,17 +3,7 @@
// Material Design Default Theme
// ----------------------------------
$colors-md: () !default;
$light-md: #e3e3e3;
$ion-colors-md: (
light: (
base: $light-md,
contrast: #000,
rgb: color-to-rgb-list($light-md),
shade: #d0d0d0,
tint: #f0f0f0
)
);
$ion-colors-md: ();
$colors-md: ion-extend-colors($colors, $ion-colors-md, $colors-md);
// Material Design General