diff options
author | Evgeny Fadeev <evgeny.fadeev@gmail.com> | 2013-04-02 23:52:31 -0400 |
---|---|---|
committer | Evgeny Fadeev <evgeny.fadeev@gmail.com> | 2013-04-02 23:52:31 -0400 |
commit | 413cc0a1a816bfe41d51787444353aa0d142a41d (patch) | |
tree | 6780ba214784098c5b2be9f394bc19b5cd2f0448 | |
parent | 6812490dd5c0d040cc4478f7f09a77b128fb621c (diff) | |
download | askbot-413cc0a1a816bfe41d51787444353aa0d142a41d.tar.gz askbot-413cc0a1a816bfe41d51787444353aa0d142a41d.tar.bz2 askbot-413cc0a1a816bfe41d51787444353aa0d142a41d.zip |
styled the search bar more reliably
-rw-r--r-- | askbot/media/style/style.css | 51 | ||||
-rw-r--r-- | askbot/media/style/style.less | 51 |
2 files changed, 76 insertions, 26 deletions
diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css index ced2398a..3b52c293 100644 --- a/askbot/media/style/style.css +++ b/askbot/media/style/style.css @@ -449,6 +449,20 @@ body.user-messages { height: 41px; z-index: 10000; position: relative; + /* the guts are absolute-positioned */ + +} +#searchBar input.searchInput, +#searchBar div.input-tool-tip, +#searchBar input[type="submit"].searchBtn, +#searchBar input[type="button"].cancelSearchBtn { + position: absolute; + z-index: 100; +} +#searchBar input.searchInput { + z-index: 99; + /* just below the buttons and the hint */ + } #searchBar input.searchInput { font-size: 22px; @@ -461,19 +475,36 @@ body.user-messages { font-family: Arial; width: 100%; margin: 8px 0 6px 0; - padding: 0; + padding: 0 80px 0 8px; + top: 0; + left: 0; -webkit-box-shadow: 0 0 0 #929292; -moz-box-shadow: 0 0 0 #929292; box-shadow: 0 0 0 #929292; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; } #searchBar div.input-tool-tip { - margin-top: -40px; - padding-top: 10px; - height: 30px; - line-height: 20px; + padding: 0 0 0 10px; + height: 41px; + line-height: 41px; font-size: 20px; font-style: italic; - position: absolute; + bottom: 0; + left: 0; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: 100% a; +} +#searchBar input[type="submit"].searchBtn { + right: 0; + top: 0; +} +#searchBar input[type="button"].cancelSearchBtn { + right: 48px; + top: 0; } .search-drop-menu { box-sizing: border-box; @@ -482,7 +513,6 @@ body.user-messages { border-top: none; margin: 0; position: relative; - top: 0; z-index: 10000; } .search-drop-menu ul { @@ -531,8 +561,7 @@ input[type="submit"].searchBtn { border: #FFF 1px solid; line-height: 22px; text-align: center; - float: right; - margin: 1px -48px 0 0; + margin: 1px 0 0 0; width: 48px; background: -98px -37px url(../images/sprites.png) no-repeat; border-radius: 0; @@ -544,7 +573,6 @@ input[type="submit"].searchBtn { -moz-box-shadow: 0 0 0 #929292; box-shadow: 0 0 0 #929292; cursor: pointer; - position: relative; z-index: 10001; } .groups-page input[type="submit"].searchBtn, @@ -597,9 +625,6 @@ input[type="button"].cancelSearchBtn { text-align: center; width: 35px !important; cursor: pointer; - float: right; - margin: -40px 0 0 0; - position: relative; z-index: 10001; } .cancelSearchBtn:hover { diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less index 21a1bd06..a4c3a6b2 100644 --- a/askbot/media/style/style.less +++ b/askbot/media/style/style.less @@ -491,6 +491,19 @@ body.user-messages { z-index: 10000; position: relative; + /* the guts are absolute-positioned */ + input.searchInput, + div.input-tool-tip, + input[type="submit"].searchBtn, + input[type="button"].cancelSearchBtn { + position: absolute; + z-index: 100; + } + + input.searchInput { + z-index: 99;/* just below the buttons and the hint */ + } + input.searchInput { font-size: 22px; height: 26px; @@ -502,18 +515,36 @@ body.user-messages { font-family:@body-font; width: 100%; margin: 8px 0 6px 0; - padding: 0; + padding: 0 80px 0 8px; + top: 0; + left: 0; .box-shadow(0, 0, 0); + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; } div.input-tool-tip { - margin-top: -40px; - padding-top: 10px; - height: 30px; - line-height: 20px; + padding: 0 0 0 10px; + height: 41px; + line-height: 41px; font-size: 20px; font-style: italic; - position: absolute; + bottom: 0; + left: 0; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: 100%a + } + + input[type="submit"].searchBtn { + right: 0; + top: 0; + } + input[type="button"].cancelSearchBtn { + right: 48px; + top: 0; } } @@ -524,7 +555,6 @@ body.user-messages { border-top: none; margin: 0; position: relative; - top: 0; z-index: 10000; ul { @@ -581,14 +611,12 @@ input[type="submit"].searchBtn { border:#FFF 1px solid; line-height: 22px; text-align: center; - float:right; - margin: 1px -48px 0 0; + margin: 1px 0 0 0; width: 48px; .sprites(-98px,-37px); .rounded-corners(0); .box-shadow(0, 0, 0); cursor:pointer; - position: relative; z-index: 10001; } @@ -643,9 +671,6 @@ input[type="button"].cancelSearchBtn { text-align: center; width: 35px !important; cursor:pointer; - float: right; - margin: -40px 0 0 0; - position: relative; z-index: 10001; } |