PDJ Brandbox

action: ghost - on light 

<a href="#" class="action action--ghost 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}}
 
type: ghost
tint: on-light
url: '#'
label: Buy now
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.