@qn-pandora/pandora-component 3.1.1 → 4.0.1

package/lib/components/DateTimePicker/Base/style.css

@@ -22,6 +22,7 @@
   border: 1px solid #bfbfbf;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   display: inline-block;
   width: 90px;
   margin: 0;
@@ -34,12 +35,20 @@
 }
 .ant-input-number::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input-number::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input-number::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input-number:placeholder-shown {
   text-overflow: ellipsis;
@@ -50,15 +59,18 @@
 }
 .ant-input-number:focus,
 .ant-input-number-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-number-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -69,6 +81,9 @@
 .ant-input-number[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -103,6 +118,279 @@ textarea.ant-input-number {
 .ant-input-number-sm {
   padding: 1px 7px;
 }
+.ant-input-number-group {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  position: relative;
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.ant-input-number-group[class*='col-'] {
+  float: none;
+  padding-right: 0;
+  padding-left: 0;
+}
+.ant-input-number-group > [class*='col-'] {
+  padding-right: 8px;
+}
+.ant-input-number-group > [class*='col-']:last-child {
+  padding-right: 0;
+}
+.ant-input-number-group-addon,
+.ant-input-number-group-wrap,
+.ant-input-number-group > .ant-input-number {
+  display: table-cell;
+}
+.ant-input-number-group-addon:not(:first-child):not(:last-child),
+.ant-input-number-group-wrap:not(:first-child):not(:last-child),
+.ant-input-number-group > .ant-input-number:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.ant-input-number-group-addon,
+.ant-input-number-group-wrap {
+  width: 1px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.ant-input-number-group-wrap > * {
+  display: block !important;
+}
+.ant-input-number-group .ant-input-number {
+  float: left;
+  width: 100%;
+  margin-bottom: 0;
+  text-align: inherit;
+}
+.ant-input-number-group .ant-input-number:focus {
+  z-index: 1;
+  border-right-width: 1px;
+}
+.ant-input-number-group .ant-input-number:hover {
+  z-index: 1;
+  border-right-width: 1px;
+}
+.ant-input-search-with-button .ant-input-number-group .ant-input-number:hover {
+  z-index: 0;
+}
+.ant-input-number-group-addon {
+  position: relative;
+  padding: 0 11px;
+  color: #333333;
+  font-weight: normal;
+  font-size: 14px;
+  text-align: center;
+  background-color: #fafafa;
+  border: 1px solid #bfbfbf;
+  border-radius: 2px;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-input-number-group-addon .ant-select {
+  margin: -5px -11px;
+}
+.ant-input-number-group-addon .ant-select.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  background-color: inherit;
+  border: 1px solid transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.ant-input-number-group-addon .ant-select-open .ant-select-selector,
+.ant-input-number-group-addon .ant-select-focused .ant-select-selector {
+  color: #7a869a;
+}
+.ant-input-number-group-addon .ant-cascader-picker {
+  margin: -9px -12px;
+  background-color: transparent;
+}
+.ant-input-number-group-addon .ant-cascader-picker .ant-cascader-input {
+  text-align: left;
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.ant-input-number-group > .ant-input-number:first-child,
+.ant-input-number-group-addon:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ant-input-number-group > .ant-input-number:first-child .ant-select .ant-select-selector,
+.ant-input-number-group-addon:first-child .ant-select .ant-select-selector {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ant-input-number-group > .ant-input-number-affix-wrapper:not(:first-child) .ant-input-number {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-number-group > .ant-input-number-affix-wrapper:not(:last-child) .ant-input-number {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ant-input-number-group-addon:first-child {
+  border-right: 0;
+}
+.ant-input-number-group-addon:last-child {
+  border-left: 0;
+}
+.ant-input-number-group > .ant-input-number:last-child,
+.ant-input-number-group-addon:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-number-group > .ant-input-number:last-child .ant-select .ant-select-selector,
+.ant-input-number-group-addon:last-child .ant-select .ant-select-selector {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-number-group-lg .ant-input-number,
+.ant-input-number-group-lg > .ant-input-number-group-addon {
+  padding: 6.5px 11px;
+  font-size: 16px;
+}
+.ant-input-number-group-sm .ant-input-number,
+.ant-input-number-group-sm > .ant-input-number-group-addon {
+  padding: 1px 7px;
+}
+.ant-input-number-group-lg .ant-select-single .ant-select-selector {
+  height: 40px;
+}
+.ant-input-number-group-sm .ant-select-single .ant-select-selector {
+  height: 26px;
+}
+.ant-input-number-group .ant-input-number-affix-wrapper:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ant-input-search .ant-input-number-group .ant-input-number-affix-wrapper:not(:last-child) {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.ant-input-number-group .ant-input-number-affix-wrapper:not(:first-child),
+.ant-input-search .ant-input-number-group .ant-input-number-affix-wrapper:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-number-group.ant-input-number-group-compact {
+  display: block;
+}
+.ant-input-number-group.ant-input-number-group-compact::before {
+  display: table;
+  content: '';
+}
+.ant-input-number-group.ant-input-number-group-compact::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.ant-input-number-group.ant-input-number-group-compact-addon:not(:first-child):not(:last-child),
+.ant-input-number-group.ant-input-number-group-compact-wrap:not(:first-child):not(:last-child),
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-number:not(:first-child):not(:last-child) {
+  border-right-width: 1px;
+}
+.ant-input-number-group.ant-input-number-group-compact-addon:not(:first-child):not(:last-child):hover,
+.ant-input-number-group.ant-input-number-group-compact-wrap:not(:first-child):not(:last-child):hover,
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-number:not(:first-child):not(:last-child):hover {
+  z-index: 1;
+}
+.ant-input-number-group.ant-input-number-group-compact-addon:not(:first-child):not(:last-child):focus,
+.ant-input-number-group.ant-input-number-group-compact-wrap:not(:first-child):not(:last-child):focus,
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-number:not(:first-child):not(:last-child):focus {
+  z-index: 1;
+}
+.ant-input-number-group.ant-input-number-group-compact > * {
+  display: inline-block;
+  float: none;
+  vertical-align: top;
+  border-radius: 0;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-number-affix-wrapper {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-picker-range {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.ant-input-number-group.ant-input-number-group-compact > *:not(:last-child) {
+  margin-right: -1px;
+  border-right-width: 1px;
+}
+.ant-input-number-group.ant-input-number-group-compact .ant-input-number {
+  float: none;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-select > .ant-select-selector,
+.ant-input-number-group.ant-input-number-group-compact > .ant-select-auto-complete .ant-input,
+.ant-input-number-group.ant-input-number-group-compact > .ant-cascader-picker .ant-input,
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-group-wrapper .ant-input {
+  border-right-width: 1px;
+  border-radius: 0;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-select > .ant-select-selector:hover,
+.ant-input-number-group.ant-input-number-group-compact > .ant-select-auto-complete .ant-input:hover,
+.ant-input-number-group.ant-input-number-group-compact > .ant-cascader-picker .ant-input:hover,
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-group-wrapper .ant-input:hover {
+  z-index: 1;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-select > .ant-select-selector:focus,
+.ant-input-number-group.ant-input-number-group-compact > .ant-select-auto-complete .ant-input:focus,
+.ant-input-number-group.ant-input-number-group-compact > .ant-cascader-picker .ant-input:focus,
+.ant-input-number-group.ant-input-number-group-compact > .ant-input-group-wrapper .ant-input:focus {
+  z-index: 1;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-select-focused {
+  z-index: 1;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-select > .ant-select-arrow {
+  z-index: 1;
+}
+.ant-input-number-group.ant-input-number-group-compact > *:first-child,
+.ant-input-number-group.ant-input-number-group-compact > .ant-select:first-child > .ant-select-selector,
+.ant-input-number-group.ant-input-number-group-compact > .ant-select-auto-complete:first-child .ant-input,
+.ant-input-number-group.ant-input-number-group-compact > .ant-cascader-picker:first-child .ant-input {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.ant-input-number-group.ant-input-number-group-compact > *:last-child,
+.ant-input-number-group.ant-input-number-group-compact > .ant-select:last-child > .ant-select-selector,
+.ant-input-number-group.ant-input-number-group-compact > .ant-cascader-picker:last-child .ant-input,
+.ant-input-number-group.ant-input-number-group-compact > .ant-cascader-picker-focused:last-child .ant-input {
+  border-right-width: 1px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.ant-input-number-group.ant-input-number-group-compact > .ant-select-auto-complete .ant-input {
+  vertical-align: top;
+}
+.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper + .ant-input-group-wrapper {
+  margin-left: -1px;
+}
+.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper + .ant-input-group-wrapper .ant-input-affix-wrapper {
+  border-radius: 0;
+}
+.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper:not(:last-child).ant-input-search > .ant-input-group > .ant-input-group-addon > .ant-input-search-button {
+  border-radius: 0;
+}
+.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper:not(:last-child).ant-input-search > .ant-input-group > .ant-input {
+  border-radius: 2px 0 0 2px;
+}
+.ant-input-number-group-wrapper {
+  display: inline-block;
+  text-align: start;
+  vertical-align: top;
+}
 .ant-input-number-handler {
   position: relative;
   display: block;
@@ -177,15 +465,18 @@ textarea.ant-input-number {
   transition: opacity 0.24s linear 0.24s;
 }
 .ant-input-number-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-number-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -213,19 +504,30 @@ textarea.ant-input-number {
   outline: 0;
   -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
-  -moz-appearance: textfield !important;
+  -webkit-appearance: textfield !important;
+     -moz-appearance: textfield !important;
+          appearance: textfield !important;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
 }
 .ant-input-number-input::-moz-placeholder {
   opacity: 1;
 }
 .ant-input-number-input::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input-number-input::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input-number-input::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input-number-input:placeholder-shown {
   text-overflow: ellipsis;
@@ -233,7 +535,9 @@ textarea.ant-input-number {
 .ant-input-number-input[type='number']::-webkit-inner-spin-button,
 .ant-input-number-input[type='number']::-webkit-outer-spin-button {
   margin: 0;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: none;
+  appearance: none;
 }
 .ant-input-number-lg {
   padding: 0;
@@ -263,6 +567,15 @@ textarea.ant-input-number {
 }
 .ant-input-number-handler-wrap .ant-input-number-handler .ant-input-number-handler-up-inner,
 .ant-input-number-handler-wrap .ant-input-number-handler .ant-input-number-handler-down-inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   min-width: auto;
   margin-right: 0;
   font-size: 7px;
@@ -273,7 +586,8 @@ textarea.ant-input-number {
 .ant-input-number-handler-wrap:hover .ant-input-number-handler {
   height: 40%;
 }
-.ant-input-number:hover .ant-input-number-handler-wrap {
+.ant-input-number:hover .ant-input-number-handler-wrap,
+.ant-input-number-focused .ant-input-number-handler-wrap {
   opacity: 1;
 }
 .ant-input-number-handler-up {
@@ -324,16 +638,23 @@ textarea.ant-input-number {
 .ant-input-number-rtl {
   direction: rtl;
 }
+.ant-input-number-rtl .ant-input-number-handler {
+  border-right: 1px solid #e5e5e5;
+  border-left: 0;
+}
 .ant-input-number-rtl .ant-input-number-handler-wrap {
   right: auto;
   left: 0;
-  border-right: 1px solid #e5e5e5;
-  border-left: 0;
-  border-radius: 2px 0 0 2px;
 }
 .ant-input-number-rtl.ant-input-number-borderless .ant-input-number-handler-wrap {
   border-right-width: 0;
 }
+.ant-input-number-rtl .ant-input-number-handler-up {
+  border-top-right-radius: 0;
+}
+.ant-input-number-rtl .ant-input-number-handler-down {
+  border-bottom-right-radius: 0;
+}
 .ant-input-number-rtl .ant-input-number-input {
   direction: ltr;
   text-align: right;
@@ -372,11 +693,11 @@ textarea.ant-input-number {
   border-right-width: 1px !important;
 }
 .ant-picker-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-picker.ant-picker-disabled {
   background: #f5f5f5;
@@ -417,6 +738,7 @@ textarea.ant-input-number {
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   -webkit-box-flex: 1;
       -ms-flex: auto;
           flex: auto;
@@ -431,12 +753,20 @@ textarea.ant-input-number {
 }
 .ant-picker-input > input::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-picker-input > input::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-picker-input > input::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-picker-input > input:placeholder-shown {
   text-overflow: ellipsis;
@@ -447,15 +777,18 @@ textarea.ant-input-number {
 }
 .ant-picker-input > input:focus,
 .ant-picker-input > input-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-picker-input > input-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -466,6 +799,9 @@ textarea.ant-input-number {
 .ant-picker-input > input[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -907,6 +1243,8 @@ textarea.ant-picker-input > input {
   height: 24px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
   content: '';
 }
 .ant-picker-cell .ant-picker-cell-inner {
@@ -972,6 +1310,8 @@ textarea.ant-picker-input > input {
   border-bottom: 1px dashed #b4bbc6;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
   content: '';
 }
 .ant-picker-cell-range-hover-start::after,
@@ -1002,6 +1342,8 @@ textarea.ant-picker-input > input {
   bottom: 0;
   z-index: -1;
   background: #dfe2e7;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
   content: '';
 }
 .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after {
@@ -1278,7 +1620,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   background: transparent;
   cursor: not-allowed;
 }
-/* stylelint-disable-next-line */
+/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
 _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-month-panel .ant-picker-cell,
 :root .ant-picker-range-wrapper .ant-picker-month-panel .ant-picker-cell,
 _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-cell,
@@ -1389,10 +1731,7 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   left: 0;
   border-right: 1px dashed #b4bbc6;
   border-left: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 0;
+  border-radius: 0 2px 2px 0;
 }
 .ant-picker-panel-rtl tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-selected):last-child::after,
 .ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after,
@@ -1402,10 +1741,7 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   left: 6px;
   border-right: none;
   border-left: 1px dashed #b4bbc6;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 2px;
+  border-radius: 2px 0 0 2px;
 }
 .ant-picker-panel-rtl tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after,
 .ant-picker-panel-rtl tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after,
@@ -1433,24 +1769,24 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
 .ant-btn-sm {
   padding: 0 7px;
 }
-.pandora-sdk-datetime-pick-title {
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel {
+  margin-bottom: 0;
+}
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel:last-child .pandora-sdk-datetime-pick-title {
+  border-bottom: none;
+}
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel .pandora-sdk-datetime-pick-title {
   padding: 8px 16px 6px;
   border-bottom: 1px solid #ffffff;
   color: #7a869a;
   font-size: 14px;
   background-color: #f4f5f7;
 }
-.pandora-sdk-datetime-pick-panel {
-  margin-bottom: 0;
-}
-.pandora-sdk-datetime-pick-panel:last-child .pandora-sdk-datetime-pick-title {
-  border-bottom: none;
-}
-.pandora-sdk-datetime-pick-preset {
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel .pandora-sdk-datetime-pick-preset {
   padding: 12px;
   text-align: left;
 }
-.pandora-sdk-datetime-pick-preset .pandora-sdk-datetime-pick-item {
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel .pandora-sdk-datetime-pick-preset .pandora-sdk-datetime-pick-item {
   display: inline-block;
   width: 96px;
   line-height: 28px;
@@ -1462,17 +1798,17 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   cursor: pointer;
   border-radius: 2px;
 }
-.pandora-sdk-datetime-pick-preset .pandora-sdk-datetime-pick-item.active {
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel .pandora-sdk-datetime-pick-preset .pandora-sdk-datetime-pick-item.active {
   background: #2c6dd2;
   color: #ffffff;
   pointer-events: none;
 }
+.pandora-sdk-panel.pandora-sdk-datetime-pick-panel .pandora-sdk-datetime-pick-panel-content {
+  padding: 0;
+}
 .pandora-sdk-datetime-pick-content {
   padding: 16px;
 }
-.pandora-sdk-datetime-pick-content .range-picker {
-  width: 100% !important;
-}
 .pandora-sdk-datetime-pick-content .ant-calendar-range-picker-input {
   width: calc(50% - 14px);
 }
@@ -1505,6 +1841,9 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   margin-left: 8px;
   margin-right: 12px;
 }
+.pandora-sdk-datetime-pick-absolute-content .pandora-sdk-datetime-pick-absolute-date-picker.range-picker {
+  width: 100%;
+}
 .pandora-sdk-datetime-pick-footer {
   padding: 0 16px 16px 16px;
   text-align: right;
@@ -1512,9 +1851,6 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
 .pandora-sdk-datetime-pick-footer .pandora-sdk-datetime-pick-footer-botton {
   border-radius: 2px;
 }
-.pandora-sdk-datetime-pick-panel-content {
-  padding: 0;
-}
 .pandora-sdk-datetime-pick-relative-root {
   position: relative;
   -webkit-box-flex: 1;
@@ -1572,9 +1908,6 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
 .pandora-sdk-datetime-pick-relative-footer-witNow {
   margin-top: 30px;
 }
-.pandora-sdk-quarter-datetime-pick-panel {
-  width: 360px;
-}
 .pandora-sdk-datetime-pick-quarter-content {
   padding-right: 12px;
   padding-left: 12px;
@@ -1591,10 +1924,6 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   min-width: 120px;
   border-left: 1px solid #ffffff;
 }
-.pandora-sdk-datetime-pick-quarter-content .pandora-sdk-selector .ant-select-selection {
-  background: #ebf0fd !important;
-  border-radius: 2px;
-}
 .pandora-sdk-selector .pandora-sdk-datetime-pick-quarter-content .pandora-sdk-selector {
   margin-left: 18px;
 }