diff options
Diffstat (limited to 'res/css/partials')
| -rw-r--r-- | res/css/partials/input-bar.scss | 39 |
1 files changed, 27 insertions, 12 deletions
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss index e0d1303e..57de8c01 100644 --- a/res/css/partials/input-bar.scss +++ b/res/css/partials/input-bar.scss @@ -11,18 +11,20 @@ .input-bar { font-family: $base-font-family; color: $mid-grey; - height: $three-baselines; - width: 420px; - padding-left:8px; - border-radius: 4px; + max-height: $three-baselines; + width: 260px; + padding: 6px 8px 5px 8px; border: 1px solid $mid-grey; background: white; + transition-property: width; + transition-duration: 200ms; + transition-timing-function: ease-in; &:focus { - border-radius: 4px; border: 1px solid $mid-grey; - -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); - -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); - box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); } + width: 520px; + -webkit-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); + -moz-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); + box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } } #textanalyser.ui-autocomplete-input { @@ -31,11 +33,24 @@ } .add-button { + background: url(../img/plus-button.png); + background-position: center; + background-repeat: no-repeat; + background-color: $magenta; position:relative; - height: 30px; - width: 30px; - left: -38px; - top: 10px; + height: 36px; + width: 36px; + left: -39px; + border: 0; + top: 9px; +} + +.add-button:hover { + background-color: $dark-magenta; +} + +.add-button:focus { + outline: none; } .suggestion{ |