diff options
Diffstat (limited to 'src/objects/_lightbox.vars.scss')
| -rw-r--r-- | src/objects/_lightbox.vars.scss | 89 |
1 files changed, 23 insertions, 66 deletions
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index dc9a2a1..6fb84f7 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss | |||
| @@ -1,80 +1,37 @@ | |||
| 1 | @use "sass:map"; | 1 | @use 'sass:map'; |
| 2 | @use "sass:string"; | 2 | @use 'sass:string'; |
| 3 | @use "pkg:iro-sass/props"; | 3 | @use 'pkg:iro-sass/src/props'; |
| 4 | @use "../core.vars" as core; | 4 | @use '../core.vars' as core; |
| 5 | 5 | ||
| 6 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; | 6 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; |
| 7 | 7 | ||
| 8 | $controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default; | 8 | $controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default; |
| 9 | $controls--block-size: props.def( | 9 | $controls--block-size: props.def(--o-lightbox--controls--block-size, props.get(core.$size--550)) !default; |
| 10 | --o-lightbox--controls--block-size, | ||
| 11 | props.get(core.$size--550) | ||
| 12 | ) !default; | ||
| 13 | 10 | ||
| 14 | $controls--shadow-x: props.def( | 11 | $controls--shadow-x: props.def(--o-lightbox--controls--shadow-x, props.get(core.$shadow--l2--x)) !default; |
| 15 | --o-lightbox--controls--shadow-x, | 12 | $controls--shadow-y: props.def(--o-lightbox--controls--shadow-y, props.get(core.$shadow--l2--y)) !default; |
| 16 | props.get(core.$shadow--l2--x) | 13 | $controls--shadow-blur: props.def(--o-lightbox--controls--shadow-blur, props.get(core.$shadow--l2--blur)) !default; |
| 17 | ) !default; | 14 | $controls--shadow-grow: props.def(--o-lightbox--controls--shadow-grow, props.get(core.$shadow--l2--grow)) !default; |
| 18 | $controls--shadow-y: props.def( | ||
| 19 | --o-lightbox--controls--shadow-y, | ||
| 20 | props.get(core.$shadow--l2--y) | ||
| 21 | ) !default; | ||
| 22 | $controls--shadow-blur: props.def( | ||
| 23 | --o-lightbox--controls--shadow-blur, | ||
| 24 | props.get(core.$shadow--l2--blur) | ||
| 25 | ) !default; | ||
| 26 | $controls--shadow-grow: props.def( | ||
| 27 | --o-lightbox--controls--shadow-grow, | ||
| 28 | props.get(core.$shadow--l2--grow) | ||
| 29 | ) !default; | ||
| 30 | 15 | ||
| 31 | $thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; | 16 | $thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; |
| 32 | $thumbnail--spacing: props.def( | 17 | $thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; |
| 33 | --o-lightbox--thumbnail--spacing, | 18 | $thumbnail--active--width: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default; |
| 34 | props.get(core.$size--100) | 19 | $thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default; |
| 35 | ) !default; | ||
| 36 | $thumbnail--active--width: props.def( | ||
| 37 | --o-lightbox--thumbnail--active--width, | ||
| 38 | props.get(core.$size--1000) | ||
| 39 | ) !default; | ||
| 40 | $thumbnail--active--spacing: props.def( | ||
| 41 | --o-lightbox--thumbnail--active--spacing, | ||
| 42 | props.get(core.$size--250) | ||
| 43 | ) !default; | ||
| 44 | 20 | ||
| 45 | $thumbnail--width--md: props.def( | 21 | $thumbnail--width--md: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default; |
| 46 | --o-lightbox--thumbnail--width, | 22 | $thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default; |
| 47 | props.get(core.$size--400), | ||
| 48 | "md" | ||
| 49 | ) !default; | ||
| 50 | $thumbnail--active--width--md: props.def( | ||
| 51 | --o-lightbox--thumbnail--active--width, | ||
| 52 | props.get(core.$size--600), | ||
| 53 | "md" | ||
| 54 | ) !default; | ||
| 55 | 23 | ||
| 56 | $controls--bg: props.def( | 24 | $controls--bg: props.def(--o-lightbox--controls--bg, props.get(core.$transparent-colors, --black, --700), 'color') !default; |
| 57 | --o-lightbox--controls--bg, | 25 | $controls--shadow-color: props.def(--o-lightbox--controls--shadow-color, props.get(core.$transparent-colors, --black, --300), 'color') !default; |
| 58 | props.get(core.$transparent-colors, --black, --700), | ||
| 59 | "color" | ||
| 60 | ) !default; | ||
| 61 | $controls--shadow-color: props.def( | ||
| 62 | --o-lightbox--controls--shadow-color, | ||
| 63 | props.get(core.$transparent-colors, --black, --300), | ||
| 64 | "color" | ||
| 65 | ) !default; | ||
| 66 | 26 | ||
| 67 | $static-themes: props.def(--o-lightbox, (), "color"); | 27 | $static-themes: props.def(--o-lightbox, (), 'color'); |
| 68 | 28 | ||
| 69 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 29 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
| 70 | $lightbox-theme: --static-#{string.slice($theme, 3)}; | 30 | $lightbox-theme: --static-#{string.slice($theme, 3)}; |
| 71 | 31 | ||
| 72 | $static-themes: props.merge( | 32 | $static-themes: props.merge($static-themes, ( |
| 73 | $static-themes, | 33 | $lightbox-theme: ( |
| 74 | ( | 34 | --text: props.get(core.$transparent-colors, $theme, --text), |
| 75 | $lightbox-theme: ( | ||
| 76 | --text: props.get(core.$transparent-colors, $theme, --text), | ||
| 77 | ), | ||
| 78 | ) | 35 | ) |
| 79 | ); | 36 | )); |
| 80 | } | 37 | } |
