// // Docs // -------------------------------------------------- body.page-sub{ background-color: $light-black; } body.layout-commands-state, body.layout-archive, body.layout-atlas, body.layout-aws, body.layout-azure, body.layout-bitbucket, body.layout-chef, body.layout-azurerm, body.layout-clc, body.layout-cloudflare, body.layout-cloudstack, body.layout-cobbler, body.layout-consul, body.layout-datadog, body.layout-digitalocean, body.layout-dme, body.layout-dnsimple, body.layout-docker, body.layout-dyn, body.layout-external, body.layout-github, body.layout-grafana, body.layout-fastly, body.layout-google, body.layout-heroku, body.layout-influxdb, body.layout-librato, body.layout-logentries, body.layout-mailgun, body.layout-mysql, body.layout-nomad, body.layout-openstack, body.layout-packet, body.layout-pagerduty, body.layout-postgresql, body.layout-powerdns, body.layout-rabbitmq, body.layout-rancher, body.layout-random, body.layout-rundeck, body.layout-scaleway, body.layout-statuscake, body.layout-softlayer, body.layout-template, body.layout-tls, body.layout-ultradns, body.layout-triton, body.layout-vault, body.layout-vcd, body.layout-vsphere, body.layout-docs, body.layout-downloads, body.layout-inner, body.layout-remotestate, body.layout-terraform, body.layout-intro{ background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; >.container{ .col-md-8[role=main]{ min-height: 800px; background-color: white; >div{ position: relative; z-index: 10; } } } } .docs-sidebar{ position: relative; z-index: 20; margin-bottom: 30px; margin-top: 50px; margin-right: 4%; a{ color: $purple; } .docs-sidenav{ padding-top: 15px; padding-bottom: 15px; :last-child{ border-bottom: none; } //all li > a li{ position: relative; > a{ color: white; @include transition( color 0.5s ease ); } > a:hover, > a:focus { background-color: transparent !important; color: white; @include transition( color 0.5s ease ); } } > li { padding: 10px 0; margin: 0 30px; >.nav{ li{ a{ color: white; } } } &.active { >a{ color: lighten($purple, 4%); font-weight: 500; } &:before{ content: ''; position: absolute; width: 6px; height: 8px; background-color: $purple; font-weight: 500; @include skewY(24deg); top: 26px; left: -10px; } > a{ -webkit-font-smoothing: antialiased; } /*> a:hover, > a:focus { font-weight: $font-weight-lato-xb; }*/ .nav { display: block; li.active a { color: lighten($purple, 4%); font-weight: 500; } } } > a { text-transform: uppercase; -webkit-font-smoothing: antialiased; } } .nav { display: none; margin-bottom: 15px; > li{ margin-left: 20px; > a{ -webkit-font-smoothing: antialiased; padding: 6px 15px; } } } .nav-visible { display: block; } } } .bs-docs-section{ padding-top: 10px; padding-left: 3%; padding-bottom: 80px; .lead{ margin-bottom: 48px } .doc-sectional{ margin-bottom: 48px; } p, li, .alert { font-size: 20px; font-family: $font-family-open-sans; font-weight: $font-weight-open; line-height: 1.5em; margin: 0 0 18px; -webkit-font-smoothing: antialiased; } pre{ margin: 0 0 18px; } a{ color: $purple; &:hover{ text-decoration: underline; } } img{ max-width: 650px; margin-top: 25px; margin-bottom: 25px; } h1{ color: $purple; font-size: 36px; text-transform: uppercase; word-wrap: break-word; padding-bottom: 24px; margin-top: 40px; margin-bottom: 24px; border-bottom: 1px solid #eeeeee; @include lato-light(); } h2, h3, h4{ margin-bottom: 16px; } #graph { margin-top: 30px; } } @media (max-width: 992px) { body.layout-docs, body.layout-inner, body.layout-intro{ >.container{ .col-md-8[role=main]{ min-height: 0; &::before { border-left: 9999px solid white; } } } } 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; @include transition( color 0.5s ease ); } > a:hover, > a:focus { color: $purple; @include transition( color 0.5s ease ); } } > li { >.nav{ li{ a{ color: black; &:hover{ color: $purple; } } } } } } } .bs-docs-section{ h1{ font-size: 32px; padding-top: 24px; border-top: 1px solid #eeeeee; } } } @media (max-width: 480px) { .bs-docs-section{ img{ max-width: 450px; } h1{ font-size: 28px; } } }