docs responsive header sans mobile
This commit is contained in:
JT
parent
3bdddcac9a
commit
99c69ef641
|
|
@ -37,7 +37,7 @@
|
||||||
<body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
<body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
||||||
<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
|
<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="col-xs-12 col-md-4">
|
<div class="col-sm-12 col-md-4 nav-logo">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
|
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-8 nav-white">
|
<div class="col-sm-12 col-md-8 nav-white">
|
||||||
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
|
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
|
||||||
<ul class="buttons nav navbar-nav navbar-right rls-sb">
|
<ul class="buttons nav navbar-nav navbar-right rls-sb">
|
||||||
<li class="first download terra-btn"><a href="/downloads.html">Download</a></li>
|
<li class="first download terra-btn"><a href="/downloads.html">Download</a></li>
|
||||||
|
|
|
||||||
|
|
@ -209,6 +209,57 @@ body.layout-intro{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.page-sub{
|
||||||
|
>.container{
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-sidebar{
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
|
||||||
|
.docs-sidenav{
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
//all li > a
|
||||||
|
li{
|
||||||
|
> a{
|
||||||
|
color: black;
|
||||||
|
.transition( color 0.5s ease );
|
||||||
|
}
|
||||||
|
|
||||||
|
> a:hover,
|
||||||
|
> a:focus {
|
||||||
|
color: @purple;
|
||||||
|
.transition( color 0.5s ease );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
> li {
|
||||||
|
>.nav{
|
||||||
|
li{
|
||||||
|
a{
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: @purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-docs-section{
|
||||||
|
h1{
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@ body.page-sub{
|
||||||
height: 90px;
|
height: 90px;
|
||||||
background-color: @purple;
|
background-color: @purple;
|
||||||
|
|
||||||
.navbar-brand {
|
.nav-logo{
|
||||||
|
height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-white{
|
.nav-white{
|
||||||
|
|
@ -50,7 +51,7 @@ body.page-sub{
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggle{
|
.navbar-toggle{
|
||||||
margin-top: 14px;
|
margin-top: 26px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
border: 2px solid @white;
|
border: 2px solid @white;
|
||||||
.icon-bar{
|
.icon-bar{
|
||||||
|
|
@ -109,18 +110,18 @@ body.page-sub{
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 9px;
|
top: 7px;
|
||||||
width: 6px;
|
width: 1px;
|
||||||
height: 8px;
|
height: 12px;
|
||||||
background-color: @purple;
|
background-color: @purple;
|
||||||
.skewY(24deg);
|
.skewY(24deg);
|
||||||
padding-right: 8px;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > a {
|
li > a {
|
||||||
//border-bottom: 2px solid rgba(255, 255, 255, .2);
|
//border-bottom: 2px solid rgba(255, 255, 255, .2);
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
margin: 0 12px;
|
margin: 0 8px;
|
||||||
padding: 0 0 0 4px;
|
padding: 0 0 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -132,7 +133,7 @@ body.page-sub{
|
||||||
|
|
||||||
li{
|
li{
|
||||||
&.first{
|
&.first{
|
||||||
margin-right: 16px;
|
margin-right: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.download{
|
&.download{
|
||||||
|
|
@ -157,11 +158,47 @@ body.page-sub{
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
padding-left: 32px;
|
padding-left: 32px;
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//at minimum 1200px
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
body.page-sub{
|
||||||
|
#header{
|
||||||
|
.main-links.navbar-nav{
|
||||||
|
margin-top: 28px;
|
||||||
|
|
||||||
|
li + li{
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li + li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 9px;
|
||||||
|
width: 6px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: @purple;
|
||||||
|
.skewY(24deg);
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > a {
|
||||||
|
//border-bottom: 2px solid rgba(255, 255, 255, .2);
|
||||||
|
line-height: 26px;
|
||||||
|
margin: 0 12px;
|
||||||
|
padding: 0 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//at greatest width 992px
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
#header {
|
#header {
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
|
|
@ -174,20 +211,19 @@ body.page-sub{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons.navbar-nav{
|
|
||||||
li{
|
|
||||||
a{
|
|
||||||
background: none !important;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
body.page-sub{
|
||||||
|
#header{
|
||||||
|
.nav-white{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//#footer,
|
//#footer,
|
||||||
#header{
|
#header{
|
||||||
.buttons.navbar-nav,
|
.buttons.navbar-nav,
|
||||||
|
|
@ -217,55 +253,6 @@ body.page-sub{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#header{
|
|
||||||
.consul-gradient-bg();
|
|
||||||
|
|
||||||
.navbar-right{
|
|
||||||
float: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
&.logo{
|
|
||||||
span{
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > li{
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons.navbar-nav{
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-left: 0px;
|
|
||||||
|
|
||||||
li{
|
|
||||||
a{
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
&.first{
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.download{
|
|
||||||
a{
|
|
||||||
background: url(../images/icon-download.png) 8px 6px no-repeat !important;;
|
|
||||||
.img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.github{
|
|
||||||
a{
|
|
||||||
background: url(../images/icon-github.png) 8px 6px no-repeat !important;;
|
|
||||||
.img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
|
|
||||||
|
|
@ -84,6 +84,9 @@ body.page-sub #header {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
background-color: #822ff7;
|
background-color: #822ff7;
|
||||||
}
|
}
|
||||||
|
body.page-sub #header .nav-logo {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
body.page-sub #header .nav-white {
|
body.page-sub #header .nav-white {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -112,7 +115,7 @@ body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
#header .navbar-toggle {
|
#header .navbar-toggle {
|
||||||
margin-top: 14px;
|
margin-top: 26px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
border: 2px solid #ffffff;
|
border: 2px solid #ffffff;
|
||||||
}
|
}
|
||||||
|
|
@ -169,20 +172,20 @@ body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 9px;
|
top: 7px;
|
||||||
width: 6px;
|
width: 1px;
|
||||||
height: 8px;
|
height: 12px;
|
||||||
background-color: #822ff7;
|
background-color: #822ff7;
|
||||||
-webkit-transform: skewY(24deg);
|
-webkit-transform: skewY(24deg);
|
||||||
-moz-transform: skewY(24deg);
|
-moz-transform: skewY(24deg);
|
||||||
-ms-transform: skewY(24deg);
|
-ms-transform: skewY(24deg);
|
||||||
-o-transform: skewY(24deg);
|
-o-transform: skewY(24deg);
|
||||||
transform: skewY(24deg);
|
transform: skewY(24deg);
|
||||||
padding-right: 8px;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
#header .main-links.navbar-nav li > a {
|
#header .main-links.navbar-nav li > a {
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
margin: 0 12px;
|
margin: 0 8px;
|
||||||
padding: 0 0 0 4px;
|
padding: 0 0 0 4px;
|
||||||
}
|
}
|
||||||
#header .buttons.navbar-nav {
|
#header .buttons.navbar-nav {
|
||||||
|
|
@ -190,7 +193,7 @@ body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
#header .buttons.navbar-nav li.first {
|
#header .buttons.navbar-nav li.first {
|
||||||
margin-right: 16px;
|
margin-right: 13px;
|
||||||
}
|
}
|
||||||
#header .buttons.navbar-nav li.download a {
|
#header .buttons.navbar-nav li.download a {
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
|
|
@ -223,6 +226,34 @@ body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
body.page-sub #header .main-links.navbar-nav {
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
body.page-sub #header .main-links.navbar-nav li + li {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
body.page-sub #header .main-links.navbar-nav li + li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 9px;
|
||||||
|
width: 6px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: #822ff7;
|
||||||
|
-webkit-transform: skewY(24deg);
|
||||||
|
-moz-transform: skewY(24deg);
|
||||||
|
-ms-transform: skewY(24deg);
|
||||||
|
-o-transform: skewY(24deg);
|
||||||
|
transform: skewY(24deg);
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
|
line-height: 26px;
|
||||||
|
margin: 0 12px;
|
||||||
|
padding: 0 0 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
#header .navbar-brand.logo span {
|
#header .navbar-brand.logo span {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
|
@ -230,12 +261,11 @@ body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
background-size: 120px 39px;
|
background-size: 120px 39px;
|
||||||
}
|
}
|
||||||
#header .buttons.navbar-nav li a {
|
|
||||||
background: none !important;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
body.page-sub #header .nav-white {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
#header .buttons.navbar-nav,
|
#header .buttons.navbar-nav,
|
||||||
#header .main-links.navbar-nav {
|
#header .main-links.navbar-nav {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -258,66 +288,6 @@ body.page-sub #header .main-links.navbar-nav li > a {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
#header {
|
|
||||||
background: #694a9c;
|
|
||||||
/* Old browsers */
|
|
||||||
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%);
|
|
||||||
/* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #694a9c), color-stop(100%, #cd2028));
|
|
||||||
/* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(left, #694a9c 0%, #cd2028 100%);
|
|
||||||
/* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(left, #694a9c 0%, #cd2028 100%);
|
|
||||||
/* Opera 11.10+ */
|
|
||||||
background: -ms-linear-gradient(left, #694a9c 0%, #cd2028 100%);
|
|
||||||
/* IE10+ */
|
|
||||||
background: linear-gradient(to right, #694a9c 0%, #cd2028 100%);
|
|
||||||
/* W3C */
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#694a9c', endColorstr='#cd2028', GradientType=1);
|
|
||||||
/* IE6-9 */
|
|
||||||
}
|
|
||||||
#header .navbar-right {
|
|
||||||
float: none !important;
|
|
||||||
}
|
|
||||||
#header .navbar-brand.logo span {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
#header .navbar-nav > li {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
#header .buttons.navbar-nav {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
#header .buttons.navbar-nav li a {
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
#header .buttons.navbar-nav li.first {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
#header .buttons.navbar-nav li.download a {
|
|
||||||
background: url(../images/icon-download.png) 8px 6px no-repeat !important;
|
|
||||||
background-image: url("../images/icon-download.png");
|
|
||||||
background-size: 20px 20px;
|
|
||||||
}
|
|
||||||
#header .buttons.navbar-nav li.github a {
|
|
||||||
background: url(../images/icon-github.png) 8px 6px no-repeat !important;
|
|
||||||
background-image: url("../images/icon-github.png");
|
|
||||||
background-size: 20px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 768px) and only screen and (min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min-resolution: 192dpi), (max-width: 768px) and only screen and (min-resolution: 2dppx) {
|
|
||||||
#header .buttons.navbar-nav li.download a {
|
|
||||||
background-image: url("../images/icon-download@2x.png");
|
|
||||||
background-size: 20px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 768px) and only screen and (min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min-resolution: 192dpi), (max-width: 768px) and only screen and (min-resolution: 2dppx) {
|
|
||||||
#header .buttons.navbar-nav li.github a {
|
|
||||||
background-image: url("../images/icon-github@2x.png");
|
|
||||||
background-size: 20px 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
#footer-wrap {
|
#footer-wrap {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -1168,6 +1138,37 @@ body.layout-intro > .container .col-md-8[role=main] > div {
|
||||||
body.layout-intro > .container .col-md-8[role=main]::before {
|
body.layout-intro > .container .col-md-8[role=main]::before {
|
||||||
border-left: 9999px solid white;
|
border-left: 9999px solid white;
|
||||||
}
|
}
|
||||||
|
body.page-sub > .container {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.docs-sidebar {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.docs-sidebar .docs-sidenav {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.docs-sidebar .docs-sidenav li > a {
|
||||||
|
color: black;
|
||||||
|
-webkit-transition: color 0.5s ease;
|
||||||
|
transition: color 0.5s ease;
|
||||||
|
}
|
||||||
|
.docs-sidebar .docs-sidenav li > a:hover,
|
||||||
|
.docs-sidebar .docs-sidenav li > a:focus {
|
||||||
|
color: #822ff7;
|
||||||
|
-webkit-transition: color 0.5s ease;
|
||||||
|
transition: color 0.5s ease;
|
||||||
|
}
|
||||||
|
.docs-sidebar .docs-sidenav > li > .nav li a {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.docs-sidebar .docs-sidenav > li > .nav li a:hover {
|
||||||
|
color: #822ff7;
|
||||||
|
}
|
||||||
|
.bs-docs-section h1 {
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.bs-docs-section img {
|
.bs-docs-section img {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue