reorganize packages, start converting overall app to react (very broken at the moment)

2018-12-12 18:06:25 +01:00
1 parent 024fe1a448
commit 5f30f7bd35
@@ -0,0 +1,149 @@
+@require '{ohif:viewerbase}/app'
+
+$boxBorderColor = transparent
+$boxHoverBackgroundColor = #14191E
+$boxHoverBorderColor = #2d4660
+$boxActiveBorderColor = #131D29
+$boxWidth = 50px
+$borderThickness = 2px
+$boxBorderRadius = 8px
+$nestingMargin = 6px
+$spacerX = 7px
+$spacerY = 12px
+
+.study-browser-item
+  position: relative
+  // required transformation to make inner fixed elements relative to this one
+  transform(scale(1))
+
+  .loadingTextDiv
+    theme('color', '$textSecondaryColor')
+    background-color: $boxHoverBackgroundColor
+    border-radius: 12px
+    font-size: 32px
+    opacity: 0
+    margin: 0
+    padding: 25px
+    position: absolute
+    pointer-events: none
+    z-index: 100
+
+  &.loading
+    .loadingTextDiv
+      height: 100%
+      left: 0
+      opacity: 0.75
+      top: 0
+      width: 100%
+
+    .study-item-box
+      opacity: 0.2
+
+  &.active
+    .study-item-box
+      .study-modality
+        theme('color', '$primaryBackgroundColor')
+        &
+        &:before
+        &:after
+          theme('background-color', '$activeColor')
+          border-color: $boxActiveBorderColor
+
+  &:not(.active) .study-browser-series
+    max-height: 0 !important
+
+    .study-series-container
+      opacity: 0
+      transform(translateY(-100%))
+
+  .study-browser-series
+    overflow: hidden
+    transition(max-height 0.3s ease)
+
+    .study-series-container
+      opacity: 1
+      transition(opacity 0.3s ease\, transform 0.3s ease)
+      transform(translateY(0))
+      transform-origin(50% 0%)
+
+.study-item-box
+  border: 1px solid $boxBorderColor
+  border-radius: 12px
+  cursor: pointer
+  padding: $spacerY $spacerX ($spacerY - 1)
+  position: relative
+  transition($sidebarTransition)
+  z-index: 0
+
+  &:hover
+    background-color: $boxHoverBackgroundColor
+    border-color: $boxHoverBorderColor
+
+    &.additional
+      theme('color', '$textSecondaryColor')
+
+  &.additional
+    theme('color', '$textPrimaryColor')
+    font-size: 16px
+    font-weight: normal
+    height: 91px
+    line-height: 91px
+    padding: 0
+    text-align: center
+
+  .study-text
+    font-size: 13px
+    left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
+    line-height: 14px
+    position: absolute
+    right: $spacerX
+    top: $spacerY
+    .study-date
+      margin-top: 8px
+      theme('color', '$textSecondaryColor')
+    .study-description
+      margin-top: 8px
+      theme('color', '$textPrimaryColor')
+    .study-availability
+      margin-top: 24px
+      theme('color', '$textPrimaryColor')
+
+  .study-modality
+    theme('color', '$textSecondaryColor')
+    font-size: 20px
+    line-height: $boxWidth
+    margin-left: $nestingMargin * 2
+    margin-top: $nestingMargin * 2
+    position: relative
+
+    .study-modality-text
+      height: 100%
+      overflow: hidden
+      text-align: center
+      text-transform: uppercase
+
+    &
+    &:before
+    &:after
+      theme('border', '%s solid $primaryBackgroundColor' % $borderThickness)
+      theme('background-color', '$boxBackgroundColor')
+      border-radius: $boxBorderRadius
+      height: $boxWidth + ($borderThickness * 2)
+      transition($sidebarTransition)
+      width: $boxWidth + ($borderThickness * 2)
+
+    &:before
+    &:after
+      display: block
+      content: ''
+      position: absolute
+
+    &:before
+      top: -($borderThickness + $nestingMargin)
+      left: -($borderThickness + $nestingMargin)
+      z-index: -1
+
+    &:after
+      top: -($borderThickness + ($nestingMargin * 2))
+      left: -($borderThickness + ($nestingMargin * 2))
+      z-index: -2