amis 1.4.1 → 1.4.2-beta.1

package/scss/themes/cxd.scss

@@ -3,3 +3,369 @@
 @import './cxd-variables';
 
 @import './common';
+
+.#{$ns}Switch {
+  .text {
+    margin: 0 px2rem(8px) 0 px2rem(25px);
+    vertical-align: super;
+  }
+  .slider {
+    &:before {
+      width: calc(var(--Switch-height) - #{px2rem(4px)});
+      top: px2rem(2px);
+      bottom: px2rem(2px);
+    }
+  }
+  &:active {
+    .slider::before {
+      width: calc(var(--Switch-height) + #{px2rem(2px)});
+      border-radius: 10px;
+    }
+  }
+  &:hover {
+    background: var(--Switch-onHover-bgColor);
+  }
+  &.is-checked {
+    background: var(--Switch-checked-bgColor);
+
+    .slider::before {
+      right: px2rem(2px);
+    }
+
+    .text {
+      margin: 0 px2rem(25px) 0 px2rem(8px);
+    }
+    &:hover {
+      background: var(--Switch-checked-onHover-bgColor);
+    }
+    &:active {
+      background: var(--Switch-checked-onActive-bgColor);
+    }
+  }
+}
+
+// input选择器模式
+.#{$ns}TextControl-sugs {
+  border-radius: px2rem(3px);
+  top: calc(var(--Form-input-height) + #{px2rem(4px)});
+  box-shadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
+  border: none;
+}
+
+.#{$ns}Select {
+  .#{$ns}PopOver {
+    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+    .#{$ns}Select-menu {
+      border-radius: #{$R3};
+      .#{$ns}Select-option {
+        height: var(--Form-input-height);
+        padding: px2rem(5px) px2rem(12px);
+      }
+    }
+  }
+}
+
+.#{$ns}NestedSelectControl {
+  .#{$ns}PopOver {
+    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+    .#{$ns}NestedSelect-menuOuter {
+      .#{$ns}NestedSelect-menu {
+        border-radius: #{$R3};
+        .#{$ns}NestedSelect-option {
+          height: var(--Form-input-height);
+          padding: 0 px2rem(12px);
+          .#{$ns}NestedSelect-optionArrowRight {
+            padding-right: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          margin-left: 2px;
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}TreeSelectControl {
+  .#{$ns}PopOver {
+    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+    box-shadow: var(--boxShadow);
+    .#{$ns}Tree {
+      border-radius: #{$R3};
+      border: none;
+    }
+  }
+}
+
+.#{$ns}DropDown {
+  .#{$ns}DropDown-menu {
+    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+    border: none;
+    > li {
+      color: #{$G2};
+    }
+    > li.is-disabled {
+      color: #{$G6};
+    }
+  }
+}
+
+.#{$ns}Toast {
+  .#{$ns}Toast-icon {
+    margin-right: #{px2rem(8px)};
+  }
+  .#{$ns}Toast-close {
+    margin-left: #{px2rem(8px)};
+    cursor: pointer;
+  }
+}
+
+.#{$ns}InputGroup {
+  // .#{$ns}TextControl-input {
+  // }
+  .#{$ns}InputGroup-btn .#{$ns}Button {
+    border-radius: px2rem(3px);
+  }
+
+  .#{$ns}InputGroup-btn:last-child .#{$ns}Button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.#{$ns}Button--iconOnly {
+  min-width: var(--Button-height);
+}
+
+.#{$ns}Alert {
+  font-weight: #{$W2};
+  .#{$ns}Alert-close {
+    opacity: 1;
+    color: #{$G5};
+    &:hover {
+      color: #{$G4};
+    }
+    &:active {
+      color: #{$G3};
+    }
+  }
+}
+
+.#{$ns}ColorPicker {
+  .#{$ns}PopOver {
+    border: none;
+    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+    box-shadow: var(--boxShadow);
+  }
+}
+
+.#{$ns}IconPickerControl {
+  .#{$ns}IconPickerControl-input--withAC {
+    .#{$ns}IconPickerControl-sugsPanel {
+      border: none;
+      top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+      box-shadow: var(--boxShadow);
+      border-radius: px2rem(3px);
+    }
+  }
+}
+
+.#{$ns}Combo {
+  .#{$ns}Combo-items {
+    .#{$ns}Combo-item {
+      .#{$ns}Combo-delBtn {
+        padding-top: calc(
+          (var(--Form-input-height) - var(--Form-input-lineHeight) * 10px) / 2
+        );
+      }
+    }
+  }
+}
+
+.#{$ns}LocationControl {
+  .#{$ns}PopOver {
+    border: none;
+    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
+    box-shadow: var(--boxShadow);
+  }
+}
+
+.#{$ns}Transfer {
+  &-title {
+    height: var(--Form-input-height);
+    padding-left: #{px2rem(16px)};
+    padding-right: #{px2rem(16px)};
+  }
+  .#{$ns}ListCheckboxes {
+    .#{$ns}ListCheckboxes-item {
+      padding-left: #{px2rem(16px)};
+      padding-right: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Modal {
+  box-shadow: var(--boxShadow);
+  &-content {
+    padding: #{px2rem(24px)};
+    border-radius: #{$R4};
+  }
+
+  &-body {
+    padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
+    font-size: #{$T2};
+    font-weight: #{$W2};
+  }
+
+  &-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Drawer {
+  &-content {
+    border-radius: #{$R4};
+  }
+  &-header {
+    border-radius: #{$R4} 0 0 0;
+  }
+  &-title {
+    font-size: #{$T3};
+    font-weight: #{$W3};
+  }
+
+  &-body {
+    font-size: #{$T3};
+    font-weight: #{$W2};
+  }
+}
+
+.#{$ns}Drawer--right {
+  .#{$ns}Drawer-footer {
+    justify-content: flex-end;
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Drawer--left {
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Drawer--top,
+.#{$ns}Drawer--bottom {
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Steps {
+  .#{$ns}StepsItem {
+    &-container {
+      &Icon {
+        padding-right: #{px2rem(8px)};
+        .#{$ns}StepsItem-icon {
+          width: #{px2rem(24px)};
+          height: #{px2rem(24px)};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          svg {
+            width: #{px2rem(12px)};
+            height: #{px2rem(12px)};
+          }
+        }
+
+        &Wrapper {
+          .#{$ns}StepsItem-body {
+            .#{$ns}StepsItem-title {
+              &:after {
+                padding-right: #{px2rem(8px)};
+              }
+            }
+            .#{$ns}StepsItem-subTitle {
+              padding-left: #{px2rem(8px)};
+            }
+          }
+        }
+      }
+    }
+  }
+  &--vertical {
+    .#{$ns}StepsItem {
+      &-container {
+        &Icon > .#{$ns}StepsItem-icon {
+          &:after {
+            top: px2rem(28px);
+            left: px2rem(10px);
+            transform: translate(px2rem(1px));
+          }
+        }
+      }
+    }
+  }
+  .#{$ns}StepsItem.is-finish {
+    .#{$ns}StepsItem-icon {
+      color: var(--Steps-status-success);
+      background-color: var(--white);
+    }
+  }
+
+  .#{$ns}StepsItem.is-error {
+    .#{$ns}StepsItem-icon {
+      color: var(--Steps-status-error);
+      background-color: var(--white);
+      border: 1px solid var(--Steps-status-error);
+    }
+  }
+}
+
+.#{$ns}Form-feedback {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.#{$ns}Form-label {
+  font-size: #{$T3};
+  color: #{$G4};
+}
+
+.#{$ns}Form-item {
+  &--inline {
+    .#{$ns}Form-label {
+      margin-right: #{px2rem(16px)};
+      font-size: #{$T3};
+      color: #{$G4};
+    }
+  }
+}
+
+//FieldSet Form + Collapse
+.#{$ns}Form {
+  .#{$ns}Collapse {
+    border: none;
+
+    &-arrow {
+      margin-left: px2rem(8px);
+    }
+    &-header {
+      background-color: var(--white);
+      display: inline-flex;
+      justify-content: flex-end;
+      flex-direction: row-reverse;
+    }
+    &-content {
+      padding: 0;
+    }
+  }
+}