@mediusinc/mng-commons 0.2.6 → 0.2.8

package/scss/common/variables/theme/_theme_light.scss

@@ -1,14 +1,14 @@
 $colors: (
-        "blue": #2196F3,
-        "green": #4caf50,
-        "yellow": #FBC02D,
-        "cyan": #00BCD4,
-        "pink": #E91E63,
-        "indigo": #3F51B5,
-        "teal": #009688,
-        "orange": #F57C00,
-        "bluegray": #607D8B,
-        "purple": #9C27B0
+    'blue': #2196f3,
+    'green': #4caf50,
+    'yellow': #fbc02d,
+    'cyan': #00bcd4,
+    'pink': #e91e63,
+    'indigo': #3f51b5,
+    'teal': #009688,
+    'orange': #f57c00,
+    'bluegray': #607d8b,
+    'purple': #9c27b0
 );
 
 //reused color variables
@@ -17,30 +17,30 @@ $shade100: rgba(68, 72, 109, 0.07) !default; //Alpha - 01
 $shade200: rgba(68, 72, 109, 0.12) !default; //Alpha - 02
 $shade300: rgba(68, 72, 109, 0.17) !default; //Alpha - 03
 $shade400: rgba(255, 255, 255, 0.9) !default; //CardBg
-$shade500: #8A8EA6 !default; //text third color
-$shade600: #676B89 !default; //text secondary color
-$shade700: #44486D !default; //text color
+$shade500: #8a8ea6 !default; //text third color
+$shade600: #676b89 !default; //text secondary color
+$shade700: #44486d !default; //text color
 
 $solidSurfaceColor: white;
 
 //global
-$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
 $fontSize: 1rem !default;
 $fontWeight: normal !default;
 $textColor: $shade700 !default;
 $textSecondaryColor: $shade600 !default;
 $borderRadius: 6px !default;
-$transitionDuration: .2s !default;
+$transitionDuration: 0.2s !default;
 $formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
 $actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
 $listItemTransition: box-shadow $transitionDuration !default;
 $primeIconFontSize: 1rem !default;
 $divider: 1px solid $shade300 !default;
-$inlineSpacing: .5rem !default;
-$disabledOpacity: .6 !default;
+$inlineSpacing: 0.5rem !default;
+$disabledOpacity: 0.6 !default;
 $maskBg: rgba(0, 0, 0, 0.05) !default;
 $loadingIconFontSize: 2rem !default;
-$errorColor: #FC6161 !default;
+$errorColor: #fc6161 !default;
 
 //scale
 $scaleSM: 0.875 !default;
@@ -107,14 +107,14 @@ $inputListHeaderBorder: 0 none !default;
 $inputOverlayBg: $solidSurfaceColor !default;
 $inputOverlayHeaderBg: $inputListHeaderBg !default;
 $inputOverlayBorder: 0 none !default;
-$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) !default;
+$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
 
 //password
 $passwordPanelBg: $solidSurfaceColor !default;
 $passwordMeterBg: $shade200 !default;
-$passwordWeakBg: #D32F2F !default;
-$passwordMediumBg: #FBC02D !default;
-$passwordStrongBg: #689F38 !default;
+$passwordWeakBg: #d32f2f !default;
+$passwordMediumBg: #fbc02d !default;
+$passwordStrongBg: #689f38 !default;
 
 //button
 $buttonPadding: 0.429rem 0.571rem !default;
@@ -132,18 +132,18 @@ $buttonActiveBorderColor: $primaryDarkerColor !default;
 $buttonShadow: 0px 0px 10px rgba($primaryColor, 0.25);
 
 $selectbuttonShadow: none !default;
-$raisedButtonShadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+$raisedButtonShadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
 $roundedButtonBorderRadius: 2rem !default;
 
-$textButtonHoverBgOpacity: .04 !default;
-$textButtonActiveBgOpacity: .16 !default;
+$textButtonHoverBgOpacity: 0.04 !default;
+$textButtonActiveBgOpacity: 0.16 !default;
 $outlinedButtonBorder: 1px solid !default;
 $plainButtonTextColor: $textSecondaryColor !default;
 $plainButtonHoverBgColor: $shade100 !default;
 $plainButtonActiveBgColor: $shade300 !default;
 
 $secondaryButtonBg: $shade100 !default;
-$secondaryButtonTextColor: #44486D !default;
+$secondaryButtonTextColor: #44486d !default;
 $secondaryButtonBorder: 1px solid transparent !default;
 $secondaryButtonHoverBg: $shade200 !default;
 $secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
@@ -154,61 +154,61 @@ $secondaryButtonActiveBorderColor: transparent !default;
 $secondaryButtonShadow: none !default;
 $secondaryButtonFocusShadow: none !default;
 
-$infoButtonBg: #873EFE !default;
-$infoButtonTextColor: #FFFFFF !default;
+$infoButtonBg: #873efe !default;
+$infoButtonTextColor: #ffffff !default;
 $infoButtonBorder: 1px solid transparent !default;
-$infoButtonHoverBg: #6C1AF2 !default;
+$infoButtonHoverBg: #6c1af2 !default;
 $infoButtonTextHoverColor: $infoButtonTextColor !default;
 $infoButtonHoverBorderColor: transparent !default;
-$infoButtonActiveBg: #5310C1 !default;
+$infoButtonActiveBg: #5310c1 !default;
 $infoButtonTextActiveColor: $infoButtonTextColor !default;
 $infoButtonActiveBorderColor: transparent !default;
 $infoButtonShadow: 0px 0px 10px rgba(135, 62, 254, 0.25) !default;
 $infoButtonFocusShadow: none !default;
 
 $successButtonBg: #397289 !default;
-$successButtonTextColor: #FFFFFF !default;
+$successButtonTextColor: #ffffff !default;
 $successButtonBorder: 1px solid transparent !default;
-$successButtonHoverBg: #68A4BB !default;
+$successButtonHoverBg: #68a4bb !default;
 $successButtonTextHoverColor: $successButtonTextColor !default;
 $successButtonHoverBorderColor: transparent !default;
-$successButtonActiveBg: #264E5E !default;
+$successButtonActiveBg: #264e5e !default;
 $successButtonTextActiveColor: $successButtonTextColor !default;
 $successButtonActiveBorderColor: transparent !default;
 $successButtonShadow: 0px 0px 10px rgba(38, 78, 94, 0.3) !default;
 $successButtonFocusShadow: none !default;
 
-$warningButtonBg: #EEE500 !default;
-$warningButtonTextColor: #44486D !default;
+$warningButtonBg: #eee500 !default;
+$warningButtonTextColor: #44486d !default;
 $warningButtonBorder: 1px solid transparent !default;
-$warningButtonHoverBg: #D1C901 !default;
+$warningButtonHoverBg: #d1c901 !default;
 $warningButtonTextHoverColor: $warningButtonTextColor !default;
 $warningButtonHoverBorderColor: transparent !default;
-$warningButtonActiveBg: #BAB302 !default;
+$warningButtonActiveBg: #bab302 !default;
 $warningButtonTextActiveColor: $warningButtonTextColor !default;
 $warningButtonActiveBorderColor: transparent !default;
 $warningButtonShadow: 0px 0px 10px rgba(238, 229, 0, 0.25) !default;
 $warningButtonFocusShadow: none !default;
 
-$helpButtonBg: #EC4DBC !default;
-$helpButtonTextColor: #FFFFFF !default;
+$helpButtonBg: #ec4dbc !default;
+$helpButtonTextColor: #ffffff !default;
 $helpButtonBorder: 1px solid transparent !default;
-$helpButtonHoverBg: #E80EA6 !default;
+$helpButtonHoverBg: #e80ea6 !default;
 $helpButtonTextHoverColor: $helpButtonTextColor !default;
 $helpButtonHoverBorderColor: transparent !default;
-$helpButtonActiveBg: #B30C81 !default;
+$helpButtonActiveBg: #b30c81 !default;
 $helpButtonTextActiveColor: $helpButtonTextColor !default;
 $helpButtonActiveBorderColor: transparent !default;
 $helpButtonShadow: 0px 0px 10px rgba(236, 77, 188, 0.25) !default;
 $helpButtonFocusShadow: none !default;
 
-$dangerButtonBg: #AF1D1D !default;
-$dangerButtonTextColor: #FFFFFF !default;
+$dangerButtonBg: #af1d1d !default;
+$dangerButtonTextColor: #ffffff !default;
 $dangerButtonBorder: 1px solid transparent !default;
-$dangerButtonHoverBg: #E73A3A !default;
+$dangerButtonHoverBg: #e73a3a !default;
 $dangerButtonTextHoverColor: $dangerButtonTextColor !default;
 $dangerButtonHoverBorderColor: transparent !default;
-$dangerButtonActiveBg: #C42424 !default;
+$dangerButtonActiveBg: #c42424 !default;
 $dangerButtonTextActiveColor: $dangerButtonTextColor !default;
 $dangerButtonActiveBorderColor: transparent !default;
 $dangerButtonShadow: 0px 0px 10px rgba(252, 97, 97, 0.25) !default;
@@ -222,9 +222,9 @@ $linkButtonFocusShadow: none !default;
 //checkbox
 $checkboxWidth: 20px !default;
 $checkboxHeight: 20px !default;
-$checkboxBorder: 2px solid #8A8EA6 !default;
+$checkboxBorder: 2px solid #8a8ea6 !default;
 $checkboxIconFontSize: 14px !default;
-$checkboxHoverBorderColor: #676B89 !default;
+$checkboxHoverBorderColor: #676b89 !default;
 $checkboxActiveBorderColor: $primaryColor !default;
 $checkboxActiveBg: $primaryColor !default;
 $checkboxIconActiveColor: $primaryTextColor !default;
@@ -235,9 +235,9 @@ $checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
 //radiobutton
 $radiobuttonWidth: 20px !default;
 $radiobuttonHeight: 20px !default;
-$radiobuttonBorder: 2px solid #8A8EA6 !default;
+$radiobuttonBorder: 2px solid #8a8ea6 !default;
 $radiobuttonIconSize: 12px !default;
-$radiobuttonHoverBorderColor: #676B89 !default;
+$radiobuttonHoverBorderColor: #676b89 !default;
 $radiobuttonActiveBorderColor: $primaryColor !default;
 $radiobuttonActiveBg: $primaryColor !default;
 $radiobuttonIconActiveColor: $primaryTextColor !default;
@@ -277,8 +277,8 @@ $inplaceTextHoverColor: $shade700 !default;
 
 //rating
 $ratingIconFontSize: 1.286rem !default;
-$ratingCancelIconColor: #FC6161 !default;
-$ratingCancelIconHoverColor: #FC6161 !default;
+$ratingCancelIconColor: #fc6161 !default;
+$ratingCancelIconHoverColor: #fc6161 !default;
 $ratingStarIconOffColor: $shade700 !default;
 $ratingStarIconOnColor: $primaryColor !default;
 $ratingStarIconHoverColor: $primaryColor !default;
@@ -298,7 +298,7 @@ $sliderHandleHoverBg: $primaryColor !default;
 $sliderRangeBg: $primaryColor !default;
 
 //calendar
-$calendarTableMargin: .5rem 0 !default;
+$calendarTableMargin: 0.5rem 0 !default;
 $calendarPadding: 0.857rem !default;
 $calendarBg: $solidSurfaceColor !default;
 $calendarInlineBg: transparent !default;
@@ -306,7 +306,7 @@ $calendarTextColor: $shade700 !default;
 $calendarBorder: $inputListBorder !default;
 $calendarOverlayBorder: $inputOverlayBorder !default;
 
-$calendarHeaderPadding: 0 0 .75rem 0 !default;
+$calendarHeaderPadding: 0 0 0.75rem 0 !default;
 $calendarHeaderBg: transparent !default;
 $calendarInlineHeaderBg: $calendarInlineBg !default;
 $calendarHeaderBorder: 0 none !default;
@@ -329,8 +329,8 @@ $calendarCellDateTodayBorderColor: $shade200 !default;
 $calendarCellDateTodayTextColor: $shade700 !default;
 
 $calendarButtonBarPadding: 1rem 0 !default;
-$calendarTimePickerPadding: .5rem !default;
-$calendarTimePickerElementPadding: 0 .5rem !default;
+$calendarTimePickerPadding: 0.5rem !default;
+$calendarTimePickerElementPadding: 0 0.5rem !default;
 $calendarTimePickerTimeFontSize: 1.25rem !default;
 
 $calendarBreakpoint: 769px !default;
@@ -343,13 +343,13 @@ $inputSwitchBorderRadius: 12px !default;
 $inputSwitchHandleWidth: 1.143rem !default;
 $inputSwitchHandleHeight: 1.143rem !default;
 $inputSwitchHandleBorderRadius: 8px !default;
-$inputSwitchSliderPadding: .25rem !default;
+$inputSwitchSliderPadding: 0.25rem !default;
 $inputSwitchSliderOffBg: $shade100 !default;
 $inputSwitchHandleOffBg: $shade600 !default;
 $inputSwitchSliderOffHoverBg: $shade200 !default;
 $inputSwitchSliderOnBg: $primaryColor !default;
 $inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
-$inputSwitchHandleOnBg: #FFFFFF !default;
+$inputSwitchHandleOnBg: #ffffff !default;
 
 //panel
 $panelHeaderBorderColor: $shade300 !default;
@@ -431,7 +431,7 @@ $tabviewContentTextColor: $panelContentTextColor !default;
 $tabviewContentPadding: 1.143rem 0 !default;
 
 //upload
-$fileUploadProgressBarHeight: .25rem !default;
+$fileUploadProgressBarHeight: 0.25rem !default;
 $fileUploadContentPadding: 2rem 1rem !default;
 
 //scrollpanel
@@ -447,7 +447,7 @@ $cardSubTitleFontWeight: 500 !default;
 $cardSubTitleColor: $shade500 !default;
 $cardContentPadding: 1rem 0 !default;
 $cardFooterPadding: 1rem 0 0 0 !default;
-$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) !default;
+$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
 
 //editor
 $editorToolbarBg: $panelHeaderBg !default;
@@ -464,7 +464,7 @@ $paginatorBg: transparent !default;
 $paginatorTextColor: $shade700 !default;
 $paginatorBorder: solid $shade300 !default;
 $paginatorBorderWidth: 0 !default;
-$paginatorPadding: .571rem .571rem !default;
+$paginatorPadding: 0.571rem 0.571rem !default;
 $paginatorElementWidth: 1.429rem !default;
 $paginatorElementHeight: 1.429rem !default;
 $paginatorElementBg: transparent !default;
@@ -477,7 +477,7 @@ $paginatorElementActiveBg: $shade200 !default;
 $paginatorElementActiveBorderColor: transparent !default;
 $paginatorElementIconActiveColor: $shade700 !default;
 $paginatorElementBorderRadius: 4px !default;
-$paginatorElementMargin: .143rem !default;
+$paginatorElementMargin: 0.143rem !default;
 $paginatorElementPadding: 0 !default;
 
 //table
@@ -509,7 +509,7 @@ $tableBodyRowTextColor: $shade700 !default;
 $tableBodyRowEvenBg: transparent !default;
 $tableBodyRowHoverBg: $shade100 !default;
 $tableBodyRowTextHoverColor: $shade700 !default;
-$tableBodyRowHighlightBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #FFFFFF;
+$tableBodyRowHighlightBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #ffffff;
 $tableBodyRowHighlightTextColor: $shade700;
 $tableBodyCellBorder: 1px solid $shade300 !default;
 $tableBodyCellBorderWidth: 0 0 0 0 !default;
@@ -553,7 +553,7 @@ $orderlistHeaderPadding: 1.143rem !default;
 $orderlistListPadding: 0.571rem !default;
 $orderlistListItemPadding: 0.714rem 0.571rem !default;
 $orderlistListItemBorder: 1px solid transparent !default;
-$orderlistListItemActiveBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #FFFFFF !default;
+$orderlistListItemActiveBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #ffffff !default;
 $orderlistListItemActiveBorderColor: $highlightBg !default;
 
 //picklist
@@ -566,7 +566,7 @@ $picklistHeaderPadding: 1.143rem !default;
 $picklistListPadding: 0.571rem !default;
 $picklistListItemPadding: 0.714rem 0.571rem !default;
 $picklistListItemBorder: 1px solid transparent !default;
-$picklistListItemActiveBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #FFFFFF !default;
+$picklistListItemActiveBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #ffffff !default;
 $picklistListItemActiveBorderColor: $highlightBg !default;
 
 //schedule
@@ -618,25 +618,25 @@ $toastMargin: 0 0 1rem 0 !default;
 $toastPadding: 1.143rem 1.357rem !default;
 $toastBorderWidth: 0 0 0 20px !default;
 $toastShadow: none !default;
-$toastOpacity: .9 !default;
+$toastOpacity: 0.9 !default;
 $toastTitleFontWeight: 400 !default;
 $toastDetailMargin: $inlineSpacing 0 0 0 !default;
 
 //severities
 $infoMessageBg: $shade100 !default;
-$infoMessageBorder: solid #873EFE !default;
+$infoMessageBorder: solid #873efe !default;
 $infoMessageTextColor: $shade700 !default;
 $infoMessageIconColor: $shade700 !default;
 $successMessageBg: $shade100 !default;
-$successMessageBorder: solid #0BD18A !default;
+$successMessageBorder: solid #0bd18a !default;
 $successMessageTextColor: $shade700 !default;
 $successMessageIconColor: $shade700 !default;
 $warningMessageBg: $shade100 !default;
-$warningMessageBorder: solid #EEE500 !default;
+$warningMessageBorder: solid #eee500 !default;
 $warningMessageTextColor: $shade700 !default;
 $warningMessageIconColor: $shade700 !default;
 $errorMessageBg: $shade100 !default;
-$errorMessageBorder: solid #FC6161 !default;
+$errorMessageBorder: solid #fc6161 !default;
 $errorMessageTextColor: $shade700 !default;
 $errorMessageIconColor: $shade700 !default;
 
@@ -704,7 +704,7 @@ $menuitemFocusBorderColor: $shade500 !default;
 $menuitemTextActiveColor: $shade700 !default;
 $menuitemIconActiveColor: $shade700 !default;
 $menuitemActiveBg: $shade100 !default;
-$menuitemSubmenuIconFontSize: .875rem !default;
+$menuitemSubmenuIconFontSize: 0.875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.571rem 0.429rem !default;
 $submenuHeaderBg: transparent !default;
@@ -717,7 +717,7 @@ $overlayMenuBorder: 1px solid transparent !default;
 $overlayMenuShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
 $verticalMenuPadding: 0.429rem !default;
 $verticalMenuitemMargin: 0 !default;
-$menuSeparatorMargin: .25rem 0 !default;
+$menuSeparatorMargin: 0.25rem 0 !default;
 
 $panelmenuHeaderTextColor: $shade500;
 
@@ -767,7 +767,7 @@ $carouselIndicatorActiveTextColor: $shade700 !default;
 
 //galleria
 $galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
-$galleriaCloseIconMargin: .5rem !default;
+$galleriaCloseIconMargin: 0.5rem !default;
 $galleriaCloseIconFontSize: 2rem !default;
 $galleriaCloseIconBg: transparent !default;
 $galleriaCloseIconColor: $shade700 !default;
@@ -779,7 +779,7 @@ $galleriaCloseIconBorderRadius: 50% !default;
 
 $galleriaItemNavigatorBg: transparent !default;
 $galleriaItemNavigatorColor: $shade700 !default;
-$galleriaItemNavigatorMargin: 0 .5rem !default;
+$galleriaItemNavigatorMargin: 0 0.5rem !default;
 $galleriaItemNavigatorFontSize: 2rem !default;
 $galleriaItemNavigatorHoverBg: rgba(68, 72, 109, 0.15) !default;
 $galleriaItemNavigatorHoverColor: $shade700 !default;
@@ -787,7 +787,7 @@ $galleriaItemNavigatorWidth: 4rem !default;
 $galleriaItemNavigatorHeight: 4rem !default;
 $galleriaItemNavigatorBorderRadius: $borderRadius !default;
 
-$galleriaCaptionBg: rgba(0, 0, 0, .5) !default;
+$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
 $galleriaCaptionTextColor: $shade000 !default;
 $galleriaCaptionPadding: 1rem !default;
 
@@ -797,14 +797,14 @@ $galleriaIndicatorHoverBg: rgba(68, 72, 109, 0.15) !default;
 $galleriaIndicatorBorderRadius: 3px !default;
 $galleriaIndicatorWidth: 1.429rem !default;
 $galleriaIndicatorHeight: 0.286rem !default;
-$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, .5) !default;
+$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
 $galleriaIndicatorBgOnItem: $shade600 !default;
 $galleriaIndicatorHoverBgOnItem: $shade700 !default;
 $galleriaIndicatorActiveBg: $shade500 !default;
 $galleriaIndicatorActiveTextColor: $shade600 !default;
 
 $galleriaThumbnailContainerBg: $solidSurfaceColor !default;
-$galleriaThumbnailContainerPadding: 1rem .25rem !default;
+$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
 $galleriaThumbnailNavigatorBg: transparent !default;
 $galleriaThumbnailNavigatorColor: $shade700 !default;
 $galleriaThumbnailNavigatorHoverBg: rgba(68, 72, 109, 0.15) !default;
@@ -861,14 +861,14 @@ $speedDialActionTextHoverColor: #fff !default;
 //dock
 $dockActionWidth: 4rem !default;
 $dockActionHeight: 4rem !default;
-$dockItemPadding: .5rem !default;
+$dockItemPadding: 0.5rem !default;
 $dockCurrentItemMargin: 1.5rem !default;
 $dockFirstItemsMargin: 1.3rem !default;
 $dockSecondItemsMargin: 0.9rem !default;
-$dockBg: rgba(255, 255, 255, .1) !default;
+$dockBg: rgba(255, 255, 255, 0.1) !default;
 $dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
-$dockPadding: .5rem .5rem !default;
-$dockBorderRadius: .5rem !default;
+$dockPadding: 0.5rem 0.5rem !default;
+$dockBorderRadius: 0.5rem !default;
 
 :root {
     --surface-a: #{$shade000};

package/scss/layout/default/_mng-variables-layout-dark.scss

@@ -1,2 +1,2 @@
-$primaryColor: #0F8BFD;
+$primaryColor: #0f8bfd;
 $primaryTextColor: #ffffff;

package/scss/mng-commons-dark.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
 // theme and layout
-@import "layout/default/layout-dark.scss";
-@import "theme/default/theme-dark.scss";
+@import 'layout/default/layout-dark.scss';
+@import 'theme/default/theme-dark.scss';

package/scss/mng-commons-light.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
 // theme and layout
-@import "layout/default/layout-light.scss";
-@import "theme/default/theme-light.scss";
+@import 'layout/default/layout-light.scss';
+@import 'theme/default/theme-light.scss';

package/scss/mng-overrides/_layout_dialog.scss

@@ -1,5 +1,6 @@
 .p-dialog {
-    &.mng-details-dialog, &.mng-details-dynamic-dialog {
+    &.mng-details-dialog,
+    &.mng-details-dynamic-dialog {
         height: 90%;
         width: 50vw;
 
@@ -8,7 +9,8 @@
         }
     }
 
-    &.mng-formly-field-table-form-dialog, &.mng-formly-field-table-multiselect-dialog {
+    &.mng-formly-field-table-form-dialog,
+    &.mng-formly-field-table-multiselect-dialog {
         width: 45vw;
 
         @media (max-width: $tabletBreakpoint) {
@@ -31,4 +33,3 @@
     //    }
     //}
 }
-

package/scss/mng-overrides/_layout_forms.scss

@@ -1,5 +1,5 @@
 form {
-    button[type="submit"].hidden {
+    button[type='submit'].hidden {
         display: none !important;
         visibility: hidden !important;
     }

package/scss/mng-overrides/_layout_radio.scss

@@ -1,3 +1,3 @@
 .mng-radio-button-label {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
 }

package/scss/mng-overrides/_theme_datepicker.scss

@@ -0,0 +1,7 @@
+.p-datepicker-header {
+    .p-datepicker-title {
+        .p-link {
+            color: $calendarHeaderTextColor;
+        }
+    }
+}

package/scss/mng-overrides/_theme_dialog.scss

@@ -6,4 +6,3 @@
         }
     }
 }
-

package/scss/mng-overrides/_theme_dropdown.scss

@@ -3,4 +3,3 @@
         max-width: 350px;
     }
 }
-

package/scss/mng-overrides/_theme_styles.scss

@@ -3,6 +3,7 @@
 @import './_theme_dropdown';
 @import './_theme_tableview';
 @import './_theme_dialog';
+@import './_theme_datepicker';
 
 .p-tabview-title-error {
     color: $errorColor !important;

package/scss/mng-overrides/_theme_tableview.scss

@@ -6,11 +6,11 @@
     }
 
     .p-progressbar {
-        height: .5rem;
-        background-color: #D8DADC;
+        height: 0.5rem;
+        background-color: #d8dadc;
 
         .p-progressbar-value {
-            background-color: #607D8B;
+            background-color: #607d8b;
         }
     }
 
@@ -69,15 +69,15 @@
                     border: 0 none;
 
                     .p-column-title {
-                        padding: .4rem;
+                        padding: 0.4rem;
                         min-width: 30%;
                         display: inline-block;
-                        margin: -.4rem 1rem -.4rem -.4rem;
+                        margin: -0.4rem 1rem -0.4rem -0.4rem;
                         font-weight: bold;
                     }
 
                     .p-progressbar {
-                        margin-top: .5rem;
+                        margin-top: 0.5rem;
                     }
 
                     &:last-child {

package/scss/theme/default/_mng-variables-theme-dark.scss

@@ -1,4 +1,4 @@
-$primaryColor: #0F8BFD;
+$primaryColor: #0f8bfd;
 $primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
 $primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
 $primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
@@ -6,3 +6,4 @@ $primaryTextColor: #ffffff;
 
 $highlightBg: $primaryColor;
 $highlightTextColor: $primaryTextColor;
+$calendarHeaderTextColor: #ffffff; // white in light theme, black in dark theme

package/scss/theme/default/_mng-variables-theme-light.scss

@@ -2,7 +2,8 @@ $primaryColor: #397289 !default;
 $primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
 $primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
 $primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
-$primaryTextColor: #ffffff !default;;
+$primaryTextColor: #ffffff !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$calendarHeaderTextColor: #000000; // black in light theme, white in dark theme