terraform/website/source/assets/stylesheets/_header.scss

383 lines
8.4 KiB
SCSS
Raw Normal View History

2014-07-16 23:51:48 +02:00
//
// Header
// --------------------------------------------------
body.page-sub{
.terra-btn{
background-color: rgba(130, 47, 247, 1);
}
2014-07-16 23:51:48 +02:00
#header{
2014-07-23 09:23:05 +02:00
height: 90px;
2014-10-13 18:44:38 +02:00
background-color: $purple;
2014-07-23 09:23:05 +02:00
2014-07-24 02:06:57 +02:00
.navbar-collapse{
background-color: rgba(255, 255, 255, 0.98);
2014-07-27 20:38:23 +02:00
}
2014-07-24 02:06:57 +02:00
2014-07-24 01:48:44 +02:00
.nav-logo{
height: 90px;
2014-07-23 09:23:05 +02:00
}
.nav-white{
height: 90px;
background-color: white;
}
.main-links.navbar-nav{
float: left !important;
li > a {
color: black;
2014-10-13 18:44:38 +02:00
@include transition( color 0.3s ease );
2014-07-23 09:23:05 +02:00
}
2014-07-25 01:26:34 +02:00
}
2014-07-27 20:38:23 +02:00
2014-07-25 01:26:34 +02:00
.buttons.nav > li > a, .buttons.nav > li > a {
2014-10-13 18:44:38 +02:00
//background-color: lighten($purple, 1%);
@include transition( background-color 0.3s ease );
2014-07-25 01:26:34 +02:00
}
.buttons.nav > li > a:hover, .buttons.nav > li > a:focus {
background-color: black;
2014-10-13 18:44:38 +02:00
@include transition( background-color 0.3s ease );
2014-07-27 20:38:23 +02:00
}
2014-07-25 01:26:34 +02:00
.main-links.nav > li > a:hover, .main-links.nav > li > a:focus {
2014-10-13 18:44:38 +02:00
color: $purple;
@include transition( color 0.3s ease );
2014-07-27 20:38:23 +02:00
}
2014-07-16 23:51:48 +02:00
}
}
#header {
position: relative;
2014-10-13 18:44:38 +02:00
color: $white;
2014-07-16 23:51:48 +02:00
text-rendering: optimizeLegibility;
margin-bottom: 0;
&.navbar-static-top{
height:70px;
2014-07-24 07:36:42 +02:00
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
2014-07-16 23:51:48 +02:00
z-index: 1000;
}
a{
2014-10-13 18:44:38 +02:00
color: $white;
2014-07-16 23:51:48 +02:00
}
.navbar-toggle{
2014-07-24 01:48:44 +02:00
margin-top: 26px;
2014-07-16 23:51:48 +02:00
margin-bottom: 14px;
2014-07-24 03:44:15 +02:00
margin-right: 0;
2014-10-13 18:44:38 +02:00
border: 2px solid $white;
2014-07-24 02:06:57 +02:00
border-radius: 0;
2014-07-16 23:51:48 +02:00
.icon-bar{
2014-10-13 18:44:38 +02:00
border: 1px solid $white;
2014-07-24 02:06:57 +02:00
border-radius: 0;
2014-07-16 23:51:48 +02:00
}
}
.navbar-brand {
&.logo{
2014-07-22 23:24:44 +02:00
margin-top: 15px;
padding: 5px 0 0 68px;
height: 56px;
line-height: 56px;
font-size: 24px;
2014-10-13 18:44:38 +02:00
@include lato-light();
2014-07-22 23:24:44 +02:00
text-transform: uppercase;
2014-10-13 18:44:38 +02:00
background: image-url('consul-header-logo.png') 0 0 no-repeat;
@include img-retina("header-logo.png", "header-logo@2x.png", 50px, 56px);
2014-07-27 20:38:23 +02:00
-webkit-font-smoothing: default;
2014-07-16 23:51:48 +02:00
}
}
.navbar-nav{
-webkit-font-smoothing: antialiased;
li{
position: relative;
> a {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
padding-left: 22px;
2014-10-13 18:44:38 +02:00
@include transition( color 0.3s ease );
2014-07-16 23:51:48 +02:00
}
&.first{
>a{
padding-left: 15px;
}
}
}
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: transparent;
2014-10-13 18:44:38 +02:00
color: lighten($purple, 15%);
@include transition( color 0.3s ease );
2014-07-16 23:51:48 +02:00
}
.main-links.navbar-nav{
margin-top: 28px;
li + li{
padding-left: 6px;
}
2014-07-23 06:16:26 +02:00
li + li::before {
content: "";
position: absolute;
left: 0;
2014-07-24 01:48:44 +02:00
top: 7px;
width: 1px;
height: 12px;
2014-10-13 18:44:38 +02:00
background-color: $purple;
@include skewY(24deg);
2014-07-24 01:48:44 +02:00
padding-right: 0;
2014-07-27 20:38:23 +02:00
}
2014-07-16 23:51:48 +02:00
li > a {
//border-bottom: 2px solid rgba(255, 255, 255, .2);
2014-07-23 06:16:26 +02:00
line-height: 26px;
2014-07-24 01:48:44 +02:00
margin: 0 8px;
2014-07-23 06:28:41 +02:00
padding: 0 0 0 4px;
2014-07-16 23:51:48 +02:00
}
}
.buttons.navbar-nav{
2014-07-24 00:39:38 +02:00
margin-top: 25px;
2014-07-16 23:51:48 +02:00
margin-left: 30px;
li{
&.first{
2014-07-24 01:48:44 +02:00
margin-right: 13px;
2014-07-16 23:51:48 +02:00
}
&.download{
a{
padding-left: 30px;
2014-10-13 18:44:38 +02:00
background: image-url("header-download-icon.png") 12px 8px no-repeat;
@include img-retina("header-download-icon.png", "header-download-icon@2x.png", 12px, 13px);
2014-07-16 23:51:48 +02:00
}
}
&.github{
a{
2014-10-13 18:44:38 +02:00
background: image-url("header-github-icon.png") 12px 7px no-repeat;
@include img-retina("header-github-icon.png", "header-github-icon@2x.png", 12px, 13px);
2014-07-16 23:51:48 +02:00
}
}
}
li > a {
color: white;
2014-07-24 00:39:38 +02:00
padding-top: 4px;
padding-bottom: 4px;
padding-left: 32px;
padding-right: 12px;
2014-07-27 20:38:23 +02:00
letter-spacing: 0.05em;
2014-07-16 23:51:48 +02:00
}
}
}
2014-07-24 01:48:44 +02:00
@media (min-width: 1200px) {
2014-07-24 02:55:55 +02:00
#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;
2014-10-13 18:44:38 +02:00
background-color: $purple;
@include skewY(24deg);
2014-07-24 02:55:55 +02:00
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;
}
2014-07-27 20:38:23 +02:00
}
2014-07-24 02:55:55 +02:00
}
2014-07-27 20:38:23 +02:00
}
2014-07-24 02:55:55 +02:00
@media (min-width: 992px) {
.collapse{
margin-top: 8px;
}
//homepage has more space at this width to accommodate chevrons
2014-07-24 02:55:55 +02:00
.page-home{
2014-07-24 01:48:44 +02:00
#header{
.main-links.navbar-nav{
li + li{
padding-left: 6px;
}
li + li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 8px;
2014-10-13 18:44:38 +02:00
background-color: $purple;
@include skewY(24deg);
2014-07-24 01:48:44 +02:00
padding-right: 8px;
2014-07-27 20:38:23 +02:00
}
2014-07-24 02:55:55 +02:00
}
}
}
}
2014-07-24 01:48:44 +02:00
2014-07-24 02:55:55 +02:00
@media (min-width: 768px) and (max-width: 992px) {
body.page-home{
.nav-logo{
width: 30%;
2014-07-27 20:38:23 +02:00
}
2014-07-24 02:55:55 +02:00
.nav-white{
margin-top: 8px;
width: 70%;
}
.buttons.navbar-nav{
li{
> a{
padding-right: 4px !important;
text-indent: -9999px;
2014-07-27 20:38:23 +02:00
white-space: nowrap;
}
2014-07-24 02:55:55 +02:00
}
}
2014-07-24 01:48:44 +02:00
}
}
2014-07-24 02:55:55 +02:00
2014-07-16 23:51:48 +02:00
@media (max-width: 992px) {
2014-07-24 02:55:55 +02:00
2014-07-16 23:51:48 +02:00
#header {
.navbar-brand {
&.logo{
span{
width: 120px;
height: 39px;
margin-top: 12px;
background-size: 120px 39px;
}
}
}
}
}
@media (max-width: 768px) {
2014-07-24 01:48:44 +02:00
body.page-sub{
#header{
.nav-white{
background-color: transparent;
}
}
}
2014-07-27 20:38:23 +02:00
2014-07-24 02:06:57 +02:00
#header{
.buttons.navbar-nav{
float: none !important;
margin: 0;
padding-bottom: 0 !important;
li{
&.first{
margin-right: 0;
}
}
}
}
2014-07-24 01:48:44 +02:00
2014-07-23 10:12:09 +02:00
//#footer,
2014-07-16 23:51:48 +02:00
#header{
.buttons.navbar-nav,
.main-links.navbar-nav{
display: block;
padding-bottom: 15px;
li{
display: block;
float: none;
margin-top: 15px;
}
.li-under a::after,
li + li::before {
display: none;
}
}
}
2014-07-23 10:12:09 +02:00
//#footer,
#header{
2014-07-16 23:51:48 +02:00
.main-links.navbar-nav{
2014-07-24 02:06:57 +02:00
float: left !important;
2014-07-16 23:51:48 +02:00
li > a {
padding: 0;
padding-left: 0;
line-height: 22px;
}
}
}
}
2014-07-26 09:32:10 +02:00
@media (max-width: 763px) {
.navbar-static-top {
.nav-white {
background-color:rgba(0,0,0,0.5);
}
}
}
2014-07-24 03:44:15 +02:00
@media (max-width: 320px) {
#header{
.navbar-brand {
&.logo{
padding:0 0 0 54px !important;
font-size: 20px !important;
2014-07-24 03:47:32 +02:00
line-height:42px !important;
margin-top: 23px !important ;
2014-10-13 18:44:38 +02:00
@include img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px);
2014-07-24 03:44:15 +02:00
}
}
2014-07-26 09:32:10 +02:00
2014-07-24 03:44:15 +02:00
}
2014-07-16 23:51:48 +02:00
2014-07-24 03:51:21 +02:00
#feature-auto{
.terminal-text{
line-height: 48px !important;
font-size: 20px !important;
}
}
2014-07-16 23:51:48 +02:00
}