HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<div id="md_member_info" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Member Info</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="modal-container"> <!-- Personal Information --> <div class="order-info-box"> <div class="row order-info-header"> <h5>Personal Information</h5> <hr> </div> <div class="row"> <div class="col-xs-6"> <label class="pw-capitalize"> First Name </label> Chen </div> <div class="col-xs-6"> <label class="pw-capitalize"> Last Name </label> Dant </div> </div> <div class="row"> <div class="col-xs-6"> <label> Phone Number </label> 969612648 </div> <div class="col-xs-6"> <label class="pw-capitalize"> Email </label> </div> </div> </div> <!-- Purchase Details --> <div class="order-info-box margin-top-15"> <div class="row order-info-header"> <h5>Purchase Details</h5> <hr> </div> <div class="col s12"> <table class="table table-bordered"> <thead> <tr> <th> Amount </th> <th> <span class="pw-capitalize">Total price</span> </th> </tr> </thead> <tbody> <tr> <td> 2.10 USD </td> <td> <b> 2.10 USD </b> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-xsm" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.modal-container{ padding: 20px; } .pw-capitalize{ text-transform: capitalize; } .order-info-box{ width: 100%; font-size: 1.2em; .row{ margin-bottom: 20px; &:after{ content: ""; display: table; clear: both; } label{ display: block; font-size: 0.9rem; color: #9e9e9e; line-height: 1rem; margin-bottom: 0; } } .order-info-header{ position: relative; margin-bottom: 10px; box-sizing: border-box; h5{ position: relative; z-index: 1; background: white; font-size: 14px; font-weight: 600; color: #4a4a4a; margin: 0; padding: 0 4px 0 10px; float: left; } hr{ position: absolute; z-index: 0; width: 98%; background-color: #ccc7c7; height: 2px; border: 0; opacity: 0.5; margin: 10px; } } } |