water.css/src/parts/_forms.css
Felix 332e8cea03 Linting, so much linting
I installed and configured stylelint and eslint, and added an editorconfig as well as a vscode recommended extensions file.

The reason the diff is so large is I ran the linters and fixed all the linting issues.
2020-05-27 13:09:20 -05:00

97 lines
1.5 KiB
CSS

button,
select,
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='range'] {
cursor: pointer;
}
input:not([type='checkbox']):not([type='radio']),
select {
display: block;
}
input:not([type='checkbox']):not([type='radio']),
input[type='range'],
select,
button,
textarea {
-webkit-appearance: none;
}
textarea {
margin-right: 0;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
select {
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
padding-right: 35px;
}
select::-ms-expand {
display: none;
}
select[multiple] {
padding-right: 10px;
background-image: none;
overflow-y: auto;
}
button,
input[type='submit'],
input[type='button'] {
padding-right: 30px;
padding-left: 30px;
}
button:hover,
input[type='submit']:hover,
input[type='button']:hover {
background: var(--button-hover);
}
input:focus,
select:focus,
button:focus,
textarea:focus {
box-shadow: 0 0 0 2px var(--focus);
}
input[type='checkbox']:active,
input[type='radio']:active,
input[type='submit']:active,
input[type='button']:active,
input[type='range']:active,
button:active {
transform: translateY(2px);
}
input:disabled,
select:disabled,
button:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: 0.5;
}
::placeholder {
color: var(--form-placeholder);
}
fieldset {
border: 1px var(--focus) solid;
border-radius: 6px;
margin: 0;
margin-bottom: 6px;
padding: 10px;
}
legend {
font-size: 0.9em;
font-weight: 600;
}