mdui/src/styles/variable/global.less

a CSS Framework based on material design

@font-family-base: Roboto, Noto, Helvetica, Arial, sans-serif;
@font-family-code: Consolas, "Liberation Mono", Menlo, Courier, monospace;
@body-background-color: #fff;
@body-text-color: rgba(0, 0, 0, 0.87);

// 字体大小
@screen-xs-font-size: 14px;
@screen-sm-font-size: 14.5px;
@screen-md-font-size: 15px;

// z-index
@z-index-appbar: 1000;
@z-index-overlay: 2000;
@z-index-drawer: 5000;
@z-index-dialog: 6000;
@z-index-snackbar: 7000;
@z-index-tooltip: 9000;
@z-index-fab: 4000;

// 深色颜色的不透明度
@opacity-black-text: 0.87;
@opacity-black-secondary: 0.54;
@opacity-black-disabled: 0.38;
@opacity-black-divider: 0.12;
@opacity-black-icon: 0.54;
@opacity-black-icon-disabled: 0.26;

// 浅色颜色的不透明度
@opacity-white-text: 1;
@opacity-white-secondary: 0.7;
@opacity-white-disabled: 0.5;
@opacity-white-divider: 0.12;
@opacity-white-icon: 1;
@opacity-white-icon-disabled: 0.3;

// 基础边距
@spacing-base: 8px;

// 按钮高度
@button-height: 36px;

// 应用栏高度
@appbar-height-xs-landscape: 48px;  // 横屏
@appbar-height-xs-portrait: 56px;   // 竖屏
@appbar-height-sm: 64px;

// 应用栏图标大小
@appbar-icon-width: 48px;
@appbar-icon-width-xs-landscape: 40px;

// 抽屉栏宽度
@drawer-width-xs: 280px;
@drawer-width-sm: 320px;
@drawer-width-md: 240px;

// 响应式断点
@screen-xs-max: 599.9px;
@screen-xs-max-landscape: 959.9px;

@screen-sm-min: 600px;
@screen-sm-max: 1023.9px;

@screen-md-min: 1024px;
@screen-md-max: 1439.9px;

@screen-lg-min: 1440px;
@screen-lg-max: 1919.9px;

@screen-xl-min: 1920px;

// 网格列表间距
@grid-list-gutter: 4px;

// 带透明度的白色
@color-white-text: rgba(255, 255, 255, @opacity-white-text);
@color-white-secondary: rgba(255, 255, 255, @opacity-white-secondary);
@color-white-disabled: rgba(255, 255, 255, @opacity-white-disabled);
@color-white-divider: rgba(255, 255, 255, @opacity-white-divider);
@color-white-icon: rgba(255, 255, 255, @opacity-white-icon);
@color-white-icon-disabled: rgba(255, 255, 255, @opacity-white-icon-disabled);

// 带透明度的黑色
@color-black-text: rgba(0, 0, 0, @opacity-black-text);
@color-black-secondary: rgba(0, 0, 0, @opacity-black-secondary);
@color-black-disabled: rgba(0, 0, 0, @opacity-black-disabled);
@color-black-divider: rgba(0, 0, 0, @opacity-black-divider);
@color-black-icon: rgba(0, 0, 0, @opacity-black-icon);
@color-black-icon-disabled: rgba(0, 0, 0, @opacity-black-icon-disabled);

// 黑色布局主题颜色
@layout-dark-color-1: #000;
@layout-dark-color-2: #212121;
@layout-dark-color-3: #303030;
@layout-dark-color-4: #424242;

// hover 状态背景色
@color-hover-black: rgba(0, 0, 0, 0.08);
@color-hover-white: rgba(255, 255, 255, 0.08);