PDJ Brandbox

icon-play 

<span class="icon-play">
    <span class="icon-play__inner"></span>
    <span class="icon-play__icon">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
        </svg>
    </span>
</span>
 
<span class="icon-play">
  <span class="icon-play__inner"></span>
  <span class="icon-play__icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
      <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z"/>
    </svg>
  </span>
</span>
 
/* No context defined. */
  • Content: 
    .icon-play {
  transition: transform 250ms;
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  background-color: rgba(#fff, .2);
  box-shadow: 0 0 0 2px rgba(#fff, .4);

  .video-player:active &,
  .banner:active &,
  &:active {
    transform: scale(.9);
  }
}

.icon-play__inner {
  transition: transform 250ms;
  position: absolute;
  display: block;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  border-radius: 50%;
  background-color: rgba(#fff, 1);

  .video-player:hover &,
  .banner:hover &,
  .icon-play:hover & {
    transform: scale(1.1);
  }
}

.icon-play__icon {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  display: block;
  width: 10%;
  margin-left: 2%;
  color: var(--color--neutrals-7);
}
  • URL: /components/raw/icon-play/icon-play.scss
  • Filesystem Path: ../src/02_atoms/icon/icon-play/icon-play.scss
  • Size: 833 Bytes

No notes defined.