PDJ Brandbox

action 

<a href="#" target="_blank" class="action action--normal action--on-light">
    <span class="action__label">Buy now</span>
    <span class="action__bg"></span>
</a>
 
{{#if buttonType }}

<button type="{{ buttonType }}" class="{{#if class}}{{ class }} {{/if}}action action--{{ type }} action--{{ tint }}{{#if disabled}} action--disabled{{/if}}"{{#if disabled}} disabled{{/if}}{{#if modal}} data-modal="{{ modal }}"{{/if}}>
  <span class="action__label">{{ label }}</span>
  <span class="action__bg"></span>
</button>

{{else}}

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

{{/if}}
 
/* No context defined. */
  • Content: 
    .action--ghost.action--on-light {
  color: var(--color--neutrals-10);

  .action__bg {
    border-color: var(--color--neutrals-10);
    background-color: transparent;
  }
}

.action--ghost.action--on-light:hover,
.action--ghost.action--on-light:focus {
  color: var(--color--neutrals-0);

  .action__bg {
    border-color: var(--color--neutrals-10);
    background-color: var(--color--neutrals-10);
  }
}

.action--ghost.action--on-light.action--disabled,
.action--ghost[disabled]:not([disabled='false']).action--on-light {
  color: var(--color--neutrals-10);
  pointer-events: none;

  .action__bg {
    border-color: var(--color--disabled);
    background-color: transparent;
    opacity: .66;
  }
}

.action--ghost.action--on-dark {
  color: var(--color--neutrals-0);

  .action__bg {
    border-color: var(--color--neutrals-0);
    background-color: transparent;
  }
}

.action--ghost.action--on-dark:hover,
.action--ghost.action--on-dark:focus {
  color: var(--color--neutrals-10);

  .action__bg {
    border-color: var(--color--neutrals-0);
    background-color: var(--color--neutrals-0);
  }
}

.action--ghost.action--on-dark.action--disabled,
.action--ghost[disabled]:not([disabled='false']).action--on-dark {
  color: var(--color--neutrals-0);
  pointer-events: none;

  .action__bg {
    border-color: rgba(#FFF, .2);
    background-color: transparent;
    opacity: .66;
  }
}
  • URL: /components/raw/action/action--ghost.scss
  • Filesystem Path: ../src/02_atoms/action/action--ghost.scss
  • Size: 1.4 KB
  • Content: 
    .action--normal.action--on-light {
  color: var(--color--neutrals-0);

  .action__bg {
    border-color: var(--color--action);
    background-color: var(--color--action);
  }
}

.action--normal.action--on-light:hover,
.action--normal.action--on-light:focus {
  .action__bg {
    border-color: var(--color--hover);
    background-color: var(--color--hover);
  }
}

.action--normal.action--on-light.action--disabled,
.action--normal[disabled]:not([disabled='false']).action--on-light {
  pointer-events: none;

  .action__bg {
    border-color: var(--color--disabled);
    background-color: var(--color--disabled);
    opacity: .66;
  }
}

.action--normal.action--on-dark {
  color: var(--color--neutrals-10);

  .action__bg {
    border-color: var(--color--neutrals-0);
    background-color: var(--color--neutrals-0);
  }
}

.action--normal.action--on-dark:hover,
.action--normal.action--on-dark:focus {
  color: var(--color--neutrals-10);

  .action__bg {
    border-color: rgba(#FFF, .9);
    background-color: rgba(#FFF, .9);
  }
}

.action--normal.action--on-dark.action--disabled,
.action--normal[disabled]:not([disabled='false']).action--on-dark {
  color: var(--color--neutrals-0);
  pointer-events: none;

  .action__bg {
    border-color: var(--color--disabled);
    background-color: var(--color--disabled);
    opacity: .66;
  }
}
  • URL: /components/raw/action/action--normal.scss
  • Filesystem Path: ../src/02_atoms/action/action--normal.scss
  • Size: 1.3 KB
  • 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.