Fix active tab styling

This commit is contained in:
Annabel Gray 2018-05-31 14:23:49 +00:00 committed by Clement Ho
parent afac3f02e2
commit 8a0acaf88b
5 changed files with 36 additions and 26 deletions

View File

@ -148,8 +148,14 @@ table {
}
}
.nav-tabs .nav-link {
border: 0;
.nav-tabs {
.nav-link {
border: 0;
}
.nav-item {
margin-bottom: 0;
}
}
pre code {

View File

@ -169,11 +169,14 @@
color: $color-800;
}
.nav-links li a.active {
border-bottom: 2px solid $color-500;
.nav-links li {
&.active a,
a.active {
border-bottom: 2px solid $color-500;
.badge.badge-pill {
font-weight: $gl-font-weight-bold;
.badge.badge-pill {
font-weight: $gl-font-weight-bold;
}
}
}

View File

@ -31,14 +31,15 @@
color: $black;
}
}
}
&.active {
&.active a,
a.active {
color: $black;
font-weight: $gl-font-weight-bold;
.badge.badge-pill {
color: $black;
font-weight: $gl-font-weight-bold;
.badge.badge-pill {
color: $black;
}
}
}
}

View File

@ -5,25 +5,25 @@
.fade-right= icon('angle-right')
%ul.nav-links.scrolling-tabs.js-milestone-tabs.nav.nav-tabs
- if issues_accessible
%li.active
= link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
%li.nav-item
= link_to '#tab-issues', class: 'nav-link active', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
Issues
%span.badge.badge-pill= milestone.issues_visible_to_user(current_user).size
%li
= link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
%li.nav-item
= link_to '#tab-merge-requests', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
Merge Requests
%span.badge.badge-pill= milestone.merge_requests.size
- else
%li.active
= link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
%li.nav-item
= link_to '#tab-merge-requests', class: 'nav-link active', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
Merge Requests
%span.badge.badge-pill= milestone.merge_requests.size
%li
= link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
%li.nav-item
= link_to '#tab-participants', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
Participants
%span.badge.badge-pill= milestone.participants.count
%li
= link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
%li.nav-item
= link_to '#tab-labels', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
Labels
%span.badge.badge-pill= milestone.labels.count

View File

@ -17,8 +17,8 @@ feature 'Project milestone' do
it 'shows issues tab' do
within('#content-body') do
expect(page).to have_link 'Issues', href: '#tab-issues'
expect(page).to have_selector '.nav-links li.active', count: 1
expect(find('.nav-links li.active')).to have_content 'Issues'
expect(page).to have_selector '.nav-links li a.active', count: 1
expect(find('.nav-links li a.active')).to have_content 'Issues'
end
end
@ -44,8 +44,8 @@ feature 'Project milestone' do
it 'hides issues tab' do
within('#content-body') do
expect(page).not_to have_link 'Issues', href: '#tab-issues'
expect(page).to have_selector '.nav-links li.active', count: 1
expect(find('.nav-links li.active')).to have_content 'Merge Requests'
expect(page).to have_selector '.nav-links li a.active', count: 1
expect(find('.nav-links li a.active')).to have_content 'Merge Requests'
end
end