Guest User

Untitled

a guest
Dec 15th, 2018
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.37 KB | None | 0 0
  1. <style id="jsbin-css">
  2. .field-text {
  3. display: flex;
  4. align-items: flex-end;
  5. }
  6. .field-text__title {
  7. margin-right: 20px;
  8. color: $main-color;
  9. }
  10. .field-text__input {
  11. position: relative;
  12. flex-grow: 1;
  13. padding: 0 0 12px 10px;
  14. }
  15. .field-text__input input {
  16. width: 100%;
  17. font-family: $Courier, sans-serif;
  18. font-size: 30px;
  19. line-height: 34px;
  20. font-weight: 400;
  21. color: $main-color-light;
  22. text-overflow: ellipsis;
  23. overflow: hidden;
  24. background-color: transparent;
  25. border: none;
  26. }
  27. .field-text__input::after {
  28. position: absolute;
  29. left: 0;
  30. bottom: 0;
  31. content: '';
  32. width: 100%;
  33. height: 4px;
  34. background-color: #000;
  35. }
  36. .field-text--low-width .field-text__input {
  37. width: 200px;
  38. flex-grow: 0;
  39. }
  40. .field-text--no-title .field-text__input {
  41. padding: 0 0 6px 6px;
  42. }
  43. </style>
  44.  
  45. <div class="form__input field-text field-text--no-title">
  46. <div class="field-text__input">
  47. <input type="text" value="Ну-ууу-уу..."/>
  48. </div>
  49. </div>
  50. <div class="form__input field-text field-text--no-title">
  51. <div class="field-text__input">
  52. <input type="text" value="Ну-ууу-уу..."/>
  53. </div>
  54. </div>
  55. <div class="form__input field-text field-text--no-title">
  56. <div class="field-text__input">
  57. <input type="text" value="Ну-ууу-уу..."/>
  58. </div>
  59. </div>
  60. <script id="jsbin-source-html" type="text/html">.form__input.field-text.field-text--no-title
  61. .field-text__input
  62. input(type="text" value="Ну-ууу-уу...")
  63. .form__input.field-text.field-text--no-title
  64. .field-text__input
  65. input(type="text" value="Ну-ууу-уу...")
  66. .form__input.field-text.field-text--no-title
  67. .field-text__input
  68. input(type="text" value="Ну-ууу-уу...")</script>
  69.  
  70. <script id="jsbin-source-css" type="text/css">.field-text
  71. display flex
  72. align-items flex-end
  73.  
  74. .field-text__title
  75. margin-right 20px
  76.  
  77. color $main-color
  78.  
  79. .field-text__input
  80. position relative
  81.  
  82. flex-grow 1
  83. padding 0 0 12px 10px
  84.  
  85. .field-text__input input
  86. width 100%
  87.  
  88. font-family $Courier, sans-serif
  89. font-size 30px
  90. line-height 34px
  91. font-weight 400
  92. color $main-color-light
  93. text-overflow ellipsis
  94. overflow hidden
  95.  
  96. background-color transparent
  97. border none
  98.  
  99. .field-text__input::after
  100. position absolute
  101. left 0
  102. bottom 0
  103. content ''
  104.  
  105. width 100%
  106. height 4px
  107.  
  108. background-color: black;
  109.  
  110. .field-text--low-width .field-text__input
  111. width 200px
  112. flex-grow 0
  113.  
  114. .field-text--no-title .field-text__input
  115. padding 0 0 6px 6px</script>
Add Comment
Please, Sign In to add comment