Facets UX Style Guide

<div class="modal-backdrop fade in" uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1040 + (index && 1 || 0) + index*10}" uib-modal-backdrop="modal-backdrop" modal-animation="true" style="z-index: 1040;"></div> <div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in" uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}" uib-modal-window="modal-window" size="sm-t" index="0" animate="animate" modal-animation="true" style="z-index: 1050; display: block;"> <div class="modal-dialog modal-sm-t"> <div class="modal-content" uib-modal-transclude=""> <div class="product-clone-wrap content bulk-copy-wrapper small copyproducts-options-wrapper ng-scope ui-draggable ui-draggable-handle" draggable="" containment=".modal" style="position: relative; width: 900px !important"> <div class="modal-header"> <div class="row" style="padding-left: 5px;"> <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11" style="font-size: 20px;">Provider Address Selection</div> <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"> <div class="pull-right"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="middle"><i class="fas fa-times" style="cursor: pointer; float: right; padding-top: 10px; font-size: 16px" title="Close"></i></td> </tr> </tbody> </table> </div> </div> <div style="background-color: #337ab7; height: 3px; width: 99%; margin: 10px; float: left"></div> </div> </div> <div class="modal-body" style="margin-top: -20px"> <div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="font-size: 18px"> <div class="copy-include"> <div class="form-group"> <table border="0" cellpadding="0" cellspacing="0" style="font-size: 14px !important"> <tbody> <tr> <td><table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><strong>Provider Type</strong></td> <td> </td> <td height="40"><input name="T" type="text" style="width: 150px; border-radius: 4px; height: 34px; padding: 6px 12px; background-color: #fff; border: 1px solid #CCC; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; color: #4F4F4F; background-color: #f3f1f1; cursor: not-allowed" value="Service"></td> <td height="40"> </td> </tr> </tbody> </table></td> </tr> <tr> <td height="10"></td> </tr> <tr> <td><table width="100%" style="border: 1px solid #9ed6fa; padding: 10px; margin-bottom: 10px; background: #f3f8fb; font-size: 13px"> <tbody> <tr> <td valign="top"><p style="line-height: 100% !important; margin-top: 0; margin-bottom: 10px; align: left"><i class="fas fa-hand-point-right"></i></p></td> <td valign="top"><p style="line-height: 150% !important; margin-top: 8px !important; margin-bottom: 10px !important">The Primary Service location is the default service location. To select another service location for the provider, check the radio button to select then press the Select button. This will allow letters to be directed to the corresponding addresses for the selected service location.</p></td> </tr> </tbody> </table></td> </tr> <tr> <td height="10"></td> </tr> <tr> <td><table width="100%"> <tbody><tr> <td class="table-label-right" style="background-color:#D8EBF1; border: 1px solid #C0C0C0 !important; text-align:center" width="5">Default</td> <td width="17%" class="table-label-right" style="text-align: center; background-color:#D8EBF1; border-left-width:1px; border-right-width:1px; border-bottom-width:1px" bordercolor="#C0C0C0">Type</td> <td width="17%" class="table-label-left" style="text-align: center; background-color:#D8EBF1; border-left-width:1px; border-right-width:1px; border-bottom-width:1px">First Address Line</td> <td width="17%" class="table-label-left" style="text-align: center; background-color:#D8EBF1; border-left-width:1px; border-right-width:1px; border-bottom-width:1px">City</td> <td width="17%" class="table-label-left" style="text-align: center; background-color:#D8EBF1; border-left-width:1px; border-right-width:1px; border-bottom-width:1px">State</td> <td width="17%" class="table-label-left" style="text-align: center; background-color:#D8EBF1; border-left-width:1px; border-right-width:1px; border-bottom-width:1px">Zip</td> <td width="17%" class="table-label-right" style="text-align: center; background-color:#D8EBF1; border-left-width:1px; border-right-width:1px; border-bottom-width:1px" bordercolor="#C0C0C0">Effective</td> </tr> <tr> <td class="cell-center" style="font-size:10pt; background-color:#FFFFFF" width="5"><input type="radio" name="radio" id="radio" value="V1"></td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%" bgcolor="#FFFFFF"><span style="float: left"> 001 </span></td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%" bgcolor="#FFFFFF"> 200 Broad Street</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%" bgcolor="#FFFFFF">Somerville</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%" bgcolor="#FFFFFF">NJ</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%" bgcolor="#FFFFFF">08875</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%" bgcolor="#FFFFFF">01/05/2018</td> </tr> <tr style="background-color: #428bca; color: white"> <td align="center" style="border: 1px solid #C0C0C0; padding: 5px"><input type="radio" name="radio" id="radio" value="V1" checked=""></td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%"><span style="float: left"> 002 </span></td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%"> 100 Somerset Corp Rd</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%">Somerset</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%">NJ</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%">08817</td> <td width="17%" nowrap="nowrap" class="table" style="border: 1px solid #C0C0C0; padding: 5px; width:17%">05/05/2018</td> </tr> </tbody></table></td> </tr> <tr> <td> </td> </tr> <tr> <td style="border: 1px solid #C0C0C0"><div class="row" style="padding-left: 10px; margin-top: 5px; padding-bottom: 10px; font-size: 10pt"> <div class="col-md-7" style="padding-left: 20px"> <table style="margin-top: 5px"> <tbody> <tr style="height: 23px"> <td style="color: #595959" valign="top">Termination:</td> <td style="padding-left: 20px" valign="top">12/31/9999</td> </tr> <tr style="height: 23px"> <td style="color: #595959" valign="top">Mailing:</td> <td style="padding-left: 20px" valign="top">200 Broad Street<br> Somerville NJ 08875<br> Somerset County</td> </tr> </tbody> </table> </div> <div class="col-md-4" style="padding-left: 0px"> <table style="margin-top: 5px"> <tbody> <tr style="height: 23px"> <td style="color: #595959" valign="top">Phone:</td> <td style="padding-left: 20px" valign="top"> 973-987-9876</td> </tr> <tr style="height: 23px"> <td style="color: #595959" valign="top">Fax:</td> <td style="padding-left: 20px" valign="top">800-888-9999</td> </tr> </tbody> </table> </div> </div></td> </tr> </tbody> </table> </div> </div> <div class="hr"></div> <div class="form-group text-center"></div> <div class="container-fluid text-center continue-btns" style="margin-bottom: 20px"> <button type="button" class="btn btn-default" tab-index="copyproductoptions:1" tabindex="1" onclick="javascript:window.close('','_parent','');" title="Cancel" style="width: auto">Cancel</button> <button type="button" class="btn btn-primary" title="OK" onclick="javascript:window.close('','_parent','');" style="width: auto; margin-left: 5px">OK</button> </div> </div> </div> </div> </div> </div> </div> </div>

Provider Address Selection Dialog