Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
/* Red * /
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHover : #ffbbbc;
/* Green */
$bgDefault : #2ecc71;
$bgHighlight : #27ae60;
$colDefault : #ecf0f1;
$colHover : #d1ffed; /*/
/* Purple * /
$bgDefault : #9b59b6;
$bgHighlight : #8e44ad;
$colDefault : #ecf0f1;
$colHover : #ecdbff; /*/
/* Orange * /
$bgDefault : #e67e22;
$bgHighlight : #d35400;
$colDefault : #ecf0f1;
$colHover : #ffe6d1; /*/
/* --- Style --- */
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHover; }}
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHover; }}}
.active {
> a, > a:hover, > a:focus {
color: $colHover;
background-color: $bgHighlight; }}
.open {
> a, > a:hover, > a:focus {
color: $colHover;
background-color: $bgHighlight;
.caret {
border-top-color: $colHover;
border-bottom-color: $colHover; }}}
> .dropdown {
> a {
.caret {
border-top-color: $colDefault;
border-bottom-color: $colDefault; }
&:hover, &:focus {
.caret {
border-top-color: $colHover;
border-bottom-color: $colHover; }}}}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHover;
background-color: $bgHighlight; }}
}
/* Red * /
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHover : #ffbbbc;
/* Green */
/*/
/* Purple * /
$bgDefault : #9b59b6;
$bgHighlight : #8e44ad;
$colDefault : #ecf0f1;
$colHover : #ecdbff; /*/
/* Orange * /
$bgDefault : #e67e22;
$bgHighlight : #d35400;
$colDefault : #ecf0f1;
$colHover : #ffe6d1; /*/
/* --- Style --- */
.navbar-default {
background-color: #2ecc71;
border-color: #27ae60;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #d1ffed;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #d1ffed;
}
.navbar-default .navbar-nav .active > a, .navbar-default .navbar-nav .active > a:hover, .navbar-default .navbar-nav .active > a:focus {
color: #d1ffed;
background-color: #27ae60;
}
.navbar-default .navbar-nav .open > a, .navbar-default .navbar-nav .open > a:hover, .navbar-default .navbar-nav .open > a:focus {
color: #d1ffed;
background-color: #27ae60;
}
.navbar-default .navbar-nav .open > a .caret, .navbar-default .navbar-nav .open > a:hover .caret, .navbar-default .navbar-nav .open > a:focus .caret {
border-top-color: #d1ffed;
border-bottom-color: #d1ffed;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ecf0f1;
border-bottom-color: #ecf0f1;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #d1ffed;
border-bottom-color: #d1ffed;
}
.navbar-default .navbar-toggle {
border-color: #27ae60;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #27ae60;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #d1ffed;
background-color: #27ae60;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment