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