fuse-code/src/components/bill-ui/assets/scss/components/_input.scss

.ui-input {
  display: inline-flex;
  align-items: center;
  --base-border-color: rgba(255, 255, 255, 0.2);
  --colors-content-color: #fff;

  &.error {
    position: relative;
    --colors-primary-base: #FA3F48;
    --base-border-color: #FA3F48;
    .error-msg {
      top: 100%;
      position: absolute;
      color: var(--colors-primary-base);
      margin-top: 5px;
    }
  }

  &.require {
    position: relative;

    &::before {
      content: '*';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 100%;
      margin-right: 4px;
      color: #FA3F48;
      line-height: 1.5em;
    }
  }

  
  .input {
    position: relative;
    align-items: center;
    display: inline-flex;
    

    .input-div,
    textarea,
    input {
      width: 100%;
      height: 100%;
      outline: none;
      border: none;
      font-size: 14px;
      color: var(--colors-content-color);
      padding-left: 4px;
      resize: none;

      &+.replace {
        position: absolute;
        z-index: 1;
      }

      &.replace-input {
        opacity: 0;
        cursor: pointer;
      }
    }

    .pre-icon {
      position: absolute;
      z-index: 1;
    }
  }

  .label {
    cursor: pointer;
    margin-left: 7px;
  }

  .radio,
  .checkbox {
    width: 16px;
    height: 16px;
      
    input {
      &+.replace {
        color: var(--colors-color);
        border: 1px solid currentColor;
        background-color: var(--colors-normal-back);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        transition: all .1s linear;
      }

      &:focus+.replace {
        border-color: var(--colors-primary-base);;
      }

      &:checked+.replace {
        color: var(--colors-primary-base);
      }
    }

  }

  .checkbox input {
    &+.replace {
      border-radius: 4px;
      .icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        transition: all .1s linear;
      }
    }


    &:checked+.replace {
      .icon{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }

  .radio input {
    &+.replace {
      border-radius: 50%;
      &::after {
        content: '';
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all .1s linear;
        width: 60%;
        height: 60%;
        background-color: currentColor;
      }
    }


    &:checked+.replace::after{
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .text {
    width: 100%;
    height: 100%;
    border-radius: 4px;

    input {
      background: var(--colors-normal-back);
      height: 100%;
      padding: 8px 10px;
      border-radius: 4px;
      border: 1px solid var(--base-border-color);
      transition: border .3s ease;

      &:focus {
        border-color: var(--colors-primary-base);
      }

      &::placeholder { 
        color: var(--colors-color);
      }
    }

    &.pre-suffix {
      input {
        padding-left: 30px;
      }
      .pre-icon {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &.right input {
      text-align: right;
    }

    &.suffix {
      input {
        padding-right: 30px;
      }
      .retouch {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }

      .len {
        font-size: var(--small-size);
        color: rgba(var(--colors-primary-fill), 1);

        span {
          color: var(--colors-primary-base);;
        }
      }
    }

    &.ready {
      .retouch,
      input {
        transition: all .1s linear;
      }
    }
  }

  
  .textarea {
    width: 100%;
    height: 100%;
    min-height: 50px;

    > .replace {
      border-radius: 4px;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background: var(--colors-normal-back);
      border: 1px solid var(--base-border-color);
      transition: border .3s ease;
    }

    .input-div {
      overflow-y: auto;


      a {
        color: var(--color-main-normal);
      }
    }
    .input-div,
    textarea {
      height: 100%;
      width: 100%;
      padding: 10px;
      
      &:focus + .replace {
        border-color: var(--colors-primary-base);
      }

      &::placeholder { 
        color: var(--colors-color);
      }
    }

    &.right .input-div,
    &.right textarea {
      text-align: right;
    }


    &.suffix {
      --bar-height: 30px;

      .input-div,
      textarea {
        margin-bottom: var(--bar-height);
        height: calc(100% - var(--bar-height));
      }

      > .retouch {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(var(--colors-primary-fill), 0.1);
        height: var(--bar-height);
        display: flex;
        padding: 0 10px;
        align-items: center;
        justify-content: end;

      }

      .len {
        justify-self: end;
        font-size: var(--small-size);
        color: rgba(var(--colors-primary-fill), 1);

        span {
          color: var(--colors-primary-base);;
        }
      }
    }
  }


  .number {
    input {
      -moz-appearance:textfield;
    }
    input::-webkit-inner-spin-button,
    input::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .ctrls {
      position: absolute;
      inset: 2px 0;
      width: 8px;
      .icon {
        position: absolute;
        right: 0;

        &.up {
          bottom: 0;
        }
        &.down {
          top: 0;
        }
      }
    }

    &.ctrl.suffix input {
      padding-right: 20px;
    }


  }

  .select {
    input {
      cursor: pointer;
    }
    
    &.focus {
      input {
        border-color: var(--colors-primary-base);
      }
      .retouch {
        transform: translateY(-50%) rotateZ(180deg);
      }
    }
    
  }



  .range {
    width: 100%;
    display: flex;
    --height: 6px;
    --slideSize: calc(var(--height) + 8px);

    .range-content {
      flex: 1;
      background-color: var(--colors-normal-back);
      position: relative;
      cursor: pointer;
    }

    .range-content::before,
    .range-content {
      height: var(--height);
      border-radius: calc(var(--height) / 2);
    }

    .range-content::before,
    .range-content .range-slide{
      content: '';
      position: absolute;
    }

    .range-content::before {
      pointer-events: none;
      left: 0;
      top: 0;
      width: var(--percentage);
      background-color: var(--colors-primary-base);;
    }

    .range-locus {
      width: calc(100% - var(--slideSize));
      height: var(--height);
      position: relative;

      .range-slide {
        cursor: pointer;
        height: var(--slideSize);
        width: var(--slideSize);
        top: 50%;
        left: var(--percentage);
        transform: translateY(-50%);
        background-color: var(--colors-content-color);
        border-radius: 50%;
      }
    }

    .range-text {
      margin-left: 20px;
      width: 60px;
    }

    .animation {
      &.range-content::before,
      .range-slide {
        transition: all .1s linear;
      }
    }
  }


  .switch {
    --height: 24px;
    width: 50px;
    height: var(--height);

    .replace {
      background-color: rgba(255, 255, 255, 0.3);;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: calc(var(--height) / 2);
      pointer-events: none;
      position: relative;
      transition: background-color .3s ease;

      &::after {
        content: '';
        --padding: 3px;
        --size: calc(var(--height) - var(--padding) * 2);
        position: absolute;
        width: var(--size);
        height: var(--size);
        top: var(--padding);
        background: var(--colors-content-color);
        border-radius: 50%;
        left: var(--padding);
        transition: left .3s ease;
      }
    }

    input:checked + .replace {
      background-color: var(--colors-primary-base);

      &::after {
        left: calc(100% - var(--size) - var(--padding));
      }
    }
  }


  .file {
    width: 100%;
    height: 100%;

    input {
      cursor: pointer;
      opacity: 0;
    }
    .use-replace {
      position: absolute;
    }
    .use-replace,
    .replace {
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    &:not(.valuable) {
      .replace {
        top: 0;
        bottom: 0;
        background: rgba(var(--colors-primary-fill), 0.1);
        border-radius: 4px;
        border: 1px solid rgba(var(--colors-primary-fill), 0.2);
        // position: relative;

        
        .placeholder {
          text-align: center;
          max-width: 80%;
          
          p:not(:last-child){
            margin-bottom: 10px;
          }

          .bottom {
            font-size: 12px;
            color: rgba(255,255,255,.3);
            width: 90%;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            text-align: left;
          }
        }
      }

      input {
        width: 100%;
        height: 100%;
  
        &:focus + .replace {
          border-color: var(--colors-primary-base);
        }
      }
    }
    &.valuable {
      background: rgba(var(--colors-primary-fill), 0.1);
      border-radius: 4px;
      border: 1px solid rgba(var(--colors-primary-fill), 0.2);

      input,
      .replace {
        position: absolute;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0,0,0,0.5) 100%);
        height: 32px;
        line-height: 32px;

        .tj {
          right: 10px;
          top: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          font-size: 10px;
          &::after {
            content: '）';
          }
          &::before {
            
            content: '（';
          }

          > span {
            color: var(--colors-primary-base);;
            margin-right: 4px;
          }
        }
      }

      .icons {
        position: absolute;
        right: 10px;
        top: 0;

        span {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          font-size: 12px;
          color: rgba(255,255,255,.6);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 10px
        }

      }
    }
  }


  .search{

    .retouch{
      transform: translateY(-50%) !important;

      .clear {
        // background-color: rgba(255,255,255,.3);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.6);
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }

  .color {
    &.default {
      input {
        opacity: 1;
        border: inherit;
        outline: inherit;
      }
    }
    .replace {
      pointer-events: none;
    }
  }
}

.select-float {
  transition: transform .3s ease,
    opacity .3s ease;


  &:not(.show) {
    opacity: 0;
    pointer-events: none;

  }
  &.show {
    opacity: 1;
  }

  &.dire-bottom {
    transform-origin: center top;

    &:not(.show) {
      transform: scale(1, 0);
    }
    &.show {
      transform: scale(1, 1);
    }
  }

  &.dire-top {
    transform-origin: center bottom;

    &:not(.show) {
      transform: translateY(-100%) scale(1, 0);
    }

    &.show {
      transform: translateY(-100%) scale(1, 1);
    }
  }

}

.select-replace{
  --colors-content-color: #fff;
  
  list-style: none;
  max-height: 288px;
  background: rgba(26, 26, 26, 0.8);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3),
    inset 0 0 1px rgb(255 255 255 / 90%);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  overflow-y: auto;
  color: var(--colors-content-color);

  .un-data {
    padding: 20px 15px;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    font-size: 14px;
  }

  .select-options-atom {
    padding: 10px 10px;
    font-size: 14px;

    &.active {
      background: var(--colors-normal-back);
      color: var(--colors-primary-base);;        
    }

    &:not(.active):hover {
      cursor: pointer;
      background-color: var(--colors-primary-base);
    }
  }
}

.is-hidden {
  position: absolute;
  left: -10000px;
  top: -10000px;

}


.multiple {
  .multiple-option {
    display: flex;
    align-items: center;
    p {
      margin-left: 10px;
    }
  }
  .select-options-atom {
    background: none !important;
  }
}