Commit 576a73ec authored by bbaer's avatar bbaer
Browse files

checkboxes and radios done

parent 6eea5eb5
Pipeline #2764 passed with stages
in 4 minutes and 23 seconds
......@@ -152,7 +152,10 @@ 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"}));
$(".radio-inline").append($("<span>", { class: "checkmark", aria: "hidden"}));
$(".checkbox-inline").append($("<span>", { class: "checkmark", aria: "hidden"}));
$(".radio").append($("<span>", { class: "checkmark", aria: "hidden"}));
$(".checkbox").append($("<span>", { class: "checkmark", aria: "hidden"}));
};
......
......@@ -59,8 +59,11 @@ i.@{spinner_class} {
border-color: #f2b867;
}
/* Hide the browser's default checkbox */
.radio-inline>input[type=radio] {
/* CUSTOM RADIOS */
/* Hide the browser's default radio */
.radio-inline>input[type=radio], .radio>input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
......@@ -69,7 +72,7 @@ i.@{spinner_class} {
}
/* Customize the label (the container) */
.radio-inline {
.radio-inline, .radio {
display: inline-block;
position: relative;
padding-left: 1.8em;
......@@ -84,8 +87,12 @@ i.@{spinner_class} {
user-select: none;
}
.radio {
display: block;
}
/* Create a custom radio button */
.checkmark {
.radio-inline .checkmark, .radio .checkmark {
position: absolute;
top: 0;
left: 0;
......@@ -96,11 +103,11 @@ i.@{spinner_class} {
border: 2px solid #ccc;
}
.radio-inline:hover input ~ .checkmark {
.radio-inline:hover input ~ .checkmark, .radio:hover input ~ .checkmark {
background-color: #ccc;
}
.radio-inline input[type=radio]:checked ~ .checkmark {
.radio-inline input[type=radio]:checked ~ .checkmark, .radio input[type=radio]:checked ~ .checkmark {
background-color: #2196F3;
border-color: #2196F3;
}
......@@ -113,12 +120,12 @@ i.@{spinner_class} {
}
/* Show the indicator (dot/circle) when checked */
.radio-inline input[type=radio]:checked ~ .checkmark:after {
.radio-inline input[type=radio]:checked ~ .checkmark:after, .radio input[type=radio]:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radio-inline .checkmark:after {
.radio-inline .checkmark:after, .radio .checkmark:after {
top: 3px;
left: 3px;
width: 8px;
......@@ -127,17 +134,84 @@ i.@{spinner_class} {
background: #fff;
}
/* CUSTOM CHECKBOXES */
/* Hide the browser's default radio */
.checkbox-inline>input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Customize the label (the container) */
.checkbox-inline, .checkbox {
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;
}
.checkbox {
display: block;
}
/* Create a custom radio button */
.checkbox-inline .checkmark, .checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 4px;
border: 2px solid #ccc;
}
.checkbox-inline:hover input ~ .checkmark, .checkbox:hover input ~ .checkmark {
background-color: #ccc;
}
.checkbox-inline input:checked ~ .checkmark, .checkbox input:checked ~ .checkmark {
background-color: #2196F3;
border-color: #2196F3;
}
/* Show the indicator (dot/circle) when checked */
.checkbox-inline input:checked ~ .checkmark:after, .checkbox input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.checkbox-inline .checkmark:after, .checkbox .checkmark:after {
top: 1px;
left: 4px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Error Marking for Checkboxes */
.has-error .checkmark {
background-color: #fcf8e3;
border-color: #f2b867;
}
.has-error .radio-inline:hover input ~ .checkmark {
.has-error .radio-inline:hover input ~ .checkmark, .has-error .radio:hover input ~ .checkmark, .has-error .checkbox-inline:hover input ~ .checkmark, .has-error .checkbox:hover input ~ .checkmark {
background-color: #f2b867;
}
@keyframes blink {
to { color: #f2b867; }
}
/* END CUSTOM CHECKBOX / RADIO */
/* inline elements in horizontal mode are too much left */
.form-horizontal {
......
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