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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
14
public/scss/components/tables/_table-bootgrid.scss
Normal file
14
public/scss/components/tables/_table-bootgrid.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.bootgrid-header {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
.actionBar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 0 0.625rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
327
public/scss/components/tables/_table-datatable.scss
Normal file
327
public/scss/components/tables/_table-datatable.scss
Normal file
@@ -0,0 +1,327 @@
|
||||
//demo styles
|
||||
table#example{
|
||||
padding: 0rem 0 2rem 0;
|
||||
}
|
||||
table.dataTable{
|
||||
font-size: 0.875rem;
|
||||
color:var(--text-gray);
|
||||
.form-check{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
#example2_wrapper {
|
||||
.dataTables_scrollBody {
|
||||
max-height: 33.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#employees, #custommers {
|
||||
padding: .5rem 0 1rem 0;
|
||||
}
|
||||
//////////
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
@include respond ('phone'){
|
||||
justify-content:start!important;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc::after {
|
||||
content: "";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
background-image: none;
|
||||
margin-#{$dlab-pos-left}: 5px;
|
||||
font-size: calc(100% - 2px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting{
|
||||
&::after {
|
||||
content: "\f0dc";
|
||||
}
|
||||
&.sorting_desc::after {
|
||||
content: "\f0dd";
|
||||
opacity: 0.5;
|
||||
}
|
||||
&.sorting_asc::after {
|
||||
content: "\f0de";
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table.dataTable thead th, table.dataTable thead td{
|
||||
border-bottom: 0.125rem solid $border-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable tfoot th, table.dataTable tfoot td{
|
||||
border-top: 0;
|
||||
}
|
||||
table.dataTable tbody tr.selected > *{
|
||||
color: var(--text-dark);
|
||||
background: var(--light)!important;
|
||||
border-color: var(--border)!important;
|
||||
}
|
||||
table.dataTable tbody tr, table.dataTable tbody td{
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > *{
|
||||
box-shadow: unset!important;
|
||||
}
|
||||
|
||||
table.dataTable thead th{
|
||||
color: var(--text-dark);
|
||||
white-space:nowrap;
|
||||
font-size:.9375rem;
|
||||
text-transform:capitalize;
|
||||
font-weight: 500;
|
||||
padding: 1.25rem 0.9375rem;
|
||||
|
||||
}
|
||||
table.dataTable{
|
||||
& > thead > tr > th{
|
||||
padding: 1rem 0.9375rem;
|
||||
padding-#{$dlab-pos-right}: 26px;
|
||||
padding-#{$dlab-pos-left}: 0.9375rem !important;
|
||||
text-align: #{$dlab-pos-left};
|
||||
background-color: transparent;
|
||||
@include respond ('phone'){
|
||||
padding-#{$dlab-pos-left}: 0.3125rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_info{
|
||||
padding-top: 1rem;
|
||||
@include respond ('phone'){
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
padding: .85rem 0.9375rem;
|
||||
font-size:.875rem;
|
||||
font-weight: 400;
|
||||
border-bottom:0;
|
||||
@include respond('phone') {
|
||||
padding: 0.5rem 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
table.dataTable tfoot th{
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
font-size: .9375rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td{
|
||||
padding: 1rem 0.9375rem;
|
||||
@include respond ('phone'){
|
||||
padding: 0.5rem 0.3125rem;
|
||||
}
|
||||
}
|
||||
td.text-ov {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow:wrap;
|
||||
justify-content:center;
|
||||
@include respond ('phone'){
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
.paginate_button.previous,.paginate_button.next{
|
||||
font-size: 1rem;
|
||||
height:2.5rem;
|
||||
width: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
border:0.0625rem solid var(--primary);
|
||||
border-radius:2.8125rem;
|
||||
padding:0 0.85rem;
|
||||
line-height:2.5rem;
|
||||
margin:0 0.625rem;
|
||||
display:inline-block;
|
||||
color:var(--primary)!important;
|
||||
&.current:hover,
|
||||
&.previous:hover,
|
||||
&.next:hover{
|
||||
color:$white!important;
|
||||
background:var(--primary)!important;
|
||||
}
|
||||
&.disabled{
|
||||
color:var(--primary)!important;
|
||||
}
|
||||
}
|
||||
span{
|
||||
.paginate_button{
|
||||
height:2.5rem;
|
||||
width:2.5rem;
|
||||
padding:0;
|
||||
margin-#{$dlab-pos-left}: 0rem;
|
||||
margin:0 0.125rem;
|
||||
line-height:2.5rem;
|
||||
text-align:center;
|
||||
font-size:1.125rem;
|
||||
border-radius:2.8125rem;
|
||||
color:var(--primary)!important;
|
||||
background:var(--rgba-primary-1);
|
||||
&.current,&:hover{
|
||||
color: #fff !important;
|
||||
background:var(--primary);
|
||||
border:1px solid transparent;
|
||||
&:hover{
|
||||
color:$white!important;
|
||||
background:var(--primary)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper {
|
||||
input[type="search"], input[type="text"], select {
|
||||
border: 1px solid var(--border);
|
||||
padding: .3rem 0.5rem;
|
||||
height: 2.5rem;
|
||||
color: var(--text-dark);
|
||||
border-radius: $radius;
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 0.9375rem;
|
||||
.bootstrap-select{
|
||||
width: 5rem!important;
|
||||
margin: 0 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.no-footer{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.rounded-lg{
|
||||
min-width:1.875rem;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
padding: 1rem 0;
|
||||
|
||||
&Foot{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTablesCard{
|
||||
background-color:$white;
|
||||
border-radius:$radius;
|
||||
&.border-no{
|
||||
td{
|
||||
border-top:0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
|
||||
@include media-breakpoint-down(md) {
|
||||
text-align: #{$dlab-pos-left};
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
|
||||
color: $body-color !important;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_processing,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
color: $body-color;
|
||||
border-radius:1rem;
|
||||
padding:0.125rem 0;
|
||||
margin-bottom:1.25rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$d-ctl;
|
||||
}
|
||||
}
|
||||
.paging_simple_numbers.dataTables_paginate {
|
||||
padding: 0.3125rem 0.3125rem;
|
||||
@include respond ('phone'){
|
||||
margin: 10px -10px;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button{
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
table.dataTable.row-border tbody th,
|
||||
table.dataTable.row-border tbody td,
|
||||
table.dataTable.display tbody th,
|
||||
table.dataTable.display tbody td {
|
||||
border-color: $border-color;
|
||||
box-shadow: none!important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper{
|
||||
.dataTables_length{
|
||||
.bootstrap-select{
|
||||
.dropdown-toggle{
|
||||
font-size: 0.813rem !important;
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$d-ctl;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_paginate.paging_simple_numbers{
|
||||
span{
|
||||
@include respond ('phone'){
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #example_wrapper.dataTables_wrapper{
|
||||
.paginate_button.previous,.paginate_button.next{
|
||||
@include respond ('phone'){
|
||||
min-width:7rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
table.dataTable.row-border > tbody > tr > th,
|
||||
table.dataTable.row-border > tbody > tr > td,
|
||||
table.dataTable.display > tbody > tr > th,
|
||||
table.dataTable.display > tbody > tr > td{
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
#{$dlab-pos-right}: 0;
|
||||
}
|
||||
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td,
|
||||
table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td{
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting_disabled::before{
|
||||
content: none;
|
||||
}
|
||||
4
public/scss/components/tables/_table-footable.scss
Normal file
4
public/scss/components/tables/_table-footable.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
.fooicon {
|
||||
font-size: 1.25rem;
|
||||
color: $dark;
|
||||
}
|
||||
25
public/scss/components/tables/_table-jsgrid.scss
Normal file
25
public/scss/components/tables/_table-jsgrid.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.jsgrid-table{
|
||||
|
||||
.jsgrid-header-row{
|
||||
|
||||
& > .jsgrid-header-cell{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr > td{
|
||||
padding: 1.2em;
|
||||
}
|
||||
|
||||
.jsgrid-insert-row, .jsgrid-edit-row{
|
||||
|
||||
input, select{
|
||||
border: 0.0625rem solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsgrid .jsgrid-button{
|
||||
border: 0 !important;
|
||||
margin-#{$dlab-pos-left}: 0.625rem;
|
||||
}
|
||||
5
public/scss/components/tables/_table.scss
Normal file
5
public/scss/components/tables/_table.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "table-basic";
|
||||
@import "table-bootgrid";
|
||||
@import "table-datatable";
|
||||
@import "table-footable";
|
||||
@import "table-jsgrid";
|
||||
Reference in New Issue
Block a user