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