PDJ Brandbox

action: icon right 

<a href="#" class="action action--normal action--on-light">
    <span class="action__label">Buy online</span>

    <span class="action__icon">
        <svg class="icon-external" viewBox="0 0 32 32">
            <path fill="currentColor" d="M20 0l3.2 3.2H1.6C.8 3.2 0 4 0 4.96V30.4c0 .8.8 1.6 1.6 1.6h24.8c.96 0 1.6-.8 1.6-1.76V8.48l.16-.16 3.84 4V0H20zm4.8 28.64H3.36V6.56h17.76l-12 12.32 4.48 4.48 11.2-11.52v16.8z" />
        </svg>
    </span>

    <span class="action__bg"></span>
</a>
 
<a href="{{ url }}"{{#if target}} target="{{ target }}"{{/if}} class="action action--{{ type }} action--{{ tint }}{{#if disabled}} action--disabled{{/if}}"{{#if disabled}} disabled{{/if}}>
  <span class="action__label">{{ label }}</span>

  <span class="action__icon">
    {{> @icon-external }}
  </span>

  <span class="action__bg"></span>
</a>
 
type: normal
tint: on-light
url: '#'
label: Buy online
disabled: false
class: ''
target: false
  • Content: 
    button {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

.action {
  transition: color 250ms, border-color 250ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--atom-height);
  padding: 0 var(--gap--8);
  overflow: hidden;
  color: white;
  text-decoration: none;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;

  @media (min-width: 750px) {
    min-width: 160px !important;
  }

  & > *:not(.action__bg) {
    flex: 0 0 auto;
    margin-left: var(--gap--2);

    &:first-child {
      margin-left: 0;
    }
  }

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

  &.action--icon {
    width: var(--atom-height);
    min-width: 0;
    padding: 0;
  }
}

.action__bg {
  transition: background-color 250ms;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  margin: 0;
  border: 1px solid transparent;
}

.action__icon {
  position: relative;
  z-index: 2;
  display: block;
}

.action__label {
  position: relative;
  z-index: 2;
  color: inherit;
  font-family: var(--font--special);
  font-size: var(--p--1);

  .action--disabled &,
  .action[disabled]:not([disabled='false']) & {
    opacity: .2;
  }
}
  • URL: /components/raw/action/action.scss
  • Filesystem Path: ../src/02_atoms/action/action.scss
  • Size: 1.3 KB

No notes defined.