From 144b7a2ea83507c98544d14ad9435cc5e51ac071 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 12:26:35 +0100 Subject: Update --- src/mixins/_grid.scss | 88 +++++++++++++++++++++++++++++++++++++++++++++ src/mixins/_typography.scss | 63 ++++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 src/mixins/_grid.scss create mode 100644 src/mixins/_typography.scss (limited to 'src/mixins') diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss new file mode 100644 index 0000000..e0a73d9 --- /dev/null +++ b/src/mixins/_grid.scss @@ -0,0 +1,88 @@ +$context-id: 'grid' !default; + +@include iro-context-stack-create($grid-context-id); + +@mixin native-grid { + @supports (display: grid) { + @content; + } +} + +@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + margin: (-.5 * $v-spacing) (-.5 * $h-spacing); + + @if $reverse { + flex-direction: row-reverse; + } + + @include iro-context-push($grid-context-id, 'grid', ( + --h-spacing: $h-spacing, + --v-spacing: $v-spacing, + --columns: $columns, + --reverse: $reverse + )); + + @content; + + @include iro-context-pop($grid-context-id); +} + +@mixin grid-col { + @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); + + $data: nth(iro-context-get($grid-context-id, 'grid'), 2); + $v-spacing: map-get($data, --v-spacing); + $h-spacing: map-get($data, --h-spacing); + + box-sizing: border-box; + flex: 0 0 auto; + margin: .5 * $v-spacing .5 * $h-spacing; + + @include iro-context-push($grid-context-id, 'grid__col'); + + @content; + + @include iro-context-pop($grid-context-id); +} + +@mixin grid-col-span($i) { + @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); + + $data: nth(iro-context-get($grid-context-id, 'grid'), 2); + $columns: map-get($data, --columns); + $h-spacing: map-get($data, --h-spacing); + + @if $h-spacing != 0 { + width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing}); + // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ + } @else { + width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); + } +} + +@mixin grid-col-shift($i) { + @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); + + $data: nth(iro-context-get($grid-context-id, 'grid'), 2); + $columns: map-get($data, --columns); + $h-spacing: map-get($data, --h-spacing); + $reverse: map-get($data, --reverse); + + $prop: if($reverse, margin-right, margin-left); + + @if $i == 0 { + #{$prop}: 0; + } @else { + @if $h-spacing != 0 { + #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2}); + // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ + } @else { + #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); + // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ + } + } +} diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss new file mode 100644 index 0000000..31e39f0 --- /dev/null +++ b/src/mixins/_typography.scss @@ -0,0 +1,63 @@ +@function set-font($basis, $values: ()) { + $font: map-merge($basis, $values); + + $map: (font-family: map-get($font, 'family')); + + @if (map-has-key($font, 'size')) { + $map: map-merge( + $map, ( + font-size: map-get($font, 'size') + ) + ); + } + + @if (map-has-key($font, 'weight')) { + $map: map-merge( + $map, ( + font-weight: map-get($font, 'weight') + ) + ); + } + + @if (map-has-key($font, 'style')) { + $map: map-merge( + $map, ( + font-style: map-get($font, 'style') + ) + ); + } + + @if (map-has-key($font, 'line-height')) { + $map: map-merge( + $map, ( + line-height: map-get($font, 'line-height') + ) + ); + } + + @if (map-has-key($font, 'transform')) { + $map: map-merge( + $map, ( + text-transform: map-get($font, 'transform') + ) + ); + } + + @if (map-has-key($font, 'variant-alternates')) { + $map: map-merge( + $map, ( + font-variant-alternates: map-get($font, 'variant-alternates') + ) + ); + } + + @return $map; +} + +@mixin set-font($basis, $values: ()) { + $values: set-font($basis, $values); + + @each $prop, $value in $values { + #{$prop}: $value; + } +} -- cgit v1.2.3-70-g09d2