Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-25 00:28:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve inputs

Browse Source
This commit is contained in:
Dennis Eichhorn 2020-06-05 18:22:09 +02:00
parent d5b171aacb
commit 045af4c6b7
2 changed files with 82 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
input.scss
View File

@ -168,23 +168,60 @@ textarea, .textarea {
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
span.checkbox, span.radio {
span.radio {
display: flex;
align-items: center;
margin-bottom: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
label {
order: 3;
cursor: pointer;
}
}
span.checkbox input[type="checkbox"], span.radio input[type="radio"] {
position: relative;
vertical-align: middle;
bottom: 1px;
margin-right: 5px;
cursor: pointer;
input {
order: 1;
opacity: 0;
cursor: pointer;
&:checked ~ .checkmark {
background-color: var(--button-colored-background);
}
&:checked ~ .checkmark:after {
display: block;
}
}
.checkmark {
position: relative;
order: 2;
height: 15px;
width: 15px;
margin-right: 10px;
background-color: #eee;
border-radius: 50%;
&:after {
content: "";
position: absolute;
display: none;
top: 5px;
left: 5px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
}
}
&:hover input ~ .checkmark {
background-color: var(--input-icon-color);
cursor: pointer;
}
}
input[type="range"] {

46
styles.css
View File

@ -3699,20 +3699,46 @@ textarea, .textarea {
box-sizing: border-box;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; }
span.checkbox, span.radio {
span.radio {
display: flex;
align-items: center;
margin-bottom: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
span.checkbox label, span.radio label {
span.radio label {
order: 3;
cursor: pointer; }
span.radio input {
order: 1;
opacity: 0;
cursor: pointer; }
span.radio input:checked ~ .checkmark {
background-color: var(--button-colored-background); }
span.radio input:checked ~ .checkmark:after {
display: block; }
span.radio .checkmark {
position: relative;
order: 2;
height: 15px;
width: 15px;
margin-right: 10px;
background-color: #eee;
border-radius: 50%; }
span.radio .checkmark:after {
content: "";
position: absolute;
display: none;
top: 5px;
left: 5px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff; }
span.radio:hover input ~ .checkmark {
background-color: var(--input-icon-color);
cursor: pointer; }
span.checkbox input[type="checkbox"], span.radio input[type="radio"] {
position: relative;
vertical-align: middle;
bottom: 1px;
margin-right: 5px;
cursor: pointer; }
input[type="range"] {
border: none;