@gooddata/sdk-ui-dashboard 10.16.0-alpha.11 → 10.16.0-alpha.12

package/styles/css/main.css

@@ -17916,17 +17916,24 @@ div.gd-empty-item-bubble {
 .gd-grid-layout {
   flex-direction: column;
 }
+.gd-grid-layout .gd-fluid-layout-row-header {
+  position: relative;
+}
+.gd-grid-layout .gd-fluidlayout-column-container {
+  display: flex;
+}
 
 .gd-grid-layout__container--root {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+  column-gap: 20px;
   grid-auto-rows: min-content;
   flex-grow: 1;
 }
 
 .gd-grid-layout__container--nested {
   display: grid;
-  grid-template-columns: subgrid;
+  column-gap: 20px;
 }
 
 .gd-grid-layout__section {
@@ -17934,94 +17941,106 @@ div.gd-empty-item-bubble {
   grid-template-columns: subgrid;
 }
 
+.gd-grid-layout__item {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
 .gd-grid-layout__item--span-1 {
   grid-column: span 1;
 }
 
+.gd-grid-layout__container--nested--width-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
 .gd-grid-layout__item--span-2 {
   grid-column: span 2;
 }
 
+.gd-grid-layout__container--nested--width-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
 .gd-grid-layout__item--span-3 {
   grid-column: span 3;
 }
 
+.gd-grid-layout__container--nested--width-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
 .gd-grid-layout__item--span-4 {
   grid-column: span 4;
 }
 
-.gd-grid-layout__item--span-5 {
-  grid-column: span 5;
+.gd-grid-layout__container--nested--width-4 {
+  grid-template-columns: repeat(4, 1fr);
 }
 
-.gd-grid-layout__item--span-6 {
-  grid-column: span 6;
+.gd-grid-layout__item--span-5 {
+  grid-column: span 5;
 }
 
-.gd-grid-layout__item--span-7 {
-  grid-column: span 7;
+.gd-grid-layout__container--nested--width-5 {
+  grid-template-columns: repeat(5, 1fr);
 }
 
-.gd-grid-layout__item--span-8 {
-  grid-column: span 8;
+.gd-grid-layout__item--span-6 {
+  grid-column: span 6;
 }
 
-.gd-grid-layout__item--span-9 {
-  grid-column: span 9;
+.gd-grid-layout__container--nested--width-6 {
+  grid-template-columns: repeat(6, 1fr);
 }
 
-.gd-grid-layout__item--span-10 {
-  grid-column: span 10;
+.gd-grid-layout__item--span-7 {
+  grid-column: span 7;
 }
 
-.gd-grid-layout__item--span-11 {
-  grid-column: span 11;
+.gd-grid-layout__container--nested--width-7 {
+  grid-template-columns: repeat(7, 1fr);
 }
 
-.gd-grid-layout__item--span-12 {
-  grid-column: span 12;
+.gd-grid-layout__item--span-8 {
+  grid-column: span 8;
 }
 
-.gd-grid-layout__debug {
-  position: absolute;
-  color: #fff;
-  font-size: 8px;
-  padding: 0 3px;
-  z-index: 1000;
+.gd-grid-layout__container--nested--width-8 {
+  grid-template-columns: repeat(8, 1fr);
 }
 
-.gd-grid-layout__container--root--debug {
-  border: 4px solid #efca17;
+.gd-grid-layout__item--span-9 {
+  grid-column: span 9;
 }
 
-.gd-grid-layout__debug--root {
-  background: #efca17;
+.gd-grid-layout__container--nested--width-9 {
+  grid-template-columns: repeat(9, 1fr);
 }
 
-.gd-grid-layout__container--nested--debug {
-  border: 4px solid #e45e5e;
+.gd-grid-layout__item--span-10 {
+  grid-column: span 10;
 }
 
-.gd-grid-layout__debug--nested {
-  background: #e45e5e;
+.gd-grid-layout__container--nested--width-10 {
+  grid-template-columns: repeat(10, 1fr);
 }
 
-.gd-grid-layout__section--debug {
-  border: 4px solid #57834d;
+.gd-grid-layout__item--span-11 {
+  grid-column: span 11;
 }
 
-.gd-grid-layout__debug--section {
-  background: #57834d;
-  margin-left: 30px;
+.gd-grid-layout__container--nested--width-11 {
+  grid-template-columns: repeat(11, 1fr);
 }
 
-.gd-grid-layout__item--debug {
-  border: 4px solid #9f3d8e;
+.gd-grid-layout__item--span-12 {
+  grid-column: span 12;
 }
 
-.gd-grid-layout__debug--item {
-  background: #9f3d8e;
-  margin-left: 60px;
+.gd-grid-layout__container--nested--width-12 {
+  grid-template-columns: repeat(12, 1fr);
 }
 
 .kpi {
@@ -19700,12 +19719,6 @@ div.gd-empty-item-bubble {
   display: flex;
 }
 
-.gd-grid-layout .dash-item {
-  height: 100%;
-  flex: unset;
-  max-width: unset;
-}
-
 @keyframes alert-highlighted {
   0% {
     top: 50%;
@@ -20187,6 +20200,24 @@ div.gd-empty-item-bubble {
   font-size: 16px;
 }
 
+.gd-grid-layout .dash-item {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  flex: unset;
+  max-width: unset;
+}
+.gd-grid-layout .dash-item .is-dragging-widget.dash-item-content {
+  border-color: var(--gd-palette-complementary-2, #ebeff4);
+}
+.gd-grid-layout .gd-fluidlayout-column-container {
+  display: flex;
+}
+.gd-grid-layout .dash-item-action-lw-options {
+  top: 20px;
+  right: 20px;
+}
+
 .drag-layer {
   font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
   line-height: 1.5;
@@ -20715,11 +20746,6 @@ div.gd-empty-item-bubble {
   z-index: 10;
 }
 
-.gd-grid-layout .dashboard-widget-draggable-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
 .current-dragging-item {
   width: 0;
   display: none;
@@ -20736,6 +20762,140 @@ div.gd-empty-item-bubble {
   pointer-events: none;
 }
 
+.gd-grid-layout .new-row-dropzone {
+  position: absolute;
+  height: unset;
+}
+.gd-grid-layout .new-row-dropzone .widget-dropzone-box {
+  position: unset;
+  height: unset;
+  padding: unset;
+}
+.gd-grid-layout .new-row-dropzone .widget-dropzone-box .can-drop {
+  margin: unset;
+}
+.gd-grid-layout .widget-dropzone {
+  height: 100%;
+}
+.gd-grid-layout .widget-dropzone .widget-dropzone-box {
+  position: relative;
+  height: 100%;
+  padding: 10px;
+}
+.gd-grid-layout .widget-dropzone .widget-dropzone-box .can-drop {
+  margin: 0;
+}
+.gd-grid-layout .widget-dropzone .drag-info-placeholder-drop-target,
+.gd-grid-layout .widget-dropzone .drop-target-inner {
+  position: absolute;
+}
+.gd-grid-layout .widget-dropzone .drag-info-placeholder-drop-target {
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+}
+.gd-grid-layout .widget-dropzone .drop-target-inner {
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  align-content: center;
+}
+.gd-grid-layout .dropzone.next .drop-hint {
+  float: unset;
+}
+.gd-grid-layout .row-hotspot-container .row-hotspot {
+  top: -20px;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  height: 100%;
+}
+.gd-grid-layout .row-hotspot-container.last {
+  top: unset;
+  height: 70px;
+}
+.gd-grid-layout .gd-fluid-layout-row-header .row-hotspot-container {
+  z-index: 99;
+}
+.gd-grid-layout .drag-info-placeholder {
+  position: unset;
+}
+.gd-grid-layout .drag-info-placeholder .can-drop {
+  margin: unset;
+}
+.gd-grid-layout .drag-info-placeholder-inner {
+  padding: 0 20px;
+}
+.gd-grid-layout .drag-info-placeholder-drop-target {
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  padding: 10px;
+}
+.gd-grid-layout .drag-info-placeholder-drop-target,
+.gd-grid-layout .drop-target-inner {
+  position: unset;
+}
+.gd-grid-layout .drop-target-inner {
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  padding: 10px;
+}
+.gd-grid-layout .drop-target-message {
+  position: unset;
+  top: unset;
+  right: unset;
+  left: unset;
+  transform: unset;
+}
+.gd-grid-layout .gd-fluidlayout-row-separator {
+  position: unset;
+  right: unset;
+  left: unset;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  height: 20px;
+  background-color: unset;
+}
+.gd-grid-layout .gd-fluidlayout-row-separator-icon {
+  position: unset;
+  top: unset;
+}
+.gd-grid-layout .gd-fluidlayout-row-separator-icon-left {
+  left: unset;
+}
+.gd-grid-layout .gd-fluidlayout-row-separator-icon-right {
+  right: 0;
+}
+.gd-grid-layout .gd-fluidlayout-row-separator-line {
+  flex-grow: 1;
+  height: 2px;
+  background-color: var(--gd-palette-complementary-5, #b0beca);
+}
+.gd-grid-layout .gd-fluidlayout-row-separator.active {
+  background-color: unset;
+}
+.gd-grid-layout .gd-fluidlayout-row-separator.active .gd-fluidlayout-row-separator-line {
+  height: 2px;
+  background-color: var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-grid-layout .dashboard-widget-draggable-wrapper:not(.gd-nested-layout-widget-wrapper) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0 10px 0;
+}
+.gd-grid-layout .gd-fluidlayout-column-row-end-hotspot {
+  min-height: unset;
+}
+
 .dash-filters-wrapper {
   position: relative;
 }
@@ -23599,6 +23759,57 @@ div.gd-empty-item-bubble {
   background: var(--gd-dashboards-content-backgroundColor, var(--gd-palette-complementary-0, rgba(255, 255, 255, 0.95)));
 }
 
+.gd-grid-layout .dash-width-resizer-container {
+  right: -20px;
+  width: 20px;
+}
+.gd-grid-layout .dash-height-resizer-container {
+  position: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  height: 10px;
+}
+.gd-grid-layout .dash-height-resizer-hotspot {
+  position: unset;
+  display: flex;
+}
+
+.sdk-edit-mode-on .gd-grid-layout .dash-width-resizer-hotspot {
+  position: unset;
+  left: unset;
+}
+.sdk-edit-mode-on .gd-grid-layout .gd-resize-overlay-text {
+  right: -10px;
+  left: -10px;
+}
+
+.gd-grid-layout__ruler {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+}
+.gd-grid-layout__ruler .gd-grid-layout__item--span-1 {
+  position: relative;
+}
+.gd-grid-layout__ruler .gd-resize-bullet {
+  position: relative;
+  left: -13px;
+  width: 6px;
+  height: 6px;
+  padding-left: 0;
+  padding-right: 0;
+}
+.gd-grid-layout__ruler .gd-resize-bullet--last {
+  position: absolute;
+  top: 0;
+  right: -13px;
+  left: unset;
+}
+
 .gd-drill-origin-selector .dropdown-button {
   font-size: 12px;
   display: inline-block;
@@ -25248,4 +25459,137 @@ div.gd-empty-item-bubble {
   white-space: nowrap;
 }
 
+.gd-dashboard-nested-layout-toolbar-bubble-wrapper.gd-configuration-bubble-wrapper.overlay-wrapper.sdk-edit-mode-on .gd-configuration-bubble.gd-dashboard-nested-layout-toolbar {
+  width: 44px;
+  height: 40px;
+}
+.gd-dashboard-nested-layout-toolbar-bubble-wrapper.gd-configuration-bubble-wrapper.overlay-wrapper.sdk-edit-mode-on .bubble-content {
+  padding: 0;
+  display: flex;
+  width: 100%;
+}
+.gd-dashboard-nested-layout-toolbar-bubble-wrapper.gd-configuration-bubble-wrapper.overlay-wrapper.sdk-edit-mode-on .bubble-content .helper {
+  display: none;
+}
+.gd-dashboard-nested-layout-toolbar-bubble-wrapper.gd-configuration-bubble-wrapper.overlay-wrapper.sdk-edit-mode-on .content {
+  flex: 1;
+  display: flex;
+}
+
+.gd-dashboard-nested-layout-toolbar.bubble.bubble-light {
+  position: initial;
+  padding: 6px 8px;
+}
+.gd-dashboard-nested-layout-toolbar.bubble.bubble-light .gd-dashboard-nested-layout-remove-button {
+  flex: 1;
+  text-align: center;
+  padding-top: 3px;
+}
+.gd-dashboard-nested-layout-toolbar.bubble.bubble-light .gd-trash-icon:hover {
+  cursor: pointer;
+}
+.gd-dashboard-nested-layout-toolbar.bubble.bubble-light .gd-trash-icon:hover path {
+  fill: var(--gd-palette-error-base, #e54d42);
+}
+
+.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-content.dash-item-content {
+  border-radius: 0;
+  padding: 10px;
+}
+.gd-dashboard-nested-layout-widget .is-selectable.gd-dashboard-nested-layout-content.dash-item-content:not(.is-selected):hover, .gd-dashboard-nested-layout-widget .is-selectable.gd-dashboard-nested-layout-content.dash-item-content.is-dragging-widget {
+  border-style: dashed;
+}
+.gd-dashboard-nested-layout-widget .is-selectable.dash-item-content:not(.is-selected):hover > .gd-dashboard-nested-layout-widget-visualization-content:first-child > .gd-dashboard-nested-layout-tab:not(.is-selected), .gd-dashboard-nested-layout-widget .is-selectable.dash-item-content.is-dragging-widget .gd-dashboard-nested-layout-tab {
+  display: flex;
+  color: var(--gd-palette-complementary-7, #6d7680);
+  background-color: var(--gd-palette-complementary-2, #ebeff4);
+}
+.gd-dashboard-nested-layout-widget .is-selectable.dash-item-content:not(.is-selected):hover > .gd-dashboard-nested-layout-widget-visualization-content:first-child > .gd-dashboard-nested-layout-tab:not(.is-selected) .gd-dashboard-nested-layout-tab__text, .gd-dashboard-nested-layout-widget .is-selectable.dash-item-content.is-dragging-widget .gd-dashboard-nested-layout-tab .gd-dashboard-nested-layout-tab__text {
+  background-color: var(--gd-palette-complementary-2, #ebeff4);
+}
+.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-tab.is-selected {
+  display: flex;
+  color: var(--gd-palette-complementary-0, #fff);
+  background-color: var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-tab.is-selected .gd-dashboard-nested-layout-tab__text {
+  background-color: var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-tab.is-selected path {
+  fill: var(--gd-palette-complementary-0, #fff);
+}
+.gd-dashboard-nested-layout-widget .drop-target-inner {
+  align-content: center;
+  height: 100%;
+}
+.gd-dashboard-nested-layout-widget .drop-target-inner p {
+  font-size: 18px;
+}
+
+.gd-nested-layout-widget-renderer .gd-nested-layout-hotspot.dropzone {
+  width: 10%;
+}
+
+.gd-dashboard-nested-layout-tab {
+  display: none;
+  width: auto;
+  padding: 2px 5px;
+  font-size: 11px;
+  position: absolute;
+  left: calc(0px - var(--gd-dashboards-content-widget-borderWidth, 2px));
+  top: calc(0px - var(--gd-dashboards-content-widget-borderWidth, 2px));
+}
+.gd-dashboard-nested-layout-tab > .gd-dashboard-nested-layout-tab__icon {
+  display: block;
+  position: absolute;
+  width: 6px;
+  height: 10px;
+  margin-top: 2px;
+  margin-right: 5px;
+}
+.gd-dashboard-nested-layout-tab > .gd-dashboard-nested-layout-tab__text {
+  z-index: 1;
+  margin-left: 0;
+  transition: margin 300ms ease-out;
+}
+.gd-dashboard-nested-layout-tab:hover > .gd-dashboard-nested-layout-tab__text {
+  margin-left: 11px;
+}
+
+.gd-dashboard-nested-layout-widget-visualization-content {
+  width: 100%;
+  height: 100%;
+}
+.gd-dashboard-nested-layout-widget-visualization-content .drag-info-placeholder-inner {
+  padding: 0;
+}
+.gd-dashboard-nested-layout-widget-visualization-content .drag-info-placeholder-box,
+.gd-dashboard-nested-layout-widget-visualization-content .drag-info-placeholder-drop-target {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  align-content: center;
+}
+
+.gd-grid-layout .gd-empty-dashboard-dropzone .drag-info-placeholder-inner,
+.gd-grid-layout .gd-empty-dashboard-dropzone .drag-info-placeholder-drop-target {
+  height: 100%;
+}
+.gd-grid-layout .gd-empty-dashboard-dropzone .drop-target-inner {
+  align-content: center;
+  height: 100%;
+}
+.gd-grid-layout .gd-hotspot-border {
+  position: absolute;
+  height: 100%;
+}
+.gd-grid-layout .dropzone.prev.active .gd-hotspot-border {
+  left: -12px;
+  border-left: 4px dashed var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-grid-layout .dropzone.next.active .gd-hotspot-border {
+  right: -12px;
+  border-right: 4px dashed var(--gd-palette-primary-base, #14b2e2);
+}
+
 /*# sourceMappingURL=main.css.map */