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

Style tweaks to jstree

Browse Source
This commit is contained in:
Pablo Vazquez 2016-11-11 20:03:45 +01:00
parent bbb3f5c7c0
commit 9b469cee7d
3 changed files with 31 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/_config.sass
View File

@ -7,6 +7,7 @@ $color-background-nav-light: hsl(hue($color-background), 20%, 35%)
$color-background-nav-dark: hsl(hue($color-background), 20%, 15%)
$color-background-active: #dff5f6 // background colour for active items.
$color-background-active-dark: hsl(hue($color-background-active), 50%, 50%)
$font-body: 'Roboto'
$font-headings: 'Lato'

20
src/styles/_project.sass
View File

@ -30,7 +30,6 @@
z-index: $z-index-base + 5
width: $project_nav-width
overflow: hidden
background-color: $color-background-nav
+media-xs
display: block
@ -40,7 +39,6 @@
#project_sidebar
width: $project-sidebar-width
background-color: $color-background-nav-dark
z-index: $z-index-base + 4
+media-xs
@ -166,7 +164,7 @@
visibility: visible
width: $project_nav-width
position: relative
background-color: $color-background-nav
background-color: $color-background-light
color: white
left: 0
@ -485,8 +483,8 @@ ul.project-edit-tools
margin-right: 5px
&:hover
background-color: $color-primary
border-color: darken($color-primary, 5%)
background-color: $color-background-active-dark
border-color: darken($color-background-active-dark, 5%)
color: $color-text-light
text-decoration: none
@ -741,7 +739,7 @@ ul.project_nav-edit-list
padding: 5px 0 // some padding on top/bottom of jstree
position: relative // for scrollbar alignment
margin-top: $project_header-height
background-color: $color-background-nav
background-color: $color-background-light
&.edit
margin-top: 0
@ -755,13 +753,21 @@ ul.project_nav-edit-list
top: 0
right: 0
bottom: 0
z-index: $z-index-base + 4
z-index: $z-index-base
cursor: w-resize
user-select: none
+media-xs
display: none
&:before
content: ' '
position: absolute
top: 0
right: 0
bottom: 0
width: 2px
background-color: $color-background
/* Node Context */
=project-node-title

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

@ -1,8 +1,9 @@
/* jsTree overrides */
$tree-color-text: $color-text-light-primary
$tree-color-highlight: white
$tree-color-highlight-background: $color-primary
$tree-color-text: $color-text-dark
$tree-color-highlight: hsl(hue($color-background-active), 50%, 50%)
$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%)
$tree-color-highlight-background-text: white
.jstree-default
@ -14,7 +15,7 @@ $tree-color-highlight-background: $color-primary
color: $tree-color-text
background-image: none !important
transition: color 100ms ease-in-out
transition: color 100ms ease-in-out, background-color 150ms ease-in-out
+media-xs
width: 100%
@ -37,7 +38,6 @@ $tree-color-highlight-background: $color-primary
.jstree-icon.jstree-themeicon
opacity: 1
width: 24px !important
color: $color-text-light-primary
&.pi-image
font-size: .85em !important
@ -62,17 +62,7 @@ $tree-color-highlight-background: $color-primary
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
border-left: thin solid $color-text-dark-hint
/* Closed Folder */
&.jstree-closed
@ -90,7 +80,7 @@ $tree-color-highlight-background: $color-primary
.jstree-anchor
width: 100%
padding-left: 28px
padding-right: 5px
padding-right: 10px
height: inherit
line-height: 26px
white-space: nowrap
@ -106,14 +96,20 @@ $tree-color-highlight-background: $color-primary
.jstree-themeicon
margin: 0 !important
font-size: 95% !important
color: $color-text-dark-secondary
/* Selected item */
&.jstree-clicked
background-color: $tree-color-highlight-background !important
color: $tree-color-highlight-background-text !important
.jstree-ocl, .jstree-themeicon
color: $tree-color-highlight-background-text !important
&:after
content: '\e83a'
font-family: 'pillar-font'
color: $tree-color-highlight
color: $tree-color-highlight-background-text
position: absolute
right: 7px
top: 1px
@ -125,7 +121,7 @@ $tree-color-highlight-background: $color-primary
/* hover an active item */
&.jstree-hovered,
&.jstree-hovered .jstree-icon.jstree-themeicon
color: lighten($tree-color-highlight, 5%) !important
color: $tree-color-highlight-background-text !important
box-shadow: none
.jstree-hovered
@ -137,7 +133,7 @@ $tree-color-highlight-background: $color-primary
/* active item text + icon */
.jstree-clicked,
.jstree-clicked > .jstree-ocl
color: $tree-color-highlight !important
color: $tree-color-highlight-background-text !important
background-color: transparent !important
border-radius: 0
box-shadow: none
@ -154,7 +150,7 @@ $tree-color-highlight-background: $color-primary
.jstree-hovered .jstree-ocl
background-color: transparent !important
box-shadow: none
color: white !important
color: $tree-color-highlight-background-text !important
/* Folder that you click to collapse/expand */
.jstree-icon
@ -192,9 +188,6 @@ $tree-color-highlight-background: $color-primary
.jstree-default .jstree-hovered .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
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .7) !important
@ -202,26 +195,6 @@ 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
a.jstree-anchor+ul
border:
top: none !important
bottom: none !important
a.jstree-anchor
color: darken($color-text-light-primary, 10%) !important
&.jstree-hovered,
&.jstree-clicked
color: white !important
&+ul
a.jstree-anchor
color: darken($color-text-light-primary, 10%) !important
&.jstree-hovered,
&.jstree-clicked
color: white !important
i.jstree-icon.jstree-ocl
height: 26px !important
color: rgba($tree-color-text, .5) !important