V6 Clearleft Patterns

Combo Button: Default 

<a class="combo-button focus" href="#">
    <span class="">Tickets now on sale</span>
    <div>

        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
        </svg>
    </div>
</a>
 
{% set hasTheme = theme is defined and theme is not empty %}
{% set hasLargeLink = largeLink is defined and largeLink %}
{% set hideText = hideText is defined and hideText %}

<a class="combo-button focus{{ hasTheme ? ' combo-button--' ~ theme }}{{
  hasLargeLink
    ? ' combo-button--large-link'
  }}{{ hideText ? ' combo-button--vh' }}"
  href="{{ link }}">
  <span class="{{ hideText ? 'vh' }}">{{ text }}</span>
  <div>
    {% include '@icon' with {
      id: 'arrow-right',
      size: 's'
    } %}
  </div>
</a>
 
{
  "text": "Tickets now on sale",
  "link": "#"
}
  • Content: 
    .combo-button {
  --background: var(--blue);
  --hover-background: var(--dark);

  --colour: var(--blue);
  --hover-colour: var(--dark);

  --hover-arrow-colour: var(--white);
  --arrow-colour: var(--white);

  display: inline-flex;
  align-items: center;
  color: var(--colour);

  span {
    color: var(--colour);
    transition: color 0.5s var(--smooth-ease);
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    margin-right: 1.2rem;
    background-color: var(--background);
    transition: all 0.5s var(--smooth-ease);
    overflow: hidden;
    order: -1;
    flex-shrink: 0;

    @media screen and (min-width: 50rem) {
      width: 52px;
      height: 52px;
    }

    &:after {
      transform: scale(1);
      transform-origin: left center;
      content: '';
      position: absolute;
      top: 0;
      right: -2px;
      left: -2px;
      bottom: 0;
      width: calc(100% + 4px);
      height: 100%;
      transform: scaleX(0);
      transform-origin: right center;
      background-color: var(--hover-background);
      transition: transform 0.3s ease, color 0.1s ease;
      z-index: 0;
    }

    svg {
      z-index: 1;
      color: var(--arrow-colour);
      transition: color 0.5s var(--smooth-ease);
    }
  }

  &--large-link:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }

  &--vh div {
    margin: 0;
  }

  &:hover {
    span {
      color: var(--hover-colour);
    }

    div {
      &:after {
        transform: scale(1);
        transform-origin: left center;
      }

      svg {
        color: var(--hover-arrow-colour, var(--hover-colour));
      }
    }
  }
}

.combo-button--green {
  --background: var(--green);
  --hover-background: var(--white);

  --colour: var(--green);
  --hover-colour: var(--white);

  --arrow-colour: var(--dark);
  --hover-arrow-colour: var(--dark);
}

.combo-button--dark-red {
  --background: var(--dark);
  --hover-background: var(--white);

  --colour: var(--dark);
  --hover-colour: var(--dark);

  --hover-arrow-colour: #de5867;
  --arrow-colour: var(--white);
}
  • URL: /components/raw/combo-button/combo-button.css
  • Filesystem Path: src/templates/components/combo-button/combo-button.css
  • Size: 2.2 KB

No notes defined.