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  }