mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-27 13:06:04 +02:00
The main benefit of this is so that authors who make use of .editorconfig don't end up with whitespace changes in their PRs. Spaces vs. tabs has been left alone, although that could do with a tidy-up in SS4 after the switch to PSR-1/2. The command used was this: for match in '*.ss' '*.css' '*.scss' '*.html' '*.yml' '*.php' '*.js' '*.csv' '*.inc' '*.php5'; do find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" -exec sed -E -i '' 's/[[:space:]]+$//' {} \+ find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" | xargs perl -pi -e 's/ +$//' done
747 lines
14 KiB
SCSS
747 lines
14 KiB
SCSS
/**
|
|
* 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, .TreeDropdownField .treedropdownfield-panel {
|
|
.jstree {
|
|
> ul > li {
|
|
margin-left: 0px;
|
|
}
|
|
ul, li {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
list-style-type: none;
|
|
}
|
|
li {
|
|
min-height: 18px;
|
|
line-height: 25px;
|
|
white-space: nowrap;
|
|
margin-left: 18px;
|
|
min-width: 18px;
|
|
&.jstree-open > ul {
|
|
display: block;
|
|
}
|
|
&.jstree-closed > ul {
|
|
display: none;
|
|
}
|
|
// Expand/collapse arrows
|
|
& > .jstree-icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
ins {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0 0 0 0;
|
|
padding: 0;
|
|
float: left;
|
|
}
|
|
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;
|
|
&:focus,
|
|
&:active,
|
|
&:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
text-shadow:1px 1px 1px white;
|
|
}
|
|
ins {
|
|
height: 16px;
|
|
width: 12px;
|
|
&.jstree-checkbox {
|
|
width: 16px;
|
|
position: relative;
|
|
//Larger to help avoid accidental page loads when trying to click checkboxes
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: -3px;
|
|
top: -3px;
|
|
height: 22px;
|
|
width: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.jstree-real-checkbox {
|
|
display: none;
|
|
}
|
|
.jstree-wholerow-real {
|
|
position: relative;
|
|
z-index: 1;
|
|
li {
|
|
cursor: pointer;
|
|
}
|
|
a {
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
.jstree-wholerow {
|
|
position: relative;
|
|
z-index: 0;
|
|
height: 0;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
ul,li {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
width: 100%;
|
|
}
|
|
a, a:hover {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
text-indent: -9999px !important;
|
|
width: 100%;
|
|
border-right-width: 0px !important;
|
|
border-left-width: 0px !important;
|
|
}
|
|
ins,
|
|
span,
|
|
input {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.jstree-wholerow-span {
|
|
position: absolute;
|
|
left: 0;
|
|
margin: 0px;
|
|
padding: 0;
|
|
height: 18px;
|
|
border-width: 0;
|
|
padding: 0;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
// Custom styles
|
|
.jstree.jstree-focused {
|
|
background: none;
|
|
.jstree > ul {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
// Hide drag icons by default. Actual page icons
|
|
// are in nested <span>, not handled directly through jstree lib
|
|
a > .jstree-icon {
|
|
display: none;
|
|
}
|
|
|
|
// Show drag icons when draggable class is applied
|
|
.draggable a > .jstree-icon {
|
|
display: none;
|
|
cursor: move; // Fallback for IE users
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
cursor: grab;
|
|
|
|
&:active {
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
|
|
li.jstree-open > ul {
|
|
display: block;
|
|
margin-left: -13px;
|
|
li ul {
|
|
margin-left:2px;
|
|
}
|
|
}
|
|
li.jstree-closed > ul {
|
|
display: none;
|
|
}
|
|
|
|
.jstree-rtl {
|
|
a > .jstree-icon {
|
|
margin-left: 3px;
|
|
margin-right: 0;
|
|
}
|
|
li {
|
|
margin-left: 0;
|
|
margin-right: 18px;
|
|
}
|
|
> ul > li {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
.jstree-themeroller {
|
|
a {
|
|
padding: 0 2px;
|
|
}
|
|
.ui-icon {
|
|
overflow: visible;
|
|
}
|
|
.jstree-no-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#jstree-marker {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -30px;
|
|
background-repeat: no-repeat;
|
|
display: none;
|
|
line-height: 10px;
|
|
font-size: 12px;
|
|
height: 12px;
|
|
width: 8px;
|
|
z-index: 10001;
|
|
background-color: transparent;
|
|
text-shadow: 1px 1px 1px white;
|
|
color: black;
|
|
}
|
|
#jstree-marker-line {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -30px;
|
|
background-repeat: no-repeat;
|
|
display: none;
|
|
line-height: 0%;
|
|
font-size: 1px;
|
|
height: 1px;
|
|
width: 100px;
|
|
z-index: 10000;
|
|
background-color: #456c43;
|
|
cursor: pointer;
|
|
border: 1px solid #eeeeee;
|
|
border-left: 0;
|
|
-moz-box-shadow: 0px 0px 2px #666;
|
|
-webkit-box-shadow: 0px 0px 2px #666;
|
|
box-shadow: 0px 0px 2px #666;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
-webkit-border-radius: 1px;
|
|
}
|
|
|
|
#vakata-contextmenu {
|
|
display: block;
|
|
visibility: hidden;
|
|
left: 0;
|
|
top: -200px;
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 180px;
|
|
background: #FFF;
|
|
border: 1px solid silver;
|
|
z-index: 10000; *width:180px;
|
|
@include box-shadow(0 0 10px #CCC);
|
|
&::before {
|
|
content:"";
|
|
display:block; /* reduce the damage in FF3.0 */
|
|
position:absolute;
|
|
top: -10px;
|
|
left: 24px;
|
|
width:0;
|
|
border-width: 0 6px 10px 6px ;
|
|
border-color: #FFF transparent;
|
|
border-style: solid;
|
|
z-index: 10000;
|
|
}
|
|
&::after {
|
|
content:"";
|
|
display:block; /* reduce the damage in FF3.0 */
|
|
position:absolute;
|
|
top: -11px;
|
|
left: 23px;
|
|
width:0;
|
|
border-width: 0 7px 11px 7px ;
|
|
border-color: #CCC transparent;
|
|
border-style: solid;
|
|
}
|
|
ul {
|
|
min-width: 180px;
|
|
*width:180px;
|
|
}
|
|
ul,li {
|
|
margin: 0;
|
|
padding: 0 ;
|
|
list-style-type: none;
|
|
display: block;
|
|
}
|
|
li {
|
|
line-height: 20px;
|
|
min-height: 23px;
|
|
position: relative;
|
|
padding: 0px;
|
|
&:last-child {
|
|
margin-bottom: 1px;
|
|
}
|
|
a {
|
|
padding: 1px 10px;
|
|
line-height: 23px;
|
|
display: block;
|
|
text-decoration: none;
|
|
margin: 1px 1px 0 1px;
|
|
border: 0;
|
|
&:hover {
|
|
padding: 1px 10px;
|
|
background: #3875d7;
|
|
@include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
|
|
color: #FFF;
|
|
border: none;
|
|
}
|
|
}
|
|
ins {
|
|
float: left;
|
|
width: 0;
|
|
height: 0;
|
|
text-decoration: none;
|
|
margin-right: 2px;
|
|
}
|
|
.jstree-pageicon {
|
|
margin-top: 3px;
|
|
margin-right: 5px;
|
|
}
|
|
&.vakata-hover > a {
|
|
padding: 1px 10px;
|
|
background: #3875d7;
|
|
@include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
|
|
color: #FFF;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#vakata-contextmenu {
|
|
.right {
|
|
right: 100%;
|
|
left: auto;
|
|
}
|
|
.bottom {
|
|
bottom: -1px;
|
|
top: auto;
|
|
}
|
|
li ul {
|
|
display: none;
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 100%;
|
|
background: #FFF;
|
|
border: 1px solid silver;
|
|
@include box-shadow(0 0 10px #CCC);
|
|
&.col-2{
|
|
width:180px * 2; // 2x the size of the original ul
|
|
li {
|
|
width:50%;
|
|
}
|
|
}
|
|
&.col-3{
|
|
width:180px * 3; // 3x the size of the original ul
|
|
li {
|
|
width:33%;
|
|
}
|
|
}
|
|
li {
|
|
min-width:180px;
|
|
float:left;
|
|
a {
|
|
@include hide-text-overflow;
|
|
}
|
|
}
|
|
}
|
|
li {
|
|
&.vakata-separator {
|
|
min-height: 0;
|
|
height: 1px;
|
|
line-height: 1px;
|
|
font-size: 1px;
|
|
overflow: hidden;
|
|
margin: 0 2px;
|
|
background: #ccc;
|
|
padding:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#vakata-dragged {
|
|
display: block;
|
|
margin: 0 0 0 0;
|
|
padding: 4px 4px 4px 24px;
|
|
position: absolute;
|
|
top: -2000px;
|
|
line-height: 16px;
|
|
z-index: 10000;
|
|
ins {
|
|
display: block;
|
|
text-decoration: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0 0 0 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
}
|
|
.jstree-ok {
|
|
background: green;
|
|
}
|
|
.jstree-invalid {
|
|
background: red;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.jstree {
|
|
li, .jstree ins {
|
|
background:none;
|
|
}
|
|
.jstree-unchecked, .jstree-checked, .jstree-undetermined {
|
|
> a > .jstree-checkbox {
|
|
margin-right:3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tree-holder, .cms-tree {
|
|
&.jstree {
|
|
li {
|
|
padding: 0px;
|
|
clear: left;
|
|
&.Root {
|
|
& strong {
|
|
font-weight: bold;
|
|
padding-left: 1px;
|
|
}
|
|
|
|
& > a .jstree-icon {
|
|
background-position: -56px -36px;
|
|
}
|
|
}
|
|
&.status-deletedonlive,
|
|
&.status-archived {
|
|
> a, > a:link {
|
|
.text {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
&.jstree-checked {
|
|
> a, > a:link {
|
|
background-color: $color-cms-batchactions-menu-selected-background;
|
|
}
|
|
}
|
|
&.disabled,
|
|
&.edit-disabled {
|
|
> a, > a:link {
|
|
color: $color-text-disabled;
|
|
background-color: transparent;
|
|
cursor: default;
|
|
|
|
> .jstree-checkbox {
|
|
background-position: -57px -54px;
|
|
}
|
|
}
|
|
}
|
|
&.readonly {
|
|
color: $color-text-disabled;
|
|
padding-left: 18px;
|
|
|
|
// Don't show drag icons or required spacing
|
|
a, a:link {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.jstree-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
a, a:link {
|
|
color: $color-text-blue-link;
|
|
padding: 3px 6px 3px 6px;
|
|
border: none;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
ins {
|
|
background-color: transparent;
|
|
background-image: url(../images/sitetree_ss_default_icons.png);
|
|
}
|
|
span.badge {
|
|
clear: both;
|
|
text-transform: uppercase;
|
|
text-shadow: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 3px 3px 1px;
|
|
font-size: 0.75em;
|
|
line-height: 1em;
|
|
margin-left: 3px;
|
|
margin-top: -1px;
|
|
@include border-radius(2px, 2px);
|
|
}
|
|
|
|
/* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
|
|
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;
|
|
@include border-radius(2px, 2px);
|
|
color: #7E7470;
|
|
border: 1px solid #C9B800;
|
|
background-color: #FFF0BC;
|
|
|
|
&: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;
|
|
}
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
.jstree-hovered {
|
|
text-shadow: none;
|
|
text-decoration: none;
|
|
}
|
|
.jstree-closed > ins {
|
|
background-position:2px -1px;
|
|
}
|
|
.jstree-open > ins {
|
|
background-position:-18px -1px;
|
|
}
|
|
}
|
|
|
|
// Applied to trees when displaying filter / search results.
|
|
&.filtered-list {
|
|
margin-top: $grid-y;
|
|
|
|
li:not(.filtered-item) > a {
|
|
color: $color-text-disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// For drag and drop icons to not appear whilst in multi-selection
|
|
.cms-tree {
|
|
&.jstree.draggable {
|
|
.jstree-no-checkboxes {
|
|
li {
|
|
a {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.jstree-hovered,
|
|
.jstree-clicked,
|
|
a:focus {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.jstree-hovered,
|
|
.jstree-clicked,
|
|
a:focus {
|
|
.jstree-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Override thirdparty themes
|
|
.jstree-default a .jstree-icon,
|
|
.jstree-default-rtl a .jstree-icon,
|
|
.jstree-classic a .jstree-icon,
|
|
.jstree-apple a .jstree-icon {
|
|
background-position:-60px -19px;
|
|
}
|
|
.jstree-apple a {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/**
|
|
* DEPRECATED:
|
|
* .cms-content-tools will be removed in 4.0
|
|
* Use .cms-content-filters instead.
|
|
*
|
|
* Ensure status is visible in sidebar
|
|
*/
|
|
.cms-content-tools .cms-tree.jstree {
|
|
li {
|
|
min-width: 187px;
|
|
}
|
|
a {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
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;
|
|
}
|
|
li.class-RedirectorPage > & {
|
|
background-position: 0 -16px;
|
|
}
|
|
li.class-VirtualPage > & {
|
|
background-position: 0 -32px;
|
|
}
|
|
li.class-ErrorPage > & {
|
|
background-position: 0 -112px;
|
|
}
|
|
}
|
|
|
|
/* Tree status labels and dots */
|
|
.jstree-apple .jstree-clicked,
|
|
.jstree-apple .jstree-hovered {
|
|
background: #ebfbff;
|
|
}
|
|
%tree-status-icon-before {
|
|
content:"";
|
|
display: block;
|
|
width:6px;
|
|
height: 6px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: #fce2d0;
|
|
border: 1px solid #fff;
|
|
border-radius: 100px;
|
|
}
|
|
@mixin tree-status-icon($label, $dotColor, $textColor, $bgColor) {
|
|
.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before {
|
|
@extend %tree-status-icon-before;
|
|
}
|
|
// Labels
|
|
.jstree .status-#{$label} > .jstree-hovered,
|
|
.jstree .status-#{$label} > .jstree-clicked,
|
|
.cms-tree.jstree span.badge.status-#{$label} {
|
|
background-color:$bgColor;
|
|
border-color:$textColor;
|
|
}
|
|
.cms-tree.jstree span.badge.status-#{$label} {
|
|
color: $textColor;
|
|
}
|
|
// Dots
|
|
.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before {
|
|
background-color:$dotColor;
|
|
@include box-shadow(0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px $textColor);
|
|
}
|
|
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-#{$label} {
|
|
@include box-shadow(0px 0px 6px 2px $bgColor);
|
|
}
|
|
}
|
|
@include tree-status-icon('addedtodraft', #ff7f22, #F46B00, #fff7f2);
|
|
@include tree-status-icon('modified', #fff2e8, #F46B00, #fff7f2);
|
|
@include tree-status-icon('archived', #5F7688, #455b6c, #f7f7f7);
|
|
@include tree-status-icon('deletedonlive', #f7f7f7, #455b6c, #f7f7f7);
|
|
@include tree-status-icon('removedfromdraft', #f7f7f7, #455b6c, #f7f7f7);
|
|
@include tree-status-icon('workflow-approval', #0070B4, #0070B4, #E8FAFF);
|
|
|
|
.cms-tree {
|
|
visibility: hidden; // enabled by JS to avoid layout glitches
|
|
&.multiple {
|
|
li > a {
|
|
// Hide draggable icon when multiselect is enabled
|
|
> .jstree-icon {
|
|
display: none;
|
|
// But show the checkbox
|
|
&.jstree-checkbox {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
li#record-0 {
|
|
// Hide checkbox on root node (shouldn't be selectable to avoid weird states when trying to e.g. remove it)
|
|
> a .jstree-checkbox {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.jstree-loading {
|
|
li#record-0 > .jstree-icon {
|
|
background: url(../images/throbber.gif) top left no-repeat;
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
.jstree-icon {
|
|
background-image: none !important;
|
|
}
|
|
.jstree-pageicon {
|
|
background: url(../images/throbber.gif) top left no-repeat;
|
|
}
|
|
}
|
|
}
|