87 lines
2.2 KiB
Text
87 lines
2.2 KiB
Text
/* -----------------------------------------------------------------------------
|
|
Component: Treeviews / Branch
|
|
----------------------------------------------------------------------------- */
|
|
|
|
// Tree List
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// List text-items
|
|
|
|
.tree-list {
|
|
background-color: @tree-bg-color;
|
|
alternate-background-color: @tree-bg-color-alt;
|
|
border: 0;
|
|
margin: 0;
|
|
outline: 0;
|
|
&::item {
|
|
color: @text-color;
|
|
&:selected {
|
|
.selected-primary;
|
|
}
|
|
&:focus {
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Branch Icon Size
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// DO NOT EXTEND TO THIS MIXIN - IT IS A FUNCTION PLACEHOLDER
|
|
// There are multiple branch sizes to choose from, see below for options
|
|
|
|
.branch-base(@size: 17) {
|
|
&:adjoins-item {
|
|
border-image: url('@{img-url}/tree@{size}_branch-end.svg') 0;
|
|
}
|
|
&:has-siblings {
|
|
border-image: url('@{img-url}/tree@{size}_vline.svg') 0;
|
|
&:adjoins-item {
|
|
border-image: url('@{img-url}/tree@{size}_branch-more.svg') 0;
|
|
}
|
|
}
|
|
&:has-children {
|
|
&:closed {
|
|
background: url('@{img-url}/tree@{size}_branch-closed_nosib.svg') no-repeat;
|
|
border-image: none;
|
|
image: none;
|
|
}
|
|
&:open {
|
|
background: url('@{img-url}/tree@{size}_branch-open_nosib.svg') no-repeat;
|
|
border-image: none;
|
|
image: none;
|
|
}
|
|
&:has-siblings {
|
|
&:closed {
|
|
background: url('@{img-url}/tree@{size}_branch-closed.svg') no-repeat;
|
|
border-image: none;
|
|
image: none;
|
|
}
|
|
&:open {
|
|
background: url('@{img-url}/tree@{size}_branch-open.svg') no-repeat;
|
|
border-image: none;
|
|
image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Branch size options
|
|
// I used a mixin placeholder above and created the options below in their own
|
|
// classes because we cannot extend to a mixin, extend to any class below
|
|
|
|
// Branch icon size 17
|
|
|
|
.branch-17 {
|
|
.branch-base(17);
|
|
}
|
|
|
|
// Branch icon size 22
|
|
// -----------------------------------------------------------------------------
|
|
|
|
.branch-22 {
|
|
.branch-base(22);
|
|
}
|