blob: b87f830bb26aef48fab78dc2d9936d9297e7dad5 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001@charset "UTF-8";
2
3//////////////////////////////
4//
5// Lightboard media queries
6//
7//////////////////////////////
8@import "../variables";
9
10////////// Small /////////////
11//@media (max-width: $mdlext-lightboard-medium-small-breakpoint - 1) {
12// // This is the default, see: _lightboard.scss
13//}
14
15////////// Medium small //////////
16/* stylelint-disable */
17@media (min-width: $mdlext-lightboard-medium-small-breakpoint) and (max-width: $mdlext-lightboard-medium-breakpoint - 1) { /* stylelint-enable */
18 .mdlext-lightboard {
19 padding: calc((#{$mdlext-lightboard-medium-small-margin} - #{$mdlext-lightboard-medium-small-gutter}) / 2);
20
21 .mdlext-lightboard__slide {
22 margin: calc(#{$mdlext-lightboard-medium-small-gutter} / 2);
23 width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100% - #{$mdlext-lightboard-medium-small-gutter});
24
25 .mdlext-lightboard__slide__frame figure {
26 margin: $mdlext-lightboard-medium-small-frame-width;
27 }
28 }
29 &.mdlext-lightboard--no-spacing {
30 padding: 0;
31
32 .mdlext-lightboard__slide {
33 margin: 0;
34 width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100%);
35 }
36 }
37 }
38}
39
40////////// Medium //////////
41/* stylelint-disable */
42@media (min-width: $mdlext-lightboard-medium-breakpoint) and (max-width: $mdlext-lightboard-medium-large-breakpoint - 1) { /* stylelint-enable */
43 .mdlext-lightboard {
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
65////////// Medium large //////////
66/* stylelint-disable */
67@media (min-width: $mdlext-lightboard-medium-large-breakpoint) and (max-width: $mdlext-lightboard-large-breakpoint - 1) { /* stylelint-enable */
68 .mdlext-lightboard {
69 padding: calc((#{$mdlext-lightboard-medium-large-margin} - #{$mdlext-lightboard-medium-large-gutter}) / 2);
70
71 .mdlext-lightboard__slide {
72 margin: calc(#{$mdlext-lightboard-medium-large-gutter} / 2);
73 width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100% - #{$mdlext-lightboard-medium-large-gutter});
74
75 .mdlext-lightboard__slide__frame figure {
76 margin: $mdlext-lightboard-medium-large-frame-width;
77 }
78 }
79 &.mdlext-lightboard--no-spacing {
80 padding: 0;
81
82 .mdlext-lightboard__slide {
83 margin: 0;
84 width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100%);
85 }
86 }
87 }
88}
89
90////////// Large //////////
91@media (min-width: $mdlext-lightboard-large-breakpoint) {
92 .mdlext-lightboard {
93 padding: calc((#{$mdlext-lightboard-large-margin} - #{$mdlext-lightboard-large-gutter}) / 2);
94
95 .mdlext-lightboard__slide {
96 margin: calc(#{$mdlext-lightboard-large-gutter} / 2);
97 width: calc(1 / #{$mdlext-lightboard-large-columns} * 100% - #{$mdlext-lightboard-large-gutter});
98
99 .mdlext-lightboard__slide__frame figure {
100 margin: $mdlext-lightboard-large-frame-width;
101 }
102 }
103 &.mdlext-lightboard--no-spacing {
104 padding: 0;
105
106 .mdlext-lightboard__slide {
107 margin: 0;
108 width: calc(1 / #{$mdlext-lightboard-large-columns} * 100%);
109 }
110 }
111 }
112}
113