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; opacity: 0"></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" animate="animate" modal-animation="true" style="z-index: 1050; display: block"> <div class="modal-dialog modal-sm-t" style="width: 600px !important"> <div class="modal-content" uib-modal-transclude=""> <div class="modal-content ui-draggable" style="width: 600px !important;right: auto;bottom: auto;"> <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: auto !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;">Info, Success, Warnings & Errors</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: 96%; margin: 10px; float: left"></div> </div> <div style="padding: 10px">Your changes were partially saved, 8 warnings, and 3 errors were found. </div> <div name="info"> <div style="border-top: 1px solid #e2e2e2; border-left: 5px solid #337ab7; border-right: 1px solid #e2e2e2; height: 35px"><span style="float: left; padding-left: 10px; height: 35px; width: 35px; font-size: 18px; color: #337ab7; padding-top: 5px; margin-bottom: 10px"><i class="fas fa-info-circle"></i></span><span style="float: left; padding-left: 10px; padding-top: 10px; height: 35px; font-size: 13px; font-weight: bold; color: #000">Info</span><i class="fas fa-times" style="font-size: 14px; color: #656565; cursor: pointer; float: right; padding-right: 18px; padding-top: 10px;" title="Close"></i></div> <div style="border-left: 5px solid #337ab7; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding-bottom: 10px; font-size: 12px; margin-top: -5px"> <div class="capital">  <div id="tableContainer" class="tableContainer" style="margin-left: 50px; height: 40px !important"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody class="scrollContent1" style="overflow-y: scroll !important; height: 40px !imortant"> <tr> <td width="15"></td> <td>This is the first line of info texts.</td> </tr> <tr> <td> </td> <td>Just another info texts.</td> </tr> </tbody> </table> </div>  </div> </div> </div> <div name="success" style="margin-top: 10px"> <div style="border-top: 1px solid #e2e2e2; border-left: 5px solid #51a351; border-right: 1px solid #e2e2e2; height: 35px"><span style="float: left; padding-left: 10px; height: 35px; width: 35px; font-size: 18px; color: #51a351; padding-top: 5px; margin-bottom: 10px"><i class="fas fa-check-circle"></i></span><span style="float: left; padding-left: 10px; padding-top: 10px; height: 35px; font-size: 13px; font-weight: bold; color: #000">Success</span><i class="fas fa-times" style="font-size: 14px; color: #656565; cursor: pointer; float: right; padding-right: 18px; padding-top: 10px;" title="Close"></i></div> <div style="border-left: 5px solid #51a351; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding-bottom: 10px; font-size: 12px; margin-top: -5px"> <div class="capital">  <div id="tableContainer" class="tableContainer" style="margin-left: 50px; height: 40px !important"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody class="scrollContent1" style="overflow-y: scroll !important; height: 40px !imortant"> <tr> <td width="15"></td> <td>Receipts partially saved.</td> </tr> <tr> <td> </td> <td>Just another success message.</td> </tr> </tbody> </table> </div>  </div> </div> </div> <div name="warnings" style="margin-top: 10px"> <div style="border-top: 1px solid #e2e2e2; border-left: 5px solid #ffa300; border-right: 1px solid #e2e2e2; height: 35px"><span style="float: left; padding-left: 10px; height: 35px; width: 35px; font-size: 18px; color: #ffa300; padding-top: 5px; margin-bottom: 10px"><i class="fas fas fa-exclamation-triangle"></i></span><span style="float: left; padding-left: 10px; padding-top: 10px; height: 35px; font-size: 13px; font-weight: bold; color: #000">Warnings (8)</span><i class="fas fa-times" style="font-size: 14px; color: #656565; cursor: pointer; float: right; padding-right: 18px; padding-top: 10px;" title="Close"></i></div> <div style="border-left: 5px solid #ffa300; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding-bottom: 10px; font-size: 12px; margin-top: -5px"> <div class="capital">  <div id="tableContainer" class="tableContainer" style="margin-left: 50px"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable"> <tbody class="scrollContent2"> <tr> <td width="15"><a href="dialog_boxes_success_errors_warnings_2.html" style="color: #333" title="View more information."><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 1</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 2. Lorem ipsum dolor.</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 3</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 4. Lorem ipsum dolor.</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 5</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 6. Lorem ipsum dolor.</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 7</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is warning number 8. Lorem ipsum dolor.</td> </tr> </tbody> </table> </div>  </div> </div> </div> <div name="warnings" style="margin-top: 10px"> <div style="border-top: 1px solid #e2e2e2; border-left: 5px solid #d14124; border-right: 1px solid #e2e2e2; height: 35px"><span style="float: left; padding-left: 10px; height: 35px; width: 35px; font-size: 18px; color: #d14124; padding-top: 5px; margin-bottom: 10px"><i class="fas fa-exclamation-circle"></i></span><span style="float: left; padding-left: 10px; padding-top: 10px; height: 35px; font-size: 13px; font-weight: bold; color: #000">Errors (3)</span><i class="fas fa-times" style="font-size: 14px; color: #656565; cursor: pointer; float: right; padding-right: 18px; padding-top: 10px;" title="Close"></i></div> <div style="border-left: 5px solid #d14124; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding-bottom: 10px; font-size: 12px; margin-top: -5px"> <div class="capital">  <div id="tableContainer" class="tableContainer" style="margin-left: 50px; height: 60px !important"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable"> <tbody class="scrollContent3" style="overflow-y: scroll !important"> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is error number 1.</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is error number 2. Lorem ipsum dolor.</td> </tr> <tr> <td width="15"><a href="" style="color: #333"><i class="fas fa-caret-down"></i></a></td> <td>This is error number 3.</td> </tr> </tbody> </table> </div>  </div> </div> <div class="container-fluid text-center continue-btns" style="margin-bottom: 0px; margin-top: 20px"> <button type="button" class="btn btn-primary" title="OK" onclick="javascript:window.close('','_parent','');" style="width: auto; height: 40px; color: #fff">OK</button> </div> </div> </div> </div> </div> </div> </div> </div>

Info, Success, Warnings & Errors Dialog Light Box