
| Current Path : /var/www/html/strat/web/core/themes/claro/css/components/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/strat/web/core/themes/claro/css/components/form--text.pcss.css |
/**
* @file
* Text and textarea input elements.
*/
.form-element {
box-sizing: border-box;
max-width: 100%;
min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
color: var(--input-fg-color);
border: var(--input-border-size) solid var(--input-border-color);
border-radius: var(--input-border-radius-size);
background: var(--input-bg-color);
font-size: var(--input-font-size);
line-height: var(--input-line-height);
appearance: none; /* Being able to control inner box shadow on iOS. */
}
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
font-size: var(--input--extrasmall-font-size);
line-height: var(--input--extrasmall-line-height);
}
/**
* Override normalize.css's search appearance.
*/
.form-element--type-search[type="search"] {
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 - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
}
/**
* Better upload button alignment for Chrome.
*/
.form-element--type-file::-webkit-file-upload-button {
vertical-align: top;
}
/**
* States.
*/
.form-element:active {
border-color: var(--input--focus-border-color);
}
.form-element:hover {
border-color: var(--input--hover-border-color);
box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.form-element:hover:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element.error {
border-width: var(--input--error-border-size);
border-color: var(--input--error-border-color);
}
.form-element.error:hover {
box-shadow: none;
}
.form-element.error:hover:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.form-element--type-textarea.error + .cke {
border-color: var(--input--error-border-color);
}
.form-element[disabled] {
color: var(--input--disabled-fg-color);
border-color: var(--input--disabled-border-color);
background-color: var(--input--disabled-bg-color);
box-shadow: none;
/* https://stackoverflow.com/q/262158#answer-23511280 */
-webkit-text-fill-color: var(--input--disabled-fg-color);
}
/**
* Improve form element usability on narrow devices.
*/
@media screen and (max-width: 600px) {
/* Number, date and time are skipped here */
.form-element {
float: none;
width: 100%;
margin-block-start: 0.75rem;
margin-inline: 0;
}
.form-element:first-child,
.form-item__label + .form-element {
margin-block-start: 0;
}
}
.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
border: var(--input--error-border-size) solid var(--input--error-border-color);
}