You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
501 lines
10 KiB
501 lines
10 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Fancytree |
|
* |
|
* Tree plugin for jQuery with support for persistence, keyboard, checkboxes, |
|
* tables (grid), drag'n'drop, and lazy loading |
|
* |
|
* Version: 1.1 |
|
* Latest update: Jul 5, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
/* # 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; |
|
border-radius: @border-radius-small; |
|
|
|
// 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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Child Counter extension |
|
// ---------------------------------------- |
|
|
|
.fancytree-ext-childcounter .fancytree-childcounter { |
|
position: absolute; |
|
right: 0; |
|
top: 4px; |
|
color: @text-muted; |
|
}
|
|
|