diff options
Diffstat (limited to 'res/css')
| -rw-r--r-- | res/css/modules/colors.scss | 1 | ||||
| -rw-r--r-- | res/css/partials/input-bar.scss | 39 | ||||
| -rw-r--r-- | res/css/style.css | 39 |
3 files changed, 54 insertions, 25 deletions
diff --git a/res/css/modules/colors.scss b/res/css/modules/colors.scss index bb8520de..95956a49 100644 --- a/res/css/modules/colors.scss +++ b/res/css/modules/colors.scss @@ -2,6 +2,7 @@ $light-grey: #f5f5fa; $mid-grey: #919095; $dark-grey: #363636; $magenta: #ee3654; +$dark-magenta: #d10a40; $cyan: #33c2e0; $blue: #004681; $purple: #8b3ab0; 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{ diff --git a/res/css/style.css b/res/css/style.css index 8fc1316c..61fa7a6a 100644 --- a/res/css/style.css +++ b/res/css/style.css @@ -292,29 +292,42 @@ table { .input-bar { font-family: "Source_Regular", sans-serif; color: #919095; - height: 36px; - width: 420px; - padding-left: 8px; - border-radius: 4px; + max-height: 36px; + width: 260px; + padding: 6px 8px 5px 8px; border: 1px solid #919095; - background: white; } + background: white; + transition-property: width; + transition-duration: 200ms; + transition-timing-function: ease-in; } .input-bar:focus { - border-radius: 4px; border: 1px solid #919095; - -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 { font-family: "Source_Regular", sans-serif; color: #919095; } .add-button { + background: url(../img/plus-button.png); + background-position: center; + background-repeat: no-repeat; + background-color: #ee3654; 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: #d10a40; } + +.add-button:focus { + outline: none; } .suggestion { list-style-type: none; } |