Skip to content

D
dcarfixers_angular
Commit 19518a95 by amalk
Options

Amal 11-04-2019|10:22

parent 292cef5b
Showing with 102 additions and 3 deletions
src/app/home/dashboard/dashboard.component.html
......@@ -747,7 +747,11 @@
</div>
</div>
<div class="mechanic_detail">
<div class="mechanic_detail relative">
<div class="custom_checkbox_stack">
<input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
<label for="custom_checkbox-1"></label>
</div>
<h4>{{mechanic.display_name}}</h4>
<div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
<h5>{{mechanic.shop_name}}</h5>
......@@ -837,6 +841,7 @@
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
<button class="request_all_btn">Request All</button>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
......
src/app/home/index/index.component.html
......@@ -533,10 +533,14 @@
</div>
<div class="mechanic_ratting">
<p *ngIf="mechanic.rating > 0">{{mechanic.rating}} Ratings</p>
</div>
</div>
<div class="mechanic_detail">
<div class="mechanic_detail relative">
<div class="custom_checkbox_stack">
<input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
<label for="custom_checkbox-1"></label>
</div>
<h4>{{mechanic.display_name}}</h4>
<div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
<h5>{{mechanic.shop_name}}</h5>
......@@ -625,6 +629,7 @@
<div class="clear"></div>
<p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
<div class="clear"></div>
<button class="request_all_btn">Request All</button>
</div>
<div class="service_map">
<agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
......
src/styles.scss
......@@ -601,4 +601,93 @@ bs-datepicker-container{
}
}
.custom_checkbox_stack{
position: absolute;
top:0px;
right:0px;
}
.custom_checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: white;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
// Box hover
&:hover + label:before {
background: #2655bf;
}
// Box focus
&:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
// Box checked
&:checked + label:before {
background: #2655bf;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
}
.request_all_btn{
background: #2655bf;
color: #FFF;
height: 40px;
padding-left:5%;
padding-right:5%;
border:none;
margin:5px;
margin-top:10px;
border-radius: 10px;
text-transform: capitalize;
&:focus{
outline:none;
}
}
Markdown is supported
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