annotate src/DML/MainVisBundle/Resources/assets/bem-blocks/config-grid-panel.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 .config-grid-panel {
Daniel@0 4 position: absolute;
Daniel@0 5 z-index: @z-index_main-region + 20;
Daniel@0 6
Daniel@0 7 // ----------------------------------
Daniel@0 8
Daniel@0 9 // ----------------------------------
Daniel@0 10 &_dimension_entity {
Daniel@0 11 top: 0;
Daniel@0 12 right: 0;
Daniel@0 13 left: @config-grid_collection--panel_entity--left;
Daniel@0 14 height: @config-grid_collection--panel_entity--height;
Daniel@0 15 }
Daniel@0 16 .config-grid_type_collection &_dimension_entity {
Daniel@0 17 }
Daniel@0 18 .config-grid_type_recording &_dimension_entity {
Daniel@0 19 left: @config-grid_recording--panel_entity--left;
Daniel@0 20 height: @config-grid_recording--panel_entity--height;
Daniel@0 21 }
Daniel@0 22
Daniel@0 23 // ----------------------------------
Daniel@0 24 &_dimension_view {
Daniel@0 25 bottom: 0;
Daniel@0 26 top: @config-grid_collection--panel_view--top;
Daniel@0 27 width: @config-grid_collection--panel_view--width;
Daniel@0 28 }
Daniel@0 29 .config-grid_type_collection &_dimension_view {
Daniel@0 30 }
Daniel@0 31 .config-grid_type_recording &_dimension_view {
Daniel@0 32 top: @config-grid_recording--panel_view--top;
Daniel@0 33 width: @config-grid_recording--panel_view--width;
Daniel@0 34 }
Daniel@0 35
Daniel@0 36 // ==================================
Daniel@0 37 &__background {
Daniel@0 38 .position_absolute_everywhere;
Daniel@0 39 background: @config-grid--color_panel-background;
Daniel@0 40 }
Daniel@0 41 .config-grid_type_collection &__background {
Daniel@0 42 background: @config-grid_collection--color_panel-background;
Daniel@0 43 }
Daniel@0 44 .config-grid_type_recording &__background {
Daniel@0 45 background: @config-grid_recording--color_panel-background;
Daniel@0 46 }
Daniel@0 47 &_dimension_entity &__background {
Daniel@0 48 border-bottom-left-radius: @--border-radius;
Daniel@0 49 }
Daniel@0 50 &_dimension_view &__background {
Daniel@0 51 border-top-right-radius: @--border-radius;
Daniel@0 52 }
Daniel@0 53
Daniel@0 54 // ==================================
Daniel@0 55 &__main-area-wrapper {
Daniel@0 56 position: absolute;
Daniel@0 57 overflow: hidden;
Daniel@0 58 }
Daniel@0 59
Daniel@0 60 &_dimension_entity &__main-area-wrapper {
Daniel@0 61 position: absolute;
Daniel@0 62 top: 0;
Daniel@0 63 white-space: nowrap;
Daniel@0 64 left: 2.7 * @config-grid-panel--command-size + 10px;
Daniel@0 65 right: 0;
Daniel@0 66 bottom: 0;
Daniel@0 67 overflow: hidden;
Daniel@0 68 //overflow-x: scroll;
Daniel@0 69 }
Daniel@0 70
Daniel@0 71 &_dimension_view &__main-area-wrapper {
Daniel@0 72 position: absolute;
Daniel@0 73 top: @config-grid-panel--command-size + 10px;
Daniel@0 74 left: 0;
Daniel@0 75 right: 0;
Daniel@0 76 bottom: 0;
Daniel@0 77 overflow: hidden;
Daniel@0 78 //overflow-y: scroll;
Daniel@0 79 }
Daniel@0 80
Daniel@0 81 // ==================================
Daniel@0 82 &__main-area {
Daniel@0 83 }
Daniel@0 84
Daniel@0 85 // ==================================
Daniel@0 86 &__commands {
Daniel@0 87 text-align: center;
Daniel@0 88 line-height: @config-grid-panel--command-size;
Daniel@0 89 }
Daniel@0 90
Daniel@0 91 &_dimension_entity &__commands {
Daniel@0 92 padding-top: 10px;
Daniel@0 93 position: relative;
Daniel@0 94 margin-left: 12px;
Daniel@0 95 float: left;
Daniel@0 96 //border-right: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0 97 }
Daniel@0 98 &_dimension_entity &__commands {
Daniel@0 99 width: 2.7 * @config-grid-panel--command-size;
Daniel@0 100 }
Daniel@0 101 .config-grid_type_recording &_dimension_entity &__commands {
Daniel@0 102 width: 2.5 * @config-grid-panel--command-size;
Daniel@0 103 text-align: left;
Daniel@0 104 }
Daniel@0 105 .config-grid_type_recording &_dimension_entity&_master-kind_pair &__commands {
Daniel@0 106 width: 5.7 * @config-grid-panel--command-size;
Daniel@0 107 }
Daniel@0 108
Daniel@0 109 &_dimension_view &__commands {
Daniel@0 110 padding-top: 10px;
Daniel@0 111 height: @config-grid-panel--command-size;
Daniel@0 112 //border-top: 1px solid mix(@config-grid--color_collection, #fff, 10%);
Daniel@0 113 }
Daniel@0 114
Daniel@0 115 // ==================================
Daniel@0 116 &_dimension_entity &__command-group {
Daniel@0 117 display: block;
Daniel@0 118 position: absolute;
Daniel@0 119 width: @config-grid-panel--command-size;
Daniel@0 120 height: 2 * @config-grid-panel--command-size;
Daniel@0 121 }
Daniel@0 122
Daniel@0 123 &_dimension_view &__command-group,
Daniel@0 124 .config-grid_type_recording &_dimension_entity &__command-group {
Daniel@0 125 display: inline-block;
Daniel@0 126 width: 2 * @config-grid-panel--command-size + @config-grid-panel--command-margin-h_views;
Daniel@0 127 height: @config-grid-panel--command-size;
Daniel@0 128 }
Daniel@0 129
Daniel@0 130 &_dimension_entity &__command-group_type_clone-delete {
Daniel@0 131 padding-bottom: 10px;
Daniel@0 132 }
Daniel@0 133 &_dimension_entity &__command-group_type_discard-apply {
Daniel@0 134 left: 1.45 * @config-grid-panel--command-size;
Daniel@0 135 }
Daniel@0 136
Daniel@0 137 &_dimension_view &__command-group_type_clone-delete {
Daniel@0 138 //border-left: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0 139 //border-right: 1px solid #fff;
Daniel@0 140 //border-right: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0 141 padding-right: 10px;
Daniel@0 142 margin-right: 10px;
Daniel@0 143 }
Daniel@0 144 .config-grid_type_recording &_dimension_entity &__command-group_type_clone-delete {
Daniel@0 145 //border-left: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0 146 //border-right: 1px solid #fff;
Daniel@0 147 //border-right: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0 148 padding-right: 10px;
Daniel@0 149 margin-right: 0px;
Daniel@0 150 }
Daniel@0 151
Daniel@0 152 // ==================================
Daniel@0 153 &__command {
Daniel@0 154 .cursor_std();
Daniel@0 155 overflow: visible;
Daniel@0 156 position: relative;
Daniel@0 157 display: inline-block;
Daniel@0 158 width: @config-grid-panel--command-size;
Daniel@0 159 height: @config-grid-panel--command-size;
Daniel@0 160 opactity: 0.5;
Daniel@0 161 //background: mix(@config-grid--color_collection, #fff, 20%);
Daniel@0 162 border-radius: 5px;
Daniel@0 163 }
Daniel@0 164
Daniel@0 165 &_dimension_entity &__command {
Daniel@0 166 display: block;
Daniel@0 167 }
Daniel@0 168 .config-grid_type_recording &_dimension_entity &__command {
Daniel@0 169 display: inline-block;
Daniel@0 170 }
Daniel@0 171
Daniel@0 172 &__command i {
Daniel@0 173 display: block;
Daniel@0 174 position: absolute;
Daniel@0 175 width: @config-grid-panel--command-size;
Daniel@0 176 height: @config-grid-panel--command-size;
Daniel@0 177 background-repeat: no-repeat;
Daniel@0 178 background-position: center center;
Daniel@0 179 opacity: 0.05;
Daniel@0 180 }
Daniel@0 181 &__command_state_enabled {
Daniel@0 182 .cursor_action();
Daniel@0 183 }
Daniel@0 184 &__command_state_enabled i {
Daniel@0 185 opacity: 0.35;
Daniel@0 186 }
Daniel@0 187
Daniel@0 188 &__command_state_enabled:hover i {
Daniel@0 189 opacity: 1;
Daniel@0 190 }
Daniel@0 191 &__command_flashing i,
Daniel@0 192 &__command_state_enabled:active i {
Daniel@0 193 //background: mix(@config-grid--color_collection, #fff, 20%);
Daniel@0 194 top: 1px;
Daniel@0 195 }
Daniel@0 196
Daniel@0 197 &__command_action_apply {
Daniel@0 198 //background-image: data-uri('image/svg+xml;charset=UTF-8', "./config-grid-panel/command/apply.svg");
Daniel@0 199 }
Daniel@0 200
Daniel@0 201 &_dimension_entity &__command_action_previous i {
Daniel@0 202 background-image: url("@{bem-path}/config-grid-panel/command/arrow_left.svg");
Daniel@0 203 }
Daniel@0 204 &_dimension_view &__command_action_previous i {
Daniel@0 205 background-image: url("@{bem-path}/config-grid-panel/command/arrow_up.svg");
Daniel@0 206 }
Daniel@0 207 &_dimension_entity &__command_action_next i {
Daniel@0 208 background-image: url("@{bem-path}/config-grid-panel/command/arrow_down.svg");
Daniel@0 209 }
Daniel@0 210 &_dimension_view &__command_action_next i {
Daniel@0 211 background-image: url("@{bem-path}/config-grid-panel/command/arrow_right.svg");
Daniel@0 212 }
Daniel@0 213 &__command_action_clone i {
Daniel@0 214 background-image: url("@{bem-path}/config-grid-panel/command/clone_filled.svg");
Daniel@0 215 }
Daniel@0 216 &__command_action_delete i {
Daniel@0 217 background-image: url("@{bem-path}/config-grid-panel/command/delete_filled.svg");
Daniel@0 218 }
Daniel@0 219 &__command_action_discard i {
Daniel@0 220 background-image: url("@{bem-path}/config-grid-panel/command/discard_r.svg");
Daniel@0 221 }
Daniel@0 222 &__command_action_apply i {
Daniel@0 223 background-image: url("@{bem-path}/config-grid-panel/command/apply_r.svg");
Daniel@0 224 }
Daniel@0 225
Daniel@0 226 &_dimension_view &__command_action_clone,
Daniel@0 227 .config-grid_type_recording &_dimension_entity &__command_action_clone {
Daniel@0 228 margin-right: @config-grid-panel--command-margin-h_views;
Daniel@0 229 }
Daniel@0 230 &_dimension_view &__command_action_discard,
Daniel@0 231 .config-grid_type_recording &_dimension_entity &__command_action_discard {
Daniel@0 232 margin-right: @config-grid-panel--command-margin-h_views;
Daniel@0 233 }
Daniel@0 234
Daniel@0 235 .config-grid_type_recording &_dimension_entity &__command_action_clone {
Daniel@0 236 }
Daniel@0 237 .config-grid_type_recording &_dimension_entity &__command_action_apply {
Daniel@0 238 }
Daniel@0 239 .config-grid_type_recording &_dimension_entity &__command_action_discard {
Daniel@0 240 }
Daniel@0 241 .config-grid_type_recording &_dimension_entity &__command-group_type_discard-apply {
Daniel@0 242 left: 2.7 * @config-grid-panel--command-size;
Daniel@0 243 }
Daniel@0 244 .config-grid_type_recording &_dimension_entity &__main-area-wrapper {
Daniel@0 245 left: 1.5 * @config-grid-panel--command-size;
Daniel@0 246 }
Daniel@0 247
Daniel@0 248 .config-grid_type_recording &_dimension_entity &__command-group_type_discard-apply {
Daniel@0 249 display: none;
Daniel@0 250 }
Daniel@0 251 .config-grid_type_recording &_dimension_entity&_master-kind_pair &__command-group_type_discard-apply {
Daniel@0 252 display: inline-block;
Daniel@0 253 }
Daniel@0 254 .config-grid_type_recording &_dimension_entity &__main-area-wrapper {
Daniel@0 255 left: 2.7 * @config-grid-panel--command-size;
Daniel@0 256 }
Daniel@0 257 .config-grid_type_recording &_dimension_entity&_master-kind_pair &__main-area-wrapper {
Daniel@0 258 left: 5.5 * @config-grid-panel--command-size;
Daniel@0 259 }
Daniel@0 260
Daniel@0 261
Daniel@0 262 //background-image: url("data:image/svg+xml;utf8, <svg ... />");
Daniel@0 263 //background-image: url("data:image/svg+xml;utf8,<svg height='18px' version='1.1' viewBox='0 0 14 18' width='14px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'><title/><desc/><defs/><g fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'><g fill='@{a}' id='Core' transform='translate(-299.000000, -129.000000)'><g id='delete' transform='translate(299.000000, 129.000000)'><path d='M1,16 C1,17.1 1.9,18 3,18 L11,18 C12.1,18 13,17.1 13,16 L13,4 L1,4 L1,16 L1,16 Z M14,1 L10.5,1 L9.5,0 L4.5,0 L3.5,1 L0,1 L0,3 L14,3 L14,1 L14,1 Z' id='Shape'/></g></g></g></svg>");
Daniel@0 264
Daniel@0 265 // ==================================
Daniel@0 266 &__border-radius-fixer-container {
Daniel@0 267 position: absolute;
Daniel@0 268 height: @--border-radius;
Daniel@0 269 width: @--border-radius;
Daniel@0 270 }
Daniel@0 271 &_dimension_entity &__border-radius-fixer-container {
Daniel@0 272 bottom: 0;
Daniel@0 273 left: 0;
Daniel@0 274 }
Daniel@0 275 &_dimension_view &__border-radius-fixer-container {
Daniel@0 276 top: 0;
Daniel@0 277 right: 0;
Daniel@0 278 }
Daniel@0 279
Daniel@0 280 // ==================================
Daniel@0 281 &__border-radius-fixer {
Daniel@0 282 position: absolute;
Daniel@0 283 top: 0;
Daniel@0 284 left: 0;
Daniel@0 285 height: @--border-radius;
Daniel@0 286 width: @--border-radius;
Daniel@0 287 }
Daniel@0 288 .config-grid_type_collection &__border-radius-fixer {
Daniel@0 289 background: @config-grid_collection--color_panel-background;
Daniel@0 290 }
Daniel@0 291 .config-grid_type_recording &__border-radius-fixer {
Daniel@0 292 background: @config-grid_recording--color_panel-background;
Daniel@0 293 }
Daniel@0 294
Daniel@0 295 // ==================================
Daniel@0 296
Daniel@0 297 &__suggestions {
Daniel@0 298
Daniel@0 299 }
Daniel@0 300
Daniel@0 301 &__suggestion {
Daniel@0 302 padding-left: 8px;
Daniel@0 303 padding-bottom: 3px;
Daniel@0 304 }
Daniel@0 305
Daniel@0 306 &__pseudo-link {
Daniel@0 307 color: @config-grid--color_panel-label;
Daniel@0 308 .cursor_action;
Daniel@0 309 border-bottom: 1px dotted;
Daniel@0 310 display: inline;
Daniel@0 311 }
Daniel@0 312 &__pseudo-link:hover {
Daniel@0 313 color: @config-grid--color_panel-label-hovered;
Daniel@0 314 }
Daniel@0 315
Daniel@0 316 }