Commit 6eea5eb5 authored by bbaer's avatar bbaer
Browse files

new radio inline styling with required

parent c3bc5e5e
......@@ -152,6 +152,8 @@ var QfqNS = QfqNS || {};
this.form.on('form.validation.failed', this.validationError);
this.form.on('form.validation.success', this.validationSuccess);
$(".radio-inline").append($("<span>", { class: "checkmark"}));
};
n.QfqForm.prototype.on = n.EventEmitter.onMixin;
......
......@@ -59,8 +59,80 @@ i.@{spinner_class} {
border-color: #f2b867;
}
.has-error .radio-inline {
animation: blink 1s steps(5, start) infinite;
/* Hide the browser's default checkbox */
.radio-inline>input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Customize the label (the container) */
.radio-inline {
display: inline-block;
position: relative;
padding-left: 1.8em;
padding-top: 0 !important;
margin-top: 7px !important;
margin-right: 10px;
cursor: pointer;
font-size: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #ccc;
}
.radio-inline:hover input ~ .checkmark {
background-color: #ccc;
}
.radio-inline input[type=radio]:checked ~ .checkmark {
background-color: #2196F3;
border-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-inline input[type=radio]:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radio-inline .checkmark:after {
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
.has-error .checkmark {
background-color: #fcf8e3;
border-color: #f2b867;
}
.has-error .radio-inline:hover input ~ .checkmark {
background-color: #f2b867;
}
@keyframes blink {
......@@ -94,12 +166,6 @@ i.@{spinner_class} {
padding-top: 7px;
}
.radio-inline {
padding-top: 7px;
margin-top: 0;
padding-right: 12px;
}
input[type=file] {
display: inline;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment