From fe848525b13998a9c900423185aad7c4909a05be Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 11 Nov 2016 17:11:30 +0100 Subject: [PATCH] Small refactor of jstree style Still needs some work but it's a bit cleaner --- src/styles/plugins/_jstree.sass | 367 +++++++++++++++----------------- 1 file changed, 167 insertions(+), 200 deletions(-) diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass index b8beda66..707e8e78 100644 --- a/src/styles/plugins/_jstree.sass +++ b/src/styles/plugins/_jstree.sass @@ -5,150 +5,194 @@ $tree-color-highlight: white $tree-color-highlight-background: $color-primary .jstree-default - font-weight: 400 + + /* list item */ + .jstree-node + position: relative + max-width: 100% // Needed for ellipsis on long names + margin: 0 !important + color: $tree-color-text + background-image: none !important + + transition: color 100ms ease-in-out + + +media-xs + width: 100% + + &[data-node-type="page"] + font-weight: bold + + .jstree-anchor + padding: 3px 8px + .jstree-icon.jstree-themeicon + display: none + + /* 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 + + /* Closed Folder */ + &.jstree-closed + // border-left: 2px solid lighten($color-background-nav, 20%) + + &.jstree-open .jstree-icon.jstree-ocl, + &.jstree-closed .jstree-icon.jstree-ocl + position: absolute + z-index: 1 + opacity: 0 + min-width: 30px + float: left + + /* The text of the last level item */ + .jstree-anchor + width: 100% + padding-left: 28px + padding-right: 5px + height: inherit + line-height: 26px + white-space: nowrap + text-overflow: ellipsis + overflow: hidden + border-bottom: thin solid transparent + transition: none + + +media-xs + width: 98% + padding: 0 !important + + .jstree-themeicon + margin: 0 !important + font-size: 95% !important + + /* Selected item */ + &.jstree-clicked + background-color: $tree-color-highlight-background !important + &:after + content: '\e83a' + font-family: 'pillar-font' + color: $tree-color-highlight + position: absolute + right: 7px + top: 1px + + li + a.jstree-anchor:after + content: '' + + /* hover an active item */ + &.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 - -.jstree-default .jstree-node - max-width: 100% // Needed for ellipsis on long names - padding: 0 !important - margin: 0 !important - font-weight: 400 !important - color: $tree-color-text - min-height: 12px !important - line-height: 12px !important - +media-xs - width: 100% +.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-node.jstree-open - background-color: darken($color-background-nav, 2%) !important - -.jstree-node.jstree-open > .jstree-anchor:first-of-type - color: white !important - background-color: darken($color-background-nav, 2%) !important - -.jstree-default .jstree-node.jstree-open, -.jstree-default .jstree-node.jstree-leaf - // border-left: 2px solid lighten($color-background-nav, 15%) /* Whatever after the top level */ - -.jstree-default .jstree-node.jstree-closed - // border-left: 2px solid lighten($color-background-nav, 20%) /* Closed Folder */ - -.jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl, -.jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl - position: absolute - z-index: 1 - opacity: 0 - min-width: 30px - float: left - -.jstree-default .jstree-ocl:before - +media-xs - 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% - padding-left: 28px !important - height: inherit !important - line-height: 26px !important - white-space: nowrap - text-overflow: ellipsis - overflow: hidden - border-bottom: thin solid transparent - transition: none - -.jstree-default li - transition: none - -/* expanded item, like a folder */ -.jstree-default .jstree-open > .jstree-ocl, -.jstree-default .jstree-open > .jstree-anchor, -.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 */ -.jstree-default .jstree-clicked, -.jstree-default .jstree-clicked > .jstree-ocl - 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 - content: '\e83a' - font-family: 'pillar-font' - color: $tree-color-highlight - position: absolute - right: 7px - top: 1px - - li - a.jstree-anchor:after - content: '' - -.jstree-default li[aria-expanded='true'] - background-color: transparent - a.jstree-anchor.jstree-clicked background-color: rgba($tree-color-highlight-background, .5) !important @@ -177,35 +221,6 @@ a.jstree-anchor+ul &.jstree-clicked 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 height: 26px !important @@ -213,55 +228,7 @@ i.jstree-icon.jstree-ocl +media-xs height: 40px !important -.jstree-default .jstree-icon:empty - line-height: 26px - left: 5px - .jstree-children .jstree-open i.jstree-icon.jstree-ocl 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 */