<svg class="PlayButton PlayButton--noMargin" id="" style="" xmlns="http://www.w3.org/2000/svg" width="612" height="612" viewBox="0 0 612 612">
<circle fill="#2BB456" cx="306" cy="306" r="306"/>
<path fill="#fff" d="M262.3 400.4l157.4-85.7L262.3 229v171.4z"/>
</svg>
<svg
class="PlayButton {{modifier}}"
id="{{id}}"
style="{{style}}"
xmlns="http://www.w3.org/2000/svg"
width="612"
height="612"
viewBox="0 0 612 612"
>
{{#if white}}
<path fill="#fff" d="M306 0C137 0 0 137 0 306s137 306 306 306 306-137 306-306S475 0 306 0zm-43.7 400.4V229l157.4 85.7-157.4 85.7z"/>
{{else}}
<circle fill="#2BB456" cx="306" cy="306" r="306"/>
<path fill="#fff" d="M262.3 400.4l157.4-85.7L262.3 229v171.4z"/>
{{/if}}
</svg>
{
"id": null,
"modifier": "PlayButton--noMargin",
"style": null,
"white": null
}
.PlayButton {
@include Elevation("Button", $hasShadow: false, $withZindex: true);
display: block;
width: 4rem;
height: 4rem;
margin: 3rem auto;
border-radius: 50%;
cursor: pointer;
transition: opacity $transition-time-default $transition-move-default $transition-time-500;
fill-opacity: .85;
&._ipad {
position: absolute;
top: -7%;
right: 0;
bottom: 0;
left: 2%;
margin: auto;
}
&--small,
&._small {
width: 3rem;
height: 3rem;
}
&:hover {
@include ZIndex("Button");
transform: translateY(-2px);
}
&:active {
transform: translateY(-3px);
}
}
.PlayButton--noMargin {
margin: 0;
}
.PlayButton-wrapper {
position: relative;
.PlayButton {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
transform: translateY(-50%);
}
}
There are no notes for this item.