Permalink
Fetching contributors…
Cannot retrieve contributors at this time
135 lines (116 sloc) 3.74 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("button") {
#{$button-class} {
@include reset-inline-block;
border: 0;
margin: 0;
cursor: pointer;
text-align: center;
font-weight: normal;
line-height: normal;
white-space: nowrap;
text-decoration: none;
@include size-medium;
@include is-small(true, true) { @include size-small; }
@include is-large(true, true) { @include size-large; }
&.is-disabled,
&[disabled] {
cursor: not-allowed;
}
//----- Effects -----//
@if index($button-effects, "oval") {
&#{$shape-oval-class} {
border-radius: #{$oval-x} / #{$oval-y};
}
}
@if index($button-effects, "pill") {
&#{$shape-pill-class} {
border-radius: $pill;
}
}
@if index($button-effects, "skew") {
&#{$shape-skew-class} {
border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
}
}
}
//-------------------- Modifiers --------------------//
@if index($button-modifiers, "gloss") {
#{$button-class-modifier-gloss} {
&::after {
content: "";
position: absolute;
width: 100%;
height: 60%;
top: 1%;
left: 0;
border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
}
//----- Effects -----//
&#{$shape-round-class}::after {
border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
width: 98%;
left: 1.5%;
}
@if index($button-effects, "oval") {
&#{$shape-oval-class}::after {
width: 90%;
left: 5.5%;
border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
}
}
@if index($button-effects, "pill") {
&#{$shape-pill-class}::after {
width: 90%;
left: 5.5%;
border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
}
}
@if index($button-effects, "skew") {
&#{$shape-skew-class}::after {
width: 90%;
left: 5.5%;
border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
}
}
}
}
@if index($button-modifiers, "reflect") {
#{$button-class-modifier-reflect}::after {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
background: linear-gradient(180deg, white(0), white(.3));
}
}
@if index($button-modifiers, "glare") {
#{$button-class-modifier-glare}::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
}
}
@if index($button-modifiers, "popout") {
#{$button-class-modifier-popout} {
box-shadow: 0 6px 0 0 black(.25) !important;
top: -3px;
&:active {
box-shadow: 0 3px 0 0 black(.5) !important;
top: 0;
}
}
}
}