Mercurial > hg > dml-open-vis
comparison src/DML/MainVisBundle/Resources/assets/bem-blocks/config-grid-cells.less @ 0:493bcb69166c
added public content
| author | Daniel Wolff |
|---|---|
| date | Tue, 09 Feb 2016 20:54:02 +0100 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:493bcb69166c |
|---|---|
| 1 @import "../config.less"; | |
| 2 | |
| 3 .config-grid-cells { | |
| 4 position: absolute; | |
| 5 bottom: 0; | |
| 6 right: 0; | |
| 7 z-index: @z-index_main-region + 9; | |
| 8 overflow: hidden; | |
| 9 left: @config-grid_collection--panel_view--width; | |
| 10 top: @config-grid_collection--panel_entity--height; | |
| 11 | |
| 12 .config-grid_type_collection & { | |
| 13 } | |
| 14 .config-grid_type_recording & { | |
| 15 left: @config-grid_recording--panel_view--width; | |
| 16 top: @config-grid_recording--panel_entity--height; | |
| 17 } | |
| 18 | |
| 19 // ================================== | |
| 20 &__container_position_scrollable { | |
| 21 .position_absolute_everywhere(); | |
| 22 overflow: scroll; | |
| 23 z-index: @z-index_main-region + 50; | |
| 24 background: rgba(0,0,0,0.0); | |
| 25 } | |
| 26 | |
| 27 &__container_position_fixed { | |
| 28 //.position_absolute_everywhere(); | |
| 29 position: absolute; | |
| 30 pointer-events: none !important; | |
| 31 top: 0px; | |
| 32 left: 0px; | |
| 33 overflow: hidden; | |
| 34 z-index: @z-index_main-region + 20; | |
| 35 } | |
| 36 | |
| 37 // ================================== | |
| 38 &__space { | |
| 39 position: absolute; | |
| 40 z-index: @z-index_main-region + 51; | |
| 41 overflow: hidden; | |
| 42 padding-left: @config-grid--cells--margin-left; | |
| 43 padding-right: @config-grid--cells--margin-right; | |
| 44 padding-bottom: @config-grid--cells--margin-bottom; | |
| 45 } | |
| 46 .config-grid_type_collection &__space { | |
| 47 padding-top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top; | |
| 48 } | |
| 49 .config-grid_type_recording &__space { | |
| 50 padding-top: @config-grid--entity-header-margin-top + @config-grid_recording--entity-header-height + @config-grid--cells--margin-top; | |
| 51 } | |
| 52 | |
| 53 // ================================== | |
| 54 // ================================== | |
| 55 &__entity-headers-container { | |
| 56 position: absolute; | |
| 57 //position: fixed; | |
| 58 top: 0; | |
| 59 left: @config-grid--cells--margin-left; | |
| 60 right: 0; | |
| 61 height: 10px; | |
| 62 overflow: visible; | |
| 63 z-index: @z-index_main-region-cells + 5; | |
| 64 } | |
| 65 .config-grid_type_collection &__entity-headers-container { | |
| 66 height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top; | |
| 67 } | |
| 68 .config-grid_type_recording &__entity-headers-container { | |
| 69 height: @config-grid--entity-header-margin-top + @config-grid_recording--entity-header-height + @config-grid--cells--margin-top; | |
| 70 } | |
| 71 | |
| 72 // ================================== | |
| 73 &__entity-headers-blind { | |
| 74 .position_absolute_everywhere(); | |
| 75 z-index: @z-index_main-region-cells + 6; | |
| 76 background: @--background-color; | |
| 77 } | |
| 78 | |
| 79 // ================================== | |
| 80 &__entity-header { | |
| 81 .cursor_action(); | |
| 82 position: absolute; | |
| 83 top: @config-grid--entity-header-margin-top; | |
| 84 // left: 0; // defined by JS | |
| 85 height: @config-grid_collection--entity-header-height; | |
| 86 overflow: visible; | |
| 87 z-index: @z-index_main-region-cells + 7; | |
| 88 } | |
| 89 .config-grid_type_collection &__entity-header { | |
| 90 height: @config-grid_collection--entity-header-height; | |
| 91 } | |
| 92 .config-grid_type_recording &__entity-header { | |
| 93 height: @config-grid_recording--entity-header-height; | |
| 94 } | |
| 95 | |
| 96 // ---------------------------------- | |
| 97 &__entity-header_kind_adder { | |
| 98 width: 109px; | |
| 99 height: @config-grid_collection--entity-header-height_adder !important; | |
| 100 } | |
| 101 | |
| 102 // ---------------------------------- | |
| 103 &__entity-header_kind_pair &__entity-header-background { | |
| 104 background: @--background-color !important; | |
| 105 } | |
| 106 &__entity-header_kind_pair&__entity-header_selected &__entity-header-label { | |
| 107 color: @config-grid--color_panel-label !important; | |
| 108 } | |
| 109 | |
| 110 | |
| 111 // ---------------------------------- | |
| 112 &__entity-header_selected { | |
| 113 .cursor_std(); | |
| 114 } | |
| 115 | |
| 116 // ================================== | |
| 117 &__entity-header-background { | |
| 118 .position_absolute_everywhere(); | |
| 119 border-radius: @--border-radius; | |
| 120 border: @config-grid--header-border-size solid; | |
| 121 background-color: @config-grid--color_panel-background; | |
| 122 border-color: @config-grid--color_panel-background; | |
| 123 } | |
| 124 .config-grid_type_collection &__entity-header_selected &__entity-header-background { | |
| 125 background-color: @config-grid_collection--color_panel-background; | |
| 126 border-color: @config-grid_collection--color_panel-background; | |
| 127 } | |
| 128 .config-grid_type_recording &__entity-header_selected &__entity-header-background { | |
| 129 background-color: @config-grid_recording--color_panel-background; | |
| 130 border-color: @config-grid_recording--color_panel-background; | |
| 131 } | |
| 132 | |
| 133 // ---------------------------------- | |
| 134 &__entity-header_selected &__entity-header-background { | |
| 135 border-top-left-radius: 0px; | |
| 136 border-top-right-radius: 0px; | |
| 137 top: -@config-grid--entity-header-margin-top - @config-grid--header-border-size; | |
| 138 } | |
| 139 | |
| 140 // ================================== | |
| 141 &__entity-header-label { | |
| 142 position: absolute; | |
| 143 overflow: hidden; | |
| 144 white-space: nowrap; | |
| 145 top: -4px; | |
| 146 bottom: 0; | |
| 147 left: @config-grid--cells--header-padding-left; | |
| 148 right: @config-grid--header-border-size; | |
| 149 padding-top: @config-grid--cells--header-padding-top_entity; | |
| 150 color: @config-grid--color_panel-label; | |
| 151 } | |
| 152 &__entity-header:hover &__entity-header-label { | |
| 153 color: @config-grid--color_panel-label-hovered; | |
| 154 } | |
| 155 .config-grid_type_collection &__entity-header_selected:hover &__entity-header-label, | |
| 156 .config-grid_type_collection &__entity-header_selected &__entity-header-label | |
| 157 { | |
| 158 color: @config-grid_collection--color_panel-label; | |
| 159 } | |
| 160 .config-grid_type_recording &__entity-header_selected:hover &__entity-header-label, | |
| 161 .config-grid_type_recording &__entity-header_selected &__entity-header-label { | |
| 162 color: @config-grid_recording--color_panel-label; | |
| 163 } | |
| 164 | |
| 165 // ---------------------------------- | |
| 166 &__entity-header-label_row2 { | |
| 167 top: 14px; | |
| 168 } | |
| 169 .config-grid_type_collection &__entity-header-label_row2 { | |
| 170 .font_small(); | |
| 171 } | |
| 172 | |
| 173 // ---------------------------------- | |
| 174 &__entity-header_kind_adder &__entity-header-label { | |
| 175 position: relative; | |
| 176 text-align: center; | |
| 177 left: 0; | |
| 178 right: 0; | |
| 179 padding-left: 0; | |
| 180 padding-right: 0; | |
| 181 } | |
| 182 | |
| 183 // ================================== | |
| 184 &__entity-header-label-fader { | |
| 185 position: absolute; | |
| 186 top: @config-grid--header-border-size; | |
| 187 bottom:@config-grid--header-border-size; | |
| 188 right: @config-grid--header-border-size; | |
| 189 width: @config-grid--header-fader-width; | |
| 190 .text-fader-background-gradient(@config-grid--color_panel-background); | |
| 191 } | |
| 192 .config-grid_type_collection &__entity-header_selected &__entity-header-label-fader { | |
| 193 .text-fader-background-gradient(@config-grid_collection--color_panel-background); | |
| 194 } | |
| 195 .config-grid_type_recording &__entity-header_selected &__entity-header-label-fader { | |
| 196 .text-fader-background-gradient(@config-grid_recording--color_panel-background); | |
| 197 } | |
| 198 &__entity-header_kind_pair &__entity-header-label-fader, | |
| 199 &__entity-header_kind_pair&__entity-header_selected &__entity-header-label-fader { | |
| 200 .text-fader-background-gradient(@--background-color); | |
| 201 } | |
| 202 | |
| 203 | |
| 204 // ================================== | |
| 205 // ================================== | |
| 206 &__view-headers-container { | |
| 207 position: absolute; | |
| 208 //position: fixed; | |
| 209 left: 0; | |
| 210 top: 0; | |
| 211 right: 0; | |
| 212 padding-right: @config-grid--cells--margin-left; | |
| 213 overflow: visible; | |
| 214 z-index: @z-index_main-region-cells + 2; | |
| 215 } | |
| 216 .config-grid_type_collection &__view-headers-container { | |
| 217 top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top; | |
| 218 } | |
| 219 .config-grid_type_recording &__view-headers-container { | |
| 220 top: @config-grid--entity-header-margin-top + @config-grid_recording--entity-header-height + @config-grid--cells--margin-top; | |
| 221 } | |
| 222 | |
| 223 // ================================== | |
| 224 &__view-headers-blind { | |
| 225 position: absolute; | |
| 226 top: 0; | |
| 227 left: 0; | |
| 228 bottom: 0; | |
| 229 width: @config-grid--cells--margin-left; | |
| 230 z-index: @z-index_main-region-cells + 3; | |
| 231 background: @--background-color; | |
| 232 } | |
| 233 | |
| 234 // ================================== | |
| 235 &__view-header { | |
| 236 .cursor_action(); | |
| 237 position: absolute; | |
| 238 top: 0; // defined by JS | |
| 239 left: @config-grid--cells--margin-left; | |
| 240 right: 0; | |
| 241 height: @config-grid--view-header-height; | |
| 242 overflow: visible; | |
| 243 z-index: @z-index_main-region-cells + 4; | |
| 244 } | |
| 245 | |
| 246 // ---------------------------------- | |
| 247 &__view-header_kind_adder { | |
| 248 right: auto; | |
| 249 width: auto; | |
| 250 } | |
| 251 | |
| 252 // ---------------------------------- | |
| 253 &__view-header_selected { | |
| 254 .cursor_std(); | |
| 255 } | |
| 256 | |
| 257 // ================================== | |
| 258 &__view-header-background { | |
| 259 position: absolute; | |
| 260 top: 0; | |
| 261 left: 0; | |
| 262 right: 0; | |
| 263 bottom: 0; | |
| 264 border-top-left-radius: @--border-radius; | |
| 265 border-bottom-left-radius: @--border-radius; | |
| 266 background-color: @config-grid--color_panel-background; | |
| 267 } | |
| 268 .config-grid_type_collection &__view-header_selected &__view-header-background { | |
| 269 background-color: @config-grid_collection--color_panel-background; | |
| 270 } | |
| 271 .config-grid_type_recording &__view-header_selected &__view-header-background { | |
| 272 background-color: @config-grid_recording--color_panel-background; | |
| 273 } | |
| 274 | |
| 275 // ---------------------------------- | |
| 276 &__view-header_kind_adder &__view-header-background { | |
| 277 border-top-right-radius: @--border-radius; | |
| 278 border-bottom-right-radius: @--border-radius; | |
| 279 } | |
| 280 | |
| 281 // ---------------------------------- | |
| 282 &__view-header_selected &__view-header-background { | |
| 283 border-top-left-radius: 0px; | |
| 284 border-bottom-left-radius: 0px; | |
| 285 left: -@config-grid--cells--margin-left; | |
| 286 } | |
| 287 | |
| 288 // ================================== | |
| 289 &__view-header-label { | |
| 290 position: absolute; | |
| 291 overflow: hidden; | |
| 292 white-space: nowrap; | |
| 293 top: 0; | |
| 294 left: 0; | |
| 295 right: 0; | |
| 296 bottom: 0; | |
| 297 padding-left: @config-grid--cells--header-padding-left; | |
| 298 padding-right: @config-grid--cells--header-padding-left; | |
| 299 padding-top: @config-grid--cells--header-padding-top_view; | |
| 300 color: @config-grid--color_panel-label; | |
| 301 } | |
| 302 &__view-header:hover &__view-header-label { | |
| 303 color: @config-grid--color_panel-label-hovered; | |
| 304 } | |
| 305 .config-grid_type_collection &__view-header_selected:hover &__view-header-label, | |
| 306 .config-grid_type_collection &__view-header_selected &__view-header-label { | |
| 307 color: @config-grid_collection--color_panel-label; | |
| 308 } | |
| 309 .config-grid_type_recording &__view-header_selected:hover &__view-header-label, | |
| 310 .config-grid_type_recording &__view-header_selected &__view-header-label { | |
| 311 color: @config-grid_recording--color_panel-label; | |
| 312 } | |
| 313 | |
| 314 // ---------------------------------- | |
| 315 &__view-header_kind_adder &__view-header-label { | |
| 316 position: relative; | |
| 317 } | |
| 318 | |
| 319 // ================================== | |
| 320 &__view-header-label-part_modified { | |
| 321 text-decoration: line-through; | |
| 322 } | |
| 323 | |
| 324 // ================================== | |
| 325 // ================================== | |
| 326 &__corner-blind { | |
| 327 display: block; | |
| 328 position: absolute; | |
| 329 top: 0; | |
| 330 left: 0; | |
| 331 width: @config-grid--cells--margin-left; | |
| 332 z-index: @z-index_main-region-cells + 9; | |
| 333 background: @--background-color; | |
| 334 } | |
| 335 .config-grid_type_collection &__corner-blind { | |
| 336 height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top; | |
| 337 } | |
| 338 .config-grid_type_recording &__corner-blind { | |
| 339 height: @config-grid--entity-header-margin-top + @config-grid_recording--entity-header-height + @config-grid--cells--margin-top; | |
| 340 } | |
| 341 | |
| 342 // ================================== | |
| 343 &__vis-instances-container { | |
| 344 position: absolute; | |
| 345 left: @config-grid--cells--margin-left; | |
| 346 top: 0; | |
| 347 width: 0; | |
| 348 height: 0; | |
| 349 overflow: visible; | |
| 350 z-index: @z-index_main-region-cells + 1; | |
| 351 } | |
| 352 .config-grid_type_collection &__vis-instances-container { | |
| 353 top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top; | |
| 354 } | |
| 355 .config-grid_type_recording &__vis-instances-container { | |
| 356 top: @config-grid--entity-header-margin-top + @config-grid_recording--entity-header-height + @config-grid--cells--margin-top; | |
| 357 } | |
| 358 | |
| 359 &__vis-instance { | |
| 360 background: @--background-color; | |
| 361 position: absolute; | |
| 362 left: 0; | |
| 363 top: 0; | |
| 364 overflow: hidden; | |
| 365 } | |
| 366 } |