Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style id="jsbin-css">
- .field-text {
- display: flex;
- align-items: flex-end;
- }
- .field-text__title {
- margin-right: 20px;
- color: $main-color;
- }
- .field-text__input {
- position: relative;
- flex-grow: 1;
- padding: 0 0 12px 10px;
- }
- .field-text__input input {
- width: 100%;
- font-family: $Courier, sans-serif;
- font-size: 30px;
- line-height: 34px;
- font-weight: 400;
- color: $main-color-light;
- text-overflow: ellipsis;
- overflow: hidden;
- background-color: transparent;
- border: none;
- }
- .field-text__input::after {
- position: absolute;
- left: 0;
- bottom: 0;
- content: '';
- width: 100%;
- height: 4px;
- background-color: #000;
- }
- .field-text--low-width .field-text__input {
- width: 200px;
- flex-grow: 0;
- }
- .field-text--no-title .field-text__input {
- padding: 0 0 6px 6px;
- }
- </style>
- <div class="form__input field-text field-text--no-title">
- <div class="field-text__input">
- <input type="text" value="Ну-ууу-уу..."/>
- </div>
- </div>
- <div class="form__input field-text field-text--no-title">
- <div class="field-text__input">
- <input type="text" value="Ну-ууу-уу..."/>
- </div>
- </div>
- <div class="form__input field-text field-text--no-title">
- <div class="field-text__input">
- <input type="text" value="Ну-ууу-уу..."/>
- </div>
- </div>
- <script id="jsbin-source-html" type="text/html">.form__input.field-text.field-text--no-title
- .field-text__input
- input(type="text" value="Ну-ууу-уу...")
- .form__input.field-text.field-text--no-title
- .field-text__input
- input(type="text" value="Ну-ууу-уу...")
- .form__input.field-text.field-text--no-title
- .field-text__input
- input(type="text" value="Ну-ууу-уу...")</script>
- <script id="jsbin-source-css" type="text/css">.field-text
- display flex
- align-items flex-end
- .field-text__title
- margin-right 20px
- color $main-color
- .field-text__input
- position relative
- flex-grow 1
- padding 0 0 12px 10px
- .field-text__input input
- width 100%
- font-family $Courier, sans-serif
- font-size 30px
- line-height 34px
- font-weight 400
- color $main-color-light
- text-overflow ellipsis
- overflow hidden
- background-color transparent
- border none
- .field-text__input::after
- position absolute
- left 0
- bottom 0
- content ''
- width 100%
- height 4px
- background-color: black;
- .field-text--low-width .field-text__input
- width 200px
- flex-grow 0
- .field-text--no-title .field-text__input
- padding 0 0 6px 6px</script>
Add Comment
Please, Sign In to add comment