archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Style jsTree

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-06 12:06:14 +02:00
parent 2777c37085
commit 278eebd235
1 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/styles/plugins/_jstree.sass
View File

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