514 lines
14 KiB
SCSS
514 lines
14 KiB
SCSS
/* Table Common Css Start */
|
|
.basic-table {
|
|
thead {
|
|
th {
|
|
background-color: var(--neutral-50);
|
|
color: var(--text-primary-light);
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
padding: rem(13px) rem(24px);
|
|
}
|
|
}
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
background-color: var(--white);
|
|
color: var(--text-secondary-light);
|
|
border: none;
|
|
padding: rem(13px) rem(24px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bordered-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
border: 1px solid var(--neutral-200);
|
|
border-radius: 8px;
|
|
min-width: max-content;
|
|
vertical-align: middle;
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: var(--neutral-50) !important;
|
|
border-bottom: 1px solid var(--neutral-200) !important;
|
|
color: var(--text-primary-light) !important;
|
|
padding: 16px !important;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
&:first-child {
|
|
border-start-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-start-end-radius: 8px;
|
|
}
|
|
&:not(:last-child) {
|
|
border-inline-end: 0 !important;
|
|
}
|
|
&:not(:first-child) {
|
|
border-inline-start: 0 !important;
|
|
}
|
|
&.bg-transparent {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-end-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-end-end-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
color: var(--text-secondary-light);
|
|
padding: 16px !important;
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
background-color: var(--white);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rounded-table {
|
|
border: 0 !important;
|
|
thead {
|
|
tr {
|
|
th {
|
|
border-bottom: 0 !important;
|
|
&:first-child {
|
|
border-radius: 8px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.basic-border-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
border: 1px solid var(--neutral-200);
|
|
border-radius: 8px;
|
|
min-width: max-content;
|
|
vertical-align: middle;
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: var(--neutral-50);
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
border-inline-end: 1px solid var(--neutral-200) !important;
|
|
color: var(--text-primary-light);
|
|
padding: rem(13px) rem(24px);
|
|
font-weight: 600;
|
|
&:first-child {
|
|
border-start-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-start-end-radius: 8px;
|
|
border-inline-end: none !important;
|
|
}
|
|
&:not(:last-child) {
|
|
border-inline-end: 0;
|
|
}
|
|
&:not(:first-child) {
|
|
border-inline-start: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-end-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-end-end-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
color: var(--text-secondary-light);
|
|
padding: rem(13px) rem(24px);
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
border-inline-end: 1px solid var(--neutral-200);
|
|
background-color: var(--white);
|
|
vertical-align: middle;
|
|
&:last-child {
|
|
border-inline-end: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.striped-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
border: 1px solid var(--neutral-200);
|
|
border-radius: 8px;
|
|
min-width: max-content;
|
|
vertical-align: middle;
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: transparent;
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
color: var(--text-primary-light);
|
|
padding: rem(13px) rem(16px);
|
|
font-weight: 600;
|
|
&:first-child {
|
|
border-start-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-start-end-radius: 8px;
|
|
}
|
|
&:not(:last-child) {
|
|
border-inline-end: 0;
|
|
}
|
|
&:not(:first-child) {
|
|
border-inline-start: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-end-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-end-end-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(odd) {
|
|
td {
|
|
background-color: var(--neutral-50);
|
|
}
|
|
}
|
|
td {
|
|
color: var(--text-secondary-light);
|
|
padding: rem(13px) rem(16px);
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
background-color: var(--white);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.vertical-striped-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
border: 1px solid var(--neutral-200);
|
|
border-radius: 8px;
|
|
min-width: max-content;
|
|
vertical-align: middle;
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: var(--neutral-50);
|
|
border-bottom: 1px solid var(--neutral-300);
|
|
color: var(--text-primary-light);
|
|
padding: rem(13px) rem(16px);
|
|
font-weight: 600;
|
|
&:first-child {
|
|
border-start-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-start-end-radius: 8px;
|
|
}
|
|
&:not(:first-child) {
|
|
border-inline-start: 0;
|
|
}
|
|
&:not(:last-child) {
|
|
border-inline-end: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-end-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-end-end-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
color: var(--text-secondary-light);
|
|
padding: rem(13px) rem(16px);
|
|
border-bottom: 1px solid var(--neutral-300);
|
|
background-color: var(--white);
|
|
vertical-align: middle;
|
|
&:nth-child(odd) {
|
|
background-color: var(--neutral-50);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.border-primary-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
border: 1px solid var(--primary-600);
|
|
border-radius: 8px;
|
|
min-width: max-content;
|
|
vertical-align: middle;
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: var(--neutral-50);
|
|
border-bottom: 1px solid var(--primary-600);
|
|
border-inline-end: 1px solid var(--primary-600);
|
|
color: var(--text-primary-light);
|
|
padding: rem(13px) rem(16px);
|
|
font-weight: 600;
|
|
&:first-child {
|
|
border-start-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-start-end-radius: 8px;
|
|
border-inline-end: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-end-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-end-end-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
color: var(--text-secondary-light);
|
|
padding: rem(13px) rem(16px);
|
|
border-bottom: 1px solid var(--primary-600);
|
|
border-inline-end: 1px solid var(--primary-600);
|
|
background-color: var(--white);
|
|
vertical-align: middle;
|
|
&:last-child {
|
|
border-inline-end: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.colored-row-table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
border: 1px solid var(--neutral-200);
|
|
border-radius: 8px;
|
|
min-width: max-content;
|
|
vertical-align: middle;
|
|
thead {
|
|
tr {
|
|
th {
|
|
background-color: var(--neutral-50);
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
color: var(--text-primary-light);
|
|
padding: rem(13px) rem(24px);
|
|
font-weight: 600;
|
|
&:first-child {
|
|
border-start-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-start-end-radius: 8px;
|
|
}
|
|
&:not(:first-child) {
|
|
border-inline-start: 0;
|
|
}
|
|
&:not(:last-child) {
|
|
border-inline-end: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-end-start-radius: 8px;
|
|
}
|
|
&:last-child {
|
|
border-end-end-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
color: var(--text-secondary-light);
|
|
padding: rem(9px) rem(24px);
|
|
background-color: var(--white);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dataTable {
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.basic-data-table {
|
|
.dt-layout-row {
|
|
padding-bottom: rem(14px);
|
|
select {
|
|
-webkit-appearance: auto;
|
|
appearance: auto;
|
|
color: var(--text-secondary-light) !important;
|
|
height: rem(40px);
|
|
border: 1px solid var(--input-form-light) !important;
|
|
@include border-radius(10px !important);
|
|
padding: rem(10px) rem(5px) rem(10px) rem(10px) !important;
|
|
}
|
|
.dt-layout-cell {
|
|
padding: 0;
|
|
}
|
|
.dt-length {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: rem(15px);
|
|
}
|
|
.dt-search {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: rem(15px);
|
|
justify-content: flex-end;
|
|
.dt-input {
|
|
color: var(--text-secondary-light) !important;
|
|
height: rem(40px);
|
|
border: 1px solid var(--input-form-light) !important;
|
|
@include border-radius(10px !important);
|
|
}
|
|
}
|
|
div, label {
|
|
color: var(--text-secondary-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
div.dt-container {
|
|
.dt-paging {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: rem(10px);
|
|
.dt-paging-button {
|
|
width: rem(32px);
|
|
height: rem(32px);
|
|
padding: 0 !important;
|
|
&:not(.first, .previous, .next, .last) {
|
|
color: var(--text-secondary-light) !important;
|
|
|
|
@include border-radius(4px !important);
|
|
background: var(--neutral-200) !important;
|
|
font-weight: 500;
|
|
border: none !important;
|
|
}
|
|
&:focus {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
&:hover,
|
|
&.current {
|
|
background: var(--primary-600) !important;
|
|
color: #fff !important;
|
|
&:hover {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Table Sm Code */
|
|
.sm-table {
|
|
thead, tbody {
|
|
tr {
|
|
th, td {
|
|
padding: 10px 16px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* Table Common Css End */
|
|
|
|
/* Table Sm Code */
|
|
.xsm-table {
|
|
thead, tbody {
|
|
tr {
|
|
th, td {
|
|
padding: 4px 16px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* Table Common Css End */
|