/home/edulekha/crm.edulekha.com/resources/css/panel.css
@layer components {
.panel,
.panel_s {
@apply tw-bg-white tw-mb-[25px] tw-rounded-lg tw-border tw-border-solid tw-border-neutral-300/60 tw-shadow-md;
}
.panel-body {
@apply tw-p-6 tw-relative tw-bg-white tw-rounded-md;
}
.panel-heading {
@apply tw-px-6 tw-py-2.5 tw-rounded-t-md tw-border-b-neutral-200 tw-bg-neutral-50;
}
.panel-heading > .dropdown .dropdown-toggle {
@apply tw-text-inherit;
}
.panel-title {
@apply tw-my-0 tw-text-base tw-text-inherit tw-font-bold;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
@apply tw-text-inherit;
}
.panel-footer {
@apply tw-px-6 tw-py-3 tw-bg-neutral-50 tw-rounded-b-md tw-border-t tw-border-solid tw-border-neutral-200;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
border-width: 1px 0;
border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel
> .panel-collapse
> .list-group:first-child
.list-group-item:first-child {
border-top: 0;
border-top-left-radius: theme("borderRadius.md");
border-top-right-radius: theme("borderRadius.md");
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel
> .panel-collapse
> .list-group:last-child
.list-group-item:last-child {
border-bottom: 0;
border-bottom-right-radius: theme("borderRadius.md");
border-bottom-left-radius: theme("borderRadius.md");
}
.panel
> .panel-heading
+ .panel-collapse
> .list-group
.list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.list-group + .panel-footer {
border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
padding-right: 15px;
padding-left: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
border-top-left-radius: theme("borderRadius.md");
border-top-right-radius: theme("borderRadius.md");
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel
> .table-responsive:first-child
> .table:first-child
> thead:first-child
> tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel
> .table-responsive:first-child
> .table:first-child
> tbody:first-child
> tr:first-child {
border-top-left-radius: theme("borderRadius.md");
border-top-right-radius: theme("borderRadius.md");
}
.panel
> .table:first-child
> thead:first-child
> tr:first-child
td:first-child,
.panel
> .table-responsive:first-child
> .table:first-child
> thead:first-child
> tr:first-child
td:first-child,
.panel
> .table:first-child
> tbody:first-child
> tr:first-child
td:first-child,
.panel
> .table-responsive:first-child
> .table:first-child
> tbody:first-child
> tr:first-child
td:first-child,
.panel
> .table:first-child
> thead:first-child
> tr:first-child
th:first-child,
.panel
> .table-responsive:first-child
> .table:first-child
> thead:first-child
> tr:first-child
th:first-child,
.panel
> .table:first-child
> tbody:first-child
> tr:first-child
th:first-child,
.panel
> .table-responsive:first-child
> .table:first-child
> tbody:first-child
> tr:first-child
th:first-child {
border-top-left-radius: theme("borderRadius.md");
}
.panel
> .table:first-child
> thead:first-child
> tr:first-child
td:last-child,
.panel
> .table-responsive:first-child
> .table:first-child
> thead:first-child
> tr:first-child
td:last-child,
.panel
> .table:first-child
> tbody:first-child
> tr:first-child
td:last-child,
.panel
> .table-responsive:first-child
> .table:first-child
> tbody:first-child
> tr:first-child
td:last-child,
.panel
> .table:first-child
> thead:first-child
> tr:first-child
th:last-child,
.panel
> .table-responsive:first-child
> .table:first-child
> thead:first-child
> tr:first-child
th:last-child,
.panel
> .table:first-child
> tbody:first-child
> tr:first-child
th:last-child,
.panel
> .table-responsive:first-child
> .table:first-child
> tbody:first-child
> tr:first-child
th:last-child {
border-top-right-radius: theme("borderRadius.md");
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
border-bottom-right-radius: theme("borderRadius.md");
border-bottom-left-radius: theme("borderRadius.md");
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tbody:last-child
> tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tfoot:last-child
> tr:last-child {
border-bottom-right-radius: theme("borderRadius.md");
border-bottom-left-radius: theme("borderRadius.md");
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tbody:last-child
> tr:last-child
td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tfoot:last-child
> tr:last-child
td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tbody:last-child
> tr:last-child
th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tfoot:last-child
> tr:last-child
th:first-child {
border-bottom-left-radius: theme("borderRadius.md");
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tbody:last-child
> tr:last-child
td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tfoot:last-child
> tr:last-child
td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tbody:last-child
> tr:last-child
th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel
> .table-responsive:last-child
> .table:last-child
> tfoot:last-child
> tr:last-child
th:last-child {
border-bottom-right-radius: theme("borderRadius.md");
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
border-top: 1px solid theme("colors.neutral.200");
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
border-bottom: 0;
}
.panel > .table-responsive {
margin-bottom: 0;
border: 0;
}
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
border-top: 1px solid theme("colors.neutral.200");
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid theme("colors.neutral.200");
}
.panel-default {
border-color: theme("colors.neutral.200");
}
.panel-default > .panel-heading {
@apply tw-bg-neutral-300 tw-text-neutral-900;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: theme("colors.neutral.200");
}
.panel-default > .panel-heading .badge {
/* color: #f5f5f5; */
/* background-color: #333333; */
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: theme("colors.neutral.200");
}
.panel-primary {
border: 0;
}
.panel-primary > .panel-heading {
@apply tw-bg-primary-100 tw-text-primary-700 tw-border-0;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
/* border-top-color: #337ab7; */
}
.panel-primary > .panel-heading .badge {
/* color: #337ab7; */
/* background-color: #fff; */
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
/* border-bottom-color: #337ab7; */
}
.panel-success {
border: 0;
}
.panel-success > .panel-heading {
@apply tw-bg-success-50 tw-text-success-700 tw-border-0;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
/* border-top-color: #d6e9c6; */
}
.panel-success > .panel-heading .badge {
/* color: #dff0d8; */
/* background-color: #3c763d; */
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
/* border-bottom-color: #d6e9c6; */
}
.panel-info {
border: 0;
}
.panel-info > .panel-heading {
@apply tw-bg-info-100 tw-text-info-700 tw-border-0;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
/* border-top-color: #bce8f1; */
}
.panel-info > .panel-heading .badge {
/* color: #d9edf7; */
/* background-color: #31708f; */
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
/* border-bottom-color: #bce8f1; */
}
.panel-warning {
border: 0;
}
.panel-warning > .panel-heading {
@apply tw-bg-warning-50 tw-text-warning-700 tw-border-0;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
/* border-top-color: #faebcc; */
}
.panel-warning > .panel-heading .badge {
/* color: #fcf8e3; */
/* background-color: #8a6d3b; */
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
/* border-bottom-color: #faebcc; */
}
.panel-danger {
border: 0;
}
.panel-danger > .panel-heading {
@apply tw-bg-danger-50 tw-text-danger-700 tw-border-0;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
/* border-top-color: #ebccd1; */
}
.panel-danger > .panel-heading .badge {
/* color: #f2dede; */
/* background-color: #a94442; */
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
/* border-bottom-color: #ebccd1; */
}
}
.panel-table-full .dataTables_wrapper .table-responsive {
@apply -tw-mx-6 tw-border-b tw-border-solid tw-border-neutral-200/70;
}
.panel-table-full .dataTables_wrapper.app_dt_empty .table-responsive {
@apply tw-border-b-0;
}
.panel-table-full .dataTables_wrapper table.dataTable {
margin-bottom: 0 !important;
}
.panel-table-full .dataTables_wrapper thead > tr > th:first-child {
border-left: 0 !important;
}
.panel-table-full .dataTables_wrapper thead > tr > th:last-child {
border-right: 0 !important;
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
@apply tw-bg-neutral-100;
}
.panel-full-width-tabs {
@apply !-tw-mx-6;
}
.panel-full-width-tabs .nav {
@apply !-tw-mt-6 tw-rounded-t-md tw-px-6;
}
[dir="rtl"] .panel-full-width-tabs .nav {
@apply tw-px-0 tw-bg-neutral-100;
}
.panel-full-width-tabs .nav li a,
.panel-full-width-tabs.horizontal-scrollable-tabs .scroller {
@apply tw-py-3.5 tw-bg-neutral-100;
}
.panel-full-width-tabs .nav li a .badge {
@apply tw-bg-neutral-200;
}
.modal .panel-full-width-tabs {
@apply !-tw-mx-5;
}
.modal .panel-full-width-tabs .nav {
@apply tw-px-5;
}
.panel-full-width-tabs
.arrow-right[style="display: block;"]
~ .horizontal-tabs
> .nav-tabs,
.panel-full-width-tabs
.arrow-left[style="display: block;"]
~ .horizontal-tabs
> .nav-tabs {
@apply tw-px-2;
}
@media screen and (max-width: 767px) {
.panel-table-full .table-responsive {
border: 0;
width: auto;
}
.panel-full-width-tabs.horizontal-scrollable-tabs .scroller {
@apply tw-py-[0.9rem];
}
}
/* panel-heading is for backward comp */
.panel_s .hr-panel-heading,
.panel_s .hr-panel-separator,
.panel .hr-panel-heading,
.panel .hr-panel-separator {
@apply tw-my-5 -tw-mx-6 tw-border-neutral-200;
}
.modal-body .panel_s .hr-panel-heading,
.modal-body .panel_s .hr-panel-separator,
.modal-body .panel .hr-panel-heading,
.modal-body .panel .hr-panel-separator {
@apply -tw-mx-4;
}
.panel_s > .hr-panel-heading,
.panel_s > .hr-panel-separator,
.panel > .hr-panel-heading,
.panel > .hr-panel-separator {
@apply tw-mx-0;
}
.panel-body:has(.panel-table-full) {
@apply tw-pb-2.5;
}