imp. checkbox and fix disabled style

This commit is contained in:
Dennis Eichhorn 2020-06-05 19:50:05 +02:00
parent 34c202a36a
commit 46b7e3fb03
2 changed files with 192 additions and 230 deletions

View File

@ -168,7 +168,7 @@ textarea, .textarea {
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
} }
span.radio { label.radio, label.checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
@ -176,14 +176,10 @@ span.radio {
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
cursor: pointer;
label {
order: 3;
cursor: pointer;
}
input { input {
order: 1; margin: 0;
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
@ -198,12 +194,11 @@ span.radio {
.checkmark { .checkmark {
position: relative; position: relative;
order: 2;
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-right: 10px; margin-right: 10px;
background-color: #eee; background-color: #eee;
border-radius: 50%; border: 1px solid var(--input-border-active);
&:after { &:after {
content: ""; content: "";
@ -213,8 +208,6 @@ span.radio {
left: 5px; left: 5px;
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 50%;
background: #fff;
} }
} }
@ -224,6 +217,41 @@ span.radio {
} }
} }
label.radio {
.checkmark {
border-radius: 50%;
&:after {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
}
}
}
label.checkbox {
.checkmark {
&:after {
content: "";
position: absolute;
top: 2px;
left: 4px;
width: 4px;
height: 6px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
input[type="range"] { input[type="range"] {
border: none; border: none;
width: 100%; width: 100%;

File diff suppressed because it is too large Load Diff