mirror of
https://github.com/kemko/nomad.git
synced 2026-01-08 03:15:42 +03:00
announcement bnr
This commit is contained in:
140
website/source/assets/stylesheets/_announcement-bnr.scss
Executable file
140
website/source/assets/stylesheets/_announcement-bnr.scss
Executable file
@@ -0,0 +1,140 @@
|
||||
//
|
||||
// announcement bnr
|
||||
// --------------------------------------------------
|
||||
|
||||
$enterprise-bnr-nomad-color: $green;
|
||||
$enterprise-color-dark-white: #A9B1B5;
|
||||
|
||||
body{
|
||||
// when _announcment-bnr.erb is being used in layout we need to push down content to accomodate
|
||||
// add this class to body
|
||||
&.-displaying-bnr{
|
||||
#header{
|
||||
> .container{
|
||||
padding-top: 8px;
|
||||
padding-bottom: 32px;
|
||||
-webkit-transform: translateY(32px);
|
||||
-ms-transform: translateY(32px);
|
||||
transform: translateY(32px);
|
||||
}
|
||||
}
|
||||
|
||||
#jumbotron {
|
||||
.container{
|
||||
.jumbo-logo-wrap{
|
||||
margin-top: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.page-sub{
|
||||
#header{
|
||||
> .container{
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#announcement-bnr {
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
background-color: #000;
|
||||
|
||||
&.-absolute{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
a,p{
|
||||
font-size: 14px;
|
||||
color: $enterprise-color-dark-white;
|
||||
font-family: $header-font-family;
|
||||
font-size: 13px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-highlight{
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
color: lighten($enterprise-bnr-nomad-color, 10%);
|
||||
font-weight: 400;
|
||||
-webkit-transform: translateY(1px);
|
||||
-ms-transform: translateY(1px);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.enterprise-logo{
|
||||
position: relative;
|
||||
top: 4px;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
|
||||
svg{
|
||||
rect{
|
||||
fill: $enterprise-color-dark-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg{
|
||||
width: 140px;
|
||||
fill: $white;
|
||||
margin-right: 4px;
|
||||
margin-left: 3px;
|
||||
|
||||
rect{
|
||||
@include transition(all .1s ease-in);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hcaret{
|
||||
display: inline-block;
|
||||
-moz-transform: translate(0, -1px) rotate(135deg);
|
||||
-webkit-transform: translate(0, -1px) rotate(135deg);
|
||||
transform: translate(0, -1px) rotate(135deg);
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-top: 1px solid lighten($enterprise-bnr-nomad-color, 10%);
|
||||
border-left: 1px solid lighten($enterprise-bnr-nomad-color, 10%);
|
||||
@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;
|
||||
}
|
||||
|
||||
.link-highlight{
|
||||
display: inline-block;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.enterprise-logo svg{
|
||||
width: 128px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.hcaret{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,7 @@
|
||||
@import '_footer';
|
||||
@import '_buttons';
|
||||
@import '_sidebar';
|
||||
@import '_announcement-bnr';
|
||||
|
||||
// Pages
|
||||
@import '_home';
|
||||
|
||||
14
website/source/layouts/_announcement-bnr.erb
Normal file
14
website/source/layouts/_announcement-bnr.erb
Normal file
@@ -0,0 +1,14 @@
|
||||
<div id="announcement-bnr" class="-absolute">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p>
|
||||
<span class="tagline">Nomad Annoucement!</span>
|
||||
<a class="link-highlight" href="https://www.hashicorp.com/">
|
||||
Find out more <span class="hcaret"></span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,4 +1,5 @@
|
||||
<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
|
||||
<%= partial "layouts/announcement-bnr" %>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
|
||||
@@ -18,4 +18,4 @@
|
||||
<%= yield_content :head %>
|
||||
</head>
|
||||
|
||||
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="<%= yield_content(:body_class) %> page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
||||
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="<%= yield_content(:body_class) %> page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %> -displaying-bnr">
|
||||
|
||||
Reference in New Issue
Block a user