134 lines
2.6 KiB
Stylus
134 lines
2.6 KiB
Stylus
@import "{design}/app"
|
|
|
|
// TODO: [design] can't we use colors that are already in common pallete?
|
|
$gray1 = #A3A3A3
|
|
$gray2 = #A0A0A0
|
|
$gray3 = #C4C4C4
|
|
$gray4 = #C0C0C0
|
|
$gray5 = #9B9B9B
|
|
$gray6 = #303030
|
|
|
|
.select-tree
|
|
background-color: white
|
|
|
|
&, a.tree-back, .tree-breadcrumb span, .tree-node, .tree-leaf
|
|
transition(all 0.3s ease)
|
|
|
|
.select-tree-root
|
|
&>*:first-child
|
|
transition(all 0.3s ease)
|
|
|
|
.select-tree-root.selected
|
|
border-color: transparent
|
|
border-radius: 0
|
|
// height: 26px
|
|
|
|
&, .select-tree
|
|
background-color: transparent
|
|
|
|
&:not(.open)>.tree-options
|
|
&>.tree-inputs, &>.tree-breadcrumb
|
|
display: none
|
|
|
|
&.open>.tree-options
|
|
&>.tree-inputs>label:not(.active), &>.tree-breadcrumb a, &>.tree-breadcrumb span
|
|
color: transparent
|
|
&>.tree-inputs>label.tree-node:not(.active)
|
|
border-color: transparent
|
|
|
|
.tree-search
|
|
opacity: 0
|
|
|
|
&>.tree-options
|
|
background-color: transparent
|
|
|
|
label.tree-leaf.active
|
|
box-shadow: 0 0 0 10px white, inset 0 0 0 200px white
|
|
|
|
.select-tree-root
|
|
border: 1px solid $gray3
|
|
border-radius: 5px
|
|
display: inline-block
|
|
overflow: hidden
|
|
|
|
&>.tree-options
|
|
transform(scale(1))
|
|
transition(height 0.3s ease)
|
|
|
|
.tree-search
|
|
background-color: $gray4
|
|
border-bottom: 1px solid $gray3
|
|
color: $gray6
|
|
display: block
|
|
margin: 0
|
|
padding: 5px
|
|
text-align: center
|
|
|
|
span
|
|
font-weight: bold
|
|
line-height: 24px
|
|
|
|
input
|
|
border-color: $gray5
|
|
font-weight: normal
|
|
|
|
.tree-breadcrumb
|
|
line-height: 32px
|
|
padding: 5px 12px
|
|
|
|
.path-link, .tree-current-node
|
|
display: inline-block
|
|
font-weight: normal
|
|
float: left
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
|
|
i
|
|
margin-right: 5px
|
|
|
|
.select-tree-node
|
|
left: 0
|
|
position: fixed
|
|
width: 100%
|
|
z-index: 2
|
|
|
|
.tree-options
|
|
overflow: hidden
|
|
position: relative
|
|
z-index: 2
|
|
|
|
.tree-node, .tree-leaf
|
|
cursor: pointer
|
|
display: block
|
|
font-weight: normal
|
|
margin-bottom: 0
|
|
padding: 0 12px
|
|
position: relative
|
|
z-index: 1
|
|
|
|
&>input
|
|
display: none
|
|
|
|
.tree-node
|
|
height: 41px
|
|
border-bottom: 1px solid $gray3
|
|
border-top: 1px solid $gray3
|
|
line-height: 41px
|
|
margin-top: -1px
|
|
|
|
&:last-child
|
|
border-bottom: 0
|
|
|
|
.tree-leaf
|
|
box-shadow: 0 0 0 200px transparent, inset 0 0 0 200px transparent
|
|
line-height: 26px
|
|
|
|
&.active
|
|
box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
|
|
transition(box-shadow 0.3s ease)
|
|
z-index: 0
|
|
|
|
&.collapsed
|
|
z-index: 2
|