Skip to content

Commit

Permalink
Merge pull request #895 from isaaclyman/513-convert-chip-to-mixins
Browse files Browse the repository at this point in the history 
refactor(chip): convert chip to mixins
  • Loading branch information
@isaaclyman
isaaclyman authored Jul 8, 2019
2 parents c6b5b23 + c53fd4f commit 445203a
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 83 deletions.
122 changes: 39 additions & 83 deletions projects/cashmere/src/lib/chip/chip.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,69 @@
@import '../sass/colors';
@import '../sass/functions.scss';
@import '../sass/mixins.scss';
@import '../sass/chip.scss';

.hc-chip {
border-radius: 6px;
height: 32px;
line-height: 32px;
@include fontSize(14px);
display: inline-block;
padding: 0 15px;
margin: 5px;
white-space: nowrap;

&.hc-chip-close {
cursor: pointer;
}
@include hc-chip();
}

.hc-chip-neutral {
color: $text;
background-color: tint($text, 87%);
.hc-chip-close {
@include hc-chip-close();
}

.hc-chip-close-icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfMSIgZGF0YS1uYW1lPSJQYXRoIDEiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjMzMzIi8+Cjwvc3ZnPgo=');
}
.hc-chip-neutral {
@include hc-chip-neutral();
}

.hc-chip-red {
color: $ruby-red;
background-color: tint($ruby-red, 85%);
border: 2px solid tint($ruby-red, 75%);
line-height: 28px !important;

.hc-chip-close-icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfMiIgZGF0YS1uYW1lPSJQYXRoIDIiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjOTUxYzFlIi8+Cjwvc3ZnPgo=');
}
@include hc-chip-red();
}

.hc-chip-yellow {
color: shade($yellow-orange, 25%);
background-color: tint($yellow-orange, 80%);
border: 2px solid tint($yellow-orange, 50%);
line-height: 28px !important;

.hc-chip-close-icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfMyIgZGF0YS1uYW1lPSJQYXRoIDMiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjYWQ5MzM1Ii8+Cjwvc3ZnPgo=');
}
@include hc-chip-yellow();
}

.hc-chip-green {
color: $green;
background-color: tint($light-green, 60%);
border: 2px solid tint($light-green, 30%);
line-height: 28px !important;

.hc-chip-close-icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfNCIgZGF0YS1uYW1lPSJQYXRoIDQiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjMDBhODU5Ii8+Cjwvc3ZnPgo=');
}
@include hc-chip-green();
}

.hc-chip-close-icon {
opacity: 0.4;
width: 10px;
height: 10px;
margin-left: 13px;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
@include hc-chip-close-icon();

.hc-chip-neutral & {
@include hc-chip-close-icon-neutral();
}

.hc-chip-red & {
@include hc-chip-close-icon-red();
}

.hc-chip-yellow & {
@include hc-chip-close-icon-yellow();
}

.hc-chip-green & {
@include hc-chip-close-icon-green();
}
}

.hc-chip-row-contents {
display: inline-block;
@include hc-chip-row-contents();
}

.hc-chip-single-row {
height: 42px;
overflow: hidden;
}
@include hc-chip-single-row();

.hc-chip-single-row:before {
content: '';
float: left;
width: 5px;
height: 50px;
}
&::before {
@include hc-chip-single-row-before();
}

.hc-chip-single-row > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
& > *:first-child {
@include hc-chip-single-row-first-child();
}

.hc-chip-single-row:after {
content: '…more';

box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

float: right;
position: relative;
top: -35px;
left: 100%;
width: 3.5em;
margin-left: -3.5em;
padding-right: 5px;
text-align: right;
&::after {
@include hc-chip-single-row-after();
}
}

.hc-chip-row-buffer {
margin-right: 3.5em;
@include hc-chip-row-buffer();
}
114 changes: 114 additions & 0 deletions projects/cashmere/src/lib/sass/chip.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
@import '../sass/colors';
@import '../sass/functions.scss';
@import '../sass/mixins.scss';

@mixin hc-chip() {
@include fontSize(14px);

border-radius: 6px;
display: inline-block;
height: 32px;
line-height: 32px;
margin: 5px;
padding: 0 15px;
white-space: nowrap;
}

@mixin hc-chip-close() {
cursor: pointer;
}

@mixin hc-chip-neutral() {
background-color: tint($text, 87%);
color: $text;
}

@mixin hc-chip-red() {
background-color: tint($ruby-red, 85%);
border: 2px solid tint($ruby-red, 75%);
color: $ruby-red;
line-height: 28px !important;
}

@mixin hc-chip-yellow() {
background-color: tint($yellow-orange, 80%);
border: 2px solid tint($yellow-orange, 50%);
color: shade($yellow-orange, 25%);
line-height: 28px !important;
}

@mixin hc-chip-green() {
background-color: tint($light-green, 60%);
border: 2px solid tint($light-green, 30%);
color: $green;
line-height: 28px !important;
}

@mixin hc-chip-close-icon() {
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 10px;
margin-left: 13px;
opacity: 0.4;
width: 10px;
}

@mixin hc-chip-close-icon-neutral() {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfMSIgZGF0YS1uYW1lPSJQYXRoIDEiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjMzMzIi8+Cjwvc3ZnPgo=');
}

@mixin hc-chip-close-icon-red() {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfMiIgZGF0YS1uYW1lPSJQYXRoIDIiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjOTUxYzFlIi8+Cjwvc3ZnPgo=');
}

@mixin hc-chip-close-icon-yellow() {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfMyIgZGF0YS1uYW1lPSJQYXRoIDMiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjYWQ5MzM1Ii8+Cjwvc3ZnPgo=');
}

@mixin hc-chip-close-icon-green() {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS44ODgiIGhlaWdodD0iMTkuODg4IiB2aWV3Qm94PSIwIDAgMTkuODg4IDE5Ljg4OCI+CiAgPHBhdGggaWQ9IlBhdGhfNCIgZGF0YS1uYW1lPSJQYXRoIDQiIGQ9Ik0yMS43My0zLjU4M2ExLjYyMywxLjYyMywwLDAsMC0uNDY5LTEuMTM4TDE2LjMzOS05LjY0M2w0LjkyMi00LjkyMkExLjYyMywxLjYyMywwLDAsMCwyMS43My0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLS40NjktMS4xMzhsLTIuMjc3LTIuMjc3YTEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LS40NjksMS42MjMsMS42MjMsMCwwLDAtMS4xMzguNDY5TDExLjc4Ni0xNC4yLDYuODY0LTE5LjExOGExLjYyMywxLjYyMywwLDAsMC0xLjEzOC0uNDY5LDEuNjIzLDEuNjIzLDAsMCwwLTEuMTM4LjQ2OUwyLjMxLTE2Ljg0MkExLjYyMywxLjYyMywwLDAsMCwxLjg0Mi0xNS43YTEuNjIzLDEuNjIzLDAsMCwwLC40NjksMS4xMzhMNy4yMzItOS42NDMsMi4zMS00LjcyMWExLjYyMywxLjYyMywwLDAsMC0uNDY5LDEuMTM4QTEuNjIzLDEuNjIzLDAsMCwwLDIuMzEtMi40NDRMNC41ODctLjE2N0ExLjYyMywxLjYyMywwLDAsMCw1LjcyNS4zLDEuNjIzLDEuNjIzLDAsMCwwLDYuODY0LS4xNjdsNC45MjItNC45MjJMMTYuNzA4LS4xNjdBMS42MjMsMS42MjMsMCwwLDAsMTcuODQ2LjNhMS42MjMsMS42MjMsMCwwLDAsMS4xMzgtLjQ2OWwyLjI3Ny0yLjI3N0ExLjYyMywxLjYyMywwLDAsMCwyMS43My0zLjU4M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjg0MiAxOS41ODcpIiBmaWxsPSIjMDBhODU5Ii8+Cjwvc3ZnPgo=');
}

@mixin hc-chip-row-contents() {
display: inline-block;
}

@mixin hc-chip-single-row() {
height: 42px;
overflow: hidden;
}

@mixin hc-chip-single-row-before() {
content: '';
float: left;
height: 50px;
width: 5px;
}

@mixin hc-chip-single-row-first-child() {
float: right;
margin-left: -5px;
width: 100%;
}

@mixin hc-chip-single-row-after() {
content: '…more';

box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

float: right;
left: 100%;
margin-left: -3.5em;
padding-right: 5px;
position: relative;
text-align: right;
top: -35px;
width: 3.5em;
}

@mixin hc-chip-row-buffer() {
margin-right: 3.5em;
}

0 comments on commit 445203a

Please sign in to comment.