mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT: SSF-53 - Styled the pagination and icons on export to CSV button on User datagrid.
This commit is contained in:
jbridson
parent
de7167b23f
commit
597b12e823
@ -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; }
|
||||
|
||||
BIN
admin/images/btn-icon-se62d8b345b.png
Normal file
BIN
admin/images/btn-icon-se62d8b345b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
BIN
admin/images/btn-icon/download-csv.png
Normal file
BIN
admin/images/btn-icon/download-csv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
@ -1313,4 +1313,23 @@ form.small {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** --------------------------------------------
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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); }
|
||||
|
||||
BIN
images/icons/pagination-arrows.png
Normal file
BIN
images/icons/pagination-arrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
@ -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 {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<tr>
|
||||
<td class="bottom-all" colspan="$Colspan">
|
||||
$Previous10Page $PreviousPage Page $CurrentPageNum of $NumPages $NextPage $Next10Page
|
||||
|
||||
View $FirstShownRecord - $LastShownRecord of $NumRecords
|
||||
<div class="datagrid-pagination">
|
||||
$Previous10Page $PreviousPage <span class="pagination-page-number">Page $CurrentPageNum of $NumPages</span> $NextPage $Next10Page
|
||||
</div>
|
||||
|
||||
<span class="pagination-records-number">View $FirstShownRecord - $LastShownRecord of $NumRecords</span>
|
||||
</td>
|
||||
</tr>
|
||||
Loading…
Reference in New Issue
Block a user