comparison src/DML/MainVisBundle/Resources/assets/bem-blocks/main-region.less @ 0:493bcb69166c

added public content

+@import "../config.less";
+
+.main-region {
+    
+    @perspective: 900px;
+    @duration: .75s;
+    
+    .font_standard();
+
+    position: absolute;
+    top: @main-menu--height;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: @z-index_main-region;
+    
+    // ==================================
+    
+    &__config-grid {
+        .position_absolute_everywhere();
+        z-index: @z-index_main-region + 2;
+    }
+
+    // ==================================
+    &__flipper-container {
+        background-color: #ccc;
+        .box-shadow(inset 0px 5px 5px 0px rgba(0,0,0,0.2));
+        .position_absolute_everywhere();
+        .perspective(@perspective);
+        z-index: @z-index_main-region-flipper;
+    }
+    &__flipper {
+        .position_absolute_everywhere();
+        .transform-style(preserve-3d);
+        .transition(transform @duration);
+        .transform-origin(right center);
+        z-index: @z-index_main-region-flipper + 1;
+        .backface-visibility(hidden);
+    }
+
+    &__flipper_to_recording {
+        .transform(translateX(-100%) rotateY(-180deg));
+    }
+
+    &__flipper &__config-grid {
+        .transition(transform @duration);
+        .transform-style(preserve-3d);
+    }
+    &__flipper_animating &__config-grid {
+        .backface-visibility(hidden);
+    }
+    
+    &__flipper &__config-grid.config-grid_type_collection {
+        z-index:  @z-index_main-region-flipper + 3;
+        //background: #f00;
+    } 
+
+    &__flipper &__config-grid.config-grid_type_recording {
+        z-index:  @z-index_main-region-flipper + 2;
+        .transform(rotateY(180deg));
+        //background: #0f0;
+    }
+
+    .ie &__flipper &__config-grid {
+    }
+
+    .ie &__flipper &__config-grid.config-grid_type_recording {
+        .transform(rotateY(0deg));
+    }
+
+    .ie &__flipper_to_recording {
+        .transform(translateX(0px) rotateY(0deg));
+    }
+
+    .ie &__flipper_animating &__config-grid {
+        .transform-origin(center center);
+    }
+ 
+    .ie &__flipper_to_collection &__config-grid.config-grid_type_collection,
+    .ie &__flipper_to_recording  &__config-grid.config-grid_type_recording {
+        .transform(perspective(@perspective) rotateY(0deg));
+    }
+
+    .ie &__flipper_to_collection &__config-grid.config-grid_type_recording {
+        .transform(perspective(@perspective) rotateY(180deg));
+    }
+    .ie &__flipper_to_recording  &__config-grid.config-grid_type_collection { 
+        .transform(perspective(@perspective) rotateY(-180deg));
+    }
+}