mirror of https://github.com/status-im/consul.git
Add use case drop down to nav
This commit is contained in:
Mike Wickett
Jack Pearkes
parent
7a4f580d28
commit
aa2b9108ed
|
|
@ -1,6 +1,45 @@
|
|||
#header {
|
||||
background: $header-background-color;
|
||||
|
||||
// Kind of gnarly override for bootstrap's nav toggle behavior
|
||||
@media (max-width: 991px) {
|
||||
.navbar-header {
|
||||
float: none;
|
||||
}
|
||||
.navbar-left,
|
||||
.navbar-right {
|
||||
float: none !important;
|
||||
}
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
.navbar-collapse {
|
||||
border-top: 1px solid transparent;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
.navbar-collapse.collapse {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-nav {
|
||||
float: none !important;
|
||||
margin-top: 7.5px;
|
||||
}
|
||||
.navbar-nav > li {
|
||||
float: none;
|
||||
}
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.collapse.in {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
height: $header-height;
|
||||
margin: 0;
|
||||
|
|
@ -28,7 +67,9 @@
|
|||
transition: opacity 0.15s ease-in-out;
|
||||
@extend svg.logo.white;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
|
|
@ -39,40 +80,97 @@
|
|||
|
||||
ul.nav {
|
||||
li {
|
||||
a {
|
||||
color: $header-link-color;
|
||||
font-size: $header-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-bold;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: $consul-black;
|
||||
font-size: $header-font-size;
|
||||
font-family: $font-family-open-sans;
|
||||
font-weight: $font-weight-bold;
|
||||
height: $header-height;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: transparent;
|
||||
color: $header-link-color-hover;
|
||||
outline: 0;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: $header-link-color-hover;
|
||||
outline: 0;
|
||||
|
||||
svg {
|
||||
fill: $header-link-color-hover;
|
||||
}
|
||||
svg {
|
||||
fill: $header-link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
line-height: 20px;
|
||||
|
||||
svg {
|
||||
fill: $header-link-color;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
top: -2px;
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $header-link-color;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
& > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
min-width: 22rem;
|
||||
box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
|
||||
border-radius: 3px;
|
||||
padding: 2rem;
|
||||
position: absolute;
|
||||
height: 160px;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
margin-left: -15px;
|
||||
|
||||
&:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
height: 44px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 2px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
// Colors
|
||||
$white: #FFFFFF;
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$gray-darker: #555555;
|
||||
$consul-black: #252937;
|
||||
|
||||
$consul-red: #C62A71;
|
||||
$consul-red-dark: #8C1C59;
|
||||
$packer-blue: #1DAEFF;
|
||||
$packer-blue-dark: #1D94DD;
|
||||
$terraform-purple: #5C4EE5;
|
||||
$terraform-purple-dark: #4040B2;
|
||||
$vagrant-blue: #1563FF;
|
||||
$vagrant-blue-dark: #104EB2;
|
||||
$consul-red: #c62a71;
|
||||
$consul-red-dark: #8c1c59;
|
||||
$packer-blue: #1daeff;
|
||||
$packer-blue-dark: #1d94dd;
|
||||
$terraform-purple: #5c4ee5;
|
||||
$terraform-purple-dark: #4040b2;
|
||||
$vagrant-blue: #1563ff;
|
||||
$vagrant-blue-dark: #104eb2;
|
||||
$vault-black: #000000;
|
||||
$vault-blue: #00ABE0;
|
||||
$vault-gray: #919FA8;
|
||||
$vault-blue: #00abe0;
|
||||
$vault-gray: #919fa8;
|
||||
|
||||
// Typography
|
||||
$font-family-klavika: 'klavika-web', Helvetica, sans-serif;
|
||||
$font-family-klavika: 'klavika-web', Helvetica, sans-serif;
|
||||
$font-family-open-sans: 'Open Sans', sans-serif;
|
||||
$font-family-monospace: 'Fira Mono', monospace;
|
||||
$font-size: 15px;
|
||||
$font-weight-reg: 400;
|
||||
$font-weight-bold: 600;
|
||||
$font-size: 15px;
|
||||
$font-weight-reg: 400;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
// Body
|
||||
$body-font-color: $gray-darker;
|
||||
|
|
@ -45,8 +46,8 @@ $sidebar-font-weight: $font-weight-reg;
|
|||
$header-background-color: $consul-red;
|
||||
$header-font-size: $font-size - 2;
|
||||
$header-height: 92px;
|
||||
$header-link-color: rgba($white, 0.85);
|
||||
$header-link-color-hover: $white;
|
||||
$header-link-color: rgba($black, 0.85);
|
||||
$header-link-color-hover: $black;
|
||||
$header-font-family: $font-family-klavika;
|
||||
|
||||
// Footer
|
||||
|
|
@ -56,7 +57,7 @@ $footer-link-color-hover: $black;
|
|||
|
||||
// Button
|
||||
$button-background: $white;
|
||||
$button-font-color: #7b8A8E;
|
||||
$button-font-color: #7b8a8e;
|
||||
$button-font-family: $font-family-klavika;
|
||||
$button-font-size: $font-size;
|
||||
$button-font-weight: $font-weight-bold;
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@
|
|||
@import '_logos';
|
||||
|
||||
// Pages
|
||||
@import "_community";
|
||||
@import "_docs";
|
||||
@import "_downloads";
|
||||
@import '_community';
|
||||
@import '_docs';
|
||||
@import '_downloads';
|
||||
// @import "_home";
|
||||
|
||||
// Consul Connect
|
||||
@import 'consul-connect/_index';
|
||||
@import 'consul-connect/_index';
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
<ul class="nav sidebar-nav">
|
||||
<li><a href="/intro/index.html">Intro</a></li>
|
||||
<li><a href="/docs/guides/index.html">Guides</a></li>
|
||||
<li><a href="/discovery.html">Service Discovery</a></li>
|
||||
<li><a href="/segmentation.html">Service Segmentation</a></li>
|
||||
<li><a href="/configuration.html">Service Configuration</a></li>
|
||||
<li><a href="/docs/index.html">Docs</a></li>
|
||||
<li><a href="/api/index.html">API</a></li>
|
||||
<li><a href="/community.html">Community</a></li>
|
||||
|
|
|
|||
|
|
@ -65,10 +65,16 @@
|
|||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons hidden-xs">
|
||||
<div class="buttons hidden-xs hidden-sm">
|
||||
<nav class="navigation-links" role="navigation">
|
||||
<ul class="main-links nav navbar-nav navbar-right">
|
||||
<li><a href="/intro/index.html">Intro</a></li>
|
||||
<li><span>Use Cases<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill="#252937" fill-rule="evenodd"/></svg></span>
|
||||
<ul class="dropdown">
|
||||
<li><a href="/discovery.html">Service Discovery</a></li>
|
||||
<li><a href="/segmentation.html">Service Segmentation</a></li>
|
||||
<li><a href="/configuration.html">Service Configuration</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/docs/guides/index.html">Guides</a></li>
|
||||
<li><a href="/docs/index.html">Docs</a></li>
|
||||
<li><a href="/api/index.html">API</a></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue