Sonstiges¶

Unter Sonstiges fällt jede Einstellung, welche so speziell ist, dass sie keiner Kategorie zugeordnet werden konnte.

Schatten / Schlagschatten¶

$box-shadow

$box-shadow

Über diese Einstellung kann die in den Elementen und Komponenten vorhandene Einstellung

Box -> Shadow

eingestellt werden, sodass der Schlagschatten¹ beeinflusst werden kann.

Verfügbare (S)CSS-Variablen

SCSS

$box-shadow

CSS

var(--box-shadow)

Text-Highlight-Farbe¶

$selection-color $selection-color-invert $selection-bg $selection-bg-invert

Die Highlight-Farbe ($selection-color) und Hintergrundfarbe ($selection-bg) erscheinen, wenn Text auf der Website markiert wird.

Info

Die Highlight-Farbe des CSS-Frameworks ist für die reguläre und invertierte Text-Farbe voreinstellt, sodass der Hintergrund immer in der primären Farbe und der Text in der invertierten Farbe angezeigt wird.

In der invertierten Form wird der Hintergrund in der body-Farbe, der Text in der regulären Farbe angezeigt.

Verfügbare (S)CSS-Variablen

SCSS

$selection-color
$selection-bg
$selection-color-invert
$selection-bg-invert

CSS

var(--selection-clr);
var(--selection-bg);

Seitenverhältnisse für Bilder¶

$aspect-ratios

Aspect ratios

Hierbei handelt es sich um eine dynamische Veriable, welche verschiedene Seitenverhältnisse in den Bild-Einstellungen (Image -> Aspect-Ratio) bereitstellt.

Dynamische Einstellungen stehen erst nach Speichern & Kompilieren zur Verfügung, da die neuen Optionen sowohl in den Style-Sheet-Dateien als auch in den dynamischen Style-Manager-Optionen (templates/style-manager-tm.xml) hinterlegt werden.

Weitere Hintergrund-Größen¶

$background-sizes

Background sizes

Hierbei handelt es sich um eine dynamische Veriable, welche weitere Hintergrundgrößen in den Hintergrund-Einstellungen (Background -> Size) bereitstellt.

Dynamische Einstellungen stehen erst nach Speichern & Kompilieren zur Verfügung, da die neuen Optionen sowohl in den Style-Sheet-Dateien als auch in den dynamischen Style-Manager-Optionen (templates/style-manager-tm.xml) hinterlegt werden.

Dynamische Display-Eigenschaften¶

$activate-display-utilities $display-properties

Wenn $activate-display-utilities aktiviert ist, erzeugt dies die in $display-properties eingetragenen Display-Eigenschaften, welche nach dem Kompilieren für alle Breakpoints gelten. Nach der Generierung erfolgt die Benennung der Klassen nach folgendem Schema:

.d-{Eigenschaft} für den Standard
.d-{Breakpoint}-{Eigenschaft} für die Breakpoints xs, s, m, l und xl.

In $display-properties können die gewünschten Display-Eigenschaften nacheinander eingetragen werden.

none block flex table grid inline-block inline-flex inline-grid

Nach dem Kompilieren stehen die Eigenschaften in der StyleManager-Gruppe "Display" in jedem Artikel, Inhaltselement und Modul zur Verfügung.

Wie der box-shadow eingestellt wird, kann den mdn web docs entnommen werden. ↩