Skip to content

Instantly share code, notes, and snippets.

@nemoDreamer
Created June 16, 2015 14:45
Show Gist options
  • Save nemoDreamer/b1338dd3b0cb202ae479 to your computer and use it in GitHub Desktop.
Save nemoDreamer/b1338dd3b0cb202ae479 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$nav_light_color: white;
$nav_dark_color: black;
%base_nav_item {
color: darken($nav_light_color, 25);
.sg_dark_theme & {
color: lighten($nav_dark_color, 25);
}
&.selected,
&.active div.overlay_button,
&.active div.button,
&:hover {
color: $nav_light_color;
.sg_dark_theme & {
color: $nav_dark_color;
}
}
// nest children in here, and they'll get used for @extend as well!
.button {
border: 1px solid rgba($nav_dark_color, .5);
.sg_dark_theme & {
border-color: rgba($nav_light_color, .5);
}
}
}
// and then use @extend for fully cascading sg_dark_theme support!
#sg_global_nav div.nav_item {
@extend %base_nav_item;
// define one-off exceptions to your placeholder:
background-color: gray;
.sg_dark_theme & {
background-color: blue;
}
}
#sg_global_nav div.nav_item {
color: #bfbfbf;
}
.sg_dark_theme #sg_global_nav div.nav_item, #sg_global_nav .sg_dark_theme div.nav_item {
color: #404040;
}
#sg_global_nav div.selected.nav_item,
#sg_global_nav div.active.nav_item div.overlay_button,
#sg_global_nav div.active.nav_item div.button,
#sg_global_nav div.nav_item:hover {
color: white;
}
.sg_dark_theme #sg_global_nav div.selected.nav_item,
#sg_global_nav .sg_dark_theme div.selected.nav_item, .sg_dark_theme #sg_global_nav div.active.nav_item div.overlay_button,
#sg_global_nav .sg_dark_theme div.active.nav_item div.overlay_button, .sg_dark_theme #sg_global_nav div.active.nav_item div.button,
#sg_global_nav .sg_dark_theme div.active.nav_item div.button, .sg_dark_theme #sg_global_nav div.nav_item:hover, #sg_global_nav .sg_dark_theme div.nav_item:hover {
color: black;
}
#sg_global_nav div.nav_item .button {
border: 1px solid rgba(0, 0, 0, 0.5);
}
.sg_dark_theme #sg_global_nav div.nav_item .button, #sg_global_nav .sg_dark_theme div.nav_item .button {
border-color: rgba(255, 255, 255, 0.5);
}
#sg_global_nav div.nav_item {
background-color: gray;
}
.sg_dark_theme #sg_global_nav div.nav_item {
background-color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment