|
//--------------------------// |
|
// Helpers |
|
// !!IMPORTANT, will not run without these |
|
//-------------------------// |
|
//Sets value if specified otherwise defaults. |
|
set($args, $key, $defualt) |
|
return $key in $args ? $args[$key] : $defualt |
|
//Applies props |
|
apply(props) |
|
props = arguments if length(arguments) > 1 |
|
for prop in props |
|
{prop} props[prop] |
|
//Random _id gen |
|
random(min, max) |
|
return floor( math(0, "random") * max + min ) |
|
|
|
//--------------------------// |
|
//Material Button Mixin |
|
//-------------------------// |
|
materialBtn($class) |
|
$args = arguments[1]; |
|
$customArgs = arguments[2]; |
|
//Need rando _id, otherwise keyfram animations can overlap |
|
_id = random(1000, 9999); |
|
$anim_id = 'amin' + _id; |
|
$animPseudo_id = 'animPseudo' + _id; |
|
$animOut_id = 'animOut' + _id; |
|
$animPseudoOut_id = 'animPseudoOut' + _id; |
|
$animRev_id = 'animRev' + _id; |
|
$animPseudoRev_id = 'animPseudoRev' + _id; |
|
//Type |
|
$raised = set($args, 'raised', true); |
|
$type = set($args, 'type', 'click'); |
|
//Material Effect |
|
$materialColor = set($args, 'materialColor', #000); |
|
$materialAlpha = set($args, 'materialAlpha', 0.25); |
|
//Color |
|
$color = set($args, 'background', #2196f3); |
|
$fontColor = set($args, 'color', white); |
|
$fontSize = set($args, 'font-size', inherit); |
|
$textDecoration = set($args, 'text-decoration', none); |
|
$fgColor = darken($color, 7%); |
|
//Btn Attr |
|
$margin = set($args, 'margin', 1em); |
|
$fw = set($args, 'font-weight', inherit); |
|
$padding = set($args, 'padding', 1em 1.25em); |
|
$width = set($args, 'width', 200px); |
|
$height = set($args, 'height', inherit); |
|
$lineHeight = set($args, 'line-height', $height); |
|
$ta = set($args, 'text-align', center); |
|
$br = set($args, 'border-radius', 5px); |
|
$z = set($args, 'z-index', 0); |
|
//Animation |
|
$animDur = set($args, 'duration', 0.75s); |
|
$animEase = set($args, 'ease', $easeOutQuad); |
|
$easeOutQuad = cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|
$easeInOut = cubic-bezier(0.420, 0.000, 0.580, 1.000); |
|
$easeInQuad = cubic-bezier(0.550, 0.085, 0.680, 0.530); |
|
//Hover Reverse |
|
$hoverRev = set($args, 'reverse', false); |
|
//Hover Effect for btn |
|
$btnHoverArgs = $args['btnHover']; |
|
$btnHover = typeof($btnHoverArgs) == 'object'; |
|
if $btnHover |
|
$btnHoverDur = set($spanHoverArgs, 'duration', $animDur); |
|
$btnHoverEase = set($spanHoverArgs, 'ease', $easeInOut); |
|
//Hover Effect for span |
|
$spanHoverArgs = $args['spanHover']; |
|
$spanHover = typeof($spanHoverArgs) == 'object'; |
|
if $spanHover |
|
$spanHoverDur = set($spanHoverArgs, 'duration', $animDur); |
|
$spanHoverEase = set($spanHoverArgs, 'ease', $easeInOut); |
|
{$class} |
|
position: relative |
|
margin: $margin |
|
left: $anim_id |
|
right: $animPseudo_id |
|
font-weight: $fw |
|
padding: $padding |
|
text-align: $ta |
|
width: $width |
|
height: $height |
|
border-radius: $br |
|
overflow: hidden |
|
left: $hoverRev |
|
position: relative |
|
background: $color |
|
z-index: $z |
|
cursor: pointer |
|
//Custom Args |
|
if $customArgs |
|
apply($customArgs) |
|
//Hover |
|
if $btnHover |
|
transition: all $btnHoverDur $btnHoverEase |
|
&:hover |
|
transition: all $btnHoverDur $btnHoverEase |
|
apply($btnHoverArgs) |
|
//Raised |
|
if $raised |
|
transition: all $btnHoverDur $btnHoverEase; |
|
box-shadow: 0px 1px 1px darken($fgColor, 55%) |
|
&:active |
|
background: darken($fgColor, 3%) |
|
box-shadow: 0px 1px 1px darken($fgColor, 65%) |
|
//Hover span |
|
if $spanHover |
|
&:hover |
|
span |
|
apply($spanHoverArgs); |
|
//Text |
|
span |
|
color: $fontColor |
|
font-size: $fontSize |
|
text-decoration: $textDecoration |
|
line-height: $lineHeight |
|
//Hover anim |
|
if $spanHover |
|
transition: all $spanHoverDur $spanHoverEase |
|
if $type == 'click' |
|
input:checked + .anim |
|
animation: $anim_id $animDur $animEase |
|
&:after |
|
animation: $animPseudo_id $animDur $animEase |
|
input:not(:checked) + .anim |
|
animation: $animOut_id $animDur $animEase |
|
&:after |
|
animation: $animPseudoOut_id $animDur $animEase |
|
else |
|
if $hoverRev |
|
.anim |
|
animation: $animRev_id $animDur $animEase |
|
&:after |
|
animation: $animPseudoRev_id $animDur $easeInQuad |
|
&:hover > .anim |
|
animation: $anim_id $animDur $animEase |
|
&:hover > .anim:after |
|
background: alpha($materialColor, $materialAlpha) |
|
animation: $animPseudo_id $animDur $animEase |
|
//Click |
|
input[type="checkbox"] |
|
-moz-appearance: none; |
|
-webkit-appearance: none; |
|
position: absolute |
|
width: 100% |
|
height: 100% |
|
margin: 0 |
|
left: 0 |
|
top: 0 |
|
cursor: pointer |
|
&:focus |
|
outline: 0 |
|
//Amin Class |
|
.anim |
|
transform: translate(-50%, -50%) |
|
position: absolute |
|
top: 50% |
|
left: 50% |
|
z-index: -1 |
|
&:before |
|
position: relative |
|
content: '' |
|
display: block |
|
margin-top: 100% |
|
&:after |
|
content: '' |
|
position: absolute |
|
top: 0 |
|
bottom: 0 |
|
left: 0 |
|
right: 0 |
|
border-radius: 50% |
|
//Animation |
|
@keyframes $anim_id |
|
0% |
|
width: 0% |
|
100% |
|
width: 100% |
|
@keyframes $animPseudo_id |
|
0% |
|
background: alpha($materialColor, $materialAlpha) |
|
100% |
|
background: rgba($materialColor, 0) |
|
@keyframes $animOut_id |
|
0% |
|
width: 0% |
|
100% |
|
width: 100% |
|
@keyframes $animPseudoOut_id |
|
0% |
|
background: rgba($materialColor, $materialAlpha) |
|
100% |
|
background: rgba($materialColor, 0) |
|
//Reverse |
|
@keyframes $animRev_id |
|
0% |
|
width: 100% |
|
100% |
|
width: 0% |
|
@keyframes $animPseudoRev_id |
|
0% |
|
//Gotta tone her down |
|
background: rgba($materialColor, abs($materialAlpha - .3)) |
|
60% |
|
background: alpha($materialColor, .10) |
|
100% |
|
background: alpha($materialColor, 0) |
