diff --git a/css/GridField.css b/css/GridField.css index 5605c3354..c2d86a741 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -24,7 +24,7 @@ .cms table.ss-gridfield-table tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; } .cms table.ss-gridfield-table tr.even { background: #f0f4f7; } .cms table.ss-gridfield-table tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 5px; border-right: 1px solid rgba(0, 0, 0, 0.1); } -.cms table.ss-gridfield-table tr th div.fieldgroup, .cms table.ss-gridfield-table tr th div.fieldgroup-field { width: auto; } +.cms table.ss-gridfield-table tr th div.fieldgroup, .cms table.ss-gridfield-table tr th div.fieldgroup-field { width: 100%; position: relative; } .cms table.ss-gridfield-table tr th div.fieldgroup { min-width: 200px; padding-right: 0; } .cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; } .cms table.ss-gridfield-table tr th.extra button.ss-ui-button, .cms table.ss-gridfield-table tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield-table tr th.action button.ss-ui-button, .cms table.ss-gridfield-table tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; } @@ -32,6 +32,7 @@ .cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; } .cms table.ss-gridfield-table tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); } .cms table.ss-gridfield-table tr th.extra span { width: auto; display: inline; position: static; } +.cms table.ss-gridfield-table tr th.extra span input { height: 28px; } .cms table.ss-gridfield-table tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; } .cms table.ss-gridfield-table tr th.action { border-right: 0; } .cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; } @@ -42,6 +43,12 @@ .cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { background-position: right -34px; } .cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-desc { background-position: right -72px; } .cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-asc { background-position: right -116px; } +.cms table.ss-gridfield-table tr th button.ss-gridfield-button-filter.ss-ui-button { position: absolute; right: 7px; top: -28px; display: block; text-indent: -9999em; width: 30px; height: 28px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-width: 1px; border-color: #9a9a9a; background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -o-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, linear-gradient(#ffffff, #d9d9d9); } +.cms table.ss-gridfield-table tr th button.ss-gridfield-button-filter.ss-ui-button:hover { background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4199cd), color-stop(100%, #2e7ead)); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -webkit-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -moz-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -o-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -ms-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, linear-gradient(#4199cd, #2e7ead); } +.cms table.ss-gridfield-table tr th button.ss-gridfield-button-filter.ss-ui-button:active { background: url(../images/icons/filter-icons.png) no-repeat -16px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4199cd), color-stop(100%, #2e7ead)); background: url(../images/icons/filter-icons.png) no-repeat -16px -17px, -webkit-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px -17px, -moz-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px -17px, -o-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px -17px, -ms-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px -17px, linear-gradient(#4199cd, #2e7ead); -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); } +.cms table.ss-gridfield-table tr th button.ss-gridfield-button-reset.ss-ui-button { position: absolute; right: 36px; top: -28px; display: block; text-indent: -9999em; width: 30px; height: 28px; float: right; border-radius: 0px; border-bottom-width: 1px; border-color: #9a9a9a; background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -o-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, linear-gradient(#ffffff, #d9d9d9); } +.cms table.ss-gridfield-table tr th button.ss-gridfield-button-reset.ss-ui-button:hover { background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #cc0000)); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -moz-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -o-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -ms-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, linear-gradient(#ff0000, #cc0000); } +.cms table.ss-gridfield-table tr th button.ss-gridfield-button-reset.ss-ui-button:active { background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #cc0000)); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -moz-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -o-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -ms-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, linear-gradient(#ff0000, #cc0000); -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); } .cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; } .cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 6.4px 12px; color: #666666; } diff --git a/images/icons/filter-icons.png b/images/icons/filter-icons.png index 8ccd35f6f..c5802cc39 100644 Binary files a/images/icons/filter-icons.png and b/images/icons/filter-icons.png differ diff --git a/scss/GridField.scss b/scss/GridField.scss index fb0ede296..98f5fe925 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -22,6 +22,10 @@ $gf_colour_zebra: #F0F4F7; $gf_colour_font: #666; $gf_colour_text_shadow: rgba(0,0,0,.3); $gf_border_radius: 7px; +$gf_color_border_filter_button: #9A9A9A; +$gf_color_button: #e6e6e6; +$gf_color_button_filter_hover: #338DC1; +$gf_color_button_reset_hover: #FF0000; $gf_grid_y: 12px; $gf_grid_x: 16px; @@ -171,7 +175,8 @@ $gf_grid_x: 16px; } div { &.fieldgroup,&.fieldgroup-field { - width: auto; + width: 100%; + position:relative; } &.fieldgroup { min-width: 200px; @@ -206,6 +211,9 @@ $gf_grid_x: 16px; width: auto; display: inline; position: static; + input { + height:28px; + } } button.ss-ui-button { padding: .3em; @@ -253,10 +261,81 @@ $gf_grid_x: 16px; background-position: right -116px; } } - &.ss-gridfield-button-filter{ - background: transparent url(../images/icons/filter-icons.png) no-repeat right 6px; + &.ss-gridfield-button-filter.ss-ui-button{ + position:absolute; + right:$gf_grid_x/2 - 1; + top:$gf_grid_y*-2 - 4; + display:block; + text-indent:-9999em; + width:$gf_grid_x*2 - 2; + height:$gf_grid_y*2 + 4; + border: { + top-left-radius:0px; + bottom-left-radius:0px; + top-right-radius:4px; + bottom-right-radius:4px; + bottom-width:1px; + color:$gf_color_border_filter_button; + } + @include background (url(../images/icons/filter-icons.png) no-repeat -40px 6px, + linear-gradient( + lighten($gf_color_button, 10%), + darken($gf_color_button, 5%) + )); + &:hover { + @include background (url(../images/icons/filter-icons.png) no-repeat -16px 6px, + linear-gradient( + lighten($gf_color_button_filter_hover, 5%), + darken($gf_color_button_filter_hover, 5%) + )); + } + &:active { + @include background (url(../images/icons/filter-icons.png) no-repeat -16px -17px, + linear-gradient( + lighten($gf_color_button_filter_hover, 5%), + darken($gf_color_button_filter_hover, 5%) + )); + @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6)); + } + } + &.ss-gridfield-button-reset.ss-ui-button{ + position:absolute; + right:$gf_grid_x*2 + 4; + top:$gf_grid_y*-2 - 4; + display:block; + text-indent:-9999em; + width:$gf_grid_x*2 - 2; + height:$gf_grid_y*2 + 4; + float:right; + border: { + radius:0px; + bottom-width:1px; + color:$gf_color_border_filter_button; + } + @include background (url(../images/icons/filter-icons.png) no-repeat 8px 5px, + linear-gradient(color-stops( + lighten($gf_color_button, 10%), + darken($gf_color_button, 5%) + )) + ); + &:hover { + @include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px, + linear-gradient( + $gf_color_button_reset_hover, + darken($gf_color_button_reset_hover, 10%) + )); + } + &:active { + @include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px, + linear-gradient( + $gf_color_button_reset_hover, + darken($gf_color_button_reset_hover, 10%) + )); + @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6)); + } } } + input { &.ss-gridfield-sort { padding: 2px; @@ -267,6 +346,7 @@ $gf_grid_x: 16px; } } } + td { border-right: 1px solid $gf_colour_border; padding: $gf_grid_x/2.5 $gf_grid_y;