<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
}
  • Content:
    .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%);
        }
    }
    
  • URL: /components/raw/playbutton/PlayButton.scss
  • Filesystem Path: components/atoms/PlayButton/PlayButton.scss
  • Size: 975 Bytes

There are no notes for this item.