reorganize packages, start converting overall app to react (very broken at the moment)
This commit is contained in:
Erik Ziegler committed
1 parent
024fe1a448
commit
5f30f7bd35
479 files changed
+5364
-11611
No files matched your search
@@ -0,0 +1,94 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
label.wrapperLabel
|
||||
cursor: pointer
|
||||
|
||||
label.wrapperLabel:not(.checkboxLabel)
|
||||
cursor: pointer
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.wrapperText
|
||||
display: block
|
||||
order: -1
|
||||
transition(color 0.3s ease)
|
||||
|
||||
.form-themed
|
||||
|
||||
.btn, input[type=text], input[type=password], input[type=number]
|
||||
|
||||
&[disabled], &.disabled
|
||||
|
||||
&, &:hover, &:active
|
||||
theme('background-color', '$uiGrayDarker')
|
||||
theme('border-color', '$uiGrayLight')
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
& + .wrapperText
|
||||
theme('color', '$textPrimaryColor')
|
||||
cursor: auto
|
||||
|
||||
input[type=text], input[type=password], input[type=number]
|
||||
theme('background-color', '$uiGray')
|
||||
theme('border-color', '$uiBorderColor')
|
||||
theme('color', '$textPrimaryColor')
|
||||
font-weight: normal
|
||||
transition(background-color 0.3s ease\, border-color 0.3s ease)
|
||||
|
||||
&:active, &:focus
|
||||
theme('background-color', '$uiGrayDark')
|
||||
theme('border-color', '$activeColor')
|
||||
box-shadow: none
|
||||
|
||||
& + .wrapperText
|
||||
theme('color', '$activeColor')
|
||||
|
||||
.btn-primary
|
||||
theme('background-color', '$activeColor')
|
||||
theme('border-color', '$uiBorderColorActive')
|
||||
theme('color', '$textColorActive')
|
||||
transition(background-color 0.3s ease\, border-color 0.3s ease)
|
||||
|
||||
&:hover, &:active, &:focus, &:focus:active
|
||||
theme('background-color', '$activeColor', 0.8)
|
||||
theme('border-color', '$uiBorderColorActive', 0.8)
|
||||
theme('color', '$textColorActive')
|
||||
|
||||
span.select2.select2-container
|
||||
width: 100% !important
|
||||
|
||||
span.select2-selection
|
||||
color: rgba(255, 255, 255, 0.52)
|
||||
background-color: #2c353f
|
||||
|
||||
span.select2-selection__arrow
|
||||
theme('background-color', '$uiGray')
|
||||
|
||||
&:hover, &:focus
|
||||
span.select2-selection__arrow
|
||||
theme('background-color', '$uiGray')
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
span.select2-selection__rendered
|
||||
theme('color', '$textPrimaryColor')
|
||||
font-size: 14px
|
||||
|
||||
&.select2-container--open span.select2-selection span.select2-selection__arrow
|
||||
theme('background-color', '$uiGrayDark')
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
.form-control
|
||||
background-color: #FFFFFF
|
||||
border: 0
|
||||
border-radius(2px)
|
||||
font-size: 14px
|
||||
height: 30px
|
||||
line-height: 16px
|
||||
padding: 8px 9px 6px
|
||||
|
||||
&:focus
|
||||
theme('box-shadow', '0 0 0 2px $activeColor !important')
|
||||
|
||||
.form-themed .form-control
|
||||
theme('box-shadow', '0 0 0 1px $uiBorderColor')
|
||||
|
||||
@@ -0,0 +1,356 @@
|
||||
@import '{ohif:viewerbase}/app'
|
||||
|
||||
html body
|
||||
theme('background-color', '$primaryBackgroundColor')
|
||||
font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
|
||||
-webkit-backface-visibility: hidden // Prevent Chrome from shifting parent elements on transform
|
||||
font-family: Roboto
|
||||
|
||||
html body.stretch
|
||||
height: 100%
|
||||
min-width: 0
|
||||
overflow: hidden
|
||||
position: fixed
|
||||
width: 100%
|
||||
|
||||
html hr
|
||||
theme('border-top', '1px solid $uiBorderColor')
|
||||
|
||||
body .table > thead > tr > th
|
||||
theme('border-color', '$uiBorderColor')
|
||||
|
||||
body ol
|
||||
margin: 0
|
||||
padding-left: 1em
|
||||
|
||||
// This is needed for IE11 because svgxuse doesn't allow the browser to capture mouse events on SVG
|
||||
svg, use
|
||||
pointer-events: none
|
||||
|
||||
input::-ms-clear
|
||||
display: none
|
||||
|
||||
label.form-group
|
||||
width: 100%
|
||||
|
||||
&>span.select2
|
||||
display: block
|
||||
width: 100% !important
|
||||
|
||||
span.select2-selection
|
||||
min-height: 34px
|
||||
|
||||
span.select2-selection__rendered
|
||||
height: 34px
|
||||
line-height: 34px
|
||||
|
||||
span.select2-selection__arrow
|
||||
height: 34px
|
||||
|
||||
.select-small+span.select2.select2-container span.select2-selection
|
||||
height: 20px
|
||||
|
||||
span.select2-selection__rendered
|
||||
height: 20px
|
||||
line-height: 20px
|
||||
padding-left: 5px
|
||||
padding-right: 17px
|
||||
|
||||
span.select2-selection__arrow
|
||||
height: 20px
|
||||
width: 12px
|
||||
|
||||
&:after
|
||||
font-size: 12px
|
||||
height: 20px
|
||||
line-height: 20px
|
||||
width: 12px
|
||||
|
||||
.select2-container-nowrap
|
||||
|
||||
.select2-dropdown
|
||||
display: table
|
||||
|
||||
.select2-results__options li
|
||||
white-space: nowrap
|
||||
|
||||
body .select2-container--default .select2-results>.select2-results__options
|
||||
max-height: 320px
|
||||
|
||||
.center-table
|
||||
display: table
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
.height-auto
|
||||
height: auto !important
|
||||
|
||||
.caret-down
|
||||
display: inline-block
|
||||
width: 0
|
||||
height: 0
|
||||
margin-top: .5rem
|
||||
border-top: 5px solid
|
||||
border-right: 5px solid transparent
|
||||
border-left: 5px solid transparent
|
||||
|
||||
.noselect
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-khtml-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
.btn
|
||||
transition(background-color 0.3s ease)
|
||||
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
theme('background-color', '$uiGrayDarker')
|
||||
theme('border-color', '$uiBorderColor')
|
||||
theme('color', '$textSecondaryColor')
|
||||
border-radius(6px)
|
||||
border: 0
|
||||
|
||||
.modal-header, .modal-footer
|
||||
theme('border-color', '$uiBorderColor')
|
||||
|
||||
.dialog-separator,
|
||||
.dialog-separator-before,
|
||||
.dialog-separator-after
|
||||
position: relative
|
||||
|
||||
.dialog-separator:before,
|
||||
.dialog-separator:after,
|
||||
.dialog-separator-before:before,
|
||||
.dialog-separator-after:after
|
||||
background-color: #000000
|
||||
box-shadow(-50px 0 0 #000000\, 50px 0 0 #000000)
|
||||
content: ' '
|
||||
display: block
|
||||
height: 3px
|
||||
left: 0
|
||||
position: absolute
|
||||
width: 100%
|
||||
|
||||
.dialog-separator:before,
|
||||
.dialog-separator-before:before
|
||||
top: -3px
|
||||
|
||||
.dialog-separator:after,
|
||||
.dialog-separator-after:after
|
||||
bottom: -3px
|
||||
|
||||
.modal-body
|
||||
theme('color', '$textPrimaryColor')
|
||||
padding: 16px 22px 25px
|
||||
position: relative
|
||||
|
||||
.modal-header
|
||||
border-bottom-width: 3px
|
||||
border-bottom-style: solid
|
||||
border-bottom-color: #000000
|
||||
padding: 19px 22px 17px
|
||||
position: relative
|
||||
|
||||
h4
|
||||
theme('color', '$textSecondaryColor')
|
||||
font-size: 20px
|
||||
font-weight: 500
|
||||
line-height: 24px
|
||||
padding-right: 24px
|
||||
|
||||
.modal-footer
|
||||
border-top: 0
|
||||
|
||||
.card-round
|
||||
theme('background-color', '$uiGrayDark')
|
||||
border-radius(5px)
|
||||
padding: 10px
|
||||
|
||||
.modal-header
|
||||
position: relative
|
||||
|
||||
button.close
|
||||
position: absolute
|
||||
right: 21px
|
||||
top: 50%
|
||||
transform(translateY(-50%))
|
||||
transition(color 0.3s ease)
|
||||
|
||||
.button-close, .modal-dialog button.close
|
||||
theme('color', '$textSecondaryColor')
|
||||
height: 20px
|
||||
opacity: 1
|
||||
overflow: hidden
|
||||
padding: 2px
|
||||
text-align: center
|
||||
text-shadow: none
|
||||
width: 20px
|
||||
|
||||
&:hover span
|
||||
&:before, &:after
|
||||
theme('background-color', '$textPrimaryColor')
|
||||
|
||||
&:active span
|
||||
&:before, &:after
|
||||
theme('background-color', '$activeColor')
|
||||
|
||||
span
|
||||
color: transparent
|
||||
display: block
|
||||
font-size: 0
|
||||
height: 100%
|
||||
line-height: 0
|
||||
overflow: hidden
|
||||
position: relative
|
||||
width: 100%
|
||||
|
||||
&:before, &:after
|
||||
theme('background-color', '$textSecondaryColor')
|
||||
content: ' '
|
||||
display: block
|
||||
height: 2px
|
||||
transition(background-color 0.3s ease)
|
||||
width: 19px
|
||||
|
||||
&:before
|
||||
left: 1px
|
||||
position: absolute
|
||||
top: 1px
|
||||
transform(rotate(45deg))
|
||||
transform-origin(1px 50%)
|
||||
|
||||
&:after
|
||||
right: 1px
|
||||
position: absolute
|
||||
top: 1px
|
||||
transform(rotate(-45deg))
|
||||
transform-origin(calc(100% - 1px) 50%)
|
||||
|
||||
.full-width
|
||||
width: 100%
|
||||
|
||||
.full-height
|
||||
height: 100%
|
||||
|
||||
.flex-h
|
||||
display: flex
|
||||
flex-direction: row
|
||||
|
||||
.flex-v
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.flex-grow
|
||||
flex-grow: 1
|
||||
|
||||
.nowrap
|
||||
white-space: nowrap
|
||||
|
||||
.themed
|
||||
table
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
th, td
|
||||
font-size: 15px
|
||||
font-weight: normal
|
||||
|
||||
th
|
||||
line-height: 60px
|
||||
|
||||
td
|
||||
line-height: 18px
|
||||
|
||||
.btn
|
||||
border: 0
|
||||
border-radius(4px)
|
||||
font-size: 15px
|
||||
font-weight: normal
|
||||
height: 37px
|
||||
line-height: 37px
|
||||
padding: 0 12px
|
||||
|
||||
&.btn-primary, &.btn-secondary
|
||||
color: #000000
|
||||
|
||||
&:hover, &:active, &:focus, &:focus:active
|
||||
color: #000000
|
||||
|
||||
&.btn-primary, &.btn-secondary, &.btn-danger
|
||||
transition(background-color 0.3s ease)
|
||||
|
||||
&.btn-primary
|
||||
theme('background-color', '$activeColor')
|
||||
|
||||
&:hover, &:active, &:focus, &:focus:active
|
||||
theme('background-color', '$activeColor', 0.8)
|
||||
|
||||
&.btn-secondary
|
||||
theme('background-color', '$textSecondaryColor')
|
||||
|
||||
&:hover, &:active, &:focus, &:focus:active
|
||||
theme('background-color', '$textSecondaryColor', 0.8)
|
||||
|
||||
&.btn-danger
|
||||
theme('background-color', '$destructiveColor')
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
&:hover, &:active, &:focus, &:focus:active
|
||||
theme('color', '$textPrimaryColor')
|
||||
theme('background-color', '$destructiveColor', 0.8)
|
||||
|
||||
&.active
|
||||
box-shadow(inset 1px 1px 2px rgba(0, 0, 0, 0.5))
|
||||
|
||||
.wrapperLabel .wrapperText
|
||||
theme('color', '$textPrimaryColor')
|
||||
font-size: 14px
|
||||
font-weight: bold
|
||||
line-height: 16px
|
||||
|
||||
&:not(:empty)
|
||||
margin-bottom: 13px
|
||||
|
||||
.nav-tabs
|
||||
border-bottom: 0
|
||||
margin-bottom: 3px
|
||||
position: relative
|
||||
z-index: 1
|
||||
|
||||
&>li
|
||||
font-size: 14px
|
||||
font-weight: normal
|
||||
height: 40px
|
||||
line-height: 40px
|
||||
margin-bottom: 0
|
||||
|
||||
&>a
|
||||
display: block
|
||||
width: 100%
|
||||
line-height: inherit
|
||||
margin: 0
|
||||
height: inherit
|
||||
padding: 0 10px 0 10px
|
||||
|
||||
&:after
|
||||
background-color: transparent
|
||||
bottom: -3px
|
||||
content: ' '
|
||||
display: block
|
||||
height: 3px
|
||||
transition(background-color 0.3s ease)
|
||||
width: 100%
|
||||
|
||||
&>a, &.active>a
|
||||
&, &:hover, &:active, &:focus
|
||||
theme('color', '$activeColor')
|
||||
background-color: transparent
|
||||
border: 0
|
||||
|
||||
&.active>a
|
||||
font-weight: bold
|
||||
|
||||
&:after
|
||||
theme('background-color', '$activeColor')
|
||||
@@ -0,0 +1,45 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
@keyframes zoomIn
|
||||
0%
|
||||
transform(scale(0))
|
||||
100%
|
||||
transform(scale(1))
|
||||
|
||||
@keyframes zoomOut
|
||||
0%
|
||||
transform(scale(1))
|
||||
100%
|
||||
transform(scale(0))
|
||||
|
||||
@keyframes slideInDown
|
||||
0%
|
||||
opacity: 0
|
||||
transform(translateY(-100%) scale(0))
|
||||
100%
|
||||
opacity: 1
|
||||
transform(translateY(0) scale(1))
|
||||
|
||||
@keyframes slideOutUp
|
||||
0%
|
||||
opacity: 1
|
||||
transform(translateY(0) scale(1))
|
||||
100%
|
||||
opacity: 0
|
||||
transform(translateY(-100%) scale(0))
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
visibility: hidden
|
||||
to
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
|
||||
@keyframes fadeOut
|
||||
from
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
to
|
||||
opacity: 0
|
||||
visibility: hidden
|
||||
@@ -0,0 +1,31 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
generateSpacings('', $spacer-x, $spacer-y)
|
||||
|
||||
.m-x-auto
|
||||
margin-left: auto !important
|
||||
margin-right: auto !important
|
||||
|
||||
// MIN WIDTH 1920
|
||||
generateSpacings('r', $spacer-x, $spacer-y)
|
||||
|
||||
@media screen and (min-width: 1600px) and (max-width: 1919px)
|
||||
generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9))
|
||||
|
||||
@media screen and (min-width: 1440px) and (max-width: 1599px)
|
||||
generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8))
|
||||
|
||||
@media screen and (min-width: 1360px) and (max-width: 1439px)
|
||||
generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7))
|
||||
|
||||
@media screen and (min-width: 1280px) and (max-width: 1359px)
|
||||
generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6))
|
||||
|
||||
@media screen and (min-width: 1152px) and (max-width: 1279px)
|
||||
generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5))
|
||||
|
||||
@media screen and (min-width: 1024px) and (max-width: 1151px)
|
||||
generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4))
|
||||
|
||||
@media screen and (max-width: 1023px)
|
||||
generateSpacings('r', ($spacer-x * 0.3), ($spacer-y * 0.3))
|
||||
@@ -0,0 +1,4 @@
|
||||
// TODO: Find out why Meteor is complaining about these?
|
||||
// Replaced them with <link>'s in the HEAD.html of each application, for now.
|
||||
//@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext)
|
||||
//@import url(http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext)
|
||||
@@ -0,0 +1,11 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
.viewerDialogs>.dialog-animated
|
||||
&:not(.dialog-closed):not(.dialog-open)
|
||||
display: none
|
||||
|
||||
&.dialog-closed
|
||||
animateFadeOut()
|
||||
|
||||
&.dialog-open
|
||||
animateFadeIn()
|
||||
@@ -0,0 +1,21 @@
|
||||
@require '{ohif:viewerbase}/app'
|
||||
|
||||
div.popover
|
||||
theme('background-color', '$uiGray')
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
.popover-title
|
||||
theme('background-color', '$uiGrayDark')
|
||||
theme('border-bottom-color', '$uiGrayDarkest')
|
||||
|
||||
&.top .arrow:after
|
||||
theme('border-top-color', '$uiGray')
|
||||
|
||||
&.right .arrow:after
|
||||
theme('border-right-color', '$uiGray')
|
||||
|
||||
&.bottom .arrow:after
|
||||
theme('border-bottom-color', '$uiGray')
|
||||
|
||||
&.left .arrow:after
|
||||
theme('border-left-color', '$uiGray')
|
||||
@@ -0,0 +1,39 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
.group-radio
|
||||
label
|
||||
cursor: pointer
|
||||
|
||||
input
|
||||
display: none
|
||||
|
||||
span
|
||||
padding-left: 23px
|
||||
position: relative
|
||||
&:before
|
||||
background: white
|
||||
border-radius: 8px
|
||||
content: ''
|
||||
display: block
|
||||
height: 16px
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform(translateY(-50%))
|
||||
width: 16px
|
||||
|
||||
input:focus + span:before
|
||||
// TODO: [design] define a outline for the design
|
||||
theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
|
||||
outline: none
|
||||
|
||||
input:checked + span:after
|
||||
theme('background', '$uiBorderColorDark')
|
||||
border-radius: 5px
|
||||
content: ''
|
||||
height: 10px
|
||||
left: 3px
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform(translateY(-50%))
|
||||
width: 10px
|
||||
@@ -0,0 +1,70 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
// TODO: [design] can't we use colors that are already in common pallete?
|
||||
$gray1 = #C3C3C3
|
||||
$gray2 = #B6B6B6
|
||||
$gray3 = #A6A6A6
|
||||
$gray4 = #676767
|
||||
$gray5 = #3E3E3E
|
||||
$borderRadius = 2px
|
||||
|
||||
span.select2.select2-container
|
||||
font-weight: normal
|
||||
|
||||
span.select2-selection
|
||||
&:hover, &:focus
|
||||
span.select2-selection__arrow
|
||||
background-color: $gray3
|
||||
|
||||
span.select2-selection
|
||||
border: 0
|
||||
border-radius: $borderRadius
|
||||
|
||||
&, span.select2-selection__rendered, span.select2-selection__arrow
|
||||
height: 30px
|
||||
|
||||
span.select2-selection__rendered
|
||||
line-height: 34px
|
||||
padding-left: 11px
|
||||
|
||||
span.select2-selection__arrow
|
||||
theme('border-left', '1px solid $primaryBackgroundColor')
|
||||
background-color: $gray1
|
||||
border-top-right-radius: $borderRadius
|
||||
border-bottom-right-radius: $borderRadius
|
||||
right: 0
|
||||
top: 0
|
||||
transition(background-color 0.3s ease)
|
||||
width: 20px
|
||||
|
||||
b
|
||||
display: none
|
||||
|
||||
span.select2-selection--multiple
|
||||
background-color: $gray2
|
||||
min-height: 30px
|
||||
|
||||
input.select2-search__field
|
||||
color: $gray5
|
||||
placeholder-color($gray5)
|
||||
|
||||
li.select2-selection__choice
|
||||
theme('border-color', '$uiGray')
|
||||
background-color: #FFF
|
||||
border-radius: $borderRadius
|
||||
color: $gray5
|
||||
font-size: 12px
|
||||
line-height: 22px
|
||||
margin-top: 3px
|
||||
|
||||
span.select2-selection__choice__remove
|
||||
color: $gray4
|
||||
float: right
|
||||
font-size: 20px
|
||||
font-weight: 300
|
||||
line-height: 20px
|
||||
margin-left: 6px
|
||||
margin-right: 0
|
||||
|
||||
span.select2-selection__clear
|
||||
display: none
|
||||
@@ -0,0 +1,31 @@
|
||||
@import "{ohif:viewerbase}/app"
|
||||
|
||||
.form-themed .state-error, .state-error
|
||||
|
||||
&.wrapperLabel input + .wrapperText
|
||||
theme('color', '$uiStateErrorText')
|
||||
|
||||
&+.tooltip
|
||||
|
||||
.tooltip-inner
|
||||
color: white
|
||||
theme('background-color', '$uiStateErrorBorder')
|
||||
|
||||
&.top .tooltip-arrow
|
||||
theme('border-top-color', '$uiStateErrorBorder')
|
||||
&.right .tooltip-arrow
|
||||
theme('border-right-color', '$uiStateErrorBorder')
|
||||
&.bottom .tooltip-arrow
|
||||
theme('border-bottom-color', '$uiStateErrorBorder')
|
||||
&.left .tooltip-arrow
|
||||
theme('border-left-color', '$uiStateErrorBorder')
|
||||
|
||||
|
||||
&:not(.component-group)
|
||||
&.form-control, .form-control
|
||||
theme('background-color', '$uiStateError')
|
||||
theme('border-color', '$uiStateErrorBorder')
|
||||
|
||||
.select2-selection
|
||||
theme('background-color', '$uiStateError')
|
||||
theme('border-color', '$uiStateErrorBorder')
|
||||
@@ -0,0 +1,29 @@
|
||||
animationDefaults()
|
||||
animation-duration: 0.3s
|
||||
animation-direction: alternate
|
||||
animation-timing-function: ease-out
|
||||
animation-fill-mode: forwards
|
||||
|
||||
animateZoomIn()
|
||||
animationDefaults()
|
||||
animation-name: zoomIn
|
||||
|
||||
animateZoomOut()
|
||||
animationDefaults()
|
||||
animation-name: zoomOut
|
||||
|
||||
animateSlideInDown()
|
||||
animationDefaults()
|
||||
animation-name: slideInDown
|
||||
|
||||
animateSlideOutUp()
|
||||
animationDefaults()
|
||||
animation-name: slideOutUp
|
||||
|
||||
animateFadeIn()
|
||||
animationDefaults()
|
||||
animation-name: fadeIn
|
||||
|
||||
animateFadeOut()
|
||||
animationDefaults()
|
||||
animation-name: fadeOut
|
||||
@@ -0,0 +1,57 @@
|
||||
/*
|
||||
Basic mixin which vendorizes a propery. Usage:
|
||||
|
||||
vendorize(box-sizing, border-box)
|
||||
*/
|
||||
vendorize(property, value)
|
||||
-webkit-{property} value
|
||||
-moz-{property} value
|
||||
-ms-{property} value
|
||||
-o-{property} value
|
||||
{property} value
|
||||
|
||||
animation(a)
|
||||
vendorize(animation, a)
|
||||
|
||||
border-radius(r)
|
||||
vendorize(border-radius, r)
|
||||
|
||||
border-top-left-radius(r)
|
||||
vendorize(border-top-left-radius, r)
|
||||
|
||||
border-top-right-radius(r)
|
||||
vendorize(border-top-right-radius, r)
|
||||
|
||||
border-bottom-left-radius(r)
|
||||
vendorize(border-bottom-left-radius, r)
|
||||
|
||||
border-bottom-right-radius(r)
|
||||
vendorize(border-bottom-right-radius, r)
|
||||
|
||||
box-shadow(s)
|
||||
vendorize(box-shadow, s)
|
||||
|
||||
text-shadow(s)
|
||||
vendorize(text-shadow, s)
|
||||
|
||||
transform(t)
|
||||
vendorize(transform, t)
|
||||
|
||||
transform-origin(o)
|
||||
vendorize(transform-origin, o)
|
||||
|
||||
transition(t)
|
||||
vendorize(transition, t)
|
||||
|
||||
transition-delay(d)
|
||||
vendorize(transition-delay, d)
|
||||
|
||||
placeholder-color(c)
|
||||
&::-webkit-input-placeholder
|
||||
color: c
|
||||
&:-moz-placeholder
|
||||
color: c
|
||||
&::-moz-placeholder
|
||||
color: c
|
||||
&:-ms-input-placeholder
|
||||
color: c
|
||||
@@ -0,0 +1,39 @@
|
||||
$spacer = 1rem
|
||||
|
||||
$spacer-x = $spacer
|
||||
$spacer-y = $spacer
|
||||
|
||||
generateSpacings($prefix, $spacerX, $spacerY)
|
||||
$spacerAxis = $spacerX,
|
||||
$spacerY
|
||||
|
||||
$spacings = 0 0,
|
||||
1 1,
|
||||
2 1.5,
|
||||
3 3g
|
||||
|
||||
$properties = m margin,
|
||||
p padding
|
||||
|
||||
$sides = t top 1,
|
||||
r right 0,
|
||||
b bottom 1,
|
||||
l left 0
|
||||
|
||||
$axes = x left right 0,
|
||||
y top bottom 1
|
||||
|
||||
.r-font
|
||||
font-size: $spacerX
|
||||
|
||||
for $property in $properties
|
||||
for $spacing in $spacings
|
||||
.{$prefix}{$property[0]}-a-{$spacing[0]}
|
||||
{$property[1]} $spacing[1]*$spacer !important
|
||||
for $side in $sides
|
||||
.{$prefix}{$property[0]}-{$side[0]}-{$spacing[0]}
|
||||
{$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
|
||||
for $axis in $axes
|
||||
.{$prefix}{$property[0]}-{$axis[0]}-{$spacing[0]}
|
||||
{$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
|
||||
{$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
|
||||
@@ -0,0 +1,47 @@
|
||||
.theme-icon-crickets
|
||||
.theme-icon-tide
|
||||
.theme-icon-tigerlily
|
||||
.theme-icon-quartz
|
||||
.theme-icon-overcast
|
||||
.theme-icon-mint
|
||||
.theme-icon-honeycomb
|
||||
display: inline-block
|
||||
background: url('/packages/ohif_design/assets/theme-icons.png') no-repeat
|
||||
overflow: hidden
|
||||
text-indent: -9999px
|
||||
text-align: left
|
||||
|
||||
.theme-icon-crickets
|
||||
background-position: -0px -0px
|
||||
width: 64px
|
||||
height: 56px
|
||||
|
||||
.theme-icon-tide
|
||||
background-position: -0px -56px
|
||||
width: 64px
|
||||
height: 54px
|
||||
|
||||
.theme-icon-tigerlily
|
||||
background-position: -0px -110px
|
||||
width: 62px
|
||||
height: 61px
|
||||
|
||||
.theme-icon-quartz
|
||||
background-position: -0px -171px
|
||||
width: 59px
|
||||
height: 64px
|
||||
|
||||
.theme-icon-overcast
|
||||
background-position: -0px -235px
|
||||
width: 58px
|
||||
height: 37px
|
||||
|
||||
.theme-icon-mint
|
||||
background-position: -0px -272px
|
||||
width: 57px
|
||||
height: 61px
|
||||
|
||||
.theme-icon-honeycomb
|
||||
background-position: -0px -333px
|
||||
width: 50px
|
||||
height: 58px
|
||||
@@ -0,0 +1,64 @@
|
||||
@require "{ohif:themes}/themes"
|
||||
|
||||
/*
|
||||
* Process each theme variable in the given value, splitting it by space
|
||||
*/
|
||||
parseSpaceVars($theme, $value, $alpha)
|
||||
// Split values by space
|
||||
$valueSplit = split(' ', $value)
|
||||
|
||||
// Create an empty list
|
||||
$list = ''
|
||||
pop($list)
|
||||
|
||||
// Iterate over split values
|
||||
for $property in $valueSplit
|
||||
// Try to get the theme with current property key
|
||||
$val = $theme[$property]
|
||||
if ($val)
|
||||
if($val is a 'color')
|
||||
// Apply given alpha if it's a color
|
||||
$val = alpha($val, $alpha)
|
||||
// Push the processed theme variable to the list
|
||||
push($list, $val)
|
||||
else
|
||||
// Push the property itself if not found in theme variables
|
||||
push($list, $property)
|
||||
|
||||
// Merge the resulting processed list by joining values back with space
|
||||
join(' ', $list)
|
||||
|
||||
/*
|
||||
* Process each theme variable in the given value, splitting it by comma
|
||||
*/
|
||||
parseCommaVars($theme, $value, $alpha)
|
||||
// Split values by comma
|
||||
$valueSplit = split(',', $value)
|
||||
|
||||
// Create an empty list
|
||||
$list = ''
|
||||
pop($list)
|
||||
|
||||
// Iterate over split values
|
||||
for $sentence in $valueSplit
|
||||
// Procces the values splitting by space
|
||||
push($list, parseSpaceVars($theme, $sentence, $alpha))
|
||||
|
||||
// Merge the resulting processed list by joining values back with comma
|
||||
unquote(join(',', $list))
|
||||
|
||||
/*
|
||||
* Return a processed theme variable or color with alpha
|
||||
*/
|
||||
theme($property, $value, $alpha=1)
|
||||
|
||||
// Crete the selector for default theme
|
||||
/ {selector()}
|
||||
{$property}: parseCommaVars($themes[$defaultTheme], $value, $alpha)
|
||||
|
||||
// Create the selector for each registered theme
|
||||
for $themeName, $theme in $themes
|
||||
for $selectorPiece in split(',', selector())
|
||||
// prefix the selector with the body.theme-{themeName} selector
|
||||
/ body.theme-{$themeName} {$selectorPiece}
|
||||
{$property}: parseCommaVars($theme, $value, $alpha)
|
||||
@@ -0,0 +1,25 @@
|
||||
@import "./theming.styl"
|
||||
|
||||
// Sizes
|
||||
$topBarHeight = 40px
|
||||
$topBarExpandedHeight = 160px
|
||||
$toolbarHeight = 78px
|
||||
$toolbarDrawerHeight = 62px
|
||||
$studiesSidebarMenuWidth = 307px
|
||||
$rightSidebarMenuWidth = 323px
|
||||
$studyListPadding = 8%
|
||||
$studyListPaddingMediumScreen = 10px
|
||||
|
||||
// Fonts
|
||||
$logoFontFamily = "Sanchez"
|
||||
$logoFontWeight = 300
|
||||
|
||||
// Transitions
|
||||
$transitionDuration = 0.3s
|
||||
$transitionEffect = ease
|
||||
$sidebarTransition = all $transitionDuration $transitionEffect
|
||||
|
||||
|
||||
// Thicknesses
|
||||
$viewportBorderThickness = 1px
|
||||
$uiBorderThickness = 1px
|
||||
Reference in new issue
Block a user