232 lines
5.1 KiB
Sass
232 lines
5.1 KiB
Sass
/* jsTree overrides */
|
|
$tree-color-text: $color-text-dark-primary
|
|
$tree-color-highlight: $color-primary-accent
|
|
$tree-color-highlight-background: $white
|
|
$tree-color-highlight-background-text: $primary
|
|
|
|
.jstree-default
|
|
/* list item */
|
|
.jstree-node
|
|
+media-xs
|
|
width: 100%
|
|
background-image: none !important
|
|
border: none
|
|
color: $tree-color-text
|
|
margin: 0 !important
|
|
max-width: 100% // Needed for ellipsis on long names
|
|
position: relative
|
|
|
|
&[data-node-type="asset"],
|
|
&[data-node-type="texture"],
|
|
&[data-node-type="hdri"]
|
|
.jstree-anchor
|
|
padding-right: 20px
|
|
|
|
&[is_free='true']
|
|
.jstree-anchor
|
|
padding-right: initial
|
|
|
|
&:after
|
|
color: $tree-color-highlight
|
|
content: '\e84e' !important
|
|
display: block
|
|
|
|
&[data-node-type="page"],
|
|
&[data-node-type="blog"]
|
|
font-weight: bold
|
|
|
|
.jstree-anchor
|
|
padding: 0 6px
|
|
|
|
&:after
|
|
top: 3px !important
|
|
|
|
.jstree-icon
|
|
display: none
|
|
|
|
/* Brief moment when a node is being loaded */
|
|
&.jstree-loading
|
|
padding: 0
|
|
|
|
/* Items at top level */
|
|
&.jstree-leaf
|
|
.jstree-icon
|
|
opacity: 1
|
|
width: 24px !important
|
|
|
|
&.pi-image
|
|
font-size: .85em !important
|
|
|
|
/* Open Folder */
|
|
&.jstree-open
|
|
/* Text of children for an open tree (like a folder) */
|
|
.jstree-children > .jstree-node
|
|
padding-left: 16px !important
|
|
|
|
.jstree-icon:empty
|
|
left: 20px !important
|
|
|
|
// Tweaks for specific icons
|
|
&.pi-file-archive
|
|
left: 25px !important
|
|
&.pi-folder
|
|
left: 20px !important
|
|
font-size: .9em !important
|
|
&.pi-splay
|
|
left: 20px !important
|
|
font-size: .85em !important
|
|
|
|
.jstree-anchor
|
|
// box-shadow: inset 1px 0 0 0 $color-background
|
|
|
|
/* Closed Folder */
|
|
// &.jstree-closed
|
|
|
|
&.jstree-open .jstree-icon.jstree-ocl,
|
|
&.jstree-closed .jstree-icon.jstree-ocl
|
|
float: left
|
|
min-width: 30px
|
|
opacity: 0
|
|
position: absolute
|
|
z-index: 1
|
|
|
|
/* The text of the last level item */
|
|
.jstree-anchor
|
|
+media-xs
|
|
padding: 0 !important
|
|
width: 98%
|
|
border: none
|
|
font-size: 13px
|
|
height: inherit
|
|
line-height: 24px
|
|
overflow: hidden
|
|
padding-left: 28px
|
|
padding-right: 10px
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
width: 100%
|
|
|
|
// Little arrow on the right
|
|
&:after
|
|
content: '\e83a' !important
|
|
font-family: 'pillar-font'
|
|
color: $tree-color-highlight-background-text
|
|
display: none
|
|
position: absolute
|
|
right: 7px
|
|
top: 1px
|
|
|
|
// Icon, not selected
|
|
.jstree-icon
|
|
color: $tree-color-text
|
|
margin: 0 !important
|
|
|
|
/* Selected item */
|
|
&.jstree-clicked
|
|
color: $tree-color-highlight-background-text !important
|
|
font-weight: bold
|
|
|
|
&:after
|
|
display: block
|
|
color: $tree-color-highlight-background-text !important
|
|
|
|
.jstree-ocl,
|
|
.jstree-icon
|
|
color: $tree-color-highlight-background-text
|
|
|
|
/* hover an active item */
|
|
&.jstree-hovered
|
|
box-shadow: none
|
|
color: $tree-color-highlight-background-text !important
|
|
|
|
&.jstree-hovered .jstree-icon
|
|
color: $tree-color-highlight-background-text !important
|
|
|
|
.jstree-leaf .jstree-clicked
|
|
width: 100% !important
|
|
|
|
/* active item text + icon */
|
|
.jstree-clicked,
|
|
.jstree-clicked > .jstree-ocl
|
|
color: $tree-color-highlight-background-text !important
|
|
background-color: transparent !important
|
|
border-radius: 0
|
|
box-shadow: none
|
|
border-bottom: thin solid transparent
|
|
|
|
.jstree-ocl:before
|
|
+media-xs
|
|
font-weight: bold
|
|
font-size: 100%
|
|
top: 10%
|
|
left: 46%
|
|
|
|
.jstree-hovered,
|
|
.jstree-hovered .jstree-ocl
|
|
background-color: transparent !important
|
|
box-shadow: none
|
|
color: $tree-color-highlight-background-text !important
|
|
|
|
/* Folder that you click to collapse/expand */
|
|
.jstree-icon
|
|
background-image: none !important
|
|
position: relative
|
|
width: 20px !important
|
|
text-align: left !important
|
|
position: absolute
|
|
|
|
&:empty
|
|
line-height: 24px
|
|
left: 3px
|
|
|
|
&.is_subscriber
|
|
.jstree-node
|
|
&[is_free='true']
|
|
.jstree-anchor
|
|
padding-right: initial
|
|
|
|
&:after
|
|
display: none !important
|
|
|
|
.jstree-loading
|
|
padding: 5px
|
|
color: $color-text-light-secondary
|
|
|
|
.jstree-default-responsive
|
|
.jstree-anchor
|
|
+media-sm
|
|
font-weight: normal !important
|
|
text-shadow: none !important
|
|
|
|
.ps-active-y
|
|
.jstree-default .jstree-node
|
|
max-width: 97%
|
|
|
|
.jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl + .jstree-anchor,
|
|
.jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl + .jstree-anchor
|
|
padding-left: 24px !important
|
|
|
|
/* hovered text */
|
|
.jstree-default .jstree-hovered,
|
|
.jstree-default .jstree-open .jstree-hovered,
|
|
.jstree-default .jstree-hovered .jstree-icon
|
|
color: $tree-color-highlight !important
|
|
|
|
|
|
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
|
|
color: $tree-color-highlight-background-text !important
|
|
|
|
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
|
|
color: $tree-color-highlight-background-text !important
|
|
|
|
i.jstree-icon.jstree-ocl
|
|
color: rgba($tree-color-text, .5) !important
|
|
height: 26px !important
|
|
+media-xs
|
|
height: 40px !important
|
|
|
|
.jstree-children .jstree-open i.jstree-icon.jstree-ocl
|
|
height: 26px !important
|
|
|
|
/* /jsTree overrides */
|