/bem-components/v2.0.0/desktop.examples/control-group/XzJexWZCY3VD14e4dOS5qM-OMPU/XzJexWZCY3VD14e4dOS5qM-OMPU.css

https://github.com/bem-archive/bem-info-libs · CSS · 198 lines · 189 code · 0 blank · 9 comment · 0 complexity · 1080ad6ffe64fffae6369d57bf5c6960 MD5 · raw file

  1. /* ../../../test.blocks/page/page.styl:begin */
  2. .page {
  3. padding: 20px;
  4. }
  5. /* ../../../test.blocks/page/page.styl:end */
  6. /* ../../../design/common.blocks/page/_theme/page_theme_islands.styl:begin */
  7. html {
  8. min-height: 100%;
  9. }
  10. .page_theme_islands {
  11. font: 13px/15px Arial, Helvetica, sans-serif;
  12. min-height: 100%;
  13. margin: 0;
  14. color: #000;
  15. background: #fff;
  16. }
  17. /* ../../../design/common.blocks/page/_theme/page_theme_islands.styl:end */
  18. /* ../../../design/common.blocks/input/_theme/input_theme_islands.styl:begin */
  19. .input_theme_islands {
  20. font-family: Arial, Helvetica, sans-serif;
  21. position: relative;
  22. display: inline-block;
  23. background: rgba(0,0,0,0.2);
  24. /* Decorative element (inner background) */
  25. }
  26. .input_theme_islands:before {
  27. position: absolute;
  28. top: 1px;
  29. right: 1px;
  30. bottom: 1px;
  31. left: 1px;
  32. content: '';
  33. background: #fff;
  34. }
  35. .input_theme_islands .input__box {
  36. position: relative;
  37. display: block;
  38. -webkit-touch-callout: none;
  39. -webkit-user-select: none;
  40. -moz-user-select: none;
  41. -ms-user-select: none;
  42. user-select: none;
  43. }
  44. .input_theme_islands .input__control {
  45. font: inherit;
  46. line-height: inherit;
  47. position: relative;
  48. display: inline-block;
  49. -moz-box-sizing: border-box;
  50. box-sizing: border-box;
  51. padding: 0;
  52. width: 100%;
  53. border: 0;
  54. outline: none;
  55. background: none;
  56. -webkit-appearance: none;
  57. -webkit-tap-highlight-color: rgba(0,0,0,0);
  58. /* лишние отступы у текста */
  59. /* нативный крестик */
  60. }
  61. .input_theme_islands .input__control::-webkit-search-decoration {
  62. -webkit-appearance: none;
  63. }
  64. .input_theme_islands .input__control::-webkit-search-cancel-button {
  65. display: none;
  66. }
  67. .input_theme_islands .input__control::-webkit-input-placeholder {
  68. color: #999;
  69. text-indent: 0;
  70. }
  71. .input_theme_islands .input__control::-moz-placeholder {
  72. opacity: 1;
  73. color: #999;
  74. }
  75. .input_theme_islands .input__control::-ms-clear {
  76. display: none;
  77. }
  78. .input_theme_islands.input_has-clear .input__control {
  79. text-overflow: ellipsis;
  80. }
  81. .input_theme_islands .input__clear {
  82. position: absolute;
  83. top: 0;
  84. right: 0;
  85. cursor: text;
  86. transition: opacity 0.1s ease-out;
  87. opacity: 0;
  88. background: 50% 50% no-repeat;
  89. }
  90. .input_theme_islands .input__clear_visible {
  91. opacity: 0.3;
  92. }
  93. .input_theme_islands .input__clear_visible:hover {
  94. cursor: pointer;
  95. opacity: 1;
  96. }
  97. .input_theme_islands.input_focused {
  98. z-index: 1;
  99. background: rgba(178,142,0,0.6);
  100. box-shadow: 0 0 0 1px #fc0, inset 0 0 0 1px #fc0;
  101. }
  102. .input_theme_islands.input_disabled {
  103. background: rgba(0,0,0,0.08);
  104. }
  105. .input_theme_islands.input_disabled:before,
  106. .input_theme_islands.input_disabled .input__clear {
  107. display: none;
  108. }
  109. .input_theme_islands.input_disabled .input__box,
  110. .input_theme_islands.input_disabled .input__control {
  111. color: rgba(0,0,0,0.4);
  112. cursor: default;
  113. }
  114. .input_theme_islands.input_size_s .input__clear,
  115. .input_theme_islands.input_size_m .input__clear {
  116. width: 24px;
  117. height: 24px;
  118. background-image: url("../../../design/common.blocks/theme/_islands/clear_size_s.svg");
  119. background-position: 7px 50%;
  120. }
  121. .input_theme_islands.input_size_s {
  122. font-size: 13px;
  123. line-height: 16px;
  124. }
  125. .input_theme_islands.input_size_s .input__control {
  126. height: 24px;
  127. padding-left: 6px;
  128. }
  129. .input_theme_islands.input_size_s.input_has-clear .input__box {
  130. padding-right: 24px;
  131. }
  132. .input_theme_islands.input_size_m {
  133. font-size: 13px;
  134. line-height: 16px;
  135. }
  136. .input_theme_islands.input_size_m .input__control {
  137. height: 28px;
  138. padding-left: 8px;
  139. }
  140. .input_theme_islands.input_size_m.input_has-clear .input__box {
  141. padding-right: 28px;
  142. }
  143. .input_theme_islands.input_size_m .input__clear {
  144. width: 28px;
  145. height: 28px;
  146. background-position: 9px 50%;
  147. }
  148. .input_theme_islands.input_size_l .input__clear,
  149. .input_theme_islands.input_size_xl .input__clear {
  150. width: 32px;
  151. height: 32px;
  152. background-image: url("../../../design/common.blocks/theme/_islands/clear_size_l.svg");
  153. background-position: 9px 50%;
  154. }
  155. .input_theme_islands.input_size_l {
  156. font-size: 15px;
  157. line-height: 18px;
  158. }
  159. .input_theme_islands.input_size_l .input__control {
  160. height: 32px;
  161. padding-left: 10px;
  162. }
  163. .input_theme_islands.input_size_l.input_has-clear .input__box {
  164. padding-right: 32px;
  165. }
  166. .input_theme_islands.input_size_xl {
  167. font-size: 18px;
  168. line-height: 22px;
  169. }
  170. .input_theme_islands.input_size_xl .input__control {
  171. height: 38px;
  172. padding-left: 12px;
  173. }
  174. .input_theme_islands.input_size_xl.input_has-clear .input__box {
  175. padding-right: 38px;
  176. }
  177. .input_theme_islands.input_size_xl .input__clear {
  178. width: 38px;
  179. height: 38px;
  180. background-position: 12px 50%;
  181. }
  182. .input_theme_islands.input_width_available {
  183. width: 100%;
  184. }
  185. .input_theme_islands.input_type_password .input__control {
  186. text-overflow: clip;
  187. }
  188. .control-group .input_theme_islands:before {
  189. right: 0;
  190. }
  191. .control-group .input_theme_islands.input_focused:before {
  192. right: 1px;
  193. }
  194. .control-group > .input_theme_islands:last-child:before,
  195. .control-group > :last-child .input_theme_islands:before {
  196. right: 1px;
  197. }
  198. /* ../../../design/common.blocks/input/_theme/input_theme_islands.styl:end */