view src/DML/MainVisBundle/Resources/assets/bem-blocks/vis-instance-content/vic-list.less @ 0:493bcb69166c

added public content

@import "../../config.less";

.vic-list {
    .font_small();
    padding-top: 5px;
    
    @item-height: 15px;
    @command-size: 15px;
    @command-top: 0px;

    @action-right_audio: 35px;
    @action-right_analyze: 50px;
    
    // ----------------------------------
    
    // ==================================
    &__item {
        position: relative;
        height: @item-height;
        line-height: @item-height;
//        color: @config-grid--color_panel-label;
        color: @config-grid--color_panel-label-hovered;
        cursor: pointer;
        .border-radius(@--border-radius);
    }

    &__item:hover {
        //color: @config-grid--color_panel-label-hovered;
        background: mix(@config-grid--color_panel-background, #fff, 50%);
    }
    
    &__item_status_selected {
        .cursor_std();
        background: @config-grid--color_panel-background !important;
    }
    

    // ==================================
    &__item-label {
        position: absolute;
        left: @config-grid--cells--header-padding-left;
        right: 70px;
        height: 15px;
        overflow: hidden;
        white-space: nowrap;
    }

    // ==================================
    &__item-year {
        position: absolute;
        top: 0;
        right: @config-grid--cells--header-padding-left;
    }

    // ==================================
    &__item-audio {
        
    }

    // ==================================
    &__item-command {
        pointer-events: none;
        display: block;
        position: absolute;
        height: @command-size;
        width: @command-size;
        top: @command-top;
    }
    &__item-command i {
        .position_absolute_everywhere();
    }

    &__item_status_selected &__item-command {
        .cursor_action();
    }
    
    &__item_status_selected &__item-command:active {
        top: 1px;
    }

    // ----------------------------------
    &__item-command_action_audio {
        right: @action-right_audio;
        opacity: .2;
    }
    &__item_status_selected &__item-command_action_audio {
        opacity: .5;
        pointer-events: all; 
    }
    &__item_status_selected &__item-command_action_audio:hover {
        opacity: 1;
        
    }
    
    &__item-command_action_audio i {
        background-size: @command-size;
        background-position: center center;
        background-image: url("@{bem-path}/vis-instance-content/vic-list/item-command_action_play_note_2.svg");
    }


    // ----------------------------------
    &__item-command_action_analyze {
        right: @action-right_analyze;
    }
    

    &__item-command_action_analyze {
        display: none;
    }

    @circle-size: 7px;
    @circle-offset: 3px;
    @smaller-by: 6px;
    &__item-command_action_analyze i{
        border: 1px solid @config-grid_recording--color_main;
        height: @circle-size;
        width: @circle-size;
        .border-radius(@circle-size);
    }
        //right: @action-right_analyze + @smaller-by / 2 + 1;

    &__item-command_action_analyze&__item-command_status_toggled {
        display: block;
        //opacity: 0.5;
    }
    &__item-command_action_analyze&__item-command_status_toggled i {
        background: @config-grid_recording--color_main;
        border: 1px solid @config-grid_recording--color_main;
        height: @circle-size - @smaller-by;
        width: @circle-size - @smaller-by;
        top:  @circle-offset + @smaller-by / 2;
        left: @circle-offset + @smaller-by / 2;
    }
    &__item_status_selected &__item-command_action_analyze {
        pointer-events: all; 
        display: block;
        opacity: 1;
    }
    &__item_status_selected &__item-command_action_analyze i {
        border: 1px solid @config-grid_recording--color_main;
        height: @circle-size;
        width: @circle-size;
        top:  @circle-offset;
        left: @circle-offset;
    }
    
    &__item-command_action_status_toggled {
    }

    &__item_status_selected &__item-command_action_analyze:hover i {
        background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.3);
    }
    &__item_status_selected &__item-command_status_toggled&__item-command_action_analyze:hover i {
        background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.7);
    }


    // ==================================
    &__flying-circle {
        position: fixed;
        height: @circle-size;
        width: @circle-size;
        border: 1px solid @config-grid_recording--color_main;
        background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.5);
        z-index: @z-index_flying-circle;
        .border-radius(@circle-size);
        pointer-events: none;
    }
    &__flying-circle_type_adding {}
    &__flying-circle_type_removing {}
    
    // ==================================
    // used in help material
    &__circle-within-text {
        display: inline-block;
        height: @circle-size;
        width: @circle-size;
        border: 1px solid @config-grid_recording--color_main;
        .border-radius(@circle-size);
    }
}