966 lines
37 KiB
SCSS
966 lines
37 KiB
SCSS
$colors: (
|
|
'blue': #2196f3,
|
|
'green': #4caf50,
|
|
'yellow': #fbc02d,
|
|
'cyan': #00bcd4,
|
|
'pink': #e91e63,
|
|
'indigo': #3f51b5,
|
|
'teal': #009688,
|
|
'orange': #f57c00,
|
|
'bluegray': #607d8b,
|
|
'purple': #9c27b0,
|
|
'primary': $primaryColor,
|
|
'red': #ff3d32,
|
|
);
|
|
|
|
//reused color variables
|
|
$shade000: transparent !default; //surface
|
|
$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
|
|
|
|
$solidSurfaceColor: #ececf9 !default;
|
|
|
|
//global
|
|
$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: 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: 0.5rem !default;
|
|
$disabledOpacity: 0.6 !default;
|
|
$maskBg: rgba(0, 0, 0, 0.2) !default;
|
|
$loadingIconFontSize: 2rem !default;
|
|
$errorColor: #fc6161 !default;
|
|
|
|
//selected state
|
|
$highlightBg: rgba($primaryColor, 0.16);
|
|
$highlightTextColor: $textColor;
|
|
$highlightFocusBg: rgba($primaryColor, 0.24);
|
|
|
|
//scale
|
|
$scaleSM: 0.875 !default;
|
|
$scaleLG: 1.25 !default;
|
|
|
|
//focus
|
|
$focusOutlineColor: $primaryColor !default;
|
|
$focusOutline: 0 none !default;
|
|
$focusOutlineOffset: 0 !default;
|
|
$focusShadow: 0 none !default;
|
|
|
|
//action icons
|
|
$actionIconWidth: 2rem !default;
|
|
$actionIconHeight: 2rem !default;
|
|
$actionIconBg: transparent !default;
|
|
$actionIconBorder: 0 none !default;
|
|
$actionIconColor: $shade600 !default;
|
|
$actionIconHoverBg: $shade100 !default;
|
|
$actionIconHoverBorderColor: transparent !default;
|
|
$actionIconHoverColor: $shade700 !default;
|
|
$actionIconBorderRadius: 50% !default;
|
|
|
|
//input field (e.g. inputtext, spinner, inputmask)
|
|
$inputPadding: 0.429rem 0.571rem !default;
|
|
$inputTextFontSize: 1rem !default;
|
|
$inputBg: $shade100 !default;
|
|
$inputTextColor: $shade700 !default;
|
|
$inputIconColor: $shade600 !default;
|
|
$inputBorder: 1px solid transparent !default;
|
|
$inputHoverBorderColor: transparent !default;
|
|
$inputFocusBorderColor: $primaryColor !default;
|
|
$inputErrorBorderColor: $errorColor !default;
|
|
$inputPlaceholderTextColor: $shade500 !default;
|
|
$inputFilledBg: $shade000 !default;
|
|
$inputFilledHoverBg: $inputFilledBg !default;
|
|
$inputFilledFocusBg: $shade100 !default;
|
|
|
|
//input groups
|
|
$inputGroupBg: $shade100 !default;
|
|
$inputGroupTextColor: $shade600 !default;
|
|
$inputGroupAddOnMinWidth: 2.357rem !default;
|
|
|
|
//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
|
|
$inputListBg: $shade100 !default;
|
|
$inputListTextColor: $shade700 !default;
|
|
$inputListBorder: $inputBorder !default;
|
|
$inputListPadding: 0.286rem !default;
|
|
$inputListItemPadding: 0.429rem 0.286rem !default;
|
|
$inputListItemBg: transparent !default;
|
|
$inputListItemTextColor: $shade700 !default;
|
|
$inputListItemHoverBg: $shade100 !default;
|
|
$inputListItemTextHoverColor: $shade700 !default;
|
|
$inputListItemFocusBg: $shade300 !default;
|
|
$inputListItemTextFocusColor: $shade700 !default;
|
|
$inputListItemBorder: 0 none !default;
|
|
$inputListItemBorderRadius: 4px !default;
|
|
$inputListItemMargin: 0 !default;
|
|
$inputListItemFocusShadow: 0 none !default;
|
|
$inputListHeaderPadding: 0.429rem 0.286rem !default;
|
|
$inputListHeaderMargin: 0 !default;
|
|
$inputListHeaderBg: $shade000 !default;
|
|
$inputListHeaderTextColor: $shade700 !default;
|
|
$inputListHeaderBorder: 0 none !default;
|
|
|
|
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
|
|
$inputOverlayBg: $solidSurfaceColor !default;
|
|
$inputOverlayHeaderBg: $inputListHeaderBg !default;
|
|
$inputOverlayBorder: 0 none !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;
|
|
|
|
//button
|
|
$buttonPadding: 0.429rem 0.571rem !default;
|
|
$buttonIconOnlyWidth: 2.286rem !default;
|
|
$buttonIconOnlyPadding: 0.429rem 0 !default;
|
|
$buttonBg: $primaryColor !default;
|
|
$buttonTextColor: $primaryTextColor !default;
|
|
$buttonBorder: 1px solid $primaryColor !default;
|
|
$buttonHoverBg: $primaryDarkColor !default;
|
|
$buttonTextHoverColor: $primaryTextColor !default;
|
|
$buttonHoverBorderColor: $primaryDarkColor !default;
|
|
$buttonActiveBg: $primaryDarkerColor !default;
|
|
$buttonTextActiveColor: $primaryTextColor !default;
|
|
$buttonActiveBorderColor: $primaryDarkerColor !default;
|
|
$buttonShadow: 0px 0px 10px rgba($primaryColor, 0.25);
|
|
|
|
$selectbuttonShadow: none !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: 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;
|
|
$secondaryButtonBorder: 1px solid transparent !default;
|
|
$secondaryButtonHoverBg: $shade200 !default;
|
|
$secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
|
|
$secondaryButtonHoverBorderColor: transparent !default;
|
|
$secondaryButtonActiveBg: $shade300 !default;
|
|
$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
|
|
$secondaryButtonActiveBorderColor: transparent !default;
|
|
$secondaryButtonShadow: none !default;
|
|
$secondaryButtonFocusShadow: none !default;
|
|
|
|
$infoButtonBg: #873efe !default;
|
|
$infoButtonTextColor: #ffffff !default;
|
|
$infoButtonBorder: 1px solid transparent !default;
|
|
$infoButtonHoverBg: #6c1af2 !default;
|
|
$infoButtonTextHoverColor: $infoButtonTextColor !default;
|
|
$infoButtonHoverBorderColor: transparent !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: #0bd18a !default;
|
|
$successButtonTextColor: #ffffff !default;
|
|
$successButtonBorder: 1px solid transparent !default;
|
|
$successButtonHoverBg: #049b65 !default;
|
|
$successButtonTextHoverColor: $successButtonTextColor !default;
|
|
$successButtonHoverBorderColor: transparent !default;
|
|
$successButtonActiveBg: #017e52 !default;
|
|
$successButtonTextActiveColor: $successButtonTextColor !default;
|
|
$successButtonActiveBorderColor: transparent !default;
|
|
$successButtonShadow: 0px 0px 10px rgba(11, 209, 138, 0.25) !default;
|
|
$successButtonFocusShadow: none !default;
|
|
|
|
$warningButtonBg: #eee500 !default;
|
|
$warningButtonTextColor: #44486d !default;
|
|
$warningButtonBorder: 1px solid transparent !default;
|
|
$warningButtonHoverBg: #d1c901 !default;
|
|
$warningButtonTextHoverColor: $warningButtonTextColor !default;
|
|
$warningButtonHoverBorderColor: transparent !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;
|
|
$helpButtonBorder: 1px solid transparent !default;
|
|
$helpButtonHoverBg: #e80ea6 !default;
|
|
$helpButtonTextHoverColor: $helpButtonTextColor !default;
|
|
$helpButtonHoverBorderColor: transparent !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: #fc6161 !default;
|
|
$dangerButtonTextColor: #ffffff !default;
|
|
$dangerButtonBorder: 1px solid transparent !default;
|
|
$dangerButtonHoverBg: #e73a3a !default;
|
|
$dangerButtonTextHoverColor: $dangerButtonTextColor !default;
|
|
$dangerButtonHoverBorderColor: transparent !default;
|
|
$dangerButtonActiveBg: #c42424 !default;
|
|
$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
|
|
$dangerButtonActiveBorderColor: transparent !default;
|
|
$dangerButtonShadow: 0px 0px 10px rgba(252, 97, 97, 0.25) !default;
|
|
$dangerButtonFocusShadow: none !default;
|
|
|
|
$linkButtonColor: $primaryColor !default;
|
|
$linkButtonHoverColor: $primaryColor !default;
|
|
$linkButtonTextHoverDecoration: underline !default;
|
|
$linkButtonFocusShadow: none !default;
|
|
|
|
//checkbox
|
|
$checkboxWidth: 20px !default;
|
|
$checkboxHeight: 20px !default;
|
|
$checkboxBorder: 2px solid #8a8ea6 !default;
|
|
$checkboxIconFontSize: 14px !default;
|
|
$checkboxHoverBorderColor: #676b89 !default;
|
|
$checkboxActiveBorderColor: $primaryColor !default;
|
|
$checkboxActiveBg: $primaryColor !default;
|
|
$checkboxIconActiveColor: $primaryTextColor !default;
|
|
$checkboxActiveHoverBg: $primaryDarkerColor !default;
|
|
$checkboxIconActiveHoverColor: $primaryTextColor !default;
|
|
$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
|
|
|
|
//radiobutton
|
|
$radiobuttonWidth: 20px !default;
|
|
$radiobuttonHeight: 20px !default;
|
|
$radiobuttonBorder: 2px solid #8a8ea6 !default;
|
|
$radiobuttonIconSize: 12px !default;
|
|
$radiobuttonHoverBorderColor: #676b89 !default;
|
|
$radiobuttonActiveBorderColor: $primaryColor !default;
|
|
$radiobuttonActiveBg: $primaryColor !default;
|
|
$radiobuttonIconActiveColor: $primaryTextColor !default;
|
|
$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
|
|
$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
|
|
$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
|
|
|
|
//colorpicker
|
|
$colorPickerPreviewWidth: 2rem !default;
|
|
$colorPickerPreviewHeight: 2rem !default;
|
|
$colorPickerBg: $shade100 !default;
|
|
$colorPickerBorderColor: #191919 !default;
|
|
$colorPickerBorder: 1px solid #191919 !default;
|
|
$colorPickerHandleColor: #191919 !default;
|
|
|
|
//togglebutton
|
|
$toggleButtonBg: $inputBg !default;
|
|
$toggleButtonBorder: 1px solid transparent !default;
|
|
$toggleButtonTextColor: $shade700 !default;
|
|
$toggleButtonIconColor: $shade600 !default;
|
|
$toggleButtonHoverBg: $shade200 !default;
|
|
$toggleButtonHoverBorderColor: transparent !default;
|
|
$toggleButtonTextHoverColor: $shade700 !default;
|
|
$toggleButtonIconHoverColor: $shade600 !default;
|
|
$toggleButtonActiveBg: $primaryColor !default;
|
|
$toggleButtonActiveBorderColor: $primaryColor !default;
|
|
$toggleButtonTextActiveColor: $primaryTextColor !default;
|
|
$toggleButtonIconActiveColor: $primaryTextColor !default;
|
|
$toggleButtonActiveHoverBg: $primaryDarkColor !default;
|
|
$toggleButtonActiveHoverBorderColor: $primaryDarkColor !default;
|
|
$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
|
|
$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
|
|
|
|
//inplace
|
|
$inplacePadding: $inputPadding !default;
|
|
$inplaceHoverBg: $shade100 !default;
|
|
$inplaceTextHoverColor: $shade700 !default;
|
|
|
|
//rating
|
|
$ratingIconFontSize: 1.286rem !default;
|
|
$ratingCancelIconColor: #fc6161 !default;
|
|
$ratingCancelIconHoverColor: #fc6161 !default;
|
|
$ratingStarIconOffColor: $shade700 !default;
|
|
$ratingStarIconOnColor: $primaryColor !default;
|
|
$ratingStarIconHoverColor: $primaryColor !default;
|
|
|
|
//slider
|
|
$sliderBg: $shade200 !default;
|
|
$sliderBorder: 0 none !default;
|
|
$sliderHorizontalHeight: 0.429rem !default;
|
|
$sliderVerticalWidth: 0.429rem !default;
|
|
$sliderHandleWidth: 1.143rem !default;
|
|
$sliderHandleHeight: 1.143rem !default;
|
|
$sliderHandleBg: #ffffff !default;
|
|
$sliderHandleBorder: 4px solid $primaryColor !default;
|
|
$sliderHandleBorderRadius: 50% !default;
|
|
$sliderHandleHoverBorderColor: $primaryColor !default;
|
|
$sliderHandleHoverBg: $primaryColor !default;
|
|
$sliderRangeBg: $primaryColor !default;
|
|
|
|
//calendar
|
|
$calendarTableMargin: 0.5rem 0 !default;
|
|
$calendarPadding: 0.857rem !default;
|
|
$calendarBg: $solidSurfaceColor !default;
|
|
$calendarInlineBg: transparent !default;
|
|
$calendarTextColor: $shade700 !default;
|
|
$calendarBorder: $inputListBorder !default;
|
|
$calendarOverlayBorder: $inputOverlayBorder !default;
|
|
|
|
$calendarHeaderPadding: 0 0 0.75rem 0 !default;
|
|
$calendarHeaderBg: transparent !default;
|
|
$calendarInlineHeaderBg: $calendarInlineBg !default;
|
|
$calendarHeaderBorder: 0 none !default;
|
|
$calendarHeaderTextColor: $shade700 !default;
|
|
$calendarHeaderFontWeight: 400 !default;
|
|
$calendarHeaderCellPadding: 0.357rem !default;
|
|
$calendarHeaderCellFontWeight: 500 !default;
|
|
$calendarHeaderCellFontSize: 12px !default;
|
|
$calendarHeaderCellTextColor: $shade500 !default;
|
|
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
|
|
|
|
$calendarCellDateBg: $shade100 !default;
|
|
$calendarCellDatePadding: 0.357rem !default;
|
|
$calendarCellDateWidth: 2.571rem !default;
|
|
$calendarCellDateHeight: 2.571rem !default;
|
|
$calendarCellDateBorderRadius: $borderRadius !default;
|
|
$calendarCellDateBorder: 2px solid transparent !default;
|
|
$calendarCellDateHoverBg: $shade200 !default;
|
|
$calendarCellDateTodayBg: $shade100 !default;
|
|
$calendarCellDateTodayBorderColor: $shade200 !default;
|
|
$calendarCellDateTodayTextColor: $shade700 !default;
|
|
|
|
$calendarButtonBarPadding: 1rem 0 !default;
|
|
$calendarTimePickerPadding: 0.5rem !default;
|
|
$calendarTimePickerElementPadding: 0 0.5rem !default;
|
|
$calendarTimePickerTimeFontSize: 1.25rem !default;
|
|
|
|
$calendarBreakpoint: 769px !default;
|
|
$calendarCellDatePaddingSM: 0 !default;
|
|
|
|
//input switch
|
|
$inputSwitchWidth: 2.714rem !default;
|
|
$inputSwitchHeight: 1.429rem !default;
|
|
$inputSwitchBorderRadius: 12px !default;
|
|
$inputSwitchHandleWidth: 1.143rem !default;
|
|
$inputSwitchHandleHeight: 1.143rem !default;
|
|
$inputSwitchHandleBorderRadius: 8px !default;
|
|
$inputSwitchSliderPadding: 0.25rem !default;
|
|
$inputSwitchSliderOffBg: $shade100 !default;
|
|
$inputSwitchHandleOffBg: $shade600 !default;
|
|
$inputSwitchSliderOffHoverBg: $shade200 !default;
|
|
$inputSwitchSliderOnBg: $primaryColor !default;
|
|
$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
|
|
$inputSwitchHandleOnBg: #ffffff !default;
|
|
|
|
//panel
|
|
$panelHeaderBorderColor: $shade300 !default;
|
|
$panelHeaderBorder: 1px solid $shade300 !default;
|
|
$panelHeaderBg: transparent !default;
|
|
$panelHeaderTextColor: $shade700 !default;
|
|
$panelHeaderFontWeight: 500 !default;
|
|
$panelHeaderPadding: 0.714rem 1.143rem !default;
|
|
$panelToggleableHeaderPadding: 0.429rem 0.571rem !default;
|
|
|
|
$panelHeaderHoverBg: $shade100 !default;
|
|
$panelHeaderHoverBorderColor: $shade300 !default;
|
|
$panelHeaderTextHoverColor: $shade700 !default;
|
|
|
|
$panelContentBorderColor: $shade300 !default;
|
|
$panelContentBorder: 1px solid $shade300 !default;
|
|
$panelContentBg: transparent !default;
|
|
$panelContentEvenRowBg: scale-color($panelContentBg, $lightness: -1%) !default;
|
|
$panelContentTextColor: $shade700 !default;
|
|
$panelContentPadding: 1.143rem !default;
|
|
|
|
$panelFooterBorder: 1px solid $shade300 !default;
|
|
$panelFooterBg: transparent !default;
|
|
$panelFooterTextColor: $shade700 !default;
|
|
$panelFooterPadding: 0.714rem 1.143rem !default;
|
|
|
|
$fieldsetContentPadding: 0.429rem !default;
|
|
|
|
//accordion
|
|
$accordionSpacing: 0 !default;
|
|
$accordionHeaderBorder: $panelHeaderBorder !default;
|
|
$accordionHeaderBg: $panelHeaderBg !default;
|
|
$accordionHeaderTextColor: $panelHeaderTextColor !default;
|
|
$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
|
|
$accordionHeaderPadding: $panelHeaderPadding !default;
|
|
|
|
$accordionHeaderHoverBg: $shade100 !default;
|
|
$accordionHeaderHoverBorderColor: $shade300 !default;
|
|
$accordionHeaderTextHoverColor: $shade700 !default;
|
|
|
|
$accordionHeaderActiveBg: $shade200 !default;
|
|
$accordionHeaderActiveBorderColor: $shade300 !default;
|
|
$accordionHeaderTextActiveColor: $shade700 !default;
|
|
|
|
$accordionHeaderActiveHoverBg: $shade200 !default;
|
|
$accordionHeaderActiveHoverBorderColor: $shade300 !default;
|
|
$accordionHeaderTextActiveHoverColor: $shade700 !default;
|
|
|
|
$accordionContentBorder: $panelContentBorder !default;
|
|
$accordionContentBg: $panelContentBg !default;
|
|
$accordionContentTextColor: $panelContentTextColor !default;
|
|
$accordionContentPadding: $panelContentPadding !default;
|
|
|
|
//tabview
|
|
$tabviewNavBorder: 1px solid $shade300 !default;
|
|
$tabviewNavBorderWidth: 0 0 2px 0 !default;
|
|
$tabviewNavBg: transparent !default;
|
|
|
|
$tabviewHeaderSpacing: 0.857rem !default;
|
|
$tabviewHeaderBorder: solid transparent !default;
|
|
$tabviewHeaderBorderWidth: 0 0 2px 0 !default;
|
|
$tabviewHeaderBorderColor: transparent transparent transparent transparent !default;
|
|
$tabviewHeaderBg: transparent !default;
|
|
$tabviewHeaderTextColor: $shade500 !default;
|
|
$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
|
|
$tabviewHeaderPadding: 0.571rem 0.429rem !default;
|
|
$tabviewHeaderMargin: 0 0 -2px 0 !default;
|
|
|
|
$tabviewHeaderHoverBg: transparent !default;
|
|
$tabviewHeaderHoverBorderColor: $shade700 !default;
|
|
$tabviewHeaderTextHoverColor: $shade700 !default;
|
|
|
|
$tabviewHeaderActiveBg: transparent !default;
|
|
$tabviewHeaderActiveBorderColor: $primaryColor !default;
|
|
$tabviewHeaderTextActiveColor: $primaryColor !default;
|
|
|
|
$tabviewContentBorder: 0 none !default;
|
|
$tabviewContentBg: transparent !default;
|
|
$tabviewContentTextColor: $panelContentTextColor !default;
|
|
$tabviewContentPadding: 1.143rem 0 !default;
|
|
|
|
//upload
|
|
$fileUploadProgressBarHeight: 0.25rem !default;
|
|
$fileUploadContentPadding: 2rem 1rem !default;
|
|
$fileUploadFileBorder: 1px solid $shade300 !default;
|
|
$fileUploadFilePadding: 1rem !default;
|
|
|
|
//scrollpanel
|
|
$scrollPanelTrackBorder: 0 none !default;
|
|
$scrollPanelTrackBg: $shade000 !default;
|
|
|
|
//card
|
|
$cardBodyPadding: 0.857rem 1.143rem !default;
|
|
$cardTitleFontSize: 1.143rem !default;
|
|
$cardTitleFontWeight: 500 !default;
|
|
$cardSubTitleFontSize: 12px !default;
|
|
$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, 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;
|
|
$editorToolbarBorder: $panelHeaderBorder !default;
|
|
$editorToolbarPadding: $panelHeaderPadding !default;
|
|
$editorToolbarIconColor: $textSecondaryColor !default;
|
|
$editorToolbarIconHoverColor: $textColor !default;
|
|
$editorIconActiveColor: $primaryColor !default;
|
|
$editorContentBorder: $panelContentBorder !default;
|
|
$editorContentBg: $panelContentBg !default;
|
|
|
|
//paginator
|
|
$paginatorBg: transparent !default;
|
|
$paginatorTextColor: $shade700 !default;
|
|
$paginatorBorder: solid $shade300 !default;
|
|
$paginatorBorderWidth: 0 !default;
|
|
$paginatorPadding: 0.571rem 0.571rem !default;
|
|
$paginatorElementWidth: 1.429rem !default;
|
|
$paginatorElementHeight: 1.429rem !default;
|
|
$paginatorElementBg: transparent !default;
|
|
$paginatorElementBorder: 0 none !default;
|
|
$paginatorElementIconColor: $shade700 !default;
|
|
$paginatorElementHoverBg: $shade100 !default;
|
|
$paginatorElementHoverBorderColor: transparent !default;
|
|
$paginatorElementIconHoverColor: $shade700 !default;
|
|
$paginatorElementActiveBg: $shade200 !default;
|
|
$paginatorElementActiveBorderColor: transparent !default;
|
|
$paginatorElementIconActiveColor: $shade700 !default;
|
|
$paginatorElementBorderRadius: 4px !default;
|
|
$paginatorElementMargin: 0.143rem !default;
|
|
$paginatorElementPadding: 0 !default;
|
|
|
|
//table
|
|
$tableHeaderBorder: 1px solid $shade300 !default;
|
|
$tableHeaderBorderWidth: 1px 0 1px 0 !default;
|
|
$tableHeaderBg: transparent !default;
|
|
$tableHeaderTextColor: $shade500 !default;
|
|
$tableHeaderFontWeight: 500 !default;
|
|
$tableHeaderPadding: 0.571rem 0.571rem !default;
|
|
|
|
$tableHeaderCellPadding: 0.571rem 0.571rem !default;
|
|
$tableHeaderCellBg: transparent !default;
|
|
$tableHeaderCellTextColor: $shade500 !default;
|
|
$tableHeaderCellFontWeight: 500 !default;
|
|
$tableHeaderCellBorder: 1px solid $shade300 !default;
|
|
$tableHeaderCellBorderWidth: 0 0 1px 0 !default;
|
|
$tableHeaderCellHoverBg: $shade100 !default;
|
|
$tableHeaderCellTextHoverColor: $shade500 !default;
|
|
$tableHeaderCellIconColor: $shade500 !default;
|
|
$tableHeaderCellIconHoverColor: $shade500 !default;
|
|
$tableHeaderCellHighlightBg: $shade200 !default;
|
|
$tableHeaderCellHighlightTextColor: $shade500 !default;
|
|
$tableHeaderCellHighlightHoverBg: $shade200 !default;
|
|
$tableHeaderCellHighlightTextHoverColor: $shade500 !default;
|
|
$tableSortableColumnBadgeSize: 1.143rem !default;
|
|
|
|
$tableBodyRowBg: transparent !default;
|
|
$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;
|
|
$tableBodyRowHighlightTextColor: $shade700;
|
|
$tableBodyCellBorder: 1px solid $shade300 !default;
|
|
$tableBodyCellBorderWidth: 0 0 0 0 !default;
|
|
$tableBodyCellPadding: 0.429rem 0.571rem !default;
|
|
|
|
$tableFooterCellPadding: 0.571rem 0.571rem !default;
|
|
$tableFooterCellBg: transparent !default;
|
|
$tableFooterCellTextColor: $shade500 !default;
|
|
$tableFooterCellFontWeight: 500 !default;
|
|
$tableFooterCellBorder: 1px solid $shade300 !default;
|
|
$tableFooterCellBorderWidth: 0 0 1px 0 !default;
|
|
$tableResizerHelperBg: $primaryColor !default;
|
|
|
|
$tableFooterBorder: 1px solid $shade300 !default;
|
|
$tableFooterBorderWidth: 0 0 1px 0 !default;
|
|
$tableFooterBg: transparent !default;
|
|
$tableFooterTextColor: $shade500 !default;
|
|
$tableFooterFontWeight: 500 !default;
|
|
$tableFooterPadding: 1rem 1rem !default;
|
|
$tableDragHelperBg: rgba($primaryColor, .16) !default;
|
|
|
|
|
|
$tableCellContentAlignment: left !default;
|
|
$tableTopPaginatorBorderWidth: 1px 0 1px 0 !default;
|
|
$tableBottomPaginatorBorderWidth: 1px 0 1px 0 !default;
|
|
|
|
$tableScaleSM: 0.5 !default;
|
|
$tableScaleLG: 1.25 !default;
|
|
|
|
//dataview
|
|
$dataViewContentPadding: 0 !default;
|
|
$dataViewContentBorder: 0 none !default;
|
|
$dataViewListItemBorder: solid $shade100 !default;
|
|
$dataViewListItemBorderWidth: 0 0 0 0 !default;
|
|
|
|
//orderlist
|
|
$orderlistBg: $shade400 !default;
|
|
$orderlistShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
|
|
$orderlistBorderRadius: 8px !default;
|
|
$orderlistBorder: 0 none !default;
|
|
$orderlistBorderWidth: 0 0 0 0 !default;
|
|
$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;
|
|
$orderlistListItemActiveBorderColor: $highlightBg !default;
|
|
|
|
//picklist
|
|
$picklistBg: $shade400 !default;
|
|
$picklistShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
|
|
$picklistBorderRadius: 8px !default;
|
|
$picklistBorder: 0 none !default;
|
|
$picklistBorderWidth: 0 0 0 0 !default;
|
|
$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;
|
|
$picklistListItemActiveBorderColor: $highlightBg !default;
|
|
|
|
//schedule
|
|
$fullCalendarEventBg: $primaryDarkColor !default;
|
|
$fullCalendarEventBorderColor: $primaryDarkColor !default;
|
|
$fullCalendarEventBorder: 1px solid $primaryDarkColor !default;
|
|
$fullCalendarEventTextColor: $primaryTextColor !default;
|
|
|
|
//tree
|
|
$treeContainerPadding: 0.286rem !default;
|
|
$treeNodePadding: 0.143rem !default;
|
|
$treeNodeContentPadding: 0.429rem 0.571rem !default;
|
|
$treeNodeChildrenPadding: 0 0 0 1rem !default;
|
|
$treeNodeIconColor: $shade700 !default;
|
|
|
|
//timeline
|
|
$timelineVerticalEventContentPadding: 0 1rem !default;
|
|
$timelineHorizontalEventContentPadding: 1rem 0 !default;
|
|
$timelineEventMarkerWidth: 1rem !default;
|
|
$timelineEventMarkerHeight: 1rem !default;
|
|
$timelineEventMarkerBorderRadius: 50% !default;
|
|
$timelineEventMarkerBorder: 2px solid $primaryColor !default;
|
|
$timelineEventMarkerBackground: $shade100 !default;
|
|
$timelineEventConnectorSize: 2px !default;
|
|
$timelineEventColor: $shade300 !default;
|
|
|
|
//org chart
|
|
$organizationChartConnectorColor: $shade300 !default;
|
|
|
|
//message
|
|
$messageMargin: 1rem 0 !default;
|
|
$messagePadding: 1.143rem 1.357rem !default;
|
|
$messageBorderWidth: 0 0 0 20px !default;
|
|
$messageIconFontSize: 1.286rem !default;
|
|
$messageTextFontSize: 1rem !default;
|
|
$messageTextFontWeight: 400 !default;
|
|
|
|
//inline message
|
|
$inlineMessagePadding: $inputPadding !default;
|
|
$inlineMessageMargin: 0 !default;
|
|
$inlineMessageIconFontSize: 1.286rem !default;
|
|
$inlineMessageTextFontSize: 1rem !default;
|
|
$inlineMessageBorderWidth: 0 0 0 20px !default;
|
|
|
|
//toast
|
|
$toastIconFontSize: 1.286rem !default;
|
|
$toastMessageTextMargin: 0 0 0 1rem !default;
|
|
$toastMargin: 0 0 1rem 0 !default;
|
|
$toastPadding: 1.143rem 1.357rem !default;
|
|
$toastBorderWidth: 0 0 0 20px !default;
|
|
$toastShadow: none !default;
|
|
$toastOpacity: 0.9 !default;
|
|
$toastTitleFontWeight: 400 !default;
|
|
$toastDetailMargin: $inlineSpacing 0 0 0 !default;
|
|
|
|
//severities
|
|
$infoMessageBg: $shade100 !default;
|
|
$infoMessageBorder: solid #873efe !default;
|
|
$infoMessageTextColor: $shade700 !default;
|
|
$infoMessageIconColor: $shade700 !default;
|
|
$successMessageBg: $shade100 !default;
|
|
$successMessageBorder: solid #0bd18a !default;
|
|
$successMessageTextColor: $shade700 !default;
|
|
$successMessageIconColor: $shade700 !default;
|
|
$warningMessageBg: $shade100 !default;
|
|
$warningMessageBorder: solid #eee500 !default;
|
|
$warningMessageTextColor: $shade700 !default;
|
|
$warningMessageIconColor: $shade700 !default;
|
|
$errorMessageBg: $shade100 !default;
|
|
$errorMessageBorder: solid #fc6161 !default;
|
|
$errorMessageTextColor: $shade700 !default;
|
|
$errorMessageIconColor: $shade700 !default;
|
|
|
|
//overlays
|
|
$overlayContentBorder: 0 none !default;
|
|
$overlayContentBg: $solidSurfaceColor !default;
|
|
$overlayContainerShadow: 0px 18px 50px -4px rgba(68, 72, 109, 0.1) !default;
|
|
|
|
//dialog
|
|
$dialogBorderRadius: 20px;
|
|
$dialogHeaderBg: $solidSurfaceColor !default;
|
|
$dialogHeaderBorder: 0 none !default;
|
|
$dialogHeaderTextColor: $shade700 !default;
|
|
$dialogHeaderFontWeight: 500 !default;
|
|
$dialogHeaderFontSize: 1.143rem !default;
|
|
$dialogHeaderPadding: 1.286rem 1.714rem !default;
|
|
$dialogContentPadding: 0 1.714rem 1.714rem 1.714rem !default;
|
|
$dialogFooterBorder: 0 none !default;
|
|
$dialogFooterPadding: 0 1.714rem 1.714rem 1.714rem !default;
|
|
|
|
//confirmpopup
|
|
$confirmPopupContentPadding: $panelContentPadding !default;
|
|
$confirmPopupFooterPadding: 0 1.25rem 1.25rem 1.25rem !default;
|
|
|
|
//tooltip
|
|
$tooltipBg: $solidSurfaceColor !default;
|
|
$tooltipTextColor: $shade700 !default;
|
|
$tooltipPadding: $inputPadding !default;
|
|
|
|
//steps
|
|
$stepsItemBg: transparent !default;
|
|
$stepsItemBorder: 0 none !default;
|
|
$stepsItemTextColor: $shade500 !default;
|
|
$stepsItemNumberBg: $shade200 !default;
|
|
$stepsItemNumberWidth: 1.714rem !default;
|
|
$stepsItemNumberHeight: 1.714rem !default;
|
|
$stepsItemNumberFontSize: 1.143rem !default;
|
|
$stepsItemNumberColor: $shade500 !default;
|
|
$stepsItemNumberBorderRadius: 12px !default;
|
|
$stepsItemActiveFontWeight: 400 !default;
|
|
$stepsItemHoverBg: $shade300 !default;
|
|
$stepsItemHoverTextColor: $shade700 !default;
|
|
$stepsItemActiveFontWeight: 400 !default;
|
|
$stepsItemActiveBg: $highlightBg !default;
|
|
$stepsItemNumberActiveTextColor: $highlightTextColor !default;
|
|
$stepsItemActiveTextColor: $shade700 !default;
|
|
$stepsItemActiveShadow: 0px 0px 10px rgba($highlightBg, 0.25) !default;
|
|
|
|
//progressbar
|
|
$progressBarHeight: 0.571rem !default;
|
|
$progressBarBorder: 0 none !default;
|
|
$progressBarBg: $shade200 !default;
|
|
$progressBarValueBg: $primaryColor !default;
|
|
$progressBarValueTextColor: $primaryTextColor !default;
|
|
|
|
$progressSpinnerStrokeColor: $errorMessageTextColor !default;
|
|
$progressSpinnerColorOne: $errorMessageTextColor !default;
|
|
$progressSpinnerColorTwo: $infoMessageTextColor !default;
|
|
$progressSpinnerColorThree: $successMessageTextColor !default;
|
|
$progressSpinnerColorFour: $warningMessageTextColor !default;
|
|
|
|
//menu (e.g. menu, menubar, tieredmenu)
|
|
$menuWidth: 12.5rem !default;
|
|
$menuBg: transparent !default;
|
|
$menuBorder: 1px solid $shade300 !default;
|
|
$menuTextColor: $shade600 !default;
|
|
$menuitemPadding: 0.571rem 0.429rem !default;
|
|
$menuitemBorderRadius: $borderRadius !default;
|
|
$menuitemBorder: 1px solid transparent !default;
|
|
$menuitemTextColor: $shade600 !default;
|
|
$menuitemIconColor: $shade600 !default;
|
|
$menuitemTextHoverColor: $shade700 !default;
|
|
$menuitemIconHoverColor: $shade700 !default;
|
|
$menuitemHoverBg: $shade100 !default;
|
|
$menuitemTextFocusColor: $shade700 !default;
|
|
$menuitemIconFocusColor: $shade700 !default;
|
|
$menuitemFocusBg: $shade300 !default;
|
|
$menuitemFocusBorderColor: $shade500 !default;
|
|
$menuitemTextActiveColor: $shade700 !default;
|
|
$menuitemIconActiveColor: $shade700 !default;
|
|
$menuitemActiveBg: $shade100 !default;
|
|
$menuitemActiveFocusBg: $highlightFocusBg !default;
|
|
$menuitemSubmenuIconFontSize: 0.875rem !default;
|
|
$submenuHeaderMargin: 0 !default;
|
|
$submenuHeaderPadding: 0.571rem 0.429rem !default;
|
|
$submenuHeaderBg: transparent !default;
|
|
$submenuHeaderTextColor: $shade500 !default;
|
|
$submenuHeaderBorderRadius: $borderRadius !default;
|
|
$submenuHeaderFontWeight: 500 !default;
|
|
$submenuHeaderFontSize: 0.857rem !default;
|
|
$overlayMenuBg: $solidSurfaceColor !default;
|
|
$overlayMenuBorder: 1px solid transparent !default;
|
|
$overlayMenuShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
|
|
$verticalMenuPadding: 0.429rem !default;
|
|
$verticalMenuitemMargin: 0 !default;
|
|
$menuSeparatorMargin: 0.25rem 0 !default;
|
|
|
|
$panelmenuHeaderTextColor: $shade500;
|
|
|
|
$breadcrumbPadding: 0.857rem !default;
|
|
$breadcrumbBg: $menuBg !default;
|
|
$breadcrumbBorder: $menuBorder !default;
|
|
$breadcrumbItemTextColor: $menuitemTextColor !default;
|
|
$breadcrumbItemIconColor: $menuitemIconColor !default;
|
|
$breadcrumbLastItemTextColor: $menuitemTextColor !default;
|
|
$breadcrumbLastItemIconColor: $menuitemIconColor !default;
|
|
$breadcrumbSeparatorColor: $menuitemTextColor !default;
|
|
|
|
$horizontalMenuPadding: 0.857rem !default;
|
|
$horizontalMenuBg: $menuBg !default;
|
|
$horizontalMenuBorder: $menuBorder !default;
|
|
$horizontalMenuTextColor: $menuTextColor !default;
|
|
$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
|
|
$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
|
|
$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
|
|
$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
|
|
$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
|
|
$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
|
|
$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
|
|
$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor !default;
|
|
$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
|
|
$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
|
|
|
|
//badge and tag
|
|
$badgeBg: $primaryColor !default;
|
|
$badgeTextColor: $primaryTextColor !default;
|
|
$badgeMinWidth: 1.429rem !default;
|
|
$badgeHeight: 1.429rem !default;
|
|
$badgeFontWeight: 500 !default;
|
|
$badgeFontSize: 1rem !default;
|
|
|
|
$tagPadding: 0 0.429rem !default;
|
|
|
|
//carousel
|
|
$carouselIndicatorsPadding: 1rem !default;
|
|
$carouselIndicatorBg: $shade200 !default;
|
|
$carouselIndicatorHoverBg: rgba(68, 72, 109, 0.15) !default;
|
|
$carouselIndicatorBorderRadius: 3px !default;
|
|
$carouselIndicatorWidth: 1.429rem !default;
|
|
$carouselIndicatorHeight: 0.572rem !default;
|
|
$carouselIndicatorActiveBg: $shade600 !default;
|
|
$carouselIndicatorActiveTextColor: $shade700 !default;
|
|
|
|
//galleria
|
|
$galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
|
|
$galleriaCloseIconMargin: 0.5rem !default;
|
|
$galleriaCloseIconFontSize: 2rem !default;
|
|
$galleriaCloseIconBg: transparent !default;
|
|
$galleriaCloseIconColor: $shade700 !default;
|
|
$galleriaCloseIconHoverBg: rgba(68, 72, 109, 0.15) !default;
|
|
$galleriaCloseIconHoverColor: $shade700 !default;
|
|
$galleriaCloseIconWidth: 4rem !default;
|
|
$galleriaCloseIconHeight: 4rem !default;
|
|
$galleriaCloseIconBorderRadius: 50% !default;
|
|
|
|
$galleriaItemNavigatorBg: transparent !default;
|
|
$galleriaItemNavigatorColor: $shade700 !default;
|
|
$galleriaItemNavigatorMargin: 0 0.5rem !default;
|
|
$galleriaItemNavigatorFontSize: 2rem !default;
|
|
$galleriaItemNavigatorHoverBg: rgba(68, 72, 109, 0.15) !default;
|
|
$galleriaItemNavigatorHoverColor: $shade700 !default;
|
|
$galleriaItemNavigatorWidth: 4rem !default;
|
|
$galleriaItemNavigatorHeight: 4rem !default;
|
|
$galleriaItemNavigatorBorderRadius: $borderRadius !default;
|
|
|
|
$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
|
|
$galleriaCaptionTextColor: $shade000 !default;
|
|
$galleriaCaptionPadding: 1rem !default;
|
|
|
|
$galleriaIndicatorsPadding: 1rem !default;
|
|
$galleriaIndicatorBg: $shade200 !default;
|
|
$galleriaIndicatorHoverBg: rgba(68, 72, 109, 0.15) !default;
|
|
$galleriaIndicatorBorderRadius: 3px !default;
|
|
$galleriaIndicatorWidth: 1.429rem !default;
|
|
$galleriaIndicatorHeight: 0.286rem !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 0.25rem !default;
|
|
$galleriaThumbnailNavigatorBg: transparent !default;
|
|
$galleriaThumbnailNavigatorColor: $shade700 !default;
|
|
$galleriaThumbnailNavigatorHoverBg: rgba(68, 72, 109, 0.15) !default;
|
|
$galleriaThumbnailNavigatorHoverColor: $shade700 !default;
|
|
$galleriaThumbnailNavigatorBorderRadius: 50% !default;
|
|
$galleriaThumbnailNavigatorWidth: 2rem !default;
|
|
$galleriaThumbnailNavigatorHeight: 2rem !default;
|
|
|
|
//divider
|
|
$dividerHorizontalMargin: 1rem 0 !default;
|
|
$dividerHorizontalPadding: 0 1rem !default;
|
|
$dividerVerticalMargin: 0 1rem !default;
|
|
$dividerVerticalPadding: 1rem 0 !default;
|
|
$dividerSize: 1px !default;
|
|
$dividerColor: $shade300 !default;
|
|
|
|
//avatar
|
|
$avatarBg: $shade300 !default;
|
|
$avatarTextColor: $textColor !default;
|
|
|
|
//chip
|
|
$chipBg: $shade300 !default;
|
|
$chipTextColor: $textColor !default;
|
|
$chipBorderRadius: 16px !default;
|
|
$chipFocusBg: $shade400 !default;
|
|
$chipFocusTextColor: $textColor !default;
|
|
|
|
//scrollTop
|
|
$scrollTopBg: rgba(0, 0, 0, 0.7) !default;
|
|
$scrollTopHoverBg: rgba(0, 0, 0, 0.8) !default;
|
|
$scrollTopWidth: 3rem !default;
|
|
$scrollTopHeight: 3rem !default;
|
|
$scrollTopBorderRadius: 50% !default;
|
|
$scrollTopFontSize: 1.5rem !default;
|
|
$scrollTopTextColor: $shade000 !default;
|
|
|
|
//skeleton
|
|
$skeletonBg: $shade100 !default;
|
|
$skeletonAnimationBg: rgba(255, 255, 255, 0.4) !default;
|
|
|
|
//splitter
|
|
$splitterGutterBg: $shade300 !default;
|
|
$splitterGutterHandleBg: $shade300 !default;
|
|
|
|
//speeddial
|
|
$speedDialButtonWidth: 4rem !default;
|
|
$speedDialButtonHeight: 4rem !default;
|
|
$speedDialButtonIconFontSize: 1.3rem !default;
|
|
$speedDialActionWidth: 3rem !default;
|
|
$speedDialActionHeight: 3rem !default;
|
|
$speedDialActionBg: $shade600 !default;
|
|
$speedDialActionHoverBg: $shade700 !default;
|
|
$speedDialActionTextColor: #fff !default;
|
|
$speedDialActionTextHoverColor: #fff !default;
|
|
|
|
//dock
|
|
$dockActionWidth: 4rem !default;
|
|
$dockActionHeight: 4rem !default;
|
|
$dockItemPadding: 0.5rem !default;
|
|
$dockItemBorderRadius: $borderRadius !default;
|
|
$dockCurrentItemMargin: 1.5rem !default;
|
|
$dockFirstItemsMargin: 1.3rem !default;
|
|
$dockSecondItemsMargin: 0.9rem !default;
|
|
$dockBg: rgba(255, 255, 255, 0.1) !default;
|
|
$dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
|
|
$dockPadding: 0.5rem 0.5rem !default;
|
|
$dockBorderRadius: 0.5rem !default;
|
|
|
|
//image
|
|
$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
|
|
$imagePreviewToolbarPadding: 1rem !default;
|
|
$imagePreviewIndicatorColor: #f8f9fa !default;
|
|
$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
|
|
$imagePreviewActionIconBg: transparent !default;
|
|
$imagePreviewActionIconColor: #f8f9fa !default;
|
|
$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
|
|
$imagePreviewActionIconHoverColor: #f8f9fa !default;
|
|
$imagePreviewActionIconWidth: 3rem !default;
|
|
$imagePreviewActionIconHeight: 3rem !default;
|
|
$imagePreviewActionIconFontSize: 1.5rem !default;
|
|
$imagePreviewActionIconBorderRadius: 50% !default;
|
|
|
|
:root {
|
|
--surface-a: #{$shade000};
|
|
--surface-b: #{$shade100};
|
|
--surface-c: #{$shade200};
|
|
--surface-d: #{$shade300};
|
|
--surface-e: #{$shade000};
|
|
--surface-f: #{$shade000};
|
|
--text-color: #{$shade700};
|
|
--text-color-secondary: #{$shade600};
|
|
--primary-color: #{$primaryColor};
|
|
--primary-color-text: #{$primaryTextColor};
|
|
--font-family: #{$fontFamily};
|
|
--surface-0: #ffffff;
|
|
--surface-50: #e1e2e8;
|
|
--surface-100: #cbccd6;
|
|
--surface-200: #b4b6c5;
|
|
--surface-300: #9ea0b3;
|
|
--surface-400: #878aa2;
|
|
--surface-500: #717490;
|
|
--surface-600: #5a5e7f;
|
|
--surface-700: #44486d;
|
|
--surface-800: #3c3f60;
|
|
--surface-900: #343753;
|
|
--gray-50: #e1e2e8;
|
|
--gray-100: #cbccd6;
|
|
--gray-200: #b4b6c5;
|
|
--gray-300: #9ea0b3;
|
|
--gray-400: #878aa2;
|
|
--gray-500: #717490;
|
|
--gray-600: #5a5e7f;
|
|
--gray-700: #44486d;
|
|
--gray-800: #3c3f60;
|
|
--gray-900: #343753;
|
|
--content-padding: #{$panelContentPadding};
|
|
--inline-spacing: #{$inlineSpacing};
|
|
--border-radius: #{$borderRadius};
|
|
--surface-ground: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%);
|
|
--surface-section: #ffffff;
|
|
--surface-card: rgba(255, 255, 255, 0.9);
|
|
--surface-overlay: #ececf9;
|
|
--surface-border: rgba(68, 72, 109, 0.2);
|
|
--surface-hover: rgba(68, 72, 109, 0.07);
|
|
--maskbg: #{$maskBg};
|
|
--focus-ring: #{$focusShadow};
|
|
}
|