Style jsTree

This commit is contained in:
Pablo Vazquez 2018-09-06 12:06:14 +02:00
parent 2777c37085
commit 278eebd235

View File

@ -1,8 +1,8 @@
/* jsTree overrides */
$tree-color-text: $color-text-dark-primary
$tree-color-highlight: $color-primary-accent
$tree-color-highlight-background: $color-primary-accent
$tree-color-highlight-background-text: $white
$tree-color-highlight-background: $white
$tree-color-highlight-background-text: $primary
.jstree-default
/* list item */
@ -62,48 +62,48 @@ $tree-color-highlight-background-text: $white
&.jstree-open
/* Text of children for an open tree (like a folder) */
.jstree-children > .jstree-node
padding-left: 15px !important
padding-left: 16px !important
.jstree-icon:empty
left: 20px !important
// Tweaks for specific icons
&.pi-file-archive
left: 22px !important
left: 25px !important
&.pi-folder
left: 21px !important
left: 20px !important
font-size: .9em !important
&.pi-film-thick
left: 22px !important
&.pi-splay
left: 20px !important
font-size: .85em !important
.jstree-anchor
box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2)
// 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
opacity: 0
min-width: 30px
float: left
/* The text of the last level item */
.jstree-anchor
+media-xs
width: 98%
padding: 0 !important
width: 98%
border: none
font-size: 13px
height: inherit
line-height: 26px
line-height: 24px
overflow: hidden
padding-left: 28px
padding-right: 10px
text-overflow: ellipsis
transition: background-color 100ms ease-in-out
white-space: nowrap
width: 100%
@ -111,7 +111,7 @@ $tree-color-highlight-background-text: $white
&:after
content: '\e83a' !important
font-family: 'pillar-font'
color: white
color: $tree-color-highlight-background-text
display: none
position: absolute
right: 7px
@ -119,31 +119,31 @@ $tree-color-highlight-background-text: $white
// Icon, not selected
.jstree-icon
color: $color-text-dark-secondary
font-size: 95% !important
color: $tree-color-text
margin: 0 !important
/* Selected item */
&.jstree-clicked
background-color: $tree-color-highlight-background !important
color: white !important
color: $tree-color-highlight-background-text !important
font-weight: bold
&:after
display: block
color: white !important
color: $tree-color-highlight-background-text !important
.jstree-ocl,
.jstree-icon
color: white
color: $tree-color-highlight-background-text
/* hover an active item */
&.jstree-hovered
background-color: lighten($tree-color-highlight-background, 10%) !important
box-shadow: none
color: white !important
color: $tree-color-highlight-background-text !important
&.jstree-hovered .jstree-icon
color: white !important
color: $tree-color-highlight-background-text !important
.jstree-hovered
background-color: rgba($tree-color-highlight, .1) !important
@ -182,8 +182,8 @@ $tree-color-highlight-background-text: $white
position: absolute
&:empty
line-height: 26px
left: 5px
line-height: 24px
left: 3px
&.is_subscriber
.jstree-node
@ -267,7 +267,7 @@ $tree-color-highlight-background-text: $white
.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: 28px !important
padding-left: 24px !important
/* hovered text */
.jstree-default .jstree-hovered,
@ -278,11 +278,11 @@ $tree-color-highlight-background-text: $white
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .8) !important
color: white !important
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
background-color: rgba($tree-color-highlight-background, .8) !important
color: white !important
color: $tree-color-highlight-background-text !important
i.jstree-icon.jstree-ocl
color: rgba($tree-color-text, .5) !important