Commit e25dcb78 authored by Aron Carroll's avatar Aron Carroll

Simplify the tags input styles

* Simplify the tags, no gradients or drop shadows.
* Use less padding to make them smaller.
* Remove the background color so they adopt the input background. This
  works nicely when the field loses focus.
* Increase the hit area of the delete button. It now takes up the entire
  right side of the tag.
parent bc535a76
...@@ -19,7 +19,7 @@ tags-input { ...@@ -19,7 +19,7 @@ tags-input {
// Input // Input
.input { .input {
float: left; float: left;
margin-top: .33em; margin-top: .1875em;
padding: .2em 0; padding: .2em 0;
outline: none; outline: none;
border: none !important; border: none !important;
...@@ -33,12 +33,15 @@ tags-input { ...@@ -33,12 +33,15 @@ tags-input {
} }
.tag-item { .tag-item {
@include btn;
float: left; float: left;
position: relative; position: relative;
padding: .307em 1.538em .307em .615em; padding: .154em 1.307em .154em .538em;
margin-top: .384em; margin-top: .384em;
margin-right: .384em; margin-right: .384em;
font-size: .866em;
color: $button-text-color;
border: 1px solid $gray-lighter;
border-radius: 2px;
&.selected { &.selected {
@include btn-hover; @include btn-hover;
...@@ -46,14 +49,18 @@ tags-input { ...@@ -46,14 +49,18 @@ tags-input {
} }
.remove-button { .remove-button {
display: block;
position: absolute; position: absolute;
top: 50%; top: 0;
right: 5px; right: 0;
bottom: 0;
width: 16px;
font-size: 17px;
font-weight: bold;
line-height: 1.4;
text-align: center;
color: #585858; color: #585858;
font-size: 20px;
cursor: pointer; cursor: pointer;
line-height: 1;
margin-top: -10px;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment