361 lines
7.6 KiB
SCSS
361 lines
7.6 KiB
SCSS
/* =============
|
|
Tables
|
|
============= */
|
|
|
|
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
|
|
padding: 12px 10px;
|
|
}
|
|
.table-sm td, .table-sm th {
|
|
padding: .4rem !important;
|
|
}
|
|
.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
|
|
padding: 7px;
|
|
}
|
|
th {
|
|
font-family: $font-secondary;
|
|
font-weight: 500;
|
|
}
|
|
.table-centered {
|
|
td {
|
|
vertical-align: middle !important;
|
|
}
|
|
}
|
|
|
|
.table-striped tbody tr:nth-of-type(odd),.table-hover tbody tr:hover,.table-active, .table-active>td, .table-active>th {
|
|
background-color: lighten($light,5%);
|
|
}
|
|
|
|
.table-success, .table-success>td, .table-success>th {
|
|
background-color: rgba($success,0.15);
|
|
border-color: rgba($success,0.2);
|
|
}
|
|
|
|
.table-info, .table-info>td, .table-info>th {
|
|
background-color: rgba($info,0.15);
|
|
border-color: rgba($info,0.2);
|
|
}
|
|
|
|
.table-warning, .table-warning>td, .table-warning>th {
|
|
background-color: rgba($warning,0.1);
|
|
border-color: rgba($warning,0.2);
|
|
}
|
|
|
|
.table-danger, .table-danger>td, .table-danger>th {
|
|
background-color: rgba($danger,0.1);
|
|
border-color: rgba($danger,0.2);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Data table */
|
|
.container-fluid.dataTables_wrapper {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
div.dt-button-info {
|
|
background-color: $custom;
|
|
border: none;
|
|
color: $white;
|
|
box-shadow: none;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
z-index: 21;
|
|
}
|
|
div.dt-button-info h2 {
|
|
border-bottom: none;
|
|
background-color: rgba($white,0.2);
|
|
color: $white;
|
|
}
|
|
|
|
table.dataTable {
|
|
margin-top: 10px !important;
|
|
margin-bottom: 18px !important;
|
|
}
|
|
.table-bordered.dataTable>thead>tr>td, .table-bordered.dataTable>thead>tr>th {
|
|
border-bottom-width: 1px !important;
|
|
}
|
|
|
|
// Key Tables
|
|
table.dataTable th.focus,table.dataTable td.focus{
|
|
outline: 2px solid $custom !important;
|
|
outline-offset: -1px;
|
|
background-color: rgba($custom,0.15);
|
|
}
|
|
|
|
|
|
// Multi select table
|
|
table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
|
|
background-color: $custom;
|
|
}
|
|
|
|
|
|
|
|
/* Responsive data table */
|
|
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
|
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
|
box-shadow: 0 0 3px rgba(67, 89, 102, 0.2);
|
|
background-color: $success;
|
|
}
|
|
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
|
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
|
background-color: $danger;
|
|
}
|
|
table.dataTable>tbody>tr.child span.dtr-title {
|
|
font-family: $font-secondary;
|
|
}
|
|
|
|
|
|
/* Responsive Table */
|
|
|
|
.table-rep-plugin {
|
|
.dropdown-menu li.checkbox-row {
|
|
padding: 7px 15px;
|
|
}
|
|
|
|
.table-responsive {
|
|
border: none;
|
|
}
|
|
tbody {
|
|
th {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.checkbox-row {
|
|
padding-left: 40px;
|
|
|
|
label {
|
|
display: inline-block;
|
|
padding-left: 5px;
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
&::before {
|
|
-o-transition: 0.3s ease-in-out;
|
|
-webkit-transition: 0.3s ease-in-out;
|
|
background-color: $white;
|
|
border-radius: 3px;
|
|
border: 1px solid $muted;
|
|
content: "";
|
|
display: inline-block;
|
|
height: 17px;
|
|
left: 0;
|
|
margin-left: -20px;
|
|
position: absolute;
|
|
transition: 0.3s ease-in-out;
|
|
width: 17px;
|
|
outline: none;
|
|
}
|
|
&::after {
|
|
color: $light3;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
height: 16px;
|
|
left: 0;
|
|
margin-left: -20px;
|
|
padding-left: 3px;
|
|
padding-top: 1px;
|
|
position: absolute;
|
|
top: -1px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
input[type="checkbox"] {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
outline: none;
|
|
|
|
&:disabled + label {
|
|
opacity: 0.65;
|
|
}
|
|
}
|
|
input[type="checkbox"]:focus + label {
|
|
&::before {
|
|
outline-offset: -2px;
|
|
outline: none;
|
|
}
|
|
}
|
|
input[type="checkbox"]:checked + label {
|
|
&::after {
|
|
content: "\f00c";
|
|
font-family: 'FontAwesome';
|
|
}
|
|
}
|
|
input[type="checkbox"]:disabled + label {
|
|
&::before {
|
|
background-color: $light;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
input[type="checkbox"]:checked + label {
|
|
&::before {
|
|
background-color: $white;
|
|
border-color: $custom;
|
|
}
|
|
&::after {
|
|
color: $custom;
|
|
}
|
|
}
|
|
}
|
|
table.focus-on tbody tr.focused th, table.focus-on tbody tr.focused td,
|
|
.sticky-table-header{
|
|
background: $custom;
|
|
color: $white;
|
|
border-color: $custom;
|
|
}
|
|
.sticky-table-header.fixed-solution {
|
|
top: 120px !important;
|
|
}
|
|
.btn-default {
|
|
background-color: $white;
|
|
border: 1px solid rgba($dark, 0.3);
|
|
}
|
|
.btn-group.pull-right {
|
|
float: right;
|
|
.dropdown-menu {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
.btn-default.btn-primary {
|
|
background-color: $custom;
|
|
border-color: $custom;
|
|
box-shadow: 0 0 0 2px rgba($custom,.5);
|
|
}
|
|
}
|
|
|
|
.table-rep-plugin .btn-toolbar {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* Tablesaw Tables */
|
|
.tablesaw {
|
|
thead {
|
|
background: lighten($light,5%);
|
|
background-image: none;
|
|
border: none;
|
|
|
|
th {
|
|
text-shadow: none;
|
|
}
|
|
|
|
tr:first-child th {
|
|
border: none;
|
|
font-weight: 500;
|
|
font-family: $font-secondary;
|
|
}
|
|
}
|
|
td {
|
|
border-top: 1px solid lighten($light,5%) !important;
|
|
}
|
|
}
|
|
|
|
.tablesaw td, .tablesaw tbody th {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
padding: 10px !important;
|
|
}
|
|
.tablesaw-stack tbody tr ,.tablesaw tbody tr{
|
|
border-bottom: none;
|
|
}
|
|
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after, .tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
|
|
font-family: FontAwesome;
|
|
font-size: 10px;
|
|
}
|
|
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after {
|
|
content: "\f176";
|
|
}
|
|
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
|
|
content: "\f175";
|
|
}
|
|
.tablesaw-bar .btn-select.btn-small:after, .tablesaw-bar .btn-select.btn-micro:after {
|
|
font-size: 8px;
|
|
padding-right: 10px;
|
|
}
|
|
.tablesaw-swipe .tablesaw-cell-persist {
|
|
box-shadow: none;
|
|
border-color: $light;
|
|
}
|
|
.tablesaw-enhanced .tablesaw-bar .btn {
|
|
text-shadow: none;
|
|
background-image: none;
|
|
text-transform: none;
|
|
border: 1px solid darken($light,5%);
|
|
}
|
|
.tablesaw-enhanced .tablesaw-bar .btn.btn-select {
|
|
&:hover {
|
|
background: $white;
|
|
}
|
|
}
|
|
|
|
.tablesaw thead tr:first-child th,.tablesaw-sortable th.tablesaw-sortable-head button {
|
|
padding-top: 1.2em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.tablesaw-enhanced .tablesaw-bar .btn:hover, .tablesaw-enhanced .tablesaw-bar .btn:focus,.tablesaw-enhanced .tablesaw-bar .btn:active {
|
|
color: $custom !important;
|
|
background-color: $light;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
background-image: none;
|
|
}
|
|
|
|
.tablesaw-columntoggle-popup {
|
|
.btn-group {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
/* Footable */
|
|
.footable-odd {
|
|
background-color: $white;
|
|
}
|
|
|
|
.footable-detail-show {
|
|
background-color: $light;
|
|
}
|
|
|
|
.footable-row-detail {
|
|
background-color: #F0F4F7;
|
|
}
|
|
|
|
.footable-pagination {
|
|
li {
|
|
margin-left: 5px;
|
|
display: inline-block;
|
|
float: left;
|
|
|
|
a{
|
|
position: relative;
|
|
display: block;
|
|
padding: .5rem .75rem;
|
|
margin-left: -1px;
|
|
line-height: 1.25;
|
|
color: $dark;
|
|
background-color: $white;
|
|
border: 1px solid $light;
|
|
}
|
|
}
|
|
li.active {
|
|
a {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footable > thead > tr > th > span.footable-sort-indicator {
|
|
float: right;
|
|
}
|
|
|
|
.footable {
|
|
a {
|
|
color: $custom;
|
|
}
|
|
}
|