Our team built a table widget for Service Portal and defined our own CSS instead of using bootstrap classes. Our widget looks great with the ootb HRJ theme:
Our CSS is pretty normal, but we chose to not use bootstrap classes for a bit more flexibility:
.red, .yellow, .green {
text-align: center;
}
.red {
background: rgba($overdue,0.5);
}
.yellow {
background: rgba($due-today,0.5);
}
.green {
background: rgba($due-later,0.5);
}
.empty-state-content {
color: $danger;
text-align: center;
margin-bottom:0;
}
.flex {
display: flex;
align-items: center;
//justify-content: space-between;
}
.table {
display: table;
padding:10px;
}
.table-header {
font-weight: bold;
}
.table-row {
display: table-row;
}
.table-row:not(:first-child):hover {
background: $color-row-hover;
//font-weight:bold;
}
.table-row:not(:last-child) .table-cell, .table-row .table-header {
border-bottom: 1px solid $color-light;
}
.table-cell, .table-header {
display: table-cell;
padding: 10px;
}When we switch the portal to something other than hrportal (for example, sp), all of our table styles disappear:
Any thoughts on why this happens and how to fix it? Thanks!
1 ACCEPTED SOLUTION
