amis 1.4.1 → 1.4.2-beta.13

package/scss/components/_column-toggler.scss

@@ -0,0 +1,234 @@
+.#{$ns}ColumnToggler {
+  position: relative;
+  display: inline-block;
+
+  &-caret {
+    margin-left: var(--DropDown-caret-marginLeft);
+    display: inline-block;
+    vertical-align: top;
+    transition: transform var(--animation-duration) ease;
+
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0.125em;
+    }
+  }
+
+  &.is-opened &-caret {
+    transform: rotate(180deg);
+  }
+
+  &.is-actived > .#{$ns}Button {
+    color: var(--link-color);
+  }
+
+  &--block {
+    display: block;
+
+    .#{$ns}Button {
+      display: block;
+    }
+  }
+
+  &-menu {
+    position: absolute;
+    z-index: $zindex-dropdown;
+    top: 100%;
+    left: 0;
+    margin: px2rem(1px) 0 0;
+    background: var(--DropDown-menu-bg);
+    list-style: none;
+    padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
+    border: var(--DropDown-menu-borderWidth) solid
+      var(--DropDown-menu-borderColor);
+    border-radius: var(--DropDown-menu-borderRadius);
+    box-shadow: var(--DropDown-menu-boxShadow);
+    min-width: var(--DropDown-menu-minWidth);
+    text-align: left;
+  }
+
+  &--alignRight &-menu {
+    left: auto;
+    right: 0;
+  }
+
+  &-menuItem,
+  &-menu > li {
+    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    white-space: nowrap;
+    box-sizing: border-box;
+    height: var(--DropDown-menu-height);
+    vertical-align: middle;
+    user-select: none;
+    color: var(--link-color);
+    text-decoration: var(--link-decoration);
+
+    &:hover {
+      background: var(--DropDown-menuItem-onHover-bg);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+
+    &.is-active {
+      color: var(--DropDown-menuItem-onActive-color);
+    }
+
+    &:not(.is-disabled),
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      // pointer-events: none;
+      color: var(--DropDown-menuItem-onDisabled-color);
+      filter: grayscale(80%);
+    }
+
+    &.#{$ns}DropDown-divider {
+      height: px2rem(1px);
+      margin: px2rem(9px) 0;
+      overflow: hidden;
+      background: var(--DropDown-menu-borderColor);
+      padding: 0;
+    }
+  }
+
+  &-menu > li a {
+    color: inherit;
+    display: block;
+    text-decoration: none;
+  }
+
+  &-popover {
+    border: none;
+    box-shadow: none;
+  }
+
+  > .#{$ns}Button {
+    min-width: unset;
+  }
+
+  @mixin flex-layout($direction: row) {
+    display: flex;
+    flex-flow: $direction nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-modal {
+    @include flex-layout(column);
+    width: px2rem(400px);
+    padding: var(--ColumnToggler-lineHeight);
+    margin-top: calc(50vh - 100px);
+    border-radius: var(--ColumnToggler-borderRadius);
+    background: var(--ColumnToggler-backgroundColor);
+    box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
+      0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);
+
+    &-header {
+      width: 100%;
+      @include flex-layout();
+
+      a,
+      span {
+        display: inline-block;
+      }
+
+      .#{$ns}ColumnToggler-modal-title {
+        opacity: 0.95;
+        font-size: var(--fontSizeMd);
+        color: var(--ColumnToggler-title-fontColor);
+        line-height: var(--ColumnToggler-lineHeight);
+        font-weight: bold;
+      }
+    }
+
+    &-content {
+      padding: 0;
+      width: 100%;
+      list-style: none;
+      margin: px2rem(8px) 0;
+
+      .#{$ns}ColumnToggler-menuItem {
+        color: var(--ColumnToggler-title-fontColor);
+        background: var(--ColumnToggler-item-backgroundColor);
+        border-radius: px2rem(2px);
+        font-size: var(--fontSizeSm);
+        padding: px2rem(4px) px2rem(8px);
+        height: var(--ColumnToggler-lineHeight);
+        width: calc((100% - 24px) / 3);
+        float: left;
+        margin: px2rem(4px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:hover {
+          background: var(--ColumnToggler-item-backgroundColor-onHover);
+        }
+
+        &--dragging {
+          border: 1px solid var(--link-color);
+        }
+
+        label {
+          > i {
+            height: var(--fontSizeLg);
+            width: var(--fontSizeLg);
+            vertical-align: top;
+          }
+        }
+
+        &-dragBar {
+          margin-left: 0;
+          margin-right: var(--gap-xs);
+          cursor: move;
+          color: #d8d8d8;
+        }
+      }
+    }
+
+    &-footer {
+      width: 100%;
+      @include flex-layout();
+
+      .#{$ns}ColumnToggler-modeSelect {
+        color: var(--ColumnToggler-fontColor);
+        font-size: var(--fontSizeSm);
+
+        &.is-actived {
+          color: var(--link-color);
+        }
+      }
+
+      & > div {
+        @include flex-layout();
+
+        &:first-child {
+          justify-content: flex-start;
+
+          a {
+            display: inline-block;
+          }
+        }
+
+        &:last-child {
+          justify-content: flex-end;
+
+          button {
+            width: 72px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}ColumnToggler-tooltip {
+  border: none;
+
+  .#{$ns}Tooltip-arrow::before {
+    border-top-color: transparent;
+  }
+}

package/scss/components/_dropdown.scss

@@ -63,7 +63,7 @@
     height: var(--DropDown-menu-height);
     vertical-align: middle;
     user-select: none;
-    color: var(--link-color);
+    color: var(--DropDown-menuItem-color);
     text-decoration: var(--link-decoration);
 
     &:hover {
@@ -72,6 +72,7 @@
     }
 
     &.is-active {
+      background: var(--DropDown-menuItem-onHover-bg);
       color: var(--DropDown-menuItem-onActive-color);
     }
 

package/scss/components/_images.scss

@@ -21,6 +21,7 @@
 
   &-thumbWrap {
     position: relative;
+    height: 100%;
   }
 
   &-image {
@@ -136,7 +137,7 @@
   }
 
   &-overlay {
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(8, 14, 26, 0.5);
     position: absolute;
     width: 100%;
     height: 100%;

package/scss/components/_input-box.scss

@@ -1,5 +1,6 @@
 .#{$ns}InputBox {
   @include input-input();
+  @include input-border();
 
   &--inline {
     display: inline-flex;

package/scss/components/_link.scss

@@ -0,0 +1,6 @@
+.#{$ns}Link {
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--text--muted-color);
+  }
+}

package/scss/components/_mapping.scss

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