└── submitInput.css


/submitInput.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   position: relative;
  3 |   width: 100%;
  4 |   height: 100%;
  5 | }
  6 | .dataInputContainer {
  7 |   position: absolute;
  8 |   top: calc(50% - 13px);
  9 |   visibility: hidden;
 10 |   opacity: 0;
 11 |   transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 12 |   background: var(--block-ground-color);
 13 |   border-radius: 12px;
 14 | }
 15 | .dataInputContainerActive {
 16 |   visibility: visible;
 17 |   opacity: 1;
 18 |   transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 19 | }
 20 | .dataInputBox {
 21 |   position: relative;
 22 |   display: flex;
 23 |   column-gap: 5px;
 24 |   align-items: center;
 25 |   border: 1px solid var(--error-color);
 26 |   padding: 4px 10px;
 27 |   border-radius: 12px;
 28 |   width: fit-content;
 29 | }
 30 | .dataInputBoxActive {
 31 |   border: 1px solid var(--accent-color);
 32 | }
 33 | .dataInputBoxActive input {
 34 |   width: 140px;
 35 |   transition: width 0.2s linear;
 36 | }
 37 | .valueBox {
 38 |   position: absolute;
 39 |   top: 0;
 40 |   display: flex;
 41 |   align-items: center;
 42 |   column-gap: 10px;
 43 |   width: fit-content;
 44 |   height: 100%;
 45 |   visibility: hidden;
 46 |   opacity: 0;
 47 |   transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 48 | }
 49 | .valueBoxActive {
 50 |   visibility: visible;
 51 |   opacity: 1;
 52 |   transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 53 | }
 54 | .valueLine {
 55 |   color: var(--accent-color);
 56 |   cursor: pointer;
 57 |   font-size: 10px;
 58 |   line-height: 14px;
 59 |   letter-spacing: 0em;
 60 |   text-align: left;
 61 | }
 62 | .valueLine:hover {
 63 |   text-decoration: underline;
 64 |   text-decoration-color: var(--accent-color);
 65 | }
 66 | 
 67 | .dataInput {
 68 |   width: 70px;
 69 |   border: none;
 70 |   padding: 0;
 71 |   margin: 0;
 72 |   border-radius: 0;
 73 |   font-size: 10px;
 74 |   font-family: Poppins;
 75 |   outline: none;
 76 |   transition: width 0.2s linear;
 77 |   color: var(--primary-text-color);
 78 | }
 79 | .dataInput::placeholder {
 80 |   font-style: italic;
 81 | }
 82 | 
 83 | .activeIconsBox {
 84 |   display: flex;
 85 |   align-items: center;
 86 |   column-gap: 4px;
 87 | }
 88 | .inactiveIcon {
 89 |   width: 14px;
 90 |   height: auto;
 91 |   color: var(--error-color);
 92 |   flex-shrink: 0;
 93 | }
 94 | .activeIcon {
 95 |   width: 14px;
 96 |   height: auto;
 97 |   flex-shrink: 0;
 98 |   cursor: pointer;
 99 | }
100 | .confirmIcon path:first-child {
101 |   fill: var(--accent-color);
102 | }
103 | .removeIcon path {
104 |   fill: var(--error-color);
105 | }
106 | .loaderBox {
107 |   position: absolute;
108 |   width: 100%;
109 |   height: 100%;
110 |   background-color: rgb(211, 216, 217, 0.5);
111 |   border-radius: 12px;
112 |   top: calc(50% - 13px);
113 | }
114 | 


--------------------------------------------------------------------------------