265 lines
5.0 KiB
Stylus
265 lines
5.0 KiB
Stylus
@import "{ohif: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-root
|
|
|
|
.tree-content
|
|
background-color: white
|
|
position: relative
|
|
transition(transform 0.3s ease\, background-color 0.3s ease\, border-color 0.3s ease\, border-radius 0.3s ease\, margin-right 0.3s ease)
|
|
|
|
.tree-search
|
|
a.tree-back
|
|
.tree-breadcrumb span
|
|
.tree-node
|
|
.tree-leaf
|
|
transition(all 0.3s ease)
|
|
|
|
&.selected
|
|
|
|
label.tree-leaf.active
|
|
box-shadow: 0 0 0 10px white, inset 0 0 0 200px white
|
|
|
|
.tree-content
|
|
background-color: transparent
|
|
|
|
&>.tree-content
|
|
border-color: transparent
|
|
border-radius: 0
|
|
|
|
.tree-search
|
|
background-color: transparent
|
|
border-color: transparent
|
|
color: transparent
|
|
|
|
input,
|
|
i
|
|
opacity: 0
|
|
|
|
&, .select-tree
|
|
|
|
&:not(.open)>.tree-content
|
|
|
|
&>.tree-inputs
|
|
&>.tree-breadcrumb
|
|
display: none
|
|
|
|
&>.tree-content>.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
|
|
|
|
&.common-clicked .tree-leaf.active
|
|
background-color: transparent
|
|
box-shadow: none
|
|
color: transparent
|
|
|
|
.select-tree-root
|
|
display: inline-block
|
|
position: relative
|
|
z-index: 0
|
|
|
|
&>.tree-content
|
|
border: 1px solid $gray3
|
|
border-radius: 5px
|
|
overflow: hidden
|
|
|
|
&>.tree-content>.tree-options
|
|
transform(scale(1))
|
|
transition(height 0.3s ease)
|
|
|
|
.tree-search
|
|
background-color: $gray4
|
|
border-bottom: 1px solid $gray3
|
|
color: $gray6
|
|
display: flex
|
|
margin: 0
|
|
padding: 5px
|
|
position: relative
|
|
text-align: center
|
|
|
|
span
|
|
font-weight: bold
|
|
line-height: 24px
|
|
|
|
input
|
|
border-color: $gray5
|
|
font-weight: normal
|
|
padding-left: 34px
|
|
transition(opacity 0.3s ease)
|
|
|
|
& ~ i
|
|
color: $gray1
|
|
font-size: 18px
|
|
left: 16px
|
|
position: absolute
|
|
top: 37px
|
|
transition(opacity 0.3s ease)
|
|
|
|
.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
|
|
overflow: hidden
|
|
position: fixed
|
|
width: 100%
|
|
z-index: 2
|
|
|
|
&
|
|
.tree-content
|
|
.tree-inputs
|
|
height: 100%
|
|
|
|
.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
|
|
|
|
&:last-child:after
|
|
display: block
|
|
content: ''
|
|
height: 10px
|
|
|
|
&.collapsed
|
|
z-index: 1
|
|
|
|
.select-tree-common
|
|
height: 100%
|
|
padding-left: 6px
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
width: 50%
|
|
|
|
.content
|
|
background-color: $gray6
|
|
border: 1px solid $gray5
|
|
border-radius: 5px
|
|
color: white
|
|
opacity: 0.9
|
|
padding: 0 15px 12px
|
|
position: absolute
|
|
top: 50%
|
|
transform(translateY(-50%))
|
|
width: calc(100% - 6px)
|
|
|
|
h5.title
|
|
color: $gray5
|
|
font-weight: normal
|
|
line-height: 20px
|
|
margin: 12px 0 16px
|
|
|
|
div.labels
|
|
position: relative
|
|
|
|
label
|
|
cursor: pointer
|
|
display: block
|
|
font-weight: 300
|
|
line-height: 26px
|
|
margin: 0
|
|
padding-left: 3px
|
|
transition(padding 0.3s ease)
|
|
|
|
&:hover
|
|
padding-left: 0
|
|
|
|
.select-tree-root
|
|
|
|
&>.tree-content
|
|
transform(scale(0))
|
|
transform-origin(100% 50%)
|
|
|
|
.select-tree-common
|
|
z-index: -1
|
|
|
|
.content
|
|
margin-left: calc(-100% - 6px)
|
|
transform(scale(0))
|
|
transition(margin-left 0.3s ease 0.3s\, transform 0s linear 0.3s)
|
|
|
|
&.started
|
|
|
|
&>.tree-content
|
|
transform(scale(1))
|
|
|
|
.select-tree-common
|
|
|
|
.content
|
|
margin-left: 0
|
|
transform(scale(1))
|
|
|
|
&.interacted, &.selected
|
|
|
|
.select-tree-common
|
|
|
|
.content
|
|
opacity: 0
|
|
transform(translateX(-100%) scale(0))
|
|
transition(transform 0.3s ease\, opacity 0.3s ease)
|
|
|
|
@keyframes selectTreeCommonOverflow {
|
|
from {
|
|
overflow: hidden
|
|
}
|
|
to {
|
|
overflow: visible
|
|
}
|
|
}
|