javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chip): cleaned up some of the UI and added some sass variables

Browse Source 
references #5386
This commit is contained in:
Brandy Carney
2016-02-23 16:13:27 -05:00
parent dd206ad7d6
commit eeac7956eb
3 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ionic/components/chip/chip.ios.scss
View File

@ -4,6 +4,7 @@
// --------------------------------------------------
ion-chip {
}
@ -13,7 +14,7 @@ ion-chip {
@each $color-name, $color-value in $colors-ios {
ion-chip {
> ion-icon[#{$color-name}] {
ion-icon[#{$color-name}] {
background-color: $color-value;
color: color-inverse($color-value) !important;
}

3
ionic/components/chip/chip.md.scss
View File

@ -4,6 +4,7 @@
// --------------------------------------------------
ion-chip {
}
@ -13,7 +14,7 @@ ion-chip {
@each $color-name, $color-value in $colors-md {
ion-chip {
> ion-icon [#{$color-name}] {
ion-icon[#{$color-name}] {
background-color: $color-value;
color: color-inverse($color-value) !important;
}

56
ionic/components/chip/chip.scss
View File

@ -3,29 +3,41 @@
// Chip
// --------------------------------------------------
$chip-background-color: rgba(0,0,0,0.12) !default;
$chip-font-size: 13px !default;
$chip-height: 32px !default;
$chip-border-radius: 16px !default;
$chip-padding: 0 12px !default;
$chip-margin: 2px 0 !default;
$chip-label-color: rgba(0,0,0,0.87) !default;
$chip-icon-color: rgba(0,0,0,0.87) !default;
ion-chip {
font-size: 13px;
font-weight: normal;
background: rgba(0,0,0,0.12);
background: $chip-background-color;
display: inline-block;
height: 32px;
line-height: 32px;
border-radius: 16px;
padding: 0 12px;
height: $chip-height;
line-height: $chip-height;
border-radius: $chip-border-radius;
padding: $chip-padding;
margin: $chip-margin;
box-sizing: border-box;
vertical-align: middle;
display: inline-flex;
align-self: center;
margin: 2px 0;
font-size: $chip-font-size;
font-weight: normal;
ion-label {
margin: 0;
color: rgba(0,0,0,0.87);
color: $chip-label-color;
}
> ion-icon, > ion-avatar {
> ion-icon,
> ion-avatar {
width: 32px;
height: 32px;
margin-left: -12px;
@ -33,20 +45,18 @@ ion-chip {
border-radius: 50%;
text-align: center;
line-height: 32px;
color: rgba(0,0,0,0.87);
// .flex-shrink(0);
color: $chip-icon-color;
font-size: 18px;
// .flexbox();
// .align-items(center);
// .justify-content(center);
img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
}
+ ion-label {
margin-left: 8px;
}
@ -58,9 +68,9 @@ ion-chip {
}
.button {
min-height: inherit;
height: inherit;
margin: 0;
margin-right: -4px;
margin-left: 8px;
}
ion-icon[name="close-circle"] {