Mixins

CSS Grid

/// @param {number} $columns     Count of columns
/// @param {map}    $breakpoints Map or array of available breakpoints
/// @param {number} $gap         Gap width between grid elements
@include fz-make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints, $gap: $grid-gutter-width);

Erstellt ein CSS-Grid-Layout mit einer Grundstruktur. Die Anzahl der Spalten und Zeilen ist über die Parameter anpassbar. Es werden klassische Bootstrap-Variablen genutzt, die überschrieben werden können.

---

Icon-Handling

/// @param {string} $name       Map key of the icon in $fz-icon-collection
/// @param {color}  $color      Color for the icon as HEX color code
/// @param {number} $size       Size of the icon (with unit, e.g., px, em, rem)
/// @param {string} $repository Icon repository name
/// @param {number} $rotate     Rotation of the icon (number with deg unit or map for 3D rotation)
@include fz-icon($name, $color, $size: $icon-base-size, $repository: "revplus", $rotate: 0deg);

Die Mixin bietet eine flexible Methode zur Einbindung und Stilisierung der verfügbaren Icons im RevPlus Profi-Theme für Shopware 6. Es liest ein spezifisches Icon aus der vordefinierten Sammlung $fz-icon-collection und ermöglicht die Anpassung von Farbe, Größe und Rotation via Parameter. Das Icon wird dem jeweiligen Element als Hintergrund-Bild hinzugefügt.

---

Positionierung: Absolut

/// @param {number} $zIndex z-index
@include make-absolute($zIndex: 0);

Die Mixin setzt die Position des Elements auf absolut.

Vertikale/Horizontale Positionierung

/* Von oben */
/// @param {number} $offset Offset from top
/// @param {number} $zIndex z-index
@include make-absolute-top($offset: 0, $zIndex: 0);

/* Von unten */
/// @param {number} $offset Offset from bottom
/// @param {number} $zIndex z-index
@include make-absolute-bottom($offset: 0, $zIndex: 0);

/* Von links */
/// @param {number} $offset Offset from left
/// @param {number} $zIndex z-index
@include make-absolute-start($offset: 0, $zIndex: 0);

/* Von rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $zIndex z-index
@include make-absolute-end($offset: 0, $zIndex: 0);

Alle diese Mixins verwenden intern make-absolute und setzen zusätzlich eine spezifische Positionierung (oben, unten, links, rechts) mit dem angegebenen Offset.

Position auf X- und Y-Achse

/* Von oben-links */
/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-absolute-top-start($offsetX: 0, $offsetY: 0, $zIndex: 0);

/* Von oben-rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-absolute-top-end($offsetX: 0, $offsetY: 0, $zIndex: 0);

/* Von unten-links */
/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-absolute-bottom-start($offsetX: 0, $offsetY: 0, $zIndex: 0);

/* Von unten-rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-absolute-bottom-end($offsetX: 0, $offsetY: 0, $zIndex: 0);

Alle diese Mixins verwenden intern make-absolute und setzen zusätzlich eine spezifische Positionierung (oben/unten und links/rechts) mit den angegebenen Offsets.

Vollflächig

/* Gesamte Breite */
/// @param {string} $position [top|bottom]
/// @param {number} $offset Offset from top|bottom
/// @param {number} $zIndex z-index
@include make-absolute-full-width($position: top, $offset: 0, $zIndex: 0);

Die Mixin positioniert das Element absolut über die gesamte Breite des Elternelements.

/* Gesamte Höhe */
/// @param {string} $position [start|end]
/// @param {number} $offset Offset from left|right
/// @param {number} $zIndex z-index
@include make-absolute-full-height($position: start, $offset: 0, $zIndex: 0);

Die Mixin positioniert das Element absolut über die gesamte Höhe des Elternelements.

/* Gesamte Fläche */
/// @param {number} $zIndex z-index
@include make-absolute-full-area($zIndex: 0);

Die Mixin positioniert das Element absolut und füllt den gesamten Bereich des Elternelements aus.

---

Positionierung: Fixiert

/// @param {number} $zIndex z-index
@include make-fixed($zIndex: 0);

Die Mixin setzt die Position des Elements auf fixed.

Vertikale/Horizontale Positionierung

/* Von oben */
/// @param {number} $offset Offset from top
/// @param {number} $zIndex z-index
@include make-fixed-top($offset: 0, $zIndex: 0);

/* Von unten */
/// @param {number} $offset Offset from bottom
/// @param {number} $zIndex z-index
@include make-fixed-bottom($offset: 0, $zIndex: 0);

/* Von links */
/// @param {number} $offset Offset from left
/// @param {number} $zIndex z-index
@include make-fixed-start($offset: 0, $zIndex: 0);

/* Von rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $zIndex z-index
@include make-fixed-end($offset: 0, $zIndex: 0);

Alle diese Mixins verwenden intern make-fixed und setzen zusätzlich eine spezifische Positionierung (oben, unten, links, rechts) mit dem angegebenen Offset.

Position auf X- und Y-Achse

/* Von oben-links */
/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-fixed-top-start($offsetX: 0, $offsetY: 0, $zIndex: 0);

/* Von oben-rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-fixed-top-end($offsetX: 0, $offsetY: 0, $zIndex: 0);

/* Von unten-links */
/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-fixed-bottom-start($offsetX: 0, $offsetY: 0, $zIndex: 0);

/* Von unten-rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-fixed-bottom-end($offsetX: 0, $offsetY: 0, $zIndex: 0);

Alle diese Mixins verwenden intern make-fixed und setzen zusätzlich eine spezifische Positionierung (oben/unten und links/rechts) mit den angegebenen Offsets.

Vollflächig

/* Gesamte Breite */
/// @param {string} $position [top|bottom]
/// @param {number} $offset Offset from top|bottom
/// @param {number} $zIndex z-index
@include make-fixed-full-width($position: top, $offset: 0, $zIndex: 0);

Die Mixin positioniert das Element fixiert über die gesamte Breite des Elternelements.

/* Gesamte Höhe */
/// @param {string} $position [start|end]
/// @param {number} $offset Offset from left|right
/// @param {number} $zIndex z-index
@include make-fixed-full-height($position: start, $offset: 0, $zIndex: 0);

Die Mixin positioniert das Element fixiert über die gesamte Höhe des Elternelements.

/* Gesamte Fläche */
/// @param {number} $zIndex z-index
@include make-fixed-full-area($zIndex: 0);

Die Mixin positioniert das Element fixiert und füllt den gesamten Bereich des Elternelements aus.

---

Pseudo-Elemente

@include make-pseudo {
  @content;
}

Diese Mixin ist typischerweise für den Einsatz in Pseudo-Elementen (::before und ::after) gedacht und erstellt eine CSS Eigenschaft mit leerem Inhalt (content: ''). Das Hinzufügen weiterer Styles ist über den @content Block möglich.

Absolute Positionierung

/// @param {number} $zIndex z-index
@include make-pseudo-absolute($zIndex: 0) {
  @content;
}

Diese Mixin verwendet intern make-absolute und make-pseudo.

Absolute, vertikale oder horizontale Positionierung

/* Von oben */
/// @param {number} $offset Offset from top
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-top($offset: 0, $zIndex: 0) {
  @content;
}

/* Von unten */
/// @param {number} $offset Offset from bottom
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-bottom($offset: 0, $zIndex: 0) {
  @content;
}

/* Von links */
/// @param {number} $offset Offset from left
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-start($offset: 0, $zIndex: 0) {
  @content;
}

/* Von rechts */
/// @param {number} $offset Offset from right
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-end($offset: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-absolute-(top|bottom|start|end) und make-pseudo.

Absolute Position auf X- und Y-Achse

/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-top-start($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-top-end($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-bottom-start($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-bottom-end($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-absolute-(top|bottom)-(start|end) und make-pseudo.

Absolut positioniertes Pseudo-Element über die volle Breite

/// @param {string} $position [top|bottom]
/// @param {number} $offset Offset from top|bottom
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-full-width($position: top, $offset: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-absolute-full-width und make-pseudo.

Absolut positioniertes Pseudo-Element über die volle Höhe

/// @param {string} $position [start|end]
/// @param {number} $offset Offset from left|right
/// @param {number} $zIndex z-index
@include make-pseudo-absolute-full-height($position: start, $offset: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-absolute-full-height und make-pseudo.

Absolut positioniertes Pseudo-Element über die volle Fläche

/// @param {number} $zIndex z-index
@include make-pseudo-absolute-full-area($zIndex: 0) {
  @content;
}

Die Mixin positioniert das Element absolut und füllt den gesamten Bereich des Elternelements aus.

Fixierte Positionierung

/// @param {number} $zIndex z-index
@include make-pseudo-fixed($zIndex: 0) {
  @content;
}

Diese Mixin verwendet intern make-fixed und make-pseudo.

Fixierte, vertikale oder horizontale Positionierung

/* Von oben */
/// @param {number} $offset Offset from top
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-top($offset: 0, $zIndex: 0) {
  @content;
}

/* Von unten */
/// @param {number} $offset Offset from bottom
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-bottom($offset: 0, $zIndex: 0) {
  @content;
}

/* Von links */
/// @param {number} $offset Offset from left
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-start($offset: 0, $zIndex: 0) {
  @content;
}

/* Von rechts */
/// @param {number} $offset Offset from right
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-end($offset: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-fixed-(top|bottom|start|end) und make-pseudo.

Fixierte Position auf X- und Y-Achse

/* Von oben-links */
/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-top-start($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

/* Von oben-rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from top
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-top-end($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

/* Von unten-links */
/// @param {number} $offsetX Offset from left
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-bottom-start($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

/* Von unten-rechts */
/// @param {number} $offsetX Offset from right
/// @param {number} $offsetY Offset from bottom
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-bottom-end($offsetX: 0, $offsetY: 0, $zIndex: 0) {
  @content;
}

Fixiertes Pseudo-Element über die volle Breite

/* Volle Breite */
/// @param {string} $position [top|bottom]
/// @param {number} $offset Offset from top|bottom
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-full-width($position: top, $offset: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-fixed-full-width und make-pseudo.

Fixiertes Pseudo-Element über die volle Höhe

/* Volle Höhe */
/// @param {string} $position [start|end]
/// @param {number} $offset Offset from left|right
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-full-height($position: start, $offset: 0, $zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-fixed-full-height und make-pseudo.

Fixiertes Pseudo-Element über die volle Fläche

/* Volle Fläche */
/// @param {number} $zIndex z-index
@include make-pseudo-fixed-full-area($zIndex: 0) {
  @content;
}

Alle diese Mixins verwenden intern make-fixed-full-area und make-pseudo.

---

Dekorierte Überschriften

/// @param {color}  $bg-decoration Background color of the decoration elements
/// @param {number} $spacing       Title's margin bottom
@include fz-cms-element-title-decoration($bg-decoration: $primary, $spacing: $grid-gutter-width);

Intern wird die make-pseudo-absolute Mixin für die Positionierung der Dekorationselemente verwendet.