164 lines
3.0 KiB
Stylus
164 lines
3.0 KiB
Stylus
@import "{design}/app"
|
|
|
|
.measure-flow
|
|
position: relative
|
|
|
|
&.open,
|
|
&.selected
|
|
|
|
.btn-add
|
|
opacity: 0
|
|
|
|
.btn-add
|
|
background-color: $activeColor
|
|
border: 2px solid $uiBorderColor
|
|
border-radius: 14px
|
|
color: $textColorActive
|
|
cursor: pointer
|
|
font-weight: bold
|
|
height: 24px
|
|
left: 0
|
|
line-height: 24px
|
|
opacity: 1
|
|
position: absolute
|
|
padding: 0 14px
|
|
top: 0
|
|
transition(opacity 0.3s ease)
|
|
white-space: nowrap
|
|
|
|
.select-tree-root>.tree-content
|
|
width: 213px
|
|
|
|
&>.tree-options
|
|
position: relative
|
|
z-index: 2
|
|
|
|
.tree-inputs
|
|
position: relative
|
|
|
|
&>.tree-leaf
|
|
position: relative
|
|
|
|
&:before
|
|
animateZoomIn()
|
|
background-color: $activeColor
|
|
border-radius: 20px
|
|
color: $uiGray
|
|
content: '\f00c'
|
|
display: block
|
|
font-family: FontAwesome
|
|
font-size: 24px
|
|
height: 40px
|
|
left: -46px
|
|
line-height: 40px
|
|
position: absolute
|
|
text-align: center
|
|
top: 3px
|
|
width: 40px
|
|
|
|
span
|
|
background: white
|
|
font-weight: normal
|
|
height: 46px
|
|
line-height: 46px
|
|
padding: 0 12px
|
|
|
|
input, span
|
|
display: none
|
|
|
|
.actions
|
|
margin-top: 16px
|
|
opacity: 0
|
|
|
|
&:not(.fadeOut)
|
|
animateFadeIn()
|
|
animation-delay: 0.3s
|
|
|
|
&.fadeOut
|
|
animateFadeOut()
|
|
|
|
button
|
|
background-color: transparent
|
|
border-radius: 16px
|
|
border: 1px solid $uiBorderColor
|
|
color: $textPrimaryColor
|
|
font-weight: normal
|
|
height: 31px
|
|
line-height: 31px
|
|
padding: 0 12px
|
|
text-align: center
|
|
|
|
.description
|
|
margin-top: -10px
|
|
margin-bottom: 26px
|
|
|
|
textarea
|
|
background-color: white
|
|
box-shadow: 0 10px white
|
|
border: 0
|
|
line-height: 20px
|
|
outline: none
|
|
overflow: hidden
|
|
padding: 0 12px
|
|
resize: none
|
|
transition(height 0.3s ease)
|
|
width: 100%
|
|
|
|
.descriptionText
|
|
background-color: white
|
|
box-shadow: 0 10px white
|
|
line-height: 20px
|
|
margin-bottom: 26px
|
|
margin-top: -10px
|
|
padding: 0 12px
|
|
|
|
&.selected>.tree-leaf
|
|
|
|
span
|
|
display: block
|
|
|
|
&.tree-columns
|
|
|
|
.select-tree-root
|
|
|
|
.select-tree-common
|
|
padding-left: 0
|
|
padding-right: 6px
|
|
right: auto
|
|
left: 0
|
|
width: 33.333333333333%
|
|
|
|
&>.tree-content
|
|
transform-origin(0% 50%)
|
|
width: 426px
|
|
|
|
.select-tree-common .content
|
|
right: -100%
|
|
|
|
&.started .select-tree-common .content
|
|
right: 6px
|
|
|
|
&.interacted .select-tree-common .content
|
|
animation-name: selectTreeCommonCloseRight
|
|
|
|
.tree-inputs>label
|
|
float: left
|
|
width: 50%
|
|
|
|
@keyframes selectTreeCommonCloseRight {
|
|
from {
|
|
height: 37px
|
|
display: table
|
|
right: 6px
|
|
opacity: 1
|
|
visibility: visible
|
|
}
|
|
to {
|
|
height: 100%
|
|
right: -100%
|
|
opacity: 0
|
|
visibility: hidden
|
|
width: calc(100% - 6px)
|
|
}
|
|
}
|