Skip to content

Instantly share code, notes, and snippets.

@adamelso

adamelso/SassMeister-input.scss

Created August 14, 2014 09:07
Show Gist options
  • Save adamelso/a0e0f241c1cac845ed51 to your computer and use it in GitHub Desktop.
Save adamelso/a0e0f241c1cac845ed51 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
$feelunique-color-teal: #b3cac4;
$feelunique-color-cool-teal: #b3c9c6;
$feelunique-color-turquoise: #1abc9c;
$feelunique-color-blush-red: #d72245;
$feelunique-color-off-white: #f5f1f0;
$feelunique-color-hen-pink: #ddbcb0;
$feelunique-color-shasta-pink: #d72245;
@mixin fu-border-radius($r:5px) {
-webkit-border-radius: $r;
-moz-border-radius: $r;
border-radius: $r;
}
@mixin fu-button($bg:$feelunique-color-turquoise, $color:#fff, $lighten-on-hover:true) {
@include fu-border-radius();
background-color: $bg;
color: $color;
padding: 5px;
&:hover {
@if $lighten-on-hover {
background-color: lighten($bg, 40%);
} @else {
background-color: darken($bg, 40%);
}
}
}
.primary-button {
@include fu-button();
}
.alert-button {
@include fu-button($bg:$feelunique-color-shasta-pink);
}
Raw
SassMeister-output.css
.primary-button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #1abc9c;
color: white;
padding: 5px;
}
.primary-button:hover {
background-color: #aef4e6;
}
.alert-button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #d72245;
color: white;
padding: 5px;
}
.alert-button:hover {
background-color: #f7ced6;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment