form--text.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Text and textarea input elements.
  10. */
  11. .form-element {
  12. box-sizing: border-box;
  13. max-width: 100%;
  14. min-height: 3rem; /* iOS. */
  15. padding: calc(0.75rem - 1px) calc(1rem - 1px);
  16. color: #222330;
  17. border: 1px solid #8e929c;
  18. border-radius: 0.125rem;
  19. background: #fff;
  20. font-size: 1rem;
  21. line-height: 1.5rem;
  22. -webkit-appearance: none;
  23. -moz-appearance: none;
  24. appearance: none; /* Being able to control inner box shadow on iOS. */
  25. }
  26. .no-touchevents .form-element--extrasmall,
  27. .no-touchevents .form-element[name$="][_weight]"] {
  28. min-height: 1.5rem; /* iOS. */
  29. padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
  30. font-size: 0.889rem;
  31. line-height: 1.2rem;
  32. }
  33. /**
  34. * Override normalize.css's search appearance.
  35. */
  36. .form-element--type-search[type="search"] {
  37. -webkit-appearance: none;
  38. -moz-appearance: none;
  39. appearance: none;
  40. box-sizing: border-box;
  41. }
  42. /**
  43. * Fix minor things for specific types.
  44. */
  45. .form-element--type-date,
  46. .form-element--type-time {
  47. vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
  48. }
  49. .form-element--type-date {
  50. min-width: 9.5rem; /* Prevent input width change while filling. */
  51. }
  52. .form-element--type-time {
  53. min-width: 7.5rem; /* Prevent input width change while filling. */
  54. }
  55. .form-element--type-color {
  56. min-width: 3rem; /* Bigger input for webkit */
  57. padding: 0; /* Bigger pickable area */
  58. text-indent: calc(0.75rem - 1px); /* Text-input fallback for non-supporting browsers like Safari */
  59. }
  60. /**
  61. * Reset value border and background of the file input on IE11 and Edge.
  62. */
  63. .form-element--type-file::-ms-value {
  64. border: 0;
  65. background: inherit;
  66. }
  67. /**
  68. * Better upload button alignment for Chrome.
  69. */
  70. .form-element--type-file::-webkit-file-upload-button {
  71. vertical-align: top;
  72. }
  73. /**
  74. * Target IE 11 and Edge.
  75. *
  76. * Reduce the vertical padding of the file input element to make the browse
  77. * button fit into the needed input height.
  78. */
  79. /* stylelint-disable-next-line selector-type-no-unknown */
  80. _:-ms-fullscreen,
  81. :root .form-element--type-file {
  82. padding-top: 0.25rem;
  83. padding-bottom: 0.25rem;
  84. }
  85. /**
  86. * States.
  87. */
  88. .form-element:active {
  89. border-color: #003cc5;
  90. }
  91. .form-element:hover {
  92. border-color: #222330;
  93. box-shadow: inset 0 0 0 1px #222330;
  94. }
  95. .form-element:focus {
  96. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
  97. }
  98. .form-element:hover:focus {
  99. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
  100. }
  101. .form-element.error {
  102. border-width: 2px;
  103. border-color: #d72222;
  104. }
  105. .form-element.error:hover {
  106. box-shadow: none;
  107. }
  108. .form-element.error:hover:focus {
  109. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
  110. }
  111. .form-element--type-textarea.error + .cke {
  112. border-color: #d72222;
  113. }
  114. .form-element[disabled] {
  115. color: #82828c;
  116. border-color: #bababf;
  117. background-color: #f2f2f3;
  118. box-shadow: none;
  119. /* https://stackoverflow.com/q/262158#answer-23511280 */
  120. -webkit-text-fill-color: #82828c;
  121. }
  122. /**
  123. * Improve form element usability on narrow devices.
  124. */
  125. @media screen and (max-width: 600px) {
  126. /* Number, date and time are skipped here */
  127. .form-element {
  128. float: none;
  129. width: 100%;
  130. margin-top: 0.75rem;
  131. margin-right: 0;
  132. margin-left: 0;
  133. }
  134. .form-element:first-child,
  135. .form-item__label + .form-element {
  136. margin-top: 0;
  137. }
  138. }