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

Make tabs responsive

Browse source
This commit is contained in:
Joseph Schorr 2015-04-17 14:24:59 -04:00
parent e381d8cc81
commit a904cdbcbf
4 changed files with 109 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

100
static/css/core-ui.css
View file

@ -81,12 +81,16 @@
margin: 0px;
padding: 0px;
width: 82px;
background-color: #e8f1f6;
border-right: 1px solid #DDE7ED;
display: table-cell;
vertical-align: top;
}
.co-tab-element {
display: table-cell;
float: none;
vertical-align: top;
background-color: #e8f1f6;
border-right: 1px solid #DDE7ED;
}
.co-tab-content {
@ -102,7 +106,6 @@
border-bottom: 1px solid #DDE7ED;
}
.co-tabs li.active {
background-color: white;
border-right: 1px solid white;
@ -116,6 +119,10 @@
line-height: 82px;
text-align: center;
font-size: 36px;
}
.co-tabs li a i {
font-size: 36px;
color: gray;
}
@ -123,6 +130,93 @@
color: black;
}
.co-tabs .xs-toggle {
display: none;
}
@media (max-width: 767px) {
.co-tabs {
display: block;
width: auto;
border-right: none;
border-bottom: 1px solid #DDE7ED;
}
.co-tab-element {
position: relative;
display: block;
}
.co-tab-element .xs-toggle {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 18px;
text-align: center;
line-height: 40px;
border: 2px solid #DDE7ED;
background: white;
}
.co-tab-element.closed .xs-toggle:before {
content: "\f0d7";
font-family: FontAwesome;
}
.co-tab-element.open .xs-toggle:before {
content: "\f0d8";
font-family: FontAwesome;
}
.co-tab-element .xs-label {
line-height: 60px;
font-size: 16px;
margin-left: 10px;
display: inline-block !important;
color: gray;
}
.co-tabs li a {
height: 60px;
line-height: 60px;
white-space: nowrap;
width: 100%;
text-align: left;
padding-left: 20px;
text-decoration: none !important;
font-size: 28px;
}
.co-tabs li a i {
vertical-align: middle;
font-size: 28px;
}
.co-tabs li.active a .xs-label {
color: black;
}
.co-tabs li.active a i {
color: black;
}
.co-tab-element.open li {
display: block;
}
.co-tab-element.closed li {
display: none;
}
.co-tab-element.closed li.active {
display: block;
}
}
.co-main-content-panel {
margin-bottom: 20px;