form--text.css
Same filename in other branches
Text and textarea input elements.
File
-
core/
themes/ claro/ css/ components/ form--text.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Text and textarea input elements.
- */
-
- .form-element {
- box-sizing: border-box;
- max-width: 100%;
- min-height: 3rem; /* iOS. */
- padding: calc(0.75rem - 1px) calc(1rem - 1px);
- color: #232429;
- border: 1px solid #919297;
- border-radius: 0.125rem;
- background: #fff;
- font-size: 1rem;
- line-height: 1.5rem;
- -webkit-appearance: none;
- appearance: none; /* Being able to control inner box shadow on iOS. */
- }
-
- .no-touchevents .form-element--extrasmall,
- .no-touchevents .form-element[name$="][_weight]"] {
- min-height: 1.5rem; /* iOS. */
- padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
- font-size: 0.889rem;
- line-height: 1.2rem;
- }
-
- /**
- * Override normalize.css's search appearance.
- */
-
- .form-element--type-search[type="search"] {
- -webkit-appearance: none;
- appearance: none;
- box-sizing: border-box;
- }
-
- /**
- * Fix minor things for specific types.
- */
-
- .form-element--type-date,
- .form-element--type-time {
- vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
- }
-
- .form-element--type-date {
- min-width: 9.5rem; /* Prevent input width change while filling. */
- }
-
- .form-element--type-time {
- min-width: 7.5rem; /* Prevent input width change while filling. */
- }
-
- .form-element--type-color {
- min-width: 3rem; /* Bigger input for webkit */
- padding: 0; /* Bigger pickable area */
- text-indent: calc(0.75rem - 1px); /* Text-input fallback for non-supporting browsers like Safari */
- }
-
- /**
- * Reset value border and background of the file input on IE11 and Edge.
- */
-
- .form-element--type-file::-ms-value {
- border: 0;
- background: inherit;
- }
-
- /**
- * Better upload button alignment for Chrome.
- */
-
- .form-element--type-file::-webkit-file-upload-button {
- vertical-align: top;
- }
-
- /**
- * Target IE 11 and Edge.
- *
- * Reduce the vertical padding of the file input element to make the browse
- * button fit into the needed input height.
- */
-
- /* stylelint-disable-next-line selector-type-no-unknown */
-
- _:-ms-fullscreen,
- :root .form-element--type-file {
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
- }
-
- /**
- * States.
- */
-
- .form-element:active {
- border-color: #003ecc;
- }
-
- .form-element:hover {
- border-color: #232429;
- box-shadow: inset 0 0 0 1px #232429;
- }
-
- .form-element:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
- }
-
- .form-element:hover:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
- }
-
- .form-element.error {
- border-width: 2px;
- border-color: #dc2323;
- }
-
- .form-element.error:hover {
- box-shadow: none;
- }
-
- .form-element.error:hover:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
- }
-
- .form-element--type-textarea.error + .cke {
- border-color: #dc2323;
- }
-
- .form-element[disabled] {
- color: #828388;
- border-color: #bababf;
- background-color: #f2f2f3;
- box-shadow: none;
- /* https://stackoverflow.com/q/262158#answer-23511280 */
- -webkit-text-fill-color: #828388;
- }
-
- /**
- * Improve form element usability on narrow devices.
- */
-
- @media screen and (max-width: 37.5rem) {
- /* Number, date and time are skipped here */
- .form-element {
- float: none;
- width: 100%;
- margin-top: 0.75rem;
- margin-right: 0;
- margin-left: 0;
- }
- .form-element:first-child,
- .form-item__label + .form-element {
- margin-top: 0;
- }
- }
-
- .form-element--type-textarea.error + .ck-editor > .ck-editor__main {
- border: 2px solid #dc2323;
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.