comparison 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);
+    }
+}