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
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-nav-dark: hsl(hue($color-background), 20%, 15%)
$color-background-active: #dff5f6 // background colour for active items. $color-background-active: #dff5f6 // background colour for active items.
$color-background-active-dark: hsl(hue($color-background-active), 50%, 50%)
$font-body: 'Roboto' $font-body: 'Roboto'
$font-headings: 'Lato' $font-headings: 'Lato'

20
src/styles/_project.sass
View File

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

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

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