|
|
@@ -4,6 +4,9 @@
|
|
|
<script src="{{ asset('js/nouislider.min.js') }}"></script>
|
|
|
|
|
|
<style>
|
|
|
+ .text-success-light {
|
|
|
+ color: #70bb70;
|
|
|
+ }
|
|
|
.form-group label {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
@@ -26,13 +29,15 @@
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
|
|
|
- .checkbox label:after {
|
|
|
+ .checkbox label:after,
|
|
|
+ .radio label:after {
|
|
|
content: '';
|
|
|
display: table;
|
|
|
clear: both;
|
|
|
}
|
|
|
|
|
|
- .checkbox .cr {
|
|
|
+ .checkbox .cr,
|
|
|
+ .radio .cr {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
border: 1px solid #a9a9a9;
|
|
|
@@ -43,29 +48,40 @@
|
|
|
margin-right: .5em;
|
|
|
}
|
|
|
|
|
|
- .checkbox .cr .cr-icon {
|
|
|
+ .radio .cr {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox .cr .cr-icon,
|
|
|
+ .radio .cr .cr-icon {
|
|
|
position: absolute;
|
|
|
font-size: .8em;
|
|
|
line-height: 0;
|
|
|
top: 50%;
|
|
|
- left: 15%;
|
|
|
+ left: 13%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio .cr .cr-icon {
|
|
|
+ margin-left: 0.04em;
|
|
|
}
|
|
|
|
|
|
- .checkbox label input[type="checkbox"] {
|
|
|
+ .checkbox label input[type="checkbox"],
|
|
|
+ .radio label input[type="radio"] {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
- .checkbox label input[type="checkbox"]+.cr>.cr-icon {
|
|
|
+ .checkbox label input[type="checkbox"]+.cr>.cr-icon,
|
|
|
+ .radio label input[type="radio"]+.cr>.cr-icon {
|
|
|
opacity: 0;
|
|
|
- font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
|
|
|
+ .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
|
|
|
+ .radio label input[type="radio"]:checked+.cr>.cr-icon {
|
|
|
opacity: 1;
|
|
|
- color: var(--pry-color);
|
|
|
}
|
|
|
|
|
|
- .checkbox label input[type="checkbox"]:disabled+.cr {
|
|
|
+ .checkbox label input[type="checkbox"]:disabled+.cr,
|
|
|
+ .radio label input[type="radio"]:disabled+.cr {
|
|
|
opacity: .5;
|
|
|
}
|
|
|
</style>
|
|
|
@@ -121,11 +137,21 @@
|
|
|
<div class="col-12 question">
|
|
|
<div class="form-group">
|
|
|
<label>Are you a gastroenterologist?</label>
|
|
|
- <div class="d-flex">
|
|
|
- <label class="me-3"><input type="radio" name="are_you_a_gastroenterologist" v-model="form.are_you_a_gastroenterologist" value="YES" />
|
|
|
- <span>Yes</span></label>
|
|
|
- <label><input type="radio" name="are_you_a_gastroenterologist" v-model="form.are_you_a_gastroenterologist" value="NO" />
|
|
|
- <span>No</span></label>
|
|
|
+ <div class="mt-1">
|
|
|
+ <div class="radio mb-2">
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="are_you_a_gastroenterologist" v-model="form.are_you_a_gastroenterologist" value="YES">
|
|
|
+ <span class="cr"><i class="cr-icon fa fa-circle text-success-light"></i></span>
|
|
|
+ <span>Yes</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="radio mb-2">
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="are_you_a_gastroenterologist" v-model="form.are_you_a_gastroenterologist" value="NO">
|
|
|
+ <span class="cr"><i class="cr-icon fa fa-circle text-success-light"></i></span>
|
|
|
+ <span>No</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="form.are_you_a_gastroenterologist == 'NO'" class="form-group">
|
|
|
@@ -148,9 +174,21 @@
|
|
|
<div class="col-12 question">
|
|
|
<div class="form-group">
|
|
|
<label>Do you currently perform rubber band ligation (RBL) for hemorrhoid treatment?</label>
|
|
|
- <div class="d-flex">
|
|
|
- <label class="me-3"><input type="radio" name="performs_rubber_band_ligation" v-model="form.performs_rubber_band_ligation" value="YES" /> <span>Yes</span></label>
|
|
|
- <label><input type="radio" name="performs_rubber_band_ligation" v-model="form.performs_rubber_band_ligation" value="NO" /> <span>No</span></label>
|
|
|
+ <div class="mt-1">
|
|
|
+ <div class="radio mb-2">
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="performs_rubber_band_ligation" v-model="form.performs_rubber_band_ligation" value="YES">
|
|
|
+ <span class="cr"><i class="cr-icon fa fa-circle text-success-light"></i></span>
|
|
|
+ <span>Yes</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="radio mb-2">
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="performs_rubber_band_ligation" v-model="form.performs_rubber_band_ligation" value="NO">
|
|
|
+ <span class="cr"><i class="cr-icon fa fa-circle text-success-light"></i></span>
|
|
|
+ <span>No</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -220,7 +258,7 @@
|
|
|
<div class="checkbox me-3">
|
|
|
<label>
|
|
|
<input type="checkbox" name="preferred_day_to_call[]" value="{{ $day }}">
|
|
|
- <span class="cr"><i class="cr-icon fa-duotone fa-check fa-fw"></i></span>
|
|
|
+ <span class="cr"><i class="cr-icon fa-duotone fa-check fa-fw text-success-light"></i></span>
|
|
|
<span>{{ $day }}</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
@@ -243,7 +281,7 @@
|
|
|
<div class="checkbox me-3">
|
|
|
<label>
|
|
|
<input type="checkbox" name="preferred_time_to_call[]" value="{{ $time }}">
|
|
|
- <span class="cr"><i class="cr-icon fa-duotone fa-check fa-fw"></i></span>
|
|
|
+ <span class="cr"><i class="cr-icon fa-duotone fa-check fa-fw text-success-light"></i></span>
|
|
|
<span>{{ $time }}</span>
|
|
|
</label>
|
|
|
</div>
|
