diff options
author | Kohei Yoshino <kohei.yoshino@gmail.com> | 2018-01-08 15:55:43 +0100 |
---|---|---|
committer | Dylan William Hardison <dylan@hardison.net> | 2018-01-08 15:55:43 +0100 |
commit | 9b3834764b26d0a806b72fdc3657075b7ab9c7c0 (patch) | |
tree | 2ed56c99d842b9ec52951723b0515af83edadbbf /skins | |
parent | f86567c1f22f5d4dfa9bcc097efaef3ecb8b44bc (diff) | |
download | bugzilla-9b3834764b26d0a806b72fdc3657075b7ab9c7c0.tar.gz bugzilla-9b3834764b26d0a806b72fdc3657075b7ab9c7c0.tar.xz |
Bug 1428642 - Fix minor bugs on new global header
* The magnifier icon on the search bar should not trigger search as reported in
https://twitter.com/colinjoy/status/949035254949523457
* The search dropdown should show Saved Searches Edit link as suggested in my UX analysis
* Remove the CSS transition on the More Tools button for consistency. I didn't add the transition;
it's default style for buttons
* Fix the position of the arrow/triangle on dropdown lists. An error of 1px.
* Add `user-select: none;` to `#header` https://developer.mozilla.org/en-US/docs/Web/CSS/user
select
Diffstat (limited to 'skins')
-rw-r--r-- | skins/standard/global.css | 47 |
1 files changed, 36 insertions, 11 deletions
diff --git a/skins/standard/global.css b/skins/standard/global.css index 3a2b87856..ea25eb88a 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -71,6 +71,9 @@ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #555; background-color: #FFF; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } #header a, @@ -121,6 +124,7 @@ font-family: 'Material Icons'; vertical-align: middle; color: #777; + pointer-events: none; } #header .title { @@ -165,19 +169,18 @@ height: 32px; } - #header .searchbox-outer button { + #header .searchbox-outer .icon { + display: flex; + align-items: center; + justify-content: center; position: absolute; top: 4px; left: 4px; - border: 0; - padding: 0; width: 24px; height: 24px; - background: transparent; - box-shadow: none; } - #header .searchbox-outer button .icon::before { + #header .searchbox-outer .icon::before { content: '\E8B6'; } @@ -240,10 +243,12 @@ #header .dropdown-button { display: block; + border-radius: 0; /* Override Safari's default */ padding: 0; color: inherit; background: transparent; box-shadow: none; + transition: none; } #header .dropdown-content { @@ -279,12 +284,12 @@ #header .dropdown-content.right::before, #header .dropdown-content.right::after { - left: 10px; + left: 11px; } #header .dropdown-content.left::before, #header .dropdown-content.left::after { - right: 10px; + right: 11px; } #header .dropdown-content::before { @@ -323,18 +328,38 @@ max-height: 400px; } - #header-search-dropdown h3 { + #header-search-dropdown header { + display: flex; position: sticky; top: -4px; left: 0; - margin: -4px 8px 0; + margin: -4px 12px 0; padding: 8px 0 4px; color: #999; background: #FFF; font-size: 12px; + } + + #header-search-dropdown header h3 { + flex: auto; + margin: 0; + font-size: inherit; + line-height: 1.5; font-weight: normal; } + #header-search-dropdown header a { + flex: none; + padding: 0 !important; + font-size: inherit; + } + + #header-search-dropdown.dropdown-content header a:hover, + #header-search-dropdown.dropdown-content header a:focus, + #header-search-dropdown.dropdown-content header a.active { + background-color: transparent !important; + } + #header-search-dropdown ul { margin: 0; padding: 0; @@ -350,7 +375,7 @@ #header-tools-menu-button { width: 32px; height: 32px; - border-radius: 4px; + border-radius: 4px !important; } #header-tools-menu-button .icon { |