1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | @type : 'element';
|
16 | @element : 'reveal';
|
17 |
|
18 | @import (multiple) '../../theme.config';
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | .ui.reveal {
|
25 | display: inherit;
|
26 | position: relative !important;
|
27 | font-size: 0;
|
28 | }
|
29 |
|
30 | .ui.reveal > .visible.content {
|
31 | position: absolute !important;
|
32 | top: 0 !important;
|
33 | left: 0 !important;
|
34 | z-index: @topZIndex !important;
|
35 | transition: @transition;
|
36 | }
|
37 | .ui.reveal > .hidden.content {
|
38 | position: relative !important;
|
39 | z-index: @bottomZIndex !important;
|
40 | }
|
41 |
|
42 |
|
43 | .ui.active.reveal .visible.content,
|
44 | .ui.reveal:hover .visible.content {
|
45 | z-index: @activeZIndex !important;
|
46 | }
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | & when (@variationRevealSlide) {
|
54 | |
55 |
|
56 |
|
57 |
|
58 | .ui.slide.reveal {
|
59 | position: relative !important;
|
60 | overflow: hidden !important;
|
61 | white-space: nowrap;
|
62 | }
|
63 |
|
64 | .ui.slide.reveal > .content {
|
65 | display: block;
|
66 | width: 100%;
|
67 | white-space: normal;
|
68 | float: left;
|
69 |
|
70 | margin: 0;
|
71 | transition: @slideTransition;
|
72 | }
|
73 |
|
74 | .ui.slide.reveal > .visible.content {
|
75 | position: relative !important;
|
76 | }
|
77 | .ui.slide.reveal > .hidden.content {
|
78 | position: absolute !important;
|
79 | left: 0 !important;
|
80 | width: 100% !important;
|
81 | transform: translateX(100%) !important;
|
82 | }
|
83 | .ui.slide.active.reveal > .visible.content,
|
84 | .ui.slide.reveal:hover > .visible.content {
|
85 | transform: translateX(-100%) !important;
|
86 | }
|
87 | .ui.slide.active.reveal > .hidden.content,
|
88 | .ui.slide.reveal:hover > .hidden.content {
|
89 | transform: translateX(0%) !important;
|
90 | }
|
91 |
|
92 | .ui.slide.right.reveal > .visible.content {
|
93 | transform: translateX(0%) !important;
|
94 | }
|
95 | .ui.slide.right.reveal > .hidden.content {
|
96 | transform: translateX(-100%) !important;
|
97 | }
|
98 | .ui.slide.right.active.reveal > .visible.content,
|
99 | .ui.slide.right.reveal:hover > .visible.content {
|
100 | transform: translateX(100%) !important;
|
101 | }
|
102 | .ui.slide.right.active.reveal > .hidden.content,
|
103 | .ui.slide.right.reveal:hover > .hidden.content {
|
104 | transform: translateX(0%) !important;
|
105 | }
|
106 |
|
107 | .ui.slide.up.reveal > .hidden.content {
|
108 | transform: translateY(100%) !important;
|
109 | }
|
110 | .ui.slide.up.active.reveal > .visible.content,
|
111 | .ui.slide.up.reveal:hover > .visible.content {
|
112 | transform: translateY(-100%) !important;
|
113 | }
|
114 | .ui.slide.up.active.reveal > .hidden.content,
|
115 | .ui.slide.up.reveal:hover > .hidden.content {
|
116 | transform: translateY(0%) !important;
|
117 | }
|
118 |
|
119 | .ui.slide.down.reveal > .hidden.content {
|
120 | transform: translateY(-100%) !important;
|
121 | }
|
122 | .ui.slide.down.active.reveal > .visible.content,
|
123 | .ui.slide.down.reveal:hover > .visible.content {
|
124 | transform: translateY(100%) !important;
|
125 | }
|
126 | .ui.slide.down.active.reveal > .hidden.content,
|
127 | .ui.slide.down.reveal:hover > .hidden.content {
|
128 | transform: translateY(0%) !important;
|
129 | }
|
130 | }
|
131 |
|
132 | & when (@variationRevealFade) {
|
133 | |
134 |
|
135 |
|
136 |
|
137 | .ui.fade.reveal > .visible.content {
|
138 | opacity: 1;
|
139 | }
|
140 | .ui.fade.active.reveal > .visible.content,
|
141 | .ui.fade.reveal:hover > .visible.content {
|
142 | opacity: 0;
|
143 | }
|
144 | }
|
145 |
|
146 | & when (@variationRevealMove) {
|
147 | |
148 |
|
149 |
|
150 |
|
151 | .ui.move.reveal {
|
152 | position: relative !important;
|
153 | overflow: hidden !important;
|
154 | white-space: nowrap;
|
155 | }
|
156 |
|
157 | .ui.move.reveal > .content {
|
158 | display: block;
|
159 | float: left;
|
160 | white-space: normal;
|
161 |
|
162 | margin: 0;
|
163 | transition: @moveTransition;
|
164 | }
|
165 |
|
166 | .ui.move.reveal > .visible.content {
|
167 | position: relative !important;
|
168 | }
|
169 | .ui.move.reveal > .hidden.content {
|
170 | position: absolute !important;
|
171 | left: 0 !important;
|
172 | width: 100% !important;
|
173 | }
|
174 | .ui.move.active.reveal > .visible.content,
|
175 | .ui.move.reveal:hover > .visible.content {
|
176 | transform: translateX(-100%) !important;
|
177 | }
|
178 | .ui.move.right.active.reveal > .visible.content,
|
179 | .ui.move.right.reveal:hover > .visible.content {
|
180 | transform: translateX(100%) !important;
|
181 | }
|
182 | .ui.move.up.active.reveal > .visible.content,
|
183 | .ui.move.up.reveal:hover > .visible.content {
|
184 | transform: translateY(-100%) !important;
|
185 | }
|
186 | .ui.move.down.active.reveal > .visible.content,
|
187 | .ui.move.down.reveal:hover > .visible.content {
|
188 | transform: translateY(100%) !important;
|
189 | }
|
190 | }
|
191 |
|
192 |
|
193 | & when (@variationRevealRotate) {
|
194 | |
195 |
|
196 |
|
197 |
|
198 | .ui.rotate.reveal > .visible.content {
|
199 | transition-duration: @transitionDuration;
|
200 | transform: rotate(0deg);
|
201 | }
|
202 |
|
203 | .ui.rotate.reveal > .visible.content,
|
204 | .ui.rotate.right.reveal > .visible.content {
|
205 | transform-origin: bottom right;
|
206 | }
|
207 | .ui.rotate.active.reveal > .visible.content,
|
208 | .ui.rotate.reveal:hover > .visible.content,
|
209 | .ui.rotate.right.active.reveal > .visible.content,
|
210 | .ui.rotate.right.reveal:hover > .visible.content {
|
211 | transform: rotate(@rotateDegrees);
|
212 | }
|
213 |
|
214 | .ui.rotate.left.reveal > .visible.content {
|
215 | transform-origin: bottom left;
|
216 | }
|
217 | .ui.rotate.left.active.reveal > .visible.content,
|
218 | .ui.rotate.left.reveal:hover > .visible.content {
|
219 | transform: rotate(-@rotateDegrees);
|
220 | }
|
221 | }
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 | & when (@variationRevealDisabled) {
|
228 | .ui.disabled.reveal:hover > .visible.visible.content {
|
229 | position: static !important;
|
230 | display: block !important;
|
231 | opacity: 1 !important;
|
232 | top: 0 !important;
|
233 | left: 0 !important;
|
234 | right: auto !important;
|
235 | bottom: auto !important;
|
236 | transform: none !important;
|
237 | }
|
238 | .ui.disabled.reveal:hover > .hidden.hidden.content {
|
239 | display: none !important;
|
240 | }
|
241 | }
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 | .ui.reveal > .ui.ribbon.label {
|
249 | z-index: @overlayZIndex;
|
250 | }
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 | .ui.visible.reveal {
|
261 | overflow: visible;
|
262 | }
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 | .ui.instant.reveal > .content {
|
269 | transition-delay: 0s !important;
|
270 | }
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 | .ui.reveal > .content {
|
278 | font-size: @medium;
|
279 | }
|
280 | & when not (@variationRevealSizes = false) {
|
281 | each(@variationRevealSizes, {
|
282 | @s: @@value;
|
283 | .ui.@{value}.reveal > .content {
|
284 | font-size: @s;
|
285 | }
|
286 | })
|
287 | }
|
288 |
|
289 | .loadUIOverrides();
|