Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
332
public/scss/components/tables/_table-basic.scss
Normal file
332
public/scss/components/tables/_table-basic.scss
Normal file
@@ -0,0 +1,332 @@
|
||||
//style for all basic tables
|
||||
.table-hover > tbody > tr:hover > * {
|
||||
--bs-table-color-state: var(--text-dark);
|
||||
--bs-table-bg-state: var(--light);
|
||||
}
|
||||
.table {
|
||||
--bs-table-bg : var(--card);
|
||||
strong{
|
||||
color:$dark;
|
||||
}
|
||||
th, td {
|
||||
border-color: var(--border);
|
||||
padding: 0.9375rem 0.625rem;
|
||||
}
|
||||
|
||||
&.shadow-hover tbody tr:hover{
|
||||
background-color:$white;
|
||||
box-shadow: 0 0rem 1.875rem var(--rgba-primary-2);
|
||||
}
|
||||
&.tr-rounded{
|
||||
tr{
|
||||
td,th{
|
||||
&:first-child{
|
||||
border-radius:2.8125rem 0 0 2.8125rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius:0 2.8125rem 2.8125rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-hover{
|
||||
tr{
|
||||
td{
|
||||
border-width:0.0625rem 0 0.0625rem 0;
|
||||
border-bottom:0.0625rem solid transparent;
|
||||
border-color:transparent;
|
||||
&:first-child{
|
||||
border-width:0.0625rem 0 0.0625rem 0.0625rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-width:0.0625rem 0.0625rem 0.0625rem 0;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
td{
|
||||
border-color:$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-primary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-secondary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:$secondary;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-info-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:$info;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-warning-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:$warning;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-no{
|
||||
td{
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
&.short-one{
|
||||
tr{
|
||||
td,th{
|
||||
&:first-child{
|
||||
width:3.75rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
border-bottom:1px solid var(--border);
|
||||
text-transform: capitalize;
|
||||
color: var(--text-dark) ;
|
||||
font-size: 1rem;
|
||||
white-space:nowrap;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.0313rem;
|
||||
border-color: var(--border)!important;
|
||||
}
|
||||
tbody tr td {
|
||||
vertical-align: middle;
|
||||
border-color: var(--border);
|
||||
&:last-child{
|
||||
text-align: #{$dlab-pos-right};
|
||||
}
|
||||
}
|
||||
|
||||
//delete header borders without '.borders tables'
|
||||
&:not(.table-bordered) {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
//heading background
|
||||
.thead-primary th {
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
.thead-info th {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
.thead-warning th {
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
}
|
||||
.thead-danger th {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
}
|
||||
.thead-success th {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
//table border
|
||||
&.primary-table-bordered {
|
||||
border: 0.0625rem solid var(--border);
|
||||
}
|
||||
|
||||
//table hover
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: var(--primary-dark);
|
||||
color: $white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: var(--primary);
|
||||
transition: all .1s ease;
|
||||
td,th{
|
||||
background-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--rgba-primary-8);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 0.0625rem solid var(--primary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//responsive table width
|
||||
&-responsive {
|
||||
&-tiny {
|
||||
min-width: 18.75rem;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
min-width: 30rem !important;
|
||||
}
|
||||
|
||||
&-md {
|
||||
min-width: 36rem !important;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
min-width: 60.9375rem !important;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
min-width: 70.9375rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-primary,
|
||||
.table-primary > th,
|
||||
.table-primary > td {
|
||||
background-color: var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: var(--rgba-primary-1);
|
||||
}
|
||||
}
|
||||
.table-success,
|
||||
.table-success > th,
|
||||
.table-success > td {
|
||||
background-color: $success-light;
|
||||
color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
.table-info,
|
||||
.table-info > th,
|
||||
.table-info > td {
|
||||
background-color: $info-light;
|
||||
color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
.table-warning,
|
||||
.table-warning > th,
|
||||
.table-warning > td {
|
||||
background-color: $warning-light;
|
||||
color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
.table-danger,
|
||||
.table-danger > th,
|
||||
.table-danger > td {
|
||||
background-color: $danger-light;
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
.table-active,
|
||||
.table-active > th,
|
||||
.table-active > td {
|
||||
background-color: $l-bg;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-table{
|
||||
th, td{
|
||||
&:first-child,
|
||||
&:last-child{
|
||||
padding-#{$dlab-pos-left}:1.875rem;
|
||||
padding-#{$dlab-pos-right}:1.875rem;
|
||||
@include respond('phone') {
|
||||
padding-#{$dlab-pos-left}: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.table thead tr th:last-child {
|
||||
text-align: #{$dlab-pos-right} !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user