tablesaw-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +22 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +69 -0
- data/Rakefile +2 -0
- data/app/assets/javascripts/tablesaw/tables-init.js +32 -0
- data/app/assets/javascripts/tablesaw/tables.btnmarkup.js +90 -0
- data/app/assets/javascripts/tablesaw/tables.columntoggle.js +196 -0
- data/app/assets/javascripts/tablesaw/tables.js +135 -0
- data/app/assets/javascripts/tablesaw/tables.minimap.js +81 -0
- data/app/assets/javascripts/tablesaw/tables.modeswitch.js +87 -0
- data/app/assets/javascripts/tablesaw/tables.sortable.js +274 -0
- data/app/assets/javascripts/tablesaw/tables.stack.js +93 -0
- data/app/assets/javascripts/tablesaw/tables.swipetoggle.js +248 -0
- data/app/assets/stylesheets/tablesaw/tables.columntoggle.css +156 -0
- data/app/assets/stylesheets/tablesaw/tables.css +27 -0
- data/app/assets/stylesheets/tablesaw/tables.minimap.css +31 -0
- data/app/assets/stylesheets/tablesaw/tables.modeswitch.css +15 -0
- data/app/assets/stylesheets/tablesaw/tables.skin.css +79 -0
- data/app/assets/stylesheets/tablesaw/tables.sortable.css +63 -0
- data/app/assets/stylesheets/tablesaw/tables.stack-default-breakpoint.css +32 -0
- data/app/assets/stylesheets/tablesaw/tables.stack.css +53 -0
- data/app/assets/stylesheets/tablesaw/tables.swipetoggle.css +3 -0
- data/app/assets/stylesheets/tablesaw/tables.toolbar.css +331 -0
- data/lib/tablesaw-rails.rb +4 -0
- data/tablesaw-rails.gemspec +22 -0
- metadata +98 -0
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
table.tablesaw {
|
|
2
|
+
empty-cells: show;
|
|
3
|
+
max-width: 100%;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
.tablesaw {
|
|
7
|
+
border-collapse: collapse;
|
|
8
|
+
width: 100%;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Structure */
|
|
12
|
+
.tablesaw {
|
|
13
|
+
border: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
}
|
|
16
|
+
.tablesaw th,
|
|
17
|
+
.tablesaw td {
|
|
18
|
+
-webkit-box-sizing: border-box;
|
|
19
|
+
-moz-box-sizing: border-box;
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
|
|
22
|
+
padding: .5em .7em;
|
|
23
|
+
}
|
|
24
|
+
.tablesaw thead tr:first-child th {
|
|
25
|
+
padding-top: .9em;
|
|
26
|
+
padding-bottom: .7em;
|
|
27
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.tablesaw-advance {
|
|
2
|
+
display: block;
|
|
3
|
+
float: right;
|
|
4
|
+
}
|
|
5
|
+
.tablesaw-advance.minimap {
|
|
6
|
+
margin-right: .4em;
|
|
7
|
+
}
|
|
8
|
+
.tablesaw-advance-dots {
|
|
9
|
+
float: left;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
list-style: none;
|
|
13
|
+
}
|
|
14
|
+
.tablesaw-advance-dots li {
|
|
15
|
+
display: table-cell;
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: .4em .2em;
|
|
18
|
+
}
|
|
19
|
+
.tablesaw-advance-dots li i {
|
|
20
|
+
width: .25em;
|
|
21
|
+
height: .25em;
|
|
22
|
+
background: #555;
|
|
23
|
+
border-radius: 100%;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
}
|
|
26
|
+
.tablesaw-advance-dots-hide {
|
|
27
|
+
opacity: .25;
|
|
28
|
+
filter: alpha(opacity=25);
|
|
29
|
+
cursor: default;
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.tablesaw-modeswitch {
|
|
2
|
+
clear: both;
|
|
3
|
+
}
|
|
4
|
+
.tablesaw-sortable-switch + .tablesaw-modeswitch {
|
|
5
|
+
border-top: 1px solid #eae8e6;
|
|
6
|
+
}
|
|
7
|
+
@media (min-width: 40em) {
|
|
8
|
+
.tablesaw-modeswitch {
|
|
9
|
+
float: left;
|
|
10
|
+
clear: none;
|
|
11
|
+
}
|
|
12
|
+
.tablesaw-sortable-switch + .tablesaw-modeswitch {
|
|
13
|
+
border-top: none;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
var-thead-background: #e2dfdc;
|
|
3
|
+
var-thead-background-to-gradient: #fff;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
table.tablesaw tbody th {
|
|
7
|
+
font-weight: bold;
|
|
8
|
+
}
|
|
9
|
+
table.tablesaw thead th,
|
|
10
|
+
table.tablesaw thead td {
|
|
11
|
+
color: #444;
|
|
12
|
+
font-size: .9em;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.tablesaw th,
|
|
16
|
+
.tablesaw td {
|
|
17
|
+
line-height: 1em;
|
|
18
|
+
text-align: left;
|
|
19
|
+
vertical-align: middle;
|
|
20
|
+
}
|
|
21
|
+
.tablesaw td,
|
|
22
|
+
.tablesaw tbody th {
|
|
23
|
+
vertical-align: middle;
|
|
24
|
+
font-size: 1.17em; /* 19px */
|
|
25
|
+
}
|
|
26
|
+
.tablesaw td .btn,
|
|
27
|
+
.tablesaw tbody th .btn {
|
|
28
|
+
margin:0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.tablesaw thead {
|
|
32
|
+
border: 1px solid #e5e5e4;
|
|
33
|
+
background: var(thead-background);
|
|
34
|
+
background-image: linear-gradient(to bottom, var(thead-background-to-gradient), var(thead-background));
|
|
35
|
+
}
|
|
36
|
+
.tablesaw thead th {
|
|
37
|
+
font-weight: 100;
|
|
38
|
+
color: #777;
|
|
39
|
+
text-transform: uppercase;
|
|
40
|
+
text-shadow: 0 1px 0 #fff;
|
|
41
|
+
text-align: left;
|
|
42
|
+
}
|
|
43
|
+
.tablesaw thead tr:first-child th {
|
|
44
|
+
font-weight: normal;
|
|
45
|
+
font-family: sans-serif;
|
|
46
|
+
border-right: 1px solid #e4e1de;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Table rows have a gray bottom stroke by default */
|
|
50
|
+
.tablesaw tbody tr {
|
|
51
|
+
border-bottom: 1px solid #dfdfdf;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.tablesaw caption {
|
|
55
|
+
text-align:left;
|
|
56
|
+
margin-bottom:1.4em;
|
|
57
|
+
opacity: .5;
|
|
58
|
+
filter: alpha(opacity=50);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Stack */
|
|
62
|
+
.tablesaw-cell-label-top {
|
|
63
|
+
text-transform: uppercase;
|
|
64
|
+
font-size: .9em;
|
|
65
|
+
font-weight: normal;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.tablesaw-cell-label {
|
|
69
|
+
font-size: .65em;
|
|
70
|
+
text-transform: uppercase;
|
|
71
|
+
color: #888;
|
|
72
|
+
font-family: sans-serif;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media (min-width: 40em) {
|
|
76
|
+
.tablesaw td {
|
|
77
|
+
line-height: 2em;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
.tablesaw-sortable,
|
|
2
|
+
.tablesaw-sortable thead,
|
|
3
|
+
.tablesaw-sortable thead tr,
|
|
4
|
+
.tablesaw-sortable thead tr th {
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
.tablesaw-sortable thead tr th {
|
|
8
|
+
padding-right: 1.6em;
|
|
9
|
+
vertical-align: top;
|
|
10
|
+
}
|
|
11
|
+
.tablesaw-sortable th.sortable-head,
|
|
12
|
+
.tablesaw-sortable tr:first-child th.sortable-head {
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
.tablesaw-sortable th.sortable-head button {
|
|
16
|
+
padding-top: .9em;
|
|
17
|
+
padding-bottom: .7em;
|
|
18
|
+
padding-left: .6em;
|
|
19
|
+
padding-right: 1.6em;
|
|
20
|
+
}
|
|
21
|
+
.tablesaw-sortable .sortable-head button {
|
|
22
|
+
min-width: 100%;
|
|
23
|
+
color: inherit;
|
|
24
|
+
background: transparent;
|
|
25
|
+
border: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
text-align: left;
|
|
28
|
+
font: inherit;
|
|
29
|
+
text-transform: inherit;
|
|
30
|
+
position: relative;
|
|
31
|
+
}
|
|
32
|
+
.tablesaw-sortable .sortable-head.sortable-ascending button:after,
|
|
33
|
+
.tablesaw-sortable .sortable-head.sortable-descending button:after {
|
|
34
|
+
width: 7px;
|
|
35
|
+
height: 10px;
|
|
36
|
+
content: "\0020";
|
|
37
|
+
position: absolute;
|
|
38
|
+
right: .5em;
|
|
39
|
+
}
|
|
40
|
+
.tablesaw-sortable .sortable-head.sortable-ascending button:after {
|
|
41
|
+
content: "↑";
|
|
42
|
+
}
|
|
43
|
+
.tablesaw-sortable .sortable-head.sortable-descending button:after {
|
|
44
|
+
content: "↓";
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.tablesaw-sortable .not-applicable:after {
|
|
48
|
+
content: "--";
|
|
49
|
+
display: block;
|
|
50
|
+
}
|
|
51
|
+
.tablesaw-sortable .not-applicable span {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.tablesaw-sortable-switch {
|
|
56
|
+
float: left;
|
|
57
|
+
width: 100%;
|
|
58
|
+
}
|
|
59
|
+
@media (min-width: 40em) {
|
|
60
|
+
.tablesaw-sortable-switch {
|
|
61
|
+
width: auto;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
@media (max-width: 39.9375em) {
|
|
2
|
+
.tablesaw-stack thead td,
|
|
3
|
+
.tablesaw-stack thead th {
|
|
4
|
+
display: none;
|
|
5
|
+
}
|
|
6
|
+
.tablesaw-stack tbody td,
|
|
7
|
+
.tablesaw-stack tbody th {
|
|
8
|
+
clear: left;
|
|
9
|
+
float: left;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
|
|
15
|
+
@media (min-width: 40em) {
|
|
16
|
+
.tablesaw-stack tr {
|
|
17
|
+
display: table-row;
|
|
18
|
+
}
|
|
19
|
+
/* Show the table header rows */
|
|
20
|
+
.tablesaw-stack td,
|
|
21
|
+
.tablesaw-stack th,
|
|
22
|
+
.tablesaw-stack thead td,
|
|
23
|
+
.tablesaw-stack thead th {
|
|
24
|
+
display: table-cell;
|
|
25
|
+
margin: 0;
|
|
26
|
+
}
|
|
27
|
+
/* Hide the labels in each cell */
|
|
28
|
+
.tablesaw-stack td .tablesaw-cell-label,
|
|
29
|
+
.tablesaw-stack th .tablesaw-cell-label {
|
|
30
|
+
display: none !important;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Styles for the table stack mode
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/* Table rows have a gray bottom stroke by default */
|
|
6
|
+
.tablesaw-stack tbody tr {
|
|
7
|
+
border-bottom: 1px solid #dfdfdf;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tablesaw-stack td .tablesaw-cell-label,
|
|
11
|
+
.tablesaw-stack th .tablesaw-cell-label {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
|
|
16
|
+
@media only all {
|
|
17
|
+
/* Show the table cells as a block level element */
|
|
18
|
+
.tablesaw-stack td,
|
|
19
|
+
.tablesaw-stack th {
|
|
20
|
+
text-align: left;
|
|
21
|
+
display: block;
|
|
22
|
+
}
|
|
23
|
+
.tablesaw-stack tr {
|
|
24
|
+
clear: both;
|
|
25
|
+
display: table-row;
|
|
26
|
+
}
|
|
27
|
+
/* Make the label elements a percentage width */
|
|
28
|
+
.tablesaw-stack td .tablesaw-cell-label,
|
|
29
|
+
.tablesaw-stack th .tablesaw-cell-label {
|
|
30
|
+
display: block;
|
|
31
|
+
padding: 0 .6em 0 0;
|
|
32
|
+
min-width: 30%;
|
|
33
|
+
display: inline-block;
|
|
34
|
+
}
|
|
35
|
+
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
|
|
36
|
+
.tablesaw-stack th .tablesaw-cell-label-top,
|
|
37
|
+
.tablesaw-stack td .tablesaw-cell-label-top {
|
|
38
|
+
display: block;
|
|
39
|
+
padding: .4em 0;
|
|
40
|
+
margin: .4em 0;
|
|
41
|
+
}
|
|
42
|
+
.tablesaw-cell-label {
|
|
43
|
+
display: block;
|
|
44
|
+
}
|
|
45
|
+
/* Avoid double strokes when stacked */
|
|
46
|
+
.tablesaw-stack tbody th.group {
|
|
47
|
+
margin-top:-1px;
|
|
48
|
+
}
|
|
49
|
+
/* Avoid double strokes when stacked */
|
|
50
|
+
.tablesaw-stack th.group b.tablesaw-cell-label {
|
|
51
|
+
display: none !important;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,331 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Button Markup
|
|
3
|
+
* Custom-styled native inputs/buttons.
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) 2012 Filament Group, Inc.
|
|
6
|
+
* Licensed under the MIT, GPL licenses.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
var-button-text: #1c95d4;
|
|
11
|
+
var-button-selected-background: #29abe2;
|
|
12
|
+
var-button-checkbox-selected-background: #34a3de;
|
|
13
|
+
var-button-selected-shadow: rgba(0,75,115,.45);
|
|
14
|
+
var-button-interaction-text: #208de3;
|
|
15
|
+
var-button-interaction-shadow: #4faeef;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.tablesaw-enhanced .tablesaw-bar .btn {
|
|
19
|
+
border: 1px solid #ccc;
|
|
20
|
+
background: none;
|
|
21
|
+
background-color: #fafafa;
|
|
22
|
+
box-shadow: 0 1px 0 rgba(255,255,255,1);
|
|
23
|
+
color: #4a4a4a;
|
|
24
|
+
clear: both;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
display: block;
|
|
27
|
+
font: bold 20px/1 sans-serif;
|
|
28
|
+
margin: 0;
|
|
29
|
+
padding: .5em .85em .4em .85em;
|
|
30
|
+
position: relative;
|
|
31
|
+
text-align: center;
|
|
32
|
+
text-decoration: none;
|
|
33
|
+
text-transform: capitalize;
|
|
34
|
+
text-shadow: 0 1px 0 #fff;
|
|
35
|
+
width: 100%;
|
|
36
|
+
|
|
37
|
+
/* Theming */
|
|
38
|
+
background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
|
|
39
|
+
|
|
40
|
+
-webkit-appearance: none !important;
|
|
41
|
+
-moz-appearance: none !important;
|
|
42
|
+
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
|
|
45
|
+
-webkit-font-smoothing: antialiased;
|
|
46
|
+
|
|
47
|
+
border-radius: .25em;
|
|
48
|
+
}
|
|
49
|
+
.tablesaw-enhanced .tablesaw-bar a.btn {
|
|
50
|
+
color: var(button-text);
|
|
51
|
+
}
|
|
52
|
+
.tablesaw-enhanced .tablesaw-bar .btn:hover {
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Default radio/checkbox styling horizonal controlgroups. */
|
|
57
|
+
.tablesaw-enhanced .tablesaw-bar .btn:active {
|
|
58
|
+
background-color: #ddd;
|
|
59
|
+
background-image: linear-gradient( top, rgba( 100,100,100,.35 ) 0%, rgba( 255,255,255,0 ) 70% );
|
|
60
|
+
}
|
|
61
|
+
.tablesaw-enhanced .tablesaw-bar .btn:hover,
|
|
62
|
+
.tablesaw-enhanced .tablesaw-bar .btn:focus {
|
|
63
|
+
color: var(button-interaction-text);
|
|
64
|
+
background-color: #fff;
|
|
65
|
+
outline: none;
|
|
66
|
+
}
|
|
67
|
+
.tablesaw-bar .btn:focus {
|
|
68
|
+
box-shadow: 0 0 .35em var(button-interaction-shadow) !important;
|
|
69
|
+
}
|
|
70
|
+
.ie-lte8 .tablesaw-bar .btn:hover,
|
|
71
|
+
.ie-lte8 .tablesaw-bar .btn:focus {
|
|
72
|
+
color: var(button-interaction-text);
|
|
73
|
+
background-color: #fff;
|
|
74
|
+
border-color: #aaa;
|
|
75
|
+
outline: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.tablesaw-bar .btn-select select {
|
|
79
|
+
background: none;
|
|
80
|
+
border: none;
|
|
81
|
+
display: block;
|
|
82
|
+
position: absolute;
|
|
83
|
+
font-weight: inherit;
|
|
84
|
+
left: 0;
|
|
85
|
+
top: 0;
|
|
86
|
+
margin: 0;
|
|
87
|
+
width: 100%;
|
|
88
|
+
height: 100%;
|
|
89
|
+
z-index: 2;
|
|
90
|
+
min-height: 1em;
|
|
91
|
+
}
|
|
92
|
+
.tablesaw-bar .btn-select select {
|
|
93
|
+
opacity: 0;
|
|
94
|
+
filter: alpha(opacity=0);
|
|
95
|
+
display:inline-block;
|
|
96
|
+
color: transparent;
|
|
97
|
+
}
|
|
98
|
+
.tablesaw-bar .btn select option {
|
|
99
|
+
background: #fff;
|
|
100
|
+
color: #000;
|
|
101
|
+
font-family: sans-serif;
|
|
102
|
+
}
|
|
103
|
+
.tablesaw-enhanced .tablesaw-bar .btn.btn-select {
|
|
104
|
+
color:#4d4d4d;
|
|
105
|
+
padding-right: 2.5em;
|
|
106
|
+
min-width: 7.25em;
|
|
107
|
+
text-align: left;
|
|
108
|
+
text-indent: 0;
|
|
109
|
+
}
|
|
110
|
+
.ie-lte8 .tablesaw-bar .btn-select {
|
|
111
|
+
min-width: 6.1em;
|
|
112
|
+
}
|
|
113
|
+
.tablesaw-bar .btn.btn-small,
|
|
114
|
+
.tablesaw-bar .btn.btn-micro {
|
|
115
|
+
display: inline-block;
|
|
116
|
+
width: auto;
|
|
117
|
+
height: auto;
|
|
118
|
+
position: relative;
|
|
119
|
+
top: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.tablesaw-bar .btn.btn-small {
|
|
123
|
+
font-size: 1.0625em;
|
|
124
|
+
line-height: 19px;
|
|
125
|
+
padding: .3em 1em .3em 1em;
|
|
126
|
+
}
|
|
127
|
+
.tablesaw-bar .btn.btn-micro {
|
|
128
|
+
font-size: .8125em;
|
|
129
|
+
padding: .4em .7em .25em .7em;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.tablesaw-enhanced .tablesaw-bar .btn-select {
|
|
133
|
+
text-align: left;
|
|
134
|
+
}
|
|
135
|
+
.tablesaw-bar .btn-select:after {
|
|
136
|
+
background: #e5e5e5;
|
|
137
|
+
background: rgba(0,0,0,.1);
|
|
138
|
+
box-shadow: 0 2px 2px rgba(255,255,255,.25);
|
|
139
|
+
content: " ";
|
|
140
|
+
display: block;
|
|
141
|
+
position: absolute;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.tablesaw-bar .btn-select.btn-small,
|
|
145
|
+
.tablesaw-bar .btn-select.btn-micro {
|
|
146
|
+
padding-right: 1.5em;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.tablesaw-bar .btn-select:after {
|
|
150
|
+
background: none;
|
|
151
|
+
background-repeat: no-repeat;
|
|
152
|
+
background-position: .25em .45em;
|
|
153
|
+
content: "\25bc";
|
|
154
|
+
font-size: .55em;
|
|
155
|
+
padding-top: 1.2em;
|
|
156
|
+
padding-left: 1em;
|
|
157
|
+
left:auto;
|
|
158
|
+
right: 0;
|
|
159
|
+
margin: 0;
|
|
160
|
+
top: 0;
|
|
161
|
+
bottom: 0;
|
|
162
|
+
width: 1.8em;
|
|
163
|
+
}
|
|
164
|
+
.tablesaw-bar .btn-select.btn-small:after,
|
|
165
|
+
.tablesaw-bar .btn-select.btn-micro:after {
|
|
166
|
+
width: 1.2em;
|
|
167
|
+
font-size: .5em;
|
|
168
|
+
padding-top: 1em;
|
|
169
|
+
padding-right: .5em;
|
|
170
|
+
line-height: 1.65;
|
|
171
|
+
background: none;
|
|
172
|
+
box-shadow: none;
|
|
173
|
+
border-left-width: 0;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Column navigation buttons for swipe and columntoggle tables */
|
|
177
|
+
.tablesaw-bar .tablesaw-advance {
|
|
178
|
+
position: relative;
|
|
179
|
+
top: -2.6em;
|
|
180
|
+
}
|
|
181
|
+
.tablesaw-advance .btn {
|
|
182
|
+
-webkit-appearance: none;
|
|
183
|
+
-moz-appearance: none;
|
|
184
|
+
box-sizing: border-box;
|
|
185
|
+
text-shadow: 0 1px 0 #fff;
|
|
186
|
+
border-radius: .25em;
|
|
187
|
+
}
|
|
188
|
+
.tablesaw-advance .btn.btn-micro {
|
|
189
|
+
font-size: .8125em;
|
|
190
|
+
padding: .3em .7em .25em .7em;
|
|
191
|
+
}
|
|
192
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn {
|
|
193
|
+
display: inline-block;
|
|
194
|
+
overflow: hidden;
|
|
195
|
+
width: 1.8em;
|
|
196
|
+
height: 1.8em;
|
|
197
|
+
background-position: 50% 50%;
|
|
198
|
+
margin-left: .5em;
|
|
199
|
+
position: relative;
|
|
200
|
+
}
|
|
201
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
|
|
202
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before,
|
|
203
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before,
|
|
204
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
|
|
205
|
+
content: "\0020";
|
|
206
|
+
overflow: hidden;
|
|
207
|
+
width: 0;
|
|
208
|
+
height: 0;
|
|
209
|
+
position: absolute;
|
|
210
|
+
}
|
|
211
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before {
|
|
212
|
+
left: .5em;
|
|
213
|
+
top: .65em;
|
|
214
|
+
border-left: 5px solid transparent;
|
|
215
|
+
border-right: 5px solid transparent;
|
|
216
|
+
border-top: 5px solid #808080;
|
|
217
|
+
}
|
|
218
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
|
|
219
|
+
left: .5em;
|
|
220
|
+
top: .65em;
|
|
221
|
+
border-left: 5px solid transparent;
|
|
222
|
+
border-right: 5px solid transparent;
|
|
223
|
+
border-bottom: 5px solid #808080;
|
|
224
|
+
}
|
|
225
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
|
|
226
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
|
|
227
|
+
top: .45em;
|
|
228
|
+
border-top: 5px solid transparent;
|
|
229
|
+
border-bottom: 5px solid transparent;
|
|
230
|
+
}
|
|
231
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before {
|
|
232
|
+
left: .6em;
|
|
233
|
+
border-right: 5px solid #808080;
|
|
234
|
+
}
|
|
235
|
+
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
|
|
236
|
+
left: .7em;
|
|
237
|
+
border-left: 5px solid #808080;
|
|
238
|
+
}
|
|
239
|
+
.tablesaw-advance a.tablesaw-nav-btn.disabled {
|
|
240
|
+
opacity: .25;
|
|
241
|
+
filter: alpha(opacity=25);
|
|
242
|
+
cursor: default;
|
|
243
|
+
pointer-events: none;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Table Toolbar */
|
|
247
|
+
.tablesaw-bar {
|
|
248
|
+
clear: both;
|
|
249
|
+
font-family: sans-serif;
|
|
250
|
+
}
|
|
251
|
+
.tablesaw-bar.mode-swipe,
|
|
252
|
+
.tablesaw-bar.mode-columntoggle {
|
|
253
|
+
margin-top: -2em;
|
|
254
|
+
position: relative;
|
|
255
|
+
top: 2em;
|
|
256
|
+
}
|
|
257
|
+
.tablesaw-toolbar {
|
|
258
|
+
font-size: .875em;
|
|
259
|
+
}
|
|
260
|
+
.tablesaw-toolbar label {
|
|
261
|
+
padding: .5em 0;
|
|
262
|
+
clear: both;
|
|
263
|
+
display: block;
|
|
264
|
+
color: #888;
|
|
265
|
+
margin-right: .5em;
|
|
266
|
+
text-transform:uppercase;
|
|
267
|
+
}
|
|
268
|
+
.tablesaw-bar .btn,
|
|
269
|
+
.tablesaw-enhanced .tablesaw-bar .btn {
|
|
270
|
+
margin-top: .5em;
|
|
271
|
+
margin-bottom: .5em;
|
|
272
|
+
}
|
|
273
|
+
.tablesaw-bar .btn-select,
|
|
274
|
+
.tablesaw-enhanced .tablesaw-bar .btn-select {
|
|
275
|
+
margin-bottom: 0;
|
|
276
|
+
}
|
|
277
|
+
.tablesaw-bar .tablesaw-toolbar .btn {
|
|
278
|
+
margin-left: .4em;
|
|
279
|
+
margin-top: 0;
|
|
280
|
+
text-transform:uppercase;
|
|
281
|
+
border: none;
|
|
282
|
+
box-shadow: none;
|
|
283
|
+
background: transparent;
|
|
284
|
+
font-family: sans-serif;
|
|
285
|
+
font-size: 1em;
|
|
286
|
+
padding-left: .3em;
|
|
287
|
+
}
|
|
288
|
+
.tablesaw-bar .tablesaw-toolbar .btn-select {
|
|
289
|
+
min-width: 0;
|
|
290
|
+
}
|
|
291
|
+
.tablesaw-bar .tablesaw-toolbar .btn-select:after {
|
|
292
|
+
padding-top: .9em;
|
|
293
|
+
}
|
|
294
|
+
.tablesaw-bar .tablesaw-toolbar select {
|
|
295
|
+
color: #888;
|
|
296
|
+
text-transform: none;
|
|
297
|
+
background: transparent;
|
|
298
|
+
}
|
|
299
|
+
.tablesaw-toolbar ~ table {
|
|
300
|
+
clear: both;
|
|
301
|
+
}
|
|
302
|
+
.tablesaw-toolbar .a11y-sm {
|
|
303
|
+
clip: rect(0 0 0 0);
|
|
304
|
+
height: 1px;
|
|
305
|
+
overflow: hidden;
|
|
306
|
+
position: absolute;
|
|
307
|
+
width: 1px;
|
|
308
|
+
}
|
|
309
|
+
@media (min-width: 24em) {
|
|
310
|
+
.tablesaw-toolbar .a11y-sm {
|
|
311
|
+
clip: none;
|
|
312
|
+
height: auto;
|
|
313
|
+
width: auto;
|
|
314
|
+
position: static;
|
|
315
|
+
overflow: visible;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
@media (min-width: 40em) {
|
|
319
|
+
.tablesaw-bar.mode-swipe,
|
|
320
|
+
.tablesaw-bar.mode-columntoggle {
|
|
321
|
+
margin-top: 0;
|
|
322
|
+
top: 0;
|
|
323
|
+
}
|
|
324
|
+
.tablesaw-bar .tablesaw-advance {
|
|
325
|
+
position: static;
|
|
326
|
+
}
|
|
327
|
+
.tablesaw-bar {
|
|
328
|
+
margin-top: 0;
|
|
329
|
+
position: static;
|
|
330
|
+
}
|
|
331
|
+
}
|