Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
$white: #fff;
$medium_gray: #999;
$sea_green: #16a085;
$pomegranate: #c0392b;
$orange: #e04604;
$chartreuse: #6a8500;
$pink: #b72898;
$purple: #491f70;
$turquoise: #02b4ce;
$green_gray: #7f8c8d;
$palette: ("greengray": $green_gray, "pink": $pink, "orange": $orange, "green": $chartreuse,
"purple": $purple, "turquoise": $turquoise, "pomegranate": $pomegranate, "seafoam": $sea_green);
@each $hexvar, $color in $palette {
.color-palette-#{$hexvar} {
a {
color: $color;
&:hover {
text-decoration: none;
color: $medium_gray;
}
}
input[type="submit"],
input[type="reset"],
button {
background-color: $color;
&:hover {
background-color: $medium_gray;
color: $white;
}
}
}
}
.color-palette-greengray a {
color: #7f8c8d;
}
.color-palette-greengray a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-greengray input[type="submit"],
.color-palette-greengray input[type="reset"],
.color-palette-greengray button {
background-color: #7f8c8d;
}
.color-palette-greengray input[type="submit"]:hover,
.color-palette-greengray input[type="reset"]:hover,
.color-palette-greengray button:hover {
background-color: #999999;
color: white;
}
.color-palette-pink a {
color: #b72898;
}
.color-palette-pink a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-pink input[type="submit"],
.color-palette-pink input[type="reset"],
.color-palette-pink button {
background-color: #b72898;
}
.color-palette-pink input[type="submit"]:hover,
.color-palette-pink input[type="reset"]:hover,
.color-palette-pink button:hover {
background-color: #999999;
color: white;
}
.color-palette-orange a {
color: #e04604;
}
.color-palette-orange a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-orange input[type="submit"],
.color-palette-orange input[type="reset"],
.color-palette-orange button {
background-color: #e04604;
}
.color-palette-orange input[type="submit"]:hover,
.color-palette-orange input[type="reset"]:hover,
.color-palette-orange button:hover {
background-color: #999999;
color: white;
}
.color-palette-green a {
color: #6a8500;
}
.color-palette-green a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-green input[type="submit"],
.color-palette-green input[type="reset"],
.color-palette-green button {
background-color: #6a8500;
}
.color-palette-green input[type="submit"]:hover,
.color-palette-green input[type="reset"]:hover,
.color-palette-green button:hover {
background-color: #999999;
color: white;
}
.color-palette-purple a {
color: #491f70;
}
.color-palette-purple a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-purple input[type="submit"],
.color-palette-purple input[type="reset"],
.color-palette-purple button {
background-color: #491f70;
}
.color-palette-purple input[type="submit"]:hover,
.color-palette-purple input[type="reset"]:hover,
.color-palette-purple button:hover {
background-color: #999999;
color: white;
}
.color-palette-turquoise a {
color: #02b4ce;
}
.color-palette-turquoise a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-turquoise input[type="submit"],
.color-palette-turquoise input[type="reset"],
.color-palette-turquoise button {
background-color: #02b4ce;
}
.color-palette-turquoise input[type="submit"]:hover,
.color-palette-turquoise input[type="reset"]:hover,
.color-palette-turquoise button:hover {
background-color: #999999;
color: white;
}
.color-palette-pomegranate a {
color: #c0392b;
}
.color-palette-pomegranate a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-pomegranate input[type="submit"],
.color-palette-pomegranate input[type="reset"],
.color-palette-pomegranate button {
background-color: #c0392b;
}
.color-palette-pomegranate input[type="submit"]:hover,
.color-palette-pomegranate input[type="reset"]:hover,
.color-palette-pomegranate button:hover {
background-color: #999999;
color: white;
}
.color-palette-seafoam a {
color: #16a085;
}
.color-palette-seafoam a:hover {
text-decoration: none;
color: #999999;
}
.color-palette-seafoam input[type="submit"],
.color-palette-seafoam input[type="reset"],
.color-palette-seafoam button {
background-color: #16a085;
}
.color-palette-seafoam input[type="submit"]:hover,
.color-palette-seafoam input[type="reset"]:hover,
.color-palette-seafoam button:hover {
background-color: #999999;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment