@gooddata/sdk-ui-dashboard 11.56.0-alpha.7 → 11.56.0-alpha.8

package/styles/css/main.css

@@ -26601,6 +26601,35 @@ figure {
   color: var(--gd-palette-complementary-6, #94a1ad);
   text-transform: lowercase;
 }
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-object,
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-attribute-element {
+  font-weight: bold;
+  color: var(--gd-palette-complementary-8, #464e56);
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-fact {
+  color: #00c18d;
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-measure,
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-metric {
+  color: #00c18d;
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-attribute,
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-computedAttribute {
+  color: #ab55a3;
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-displayForm,
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-attributeDisplayForm {
+  color: #ab55a3;
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-attribute-element {
+  color: #f18600;
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-dataSet {
+  color: #952f8e;
+}
+.gd-attribute-dropdown-list-item-details .gd-attribute-dropdown-list-tooltip-content .gd-maql-token-parameter {
+  color: #94a1ad;
+}
 
 .gd-attribute-list-item {
   display: flex;
@@ -27940,10 +27969,6 @@ figure {
   margin: revert;
 }
 
-.creation-panel h3 {
-  padding-left: 15px;
-}
-
 .gd-configuration-bubble-wrapper.overlay-wrapper.sdk-edit-mode-on {
   z-index: 1000;
 }
@@ -28127,7 +28152,7 @@ figure {
   display: flex;
 }
 .sdk-edit-mode-on .configuration-category .gd-input-search {
-  margin: 0 15px 10px;
+  margin: 10px 15px 10px;
 }
 .sdk-edit-mode-on .configuration-category .attribute-select {
   margin-top: 10px;
@@ -28744,24 +28769,189 @@ figure {
 }
 
 .gd-sidebar-container {
+  --sidebar-fade-duration: 0.2s;
+  --sidebar-fade-delay: 0.3s;
+  --sidebar-slide-duration: 0.5s;
   position: sticky;
   top: 0;
   width: 230px;
   height: 100vh;
   border-right: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  transition: width var(--sidebar-slide-duration);
 }
 .gd-sidebar-container--resizable {
   min-width: 230px;
   width: 100%;
 }
+.gd-sidebar-container--collapsed {
+  min-width: 48px;
+  width: 48px;
+}
+.gd-sidebar-container--resizable.gd-sidebar-container--collapsed {
+  width: 100%;
+}
+
+.gd-creation-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gd-sidebar-collapse-toggle {
+  display: flex;
+  margin: 0 10px;
+}
 
+.gd-sidebar-panel {
+  height: 100%;
+}
+.gd-sidebar-panel--collapsible {
+  overflow: hidden;
+}
+.gd-sidebar-panel--collapsible .add-item-placeholder {
+  box-sizing: border-box;
+  height: 32px;
+  white-space: nowrap;
+  transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-panel--collapsible .add-item-placeholder svg {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  transition: transform var(--sidebar-slide-duration);
+}
+.gd-sidebar-panel--collapsible .add-item-placeholder::before {
+  background-size: 18px auto;
+  transition: width var(--sidebar-slide-duration);
+}
+.gd-sidebar-panel--collapsible .gd-visualizations-list {
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-panel--collapsible .configuration-panel {
+  padding-top: 0;
+}
+.gd-sidebar-panel--collapsible .gd-creation-panel-header {
+  height: 48px;
+  border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+}
+.gd-sidebar-panel--collapsible .gd-creation-panel-header h2 {
+  margin-bottom: 0;
+  color: var(--gd-palette-complementary-8, #464e56);
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-panel--collapsible .add-item-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 0 8px;
+}
+.gd-sidebar-panel--collapsible .configuration-category {
+  margin-bottom: 0;
+  padding-top: 10px;
+}
+.gd-sidebar-panel--collapsible .configuration-category:not(.flex-panel-item-stretch) {
+  flex: 0 0 auto;
+}
+.gd-sidebar-panel--collapsible .configuration-category-vis {
+  position: relative;
+}
+.gd-sidebar-panel--collapsible .configuration-category-vis::before {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-creation-panel-header h2,
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-creation-panel-header .gd-sidebar-collapse-toggle,
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-visualizations-list {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-panel {
+  align-items: flex-start;
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder {
+  width: 32px;
+  padding: 0;
+  overflow: hidden;
+  color: transparent;
+  transition: color var(--sidebar-fade-duration), padding 0s linear var(--sidebar-fade-duration);
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder.add-panel-item svg {
+  transform: translateX(calc(-50% + 1px));
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder::before {
+  width: 32px;
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder.add-panel-item .gd-add-item-placeholder-help-trigger {
+  display: none;
+}
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .configuration-category-vis::before,
+.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-sidebar-rail-search {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+
+.gd-sidebar-rail-search {
+  position: absolute;
+  top: 21px;
+  left: 8px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
+}
+
+.gd-sidebar-rail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 48px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
+}
+.gd-sidebar-container--collapsed .gd-sidebar-rail {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-rail .gd-sidebar-collapse-toggle {
+  align-items: center;
+  height: 48px;
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gd-sidebar-container,
+  .gd-resizable-sidebar {
+    --sidebar-fade-duration: 0s;
+    --sidebar-fade-delay: 0s;
+    --sidebar-slide-duration: 0s;
+  }
+}
 .gd-resizable-sidebar {
+  --sidebar-fade-duration: 0.2s;
+  --sidebar-fade-delay: 0.3s;
+  --sidebar-slide-duration: 0.5s;
   display: flex;
   flex-direction: column;
   flex: 0 0 auto;
+  transition: width var(--sidebar-slide-duration);
 }
 .gd-resizable-sidebar--dragging, .gd-resizable-sidebar:has(.gd-resizable-sidebar__handle:focus) {
   z-index: 9999;
+  transition: none;
 }
 .gd-resizable-sidebar__handle {
   opacity: 0;
@@ -31030,6 +31220,14 @@ figure {
   visibility: hidden;
 }
 
+.gd-visualization-switcher-widget-header-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+}
+
 .gd-alerts-list {
   width: 100%;
 }