diff --git a/components/00_Global/_selectorHook.scss b/components/00_Global/_selectorHook.scss new file mode 100644 index 0000000..0db3384 --- /dev/null +++ b/components/00_Global/_selectorHook.scss @@ -0,0 +1,90 @@ +$-hooks: (); +@use "sass:meta"; + + +/* + * A system to store a context for a CSS-Selector. + * Can be used to apply speacial rules when mixins are combined + */ + +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +/* + * Generates a key-safe version of the selector + */ +@function _generate_selector_identifier() { + $-path: str-replace(#{&}, '.', ''); + $-path: str-replace(#{$-path}, ' ', ''); + + @return $-path; +} + +@function hook($-key, $-value) { + + $-path: _generate_selector_identifier(); + + $-context: (); + + @if map-has-key($-hooks, $-path) { + $-context: map-get($-hooks, $-path); + } + + $-context: map-merge($-context, ($-key: $-value)); + + $-hooks: map-merge($-hooks, ($-path: $-context)) !global; + + @return 'Creating Hook for '+#{&}+' with '+#{$-key}+': '+#{$-value}; +} + +@function append-hook($-kwargs) { + $-path: _generate_selector_identifier(); + + $-hooks: map-merge($-hooks, ($-path: map-merge(get-hook(), $-kwargs))) !global; + @return 'Added '+inspect($-kwargs)+' to the hook of '+#{&}; +} + +@function has-hook() { + @return map-has-key($-hooks, _generate_selector_identifier()); +} + +@function get-hook() { + $-map: map-get($-hooks, _generate_selector_identifier()); + + @if $-map !=null { + @return $-map; + } + + @return ('selectors': ()); +} + +@function get-hook-value($-key) { + + $-hook: get-hook(); + + @if $-hook !=null { + @if map-has-key($-hook, $-key) { + @return map-get($-hook, $-key); + } + } + + @return null; +} + +@mixin RV-Utils__Hook--catch { + + @if has-hook() { + @content; + } +} + +@mixin RV-Utils__Hook--throw($-kwargs, $-css-selectors...) { + @debug append-hook($-kwargs); +} \ No newline at end of file diff --git a/components/01_Layouts/flexGrid/_flexGrid.scss b/components/01_Layouts/flexGrid/_flexGrid.scss index 269eed5..21da689 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.scss +++ b/components/01_Layouts/flexGrid/_flexGrid.scss @@ -1,13 +1,42 @@ -@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) { +@mixin RV-FlexGrid__Container { display: grid; - grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); - grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr)); - grid-auto-rows: minmax($-item_height, 1fr); } -@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px, $-prefix: '&') { +@mixin RV-FlexGrid__Container--autoWidth($-item-height: 300px, $-item-min-width: 300px) { + grid-template-columns: repeat(auto-fill, minmax($-item-min-width, 1fr)); + grid-template-rows: repeat(auto-fill, minmax($-item-height, 1fr)); + grid-auto-rows: minmax($-item-height, 1fr); +} + +@mixin RV-FlexGrid__Container--fixedSize($-item-height: 300px, $-item-width: 300px) { + @include RV-FlexGrid__Container--autoWidth($-item-height, $-item-width); + grid-template-columns: repeat(auto-fill, $-item-width); + justify-content: space-between; +} + +@mixin RV-FlexGrid__Container--masonry($-item-width: 300px) { + display: block; + column-count: auto; + column-width: $-item-width; + + @include RV-Utils__Hook--throw(()); +} + +@mixin RV-FlexGrid($-prefix: '&') { #{$-prefix}__Container { - @include RV-FlexGrid__Container($-item_width, $-item_height); + @include RV-FlexGrid__Container; + + &--autoWidth { + @include RV-FlexGrid__Container--autoWidth; + } + + &--fixedSize { + @include RV-FlexGrid__Container--fixedSize; + } + + &--masonry { + @include RV-FlexGrid__Container--masonry; + } } #{$-prefix}__Item { diff --git a/components/_components.scss b/components/_components.scss index b13be94..a991e35 100644 --- a/components/_components.scss +++ b/components/_components.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + @import '00_Global/global'; @import '01_Layouts/layouts'; @import '02_Styles/styles';