Global Parameters

Public

NameDefaultDescription
@layout-gutter8pxAntd layout spacing (unchageable)
@font-size-base14pxAntd font size (unchageable)
@primary-colorBlueantd primary color
@mobile-min768pxPC of width
@mobile-max767pxMobile of width
@text-xs@font-size-base - 2Text of xs size
@text-sm@font-size-base + 0Text of sm size
@text-md@font-size-base + 2Text of md size
@text-lg@font-size-base + 4Text of lg size
@text-xl@font-size-base + 8Text of xl size
@text-xxl@font-size-base + 12Text of xxl size
@icon-sm@font-size-base * 2Icon of sm size
@icon-md@font-size-base * 4Icon of md size
@icon-lg@font-size-base * 6Icon of lg size
@icon-xl@font-size-base * 8Icon of xl size
@icon-xxl@font-size-base * 10Icon of xxl size
@h1-font-size32pxh1 font size
@h2-font-size24pxh2 font size
@h3-font-size20pxh3 font size
@h4-font-size16pxh4 font size
@h5-font-size14pxh5 font size
@h6-font-size12pxh6 font size
@enable-all-colorsfalseTurn on background, text color
eg: .bg-teal.text-teal
@modal-sm300pxSmall modal
@modal-md500pxMedium modal
@modal-lg900pxLarge modal
@modal-lg1200pxExtra large modal
@drawer-sm300pxSmall drawer
@drawer-md500pxMedium drawer
@drawer-lg900pxLarge drawer
@drawer-lg1200pxExtra large drawer
@code-border-color#eee<code> border color
@code-bg#f7f7f7<code> background color
@widthsxs @layout-gutter * 10
sm @layout-gutter * 20
md @layout-gutter * 30
lg @layout-gutter * 40
xl @layout-gutter * 50
xxl @layout-gutter * 50
width
@border-radius-md4pxMedium border rounded corner
@border-radius-lg6pxLarge border rounded corner
@masonry-column-gap@layout-gutter * 2CSS waterfall flow column and column spacing
@scrollbar-enabledtrueEnable landscaping scrollbars
@scrollbar-width6pxScroll bar width
@scrollbar-height6pxScroll bar height
@scrollbar-track-colorrgba(0, 0, 0, 0.3)Scrollbar track color
@scrollbar-thumb-color#6e6e6eScrollbar thumb color
@scrollbar-table-enabledfalseEnable landscaping scrollbars of nz-table
@rtl-enabledfalseWheter support RTL
@enabled-util-aligntrueWhether to enable tools align
@enabled-util-bordertrueWhether to enable tools border
@enabled-util-codetrueWhether to enable tools code
@enabled-util-colortrueWhether to enable tools color
@enabled-util-displaytrueWhether to enable tools display
@enabled-util-floattrueWhether to enable tools float
@enabled-util-icontrueWhether to enable tools icon
@enabled-util-imgtrueWhether to enable tools img
@enabled-util-positiontrueWhether to enable tools position
@enabled-util-overflowtrueWhether to enable tools overflow
@enabled-util-responsivetrueWhether to enable tools responsive
@enabled-util-spacingtrueWhether to enable tools spacing
@enabled-util-texttrueWhether to enable tools text
@enabled-util-widthtrueWhether to enable tools width
@enabled-util-scrollbartrueWhether to enable tools scrollbar
@enabled-util-othertrueWhether to enable tools other

Ng patch

General

NameDefaultDescription
@preserve-white-spaces-enabledtrueFixed between buttons spacing when enabled preserveWhitespaces is true
@preserve-sf-and-st-spaces16pxSpacing between sf and st
@preserve-buttons-spacesSpacing between button and button(incluldes: button,button-group,popconfirm)
@router-animation-enabledfalseWhether to enable animation when route changing
@router-animation-durationantFadeInRoute switching animation name
@router-animation-duration1sAnimation duration

Zorro patch

General

NameDefaultDescription
@forced-turn-off-nz-modal-animation-enabledfalseForced to turn off nz-modal animation

Form

NameDefaultDescription
@form-state-visual-feedback-enabledfalseTurn on visual feedback of form invalid elements
@search-form-bg#fbfbfbBackground color of simple search form
@search-form-radius4pxBorder rounded corner of simple search form

Table

By nz-table

NameDefaultDescription
@nz-table-img-radius4pxImage rounded in the table
@nz-table-img-margin-right4pxImage margin-right in the table
@nz-table-img-max-width32pxImage maximum width in the table
@nz-table-img-max-height32pxImage maximum height in the table
@nz-table-even-backgroundnoneEven background color in the table
@nz-table-rep-max-width@mobile-maxTriggering table response when mobile screen
@nz-table-rep-header-background@border-color-splitTable responsive: title background color
@nz-table-rep-even-background#f9f9f9Table responsive: even background color
@nz-table-rep-padding-vertical8pxTable responsive: Cell vertical spacing
@nz-table-rep-padding-horizontal8pxTable responsive: Cell horizontal spacing
@nz-table-rep-column-name-width100pxTable responsive: Column name maximum width
@nz-table-rep-column-name-text-alignrightTable responsive: Column name text alignment
@nz-table-rep-column-name-padding-rightrightTable responsive: Column name right spacing
@nz-table-rep-column-name-colorrgba(0, 0, 0, 0.5)Table responsive: Column name color

Widgets

NameDefaultDescription
@hafl-enabledtrueWhether hafl image
@abs-enabledtrueWhether abs element
@masonry-enabledtrueWhether css masonry
@setting-drawer-enabledtrueWhether setting drawer css
@search__form-enabledtruePro style search form, DEMO