6/3/2019

src/app/app.module.ts

@@ -15,6 +15,7 @@ import {StartModule} from './start/start.module';
 
 
 
+
 @NgModule({
   declarations: [
     AppComponent

src/app/delivery/editprovider/editprovider.component.html

@@ -68,7 +68,7 @@
               <div class="col">
                   <div class="provider_data_content">
                       <p></p>
-                    <div class="edit_delivery">Edit Delivery Driver</div>
+                    <div class="edit_delivery" data-toggle="modal" data-target="#edit">Edit Delivery Driver</div>
                     </div>
               </div>
             </div>
@@ -84,3 +84,44 @@
       </div>
     </div>
   </section>
+
+
+
+  <div id="edit" class="modal fade" role="dialog">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+
+        <div class="forex_modal_wrapper">
+          <div class="forex_modal_header">
+              <h5 class="floatLeft">Assign Driver</h5>
+              <button type="button" class="close floatRight" data-dismiss="modal">&times;</button>
+              <div class="clear"></div>
+          </div> 
+          <div class="forex_inner_wrapper">
+            <div class="row">
+              <div class="col-md-12">
+                <p>Date</p>
+                <input class="" placeholder="" type="text">
+              </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                  <p>User</p>
+                  <input class="" placeholder="" type="text">
+                </div>
+              </div>
+              <div class="row">
+                  <div class="col-md-12">
+                    <p>Amount</p>
+                    <input class="" placeholder="" type="number">
+                  </div>
+              </div>
+          </div>
+          <div class="forex_modal_footer_btn_bay textRight">
+            <button class="okay_btn">Assign</button>
+            <button class="cancel_btn">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file

src/app/delivery/editprovider/editprovider.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+
 @Component({
   selector: 'app-editprovider',
   templateUrl: './editprovider.component.html',

src/styles.scss

@@ -515,3 +515,80 @@ section.module.parallax {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
+
+
+/* COMMON-MODAL */
+
+.forex_modal_wrapper{
+    background: #fff;
+   
+    .forex_modal_header{
+        background: #1a5c7c;
+        padding: 10px;
+        h5{
+            margin: 0px;
+            color: #fff;
+            
+            font-size:18px;
+            font-weight: 400;
+            
+        }
+        .close{
+            color: #fff;
+            &:focus{
+                outline: none;
+            }
+        }
+    }
+    .forex_inner_wrapper{
+        padding:15px;
+        padding-bottom: 0px;
+        .row{
+            margin-bottom: 10px;
+            p{
+                color: #464646;
+                margin: 0px;
+                padding-bottom: 5px;
+                font-weight: 500;
+            }
+            input{
+                border: 1px solid #b4b4b4;
+                height: 40px;
+                padding-left: 10px;
+                padding-right: 10px;
+                width: 100%;
+            }
+        }
+      
+    }
+
+    .forex_modal_footer_btn_bay{
+        padding:10px;
+        .okay_btn{
+            background: #cd3d3d;
+            color: #fff;
+            border-radius: 20px;
+            height: 35px;
+            border: none;
+            padding-left: 8%;
+            padding-right:8%;
+            margin:5px;
+            &:focus{
+                outline:none;
+            }
+        }
+        .cancel_btn{
+            background: #1a5c7c;
+            color: #fff;
+            border-radius: 20px;
+            height:35px;
+            padding-left: 8%;
+            padding-right: 8%;
+            border: none;
+            margin:3px;
+            &:focus{
+                outline:none;
+            }
+        }
+    }
+}