<a href="#" class="action action--normal action--on-light action--disabled" disabled>
    <span class="action__label">Out of stock</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: normal
tint: on-light
url: '#'
label: Out of stock
disabled: true
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.