No notes defined.
<!-- Default -->
<nav class="contentSwitcher">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<button onclick="alert('Option 1 wurde geklickt!')"><span class="contentSwitcher-label">Option 1</span></button>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 2 wurde geklickt!')"><span class="contentSwitcher-label">Option Zwei</span></button>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 3 wurde geklickt!')"><span class="contentSwitcher-label">Eine dritte Option</span></button>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 4 wurde geklickt!')" disabled="disabled"><span class="contentSwitcher-label">Nicht verfügbar</span></button>
</li>
</ul>
</nav>
<!-- Links -->
<nav class="contentSwitcher">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<a href="#"><span class="contentSwitcher-label">Option 1</span></a>
</li>
<li class="contentSwitcher-item">
<a href="#"><span class="contentSwitcher-label">Option Zwei</span></a>
</li>
<li class="contentSwitcher-item">
<a href="#"><span class="contentSwitcher-label">Eine dritte Option</span></a>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 4 wurde geklickt!')" disabled="disabled"><span class="contentSwitcher-label">Nicht verfügbar</span></button>
</li>
</ul>
</nav>
<!-- Demo Only -->
<section class="doc-section">
<h2 class="doc-section-title">Demo</h2>
<nav class="contentSwitcher" data-content-switcher-target="contentSwitcher-demo">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<button data-action="switch" data-index="0"><span class="contentSwitcher-label">Option 1</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="1"><span class="contentSwitcher-label">Option Zwei</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="2"><span class="contentSwitcher-label">Eine dritte Option</span></button>
</li>
</ul>
</nav>
<div id="contentSwitcher-demo" data-content-switcher-animated="true" class="doc-box" style="margin-top: var(--sp-component);">
<div data-content-switcher-item="0">
<div class="contentSwitcher-wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="1" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="2" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</section>
<div class="--sp-section" style="min-height: 100vh;">
<div class="richtextBlock">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<!-- Doc Only -->
<section class="doc-section">
<h2 class="doc-section-title">Variants</h2>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Buttons</h2>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.contentSwitcher, .doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="transparent">transparent</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="" style="overflow: hidden;">
<nav class="contentSwitcher">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<button onclick="alert('Option 1 wurde geklickt!')"><span class="contentSwitcher-label">Option 1</span></button>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 2 wurde geklickt!')"><span class="contentSwitcher-label">Option Zwei</span></button>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 3 wurde geklickt!')"><span class="contentSwitcher-label">Eine dritte Option</span></button>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 4 wurde geklickt!')" disabled="disabled"><span class="contentSwitcher-label">Nicht verfügbar</span></button>
</li>
</ul>
</nav>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Links</h2>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.contentSwitcher, .doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="transparent">transparent</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="" style="overflow: hidden;">
<nav class="contentSwitcher">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<a href="#"><span class="contentSwitcher-label">Option 1</span></a>
</li>
<li class="contentSwitcher-item">
<a href="#"><span class="contentSwitcher-label">Option Zwei</span></a>
</li>
<li class="contentSwitcher-item">
<a href="#"><span class="contentSwitcher-label">Eine dritte Option</span></a>
</li>
<li class="contentSwitcher-item">
<button onclick="alert('Option 4 wurde geklickt!')" disabled="disabled"><span class="contentSwitcher-label">Nicht verfügbar</span></button>
</li>
</ul>
</nav>
</div>
</div>
</section>
<section class="doc-section">
<h2 class="doc-section-title">Demo</h2>
<nav class="contentSwitcher" data-content-switcher-target="contentSwitcher-demo">
<ul class="contentSwitcher-list">
<li class="contentSwitcher-item" aria-selected="true">
<button data-action="switch" data-index="0"><span class="contentSwitcher-label">Option 1</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="1"><span class="contentSwitcher-label">Option Zwei</span></button>
</li>
<li class="contentSwitcher-item">
<button data-action="switch" data-index="2"><span class="contentSwitcher-label">Eine dritte Option</span></button>
</li>
</ul>
</nav>
<div id="contentSwitcher-demo" data-content-switcher-animated="true" class="doc-box" style="margin-top: var(--sp-component);">
<div data-content-switcher-item="0">
<div class="contentSwitcher-wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="1" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div data-content-switcher-item="2" aria-hidden="true">
<div class="contentSwitcher-wrapper">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</section>
<div class="--sp-section" style="min-height: 100vh;">
<div class="richtextBlock">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<!-- Default -->
<nav class="contentSwitcher{{#modifier}} {{.}}{{/modifier}}"{{#target}} data-content-switcher-target="{{.}}"{{/target}}{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#if items}}
<ul class="contentSwitcher-list">
{{#items}}
<li class="contentSwitcher-item"{{#if is-current}} aria-selected="true"{{/if}}>
{{#if url}}<a href="{{url}}"{{else}}<button{{/if}}{{#if action}} data-action="{{action}}" data-index="{{@index}}"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}{{#if is-disabled}} disabled="disabled"{{/if}}><span class="contentSwitcher-label">{{{label}}}</span>{{#if url}}</a>{{else}}</button>{{/if}}
</li>
{{/items}}
</ul>
{{/if}}
</nav>
<!-- Links -->
<nav class="contentSwitcher{{#modifier}} {{.}}{{/modifier}}"{{#target}} data-content-switcher-target="{{.}}"{{/target}}{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#if items}}
<ul class="contentSwitcher-list">
{{#items}}
<li class="contentSwitcher-item"{{#if is-current}} aria-selected="true"{{/if}}>
{{#if url}}<a href="{{url}}"{{else}}<button{{/if}}{{#if action}} data-action="{{action}}" data-index="{{@index}}"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}{{#if is-disabled}} disabled="disabled"{{/if}}><span class="contentSwitcher-label">{{{label}}}</span>{{#if url}}</a>{{else}}</button>{{/if}}
</li>
{{/items}}
</ul>
{{/if}}
</nav>
<!-- Demo Only -->
<section class="doc-section">
<h2 class="doc-section-title">Demo</h2>
{{#contentswitcher}}
{{render '@contentswitcher' (contextData '@contentswitcher' this) merge=true}}
{{/contentswitcher}}
<div id="{{id}}" data-content-switcher-animated="true" class="doc-box" style="margin-top: var(--sp-component);">
{{#contentswitcher.items}}
<div data-content-switcher-item="{{@index}}" {{#unless is-current}} aria-hidden="true"{{/unless}}>
<div class="contentSwitcher-wrapper">
{{#content}}{{{.}}}{{/content}}
</div>
</div>
{{/contentswitcher.items}}
</div>
</section>
<div class="--sp-section" style="min-height: 100vh;">
{{render '@snippet--richtextblock'}}
</div>
<!-- Doc Only -->
<section class="doc-section">
<h2 class="doc-section-title">Variants</h2>
{{#variants}}
<div class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
{{#if ../themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.contentSwitcher, .doc-variant-samples', value: this.value});">
{{#../themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/../themes}}
</select>
</label>
{{/if}}
</div>
</header>
<div class="doc-variant-samples" data-theme="{{theme}}" style="overflow: hidden;">
{{#variant}}
{{render '@contentswitcher' (contextData '@contentswitcher' this) merge=true}}
{{/variant}}
</div>
</div>
{{/variants}}
</section>
{{#demo}}
{{render '@contentswitcher--demo-only' (contextData '@contentswitcher' this) merge=true}}
{{/demo}}
/* Default */
{
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": "alert('Option 1 wurde geklickt!')"
},
{
"label": "Option Zwei",
"onclick": "alert('Option 2 wurde geklickt!')"
},
{
"label": "Eine dritte Option",
"onclick": "alert('Option 3 wurde geklickt!')"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
]
}
/* Links */
{
"items": [
{
"is-current": true,
"label": "Option 1",
"url": "#"
},
{
"label": "Option Zwei",
"url": "#"
},
{
"label": "Eine dritte Option",
"url": "#"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
]
}
/* Demo Only */
{
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": "alert('Option 1 wurde geklickt!')"
},
{
"label": "Option Zwei",
"onclick": "alert('Option 2 wurde geklickt!')"
},
{
"label": "Eine dritte Option",
"onclick": "alert('Option 3 wurde geklickt!')"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
],
"id": "contentSwitcher-demo",
"contentswitcher": {
"target": "contentSwitcher-demo",
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": null,
"action": "switch",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Option Zwei",
"onclick": null,
"action": "switch",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Eine dritte Option",
"onclick": null,
"action": "switch",
"content": [
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
}
]
}
}
/* Doc Only */
{
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": "alert('Option 1 wurde geklickt!')"
},
{
"label": "Option Zwei",
"onclick": "alert('Option 2 wurde geklickt!')"
},
{
"label": "Eine dritte Option",
"onclick": "alert('Option 3 wurde geklickt!')"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
],
"themes": [
"default",
"transparent",
"dark"
],
"variants": [
{
"title": "Buttons",
"variant": {
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": "alert('Option 1 wurde geklickt!')"
},
{
"label": "Option Zwei",
"onclick": "alert('Option 2 wurde geklickt!')"
},
{
"label": "Eine dritte Option",
"onclick": "alert('Option 3 wurde geklickt!')"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
]
}
},
{
"title": "Links",
"variant": {
"items": [
{
"is-current": true,
"label": "Option 1",
"url": "#"
},
{
"label": "Option Zwei",
"url": "#"
},
{
"label": "Eine dritte Option",
"url": "#"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
]
}
}
],
"demo": {
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": "alert('Option 1 wurde geklickt!')"
},
{
"label": "Option Zwei",
"onclick": "alert('Option 2 wurde geklickt!')"
},
{
"label": "Eine dritte Option",
"onclick": "alert('Option 3 wurde geklickt!')"
},
{
"is-disabled": true,
"label": "Nicht verfügbar",
"onclick": "alert('Option 4 wurde geklickt!')"
}
],
"id": "contentSwitcher-demo",
"contentswitcher": {
"target": "contentSwitcher-demo",
"items": [
{
"is-current": true,
"label": "Option 1",
"onclick": null,
"action": "switch",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Option Zwei",
"onclick": null,
"action": "switch",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Eine dritte Option",
"onclick": null,
"action": "switch",
"content": [
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
}
]
}
}
}
import contentSwitcher from "./_contentSwitcher.script.js";
contentSwitcher.init();
export default (function (){
const defaults = {
selectors: {
switcher: 'content-switcher-target',
trigger: '[data-action="switch"]',
item: 'content-switcher-item',
},
};
function init() {
const elements = document.querySelectorAll(`[data-${defaults.selectors.switcher}]`);
elements.forEach((element) => {
new ContentSwitcher(element);
});
}
const ContentSwitcher = function(container) {
if (container.dataset[camelCase(defaults.selectors.switcher)] === "") {
console.error(`contentSwitcher: No target ID defined!`);
return false;
}
const id = container.dataset[camelCase(defaults.selectors.switcher)],
target = document.getElementById(id);
if (! target) {
console.error(`contentSwitcher: No target with ID "${id}" found!`);
return false;
}
this.container = container;
this.target = target;
this.duration = 0;
if (this.target.dataset.contentSwitcherAnimated === "true") {
if (this.target.computedStyleMap) {
const durationStyleMap = this.target.computedStyleMap().get('transition-duration');
if (typeof durationStyleMap.unit !== "string" || durationStyleMap.unit !== "s") {
console.error(`contentSwitcher: Transition duration property not valid!`);
} else {
this.duration = durationStyleMap.value * 1000;
}
} else {
const style = window.getComputedStyle(this.target);
let duration = style.getPropertyValue('transition-duration');
if (typeof duration !== "string" || ! duration.match(/s$/)) {
console.error(`contentSwitcher: Transition duration property not valid!`);
} else {
duration = duration.replace(/s$/, "");
const milliseconds = parseFloat(duration) * 1000;
this.duration = milliseconds;
}
}
}
this.items = [];
const items = this.target.querySelectorAll(`[data-${defaults.selectors.item}]`);
let currentIsSet = false;
items.forEach((item) => {
if (item.dataset[camelCase(defaults.selectors.item)] === "") {
console.error(`contentSwitcher: No index in item defined!`);
return false;
}
const index = Number(item.dataset[camelCase(defaults.selectors.item)]);
const isCurrent = ! item.ariaHidden;
if (isCurrent && currentIsSet) {
console.warn(`contentSwitcher: More than one item is set as current item!`);
item.ariaHidden = true;
}
currentIsSet = isCurrent;
this.items[index] = {
container: item,
index: index,
};
});
if (! currentIsSet && this.items.length >= 1) {
this.items[0].container.ariaHidden = false;
}
this.triggers = [];
const triggers = this.container.querySelectorAll(defaults.selectors.trigger);
triggers.forEach((trigger) => {
if (typeof trigger.dataset.index === "undefined" || trigger.dataset.index === "") {
console.error(`contentSwitcher: No index in trigger defined!`);
return false;
}
const index = Number(trigger.dataset.index);
if (typeof this.items[index] !== "object") {
console.error(`contentSwitcher: No item with index ${index} found!`);
return false;
}
trigger.addEventListener("click",
(event) => {
event.preventDefault();
this.switch(index);
}
);
this.triggers.push({
container: trigger,
index: index,
});
});
}
ContentSwitcher.prototype.switch = function(index) {
if (typeof this.timeout !== "undefined") {
clearTimeout(this.timeout);
}
function getContentBoxHeight(element) {
const style = window.getComputedStyle(element),
paddingTop = parseFloat(style.paddingTop),
paddingBottom = parseFloat(style.paddingBottom),
contentBoxHeight = element.clientHeight - (paddingTop + paddingBottom);
return Math.round(contentBoxHeight);
}
const height = this.target.offsetHeight,
padding = height - getContentBoxHeight(this.target);
this.target.style.height = `${height}px`;
this.triggers.forEach((trigger) => {
trigger.container.parentElement.setAttribute("aria-selected", trigger.index === index);
});
this.items.forEach((item) => {
item.container.setAttribute("aria-hidden", true);
});
this.timeout = setTimeout(
() => {
this.predictInnerHeight(this.items[index]).then((innerHeight) => {
const offsetHeight = innerHeight + padding;
this.target.style.height = `${offsetHeight}px`;
this.items[index].container.setAttribute("aria-hidden", false);
this.timeout = setTimeout(
() => {
this.target.style.height = null;
},
this.duration
);
});
},
this.duration
);
}
ContentSwitcher.prototype.predictInnerHeight = function(item) {
return new Promise((resolve, reject) => {
// Item height
item.container.style.visibility = "hidden";
item.container.style.transitionDuration = "0s";
item.container.setAttribute("aria-hidden", false);
const height = item.container.offsetHeight;
setTimeout(() => {
item.container.setAttribute("aria-hidden", true);
setTimeout(() => {
item.container.style.visibility = null;
item.container.style.transitionDuration = null;
resolve(height);
}, 10);
}, 10);
});
}
function camelCase(input) {
return input.toLowerCase().replace(/-(.)/g, (match, capture) => {
return capture.toUpperCase();
});
}
return {
init: init,
}
})();
$contentSwitcher_border-width: var(--bw-large) !default;
$contentSwitcher_border-radius: var(--br-large) !default;
$contentSwitcher_styles: (
background-color: $_text-color,
) !default;
$contentSwitcher_item_styles: (
padding: $button_padding,
font-weight: $_font-weight--bold,
background-color: var(--button-color, #{$_GRAY-900}),
color: $_page-color,
transition-duration: $_transition-duration--out,
transition-property: (color, background),
) !default;
$contentSwitcher_item_states: (
default: $contentSwitcher_item_styles,
hover: map.get($button-states--alt, hover),
focus: $_focus_styles,
active: map.get($button-states--alt, active),
disabled: (
color: var(--label-color--disabled, #{invert($_ACTION-COLOR--DISABLED)}),
),
current: (
background-color: $_page-color,
color: $_text-color,
),
) !default;
@import "_contentSwitcher.settings";
@import "_contentSwitcher.styles";
%contentSwitcher {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: var(--sp-large);
padding-bottom: var(--sp-large);
@include full-width-backdrop();
a,
button {
&[disabled],
&[aria-disabled=true],
&.disabled {
}
}
&[data-theme="transparent"] {
padding-top: 0;
padding-bottom: 0;
&::before {
content: none;
}
}
[data-theme="dark"] &,
&[data-theme="dark"] {
--label-color--disabled: #{$_ACTION-COLOR--DISABLED};
--button-color: #{$_BACKDROP-COLOR};
}
@include not-on-desktop(){
&-item {
width: 100%;
button {
width: 100%;
}
}
}
}
$contentSwitcher_border-width: 4px !default;
$contentSwitcher_border-radius: var(--br) !default;
$contentSwitcher_styles: (
background-color: $_backdrop-color,
) !default;
$contentSwitcher_item_styles: (
padding: $button_padding,
color: $_text-color,
transition-duration: $_transition-duration--out,
transition-property: (color, background),
) !default;
$contentSwitcher_item_states: (
default: $contentSwitcher_item_styles,
hover: map.get($button-states, hover),
focus: $_focus_styles,
active: map.get($button-states, active),
disabled: (
color: $_action-color--disabled,
),
current: (
background-color: $_text-color,
color: $_page-color,
),
) !default;
%contentSwitcher {
@include stack-spacing(component);
&-list {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
flex-wrap: wrap;
gap: $contentSwitcher_border-width;
padding: #{$contentSwitcher_border-width};
border-radius: calc(#{$contentSwitcher_border-radius} + #{$contentSwitcher_border-width});
@include styles($contentSwitcher_styles);
}
&-item[aria-selected="true"] {
a,
button {
pointer-events: none;
@include state-styles($contentSwitcher_item_states, current);
}
}
a,
button {
color: inherit;
text-decoration: inherit;
display: block;
border-radius: $contentSwitcher_border-radius;
user-select: none;
@include styles($contentSwitcher_item_styles);
@include action-states($contentSwitcher_item_states);
&[onclick]:not(:disabled) {
cursor: pointer;
}
}
&-label {
}
}
.contentSwitcher {
@extend %contentSwitcher;
&-list {
@extend %contentSwitcher-list;
}
&-item {
@extend %contentSwitcher-item;
}
&-label {
@extend %contentSwitcher-label;
}
}
.contentSwitcher-wrapper {
$bleeding: 24px; // To prevent overflowing content (e.g. box shadows) from being cut off
padding: $bleeding;
margin: (-1 * $bleeding);
overflow: hidden;
opacity: 1;
transition: inherit;
transition-property: opacity;
> *:first-child {
margin-top: 0 !important;
}
}
[data-content-switcher-item] {
margin-top: 0 !important;
&[aria-hidden="true"] {
display: none;
.contentSwitcher-wrapper {
opacity: 0;
}
}
}
[data-content-switcher-animated="true"] {
transition-duration: 200ms;
transition-property: height;
overflow: hidden;
[data-content-switcher-item] {
display: grid;
grid-template-rows: 1fr;
transition: inherit;
transition-delay: 0;
transition-property: grid-template-rows;
transition-timing-function: easing(cubic);
&[aria-hidden="true"] {
grid-template-rows: 0fr;
}
}
}