Mercurial > hg > dml-open-vis

diff src/DML/MainVisBundle/Resources/assets/bem-blocks/config-grid-cells.less @ 0:493bcb69166c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added public content
author Daniel Wolff
date Tue, 09 Feb 2016 20:54:02 +0100
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/DML/MainVisBundle/Resources/assets/bem-blocks/config-grid-cells.less	Tue Feb 09 20:54:02 2016 +0100
@@ -0,0 +1,366 @@
+@import "../config.less";
+
+.config-grid-cells {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: @z-index_main-region + 9;
+    overflow: hidden;
+    left: @config-grid_collection--panel_view--width;
+    top: @config-grid_collection--panel_entity--height;
+
+    .config-grid_type_collection & {
+    }
+    .config-grid_type_recording & {
+        left: @config-grid_recording--panel_view--width;
+        top: @config-grid_recording--panel_entity--height;
+    }
+
+    // ==================================
+    &__container_position_scrollable {
+        .position_absolute_everywhere();
+        overflow: scroll;
+        z-index: @z-index_main-region + 50;
+        background: rgba(0,0,0,0.0);
+    }
+    
+    &__container_position_fixed {
+        //.position_absolute_everywhere();
+        position: absolute;
+        pointer-events: none !important;
+        top: 0px;
+        left: 0px;
+        overflow: hidden;
+        z-index: @z-index_main-region + 20;
+    }
+
+    // ==================================
+    &__space {
+        position: absolute;
+        z-index: @z-index_main-region + 51;
+        overflow: hidden;
+        padding-left: @config-grid--cells--margin-left;
+        padding-right: @config-grid--cells--margin-right;
+        padding-bottom: @config-grid--cells--margin-bottom;
+    }
+    .config-grid_type_collection &__space {
+        padding-top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
+    }
+    .config-grid_type_recording &__space {
+        padding-top: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
+    }
+    
+    // ==================================
+    // ==================================
+    &__entity-headers-container {
+        position: absolute;
+        //position: fixed;
+        top: 0;
+        left: @config-grid--cells--margin-left;
+        right: 0;
+        height: 10px;
+        overflow: visible;
+        z-index: @z-index_main-region-cells + 5;
+    }
+    .config-grid_type_collection &__entity-headers-container {
+        height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
+    }
+    .config-grid_type_recording &__entity-headers-container {
+        height: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
+    }
+    
+    // ==================================
+    &__entity-headers-blind {
+        .position_absolute_everywhere();
+        z-index: @z-index_main-region-cells + 6;
+        background: @--background-color;
+    }
+
+    // ==================================
+    &__entity-header {
+        .cursor_action();
+        position: absolute;
+        top: @config-grid--entity-header-margin-top;
+        // left: 0; // defined by JS
+        height: @config-grid_collection--entity-header-height;
+        overflow: visible;
+        z-index: @z-index_main-region-cells + 7;
+    }
+    .config-grid_type_collection &__entity-header {
+        height: @config-grid_collection--entity-header-height;
+    }
+    .config-grid_type_recording &__entity-header {
+        height:  @config-grid_recording--entity-header-height;
+    }
+    
+    // ----------------------------------
+    &__entity-header_kind_adder {
+        width: 109px;
+        height: @config-grid_collection--entity-header-height_adder !important;
+    }
+
+    // ----------------------------------
+    &__entity-header_kind_pair &__entity-header-background {
+        background: @--background-color !important;
+    }
+    &__entity-header_kind_pair&__entity-header_selected &__entity-header-label {
+        color: @config-grid--color_panel-label !important;
+    }
+
+    
+    // ----------------------------------
+    &__entity-header_selected {
+        .cursor_std();
+    }
+    
+    // ==================================
+    &__entity-header-background {
+        .position_absolute_everywhere();
+        border-radius: @--border-radius;
+        border: @config-grid--header-border-size solid;
+        background-color: @config-grid--color_panel-background;
+        border-color: @config-grid--color_panel-background;
+    }
+    .config-grid_type_collection &__entity-header_selected &__entity-header-background {
+        background-color: @config-grid_collection--color_panel-background;
+        border-color: @config-grid_collection--color_panel-background;
+    }
+    .config-grid_type_recording &__entity-header_selected &__entity-header-background {
+        background-color: @config-grid_recording--color_panel-background;
+        border-color: @config-grid_recording--color_panel-background;
+    }
+
+    // ----------------------------------
+    &__entity-header_selected &__entity-header-background {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        top: -@config-grid--entity-header-margin-top - @config-grid--header-border-size;
+    }
+
+    // ==================================
+    &__entity-header-label {
+        position: absolute;
+        overflow: hidden;
+        white-space: nowrap;
+        top: -4px;
+        bottom: 0;
+        left:  @config-grid--cells--header-padding-left;
+        right: @config-grid--header-border-size;
+        padding-top:   @config-grid--cells--header-padding-top_entity;
+        color: @config-grid--color_panel-label;
+    }
+    &__entity-header:hover &__entity-header-label {
+        color: @config-grid--color_panel-label-hovered;
+    }
+    .config-grid_type_collection &__entity-header_selected:hover &__entity-header-label,
+    .config-grid_type_collection &__entity-header_selected &__entity-header-label
+     {
+        color: @config-grid_collection--color_panel-label;
+    }
+    .config-grid_type_recording &__entity-header_selected:hover &__entity-header-label,
+    .config-grid_type_recording &__entity-header_selected &__entity-header-label {
+        color: @config-grid_recording--color_panel-label;
+    }
+
+    // ----------------------------------
+    &__entity-header-label_row2 {
+        top: 14px;
+    }
+    .config-grid_type_collection &__entity-header-label_row2 {
+        .font_small();
+    }
+    
+    // ----------------------------------
+    &__entity-header_kind_adder &__entity-header-label {
+        position: relative;
+        text-align: center;
+        left: 0;
+        right: 0;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    // ==================================
+    &__entity-header-label-fader {
+        position: absolute;
+        top:   @config-grid--header-border-size;
+        bottom:@config-grid--header-border-size;
+        right: @config-grid--header-border-size;
+        width: @config-grid--header-fader-width;
+        .text-fader-background-gradient(@config-grid--color_panel-background);
+    }
+    .config-grid_type_collection &__entity-header_selected &__entity-header-label-fader {
+        .text-fader-background-gradient(@config-grid_collection--color_panel-background);
+    }
+    .config-grid_type_recording &__entity-header_selected &__entity-header-label-fader {
+        .text-fader-background-gradient(@config-grid_recording--color_panel-background);
+    }
+    &__entity-header_kind_pair &__entity-header-label-fader,
+    &__entity-header_kind_pair&__entity-header_selected &__entity-header-label-fader {
+        .text-fader-background-gradient(@--background-color);
+    }
+
+
+    // ==================================
+    // ==================================
+    &__view-headers-container {
+        position: absolute;
+        //position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        padding-right: @config-grid--cells--margin-left;
+        overflow: visible;
+        z-index: @z-index_main-region-cells + 2;
+    }
+    .config-grid_type_collection &__view-headers-container {
+        top:    @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
+    }
+    .config-grid_type_recording &__view-headers-container {
+        top:    @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
+    }
+    
+    // ==================================
+    &__view-headers-blind {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: @config-grid--cells--margin-left;
+        z-index: @z-index_main-region-cells + 3;
+        background: @--background-color;
+    }
+
+    // ==================================
+    &__view-header {
+        .cursor_action();
+        position: absolute;
+        top: 0; // defined by JS
+        left: @config-grid--cells--margin-left;
+        right: 0;
+        height: @config-grid--view-header-height;
+        overflow: visible;
+        z-index: @z-index_main-region-cells + 4;
+    }
+
+    // ----------------------------------
+    &__view-header_kind_adder {
+        right: auto;
+        width: auto;
+    }
+
+    // ----------------------------------
+    &__view-header_selected {
+        .cursor_std();
+    }
+
+    // ==================================
+    &__view-header-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-top-left-radius: @--border-radius;
+        border-bottom-left-radius: @--border-radius;
+        background-color: @config-grid--color_panel-background;
+    }
+    .config-grid_type_collection &__view-header_selected &__view-header-background {
+        background-color: @config-grid_collection--color_panel-background;
+    }
+    .config-grid_type_recording &__view-header_selected &__view-header-background {
+        background-color: @config-grid_recording--color_panel-background;
+    }
+
+    // ----------------------------------
+    &__view-header_kind_adder &__view-header-background {
+        border-top-right-radius: @--border-radius;
+        border-bottom-right-radius: @--border-radius;
+    }
+
+    // ----------------------------------
+    &__view-header_selected &__view-header-background {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        left: -@config-grid--cells--margin-left;
+    }
+
+    // ==================================
+    &__view-header-label {
+        position: absolute;
+        overflow: hidden;
+        white-space: nowrap;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding-left:  @config-grid--cells--header-padding-left;
+        padding-right: @config-grid--cells--header-padding-left;
+        padding-top:   @config-grid--cells--header-padding-top_view;
+        color: @config-grid--color_panel-label;
+    }
+    &__view-header:hover &__view-header-label {
+        color: @config-grid--color_panel-label-hovered;
+    }
+    .config-grid_type_collection &__view-header_selected:hover &__view-header-label,
+    .config-grid_type_collection &__view-header_selected &__view-header-label {
+        color: @config-grid_collection--color_panel-label;
+    }
+    .config-grid_type_recording &__view-header_selected:hover &__view-header-label,
+    .config-grid_type_recording &__view-header_selected &__view-header-label {
+        color: @config-grid_recording--color_panel-label;
+    }
+
+    // ----------------------------------
+    &__view-header_kind_adder &__view-header-label {
+        position: relative;
+    }
+
+    // ==================================
+    &__view-header-label-part_modified {
+        text-decoration: line-through;
+    }
+    
+    // ==================================
+    // ==================================
+    &__corner-blind {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: @config-grid--cells--margin-left;
+        z-index: @z-index_main-region-cells + 9;
+        background: @--background-color;
+    }
+    .config-grid_type_collection &__corner-blind {
+        height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
+    }
+    .config-grid_type_recording &__corner-blind {
+        height: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
+    }
+
+    // ==================================
+    &__vis-instances-container {
+        position: absolute;
+        left: @config-grid--cells--margin-left;
+        top: 0;
+        width: 0;
+        height: 0;
+        overflow: visible;
+        z-index: @z-index_main-region-cells + 1;
+    }
+    .config-grid_type_collection &__vis-instances-container {
+        top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
+    }
+    .config-grid_type_recording &__vis-instances-container {
+        top: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
+    }
+
+    &__vis-instance {
+        background: @--background-color;
+        position: absolute;
+        left: 0;
+        top: 0;
+        overflow: hidden;
+    }
+}
\ No newline at end of file