diff --git a/Packages/design/app.styl b/Packages/design/app.styl index 094eef529..47040a535 100644 --- a/Packages/design/app.styl +++ b/Packages/design/app.styl @@ -1,3 +1,4 @@ +@import "{design}/styles/imports/animations" @import "{design}/styles/imports/mixins" @import "{design}/styles/imports/spacings" @import "{design}/styles/imports/variables" diff --git a/Packages/design/package.js b/Packages/design/package.js index b253d019c..41de0594b 100644 --- a/Packages/design/package.js +++ b/Packages/design/package.js @@ -26,6 +26,7 @@ Package.onUse(function(api) { // Common styles api.addFiles([ 'styles/common/webfonts.styl', + 'styles/common/keyframes.styl', 'styles/common/global.styl', 'styles/common/spacings.styl' ], 'client'); diff --git a/Packages/design/styles/common/keyframes.styl b/Packages/design/styles/common/keyframes.styl new file mode 100644 index 000000000..d2d86e43d --- /dev/null +++ b/Packages/design/styles/common/keyframes.styl @@ -0,0 +1,10 @@ +@import "{design}/app.styl" + +@keyframes zoomInOut { + from { + transform(scale(0)) + } + to { + transform(scale(1)) + } +} diff --git a/Packages/design/styles/imports/animations.styl b/Packages/design/styles/imports/animations.styl new file mode 100644 index 000000000..faad9dc24 --- /dev/null +++ b/Packages/design/styles/imports/animations.styl @@ -0,0 +1,7 @@ +animateZoomIn() + animation-name: zoomInOut + animation-duration: 0.3s + animation-iteration-count: 1 + animation-direction: alternate + animation-timing-function: ease-out + animation-fill-mode: forwards diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl index 2fa62256e..14a784ec2 100644 --- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl +++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl @@ -2,7 +2,8 @@ .measure-flow - &.open + &.open, + &.selected .btn-add display: none @@ -18,13 +19,65 @@ line-height: 24px padding: 0 14px - .select-tree-root>.tree-content>.tree-options - margin-right: -20px - max-height: 250px - overflow-x: hidden - overflow-y: scroll - position: relative - z-index: 2 + .select-tree-root>.tree-content + width: 213px + + &>.tree-options + margin-right: -17px + max-height: 250px + overflow-x: hidden + overflow-y: scroll + 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 + + 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 + + &.selected>.tree-leaf + + span + display: block