262 lines
3.9 KiB
Sass
262 lines
3.9 KiB
Sass
// Mixin für das Grid-System
|
||
=col($size)
|
||
flex: 0 0 $size
|
||
max-width: $size
|
||
|
||
// Dynamische Spalten (1 bis 12)
|
||
@for $i from 1 through 12
|
||
.col-#{$i}
|
||
+col(percentage($i / 12))
|
||
|
||
// Flexbox-Ausrichtungen
|
||
=flex-align($align-items, $justify-content)
|
||
display: flex
|
||
align-items: $align-items
|
||
justify-content: $justify-content
|
||
|
||
.d-flex
|
||
display: flex
|
||
|
||
.d-flex-center
|
||
+flex-align(center, center)
|
||
|
||
.d-flex-start
|
||
+flex-align(flex-start, flex-start)
|
||
|
||
.d-flex-end
|
||
+flex-align(flex-end, flex-end)
|
||
|
||
.d-flex-between
|
||
+flex-align(center, space-between)
|
||
|
||
// Spacing Mixins (Margin und Padding)
|
||
=spacing($type, $size)
|
||
#{$type}: $size
|
||
|
||
=m($size)
|
||
+spacing(margin, $size)
|
||
|
||
=mt($size)
|
||
+spacing(margin-top, $size)
|
||
|
||
=mb($size)
|
||
+spacing(margin-bottom, $size)
|
||
|
||
=p($size)
|
||
+spacing(padding, $size)
|
||
|
||
=pt($size)
|
||
+spacing(padding-top, $size)
|
||
|
||
=pb($size)
|
||
+spacing(padding-bottom, $size)
|
||
|
||
// Margin Klassen
|
||
.m-0
|
||
+m(0)
|
||
.m-1
|
||
+m(0.25rem)
|
||
.m-2
|
||
+m(0.5rem)
|
||
.m-3
|
||
+m(0.75rem)
|
||
.m-4
|
||
+m(1rem)
|
||
.m-5
|
||
+m(1.25rem)
|
||
.m-6
|
||
+m(1.5rem)
|
||
|
||
// Margin Top Klassen
|
||
.mt-0
|
||
+mt(0)
|
||
.mt-1
|
||
+mt(0.25rem)
|
||
.mt-2
|
||
+mt(0.5rem)
|
||
.mt-3
|
||
+mt(0.75rem)
|
||
.mt-4
|
||
+mt(1rem)
|
||
.mt-5
|
||
+mt(1.25rem)
|
||
.mt-6
|
||
+mt(1.5rem)
|
||
|
||
// Margin Bottom Klassen
|
||
.mb-0
|
||
+mb(0)
|
||
.mb-1
|
||
+mb(0.25rem)
|
||
.mb-2
|
||
+mb(0.5rem)
|
||
.mb-3
|
||
+mb(0.75rem)
|
||
.mb-4
|
||
+mb(1rem)
|
||
.mb-5
|
||
+mb(1.25rem)
|
||
.mb-6
|
||
+mb(1.5rem)
|
||
|
||
// Padding Klassen
|
||
.p-0
|
||
+p(0)
|
||
.p-1
|
||
+p(0.25rem)
|
||
.p-2
|
||
+p(0.5rem)
|
||
.p-3
|
||
+p(0.75rem)
|
||
.p-4
|
||
+p(1rem)
|
||
.p-5
|
||
+p(1.25rem)
|
||
.p-6
|
||
+p(1.5rem)
|
||
|
||
// Padding Top Klassen
|
||
.pt-0
|
||
+pt(0)
|
||
.pt-1
|
||
+pt(0.25rem)
|
||
.pt-2
|
||
+pt(0.5rem)
|
||
.pt-3
|
||
+pt(0.75rem)
|
||
.pt-4
|
||
+pt(1rem)
|
||
.pt-5
|
||
+pt(1.25rem)
|
||
.pt-6
|
||
+pt(1.5rem)
|
||
|
||
// Padding Bottom Klassen
|
||
.pb-0
|
||
+pb(0)
|
||
.pb-1
|
||
+pb(0.25rem)
|
||
.pb-2
|
||
+pb(0.5rem)
|
||
.pb-3
|
||
+pb(0.75rem)
|
||
.pb-4
|
||
+pb(1rem)
|
||
.pb-5
|
||
+pb(1.25rem)
|
||
.pb-6
|
||
+pb(1.5rem)
|
||
|
||
// Text-Ausrichtungen
|
||
=text-align($align)
|
||
text-align: $align
|
||
|
||
.text-left
|
||
+text-align(left)
|
||
|
||
.text-center
|
||
+text-align(center)
|
||
|
||
.text-right
|
||
+text-align(right)
|
||
|
||
// Vertikale Ausrichtung
|
||
.align-items-start
|
||
align-items: flex-start
|
||
|
||
.align-items-center
|
||
align-items: center
|
||
|
||
.align-items-end
|
||
align-items: flex-end
|
||
|
||
.align-items-baseline
|
||
align-items: baseline
|
||
|
||
.align-items-stretch
|
||
align-items: stretch
|
||
|
||
// Horizontale Ausrichtung
|
||
.justify-content-start
|
||
justify-content: flex-start
|
||
|
||
.justify-content-center
|
||
justify-content: center
|
||
|
||
.justify-content-end
|
||
justify-content: flex-end
|
||
|
||
.justify-content-between
|
||
justify-content: space-between
|
||
|
||
.justify-content-around
|
||
justify-content: space-around
|
||
|
||
.justify-content-evenly
|
||
justify-content: space-evenly
|
||
|
||
// Globales Box-Sizing für alle Elemente
|
||
*
|
||
box-sizing: border-box
|
||
|
||
// Row-Klasse für das Grid-System
|
||
.row
|
||
display: flex
|
||
flex-wrap: wrap
|
||
margin-left: -15px
|
||
margin-right: -15px
|
||
width: 100%
|
||
|
||
// Optional: Unterstützung für no-gutters (keine Abstände zwischen Spalten)
|
||
&.no-gutters
|
||
margin-left: 0
|
||
margin-right: 0
|
||
|
||
> .col,
|
||
> [class*="col-"]
|
||
padding-left: 0
|
||
padding-right: 0
|
||
|
||
// Standard-Padding für Spalten (Gutter)
|
||
[class*="col-"]
|
||
padding-left: 15px
|
||
padding-right: 15px
|
||
|
||
// Mixin für das Grid-System
|
||
=col($size)
|
||
flex: 0 0 $size
|
||
width: $size
|
||
max-width: $size
|
||
|
||
// Dynamische Spalten (1 bis 12) - Standardbreiten für große Bildschirme
|
||
@for $i from 1 through 12
|
||
.col-#{$i}
|
||
+col(percentage($i / 12))
|
||
|
||
// Breakpoints – jetzt mit min-width
|
||
$breakpoints: (lg: 1200px, md: 992px, sm: 768px)
|
||
|
||
=breakpoint($size)
|
||
@media (min-width: $size)
|
||
@content
|
||
|
||
=col-responsive($col, $size)
|
||
@each $key, $value in $breakpoints
|
||
+breakpoint($value)
|
||
.col-#{$key}-#{$col}
|
||
flex: 0 0 (100% / 12 * $col)
|
||
width: (100% / 12 * $col)
|
||
max-width: (100% / 12 * $col)
|
||
|
||
// Responsive Spalten
|
||
@for $i from 1 through 12
|
||
+col-responsive($i, lg)
|
||
+col-responsive($i, md)
|
||
+col-responsive($i, sm)
|
||
|
||
// Responsive Stacking für kleinere Bildschirme
|
||
@media (max-width: 992px)
|
||
[class*="col-"]
|
||
flex: 0 0 100%
|
||
width: 100%
|
||
max-width: 100% |