@e-fellows/website-2022

Button: Standard 

<a class="button u-underline" href="#">Button-Text</a>
 
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set tag = link ? 'a' : 'button' -%}

<{{ tag }} {{ html_attributes({
  class: {
    'button': true,
    'button--outline': outline ?? false,
    'u-underline': true,
    'u-overlay-link': overlay ?? false,
  },
  type: not link ? (type ??? 'button'),
  title: title ?? false,
  disabled: disabled ?? false,
  target: target ?? false,
  href: link,
  id: id ?? false,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
  {{- text -}}
</{{ tag }}>
 
{
  "link": "#",
  "text": "Button-Text"
}
  • Content: 
    :root {
  --button-background-color: var(--color-orange);
  --button-background-color-active: var(--color-white);
  --button-border-color: var(--button-background-color);
  --button-border-size: 4px;
  --button-color: var(--color-midnight);
  --button-color-active: var(--color-midnight);
  --button-font-size: 1.6rem;
  --button-height: 6.2rem;
  --button-line-height: 1.2;
  --button-outline-background-color-active: var(--color-orange);
  --button-outline-background-color: transparent;
  --button-outline-border-color: var(--color-orange);
  --button-outline-color: var(--color-midnight);
  --button-outline-color-active: var(--color-midnight);
  --button-width: auto;
}

.button {
  --button-text-height: calc(var(--button-font-size) * var(--button-line-height));

  background-color: var(--button-background-color);
  border: var(--button-border-size) solid var(--button-border-color);
  color: var(--button-color);
  display: inline-flex;
  font-size: var(--button-font-size);
  font-weight: bold;
  inline-size: var(--button-width);
  justify-content: center;
  line-height: var(--button-line-height);
  min-block-size: var(--button-height);
  padding: calc((var(--button-height) - var(--button-text-height)) / 2 - var(--button-border-size)) calc(var(--button-font-size) * 2);
  transition-duration: var(--duration-fast);
  transition-property: background-color, border-color, text-decoration-color;
  user-select: none;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus), .button--active),
  .has-button:is(:hover, :focus-within) &:not([disabled]) {
    --underline-color: currentColor;
    --underline-height: 2px;
    --button-color: var(--button-color-active);
    --button-background-color: var(--button-background-color-active);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.button--outline {
  --button-background-color-active: var(--button-outline-background-color-active);
  --button-background-color: var(--button-outline-background-color);
  --button-border-color: var(--button-outline-border-color);
  --button-color: var(--button-outline-color);
  --button-color-active: var(--button-outline-color-active);
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/1-atoms/button/button.scss
  • Size: 2.2 KB

No notes defined.