update
This commit is contained in:
Dwi Swandhana
No files matched your search
@@ -0,0 +1,360 @@
|
||||
/* =============
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user