Update layouts and assets for consistency
This commit is contained in:
Seth Vargo
parent
ae8967d635
commit
849f57e73a
|
|
@ -1,3 +1,3 @@
|
|||
source "https://rubygems.org"
|
||||
|
||||
gem "middleman-hashicorp", "0.3.13"
|
||||
gem "middleman-hashicorp", "0.3.14"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ GEM
|
|||
minitest (~> 5.1)
|
||||
thread_safe (~> 0.3, >= 0.3.4)
|
||||
tzinfo (~> 1.1)
|
||||
autoprefixer-rails (6.7.6)
|
||||
autoprefixer-rails (6.7.7)
|
||||
execjs
|
||||
bootstrap-sass (3.3.7)
|
||||
autoprefixer-rails (>= 5.2.1)
|
||||
|
|
@ -77,7 +77,7 @@ GEM
|
|||
rack (>= 1.4.5, < 2.0)
|
||||
thor (>= 0.15.2, < 2.0)
|
||||
tilt (~> 1.4.1, < 2.0)
|
||||
middleman-hashicorp (0.3.13)
|
||||
middleman-hashicorp (0.3.14)
|
||||
bootstrap-sass (~> 3.3)
|
||||
builder (~> 3.2)
|
||||
middleman (~> 3.4)
|
||||
|
|
@ -151,7 +151,7 @@ PLATFORMS
|
|||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
middleman-hashicorp (= 0.3.13)
|
||||
middleman-hashicorp (= 0.3.14)
|
||||
|
||||
BUNDLED WITH
|
||||
1.14.6
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
VERSION?="0.3.13"
|
||||
VERSION?="0.3.14"
|
||||
|
||||
website:
|
||||
@echo "==> Starting website in Docker..."
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
"builders": [
|
||||
{
|
||||
"type": "docker",
|
||||
"image": "hashicorp/middleman-hashicorp:0.3.13",
|
||||
"image": "hashicorp/middleman-hashicorp:0.3.14",
|
||||
"discard": "true",
|
||||
"run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
//
|
||||
// announcement bnr
|
||||
// --------------------------------------------------
|
||||
|
||||
#announcement-bnr {
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
background-color: $black;
|
||||
|
||||
a,p{
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
line-height: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-blue{
|
||||
margin-left: 5px;
|
||||
color: $blue;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.enterprise-logo{
|
||||
position: relative;
|
||||
top: 4px;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
svg{
|
||||
rect{
|
||||
fill: $blue;
|
||||
@include transition(all .1s ease-in);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg{
|
||||
width: 128px;
|
||||
fill: $white;
|
||||
margin-right: 4px;
|
||||
margin-left: 1px;
|
||||
|
||||
rect{
|
||||
@include transition(all .1s ease-in);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#announcement-bnr {
|
||||
.tagline{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
#announcement-bnr {
|
||||
a,p{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,13 +3,13 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
.v-btn {
|
||||
box-shadow: 2px 3px 2px rgba(0,0,0,0.08);
|
||||
display: inline-block;
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
border: 1px solid $black;
|
||||
text-decoration: none;
|
||||
@include transition(color .3s ease-in-out);
|
||||
@include btn-shadow();
|
||||
|
||||
&.lrg {
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,16 @@
|
|||
|
||||
$docs-font-size: 15px;
|
||||
|
||||
body.layout-http {
|
||||
h2 {
|
||||
margin-top: 150px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.layout-docs,
|
||||
body.layout-inner,
|
||||
body.layout-downloads,
|
||||
|
|
@ -54,13 +64,13 @@ body.layout-intro {
|
|||
li {
|
||||
a {
|
||||
color: $sidebar-link-color;
|
||||
font-size: 13px;
|
||||
font-size: $sidebar-font-size;
|
||||
padding: 10px 0 10px 15px;
|
||||
|
||||
&:before {
|
||||
color: $dark-blue;
|
||||
color: $sidebar-link-color-active;
|
||||
content: '\203A';
|
||||
font-size: $docs-font-size;
|
||||
font-size: $font-size;
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
opacity: 0.4;
|
||||
|
|
|
|||
|
|
@ -1,75 +1,20 @@
|
|||
body.page-sub {
|
||||
#footer {
|
||||
padding: 0 0 40px 0;
|
||||
.col-md-10 {
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid $faint-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
flex-shrink:0;
|
||||
padding: 64px 0;
|
||||
ul.footer-links {
|
||||
li {
|
||||
a {
|
||||
color: $footer-link-color;
|
||||
font-size: $footer-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
text-decoration: none;
|
||||
|
||||
.hashicorp-project {
|
||||
margin-top: 24px;
|
||||
@include project-by-hashicorp-style();
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: transparent;
|
||||
color: $footer-link-color-hover;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-page-link {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
right: 15px;
|
||||
z-index: 10;
|
||||
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
color: $black;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.footer-links {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
ul {
|
||||
display: inline-block;;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
.footer-hashi {
|
||||
display: block;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414px) {
|
||||
#footer {
|
||||
ul {
|
||||
display: block;
|
||||
li {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
&.external-links {
|
||||
li {
|
||||
svg {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
margin-top: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,25 +29,6 @@ h1 {
|
|||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
//all below styles are overriding corrections for below (min-width: 992px)
|
||||
//below (min-width: 992px) these styles change
|
||||
.navbar-nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.navbar-nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,79 @@
|
|||
//
|
||||
// Header
|
||||
// - Project Specific
|
||||
// - edits should be made here
|
||||
// --------------------------------------------------
|
||||
|
||||
#header {
|
||||
flex-shrink:0;
|
||||
// Hamburger menu
|
||||
.navbar-toggle {
|
||||
height: $header-height;
|
||||
margin: 0;
|
||||
padding-right: 15px;
|
||||
border-radius: 0;
|
||||
|
||||
.navbar-brand {
|
||||
.logo {
|
||||
width: $project-logo-width;
|
||||
padding-left: 50px;
|
||||
font-size: 0;
|
||||
text-transform: uppercase;
|
||||
background: image-url('logo-text.svg') 0 0 no-repeat;
|
||||
background-position: 0 46%;
|
||||
background-size: contain;
|
||||
.icon-bar {
|
||||
border: 1px solid $black;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.by-hashicorp {
|
||||
@include project-by-hashicorp-style();
|
||||
}
|
||||
// Logo
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.buttons {
|
||||
margin-top: 2px; //baseline everything
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
color: $header-link-color;
|
||||
display: inline-block;
|
||||
font-family: $font-family-klavika;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 0;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
width: 200px;
|
||||
padding-left: 64px;
|
||||
background: image-url('logo-text.svg') 0 0 no-repeat;
|
||||
background-position: left center;
|
||||
|
||||
@media (max-width: 414px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
.logo {
|
||||
width: $project-logo-width * .8;
|
||||
&:hover, &:focus, &:active {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav
|
||||
ul.nav {
|
||||
li {
|
||||
a {
|
||||
color: $header-link-color;
|
||||
font-size: $header-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: transparent;
|
||||
color: $header-link-color-hover;
|
||||
outline: 0;
|
||||
|
||||
svg {
|
||||
fill: $header-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $header-link-color;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,106 @@
|
|||
.sidebar {
|
||||
.sidebar-nav {
|
||||
li {
|
||||
a {
|
||||
color: $black;
|
||||
.sidebar-overlay {
|
||||
background: $white;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
z-index: 9999;
|
||||
|
||||
svg{
|
||||
path{
|
||||
fill: $black;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.active {
|
||||
opacity: 0.3;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: $white;
|
||||
border: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
|
||||
@include clearfix();
|
||||
|
||||
.sidebar-divider, .divider {
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
margin: 8px auto;
|
||||
background-color: #D7D7D7;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
background: image-url('logo-text.svg') 0 0 no-repeat;
|
||||
display: block;
|
||||
margin: 24px auto 14px auto;
|
||||
height: 56px;
|
||||
width: 153px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $sidebar-link-color;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-reg;
|
||||
font-size: $sidebar-font-size;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background: transparent;
|
||||
color: $sidebar-link-color-hover;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
fill: $sidebar-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $sidebar-link-color;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-bottom: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.15);
|
||||
position: fixed;
|
||||
width: 0;
|
||||
z-index: 10000;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
&.open {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,20 @@ $font-weight-bold: 600;
|
|||
|
||||
// Body
|
||||
$body-font-color: $gray-darker;
|
||||
$body-link-color: $dark-blue;
|
||||
|
||||
// Sidebar
|
||||
$sidebar-font-size: $font-size - 2;
|
||||
$sidebar-link-color: $body-font-color;
|
||||
$sidebar-link-color-hover: $black;
|
||||
$sidebar-link-color-active: $dark-blue;
|
||||
|
||||
// Header
|
||||
$header-font-size: $font-size - 2;
|
||||
$header-link-color: $body-font-color;
|
||||
$header-link-color-hover: $black;
|
||||
|
||||
// Footer
|
||||
$footer-font-size: $font-size - 2;
|
||||
$footer-link-color: $body-font-color;
|
||||
$footer-link-color-hover: $black;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import 'bootstrap-sprockets';
|
||||
@import 'bootstrap';
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Open+Sans:300,600,400|Ubuntu+Mono");
|
||||
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,600");
|
||||
|
||||
// Core variables and mixins
|
||||
@import '_variables';
|
||||
|
|
@ -12,14 +12,10 @@
|
|||
//Mega Nav
|
||||
@import 'hashicorp/mega-nav';
|
||||
|
||||
// Hashicorp Shared Project Styles
|
||||
@import 'hashicorp-shared/_hashicorp-utility';
|
||||
@import 'hashicorp-shared/_project-utility';
|
||||
@import 'hashicorp-shared/_hashicorp-header';
|
||||
@import 'hashicorp-shared/_hashicorp-sidebar';
|
||||
// Anchor links
|
||||
@import 'hashicorp/anchor-links';
|
||||
|
||||
// Components
|
||||
@import '_announcement-bnr';
|
||||
@import '_header';
|
||||
@import '_footer';
|
||||
@import '_buttons';
|
||||
|
|
|
|||
|
|
@ -1,338 +0,0 @@
|
|||
//
|
||||
// Hashicorp header
|
||||
// - Shared throughout projects
|
||||
// - Edits should not be made here
|
||||
// --------------------------------------------------
|
||||
|
||||
#header{
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
color: black;
|
||||
text-rendering: optimizeLegibility;
|
||||
transition: all 1s ease;
|
||||
|
||||
&.white{
|
||||
.navbar-brand {
|
||||
.logo {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.main-links,
|
||||
.external-links {
|
||||
li > a {
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle{
|
||||
height: $header-height;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
.icon-bar{
|
||||
border: 1px solid $black;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.external-links {
|
||||
&.white{
|
||||
svg path{
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
svg path{
|
||||
@include transition( all 300ms ease-in );
|
||||
}
|
||||
|
||||
&:hover{
|
||||
svg path{
|
||||
@include transition( all 300ms ease-in );
|
||||
}
|
||||
}
|
||||
|
||||
@include project-svg-external-links-style();
|
||||
|
||||
&.download{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.github{
|
||||
a{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
padding-left: 12px !important;
|
||||
svg{
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-links{
|
||||
margin-right: $nav-margin-right;
|
||||
}
|
||||
|
||||
.main-links,
|
||||
.external-links {
|
||||
&.white{
|
||||
li > a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
li > a {
|
||||
@include hashi-a-style();
|
||||
margin: 0 10px;
|
||||
padding-top: 1px;
|
||||
line-height: $header-height;
|
||||
@include project-a-style();
|
||||
}
|
||||
}
|
||||
|
||||
.nav > li > a:hover, .nav > li > a:focus {
|
||||
background-color: transparent;
|
||||
@include transition( all 300ms ease-in );
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
height: $header-height;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 0;
|
||||
|
||||
.logo{
|
||||
display: inline-block;
|
||||
height: $header-height;
|
||||
vertical-align:top;
|
||||
padding: 0;
|
||||
line-height: $header-height;
|
||||
padding-left: $project-logo-width + $project-logo-pad-left;
|
||||
background-position: 0 center;
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
&:hover{
|
||||
@include transition(all 300ms ease-in);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle{
|
||||
&.white{
|
||||
.icon-bar{
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.by-hashicorp{
|
||||
display: inline-block;
|
||||
vertical-align:top;
|
||||
height: $header-height;
|
||||
margin-left: 3px;
|
||||
padding-top: 2px;
|
||||
color: black;
|
||||
line-height: $header-height;
|
||||
font-family: $header-font-family;
|
||||
font-weight: 600;
|
||||
font-size: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&.white{
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
svg{
|
||||
path,
|
||||
polygon{
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.svg-wrap{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
svg{
|
||||
&.svg-by{
|
||||
width: $by-hashicorp-width;
|
||||
height: $by-hashicorp-height;
|
||||
margin-bottom: -4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&.svg-logo{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-bottom: -3px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
path,
|
||||
polygon{
|
||||
fill: black;
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
&:hover{
|
||||
@include transition(all 300ms ease-in);
|
||||
}
|
||||
}
|
||||
.svg-bg-line{
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
&:hover{
|
||||
@include transition(all 300ms ease-in);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hashicorp-project{
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
|
||||
&.white{
|
||||
color: white;
|
||||
svg{
|
||||
path,
|
||||
polygon{
|
||||
fill: white;
|
||||
}
|
||||
line{
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
svg{
|
||||
&.svg-by{
|
||||
line{
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
margin-right: 4px;
|
||||
font-family: $header-font-family;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span,
|
||||
svg{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
svg{
|
||||
&.svg-by{
|
||||
width: $by-hashicorp-width;
|
||||
height: $by-hashicorp-height;
|
||||
margin-bottom: -4px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
&.svg-logo{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-bottom: -10px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
path,
|
||||
line{
|
||||
fill: $black;
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
&:hover{
|
||||
@include transition(all 300ms ease-in);
|
||||
}
|
||||
}
|
||||
.svg-bg-line{
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
&:hover{
|
||||
@include transition(all 300ms ease-in);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navigation {
|
||||
.main-links{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414px) {
|
||||
#header {
|
||||
.navbar-toggle{
|
||||
padding-top: 10px;
|
||||
height: $header-mobile-height;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: $header-mobile-height;
|
||||
|
||||
.logo{
|
||||
height: $header-mobile-height;
|
||||
line-height: $header-mobile-height;
|
||||
}
|
||||
.by-hashicorp{
|
||||
height: $header-mobile-height;
|
||||
line-height: $header-mobile-height;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.main-links,
|
||||
.external-links {
|
||||
li > a {
|
||||
line-height: $header-mobile-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
//
|
||||
// Hashicorp Sidebar
|
||||
// - Shared throughout projects
|
||||
// - Edits should not be made here
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base variables
|
||||
// --------------------------------------------------
|
||||
$screen-tablet: 768px;
|
||||
|
||||
$gray-darker: #212121; // #212121 - text
|
||||
$gray-secondary: #757575; // #757575 - secondary text, icons
|
||||
$gray: #bdbdbd; // #bdbdbd - hint text
|
||||
$gray-light: #e0e0e0; // #e0e0e0 - divider
|
||||
$gray-lighter: #f5f5f5; // #f5f5f5 - background
|
||||
$link-color: $gray-darker;
|
||||
$link-bg: transparent;
|
||||
$link-hover-color: $gray-lighter;
|
||||
$link-hover-bg: $gray-lighter;
|
||||
$link-active-color: $gray-darker;
|
||||
$link-active-bg: $gray-light;
|
||||
$link-disabled-color: $gray-light;
|
||||
$link-disabled-bg: transparent;
|
||||
|
||||
/* -- Sidebar style ------------------------------- */
|
||||
|
||||
// Sidebar variables
|
||||
// --------------------------------------------------
|
||||
$zindex-sidebar-fixed: 1035;
|
||||
|
||||
$sidebar-desktop-width: 280px;
|
||||
$sidebar-width: 240px;
|
||||
|
||||
$sidebar-padding: 16px;
|
||||
$sidebar-divider: $sidebar-padding/2;
|
||||
|
||||
$sidebar-icon-width: 40px;
|
||||
$sidebar-icon-height: 20px;
|
||||
|
||||
@mixin sidebar-nav-base {
|
||||
text-align: center;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li > a {
|
||||
background-color: $link-bg;
|
||||
}
|
||||
|
||||
li:hover > a {
|
||||
background-color: $link-hover-bg;
|
||||
}
|
||||
|
||||
li:focus > a, li > a:focus {
|
||||
background-color: $link-bg;
|
||||
}
|
||||
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $link-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu items
|
||||
> .dropdown {
|
||||
// Remove background color from open dropdown
|
||||
> .dropdown-menu {
|
||||
background-color: $link-hover-bg;
|
||||
|
||||
> li > a {
|
||||
&:focus {
|
||||
background-color: $link-hover-bg;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-active-color;
|
||||
background-color: $link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
// --------------------------------------------------
|
||||
|
||||
// Sidebar Elements
|
||||
//
|
||||
// Basic style of sidebar elements
|
||||
.sidebar {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border: none;
|
||||
@include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
|
||||
@include clearfix();
|
||||
background-color: $white;
|
||||
|
||||
ul{
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.sidebar-divider, .divider {
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
margin: 8px auto;
|
||||
background-color: lighten($gray, 20%);
|
||||
}
|
||||
|
||||
// Sidebar heading
|
||||
//----------------
|
||||
.sidebar-header {
|
||||
position: relative;
|
||||
margin-bottom: $sidebar-padding;
|
||||
@include transition(all .2s ease-in-out);
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
background-image: image-url('logo-text.svg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
height: 72px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
|
||||
// Sidebar icons
|
||||
//----------------
|
||||
.sidebar-icon {
|
||||
display: inline-block;
|
||||
height: $sidebar-icon-height;
|
||||
margin-right: $sidebar-divider;
|
||||
text-align: left;
|
||||
font-size: $sidebar-icon-height;
|
||||
vertical-align: middle;
|
||||
|
||||
&:before, &:after {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include sidebar-nav-base();
|
||||
|
||||
// Links
|
||||
//----------------
|
||||
li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@include hashi-a-style-core();
|
||||
|
||||
svg{
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-bottom: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar toggling
|
||||
//
|
||||
// Hide sidebar
|
||||
.sidebar {
|
||||
width: 0;
|
||||
@include translate3d(-$sidebar-desktop-width, 0, 0);
|
||||
|
||||
&.open {
|
||||
min-width: $sidebar-desktop-width;
|
||||
width: $sidebar-desktop-width;
|
||||
@include translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar positions: fix the left/right sidebars
|
||||
.sidebar-fixed-left,
|
||||
.sidebar-fixed-right,
|
||||
.sidebar-stacked {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-sidebar-fixed;
|
||||
}
|
||||
.sidebar-stacked {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-fixed-left {
|
||||
left: 0;
|
||||
box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
.sidebar-fixed-right {
|
||||
right: 0;
|
||||
box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
|
||||
|
||||
@include translate3d($sidebar-desktop-width, 0, 0);
|
||||
&.open {
|
||||
@include translate3d(0, 0, 0);
|
||||
}
|
||||
.icon-material-sidebar-arrow:before {
|
||||
content: "\e614"; // icon-material-arrow-forward
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar size
|
||||
//
|
||||
// Change size of sidebar and sidebar elements on small screens
|
||||
@media (max-width: $screen-tablet) {
|
||||
.sidebar.open {
|
||||
min-width: $sidebar-width;
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
background: $white;
|
||||
z-index: $zindex-sidebar-fixed - 1;
|
||||
|
||||
-webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||
-moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||
transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.sidebar-overlay.active {
|
||||
opacity: 0.3;
|
||||
visibility: visible;
|
||||
-webkit-transition-delay: 0;
|
||||
-moz-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
//
|
||||
// Hashicorp Nav (header/footer) Utiliy Vars and Mixins
|
||||
//
|
||||
// Notes:
|
||||
// - Include this in Application.scss before header and feature-footer
|
||||
// - Open Sans Google (Semibold - 600) font needs to be included if not already
|
||||
// --------------------------------------------------
|
||||
|
||||
// Variables
|
||||
$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$header-font-family: $font-family-open-sans;
|
||||
$header-font-weight: 600; // semi-bold
|
||||
|
||||
$header-height: 74px;
|
||||
$header-mobile-height: 60px;
|
||||
$by-hashicorp-width: 74px;
|
||||
$by-hashicorp-height: 16px;
|
||||
$nav-margin-right: 8px;
|
||||
|
||||
// Mixins
|
||||
@mixin hashi-a-style-core{
|
||||
font-family: $header-font-family;
|
||||
font-weight: $header-font-weight;
|
||||
font-size: 14px;
|
||||
//letter-spacing: 0.0625em;
|
||||
}
|
||||
|
||||
@mixin hashi-a-style{
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
line-height: 22px;
|
||||
@include hashi-a-style-core();
|
||||
@include transition( all 0.3s ease );
|
||||
|
||||
&:hover{
|
||||
@include transition( all 0.3s ease );
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin v-nav-style{
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
line-height: 26px;
|
||||
color: #2E2E2E;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
@include transition( color 0.3s ease );
|
||||
|
||||
&:hover{
|
||||
color: $blue;
|
||||
@include transition( color 0.3s ease );
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
//general shared project mixins
|
||||
@mixin img-retina($image1x, $image, $width, $height) {
|
||||
background-image: image-url($image1x);
|
||||
background-size: $width $height;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media (min--moz-device-pixel-ratio: 1.3),
|
||||
(-o-min-device-pixel-ratio: 2.6/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.3),
|
||||
(min-device-pixel-ratio: 1.3),
|
||||
(min-resolution: 1.3dppx) {
|
||||
/* on retina, use image that's scaled by 2 */
|
||||
background-image: image-url($image);
|
||||
background-size: $width $height;
|
||||
}
|
||||
}
|
||||
|
||||
//wrapper for img-retina when using pngs
|
||||
@mixin img-ret-rails-jpg($img-name, $width, $height){
|
||||
@include img-retina( asset_path('#{$imagePath}#{$img-name}.jpg'), asset_path('#{$imagePath}#{$img-name}@2x.jpg'), $width, $height);
|
||||
}
|
||||
|
||||
@mixin img-ret-rails-png($img-name, $width, $height){
|
||||
@include img-retina( asset_path('#{$imagePath}#{$img-name}.png'), asset_path('#{$imagePath}#{$img-name}@2x.png'), $width, $height);
|
||||
}
|
||||
|
||||
|
||||
@mixin skewY($skew) {
|
||||
-webkit-transform: skewY($skew);
|
||||
-moz-transform: skewY($skew);
|
||||
-ms-transform: skewY($skew);
|
||||
-o-transform: skewY($skew);
|
||||
transform: skewY($skew);
|
||||
}
|
||||
|
||||
//
|
||||
// -------------------------
|
||||
@mixin anti-alias() {
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@mixin open-light() {
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@mixin open() {
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@mixin open-sb() {
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@mixin open-bold() {
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@mixin bez-1-transition{
|
||||
@include transition( all 300ms ease-in-out );
|
||||
}
|
||||
|
||||
@mixin btn-shadow{
|
||||
box-shadow: 2px 3px 2px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
//
|
||||
// Mixins Specific to project
|
||||
// - make edits to mixins here
|
||||
// --------------------------------------------------
|
||||
|
||||
// Variables
|
||||
|
||||
$header-font-family: $font-family-open-sans;
|
||||
$project-logo-width: 121px;
|
||||
$project-logo-height: 42px;
|
||||
$project-logo-pad-left: 0px;
|
||||
|
||||
$blue: darken($blue, 5%);
|
||||
|
||||
// Mixins
|
||||
@mixin project-a-style{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: $gray;
|
||||
|
||||
&:hover{
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin project-footer-a-style{
|
||||
&:hover{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin project-svg-external-links-style{
|
||||
svg path{
|
||||
fill: $black;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
svg path{
|
||||
fill: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin project-by-hashicorp-style{
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
&:hover{
|
||||
@include transition(all 300ms ease-in);
|
||||
|
||||
svg{
|
||||
.svg-bg-line{
|
||||
fill: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,33 +89,15 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<% if current_page.url != '/' && current_page.url != '/index.html' %>
|
||||
<div class="edit-page-link"><a href="<%= github_url :current_page %>">Edit this page</a></div>
|
||||
<% end %>
|
||||
<div class="footer-links">
|
||||
<ul class="main-links nav navbar-nav">
|
||||
<li><a href="/intro/index.html">Intro</a></li>
|
||||
<li><a href="/docs/index.html">Docs</a></li>
|
||||
<li><a href="/community.html">Community</a></li>
|
||||
<li><a href="/security.html">Security</a></li>
|
||||
</ul>
|
||||
<ul class="external-links nav navbar-nav">
|
||||
<li class="first download">
|
||||
<a href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a>
|
||||
</li>
|
||||
<li class="github">
|
||||
<a href="https://github.com/hashicorp/vault"><%= partial "layouts/svg/svg-github" %>GitHub</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-hashi pull-right">
|
||||
<a class="hashicorp-project" href="https://www.hashicorp.com">
|
||||
<span class="project-text">A </span>
|
||||
<%= partial "layouts/svg/svg-by-hashicorp" %>
|
||||
<span class="project-text">Project</span>
|
||||
<%= partial "layouts/svg/svg-hashicorp-logo" %>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="footer-links nav navbar-nav">
|
||||
<li><a href="/intro/index.html">Intro</a></li>
|
||||
<li><a href="/docs/index.html">Docs</a></li>
|
||||
<li><a href="/community.html">Community</a></li>
|
||||
<li><a href="/security.html">Security</a></li>
|
||||
</ul>
|
||||
<ul class="footer-links nav navbar-nav navbar-right">
|
||||
<li><a href="<%= github_url :current_page %>">Edit this page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue