diff options
| author | Ofer Lehr <ofer@oferlehr.com> | 2014-12-04 07:52:26 +0200 |
|---|---|---|
| committer | Ofer Lehr <ofer@oferlehr.com> | 2014-12-04 07:52:26 +0200 |
| commit | 4ff5accf05d966087315b776623b7deb44c099b6 (patch) | |
| tree | 67e6ff5d7ce4e842106c98e0f6078b999b8412c6 /res/css/partials | |
| parent | c03c938fff897bf6c9e2f784c223bc50f536e4cd (diff) | |
improved input bar styling and animation
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{ |