Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Refactor Colors
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
$color-primary: #006dcc;
$color-success: #5bb75b;
$color-danger: #da4f49;
$color-white: white;
@mixin Button-theme($color, $offset: 10) {
$colorDarker: darken(desaturate($color, $offset), $offset);
background-color: $color;
background-image: linear-gradient(top, $color 0%, $colorDarker 100%);
border: 1px solid $colorDarker;
text-shadow: darken($colorDarker, $offset * 2) 0 -1px 1px;
&:hover,
&:focus {
background: $colorDarker;
text-decoration: none;
}
}
%Button {
border-radius: 5px;
box-shadow: inset 0 0 1px $color-white, 0 1px 2px rgba(0, 0, 0, .3);
color: $color-white;
cursor: pointer;
display: inline-block;
height: scut-em(40, 16);
text-align: center;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 40px;
padding: 0 15px;
@include Button-theme($color-primary);
}
.Button {
@extend %Button;
}
.Button--success {
@extend %Button;
@include Button-theme($color-success);
}
.Button--danger {
@extend %Button;
@include Button-theme($color-danger);
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@mixin Button-theme($colorBase, $colorBorder, $colorShadow) {
background-color: $colorBase;
background-image: linear-gradient(top, $colorBase 0%, $colorBorder 100%);
border: 1px solid $colorBorder;
text-shadow: $colorShadow 0 -1px 1px;
&:hover,
&:focus {
background: $colorBorder;
text-decoration: none;
}
}
%Button {
border-radius: 5px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3);
color: #fff;
cursor: pointer;
display: inline-block;
height: scut-em(40, 16);
text-align: center;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 40px;
padding: 0 15px;
@include Button-theme(#006dcc, #085191, #031b30);
}
.Button {
@extend %Button;
}
.Button--success {
@extend %Button;
@include Button-theme(#5bb75b, #4f904f, #2b4e2b);
}
.Button--danger {
@extend %Button;
@include Button-theme(#da4f49, #bb3a35, #BB3A35);
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
%Button {
border-radius: 5px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3);
color: #fff;
cursor: pointer;
display: inline-block;
height: scut-em(40, 16);
text-align: center;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 40px;
padding: 0 15px;
background-color: #006dcc;
background-image: linear-gradient(top, #006dcc 0%, #085191 100%);
border: 1px solid #085191;
text-shadow: #031b30 0 -1px 1px;
&:hover,
&:focus {
background: #006dcc;
text-decoration: none;
}
}
.Button {
@extend %Button;
}
.Button--success {
@extend %Button;
background-color: #5bb75b;
background-image: linear-gradient(top, #5bb75b 0%, #4f904f 100%);
border: 1px solid #4f904f;
text-shadow: #2b4e2b 0 -1px 1px;
&:hover,
&:focus {
background: #5bb75b;
text-decoration: none;
}
}
.Button--danger {
@extend %Button;
background-color: #da4f49;
background-image: linear-gradient(top, #da4f49 0%, #bb3a35 100%);
border: 1px solid #bb3a35;
text-shadow: #6c211e 0 -1px 1px;
&:hover,
&:focus {
background: #BB3A35;
text-decoration: none;
}
}
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.