form--text.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/form--text.css
  2. 10 core/themes/claro/css/components/form--text.css
  3. 11.x core/themes/claro/css/components/form--text.css

Text and textarea input elements.

File

core/themes/claro/css/components/form--text.css

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

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.