Daniel@0: @import "../config.less";
Daniel@0: 
Daniel@0: .config-grid-panel {
Daniel@0:     position: absolute;
Daniel@0:     z-index: @z-index_main-region + 20;
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     &_dimension_entity {
Daniel@0:         top: 0;
Daniel@0:         right: 0;
Daniel@0:         left:   @config-grid_collection--panel_entity--left;
Daniel@0:         height: @config-grid_collection--panel_entity--height;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &_dimension_entity {
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity {
Daniel@0:         left:   @config-grid_recording--panel_entity--left;
Daniel@0:         height: @config-grid_recording--panel_entity--height;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     &_dimension_view {
Daniel@0:         bottom: 0;
Daniel@0:         top:   @config-grid_collection--panel_view--top;
Daniel@0:         width: @config-grid_collection--panel_view--width;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &_dimension_view {
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_view {
Daniel@0:         top:   @config-grid_recording--panel_view--top;
Daniel@0:         width: @config-grid_recording--panel_view--width;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__background {
Daniel@0:         .position_absolute_everywhere;
Daniel@0:         background: @config-grid--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__background {
Daniel@0:         background: @config-grid_collection--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__background {
Daniel@0:         background: @config-grid_recording--color_panel-background;
Daniel@0:     }
Daniel@0:     &_dimension_entity &__background {
Daniel@0:         border-bottom-left-radius: @--border-radius;
Daniel@0:     }
Daniel@0:     &_dimension_view &__background {
Daniel@0:         border-top-right-radius: @--border-radius;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__main-area-wrapper {
Daniel@0:         position: absolute;
Daniel@0:         overflow: hidden;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &_dimension_entity &__main-area-wrapper {
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         white-space: nowrap;
Daniel@0:         left: 2.7 * @config-grid-panel--command-size + 10px;
Daniel@0:         right: 0;
Daniel@0:         bottom: 0;
Daniel@0:         overflow: hidden;
Daniel@0:         //overflow-x: scroll;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_view &__main-area-wrapper {
Daniel@0:         position: absolute;
Daniel@0:         top: @config-grid-panel--command-size + 10px;
Daniel@0:         left: 0;
Daniel@0:         right: 0;
Daniel@0:         bottom: 0;
Daniel@0:         overflow: hidden;
Daniel@0:         //overflow-y: scroll;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__main-area {
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__commands {
Daniel@0:         text-align: center;
Daniel@0:         line-height: @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_entity &__commands {
Daniel@0:         padding-top: 10px;
Daniel@0:         position: relative;
Daniel@0:         margin-left: 12px;
Daniel@0:         float: left;
Daniel@0:         //border-right: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0:     }
Daniel@0:     &_dimension_entity &__commands {
Daniel@0:             width: 2.7 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__commands {
Daniel@0:             width: 2.5 * @config-grid-panel--command-size;
Daniel@0:             text-align: left;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity&_master-kind_pair &__commands {
Daniel@0:             width: 5.7 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &_dimension_view &__commands {
Daniel@0:         padding-top: 10px;
Daniel@0:         height: @config-grid-panel--command-size;
Daniel@0:         //border-top: 1px solid mix(@config-grid--color_collection, #fff, 10%);
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &_dimension_entity &__command-group {
Daniel@0:         display: block;
Daniel@0:         position: absolute;
Daniel@0:         width: @config-grid-panel--command-size;
Daniel@0:         height: 2 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &_dimension_view &__command-group,
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command-group {
Daniel@0:         display: inline-block;
Daniel@0:         width: 2 * @config-grid-panel--command-size + @config-grid-panel--command-margin-h_views;
Daniel@0:         height: @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_entity &__command-group_type_clone-delete {
Daniel@0:         padding-bottom: 10px;
Daniel@0:     }
Daniel@0:     &_dimension_entity &__command-group_type_discard-apply {
Daniel@0:         left: 1.45 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_view &__command-group_type_clone-delete {
Daniel@0:         //border-left: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0:         //border-right: 1px solid #fff;
Daniel@0:         //border-right: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0:         padding-right: 10px;
Daniel@0:         margin-right: 10px;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command-group_type_clone-delete {
Daniel@0:         //border-left: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0:         //border-right: 1px solid #fff;
Daniel@0:         //border-right: 1px solid mix(@config-grid--color_collection, #fff, 5%);
Daniel@0:         padding-right: 10px;
Daniel@0:         margin-right: 0px;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__command {
Daniel@0:         .cursor_std();
Daniel@0:         overflow: visible;
Daniel@0:         position: relative;
Daniel@0:         display: inline-block;
Daniel@0:         width: @config-grid-panel--command-size;
Daniel@0:         height: @config-grid-panel--command-size;
Daniel@0:         opactity: 0.5;
Daniel@0:         //background: mix(@config-grid--color_collection, #fff, 20%);
Daniel@0:         border-radius: 5px;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_entity &__command {
Daniel@0:         display: block;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command {
Daniel@0:         display: inline-block;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command i {
Daniel@0:         display: block;
Daniel@0:         position: absolute;
Daniel@0:         width: @config-grid-panel--command-size;
Daniel@0:         height: @config-grid-panel--command-size;
Daniel@0:         background-repeat: no-repeat;
Daniel@0:         background-position: center center;
Daniel@0:         opacity: 0.05;
Daniel@0:     }
Daniel@0:     &__command_state_enabled {
Daniel@0:         .cursor_action();
Daniel@0:     }
Daniel@0:     &__command_state_enabled i {
Daniel@0:         opacity: 0.35;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command_state_enabled:hover i {
Daniel@0:         opacity: 1;
Daniel@0:     }
Daniel@0:     &__command_flashing i,
Daniel@0:     &__command_state_enabled:active i {
Daniel@0:         //background: mix(@config-grid--color_collection, #fff, 20%);
Daniel@0:         top: 1px;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command_action_apply {
Daniel@0:         //background-image: data-uri('image/svg+xml;charset=UTF-8', "./config-grid-panel/command/apply.svg");
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_entity &__command_action_previous i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/arrow_left.svg");
Daniel@0:     }
Daniel@0:     &_dimension_view &__command_action_previous i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/arrow_up.svg");
Daniel@0:     }
Daniel@0:     &_dimension_entity &__command_action_next i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/arrow_down.svg");
Daniel@0:     }
Daniel@0:     &_dimension_view &__command_action_next i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/arrow_right.svg");
Daniel@0:     }
Daniel@0:     &__command_action_clone i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/clone_filled.svg");
Daniel@0:     }
Daniel@0:     &__command_action_delete i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/delete_filled.svg");
Daniel@0:     }
Daniel@0:     &__command_action_discard i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/discard_r.svg");
Daniel@0:     }
Daniel@0:     &__command_action_apply i { 
Daniel@0:         background-image: url("@{bem-path}/config-grid-panel/command/apply_r.svg");
Daniel@0:     }
Daniel@0:     
Daniel@0:     &_dimension_view &__command_action_clone,
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command_action_clone {
Daniel@0:         margin-right: @config-grid-panel--command-margin-h_views;
Daniel@0:     } 
Daniel@0:     &_dimension_view &__command_action_discard,
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command_action_discard {
Daniel@0:         margin-right: @config-grid-panel--command-margin-h_views;
Daniel@0:     } 
Daniel@0:     
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command_action_clone {
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command_action_apply {
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command_action_discard {
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command-group_type_discard-apply {
Daniel@0:         left: 2.7 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__main-area-wrapper {
Daniel@0:         left: 1.5 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0: 
Daniel@0:     .config-grid_type_recording &_dimension_entity &__command-group_type_discard-apply {
Daniel@0:         display: none;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity&_master-kind_pair &__command-group_type_discard-apply {
Daniel@0:         display: inline-block;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity &__main-area-wrapper {
Daniel@0:         left: 2.7 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &_dimension_entity&_master-kind_pair &__main-area-wrapper {
Daniel@0:         left: 5.5 * @config-grid-panel--command-size;
Daniel@0:     }
Daniel@0: 
Daniel@0: 
Daniel@0: //background-image: url("data:image/svg+xml;utf8, <svg ... />"); 
Daniel@0: //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: 
Daniel@0:     // ==================================
Daniel@0:     &__border-radius-fixer-container {
Daniel@0:         position: absolute;
Daniel@0:         height: @--border-radius;
Daniel@0:         width: @--border-radius;
Daniel@0:     }
Daniel@0:     &_dimension_entity &__border-radius-fixer-container {
Daniel@0:         bottom: 0;
Daniel@0:         left: 0;
Daniel@0:     }
Daniel@0:     &_dimension_view &__border-radius-fixer-container {
Daniel@0:         top: 0;
Daniel@0:         right: 0;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__border-radius-fixer {
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         left: 0;
Daniel@0:         height: @--border-radius;
Daniel@0:         width: @--border-radius;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__border-radius-fixer {
Daniel@0:         background: @config-grid_collection--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__border-radius-fixer {
Daniel@0:         background: @config-grid_recording--color_panel-background;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     
Daniel@0:     &__suggestions {
Daniel@0:         
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__suggestion {
Daniel@0:         padding-left: 8px;
Daniel@0:         padding-bottom: 3px;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__pseudo-link {
Daniel@0:         color: @config-grid--color_panel-label;
Daniel@0:         .cursor_action;
Daniel@0:         border-bottom: 1px dotted;
Daniel@0:         display: inline;
Daniel@0:     }
Daniel@0:     &__pseudo-link:hover {
Daniel@0:         color: @config-grid--color_panel-label-hovered;
Daniel@0:     }
Daniel@0: 
Daniel@0: }