No notes defined.
<!-- Default -->
<h2 class="sectionTitle">Ich bin die Sektionsüberschrift</h2>
<!-- Aligned Left -->
<h2 class="sectionTitle is-aligned-left">Ich bin die Sektionsüberschrift</h2>
<!-- Subsection -->
<h3 class="sectionTitle is-subsection">Ich bin die Sektionsüberschrift</h3>
<!-- Documentation only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
<option value="accent">accent</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="" style="padding-top: 0;">
<div style="width: 100%;">
<h2 class="sectionTitle">Ich bin die Sektionsüberschrift</h2>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Aligned Left</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
<option value="accent">accent</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="" style="padding-top: 0;">
<div style="width: 100%;">
<h2 class="sectionTitle is-aligned-left">Ich bin die Sektionsüberschrift</h2>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Subsection</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
<option value="accent">accent</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="" style="padding-top: 0;">
<div style="width: 100%;">
<h3 class="sectionTitle is-subsection">Ich bin die Sektionsüberschrift</h3>
</div>
</div>
</section>
<!-- Default -->
<h2 class="sectionTitle{{#if is-aligned-left}} is-aligned-left{{/if}}{{#modifier}} {{.}}{{/modifier}}">{{{title}}}</h2>
<!-- Aligned Left -->
<h2 class="sectionTitle{{#if is-aligned-left}} is-aligned-left{{/if}}{{#modifier}} {{.}}{{/modifier}}">{{{title}}}</h2>
<!-- Subsection -->
<h3 class="sectionTitle is-subsection{{#modifier}} {{.}}{{/modifier}}">{{{title}}}</h3>
<!-- Documentation only -->
{{#variants}}
<section class="doc-variant"{{#id}} id="{{.}}"{{/id}}>
<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}}
</div>
<div class="doc-variant-configuration">
{{#if themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.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="padding-top: 0;">
{{#samples}}
<div style="width: 100%;">
{{#if ../is-subsection}}
{{render '@sectiontitle--subsection' (contextData '@sectiontitle' this) merge=true}}
{{else}}
{{render '@sectiontitle' (contextData '@sectiontitle' this) merge=true}}
{{/if}}
</div>
{{/samples}}
</div>
</section>
{{/variants}}
/* Default */
{
"title": "Ich bin die Sektionsüberschrift"
}
/* Aligned Left */
{
"title": "Ich bin die Sektionsüberschrift",
"is-aligned-left": true
}
/* Subsection */
{
"title": "Ich bin die Sektionsüberschrift"
}
/* Documentation only */
{
"title": "Ich bin die Sektionsüberschrift",
"variants": [
{
"title": "Default",
"themes": [
"default",
"dark",
"accent"
],
"samples": [
{
"title": "Ich bin die Sektionsüberschrift"
}
]
},
{
"title": "Aligned Left",
"themes": [
"default",
"dark",
"accent"
],
"samples": [
{
"title": "Ich bin die Sektionsüberschrift",
"is-aligned-left": true
}
]
},
{
"title": "Subsection",
"is-subsection": true,
"themes": [
"default",
"dark",
"accent"
],
"samples": [
{
"title": "Ich bin die Sektionsüberschrift"
}
]
}
]
}
@import "_sectionTitle.styles";
%sectionTitle {
text-align: center;
&:not(.is-subsection) {
--border-color: #{map.get($divider_styles, background-color)};
padding-bottom: calc(#{map.get($divider_styles, height)} + var(--sp-small));
background: linear-gradient(to left, var(--border-color), var(--border-color)) center bottom no-repeat;
background-size: map.get($divider_styles, width) map.get($divider_styles, height);
[data-theme="accent"] & {
--border-color: #{$_PAGE-COLOR};
}
}
}
%sectionTitle--aligned-left {
@extend %sectionTitle;
text-align: left;
&:not(.is-subsection) {
background-position: left bottom;
}
}
.sectionTitle.is-aligned-left {
@extend %sectionTitle--aligned-left;
}
%sectionTitle--subsection {
@extend %heading;
padding-bottom: .25em;
border-bottom: var(--bw) solid $_accent-color;
text-align: left;
}
.sectionTitle.is-subsection {
@extend %sectionTitle--subsection;
}
%sectionTitle {
$indent: -.4em;
margin-top: calc(var(--sp-section) + #{$indent});
&--on-backdrop,
.has-backdrop & {
margin-top: $indent;
}
}
%sectionTitle {
@extend %heading--section-title;
}
.sectionTitle {
@extend %sectionTitle;
}