mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
NEW: CMS site tree status icons
Added coloured status 'dots' to overlay page icons and improved visibility of status labels
This commit is contained in:
Jonathon Menz
parent
5216b67290
commit
8ee9130bcf
@ -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; }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user