@gooddata/sdk-ui-dashboard 11.52.0 → 11.53.0-alpha.1

package/styles/css/main.css

@@ -21671,6 +21671,50 @@ figure {
 
 /* allow vendor prefixes and disable max length */
 /* allow vendor prefixes and disable max length */
+@keyframes react-loading-skeleton {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.react-loading-skeleton {
+  --base-color: #ebebeb;
+  --highlight-color: #f5f5f5;
+  --animation-duration: 1.5s;
+  --animation-direction: normal;
+  --pseudo-element-display: block; /* Enable animation */
+  background-color: var(--base-color);
+  width: 100%;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  line-height: 1;
+  position: relative;
+  user-select: none;
+  overflow: hidden;
+}
+
+.react-loading-skeleton::after {
+  content: " ";
+  display: var(--pseudo-element-display);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%));
+  transform: translateX(-100%);
+  animation-name: react-loading-skeleton;
+  animation-direction: var(--animation-direction);
+  animation-duration: var(--animation-duration);
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+@media (prefers-reduced-motion) {
+  .react-loading-skeleton {
+    --pseudo-element-display: none; /* Disable animation */
+  }
+}
 /* ==========================================================================
    Variables, mixins, silent classes etc.
    ========================================================================== */
@@ -24305,6 +24349,80 @@ figure {
 .gd-dashboards-root.gd-flex-container {
   flex-flow: row nowrap;
 }
+.gd-dashboards-root.gd-flex-container.sdk-dashboard-generating .sdk-dashboard-navigation-placeholder {
+  display: none;
+}
+
+.sdk-dashboard-generating .sdk-dashboard-skeleton {
+  margin: -15px -20px 0 -20px;
+  height: 100%;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-skeleton-top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding-left: 15px;
+  padding-right: 11px;
+  border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  border-bottom-color: var(--gd-dashboards-title-borderColor, var(--gd-palette-complementary-3, #dde4eb));
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-skeleton-top-bar .gd-top-bar-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  height: 48px;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-skeleton-filter-bar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  height: 56px;
+  padding-left: 15px;
+  border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  border-bottom-color: var(--gd-dashboards-filterBar-borderColor, var(--gd-palette-complementary-3, #dde4eb));
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-skeleton-filter-bar .gd-skeleton-filter {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  height: 41px;
+  padding-top: 5px;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-dash-content {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-skeleton-content {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+  padding: 30px;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .skeleton-flex {
+  flex: 1;
+}
+.sdk-dashboard-generating .sdk-dashboard-skeleton .gd-react-loading-skeleton.react-loading-skeleton {
+  --base-color: var(
+      --gd-dashboards-title-borderColor-from-theme,
+      var(--gd-palette-complementary-2, #ebeff4)
+  );
+  --highlight-color: var(
+      --gd-dashboards-content-backgroundColor,
+      var(--gd-palette-complementary-0, #fff)
+  );
+}
+@media (forced-colors: active) {
+  .sdk-dashboard-generating .sdk-dashboard-skeleton .gd-react-loading-skeleton.react-loading-skeleton {
+    --base-color: canvastext;
+    --highlight-color: canvas;
+  }
+}
 
 .gd-dash-content {
   flex: 1;
@@ -30459,50 +30577,6 @@ figure {
   visibility: hidden;
 }
 
-@keyframes react-loading-skeleton {
-  100% {
-    transform: translateX(100%);
-  }
-}
-.react-loading-skeleton {
-  --base-color: #ebebeb;
-  --highlight-color: #f5f5f5;
-  --animation-duration: 1.5s;
-  --animation-direction: normal;
-  --pseudo-element-display: block; /* Enable animation */
-  background-color: var(--base-color);
-  width: 100%;
-  border-radius: 0.25rem;
-  display: inline-flex;
-  line-height: 1;
-  position: relative;
-  user-select: none;
-  overflow: hidden;
-}
-
-.react-loading-skeleton::after {
-  content: " ";
-  display: var(--pseudo-element-display);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%));
-  transform: translateX(-100%);
-  animation-name: react-loading-skeleton;
-  animation-direction: var(--animation-direction);
-  animation-duration: var(--animation-duration);
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-}
-
-@media (prefers-reduced-motion) {
-  .react-loading-skeleton {
-    --pseudo-element-display: none; /* Disable animation */
-  }
-}
 .gd-alerts-list {
   width: 100%;
 }