zmp-ui/sheet/styles/variables.less

Zalo Mini App framework

@sheet-prefix-cls: ~"@{zaui-prefix}-sheet";
@action-sheet-prefix-cls: ~"@{zaui-prefix}-action-sheet";
@btn-prefix-cls: ~"@{zaui-prefix}-btn";

@light-sheet-title: var(--zaui-light-sheet-title, @ng100);
@light-sheet-divider: var(--zaui-light-sheet-divider, @ng20);
@light-sheet-container: var(--zaui-light-sheet-container, @wht-a100);
@light-sheet-handler: var(--zaui-light-sheet-handler, @ng20);

@dark-sheet-title: var(--zaui-dark-sheet-title, @ng10);
@dark-sheet-divider: var(--zaui-dark-sheet-divider, @ng80);
@dark-sheet-container: var(--zaui-dark-sheet-container, @ng90);
@dark-sheet-handler: var(--zaui-dark-sheet-handler, @ng80);


@sheet-radius: 16px;
@sheet-content-padding: 24px;
@sheet-content-max-height: 80%;
@sheet-content-default-height: 50%;
@sheet-content-width: 100%;
@title-font-size: 20px;
@title-line-height: 26px;
@title-font-weight: 500;
@content-font-size: 15px;
@content-line-height: 20px;
@content-font-weight: 400;
@sheet-handler-width: 48px;
@sheet-handler-height: 6px;
@sheet-handler-radius: 3px;
@sheet-hander-section-height: 24px;
@sheet-header-section-height: 48px;

// Action sheet
@action-sheet-title-font-size: 14px;
@action-sheet-line-height: 18px;
@action-sheet-title-padding: 16px;
@action-sheet-title-max-line: 2;
@action-sheet-action-min-height: 56px; 
@action-sheet-divider-height: 1px;
@action-sheet-divider-height: 1px;
@action-sheet-group-divider-height: 4px;
@action-sheet-action-button-font-size: 16px;
@action-sheet-action-button-line-height: 22px;
@action-sheet-action-button-font-weight: 500;

@light-action-sheet-title: var(--zaui-light-action-sheet-title, @ng60);
@light-action-sheet-divider: var(--zaui-light-action-sheet-divider, @ng20);
@light-action-sheet-group-divider: var(--zaui-light-action-sheet-group-divider, @ng10);

@dark-action-sheet-title: var(--zaui-dark-action-sheet-title, @ng50);
@dark-action-sheet-divider: var(--zaui-dark-action-sheet-divider, @ng80);
@dark-action-sheet-group-divider: var(--zaui-dark-action-sheet-group-divider, @blk-a100);