| @import '../mixin/flex.scss'; | |
| @import '../mixin/color.scss'; | |
| 
 | |
| @mixin required { | |
|   &.se-input-required { | |
|     ::before { | |
|       content: '*'; | |
|       color: $red; | |
|     } | |
|   } | |
| } | |
| 
 | |
| @mixin name { | |
|   .se-input-name { | |
|     min-width: 80rpx; | |
| 
 | |
|     &::after { | |
|       content: ':'; | |
|     } | |
|   } | |
| } | |
| 
 | |
| @mixin icon { | |
|   .se-input-icon { | |
|     font-size: 20rpx; | |
|   } | |
| } | |
| 
 | |
| @mixin input { | |
|   .se-input-inner { | |
|     -webkit-appearance: none; | |
|     flex: 1; | |
|     width: 100%; | |
|     height: 100%; | |
|     background-color: transparent; | |
|     color: $c-99; | |
| 
 | |
|     &::-webkit-input-placeholder { | |
|       color: $c-99; | |
|     } | |
| 
 | |
|     &:disabled { | |
|       -webkit-opacity: 1; | |
|       -webkit-text-fill-color: $c-99; | |
|       background-color: transparent; | |
|       color: $c-99; | |
|     } | |
|   } | |
| } | |
| 
 | |
| .se { | |
|   &-input { | |
|     &-s { | |
|       @include flex-h-c; | |
|       @include required; | |
|       @include name; | |
|       @include icon; | |
|       @include input; | |
|       height: 30rpx; | |
|     } | |
| 
 | |
|     &-m { | |
|       @include flex-h-c; | |
|       @include required; | |
|       @include name; | |
|       @include icon; | |
|       @include input; | |
|       height: 40rpx; | |
|     } | |
| 
 | |
|     &-l { | |
|       @include flex-h-c; | |
|       @include required; | |
|       @include name; | |
|       @include icon; | |
|       @include input; | |
|       height: 50rpx; | |
|     } | |
|   } | |
| 
 | |
|   &-textarea { | |
|     @include flex-h-c; | |
|     @include required; | |
|     @include name; | |
|     @include icon; | |
|     @include input; | |
|   } | |
| }
 |