amis 2.0.0-rc.15 → 2.0.0-rc.20

package/lib/themes/cxd.css

@@ -6302,8 +6302,27 @@ body.video-react-full-window .video-react-fullscreen {
   --Switch-onDisabled-bgColor: #ccc;
   --Switch-onDisabled-circle-BackgroundColor: var(--white);
   --Switch-onDisabled-color: #fff;
+  --Switch-onHover-bgColor: var(--Switch-bgColor);
   --Switch-valueColor: var(--white);
   --Switch-width: 3.125rem;
+  --Switch-slider-margin: 0.0625rem;
+  --Switch-slider-width: calc(
+    var(--Switch-height) - var(--Switch-slider-margin) * 2
+  );
+  --Switch-slider-transition: margin-left var(--animation-duration);
+  --Switch-text-marginRight: 0.5rem;
+  --Switch-text-marginLeft: 1.5625rem;
+  --Switch-width--sm: 1.75rem;
+  --Switch-height--sm: 1rem;
+  --Switch-slider-width--sm: calc(
+    var(--Switch-height--sm) - var(--Switch-slider-margin) * 2
+  );
+  --Switch-text-marginRight--sm: calc(
+    var(--Switch-slider-margin) * 2 + var(--Switch-text-marginRight) / 2
+  );
+  --Switch-text-marginLeft--sm: calc(
+    var(--Switch-slider-margin) * 2 + var(--Switch-text-marginLeft) / 2
+  );
   --Table--unsaved-heading-bg: #e8f0fe;
   --Table--unsaved-heading-color: #4285f4;
   --Table-bg: var(--background);
@@ -6833,13 +6852,18 @@ body.video-react-full-window .video-react-fullscreen {
   --Switch-width: 2.75rem;
   --Switch-valueColor: #ffffff;
   --Switch-bgColor: #d4d6d9;
-  --Switch-onActive-bgColor: #b8babf;
+  --Switch-onActive-bgColor: var(--primary);
   --Switch-onHover-bgColor: #b8babf;
-  --Switch-checked-bgColor: var(--primary);
   --Switch-checked-onHover-bgColor: #144bcc;
   --Switch-checked-onActive-bgColor: #144bcc;
   --Switch-onDisabled-bgColor: #d4e5ff;
   --Switch-onDisabled-color: #ffffff;
+  --Switch-slider-margin: 0.125rem;
+  --Switch-slider-width: calc(
+    var(--Switch-height) - var(--Switch-slider-margin) * 2
+  );
+  --Switch-slider-transition: all 0.5s ease;
+  --Switch-text-margin: 0 px2rem(8px) 0 px2rem(25px);
   --Calendar-icon-bottom: -0.25rem;
   --Calendar-icon-width: 0.625rem;
   --Calendar-icon-height: 0.625rem;
@@ -22405,12 +22429,13 @@ input.cxd-TextControl-input-password {
   opacity: 0.4;
 }
 .cxd-Switch .text {
-  margin: 0 0.4375rem 0 1.5625rem;
+  margin: 0 var(--Switch-text-marginRight) 0 var(--Switch-text-marginLeft);
   color: var(--Switch-valueColor);
   text-indent: var(--gap-xs);
   text-transform: uppercase;
   font-size: var(--fontSizeSm);
   line-height: var(--Switch-height);
+  vertical-align: super;
   font-style: normal;
   font-weight: bold;
   transition: all var(--animation-duration);
@@ -22424,24 +22449,27 @@ input.cxd-TextControl-input-password {
   content: "";
   position: absolute;
   background: var(--white);
-  width: calc(var(--Switch-height) - 0.125rem);
-  top: 0.0625rem;
-  bottom: 0.0625rem;
-  left: 0.0625rem;
+  width: var(--Switch-slider-width);
+  top: var(--Switch-slider-margin);
+  bottom: var(--Switch-slider-margin);
+  left: var(--Switch-slider-margin);
   border-radius: 50%;
-  transition: margin-left var(--animation-duration);
+  transition: var(--Switch-slider-transition);
+}
+.cxd-Switch:hover {
+  background: var(--Switch-onHover-bgColor);
 }
 .cxd-Switch.is-checked {
   background: var(--Switch-onActive-bgColor);
 }
 .cxd-Switch.is-checked .slider::before {
   left: auto;
-  right: 0.0625rem;
+  right: var(--Switch-slider-margin);
   border-width: 0;
 }
 .cxd-Switch.is-checked .text {
   color: var(--white);
-  margin: 0 1.5625rem 0 0.4375rem;
+  margin: 0 var(--Switch-text-marginLeft) 0 var(--Switch-text-marginRight);
 }
 .cxd-Switch.is-checked.is-disabled .slider:before {
   color: var(--Switch-onDisabled-color);
@@ -22453,6 +22481,26 @@ input.cxd-TextControl-input-password {
   position: absolute;
   opacity: 0;
 }
+.cxd-Switch--sm {
+  height: var(--Switch-height--sm);
+  min-width: var(--Switch-width--sm);
+}
+.cxd-Switch--sm .text {
+  line-height: var(--Switch-height--sm);
+  margin: 0 var(--Switch-text-marginRight--sm) 0 var(--Switch-text-marginLeft--sm);
+}
+.cxd-Switch--sm .text > svg {
+  margin-top: calc((var(--Switch-height--sm) - var(--fontSizeSm)) / 2);
+}
+.cxd-Switch--sm .slider::before {
+  width: var(--Switch-slider-width--sm);
+}
+.cxd-Switch--sm.is-checked .slider::before {
+  right: var(--Switch-slider-margin);
+}
+.cxd-Switch--sm.is-checked .text {
+  margin: 0 var(--Switch-text-marginLeft--sm) 0 var(--Switch-text-marginRight--sm);
+}
 .cxd-Switch-option {
   vertical-align: middle;
   margin-left: var(--Switch-gap);
@@ -22971,6 +23019,28 @@ input.cxd-TextControl-input-password {
 .cxd-Select-option {
   cursor: pointer;
   padding: calc( ( var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
+  display: flex;
+}
+.cxd-Select-option-checkbox {
+  width: 100%;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+.cxd-Select-option-checkbox > label {
+  width: 100%;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+.cxd-Select-option-checkbox > label > span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .cxd-Select-option.is-active {
   color: var(--Form-select-menu-onActive-color);
@@ -24155,7 +24225,6 @@ td.rdtQuarter.rdtDisabled:hover {
   border-radius: var(--DatePicker-borderRadius);
   color: var(--DatePicker-color);
   background: var(--DatePicker-bg);
-  min-width: var(--DateRangePicker-minWidth);
 }
 .cxd-DateRangePicker--borderHalf {
   border-left-color: transparent !important;
@@ -24192,6 +24261,7 @@ td.rdtQuarter.rdtDisabled:hover {
   padding: 0;
   background: 0;
   flex: 1;
+  width: 50%;
 }
 .cxd-DateRangePicker .cxd-DateRangePicker-input.isActive {
   border-bottom: 1px solid var(--DatePicker-onFocused-borderColor);
@@ -24285,7 +24355,7 @@ td.rdtQuarter.rdtDisabled:hover {
   margin: 0;
   padding-left: 0.625rem;
   list-style: none;
-  background: #F7F7F9;
+  background: #f7f7f9;
   line-height: 2rem;
 }
 .cxd-DateRangePicker-ranger {
@@ -24308,12 +24378,6 @@ td.rdtQuarter.rdtDisabled:hover {
 .cxd-DateRangeControl:not(.is-inline) > .cxd-DateRangePicker {
   display: flex;
 }
-.cxd-DateRangeControl.is-date > .cxd-DateRangePicker {
-  min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
-}
-.cxd-DateRangeControl.is-datetime > .cxd-DateRangePicker {
-  min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
-}
 .cxd-DateRangePicker-popover {
   margin: 0.125rem 0 0;
 }
@@ -29173,34 +29237,10 @@ td.rdtQuarter.rdtDisabled:hover {
 .AMISDebug-logLine {
   overflow-x: hidden;
 }
-.cxd-Switch .text {
-  margin: 0 0.5rem 0 1.5625rem;
-  vertical-align: super;
-}
-.cxd-Switch .slider:before {
-  width: calc(var(--Switch-height) - 0.25rem);
-  top: 0.125rem;
-  bottom: 0.125rem;
-  left: 0.125rem;
-  transition: all 0.5s ease;
-}
 .cxd-Switch:active .slider::before {
-  width: calc(var(--Switch-height) + 0.125rem);
+  width: calc(var(--Switch-slider-width) + var(--Switch-slider-margin) * 2);
   border-radius: 10px;
 }
-.cxd-Switch:hover {
-  background: var(--Switch-onHover-bgColor);
-}
-.cxd-Switch.is-checked {
-  background: var(--Switch-checked-bgColor);
-}
-.cxd-Switch.is-checked .slider::before {
-  right: auto;
-  left: calc( 100% - (var(--Switch-height) - 0.25rem) - 0.125rem );
-}
-.cxd-Switch.is-checked .text {
-  margin: 0 1.5625rem 0 0.5rem;
-}
 .cxd-Switch.is-checked:hover {
   background: var(--Switch-checked-onHover-bgColor);
 }
@@ -29208,7 +29248,11 @@ td.rdtQuarter.rdtDisabled:hover {
   background: var(--Switch-checked-onActive-bgColor);
 }
 .cxd-Switch.is-checked:active .slider::before {
-  left: calc( 100% - (var(--Switch-height) + 0.125rem) - 0.125rem );
+  right: calc(var(--Switch-slider-margin) * 2);
+}
+.cxd-Switch--sm:active .slider::before {
+  width: calc( var(--Switch-slider-width--sm) + var(--Switch-slider-margin) * 2 );
+  border-radius: 10px;
 }
 .cxd-TextControl-sugs {
   border-radius: 0.1875rem;

package/lib/themes/dark-ie11.css

@@ -20565,12 +20565,13 @@ input.dark-TextControl-input-password {
   opacity: 0.4;
 }
 .dark-Switch .text {
-  margin: 0 0.4375rem 0 1.5625rem;
+  margin: 0 0.5rem 0 1.5625rem;
   color: #fff;
   text-indent: 0.25rem;
   text-transform: uppercase;
   font-size: 0.75rem;
   line-height: 1.375rem;
+  vertical-align: super;
   font-style: normal;
   font-weight: bold;
   transition: all 0.2s;
@@ -20584,13 +20585,18 @@ input.dark-TextControl-input-password {
   content: "";
   position: absolute;
   background: #fff;
-  width: calc(1.375rem - 0.125rem);
+  width: calc(
+    1.375rem - 0.0625rem * 2
+  );
   top: 0.0625rem;
   bottom: 0.0625rem;
   left: 0.0625rem;
   border-radius: 50%;
   transition: margin-left 0.2s;
 }
+.dark-Switch:hover {
+  background: #4b5563;
+}
 .dark-Switch.is-checked {
   background: #2296f3;
 }
@@ -20601,7 +20607,7 @@ input.dark-TextControl-input-password {
 }
 .dark-Switch.is-checked .text {
   color: #fff;
-  margin: 0 1.5625rem 0 0.4375rem;
+  margin: 0 1.5625rem 0 0.5rem;
 }
 .dark-Switch.is-checked.is-disabled .slider:before {
   color: #fff;
@@ -20613,6 +20619,36 @@ input.dark-TextControl-input-password {
   position: absolute;
   opacity: 0;
 }
+.dark-Switch--sm {
+  height: 1rem;
+  min-width: 1.75rem;
+}
+.dark-Switch--sm .text {
+  line-height: 1rem;
+  margin: 0 calc(
+    0.0625rem * 2 + 0.5rem / 2
+  ) 0 calc(
+    0.0625rem * 2 + 1.5625rem / 2
+  );
+}
+.dark-Switch--sm .text > svg {
+  margin-top: calc((1rem - 0.75rem) / 2);
+}
+.dark-Switch--sm .slider::before {
+  width: calc(
+    1rem - 0.0625rem * 2
+  );
+}
+.dark-Switch--sm.is-checked .slider::before {
+  right: 0.0625rem;
+}
+.dark-Switch--sm.is-checked .text {
+  margin: 0 calc(
+    0.0625rem * 2 + 1.5625rem / 2
+  ) 0 calc(
+    0.0625rem * 2 + 0.5rem / 2
+  );
+}
 .dark-Switch-option {
   vertical-align: middle;
   margin-left: 0.5rem;
@@ -21131,6 +21167,28 @@ input.dark-TextControl-input-password {
 .dark-Select-option {
   cursor: pointer;
   padding: calc( ( 1.875rem - 1.4285714286 * 0.875rem ) / 2 ) 0.5rem;
+  display: flex;
+}
+.dark-Select-option-checkbox {
+  width: 100%;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+.dark-Select-option-checkbox > label {
+  width: 100%;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+.dark-Select-option-checkbox > label > span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .dark-Select-option.is-active {
   color: #2296f3;
@@ -22352,10 +22410,6 @@ td.rdtQuarter.rdtDisabled:hover {
   border-radius: 0.142rem;
   color: #151b26;
   background: #333538;
-  min-width: calc(
-    1rem * 8 + 0.75rem * 2 +
-      0.875rem * 2
-  );
 }
 .dark-DateRangePicker--borderHalf {
   border-left-color: transparent !important;
@@ -22392,6 +22446,7 @@ td.rdtQuarter.rdtDisabled:hover {
   padding: 0;
   background: 0;
   flex: 1;
+  width: 50%;
 }
 .dark-DateRangePicker .dark-DateRangePicker-input.isActive {
   border-bottom: 1px solid #2296f3;
@@ -22485,7 +22540,7 @@ td.rdtQuarter.rdtDisabled:hover {
   margin: 0;
   padding-left: 0.625rem;
   list-style: none;
-  background: #F7F7F9;
+  background: #f7f7f9;
   line-height: 2rem;
 }
 .dark-DateRangePicker-ranger {
@@ -22508,18 +22563,6 @@ td.rdtQuarter.rdtDisabled:hover {
 .dark-DateRangeControl:not(.is-inline) > .dark-DateRangePicker {
   display: flex;
 }
-.dark-DateRangeControl.is-date > .dark-DateRangePicker {
-  min-width: calc(calc(
-    1rem * 8 + 0.75rem * 2 +
-      0.875rem * 2
-  ) + 1rem * 10);
-}
-.dark-DateRangeControl.is-datetime > .dark-DateRangePicker {
-  min-width: calc(calc(
-    1rem * 8 + 0.75rem * 2 +
-      0.875rem * 2
-  ) + 1rem * 10);
-}
 .dark-DateRangePicker-popover {
   margin: 0.125rem 0 0;
 }

package/lib/themes/dark.css

@@ -6302,8 +6302,27 @@ body.video-react-full-window .video-react-fullscreen {
   --Switch-onDisabled-bgColor: #ccc;
   --Switch-onDisabled-circle-BackgroundColor: var(--white);
   --Switch-onDisabled-color: #fff;
+  --Switch-onHover-bgColor: var(--Switch-bgColor);
   --Switch-valueColor: var(--white);
   --Switch-width: 3.125rem;
+  --Switch-slider-margin: 0.0625rem;
+  --Switch-slider-width: calc(
+    var(--Switch-height) - var(--Switch-slider-margin) * 2
+  );
+  --Switch-slider-transition: margin-left var(--animation-duration);
+  --Switch-text-marginRight: 0.5rem;
+  --Switch-text-marginLeft: 1.5625rem;
+  --Switch-width--sm: 1.75rem;
+  --Switch-height--sm: 1rem;
+  --Switch-slider-width--sm: calc(
+    var(--Switch-height--sm) - var(--Switch-slider-margin) * 2
+  );
+  --Switch-text-marginRight--sm: calc(
+    var(--Switch-slider-margin) * 2 + var(--Switch-text-marginRight) / 2
+  );
+  --Switch-text-marginLeft--sm: calc(
+    var(--Switch-slider-margin) * 2 + var(--Switch-text-marginLeft) / 2
+  );
   --Table--unsaved-heading-bg: #e8f0fe;
   --Table--unsaved-heading-color: #4285f4;
   --Table-bg: var(--background);
@@ -21996,12 +22015,13 @@ input.dark-TextControl-input-password {
   opacity: 0.4;
 }
 .dark-Switch .text {
-  margin: 0 0.4375rem 0 1.5625rem;
+  margin: 0 var(--Switch-text-marginRight) 0 var(--Switch-text-marginLeft);
   color: var(--Switch-valueColor);
   text-indent: var(--gap-xs);
   text-transform: uppercase;
   font-size: var(--fontSizeSm);
   line-height: var(--Switch-height);
+  vertical-align: super;
   font-style: normal;
   font-weight: bold;
   transition: all var(--animation-duration);
@@ -22015,24 +22035,27 @@ input.dark-TextControl-input-password {
   content: "";
   position: absolute;
   background: var(--white);
-  width: calc(var(--Switch-height) - 0.125rem);
-  top: 0.0625rem;
-  bottom: 0.0625rem;
-  left: 0.0625rem;
+  width: var(--Switch-slider-width);
+  top: var(--Switch-slider-margin);
+  bottom: var(--Switch-slider-margin);
+  left: var(--Switch-slider-margin);
   border-radius: 50%;
-  transition: margin-left var(--animation-duration);
+  transition: var(--Switch-slider-transition);
+}
+.dark-Switch:hover {
+  background: var(--Switch-onHover-bgColor);
 }
 .dark-Switch.is-checked {
   background: var(--Switch-onActive-bgColor);
 }
 .dark-Switch.is-checked .slider::before {
   left: auto;
-  right: 0.0625rem;
+  right: var(--Switch-slider-margin);
   border-width: 0;
 }
 .dark-Switch.is-checked .text {
   color: var(--white);
-  margin: 0 1.5625rem 0 0.4375rem;
+  margin: 0 var(--Switch-text-marginLeft) 0 var(--Switch-text-marginRight);
 }
 .dark-Switch.is-checked.is-disabled .slider:before {
   color: var(--Switch-onDisabled-color);
@@ -22044,6 +22067,26 @@ input.dark-TextControl-input-password {
   position: absolute;
   opacity: 0;
 }
+.dark-Switch--sm {
+  height: var(--Switch-height--sm);
+  min-width: var(--Switch-width--sm);
+}
+.dark-Switch--sm .text {
+  line-height: var(--Switch-height--sm);
+  margin: 0 var(--Switch-text-marginRight--sm) 0 var(--Switch-text-marginLeft--sm);
+}
+.dark-Switch--sm .text > svg {
+  margin-top: calc((var(--Switch-height--sm) - var(--fontSizeSm)) / 2);
+}
+.dark-Switch--sm .slider::before {
+  width: var(--Switch-slider-width--sm);
+}
+.dark-Switch--sm.is-checked .slider::before {
+  right: var(--Switch-slider-margin);
+}
+.dark-Switch--sm.is-checked .text {
+  margin: 0 var(--Switch-text-marginLeft--sm) 0 var(--Switch-text-marginRight--sm);
+}
 .dark-Switch-option {
   vertical-align: middle;
   margin-left: var(--Switch-gap);
@@ -22562,6 +22605,28 @@ input.dark-TextControl-input-password {
 .dark-Select-option {
   cursor: pointer;
   padding: calc( ( var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
+  display: flex;
+}
+.dark-Select-option-checkbox {
+  width: 100%;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+.dark-Select-option-checkbox > label {
+  width: 100%;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+.dark-Select-option-checkbox > label > span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .dark-Select-option.is-active {
   color: var(--Form-select-menu-onActive-color);
@@ -23746,7 +23811,6 @@ td.rdtQuarter.rdtDisabled:hover {
   border-radius: var(--DatePicker-borderRadius);
   color: var(--DatePicker-color);
   background: var(--DatePicker-bg);
-  min-width: var(--DateRangePicker-minWidth);
 }
 .dark-DateRangePicker--borderHalf {
   border-left-color: transparent !important;
@@ -23783,6 +23847,7 @@ td.rdtQuarter.rdtDisabled:hover {
   padding: 0;
   background: 0;
   flex: 1;
+  width: 50%;
 }
 .dark-DateRangePicker .dark-DateRangePicker-input.isActive {
   border-bottom: 1px solid var(--DatePicker-onFocused-borderColor);
@@ -23876,7 +23941,7 @@ td.rdtQuarter.rdtDisabled:hover {
   margin: 0;
   padding-left: 0.625rem;
   list-style: none;
-  background: #F7F7F9;
+  background: #f7f7f9;
   line-height: 2rem;
 }
 .dark-DateRangePicker-ranger {
@@ -23899,12 +23964,6 @@ td.rdtQuarter.rdtDisabled:hover {
 .dark-DateRangeControl:not(.is-inline) > .dark-DateRangePicker {
   display: flex;
 }
-.dark-DateRangeControl.is-date > .dark-DateRangePicker {
-  min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
-}
-.dark-DateRangeControl.is-datetime > .dark-DateRangePicker {
-  min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
-}
 .dark-DateRangePicker-popover {
   margin: 0.125rem 0 0;
 }