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