mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-18 05:35:51 +02:00
Continued re-styling
This commit is contained in:
parent
d3b85cbdb0
commit
7bfcf89aa8
15
dist/starter.html
vendored
15
dist/starter.html
vendored
|
@ -450,21 +450,14 @@
|
||||||
<script data-config>
|
<script data-config>
|
||||||
var filtersConfig = {
|
var filtersConfig = {
|
||||||
base_path: 'tablefilter/',
|
base_path: 'tablefilter/',
|
||||||
// col_0: 'checklist',
|
|
||||||
col_1: 'select',
|
col_1: 'select',
|
||||||
col_2: 'select',
|
col_2: 'select',
|
||||||
// col_3: 'multiple',
|
col_3: 'select',
|
||||||
alternate_rows: true,
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
btn_reset: true,
|
btn_reset: true,
|
||||||
loader: true,
|
loader: true,
|
||||||
status_bar: true/*,
|
status_bar: true,
|
||||||
popup_filters: true,
|
|
||||||
single_search_filter: true,
|
|
||||||
enable_icons: false,
|
|
||||||
btn: true,
|
|
||||||
btn_text: 'Go',
|
|
||||||
|
|
||||||
|
|
||||||
mark_active_columns: true,
|
mark_active_columns: true,
|
||||||
col_number_format: [
|
col_number_format: [
|
||||||
null, null, 'US',
|
null, null, 'US',
|
||||||
|
@ -488,7 +481,7 @@
|
||||||
'70px', '70px', '70px',
|
'70px', '70px', '70px',
|
||||||
'70px', '60px', '60px'
|
'70px', '60px', '60px'
|
||||||
],
|
],
|
||||||
extensions:[{ name: 'sort' }]*/
|
extensions:[{ name: 'sort' }]
|
||||||
};
|
};
|
||||||
|
|
||||||
var tf = new TableFilter('demo', filtersConfig);
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
|
|
69
dist/tablefilter/style/tablefilter.css
vendored
69
dist/tablefilter/style/tablefilter.css
vendored
|
@ -7,7 +7,7 @@
|
||||||
* Filtered column marker default style
|
* Filtered column marker default style
|
||||||
*/
|
*/
|
||||||
.activeHeader {
|
.activeHeader {
|
||||||
background: #004080 !important;
|
background-color: #66afe9 !important;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -166,6 +166,7 @@ select[multiple="multiple"].ezSelectEditor {
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
border-left: 1px solid #ccc;
|
border-left: 1px solid #ccc;
|
||||||
border-right: 1px solid #f4f4f4;
|
border-right: 1px solid #f4f4f4;
|
||||||
|
padding: 0.2em !important;
|
||||||
}
|
}
|
||||||
.btnflt {
|
.btnflt {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -192,7 +193,7 @@ select[multiple="multiple"].ezSelectEditor {
|
||||||
display: block;
|
display: block;
|
||||||
color: #444;
|
color: #444;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #f4f4f4;
|
border: 1px inset #f4f4f4;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0 0 0.2em;
|
padding: 0 0 0 0.2em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -354,8 +355,9 @@ div.grd_tblCont table td {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px 15px 10px 15px;
|
padding: 10px 15px 10px 15px;
|
||||||
border-left: 1px solid #ccc;
|
border-left: 1px solid #f4f4f4;
|
||||||
border-right: 1px solid #ccc;
|
border-right: 1px solid #f4f4f4;
|
||||||
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.helpBtn:hover {
|
.helpBtn:hover {
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
|
@ -369,14 +371,12 @@ div.helpCont {
|
||||||
box-shadow: 3px 3px 2px #888;
|
box-shadow: 3px 3px 2px #888;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
width: 250px;
|
width: 300px;
|
||||||
max-width: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 35px 0 0 -100px;
|
margin: 45px 0 0 -150px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-size: 12px;
|
font-size: inherit;
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -425,7 +425,6 @@ div.helpFooter {
|
||||||
}
|
}
|
||||||
div.helpFooter h4 {
|
div.helpFooter h4 {
|
||||||
margin: 2px 2px 2px 2px;
|
margin: 2px 2px 2px 2px;
|
||||||
font-size: 13px;
|
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -441,15 +440,16 @@ span.keyword {
|
||||||
*/
|
*/
|
||||||
.loader {
|
.loader {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 5px 10px 5px 10px;
|
padding: 0.5em 0.7em;
|
||||||
margin: 20px 0 0 20px;
|
margin: 10em 0 0 3em;
|
||||||
width: auto;
|
width: auto;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
font-size: 12px;
|
font-weight: 600;
|
||||||
font-weight: bold;
|
background-color: #a7a7a8;
|
||||||
border: 1px solid #666;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 1px 1px #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -517,15 +517,15 @@ span.rspgSpan {
|
||||||
* Reset button default style
|
* Reset button default style
|
||||||
*/
|
*/
|
||||||
input.reset {
|
input.reset {
|
||||||
|
display: inline-block;
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: pointer !important;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
vertical-align: middle;
|
background: transparent url("themes/btn_clear_filters.png") center center no-repeat;
|
||||||
background: transparent url("themes/btn_clear_filters.png") center center no-repeat !important;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
input.reset:hover {
|
input.reset:hover {
|
||||||
background: #f4f4f4 url("themes/btn_clear_filters.png") center center no-repeat !important;
|
background-color: #f4f4f4;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -535,11 +535,12 @@ input.reset:hover {
|
||||||
div.tot {
|
div.tot {
|
||||||
float: left;
|
float: left;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 150px;
|
min-width: 150px;
|
||||||
height: 15px;
|
height: 100%;
|
||||||
border-right: 1px solid #ccc;
|
border-right: 1px solid #f4f4f4;
|
||||||
margin: 0 5px 0 2px;
|
margin: 0;
|
||||||
padding: 0 2px 0 2px;
|
padding: 0.5em;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
div.tot span {
|
div.tot span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -569,14 +570,14 @@ div.status {
|
||||||
float: left;
|
float: left;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 15px;
|
height: 100%;
|
||||||
border-right: 1px solid #ccc;
|
border-right: 1px solid #f4f4f4;
|
||||||
margin: 0 5px 0 2px;
|
margin: 0;
|
||||||
padding: 0 2px 0 2px;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
div.status span {
|
div.status span {
|
||||||
font-weight: bold;
|
font-weight: 400;
|
||||||
font-size: 11px;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -612,7 +613,7 @@ table.TF td {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
font-size: 12px;
|
font-size: inherit;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
|
@ -630,10 +631,6 @@ table.TF td {
|
||||||
.inf a:hover {
|
.inf a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.inf span {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.ldiv {
|
.ldiv {
|
||||||
float: left;
|
float: left;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
|
|
|
@ -3,5 +3,5 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.activeHeader
|
.activeHeader
|
||||||
background #004080 !important
|
background-color #66AFE9 !important
|
||||||
color #fff !important
|
color #fff !important
|
||||||
|
|
|
@ -5,6 +5,8 @@
|
||||||
// table
|
// table
|
||||||
$font-family = inherit
|
$font-family = inherit
|
||||||
$padding = 0.5em 0.7em
|
$padding = 0.5em 0.7em
|
||||||
|
$min-width = 35px
|
||||||
|
$min-height = 35px
|
||||||
|
|
||||||
// header cell
|
// header cell
|
||||||
// $th-bg-color = #EBECEE
|
// $th-bg-color = #EBECEE
|
||||||
|
@ -29,8 +31,9 @@ $filter-height = 35px
|
||||||
|
|
||||||
// toolbar container (.inf)
|
// toolbar container (.inf)
|
||||||
$toolbar-bg-color = transparent
|
$toolbar-bg-color = transparent
|
||||||
$toolbar-font-size = 12px
|
$toolbar-font-size = inherit
|
||||||
$toolbar-border-color = #CCC
|
$toolbar-border-color = #CCC
|
||||||
|
$toolbar-divider-color = #F4F4F4
|
||||||
|
|
||||||
// paging
|
// paging
|
||||||
$paging-nav-button-bg-color-hover = #CAD1D6
|
$paging-nav-button-bg-color-hover = #CAD1D6
|
||||||
|
@ -39,6 +42,3 @@ $paging-nav-button-bg-color-hover = #CAD1D6
|
||||||
$grid-layout-bg-color = #C8E0FB
|
$grid-layout-bg-color = #C8E0FB
|
||||||
$grid-layout-border-color = #99BBE8
|
$grid-layout-border-color = #99BBE8
|
||||||
|
|
||||||
// elements
|
|
||||||
$min-width = 35px
|
|
||||||
$min-height = 35px
|
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
border-top: 1px solid #CCC
|
border-top: 1px solid #CCC
|
||||||
border-left 1px solid #CCC
|
border-left 1px solid #CCC
|
||||||
border-right 1px solid #f4f4f4
|
border-right 1px solid #f4f4f4
|
||||||
|
padding 0.2em !important
|
||||||
|
|
||||||
// button appearance
|
// button appearance
|
||||||
.btnflt
|
.btnflt
|
||||||
|
@ -43,7 +44,7 @@
|
||||||
display block
|
display block
|
||||||
color $filter-font-color
|
color $filter-font-color
|
||||||
background-color $filter-bg-color
|
background-color $filter-bg-color
|
||||||
border 1px solid $filter-border-color
|
border 1px inset $filter-border-color
|
||||||
margin 0
|
margin 0
|
||||||
padding 0 0 0 0.2em
|
padding 0 0 0 0.2em
|
||||||
width 100%
|
width 100%
|
||||||
|
|
|
@ -11,8 +11,9 @@
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 0
|
margin 0
|
||||||
padding 10px 15px 10px 15px
|
padding 10px 15px 10px 15px
|
||||||
border-left 1px solid #ccc
|
border-left 1px solid $toolbar-divider-color
|
||||||
border-right 1px solid #ccc
|
border-right 1px solid $toolbar-divider-color
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color #F4F4F4
|
background-color #F4F4F4
|
||||||
|
@ -24,14 +25,12 @@ div.helpCont
|
||||||
box-shadow(3px 3px 2px #888)
|
box-shadow(3px 3px 2px #888)
|
||||||
position absolute
|
position absolute
|
||||||
display none
|
display none
|
||||||
width 250px
|
width 300px
|
||||||
max-width 300px
|
|
||||||
overflow auto
|
|
||||||
padding 10px
|
padding 10px
|
||||||
margin 35px 0 0 -100px
|
margin 45px 0 0 -150px
|
||||||
border 1px solid #CCC
|
border 1px solid #CCC
|
||||||
line-height 20px
|
line-height 20px
|
||||||
font-size 12px
|
font-size inherit
|
||||||
color #333
|
color #333
|
||||||
background #fff
|
background #fff
|
||||||
text-align left
|
text-align left
|
||||||
|
@ -56,5 +55,4 @@ div.helpFooter
|
||||||
margin 10px 0 0 0
|
margin 10px 0 0 0
|
||||||
h4
|
h4
|
||||||
margin 2px 2px 2px 2px
|
margin 2px 2px 2px 2px
|
||||||
font-size 13px
|
|
||||||
color #333
|
color #333
|
||||||
|
|
|
@ -4,12 +4,13 @@
|
||||||
|
|
||||||
.loader
|
.loader
|
||||||
position absolute
|
position absolute
|
||||||
padding 5px 10px 5px 10px
|
padding 0.5em 0.7em
|
||||||
margin 20px 0 0 20px
|
margin 10em 0 0 3em
|
||||||
width auto
|
width auto
|
||||||
z-index 1000
|
z-index 1000
|
||||||
font-size 12px
|
font-weight 600
|
||||||
font-weight bold
|
background-color #A7A7A8
|
||||||
border 1px solid #666
|
|
||||||
background-color #f4f4f4
|
|
||||||
vertical-align middle
|
vertical-align middle
|
||||||
|
border-radius 10px
|
||||||
|
color #FFF
|
||||||
|
text-shadow 1px 1px #333
|
||||||
|
|
|
@ -5,13 +5,13 @@
|
||||||
@import 'config'
|
@import 'config'
|
||||||
|
|
||||||
input.reset
|
input.reset
|
||||||
|
display inline-block
|
||||||
width $min-width
|
width $min-width
|
||||||
height 100%
|
height 100%
|
||||||
cursor pointer !important
|
|
||||||
border 0
|
border 0
|
||||||
vertical-align middle
|
background: transparent url(themes/btn_clear_filters.png) center center no-repeat
|
||||||
background: transparent url(themes/btn_clear_filters.png) center center no-repeat !important
|
vertical-align top
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background #F4F4F4 url(themes/btn_clear_filters.png) center center no-repeat !important
|
background-color #F4F4F4
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
|
|
|
@ -2,14 +2,17 @@
|
||||||
* Rows counter default style
|
* Rows counter default style
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import 'config'
|
||||||
|
|
||||||
div.tot
|
div.tot
|
||||||
float left
|
float left
|
||||||
overflow hidden
|
overflow hidden
|
||||||
width 150px
|
min-width 150px
|
||||||
height 15px
|
height 100%
|
||||||
border-right 1px solid #ccc
|
border-right 1px solid $toolbar-divider-color
|
||||||
margin 0 5px 0 2px
|
margin 0
|
||||||
padding 0 2px 0 2px
|
padding 0.5em
|
||||||
|
vertical-align middle
|
||||||
|
|
||||||
span
|
span
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
|
@ -2,15 +2,17 @@
|
||||||
* Status bar default style
|
* Status bar default style
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import 'config'
|
||||||
|
|
||||||
div.status
|
div.status
|
||||||
float left
|
float left
|
||||||
overflow hidden
|
overflow hidden
|
||||||
width 150px
|
width 150px
|
||||||
height 15px
|
height 100%
|
||||||
border-right 1px solid #ccc
|
border-right 1px solid $toolbar-divider-color
|
||||||
margin 0 5px 0 2px
|
margin 0
|
||||||
padding 0 2px 0 2px
|
padding 0.5em
|
||||||
|
|
||||||
span
|
span
|
||||||
font-weight bold
|
font-weight 400
|
||||||
font-size 11px
|
font-size inherit
|
||||||
|
|
|
@ -28,10 +28,6 @@
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration underline
|
text-decoration underline
|
||||||
|
|
||||||
span
|
|
||||||
width $min-width
|
|
||||||
height $min-height
|
|
||||||
|
|
||||||
// left div
|
// left div
|
||||||
.ldiv
|
.ldiv
|
||||||
float left
|
float left
|
||||||
|
|
|
@ -14,21 +14,14 @@
|
||||||
<script data-config>
|
<script data-config>
|
||||||
var filtersConfig = {
|
var filtersConfig = {
|
||||||
base_path: 'tablefilter/',
|
base_path: 'tablefilter/',
|
||||||
// col_0: 'checklist',
|
|
||||||
col_1: 'select',
|
col_1: 'select',
|
||||||
col_2: 'select',
|
col_2: 'select',
|
||||||
// col_3: 'multiple',
|
col_3: 'select',
|
||||||
alternate_rows: true,
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
btn_reset: true,
|
btn_reset: true,
|
||||||
loader: true,
|
loader: true,
|
||||||
status_bar: true/*,
|
status_bar: true,
|
||||||
popup_filters: true,
|
|
||||||
single_search_filter: true,
|
|
||||||
enable_icons: false,
|
|
||||||
btn: true,
|
|
||||||
btn_text: 'Go',
|
|
||||||
|
|
||||||
|
|
||||||
mark_active_columns: true,
|
mark_active_columns: true,
|
||||||
col_number_format: [
|
col_number_format: [
|
||||||
null, null, 'US',
|
null, null, 'US',
|
||||||
|
@ -52,7 +45,7 @@
|
||||||
'70px', '70px', '70px',
|
'70px', '70px', '70px',
|
||||||
'70px', '60px', '60px'
|
'70px', '60px', '60px'
|
||||||
],
|
],
|
||||||
extensions:[{ name: 'sort' }]*/
|
extensions:[{ name: 'sort' }]
|
||||||
};
|
};
|
||||||
|
|
||||||
var tf = new TableFilter('demo', filtersConfig);
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
|
|
Loading…
Reference in a new issue