amis 1.6.0 → 1.6.1-beta.0

package/lib/themes/dark-ie11.css

@@ -606,6 +606,8 @@
   --Form-description-color: white;
   --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);
@@ -1345,6 +1347,8 @@
   --DropDown-menu-bg: var(--background);
   --Drawer-header-bg: var(--background);
   --Fieldset-legend-bgColor: var(--background);
+  --Form-item-fontSize: var(--fontSizeBase);
+  --Form-item-fontColor: var(--body-color);
   --Form-input-addOnBg: var(--Form-input-bg);
   --Form-input-bg: #3c3c3c;
   --Form-input-color: var(--text-color);
@@ -4655,7 +4659,7 @@ input[type=button].dark-Button--block {
   background: var(--PopOver-bg);
   left: 0;
   bottom: 0;
-  z-index: 1300;
+  z-index: 3000;
   padding: 0;
   margin: 0;
   font-weight: var(--fontWeightNormal);
@@ -6828,6 +6832,7 @@ input[type=button].dark-Button--block {
 
 .dark-CalendarMobile {
   height: 100%;
+  width: 100%;
   overflow: scroll;
 }
 .dark-CalendarMobile-pop {
@@ -6978,6 +6983,9 @@ input[type=button].dark-Button--block {
 .dark-CalendarMobile-footer .dark-DateRangePicker-rangers .dark-DateRangePicker-ranger {
   margin: 0 1.5625rem;
 }
+.dark-CalendarMobile-footer .dark-DatePicker-shortcuts {
+  width: auto;
+}
 .dark-CalendarMobile-calendar-wrap {
   padding: var(--gap-sm) 0;
 }
@@ -14761,6 +14769,31 @@ td.rdtQuarter.rdtDisabled > span {
   border-radius: var(--DatePicker-borderRadius);
 }
 
+.dark-DateRangePicker.is-mobile {
+  border: 0;
+  justify-content: flex-end;
+}
+.dark-DateRangePicker.is-mobile span:focus,
+.dark-DateRangePicker.is-mobile a:focus {
+  outline: unset;
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-value,
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-clear {
+  display: inline-flex;
+  justify-content: flex-end;
+  padding: 0 0;
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-value {
+  margin-right: var(--gap-xs);
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-placeholder {
+  flex-grow: unset;
+  flex-basis: unset;
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-toggler {
+  margin-top: -3px;
+}
+
 .dark-ImageControl {
   position: relative;
 }
@@ -17205,6 +17238,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);
 }
 .dark-Form-label > span {
   position: relative;
@@ -18308,6 +18343,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
  */

package/lib/themes/dark.css

@@ -606,6 +606,8 @@
   --Form-description-color: white;
   --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);
@@ -1345,6 +1347,8 @@
   --DropDown-menu-bg: var(--background);
   --Drawer-header-bg: var(--background);
   --Fieldset-legend-bgColor: var(--background);
+  --Form-item-fontSize: var(--fontSizeBase);
+  --Form-item-fontColor: var(--body-color);
   --Form-input-addOnBg: var(--Form-input-bg);
   --Form-input-bg: #3c3c3c;
   --Form-input-color: var(--text-color);
@@ -4655,7 +4659,7 @@ input[type=button].dark-Button--block {
   background: var(--PopOver-bg);
   left: 0;
   bottom: 0;
-  z-index: 1300;
+  z-index: 3000;
   padding: 0;
   margin: 0;
   font-weight: var(--fontWeightNormal);
@@ -6828,6 +6832,7 @@ input[type=button].dark-Button--block {
 
 .dark-CalendarMobile {
   height: 100%;
+  width: 100%;
   overflow: scroll;
 }
 .dark-CalendarMobile-pop {
@@ -6978,6 +6983,9 @@ input[type=button].dark-Button--block {
 .dark-CalendarMobile-footer .dark-DateRangePicker-rangers .dark-DateRangePicker-ranger {
   margin: 0 1.5625rem;
 }
+.dark-CalendarMobile-footer .dark-DatePicker-shortcuts {
+  width: auto;
+}
 .dark-CalendarMobile-calendar-wrap {
   padding: var(--gap-sm) 0;
 }
@@ -14761,6 +14769,31 @@ td.rdtQuarter.rdtDisabled > span {
   border-radius: var(--DatePicker-borderRadius);
 }
 
+.dark-DateRangePicker.is-mobile {
+  border: 0;
+  justify-content: flex-end;
+}
+.dark-DateRangePicker.is-mobile span:focus,
+.dark-DateRangePicker.is-mobile a:focus {
+  outline: unset;
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-value,
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-clear {
+  display: inline-flex;
+  justify-content: flex-end;
+  padding: 0 0;
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-value {
+  margin-right: var(--gap-xs);
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-placeholder {
+  flex-grow: unset;
+  flex-basis: unset;
+}
+.dark-DateRangePicker.is-mobile .dark-DateRangePicker-toggler {
+  margin-top: -3px;
+}
+
 .dark-ImageControl {
   position: relative;
 }
@@ -17205,6 +17238,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);
 }
 .dark-Form-label > span {
   position: relative;
@@ -18308,6 +18343,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
  */