Skip to content

Instantly share code, notes, and snippets.

@atcraigwatson
Created September 15, 2015 09:42
Show Gist options
  • Save atcraigwatson/6ae2bab2f7c153f46c09 to your computer and use it in GitHub Desktop.
Save atcraigwatson/6ae2bab2f7c153f46c09 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<button class="primary">hello</button>
<button class="success">hello</button>
<button class="warning">hello</button>
<button class="alert">hello</button>
// ----
// libsass (v3.2.5)
// ----
// Core Values
$font-size: 16;
$primary : #3277b3;
$success : adjust_hue($primary, 260);
$warning : saturate(adjust_hue($primary, 188), 43);
$alert : lighten(saturate(adjust_hue($primary, 162), 12), 4);
// Function
@function em($target, $context: $font-size) {
@return ($target / $context) * 1em;
}
// !default Values
$button-color : $primary !default;
$button-text-color : white !default;
$button-line-height : 32 !default;
$button-border-radius : 3 !default;
$button-padding : 30 !default;
$button-font-size : 24 !default;
$button-weight : bold !default;
// Mixin
@mixin default-button ($color: $button-text-color,
$line-height: $button-line-height,
$radius: $button-border-radius,
$padding: $button-padding,
$font-size: $button-font-size,
$weight: $button-weight) {
color: $color;
line-height: em($line-height);
border-radius: em($radius);
padding: 0 em($padding);
font-size: em($font-size);
font-weight: $weight;
}
@mixin flat-button($color: $button-color) {
$highlight-color: lighten($color, 50%);
$shadow-color: grayscale(transparentize($color, 0.1));
background-color: $color;
border: 1px solid darken($color, 10%);
text-shadow: 0 1px 1px darken($color, 20%);
box-shadow: 0 em(2) em(6) 0 $shadow-color;
&:hover {
background-color: darken($color, 6%);
cursor: pointer;
}
}
// Placeholder
%default-button {
@include default-button;
}
// Selector
.primary {
@extend %default-button;
@include flat-button($primary);
}
.success {
@extend %default-button;
@include flat-button($success);
}
.warning {
@extend %default-button;
@include flat-button($warning);
}
.alert {
@extend %default-button;
@include flat-button($alert);
}
.primary, .success, .warning, .alert {
color: white;
line-height: 2em;
border-radius: 0.1875em;
padding: 0 1.875em;
font-size: 1.5em;
font-weight: bold;
}
.primary {
background-color: #3277b3;
border: 1px solid #275c8b;
text-shadow: 0 1px 1px #1c4263;
box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.primary:hover {
background-color: #2b679b;
cursor: pointer;
}
.success {
background-color: #4cb332;
border: 1px solid #3b8b27;
text-shadow: 0 1px 1px #2a631c;
box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.success:hover {
background-color: #429b2b;
cursor: pointer;
}
.warning {
background-color: #e48901;
border: 1px solid #b16a01;
text-shadow: 0 1px 1px #7f4c00;
box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.warning:hover {
background-color: #c67701;
cursor: pointer;
}
.alert {
background-color: #d24427;
border: 1px solid #a7361f;
text-shadow: 0 1px 1px #7c2817;
box-shadow: 0 0.125em 0.375em 0 rgba(125, 125, 125, 0.9);
}
.alert:hover {
background-color: #b83b23;
cursor: pointer;
}
<button class="primary">hello</button>
<button class="success">hello</button>
<button class="warning">hello</button>
<button class="alert">hello</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment