first commit

This commit is contained in:
2019-05-25 23:11:05 -04:00
commit 16f48376bc
6139 changed files with 990356 additions and 0 deletions
@@ -0,0 +1,133 @@
/* ------------------------------------------------------------------------------
*
* # Autofill extension
*
* Spreadsheets such as Excel and Google Docs have a very handy data duplication
* option of an auto fill tool
*
* Version: 1.1
* Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */
// Handle
.dt-autofill-handle {
position: absolute;
height: 8px;
width: 8px;
z-index: 102;
border: 1px solid @brand-primary;
background: @brand-primary;
}
// Select frame
.dt-autofill-select {
position: absolute;
z-index: 1001;
background-color: @brand-primary;
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, fade(#fff, 75%) 5px, fade(#fff, 75%) 10px);
// Vertical lines
&.top,
&.bottom {
height: 1px;
}
// Horizontal lines
&.left,
&.right {
width: 1px;
}
}
// Confirmation dialog
.dt-autofill-list {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
margin-left: -250px;
background-color: @modal-content-bg;
border-radius: @border-radius-base;
border: 1px solid @modal-content-border-color;
z-index: @zindex-modal;
padding: @list-spacing 0;
// List
ul {
display: table;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
// List items
li {
display: table-row;
// Highlight row on hover
&:hover {
background-color: @dropdown-link-hover-bg;
}
}
}
// Text label
.dt-autofill-question {
display: table-cell;
padding: @padding-base-vertical @content-padding-base;
// Text label input
input[type=number] {
padding: 6px;
width: 30px;
margin: -2px 0;
}
}
// Confirm button
.dt-autofill-button {
display: table-cell;
padding: @padding-base-vertical @content-padding-base;
text-align: right;
// Button itself
.btn {
padding: 3px;
background-color: @brand-primary;
color: #fff;
font-size: 0;
// Checkmark icon
&:after {
content: '\e9c3';
font-family: 'Icomoon';
display: block;
font-size: @icon-font-size;
width: @icon-font-size;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Mute button on hover
&:hover {
.opacity(0.85);
}
}
}
}
// Overlay
.dt-autofill-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: @modal-backdrop-bg;
z-index: @zindex-modal-background;
.opacity(@modal-backdrop-opacity);
}
@@ -0,0 +1,230 @@
/* ------------------------------------------------------------------------------
*
* # 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
*
* Version: 1.2
* Latest update: Jul 5, 2016
*
* ---------------------------------------------------------------------------- */
// Buttons base
// ------------------------------
// Full width buttons
.dt-buttons-full {
// Container
.dt-buttons {
text-align: center;
float: none;
display: block;
margin: 0;
border-bottom: 1px solid @table-border-color;
padding-top: @line-height-computed;
padding-bottom: (@line-height-computed / 2);
background-color: @table-bg-accent;
> .btn {
margin-bottom: (@line-height-computed / 2);
float: none;
}
}
}
// Buttons. Default alignment is right
.dt-buttons {
float: right;
display: inline-block;
margin: 0 0 @line-height-computed @content-padding-large;
// Left display option
.dt-buttons-left & {
float: left;
}
// Inner buttons
> .dt-button {
display: inline-block;
}
// Default buttons
> .btn {
border-radius: 0;
// First button
&:first-child {
.border-left-radius(@border-radius-base);
}
// Last button
&:last-child {
.border-right-radius(@border-radius-base);
}
// Add 1px spacing between buttons
& + .btn {
margin-left: -1px;
}
}
// Mobile view
@media screen and (max-width: 767px) {
float: none;
text-align: center;
display: block;
.btn {
float: none;
}
}
}
// Dialog
.dt-button-info {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
margin-top: -100px;
margin-left: -200px;
padding: @modal-inner-padding;
background-color: #fff;
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
text-align: center;
z-index: @zindex-modal;
.box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
// Heading
h2 {
margin-top: 0;
line-height: @modal-title-line-height;
font-size: @font-size-h5;
}
}
// Overlay
.dt-button-background {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
z-index: @zindex-dropdown - 1;
.opacity(0.25);
}
// Button collection
// ------------------------------
.dt-button-collection {
position: absolute;
top: 0;
left: 0;
background-color: @dropdown-bg;
display: block;
z-index: @zindex-dropdown;
padding: @list-spacing 0;
overflow: hidden;
min-width: 180px;
border-radius: @border-radius-base;
-webkit-column-gap: 2px;
-moz-column-gap: 2px;
-ms-column-gap: 2px;
-o-column-gap: 2px;
column-gap: 2px;
.box-shadow(@shadow-depth2);
// Inner buttons
> .dt-button {
padding: (@padding-base-vertical + 1) @content-padding-base;
color: @dropdown-link-color;
display: block;
outline: 0;
// Add 1px top spacing between buttons
+ .dt-button {
margin-top: 1px;
}
// Hover state
&: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: -75px;
padding-left: (@list-spacing - 2);
padding-right: (@list-spacing - 2);
// Two columns
&.two-column {
margin-left: -150px;
}
// Three columns
&.three-column {
margin-left: -225px;
}
// Four columns
&.four-column {
margin-left: -300px;
}
}
// Inner content
> * {
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
// Two columns
&.two-column {
width: 300px;
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
// Three columns
&.three-column {
width: 450px;
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3;
}
// Four columns
&.four-column {
width: 600px;
-webkit-column-count: 4;
-moz-column-count: 4;
-ms-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
}
@@ -0,0 +1,31 @@
/* ------------------------------------------------------------------------------
*
* # Columns reorder
*
* Easily modify the column order of a table through drop-and-drag of column headers
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Highlight cloned header
.DTCR_clonedTable {
background-color: fade(#fff, 80%);
z-index: 202;
cursor: move;
// Mute background and add border
th,
td {
border: 1px solid @table-border-color!important;
}
}
// Add colored pointer
.DTCR_pointer {
width: 1px;
background-color: @brand-primary;
z-index: 201;
}
@@ -0,0 +1,64 @@
/* ------------------------------------------------------------------------------
*
* # Fixed columns
*
* Extension that "freezes" in place the left most columns in a scrolling DataTable
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Block out what is behind the fixed column's header and footer
.DTFC_Cloned {
background-color: #fff;
border-bottom: 0;
// Add left/right border
&.table {
// In left column
.DTFC_LeftWrapper & {
border-right: 1px solid @table-border-color;
}
// In right column
.DTFC_RightWrapper & {
border-left: 1px 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;
}
// Hide cloned columns on mobile
@media (max-width: @screen-xs-max) {
.DTFC_LeftWrapper,
.DTFC_RightWrapper {
display: none;
}
}
@@ -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.
*
* Version: 1.0
* Latest update: Nov 9, 2015
*
* ---------------------------------------------------------------------------- */
// Headers
.fixedHeader-floating,
.fixedHeader-locked {
background-color: #fff;
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
@media(max-width: @screen-xs-max) {
display: none;
}
}
// Locked header
.fixedHeader-locked {
position: absolute;
// Hide on mobile
@media(max-width: @screen-xs-max) {
display: none;
}
}
// Hide headers on print
@media print {
table.fixedHeader-floating {
display: none;
}
}
@@ -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.
*
* Version: 1.0
* Latest update: Nov 10, 2015
*
* ---------------------------------------------------------------------------- */
// Focus colors
.dataTable {
th,
td {
// Default
&.focus {
outline: 2px solid @brand-primary;
outline-offset: -1px;
}
// 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;
}
}
}
@@ -0,0 +1,151 @@
/* ------------------------------------------------------------------------------
*
* # Responsive extension
*
* Optimise the table's layout for different screen sizes through the dynamic
* insertion and removal of columns from the table
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Layouts
// ------------------------------
// Inline details row
.dtr-inline {
&.collapsed tbody {
tr {
td,
th {
&:before {
margin-right: 10px;
}
&: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: '\e9e4';
font-family: 'icomoon';
display: inline-block;
font-size: @icon-font-size;
width: @icon-font-size;
line-height: 1;
position: relative;
top: -1px;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.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: '\e9e7';
}
.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: 500;
padding-right: 40px;
}
.dtr-data {
display: table-cell;
padding: 8px 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;
}
}
}
}
}
// Responsive stuff
// ------------------------------
// Make dropdown menus full width
@media (max-width: @screen-xs) {
.dataTable tr td.child > ul > li {
.dropdown,
.dropup,
.btn-group {
position: static;
}
.dropdown-menu {
left: 0;
right: 0;
border-radius: 0;
border-width: 1px 0;
}
}
}
@@ -0,0 +1,45 @@
/* ------------------------------------------------------------------------------
*
* # Row Reorder extension
*
* RowReorder adds the ability for rows in a DataTable to be reordered through
* user interaction with the table.
*
* Version: 1.0
* Latest update: Nov 10, 2015
*
* ---------------------------------------------------------------------------- */
// Base
// ------------------------------
// The movable row
.dt-rowReorder-float {
position: absolute!important;
table-layout: static;
outline: 1px dashed @color-grey-500;
outline-offset: -1px;
background-color: #fff;
z-index: @zindex-navbar-fixed;
cursor: move;
.opacity(0.9);
}
// The target row
.dt-rowReorder-moving {
outline: 1px solid @color-grey-500;
outline-offset: -1px;
}
// Hide overflow from <body> tag when moving
.dt-rowReorder-noOverflow {
overflow-x: hidden;
}
// Reorder cell
.dataTable td.reorder {
text-align: center;
cursor: move;
}
@@ -0,0 +1,51 @@
/* ------------------------------------------------------------------------------
*
* # Datatables Scroller
*
* Drawing the rows required for the current display only, for fast operation
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
.DTS {
// Prevent word wrap
tbody {
th,
td {
white-space: nowrap;
}
}
// Loading text
.DTS_Loading {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 20px;
margin-top: -(@line-height-computed);
margin-left: -100px;
z-index: 1;
border: 1px solid #999;
padding: @content-padding-large 0;
text-align: center;
background-color: fade(#fff, 50%);
}
// Scroller areas
.dataTables_scrollHead,
.dataTables_scrollFoot {
background-color: #fff;
}
.dataTables_scrollBody {
z-index: 2;
}
}
@@ -0,0 +1,89 @@
/* ------------------------------------------------------------------------------
*
* # Select extension
*
* Spreadsheets such as Excel and Google Docs have a very handy data duplication
* option of an auto fill tool
*
* Version: 1.1
* Latest update: Dec 9, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
// Highlight selected row
.dataTable {
tbody > tr {
&.selected,
> .selected {
background-color: @color-success-50;
}
}
}
// Item select
.dataTables_wrapper {
.select-info,
.select-item {
margin-left: @content-padding-small;
// On mobile
@media (max-width: @screen-xs-max) {
margin-left: 0;
display: block;
}
}
}
// Checkbox
// ------------------------------
.dataTable tbody {
// Chackbox base
.select-checkbox {
position: relative;
// Checkbox icon base
&:before,
&:after {
display: inline-block;
color: @color-slate-700;
position: absolute;
top: 50%;
left: 50%;
cursor: pointer;
}
// Box
&:before {
content: '';
background-color: #fff;
width: @checkbox-size;
height: @checkbox-size;
margin-top: -(@checkbox-size / 2);
margin-left: -(@checkbox-size / 2);
border: @checkbox-border-width solid @color-slate-500;
border-radius: @border-radius-small;
}
}
// Checkmark icon
.selected .select-checkbox {
&:after {
content: "\e600";
font-family: 'icomoon';
font-size: @icon-font-size;
line-height: 1;
margin-top: -((@checkbox-size - @checkbox-border-width) / 2);
margin-left: -((@checkbox-size - @checkbox-border-width) / 2);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
@@ -0,0 +1,599 @@
/* ------------------------------------------------------------------------------
*
* # Datatables library
*
* Add advanced interaction controls to any HTML table
*
* Version: 1.2
* Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */
// Base
// ------------------------------
// Table container
.dataTable {
margin: 0;
max-width: none;
border-collapse: separate;
// 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: (@content-padding-large * 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: 'icomoon';
position: absolute;
top: 50%;
right: @content-padding-large;
font-size: @font-size-small;
margin-top: -(@font-size-small / 2);
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Icons
.sorting {
&:before {
content: '\e9c1';
margin-top: -2px;
color: @text-muted;
}
&:after {
content: '\e9c2';
margin-top: -10px;
color: @text-muted;
}
}
.sorting_asc:after {
content: '\e9c2';
}
.sorting_desc:after {
content: '\e9c1';
}
.sorting_asc_disabled:after {
content: '\e9c2';
color: #ccc;
}
.sorting_desc_disabled:after {
content: '\e9c1';
color: #ccc;
}
}
// Body
tbody {
// Remove top border in first row
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
// Remove top border from thead by default
+ thead,
+ tfoot + thead {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
}
// Center text in empty table
.dataTables_empty {
text-align: center;
}
// Collapse borders in bordered table
&.table-bordered {
border-collapse: collapse;
}
// If table has .media container, remove width from .media-body
.media-body {
width: auto;
}
}
// Wrapper
.dataTables_wrapper {
position: relative;
clear: both;
// Clearfix
&:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
// Remove top border from bordered table
.table-bordered {
border-top: 0;
}
// Add top border if panel body comes after wrapper
+ .panel-body {
border-top: 1px 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: @line-height-computed @content-padding-large 0 @content-padding-large;
// Clearing floats
&:after {
content: "";
display: table;
clear: both;
}
// Remove left margin from the first item
> div:first-child {
margin-left: 0;
}
// Remove horizontal spacing if inside panel body
.panel-body & {
padding-left: 0;
padding-right: 0;
}
// Highlight header of footer with .*-accent class
&-accent {
background-color: @table-bg-accent;
}
}
// Header
.datatable-header {
border-bottom: 1px solid @table-border-color;
}
// Footer
.datatable-footer {
border-top: 1px solid @table-border-highlight;
}
// Controls
// ------------------------------
// Length menu
.dataTables_length {
float: right;
display: inline-block;
margin: 0 0 @line-height-computed @content-padding-large;
// Text label
> label {
margin-bottom: 0;
// Text, excluding select2 container
> span:first-child {
float: left;
margin: (@padding-base-vertical + 1) @content-padding-base;
margin-left: 0;
}
}
// Apply default .form-control styles to select
select {
height: @input-height-base;
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @input-bg;
border: 1px solid @input-border;
outline: 0;
}
// Left display option
.length-left & {
float: left;
}
// Adjust Select2 menu
.select2-container {
width: auto;
}
.select2-choice {
min-width: 60px;
}
}
// Filter
.dataTables_filter {
position: relative;
display: block;
float: left;
margin: 0 0 @line-height-computed @content-padding-large;
// Text label
> label {
margin-bottom: 0;
position: relative;
// Add search icon
&:after {
content: "\e98e";
font-family: 'icomoon';
font-size: @font-size-small;
display: inline-block;
position: absolute;
top: 50%;
right: @padding-base-horizontal;
margin-top: -(@font-size-small / 2);
color: @text-muted;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Text spacing
> span {
float: left;
margin: (@padding-base-vertical + 1) @content-padding-base;
margin-left: 0;
}
}
// Filter input
input {
outline: 0;
width: 200px;
height: @input-height-base;
padding: @padding-base-vertical @padding-base-horizontal;
padding-right: ((@padding-base-horizontal * 2) + @font-size-small);
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
border: 1px solid @input-border;
border-radius: @input-border-radius;
}
// Right display option
.filter-right & {
float: right;
}
}
// Info
.dataTables_info {
float: left;
padding: (@padding-base-vertical + 1) 0;
margin-bottom: @line-height-computed;
.info-right & {
float: right;
}
}
// Pagination common styles
.dataTables_paginate {
float: right;
text-align: right;
margin: 0 0 @line-height-computed @content-padding-large;
// Button
.paginate_button {
display: inline-block;
padding: @padding-base-vertical;
min-width: @input-height-base;
margin-left: 2px;
text-align: center;
text-decoration: none;
cursor: pointer;
color: @text-color;
border: 1px solid transparent;
border-radius: @border-radius-base;
// First item
&:first-child {
margin-left: 0;
}
// Hover state
&:hover,
&:focus {
background-color: @pagination-hover-bg;
}
// Current active state
&.current {
&,
&:hover,
&:focus {
color: #fff;
background-color: @color-slate-700;
}
}
// Disabled state
&.disabled {
&,
&:hover,
&:focus {
cursor: default;
background-color: @pagination-disabled-bg;
color: @pagination-disabled-color;
}
}
}
// Simple paginate
&.paging_simple .paginate_button {
padding-left: @padding-base-horizontal;
padding-right: @padding-base-horizontal;
}
// Left display option
.paginate-left & {
float: left;
}
}
// Simple pagination style
.paging_simple {
.paginate_button {
&:hover,
&:focus {
color: #fff;
background-color: @color-slate-700;
}
}
}
// 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 panels
// ------------------------------
// Inside panel body
.panel-body {
+ .dataTables_wrapper,
+ * > .dataTables_wrapper {
border-top: 1px solid @panel-default-border;
}
> .dataTables_wrapper {
.datatable-footer {
border-top: 0;
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
margin-bottom: 0;
}
}
}
}
// Inside flat panel
.panel-flat > .panel-heading + .dataTables_wrapper {
> .datatable-header {
padding-top: 0;
}
}
// Bordered table inside panel
.panel > .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;
}
@media (max-width: @screen-xs-max) {
.datatable-scroll-sm {
width: 100%;
overflow-x: scroll;
th,
td {
white-space: nowrap;
}
}
}
@media (max-width: @screen-sm-max) {
.datatable-scroll {
width: 100%;
overflow-x: scroll;
th,
td {
white-space: nowrap;
}
}
}
@media (max-width: @screen-md-max) {
.datatable-scroll-lg {
width: 100%;
overflow-x: scroll;
th,
td {
white-space: nowrap;
}
}
}
// Common media queries
@media (max-width: @screen-xs-max) {
.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;
}
}
@@ -0,0 +1,123 @@
/* ------------------------------------------------------------------------------
*
* # Footable
*
* jQuery plugin that aims to make HTML tables on smaller devices look awesome.
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Basic styling
// ------------------------------
.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-lighter;
border-top: 0;
}
// Add expand icon
.footable-toggle:before {
content: "\e9e4";
display: inline-block;
font-family: 'icomoon';
font-size: @icon-font-size;
vertical-align: middle;
position: relative;
top: -1px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
// Add collapse icon
&.footable-detail-show .footable-toggle:before {
content: "\e9e7";
}
}
}
}
}
// Row styling
// ------------------------------
.footable-row-detail-inner {
display: table;
table-layout: fixed;
width: 100%;
}
.footable-row-detail-row {
display: table-row;
}
.footable-row-detail-group {
display: block;
font-weight: 700;
margin-top: @line-height-computed;
margin-bottom: @padding-base-vertical;
&:first-child {
margin-top: @padding-base-vertical;
}
}
.footable-row-detail-name {
display: table-cell;
padding-right: 40px;
font-weight: 500;
}
.footable-row-detail-value {
display: table-cell;
padding: @padding-base-vertical 0;
}
// Make dropdown menus full width
@media (max-width: @screen-xs) {
.footable-row-detail-inner {
position: relative;
}
.footable-row-detail {
.dropdown,
.dropup,
.btn-group {
position: static;
}
.dropdown-menu {
left: 0;
right: 0;
}
}
}
File diff suppressed because it is too large Load Diff