diff options
-rw-r--r-- | app/assets/javascripts/filtered_search/filtered_search_manager.js | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 21 | ||||
-rw-r--r-- | app/views/shared/issuable/_nav.html.haml | 8 |
3 files changed, 26 insertions, 7 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; diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml index cacce91280e..a530c0e7f5a 100644 --- a/app/views/shared/issuable/_nav.html.haml +++ b/app/views/shared/issuable/_nav.html.haml @@ -5,20 +5,20 @@ %ul.nav-links.issues-state-filters %li{ class: active_when(params[:state] == 'opened') }> - .div-btn.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", role: 'button' } + %button.btn.btn-link.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", type: 'button' } #{issuables_state_counter_text(type, :opened)} - if type == :merge_requests %li{ class: active_when(params[:state] == 'merged') }> - .div-btn.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', role: 'button' } + %button.btn.btn-link.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', type: 'button' } #{issuables_state_counter_text(type, :merged)} - closed_title = 'Filter by merge requests that are currently closed and unmerged.' %li{ class: active_when(params[:state] == 'closed') }> - .div-btn.state-closed{ id: 'state-closed', title: closed_title, role: 'button' } + %button.btn.btn-link.state-closed{ id: 'state-closed', title: closed_title, type: 'button' } #{issuables_state_counter_text(type, :closed)} %li{ class: active_when(params[:state] == 'all') }> - .div-btn.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", role: 'button' } + %button.btn.btn-link.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", type: 'button' } #{issuables_state_counter_text(type, :all)} |