Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
.card-tabs {
position: relative;
& section {
margin-bottom: 3px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
& .tab-label {
margin-left: -20px; // Hides radio button
margin-right: 3px; // Allows focus to be seen
padding: 3px 21px;
cursor: pointer;
z-index: 1;
font-size: $font-size-md;
line-height: 30px;
color: $gray-dark;
background-color: $gray-lightest;
transition: all 0.2s ease;
&:focus {
outline: none;
}
}
& section>input[type='radio'] {
position: relative;
top: 0;
margin-top: 1px;
margin-left: 1px;
}
& section>input[type='radio']+label:hover {
color: #000;
background-color: $gray-lighter;
}
& section>input[type='radio']:focus {
outline: 3px solid lighten($color-info, 25%);
}
& section>input[type='radio']:checked+label+.tab-content {
display: block;
}
& table {
margin-top: 1px;
}
&.blue-tab {
// This style separated to accommodate needs of component-driven tabs.
& section>input[type='radio']:checked+label {
color: #fff;
background-color: $color-info;
}
}
&.component {
position: relative;
& section {
margin-bottom: 0 !important;
}
& .active {
color: #fff;
background-color: $color-info;
}
}
}
.claim-tabs {
& section {
margin-bottom: 16px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; //background-color: lightblue; // For Testing
}
& label {
margin-left: -21px; // Hides radio button
margin-right: 3px; // Allows focus to be seen
margin-top: -1px;
padding: 4px 20px;
cursor: pointer;
z-index: 1;
font-size: $font-size-md;
line-height: 32px;
color: $gray-dark;
border: 1px solid $gray-base;
background-color: $gray-lightest; //background-color: orange; // For Testing
transition: all 0.2s ease;
}
& input[type='radio']+label:hover {
color: #000;
border-bottom: 3px solid $color-info;
}
& input[type='radio']:checked+label {
color: #000;
border-bottom: 3px solid $color-info;
}
& input[type='radio']:focus {
outline: 3px solid lighten($color-info, 25%);
}
& input[type='radio']:checked+label+.tab-content {
display: block;
}
& table {
margin-top: 8px;
}
}
.tab-content {
margin-bottom: 12px;
padding: 0px 21px; // Make same as Cards
display: none;
width: 100%;
min-height: 200px;
background-color: #fff;
border: 1px solid $gray-base;
border-top: 6px solid $color-info;
-webkit-order: 1;
order: 1;
border-radius: 0 0 $radius-md $radius-md;
box-shadow: $shadow-base;
}
// added for testing remove later
.tab-content-new {
margin-top: -1px;
margin-bottom: 12px;
padding: 9px 21px 21px; // Make same as Cards
display: block;
width: 100%;
min-height: 200px;
background-color: #fff;
border: 1px solid $gray-base;
border-top: 6px solid $color-info;
-webkit-order: 1;
order: 1;
border-radius: 0 0 $radius-md $radius-md;
box-shadow: $shadow-base;
}
.tab-table {
& tr,
td,
th {
max-width: 126px; // Label and content offset for Tab-Table High
}
}