import { Meta, Unstyled } from '@storybook/blocks';
import { P20Button } from '../../index';

<Meta title="Grundlayout/Breakpoints" />

# Breakpoints

Breakpoints sind repräsentativ für eine Teilmenge gängiger Gerätegrößen und
Viewport Dimensionen – sie zielen nicht speziell auf jeden Anwendungsfall oder
jedes Gerät ab. Stattdessen bieten sie eine konsistente Grundlage, auf der
nahezu jedes Gerät aufbauen kann.

```css
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
```

## Media Query Mixins

Es können die nachfolgenden Media Query Mixins genutzt werden. Sie werden
Hauptsächlich dafür gebraucht um das Aussehen von Elementen, Blöcken und ganzen
Setien auf unterschiedlichen Viewports zu bestimmen.

### Mixins ausgehend von der minimalen Viewport Breite

```
// Es ist kein Media Query für den xs breakpoint benötigt, weil dieser von einer Viewport Breite von 0 anfangen würde.
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
```

#### Verwendungsbeispiel

Angenommen wir möchten, dass ein Element erst ab einer bestimmten Viewport
Breite angezeigt wird.

```css
.custom-class {
  display: none;

  @include media-breakpoint-up(sm) {
    display: block;
  }
}
```

### Mixins ausgehend von der maximalen Viewport Breite

```
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
```

#### Verwendungsbeispiel

Angenommen wir möchten, dass ein Element bis zu einer bestimmten Viewport Breite
angezeigt wird.

```css
.custom-class {
  display: none;

  @include media-breakpoint-down(md) {
    display: block;
  }
}
```

### Mixins um gezielt einen Breakpoint anzusprechen

```
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
```

## Einbindung der Mixins in eine Applikation

Beispiel: Microfrontend Asservate in Datei 'asservaten-vorgang.module.scss';

```css
@use '@poz/component-library/src/mixins.scss' as *;

.button-bar {
  margin-top: var(--spacing-m);
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.custom-class {
  display: none;

  @include media-breakpoint-up(sm) {
    display: block;
  }
}
```
