1
0
Fork 0
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:
Max Guglielmi 2015-08-07 22:10:08 +10:00
parent d3b85cbdb0
commit 7bfcf89aa8
12 changed files with 85 additions and 101 deletions

15
dist/starter.html vendored
View file

@ -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);

View file

@ -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%;

View file

@ -3,5 +3,5 @@
*/
.activeHeader
background #004080 !important
color #fff !important
background-color #66AFE9 !important
color #fff !important

View file

@ -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

View file

@ -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%

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -28,10 +28,6 @@
&:hover
text-decoration underline
span
width $min-width
height $min-height
// left div
.ldiv
float left

View file

@ -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);