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

package/styles/css/main.css

@@ -10742,6 +10742,15 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   border-radius: var(--gd-modal-borderRadius, 3px);
   border-width: var(--gd-modal-borderWidth, 0);
   box-shadow: var(--gd-modal-dropShadow, 0 1px 20px) var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.15));
+}
+
+.gd-dialog:not(.gd-dropdown).gd-dialog--wide,
+.overlay.gd-dialog:not(.gd-dropdown).gd-dialog--wide {
+  max-width: 800px;
+}
+
+.gd-dialog:not(.gd-dropdown),
+.overlay.gd-dialog:not(.gd-dropdown) {
   /**
    * Row inside a row has negative margin.
    * Dialog can be inserted anywhere to the DOM,
@@ -10750,11 +10759,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
    */
 }
 
-.gd-dialog:not(.gd-dropdown).gd-dialog--wide,
-.overlay.gd-dialog:not(.gd-dropdown).gd-dialog--wide {
-  max-width: 800px;
-}
-
 .gd-dialog:not(.gd-dropdown) .row,
 .overlay.gd-dialog:not(.gd-dropdown) .row {
   width: auto;
@@ -25411,14 +25415,16 @@ figure {
   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 .dash-item {
   /**
    * View mode now uses grid gap. Keep spacing with padding in edit mode only, where using grid gap is problematic.
    * Use :where selector to not mess up with specificity.
    */
 }
-.gd-grid-layout .dash-item .is-dragging-widget.dash-item-content {
-  border-color: var(--gd-palette-complementary-2, #ebeff4);
-}
 :where(.sdk-edit-mode-on) .gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
   padding: 10px 0 0 0;
 }
@@ -26595,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;
@@ -27745,14 +27780,6 @@ figure {
   background-size: 146px 16px;
 }
 
-.export-mode {
-  /* =====================================================================
-  Export Mode Accessibility Enhancements
-  ===================================================================== */
-  /* =====================================================================
-  Export Mode Accessibility Enhancements
-  ===================================================================== */
-}
 .export-mode * {
   transition: none !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -27795,6 +27822,11 @@ figure {
 .export-mode .gd-grid-layout__container--nested {
   padding-bottom: 300px;
 }
+.export-mode {
+  /* =====================================================================
+  Export Mode Accessibility Enhancements
+  ===================================================================== */
+}
 .export-mode .gd-widget-export {
   z-index: auto;
 }
@@ -27809,6 +27841,11 @@ figure {
 .export-mode .gd-row-header-title-wrapper-export::before {
   display: none;
 }
+.export-mode {
+  /* =====================================================================
+  Export Mode Accessibility Enhancements
+  ===================================================================== */
+}
 
 .gd-dashboard-meta {
   display: none;
@@ -27932,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;
 }
@@ -28119,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;
@@ -28736,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;
@@ -31022,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%;
 }
@@ -31209,13 +31415,15 @@ figure {
 
 .gd-edit-alert__value-input {
   /* Removes number input arrows for Chrome, Safari, Edge, Opera */
-  /* Removes number input arrows for Firefox */
 }
 .gd-edit-alert__value-input input::-webkit-outer-spin-button,
 .gd-edit-alert__value-input input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+.gd-edit-alert__value-input {
+  /* Removes number input arrows for Firefox */
+}
 .gd-edit-alert__value-input input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;