From d081b301d8e79452cbdec5f29015a68d2ad6abe6 Mon Sep 17 00:00:00 2001 From: lilia Date: Sun, 27 Mar 2016 15:30:10 -0700 Subject: [PATCH] Clean up search outline // FREEBIE --- stylesheets/_index.scss | 24 +++++++++++------------ stylesheets/manifest.css | 41 +++++++++++++++++++--------------------- 2 files changed, 30 insertions(+), 35 deletions(-) diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 9a9b9b9cb..dfb54570f 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -84,6 +84,16 @@ input.search { padding: 0; margin: 0; outline: 0; + height: $button-height; + width: 100%; + padding: 10px; + border: solid 1px $grey_l; + outline-offset: -2px; + + &.active { + outline: solid 1px $blue; + } + &::-webkit-search-cancel-button { -webkit-appearance: none; display: block; @@ -92,15 +102,13 @@ input.search { background: url('/images/x.png') no-repeat center; background-size: cover; } + &::-webkit-search-cancel-button:hover { cursor: pointer; } } .tool-bar { - background: $grey_l; - padding: 2px; - button.show-new-conversation { float: right; height: $button-height; @@ -116,16 +124,6 @@ input.search { } } - input.search { - height: $button-height; - width: 100%; - padding: 10px; - border: solid 1px $grey_l; - - &.active { - outline: solid 1px $blue; - } - } } .last-timestamp { diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 92f8aaba2..460cb4d5c 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -495,7 +495,14 @@ input.search { border: none; padding: 0; margin: 0; - outline: 0; } + outline: 0; + height: 36px; + width: 100%; + padding: 10px; + border: solid 1px #f3f3f3; + outline-offset: -2px; } + input.search.active { + outline: solid 1px #2090ea; } input.search::-webkit-search-cancel-button { -webkit-appearance: none; display: block; @@ -506,27 +513,17 @@ input.search { input.search::-webkit-search-cancel-button:hover { cursor: pointer; } -.tool-bar { - background: #f3f3f3; - padding: 2px; } - .tool-bar button.show-new-conversation { - float: right; - height: 36px; - width: 36px; - border: 0; - outline: 0; - font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; - color: white; - background: url("/images/pencil.png") no-repeat center center; } - .tool-bar button.show-new-conversation:hover { - background-color: #ebebeb; } - .tool-bar input.search { - height: 36px; - width: 100%; - padding: 10px; - border: solid 1px #f3f3f3; } - .tool-bar input.search.active { - outline: solid 1px #2090ea; } +.tool-bar button.show-new-conversation { + float: right; + height: 36px; + width: 36px; + border: 0; + outline: 0; + font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; + color: white; + background: url("/images/pencil.png") no-repeat center center; } + .tool-bar button.show-new-conversation:hover { + background-color: #ebebeb; } .last-timestamp { font-size: smaller;