annotate src/DML/MainVisBundle/Resources/assets/bem-blocks/config-grid-cells.less @ 0:493bcb69166c

added public content

@import "../config.less";

.config-grid-cells {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: @z-index_main-region + 9;
    overflow: hidden;
    left: @config-grid_collection--panel_view--width;
    top: @config-grid_collection--panel_entity--height;

    .config-grid_type_collection & {
    }
    .config-grid_type_recording & {
        left: @config-grid_recording--panel_view--width;
        top: @config-grid_recording--panel_entity--height;
    }

    // ==================================
    &__container_position_scrollable {
        .position_absolute_everywhere();
        overflow: scroll;
        z-index: @z-index_main-region + 50;
        background: rgba(0,0,0,0.0);
    }
    
    &__container_position_fixed {
        //.position_absolute_everywhere();
        position: absolute;
        pointer-events: none !important;
        top: 0px;
        left: 0px;
        overflow: hidden;
        z-index: @z-index_main-region + 20;
    }

    // ==================================
    &__space {
        position: absolute;
        z-index: @z-index_main-region + 51;
        overflow: hidden;
        padding-left: @config-grid--cells--margin-left;
        padding-right: @config-grid--cells--margin-right;
        padding-bottom: @config-grid--cells--margin-bottom;
    }
    .config-grid_type_collection &__space {
        padding-top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
    }
    .config-grid_type_recording &__space {
        padding-top: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
    }
    
    // ==================================
    // ==================================
    &__entity-headers-container {
        position: absolute;
        //position: fixed;
        top: 0;
        left: @config-grid--cells--margin-left;
        right: 0;
        height: 10px;
        overflow: visible;
        z-index: @z-index_main-region-cells + 5;
    }
    .config-grid_type_collection &__entity-headers-container {
        height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
    }
    .config-grid_type_recording &__entity-headers-container {
        height: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
    }
    
    // ==================================
    &__entity-headers-blind {
        .position_absolute_everywhere();
        z-index: @z-index_main-region-cells + 6;
        background: @--background-color;
    }

    // ==================================
    &__entity-header {
        .cursor_action();
        position: absolute;
        top: @config-grid--entity-header-margin-top;
        // left: 0; // defined by JS
        height: @config-grid_collection--entity-header-height;
        overflow: visible;
        z-index: @z-index_main-region-cells + 7;
    }
    .config-grid_type_collection &__entity-header {
        height: @config-grid_collection--entity-header-height;
    }
    .config-grid_type_recording &__entity-header {
        height:  @config-grid_recording--entity-header-height;
    }
    
    // ----------------------------------
    &__entity-header_kind_adder {
        width: 109px;
        height: @config-grid_collection--entity-header-height_adder !important;
    }

    // ----------------------------------
    &__entity-header_kind_pair &__entity-header-background {
        background: @--background-color !important;
    }
    &__entity-header_kind_pair&__entity-header_selected &__entity-header-label {
        color: @config-grid--color_panel-label !important;
    }

    
    // ----------------------------------
    &__entity-header_selected {
        .cursor_std();
    }
    
    // ==================================
    &__entity-header-background {
        .position_absolute_everywhere();
        border-radius: @--border-radius;
        border: @config-grid--header-border-size solid;
        background-color: @config-grid--color_panel-background;
        border-color: @config-grid--color_panel-background;
    }
    .config-grid_type_collection &__entity-header_selected &__entity-header-background {
        background-color: @config-grid_collection--color_panel-background;
        border-color: @config-grid_collection--color_panel-background;
    }
    .config-grid_type_recording &__entity-header_selected &__entity-header-background {
        background-color: @config-grid_recording--color_panel-background;
        border-color: @config-grid_recording--color_panel-background;
    }

    // ----------------------------------
    &__entity-header_selected &__entity-header-background {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        top: -@config-grid--entity-header-margin-top - @config-grid--header-border-size;
    }

    // ==================================
    &__entity-header-label {
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
        top: -4px;
        bottom: 0;
        left:  @config-grid--cells--header-padding-left;
        right: @config-grid--header-border-size;
        padding-top:   @config-grid--cells--header-padding-top_entity;
        color: @config-grid--color_panel-label;
    }
    &__entity-header:hover &__entity-header-label {
        color: @config-grid--color_panel-label-hovered;
    }
    .config-grid_type_collection &__entity-header_selected:hover &__entity-header-label,
    .config-grid_type_collection &__entity-header_selected &__entity-header-label
     {
        color: @config-grid_collection--color_panel-label;
    }
    .config-grid_type_recording &__entity-header_selected:hover &__entity-header-label,
    .config-grid_type_recording &__entity-header_selected &__entity-header-label {
        color: @config-grid_recording--color_panel-label;
    }

    // ----------------------------------
    &__entity-header-label_row2 {
        top: 14px;
    }
    .config-grid_type_collection &__entity-header-label_row2 {
        .font_small();
    }
    
    // ----------------------------------
    &__entity-header_kind_adder &__entity-header-label {
        position: relative;
        text-align: center;
        left: 0;
        right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    // ==================================
    &__entity-header-label-fader {
        position: absolute;
        top:   @config-grid--header-border-size;
        bottom:@config-grid--header-border-size;
        right: @config-grid--header-border-size;
        width: @config-grid--header-fader-width;
        .text-fader-background-gradient(@config-grid--color_panel-background);
    }
    .config-grid_type_collection &__entity-header_selected &__entity-header-label-fader {
        .text-fader-background-gradient(@config-grid_collection--color_panel-background);
    }
    .config-grid_type_recording &__entity-header_selected &__entity-header-label-fader {
        .text-fader-background-gradient(@config-grid_recording--color_panel-background);
    }
    &__entity-header_kind_pair &__entity-header-label-fader,
    &__entity-header_kind_pair&__entity-header_selected &__entity-header-label-fader {
        .text-fader-background-gradient(@--background-color);
    }


    // ==================================
    // ==================================
    &__view-headers-container {
        position: absolute;
        //position: fixed;
        left: 0;
        top: 0;
        right: 0;
        padding-right: @config-grid--cells--margin-left;
        overflow: visible;
        z-index: @z-index_main-region-cells + 2;
    }
    .config-grid_type_collection &__view-headers-container {
        top:    @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
    }
    .config-grid_type_recording &__view-headers-container {
        top:    @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
    }
    
    // ==================================
    &__view-headers-blind {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: @config-grid--cells--margin-left;
        z-index: @z-index_main-region-cells + 3;
        background: @--background-color;
    }

    // ==================================
    &__view-header {
        .cursor_action();
        position: absolute;
        top: 0; // defined by JS
        left: @config-grid--cells--margin-left;
        right: 0;
        height: @config-grid--view-header-height;
        overflow: visible;
        z-index: @z-index_main-region-cells + 4;
    }

    // ----------------------------------
    &__view-header_kind_adder {
        right: auto;
        width: auto;
    }

    // ----------------------------------
    &__view-header_selected {
        .cursor_std();
    }

    // ==================================
    &__view-header-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-top-left-radius: @--border-radius;
        border-bottom-left-radius: @--border-radius;
        background-color: @config-grid--color_panel-background;
    }
    .config-grid_type_collection &__view-header_selected &__view-header-background {
        background-color: @config-grid_collection--color_panel-background;
    }
    .config-grid_type_recording &__view-header_selected &__view-header-background {
        background-color: @config-grid_recording--color_panel-background;
    }

    // ----------------------------------
    &__view-header_kind_adder &__view-header-background {
        border-top-right-radius: @--border-radius;
        border-bottom-right-radius: @--border-radius;
    }

    // ----------------------------------
    &__view-header_selected &__view-header-background {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        left: -@config-grid--cells--margin-left;
    }

    // ==================================
    &__view-header-label {
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-left:  @config-grid--cells--header-padding-left;
        padding-right: @config-grid--cells--header-padding-left;
        padding-top:   @config-grid--cells--header-padding-top_view;
        color: @config-grid--color_panel-label;
    }
    &__view-header:hover &__view-header-label {
        color: @config-grid--color_panel-label-hovered;
    }
    .config-grid_type_collection &__view-header_selected:hover &__view-header-label,
    .config-grid_type_collection &__view-header_selected &__view-header-label {
        color: @config-grid_collection--color_panel-label;
    }
    .config-grid_type_recording &__view-header_selected:hover &__view-header-label,
    .config-grid_type_recording &__view-header_selected &__view-header-label {
        color: @config-grid_recording--color_panel-label;
    }

    // ----------------------------------
    &__view-header_kind_adder &__view-header-label {
        position: relative;
    }

    // ==================================
    &__view-header-label-part_modified {
        text-decoration: line-through;
    }
    
    // ==================================
    // ==================================
    &__corner-blind {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: @config-grid--cells--margin-left;
        z-index: @z-index_main-region-cells + 9;
        background: @--background-color;
    }
    .config-grid_type_collection &__corner-blind {
        height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
    }
    .config-grid_type_recording &__corner-blind {
        height: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
    }

    // ==================================
    &__vis-instances-container {
        position: absolute;
        left: @config-grid--cells--margin-left;
        top: 0;
        width: 0;
        height: 0;
        overflow: visible;
        z-index: @z-index_main-region-cells + 1;
    }
    .config-grid_type_collection &__vis-instances-container {
        top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
    }
    .config-grid_type_recording &__vis-instances-container {
        top: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
    }

    &__vis-instance {
        background: @--background-color;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }
}