diff --git a/admin/css/screen.css b/admin/css/screen.css index 842d771f4..4974e2ce9 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -31,7 +31,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */ /** ----------------------------- Sprite images ----------------------------- */ /** Helper SCSS file for generating sprites for the interface. */ -.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sfde6065e75.png') no-repeat; } +.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-se62d8b345b.png') no-repeat; } .ui-state-default .btn-icon-accept { background-position: 0 0; } .ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; } @@ -42,29 +42,30 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, .ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -104px; } .ui-state-default .btn-icon-back { background-position: 0 -120px; } .ui-state-default .btn-icon-back_disabled { background-position: 0 -135px; } -.ui-state-default .btn-icon-cross-circle { background-position: 0 -151px; } -.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -167px; } -.ui-state-default .btn-icon-decline { background-position: 0 -183px; } -.ui-state-default .btn-icon-decline_disabled { background-position: 0 -200px; } -.ui-state-default .btn-icon-drive-upload { background-position: 0 -217px; } -.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -233px; } -.ui-state-default .btn-icon-magnifier { background-position: 0 -249px; } -.ui-state-default .btn-icon-minus-circle { background-position: 0 -265px; } -.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -281px; } -.ui-state-default .btn-icon-navigation { background-position: 0 -297px; } -.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -313px; } -.ui-state-default .btn-icon-network-cloud { background-position: 0 -329px; } -.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -345px; } -.ui-state-default .btn-icon-pencil { background-position: 0 -361px; } -.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -377px; } -.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -393px; } -.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -409px; } -.ui-state-default .btn-icon-preview { background-position: 0 -425px; } -.ui-state-default .btn-icon-preview_disabled { background-position: 0 -442px; } -.ui-state-default .btn-icon-settings { background-position: 0 -459px; } -.ui-state-default .btn-icon-settings_disabled { background-position: 0 -475px; } -.ui-state-default .btn-icon-unpublish { background-position: 0 -491px; } -.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -509px; } +.ui-state-default .btn-icon-cross-circle { background-position: 0 -150px; } +.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -166px; } +.ui-state-default .btn-icon-decline { background-position: 0 -182px; } +.ui-state-default .btn-icon-decline_disabled { background-position: 0 -199px; } +.ui-state-default .btn-icon-download-csv { background-position: 0 -216px; } +.ui-state-default .btn-icon-drive-upload { background-position: 0 -234px; } +.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -250px; } +.ui-state-default .btn-icon-magnifier { background-position: 0 -266px; } +.ui-state-default .btn-icon-minus-circle { background-position: 0 -282px; } +.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -298px; } +.ui-state-default .btn-icon-navigation { background-position: 0 -314px; } +.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -330px; } +.ui-state-default .btn-icon-network-cloud { background-position: 0 -346px; } +.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -362px; } +.ui-state-default .btn-icon-pencil { background-position: 0 -378px; } +.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -394px; } +.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -410px; } +.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -426px; } +.ui-state-default .btn-icon-preview { background-position: 0 -442px; } +.ui-state-default .btn-icon-preview_disabled { background-position: 0 -459px; } +.ui-state-default .btn-icon-settings { background-position: 0 -476px; } +.ui-state-default .btn-icon-settings_disabled { background-position: 0 -492px; } +.ui-state-default .btn-icon-unpublish { background-position: 0 -508px; } +.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -526px; } .icon { text-indent: -9999px; border: none; outline: none; } .icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); } @@ -478,6 +479,11 @@ form.small .cms-file-info-data .field { padding-bottom: 0; } form.small .cms-file-info-data .field label { width: 112px; } form.small .cms-file-info-data .field .middleColumn { margin-left: 120px; } +/** -------------------------------------------- Users Members Admin -------------------------------------------- */ +.members_grid p button#action_export { margin-top: 16px; } +.members_grid p button#action_export span.btn-icon-exportlist { background: url(../images/btn-icon/download-csv.png) no-repeat 0px 0px; height: 20px; } +.members_grid p button#action_export span.ui-button-text { padding-left: 27px; } + /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */ .cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; } .cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } diff --git a/admin/images/btn-icon-se62d8b345b.png b/admin/images/btn-icon-se62d8b345b.png new file mode 100644 index 000000000..8cf9be95c Binary files /dev/null and b/admin/images/btn-icon-se62d8b345b.png differ diff --git a/admin/images/btn-icon-sfde6065e75.png b/admin/images/btn-icon-sfde6065e75.png deleted file mode 100644 index 6a008e256..000000000 Binary files a/admin/images/btn-icon-sfde6065e75.png and /dev/null differ diff --git a/admin/images/btn-icon/download-csv.png b/admin/images/btn-icon/download-csv.png new file mode 100644 index 000000000..b0384f4bd Binary files /dev/null and b/admin/images/btn-icon/download-csv.png differ diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index b094603e3..4cb346b19 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1313,4 +1313,23 @@ form.small { } } } -} \ No newline at end of file +} + +/** -------------------------------------------- + * Users Members Admin + * -------------------------------------------- */ + + .members_grid { + p { + button#action_export { + margin-top:$grid-y*2; + span.btn-icon-exportlist { + @include background (url(../images/btn-icon/download-csv.png) no-repeat 0px 0px); + height:$grid-y*2 + 4; + } + span.ui-button-text { + padding-left:$grid-x*3 + 3; + } + } + } + } \ No newline at end of file diff --git a/css/GridField.css b/css/GridField.css index 9ca2d4790..78342bd1b 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -9,13 +9,13 @@ .cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; } .cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tbody td button span.ui-button-text { text-indent: -9999em; background: url(../images/icons/decline.png) no-repeat 0 2px; padding: 0; width: 20px; height: 20px; } -.cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; height: 20px; width: 20px; text-indent: -9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; } +.cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 20px; height: 20px; text-indent: -9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; } .cms table.ss-gridfield-table tfoot { color: #1d2224; } .cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .cms table.ss-gridfield-table tr.title { -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; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; } .cms table.ss-gridfield-table tr.title th { position: relative; background: #7f9198; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); -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; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; } .cms table.ss-gridfield-table tr.title th h2 { padding: 0px; font-size: 16.8px; color: #fff; margin: 3px 8px 0; display: inline-block; } -.cms table.ss-gridfield-table tr.title th .new { font-size: 14.4px; border-color: rgba(0, 0, 0, 0.1); float: right; } +.cms table.ss-gridfield-table tr.title th .new { font-size: 14.4px; float: right; } .cms table.ss-gridfield-table tr.sortable-header { background: #bac8ce; } .cms table.ss-gridfield-table tr.sortable-header th { padding: 0px; } .cms table.ss-gridfield-table tr:hover { background: #FFFAD6 !important; } @@ -44,15 +44,22 @@ .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 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); -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-filter.ss-ui-button.hover-alike:active { 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); -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-filter.ss-ui-button.hover-alike { 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-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 button.ss-gridfield-button-reset.ss-ui-button.filtered: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.filtered: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 th span.non-sortable { padding: .4em 1em; } .cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 6.4px 12px; color: #666666; } .cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); } +.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination { position: absolute; left: 50%; margin-left: -160px; } +.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination .pagination-page-number { color: white; } +.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination button.ss-gridfield-previouspage { background: url(../images/icons/pagination-arrows.png) no-repeat -23px 7px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; width: 10px; margin: 0 10px; } +.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination button.ss-gridfield-previouspage span { text-indent: -9999em; } +.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination button.ss-gridfield-nextpage { background: url(../images/icons/pagination-arrows.png) no-repeat -47px 7px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; width: 10px; margin: 0 10px; } +.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination button.ss-gridfield-nextpage span { text-indent: -9999em; } +.cms table.ss-gridfield-table tr td.bottom-all .pagination-records-number { float: right; padding: 6px 0; color: white; } .cms table.ss-gridfield-table tr.last td { border-bottom: 0 none; } .cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); } diff --git a/images/icons/pagination-arrows.png b/images/icons/pagination-arrows.png new file mode 100644 index 000000000..28402a0c9 Binary files /dev/null and b/images/icons/pagination-arrows.png differ diff --git a/scss/GridField.scss b/scss/GridField.scss index f3549b6d1..cee947677 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -26,6 +26,7 @@ $gf_color_border_filter_button: #9A9A9A; $gf_color_button: #e6e6e6; $gf_color_button_filter_hover: #338DC1; $gf_color_button_reset_hover: #FF0000; +$color-text-light: white; $gf_grid_y: 12px; $gf_grid_x: 16px; @@ -39,7 +40,7 @@ $gf_grid_x: 16px; .cms { .ss-gridfield { & > div { - margin-bottom: 35px; + margin-bottom: $gf_grid_y*3 - 1; } &[data-selectable] { @@ -86,14 +87,14 @@ $gf_grid_x: 16px; text-indent:-9999em; background: url(../images/icons/decline.png) no-repeat 0 2px; padding:0; - width:20px; - height:20px; + width:$gf_grid_x + 4; + height:$gf_grid_y*2 - 4; } } a.edit-link { display:inline-block; - height:20px; - width:20px; + width:$gf_grid_x + 4; + height:$gf_grid_y*2 - 4; text-indent:-9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; } @@ -132,7 +133,6 @@ $gf_grid_x: 16px; } .new{ font-size: $gf_grid_y*1.2; - border-color: $gf_colour_border; float: right; } } @@ -179,7 +179,7 @@ $gf_grid_x: 16px; position:relative; } &.fieldgroup { - min-width: 200px; + min-width: $gf_grid_x*12.5; padding-right:0; } } @@ -212,7 +212,7 @@ $gf_grid_x: 16px; display: inline; position: static; input { - height:28px; + height:$gf_grid_y*2 + 4; } } button.ss-ui-button { @@ -282,14 +282,7 @@ $gf_grid_x: 16px; 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 { + &.hover-alike:active { @include background (url(../images/icons/filter-icons.png) no-repeat -16px 6px, linear-gradient( lighten($gf_color_button_filter_hover, 5%), @@ -297,6 +290,13 @@ $gf_grid_x: 16px; )); @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6)); } + &.hover-alike { + @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%) + )); + } } &.ss-gridfield-button-reset.ss-ui-button{ position:absolute; @@ -318,14 +318,14 @@ $gf_grid_x: 16px; darken($gf_color_button, 5%) )) ); - &:hover { + &.filtered: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 { + &.filtered:active { @include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px, linear-gradient( $gf_color_button_reset_hover, @@ -357,7 +357,40 @@ $gf_grid_x: 16px; color: $gf_colour_font; &.bottom-all { @include border-bottom-radius($gf_border_radius); - @include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark)); + @include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark)); + .datagrid-pagination { + position:absolute; + left:50%; + margin-left:-$gf_grid_x*10; + .pagination-page-number { + color:$color-text-light; + } + button.ss-gridfield-previouspage { + @include background (url(../images/icons/pagination-arrows.png) no-repeat -23px 7px); + @include box-shadow-none; + border:none; + width:10px; + margin:0 10px; + span { + text-indent:-9999em; + } + } + button.ss-gridfield-nextpage { + @include background (url(../images/icons/pagination-arrows.png) no-repeat -47px 7px); + @include box-shadow-none; + border:none; + width:10px; + margin:0 10px; + span { + text-indent:-9999em; + } + } + } + .pagination-records-number { + float:right; + padding:($gf_grid_y/2) 0; + color:$color-text-light; + } } } &.last td { diff --git a/templates/Includes/GridFieldPaginator_Row.ss b/templates/Includes/GridFieldPaginator_Row.ss index d8a555c10..5fc35552b 100644 --- a/templates/Includes/GridFieldPaginator_Row.ss +++ b/templates/Includes/GridFieldPaginator_Row.ss @@ -1,7 +1,9 @@ - $Previous10Page $PreviousPage Page $CurrentPageNum of $NumPages $NextPage $Next10Page - - View $FirstShownRecord - $LastShownRecord of $NumRecords +
+ $Previous10Page $PreviousPage Page $CurrentPageNum of $NumPages $NextPage $Next10Page +
+ + View $FirstShownRecord - $LastShownRecord of $NumRecords \ No newline at end of file