annotate src/DML/MainVisBundle/Resources/assets/bem-blocks/vis-instance-content/vic-list.less @ 1:f38015048f48 tip

Added GPL
author Daniel Wolff
date Sat, 13 Feb 2016 20:43:38 +0100
parents 493bcb69166c
children
rev   line source
Daniel@0 1 @import "../../config.less";
Daniel@0 2
Daniel@0 3 .vic-list {
Daniel@0 4 .font_small();
Daniel@0 5 padding-top: 5px;
Daniel@0 6
Daniel@0 7 @item-height: 15px;
Daniel@0 8 @command-size: 15px;
Daniel@0 9 @command-top: 0px;
Daniel@0 10
Daniel@0 11 @action-right_audio: 35px;
Daniel@0 12 @action-right_analyze: 50px;
Daniel@0 13
Daniel@0 14 // ----------------------------------
Daniel@0 15
Daniel@0 16 // ==================================
Daniel@0 17 &__item {
Daniel@0 18 position: relative;
Daniel@0 19 height: @item-height;
Daniel@0 20 line-height: @item-height;
Daniel@0 21 // color: @config-grid--color_panel-label;
Daniel@0 22 color: @config-grid--color_panel-label-hovered;
Daniel@0 23 cursor: pointer;
Daniel@0 24 .border-radius(@--border-radius);
Daniel@0 25 }
Daniel@0 26
Daniel@0 27 &__item:hover {
Daniel@0 28 //color: @config-grid--color_panel-label-hovered;
Daniel@0 29 background: mix(@config-grid--color_panel-background, #fff, 50%);
Daniel@0 30 }
Daniel@0 31
Daniel@0 32 &__item_status_selected {
Daniel@0 33 .cursor_std();
Daniel@0 34 background: @config-grid--color_panel-background !important;
Daniel@0 35 }
Daniel@0 36
Daniel@0 37
Daniel@0 38 // ==================================
Daniel@0 39 &__item-label {
Daniel@0 40 position: absolute;
Daniel@0 41 left: @config-grid--cells--header-padding-left;
Daniel@0 42 right: 70px;
Daniel@0 43 height: 15px;
Daniel@0 44 overflow: hidden;
Daniel@0 45 white-space: nowrap;
Daniel@0 46 }
Daniel@0 47
Daniel@0 48 // ==================================
Daniel@0 49 &__item-year {
Daniel@0 50 position: absolute;
Daniel@0 51 top: 0;
Daniel@0 52 right: @config-grid--cells--header-padding-left;
Daniel@0 53 }
Daniel@0 54
Daniel@0 55 // ==================================
Daniel@0 56 &__item-audio {
Daniel@0 57
Daniel@0 58 }
Daniel@0 59
Daniel@0 60 // ==================================
Daniel@0 61 &__item-command {
Daniel@0 62 pointer-events: none;
Daniel@0 63 display: block;
Daniel@0 64 position: absolute;
Daniel@0 65 height: @command-size;
Daniel@0 66 width: @command-size;
Daniel@0 67 top: @command-top;
Daniel@0 68 }
Daniel@0 69 &__item-command i {
Daniel@0 70 .position_absolute_everywhere();
Daniel@0 71 }
Daniel@0 72
Daniel@0 73 &__item_status_selected &__item-command {
Daniel@0 74 .cursor_action();
Daniel@0 75 }
Daniel@0 76
Daniel@0 77 &__item_status_selected &__item-command:active {
Daniel@0 78 top: 1px;
Daniel@0 79 }
Daniel@0 80
Daniel@0 81 // ----------------------------------
Daniel@0 82 &__item-command_action_audio {
Daniel@0 83 right: @action-right_audio;
Daniel@0 84 opacity: .2;
Daniel@0 85 }
Daniel@0 86 &__item_status_selected &__item-command_action_audio {
Daniel@0 87 opacity: .5;
Daniel@0 88 pointer-events: all;
Daniel@0 89 }
Daniel@0 90 &__item_status_selected &__item-command_action_audio:hover {
Daniel@0 91 opacity: 1;
Daniel@0 92
Daniel@0 93 }
Daniel@0 94
Daniel@0 95 &__item-command_action_audio i {
Daniel@0 96 background-size: @command-size;
Daniel@0 97 background-position: center center;
Daniel@0 98 background-image: url("@{bem-path}/vis-instance-content/vic-list/item-command_action_play_note_2.svg");
Daniel@0 99 }
Daniel@0 100
Daniel@0 101
Daniel@0 102 // ----------------------------------
Daniel@0 103 &__item-command_action_analyze {
Daniel@0 104 right: @action-right_analyze;
Daniel@0 105 }
Daniel@0 106
Daniel@0 107
Daniel@0 108 &__item-command_action_analyze {
Daniel@0 109 display: none;
Daniel@0 110 }
Daniel@0 111
Daniel@0 112 @circle-size: 7px;
Daniel@0 113 @circle-offset: 3px;
Daniel@0 114 @smaller-by: 6px;
Daniel@0 115 &__item-command_action_analyze i{
Daniel@0 116 border: 1px solid @config-grid_recording--color_main;
Daniel@0 117 height: @circle-size;
Daniel@0 118 width: @circle-size;
Daniel@0 119 .border-radius(@circle-size);
Daniel@0 120 }
Daniel@0 121 //right: @action-right_analyze + @smaller-by / 2 + 1;
Daniel@0 122
Daniel@0 123 &__item-command_action_analyze&__item-command_status_toggled {
Daniel@0 124 display: block;
Daniel@0 125 //opacity: 0.5;
Daniel@0 126 }
Daniel@0 127 &__item-command_action_analyze&__item-command_status_toggled i {
Daniel@0 128 background: @config-grid_recording--color_main;
Daniel@0 129 border: 1px solid @config-grid_recording--color_main;
Daniel@0 130 height: @circle-size - @smaller-by;
Daniel@0 131 width: @circle-size - @smaller-by;
Daniel@0 132 top: @circle-offset + @smaller-by / 2;
Daniel@0 133 left: @circle-offset + @smaller-by / 2;
Daniel@0 134 }
Daniel@0 135 &__item_status_selected &__item-command_action_analyze {
Daniel@0 136 pointer-events: all;
Daniel@0 137 display: block;
Daniel@0 138 opacity: 1;
Daniel@0 139 }
Daniel@0 140 &__item_status_selected &__item-command_action_analyze i {
Daniel@0 141 border: 1px solid @config-grid_recording--color_main;
Daniel@0 142 height: @circle-size;
Daniel@0 143 width: @circle-size;
Daniel@0 144 top: @circle-offset;
Daniel@0 145 left: @circle-offset;
Daniel@0 146 }
Daniel@0 147
Daniel@0 148 &__item-command_action_status_toggled {
Daniel@0 149 }
Daniel@0 150
Daniel@0 151 &__item_status_selected &__item-command_action_analyze:hover i {
Daniel@0 152 background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.3);
Daniel@0 153 }
Daniel@0 154 &__item_status_selected &__item-command_status_toggled&__item-command_action_analyze:hover i {
Daniel@0 155 background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.7);
Daniel@0 156 }
Daniel@0 157
Daniel@0 158
Daniel@0 159 // ==================================
Daniel@0 160 &__flying-circle {
Daniel@0 161 position: fixed;
Daniel@0 162 height: @circle-size;
Daniel@0 163 width: @circle-size;
Daniel@0 164 border: 1px solid @config-grid_recording--color_main;
Daniel@0 165 background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.5);
Daniel@0 166 z-index: @z-index_flying-circle;
Daniel@0 167 .border-radius(@circle-size);
Daniel@0 168 pointer-events: none;
Daniel@0 169 }
Daniel@0 170 &__flying-circle_type_adding {}
Daniel@0 171 &__flying-circle_type_removing {}
Daniel@0 172
Daniel@0 173 // ==================================
Daniel@0 174 // used in help material
Daniel@0 175 &__circle-within-text {
Daniel@0 176 display: inline-block;
Daniel@0 177 height: @circle-size;
Daniel@0 178 width: @circle-size;
Daniel@0 179 border: 1px solid @config-grid_recording--color_main;
Daniel@0 180 .border-radius(@circle-size);
Daniel@0 181 }
Daniel@0 182 }