PDJ Brandbox

icon-media 

<span class="icon-media">
    <span class="icon-media__inner">
        <span class="icon-media__pause">
            <svg class="icon-media__play" xmlns="http://www.w3.org/2000/svg" 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>
 
<span class="icon-media">
  <span class="icon-media__inner">
    <span class="icon-media__pause">
      <svg class="icon-media__play" xmlns="http://www.w3.org/2000/svg" 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>
 
/* No context defined. */
  • Content: 
    .icon-media {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--color--neutrals-0);
}

.icon-media__inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.icon-media__pause {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
}

.icon-media__pause:before,
.icon-media__pause:after {
  transition: height 150ms;
  display: block;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background-color: currentColor;
  content: '';

  .is-playing & {
    transition: height 150ms 100ms;
    height: 16px;
  }
}

.icon-media__pause:after {
  margin-left: 6px;
}

.icon-media__play {
  transition: transform 150ms 100ms, opacity 150ms 100ms;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 1px;

  .is-playing & {
    transition: transform 150ms, opacity 150ms;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
  • URL: /components/raw/icon-media/icon-media.scss
  • Filesystem Path: ../src/02_atoms/icon/icon-media/icon-media.scss
  • Size: 1.2 KB

No notes defined.