diff --git a/admin/css/screen.css b/admin/css/screen.css index 4d888f6c4..fadaf3345 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -35,7 +35,8 @@ If more variables exist in the future, consider creating a variables file.*/ /** ---------------------------------------------------- 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-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .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-grid_print, .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-sfafdfa106f.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-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .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-document--pencil, .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-grid_print, .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-s9416553f5b.png') no-repeat; } .ui-state-default .btn-icon-accept { background-position: 0 0; } .ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; } @@ -58,27 +59,29 @@ If more variables exist in the future, consider creating a variables file.*/ .ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -293px; } .ui-state-default .btn-icon-decline { background-position: 0 -309px; } .ui-state-default .btn-icon-decline_disabled { background-position: 0 -326px; } -.ui-state-default .btn-icon-download-csv { background-position: 0 -343px; } -.ui-state-default .btn-icon-drive-upload { background-position: 0 -361px; } -.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -377px; } -.ui-state-default .btn-icon-grid_print { background-position: 0 -393px; } -.ui-state-default .btn-icon-magnifier { background-position: 0 -409px; } -.ui-state-default .btn-icon-minus-circle { background-position: 0 -425px; } -.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -441px; } -.ui-state-default .btn-icon-navigation { background-position: 0 -457px; } -.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -473px; } -.ui-state-default .btn-icon-network-cloud { background-position: 0 -489px; } -.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -505px; } -.ui-state-default .btn-icon-pencil { background-position: 0 -521px; } -.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -537px; } -.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -553px; } -.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -569px; } -.ui-state-default .btn-icon-preview { background-position: 0 -585px; } -.ui-state-default .btn-icon-preview_disabled { background-position: 0 -602px; } -.ui-state-default .btn-icon-settings { background-position: 0 -619px; } -.ui-state-default .btn-icon-settings_disabled { background-position: 0 -635px; } -.ui-state-default .btn-icon-unpublish { background-position: 0 -651px; } -.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -669px; } + +.ui-state-default .btn-icon-document--pencil { background-position: 0 -343px; } +.ui-state-default .btn-icon-download-csv { background-position: 0 -359px; } +.ui-state-default .btn-icon-drive-upload { background-position: 0 -377px; } +.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -393px; } +.ui-state-default .btn-icon-grid_print { background-position: 0 -409px; } +.ui-state-default .btn-icon-magnifier { background-position: 0 -425px; } +.ui-state-default .btn-icon-minus-circle { background-position: 0 -441px; } +.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -457px; } +.ui-state-default .btn-icon-navigation { background-position: 0 -473px; } +.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -489px; } +.ui-state-default .btn-icon-network-cloud { background-position: 0 -505px; } +.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -521px; } +.ui-state-default .btn-icon-pencil { background-position: 0 -537px; } +.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -553px; } +.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -569px; } +.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -585px; } +.ui-state-default .btn-icon-preview { background-position: 0 -601px; } +.ui-state-default .btn-icon-preview_disabled { background-position: 0 -618px; } +.ui-state-default .btn-icon-settings { background-position: 0 -635px; } +.ui-state-default .btn-icon-settings_disabled { background-position: 0 -651px; } +.ui-state-default .btn-icon-unpublish { background-position: 0 -667px; } +.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -685px; } .icon { text-indent: -9999px; border: none; outline: none; } .icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); } diff --git a/css/GridField.css b/css/GridField.css index 096fd75f0..6fa8809c2 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -17,6 +17,16 @@ .cms table.ss-gridfield-table tbody td { width: 100%; } .cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; white-space: nowrap; } .cms table.ss-gridfield-table tbody td.col-description { width: auto; white-space: nowrap; } +.cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: auto; border-right: none; text-indent: -9999em; padding: 0; } +.cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px; display: block; } +.cms table.ss-gridfield-table tbody td.col-Created { white-space: nowrap; } +.cms table.ss-gridfield-table tbody td.col-LastEdited { white-space: nowrap; } +.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -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 tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } +.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } +.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.deletedonlive { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; } +.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.removedfromdraft { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; } +.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.workflow-approval { color: #56660C; border: 1px solid #7C8816; background-color: #DAE79A; } .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; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tbody td button.ui-state-active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @@ -40,7 +50,7 @@ .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; } -.cms table.ss-gridfield-table tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #9cb0b9; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +.cms table.ss-gridfield-table tr th.main { white-space: nowrap; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #9cb0b9; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .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; } @@ -65,6 +75,7 @@ .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: 1em 1em; display: block; } +.cms table.ss-gridfield-table tr th.col-listChildrenLink { border-right: none; } .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 { padding-top: 2px; position: absolute; left: 50%; margin-left: -116px; } diff --git a/images/sitetree_ss_default_icons.png b/images/sitetree_ss_default_icons.png new file mode 100644 index 000000000..101351db9 Binary files /dev/null and b/images/sitetree_ss_default_icons.png differ diff --git a/scss/GridField.scss b/scss/GridField.scss index 5d919df21..4c15dfbca 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -119,6 +119,70 @@ $gf_grid_x: 16px; white-space:nowrap; } + &.col-listChildrenLink { + width:auto; + border-right:none; + text-indent:-9999em; + padding:0; + .list-children-link { + background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px; + display:block; + } + } + + &.col-Created { + white-space:nowrap; + } + + &.col-LastEdited { + white-space:nowrap; + } + + &.col-getTreeTitle { + span.badge { + clear: both; + text-transform: uppercase; + display: inline-block; + padding: 0px 3px; + font-size: 0.75em; + line-height: 1em; + margin-left: 10px; + margin-right: 6px; + margin-top: -1px; + @include border-radius(2px, 2px); + } + + span.badge.modified { + color: #7E7470; + border: 1px solid #C9B800; + background-color: #FFF0BC; + } + + span.badge.addedtodraft { + color: #7E7470; + border: 1px solid #C9B800; + background-color: #FFF0BC; + } + + span.badge.deletedonlive { + color: #636363; + border: 1px solid #E49393; + background-color: #F2DADB; + } + + span.badge.removedfromdraft { + color: #636363; + border: 1px solid #E49393; + background-color: #F2DADB; + } + + span.badge.workflow-approval { + color: #56660C; + border: 1px solid #7C8816; + background-color: #DAE79A; + } + } + button { border: none; background: none; @@ -244,6 +308,7 @@ $gf_grid_x: 16px; } } &.main{ + white-space:nowrap; border-top: 1px solid $gf_colour_border; color:#fff; background: darken($gf_colour_subheader,10%); @@ -402,6 +467,10 @@ $gf_grid_x: 16px; padding:1em 1em; display:block; } + + &.col-listChildrenLink { + border-right:none; + } } td {