diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-06-06 19:06:00 +0300 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-06-06 19:06:00 +0300 |
commit | aaad42dd37269e94bdeb24ebdbc57ae29ce00577 (patch) | |
tree | 02f0be6a955de7f6aa84f2e2b7d82be694c552ea /app/assets | |
parent | 8229b545f9914214701bfb151395c23a3aa44c2f (diff) |
Use button instead of fake button
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/filtered_search/filtered_search_manager.js | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 21 |
2 files changed, 22 insertions, 3 deletions
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index c6118bc1282..4f0bba81e26 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js @@ -500,6 +500,10 @@ class FilteredSearchManager { searchState(e) { const target = e.currentTarget; + + // remove focus outline after click + target.blur(); + // return class name that has a prefix of `state-` const stateClassName = [].find.call(target.classList, name => name.match(/(state-)(\w+)/g)); const state = stateClassName.replace('state-', ''); diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index f64d9a4cabc..3787ef370b2 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -46,7 +46,7 @@ display: flex; a, - .div-btn { + .btn-link { padding: $gl-btn-padding; padding-bottom: 11px; font-size: 14px; @@ -68,14 +68,29 @@ } } - .div-btn { + .btn-link { padding-top: 16px; padding-left: 15px; padding-right: 15px; + border-left: none; + border-right: none; + border-top: none; + border-radius: 0; + + &:hover, + &:active, + &:focus { + background-color: transparent; + } + + &:active { + outline: 0; + box-shadow: none; + } } &.active a, - &.active .div-btn { + &.active .btn-link { border-bottom: 2px solid $link-underline-blue; color: $black; font-weight: 600; |