amis-rev-ui 6.13.0

package/scss/components/_toast.scss

@@ -0,0 +1,342 @@
+@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  50%,
+  55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+
+.#{$ns}Toast {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  max-width: var(--Toast-width);
+  pointer-events: auto;
+  margin-bottom: var(--gap-xs);
+
+  padding: var(--Toast-paddingTop) var(--Toast-paddingRight)
+    var(--Toast-paddingBottom) var(--Toast-paddingLeft);
+  box-shadow: var(--Toast-box-shadow);
+  border-radius: var(--Toast-top-left-border-radius)
+    var(--Toast-top-right-border-radius) var(--Toast-bottom-right-border-radius)
+    var(--Toast-bottom-left-border-radius);
+  border: var(--Toast-border-width) solid;
+  color: var(--Toast-color);
+  position: relative;
+  opacity: var(--Toast-opacity);
+  opacity: 0;
+  transform: translateZ(0);
+  width: px2rem(400px);
+
+  &-wrap {
+    pointer-events: none;
+    position: fixed;
+    z-index: $zindex-toast;
+  }
+
+  &.in,
+  &.out {
+    animation-fill-mode: both;
+    animation-duration: var(--animation-duration);
+    opacity: 1;
+  }
+
+  &.in {
+    animation-name: bounceIn;
+  }
+
+  &.out {
+    animation-name: bounceOut;
+  }
+
+  &-close {
+    display: inline-flex;
+    font-size: var(--fontSizeLg);
+    line-height: var(--gap-xl);
+    height: var(--gap-xl);
+    color: var(--Toast-close-color);
+    margin-left: var(--gap-sm);
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      font-size: var(--fontSizeLg);
+      color: var(--Toast-close--onHover-color);
+    }
+
+    & > svg {
+      top: 0;
+    }
+  }
+
+  &-content {
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .#{$ns}Toast-title {
+      color: var(--text-color);
+      font-size: var(--fontSizeBase);
+      font-weight: 500;
+      line-height: var(--gap-xl);
+      margin-bottom: var(--gap-xs);
+    }
+
+    .#{$ns}Toast-body {
+      display: inline-block;
+      vertical-align: middle;
+      white-space: pre-wrap;
+      flex-grow: 1;
+      line-height: var(--gap-xl);
+      .#{$ns}Html {
+        word-break: break-word;
+      }
+    }
+  }
+
+  &-icon {
+    display: inline-flex;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+    margin-right: var(--gap-sm);
+    height: var(--gap-xl);
+    line-height: var(--gap-xl);
+    align-items: center;
+
+    > svg {
+      top: 0;
+      width: var(--Toast-icon-width);
+      height: var(--Toast-icon-height);
+      color: inherit;
+
+      &.icon-warning {
+        color: var(--Status-warning-color);
+      }
+
+      &.icon-fail {
+        color: var(--Status-fail-color);
+      }
+
+      &.icon-success {
+        color: var(--Status-success-color);
+      }
+
+      &.icon-schedule {
+        color: var(--Status-schedule-color);
+      }
+    }
+  }
+
+  // colors
+  &--error {
+    color: var(--Toast--danger-color);
+    background: var(--Toast--danger-bgColor);
+    font-size: var(--Toast--danger-fontSize);
+    font-weight: var(--Toast--danger-fontWeight);
+    background: var(--Toast--danger-bgColor);
+    border-width: var(--Toast--danger-top-border-width)
+      var(--Toast--danger-right-border-width)
+      var(--Toast--danger-bottom-border-width)
+      var(--Toast--danger-left-border-width);
+    border-style: var(--Toast--danger-top-border-style)
+      var(--Toast--danger-right-border-style)
+      var(--Toast--danger-bottom-border-style)
+      var(--Toast--danger-left-border-style);
+    border-color: var(--Toast--danger-top-border-color)
+      var(--Toast--danger-right-border-color)
+      var(--Toast--danger-bottom-border-color)
+      var(--Toast--danger-left-border-color);
+  }
+
+  &--warning {
+    color: var(--Toast--warning-color);
+    background: var(--Toast--warning-bgColor);
+    font-size: var(--Toast--warning-fontSize);
+    font-weight: var(--Toast--warning-fontWeight);
+    background: var(--Toast--warning-bgColor);
+    border-width: var(--Toast--warning-top-border-width)
+      var(--Toast--warning-right-border-width)
+      var(--Toast--warning-bottom-border-width)
+      var(--Toast--warning-left-border-width);
+    border-style: var(--Toast--warning-top-border-style)
+      var(--Toast--warning-right-border-style)
+      var(--Toast--warning-bottom-border-style)
+      var(--Toast--warning-left-border-style);
+    border-color: var(--Toast--warning-top-border-color)
+      var(--Toast--warning-right-border-color)
+      var(--Toast--warning-bottom-border-color)
+      var(--Toast--warning-left-border-color);
+  }
+
+  &--info {
+    color: var(--Toast--info-color);
+    font-size: var(--Toast--info-fontSize);
+    font-weight: var(--Toast--info-fontWeight);
+    background: var(--Toast--info-bgColor);
+    border-width: var(--Toast--info-top-border-width)
+      var(--Toast--info-right-border-width)
+      var(--Toast--info-bottom-border-width)
+      var(--Toast--info-left-border-width);
+    border-style: var(--Toast--info-top-border-style)
+      var(--Toast--info-right-border-style)
+      var(--Toast--info-bottom-border-style)
+      var(--Toast--info-left-border-style);
+    border-color: var(--Toast--info-top-border-color)
+      var(--Toast--info-right-border-color)
+      var(--Toast--info-bottom-border-color)
+      var(--Toast--info-left-border-color);
+  }
+
+  &--success {
+    color: var(--Toast--success-color);
+    font-size: var(--Toast--success-fontSize);
+    font-weight: var(--Toast--success-fontWeight);
+    background: var(--Toast--success-bgColor);
+    border-width: var(--Toast--success-top-border-width)
+      var(--Toast--success-right-border-width)
+      var(--Toast--success-bottom-border-width)
+      var(--Toast--success-left-border-width);
+    border-style: var(--Toast--success-top-border-style)
+      var(--Toast--success-right-border-style)
+      var(--Toast--success-bottom-border-style)
+      var(--Toast--success-left-border-style);
+    border-color: var(--Toast--success-top-border-color)
+      var(--Toast--success-right-border-color)
+      var(--Toast--success-bottom-border-color)
+      var(--Toast--success-left-border-color);
+  }
+
+  // positions
+  &-wrap--topRight {
+    top: var(--gap-base);
+    right: var(--gap-base);
+  }
+
+  &-wrap--topCenter {
+    top: var(--gap-base);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &-wrap--topLeft {
+    top: var(--gap-base);
+    left: var(--gap-base);
+  }
+
+  &-wrap--bottomLeft {
+    left: var(--gap-base);
+    bottom: var(--gap-base);
+  }
+
+  &-wrap--bottomCenter {
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: var(--gap-base);
+  }
+
+  &-wrap--bottomRight {
+    bottom: var(--gap-base);
+    right: var(--gap-base);
+  }
+
+  &-wrap--center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.#{$ns}Toast-mobile {
+  .#{$ns}Toast {
+    background-color: rgba($color: #000000, $alpha: 0.9);
+    border-radius: px2rem(4px);
+    color: #fff;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--gap-base) var(--gap-md);
+    text-align: center;
+    width: auto;
+
+    &-title {
+      color: #fff;
+      width: 100%;
+    }
+
+    &-body {
+      line-height: px2rem(18px);
+      font-size: var(--fontSizeMd);
+    }
+
+    &-icon {
+      margin-right: 0 !important;
+      margin: var(--gap-base) 0;
+      width: px2rem(40px);
+      height: px2rem(40px);
+
+      > svg {
+        width: px2rem(40px);
+        height: px2rem(40px);
+      }
+    }
+  }
+
+  & &--has-icon {
+    min-width: px2rem(120px);
+    padding-bottom: var(--gap-lg);
+  }
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,340 @@
+.#{$ns}Tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-family: inherit;
+  border-radius: var(--borderRadius);
+  min-width: var(--Tooltip-minWidth);
+  max-width: var(--Tooltip-maxWidth);
+  text-align: left;
+  white-space: normal;
+  z-index: $zindex-tooltip;
+  word-wrap: break-word;
+  background: var(--Tooltip-bg);
+  box-shadow: var(--Tooltip-boxShadow);
+  border: var(--common-popover-border);
+
+  &-arrow {
+    position: absolute;
+    display: block;
+    width: var(--Tooltip-arrow-width);
+    height: var(--Tooltip-arrow-height);
+    margin-left: calc(var(--Tooltip-arrow-width) * -1 / 2);
+    left: 50%;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      content: '';
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+
+  &--top {
+    margin-top: calc(var(--Tooltip-arrow-height) * -1 - #{px2rem(2px)});
+
+    .#{$ns}Tooltip-arrow {
+      bottom: calc(
+        (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1
+      );
+    }
+
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: var(--Tooltip-arrow-height)
+        calc(var(--Tooltip-arrow-width) / 2) 0;
+    }
+
+    .#{$ns}Tooltip-arrow::before {
+      bottom: 0;
+    }
+
+    .#{$ns}Tooltip-arrow::after {
+      bottom: var(--Tooltip-borderWidth);
+      border-top-color: var(--Tooltip-arrow-color);
+    }
+  }
+
+  &--right {
+    margin-left: calc(var(--Tooltip-arrow-height) + #{px2rem(2px)});
+
+    .#{$ns}Tooltip-arrow {
+      left: calc(var(--Tooltip-borderWidth) * -1);
+      width: var(--Tooltip-arrow-height);
+      height: var(--Tooltip-arrow-width);
+      margin-top: calc(var(--Tooltip-arrow-width) / -2);
+      top: 50%;
+    }
+
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: calc(var(--Tooltip-arrow-width) / 2)
+        var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2) 0;
+    }
+
+    .#{$ns}Tooltip-arrow::before {
+      left: 0;
+    }
+
+    .#{$ns}Tooltip-arrow::after {
+      left: var(--Tooltip-borderWidth);
+      border-right-color: var(--Tooltip-arrow-color);
+    }
+  }
+
+  &--bottom {
+    margin-top: calc(var(--Tooltip-arrow-height) + #{px2rem(2px)});
+
+    .#{$ns}Tooltip-arrow {
+      top: calc(
+        (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1
+      );
+    }
+
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: 0 calc(var(--Tooltip-arrow-width) / 2)
+        var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2);
+    }
+
+    .#{$ns}Tooltip-arrow::before {
+      top: 0;
+    }
+
+    .#{$ns}Tooltip-arrow::after {
+      top: var(--Tooltip-borderWidth);
+      border-bottom-color: var(--Tooltip-arrow-color);
+    }
+
+    // This will remove the popover-header's border just below the arrow
+    .#{$ns}Tooltip-title::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: var(--Tooltip-arrow-width);
+      margin-left: calc(var(--Tooltip-arrow-width) / -2);
+      content: '';
+      border-bottom: var(--Tooltip-borderWidth) solid var(--Tooltip-title-bg);
+    }
+  }
+
+  &--left {
+    margin-left: calc(var(--Tooltip-arrow-height) * -1 - #{px2rem(2px)});
+
+    .#{$ns}Tooltip-arrow {
+      left: auto;
+      right: calc(
+        (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1
+      );
+      width: var(--Tooltip-arrow-height);
+      height: var(--Tooltip-arrow-width);
+      margin-top: calc(var(--Tooltip-arrow-width) * -1 / 2);
+      top: 50%;
+    }
+
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: calc(var(--Tooltip-arrow-width) / 2) 0
+        calc(var(--Tooltip-arrow-width) / 2) var(--Tooltip-arrow-height);
+    }
+
+    .#{$ns}Tooltip-arrow::before {
+      right: 0;
+    }
+
+    .#{$ns}Tooltip-arrow::after {
+      right: var(--Tooltip-borderWidth);
+      border-left-color: var(--Tooltip-arrow-color);
+    }
+  }
+
+  &-title {
+    padding: var(--Tooltip-title-paddingY) var(--Tooltip-title-paddingX) 0;
+    margin-bottom: 0; // Reset the default from Reboot
+    font-size: var(--fontSizeBase);
+    color: var(--Tooltip-title-color);
+    font-weight: var(--Tooltip-fontWeight);
+    border-top-left-radius: calc(
+      var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth)
+    );
+    border-top-right-radius: calc(
+      var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth)
+    );
+    font-weight: var(--Tooltip-title-fontWeight);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &-body {
+    color: var(--Tooltip-body-color);
+    padding: var(--Tooltip-body-paddingY) var(--Tooltip-body-paddingX);
+    word-break: break-all;
+    text-align: left;
+  }
+
+  &--dark {
+    background: var(--Tooltip-bg--dark);
+    border: none;
+    box-shadow: var(--Tooltip-boxShadow--dark);
+
+    .#{$ns}Tooltip-title {
+      color: var(--Tooltip-title-color--dark);
+      background: transparent;
+      border-bottom: none;
+
+      &::before {
+        border-bottom-color: transparent;
+      }
+    }
+
+    .#{$ns}Tooltip-body {
+      color: var(--Tooltip-body-color--dark);
+    }
+
+    $placements: top left right bottom;
+    &.#{$ns}Tooltip--top {
+      .#{$ns}Tooltip-arrow {
+        &::before {
+          border-width: 0;
+        }
+        &::after {
+          border-top-color: var(--Tooltip-arrow-color--dark);
+        }
+      }
+    }
+
+    &.#{$ns}Tooltip--bottom {
+      .#{$ns}Tooltip-arrow {
+        &::before {
+          border-width: 0;
+        }
+        &::after {
+          border-bottom-color: var(--Tooltip-arrow-color--dark);
+        }
+      }
+    }
+
+    &.#{$ns}Tooltip--left {
+      .#{$ns}Tooltip-arrow {
+        &::before {
+          border-width: 0;
+        }
+        &::after {
+          border-left-color: var(--Tooltip-arrow-color--dark);
+        }
+      }
+    }
+
+    &.#{$ns}Tooltip--right {
+      .#{$ns}Tooltip-arrow {
+        &::before {
+          border-width: 0;
+        }
+        &::after {
+          border-right-color: var(--Tooltip-arrow-color--dark);
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}TooltipWrapper {
+  &--inline {
+    display: inline-block;
+  }
+}
+
+@keyframes tooltipIn {
+  from {
+    opacity: 0;
+    margin: 0;
+  }
+}
+
+[data-tooltip] {
+  position: relative;
+
+  &:after {
+    pointer-events: none;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    content: attr(data-tooltip);
+    font-size: var(--Tooltip--attr-fontSize);
+    line-height: var(--Tooltip--attr-lineHeigt);
+    text-align: left;
+    white-space: normal;
+    width: max-content;
+    box-sizing: content-box;
+    max-width: 300px;
+    background: var(--Tooltip--attr-bg);
+    border: var(--Tooltip--attr-borderWidth) solid
+      var(--Tooltip--attr-borderColor);
+    border-radius: var(--Tooltip--attr-borderRadius);
+    box-shadow: var(--Tooltip--attr-boxShadow);
+    left: 100%;
+    color: var(--Tooltip--attr-color);
+    padding: var(--Tooltip--attr-paddingY) var(--Tooltip--attr-paddingX);
+    display: none;
+    animation-duration: var(--animation-duration);
+    animation-fill-mode: both;
+
+    @media screen and (min-width: 0\0) {
+      white-space: nowrap;
+      max-width: unset;
+    }
+  }
+
+  &:not(.is-disabled):hover:after {
+    display: inline-block;
+    animation-name: tooltipIn;
+
+    opacity: 1;
+    z-index: $zindex-tooltip;
+    margin: 0 0 0 var(--Tooltip--attr-gap);
+    opacity: 1;
+  }
+
+  &[data-position='bottom']:after {
+    left: 50%;
+    top: 100%;
+    transform: translateX(-50%);
+  }
+
+  &[data-position='bottom']:hover:after {
+    margin: var(--Tooltip--attr-gap) 0 0 0;
+  }
+
+  &[data-position='left']:after {
+    top: 50%;
+    right: 100%;
+    left: auto;
+    transform: translateY(-50%);
+  }
+
+  &[data-position='left']:hover:after {
+    margin: 0 var(--Tooltip--attr-gap) 0 0;
+  }
+
+  &[data-position='top']:after {
+    left: 50%;
+    top: auto;
+    bottom: 100%;
+    transform: translateX(-50%);
+  }
+
+  &[data-position='top']:hover:after {
+    margin: calc(var(--Tooltip--attr-gap) * -1) 0 0 0;
+  }
+
+  &:hover:active:after {
+    content: '';
+    display: none !important;
+  }
+}

package/scss/components/_tpl.scss

@@ -0,0 +1,51 @@
+.#{$ns}TplField {
+  &.is-inline {
+    display: inline;
+  }
+
+  table {
+    border: 0;
+    border-collapse: collapse;
+    empty-cells: show;
+    max-width: 100%;
+  }
+
+  table td {
+    min-width: 5px;
+  }
+
+  table td,
+  table th {
+    border: 1px solid #ddd;
+  }
+
+  table td:empty,
+  table th:empty {
+    height: 20px;
+  }
+
+  table th {
+    background: #ececec;
+  }
+
+  hr {
+    clear: both;
+    user-select: none;
+    -o-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -moz-column-break-after: always;
+    break-after: always;
+    page-break-after: always;
+  }
+}
+
+.max-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}