@gooddata/sdk-ui-dashboard 10.33.0-alpha.74 → 10.33.0-alpha.76

package/styles/css/main.css

@@ -21413,6 +21413,9 @@ figure {
   background: var(--gd-palette-complementary-1-from-theme, rgba(201, 213, 224, 0.05));
   text-align: center;
 }
+.drag-info-placeholder-box.drag-info-empty-nested-layout {
+  padding: 0;
+}
 .drag-info-placeholder-box h2 {
   font-weight: bold;
   font-size: 20px;
@@ -24833,7 +24836,6 @@ figure {
   top: 0;
   right: 20px;
   bottom: 100%;
-  width: 0;
   height: 100%;
 }
 
@@ -24848,8 +24850,8 @@ figure {
 .dash-width-resizer-hotspot,
 .resizer-drag-preview {
   display: flex;
-  width: 40px;
-  padding: 0 0 0 5px;
+  justify-content: center;
+  width: 20px;
   cursor: col-resize;
 }
 
@@ -25006,9 +25008,6 @@ figure {
   background: var(--gd-dashboards-content-backgroundColor-from-theme, var(--gd-palette-complementary-0-from-theme, rgba(255, 255, 255, 0.95)));
 }
 
-.gd-grid-layout-width-resizer-drag-preview {
-  padding: 0 0 0 10px;
-}
 .gd-grid-layout-width-resizer-drag-preview.gd-first-container-row-widget .gd-fluidlayout-width-resizer__container {
   padding-top: 0;
 }
@@ -25020,16 +25019,15 @@ figure {
 }
 .gd-grid-layout-resizer-drag-preview .gd-fluidlayout-width-resizer,
 .gd-grid-layout .gd-fluidlayout-width-resizer {
-  padding: 4px 0;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  align-items: center;
 }
 .gd-grid-layout-resizer-drag-preview .gd-fluidlayout-width-resizer .width-resizer-line,
 .gd-grid-layout .gd-fluidlayout-width-resizer .width-resizer-line {
   flex: 1 0 auto;
   width: 0;
-  margin-left: 4px;
   height: unset;
 }
 .gd-grid-layout-resizer-drag-preview .dash-height-resizer-container,
@@ -25084,17 +25082,20 @@ figure {
 }
 
 .gd-grid-layout .dash-width-resizer-container {
-  position: relative;
-  left: -10px;
-  right: 0;
-  width: 0;
+  position: absolute;
+  right: -20px;
+  width: 20px;
+  display: flex;
+  justify-content: center;
 }
 .gd-grid-layout .dash-width-resizer-container.gd-first-container-row-widget .gd-fluidlayout-width-resizer__container {
   padding-top: 0;
 }
 .gd-grid-layout .gd-fluidlayout-width-resizer__container {
   background: var(--gd-dashboards-content-backgroundColor, var(--gd-palette-complementary-0, #fff));
-  width: 100%;
+  width: 20px;
+  display: flex;
+  justify-content: center;
 }
 .gd-grid-layout .dash-height-resizer-hotspot {
   position: absolute;
@@ -25118,9 +25119,10 @@ figure {
 }
 
 .sdk-edit-mode-on .gd-grid-layout .dash-width-resizer-hotspot {
-  position: unset;
+  position: static;
   width: 20px;
-  padding: 0 0 0 10px;
+  display: flex;
+  justify-content: center;
 }
 .sdk-edit-mode-on .gd-grid-layout .gd-resize-overlay-text {
   right: -10px;
@@ -25153,6 +25155,60 @@ figure {
   left: unset;
 }
 
+.gd-grid-layout-ruler {
+  --bullet-size: 6px;
+  --bullet-size-active: 9px;
+  --gap: 20px;
+  padding: 20px 0 20px var(--gap);
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+}
+.gd-grid-layout-ruler__grid {
+  flex-grow: 1;
+  flex-shrink: 0;
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(var(--columns-num), 1fr);
+  grid-template-rows: auto;
+  justify-content: start;
+  align-items: stretch;
+}
+.gd-grid-layout-ruler__bullet-container {
+  width: var(--gap);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  left: calc(var(--gap) * -1);
+}
+.gd-grid-layout-ruler__bullet-container--last {
+  left: 0;
+}
+.gd-grid-layout-ruler__bullet {
+  width: var(--bullet-size);
+  height: var(--bullet-size);
+  border-radius: 100%;
+  background-color: var(--gd-palette-complementary-6-from-theme, #b0beca);
+  position: absolute;
+  opacity: 0;
+  transform: translateY(-20px);
+  transition: transform 0.2s ease-out, opacity 0.1s ease-in, width 0.1s ease-out, height 0.1s ease-out;
+}
+.gd-grid-layout-ruler--active .gd-grid-layout-ruler__bullet {
+  opacity: 1;
+  transform: translateY(0);
+}
+.gd-grid-layout-ruler__bullet--active {
+  background-color: var(--gd-palette-primary-base, #14b2e2);
+  width: var(--bullet-size-active);
+  height: var(--bullet-size-active);
+}
+.gd-grid-layout-ruler__bullet--initial {
+  background-color: var(--gd-palette-complementary-9, #000);
+}
+
 .gd-drill-origin-selector .dropdown-button {
   font-size: 12px;
   display: inline-block;