// ## Fancy button // // Usage: // // <button>Click me</button> // // And then in your SCSS file: // // button { // @include button; // // insert any optional button helper mixins here // } @mixin button {
@include border-radius(6px); @include box-shadow(0px 1px 3px rgba(0,0,0,0.6)); background: #222 url(/images/button.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border: none; border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; line-height: 1; font-weight: bold; font-size: 13px; &:hover { background-color: #111; color: #fff; } &:active { top: 1px; }
}
// Make the button smaller @mixin smallbutton {
font-size: 11px;
}
// Make the button larger @mixin largebutton {
font-size: 14px; padding: 8px 14px 9px;
}
// Make the button even larger @mixin xlargebutton {
font-size: 24px; padding: 8px 14px 9px;
}
// Make the button huge @mixin xxlargebutton {
font-size: 72px; padding: 8px 14px 9px;
}
// Give the button a pink color scheme @mixin pinkbutton {
background-color: #e22092; &:hover { background-color: #c81e82; }
}
// Give the button a green color scheme @mixin greenbutton {
background-color: #91bd09; &:hover { background-color: #749a02; }
}
// Give the button a red color scheme @mixin redbutton {
background-color: #e62727; &:hover { background-color: #cf2525; }
}
// Give the button an orange color scheme @mixin orangebutton {
background-color: #ff5c00; &:hover { background-color: #d45500; }
}
// Give the button a blue color scheme @mixin bluebutton {
background-color: #2981e4; &:hover { background-color: #2575cf; }
}
// Give the button a yellow color scheme @mixin yellowbutton {
background-color: #ffb515; &:hover { background-color: #fc9200; }
}
// Give the button a grey color scheme @mixin greybutton {
background-color: #aaaaaa; &:hover { background-color: #999999; }
}
// ## iOS style checkbox/switch // // Usage: // // <label> // <input type=“checkbox”/> // <span class=“check”></span> // </label> // // And then in your SCSS file: // // label { // @include iphonecheckbox; // } @mixin iphonecheckbox($width:80px,$height:32px) {
@include border-radius(4px); display: inline-block; background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7)); border: 1px solid #555555; width: $width; position: relative; height: $height; cursor: pointer; .check { @include border-radius(3px); @include transition(left .25s ease-out); display: block; width: $width / 2; height: $height - 2; background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1); background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF)); border: 1px solid #e5e5e5; position: absolute; top: 0px; left: 0px; } input[type=checkbox] { display: none; &:checked + .check { @include box-shadow(#244766 -1px 0px 3px); top: 0px; left: ($width / 2 ) - 2; } & + .check { @include box-shadow(#244766 1px 0px 3px); top: 0px; left: 0px; } }
}