javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +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 { ion-chip {
} }
@ -13,7 +14,7 @@ ion-chip {
@each $color-name, $color-value in $colors-ios { @each $color-name, $color-value in $colors-ios {
ion-chip { ion-chip {
> ion-icon[#{$color-name}] { ion-icon[#{$color-name}] {
background-color: $color-value; background-color: $color-value;
color: color-inverse($color-value) !important; color: color-inverse($color-value) !important;
} }

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

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

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

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