Small refactor of jstree style
Still needs some work but it's a bit cleaner
This commit is contained in:
@@ -5,135 +5,111 @@ $tree-color-highlight: white
|
|||||||
$tree-color-highlight-background: $color-primary
|
$tree-color-highlight-background: $color-primary
|
||||||
|
|
||||||
.jstree-default
|
.jstree-default
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
.jstree-loading
|
/* list item */
|
||||||
padding: 5px
|
.jstree-node
|
||||||
color: $color-text-light-secondary
|
position: relative
|
||||||
|
|
||||||
.jstree-default-responsive .jstree-anchor
|
|
||||||
+media-sm
|
|
||||||
font-weight: normal !important
|
|
||||||
text-shadow: none !important
|
|
||||||
|
|
||||||
.jstree-default .jstree-node
|
|
||||||
max-width: 100% // Needed for ellipsis on long names
|
max-width: 100% // Needed for ellipsis on long names
|
||||||
padding: 0 !important
|
|
||||||
margin: 0 !important
|
margin: 0 !important
|
||||||
font-weight: 400 !important
|
|
||||||
color: $tree-color-text
|
color: $tree-color-text
|
||||||
min-height: 12px !important
|
background-image: none !important
|
||||||
line-height: 12px !important
|
|
||||||
|
transition: color 100ms ease-in-out
|
||||||
|
|
||||||
+media-xs
|
+media-xs
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
.ps-active-y
|
&[data-node-type="page"]
|
||||||
.jstree-default .jstree-node
|
font-weight: bold
|
||||||
max-width: 97%
|
|
||||||
|
|
||||||
.jstree-node.jstree-open
|
.jstree-anchor
|
||||||
background-color: darken($color-background-nav, 2%) !important
|
padding: 3px 8px
|
||||||
|
.jstree-icon.jstree-themeicon
|
||||||
|
display: none
|
||||||
|
|
||||||
.jstree-node.jstree-open > .jstree-anchor:first-of-type
|
/* Brief moment when a node is being loaded */
|
||||||
|
&.jstree-loading
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
/* Items at top level */
|
||||||
|
&.jstree-leaf
|
||||||
|
// border-left: 2px solid lighten($color-background-nav, 15%)
|
||||||
|
.jstree-icon.jstree-themeicon
|
||||||
|
opacity: 1
|
||||||
|
width: 24px !important
|
||||||
|
color: $color-text-light-primary
|
||||||
|
|
||||||
|
&.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: 15px !important
|
||||||
|
|
||||||
|
.jstree-icon:empty
|
||||||
|
left: 20px !important
|
||||||
|
|
||||||
|
// Tweaks for specific icons
|
||||||
|
&.pi-file-archive
|
||||||
|
left: 22px !important
|
||||||
|
&.pi-folder
|
||||||
|
left: 21px !important
|
||||||
|
font-size: .9em !important
|
||||||
|
&.pi-film-thick
|
||||||
|
left: 22px !important
|
||||||
|
font-size: .85em !important
|
||||||
|
|
||||||
|
.jstree-anchor
|
||||||
|
border-left: thin solid lighten($color-background-nav, 5%)
|
||||||
|
|
||||||
|
/* color of the icon on an expanded item, like a folder */
|
||||||
|
.jstree-ocl,
|
||||||
|
.jstree-anchor,
|
||||||
|
.jstree-ocl .jstree-icon.jstree-themeicon,
|
||||||
|
.jstree-anchor .jstree-icon.jstree-themeicon
|
||||||
|
color: $tree-color-highlight !important
|
||||||
|
|
||||||
|
.jstree-anchor:first-of-type
|
||||||
color: white !important
|
color: white !important
|
||||||
background-color: darken($color-background-nav, 2%) !important
|
|
||||||
|
|
||||||
.jstree-default .jstree-node.jstree-open,
|
/* Closed Folder */
|
||||||
.jstree-default .jstree-node.jstree-leaf
|
&.jstree-closed
|
||||||
// border-left: 2px solid lighten($color-background-nav, 15%) /* Whatever after the top level */
|
// border-left: 2px solid lighten($color-background-nav, 20%)
|
||||||
|
|
||||||
.jstree-default .jstree-node.jstree-closed
|
&.jstree-open .jstree-icon.jstree-ocl,
|
||||||
// border-left: 2px solid lighten($color-background-nav, 20%) /* Closed Folder */
|
&.jstree-closed .jstree-icon.jstree-ocl
|
||||||
|
|
||||||
.jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl,
|
|
||||||
.jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl
|
|
||||||
position: absolute
|
position: absolute
|
||||||
z-index: 1
|
z-index: 1
|
||||||
opacity: 0
|
opacity: 0
|
||||||
min-width: 30px
|
min-width: 30px
|
||||||
float: left
|
float: left
|
||||||
|
|
||||||
.jstree-default .jstree-ocl:before
|
/* The text of the last level item */
|
||||||
+media-xs
|
.jstree-anchor
|
||||||
font-weight: bold
|
|
||||||
font-size: 100%
|
|
||||||
top: 10%
|
|
||||||
left: 46%
|
|
||||||
|
|
||||||
|
|
||||||
.jstree-anchor
|
|
||||||
padding-right: 5px
|
|
||||||
|
|
||||||
+media-xs
|
|
||||||
width: 98%
|
|
||||||
padding: 0 !important
|
|
||||||
|
|
||||||
.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
|
|
||||||
|
|
||||||
.jstree .jstree-open > .jstree-children
|
|
||||||
padding-top: 0 !important
|
|
||||||
|
|
||||||
.jstree-default .jstree-anchor /* The text of the last level item */
|
|
||||||
width: 100%
|
width: 100%
|
||||||
padding-left: 28px !important
|
padding-left: 28px
|
||||||
height: inherit !important
|
padding-right: 5px
|
||||||
line-height: 26px !important
|
height: inherit
|
||||||
|
line-height: 26px
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
border-bottom: thin solid transparent
|
border-bottom: thin solid transparent
|
||||||
transition: none
|
transition: none
|
||||||
|
|
||||||
.jstree-default li
|
+media-xs
|
||||||
transition: none
|
width: 98%
|
||||||
|
padding: 0 !important
|
||||||
|
|
||||||
/* expanded item, like a folder */
|
.jstree-themeicon
|
||||||
.jstree-default .jstree-open > .jstree-ocl,
|
margin: 0 !important
|
||||||
.jstree-default .jstree-open > .jstree-anchor,
|
font-size: 95% !important
|
||||||
.jstree-default .jstree-open > .jstree-ocl .jstree-icon.jstree-themeicon,
|
|
||||||
.jstree-default .jstree-open > .jstree-anchor .jstree-icon.jstree-themeicon
|
|
||||||
color: $tree-color-text !important
|
|
||||||
|
|
||||||
/* active item text */
|
/* Selected item */
|
||||||
.jstree-default .jstree-clicked,
|
&.jstree-clicked
|
||||||
.jstree-default .jstree-clicked > .jstree-ocl
|
background-color: $tree-color-highlight-background !important
|
||||||
background-color: transparent !important
|
|
||||||
border-radius: 0
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
border-bottom: thin solid transparent
|
|
||||||
// max-width: 95%
|
|
||||||
|
|
||||||
.jstree-default .jstree-leaf .jstree-clicked
|
|
||||||
width: 100% !important
|
|
||||||
|
|
||||||
/* hovered text */
|
|
||||||
.jstree-default .jstree-hovered,
|
|
||||||
.jstree-default .jstree-open .jstree-hovered,
|
|
||||||
.jstree-default .jstree-hovered .jstree-icon.jstree-themeicon
|
|
||||||
color: $tree-color-highlight !important
|
|
||||||
|
|
||||||
.jstree-default .jstree-hovered
|
|
||||||
background-color: rgba($tree-color-highlight, .1) !important
|
|
||||||
|
|
||||||
|
|
||||||
/* active item text + icon */
|
|
||||||
.jstree-default .jstree-clicked,
|
|
||||||
.jstree-default .jstree-clicked > .jstree-ocl,
|
|
||||||
.jstree-default .jstree-clicked .jstree-icon.jstree-themeicon
|
|
||||||
color: $tree-color-highlight !important
|
|
||||||
|
|
||||||
.jstree-leaf[aria-selected='true']
|
|
||||||
a.jstree-anchor.jstree-clicked
|
|
||||||
background-color: rgba($tree-color-highlight-background, .5) !important
|
|
||||||
padding-left: 28px !important
|
|
||||||
|
|
||||||
.jstree-default li[aria-selected='true']
|
|
||||||
|
|
||||||
a.jstree-anchor
|
|
||||||
padding-right: 15px
|
|
||||||
&:after
|
&:after
|
||||||
content: '\e83a'
|
content: '\e83a'
|
||||||
font-family: 'pillar-font'
|
font-family: 'pillar-font'
|
||||||
@@ -146,9 +122,77 @@ $tree-color-highlight-background: $color-primary
|
|||||||
a.jstree-anchor:after
|
a.jstree-anchor:after
|
||||||
content: ''
|
content: ''
|
||||||
|
|
||||||
.jstree-default li[aria-expanded='true']
|
/* hover an active item */
|
||||||
background-color: transparent
|
&.jstree-hovered,
|
||||||
|
&.jstree-hovered .jstree-icon.jstree-themeicon
|
||||||
|
color: lighten($tree-color-highlight, 5%) !important
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
.jstree-hovered
|
||||||
|
background-color: rgba($tree-color-highlight, .1) !important
|
||||||
|
|
||||||
|
.jstree-leaf .jstree-clicked
|
||||||
|
width: 100% !important
|
||||||
|
|
||||||
|
/* active item text + icon */
|
||||||
|
.jstree-clicked,
|
||||||
|
.jstree-clicked > .jstree-ocl
|
||||||
|
color: $tree-color-highlight !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: white !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: 26px
|
||||||
|
left: 5px
|
||||||
|
|
||||||
|
.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: 28px !important
|
||||||
|
|
||||||
|
/* hovered text */
|
||||||
|
.jstree-default .jstree-hovered,
|
||||||
|
.jstree-default .jstree-open .jstree-hovered,
|
||||||
|
.jstree-default .jstree-hovered .jstree-icon.jstree-themeicon
|
||||||
|
color: $tree-color-highlight !important
|
||||||
|
|
||||||
|
.jstree-leaf[aria-selected='true']
|
||||||
a.jstree-anchor.jstree-clicked
|
a.jstree-anchor.jstree-clicked
|
||||||
background-color: rgba($tree-color-highlight-background, .5) !important
|
background-color: rgba($tree-color-highlight-background, .5) !important
|
||||||
|
|
||||||
@@ -177,35 +221,6 @@ a.jstree-anchor+ul
|
|||||||
&.jstree-clicked
|
&.jstree-clicked
|
||||||
color: white !important
|
color: white !important
|
||||||
|
|
||||||
/* hover an active item */
|
|
||||||
.jstree-default .jstree-clicked.jstree-hovered,
|
|
||||||
.jstree-default .jstree-clicked.jstree-hovered .jstree-icon.jstree-themeicon
|
|
||||||
color: lighten($tree-color-highlight, 5%) !important
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
.jstree-anchor > .jstree-themeicon
|
|
||||||
margin-right: 10px !important
|
|
||||||
margin-left: 20px !important
|
|
||||||
|
|
||||||
.jstree-default .jstree-hovered,
|
|
||||||
.jstree-default .jstree-hovered .jstree-ocl
|
|
||||||
background-color: transparent !important
|
|
||||||
box-shadow: none
|
|
||||||
color: white !important
|
|
||||||
|
|
||||||
.jstree-default .jstree-hovered
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
.jstree-default .jstree-node,
|
|
||||||
.jstree-default .jstree-icon
|
|
||||||
background-image: none !important
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.jstree-default .jstree-icon /* Folder that you click to collapse/expand */
|
|
||||||
width: 20px !important
|
|
||||||
text-align: left !important
|
|
||||||
background-color: transparent !important
|
|
||||||
position: absolute
|
|
||||||
|
|
||||||
i.jstree-icon.jstree-ocl
|
i.jstree-icon.jstree-ocl
|
||||||
height: 26px !important
|
height: 26px !important
|
||||||
@@ -213,55 +228,7 @@ i.jstree-icon.jstree-ocl
|
|||||||
+media-xs
|
+media-xs
|
||||||
height: 40px !important
|
height: 40px !important
|
||||||
|
|
||||||
.jstree-default .jstree-icon:empty
|
|
||||||
line-height: 26px
|
|
||||||
left: 5px
|
|
||||||
|
|
||||||
.jstree-children .jstree-open i.jstree-icon.jstree-ocl
|
.jstree-children .jstree-open i.jstree-icon.jstree-ocl
|
||||||
height: 26px !important
|
height: 26px !important
|
||||||
|
|
||||||
.jstree-anchor > .jstree-themeicon
|
|
||||||
margin-right: 3px !important
|
|
||||||
margin-left: 0 !important
|
|
||||||
color: rgba($tree-color-text, .7) !important
|
|
||||||
font-size: 95% !important
|
|
||||||
|
|
||||||
.jstree-open > .jstree-anchor > .jstree-themeicon
|
|
||||||
color: $color-primary !important
|
|
||||||
|
|
||||||
.jstree-leaf > .jstree-clicked > .jstree-themeicon
|
|
||||||
color: $color-secondary !important
|
|
||||||
|
|
||||||
.jstree-leaf .jstree-icon /* Icon of the files (not nodes) */
|
|
||||||
opacity: 0
|
|
||||||
width: 0px !important
|
|
||||||
|
|
||||||
.jstree-leaf .jstree-icon.jstree-themeicon
|
|
||||||
opacity: 1
|
|
||||||
width: 24px !important
|
|
||||||
color: lighten($color-text, 30%) !important
|
|
||||||
|
|
||||||
&.pi-image
|
|
||||||
font-size: .85em !important
|
|
||||||
|
|
||||||
.jstree .jstree-open > .jstree-children > .jstree-node
|
|
||||||
padding-left: 15px !important
|
|
||||||
|
|
||||||
.jstree-icon:empty
|
|
||||||
left: 20px !important
|
|
||||||
|
|
||||||
// Tweaks for specific icons
|
|
||||||
&.pi-file-archive
|
|
||||||
left: 22px !important
|
|
||||||
&.pi-folder
|
|
||||||
left: 21px !important
|
|
||||||
font-size: .9em !important
|
|
||||||
&.pi-film-thick
|
|
||||||
left: 22px !important
|
|
||||||
font-size: .85em !important
|
|
||||||
|
|
||||||
.jstree-anchor
|
|
||||||
border-left: thin solid lighten($color-background-nav, 5%)
|
|
||||||
|
|
||||||
|
|
||||||
/* /jsTree overrides */
|
/* /jsTree overrides */
|
||||||
|
|||||||
Reference in New Issue
Block a user