refactor wide-tabs

This commit is contained in:
Felix Niklas 2015-11-04 16:39:03 +01:00
parent 4e39e22512
commit cf00f552c4
7 changed files with 25 additions and 23 deletions

View file

@ -1,5 +1,5 @@
<div class="dashboard main flex center">
<div class="tabs wide-tabs">
<div class="tabs tabs--big">
<div class="tab active" data-area="stat-widgets"><%- @T('My Stats') %></div>
<div class="tab" data-area="first-steps-widgets"><%- @T('First Steps') %></div>
</div>

View file

@ -1,4 +1,4 @@
<table class="table table-hover<%- @class if @class %>">
<table class="table table-hover<%- " #{@class}" if @class %>">
<thead>
<tr>
<% if @checkbox: %>

View file

@ -6,7 +6,7 @@
<h2>Tabs</h2>
<div class="tabs wide-tabs">
<div class="tabs tabs--big">
<div class="tab my-stats active">My Stats</div>
<div class="tab my-groups">My Group</div>
<div class="tab all-stats">All</div>

View file

@ -355,7 +355,7 @@
</div>
<div class="profile-section">
<!-- if user has organization -->
<div class="tabs wide-tabs">
<div class="tabs tabs--big">
<div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
<div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div>
</div>

View file

@ -57,7 +57,7 @@
</div>
<div class="profile-section">
<!-- if user has organization -->
<div class="tabs wide-tabs">
<div class="tabs tabs--big">
<div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
<div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div>
</div>

View file

@ -1,5 +1,5 @@
<% if @user && @user.organization: %>
<div class="tabs wide-tabs horizontal">
<div class="tabs tabs--big">
<div class="tab js-userTab active"><%- @T('Tickets of User') %> <%- "(" + @user_total + ")" %></div>
<div class="tab js-orgTab"><%- @T('Tickets of Organization') %> <%- "(" + @org_total + ")" %></div>
</div>

View file

@ -2064,16 +2064,24 @@ ol.tabs li {
font-size: 0.95em;
}
.wide-tabs {
margin: 25px 0 20px;
.tabs.tabs--inline {
display: inline-flex;
margin-left: 0;
margin-right: 0;
.tab {
flex: none;
}
}
.tabs--big {
margin: 25px auto 20px;
font-size: 14px;
border-radius: 8px;
display: inline-flex;
.tab {
height: auto;
padding: 10px 24px;
flex-grow: 0;
}
.tab-dropdown {
@ -2082,25 +2090,18 @@ ol.tabs li {
}
}
.dashboard .wide-tabs {
width: 50%;
margin-left: auto;
margin-right: auto;
display: flex;
.tab {
flex: 1;
}
}
.wide-tabs .tab:first-child {
.tabs--big .tab:first-child {
border-radius: 8px 0 0 8px;
}
.wide-tabs .tab:last-child {
.tabs--big .tab:last-child {
border-radius: 0 8px 8px 0;
}
.dashboard .tabs--big {
width: 50%;
}
.separator {
margin: 20px 0;
position: relative;
@ -4934,6 +4935,7 @@ footer {
}
.type-tabs .tab {
height: 40px;
line-height: 42px;
padding: 0 12px 0 12px;
list-style: none;