@zplane-web/craft-licensing

Toggle 

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

    <span class="toggle__text u-underline">A toggle button</span>

</a>
 
{% set link = link | default(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({
  id: id ?? false,
  class: {
    'toggle': true,
    'u-overlay-link': overlay ?? false,
  },
  type: not link ? (type ??? 'button'),
  title: title ?? false,
  disabled: disabled ?? false,
  'aria-pressed': active|default ? 'true' : 'false',
  'data-toggle-type': linkType,
}, 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": "A toggle button"
}
  • Content: 
    .toggle {
  --_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);
  --_toggle-active: 0;
  --_toggle-background-color: var(--toggle-background-color, var(--color-gray-200));
  --_toggle-foreground-color: var(--toggle-foreground-color, var(--color-gray-600));

  align-items: center;
  color: var(--toggle-color, inherit);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--toggle-font-size, inherit);
  gap: 0.5em;
  inline-size: var(--toggle-width, auto);
  text-align: start;
  user-select: none;

  &:is([aria-pressed='true']) {
    --_toggle-active: 1;
    --_toggle-background-color: var(--_toggle-background-color--active, var(--color-green-100));
    --_toggle-foreground-color: var(--_toggle-foreground-color--active, var(--color-green-700));
  }
}

.toggle__indicator {
  background-color: var(--_toggle-background-color);
  block-size: var(--_toggle-size);
  border-radius: calc(var(--_toggle-size) / 2);
  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;
  position: relative;
  transition-property: background-color;

  &::before {
    background-color: var(--_toggle-foreground-color);
    block-size: var(--_toggle-bullet-size);
    border-radius: 50%;
    content: '';
    inline-size: var(--_toggle-bullet-size);
    inset-block-start: var(--_toggle-inner-padding);
    inset-inline-start: var(--_toggle-inner-padding);
    position: absolute;
    transition-property: background-color, translate;
    translate: calc(var(--_toggle-active) * 100%) 0;
  }
}

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

No notes defined.