600 West

Playbutton: Default 

<svg class="PlayButton " 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": null,
  "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.