diff options
| -rw-r--r-- | src/objects/_backdrop.scss | 10 | ||||
| -rw-r--r-- | src/objects/_lightbox.scss | 29 |
2 files changed, 15 insertions, 24 deletions
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 164b487..e7f2cfd 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
| @@ -5,8 +5,6 @@ | |||
| 5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 6 | --dims: ( | 6 | --dims: ( |
| 7 | --z-index: 10000, | 7 | --z-index: 10000, |
| 8 | --pad-x: fn.global-dim(--size --150), | ||
| 9 | --pad-y: fn.global-dim(--size --150), | ||
| 10 | ), | 8 | ), |
| 11 | ), 'dims'); | 9 | ), 'dims'); |
| 12 | 10 | ||
| @@ -22,13 +20,6 @@ | |||
| 22 | ), | 20 | ), |
| 23 | ), 'colors-dark'); | 21 | ), 'colors-dark'); |
| 24 | 22 | ||
| 25 | @include iro.props-store(( | ||
| 26 | --dims: ( | ||
| 27 | --pad-x: fn.global-dim(--size --100), | ||
| 28 | --pad-y: fn.global-dim(--size --100), | ||
| 29 | ) | ||
| 30 | ), 'sm'); | ||
| 31 | |||
| 32 | @include iro.bem-object(iro.props-namespace()) { | 23 | @include iro.bem-object(iro.props-namespace()) { |
| 33 | display: flex; | 24 | display: flex; |
| 34 | position: fixed; | 25 | position: fixed; |
| @@ -39,7 +30,6 @@ | |||
| 39 | left: 0; | 30 | left: 0; |
| 40 | box-sizing: border-box; | 31 | box-sizing: border-box; |
| 41 | flex-direction: column; | 32 | flex-direction: column; |
| 42 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
| 43 | background-color: fn.color(--bg); | 33 | background-color: fn.color(--bg); |
| 44 | color: fn.global-color(--fg); | 34 | color: fn.global-color(--fg); |
| 45 | } | 35 | } |
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 131db29..14aa302 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
| @@ -6,20 +6,20 @@ | |||
| 6 | @include iro.props-namespace('lightbox') { | 6 | @include iro.props-namespace('lightbox') { |
| 7 | @include iro.props-store(( | 7 | @include iro.props-store(( |
| 8 | --dims: ( | 8 | --dims: ( |
| 9 | --pad-x: fn.global-dim(--size --150), | 9 | --pad: fn.global-dim(--size --150), |
| 10 | --pad-y: fn.global-dim(--size --150), | ||
| 11 | --spacing: fn.global-dim(--size --200), | 10 | --spacing: fn.global-dim(--size --200), |
| 12 | --thumbnail: ( | 11 | --thumbnail: ( |
| 13 | --size: fn.global-dim(--size --800), | 12 | --size: fn.global-dim(--size --700), |
| 14 | --spacing: fn.global-dim(--size --100), | 13 | --spacing: fn.global-dim(--size --100), |
| 15 | --selected: 2px, //fn.global-dim(--border --medium), | 14 | --selected: 2px, |
| 16 | ), | 15 | ), |
| 17 | --button: ( | 16 | --close-button: ( |
| 18 | --font-size: fn.global-dim(--font-size --200), | 17 | --font-size: fn.global-dim(--font-size --200), |
| 19 | ), | 18 | ), |
| 20 | --nav-btn: ( | 19 | --nav-button: ( |
| 21 | --width: fn.global-dim(--size --3800), | 20 | --width: fn.global-dim(--size --3800), |
| 22 | --height: fn.global-dim(--size --3800), | 21 | --height: fn.global-dim(--size --3800), |
| 22 | --font-size: fn.global-dim(--font-size --400), | ||
| 23 | ), | 23 | ), |
| 24 | ), | 24 | ), |
| 25 | ), 'dims'); | 25 | ), 'dims'); |
| @@ -29,7 +29,7 @@ | |||
| 29 | --thumbnail: ( | 29 | --thumbnail: ( |
| 30 | --size: fn.global-dim(--size --600), | 30 | --size: fn.global-dim(--size --600), |
| 31 | ), | 31 | ), |
| 32 | --nav-btn: ( | 32 | --nav-button: ( |
| 33 | --width: fn.global-dim(--size --2500), | 33 | --width: fn.global-dim(--size --2500), |
| 34 | --height: fn.global-dim(--size --2500), | 34 | --height: fn.global-dim(--size --2500), |
| 35 | ), | 35 | ), |
| @@ -52,6 +52,7 @@ | |||
| 52 | gap: fn.dim(--spacing); | 52 | gap: fn.dim(--spacing); |
| 53 | position: relative; | 53 | position: relative; |
| 54 | height: 100%; | 54 | height: 100%; |
| 55 | padding: fn.dim(--pad); | ||
| 55 | 56 | ||
| 56 | @include iro.bem-elem('footer') { | 57 | @include iro.bem-elem('footer') { |
| 57 | grid-area: footer; | 58 | grid-area: footer; |
| @@ -74,7 +75,7 @@ | |||
| 74 | max-width: 100%; | 75 | max-width: 100%; |
| 75 | max-height: 100%; | 76 | max-height: 100%; |
| 76 | margin: auto; | 77 | margin: auto; |
| 77 | padding: 0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px); | 78 | padding: 0 calc(fn.dim(--nav-button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px); |
| 78 | } | 79 | } |
| 79 | 80 | ||
| 80 | @include iro.bem-elem('thumbnail') { | 81 | @include iro.bem-elem('thumbnail') { |
| @@ -100,7 +101,7 @@ | |||
| 100 | 101 | ||
| 101 | @include iro.bem-elem('close-btn') { | 102 | @include iro.bem-elem('close-btn') { |
| 102 | grid-area: close; | 103 | grid-area: close; |
| 103 | font-size: fn.dim(--button --font-size); | 104 | font-size: fn.dim(--close-button --font-size); |
| 104 | } | 105 | } |
| 105 | 106 | ||
| 106 | @include iro.bem-elem('prev-btn', 'next-btn') { | 107 | @include iro.bem-elem('prev-btn', 'next-btn') { |
| @@ -108,7 +109,7 @@ | |||
| 108 | top: 50%; | 109 | top: 50%; |
| 109 | overflow: visible; | 110 | overflow: visible; |
| 110 | transform: translate(0, -50%); | 111 | transform: translate(0, -50%); |
| 111 | font-size: fn.dim(--button --font-size); | 112 | font-size: fn.dim(--nav-button --font-size); |
| 112 | 113 | ||
| 113 | &::after { | 114 | &::after { |
| 114 | content: ''; | 115 | content: ''; |
| @@ -117,8 +118,8 @@ | |||
| 117 | z-index: -1; | 118 | z-index: -1; |
| 118 | top: 50%; | 119 | top: 50%; |
| 119 | left: 50%; | 120 | left: 50%; |
| 120 | width: fn.dim(--nav-btn --width); | 121 | width: fn.dim(--nav-button --width); |
| 121 | height: fn.dim(--nav-btn --height); | 122 | height: fn.dim(--nav-button --height); |
| 122 | transform: translate(-50%, -50%); | 123 | transform: translate(-50%, -50%); |
| 123 | } | 124 | } |
| 124 | } | 125 | } |
