refactor nav-tabs (remove bootstrap, back to old design)
This commit is contained in:
Felix Niklas
parent
f314bdfe1c
commit
271fa16bef
4 changed files with 44 additions and 96 deletions
|
|
@ -363,8 +363,6 @@ class App.ControllerTabs extends App.Controller
|
|||
super
|
||||
|
||||
render: ->
|
||||
@el.addClass 'main--tabs'
|
||||
|
||||
@html App.view('generic/tabs')(
|
||||
header: @header
|
||||
subHeader: @subHeader
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-header">
|
||||
<div class="page-header page-header--tabs">
|
||||
<div class="page-header-title">
|
||||
<h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
|
||||
</div>
|
||||
|
|
@ -10,13 +10,11 @@
|
|||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="page-tabs">
|
||||
<div class="page-content">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<% for tab in @tabs: %>
|
||||
<li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="tab-content"></div>
|
||||
</div>
|
||||
49
app/assets/stylesheets/bootstrap.css
vendored
49
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -566,11 +566,6 @@ a.bg-warning:hover {
|
|||
a.bg-danger:hover {
|
||||
background-color: #e4b9b9;
|
||||
}
|
||||
.page-header {
|
||||
padding-bottom: 9px;
|
||||
margin: 40px 0 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
|
|
@ -2474,50 +2469,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
.input-group-btn:last-child > .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav > li.disabled > a {
|
||||
color: #777;
|
||||
}
|
||||
.nav > li.disabled > a:hover,
|
||||
.nav > li.disabled > a:focus {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
background-color: #eee;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.nav .nav-divider {
|
||||
height: 1px;
|
||||
margin: 9px 0;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
.nav > li > a > img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1780,7 +1780,6 @@ kbd {
|
|||
.page-header {
|
||||
margin: 0 0 15px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -1810,6 +1809,7 @@ kbd {
|
|||
margin-left: auto;
|
||||
padding-left: 9px;
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 9px;
|
||||
|
|
@ -1831,35 +1831,6 @@ kbd {
|
|||
color: initial;
|
||||
}
|
||||
|
||||
.main--tabs .page-header {
|
||||
padding: 20px 20px 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main--tabs .page-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-tabs {
|
||||
display: flex;
|
||||
margin: 0 0 30px;
|
||||
padding: 20px 20px 0;
|
||||
background: linear-gradient(hsla(200,12%,94%,0), hsl(200,12%,94%));
|
||||
border-bottom: 1px solid hsl(200,12%,89%);
|
||||
|
||||
.nav-tabs li.active {
|
||||
background: hsl(210,17%,98%);
|
||||
border-bottom-color: hsl(210,17%,98%);
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-body--two-column {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -5649,21 +5620,51 @@ footer {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 10px 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
margin-left: 1px;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
.nav-tabs li {
|
||||
margin: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid hsl(200,12%,89%);
|
||||
border-bottom-color: transparent;
|
||||
color: hsl(0,0%,70%);
|
||||
border: 1px solid hsl(0,0%,90%);
|
||||
margin-left: -1px;
|
||||
}
|
||||
background: white;
|
||||
|
||||
.nav-tabs li.active {
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background: hsl(206,7%,28%);
|
||||
border-color: hsl(206,7%,28%);
|
||||
}
|
||||
|
||||
a {
|
||||
padding-bottom: 8px;
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue