mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-25 00:21:07 +02:00
sidebar
This commit is contained in:
captainill
parent
54a3c743d0
commit
2ac79f6632
@ -19,6 +19,9 @@ var Init = {
|
||||
if (this.Pages[id]) {
|
||||
this.Pages[id]();
|
||||
}
|
||||
|
||||
//always initialize sidebar
|
||||
Init.initializeSidebar();
|
||||
},
|
||||
|
||||
initializeSidebar: function(){
|
||||
@ -44,12 +47,11 @@ var Init = {
|
||||
offset: function() {
|
||||
return '25%';
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
Pages: {
|
||||
'page-home': function(){
|
||||
Init.initializeSidebar();
|
||||
Init.initializeDotLockup();
|
||||
Init.initializeWaypoints();
|
||||
}
|
||||
@ -59,4 +61,4 @@ var Init = {
|
||||
|
||||
Init.start();
|
||||
|
||||
})(window.Sidebar, window.DotLockup);
|
||||
})(window.Sidebar, window.DotLockup);
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
var Init = {
|
||||
|
||||
start: function(){
|
||||
start: function(){
|
||||
var classname = this.hasClass(document.body, 'page-sub');
|
||||
|
||||
if (classname) {
|
||||
@ -25,7 +25,7 @@ var Init = {
|
||||
resizeImage: function(){
|
||||
|
||||
var header = document.getElementById('header'),
|
||||
footer = document.getElementById('footer-wrap'),
|
||||
footer = document.getElementById('footer'),
|
||||
main = document.getElementById('main-content'),
|
||||
vp = window.innerHeight,
|
||||
bodyHeight = document.body.clientHeight,
|
||||
@ -36,7 +36,7 @@ var Init = {
|
||||
if(withMinHeight > bodyHeight ){
|
||||
var newHeight = (vp - (hHeight+fHeight)) + 'px';
|
||||
main.style.height = newHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -1,481 +1,25 @@
|
||||
|
||||
// Base variables
|
||||
// --------------------------------------------------
|
||||
$screen-tablet: 768px;
|
||||
|
||||
$gray-darker: #212121; // #212121 - text
|
||||
$gray-dark: #757575; // #757575 - secondary text, icons
|
||||
$gray: #bdbdbd; // #bdbdbd - hint text
|
||||
$gray-light: #e0e0e0; // #e0e0e0 - divider
|
||||
$gray-lighter: #f5f5f5; // #f5f5f5 - background
|
||||
|
||||
/* -- Sidebar style ------------------------------- */
|
||||
|
||||
// Sidebar variables
|
||||
// --------------------------------------------------
|
||||
$zindex-sidebar-fixed: 1035;
|
||||
|
||||
$sidebar-desktop-width: 280px;
|
||||
$sidebar-width: 240px;
|
||||
|
||||
|
||||
$sidebar-padding: 16px;
|
||||
$sidebar-divider: $sidebar-padding/2;
|
||||
|
||||
$sidebar-nav-height: 48px;
|
||||
|
||||
$sidebar-icon-width: 40px;
|
||||
$sidebar-icon-height: 20px;
|
||||
|
||||
$sidebar-badge-size: $sidebar-nav-height/2;
|
||||
$sidebar-badge-font-size: 10px;
|
||||
|
||||
$sidebar-brand-color: $gray-dark;
|
||||
$sidebar-icon-color: $gray-dark;
|
||||
$sidebar-menu-color: $gray-darker;
|
||||
|
||||
|
||||
$sidebar-font-weight: 300;
|
||||
|
||||
// Sidebar mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
// Sidebar horizontal block
|
||||
//
|
||||
// This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav>li>a
|
||||
@mixin sidebar-block()
|
||||
{
|
||||
display: block;
|
||||
line-height: $sidebar-nav-height;
|
||||
padding: 0;
|
||||
//padding-left: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
|
||||
//padding-right: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
@include lato-light();
|
||||
font-weight: $sidebar-font-weight;
|
||||
//@include text-overflow();
|
||||
@include transition(all .2s ease-in-out);
|
||||
|
||||
&:hover, &:focus {
|
||||
@include box-shadow(none);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// positioning caret in sidebar block
|
||||
.caret {
|
||||
position: absolute;
|
||||
right: $sidebar-padding + $sidebar-badge-size/2 - 4px; // caret centered by badge position; 4px - caret width
|
||||
top: $sidebar-nav-height/2;
|
||||
}
|
||||
// positioning badge in sidebar block
|
||||
.sidebar-badge {
|
||||
position: absolute;
|
||||
right: $sidebar-padding;
|
||||
top: ($sidebar-nav-height - $sidebar-badge-size)/2 ;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar design template
|
||||
//
|
||||
// You can make own sidebar style with this template
|
||||
@mixin sidebar-template(
|
||||
$color,
|
||||
$bg,
|
||||
$header-bg,
|
||||
$brand-color,
|
||||
$brand-bg,
|
||||
$brand-hover-color,
|
||||
$brand-hover-bg,
|
||||
$divider,
|
||||
$badge-color,
|
||||
$badge-bg,
|
||||
$icon-color,
|
||||
$icon-hover-color,
|
||||
$link-color,
|
||||
$link-bg,
|
||||
$link-hover-color,
|
||||
$link-hover-bg,
|
||||
$link-active-color,
|
||||
$link-active-bg,
|
||||
$link-disabled-color,
|
||||
$link-disabled-bg
|
||||
) {
|
||||
|
||||
background-color: $bg;
|
||||
|
||||
ul{
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background-color: $header-bg;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sidebar-divider, .sidebar-nav .divider {
|
||||
background-color: $divider;
|
||||
}
|
||||
|
||||
.sidebar-text {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.buttons-nav{
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
a{
|
||||
min-width: 148px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
// Sidebar
|
||||
// - Project Specific
|
||||
// - Make sidebar edits here
|
||||
// --------------------------------------------------
|
||||
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
text-align: center;
|
||||
//border-bottom: 1px solid $faint-gray;
|
||||
padding-bottom: 8px;
|
||||
// Links
|
||||
//----------------
|
||||
li {
|
||||
a {
|
||||
font-family: $header-font-family;
|
||||
font-weight: 400;
|
||||
color: $black;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: $link-color;
|
||||
background-color: $link-bg;
|
||||
|
||||
i {
|
||||
color: $icon-color;
|
||||
}
|
||||
}
|
||||
li:hover > a, li > a:hover {
|
||||
color: $link-hover-color;
|
||||
background-color: $link-hover-bg;
|
||||
|
||||
i {
|
||||
color: $icon-hover-color;
|
||||
}
|
||||
}
|
||||
li:focus > a, li > a:focus {
|
||||
color: $link-color;
|
||||
background-color: $link-bg;
|
||||
|
||||
i {
|
||||
color: $icon-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-hover-color;
|
||||
background-color: $link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-active-color;
|
||||
background-color: $link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-disabled-color;
|
||||
background-color: $link-disabled-bg;
|
||||
}
|
||||
}
|
||||
> li > .ink {
|
||||
//background: #80d8ff;
|
||||
//opacity: 0.5;
|
||||
}
|
||||
|
||||
// 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;
|
||||
color: $link-hover-color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken($link-hover-bg, 7%);
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-active-color;
|
||||
background-color: $link-active-bg;
|
||||
svg{
|
||||
path{
|
||||
fill: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebars
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper and base class
|
||||
//
|
||||
// Provide a static sidebar from which we expand to create other sidebar variations.
|
||||
.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();
|
||||
}
|
||||
|
||||
// Sidebar Elements
|
||||
//
|
||||
// Basic style of sidebar elements
|
||||
.sidebar {
|
||||
|
||||
// Sidebar heading
|
||||
//----------------
|
||||
.sidebar-header {
|
||||
position: relative;
|
||||
margin-bottom: $sidebar-divider;
|
||||
@include transition(all .2s ease-in-out);
|
||||
//border-bottom: 1px solid $faint-gray;
|
||||
|
||||
.buttons{
|
||||
text-align: center;
|
||||
padding: $xsmall-pad 0 $small-pad;
|
||||
a{
|
||||
&.outline-btn{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
padding-top: 24px;
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Brand/project name
|
||||
//
|
||||
// In google guideline used for email dropdown
|
||||
.sidebar-brand {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include sidebar-block();
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar text
|
||||
//----------------
|
||||
.sidebar-text {
|
||||
@include sidebar-block();
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// This values only for this icons and only for this example
|
||||
// Idea is that icons must be equal width
|
||||
&.icon-development {
|
||||
width: 22px;
|
||||
@include img-ret-rails-png('runtime-develop-icon-color', 22px, $sidebar-icon-height );
|
||||
}
|
||||
&.icon-operations {
|
||||
width: 21px;
|
||||
@include img-ret-rails-png('runtime-deploy-icon-color', 21px, $sidebar-icon-height );
|
||||
}
|
||||
&.icon-runtime {
|
||||
width: 20px;
|
||||
@include img-ret-rails-png('runtime-maintain-icon-color', 20px, $sidebar-icon-height );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sidebar navigation class
|
||||
// ------------------------
|
||||
.sidebar .sidebar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Links
|
||||
//----------------
|
||||
li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@include sidebar-block();
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar color theme variations
|
||||
//
|
||||
// ------------------------
|
||||
.sidebar-default {
|
||||
@include sidebar-template(
|
||||
$color: $gray-darker,
|
||||
$bg: #fff,
|
||||
$header-bg: $white,
|
||||
$brand-color: $gray-dark,
|
||||
$brand-bg: transparent,
|
||||
$brand-hover-color: $gray-darker,
|
||||
$brand-hover-bg: rgba(0, 0, 0, 0.10),
|
||||
$divider: $gray,
|
||||
$badge-color: #fff,
|
||||
$badge-bg: $gray,
|
||||
$icon-color: $gray-dark,
|
||||
$icon-hover-color: $gray-dark,
|
||||
$link-color: $gray-darker,
|
||||
$link-bg: transparent,
|
||||
$link-hover-color: $gray-darker,
|
||||
$link-hover-bg: lighten($faint-gray, 6%),
|
||||
$link-active-color: $gray-darker,
|
||||
$link-active-bg: $gray-light,
|
||||
$link-disabled-color: $gray-light,
|
||||
$link-disabled-bg: transparent
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// 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 .sidebar-header {
|
||||
//height: $sidebar-width * 9/16; // 16:9 header dimension
|
||||
}
|
||||
|
||||
.sidebar .sidebar-image {
|
||||
/* img {
|
||||
width: $sidebar-width/4 - $sidebar-padding;
|
||||
height: $sidebar-width/4 - $sidebar-padding;
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -11,16 +11,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<ul class="nav sidebar-nav">
|
||||
<ul class="main nav sidebar-nav">
|
||||
<li class="first"><a href="/intro/index.html">Intro</a></li>
|
||||
<li class=""><a href="/docs/index.html">Docs</a></li>
|
||||
<li class=""><a href="/community.html">Community</a></li>
|
||||
<li class=""><a href="/community.html">Community</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="divider"></div>
|
||||
<!-- Sidebar navigation 2-->
|
||||
<ul class="buttons-nav">
|
||||
<li class="first"><a class="v-btn gray sml" href="/downloads.html">Download</a></li>
|
||||
<li class=""><a class="v-btn gray sml" href="https://github.com/hashicorp/vault">GitHub</a></li>
|
||||
</ul>
|
||||
<ul class="external nav sidebar-nav">
|
||||
<li class="first"><a class="" href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a></li>
|
||||
<li class=""><a class="" href="https://github.com/hashicorp/vault"><%= partial "layouts/svg/svg-github" %>GitHub</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<%= partial "layouts/meta" %>
|
||||
<%= partial "layouts/header" %>
|
||||
<%= partial "layouts/sidebar" %>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
<%= partial "ember_templates" %>
|
||||
<%= partial "ember_steps" %>
|
||||
<%= partial "layouts/footer" %>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user