view src/DML/MainVisBundle/Resources/assets/bem-blocks/main-region.less @ 1:f38015048f48 tip

Added GPL

@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));
    }
}