Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// libsass (v3.2.4)
// ----
// Palette
$dark-color: #000;
$light-color: #fff;
// Theme mixins
@mixin sg_dark_theme {
.sg_dark_theme & {
@content;
}
}
@mixin sg_foreground_background($foreground-strength: 1, $background-strength: 1) {
color: rgba($dark-color, $foreground-strength);
background-color: rgba($light-color, $background-strength);
@include sg_dark_theme {
color: rgba($light-color, $background-strength);
background-color: rgba($dark-color, $foreground-strength);
}
}
@mixin sg_box_shadow($depth: 20px) {
box-shadow: 0px 1px $depth rgba($dark-color, 0.6),
0px 0px 0px 1px rgba($dark-color, 0.5),
0px 0px 0px 1px rgba($light-color, 0.15) inset; // light inset
@include sg_dark_theme {
box-shadow: 0px 1px $depth rgba($dark-color, 0.6),
0px 0px 0px 1px rgba($dark-color, 0.5),
0px 0px 0px 1px rgba($dark-color, 0.15) inset; // dark inset
}
}
// Component
.my_component {
@include sg_foreground_background(.5, .75);
@include sg_box_shadow;
}
.another_component {
@include sg_foreground_background(.25, .5);
@include sg_box_shadow(10px);
}
.my_component {
color: rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;
}
.sg_dark_theme .my_component {
color: rgba(255, 255, 255, 0.75);
background-color: rgba(0, 0, 0, 0.5);
}
.sg_dark_theme .my_component {
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
}
.another_component {
color: rgba(0, 0, 0, 0.25);
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;
}
.sg_dark_theme .another_component {
color: rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.25);
}
.sg_dark_theme .another_component {
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.