/* ------------------------------------------------------------------------------ * * # Fancytree * * Tree plugin for jQuery with support for persistence, keyboard, checkboxes, * tables (grid), drag'n'drop, and lazy loading * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ /* # Core -------------------------------------------------- */ // Container .fancytree-container { list-style: none; white-space: nowrap; padding: 0; margin: 0; overflow: auto; position: relative; // Remove outline on focus &:focus { outline: 0; } // List ul { list-style: none; padding: 0 0 0 @content-padding-large; margin: 0; // Add 1px margin to items li { margin-top: 1px; } } // Disabled state .ui-fancytree-disabled & { .opacity(0.6); } } // Disabled state .ui-fancytree-disabled { .fancytree-container, .fancytree-title, .fancytree-expander { cursor: @cursor-disabled; } .fancytree-treefocus .fancytree-selected .fancytree-title { background-color: #f5f5f5; color: @text-color; } } // Helper .ui-helper-hidden { display: none; } // Give icons common base .fancytree-expander:after, .fancytree-icon:after, .fancytree-checkbox:after, .fancytree-drag-helper-img:after, .fancytree-drop-before:after, .fancytree-drop-after:after, .fancytree-loading .fancytree-expander:after, .fancytree-statusnode-wait .fancytree-icon:after { font-family: 'icomoon'; display: inline-block; font-size: @icon-font-size; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Common icon definitions // ------------------------------ .fancytree-icon, .fancytree-checkbox, .fancytree-custom-icon { margin-top: 5px; float: left; } // Checkboxes .fancytree-checkbox { margin: 4px 10px 0 2px; } // Used by iconclass option .fancytree-custom-icon { display: inline-block; } // Used by 'icon' node option img.fancytree-icon { width: @icon-font-size; height: @icon-font-size; margin-left: 3px; margin-top: 3px; vertical-align: top; border-style: none; } // // Expander icon // // Prefix: fancytree-exp- // 1st character: 'e': expanded, 'c': collapsed, 'n': no children // 2nd character (optional): 'd': lazy (Delayed) // 3rd character (optional): 'l': Last sibling // ---------------------------------------- // Icons .fancytree-expander { cursor: pointer; float: left; margin-top: 5px; width: @icon-font-size; line-height: 1; .fancytree-exp-c &:after { content: '\e9c7'; } .fancytree-exp-cl &:after { content: '\e9c7'; } .fancytree-exp-cd &:after, .fancytree-exp-cdl &:after { content: '\e9c7'; } .fancytree-exp-e &:after, .fancytree-exp-ed &:after { content: '\e9c5'; } .fancytree-exp-el &:after, .fancytree-exp-edl &:after { content: '\e9c5'; } } // Status node icons .fancytree-statusnode-error .fancytree-icon:after { content: '\ed63'; } // Loading icon .fancytree-loading .fancytree-expander, .fancytree-statusnode-wait .fancytree-icon { margin-left: auto; margin-right: auto; width: @icon-font-size; height: @icon-font-size; display: inline-block; text-align: center; &:after { content: '\ed6c'; .transition(all 0.15s ease-in-out); } } // // # Node type icon // // Prefix: fancytree-ico- // 1st character: 'e': expanded, 'c': collapsed, // 2nd character (optional): 'f': folder // ---------------------------------------- // Base .fancytree-icon { display: inline-block; width: @icon-font-size; height: @icon-font-size; } // Documents // ---------------------------------------- // Icons .fancytree-ico-c, .fancytree-ico-e { .fancytree-icon:after { content: '\ea1a'; } } // With children .fancytree-has-children { &.fancytree-ico-c .fancytree-icon:after { content: '\ea0f'; } &.fancytree-ico-e .fancytree-icon:after { content: '\ea11'; } } // Folders // ---------------------------------------- // Icons .fancytree-ico-cf, .fancytree-ico-ef { .fancytree-icon:after { content: '\ea3d'; } } // With children .fancytree-has-children { &.fancytree-ico-cf .fancytree-icon:after { content: '\ea41'; } &.fancytree-ico-ef .fancytree-icon:after { content: '\ea43'; } } // Checkbox icon // ---------------------------------------- .fancytree-checkbox { // Base width: @checkbox-size; height: @checkbox-size; border: @checkbox-border-width solid @color-grey-500; display: block; text-align: center; position: relative; cursor: pointer; // Add icons &:after, .fancytree-partsel.fancytree-selected &:after { content: "\e600"; margin-top: -(@checkbox-border-width / 2); margin-left: -(@checkbox-border-width / 2); display: none; } // Grey square in hierarchical select .fancytree-partsel > &:after { content: ""; width: (@checkbox-size - 10); height: (@checkbox-size - 10); display: none; background-color: @color-grey-400; margin: ((@checkbox-size - (@checkbox-size - 10)) / 2) - @checkbox-border-width; } .fancytree-partsel.fancytree-selected &:after { background-color: transparent; width: auto; height: auto; } .fancytree-selected &:after, .fancytree-partsel &:after, .fancytree-partsel.fancytree-selected &:after { display: block; } // Radio (single select imitation) .fancytree-radio & { border-radius: 100%; &:after { content: ''; width: (@checkbox-size - 10); height: (@checkbox-size - 10); background-color: @color-grey-400; margin: ((@checkbox-size - (@checkbox-size - 10)) / 2) - @checkbox-border-width; border-radius: 100px; } } } /* # Other styles -------------------------------------------------- */ // Drag'n'drop support // ---------------------------------------- // Helper .fancytree-drag-helper { border: 1px solid #ddd; background-color: #fff; padding: 4px 5px; .opacity(0.8); } // Drag helper image .fancytree-drag-helper-img { &:after { position: absolute; top: 50%; margin-top: -((@icon-font-size / 2) + 1); right: -(@icon-font-size + @content-padding-small); } // If accept .fancytree-drop-accept &:after { content: '\ee73'; color: @color-success-500; } // If reject .fancytree-drop-reject &:after { content: '\ed63'; color: @color-danger-500; } } // Marker icon #fancytree-drop-marker { &.fancytree-drop-before, &.fancytree-drop-after { width: 200px; border-top: 1px solid @text-color; position: absolute!important; } } // Source node while dragging .fancytree-drag-source { background-color: @panel-default-border; .fancytree.title { color: @text-color; } } // Target node while dragging cursor is over it .fancytree-drop-target.fancytree-drop-accept a { background-color: @brand-primary !important; color: #fff !important; text-decoration: none; } // Styles specific to this skin // ---------------------------------------- // Node .fancytree-node { display: inherit; width: 100%; position: relative; } // Title .fancytree-title { border: 0; padding: 4px 6px; border-radius: @border-radius-small; margin-left: 4px; display: inline-block; cursor: pointer; > input { border: 0; outline: 0; padding: 0; background-color: transparent; } // Selected title .fancytree-selected & { background-color: @panel-default-border; color: @text-color; } // Title when focused .fancytree-treefocus .fancytree-selected & { background-color: @brand-primary; color: #fff; } // Active title .fancytree-active & { background-color: @panel-default-border; } } // Inside dark sidebar .sidebar:not(.sidebar-default) { .fancytree-selected .fancytree-title, .fancytree-active .fancytree-title { background-color: fade(#fff, 20%); color: #fff; } .fancytree-treefocus .fancytree-selected .fancytree-title { background-color: @brand-primary; color: #fff; } } // Table extension // ---------------------------------------- .fancytree-ext-table { // Node .fancytree-node { display: inline-block; width: auto; } // Title .fancytree-title { display: inline; } // Container &.fancytree-container { white-space: normal; } // Icons .fancytree-expander, .fancytree-icon, .fancytree-custom-icon { margin-top: 1px; } // Checkboxes .fancytree-checkbox { margin: 0 auto; float: none; } // Additional checkboxes .checker { display: block; margin: 0 auto; } // Rows tbody tr { td:first-child { text-align: center; } &.fancytree-focused { background-color: #f5f5f5; } &.fancytree-active { background-color: #f5f5f5; } &.fancytree-selected { background-color: @brand-primary; color: #fff; .fancytree-checkbox { color: #fff; border-color: #fff; } .checker span { border-color: #fff; color: #fff; } } } }