PDJ Brandbox

loadmore 

<a href="/media/data.json?page&#x3D;" class="loadmore">
    <span class="loadmore__icon">
        <span class="icon-plus">
            <span class="icon-plus__inner"></span>
        </span>
    </span>
    <span class="loadmore__label">load more media</span>
</a>
 
<a href="{{ url }}" class="loadmore{{#if class}} loadmore--{{ class }}{{/if}}"{{#if data}} {{{ data }}}{{/if}}>
  <span class="loadmore__icon">
    {{> @icon-plus }}
  </span>
  <span class="loadmore__label">{{ label }}</span>
</a>
 
url: /media/data.json?page=
label: load more media
  • Content: 
    .loadmore {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--atom-height);
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
    color: inherit;
  }

  .is-loading & {
    pointer-events: none;
  }
}

.loadmore:before,
.loadmore:after {
  transition: transform 250ms;
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color--neutrals-4);
  backface-visibility: hidden;
}

.loadmore:before {
  top: 0;
}

.loadmore:after {
  bottom: 0;
}

.loadmore__icon {
  transition: transform 250ms;
  flex: none;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--gap--2);

  .loadmore:hover & {
    transform: rotate(90deg);
  }

  .is-loading & {
    backface-visibility: hidden;
    animation: spin 1s infinite linear;
  }
}

.loadmore__label {
  transition: opacity 250ms;
  flex: 0 0 auto;
  font-size: var(--p--1);

  .is-loading & {
    opacity: .5;
  }
}

@keyframes spin {
  0% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.1) rotate(180deg);
  }

  100% {
    transform: scale(1) rotate(360deg);
  }
}
  • URL: /components/raw/loadmore/loadmore.scss
  • Filesystem Path: ../src/02_atoms/loadmore/loadmore.scss
  • Size: 1.3 KB

No notes defined.