first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,110 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Footable
|
||||
*
|
||||
* jQuery plugin that aims to make HTML tables on smaller devices look awesome.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-footable {
|
||||
|
||||
// Base
|
||||
.footable {
|
||||
width: 100%;
|
||||
|
||||
// Remove user select
|
||||
> thead > tr > th {
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Setup table styles
|
||||
&.breakpoint {
|
||||
> tbody {
|
||||
> tr {
|
||||
&.footable-detail-show > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Remove background color from details row
|
||||
&.footable-row-detail:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Add pointer
|
||||
&:hover:not(.footable-row-detail) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Cell with details
|
||||
> .footable-cell-detail {
|
||||
background-color: $gray-100;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Add expand icon
|
||||
.footable-toggle:before {
|
||||
content: $icon-table-row-expand;
|
||||
display: inline-block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: (($font-size-base - $icon-font-size) / 2);
|
||||
line-height: 1;
|
||||
padding-right: $element-spacer-x;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Add collapse icon
|
||||
&.footable-detail-show .footable-toggle:before {
|
||||
content: $icon-table-row-collapse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Row styling
|
||||
//
|
||||
|
||||
// Inner wrapper
|
||||
.footable-row-detail-inner {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Row details
|
||||
.footable-row-detail-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
// Grouped details
|
||||
.footable-row-detail-group {
|
||||
display: block;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Name
|
||||
.footable-row-detail-name {
|
||||
display: table-cell;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-right: ($card-spacer-x * 2);
|
||||
}
|
||||
|
||||
// Value
|
||||
.footable-row-detail-value {
|
||||
display: table-cell;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
+131
@@ -0,0 +1,131 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Autofill extension
|
||||
*
|
||||
* Spreadsheets such as Excel and Google Docs have a very handy data duplication
|
||||
* option of an auto fill tool
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-autofill {
|
||||
|
||||
// Handle
|
||||
.dt-autofill-handle {
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
border: $table-border-width solid theme-color("primary");
|
||||
background-color: theme-color("primary");
|
||||
@include size(0.5rem);
|
||||
}
|
||||
|
||||
// Select frame
|
||||
.dt-autofill-select {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
background-color: theme-color("primary");
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 0.3125rem, rgba($white, 0.75) 0.3125rem, rgba($white, 0.75) 0.625rem);
|
||||
|
||||
// Vertical lines
|
||||
&.top,
|
||||
&.bottom {
|
||||
height: $table-border-width;
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
&.left,
|
||||
&.right {
|
||||
width: $table-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Confirmation dialog
|
||||
.dt-autofill-list {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 31.25rem;
|
||||
margin-left: -15.63rem;
|
||||
background-color: $modal-content-bg;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
z-index: $zindex-modal;
|
||||
padding: $dropdown-padding-y 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// List
|
||||
ul {
|
||||
display: table;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
// List items
|
||||
li {
|
||||
display: table-row;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Highlight row on hover
|
||||
@include hover {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text label
|
||||
.dt-autofill-question {
|
||||
display: table-cell;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
|
||||
// Text label input
|
||||
input[type=number] {
|
||||
padding: 0.375rem;
|
||||
width: 1.875rem;
|
||||
margin: -0.125rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm button
|
||||
.dt-autofill-button {
|
||||
display: table-cell;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
text-align: right;
|
||||
|
||||
// Button itself
|
||||
.btn {
|
||||
padding: 0.1875rem;
|
||||
background-color: theme-color("primary");
|
||||
color: $white;
|
||||
font-size: 0;
|
||||
|
||||
// Checkmark icon
|
||||
&:after {
|
||||
content: $icon-table-button-confirm;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
width: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Mute button on hover
|
||||
@include hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.dt-autofill-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $modal-backdrop-bg;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Buttons extension
|
||||
*
|
||||
* The Buttons extension for DataTables provides a common set of options, API
|
||||
* methods and styling to display buttons that will interact with a DataTable
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-buttons {
|
||||
|
||||
// Full width buttons
|
||||
.dt-buttons-full {
|
||||
|
||||
// Container
|
||||
.dt-buttons {
|
||||
float: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
padding-top: $dt-spacer-y;
|
||||
padding-bottom: ($dt-spacer-y / 2);
|
||||
background-color: $table-accent-bg;
|
||||
|
||||
// Button
|
||||
> .btn {
|
||||
margin-bottom: ($dt-spacer-y / 2);
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons. Default alignment is right
|
||||
.dt-buttons {
|
||||
position: relative;
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Left display option
|
||||
.dt-buttons-left & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Default buttons
|
||||
> .btn {
|
||||
border-radius: 0;
|
||||
|
||||
// First button
|
||||
&:first-child {
|
||||
@include border-left-radius($btn-border-radius);
|
||||
}
|
||||
|
||||
// Last button
|
||||
&:last-of-type {
|
||||
@include border-right-radius($btn-border-radius);
|
||||
}
|
||||
|
||||
// Add 1px spacing between buttons
|
||||
& + .btn {
|
||||
margin-left: -($btn-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@include media-breakpoint-down(sm) {
|
||||
float: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
.btn {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.dt-button-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $modal-backdrop-bg;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
|
||||
// Button collection
|
||||
.dt-button-collection {
|
||||
position: absolute;
|
||||
background-color: $dropdown-bg;
|
||||
display: block;
|
||||
z-index: $zindex-modal;
|
||||
padding: $dropdown-padding-y 0;
|
||||
overflow: hidden;
|
||||
min-width: $dropdown-min-width;
|
||||
column-gap: 0.125rem;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Force collection dropdown to be right aligned
|
||||
&:not(.fixed) {
|
||||
top: 100%!important;
|
||||
left: auto!important;
|
||||
right: 0!important;
|
||||
}
|
||||
|
||||
// Inner buttons
|
||||
> .dt-button {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
color: $dropdown-link-color;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: block;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Add 1px top spacing between buttons
|
||||
+ .dt-button {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed centered layout
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -($dt-button-collection-2col-width / 4);
|
||||
padding-left: $dropdown-padding-y;
|
||||
padding-right: $dropdown-padding-y;
|
||||
|
||||
// Two columns
|
||||
&.two-column {
|
||||
margin-left: -($dt-button-collection-2col-width / 2);
|
||||
}
|
||||
|
||||
// Three columns
|
||||
&.three-column {
|
||||
margin-left: -($dt-button-collection-3col-width / 2);
|
||||
}
|
||||
|
||||
// Four columns
|
||||
&.four-column {
|
||||
margin-left: -($dt-button-collection-4col-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Inner content
|
||||
> * {
|
||||
-webkit-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
// Two columns
|
||||
&.two-column {
|
||||
width: $dt-button-collection-2col-width;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
// Three columns
|
||||
&.three-column {
|
||||
width: $dt-button-collection-3col-width;
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
// Four columns
|
||||
&.four-column {
|
||||
width: $dt-button-collection-4col-width;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Columns reorder
|
||||
*
|
||||
* Easily modify the column order of a table through drop-and-drag of column headers
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-colreorder {
|
||||
|
||||
// Highlight cloned header
|
||||
.DTCR_clonedTable {
|
||||
background-color: rgba($white, 0.8);
|
||||
z-index: 202;
|
||||
cursor: move;
|
||||
|
||||
// Mute background and add border
|
||||
th,
|
||||
td {
|
||||
border: $table-border-width solid $table-border-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Add colored pointer
|
||||
.DTCR_pointer {
|
||||
width: $table-border-width;
|
||||
background-color: theme-color("primary");
|
||||
z-index: 201;
|
||||
}
|
||||
}
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fixed columns
|
||||
*
|
||||
* Extension that "freezes" in place the left most columns in a scrolling DataTable
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-fixed-columns {
|
||||
|
||||
// Prevent text from wrapping
|
||||
.DTFC_ScrollWrapper {
|
||||
thead th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Block out what is behind the fixed column's header and footer
|
||||
.DTFC_Cloned {
|
||||
background-color: $card-bg;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// In left column
|
||||
.DTFC_LeftWrapper {
|
||||
.DTFC_LeftHeadWrapper,
|
||||
.DTFC_LeftBodyWrapper,
|
||||
.DTFC_LeftFootWrapper {
|
||||
border-right: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// In right column
|
||||
.DTFC_RightWrapper {
|
||||
.DTFC_RightHeadWrapper,
|
||||
.DTFC_RightBodyWrapper,
|
||||
.DTFC_RightFootWrapper {
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove dublicated header arrows and borders
|
||||
.DTFC_LeftBodyWrapper,
|
||||
.DTFC_RightBodyWrapper {
|
||||
.DTFC_Cloned {
|
||||
thead th {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block out the gap above the scrollbar on the right
|
||||
.DTFC_Blocker {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fixed Header extension
|
||||
*
|
||||
* This extension lets your users quickly determine what each column refers to
|
||||
* rather than needing to scroll back to the top of the table.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-fixed-header {
|
||||
|
||||
// Headers
|
||||
.fixedHeader-floating,
|
||||
.fixedHeader-locked {
|
||||
background-color: $card-bg;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Floating header
|
||||
.fixedHeader-floating {
|
||||
position: fixed;
|
||||
|
||||
// Remove top border if multiple tables
|
||||
.fixedHeader-floating + &,
|
||||
.fixedHeader-locked + & {
|
||||
border-top: 0!important;
|
||||
}
|
||||
|
||||
// Hide on mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Locked header
|
||||
.fixedHeader-locked {
|
||||
position: absolute;
|
||||
|
||||
// Hide on mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide headers on print
|
||||
@media print {
|
||||
table.fixedHeader-floating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Key Table extension
|
||||
*
|
||||
* KeyTable provides Excel like cell navigation on any table. Events (focus, blur,
|
||||
* action etc) can be assigned to individual cells, columns, rows or all cells.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-keytable {
|
||||
|
||||
// Focus colors
|
||||
.dataTable {
|
||||
th,
|
||||
td {
|
||||
|
||||
// Default
|
||||
&.focus {
|
||||
outline: ($table-border-width * 2) solid $color-primary-500;
|
||||
outline-offset: -($table-border-width);
|
||||
}
|
||||
|
||||
// Success
|
||||
&.focus-success {
|
||||
background-color: $color-success-50;
|
||||
outline-color: $color-success-500;
|
||||
}
|
||||
|
||||
// Info
|
||||
&.focus-info {
|
||||
background-color: $color-primary-50;
|
||||
outline-color: $color-primary-500;
|
||||
}
|
||||
|
||||
// Warning
|
||||
&.focus-warning {
|
||||
background-color: $color-warning-50;
|
||||
outline-color: $color-warning-500;
|
||||
}
|
||||
|
||||
// Danger
|
||||
&.focus-danger {
|
||||
background-color: $color-danger-50;
|
||||
outline-color: $color-danger-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Responsive extension
|
||||
*
|
||||
* Optimise the table's layout for different screen sizes through the dynamic
|
||||
* insertion and removal of columns from the table
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-responsive {
|
||||
|
||||
// Inline details row
|
||||
.dtr-inline {
|
||||
&.collapsed tbody {
|
||||
tr {
|
||||
td,
|
||||
th {
|
||||
&:before {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&.dataTables_empty:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Column details row
|
||||
.dtr-column {
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
&.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Expand/collapse icons
|
||||
//
|
||||
|
||||
.dtr-inline.collapsed tbody tr td:first-child:before,
|
||||
.dtr-inline.collapsed tbody tr th:first-child:before,
|
||||
.dtr-column tbody tr td.control:before,
|
||||
.dtr-column tbody tr th.control:before {
|
||||
content: $icon-table-row-expand;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
width: $icon-font-size;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: (($font-size-base - $icon-font-size) / 2);
|
||||
vertical-align: middle;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
|
||||
.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before,
|
||||
.dataTable.dtr-column tbody tr.parent td.control:before,
|
||||
.dataTable.dtr-column tbody tr.parent th.control:before {
|
||||
content: $icon-table-row-collapse;
|
||||
}
|
||||
.dtr-inline.collapsed tbody tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Child rows with details
|
||||
//
|
||||
|
||||
.dataTable {
|
||||
tr {
|
||||
|
||||
// Child row
|
||||
&.child {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dtr-title {
|
||||
display: table-cell;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-right: ($card-spacer-x * 2);
|
||||
}
|
||||
|
||||
.dtr-data {
|
||||
display: table-cell;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Child cell
|
||||
td.child {
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
|
||||
> ul {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Row Reorder extension
|
||||
*
|
||||
* RowReorder adds the ability for rows in a DataTable to be reordered through
|
||||
* user interaction with the table.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-row-reorder {
|
||||
|
||||
// The movable row
|
||||
.dt-rowReorder-float {
|
||||
position: absolute!important;
|
||||
table-layout: static;
|
||||
outline: $table-border-width dashed $color-grey-500;
|
||||
outline-offset: -($table-border-width);
|
||||
background-color: $card-bg;
|
||||
z-index: $zindex-fixed;
|
||||
cursor: move;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
// The target row
|
||||
.dt-rowReorder-moving {
|
||||
outline: $table-border-width solid $color-grey-500;
|
||||
outline-offset: -($table-border-width);
|
||||
}
|
||||
|
||||
// Hide overflow from <body> tag when moving
|
||||
.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Reorder cell
|
||||
.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datatables Scroller
|
||||
*
|
||||
* Drawing the rows required for the current display only, for fast operation
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-scroller {
|
||||
|
||||
// Base
|
||||
.DTS {
|
||||
|
||||
// Prevent word wrap
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading text
|
||||
.DTS_Loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 12.5rem;
|
||||
height: 1.25rem;
|
||||
margin-top: -($spacer);
|
||||
margin-left: -6.25rem;
|
||||
z-index: 1;
|
||||
|
||||
border: $table-border-width solid $table-border-color;
|
||||
padding: 1.25rem 0;
|
||||
text-align: center;
|
||||
background-color: rgba($white, 0.5);
|
||||
}
|
||||
|
||||
// Scroller areas
|
||||
.dataTables_scrollHead,
|
||||
.dataTables_scrollFoot {
|
||||
background-color: $white;
|
||||
}
|
||||
.dataTables_scrollBody {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Select extension
|
||||
*
|
||||
* Adds item selection capabilities to a DataTable
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-select {
|
||||
|
||||
// Highlight selected row
|
||||
.dataTable {
|
||||
tbody > tr {
|
||||
&.selected,
|
||||
> .selected {
|
||||
background-color: $dt-ext-select-active-row-bg;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Item select
|
||||
.dataTables_wrapper {
|
||||
.select-info,
|
||||
.select-item {
|
||||
margin-left: $element-spacer-x;
|
||||
|
||||
// On mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
.dataTable tbody {
|
||||
|
||||
// Chackbox base
|
||||
.select-checkbox {
|
||||
position: relative;
|
||||
|
||||
// Checkbox icon base
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: $checkbox-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Box
|
||||
&:before {
|
||||
content: '';
|
||||
background-color: $card-bg;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
margin-top: -($checkbox-size / 2);
|
||||
margin-left: -($checkbox-size / 2);
|
||||
border: $checkbox-border-width solid $checkbox-color;
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkmark icon
|
||||
.selected .select-checkbox {
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
margin-top: -(($checkbox-size - ($checkbox-border-width * 2)) / 2);
|
||||
margin-left: -(($checkbox-size - ($checkbox-border-width * 2)) / 2);
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,593 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datatables library
|
||||
*
|
||||
* Add advanced interaction controls to any HTML table
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable {
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Table container
|
||||
.dataTable {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
|
||||
// Header
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
outline: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Add hand cursor to sortable cells
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Add right space to avoid text overlap over arrow
|
||||
.sorting,
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting_asc_disabled,
|
||||
.sorting_desc_disabled {
|
||||
padding-right: ($dt-spacer-x * 2);
|
||||
}
|
||||
|
||||
|
||||
// Add sorting icon base
|
||||
.sorting:before,
|
||||
.sorting:after,
|
||||
.sorting_asc:after,
|
||||
.sorting_desc:after,
|
||||
.sorting_asc_disabled:after,
|
||||
.sorting_desc_disabled:after {
|
||||
content: '';
|
||||
font-family: $icon-font-family;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $dt-spacer-x;
|
||||
font-size: $font-size-sm;
|
||||
margin-top: -($font-size-sm / 2);
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Icons
|
||||
.sorting {
|
||||
&:before {
|
||||
content: $icon-table-sorting-down;
|
||||
margin-top: -0.125rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:after {
|
||||
content: $icon-table-sorting-up;
|
||||
margin-top: -($font-size-sm - 0.125rem);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.sorting_asc:after {
|
||||
content: $icon-table-sorting-up;
|
||||
opacity: 1;
|
||||
}
|
||||
.sorting_desc:after {
|
||||
content: $icon-table-sorting-down;
|
||||
opacity: 1;
|
||||
}
|
||||
.sorting_asc_disabled:after {
|
||||
content: $icon-table-sorting-up;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.sorting_desc_disabled:after {
|
||||
content: $icon-table-sorting-down;
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
tbody {
|
||||
|
||||
// Remove top border from thead by default
|
||||
+ thead,
|
||||
+ tfoot + thead {
|
||||
> tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight rows and columns
|
||||
th,
|
||||
td {
|
||||
outline: 0;
|
||||
|
||||
// Active cell
|
||||
&.active {
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center text in empty table
|
||||
.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Collapse borders in bordered table
|
||||
&.table-bordered {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
flex: none;
|
||||
@include clearfix();
|
||||
|
||||
// Remove top border from bordered table
|
||||
.table-bordered {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Add top border if card body comes after wrapper
|
||||
+ .card-body {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Processing indicator
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
|
||||
// Header and footer
|
||||
// ------------------------------
|
||||
|
||||
// Common
|
||||
.datatable-header,
|
||||
.datatable-footer {
|
||||
padding: $dt-spacer-y $dt-spacer-x 0 $dt-spacer-x;
|
||||
@include clearfix();
|
||||
|
||||
// Remove left margin from the first item
|
||||
> div:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Remove horizontal spacing if inside card body
|
||||
.card-body & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Highlight header of footer with .*-accent class
|
||||
&-accent {
|
||||
background-color: $table-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.datatable-header {
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
// Footer
|
||||
.datatable-footer {
|
||||
border-top: $table-border-width solid $table-head-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Controls
|
||||
// ------------------------------
|
||||
|
||||
// Length menu
|
||||
.dataTables_length {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Text label
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Text, excluding select2 container
|
||||
> span:first-child {
|
||||
float: left;
|
||||
margin: $dt-controls-label-spacer-y $dt-controls-label-spacer-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply default .form-control styles to select
|
||||
select {
|
||||
height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Left display option
|
||||
.length-left & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Adjust Select2 menu
|
||||
.select2-container {
|
||||
width: auto;
|
||||
}
|
||||
.select2-choice {
|
||||
min-width: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
.dataTables_filter {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Text label
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
// Add search icon
|
||||
&:after {
|
||||
content: $icon-search-magnifier;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $font-size-sm;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-padding-x;
|
||||
margin-top: -($font-size-sm / 2);
|
||||
line-height: 1;
|
||||
opacity: 0.5;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Text spacing
|
||||
> span {
|
||||
float: left;
|
||||
margin: $dt-controls-label-spacer-y $dt-controls-label-spacer-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter input
|
||||
input {
|
||||
outline: 0;
|
||||
width: $dt-filter-width;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
padding-right: ($input-padding-x + ($font-size-sm * 1.5));
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Placeholder color
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Right display option
|
||||
.filter-right & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.dataTables_info {
|
||||
float: left;
|
||||
padding: $input-padding-y 0;
|
||||
margin-bottom: $dt-spacer-y;
|
||||
|
||||
// Right alignment
|
||||
.info-right & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination common styles
|
||||
.dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Button
|
||||
.paginate_button {
|
||||
display: inline-block;
|
||||
padding: $btn-padding-y;
|
||||
min-width: ($font-size-base * $line-height-base) + rem-calc($pagination-border-width * 2) + ($pagination-padding-y * 2);
|
||||
margin-left: 0.125rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: $pagination-color;
|
||||
outline: 0;
|
||||
border: $btn-border-width solid transparent;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// First item
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $pagination-hover-bg;
|
||||
}
|
||||
|
||||
// Current active state
|
||||
&.current {
|
||||
@include plain-hover-focus {
|
||||
color: $dt-pagination-active-color;
|
||||
background-color: $dt-pagination-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $pagination-disabled-bg;
|
||||
color: $pagination-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Simple paginate
|
||||
&.paging_simple .paginate_button {
|
||||
padding-left: $btn-padding-x;
|
||||
padding-right: $btn-padding-x;
|
||||
|
||||
// Hover state
|
||||
&:not(.disabled) {
|
||||
@include hover-focus {
|
||||
color: $dt-pagination-active-color;
|
||||
background-color: $dt-pagination-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left display option
|
||||
.paginate-left & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Simple pagination style
|
||||
.paging_simple {
|
||||
.paginate_button {
|
||||
@include hover-focus {
|
||||
color: $pagination-active-color;
|
||||
background-color: $pagination-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scrollable table
|
||||
// ------------------------------
|
||||
|
||||
.dataTables_scroll {
|
||||
clear: both;
|
||||
|
||||
// Scrolling header
|
||||
.dataTables_scrollHead {
|
||||
table {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolling body
|
||||
.dataTables_scrollBody {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
table {
|
||||
border-bottom: 0;
|
||||
|
||||
thead th[class*=sorting] {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
||||
> .dataTables_sizing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table inside cards
|
||||
// ------------------------------
|
||||
|
||||
// Inside card body
|
||||
.card-body {
|
||||
+ .dataTables_wrapper,
|
||||
+ * > .dataTables_wrapper {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
> .dataTables_wrapper {
|
||||
.datatable-footer {
|
||||
border-top: 0;
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If card header doesn't have bottom border
|
||||
.card-header:not([class*=bg-]) + .dataTables_wrapper {
|
||||
> .datatable-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered table inside card
|
||||
.card > .dataTables_wrapper .table-bordered {
|
||||
border: 0;
|
||||
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> td,
|
||||
> th {
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr:last-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive style additions
|
||||
// ------------------------------
|
||||
|
||||
// Simple responsive setup
|
||||
.datatable-scroll-lg,
|
||||
.datatable-scroll,
|
||||
.datatable-scroll-sm {
|
||||
min-height: .01%;
|
||||
}
|
||||
|
||||
// Scroller
|
||||
.datatable-scroll-wrap {
|
||||
width: 100%;
|
||||
min-height: .01%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.datatable-scroll-sm {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.datatable-scroll {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
.datatable-scroll-lg {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Common media queries
|
||||
@include media-breakpoint-down(sm) {
|
||||
.dataTables_info,
|
||||
.dataTables_paginate,
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.DTTT_container,
|
||||
.ColVis {
|
||||
float: none!important;
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.datatable-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user