vitess.io/vitess@v0.16.2/web/vtadmin/src/components/TextInput.module.scss (about) 1 @use 'sass:math'; 2 3 .inputContainer { 4 display: block; 5 position: relative; 6 } 7 8 $iconSizeMedium: 1.6rem; 9 $iconSizeLarge: 2.2rem; 10 $iconOffsetHorizontal: 3.2rem; 11 $iconOffsetHorizontalLarge: 4.2rem; 12 $iconPositionHorizontal: 1.2rem; 13 $iconPositionHorizontalLarge: 1.6rem; 14 15 .input { 16 background: var(--backgroundPrimary); 17 border: solid 2px var(--colorDisabled); 18 border-radius: 6px; 19 box-sizing: border-box; 20 color: var(--textColorPrimary); 21 display: block; 22 font-family: var(--fontFamilyPrimary); 23 font-size: var(--fontSizeBody); 24 height: var(--inputHeightMedium); 25 line-height: var(--inputHeightMedium); 26 padding: 0 12px; 27 transition: all 0.1s ease-in-out; 28 width: 100%; 29 30 &:disabled { 31 background: var(--backgroundSecondary); 32 border-color: var(--backgroundSecondaryHighlight); 33 cursor: not-allowed; 34 } 35 36 &.large { 37 font-size: theme('fontSize.lg'); 38 height: var(--inputHeightLarge); 39 line-height: var(--inputHeightLarge); 40 padding: 0 16px; 41 } 42 43 &.withIconLeft { 44 padding-left: $iconOffsetHorizontal; 45 46 &.large { 47 padding-left: $iconOffsetHorizontalLarge; 48 } 49 } 50 51 &.withIconRight { 52 padding-right: $iconOffsetHorizontal; 53 54 &.large { 55 padding-right: $iconOffsetHorizontalLarge; 56 } 57 } 58 } 59 60 .icon { 61 fill: var(--grey600); 62 height: $iconSizeMedium; 63 margin-top: -1 * math.div($iconSizeMedium, 2); 64 position: absolute; 65 top: 50%; 66 width: $iconSizeMedium; 67 } 68 69 .iconLeft { 70 /* stylelint-disable-next-line */ 71 @extend .icon; 72 73 left: $iconPositionHorizontal; 74 } 75 76 .iconRight { 77 /* stylelint-disable-next-line */ 78 @extend .icon; 79 80 right: $iconPositionHorizontal; 81 } 82 83 .large ~ .icon { 84 height: $iconSizeLarge; 85 margin-top: -1 * math.div($iconSizeLarge, 2); 86 width: $iconSizeLarge; 87 } 88 89 .large ~ .iconLeft { 90 left: $iconPositionHorizontalLarge; 91 } 92 93 .large ~ .iconRight { 94 right: $iconPositionHorizontalLarge; 95 } 96 97 .input:focus { 98 border-color: var(--colorPrimary); 99 outline: none; 100 } 101 102 .input:focus ~ .icon { 103 fill: var(--colorPrimary); 104 } 105 106 .input:disabled ~ .icon { 107 fill: var(--colorDisabled); 108 }