amis 1.6.0 → 1.6.1-beta.0

package/lib/themes/cxd-ie11.css

@@ -606,6 +606,8 @@
   --Form-description-color: #273047;
   --Form-description-fontSize: var(--fontSizeSm);
   --Form-fontSize: var(--fontSizeBase);
+  --Form-item-fontSize: var(--Form-fontSize);
+  --Form-item-fontColor: #5e626a;
   --Form-group--lg-gutterWidth: 2.5rem;
   --Form-group--md-gutterWidth: 1.875rem;
   --Form-group--sm-gutterWidth: var(--gap-md);
@@ -1360,6 +1362,8 @@
   --Page-title-color: #000;
   --Page-header-paddingX: var(--gap-md);
   --Page-header-paddingY: 0.625rem;
+  --Form-item-fontSize: var(--fontSizeBase);
+  --Form-item-fontColor: #5e626a;
   --Form-item-gap: var(--gap-base);
   --Form-input-bg: #ffffff;
   --Form-input-color: #151a26;
@@ -5040,7 +5044,7 @@ input[type=button].cxd-Button--block {
   background: var(--PopOver-bg);
   left: 0;
   bottom: 0;
-  z-index: 1300;
+  z-index: 3000;
   padding: 0;
   margin: 0;
   font-weight: var(--fontWeightNormal);
@@ -7213,6 +7217,7 @@ input[type=button].cxd-Button--block {
 
 .cxd-CalendarMobile {
   height: 100%;
+  width: 100%;
   overflow: scroll;
 }
 .cxd-CalendarMobile-pop {
@@ -7363,6 +7368,9 @@ input[type=button].cxd-Button--block {
 .cxd-CalendarMobile-footer .cxd-DateRangePicker-rangers .cxd-DateRangePicker-ranger {
   margin: 0 1.5625rem;
 }
+.cxd-CalendarMobile-footer .cxd-DatePicker-shortcuts {
+  width: auto;
+}
 .cxd-CalendarMobile-calendar-wrap {
   padding: var(--gap-sm) 0;
 }
@@ -15146,6 +15154,31 @@ td.rdtQuarter.rdtDisabled > span {
   border-radius: var(--DatePicker-borderRadius);
 }
 
+.cxd-DateRangePicker.is-mobile {
+  border: 0;
+  justify-content: flex-end;
+}
+.cxd-DateRangePicker.is-mobile span:focus,
+.cxd-DateRangePicker.is-mobile a:focus {
+  outline: unset;
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-value,
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-clear {
+  display: inline-flex;
+  justify-content: flex-end;
+  padding: 0 0;
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-value {
+  margin-right: var(--gap-xs);
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-placeholder {
+  flex-grow: unset;
+  flex-basis: unset;
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-toggler {
+  margin-top: -3px;
+}
+
 .cxd-ImageControl {
   position: relative;
 }
@@ -17590,6 +17623,8 @@ td.rdtQuarter.rdtDisabled > span {
   font-weight: var(--fontWeightNormal);
   margin-bottom: var(--gap-xs);
   position: relative;
+  font-size: var(--Form-item-fontSize);
+  color: var(--Form-item-fontColor);
 }
 .cxd-Form-label > span {
   position: relative;
@@ -18693,6 +18728,152 @@ td.rdtQuarter.rdtDisabled > span {
   border-radius: var(--TimelineItem--icon-radius);
 }
 
+/**
+ * Debug 模块的 UI，由于没法使用任何主题，所以这里使用独立配色风格
+ */
+.AMISDebug {
+  position: fixed;
+  z-index: 4000;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 24px;
+}
+.AMISDebug h3 {
+  color: inherit;
+}
+.AMISDebug .primary {
+  color: #009fff;
+}
+.AMISDebug-header {
+  padding: var(--Drawer-header-padding);
+  background: var(--Drawer-header-bg);
+  border-bottom: var(--Drawer-content-borderWidth) solid var(--Drawer-header-borderColor);
+}
+.AMISDebug-hoverBox {
+  pointer-events: none;
+  position: absolute;
+  outline: 1px dashed #1c76c4;
+}
+.AMISDebug-activeBox {
+  pointer-events: none;
+  position: absolute;
+  outline: 1px #1c76c4;
+}
+.AMISDebug-tab {
+  overflow: hidden;
+}
+.AMISDebug-tab > button {
+  color: inherit;
+  background: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: var(--gap-sm) var(--gap-md);
+  transition: 0.3s;
+  border-bottom: 1px solid transparent;
+}
+.AMISDebug-tab > button:hover {
+  color: #e7e7e7;
+}
+.AMISDebug-tab > button.active {
+  color: #e7e7e7;
+  border-bottom-color: #e7e7e7;
+}
+.AMISDebug-toggle {
+  background: var(--body-bg);
+  position: fixed;
+  top: 50%;
+  right: 0;
+  width: 24px;
+  height: 48px;
+  box-shadow: rgba(0, 0, 0, 0.24) -2px 0px 4px 0px;
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  padding-top: 14px;
+  padding-left: 6px;
+  cursor: pointer;
+}
+.AMISDebug-toggle i {
+  color: var(--text-color);
+}
+.AMISDebug-toggle:hover i {
+  color: var(--primary);
+}
+.AMISDebug-content {
+  display: none;
+}
+.AMISDebug-resize {
+  position: absolute;
+  width: 4px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  cursor: col-resize;
+}
+.AMISDebug-resize:hover {
+  background: #75715e;
+}
+.AMISDebug-changePosition {
+  position: absolute;
+  font-size: 18px;
+  right: 40px;
+  top: var(--gap-sm);
+  cursor: pointer;
+}
+.AMISDebug-close {
+  position: absolute;
+  font-size: 18px;
+  right: var(--gap-sm);
+  top: var(--gap-sm);
+  cursor: pointer;
+}
+.AMISDebug.is-expanded {
+  width: 420px;
+  overflow: auto;
+  background: #272821;
+  color: #cccccc;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+.AMISDebug.is-expanded .AMISDebug-toggle {
+  display: none;
+}
+.AMISDebug.is-expanded .AMISDebug-content {
+  display: block;
+}
+.AMISDebug.is-left {
+  left: 0;
+}
+.AMISDebug.is-left .AMISDebug-resize {
+  left: unset;
+  right: 0;
+}
+.AMISDebug-log {
+  padding: var(--gap-sm);
+}
+.AMISDebug-log button {
+  cursor: pointer;
+  background: #0e639c;
+  flex-grow: 1;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 11px;
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+  max-width: 300px;
+  border: none;
+}
+.AMISDebug-log button:hover {
+  background: #1177bb;
+}
+.AMISDebug-inspect {
+  padding: var(--gap-sm);
+}
+
 /*
  * utilities
  */
@@ -21061,15 +21242,8 @@ a.label:hover, a.label:focus {
   padding-left: 0;
 }
 
-.cxd-Form-label {
-  font-size: 14px;
-  color: #5e626a;
-}
-
 .cxd-Form-item--inline .cxd-Form-label {
   margin-right: 1rem;
-  font-size: 14px;
-  color: #5e626a;
 }
 
 .cxd-Form .cxd-Collapse {

package/lib/themes/cxd.css

@@ -606,6 +606,8 @@
   --Form-description-color: #273047;
   --Form-description-fontSize: var(--fontSizeSm);
   --Form-fontSize: var(--fontSizeBase);
+  --Form-item-fontSize: var(--Form-fontSize);
+  --Form-item-fontColor: #5e626a;
   --Form-group--lg-gutterWidth: 2.5rem;
   --Form-group--md-gutterWidth: 1.875rem;
   --Form-group--sm-gutterWidth: var(--gap-md);
@@ -1360,6 +1362,8 @@
   --Page-title-color: #000;
   --Page-header-paddingX: var(--gap-md);
   --Page-header-paddingY: 0.625rem;
+  --Form-item-fontSize: var(--fontSizeBase);
+  --Form-item-fontColor: #5e626a;
   --Form-item-gap: var(--gap-base);
   --Form-input-bg: #ffffff;
   --Form-input-color: #151a26;
@@ -5040,7 +5044,7 @@ input[type=button].cxd-Button--block {
   background: var(--PopOver-bg);
   left: 0;
   bottom: 0;
-  z-index: 1300;
+  z-index: 3000;
   padding: 0;
   margin: 0;
   font-weight: var(--fontWeightNormal);
@@ -7213,6 +7217,7 @@ input[type=button].cxd-Button--block {
 
 .cxd-CalendarMobile {
   height: 100%;
+  width: 100%;
   overflow: scroll;
 }
 .cxd-CalendarMobile-pop {
@@ -7363,6 +7368,9 @@ input[type=button].cxd-Button--block {
 .cxd-CalendarMobile-footer .cxd-DateRangePicker-rangers .cxd-DateRangePicker-ranger {
   margin: 0 1.5625rem;
 }
+.cxd-CalendarMobile-footer .cxd-DatePicker-shortcuts {
+  width: auto;
+}
 .cxd-CalendarMobile-calendar-wrap {
   padding: var(--gap-sm) 0;
 }
@@ -15146,6 +15154,31 @@ td.rdtQuarter.rdtDisabled > span {
   border-radius: var(--DatePicker-borderRadius);
 }
 
+.cxd-DateRangePicker.is-mobile {
+  border: 0;
+  justify-content: flex-end;
+}
+.cxd-DateRangePicker.is-mobile span:focus,
+.cxd-DateRangePicker.is-mobile a:focus {
+  outline: unset;
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-value,
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-clear {
+  display: inline-flex;
+  justify-content: flex-end;
+  padding: 0 0;
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-value {
+  margin-right: var(--gap-xs);
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-placeholder {
+  flex-grow: unset;
+  flex-basis: unset;
+}
+.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-toggler {
+  margin-top: -3px;
+}
+
 .cxd-ImageControl {
   position: relative;
 }
@@ -17590,6 +17623,8 @@ td.rdtQuarter.rdtDisabled > span {
   font-weight: var(--fontWeightNormal);
   margin-bottom: var(--gap-xs);
   position: relative;
+  font-size: var(--Form-item-fontSize);
+  color: var(--Form-item-fontColor);
 }
 .cxd-Form-label > span {
   position: relative;
@@ -18693,6 +18728,152 @@ td.rdtQuarter.rdtDisabled > span {
   border-radius: var(--TimelineItem--icon-radius);
 }
 
+/**
+ * Debug 模块的 UI，由于没法使用任何主题，所以这里使用独立配色风格
+ */
+.AMISDebug {
+  position: fixed;
+  z-index: 4000;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 24px;
+}
+.AMISDebug h3 {
+  color: inherit;
+}
+.AMISDebug .primary {
+  color: #009fff;
+}
+.AMISDebug-header {
+  padding: var(--Drawer-header-padding);
+  background: var(--Drawer-header-bg);
+  border-bottom: var(--Drawer-content-borderWidth) solid var(--Drawer-header-borderColor);
+}
+.AMISDebug-hoverBox {
+  pointer-events: none;
+  position: absolute;
+  outline: 1px dashed #1c76c4;
+}
+.AMISDebug-activeBox {
+  pointer-events: none;
+  position: absolute;
+  outline: 1px #1c76c4;
+}
+.AMISDebug-tab {
+  overflow: hidden;
+}
+.AMISDebug-tab > button {
+  color: inherit;
+  background: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: var(--gap-sm) var(--gap-md);
+  transition: 0.3s;
+  border-bottom: 1px solid transparent;
+}
+.AMISDebug-tab > button:hover {
+  color: #e7e7e7;
+}
+.AMISDebug-tab > button.active {
+  color: #e7e7e7;
+  border-bottom-color: #e7e7e7;
+}
+.AMISDebug-toggle {
+  background: var(--body-bg);
+  position: fixed;
+  top: 50%;
+  right: 0;
+  width: 24px;
+  height: 48px;
+  box-shadow: rgba(0, 0, 0, 0.24) -2px 0px 4px 0px;
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  padding-top: 14px;
+  padding-left: 6px;
+  cursor: pointer;
+}
+.AMISDebug-toggle i {
+  color: var(--text-color);
+}
+.AMISDebug-toggle:hover i {
+  color: var(--primary);
+}
+.AMISDebug-content {
+  display: none;
+}
+.AMISDebug-resize {
+  position: absolute;
+  width: 4px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  cursor: col-resize;
+}
+.AMISDebug-resize:hover {
+  background: #75715e;
+}
+.AMISDebug-changePosition {
+  position: absolute;
+  font-size: 18px;
+  right: 40px;
+  top: var(--gap-sm);
+  cursor: pointer;
+}
+.AMISDebug-close {
+  position: absolute;
+  font-size: 18px;
+  right: var(--gap-sm);
+  top: var(--gap-sm);
+  cursor: pointer;
+}
+.AMISDebug.is-expanded {
+  width: 420px;
+  overflow: auto;
+  background: #272821;
+  color: #cccccc;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+.AMISDebug.is-expanded .AMISDebug-toggle {
+  display: none;
+}
+.AMISDebug.is-expanded .AMISDebug-content {
+  display: block;
+}
+.AMISDebug.is-left {
+  left: 0;
+}
+.AMISDebug.is-left .AMISDebug-resize {
+  left: unset;
+  right: 0;
+}
+.AMISDebug-log {
+  padding: var(--gap-sm);
+}
+.AMISDebug-log button {
+  cursor: pointer;
+  background: #0e639c;
+  flex-grow: 1;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 11px;
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+  max-width: 300px;
+  border: none;
+}
+.AMISDebug-log button:hover {
+  background: #1177bb;
+}
+.AMISDebug-inspect {
+  padding: var(--gap-sm);
+}
+
 /*
  * utilities
  */
@@ -21061,15 +21242,8 @@ a.label:hover, a.label:focus {
   padding-left: 0;
 }
 
-.cxd-Form-label {
-  font-size: 14px;
-  color: #5e626a;
-}
-
 .cxd-Form-item--inline .cxd-Form-label {
   margin-right: 1rem;
-  font-size: 14px;
-  color: #5e626a;
 }
 
 .cxd-Form .cxd-Collapse {