Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(chips): Fix styling issues with padding & remove.
Browse files Browse the repository at this point in the history
Update SCSS to fix:
 * remove icon jumping to next line on long chips
 * right padding of chips without a remove icon
 * location of remove icon in Firefox/Safari

fixes #4264. fixes #3276. fixes #2410. closes #4275.
  • Loading branch information
topherfangio authored and ThomasBurleson committed Aug 21, 2015
1 parent e22cd6b commit af3ef52
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 6 deletions.
21 changes: 16 additions & 5 deletions src/components/chips/chips.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
$chip-font-size: rem(1.6) !default;
$chip-height: rem(3.2) !default;
$chip-padding: 0 rem(0.8) 0 rem(1.2) !default;
$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
$chip-remove-padding-right: rem(2.2) !default;
$chip-remove-line-height: rem(2.2) !default;
$chip-margin: rem(0.8) rem(0.8) 0 0 !default;
$chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;
$chip-delete-icon-size: rem(1.8) !default;
$contact-chip-padding: 0 rem(0.8) 0 0 !default;
$contact-chip-padding: 0 rem(2.5) 0 0 !default;
$contact-chip-suggestion-image-height: rem(4.0) !default;
$contact-chip-suggestion-margin: rem(0.8) !default;
$contact-chip-name-width: rem(12) !default;
Expand Down Expand Up @@ -50,15 +52,21 @@ $contact-chip-name-width: rem(12) !default;
}
.md-chips {
@include pie-clearfix();

display: block;
font-family: $font-family;
font-size: $chip-font-size;
padding: $chip-wrap-padding;
vertical-align: middle;

&:not('.md-readonly') {
&:not(.md-readonly) {
cursor: text;

.md-chip {
padding-right: $chip-remove-padding-right;
}
}

.md-chip {
cursor: default;
border-radius: $chip-height / 2;
Expand All @@ -70,6 +78,8 @@ $contact-chip-name-width: rem(12) !default;
float: left;
box-sizing: border-box;
max-width: 100%;
position: relative;

.md-chip-content {
display: block;
padding-right:rem(0.4);
Expand All @@ -83,8 +93,9 @@ $contact-chip-name-width: rem(12) !default;
}
}
.md-chip-remove-container {
display: inline-block;
margin-right: rem(-0.5);
position: absolute;
right: 0;
line-height: $chip-remove-line-height;
}
.md-chip-remove {
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion src/components/chips/demoBasicUsage/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}
&:not(.md-readonly) {
md-chip-template {
padding-right: 20px;
padding-right: 5px;
}
}
}
Expand Down

0 comments on commit af3ef52

Please sign in to comment.