vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add support for horizontal tabs into cor-tabs

Browse source
This commit is contained in:
Joseph Schorr 2017-05-08 16:46:46 -04:00
parent 191e5d94d4
commit ea13469d9d
13 changed files with 116 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

95
static/css/directives/ui/cor-tabs.css
View file

@ -1,4 +1,4 @@
cor-tabs {
.vertical cor-tabs {
display: table-cell;
float: none;
vertical-align: top;
@ -6,6 +6,43 @@ cor-tabs {
border-right: 1px solid #DDE7ED;
}
@media (min-width: 768px) {
.horizontal-label {
color: #666;
}
.vertical .horizontal-label {
display: none;
}
.horizontal .horizontal-label {
display: inline-block;
vertical-align: middle;
}
.horizontal .horizontal-label {
margin-left: 10px;
display: inline-block;
}
.horizontal .cor-tab-itself {
font-size: 18px;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
}
.horizontal .cor-tab-itself i.fa {
color: #666;
font-size: 14px;
color: #ccc;
}
.horizontal .cor-tab-itself.active i.fa {
color: #666;
}
}
.co-tab-container {
padding: 0px;
}
@ -18,7 +55,14 @@ cor-tabs {
vertical-align: top;
}
.co-tab-content {
.horizontal .co-tab-content {
width: 100%;
display: block;
float: none;
padding: 30px;
}
.vertical .co-tab-content {
width: 100%;
display: table-cell;
float: none;
@ -68,6 +112,10 @@ cor-tabs {
}
@media (max-width: 767px) {
.vertical cor-tabs {
display: block;
}
.co-tabs {
display: block;
width: auto;
@ -78,6 +126,16 @@ cor-tabs {
cor-tabs {
position: relative;
display: block;
float: none;
vertical-align: top;
background-color: #e8f1f6;
border-right: 1px solid #DDE7ED;
}
.co-tab-element li.active {
background-color: white;
border-right: 1px solid white;
margin-right: -1px;
}
.co-tab-element .xs-toggle {
@ -106,24 +164,46 @@ cor-tabs {
font-family: FontAwesome;
}
.co-tab-element .xs-label {
line-height: 60px;
.co-tab-element .horizontal-label {
font-size: 16px;
margin-left: 16px;
display: inline-block !important;
color: gray;
vertical-align: middle;
}
.co-tabs li a {
.cor-tab-itself {
width: 100%;
}
.cor-tab-icon {
vertical-align: middle;
}
.co-top-tab-bar {
padding: 0px;
}
.co-top-tab-bar li {
padding: 0px;
}
.co-tabs li a, .co-top-tab-bar li a {
display: inline-block;
height: 60px;
line-height: 60px;
line-height: 54px;
white-space: nowrap;
width: 100%;
text-align: left;
padding-left: 20px;
text-decoration: none !important;
font-size: 28px;
color: #666;
}
.co-top-tab {
display: block !important;
border-bottom: 0px !important;
}
.co-tabs li a i {
@ -131,7 +211,7 @@ cor-tabs {
font-size: 28px;
}
.co-tabs li.active a .xs-label {
.co-tabs li.active a .horizontal-label {
color: black;
}
@ -145,6 +225,7 @@ cor-tabs {
.co-tab-element.closed li {
height: 0px;
padding: 0px;
overflow: hidden;
}