first commit
This commit is contained in:
266
public/style/scss/components/tables/_table-basic.scss
Normal file
266
public/style/scss/components/tables/_table-basic.scss
Normal file
@ -0,0 +1,266 @@
|
||||
//style for all basic tables
|
||||
.table {
|
||||
|
||||
@include respond('tab-land') {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
strong{
|
||||
color:$dark;
|
||||
}
|
||||
td {
|
||||
border-color: $border;
|
||||
padding: 12px 20px;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
&.shadow-hover tbody tr:hover{
|
||||
background-color:$white;
|
||||
box-shadow: 0 0px 30px rgba($primary, 0.15);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
&.bg-secondary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$secondary;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-info-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$info;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-warning-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$warning;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-bottom-width: 1px;
|
||||
// color: $dark ;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 20px 20px;
|
||||
letter-spacing: 0.5px;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
tbody tr td {
|
||||
// color: $l-ctd;
|
||||
// line-height: 2.5rem;
|
||||
vertical-align: middle;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
//delete header borders without '.borders tables'
|
||||
&:not(.table-bordered) {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
//heading background
|
||||
.thead-primary th {
|
||||
background-color: $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: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
//table hover
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: darken($color: $primary, $amount: 5%);
|
||||
color: $white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
transition: all .1s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color: $primary, $amount: 5%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 1px solid darken($color: $primary, $amount: 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//responsive table width
|
||||
&-responsive {
|
||||
&-tiny {
|
||||
// @include media-breakpoint-down(xs) {
|
||||
min-width: 18.75rem;
|
||||
// }
|
||||
}
|
||||
|
||||
&-sm {
|
||||
// @include media-breakpoint-down(sm) {
|
||||
min-width: 30rem !important;
|
||||
// }
|
||||
}
|
||||
|
||||
&-md {
|
||||
// @include media-breakpoint-down(sm) {
|
||||
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: $primary-light;
|
||||
color: $primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.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{
|
||||
padding-left: 30px;
|
||||
@include respond('phone') {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
padding-right:30px;
|
||||
@include respond('phone') {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
14
public/style/scss/components/tables/_table-bootgrid.scss
Normal file
14
public/style/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 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
235
public/style/scss/components/tables/_table-datatable.scss
Normal file
235
public/style/scss/components/tables/_table-datatable.scss
Normal file
@ -0,0 +1,235 @@
|
||||
//demo styles
|
||||
table#example{
|
||||
padding: 0rem 0 2rem 0;
|
||||
}
|
||||
table.dataTable{
|
||||
color:$black;
|
||||
border-radius:$radius;
|
||||
}
|
||||
#example2_wrapper {
|
||||
.dataTables_scrollBody {
|
||||
max-height: 33.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#employees, #custommers {
|
||||
padding: .5rem 0 1rem 0;
|
||||
}
|
||||
//////////
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
padding:25px 0;
|
||||
@include respond('laptop') {
|
||||
padding:10px 0;
|
||||
}
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td {
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid $border;
|
||||
@include respond('laptop') {
|
||||
padding:8px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tfoot th,
|
||||
table.dataTable tfoot td{
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
background: #fff!important;
|
||||
}
|
||||
|
||||
table.dataTable thead th{
|
||||
color: $black;
|
||||
font-size:16px;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
font-size: 16px;
|
||||
padding: 15px 10px;
|
||||
@include respond('laptop') {
|
||||
padding:8px 10px;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
table.dataTable tfoot th{
|
||||
color: $dark;
|
||||
font-weight: 600;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper {
|
||||
input[type="search"], input[type="text"], select {
|
||||
border: 1px solid #e2e2e2;
|
||||
padding: .3rem 0.5rem;
|
||||
color: rgba(113, 93, 93, 1);
|
||||
border-radius: 5px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 15px;
|
||||
.bootstrap-select{
|
||||
width: 80px!important;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.no-footer{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.min-w850{
|
||||
min-width:850px;
|
||||
}
|
||||
|
||||
.rounded-lg{
|
||||
min-width:30px;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
padding: 1rem 0;
|
||||
|
||||
&Foot{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
@include media-breakpoint-down(md) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.dataTablesCard{
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 12px 23px 0px rgba(62, 73, 84, 0.04);
|
||||
border-radius: 0;
|
||||
|
||||
tbody tr:hover{
|
||||
background:$white!important;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
td{
|
||||
background:transparent!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.display tbody tr:hover{
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
td{
|
||||
background:transparent!important;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
padding:25px 0;
|
||||
@include respond('laptop') {
|
||||
padding:8px 0;
|
||||
}
|
||||
}
|
||||
table.dataTable.display.white-border td{
|
||||
border-color:$white;
|
||||
}
|
||||
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;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
table.dataTable thead .sorting{
|
||||
background-position: center right 15px;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
border-radius:$radius;
|
||||
span{
|
||||
border-radius:$radius;
|
||||
display: inline-block;
|
||||
background:rgba($primary,0.08);
|
||||
border:0px solid $primary;
|
||||
margin: 0 0;
|
||||
|
||||
a{
|
||||
color:$white;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.paginate_button{
|
||||
border: 0 !important;
|
||||
padding: 15px 24px;
|
||||
background: transparent !important;
|
||||
border-radius: $radius;
|
||||
color:$primary !important;
|
||||
font-size:16px;
|
||||
margin:0;
|
||||
display:inline-block;
|
||||
@include respond('laptop') {
|
||||
padding: 8px 15px;
|
||||
font-size:14px;
|
||||
}
|
||||
&:hover,
|
||||
&.current:hover,
|
||||
&.current{
|
||||
color:$white !important;
|
||||
background:$primary !important;
|
||||
}
|
||||
|
||||
&.previous,
|
||||
&.next{
|
||||
background:$white!important;
|
||||
color:$primary !important;
|
||||
margin: 0 10px;
|
||||
border:0px solid $primary!important;
|
||||
&:hover{
|
||||
background:$primary!important;
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4
public/style/scss/components/tables/_table-footable.scss
Normal file
4
public/style/scss/components/tables/_table-footable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.fooicon {
|
||||
font-size: 1.25rem;
|
||||
color: $dark;
|
||||
}
|
||||
25
public/style/scss/components/tables/_table-jsgrid.scss
Normal file
25
public/style/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: 1px solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsgrid .jsgrid-button{
|
||||
border: 0 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
5
public/style/scss/components/tables/_table.scss
Normal file
5
public/style/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