From 8ee9130bcf10339c3eed54e10aa55f297ec89efd Mon Sep 17 00:00:00 2001 From: Jonathon Menz Date: Tue, 24 Feb 2015 14:52:36 -0800 Subject: [PATCH] NEW: CMS site tree status icons Added coloured status 'dots' to overlay page icons and improved visibility of status labels --- admin/css/screen.css | 92 +++++++++++++++++++++--------- admin/scss/_tree.scss | 128 ++++++++++++++++++++++++++++-------------- 2 files changed, 151 insertions(+), 69 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index ac238dff4..b23e13521 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -759,7 +759,7 @@ form.import-form label.left { width: 250px; } .cms .jstree li > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree li > .jstree-icon { cursor: pointer; } .cms .jstree ins, .TreeDropdownField .treedropdownfield-panel .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; float: left; } .cms .jstree a, .TreeDropdownField .treedropdownfield-panel .jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; border: 1px solid #fff; } -.cms .jstree a:focus, .cms .jstree a:active, .cms .jstree a:hover, .TreeDropdownField .treedropdownfield-panel .jstree a:focus, .TreeDropdownField .treedropdownfield-panel .jstree a:active, .TreeDropdownField .treedropdownfield-panel .jstree a:hover { text-decoration: none; cursor: pointer; text-shadow: none; } +.cms .jstree a:focus, .cms .jstree a:active, .cms .jstree a:hover, .TreeDropdownField .treedropdownfield-panel .jstree a:focus, .TreeDropdownField .treedropdownfield-panel .jstree a:active, .TreeDropdownField .treedropdownfield-panel .jstree a:hover { text-decoration: none; cursor: pointer; text-shadow: 1px 1px 1px white; } .cms .jstree a > ins, .TreeDropdownField .treedropdownfield-panel .jstree a > ins { height: 16px; width: 16px; } .cms .jstree a > ins.jstree-checkbox, .TreeDropdownField .treedropdownfield-panel .jstree a > ins.jstree-checkbox { height: 19px; } .cms .jstree a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree a > .jstree-icon { margin-right: 3px; } @@ -772,8 +772,8 @@ form.import-form label.left { width: 250px; } .cms .jstree .jstree-wholerow a, .cms .jstree .jstree-wholerow a:hover, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a:hover { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; width: 100%; border-right-width: 0px !important; border-left-width: 0px !important; } .cms .jstree .jstree-wholerow ins, .cms .jstree .jstree-wholerow span, .cms .jstree .jstree-wholerow input, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow ins, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow span, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow input { display: none !important; } .cms .jstree .jstree-wholerow-span, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow-span { position: absolute; left: 0; margin: 0px; padding: 0; height: 18px; border-width: 0; padding: 0; z-index: 0; } -.cms .jstree-apple.jstree-focused, .TreeDropdownField .treedropdownfield-panel .jstree-apple.jstree-focused { background: none; } -.cms .jstree-apple.jstree-focused .jstree-apple > ul, .TreeDropdownField .treedropdownfield-panel .jstree-apple.jstree-focused .jstree-apple > ul { background: none; } +.cms .jstree.jstree-focused, .TreeDropdownField .treedropdownfield-panel .jstree.jstree-focused { background: none; } +.cms .jstree.jstree-focused .jstree > ul, .TreeDropdownField .treedropdownfield-panel .jstree.jstree-focused .jstree > ul { background: none; } .cms a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel a > .jstree-icon { display: none; } .cms .draggable a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .draggable a > .jstree-icon { display: block; } .cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; margin-left: -13px; } @@ -814,38 +814,74 @@ form.import-form label.left { width: 250px; } .cms #vakata-dragged .jstree-ok, .TreeDropdownField .treedropdownfield-panel #vakata-dragged .jstree-ok { background: green; } .cms #vakata-dragged .jstree-invalid, .TreeDropdownField .treedropdownfield-panel #vakata-dragged .jstree-invalid { background: red; } -.jstree-apple li, .jstree-apple .jstree-apple ins { background: none; } -.jstree-apple .jstree-unchecked > a > .jstree-checkbox, .jstree-apple .jstree-checked > a > .jstree-checkbox, .jstree-apple .jstree-undetermined > a > .jstree-checkbox { margin-right: 3px; } +.jstree li, .jstree .jstree ins { background: none; } +.jstree .jstree-unchecked > a > .jstree-checkbox, .jstree .jstree-checked > a > .jstree-checkbox, .jstree .jstree-undetermined > a > .jstree-checkbox { margin-right: 3px; } -.tree-holder.jstree-apple, .cms-tree.jstree-apple { /* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */ } -.tree-holder.jstree-apple li, .cms-tree.jstree-apple li { padding: 0px; clear: left; } -.tree-holder.jstree-apple li.Root strong, .cms-tree.jstree-apple li.Root strong { font-weight: bold; padding-left: 1px; } -.tree-holder.jstree-apple li.Root > a .jstree-icon, .cms-tree.jstree-apple li.Root > a .jstree-icon { background-position: -56px -36px; } -.tree-holder.jstree-apple li.status-deletedonlive .text, .cms-tree.jstree-apple li.status-deletedonlive .text { text-decoration: line-through; } -.tree-holder.jstree-apple li.jstree-checked > a, .tree-holder.jstree-apple li.jstree-checked > a:link, .cms-tree.jstree-apple li.jstree-checked > a, .cms-tree.jstree-apple li.jstree-checked > a:link { background-color: #efe999; } -.tree-holder.jstree-apple li.disabled > a > .jstree-checkbox, .cms-tree.jstree-apple li.disabled > a > .jstree-checkbox { background-position: -57px -54px; } -.tree-holder.jstree-apple li.readonly, .cms-tree.jstree-apple li.readonly { color: #aaa; padding-left: 18px; } -.tree-holder.jstree-apple li.readonly a, .tree-holder.jstree-apple li.readonly a:link, .cms-tree.jstree-apple li.readonly a, .cms-tree.jstree-apple li.readonly a:link { margin: 0; padding: 0; } -.tree-holder.jstree-apple li.readonly .jstree-icon, .cms-tree.jstree-apple li.readonly .jstree-icon { display: none; } -.tree-holder.jstree-apple a, .tree-holder.jstree-apple a:link, .cms-tree.jstree-apple a, .cms-tree.jstree-apple a:link { color: #0073C1; padding: 3px 6px 3px 3px; border: none; display: inline-block; margin-right: 5px; } -.tree-holder.jstree-apple ins, .cms-tree.jstree-apple ins { background-color: transparent; background-image: url(../images/sitetree_ss_default_icons.png); } -.tree-holder.jstree-apple span.badge, .cms-tree.jstree-apple span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 3px; margin-right: 6px; margin-top: -1px; -moz-border-radius: 2px / 2px; -webkit-border-radius: 2px 2px; border-radius: 2px / 2px; } -.tree-holder.jstree-apple span.badge.status-modified, .tree-holder.jstree-apple span.badge.status-addedtodraft, .cms-tree.jstree-apple span.badge.status-modified, .cms-tree.jstree-apple span.badge.status-addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } -.tree-holder.jstree-apple span.badge.status-deletedonlive, .tree-holder.jstree-apple span.badge.status-removedfromdraft, .cms-tree.jstree-apple span.badge.status-deletedonlive, .cms-tree.jstree-apple span.badge.status-removedfromdraft { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; } -.tree-holder.jstree-apple span.badge.status-workflow-approval, .cms-tree.jstree-apple span.badge.status-workflow-approval { color: #56660C; border: 1px solid #7C8816; background-color: #DAE79A; } -.tree-holder.jstree-apple span.comment-count, .cms-tree.jstree-apple span.comment-count { clear: both; position: relative; text-transform: uppercase; display: inline-block; overflow: visible; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 3px; margin-right: 6px; -moz-border-radius: 2px / 2px; -webkit-border-radius: 2px 2px; border-radius: 2px / 2px; color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } -.tree-holder.jstree-apple span.comment-count:before, .cms-tree.jstree-apple span.comment-count:before { content: ""; position: absolute; border-style: solid; display: block; width: 0; bottom: -4px; /* value = - border-top-width - border-bottom-width */ left: 3px; /* controls horizontal position */ border-width: 4px 4px 0; border-color: #C9B800 transparent; } -.tree-holder.jstree-apple span.comment-count:after, .cms-tree.jstree-apple span.comment-count:after { content: ""; position: absolute; border-style: solid; /* reduce the damage in FF3.0 */ display: block; width: 0; bottom: -3px; /* value = - border-top-width - border-bottom-width */ left: 4px; /* value = (:before left) + (:before border-left) - (:after border-left) */ border-width: 3px 3px 0; border-color: #FFF0BC transparent; } -.tree-holder.jstree-apple .jstree-hovered, .cms-tree.jstree-apple .jstree-hovered { text-shadow: none; text-decoration: none; } -.tree-holder.jstree-apple .jstree-closed > ins, .cms-tree.jstree-apple .jstree-closed > ins { background-position: 0 0; } -.tree-holder.jstree-apple .jstree-open > ins, .cms-tree.jstree-apple .jstree-open > ins { background-position: -20px 0; } +.tree-holder.jstree, .cms-tree.jstree { /* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */ } +.tree-holder.jstree li, .cms-tree.jstree li { padding: 0px; clear: left; } +.tree-holder.jstree li.Root strong, .cms-tree.jstree li.Root strong { font-weight: bold; padding-left: 1px; } +.tree-holder.jstree li.Root > a .jstree-icon, .cms-tree.jstree li.Root > a .jstree-icon { background-position: -56px -36px; } +.tree-holder.jstree li.status-deletedonlive .text, .cms-tree.jstree li.status-deletedonlive .text { text-decoration: line-through; } +.tree-holder.jstree li.jstree-checked > a, .tree-holder.jstree li.jstree-checked > a:link, .cms-tree.jstree li.jstree-checked > a, .cms-tree.jstree li.jstree-checked > a:link { background-color: #efe999; } +.tree-holder.jstree li.disabled > a > .jstree-checkbox, .cms-tree.jstree li.disabled > a > .jstree-checkbox { background-position: -57px -54px; } +.tree-holder.jstree li.readonly, .cms-tree.jstree li.readonly { color: #aaa; padding-left: 18px; } +.tree-holder.jstree li.readonly a, .tree-holder.jstree li.readonly a:link, .cms-tree.jstree li.readonly a, .cms-tree.jstree li.readonly a:link { margin: 0; padding: 0; } +.tree-holder.jstree li.readonly .jstree-icon, .cms-tree.jstree li.readonly .jstree-icon { display: none; } +.tree-holder.jstree a, .tree-holder.jstree a:link, .cms-tree.jstree a, .cms-tree.jstree a:link { color: #0073C1; padding: 3px 6px 3px 3px; border: none; display: inline-block; margin-right: 5px; } +.tree-holder.jstree ins, .cms-tree.jstree ins { background-color: transparent; background-image: url(../images/sitetree_ss_default_icons.png); } +.tree-holder.jstree span.badge, .cms-tree.jstree span.badge { clear: both; text-transform: uppercase; text-shadow: none; display: inline-block; position: relative; padding: 2px 3px 1px; font-size: 0.75em; line-height: 1em; margin-left: 3px; margin-top: -1px; -moz-border-radius: 2px / 2px; -webkit-border-radius: 2px 2px; border-radius: 2px / 2px; } +.tree-holder.jstree span.comment-count, .cms-tree.jstree span.comment-count { clear: both; position: relative; text-transform: uppercase; display: inline-block; overflow: visible; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 3px; margin-right: 6px; -moz-border-radius: 2px / 2px; -webkit-border-radius: 2px 2px; border-radius: 2px / 2px; color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } +.tree-holder.jstree span.comment-count:before, .cms-tree.jstree span.comment-count:before { content: ""; position: absolute; border-style: solid; display: block; width: 0; bottom: -4px; /* value = - border-top-width - border-bottom-width */ left: 3px; /* controls horizontal position */ border-width: 4px 4px 0; border-color: #C9B800 transparent; } +.tree-holder.jstree span.comment-count:after, .cms-tree.jstree span.comment-count:after { content: ""; position: absolute; border-style: solid; /* reduce the damage in FF3.0 */ display: block; width: 0; bottom: -3px; /* value = - border-top-width - border-bottom-width */ left: 4px; /* value = (:before left) + (:before border-left) - (:after border-left) */ border-width: 3px 3px 0; border-color: #FFF0BC transparent; } +.tree-holder.jstree .jstree-hovered, .cms-tree.jstree .jstree-hovered { text-shadow: none; text-decoration: none; } +.tree-holder.jstree .jstree-closed > ins, .cms-tree.jstree .jstree-closed > ins { background-position: 0 0; } +.tree-holder.jstree .jstree-open > ins, .cms-tree.jstree .jstree-open > ins { background-position: -20px 0; } -a .jstree-pageicon { float: left; margin-right: 4px; } +/* ensure status is visible in sidebar */ +#cms-content-tools-CMSMain .cms-tree.jstree li { min-width: 159px; } +#cms-content-tools-CMSMain .cms-tree.jstree a { overflow: hidden; display: block; position: relative; } +#cms-content-tools-CMSMain .cms-tree.jstree span.badge { position: absolute; top: 0; right: 0; padding: 7px 9px 6px 5px; margin: 0; max-width: 40%; -moz-transition: max-width 0.75s linear; -o-transition: max-width 0.75s linear; -webkit-transition: max-width 0.75s linear; transition: max-width 0.75s linear; } +#cms-content-tools-CMSMain .cms-tree.jstree span.badge:hover { max-width: 150px; } + +a .jstree-pageicon { float: left; margin-right: 4px; position: relative; } li.class-HomePage > a .jstree-pageicon { background-position: 0 -48px; } li.class-RedirectorPage > a .jstree-pageicon { background-position: 0 -16px; } li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } +/* tree status icons and labels */ +.cms-tree.jstree .status-modified > a .jstree-pageicon:before, .cms-tree.jstree .status-addedtodraft > a .jstree-pageicon:before, .cms-tree.jstree .status-deletedonlive > a .jstree-pageicon:before, .cms-tree.jstree .status-removedfromdraft > a .jstree-pageicon:before, .cms-tree.jstree .status-workflow-approval > a .jstree-pageicon:before { content: ""; display: block; width: 5px; height: 5px; position: absolute; bottom: 0; right: 0; background: #fce2d0; border: 1px solid #ff9344; border-radius: 100px; box-shadow: 0px 0px 0px 1px #fff; } + +.jstree .status-modified > .jstree-hovered, .jstree .status-modified > .jstree-clicked, .cms-tree.jstree span.badge.status-modified, .cms-tree.jstree .status-modified > a .jstree-pageicon:before { background-color: #fce2d0; border-color: #ff7714; } + +#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-modified { box-shadow: 0px 0px 6px 2px #fce2d0; } + +.cms-tree.jstree span.badge.status-modified { color: #ff7714; } + +.jstree .status-addedtodraft > .jstree-hovered, .jstree .status-addedtodraft > .jstree-clicked, .cms-tree.jstree span.badge.status-addedtodraft, .cms-tree.jstree .status-addedtodraft > a .jstree-pageicon:before { background-color: #f8f4d0; border-color: #e29a00; } + +#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-addedtodraft { box-shadow: 0px 0px 6px 2px #f8f4d0; } + +.cms-tree.jstree span.badge.status-addedtodraft { color: #e29a00; } + +.jstree .status-deletedonlive > .jstree-hovered, .jstree .status-deletedonlive > .jstree-clicked, .cms-tree.jstree span.badge.status-deletedonlive, .cms-tree.jstree .status-deletedonlive > a .jstree-pageicon:before { background-color: #f9d6dd; border-color: #f0524f; } + +#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-deletedonlive { box-shadow: 0px 0px 6px 2px #f9d6dd; } + +.cms-tree.jstree span.badge.status-deletedonlive { color: #f0524f; } + +.jstree .status-removedfromdraft > .jstree-hovered, .jstree .status-removedfromdraft > .jstree-clicked, .cms-tree.jstree span.badge.status-removedfromdraft, .cms-tree.jstree .status-removedfromdraft > a .jstree-pageicon:before { background-color: #f9d6dd; border-color: #f0524f; } + +#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-removedfromdraft { box-shadow: 0px 0px 6px 2px #f9d6dd; } + +.cms-tree.jstree span.badge.status-removedfromdraft { color: #f0524f; } + +.jstree .status-workflow-approval > .jstree-hovered, .jstree .status-workflow-approval > .jstree-clicked, .cms-tree.jstree span.badge.status-workflow-approval, .cms-tree.jstree .status-workflow-approval > a .jstree-pageicon:before { background-color: #d3f2ff; border-color: #0097d7; } + +#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-workflow-approval { box-shadow: 0px 0px 6px 2px #d3f2ff; } + +.cms-tree.jstree span.badge.status-workflow-approval { color: #0097d7; } + .cms-tree { visibility: hidden; } .cms-tree.multiple li > a > .jstree-icon { display: none; } .cms-tree.multiple li > a > .jstree-icon.jstree-checkbox { display: inline-block; } diff --git a/admin/scss/_tree.scss b/admin/scss/_tree.scss index f8b2e9443..1bee0f169 100644 --- a/admin/scss/_tree.scss +++ b/admin/scss/_tree.scss @@ -68,13 +68,13 @@ &:hover { text-decoration: none; cursor: pointer; - text-shadow: none; + text-shadow:1px 1px 1px white; } > { ins { height: 16px; width: 16px; - &.jstree-checkbox{ + &.jstree-checkbox { height:19px; //Larger to help avoid accidental page loads when trying to click checkboxes } } @@ -111,7 +111,7 @@ background: transparent !important; width: 100%; } - a, a:hover{ + a, a:hover { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; @@ -138,9 +138,9 @@ } // Custom styles - .jstree-apple.jstree-focused { + .jstree.jstree-focused { background: none; - .jstree-apple > ul { + .jstree > ul { background: none; } } @@ -182,7 +182,7 @@ } } - .jstree-themeroller{ + .jstree-themeroller { a { padding: 0 2px; } @@ -276,7 +276,7 @@ min-width: 180px; *width:180px; } - ul,li{ + ul,li { margin: 0; padding: 0 ; list-style-type: none; @@ -316,7 +316,7 @@ margin-top: 3px; margin-right: 5px; } - &.vakata-hover > a{ + &.vakata-hover > a { padding: 1px 10px; background: #3875d7; @include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%)); @@ -326,7 +326,7 @@ } } - #vakata-contextmenu{ + #vakata-contextmenu { .right { right: 100%; left: auto; @@ -345,25 +345,25 @@ @include box-shadow(0 0 10px #CCC); &.col-2{ width:180px * 2; // 2x the size of the original ul - li{ + li { width:50%; } } &.col-3{ width:180px * 3; // 3x the size of the original ul - li{ + li { width:33%; } } - li{ + li { min-width:180px; float:left; - a{ + a { @include hide-text-overflow; } } } - li{ + li { &.vakata-separator { min-height: 0; height: 1px; @@ -409,8 +409,8 @@ } -.jstree-apple { - li, .jstree-apple ins { +.jstree { + li, .jstree ins { background:none; } .jstree-unchecked, .jstree-checked, .jstree-undetermined { @@ -420,9 +420,9 @@ } } -.tree-holder, .cms-tree{ - &.jstree-apple{ - li{ +.tree-holder, .cms-tree { + &.jstree { + li { padding: 0px; clear: left; &.Root { @@ -440,8 +440,8 @@ text-decoration: line-through; } } - &.jstree-checked{ - > a, > a:link{ + &.jstree-checked { + > a, > a:link { background-color: $color-cms-batchactions-menu-selected-background; } } @@ -478,30 +478,15 @@ span.badge { clear: both; text-transform: uppercase; + text-shadow: none; display: inline-block; - padding: 0px 3px; + position: relative; + padding: 2px 3px 1px; font-size: 0.75em; line-height: 1em; margin-left: 3px; - margin-right: 6px; margin-top: -1px; @include border-radius(2px, 2px); - - &.status-modified, &.status-addedtodraft { - color: #7E7470; - border: 1px solid #C9B800; - background-color: #FFF0BC; - } - &.status-deletedonlive, &.status-removedfromdraft { - color: #636363; - border: 1px solid #E49393; - background-color: #F2DADB; - } - &.status-workflow-approval { - color: #56660C; - border: 1px solid #7C8816; - background-color: #DAE79A; - } } /* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */ @@ -557,12 +542,36 @@ background-position:-20px 0; } } -} +} +/* ensure status is visible in sidebar */ +#cms-content-tools-CMSMain .cms-tree.jstree { + li { + min-width: 159px; + } + a { + overflow: hidden; + display: block; + position: relative; + } + span.badge { + position: absolute; + top: 0; + right: 0; + padding: 7px 9px 6px 5px; + margin: 0; + max-width: 40%; + @include transition(max-width .75s linear); + } + span.badge:hover { + max-width: 150px; + } +} a .jstree-pageicon { float: left; margin-right: 4px; + position: relative; li.class-HomePage > &{ background-position: 0 -48px; } @@ -577,6 +586,43 @@ a .jstree-pageicon { } } +/* tree status icons and labels */ +%tree-status-icon-before { + content:""; + display: block; + width:5px; + height: 5px; + position: absolute; + bottom: 0; + right: 0; + background: #fce2d0; + border: 1px solid #ff9344; + border-radius: 100px; + box-shadow: 0px 0px 0px 1px #fff; +} +@mixin tree-status-icon($label, $color, $bgColor) { + .cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before { + @extend %tree-status-icon-before; + } + .jstree .status-#{$label} > .jstree-hovered, + .jstree .status-#{$label} > .jstree-clicked, + .cms-tree.jstree span.badge.status-#{$label}, + .cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before { + background-color:$bgColor; + border-color:$color; + } + #cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-#{$label} { + box-shadow: 0px 0px 6px 2px $bgColor; + } + .cms-tree.jstree span.badge.status-#{$label} { + color: $color; + } +} +@include tree-status-icon('modified', #ff7714, #fce2d0); +@include tree-status-icon('addedtodraft', #e29a00, #f8f4d0); +@include tree-status-icon('deletedonlive', #f0524f, #f9d6dd); +@include tree-status-icon('removedfromdraft', #f0524f, #f9d6dd); +@include tree-status-icon('workflow-approval', #0097d7, #d3f2ff); .cms-tree { visibility: hidden; // enabled by JS to avoid layout glitches @@ -608,7 +654,7 @@ a .jstree-pageicon { // Show the loading indicator on the page icon rather than the default // jstree icon (which is only used for its dragging handles) - a.jstree-loading{ + a.jstree-loading { .jstree-icon { background-image: none !important; }