mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
fix(chip): remove button dependency and fix standalone styles
This commit is contained in:
@ -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%;
|
||||
}
|
@ -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} /> }
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -12,6 +12,9 @@ ion-chip {
|
||||
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
ion-chip > ion-icon {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user