|
Daniel@0
|
1 @import "../config.less";
|
|
Daniel@0
|
2
|
|
Daniel@0
|
3 .main-region {
|
|
Daniel@0
|
4
|
|
Daniel@0
|
5 @perspective: 900px;
|
|
Daniel@0
|
6 @duration: .75s;
|
|
Daniel@0
|
7
|
|
Daniel@0
|
8 .font_standard();
|
|
Daniel@0
|
9
|
|
Daniel@0
|
10 position: absolute;
|
|
Daniel@0
|
11 top: @main-menu--height;
|
|
Daniel@0
|
12 bottom: 0;
|
|
Daniel@0
|
13 right: 0;
|
|
Daniel@0
|
14 left: 0;
|
|
Daniel@0
|
15 z-index: @z-index_main-region;
|
|
Daniel@0
|
16
|
|
Daniel@0
|
17 // ==================================
|
|
Daniel@0
|
18
|
|
Daniel@0
|
19 &__config-grid {
|
|
Daniel@0
|
20 .position_absolute_everywhere();
|
|
Daniel@0
|
21 z-index: @z-index_main-region + 2;
|
|
Daniel@0
|
22 }
|
|
Daniel@0
|
23
|
|
Daniel@0
|
24 // ==================================
|
|
Daniel@0
|
25 &__flipper-container {
|
|
Daniel@0
|
26 background-color: #ccc;
|
|
Daniel@0
|
27 .box-shadow(inset 0px 5px 5px 0px rgba(0,0,0,0.2));
|
|
Daniel@0
|
28 .position_absolute_everywhere();
|
|
Daniel@0
|
29 .perspective(@perspective);
|
|
Daniel@0
|
30 z-index: @z-index_main-region-flipper;
|
|
Daniel@0
|
31 }
|
|
Daniel@0
|
32 &__flipper {
|
|
Daniel@0
|
33 .position_absolute_everywhere();
|
|
Daniel@0
|
34 .transform-style(preserve-3d);
|
|
Daniel@0
|
35 .transition(transform @duration);
|
|
Daniel@0
|
36 .transform-origin(right center);
|
|
Daniel@0
|
37 z-index: @z-index_main-region-flipper + 1;
|
|
Daniel@0
|
38 .backface-visibility(hidden);
|
|
Daniel@0
|
39 }
|
|
Daniel@0
|
40
|
|
Daniel@0
|
41 &__flipper_to_recording {
|
|
Daniel@0
|
42 .transform(translateX(-100%) rotateY(-180deg));
|
|
Daniel@0
|
43 }
|
|
Daniel@0
|
44
|
|
Daniel@0
|
45 &__flipper &__config-grid {
|
|
Daniel@0
|
46 .transition(transform @duration);
|
|
Daniel@0
|
47 .transform-style(preserve-3d);
|
|
Daniel@0
|
48 }
|
|
Daniel@0
|
49 &__flipper_animating &__config-grid {
|
|
Daniel@0
|
50 .backface-visibility(hidden);
|
|
Daniel@0
|
51 }
|
|
Daniel@0
|
52
|
|
Daniel@0
|
53 &__flipper &__config-grid.config-grid_type_collection {
|
|
Daniel@0
|
54 z-index: @z-index_main-region-flipper + 3;
|
|
Daniel@0
|
55 //background: #f00;
|
|
Daniel@0
|
56 }
|
|
Daniel@0
|
57
|
|
Daniel@0
|
58 &__flipper &__config-grid.config-grid_type_recording {
|
|
Daniel@0
|
59 z-index: @z-index_main-region-flipper + 2;
|
|
Daniel@0
|
60 .transform(rotateY(180deg));
|
|
Daniel@0
|
61 //background: #0f0;
|
|
Daniel@0
|
62 }
|
|
Daniel@0
|
63
|
|
Daniel@0
|
64 .ie &__flipper &__config-grid {
|
|
Daniel@0
|
65 }
|
|
Daniel@0
|
66
|
|
Daniel@0
|
67 .ie &__flipper &__config-grid.config-grid_type_recording {
|
|
Daniel@0
|
68 .transform(rotateY(0deg));
|
|
Daniel@0
|
69 }
|
|
Daniel@0
|
70
|
|
Daniel@0
|
71 .ie &__flipper_to_recording {
|
|
Daniel@0
|
72 .transform(translateX(0px) rotateY(0deg));
|
|
Daniel@0
|
73 }
|
|
Daniel@0
|
74
|
|
Daniel@0
|
75 .ie &__flipper_animating &__config-grid {
|
|
Daniel@0
|
76 .transform-origin(center center);
|
|
Daniel@0
|
77 }
|
|
Daniel@0
|
78
|
|
Daniel@0
|
79 .ie &__flipper_to_collection &__config-grid.config-grid_type_collection,
|
|
Daniel@0
|
80 .ie &__flipper_to_recording &__config-grid.config-grid_type_recording {
|
|
Daniel@0
|
81 .transform(perspective(@perspective) rotateY(0deg));
|
|
Daniel@0
|
82 }
|
|
Daniel@0
|
83
|
|
Daniel@0
|
84 .ie &__flipper_to_collection &__config-grid.config-grid_type_recording {
|
|
Daniel@0
|
85 .transform(perspective(@perspective) rotateY(180deg));
|
|
Daniel@0
|
86 }
|
|
Daniel@0
|
87 .ie &__flipper_to_recording &__config-grid.config-grid_type_collection {
|
|
Daniel@0
|
88 .transform(perspective(@perspective) rotateY(-180deg));
|
|
Daniel@0
|
89 }
|
|
Daniel@0
|
90 } |
