blob: 7d2666b42dc9f93e8a0dbb7f3b86d34ce80cf702 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001@charset "UTF-8";
2//////////////////////////////////////////////////////////////////////////////////
3//
4// Element queries for _lightbox.scss, based on: https://github.com/Snugug/eq.js
5//
6//////////////////////////////////////////////////////////////////////////////////
7
8@import "../variables";
9@import "../functions";
10
11.mdlext-lightboard {
12
13 @include eq-pts((
14 lightboard_medium_small: strip-unit($mdlext-lightboard-medium-small-breakpoint),
15 lightboard_medium: strip-unit($mdlext-lightboard-medium-breakpoint),
16 lightboard_medium_large: strip-unit($mdlext-lightboard-medium-large-breakpoint),
17 lightboard_large: strip-unit($mdlext-lightboard-large-breakpoint)
18 ));
19
20 ////// small - meduim-small //////
21 @include eq('lightboard_medium_small') {
22 padding: calc((#{$mdlext-lightboard-medium-small-margin} - #{$mdlext-lightboard-medium-small-gutter}) / 2);
23
24 .mdlext-lightboard__slide {
25 margin: calc(#{$mdlext-lightboard-medium-small-gutter} / 2);
26 width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100% - #{$mdlext-lightboard-medium-small-gutter});
27
28 .mdlext-lightboard__slide__frame figure {
29 margin: $mdlext-lightboard-medium-small-frame-width;
30 }
31 }
32 &.mdlext-lightboard--no-spacing {
33 padding: 0;
34
35 .mdlext-lightboard__slide {
36 margin: 0;
37 width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100%);
38 }
39 }
40 }
41
42 ////// meduim-small - medium //////
43 @include eq('lightboard_medium') {
44 padding: calc((#{$mdlext-lightboard-medium-margin} - #{$mdlext-lightboard-medium-gutter}) / 2);
45
46 .mdlext-lightboard__slide {
47 margin: calc(#{$mdlext-lightboard-medium-gutter} / 2);
48 width: calc(1 / #{$mdlext-lightboard-medium-columns} * 100% - #{$mdlext-lightboard-medium-gutter});
49
50 .mdlext-lightboard__slide__frame figure {
51 margin: $mdlext-lightboard-medium-frame-width;
52 }
53 }
54 &.mdlext-lightboard--no-spacing {
55 padding: 0;
56
57 .mdlext-lightboard__slide {
58 margin: 0;
59 width: calc(1 / #{$mdlext-lightboard-medium-columns} * 100%);
60 }
61 }
62 }
63
64 ////// meduim - medium-large //////
65 @include eq('lightboard_medium_large') {
66 padding: calc((#{$mdlext-lightboard-medium-large-margin} - #{$mdlext-lightboard-medium-large-gutter}) / 2);
67
68 .mdlext-lightboard__slide {
69 margin: calc(#{$mdlext-lightboard-medium-large-gutter} / 2);
70 width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100% - #{$mdlext-lightboard-medium-large-gutter});
71
72 .mdlext-lightboard__slide__frame figure {
73 margin: $mdlext-lightboard-medium-large-frame-width;
74 }
75 }
76 &.mdlext-lightboard--no-spacing {
77 padding: 0;
78
79 .mdlext-lightboard__slide {
80 margin: 0;
81 width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100%);
82 }
83 }
84 }
85
86 ////// meduim-large - large //////
87 @include eq('lightboard_large') {
88 padding: calc((#{$mdlext-lightboard-large-margin} - #{$mdlext-lightboard-large-gutter}) / 2);
89
90 .mdlext-lightboard__slide {
91 margin: calc(#{$mdlext-lightboard-large-gutter} / 2);
92 width: calc(1 / #{$mdlext-lightboard-large-columns} * 100% - #{$mdlext-lightboard-large-gutter});
93
94 .mdlext-lightboard__slide__frame figure {
95 margin: $mdlext-lightboard-large-frame-width;
96 }
97 }
98 &.mdlext-lightboard--no-spacing {
99 padding: 0;
100
101 .mdlext-lightboard__slide {
102 margin: 0;
103 width: calc(1 / #{$mdlext-lightboard-large-columns} * 100%);
104 }
105 }
106 }
107}
108
109@include eq-selectors;
110