@gooddata/sdk-ui-dashboard 11.60.0-alpha.2 → 11.60.0-alpha.4

package/styles/css/main.css

@@ -12433,17 +12433,33 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 .gd-period-range-picker .rc-picker {
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   box-sizing: border-box;
   width: 100%;
   gap: 4px;
 }
 
 .gd-period-range-picker .rc-picker-input {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.gd-period-range-picker__label {
+  display: flex;
+  flex: 1 0 auto;
+  align-items: flex-end;
+  padding-bottom: 4px;
+  color: var(--gd-palette-complementary-7-from-theme, #687581);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.gd-period-range-picker__field {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  flex: auto;
   box-sizing: border-box;
   padding: 0 10px;
   border: 1px solid var(--gd-palette-complementary-3, #dde4eb);
@@ -12452,19 +12468,19 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   transition: border-color 0.2s;
 }
 
-.gd-period-range-picker .rc-picker-input:hover {
+.gd-period-range-picker__field:hover {
   border-color: var(--gd-palette-complementary-6, #94a1ad);
 }
 
-.gd-period-range-picker .rc-picker-input:focus-within {
+.gd-period-range-picker__field:focus-within {
   border-color: var(--gd-palette-primary-base, #14b2e2);
 }
 
-.gd-period-range-picker .rc-picker-input:has(input[aria-invalid=true]) {
+.gd-period-range-picker__field:has(input[aria-invalid=true]) {
   border-color: var(--gd-palette-error-base, #e54d42);
 }
 
-.gd-period-range-picker .rc-picker-input > input {
+.gd-period-range-picker__field > input {
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
@@ -12480,11 +12496,11 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   cursor: pointer;
 }
 
-.gd-period-range-picker .rc-picker-input > input::placeholder {
+.gd-period-range-picker__field > input::placeholder {
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
 
-.gd-period-range-picker .rc-picker-input .gd-icon-calendar {
+.gd-period-range-picker__field .gd-icon-calendar {
   position: absolute;
   top: 0;
   left: 10px;
@@ -12775,7 +12791,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   font-size: 12px;
 }
 
-.gd-period-range-picker.gd-period-range-picker-mobile .rc-picker-input > input {
+.gd-period-range-picker.gd-period-range-picker-mobile .gd-period-range-picker__field > input {
   font-size: 16px;
 }
 
@@ -28824,21 +28840,29 @@ figure {
   transition: width var(--sidebar-slide-duration);
 }
 .gd-sidebar-container--resizable {
-  min-width: 230px;
   width: 100%;
 }
 .gd-sidebar-container--collapsed {
-  min-width: 48px;
-  width: 48px;
+  min-width: 0;
+  width: 0;
 }
 .gd-sidebar-container--resizable.gd-sidebar-container--collapsed {
   width: 100%;
 }
 
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar,
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar__expand-trigger {
+  --resizable-sidebar-slide-duration: 0.5s;
+  z-index: 6001;
+}
+
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar--dragging {
+  z-index: 9999;
+}
+
 .gd-creation-panel-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
 }
 
 .gd-sidebar-collapse-toggle {
@@ -28846,6 +28870,10 @@ figure {
   margin: 0 10px;
 }
 
+.dash-header-inner .gd-sidebar-collapse-toggle {
+  margin: 0;
+}
+
 .gd-sidebar-panel {
   height: 100%;
 }
@@ -28856,20 +28884,14 @@ figure {
   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;
@@ -28880,8 +28902,8 @@ figure {
 }
 .gd-sidebar-panel--collapsible .gd-creation-panel-header h2 {
   margin-bottom: 0;
+  margin-left: 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;
@@ -28889,9 +28911,6 @@ figure {
   gap: 5px;
   padding: 0 8px;
 }
-.gd-sidebar-panel--collapsible .add-item-panel .gd-ui-kit-tooltip__anchor {
-  width: auto;
-}
 .gd-sidebar-panel--collapsible .configuration-category {
   margin-bottom: 0;
   padding-top: 10px;
@@ -28899,10 +28918,33 @@ figure {
 .gd-sidebar-panel--collapsible .configuration-category:not(.flex-panel-item-stretch) {
   flex: 0 0 auto;
 }
-.gd-sidebar-panel--collapsible .configuration-category-vis {
+.gd-sidebar-container--hidden .gd-sidebar-panel--collapsible .flex-panel-full-height {
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-container--hidden.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .flex-panel-full-height {
+  opacity: 0;
+  transition: opacity var(--sidebar-fade-duration);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-placeholder {
+  transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-placeholder svg {
+  transition: transform var(--sidebar-slide-duration);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-placeholder::before {
+  transition: width var(--sidebar-slide-duration);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-panel .gd-ui-kit-tooltip__anchor {
+  width: auto;
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .gd-creation-panel-header h2,
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .gd-visualizations-list {
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .configuration-category-vis {
   position: relative;
 }
-.gd-sidebar-panel--collapsible .configuration-category-vis::before {
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .configuration-category-vis::before {
   content: "";
   position: absolute;
   top: 10px;
@@ -28913,34 +28955,33 @@ figure {
   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 {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-creation-panel-header h2,
+.gd-sidebar-container--rail.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 {
+.gd-sidebar-container--rail.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 {
+.gd-sidebar-container--rail.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 {
+.gd-sidebar-container--rail.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 {
+.gd-sidebar-container--rail.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 {
+.gd-sidebar-container--rail.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 {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .configuration-category-vis::before,
+.gd-sidebar-container--rail.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);
@@ -28955,107 +28996,13 @@ figure {
   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 {
+  .gd-sidebar-container {
     --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;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  transform: translateX(calc(var(--drag-x, 0) - 50%));
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 6px;
-  background: transparent;
-  border: 0;
-  cursor: col-resize;
-  touch-action: none;
-}
-.gd-resizable-sidebar__handle:focus {
-  outline: none;
-}
-.gd-resizable-sidebar__handle:disabled {
-  cursor: initial;
-}
-.gd-resizable-sidebar__handle--dragging {
-  opacity: 1;
-}
-.gd-resizable-sidebar--resizable:hover .gd-resizable-sidebar__handle, .gd-resizable-sidebar--resizable:focus-within .gd-resizable-sidebar__handle {
-  opacity: 1;
-}
-.gd-resizable-sidebar__handle-grip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: 25px;
-  padding: 5px 3px;
-  background: var(--gd-palette-complementary-0);
-  border: 1px solid var(--gd-palette-complementary-5);
-  border-radius: 2px;
-}
-.gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip {
-  border: 2px solid #14b2e2;
-  border-radius: 3px;
-}
-.gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip::after, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: -1;
-  width: 2px;
-  background: #14b2e2;
-  box-shadow: 0 0 0 4px var(--gd-palette-primary-base-t85, rgba(20, 178, 226, 0.15));
-}
-
 .add-item-panel {
   padding: 0 7px;
 }