You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.6 KiB
91 lines
1.6 KiB
1 year ago
|
/**
|
||
|
|
* @file
|
||
|
|
* Text input elements.
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import "../base/media-queries.pcss.css";
|
||
|
|
|
||
|
|
[type="color"],
|
||
|
|
[type="date"],
|
||
|
|
[type="datetime-local"],
|
||
|
|
[type="email"],
|
||
|
|
[type="file"],
|
||
|
|
[type="month"],
|
||
|
|
[type="number"],
|
||
|
|
[type="password"],
|
||
|
|
[type="search"],
|
||
|
|
[type="tel"],
|
||
|
|
[type="text"],
|
||
|
|
[type="time"],
|
||
|
|
[type="url"],
|
||
|
|
[type="week"],
|
||
|
|
textarea {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
min-height: var(--sp3);
|
||
|
|
padding: 0 var(--sp);
|
||
|
|
color: var(--color-text-neutral-loud);
|
||
|
|
border: 1px solid var(--color--gray-60);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
background-color: var(--color--white);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: inherit;
|
||
|
|
appearance: none;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
border: solid 2px var(--color--primary-50);
|
||
|
|
outline: solid 2px var(--color--primary-50);
|
||
|
|
|
||
|
|
@supports (outline-style: double) {
|
||
|
|
border-width: 1px;
|
||
|
|
outline-width: 6px;
|
||
|
|
outline-style: double;
|
||
|
|
outline-offset: -1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&[disabled] {
|
||
|
|
color: var(--color--gray-60);
|
||
|
|
background-color: var(--color--gray-100);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.error {
|
||
|
|
border: solid 2px var(--color--red);
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline-color: var(--color--red);
|
||
|
|
outline-offset: -2px;
|
||
|
|
}
|
||
|
|
& + .ck-editor > .ck-editor__main {
|
||
|
|
border: solid 2px var(--color--red);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.form-element--small {
|
||
|
|
min-height: var(--sp2-5);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (--sm) {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[type="date"] {
|
||
|
|
/* Ensure that date field isn't larger than other fields. */
|
||
|
|
&::-webkit-datetime-edit-fields-wrapper {
|
||
|
|
padding-block: 0;
|
||
|
|
padding-inline-start: 0;
|
||
|
|
padding-inline-end: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[type="file"] {
|
||
|
|
height: auto;
|
||
|
|
padding-block: var(--sp0-75);
|
||
|
|
}
|
||
|
|
|
||
|
|
[type="color"] {
|
||
|
|
width: var(--sp3);
|
||
|
|
padding: 0;
|
||
|
|
}
|