amis-rev-ui 6.13.0

package/scss/components/_list.scss

@@ -0,0 +1,313 @@
+.#{$ns}List {
+  position: relative;
+  // 黑科技，让 scrollIntoView 能够跑正确的位置
+  // margin-top: calc(var(--affix-offset-top) * -1);
+  // padding-top: var(--affix-offset-top);
+  scroll-margin-top: var(--affix-offset-top);
+
+  &-items {
+    border-radius: var(--List-borderRadius);
+    border: var(--List-borderWidth) solid var(--List-borderColor);
+    background: var(--List-bg);
+    margin-bottom: var(--gap-sm);
+    margin-right: px2rem(15px);
+  }
+
+  &-toolbar {
+    @include clearfix();
+    display: flex;
+    flex-wrap: wrap;
+    padding: var(--List-toolbar-marginY) var(--List-toolbar-marginX)
+      var(--List-toolbar-marginY);
+  }
+
+  &-actions {
+    display: inline-block;
+
+    > * {
+      margin-right: var(--Crud-toolbar-gap);
+    }
+  }
+
+  &-header {
+    padding: var(--List-toolbar-marginY) var(--List-toolbar-marginX);
+
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+  }
+
+  &-header + &-toolbar {
+    padding-top: 0;
+  }
+
+  &-heading {
+    padding: var(--gap-xs) 0;
+  }
+
+  &-fixedTop {
+    position: sticky;
+    background: var(--white);
+    z-index: $zindex-sticky;
+    top: var(--affix-offset-top);
+    // box-shadow: var(--List-fixedTop-boxShadow);
+    // padding: var(--gap-sm);
+
+    .#{$ns}Cards-toolbar {
+      margin-bottom: 0;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--unsaved &-heading {
+    background: var(--List--unsaved-heading-bg);
+    color: var(--List--unsaved-heading-color);
+    padding: var(--gap-xs) var(--gap-sm);
+    margin-bottom: var(--gap-sm);
+  }
+
+  &-dragTip {
+    width: 100%;
+    color: var(--info);
+    clear: both;
+    margin-top: var(--gap-xs);
+  }
+
+  &-placeholder {
+    color: var(--text--muted-color);
+    text-align: center;
+    min-height: var(--List-placeholder-height);
+    line-height: var(--List-placeholder-height);
+  }
+
+  &-footToolbar--affix,
+  &-footer--affix {
+    position: sticky;
+    bottom: var(--affix-offset-bottom);
+    background: var(--Table-bg);
+    z-index: $zindex-sticky;
+  }
+
+  &-content-wrapper {
+    display: flex;
+    position: relative;
+  }
+
+  &-main {
+    flex: 1;
+    min-width: 0; // 防止内容溢出
+  }
+}
+
+.#{$ns}ListGroup {
+  max-width: px2rem(400px);
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    position: relative;
+    display: block;
+    padding: var(--ListItem-paddingY) var(--ListItem-paddingX);
+    margin-bottom: px2rem(-1px);
+    background: var(--white);
+    border: var(--ListItem-borderWidth) solid var(--List-borderColor);
+
+    &:first-child {
+      border-top-left-radius: var(--borderRadius);
+      border-top-right-radius: var(--borderRadius);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--borderRadius);
+      border-bottom-right-radius: var(--borderRadius);
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      // todo
+      z-index: 1;
+    }
+
+    &.is-active {
+      // todo
+      z-index: 2;
+    }
+
+    &.is-disabled {
+      color: var(--text--muted-color);
+    }
+  }
+
+  &--expanded {
+    .#{$ns}ListGroup-item {
+      border-radius: var(--borderRadius);
+
+      margin-bottom: var(--gap-sm);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.#{$ns}ListItem {
+  @include clearfix();
+
+  & + & {
+    border-top: var(--ListItem-borderWidth) solid var(--List-borderColor);
+  }
+
+  position: relative;
+  display: block;
+  padding: var(--ListItem-paddingY) var(--ListItem-paddingX);
+
+  &:nth-child(even) {
+    background: var(--ListItem--strip-bg);
+  }
+
+  &-checkBtn {
+    float: left;
+    margin-right: var(--gap-sm);
+  }
+
+  &-dragBtn {
+    cursor: move;
+    float: left;
+    margin-right: var(--gap-sm);
+  }
+
+  &-actions {
+    float: right;
+  }
+
+  &--actions-at-left &-actions {
+    float: left;
+    margin-right: var(--gap-base);
+  }
+
+  &-title {
+    margin: 0;
+    padding: 0;
+    font-size: var(--fontSizeBase);
+    color: var(--text--loud-color);
+    font-weight: var(--fontWeightNormal);
+  }
+
+  &-content {
+    overflow: hidden;
+  }
+
+  &-field {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &-fieldValue {
+    position: relative;
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-fieldLabel {
+    width: px2rem(150px);
+    color: var(--text--muted-color);
+  }
+
+  &.is-checked {
+    background: var(--ListItem-onChecked-bg);
+    border-color: var(--ListItem-onChecked-borderColor);
+    color: var(--ListItem-onChecked-color);
+
+    + .#{$ns}ListItem {
+      border-color: var(--ListItem-onChecked-borderColor);
+    }
+
+    .#{$ns}ListItem-fieldLabel {
+      color: var(--ListItem-onChecked-fieldLabel-color);
+    }
+  }
+
+  &.is-modified,
+  &.is-moved {
+    background: var(--ListItem-onModified-bg);
+    border-color: var(--ListItem-onModified-borderColor);
+    color: var(--ListItem-onModified-color);
+
+    + .#{$ns}ListItem {
+      border-color: var(--ListItem-onModified-borderColor);
+    }
+
+    .#{$ns}ListItem-fieldLabel {
+      color: var(--ListItem-onModified-fieldLabel-color);
+    }
+  }
+
+  &.is-dragging {
+    opacity: var(--ListItem-onDragging-opacity);
+  }
+
+  &--hasItemAction {
+    cursor: pointer;
+  }
+  &--hasItemAction:hover {
+    color: var(--ListMenu-item--onHover-color);
+    background: var(--ListMenu-item--onHover-bg);
+  }
+}
+
+// 修改索引条样式
+.#{$ns}AlphabetIndexer {
+  position: sticky;
+  top: calc(var(--affix-offset-top) + var(--gap-base));
+  right: px2rem(5px);
+  height: fit-content;
+  padding: px2rem(10px) px2rem(5px);
+  background: var(--white);
+  border-radius: var(--borderRadius);
+  box-shadow: var(--boxShadow);
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  overflow-y: auto;
+
+  // 移动端样式
+  @media (max-width: 768px) {
+    position: sticky;
+    top: calc(var(--affix-offset-top) + var(--gap-base));
+    right: px2rem(5px);
+    align-self: flex-start;
+  }
+
+  &-letter {
+    font-size: var(--fontSizeSm);
+    padding: px2rem(2px) px2rem(4px);
+    cursor: pointer;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      padding: px2rem(1px) px2rem(2px);
+    }
+
+    &:hover {
+      color: var(--primary);
+    }
+
+    &.is-active {
+      color: var(--white);
+      background: var(--primary);
+      border-radius: var(--borderRadius-sm);
+    }
+  }
+}

package/scss/components/_log.scss

@@ -0,0 +1,169 @@
+.#{$ns}Log {
+  position: relative;
+
+  &-body {
+    background: var(--Log-bg);
+    color: var(--Log-color);
+    padding: var(--Log-padding);
+    overflow-y: auto;
+    font-family: var(--fontFamilyMonospace);
+  }
+
+  &-line {
+    padding: var(--Log-line-padding);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    // bootstrap 会修改这些，覆盖掉
+    code {
+      color: inherit;
+      background: inherit;
+    }
+    &:hover {
+      background: var(--Log-line--onHover-bg);
+    }
+    &-number {
+      color: #999;
+      font-style: italic;
+      margin-right: 5px;
+    }
+    &-highlight {
+      background: #ffffb6;
+      display: inline-block;
+      color: #000;
+    }
+  }
+
+  &-operation {
+    position: relative;
+    background: rgba(28, 28, 28, 0.5);
+    & > a {
+      display: inline-flex;
+      flex-direction: row;
+      line-height: var(--Form-input-lineHeight);
+      font-size: var(--Form-input-fontSize);
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      height: 30px;
+      width: 30px;
+      padding-left: 8px;
+      transition: all var(--animation-duration) ease-in-out;
+      border: var(--Form-input-borderWidth) solid transparent;
+      border-radius: var(--Form-input-borderRadius);
+      overflow: hidden;
+      height: 30px;
+      width: 30px;
+    }
+    a {
+      color: #000;
+    }
+    & > a:hover {
+      background: var(--Form-input-onHover-bg);
+      color: var(--link-color);
+    }
+
+    & > a > svg {
+      margin-right: 8px;
+    }
+
+    & > a.is-disabled {
+      cursor: not-allowed;
+      color: #6b7280;
+    }
+
+    & > a.is-disabled:hover {
+      cursor: not-allowed;
+      background: transparent;
+      color: #6b7280;
+    }
+  }
+
+  .ansi-bold {
+    font-weight: 700;
+  }
+
+  .ansi-italic {
+    font-style: italic;
+  }
+
+  .ansi-underline {
+    text-decoration: underline;
+  }
+
+  .ansi-black-fg,
+  .ansi-bright-black-fg {
+    color: #4e4e4e;
+  }
+
+  .ansi-red-fg,
+  .ansi-bright-red-fg {
+    color: #ff6c60;
+  }
+
+  .ansi-green-fg,
+  .ansi-bright-green-fg {
+    color: #0a0;
+  }
+
+  .ansi-yellow-fg,
+  .ansi-bright-yellow-fg {
+    color: #ffffb6;
+  }
+
+  .ansi-blue-fg,
+  .ansi-bright-blue-fg {
+    color: #96cbfe;
+  }
+
+  .ansi-magenta-fg,
+  .ansi-bright-magenta-fg {
+    color: #ff73fd;
+  }
+
+  .ansi-cyan-fg,
+  .ansi-bright-cyan-fg {
+    color: #5ff;
+  }
+
+  .ansi-white-fg,
+  .ansi-bright-white-fg {
+    color: #eee;
+  }
+
+  .ansi-grey-fg,
+  .ansi-bright-grey-fg {
+    color: #969696;
+  }
+
+  .ansi-black-bg {
+    background-color: #4e4e4e;
+  }
+
+  .ansi-red-bg {
+    background-color: #ff6c60;
+  }
+
+  .ansi-green-bg {
+    background-color: #0a0;
+  }
+
+  .ansi-yellow-bg {
+    background-color: #ffffb6;
+  }
+
+  .ansi-blue-bg {
+    background-color: #96cbfe;
+  }
+
+  .ansi-magenta-bg {
+    background-color: #ff73fd;
+  }
+
+  .ansi-cyan-bg {
+    background-color: #0aa;
+  }
+
+  .ansi-white-bg {
+    background-color: #eee;
+  }
+}

package/scss/components/_mapping.scss

@@ -0,0 +1,6 @@
+.#{$ns}MappingField {
+  margin-right: var(--gap-xs);
+  &:last-child {
+    margin-right: 0;
+  }
+}