Tabs
|
Tabs Example
|
Tabs With Close Buttons
|
<![CDATA[
<div class="wrapper" style="height: 40px; margin-bottom: -1px; border-bottom: 1px solid #ddd !important; width: 100% !important">
<ul style="left: 0px;border-bottom: 0px !important;display: contents;" id="myTab" class="nav nav-tabs list">
<li><a href="main_verifications.html" style="cursor: pointer; padding-right: 10px !important; padding-left: 10px !important" title="Verifications">Verifications</a></li>
<li><a href="main_interface.html" style="cursor: pointer; padding-right: 10px !important; padding-left: 10px !important" title="Interface">Interface</a></li>
<li class="active"><a href="main_retiree_subsidy.html" style="cursor: pointer; padding-right: 10px !important; padding-left: 10px !important" title="Retiree Subsidy">Retiree Subsidy</a></li>
<li><a href="main_carrier_intermediary.html" style="cursor: pointer; padding-right: 10px !important; padding-left: 10px !important" title="Carrier/Intermediary">Carrier/Intermediary</a></li>
<li><a href="main_events.html" style="cursor: pointer" title="Events">Events</a></li><li><a href="main_facilitator.html" style="cursor: pointer; padding-right: 10px !important; padding-left: 10px !important" title="Facilitator">Facilitator</a></li>
</ul>
</div>
<ul class="nav nav-tabs">
<li class="active"><a>Active Tab
<div style="padding-left: 15px; float: right; "><i class="fa fa-times-circle" title="Close Tab" style="cursor:pointer; color: white; margin-bottom: 0px"></i></div>
</a></li>
<li class=""><a data-toggle="tab" href="#ob" style="padding-left: 20px" aria-expanded="false">Next Tab
<div style="padding-left: 15px; float: right; "><i class="fa fa-times-circle" title="Close Tab" style="cursor:pointer; color: #337ab7; margin-bottom: 0px"></i></div>
</a></li>
<li class="disabled" style="background-color: #f3f1f1 !important"><a style="
padding-left: 20px;
cursor: not-allowed;
color: #4F4F4F;
margin-right: 2px;
line-height: 10px;
border-top-color: #ccc;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #ccc;
border-bottom-style: solid;
border-bottom-width: 1px;
border-right-color: #ccc;
border-right-style: solid;
border-right-width: 1px;
border-left-color: #ddd;
border-left-style: solid;
border-left-width: 1px;
border-radius: 4px 4px 0 0;" aria-expanded="false">Disabled
<div style="padding-left: 15px; float: right; "><i class="fa fa-times-circle" title="Close Tab" style="cursor:pointer; color: gray; margin-bottom: 0px"></i></div>
</a></li>
</ul>
]]>
<![CDATA[
.nav-tabs>li {
float: left;
margin-bottom: -1px
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 10px;
border-top-color: rgb(66, 152, 181);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(66, 152, 181);
border-right-style: solid;
border-right-width: 1px;
/* border-bottom-color: rgb(66, 152, 181);
border-bottom-style: solid;
border-bottom-width: 1px;*/
border-left-color: rgb(66, 152, 181);
border-left-style: solid;
border-left-width: 1px;
border-radius: 4px 4px 0 0;
}
.nav-tabs>li>a:hover {
border-color: #03789b;
background-color: #CADFE5;
color: #000;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #fff;
background-color: #03789b;
border: 1px solid #03789b;
border-bottom-color: transparent;
cursor: default
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0
}
.nav-tabs.nav-justified>li {
float: none
}
.nav-tabs.nav-justified>li>a {
text-align: center;
margin-bottom: 5px;
margin-right: 0;
border-radius: 4px
}
.nav-tabs.nav-justified>.dropdown .dropdown-menu {
top: auto;
left: auto
}
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {
border: 1px solid #828282
}
]]>
If you need help, please e-mail the PX Team or send us a message on Microsoft Teams. |