diff --git a/website/source/assets/javascripts/app/Init.js b/website/source/assets/javascripts/app/Init.js index 596b2ae2fe..bef9d3e83e 100644 --- a/website/source/assets/javascripts/app/Init.js +++ b/website/source/assets/javascripts/app/Init.js @@ -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); \ No newline at end of file +})(window.Sidebar, window.DotLockup); diff --git a/website/source/assets/javascripts/docs.js b/website/source/assets/javascripts/docs.js index 3247af6585..d00adc0c2e 100644 --- a/website/source/assets/javascripts/docs.js +++ b/website/source/assets/javascripts/docs.js @@ -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; - } + } } }; diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index 31b6d55135..360db6b0d7 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -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; -} diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb index 44bbe4fe38..22ed37b0f4 100644 --- a/website/source/layouts/_sidebar.erb +++ b/website/source/layouts/_sidebar.erb @@ -11,16 +11,15 @@ - -