diff --git a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl b/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl index 39dbec75d..bc608d9b9 100644 --- a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl +++ b/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl @@ -27,11 +27,11 @@ $lesionsSidebarMenuWidth = 450px transform(translateX(0%)) .sidebar-left - max-width: $studiesSidebarMenuWidth - order: 1 + theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness) flex: 1 margin-left: - $studiesSidebarMenuWidth - border-right: $uiBorderThickness $uiBorderColor solid + max-width: $studiesSidebarMenuWidth + order: 1 &.sidebar-open margin-left: 0 @@ -62,7 +62,7 @@ $lesionsSidebarMenuWidth = 450px max-width: $lesionsSidebarMenuWidth + 270px &:before - background-color: $uiBorderColor + theme('background-color', '$uiBorderColor') content: '' display: block height: 100% @@ -75,6 +75,6 @@ $lesionsSidebarMenuWidth = 450px margin-right: 0 .studiesListedChanger + theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) padding: 20px 10px text-align: center - border-bottom: $uiBorderThickness $uiBorderColor solid diff --git a/OHIFViewer/client/components/ohifViewer/ohifViewer.styl b/OHIFViewer/client/components/ohifViewer/ohifViewer.styl index df922b898..a8c2b9261 100644 --- a/OHIFViewer/client/components/ohifViewer/ohifViewer.styl +++ b/OHIFViewer/client/components/ohifViewer/ohifViewer.styl @@ -9,8 +9,8 @@ $expandedHeight = 160px .topBar height: $topBarHeight - color: $textPrimaryColor - background-color: $primaryBackgroundColor + theme('color', '$textPrimaryColor') + theme('background-color', '$primaryBackgroundColor') transition(all 0.5s ease) .brandSection @@ -26,14 +26,14 @@ $expandedHeight = 160px display: inline-block font-family: $logoFontFamily font-weight: $logoFontWeight - color: $textPrimaryColor + theme('color', '$textPrimaryColor') line-height: 30px .studyListLinkSection - border-left: $uiBorderThickness solid $uiBorderColor; - + theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) + .btn - color: $textSecondaryColor + theme('color', '$textSecondaryColor') cursor: pointer font-size: 13px font-weight: 500 @@ -41,10 +41,10 @@ $expandedHeight = 160px margin-top: 3px &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') &.studyList background-color: rgba(21, 25, 30, 0.7) @@ -75,5 +75,5 @@ $expandedHeight = 160px .tab-pane .viewerContainer .loadingTextDiv - color: $textSecondaryColor - font-size: 30px \ No newline at end of file + theme('color', '$textSecondaryColor') + font-size: 30px diff --git a/OHIFViewer/client/components/toolbarSection/toolbarSection.styl b/OHIFViewer/client/components/toolbarSection/toolbarSection.styl index 886b938e2..e6ac4b683 100644 --- a/OHIFViewer/client/components/toolbarSection/toolbarSection.styl +++ b/OHIFViewer/client/components/toolbarSection/toolbarSection.styl @@ -1,7 +1,7 @@ @import "{design}/app" .toolbarSection - border-bottom: $uiBorderColor $uiBorderThickness solid + theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) flex: 0 0 auto height: $toolbarHeight overflow: hidden @@ -11,4 +11,4 @@ width: 100% &.expanded - height: $toolbarHeight + $toolbarDrawerHeight \ No newline at end of file + height: $toolbarHeight + $toolbarDrawerHeight diff --git a/OHIFViewer/client/components/viewer/viewer.styl b/OHIFViewer/client/components/viewer/viewer.styl index e42b65915..6847a00d1 100644 --- a/OHIFViewer/client/components/viewer/viewer.styl +++ b/OHIFViewer/client/components/viewer/viewer.styl @@ -6,5 +6,5 @@ width: 100% .loadingTextDiv - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 30px diff --git a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl index 6226a603f..d4d3a9225 100644 --- a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl +++ b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl @@ -1,7 +1,7 @@ @import "{design}/app" $height = 25px -$textColorActive = #2D2D2D +$textColorButtonActive = #2D2D2D .roundedButtonGroup @@ -15,9 +15,9 @@ $textColorActive = #2D2D2D .roundedButton align-items: center - background-color: $uiGrayDark - border: 2px $uiBorderColorDark solid - color: $textSecondaryColor + theme('background-color', '$uiGrayDark') + theme('border', '2px solid $uiBorderColorDark') + theme('color', '$textSecondaryColor') display: flex font-size: 11px font-weight: 500 @@ -29,19 +29,19 @@ $textColorActive = #2D2D2D transition: transition($sidebarTransition) svg - fill: $defaultColor - stroke: $defaultColor + theme('fill', '$defaultColor') + theme('stroke', '$defaultColor') svg span margin: 0 2px - + i line-height: 15px font-size: 15px .bottomLabel - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 12px font-weight: 500 line-height: 12px @@ -58,16 +58,16 @@ $textColorActive = #2D2D2D border-top-right-radius: $height &:hover .roundedButton - background-color: $boxBackgroundColor - color: $uiGrayDark + theme('color', '$uiGrayDark') + theme('background-color', '$boxBackgroundColor') &.active .roundedButton - background-color: $activeColor - border-color: $uiBorderColorActive - color: $textColorActive + theme('background-color', '$activeColor') + theme('border-color', '$uiBorderColorActive') + color: $textColorButtonActive &:hover .roundedButton &.active .roundedButton svg - fill: $uiGrayDark - stroke: $uiGrayDark + theme('fill', '$uiGrayDark') + theme('stroke', '$uiGrayDark') diff --git a/Packages/design/styles/common/global.styl b/Packages/design/styles/common/global.styl index ccaf049ef..37f73f735 100644 --- a/Packages/design/styles/common/global.styl +++ b/Packages/design/styles/common/global.styl @@ -2,11 +2,9 @@ html body font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif - // Try to fix LT-273, need a monitor to test on though. - //text-rendering: optimizeLegibility html hr - border-top: 1px solid $uiBorderColor + theme('border-top', '1px solid $uiBorderColor') label.form-group width: 100% @@ -49,9 +47,9 @@ label.form-group .modal-dialog .modal-content - background: $primaryBackgroundColor - border-color: $uiBorderColor - color: $textSecondaryColor + theme('background', '$primaryBackgroundColor') + theme('border-color', '$uiBorderColor') + theme('color', '$textSecondaryColor') .modal-header, .modal-footer - border-color: $uiBorderColor + theme('border-color', '$uiBorderColor') \ No newline at end of file diff --git a/Packages/design/styles/components/radio.styl b/Packages/design/styles/components/radio.styl index 0756f7854..5f0c14970 100644 --- a/Packages/design/styles/components/radio.styl +++ b/Packages/design/styles/components/radio.styl @@ -3,12 +3,12 @@ .group-radio label cursor: pointer - + input height: 0 width: 0 visibility: hidden - + span padding-left: 23px position: relative @@ -23,14 +23,14 @@ 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 - box-shadow: 0 0 2px 2px $textSecondaryColor - + input:checked + span:after - background: $uiBorderColorDark + theme('background', '$uiBorderColorDark') border-radius: 5px content: '' height: 10px diff --git a/Packages/design/styles/components/select2.styl b/Packages/design/styles/components/select2.styl index a1ef36961..6dc188eb1 100644 --- a/Packages/design/styles/components/select2.styl +++ b/Packages/design/styles/components/select2.styl @@ -22,8 +22,8 @@ span.select2.select2-container padding-left: 11px span.select2-selection__arrow + theme('border-left', '1px solid $primaryBackgroundColor') background-color: $gray1 - border-left: 1px solid $primaryBackgroundColor border-top-right-radius: $borderRadius border-bottom-right-radius: $borderRadius right: 0 @@ -42,8 +42,8 @@ span.select2.select2-container placeholder-color($gray4) li.select2-selection__choice + theme('border-color', '$uiGray') background-color: #FFF - border-color: $uiGray border-radius: $borderRadius color: $gray4 font-size: 12px diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl index b27ce8a43..ebc64a651 100644 --- a/Packages/design/styles/imports/theme-tide.styl +++ b/Packages/design/styles/imports/theme-tide.styl @@ -18,7 +18,6 @@ $themes['tide'] = { $uiBorderColorActive: #00a4d9 $primaryBackgroundColor: #000000 $boxBackgroundColor: #344a61 - $boxBackgroundColorDark: #22374D // Text Colors $textColorActive: black //#89bae5 @@ -26,86 +25,5 @@ $themes['tide'] = { $textSecondaryColor: #6a8fb1 // Other Colors - $menuBackgroundColor: #F2F2F2 $imageSliderColor: #163239 - - // Viewport Settings - $viewportBorderThickness: 1px - $viewportBorderColor: $uiBorderColorDark - $viewportBorderColorHover: $uiBorderColor - $viewportBorderColorActive: $uiBorderColorActive - - // Sizes - $topBarHeight: 40px - $toolbarHeight: 78px - $toolbarDrawerHeight: 62px - - // Thicknesses - $uiBorderThickness: 1px - - // Fonts - $logoFontFamily: "Sanchez" - $logoFontWeight: 300 - - // Transitions - $transitionDuration: 0.3s - $transitionEffect: ease - $sidebarTransition: all $transitionDuration $transitionEffect - $studiesSidebarMenuWidth: 307px - $lesionsSidebarMenuWidth: 323px } - -// Common pallete -$uiYellow = #E29E4A -$uiSkyBlue = #6FBDE2 - -$uiLightGray = #516873 -$uiGray = #263340 -$uiGrayDark = #16202B -$uiGrayDarker = #151A1F -$uiGrayDarkest = #14191E - -// Interface UI Colors -$defaultColor = #9cd0fe -$hoverColor = #ffffff -$activeColor = #00a4d9 -$uiBorderColor = #436270 -$uiBorderColorDark = #3C5D80 -$uiBorderColorActive = #00a4d9 -$primaryBackgroundColor = #000000 -$boxBackgroundColor = #344a61 -$boxBackgroundColorDark = #22374D - -// Text Colors -$textColorActive = black //#89bae5 -$textPrimaryColor = #ffffff -$textSecondaryColor = #6a8fb1 - -// Other Colors -$menuBackgroundColor = #F2F2F2 -$imageSliderColor = #163239 - -// Viewport Settings -$viewportBorderThickness = 1px -$viewportBorderColor = $uiBorderColorDark -$viewportBorderColorHover = $uiBorderColor -$viewportBorderColorActive = $uiBorderColorActive - -// Sizes -$topBarHeight = 40px -$toolbarHeight = 78px -$toolbarDrawerHeight = 62px - -// Thicknesses -$uiBorderThickness = 1px - -// Fonts -$logoFontFamily = "Sanchez" -$logoFontWeight = 300 - -// Transitions -$transitionDuration = 0.3s -$transitionEffect = ease -$sidebarTransition = all $transitionDuration $transitionEffect -$studiesSidebarMenuWidth = 307px -$lesionsSidebarMenuWidth = 323px diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl index ba473d261..2e796532d 100644 --- a/Packages/design/styles/imports/theme-tigerlilly.styl +++ b/Packages/design/styles/imports/theme-tigerlilly.styl @@ -18,7 +18,6 @@ $themes['tigerlilly'] = { $uiBorderColorActive: #ff8a3d $primaryBackgroundColor: #000000 $boxBackgroundColor: #5b3a59 - $boxBackgroundColorDark: #4b2f40 // Text Colors $textColorActive: black @@ -26,31 +25,5 @@ $themes['tigerlilly'] = { $textSecondaryColor: #6a8fb1 // Other Colors - $menuBackgroundColor: #F2F2F2 $imageSliderColor: #4b2c3c //#163239 - - // Viewport Settings - $viewportBorderThickness: 1px - $viewportBorderColor: $uiBorderColorDark - $viewportBorderColorHover: $uiBorderColor - $viewportBorderColorActive: $uiBorderColorActive - - // Sizes - $topBarHeight: 40px - $toolbarHeight: 78px - $toolbarDrawerHeight: 62px - - // Thicknesses - $uiBorderThickness: 1px - - // Fonts - $logoFontFamily: "Sanchez" - $logoFontWeight: 300 - - // Transitions - $transitionDuration: 0.3s - $transitionEffect: ease - $sidebarTransition: all $transitionDuration $transitionEffect - $studiesSidebarMenuWidth: 307px - $lesionsSidebarMenuWidth: 323px } diff --git a/Packages/design/styles/imports/theming.styl b/Packages/design/styles/imports/theming.styl index 528ac4e43..68b752750 100644 --- a/Packages/design/styles/imports/theming.styl +++ b/Packages/design/styles/imports/theming.styl @@ -1,3 +1,9 @@ +$themes = {} +$defaultTheme = 'tide' + +@import "./theme-tide.styl" +@import "./theme-tigerlilly.styl" + parseSpaceVars($theme, $value) $valueSplit = split(' ', $value) $list = '' @@ -21,5 +27,6 @@ theme($property, $value) / {selector()} {$property}: parseCommaVars($themes[$defaultTheme], $value) for $themeName, $theme in $themes - / body.theme-{$themeName} {selector()} - {$property}: parseCommaVars($theme, $value) + for $selectorPiece in split(',', selector()) + / body.theme-{$themeName} {$selectorPiece} + {$property}: parseCommaVars($theme, $value) diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl index 362c5a1b8..9a5d3896b 100644 --- a/Packages/design/styles/imports/variables.styl +++ b/Packages/design/styles/imports/variables.styl @@ -1,7 +1,22 @@ -$themes = {} -$defaultTheme = 'tide' - @import "./theming.styl" -@import "./theme-tide.styl" -@import "./theme-tigerlilly.styl" +// Sizes +$topBarHeight = 40px +$toolbarHeight = 78px +$toolbarDrawerHeight = 62px +$studiesSidebarMenuWidth = 307px +$lesionsSidebarMenuWidth = 323px + +// Fonts +$logoFontFamily = "Sanchez" +$logoFontWeight = 300 + +// Transitions +$transitionDuration = 0.3s +$transitionEffect = ease +$sidebarTransition = all $transitionDuration $transitionEffect + + +// Thicknesses +$viewportBorderThickness = 1px +$uiBorderThickness = 1px diff --git a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl index 6a1061a22..9c5bdb8dc 100644 --- a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl +++ b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl @@ -3,12 +3,12 @@ $height = 20px #protocolEditor + theme('background', '$primaryBackgroundColor') height: 100% width: 450px padding: 10px 0 position: absolute top: 0 - background: $primaryBackgroundColor .navigationButtons ul @@ -35,27 +35,27 @@ $height = 20px cursor: pointer text-decoration: none outline: none - background-color: $uiGrayDark - border: 2px $uiBorderColorDark solid - color: $textSecondaryColor + theme('background-color', '$uiGrayDark') + theme('border', '2px solid $uiBorderColorDark') + theme('color', '$textSecondaryColor') transition: transition($sidebarTransition) border-radius: $height &.active a - background-color: $activeColor - border-color: $uiBorderColorActive - color: $textColorActive + theme('background-color', '$activeColor') + theme('border-color', '$uiBorderColorActive') + theme('color', '$textColorActive') transition: transition($sidebarTransition) p h2 h3 h4 - color: $defaultColor + theme('color', '$defaultColor') label ul - color: $defaultColor + theme('color', '$defaultColor') font-weight: 400 label @@ -68,7 +68,7 @@ $height = 20px width: 40% border: none background: #212121 - color: $defaultColor + theme('color', '$defaultColor') text-align: center button.btn @@ -85,11 +85,11 @@ $height = 20px bottom: 0 width: 100% margin-bottom: 0 - background: $uiGrayDarker + theme('background', '$uiGrayDarker') p font-size: 8pt - color: $defaultColor + theme('color', '$defaultColor') margin: 0 10px display: inline-block @@ -107,11 +107,11 @@ $height = 20px #selectProtocol text-align: center - .btn-file + .btn-file position: relative overflow: hidden - - .btn-file input[type=file] + + .btn-file input[type=file] position: absolute top: 0 right: 0 @@ -141,4 +141,4 @@ $height = 20px padding: 40px h3 - color: $defaultColor \ No newline at end of file + theme('color', '$defaultColor') diff --git a/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl b/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl index 51b5164a5..7d7681269 100644 --- a/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl +++ b/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl @@ -1,6 +1,9 @@ @import "{design}/app.styl" .ruleEntryDialog + theme('background', '$uiGrayDarkest') + theme('border', '1px solid $uiBorderColor') + theme('color', '$textSecondaryColor') display: none position: absolute top: 0 @@ -14,12 +17,8 @@ padding: 10px background-color: rgba(255,255,255,1) outline: none - opacity: 0.95 border-radius: 8px - border: 1px solid $uiBorderColor - background: $uiGrayDarkest - color: $textSecondaryColor .dialogContent text-align: center @@ -44,4 +43,4 @@ color: black height: 30px border-radius: 2px - border: 0 \ No newline at end of file + border: 0 diff --git a/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl b/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl index 5b92f45cc..0a6f57387 100644 --- a/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl +++ b/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl @@ -4,7 +4,7 @@ table.ruleTable thead tr th - color: $defaultColor + theme('color', '$defaultColor') text-align: center th:first-child @@ -13,7 +13,7 @@ table.ruleTable tbody tr td - color: $defaultColor + theme('color', '$defaultColor') text-align: center .failWarning @@ -26,10 +26,10 @@ table.ruleTable transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') td:first-child text-align: left @@ -37,14 +37,14 @@ table.ruleTable .addRuleContainer margin: 10px 0 text-align: center - color: $defaultColor + theme('color', '$defaultColor') .addRule cursor: pointer transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor \ No newline at end of file + theme('color', '$activeColor') \ No newline at end of file diff --git a/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl b/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl index 31d543b13..be233ff38 100644 --- a/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl +++ b/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl @@ -1,6 +1,9 @@ @import "{design}/app.styl" .settingEntryDialog + theme('border', '1px solid $uiBorderColor') + theme('background', '$uiGrayDarkest') + theme('color', '$textSecondaryColor') display: none position: absolute top: 0 @@ -13,12 +16,8 @@ margin: auto padding: 10px outline: none - opacity: 0.95 border-radius: 8px - border: 1px solid $uiBorderColor - background: $uiGrayDarkest - color: $textSecondaryColor .dialogContent text-align: center @@ -43,4 +42,4 @@ color: black height: 30px border-radius: 2px - border: 0 \ No newline at end of file + border: 0 diff --git a/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl b/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl index c57ee1895..801b6f7d6 100644 --- a/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl +++ b/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl @@ -4,7 +4,7 @@ table.settingsTable thead tr th - color: $defaultColor + theme('color', '$defaultColor') text-align: center th:first-child @@ -15,7 +15,7 @@ table.settingsTable tr td - color: $defaultColor + theme('color', '$defaultColor') text-align: center .editSetting @@ -24,10 +24,10 @@ table.settingsTable transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') td:first-child text-align: left @@ -35,14 +35,14 @@ table.settingsTable .addSettingContainer margin: 10px 0 text-align: center - color: $defaultColor + theme('color', '$defaultColor') .addSetting cursor: pointer transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor \ No newline at end of file + theme('color', '$activeColor') \ No newline at end of file diff --git a/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl b/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl index e9c6d0190..ea8dc373e 100644 --- a/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl +++ b/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl @@ -14,19 +14,19 @@ h3 label - color: $defaultColor + theme('color', '$defaultColor') label margin-right: 10px width: 25% input + theme('background-color', '$boxBackgroundColor')Dark min-width: 50px width: 40% border: none - background: $boxBackgroundColorDark - color: $defaultColor + theme('color', '$defaultColor') text-align: center .stageEditorSection - margin: 30px 0 \ No newline at end of file + margin: 30px 0 diff --git a/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl b/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl index c283529ef..e5d24a7a1 100644 --- a/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl +++ b/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl @@ -8,14 +8,14 @@ padding: 3px span - color: $defaultColor + theme('color', '$defaultColor') cursor: pointer &:hover - color: $hoverColor + theme('color', '$hoverColor') &.active - color: $activeColor + theme('color', '$activeColor') .sortable-handle cursor: move @@ -36,44 +36,44 @@ .deleteStage cursor: pointer - color: $defaultColor + theme('color', '$defaultColor') transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') .addStage margin: 10px 0 text-align: center - color: $defaultColor + theme('color', '$defaultColor') #addStage transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') .moveStageButtons margin: 10px 0 text-align: center a - color: $defaultColor + theme('color', '$defaultColor') cursor: pointer text-decoration: none transition(all 0.1s ease) &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') &[disabled="true"] opacity: 0.7 diff --git a/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl b/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl index 8ae55fe18..f64cdb223 100644 --- a/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl +++ b/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl @@ -1,6 +1,9 @@ @import "{design}/app.styl" .textEntryDialog + theme('border', '1px solid $uiBorderColor') + theme('background', '$uiGrayDarkest') + theme('color', '$textSecondaryColor') display: none position: absolute top: 0 @@ -13,12 +16,8 @@ margin: auto padding: 10px outline: none - opacity: 0.95 border-radius: 8px - border: 1px solid $uiBorderColor - background: $uiGrayDarkest - color: $textSecondaryColor .dialogContent margin-bottom: 10px @@ -36,4 +35,4 @@ color: black height: 30px border-radius: 2px - border: 0 \ No newline at end of file + border: 0 diff --git a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl index 0b8428f90..d1bb55b7b 100644 --- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl +++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl @@ -22,22 +22,22 @@ display: none .header + theme('background-color', '$uiGray') + theme('color', '$textPrimaryColor') height: 33px line-height: 33px font-weight: bold font-size: 14px padding: 1px 13px 0 - color: $textPrimaryColor - background-color: $uiGray .form-group - color: $textPrimaryColor + theme('color', '$textPrimaryColor') margin-bottom: 0 padding: 7px 27px 7px 11px width: 100% &:not(:last-child) - border-bottom: $uiBorderThickness solid $uiBorderColorDark + theme('border-bottom', '%s solid $uiBorderColorDark' % $uiBorderThickness) & > .wrapperText display: block @@ -81,21 +81,21 @@ .buttonSection cursor: pointer height: 90px - color: $defaultColor + theme('color', '$defaultColor') &:hover - color: $hoverColor + theme('color', '$hoverColor') .svgContainer svg - fill: $hoverColor + theme('fill', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') .svgContainer svg - fill: $activeColor + theme('fill', '$activeColor') div float: left @@ -112,4 +112,4 @@ svg width: 36px height: 36px - fill: $textPrimaryColor + theme('fill', '$textPrimaryColor') diff --git a/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl b/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl index 528e032df..3fe96cb04 100644 --- a/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl +++ b/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl @@ -13,15 +13,15 @@ margin-left: 22px h5 - color: $textPrimaryColor + theme('color', '$textPrimaryColor') line-height: 46px margin: 0 font-size: 15px font-weight: bold button.btn - background-color: $activeColor - border: 1px solid $uiBorderColorActive + theme('background-color', '$activeColor') + theme('border', '1px solid $uiBorderColorActive') color: #000 cursor: pointer font-size: 15px diff --git a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl index 69807f422..70b178a6a 100644 --- a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl +++ b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl @@ -25,11 +25,11 @@ transform(translateX(0%)) .sidebar-left + theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness) max-width: $studiesSidebarMenuWidth order: 1 flex: 1 margin-left: - $studiesSidebarMenuWidth - border-right: $uiBorderThickness $uiBorderColor solid &.sidebar-open margin-left: 0 @@ -60,7 +60,7 @@ max-width: $lesionsSidebarMenuWidth + 270px &:before - background-color: $uiBorderColor + theme('background-color', '$uiBorderColor') content: '' display: block height: 100% @@ -73,6 +73,6 @@ margin-right: 0 .studiesListedChanger + theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) padding: 20px 10px text-align: center - border-bottom: $uiBorderThickness $uiBorderColor solid diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl index fc37495bc..27fa6756a 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl +++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl @@ -1,7 +1,7 @@ @import "{design}/app" #lesionTableContainer - background-color: $primaryBackgroundColor + theme('background-color', '$primaryBackgroundColor') height: 100% width: 100% diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl index 08c47f4f5..edbc8416f 100644 --- a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl @@ -22,9 +22,9 @@ $borderColor = rgba(77, 99, 110, 0.81) padding-left: 0 .header - background: $uiGrayDarkest + theme('background', '$uiGrayDarkest') + theme('color', '$textSecondaryColor') border-bottom: $uiBorderThickness solid $borderColor - color: $textSecondaryColor font-weight: 300 font-size: 20px height: 55px @@ -34,12 +34,12 @@ $borderColor = rgba(77, 99, 110, 0.81) width: 100% svg.buttonClose - color: $defaultColor + theme('color', '$defaultColor') cursor: pointer height: 14px position: absolute right: 14px - stroke: $defaultColor + theme('stroke', '$defaultColor') top: 20px width: 14px @@ -48,19 +48,19 @@ $borderColor = rgba(77, 99, 110, 0.81) padding-bottom: 20px .footer + theme('background', '$uiGrayDarkest') + border-top: $uiBorderThickness solid $borderColor width: 100% height: 70px position: absolute bottom: 0 - background: $uiGrayDarkest - border-top: $uiBorderThickness solid $borderColor padding: 10px .toolbarSectionButton display: inline-block - color: $defaultColor - fill: $defaultColor - stroke: $defaultColor + theme('color', '$defaultColor') + theme('fill', '$defaultColor') + theme('stroke', '$defaultColor') padding: 0 10px height: $toolbarHeight min-width: 30px @@ -85,15 +85,15 @@ $borderColor = rgba(77, 99, 110, 0.81) height: 21px &:active, &.active - color: $activeColor + theme('color', '$activeColor') svg - fill: $activeColor - stroke: $activeColor + theme('fill', '$activeColor') + theme('stroke', '$activeColor') &:hover - color: $hoverColor + theme('color', '$hoverColor') svg - fill: $hoverColor - stroke: $hoverColor + theme('fill', '$hoverColor') + theme('stroke', '$hoverColor') diff --git a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl index 8352934cf..9d8d65a25 100644 --- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl @@ -3,10 +3,10 @@ $headerRowHeight = 63px .lesionTableHeaderRow - background-color: $uiGrayDarker - color: $textSecondaryColor + theme('background-color', '$uiGrayDarker') + theme('color', '$textSecondaryColor') display: flex - fill: $textSecondaryColor + theme('fill', '$textSecondaryColor') height: $headerRowHeight line-height: $headerRowHeight margin-top: 2px @@ -35,13 +35,13 @@ $headerRowHeight = 63px max-width: 11px &:hover - fill: $hoverColor + theme('fill', '$hoverColor') &:active - fill: $activeColor + theme('fill', '$activeColor') .type - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 22px font-weight: 300 line-height: $headerRowHeight @@ -49,8 +49,8 @@ $headerRowHeight = 63px text-align: left .numberOfLesions + theme('color', '$uiSkyBlue') float: right - color: $uiSkyBlue font-weight: 300 font-size: 40px max-width: 54px @@ -63,7 +63,7 @@ $headerRowHeight = 63px text-align: right .maxNumLesions - background-color: $textSecondaryColor + theme('background-color', '$textSecondaryColor') border-radius: 3px color: black display: table @@ -79,5 +79,5 @@ $headerRowHeight = 63px &.warning .maxNumLesions - color: $textPrimaryColor - background-color: $uiYellow \ No newline at end of file + theme('background-color', '$uiYellow') + theme('color', '$textPrimaryColor') diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl index aa9ca8ba9..5e38b2c4e 100644 --- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl @@ -10,7 +10,7 @@ width: calc(100% + 6px) &:before - background-color: $activeColor + theme('background-color', '$activeColor') border-top-left-radius: 7px border-bottom-left-radius: 7px content: '' @@ -30,16 +30,16 @@ opacity: 1 .lesionRowSidebar - color: $activeColor + theme('color', '$activeColor') .rowOptions height: 35px visibility: visible &.response-status .lesionRowSidebar .response-status-icon - background-color: $defaultColor + theme('background-color', '$defaultColor') + theme('color', '$uiGray') border-radius: 11px - color: $uiGray font-size: 12px font-weight: 700 height: 21px @@ -49,8 +49,8 @@ width: 21px &.warning .lesionRowSidebar - color: $textPrimaryColor - background-color: $uiYellow + theme('background-color', '$uiYellow') + theme('color', '$textPrimaryColor') .warning-icon, svg width: 22px @@ -60,31 +60,31 @@ margin: 7px auto 0 svg - fill: $textPrimaryColor + theme('fill', '$textPrimaryColor') .rowOptions - background-color: $uiGrayDarker + theme('background-color', '$uiGrayDarker') height: 0 overflow: hidden transition(all 0.3s ease) visibility: hidden .rowAction - color: $defaultColor + theme('color', '$defaultColor') cursor: pointer line-height: 35px transition(all 0.3s ease) &:hover, &:active - color: $textPrimaryColor + theme('color', '$textPrimaryColor') svg - fill: $textPrimaryColor - stroke: $textPrimaryColor + theme('fill', '$textPrimaryColor') + theme('stroke', '$textPrimaryColor') svg - fill: $defaultColor - stroke: $defaultColor + theme('fill', '$defaultColor') + theme('stroke', '$defaultColor') transition(all 0.3s ease) &.edit-icon @@ -96,8 +96,8 @@ height: 11px .lesionRowSidebar - background: $uiGray - color: $textSecondaryColor + theme('background', '$uiGray') + theme('color', '$textSecondaryColor') cursor: pointer flex: 1 max-width: 30px @@ -120,7 +120,7 @@ .location font-weight: 400 font-size: 14px - color: $textSecondaryColor + theme('color', '$textSecondaryColor') height: 30px line-height: 30px margin-left: -2px diff --git a/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl b/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl index 0457b0c3f..622c188a0 100644 --- a/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl +++ b/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl @@ -1,6 +1,6 @@ @import "{design}/app" .lesionTableTimepointCell - border-left: $uiBorderThickness $uiBorderColor solid - color: $textPrimaryColor + theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) + theme('color', '$textPrimaryColor') padding: 0 10px diff --git a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl index 93e732fc5..18811e41e 100644 --- a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl +++ b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl @@ -5,18 +5,18 @@ justify-content: space-around div - border-left: $uiBorderColor $uiBorderThickness solid + theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) font-weight: 400 padding-left: 12px text-align: left .timepointName - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 12px line-height: 12px .timepointDate - color: $textPrimaryColor + theme('color', '$textPrimaryColor') font-size: 14px line-height: 20px padding-bottom: 6px diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl index 1619a3359..a8c2b9261 100644 --- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl +++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl @@ -9,8 +9,8 @@ $expandedHeight = 160px .topBar height: $topBarHeight - color: $textPrimaryColor - background-color: $primaryBackgroundColor + theme('color', '$textPrimaryColor') + theme('background-color', '$primaryBackgroundColor') transition(all 0.5s ease) .brandSection @@ -26,14 +26,14 @@ $expandedHeight = 160px display: inline-block font-family: $logoFontFamily font-weight: $logoFontWeight - color: $textPrimaryColor + theme('color', '$textPrimaryColor') line-height: 30px .studyListLinkSection - border-left: $uiBorderThickness solid $uiBorderColor; - + theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) + .btn - color: $textSecondaryColor + theme('color', '$textSecondaryColor') cursor: pointer font-size: 13px font-weight: 500 @@ -41,10 +41,10 @@ $expandedHeight = 160px margin-top: 3px &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') &.studyList background-color: rgba(21, 25, 30, 0.7) @@ -75,5 +75,5 @@ $expandedHeight = 160px .tab-pane .viewerContainer .loadingTextDiv - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 30px diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl index bfbf89da1..502d0f3a6 100644 --- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl +++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl @@ -10,9 +10,6 @@ opacity: 0 .btn-add - // color: $textColorActive - // background-color: $activeColor - // border: 2px solid $uiBorderColor theme('color', '$textColorActive') theme('background-color', '$activeColor') theme('border', '2px solid $uiBorderColor') @@ -46,7 +43,7 @@ position: relative .icon-check - background-color: $activeColor + theme('background-color', '$activeColor') left: -46px position: absolute top: 3px @@ -73,10 +70,10 @@ animateFadeOut() button + theme('border', '1px solid $uiBorderColor') + theme('color', '$textPrimaryColor') background-color: transparent border-radius: 16px - border: 1px solid $uiBorderColor - color: $textPrimaryColor font-weight: normal height: 31px line-height: 31px diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl index 09bc9fb27..465ef4aef 100644 --- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl +++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl @@ -11,12 +11,12 @@ $circleSize = 46px #svg circle stroke-dashoffset: 0 - stroke: $uiBorderColorDark + theme('stroke', '$uiBorderColorDark') stroke-width: 3px vendorize(transition, stroke-dashoffset 1s linear) #svg #bar - stroke: $activeColor + theme('stroke', '$activeColor') vendorize(transform, rotate(270deg)) vendorize(transform-origin, center center) @@ -28,14 +28,14 @@ $circleSize = 46px font-weight: 700 font-size: 17px text-align: center - color: $activeColor + theme('color', '$activeColor') top: 0 svg - fill: $activeColor + theme('fill', '$activeColor') left: 50% position: absolute - stroke: $activeColor + theme('stroke', '$activeColor') top: 50% transform(translateX(-50%) translateY(-50%)) diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index 13a5ca71d..00da950df 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -15,7 +15,7 @@ $seriesSpacing = 2px transform(translateX(-50%)) &.left - border-right: 1px solid $uiBorderColor + theme('border-right', '1px solid $uiBorderColor') right: 50% &.right @@ -26,7 +26,7 @@ $seriesSpacing = 2px z-index: 3 &:before - background-color: $primaryBackgroundColor + theme('background-color', '$primaryBackgroundColor') bottom: 0 content: '' left: 0 @@ -98,10 +98,10 @@ $seriesSpacing = 2px .studyTimepointBrowser background-color: transparent .studyTimepointStudy.active .studyModality - box-shadow: inset 0 0 0 3px $activeColor + theme('box-shadow', 'inset 0 0 0 3px $activeColor') .studyBox - background-color: $uiGrayDark - border: solid 1px $activeColor + theme('background-color', '$uiGrayDark') + theme('border', 'solid 1px $activeColor') border-radius: 11px display: block height: $switchSize @@ -113,7 +113,7 @@ $seriesSpacing = 2px width: $switchSize + $seriesSpacing .seriesItem - background-color: $boxBackgroundColorDark + theme('background-color', '$boxBackgroundColor')Dark border-radius: 3px height: 15px margin: $seriesSpacing @@ -121,17 +121,17 @@ $seriesSpacing = 2px &.count background-color: transparent - color: $textPrimaryColor + theme('color', '$textPrimaryColor') font-size: 12px font-weight: 500 line-height: 17px text-align: center &.active - background-color: $activeColor + theme('background-color', '$activeColor') .label - color: $textSecondaryColor + theme('color', '$textSecondaryColor') display: block font-size: 12px font-weight: 300 diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl index 17223a024..4d736d99e 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl @@ -3,15 +3,15 @@ $timepointButtonHeight = 55px .studyTimepointBrowser - background-color: $primaryBackgroundColor + theme('background-color', '$primaryBackgroundColor') float: left height: 100% position: relative width: 100% .timepointButtonContainer - background-color: $primaryBackgroundColor - border-bottom: 1px solid $uiBorderColor + theme('background-color', '$primaryBackgroundColor') + theme('border-bottom', '1px solid $uiBorderColor') display: none height: $timepointButtonHeight left: 10px @@ -38,7 +38,7 @@ $timepointButtonHeight = 55px transform: rotateX(180deg) .timepointFollowupTitle font-size: 14px - color: $textSecondaryColor + theme('color', '$textSecondaryColor') text-transform: uppercase .timepointHeader @@ -50,7 +50,7 @@ $timepointButtonHeight = 55px .timepointFollowupTitle .timepointDate .timepointModalities - color: $textSecondaryColor + theme('color', '$textSecondaryColor') transition($sidebarTransition) &:hover @@ -59,7 +59,7 @@ $timepointButtonHeight = 55px .expandIcon i .timepointDate .timepointModalities - color: $textPrimaryColor !important + theme('color', '$textPrimaryColor') !important .timepointDetails .timepointModalities @@ -70,10 +70,10 @@ $timepointButtonHeight = 55px overflow: hidden .expandIcon i - color: $defaultColor + theme('color', '$defaultColor') .timepointFollowupTitle - color: $textPrimaryColor + theme('color', '$textPrimaryColor') padding-top: 2px .studyTimepointScrollArea @@ -91,7 +91,7 @@ $timepointButtonHeight = 55px margin-right: 16px .studySidebarTimepoint .thumbnailEntry.active:before - background-color: $activeColor + theme('background-color', '$activeColor') border-top-right-radius: 7px border-bottom-right-radius: 7px content: '' diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl index 2d058dae9..e1d31d584 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl @@ -3,8 +3,6 @@ $boxBorderColor = transparent $boxHoverBackgroundColor = #14191E $boxHoverBorderColor = #2d4660 -$boxActiveBackgroundColor = $activeColor -$boxActiveTextColor = $primaryBackgroundColor $boxActiveBorderColor = #131D29 $boxWidth = 50px $borderThickness = 2px @@ -41,11 +39,11 @@ $spacerY = 12px &.active .studyModality .studyModalityBox - color: $boxActiveTextColor + theme('color', '$primaryBackgroundColor') & &:before &:after - background-color: $boxActiveBackgroundColor + theme('background-color', '$activeColor') border-color: $boxActiveBorderColor &:not(.active) .studyTimepointThumbnails @@ -69,10 +67,10 @@ $spacerY = 12px border-color: $boxHoverBorderColor &.additional - color: $textSecondaryColor + theme('color', '$textSecondaryColor') &.additional - color: $textPrimaryColor + theme('color', '$textPrimaryColor') font-size: 16px font-weight: normal height: 91px @@ -89,13 +87,13 @@ $spacerY = 12px top: $spacerY .studyDate margin-top: 8px - color: $textSecondaryColor + theme('color', '$textSecondaryColor') .studyDescription margin-top: 8px - color: $textPrimaryColor + theme('color', '$textPrimaryColor') .studyModalityBox - color: $textSecondaryColor + theme('color', '$textSecondaryColor') line-height: $boxWidth margin-left: $nestingMargin * 2 margin-top: $nestingMargin * 2 @@ -109,8 +107,8 @@ $spacerY = 12px & &:before &:after - background-color: $boxBackgroundColor - border: $borderThickness solid $primaryBackgroundColor + theme('border', '$borderThickness solid $primaryBackgroundColor') + theme('background-color', '$boxBackgroundColor') border-radius: $boxBorderRadius height: $boxWidth + ($borderThickness * 2) transition($sidebarTransition) diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl index 389e1ecec..f093294e2 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl @@ -1,7 +1,7 @@ @import "{design}/app" .toolbarSection - border-bottom: $uiBorderColor $uiBorderThickness solid + theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) flex: 0 0 auto height: $toolbarHeight overflow: hidden @@ -14,11 +14,11 @@ height: $toolbarHeight + $toolbarDrawerHeight .toolbarSectionEntry - color: $defaultColor + theme('color', '$defaultColor') cursor: pointer display: inline-block - fill: $defaultColor + theme('fill', '$defaultColor') margin-top: 3px min-width: 30px - stroke: $defaultColor - text-align: center \ No newline at end of file + theme('stroke', '$defaultColor') + text-align: center diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl index c55aa873e..45a733782 100644 --- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl +++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl @@ -5,7 +5,7 @@ height: 100% .dropdown-toggle - color: $defaultColor + theme('color', '$defaultColor') cursor: pointer font-size: 13px font-weight: 400 @@ -13,19 +13,19 @@ text-decoration: none .menuButton - border-left: solid 1px $defaultColor + theme('border-left', 'solid 1px $defaultColor') display: inline-block height: 18px padding: 0 8px .fa - color: $defaultColor + theme('color', '$defaultColor') font-size: 17px line-height: 18px .caret-down + theme('color', '$uiLightGray') margin: 0 4px 4px 2px - color: $uiLightGray ul.dropdown-menu li diff --git a/Packages/lesiontracker/client/components/viewer/viewer.styl b/Packages/lesiontracker/client/components/viewer/viewer.styl index 250aa52d7..0e2f65bb1 100644 --- a/Packages/lesiontracker/client/components/viewer/viewer.styl +++ b/Packages/lesiontracker/client/components/viewer/viewer.styl @@ -19,4 +19,4 @@ &:not(:last-child) .removable .imageViewerViewport - border-right: $uiBorderThickness solid $uiBorderColor + theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness) diff --git a/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl b/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl index 6df9f2012..4c61e50af 100644 --- a/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl +++ b/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl @@ -6,7 +6,7 @@ display: inline-block font-family: $logoFontFamily font-weight: $logoFontWeight - color: $textPrimaryColor + theme('color', '$textPrimaryColor') font-size: 20pt line-height: 45px text-decoration: none diff --git a/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl b/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl index bbf320102..1d4180008 100644 --- a/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl +++ b/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl @@ -1,15 +1,15 @@ @import "{design}/app" .thumbnailEntry.active .imageThumbnail - border-color: $activeColor + theme('border-color', '$activeColor') box-shadow: none transition($sidebarTransition) .imageThumbnail - background-color: $primaryBackgroundColor + theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark') + theme('background-color', '$primaryBackgroundColor') border: 5px solid transparent border-radius: 12px - box-shadow: inset 0 0 0 1px $uiBorderColorDark height: 135px margin: 0 auto padding 1px 7px @@ -18,7 +18,7 @@ width: 217px &:hover - border-color: $hoverColor + theme('border-color', '$hoverColor') box-shadow: none .imageThumbnailCanvas @@ -28,7 +28,7 @@ .thumbnailLoadingIndicator display: none pointer-events: none - color: $textSecondaryColor + theme('color', '$textSecondaryColor') height: 20px width: 100% top: 0 diff --git a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl index 310d7724f..eb058f6ac 100644 --- a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl +++ b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl @@ -13,7 +13,7 @@ $seriesCountBackgroundColor = #678696 cursor: -moz-grab .seriesDetails - color: $textPrimaryColor + theme('color', '$textPrimaryColor') font-size: 14px line-height: 1.3em min-height: 36px @@ -33,7 +33,7 @@ $seriesCountBackgroundColor = #678696 margin-right: 4px .seriesInformationNumbers - color: $textSecondaryColor + theme('color', '$textSecondaryColor') float: left font-size: 12px @@ -42,7 +42,7 @@ $seriesCountBackgroundColor = #678696 text-align: right strong - color: $activeColor + theme('color', '$activeColor') font-size: 10px font-weight: 900 @@ -52,7 +52,7 @@ $seriesCountBackgroundColor = #678696 position: relative &:after - background-color: $activeColor + theme('background-color', '$activeColor') box-shadow: 1px 1px rgba(0, 0, 0, .115) left: -5px position: absolute @@ -60,7 +60,7 @@ $seriesCountBackgroundColor = #678696 & &:after - border: 1px solid $primaryBackgroundColor + theme('border', '1px solid $primaryBackgroundColor') content: '' display: block height: 11px diff --git a/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl b/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl index 3ff9125e2..21919e4c4 100644 --- a/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl +++ b/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl @@ -1,6 +1,9 @@ @import "{design}/app.styl" .annotationDialog + theme('border', '1px solid $uiBorderColor') + theme('background', '$uiGrayDarkest') + theme('color', '$textSecondaryColor') display: none z-index: 1000 position: absolute @@ -9,17 +12,12 @@ left: 0 right: 0 margin: auto - overflow: hidden padding: 10px width: 300px height: 140px - opacity: 0.95 border-radius: 8px - border: 1px solid $uiBorderColor - background: $uiGrayDarkest - color: $textSecondaryColor h5, label font-weight: 400 @@ -31,4 +29,4 @@ margin-left: 5px .annotationDialogConfirm - float: right \ No newline at end of file + float: right diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl index c5353ac00..a9966399f 100644 --- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -1,6 +1,9 @@ @import "{design}/app.styl" #cineDialog + theme('border', '1px solid $uiBorderColor') + theme('background', '$uiGrayDarkest') + theme('color', '$textSecondaryColor') display: none z-index: 1000 position: absolute @@ -8,17 +11,12 @@ left: auto bottom: 3px right: 3px - overflow: hidden padding: 10px width: 300px height: 175px - opacity: 0.95 border-radius: 8px - border: 1px solid $uiBorderColor - background: $uiGrayDarkest - color: $textSecondaryColor h5, label font-weight: 400 @@ -26,18 +24,18 @@ box-sizing: border-box .btn - background: $uiGrayDarkest - color: $textSecondaryColor + theme('background', '$uiGrayDarkest') + theme('color', '$textSecondaryColor') &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active, &.active - color: $activeColor + theme('color', '$activeColor') #cineOptions padding: 5px 0 overflow: auto #loopSection - padding-right: 12px \ No newline at end of file + padding-right: 12px diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl index 647a147af..a4d1cd86a 100644 --- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl +++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl @@ -75,7 +75,7 @@ $imageSliderCursor = grab // --- Style the range thumb --- // &::-webkit-slider-thumb -webkit-appearance: none !important - background-color: $imageSliderColor + theme('background-color', '$imageSliderColor') border-radius: $imageSliderBorderRadius border: $imageSliderBorder height: $imageSliderWidth @@ -84,10 +84,10 @@ $imageSliderCursor = grab margin-top: -7px &:active - background-color: $activeColor + theme('background-color', '$activeColor') &::-moz-range-thumb - background-color: $imageSliderColor + theme('background-color', '$imageSliderColor') border-radius: $imageSliderBorderRadius border: $imageSliderBorder height: $imageSliderWidth @@ -96,10 +96,10 @@ $imageSliderCursor = grab z-index: 7 &:active - background-color: $activeColor + theme('background-color', '$activeColor') &::-ms-thumb - background-color: $imageSliderColor + theme('background-color', '$imageSliderColor') border-radius: $imageSliderBorderRadius border: $imageSliderBorder height: $imageSliderWidth @@ -107,7 +107,7 @@ $imageSliderCursor = grab cursor: $imageSliderCursor &:active - background-color: $activeColor + theme('background-color', '$activeColor') // Set left position in IE, border-width attribute breaks left position of imageSlider @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) diff --git a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl index bdeacfc8e..afd6269a2 100644 --- a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl +++ b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl @@ -15,7 +15,7 @@ .viewportInstructions display: none font-size: 13px - color: $textSecondaryColor + theme('color', '$textSecondaryColor') line-height: 18px pointer-events: none // Necessary for drag/drop through to cornerstone element below text-align: center diff --git a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl index 7b7629839..f611e626b 100644 --- a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl +++ b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl @@ -3,29 +3,28 @@ $borderColor = rgba(77, 99, 110, 0.81) .layoutChooser + theme('background', '$uiGrayDarkest') width: 92px height: 92px min-width: 92px // to override bootstrap's dropdown-menu class min-height: 92px - - //background-color: $primaryBackgroundColor + // theme('background-color', '$primaryBackgroundColor') opacity: 0.95 border-radius: 8px border: 1px solid $borderColor; - background: $uiGrayDarkest &.open display: block table margin: 0 auto - + td + theme('border', '1px solid $uiBorderColorDark') cursor: pointer - border: 1px solid $uiBorderColorDark - width: 20px height: 20px transition(background-color 0.1s ease) - + width: 20px + &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave - background-color: $activeColor \ No newline at end of file + theme('background-color', '$activeColor') diff --git a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl index ebe12e251..34a66a158 100644 --- a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl +++ b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl @@ -1,21 +1,21 @@ @import "{design}/app.styl" .imageViewerLoadingIndicator - color: $textSecondaryColor + theme('color', '$textSecondaryColor') .faded opacity: 0.5 .imageViewerErrorLoadingIndicator - color: $uiYellow - + theme('color', '$uiYellow') + p, h4 text-align: center padding: 4px 0 - + p font-size: 11pt - + .loadingIndicator display: none pointer-events: none // Necessary for click-through to cornerstone element below @@ -26,11 +26,11 @@ font-size: 18px z-index: 100 background-color: rgba(0,0,0,0.75) - + .indicatorContents position: absolute top: 40% width: 100% font-size: 30px font-weight: 300 - text-align: center \ No newline at end of file + text-align: center diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl index 2b9ef52f4..4de8e5427 100644 --- a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl +++ b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl @@ -2,9 +2,9 @@ .toolbarSectionButton display: inline-block - color: $defaultColor - fill: $defaultColor - stroke: $defaultColor + theme('color', '$defaultColor') + theme('fill', '$defaultColor') + theme('stroke', '$defaultColor') min-width: 30px cursor: pointer text-align: center @@ -14,7 +14,7 @@ cursor: not-allowed .buttonLabel - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 12px font-weight: 500 @@ -34,22 +34,22 @@ &:hover .buttonLabel - color: $hoverColor + theme('color', '$hoverColor') svg - fill: $hoverColor - stroke: $hoverColor + theme('fill', '$hoverColor') + theme('stroke', '$hoverColor') i - color: $hoverColor + theme('color', '$hoverColor') &:active, &.active .buttonLabel - color: $activeColor + theme('color', '$activeColor') svg - fill: $activeColor - stroke: $activeColor + theme('fill', '$activeColor') + theme('stroke', '$activeColor') i - color: $activeColor \ No newline at end of file + theme('color', '$activeColor') \ No newline at end of file diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl b/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl index 27f29e873..f9cfd6868 100644 --- a/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl +++ b/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl @@ -14,9 +14,9 @@ $distance = 12px white-space: nowrap .toolbarSectionDrawer - background-color: $uiGrayDarker + theme('background-color', '$uiGrayDarker') border-radius: 7px - color: $textPrimaryColor + theme('color', '$textPrimaryColor') content: '' display: block font-size: 18px diff --git a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl b/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl index 0defc7727..547c11f21 100644 --- a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl +++ b/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl @@ -11,8 +11,8 @@ #imageViewerViewports .viewportContainer + theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness) float: left - border: $viewportBorderThickness solid $viewportBorderColor outline: 0 // Prevent blue outline in Chrome @@ -22,12 +22,12 @@ outline: 0 // Prevent blue outline in Chrome &:hover - border: $viewportBorderThickness solid $viewportBorderColorHover - + theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness) + &.active, &:hover.active - border: $viewportBorderThickness solid $viewportBorderColorActive + theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness) .removable width: 100% height: 100% - position: relative // Necessary so that the viewportOverlay is on top of the viewports \ No newline at end of file + position: relative // Necessary so that the viewportOverlay is on top of the viewports diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl index b89bd8a1d..9821400a7 100644 --- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl +++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl @@ -3,7 +3,7 @@ $viewportTagPadding = 20px .imageViewerViewportOverlay - color: $textSecondaryColor + theme('color', '$textSecondaryColor') .dicomTag position: absolute diff --git a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl index 04a0f9a55..67e8e7337 100644 --- a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl +++ b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl @@ -50,7 +50,7 @@ color: black &:not(.disabled):hover - color: $activeColor + theme('color', '$activeColor') text-decoration: none &.disabled diff --git a/Packages/worklist/client/components/worklist.styl b/Packages/worklist/client/components/worklist.styl index a96826a8f..ed7b6c258 100644 --- a/Packages/worklist/client/components/worklist.styl +++ b/Packages/worklist/client/components/worklist.styl @@ -1,17 +1,17 @@ @import "{design}/app" body - background-color: $primaryBackgroundColor + theme('background-color', '$primaryBackgroundColor') #tblStudyList tr height: 20px #worklistTab - background-color: $primaryBackgroundColor + theme('background-color', '$primaryBackgroundColor') .worklistContainer - background-color: $primaryBackgroundColor + theme('background-color', '$primaryBackgroundColor') margin: 0 auto color: white float: left; @@ -22,7 +22,7 @@ body height: calc(100% - 91px) .loadingTextDiv - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-size: 30px .tab-pane diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl index 186ac3771..dab56222a 100644 --- a/Packages/worklist/client/components/worklistResult/worklistResult.styl +++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl @@ -1,20 +1,19 @@ @import "{design}/app" -$hoverColor = #2c363f -$textPrimaryColor = white -$textSecondaryColor = #91b9cd +$tableHoverColor = #2c363f +$tableTextPrimaryColor = white +$tableTextSecondaryColor = #91b9cd $inputBackgroundColor = #2c363f $inputPlaceholderColor = lightgray $studyListToolbarHeight = 75px -$theadBackgroundColor = $uiGrayDarker $tablePadding = 8% $bodyCellHeight = 40px .studyListToolbar + theme('background', '$uiGrayDarker') height: $studyListToolbarHeight - background: $uiGrayDarker border-bottom: 2px solid black padding: 0 30px @@ -24,7 +23,7 @@ $bodyCellHeight = 40px .header font-size: 22px font-weight: 300 - color: $textSecondaryColor + color: $tableTextSecondaryColor padding: 0 10px line-height: $studyListToolbarHeight @@ -33,14 +32,14 @@ $bodyCellHeight = 40px line-height: $studyListToolbarHeight .studyCount + theme('color', '$uiSkyBlue') font-size: 40px font-weight: 100 - color: $uiSkyBlue padding: 0 10px line-height: $studyListToolbarHeight .theadBackground - background-color: $theadBackgroundColor + theme('background-color', '$uiGrayDarker') width: 100% height: 122px position: absolute @@ -54,18 +53,18 @@ $bodyCellHeight = 40px z-index: 2 .loadingTextDiv - color: $textSecondaryColor + color: $tableTextSecondaryColor font-size: 30px .notFound - color: $textSecondaryColor + color: $tableTextSecondaryColor font-size: 30px font-weight: 200 text-align: center table#tblStudyList thead - background-color: $theadBackgroundColor + theme('background-color', '$uiGrayDarker') white-space: nowrap tr @@ -85,7 +84,7 @@ $bodyCellHeight = 40px width: 100% min-width: 95px margin: 0 auto - color: $textPrimaryColor + color: $tableTextPrimaryColor font-weight: 400 padding: 20px @@ -97,10 +96,10 @@ $bodyCellHeight = 40px margin: 0 5px &:hover - color: $activeColor + theme('color', '$activeColor') &.active, &:active - color: $activeColor + theme('color', '$activeColor') input.worklist-search height: 34px @@ -136,16 +135,15 @@ $bodyCellHeight = 40px background-color: black &:nth-child(even) - background-color: $uiGrayDarker + theme('background-color', '$uiGrayDarker') td height: $bodyCellHeight line-height: $bodyCellHeight - color: $textPrimaryColor + color: $tableTextPrimaryColor font-weight: 300 border-top: 1px solid #436270 white-space: nowrap - transition(all 0.1s ease) &:first-child @@ -155,15 +153,14 @@ $bodyCellHeight = 40px padding-right: $tablePadding &:hover, &:active, &.active - background-color: $hoverColor + background-color: $tableHoverColor color: white td // This selector is necessary to override bootstrap's 'table' class border-top: 1px solid #436270 border-bottom: 1px solid #436270 - background-color: $hoverColor - + background-color: $tableHoverColor @media only screen and (max-width: 1000px) $tablePaddingMediumScreen = 10px @@ -188,4 +185,4 @@ $bodyCellHeight = 40px th.accessionNumber, td.accessionNumber, th.modalities, td.modalities, th.numberOfStudyRelatedInstances, td.numberOfStudyRelatedInstances - display: none \ No newline at end of file + display: none diff --git a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl index 825737701..990c37355 100644 --- a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl +++ b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl @@ -5,7 +5,7 @@ margin: 0 10px label - color: $textSecondaryColor + theme('color', '$textSecondaryColor') font-weight: 400 cursor: pointer @@ -13,10 +13,10 @@ pointer-events: none &:hover - color: $hoverColor + theme('color', '$hoverColor') &:active - color: $activeColor + theme('color', '$activeColor') input width: 0.1px;