diff options
Diffstat (limited to 'src/_props.scss')
| -rw-r--r-- | src/_props.scss | 113 |
1 files changed, 24 insertions, 89 deletions
diff --git a/src/_props.scss b/src/_props.scss index f7f54c5..ac1dfd5 100644 --- a/src/_props.scss +++ b/src/_props.scss | |||
| @@ -1,105 +1,40 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'sass:map'; | 2 | @use 'sass:map'; |
| 3 | @use 'sass:meta'; | 3 | @use 'sass:meta'; |
| 4 | @use 'themes'; | ||
| 5 | @use 'include-media/dist/include-media' as media; | ||
| 6 | @use 'iro-sass/src/iro-sass' as iro; | ||
| 4 | 7 | ||
| 5 | @use 'iro-sass/src/functions' as functions; | 8 | @forward 'iro-sass/src/props'; |
| 6 | 9 | ||
| 7 | @function is-prop-ref($value) { | 10 | @mixin materialize($ref) { |
| 8 | @if meta.type-of($value) != 'list' { | 11 | @if meta.type-of($ref) == 'map' { |
| 9 | @return false; | 12 | $ref: map.values($ref); |
| 10 | } | 13 | } |
| 11 | @if list.length($value) != 3 { | ||
| 12 | @return false; | ||
| 13 | } | ||
| 14 | @if list.nth($value, 1) != 'prop-ref' { | ||
| 15 | @return false; | ||
| 16 | } | ||
| 17 | @return true; | ||
| 18 | } | ||
| 19 | |||
| 20 | @function def($name, $value: ()) { | ||
| 21 | @return ('prop-ref' $name $value); | ||
| 22 | } | ||
| 23 | |||
| 24 | @function merge($ref, $value) { | ||
| 25 | @if not is-prop-ref($ref) { | ||
| 26 | @return $ref; | ||
| 27 | } | ||
| 28 | |||
| 29 | $v: list.nth($ref, 3); | ||
| 30 | $ref: list.set-nth($ref, 3, map.deep-merge($v, $value)); | ||
| 31 | @return $ref; | ||
| 32 | } | ||
| 33 | |||
| 34 | @function get-deep($name, $value, $key: (), $keys...) { | ||
| 35 | @if is-prop-ref($value) { | ||
| 36 | // $value: list.nth($value, 3); | ||
| 37 | @return get($value, $key, $keys); | ||
| 38 | } | ||
| 39 | @if meta.type-of($value) == 'map' { | ||
| 40 | @if list.length($keys) == 0 { | ||
| 41 | @return #{$name}#{$key} map.get($value, $key); | ||
| 42 | } @else { | ||
| 43 | @return get-deep(#{$name}#{$key}, map.get($value, $key), $keys...); | ||
| 44 | } | ||
| 45 | } | ||
| 46 | @return $name $value; | ||
| 47 | } | ||
| 48 | 14 | ||
| 49 | @function map-to-vars($name, $map) { | 15 | :root { |
| 50 | @if meta.type-of($map) != 'map' { | 16 | @include iro.props-materialize($ref); |
| 51 | @return var($name); | ||
| 52 | } | ||
| 53 | |||
| 54 | $out: (); | ||
| 55 | |||
| 56 | @each $key, $value in $map { | ||
| 57 | $out: map.set($out, $key, map-to-vars(#{$name}#{$key}, $value)); | ||
| 58 | } | ||
| 59 | |||
| 60 | @return $out; | ||
| 61 | } | ||
| 62 | |||
| 63 | @function get($ref, $key: (), $keys...) { | ||
| 64 | @if not is-prop-ref($ref) { | ||
| 65 | @return $ref; | ||
| 66 | } | ||
| 67 | |||
| 68 | $name: list.nth($ref, 2); | ||
| 69 | $value: get(list.nth($ref, 3)); | ||
| 70 | 17 | ||
| 71 | @if meta.type-of($value) == 'map' { | 18 | @each $breakpoint in map.keys(media.$breakpoints) { |
| 72 | $res: get-deep($name, $value, $key, $keys...); | 19 | @include media.media('<=#{$breakpoint}') { |
| 73 | $name: list.nth($res, 1); | 20 | @include iro.props-materialize($ref, $breakpoint); |
| 74 | $value: list.nth($res, 2); | 21 | } |
| 75 | } @else if meta.type-of($value) == 'list' { | ||
| 76 | $i: 1; | ||
| 77 | @each $item in $value { | ||
| 78 | $value: list.set-nth($value, $i, get($item)); | ||
| 79 | $i: $i + 1; | ||
| 80 | } | 22 | } |
| 81 | } | ||
| 82 | 23 | ||
| 83 | @return map-to-vars($name, $value); | 24 | @media (prefers-color-scheme: dark) { |
| 84 | } | 25 | @include iro.props-materialize($ref, 'dark'); |
| 85 | |||
| 86 | @mixin declare-helper($name, $value) { | ||
| 87 | @if meta.type-of($value) == 'map' { | ||
| 88 | @each $key, $value in $value { | ||
| 89 | @include declare-helper(#{$name}#{$key}, $value); | ||
| 90 | } | 26 | } |
| 91 | } @else { | ||
| 92 | #{$name}: #{$value}; | ||
| 93 | } | 27 | } |
| 94 | } | ||
| 95 | |||
| 96 | @mixin materialize($refs) { | ||
| 97 | @each $ref in $refs { | ||
| 98 | @if is-prop-ref($ref) { | ||
| 99 | $name: list.nth($ref, 2); | ||
| 100 | $value: get(list.nth($ref, 3)); | ||
| 101 | 28 | ||
| 102 | @include declare-helper($name, $value); | 29 | @each $theme-name in map.keys(themes.$themes) { |
| 30 | @if $theme-name != themes.$theme-default { | ||
| 31 | @include iro.bem-theme($theme-name) { | ||
| 32 | @include iro.props-materialize($ref); | ||
| 33 | |||
| 34 | @media (prefers-color-scheme: dark) { | ||
| 35 | @include iro.props-materialize($ref, 'dark'); | ||
| 36 | } | ||
| 37 | } | ||
| 103 | } | 38 | } |
| 104 | } | 39 | } |
| 105 | } | 40 | } |
