diff options
1 files changed, 74 insertions, 8 deletions
| -rw-r--r-- | src/chips.less | 82 |
diff --git a/src/chips.less b/src/chips.less index 53a2723..4ea0016 100644 --- a/src/chips.less +++ b/src/chips.less @@ -1,27 +1,93 @@ // Chips .chip { + display: flex; + padding: .3rem .8rem; + border: .1rem solid transparent; + border-radius: .3rem; + margin: 0; + list-style: none; + align-items: center; + align-content: space-around; + color: #666; + + .chip-icon { + flex: 0 0 auto; + } + .chip-content { + flex: 1 1 auto; + padding: 0 1rem; + .text-ellipsis; + } + .chip-action { + flex: 0 0 auto; + + .btn { + padding: .7rem .5rem; + border-color: transparent; + color: @control-color; + + &:hover, + &:focus { + color: @core-color; + border-color: transparent; + background-color: transparent; + } + &:active, + &.active { + color: darken(@core-color, 5%); + border-color: transparent; + background-color: transparent; + } + } + } +} + +// Small chips +.chip-sm { display: inline-flex; + align-items: center; + vertical-align: middle; + max-width: 100%; + height: 2.4rem; padding: .3rem .6rem; border-radius: .3rem; font-size: 1.2rem; - vertical-align: middle; - align-items: center; - background-color: @core-border-color; - border: .1rem solid darken(@core-border-color, 5%); + background-color: lighten(@core-color, 40%); + color: #666; + text-decoration: none; &:hover, &:focus { - background-color: darken(@core-border-color, 2%); + background-color: lighten(@core-color, 38%); + } + + .btn { + &::before, + &::after { + background-color: darken(@core-color, 10%); + } + } + + &.selected { + background-color: @core-color; + color: #fff; + + .btn { + &::before, + &::after { + background-color: lighten(@core-color, 40%); + } + } } .chip-name { margin-left: .4rem; + .text-ellipsis; } + .avatar { width: 1.6rem; height: 1.6rem; font-size: .8rem; } -} - -// TODO: Chip contacts and files
\ No newline at end of file +}
\ No newline at end of file |