Skip to content

Instantly share code, notes, and snippets.

@lucypero
Created March 26, 2018 21:02
Show Gist options
  • Save lucypero/ae23b926df99b3a94ad3ecb04a5fec17 to your computer and use it in GitHub Desktop.
Save lucypero/ae23b926df99b3a94ad3ecb04a5fec17 to your computer and use it in GitHub Desktop.
/**
* Variable declarations
*/
$btn-color: $play-btn-color;
$btn-size : 45px;
$duration : 300ms;
$easing : cubic-bezier(0, 0, .2, 1);
$half-size: ($btn-size / 2);
/**
* Initial set-up
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
/**
* The actual play button
*/
.play-btn {
/** Sizing */
width : $btn-size;
height : $btn-size;
/** Border styling */
border-style: solid;
border-color: transparent $btn-color transparent $btn-color;
border-width: $half-size 0 $half-size $btn-size;
cursor: pointer;
&.stop,
&.to-play {
/** Animate morphing */
transition : transform $duration $easing,
border-top-width $duration $easing,
border-bottom-width $duration $easing,
left $duration $easing;
}
&.stop {
/** Morph to a stop button */
transform : rotate(90deg);
border-width: 0 0 0 $btn-size;
}
&.to-play {
/** Morph back from a stop button to a play button */
transform : rotate(180deg);
border-width: $half-size $btn-size $half-size 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment