naive-ui/styles/Transfer.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@keyframes transfer-height-collapse {
  0% {
    max-height: 34px;
  }
  100% {
    max-height: 0;
  }
}

@keyframes transfer-height-expand {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 34px;
  }
}

@keyframes transfer-slide-in-from-left {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes transfer-slide-out-to-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(150%);
  }
}

@keyframes transfer-slide-in-from-right {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes transfer-slide-out-to-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-150%);
  }
}



/**
 * There are some theme related hard codes in transfer.
 * Emmm, when I am writing these code I can't figure out a better solution.
 * So just let it be.
 * ...
 * When I find myself in times of trouble
 * blablabla
 * ...
 */
@include themes-mixin {
  @include b(transfer) {
    @include once {
      display: flex;
    }
    @include b(transfer-list) {
      @include once {
        background-clip: padding-box;
        width: 182px;
        height: 311px;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
        border-radius: 6px;
      }
      background-color: map-get($--transfer-list-background-color, 'default');
      border: 1px solid $--transfer-list-border-color;
      @include b(transfer-list-header) {
        @include once {
          box-sizing: border-box;
          margin: -1px -1px 0 -1px;
          transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
          display: flex;
          border-radius: 6px 6px 0 0;
          align-items: center;
          height: 40px;
          background-clip: padding-box;
          @include e(checkbox) {
            position: relative;
            padding: 0 8px 0 14px;
            @include b(checkbox) {
              display: block;
            }
          }
        }
        background-color: map-get($--transfer-list-header-background-color, 'default');
        border-top: 1px solid $--transfer-header-border-color;
        border-left: 1px solid $--transfer-header-border-color;
        border-right: 1px solid $--transfer-header-border-color; 
        @include e(header) {
          @include once {
            flex: 1;
            line-height: 1;
            font-size: 16px;
            font-weight: 500;
            transition: color .3s $--n-ease-in-out-cubic-bezier;
          }
          color: map-get($--transfer-list-header-text-color, 'default');
          @include m(disabled) {
            color: map-get($--transfer-list-header-text-color, 'disabled');
          }
        }
        @include e(extra) {
          @include once {
            transition: color .3s $--n-ease-in-out-cubic-bezier;
            font-size: 12px;
            justify-self: flex-end;
            margin-right: 14px;
            white-space: nowrap;
          }
          color: map-get($--transfer-list-header-extra-text-color, 'default');
        }
      }
      @include b(transfer-list-body) {
        /** hard-code **/
        @if $theme == 'dark' {
          margin-left: -1px;
          margin-right: -1px;
          margin-bottom: -1px;
        } @else if $theme == 'light' {
          margin-left: 0;
          margin-right:0;
        }
        @include once {
          box-sizing: border-box;
          overflow: hidden;
          position: relative;
          height: 272px;
          border-bottom-right-radius: 6px;
          border-bottom-left-radius: 6px;
          @include b(scrollbar-content) {
            width: 100%;
          }
        }
        @include b(transfer-list-content) {
          @include once {
            padding: 0;
            margin: 0;
            position: relative;
            @include m(animation-disabled) {
              @include b(transfer-list-item) {
                animation: none !important;
              }
            }
          }
          @include b(transfer-list-light-bar) {
            @include once {
              @include fade-in-transition(transfer-list-light-bar);
              height: 34px;
              transition: top .15s $--n-ease-in-out-cubic-bezier;
              width: 100%;
              position: absolute;
            }
            background-color: map-get($--tranfer-item-lightbar-background-color, 'default');
          }
          @include b(transfer-list-item) {
            @include once {
              transition: color .3s $--n-ease-in-out-cubic-bezier;
              position: relative;
              cursor: pointer;
              max-height: 34px;
              display: flex;
              align-items: center;
              font-size: 14px;
              height: 34px;
              @include e(extra) {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-right: 4px;
              }
              @include m(source) {
                animation-fill-mode: forwards;
                @include m(enter) {
                  transform: translateX(150%);
                  animation-name: transfer-height-expand, transfer-slide-in-from-right;
                  animation-duration: .25s, .25s;
                  animation-timing-function: $--n-ease-in-out-cubic-bezier, $fast-in-cubic-bezier;
                  animation-delay: 0s, .25s;
                }
                @include m(leave) {
                  transform: translateX(-150%);
                  animation-name: transfer-height-collapse, transfer-slide-out-to-right;
                  animation-duration: .25s, .25s;
                  animation-timing-function: $--n-ease-in-out-cubic-bezier, $slow-out-cubic-bezier;
                  animation-delay: .25s, 0s;
                }
              }
              @include m(target) {
                animation-fill-mode: forwards;
                @include m(enter) {
                  transform: translateX(-150%);
                  animation-name: transfer-height-expand, transfer-slide-in-from-left;
                  animation-duration: .25s, .25s;
                  animation-timing-function: $--n-ease-in-out-cubic-bezier, $fast-in-cubic-bezier;
                  animation-delay: 0s, .25s;
                }
                @include m(leave) {
                  transform: translateX(150%);
                  animation-name: transfer-height-collapse, transfer-slide-out-to-left;
                  animation-duration: .25s, .25s;
                  animation-timing-function: $--n-ease-in-out-cubic-bezier, $slow-out-cubic-bezier;
                  animation-delay: .25s, 0s;
                }
              }
            }
            color: map-get($--transfer-item-text-color, 'default');
            @include e(checkbox) {
              @include once {
                position: relative;
                padding: 0 8px 0 14px;
                @include b(checkbox) {
                  display: block;
                }
              }
              /** hard-code **/
              @if $theme == 'dark' {
                padding-left: 15px;
              } @else if $theme == 'light' {
                padding-left: 14px;
              }
            }
            @include m(disabled) {
              @include once {
                cursor: not-allowed;
              }
              color: map-get($--transfer-item-text-color, 'disabled');
            }
          }
        }
      }
    }
    @include b(transfer-gap) {
      @include once {
        width: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      @include b(transfer-button) {
        @include once {
          width: 36px;
          height: 36px;
          border-radius: 18px;
          cursor: pointer;
          &:first-child {
            margin-bottom: 12px;
          }
          @include m(to) {
            transform: rotate(180deg);
          }
        }
        @include e(icon) {
          @include once {
            pointer-events: none;
            transition: fill .3s $--n-ease-in-out-cubic-bezier;
          }
          fill: map-get($--transfer-gap-button-background-color, 'default');
        }
        &:hover {
          @include e(icon) {
            fill: map-get($--transfer-gap-button-background-color, 'hover');
          }
        }
        &:active {
          @include e(icon) {
            fill: map-get($--transfer-gap-button-background-color, 'active');
          }
        }
        @include m(disabled) {
          @include once {
            cursor: not-allowed;
          }
          @include e(icon) {
            fill: map-get($--transfer-gap-button-background-color, 'disabled') !important;
          }
        }
      }
    }
  }
}