diff options
6 files changed, 142 insertions, 15 deletions
| -rw-r--r-- | src/autocomplete.less | 59 | ||||
| -rw-r--r-- | src/badges.less | 3 | ||||
| -rw-r--r-- | src/buttons.less | 3 | ||||
| -rw-r--r-- | src/chips.less | 82 | ||||
| -rw-r--r-- | src/menus.less | 7 | ||||
| -rw-r--r-- | src/utilities.less | 3 |
diff --git a/src/autocomplete.less b/src/autocomplete.less new file mode 100644 index 0000000..1a27c57 --- /dev/null +++ b/src/autocomplete.less @@ -0,0 +1,59 @@ +// Autocomplete +.form-autocomplete { + position: relative; + + .form-autocomplete-input { + display: block; + width: 100%; + max-width: 100%; + min-height: 3.2rem; + background-color: #fff; + padding: .3rem .5rem 0 .5rem; + border: .1rem solid @control-color; + border-radius: .3rem; + color: @body-font-color; + font-size: 1.4rem; + line-height: 1.6rem; + outline: 0; + + .chip-sm { + margin-bottom: .3rem; + } + + .form-input { + display: inline-block; + border-color: transparent; + background-color: #fff; + width: auto; + height: 2.4rem; + padding: .3rem; + margin-bottom: .3rem; + vertical-align: top; + } + } + + .form-autocomplete-list { + position: absolute; + top: 100%; + left: 0; + z-index: 1988; + display: block; + width: 100%; + height: auto; + padding: .5rem; + margin: .3rem 0 0 0; + border: .1rem solid lighten(@control-color, 5%); + border-radius: .3rem; + background-color: #fff; + .light-shadow; + + .chip { + background-color: transparent; + + &:hover, + &.selected { + background-color: lighten(@core-color, 40%); + } + } + } +}
\ No newline at end of file diff --git a/src/badges.less b/src/badges.less index 265d29b..cd4a70d 100644 --- a/src/badges.less +++ b/src/badges.less @@ -1,8 +1,7 @@ // Badges .badge { position: relative; - - + &::after { content: attr(data-badge); color: #fff; diff --git a/src/buttons.less b/src/buttons.less index 6ed1e42..41edb47 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -108,9 +108,9 @@ border: 0; border-radius: .7rem; vertical-align: top; + position: relative; background-color: transparent; opacity: .35; - transform: rotate(-45deg); &:hover { opacity: .75; @@ -124,6 +124,7 @@ top: 50%; left: 50%; background-color: #333; + transform: rotate(-45deg); } &::before { 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 diff --git a/src/menus.less b/src/menus.less index 818155b..649cd53 100644 --- a/src/menus.less +++ b/src/menus.less @@ -3,7 +3,7 @@ display: block; text-align: left; margin: 0; - padding: 1rem; + padding: .5rem; border-radius: .3rem; background-color: #fff; z-index: 999; @@ -12,7 +12,7 @@ .menu-item { display: block; padding: .2rem 1rem; - margin-top: 0; + margin-top: .1rem; border-radius: .3rem; color: @body-font-color; line-height: 2.4rem; @@ -30,11 +30,10 @@ &:hover, &:focus { color: @core-link-color; - background-color: lighten(@core-color, 45%); } &:active, &.active { - color: darken(@core-link-color, 15%); + color: darken(@core-link-color, 5%); background-color: lighten(@core-color, 40%); } } diff --git a/src/utilities.less b/src/utilities.less index 25c8bc1..c47f5a0 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -156,6 +156,9 @@ word-wrap: break-word; hyphens: auto; } +.hand { + cursor: pointer; +} // Shadow .shadow { |