Skip to content

Instantly share code, notes, and snippets.

@woodcox

woodcox/Navbar.scss

Last active April 2, 2021 20:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save woodcox/1a3f4abee033af617a6b7b7bf4078984 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save woodcox/1a3f4abee033af617a6b7b7bf4078984 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
markup.html
<html>
<head>
<title>OmbuLabs Style Guide</title>
<link rel="stylesheet" type="text/css" href="static/styleguide.min.css">
<script src="static/styleguide.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.css" crossorigin="anonymous">
</head>
<body class="styleguide-page">
<div id='top'></div>
<a href="#" id="nav-button" class="">
<span>Menu</span>
</a>
<ul id="main-nav">
<a href="#top"><h1>OmbuLabs</h1></a>
<li><a href="#logo" title="Logo">Logo</a></li>
<li><a href="#color" title="Color">Color</a></li>
<li><a href="#typography" title="Typography">Typography</a></li>
<li><a href="#links-buttons" title="Links & Buttons">Links & Buttons</a></li>
<li><a href="#forms" title="Forms">Forms</a></li>
<li><a href="#code" title="Code">Code block</a></li>
<li><a href="#flash" title="Flash">Flash Messages</a></li>
<li><a href="#icons" title="Icons">Icons</a></li>
</ul>
<section id="page-wrapper">
<div id="sections">
<h2>OmbuLabs Style Guide</h2>
<p>At <a href="http://www.ombulabs.com/" title="OmbuLabs.com" target="_blank">OmbuLabs.com</a>, we believe successful products are built applying the Lean Startup methodology. We love our test-driven process, scrums, pair programming, continuous integration and sprints.</p>
<div id="logo" class="section__content">
<h3>Logo</h3>
<ul class="logos">
<li><img src="vendor/assets/images/logo-1.png"><span>Logo with tagline</span></li>
<li><img src="vendor/assets/images/logo-2.png"><span>Logo with tagline / Black</span></li>
<li><img src="vendor/assets/images/logo-4.png"><span>Logo</span></li>
<li class="black"><img src="vendor/assets/images/logo-3.png"><span>Logo with background</span></li>
</ul>
</div>
Raw
Navbar.scss
$white: white;
$magenta: #29de7d;
$black: #0366ee;
$orange: black;
$breakpoints: (
extra-small: 576px,
small: 768px,
);
// @include respond-below(small) {}
@mixin respond-below($breakpoint) {
// If the breakpoint exists in the map.
@if map-has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map-get($breakpoints, $breakpoint);
// Write the media query.
@media (max-width: ($breakpoint-value - 1)) {
@content;
}
}
}
.styleguide-page{
padding: 50px 0;
&.modal-active{
overflow: hidden;
}
}
#nav-button{
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 100;
color: $white;
text-decoration: none;
line-height: 16px;
transition: left 0.3s ease-in-out;
@include respond-below(small) {
display: block;
&.open{
span{
background-image: asset-url('close-icon.png');
}
}
}
&:hover{
opacity: 0.8;
}
span{
display: block;
padding: 10px 35px 10px 10px;
background-image: asset-url('menu-icon.png');
background-repeat: no-repeat;
background-color: $magenta;
color:$white;
font-weight: bold;
background-position: center right 3px;
margin: 10px;
border-radius: 4px;
}
}
#main-nav{
transition: left 0.3s ease-in-out;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
z-index: 30;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color: $black;
list-style: none;
font-size: 14px;
padding-top: 40px;
@include respond-below(small) {
width: 100%;
right: -100vw;
left:auto;
}
&.open{
right: 0;
li a:hover, li a:active{
color:$magenta;
border-color: $magenta;
}
}
h1{
background-image: asset-url('style-guide-logo.png');
background-repeat: no-repeat;
background-position: 25px;
height: 200px;
text-indent: -9999px;
margin-bottom: 40px;
}
li a{
padding: 10px 40px;
display: block;
text-decoration: none;
color: $white;
text-transform: uppercase;
letter-spacing: 0.5px;
border-left: 5px solid $black;
font-weight: 400;
&:hover{
border-left: 5px solid $orange;
color: $orange;
}
&.nav-active{
color: $magenta;
border-left: 5px solid $magenta;
}
}
}
Raw
output.css
.styleguide-page {
padding: 50px 0;
}
.styleguide-page.modal-active {
overflow: hidden;
}
#nav-button {
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 100;
color: white;
text-decoration: none;
line-height: 16px;
transition: left 0.3s ease-in-out;
}
@media (max-width: 767px) {
#nav-button {
display: block;
}
#nav-button.open span {
background-image: asset-url("close-icon.png");
}
}
#nav-button:hover {
opacity: 0.8;
}
#nav-button span {
display: block;
padding: 10px 35px 10px 10px;
background-image: asset-url("menu-icon.png");
background-repeat: no-repeat;
background-color: #29de7d;
color: white;
font-weight: bold;
background-position: center right 3px;
margin: 10px;
border-radius: 4px;
}
#main-nav {
transition: left 0.3s ease-in-out;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
z-index: 30;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color: #0366ee;
list-style: none;
font-size: 14px;
padding-top: 40px;
}
@media (max-width: 767px) {
#main-nav {
width: 100%;
right: -100vw;
left: auto;
}
}
#main-nav.open {
right: 0;
}
#main-nav.open li a:hover, #main-nav.open li a:active {
color: #29de7d;
border-color: #29de7d;
}
#main-nav h1 {
background-image: asset-url("style-guide-logo.png");
background-repeat: no-repeat;
background-position: 25px;
height: 200px;
text-indent: -9999px;
margin-bottom: 40px;
}
#main-nav li a {
padding: 10px 40px;
display: block;
text-decoration: none;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
border-left: 5px solid #0366ee;
font-weight: 400;
}
#main-nav li a:hover {
border-left: 5px solid black;
color: black;
}
#main-nav li a.nav-active {
color: #29de7d;
border-left: 5px solid #29de7d;
}
Raw
settings.json
{
"sass": {
"compiler": "Ruby Sass/3.7.4",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment