@gooddata/sdk-ui-dashboard 11.60.0-alpha.1 → 11.60.0-alpha.3

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;
 }