52 lines
953 B
SCSS
52 lines
953 B
SCSS
|
// EXTERNAL: https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/
|
||
|
|
|
||
|
|
@use "colors" as c;
|
||
|
|
|
||
|
|
@mixin moderncss {
|
||
|
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input {
|
||
|
|
font-size: 16px;
|
||
|
|
font-size: max(16px, 1em);
|
||
|
|
font-family: inherit;
|
||
|
|
padding: 0.25em 0.5em;
|
||
|
|
background-color: c.$text;
|
||
|
|
border: 2px solid c.$dark;
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
border-color: c.$light;
|
||
|
|
box-shadow: 0 0 0 3px c.$dark;
|
||
|
|
transition: 180ms box-shadow ease-in-out;
|
||
|
|
outline: 3px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Extra
|
||
|
|
&:not(textarea) {
|
||
|
|
line-height: 1;
|
||
|
|
height: 2.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[type="file"] {
|
||
|
|
font-size: 0.9em;
|
||
|
|
padding-top: 0.35rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[readonly] {
|
||
|
|
border-style: dotted;
|
||
|
|
cursor: not-allowed;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[disabled] {
|
||
|
|
--input-border: #ccc;
|
||
|
|
|
||
|
|
background-color: #eee;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|