@e-fellows/website-2022

Umschalter 

<a class="toggle toggle--internal" href="#" aria-pressed="false">
    <span class="toggle__indicator"></span>

    <span class="toggle__text u-underline">Ein Umschalter-Button</span>

</a>
 
{% set link = link ?? null %}
{% set showInternal = showInternal ?? false %}
{% set linkType = linkType ?? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, showInternal=showInternal) %}
{% set iconPosition = iconPosition ?? 'before' %}
{% set tag = link ? 'a' : 'button' -%}

<{{ tag }} {{ html_attributes({
  class: {
    'toggle': true,
    ("toggle--#{linkType}"): true,
    'u-overlay-link': overlay ?? false,
  },
  type: not link ? (type ??? 'button'),
  title: title ?? false,
  disabled: disabled ?? false,
  href: link,
  id: id ?? false,
  'aria-pressed': active|default ? 'true' : 'false',
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
  <span class="toggle__indicator"></span>

  {% if icon and iconPosition == 'before' %}
    <span class="toggle__icon">
      {% include '@icon' with { icon: icon } only %}
    </span>
  {% endif %}

  {% if text|default %}
    <span class="toggle__text u-underline">
      {{- text -}}
    </span>
  {% endif %}

  {% if icon and iconPosition == 'after' %}
    <span class="toggle__icon">
      {% include '@icon' with { icon: icon } only %}
    </span>
  {% endif %}
</{{ tag }}>
 
{
  "link": "#",
  "text": "Ein Umschalter-Button"
}
  • Content: 
    .toggle {
  align-items: center;
  color: var(--toggle-color, currentColor);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--toggle-font-size, 1.8rem);
  font-weight: var(--toggle-font-weight, var(--font-weight-semibold));
  gap: 0.5em;
  inline-size: var(--toggle-width, auto);
  text-align: start;
  user-select: none;
}

.toggle:is([aria-pressed='true']) {
  --toggle-pressed: 1;
  --toggle-background-color: var(--toggle-foreground-color--pressed, var(--color-orange));
  --toggle-foreground-color: var(--toggle-foreground-color--pressed, var(--color-white));
  --toggle-border-color: var(--toggle-border-color--pressed, var(--color-orange));
  --toggle-inner-border-color: var(--toggle-inner-border-color--pressed, transparent);
  --toggle-opacity: var(--toggle-opacity--pressed, 1);
}

.toggle__indicator {
  --_toggle-size: var(--toggle-size, 2.8rem);
  --_toggle-inner-padding: var(--toggle-inner-padding, 0.5rem);
  --_toggle-bullet-size: calc(var(--_toggle-size) - var(--_toggle-inner-padding) * 2);

  background-color: var(--toggle-background-color, var(--color-orange-light));
  block-size: var(--_toggle-size);
  border-color: var(--toggle-border-color, var(--color-orange));
  border-radius: calc(var(--_toggle-size) / 2);
  border-style: var(--toggle-border-style, solid);
  border-width: var(--toggle-border-width, 1px);
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  inline-size: calc(var(--_toggle-bullet-size) * 2 + var(--_toggle-inner-padding) * 2);
  margin-inline-end: 0.5em;
  opacity: var(--toggle-opacity, 0.5);
  position: relative;
  transition-property: background-color;

  &::before {
    background-color: var(--toggle-foreground-color, var(--color-white));
    block-size: var(--_toggle-bullet-size);
    border-color: var(--toggle-inner-border-color, var(--color-orange));
    border-radius: 50%;
    border-style: var(--toggle-inner-border-style, solid);
    border-width: var(--toggle-inner-border-width, 1px);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    content: '';
    inline-size: var(--_toggle-bullet-size);
    inset-block-start: calc(var(--_toggle-inner-padding) - var(--toggle-border-width, 1px));
    inset-inline-start: var(--_toggle-inner-padding);
    position: absolute;
    transition-property: background-color, translate;
    translate: calc(var(--toggle-pressed, 0) * 100%) 0;
  }
}

.toggle__text {
  line-height: var(--line-height-default);
}
  • URL: /components/raw/toggle/toggle.scss
  • Filesystem Path: src/components/1-atoms/toggle/toggle.scss
  • Size: 2.4 KB

No notes defined.