refactor
This commit is contained in:
Çetin
parent
3d2fad43bf
commit
eb65e42fcb
@ -261,905 +261,7 @@ npm install primeicons@latest --save
|
||||
|
||||
<p>Here are the variables required to create a theme.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
||||
$primaryLightColor: #777BF1;
|
||||
$primaryColor:#464DF2;
|
||||
$primaryDarkColor: #221ED9;
|
||||
$primaryDarkerColor: #1222B9;
|
||||
$primaryTextColor: #FFFFFF;
|
||||
$primaryLighterColor: rgba($primaryLightColor,.1);
|
||||
|
||||
$highlightBg: $primaryColor;
|
||||
$highlightTextColor: $primaryTextColor;
|
||||
|
||||
@import '../../sass/theme/_theme_light';
|
||||
</app-code>
|
||||
|
||||
<p> An example sass command to compile the css would be;</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
sass --update src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
|
||||
</app-code>
|
||||
|
||||
<p>Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command
|
||||
so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
sass --watch src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
|
||||
</app-code>
|
||||
|
||||
<p>Same can also be applied to layout itself;</p>
|
||||
<ul>
|
||||
<li>Choose a layout name such as layout-myown.</li>
|
||||
<li>Create an empty file named layout-myown.scss inside <i>assets/layout/css</i> folder.</li>
|
||||
<li>Define the variables listed below and import the <i>/sass/layout/_layout.scss</i> file.</li>
|
||||
<li>Build the scss to generate css</li>
|
||||
<li>Serve the css by importing it using a link tag or a bundler.</li>
|
||||
</ul>
|
||||
|
||||
<p>Here are the variables required to create a layout.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
@import '../../sass/layout/_layout_light';
|
||||
</app-code>
|
||||
|
||||
<h4>SASS Variables</h4>
|
||||
<p>Both the theme and layout provides various variables to customize the design.</p>
|
||||
|
||||
<h5>sass/variables/layout/_layout_common.scss</h5>
|
||||
<p>Common variables for light and dark application layout.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
||||
$fontSize:14px !default;
|
||||
$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$mobileBreakpoint:991px !default;
|
||||
$borderRadius:24px !default;
|
||||
$animationDuration:.2s !default;
|
||||
$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;
|
||||
$letterSpacing:0.02em !default;
|
||||
$transitionDuration:.2s !default;
|
||||
$tabletBreakpoint:991px !default;
|
||||
$phoneBreakpoint:576px !default;
|
||||
</app-code>
|
||||
|
||||
<h5>sass/variables/layout/_layout_light.scss</h5>
|
||||
<p>Variables of the light theme layout.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
||||
$bodyBgColor:#F2F4F6 !default;
|
||||
|
||||
//text
|
||||
$textShade100:#3E4754 !default;
|
||||
$textShade200:rgba(41, 50, 65, 0.8) !default;
|
||||
$textShade300:rgba(41, 50, 65, 0.5) !default;
|
||||
|
||||
//content
|
||||
$contentShade100:#ffffff !default;
|
||||
$contentShade200: #F7FAFF !default;
|
||||
$contentShade300: #EEF5FF !default;
|
||||
$contentShade400: #F7F7F8 !default;
|
||||
$dividerColor: #D4D6D9 !default;
|
||||
|
||||
$menuTooltipBgColor:#293241!default;
|
||||
$menuTooltipTextColor:#ffffff !default;
|
||||
|
||||
@import './_layout_common.scss';
|
||||
</app-code>
|
||||
|
||||
<h5>sass/variables/theme/_theme_light</h5>
|
||||
<p>Variables of the light component theme, see the <a href="https://www.primefaces.org/designer/api/primeng/11.1.0/">Theme Designer API</a> for documentation.</p>
|
||||
<div style="height:400px;overflow: auto;">
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
||||
//reused color variables
|
||||
$shade000:#ffffff !default; //surface
|
||||
$shade100:#FCFCFC !default; //header background
|
||||
$shade200:rgba($primaryColor,.2) !default; //hover background
|
||||
$shade300:#D4D6D9 !default; //border, divider
|
||||
$shade400:#D4D6D9 !default; //input border
|
||||
$shade500:#545B67 !default; //input icon
|
||||
$shade600:#83888F !default; //text secondary color
|
||||
$shade700:#69707A !default; //text color
|
||||
$shade800:#343a40 !default; //unused
|
||||
$shade900:#212529 !default; //unused
|
||||
|
||||
//global
|
||||
$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 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;
|
||||
$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;
|
||||
$maskBg:rgba(0, 0, 0, 0.4) !default;
|
||||
$loadingIconFontSize:2rem !default;
|
||||
$errorColor:#f44336 !default;
|
||||
|
||||
//scale
|
||||
$scaleSM:0.875 !default;
|
||||
$scaleLG:1.25 !default;
|
||||
|
||||
//focus
|
||||
$focusOutlineColor:$primaryLightColor !default;
|
||||
$focusOutline:0 none !default;
|
||||
$focusOutlineOffset:0 !default;
|
||||
$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
|
||||
|
||||
//action icons
|
||||
$actionIconWidth:2rem !default;
|
||||
$actionIconHeight:2rem !default;
|
||||
$actionIconBg:transparent !default;
|
||||
$actionIconBorder:0 none !default;
|
||||
$actionIconColor:$shade600 !default;
|
||||
$actionIconHoverBg:$shade200 !default;
|
||||
$actionIconHoverBorderColor:transparent !default;
|
||||
$actionIconHoverColor:$shade700 !default;
|
||||
$actionIconBorderRadius:50% !default;
|
||||
|
||||
//input field (e.g. inputtext, spinner, inputmask)
|
||||
$inputPadding:.5rem .5rem !default;
|
||||
$inputTextFontSize:1rem !default;
|
||||
|
||||
$inputBg:$shade000 !default;
|
||||
$inputTextColor:$shade700 !default;
|
||||
$inputIconColor:$shade600 !default;
|
||||
$inputBorder:1px solid $shade400 !default;
|
||||
$inputHoverBorderColor:$primaryColor !default;
|
||||
$inputFocusBorderColor:$primaryColor !default;
|
||||
$inputErrorBorderColor:$errorColor !default;
|
||||
$inputPlaceholderTextColor:$shade600 !default;
|
||||
$inputFilledBg:$shade100 !default;
|
||||
$inputFilledHoverBg:$inputFilledBg !default;
|
||||
$inputFilledFocusBg:$shade000 !default;
|
||||
|
||||
//input groups
|
||||
$inputGroupBg:$shade200 !default;
|
||||
$inputGroupTextColor:$shade600 !default;
|
||||
$inputGroupAddOnMinWidth:2.357rem !default;
|
||||
|
||||
//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
|
||||
$inputListBg:$shade000 !default;
|
||||
$inputListTextColor:$shade700 !default;
|
||||
$inputListBorder:$inputBorder !default;
|
||||
$inputListPadding:.5rem 0 !default;
|
||||
$inputListItemPadding:.5rem 1rem !default;
|
||||
$inputListItemBg:transparent !default;
|
||||
$inputListItemTextColor:$shade700 !default;
|
||||
$inputListItemHoverBg:$shade200 !default;
|
||||
$inputListItemTextHoverColor:$shade700 !default;
|
||||
$inputListItemBorder:0 none !default;
|
||||
$inputListItemBorderRadius:0 !default;
|
||||
$inputListItemMargin:0 !default;
|
||||
$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
|
||||
$inputListHeaderPadding:.5rem 1rem !default;
|
||||
$inputListHeaderMargin:0 !default;
|
||||
$inputListHeaderBg:$shade100 !default;
|
||||
$inputListHeaderTextColor:$shade700 !default;
|
||||
$inputListHeaderBorder:0 none !default;
|
||||
|
||||
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
|
||||
$inputOverlayBg:$inputListBg !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;
|
||||
|
||||
//button
|
||||
$buttonPadding:.5rem 1rem !default;
|
||||
$buttonIconOnlyWidth:2.357rem !default;
|
||||
$buttonIconOnlyPadding:.5rem 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;
|
||||
$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;
|
||||
$roundedButtonBorderRadius:2rem !default;
|
||||
|
||||
$textButtonHoverBgOpacity:.04 !default;
|
||||
$textButtonActiveBgOpacity:.16 !default;
|
||||
$outlinedButtonBorder:1px solid !default;
|
||||
$plainButtonTextColor:$textSecondaryColor !default;
|
||||
$plainButtonHoverBgColor:$shade200 !default;
|
||||
$plainButtonActiveBgColor:$shade300 !default;
|
||||
|
||||
$secondaryButtonBg:#607D8B !default;
|
||||
$secondaryButtonTextColor:#ffffff !default;
|
||||
$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
|
||||
$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
|
||||
$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
|
||||
$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
|
||||
$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
|
||||
$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
|
||||
$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
|
||||
$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
|
||||
|
||||
$infoButtonBg:#0288D1 !default;
|
||||
$infoButtonTextColor:#ffffff !default;
|
||||
$infoButtonBorder:1px solid $infoButtonBg !default;
|
||||
$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
|
||||
$infoButtonTextHoverColor:$infoButtonTextColor !default;
|
||||
$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
|
||||
$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
|
||||
$infoButtonTextActiveColor:$infoButtonTextColor !default;
|
||||
$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
|
||||
$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
|
||||
|
||||
$successButtonBg:#689F38 !default;
|
||||
$successButtonTextColor:#ffffff !default;
|
||||
$successButtonBorder:1px solid $successButtonBg !default;
|
||||
$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
|
||||
$successButtonTextHoverColor:$successButtonTextColor !default;
|
||||
$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
|
||||
$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
|
||||
$successButtonTextActiveColor:$successButtonTextColor !default;
|
||||
$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
|
||||
$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
|
||||
|
||||
$warningButtonBg:#FBC02D !default;
|
||||
$warningButtonTextColor:#212529 !default;
|
||||
$warningButtonBorder:1px solid $warningButtonBg !default;
|
||||
$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
|
||||
$warningButtonTextHoverColor:$warningButtonTextColor !default;
|
||||
$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
|
||||
$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
|
||||
$warningButtonTextActiveColor:$warningButtonTextColor !default;
|
||||
$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
|
||||
$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
|
||||
|
||||
$helpButtonBg:#9C27B0 !default;
|
||||
$helpButtonTextColor:#ffffff !default;
|
||||
$helpButtonBorder:1px solid $helpButtonBg !default;
|
||||
$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
|
||||
$helpButtonTextHoverColor:$helpButtonTextColor !default;
|
||||
$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
|
||||
$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
|
||||
$helpButtonTextActiveColor:$helpButtonTextColor !default;
|
||||
$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
|
||||
$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
|
||||
|
||||
$dangerButtonBg:#D32F2F !default;
|
||||
$dangerButtonTextColor:#ffffff !default;
|
||||
$dangerButtonBorder:1px solid $dangerButtonBg !default;
|
||||
$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
|
||||
$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
|
||||
$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
|
||||
$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
|
||||
$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
|
||||
$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
|
||||
$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
|
||||
|
||||
$linkButtonColor:$primaryDarkerColor !default;
|
||||
$linkButtonHoverColor:$primaryDarkerColor !default;
|
||||
$linkButtonTextHoverDecoration:underline !default;
|
||||
$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
|
||||
|
||||
//checkbox
|
||||
$checkboxWidth:20px !default;
|
||||
$checkboxHeight:20px !default;
|
||||
$checkboxBorder:2px solid $shade400 !default;
|
||||
$checkboxIconFontSize:14px !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 $shade400 !default;
|
||||
$radiobuttonIconSize:12px !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:#323232 !default;
|
||||
$colorPickerBorderColor:#191919 !default;
|
||||
$colorPickerHandleColor:$shade000 !default;
|
||||
|
||||
//togglebutton
|
||||
$toggleButtonBg:$inputBg !default;
|
||||
$toggleButtonBorder:1px solid $shade400 !default;
|
||||
$toggleButtonTextColor:$shade700 !default;
|
||||
$toggleButtonIconColor:$shade600 !default;
|
||||
$toggleButtonHoverBg:$shade200 !default;
|
||||
$toggleButtonHoverBorderColor:$shade400 !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:$shade200 !default;
|
||||
$inplaceTextHoverColor:$shade700 !default;
|
||||
|
||||
//rating
|
||||
$ratingIconFontSize:1.143rem !default;
|
||||
$ratingCancelIconColor:#e74c3c !default;
|
||||
$ratingCancelIconHoverColor:#c0392b !default;
|
||||
$ratingStarIconOffColor:$shade700 !default;
|
||||
$ratingStarIconOnColor:$primaryColor !default;
|
||||
$ratingStarIconHoverColor:$primaryColor !default;
|
||||
|
||||
//slider
|
||||
$sliderBg:$shade300 !default;
|
||||
$sliderBorder:0 none !default;
|
||||
$sliderHorizontalHeight:.286rem !default;
|
||||
$sliderVerticalWidth:0.286rem !default;
|
||||
$sliderHandleWidth:1.143rem !default;
|
||||
$sliderHandleHeight:1.143rem !default;
|
||||
$sliderHandleBg:$shade000 !default;
|
||||
$sliderHandleBorder:2px solid $primaryColor !default;
|
||||
$sliderHandleBorderRadius:50% !default;
|
||||
$sliderHandleHoverBorderColor:$primaryColor !default;
|
||||
$sliderHandleHoverBg:$primaryColor !default;
|
||||
$sliderRangeBg:$primaryColor !default;
|
||||
|
||||
//calendar
|
||||
$calendarTableMargin:.5rem 0 !default;
|
||||
$calendarPadding:.5rem !default;
|
||||
$calendarBg:$shade000 !default;
|
||||
$calendarInlineBg:$calendarBg !default;
|
||||
$calendarTextColor:$shade700 !default;
|
||||
$calendarBorder:$inputListBorder !default;
|
||||
$calendarOverlayBorder:$inputOverlayBorder !default;
|
||||
|
||||
$calendarHeaderPadding:.5rem !default;
|
||||
$calendarHeaderBg:$shade000 !default;
|
||||
$calendarInlineHeaderBg:$calendarBg !default;
|
||||
$calendarHeaderBorder:1px solid $shade300 !default;
|
||||
$calendarHeaderTextColor:$shade700 !default;
|
||||
$calendarHeaderFontWeight:600 !default;
|
||||
$calendarHeaderCellPadding:.5rem !default;
|
||||
|
||||
$calendarCellDatePadding:.5rem !default;
|
||||
$calendarCellDateWidth:2.5rem !default;
|
||||
$calendarCellDateHeight:2.5rem !default;
|
||||
$calendarCellDateBorderRadius:50% !default;
|
||||
$calendarCellDateBorder:1px solid transparent !default;
|
||||
$calendarCellDateHoverBg:$shade200 !default;
|
||||
$calendarCellDateTodayBg:$shade400 !default;
|
||||
$calendarCellDateTodayBorderColor:transparent !default;
|
||||
$calendarCellDateTodayTextColor:$shade700 !default;
|
||||
|
||||
$calendarButtonBarPadding:1rem 0 !default;
|
||||
$calendarTimePickerPadding:.5rem !default;
|
||||
$calendarTimePickerElementPadding:0 .5rem !default;
|
||||
$calendarTimePickerTimeFontSize:1.25rem !default;
|
||||
|
||||
$calendarBreakpoint:769px !default;
|
||||
$calendarCellDatePaddingSM:0 !default;
|
||||
|
||||
//input switch
|
||||
$inputSwitchWidth:3rem !default;
|
||||
$inputSwitchHeight:1.75rem !default;
|
||||
$inputSwitchBorderRadius:30px !default;
|
||||
$inputSwitchHandleWidth:1.250rem !default;
|
||||
$inputSwitchHandleHeight:1.250rem !default;
|
||||
$inputSwitchHandleBorderRadius:50% !default;
|
||||
$inputSwitchSliderPadding:.25rem !default;
|
||||
$inputSwitchSliderOffBg:$shade400 !default;
|
||||
$inputSwitchHandleOffBg:$shade000 !default;
|
||||
$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
|
||||
$inputSwitchSliderOnBg:$primaryColor !default;
|
||||
$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
|
||||
$inputSwitchHandleOnBg:$shade000 !default;
|
||||
|
||||
//panel
|
||||
$panelHeaderBorder:1px solid $shade300 !default;
|
||||
$panelHeaderBg:$shade100 !default;
|
||||
$panelHeaderTextColor:$shade700 !default;
|
||||
$panelHeaderFontWeight:600 !default;
|
||||
$panelHeaderPadding:1rem !default;
|
||||
$panelToggleableHeaderPadding:.5rem 1rem !default;
|
||||
|
||||
$panelHeaderHoverBg:$shade200 !default;
|
||||
$panelHeaderHoverBorderColor:$shade300 !default;
|
||||
$panelHeaderTextHoverColor:$shade700 !default;
|
||||
|
||||
$panelContentBorder:1px solid $shade300 !default;
|
||||
$panelContentBg:$shade000 !default;
|
||||
$panelContentTextColor:$shade700 !default;
|
||||
$panelContentPadding:1rem !default;
|
||||
|
||||
$panelFooterBorder:1px solid $shade300 !default;
|
||||
$panelFooterBg:$shade000 !default;
|
||||
$panelFooterTextColor:$shade700 !default;
|
||||
$panelFooterPadding:0.5rem 1rem !default;
|
||||
|
||||
//accordion
|
||||
$accordionSpacing:0 !default;
|
||||
$accordionHeaderBorder:$panelHeaderBorder !default;
|
||||
$accordionHeaderBg:$panelHeaderBg !default;
|
||||
$accordionHeaderTextColor:$panelHeaderTextColor !default;
|
||||
$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
|
||||
$accordionHeaderPadding:$panelHeaderPadding !default;
|
||||
|
||||
$accordionHeaderHoverBg:$shade200 !default;
|
||||
$accordionHeaderHoverBorderColor:$shade300 !default;
|
||||
$accordionHeaderTextHoverColor:$shade700 !default;
|
||||
|
||||
$accordionHeaderActiveBg:$panelHeaderBg !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:$shade000 !default;
|
||||
|
||||
$tabviewHeaderSpacing:0 !default;
|
||||
$tabviewHeaderBorder:solid $shade300 !default;
|
||||
$tabviewHeaderBorderWidth:0 0 2px 0 !default;
|
||||
$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
|
||||
$tabviewHeaderBg:$shade000 !default;
|
||||
$tabviewHeaderTextColor:$shade600 !default;
|
||||
$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
|
||||
$tabviewHeaderPadding:$panelHeaderPadding !default;
|
||||
$tabviewHeaderMargin:0 0 -2px 0 !default;
|
||||
|
||||
$tabviewHeaderHoverBg:$shade000 !default;
|
||||
$tabviewHeaderHoverBorderColor:$shade600 !default;
|
||||
$tabviewHeaderTextHoverColor:$shade600 !default;
|
||||
|
||||
$tabviewHeaderActiveBg:$shade000 !default;
|
||||
$tabviewHeaderActiveBorderColor:$primaryColor !default;
|
||||
$tabviewHeaderTextActiveColor:$primaryColor !default;
|
||||
|
||||
$tabviewContentBorder:0 none !default;
|
||||
$tabviewContentBg:$panelContentBg !default;
|
||||
$tabviewContentTextColor:$panelContentTextColor !default;
|
||||
$tabviewContentPadding:$panelContentPadding !default;
|
||||
|
||||
//upload
|
||||
$fileUploadProgressBarHeight:.25rem !default;
|
||||
$fileUploadContentPadding:2rem 1rem !default;
|
||||
|
||||
//scrollpanel
|
||||
$scrollPanelTrackBorder:0 none !default;
|
||||
$scrollPanelTrackBg:$shade100 !default;
|
||||
|
||||
//card
|
||||
$cardBodyPadding:1rem !default;
|
||||
$cardTitleFontSize:1.5rem !default;
|
||||
$cardTitleFontWeight:700 !default;
|
||||
$cardSubTitleFontWeight:400 !default;
|
||||
$cardSubTitleColor:$shade600 !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;
|
||||
|
||||
//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:$shade000 !default;
|
||||
$paginatorTextColor:$shade600 !default;
|
||||
$paginatorBorder:solid $shade200 !default;
|
||||
$paginatorBorderWidth:0 !default;
|
||||
$paginatorPadding:.5rem 1rem !default;
|
||||
$paginatorElementWidth:$buttonIconOnlyWidth !default;
|
||||
$paginatorElementHeight:$buttonIconOnlyWidth !default;
|
||||
$paginatorElementBg:transparent !default;
|
||||
$paginatorElementBorder:0 none !default;
|
||||
$paginatorElementIconColor:$shade600 !default;
|
||||
$paginatorElementHoverBg:$shade200 !default;
|
||||
$paginatorElementHoverBorderColor:transparent !default;
|
||||
$paginatorElementIconHoverColor:$shade700 !default;
|
||||
$paginatorElementBorderRadius:$borderRadius !default;
|
||||
$paginatorElementMargin:.143rem !default;
|
||||
$paginatorElementPadding:0 !default;
|
||||
|
||||
//table
|
||||
$tableHeaderBorder:1px solid $shade200 !default;
|
||||
$tableHeaderBorderWidth:1px 0 1px 0 !default;
|
||||
$tableHeaderBg:$shade100 !default;
|
||||
$tableHeaderTextColor:$shade700 !default;
|
||||
$tableHeaderFontWeight:600 !default;
|
||||
$tableHeaderPadding:1rem 1rem !default;
|
||||
|
||||
$tableHeaderCellPadding:1rem 1rem !default;
|
||||
$tableHeaderCellBg:$shade100 !default;
|
||||
$tableHeaderCellTextColor:$shade700 !default;
|
||||
$tableHeaderCellFontWeight:600 !default;
|
||||
$tableHeaderCellBorder:1px solid $shade200 !default;
|
||||
$tableHeaderCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableHeaderCellHoverBg:$shade200 !default;
|
||||
$tableHeaderCellTextHoverColor:$shade700 !default;
|
||||
$tableHeaderCellIconColor:$shade600 !default;
|
||||
$tableHeaderCellIconHoverColor:$shade600 !default;
|
||||
$tableHeaderCellHighlightBg:$shade100 !default;
|
||||
$tableHeaderCellHighlightTextColor:$primaryColor !default;
|
||||
$tableHeaderCellHighlightHoverBg:$shade200 !default;
|
||||
$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
|
||||
$tableSortableColumnBadgeSize:1.143rem !default;
|
||||
|
||||
$tableBodyRowBg:$shade000 !default;
|
||||
$tableBodyRowTextColor:$shade700 !default;
|
||||
$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
|
||||
$tableBodyRowHoverBg:$shade200 !default;
|
||||
$tableBodyRowTextHoverColor:$shade700 !default;
|
||||
$tableBodyCellBorder:1px solid $shade200 !default;
|
||||
$tableBodyCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableBodyCellPadding:1rem 1rem !default;
|
||||
|
||||
$tableFooterCellPadding:1rem 1rem !default;
|
||||
$tableFooterCellBg:$shade100 !default;
|
||||
$tableFooterCellTextColor:$shade700 !default;
|
||||
$tableFooterCellFontWeight:600 !default;
|
||||
$tableFooterCellBorder:1px solid $shade200 !default;
|
||||
$tableFooterCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableResizerHelperBg:$primaryColor !default;
|
||||
|
||||
$tableFooterBorder:1px solid $shade200 !default;
|
||||
$tableFooterBorderWidth:0 0 1px 0 !default;
|
||||
$tableFooterBg:$shade100 !default;
|
||||
$tableFooterTextColor:$shade700 !default;
|
||||
$tableFooterFontWeight:600 !default;
|
||||
$tableFooterPadding:1rem 1rem !default;
|
||||
|
||||
$tableCellContentAlignment:left !default;
|
||||
$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
|
||||
$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
|
||||
|
||||
$tableScaleSM:0.5 !default;
|
||||
$tableScaleLG:1.25 !default;
|
||||
|
||||
//dataview
|
||||
$dataViewContentPadding:0 !default;
|
||||
$dataViewContentBorder:0 none !default;
|
||||
$dataViewListItemBorder:solid $shade200 !default;
|
||||
$dataViewListItemBorderWidth:0 0 1px 0 !default;
|
||||
|
||||
//orderlist, picklist
|
||||
$orderListBreakpoint:769px !default;
|
||||
$pickListBreakpoint:769px !default;
|
||||
|
||||
//schedule
|
||||
$fullCalendarEventBg:$primaryDarkColor !default;
|
||||
$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
|
||||
$fullCalendarEventTextColor:$primaryTextColor !default;
|
||||
|
||||
//tree
|
||||
$treeContainerPadding:0.286rem !default;
|
||||
$treeNodePadding:0.143rem !default;
|
||||
$treeNodeContentPadding:.5rem !default;
|
||||
$treeNodeChildrenPadding:0 0 0 1rem !default;
|
||||
$treeNodeIconColor:$shade600 !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:$shade000 !default;
|
||||
$timelineEventConnectorSize:2px !default;
|
||||
$timelineEventColor:$shade300 !default;
|
||||
|
||||
//org chart
|
||||
$organizationChartConnectorColor:$shade300 !default;
|
||||
|
||||
//message
|
||||
$messageMargin:1rem 0 !default;
|
||||
$messagePadding:1rem 1.5rem !default;
|
||||
$messageBorderWidth:0 0 0 6px !default;
|
||||
$messageIconFontSize:1.5rem !default;
|
||||
$messageTextFontSize:1rem !default;
|
||||
$messageTextFontWeight:500 !default;
|
||||
|
||||
//inline message
|
||||
$inlineMessagePadding:$inputPadding !default;
|
||||
$inlineMessageMargin:0 !default;
|
||||
$inlineMessageIconFontSize:1rem !default;
|
||||
$inlineMessageTextFontSize:1rem !default;
|
||||
$inlineMessageBorderWidth:0px !default;
|
||||
|
||||
//toast
|
||||
$toastIconFontSize:2rem !default;
|
||||
$toastMessageTextMargin:0 0 0 1rem !default;
|
||||
$toastMargin:0 0 1rem 0 !default;
|
||||
$toastPadding:1rem !default;
|
||||
$toastBorderWidth:0 0 0 6px !default;
|
||||
$toastShadow: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;
|
||||
$toastOpacity:.9 !default;
|
||||
$toastTitleFontWeight:700 !default;
|
||||
$toastDetailMargin:$inlineSpacing 0 0 0 !default;
|
||||
|
||||
//severities
|
||||
$infoMessageBg:#B3E5FC !default;
|
||||
$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
|
||||
$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
|
||||
$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
|
||||
$successMessageBg:#C8E6C9 !default;
|
||||
$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
|
||||
$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
|
||||
$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
|
||||
$warningMessageBg:#FFECB3 !default;
|
||||
$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
|
||||
$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
|
||||
$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
|
||||
$errorMessageBg:#FFCDD2 !default;
|
||||
$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
|
||||
$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
|
||||
$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
|
||||
|
||||
//overlays
|
||||
$overlayContentBorder:0 none !default;
|
||||
$overlayContentBg:$panelContentBg !default;
|
||||
$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
|
||||
|
||||
//dialog
|
||||
$dialogHeaderBg:$shade000 !default;
|
||||
$dialogHeaderBorder:0 none !default;
|
||||
$dialogHeaderTextColor:$shade700 !default;
|
||||
$dialogHeaderFontWeight:600 !default;
|
||||
$dialogHeaderFontSize:1.25rem !default;
|
||||
$dialogHeaderPadding:1.5rem !default;
|
||||
$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
|
||||
$dialogFooterBorder:0 none !default;
|
||||
$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
|
||||
|
||||
//tooltip
|
||||
$tooltipBg:$shade700 !default;
|
||||
$tooltipTextColor:$shade000 !default;
|
||||
$tooltipPadding:$inputPadding !default;
|
||||
|
||||
//steps
|
||||
$stepsItemBg:$shade000 !default;
|
||||
$stepsItemBorder:1px solid $shade200 !default;
|
||||
$stepsItemTextColor:$shade600 !default;
|
||||
$stepsItemNumberWidth:2rem !default;
|
||||
$stepsItemNumberHeight:2rem !default;
|
||||
$stepsItemNumberFontSize:1.143rem !default;
|
||||
$stepsItemNumberColor:$shade700 !default;
|
||||
$stepsItemNumberBorderRadius:50% !default;
|
||||
$stepsItemActiveFontWeight:600 !default;
|
||||
|
||||
//progressbar
|
||||
$progressBarHeight:1rem !default;
|
||||
$progressBarBorder:0 none !default;
|
||||
$progressBarBg:$shade300 !default;
|
||||
$progressBarValueBg:$primaryColor !default;
|
||||
|
||||
//menu (e.g. menu, menubar, tieredmenu)
|
||||
$menuWidth:12.5rem !default;
|
||||
$menuBg:$shade000 !default;
|
||||
$menuBorder:1px solid $shade300 !default;
|
||||
$menuTextColor:$shade700 !default;
|
||||
$menuitemPadding:.75rem 1rem !default;
|
||||
$menuitemBorderRadius:0 !default;
|
||||
$menuitemTextColor:$shade700 !default;
|
||||
$menuitemIconColor:$shade600 !default;
|
||||
$menuitemTextHoverColor:$shade700 !default;
|
||||
$menuitemIconHoverColor:$shade600 !default;
|
||||
$menuitemHoverBg:$shade200 !default;
|
||||
$menuitemTextActiveColor:$shade700 !default;
|
||||
$menuitemIconActiveColor:$shade600 !default;
|
||||
$menuitemActiveBg:$shade200 !default;
|
||||
$menuitemSubmenuIconFontSize:.875rem !default;
|
||||
$submenuHeaderMargin:0 !default;
|
||||
$submenuHeaderPadding:.75rem 1rem !default;
|
||||
$submenuHeaderBg:$shade000 !default;
|
||||
$submenuHeaderTextColor:$shade700 !default;
|
||||
$submenuHeaderBorderRadius:0 !default;
|
||||
$submenuHeaderFontWeight:600 !default;
|
||||
$overlayMenuBg:$menuBg !default;
|
||||
$overlayMenuBorder:0 none !default;
|
||||
$overlayMenuShadow: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;
|
||||
$verticalMenuPadding:.25rem 0 !default;
|
||||
$verticalMenuitemMargin:0;
|
||||
$menuSeparatorMargin:.25rem 0 !default;
|
||||
|
||||
$breadcrumbPadding:1rem !default;
|
||||
$breadcrumbBg:$menuBg !default;
|
||||
$breadcrumbBorder:$menuBorder !default;
|
||||
$breadcrumbItemTextColor:$menuitemTextColor !default;
|
||||
$breadcrumbItemIconColor:$menuitemIconColor !default;
|
||||
$breadcrumbLastItemTextColor:$menuitemTextColor !default;
|
||||
$breadcrumbLastItemIconColor:$menuitemIconColor !default;
|
||||
$breadcrumbSeparatorColor:$menuitemTextColor !default;
|
||||
|
||||
$horizontalMenuPadding:.5rem !default;
|
||||
$horizontalMenuBg:$shade100 !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.5rem !default;
|
||||
$badgeHeight:1.5rem !default;
|
||||
$badgeFontWeight:700 !default;
|
||||
$badgeFontSize:.75rem !default;
|
||||
|
||||
$tagPadding:.25rem .4rem !default;
|
||||
|
||||
//carousel
|
||||
$carouselIndicatorsPadding:1rem !default;
|
||||
$carouselIndicatorBg:$shade200 !default;
|
||||
$carouselIndicatorHoverBg:$shade300 !default;
|
||||
$carouselIndicatorBorderRadius:0 !default;
|
||||
$carouselIndicatorWidth:2rem !default;
|
||||
$carouselIndicatorHeight:.5rem !default;
|
||||
|
||||
//galleria
|
||||
$galleriaMaskBg:rgba(0,0,0,0.9) !default;
|
||||
$galleriaCloseIconMargin:.5rem !default;
|
||||
$galleriaCloseIconFontSize:2rem !default;
|
||||
$galleriaCloseIconBg:transparent !default;
|
||||
$galleriaCloseIconColor:$shade100 !default;
|
||||
$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$galleriaCloseIconHoverColor:$shade100 !default;
|
||||
$galleriaCloseIconWidth:4rem !default;
|
||||
$galleriaCloseIconHeight:4rem !default;
|
||||
$galleriaCloseIconBorderRadius:50% !default;
|
||||
|
||||
$galleriaItemNavigatorBg:transparent !default;
|
||||
$galleriaItemNavigatorColor:$shade100 !default;
|
||||
$galleriaItemNavigatorMargin:0 .5rem !default;
|
||||
$galleriaItemNavigatorFontSize:2rem !default;
|
||||
$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$galleriaItemNavigatorHoverColor:$shade100 !default;
|
||||
$galleriaItemNavigatorWidth:4rem !default;
|
||||
$galleriaItemNavigatorHeight:4rem !default;
|
||||
$galleriaItemNavigatorBorderRadius:$borderRadius !default;
|
||||
|
||||
$galleriaCaptionBg:rgba(0,0,0,.5) !default;
|
||||
$galleriaCaptionTextColor:$shade100 !default;
|
||||
$galleriaCaptionPadding:1rem !default;
|
||||
|
||||
$galleriaIndicatorsPadding:1rem !default;
|
||||
$galleriaIndicatorBg:$shade200 !default;
|
||||
$galleriaIndicatorHoverBg:$shade300 !default;
|
||||
$galleriaIndicatorBorderRadius:50% !default;
|
||||
$galleriaIndicatorWidth:1rem !default;
|
||||
$galleriaIndicatorHeight:1rem !default;
|
||||
$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
|
||||
$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
|
||||
$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
|
||||
|
||||
$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
|
||||
$galleriaThumbnailContainerPadding:1rem .25rem !default;
|
||||
$galleriaThumbnailNavigatorBg:transparent !default;
|
||||
$galleriaThumbnailNavigatorColor:$shade100 !default;
|
||||
$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
|
||||
$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
|
||||
$galleriaThumbnailNavigatorBorderRadius:50% !default;
|
||||
$galleriaThumbnailNavigatorWidth:2rem !default;
|
||||
$galleriaThumbnailNavigatorHeight:2rem !default;
|
||||
|
||||
//divider
|
||||
$dividerHorizontalMargin:1rem 0;
|
||||
$dividerHorizontalPadding:0 1rem;
|
||||
$dividerVerticalMargin:0 1rem;
|
||||
$dividerVerticalPadding:1rem 0;
|
||||
$dividerSize:1px;
|
||||
$dividerColor:$shade300;
|
||||
|
||||
//avatar
|
||||
$avatarBg:$shade300;
|
||||
$avatarTextColor:$textColor;
|
||||
|
||||
//chip
|
||||
$chipBg:$shade300;
|
||||
$chipTextColor:$textColor;
|
||||
$chipBorderRadius: 16px;
|
||||
|
||||
//scrollTop
|
||||
$scrollTopBg:rgba(0,0,0,0.7);
|
||||
$scrollTopHoverBg:rgba(0,0,0,0.8);
|
||||
$scrollTopWidth:3rem;
|
||||
$scrollTopHeight:3rem;
|
||||
$scrollTopBorderRadius:50%;
|
||||
$scrollTopFontSize:1.5rem;
|
||||
$scrollTopTextColor:$shade100;
|
||||
|
||||
//skeleton
|
||||
$skeletonBg:$shade200;
|
||||
$skeletonAnimationBg:rgba(255,255,255,0.4);
|
||||
|
||||
//splitter
|
||||
$splitterGutterBg:$shade100;
|
||||
$splitterGutterHandleBg:$shade300;
|
||||
|
||||
: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-dark-color:#{$primaryDarkColor};
|
||||
--primary-light-color:#{$primaryLightColor};
|
||||
--primary-lighter-color:#{$primaryLighterColor};
|
||||
--primary-color-text:#{$primaryTextColor};
|
||||
--font-family:#{$fontFamily};
|
||||
}
|
||||
</app-code>
|
||||
</div>
|
||||
|
||||
<h4>Menu Modes</h4>
|
||||
<p>Menu has 2 modes, static and overlay. Layout container element in app.component.html is used to define which mode to use by adding specific classes. List
|
||||
below indicates the style classes for each mode. </p>
|
||||
<ul>
|
||||
<li>Static: "layout-wrapper layout-static"</li>
|
||||
<li>Overlay: "layout-wrapper layout-overlay"</li>
|
||||
</ul>
|
||||
|
||||
<p>For example to create a horizontal menu, the div element should be in following form;</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
<div class="layout-wrapper layout-sidebar">
|
||||
</app-code>
|
||||
|
||||
<p>It is also possible to leave the choice to the user by keeping the preference at a component and using an ngClass expression so that user can switch between modes. Sample
|
||||
application has an example implementation of such use case. Refer to app.component.ts for an example.</p>
|
||||
|
||||
<h4>Grid CSS</h4>
|
||||
<p>Sakai uses PrimeNG Flex Grid CSS throughout the demos such as Dashboard, however any Grid library can be used with it since Sakai Layout itself does not depend on PrimeFlex CSS.</p>
|
||||
|
||||
<h4>Customizing Styles</h4>
|
||||
<p>It is suggested to add your customizations in the following sass files under the "sass/overrides" folder instead of adding them to the
|
||||
scss files under sass folder to avoid maintenance issues after an update.</p>
|
||||
|
||||
<ul>
|
||||
<li><b>_layout_variables</b>: Variables of the layout.</li>
|
||||
<li><b>_layout_styles</b>: Styles for the layout.</li>
|
||||
<li><b>_theme_variables</b>: Variables of the theme.</li>
|
||||
<li><b>_theme_styles</b>: Styles for the theme.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Migration Guide</h4>
|
||||
<p>Every change is included in <b>CHANGELOG.md</b> file at the root folder of the distribution along with the instructions to update.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
$fontSize:1rem;
|
||||
$borderRadius:12px;
|
||||
$transitionDuration:.2s;
|
||||
</app-code>
|
||||
Loading…
Reference in New Issue
Block a user