diff options
Diffstat (limited to 'src/objects/_lightbox.vars.scss')
| -rw-r--r-- | src/objects/_lightbox.vars.scss | 57 |
1 files changed, 25 insertions, 32 deletions
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 1538cae..32324a4 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss | |||
| @@ -1,3 +1,4 @@ | |||
| 1 | @use 'sass:map'; | ||
| 1 | @use '../props'; | 2 | @use '../props'; |
| 2 | @use '../core.vars' as core; | 3 | @use '../core.vars' as core; |
| 3 | 4 | ||
| @@ -29,42 +30,34 @@ $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected- | |||
| 29 | $thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | 30 | $thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; |
| 30 | $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | 31 | $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; |
| 31 | 32 | ||
| 33 | $thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default; | ||
| 34 | $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; | ||
| 35 | $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; | ||
| 32 | 36 | ||
| 37 | $static-themes: props.def(--o-lightbox); | ||
| 33 | 38 | ||
| 34 | @each $theme in $static-themes { | 39 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
| 35 | @include iro.props-store(( | 40 | $lightbox-theme: #{$theme}-static; |
| 36 | --colors: ( | ||
| 37 | --static-#{$theme}: ( | ||
| 38 | --text: fn.global-color(--white-transparent --800), | ||
| 39 | --thumbnail: ( | ||
| 40 | --border: fn.global-color(--white-transparent --400), | ||
| 41 | |||
| 42 | --hover: ( | ||
| 43 | --border: fn.global-color(--white-transparent --500), | ||
| 44 | ), | ||
| 45 | |||
| 46 | --selected: ( | ||
| 47 | --border: fn.global-color(--white-transparent --900), | ||
| 48 | ), | ||
| 49 | 41 | ||
| 50 | --key-focus: ( | 42 | $static-themes: props.merge($static-themes, ( |
| 51 | --border: fn.global-color(--#{$theme}-transparent --900), | 43 | $lightbox-theme: ( |
| 52 | --outline: fn.global-color(--#{$theme}-transparent --300), | 44 | --text: props.get(core.$transparent-colors, $theme, --800), |
| 53 | ), | 45 | --thumbnail: ( |
| 46 | --border: props.get(core.$transparent-colors, $theme, --400), | ||
| 47 | |||
| 48 | --hover: ( | ||
| 49 | --border: props.get(core.$transparent-colors, $theme, --500), | ||
| 54 | ), | 50 | ), |
| 55 | ) | 51 | |
| 52 | --selected: ( | ||
| 53 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --key-focus: ( | ||
| 57 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 58 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 59 | ), | ||
| 60 | ), | ||
| 56 | ) | 61 | ) |
| 57 | )); | 62 | )); |
| 58 | } | 63 | } |
| 59 | |||
| 60 | @include iro.props-store(( | ||
| 61 | --dims: ( | ||
| 62 | --thumbnail: ( | ||
| 63 | --size: fn.global-dim(--size --600), | ||
| 64 | ), | ||
| 65 | --nav-button: ( | ||
| 66 | --width: fn.global-dim(--size --2500), | ||
| 67 | --height: fn.global-dim(--size --2500), | ||
| 68 | ), | ||
| 69 | ), | ||
| 70 | ), 'md'); | ||
