Facets UX Style Guide

<div style="width: 800px!important;" class="modal-dialog modal-sm-t"> <div class="modal-content" uib-modal-transclude=""> <div class="product-clone-wrap content bulk-copy-wrapper" style="position: relative; width: auto!important"> <div class="modal-header"> <div class="row" style="padding-left: 5px;"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="font-size: 20px;">Enroll a Subscriber<i class="fa-light fa-circle-info" title="This is the Enroll a Subscriber textual hover tip information telling the user what this dialog box is. It has a lot of information and this is how it looks like, wrapped." style="font-size: 16px; color: gray; padding-left: 10px; padding-bottom: 5px; cursor: pointer"></i></div><div class="pull-right"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="middle"><i onclick="window.location.assign('index_enroll.html')" class="fas fa-times" style="cursor: pointer; float: right; padding-top: 5px; font-size: 16px" title="Close"></i></td> </tr> </tbody> </table> </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: 14px; padding: 0px;"> <div class="panel panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-horizontal-none text-primary" style="float: left; width: 100%px; "> <div class="copy-include"> <div class="form-group"> <div id="tableContainer" class="tableContainer"> <div id="tableContainer" class="tableContainer" style="margin-left: 0px"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="scrollTable"> <tbody class="scrollContent"> <tr> <td colspan="2"><table border-right:="" class="scrollTable" cellspacing="0" cellpadding="0" border="0"> <tbody style="float: left; padding-right: 20px; "> <tr> <td> </td> <td align="right"> </td> <td align="right"><font color="#656565">Group ID</font></td> <td><table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="40"><span style="padding-left: 10px; float: left"> <input type="text" style="width: auto; 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; float: left" size="20"> </span></td> </tr> </tbody> </table></td> </tr> <tr> <td> </td> <td align="right"> </td> <td align="right"><font color="#656565">Subscriber ID</font></td> <td><table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="40"><span style="padding-left: 10px; float: left"> <input type="text" style="width: auto; 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; float: left" size="20"> </span></td> </tr> </tbody> </table></td> </tr> <tr></tr> </tbody> <tbody style="float: left; padding-right: 20px; "> <tr> <td> </td> <td align="right"> </td> <td align="right"><font color="#656565">Subscriber Effective Date</font></td> <td><table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="40"><span style="padding-left: 10px; float: left"> <input name="date" type="date" style="width:auto; 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; border-radius: 4px;" value=""> </span></td> </tr> </tbody> </table></td> </tr> <tr> <td> </td> <td align="right"> </td> <td align="right"><font color="#656565">Subgroup ID</font></td> <td><table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="40"><span style="padding-left: 10px; float: left"> <input type="text" style="width: auto; 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; float: left" size="20"> </span></td> </tr> </tbody> </table></td> </tr> <tr></tr> </tbody> </table></td> </tr> </tbody> </table> </div>  </div> </div> </div> </div> <div class="form-group text-center" style="margin-right: 279px;"> <button type="button" class="btn btn-primary" title="Enroll using guided navigation" style="width: 270px; margin-right: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-color: #0b5a9f; cursor: default"><i class="fa-solid fa-circle-check" style="float: left; margin-top: 0px; font-size: 20px"></i><span style="float: left; margin-left: 10px">Enroll using guided Navigation</span><i class="fa-solid fa-plus" style="float: right; cursor: pointer; font-weight: bold; font-size: 20px" title="View categories" onclick="window.location.assign('enroll_subs_dialog_v2_expanded.html')"></i></button> <button type="button" class="btn-leo btn-default-leo" title="Enroll on my own" onclick="window.location.assign('enroll_subs_dialog_v2_own.html')" style="position: absolute; height: 34px;width: 270px; margin-right: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0px; color: #000; border-color: #939191; margin-left: -5px"><i class="fa-solid fa-circle-check" style="float: left; margin-top: 0px; font-size: 20px; color: #999; opacity: .8"></i><span style="float: left; margin-left: 10px">Enroll on my own</span></button> </div> <div style="padding-bottom: 25px; float: left; width: 100%; height: 0px"></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="window.location.assign('index_enroll.html')" title="Cancel" style="width: 75px;margin-right: 10px; ">Cancel</button> <button type="button" class="btn btn-primary" title="OK" onclick="window.location.assign('enroll_subs_info_1.html')" style="width: 75px; margin-right: 10px; ">OK</button> </div> </div> </div> </div> </div> </div> </div>

Toggle Dialog