@mediusinc/mng-commons 0.2.6 → 0.2.8

package/scss/common/theme/extensions/_button.scss

@@ -7,7 +7,9 @@
     box-shadow: $selectbuttonShadow;
 }
 
-.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+.p-button.p-button-secondary,
+.p-buttonset.p-button-secondary > .p-button,
+.p-splitbutton.p-button-secondary > .p-button {
     box-shadow: $secondaryButtonShadow;
 
     &.p-button-outlined {
@@ -38,7 +40,9 @@
     }
 }
 
-.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+.p-button.p-button-info,
+.p-buttonset.p-button-info > .p-button,
+.p-splitbutton.p-button-info > .p-button {
     box-shadow: $infoButtonShadow;
 
     &.p-button-outlined {
@@ -50,7 +54,9 @@
     }
 }
 
-.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+.p-button.p-button-success,
+.p-buttonset.p-button-success > .p-button,
+.p-splitbutton.p-button-success > .p-button {
     box-shadow: $successButtonShadow;
 
     &.p-button-outlined {
@@ -62,7 +68,9 @@
     }
 }
 
-.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+.p-button.p-button-warning,
+.p-buttonset.p-button-warning > .p-button,
+.p-splitbutton.p-button-warning > .p-button {
     box-shadow: $warningButtonShadow;
 
     &.p-button-outlined {
@@ -74,7 +82,9 @@
     }
 }
 
-.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+.p-button.p-button-help,
+.p-buttonset.p-button-help > .p-button,
+.p-splitbutton.p-button-help > .p-button {
     box-shadow: $helpButtonShadow;
 
     &.p-button-outlined {
@@ -86,7 +96,9 @@
     }
 }
 
-.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+.p-button.p-button-danger,
+.p-buttonset.p-button-danger > .p-button,
+.p-splitbutton.p-button-danger > .p-button {
     box-shadow: $dangerButtonShadow;
 
     &.p-button-outlined {

package/scss/common/theme/extensions/_orderlist.scss

@@ -12,7 +12,6 @@
         padding: $orderlistHeaderPadding;
     }
 
-
     .p-orderlist-filter-container {
         border: $orderlistBorder;
         border-width: $orderlistBorderWidth;

package/scss/common/theme/extensions/_picklist.scss

@@ -12,7 +12,6 @@
         padding: $picklistHeaderPadding;
     }
 
-
     .p-picklist-filter-container {
         border: $picklistBorder;
         border-width: $picklistBorderWidth;

package/scss/common/theme/extensions/_tree.scss

@@ -16,7 +16,6 @@
                         }
                     }
                 }
-
             }
         }
     }

package/scss/common/variables/layout/_common.scss

@@ -1,12 +1,12 @@
 //general
-$fontSize:14px !default;
-$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$transitionDuration:.2s !default;
-$animationDuration:.4s !default;
-$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;
-$letterSpacing:normal !default;
-$borderRadius:8px !default;
-$tabletBreakpoint:991px !default;
-$phoneBreakpoint:576px !default;
+$fontSize: 14px !default;
+$fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+$transitionDuration: 0.2s !default;
+$animationDuration: 0.4s !default;
+$animationTimingFunction: cubic-bezier(0.05, 0.74, 0.2, 0.99) !default;
+$letterSpacing: normal !default;
+$borderRadius: 8px !default;
+$tabletBreakpoint: 991px !default;
+$phoneBreakpoint: 576px !default;
 
 $baseHref: './~/' !default;

package/scss/common/variables/layout/_layout_dark.scss

@@ -1,14 +1,14 @@
 @import './_common';
 
-$bodyBg: linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
-$bodyImage:  url("#{$baseHref}assets/images/mng/effect-ondark.png") !default;
+$bodyBg: linear-gradient(180deg, #2e323f 0%, #0a061a 100%) !default;
+$bodyImage: url('#{$baseHref}assets/images/mng/effect-ondark.png') !default;
 $textColor: #ffffff !default;
-$textSecondaryColor: #C8CCD8 !default;
-$textThirdColor: #868C9B !default;
-$dividerColor:rgba(255, 255, 255, 0.15) !default;
+$textSecondaryColor: #c8ccd8 !default;
+$textThirdColor: #868c9b !default;
+$dividerColor: rgba(255, 255, 255, 0.15) !default;
 
 //loader
-$loaderPathColor:#ECECF9 !default;
+$loaderPathColor: #ececf9 !default;
 
 //card
 $cardBg: rgba(255, 255, 255, 0.05) !default;
@@ -20,14 +20,14 @@ $topbarTextHoverColor: $textColor !default;
 $topbarIconBg: rgba(255, 255, 255, 0.05) !default;
 $topbarIconHoverBg: rgba(255, 255, 255, 0.1) !default;
 
-$topbarSubmenuBg:linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$topbarSubmenuBg: linear-gradient(180deg, #2e323f 0%, #0a061a 100%) !default;
 $topbarSubmenuItemHoverBgColor: rgba(255, 255, 255, 0.05) !default;
 
 //menu
 $menuWidth: 21rem !default;
 $slimMenuWidth: 5.857rem !default;
 $sidebarInactiveMenuWidth: 6.571em !default;
-$menuBg: linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$menuBg: linear-gradient(180deg, #2e323f 0%, #0a061a 100%) !default;
 $menuIconBg: rgba(255, 255, 255, 0.05) !default;
 $menuIconHoverBg: rgba(255, 255, 255, 0.1) !default;
 $menuIconTextColor: $textSecondaryColor !default;
@@ -54,11 +54,11 @@ $slimActiveRootMenuItemTextColor: $primaryTextColor !default;
 $slimMenuItemTextColor: $textColor !default;
 
 //inline menu
-$inlineMenuImageHoverBorderColor: #868C9B !default;
+$inlineMenuImageHoverBorderColor: #868c9b !default;
 
 //rightmenu
 $rightMenuWidth: 24.571rem !default;
-$rightMenuBg: linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$rightMenuBg: linear-gradient(180deg, #2e323f 0%, #0a061a 100%) !default;
 $rightMenuButtonBg: rgba(255, 255, 255, 0.05) !default;
 $rightMenuListItemBg: rgba(255, 255, 255, 0.05) !default;
 
@@ -67,5 +67,5 @@ $progressBarBg: rgba(255, 255, 255, 0.1) !default;
 
 //pages
 $helpHeaderBg: linear-gradient(179.2deg, rgba(15, 139, 253, 0.2) 0.69%, rgba(15, 139, 253, 0) 108.44%), rgba(255, 255, 255, 0.05) !default;
-$helpHeaderImage:  url("#{$baseHref}assets/images/mng/effect-ondark.svg") !default;
-$exceptionPagesImage: url("#{$baseHref}assets/images/mng/pages/exception-ondark.png") !default;
+$helpHeaderImage: url('#{$baseHref}assets/images/mng/effect-ondark.svg') !default;
+$exceptionPagesImage: url('#{$baseHref}assets/images/mng/pages/exception-ondark.png') !default;

package/scss/common/variables/layout/_layout_light.scss

@@ -1,14 +1,14 @@
 @import './_common';
 
-$bodyBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%) !default;
-$bodyImage:  url("#{$baseHref}assets/images/mng/effect-onlight.png") !default;
-$textColor:#44486D !default;
-$textSecondaryColor:#676B89 !default;
-$textThirdColor: #8A8EA6 !default;
-$dividerColor:rgba(68, 72, 109, 0.2) !default;
+$bodyBg: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%) !default;
+$bodyImage: url('#{$baseHref}assets/images/mng/effect-onlight.png') !default;
+$textColor: #44486d !default;
+$textSecondaryColor: #676b89 !default;
+$textThirdColor: #8a8ea6 !default;
+$dividerColor: rgba(68, 72, 109, 0.2) !default;
 
 //loader
-$loaderPathColor:#0A061A !default;
+$loaderPathColor: #0a061a !default;
 
 //card
 $cardBg: rgba(255, 255, 255, 0.9) !default;
@@ -20,14 +20,14 @@ $topbarTextHoverColor: $textColor !default;
 $topbarIconBg: rgba(68, 72, 109, 0.07) !default;
 $topbarIconHoverBg: rgba(68, 72, 109, 0.12) !default;
 
-$topbarSubmenuBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%)!default;
+$topbarSubmenuBg: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%) !default;
 $topbarSubmenuItemHoverBgColor: rgba(68, 72, 109, 0.07) !default;
 
 //menu
 $menuWidth: 21rem !default;
 $slimMenuWidth: 5.857rem !default;
 $sidebarInactiveMenuWidth: 6.571rem !default;
-$menuBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%) !default;
+$menuBg: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%) !default;
 $menuIconBg: rgba(68, 72, 109, 0.07) !default;
 $menuIconHoverBg: rgba(68, 72, 109, 0.12) !default;
 $menuIconTextColor: $textSecondaryColor !default;
@@ -54,11 +54,11 @@ $slimActiveRootMenuItemTextColor: $primaryTextColor !default;
 $slimMenuItemTextColor: $textColor !default;
 
 //inline menu
-$inlineMenuImageHoverBorderColor: #8A8EA6 !default;
+$inlineMenuImageHoverBorderColor: #8a8ea6 !default;
 
 //rightmenu
 $rightMenuWidth: 24.571rem !default;
-$rightMenuBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%) !default;
+$rightMenuBg: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%) !default;
 $rightMenuButtonBg: rgba(68, 72, 109, 0.07) !default;
 $rightMenuListItemBg: rgba(68, 72, 109, 0.07) !default;
 
@@ -67,5 +67,5 @@ $progressBarBg: rgba(68, 72, 109, 0.12) !default;
 
 //pages
 $helpHeaderBg: linear-gradient(179.2deg, rgba(15, 139, 253, 0.15) 0.69%, rgba(15, 139, 253, 0) 108.44%), rgba(255, 255, 255, 0.9) !default;
-$helpHeaderImage:  url("#{$baseHref}assets/images/mng/effect-onlight.svg") !default;
-$exceptionPagesImage: url("#{$baseHref}assets/images/mng/pages/exception-onlight.png") !default;
+$helpHeaderImage: url('#{$baseHref}assets/images/mng/effect-onlight.svg') !default;
+$exceptionPagesImage: url('#{$baseHref}assets/images/mng/pages/exception-onlight.png') !default;

package/scss/common/variables/theme/_theme_dark.scss

@@ -1,20 +1,20 @@
 $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
 );
 
 //shades
-$shade000: #FFFFFF !default; //text color
-$shade100: #C8CCD8 !default; //text secondary color
-$shade200: #868C9B !default; //text third color
+$shade000: #ffffff !default; //text color
+$shade100: #c8ccd8 !default; //text secondary color
+$shade200: #868c9b !default; //text third color
 $shade500: rgba(255, 255, 255, 0.05) !default; //Alpha-01
 $shade600: rgba(255, 255, 255, 0.1) !default; //Alpha-02
 $shade700: rgba(255, 255, 255, 0.15) !default; //Alpha-03
@@ -24,23 +24,23 @@ $shade900: rgba(255, 255, 255, 0.25) !default; //Alpha-05
 $solidSurfaceColor: #0a061a;
 
 //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: $shade000 !default;
 $textSecondaryColor: $shade100 !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 $shade500 !default;
-$inlineSpacing: .5rem !default; //spacing between inline elements
-$disabledOpacity: .4 !default; //opacity of a disabled item
+$inlineSpacing: 0.5rem !default; //spacing between inline elements
+$disabledOpacity: 0.4 !default; //opacity of a disabled item
 $maskBg: rgba(0, 0, 0, 0.05) !default; //modal mask bg color
 $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: $shade600 !default;
-$passwordWeakBg: #F48FB1 !default;
-$passwordMediumBg: #FFE082 !default;
-$passwordStrongBg: #C5E1A5 !default;
+$passwordWeakBg: #f48fb1 !default;
+$passwordMediumBg: #ffe082 !default;
+$passwordStrongBg: #c5e1a5 !default;
 
 //button
 $buttonPadding: 0.429rem 0.571rem !default;
@@ -135,15 +135,15 @@ $selectbuttonShadow: none !default;
 $raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px 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: $shade500 !default;
-$plainButtonActiveBgColor: rgba(255, 255, 255, .16) !default;
+$plainButtonActiveBgColor: rgba(255, 255, 255, 0.16) !default;
 
 $secondaryButtonBg: $shade500 !default;
-$secondaryButtonTextColor: #FFFFFF !default;
+$secondaryButtonTextColor: #ffffff !default;
 $secondaryButtonBorder: 1px solid transparent !default;
 $secondaryButtonHoverBg: $shade600 !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.3) !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: #2E323F !default;
+$warningButtonBg: #eee500 !default;
+$warningButtonTextColor: #2e323f !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.3) !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.3) !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.3) !default;
@@ -235,9 +235,9 @@ $checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
 //radiobutton
 $radiobuttonWidth: 20px !default;
 $radiobuttonHeight: 20px !default;
-$radiobuttonBorder: 2px solid #868C9B !default;
+$radiobuttonBorder: 2px solid #868c9b !default;
 $radiobuttonIconSize: 12px !default;
-$radiobuttonHoverBorderColor: #C8CCD8 !default;
+$radiobuttonHoverBorderColor: #c8ccd8 !default;
 $radiobuttonActiveBorderColor: $primaryColor !default;
 $radiobuttonActiveBg: $primaryColor !default;
 $radiobuttonIconActiveColor: $primaryTextColor !default;
@@ -277,8 +277,8 @@ $inplaceTextHoverColor: $shade000 !default;
 
 //rating
 $ratingIconFontSize: 1.286rem !default;
-$ratingCancelIconColor: #FC6161 !default;
-$ratingCancelIconHoverColor: #FC6161 !default;
+$ratingCancelIconColor: #fc6161 !default;
+$ratingCancelIconHoverColor: #fc6161 !default;
 $ratingStarIconOffColor: $shade000 !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: $shade000 !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: $shade900 !default;
 $calendarCellDateTodayTextColor: $shade000 !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,7 +343,7 @@ $inputSwitchBorderRadius: 12px !default;
 $inputSwitchHandleWidth: 1.143rem !default;
 $inputSwitchHandleHeight: 1.143rem !default;
 $inputSwitchHandleBorderRadius: 8px !default;
-$inputSwitchSliderPadding: .25rem !default;
+$inputSwitchSliderPadding: 0.25rem !default;
 $inputSwitchSliderOffBg: $shade500 !default;
 $inputSwitchHandleOffBg: $shade100 !default;
 $inputSwitchSliderOffHoverBg: $shade600 !default;
@@ -431,7 +431,7 @@ $tabviewContentTextColor: $shade000 !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: $shade200 !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: $shade000 !default;
 $paginatorBorder: solid $shade700 !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: $shade600 !default;
 $paginatorElementActiveBorderColor: transparent !default;
 $paginatorElementIconActiveColor: $shade000 !default;
 $paginatorElementBorderRadius: 4px !default;
-$paginatorElementMargin: .143rem !default;
+$paginatorElementMargin: 0.143rem !default;
 $paginatorElementPadding: 0 !default;
 
 //table
@@ -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: $shade500 !default;
-$infoMessageBorder: solid #873EFE !default;
+$infoMessageBorder: solid #873efe !default;
 $infoMessageTextColor: $shade000 !default;
 $infoMessageIconColor: $shade000 !default;
 $successMessageBg: $shade500 !default;
-$successMessageBorder: solid #0BD18A !default;
+$successMessageBorder: solid #0bd18a !default;
 $successMessageTextColor: $shade000 !default;
 $successMessageIconColor: $shade000 !default;
 $warningMessageBg: $shade500 !default;
-$warningMessageBorder: solid #EEE500 !default;
+$warningMessageBorder: solid #eee500 !default;
 $warningMessageTextColor: $shade000 !default;
 $warningMessageIconColor: $shade000 !default;
 $errorMessageBg: $shade500 !default;
-$errorMessageBorder: solid #FC6161 !default;
+$errorMessageBorder: solid #fc6161 !default;
 $errorMessageTextColor: $shade000 !default;
 $errorMessageIconColor: $shade000 !default;
 
@@ -703,7 +703,7 @@ $menuitemFocusBorderColor: $shade900 !default;
 $menuitemTextActiveColor: $shade000 !default;
 $menuitemIconActiveColor: $shade000 !default;
 $menuitemActiveBg: $shade500 !default;
-$menuitemSubmenuIconFontSize: .875rem !default;
+$menuitemSubmenuIconFontSize: 0.875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.571rem 0.429rem !default;
 $submenuHeaderBg: transparent !default;
@@ -716,7 +716,7 @@ $overlayMenuBorder: 1px solid transparent !default;
 $overlayMenuShadow: none !default;
 $verticalMenuPadding: 0.429rem !default;
 $verticalMenuitemMargin: 0;
-$menuSeparatorMargin: .25rem 0 !default;
+$menuSeparatorMargin: 0.25rem 0 !default;
 
 $panelmenuHeaderTextColor: $shade200;
 
@@ -766,7 +766,7 @@ $carouselIndicatorActiveTextColor: $shade000 !default;
 
 //galleria
 $galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
-$galleriaCloseIconMargin: .5rem !default;
+$galleriaCloseIconMargin: 0.5rem !default;
 $galleriaCloseIconFontSize: 2rem !default;
 $galleriaCloseIconBg: transparent !default;
 $galleriaCloseIconColor: $shade000 !default;
@@ -778,7 +778,7 @@ $galleriaCloseIconBorderRadius: 50% !default;
 
 $galleriaItemNavigatorBg: transparent !default;
 $galleriaItemNavigatorColor: $shade000 !default;
-$galleriaItemNavigatorMargin: 0 .5rem !default;
+$galleriaItemNavigatorMargin: 0 0.5rem !default;
 $galleriaItemNavigatorFontSize: 2rem !default;
 $galleriaItemNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
 $galleriaItemNavigatorHoverColor: $shade000 !default;
@@ -786,7 +786,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: #f8f9fa !default;
 $galleriaCaptionPadding: 1rem !default;
 
@@ -796,14 +796,14 @@ $galleriaIndicatorHoverBg: $shade800 !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: $shade100 !default;
 $galleriaIndicatorHoverBgOnItem: $shade000 !default;
 $galleriaIndicatorActiveBg: $shade200 !default;
 $galleriaIndicatorActiveTextColor: $shade100 !default;
 
 $galleriaThumbnailContainerBg: $solidSurfaceColor !default;
-$galleriaThumbnailContainerPadding: 1rem .25rem !default;
+$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
 $galleriaThumbnailNavigatorBg: transparent !default;
 $galleriaThumbnailNavigatorColor: $shade000 !default;
 $galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
@@ -839,8 +839,8 @@ $scrollTopFontSize: 1.5rem;
 $scrollTopTextColor: $highlightTextColor;
 
 //skeleton
-$skeletonBg: rgba(255, 255, 255, .06);
-$skeletonAnimationBg: rgba(255, 255, 255, .04);
+$skeletonBg: rgba(255, 255, 255, 0.06);
+$skeletonAnimationBg: rgba(255, 255, 255, 0.04);
 
 //splitter
 $splitterGutterBg: $shade700;
@@ -860,14 +860,14 @@ $speedDialActionTextHoverColor: $shade900 !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: #{$shade200};