Commit aaad42dd authored by Clement Ho's avatar Clement Ho

Use button instead of fake button

parent 8229b545
......@@ -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-', '');
......
......@@ -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;
......
......@@ -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)}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment