generator-min-app/generators/app/templates/src/global.less

hcy system layout and pages

// /* 字体大小 /*/
@small-font-size: 12px;
// /* 提示文字 */
@common-font-size: 14px;
// /* 正文 & 按钮文字 */
@large-font-size: 16px;
// /* 三级标题 */
@larger-font-size: 20px;
// /* 二级标题 */
@largest-font-size: 24px;
// /* 一级标题 */

/* 行高 */
@small-line-height: 20px;
// /* 提示文字 */
@common-line-height: 22px;
// /* 正文 & 按钮文字 */
@large-line-height: 24px;
// /* 三级标题 */
@larger-line-height: 28px;
// /* 二级标题 */
@largest-line-height: 32px;
// /* 标题 */

/* 间距 */
@small-space-size: 8px;
@common-space-size: 16px;
@large-space-size: 24px;
@larger-space-size: 32px;
@largest-space-size: 48px;

/* 颜色 */
@primary-color: #3177c3;
@primary-color-hover: #3d7df5;
@primary-color-active: #1559e7;
@primary-color-disabled: #b1b8c5;

/* 背景颜色 */

@background-color-dark: #f2f4fa;
@background-color-light: #ffffff;

// /*菜单背景色*/
@menu-bg-color: rgba(255, 255, 255, 0.8);
@menu-bg-open-color: #edf4fc;

/* 标题大小 */
.h1 {
  font-size: @large-font-size;
  line-height: @large-line-height;
}

.h2 {
  font-size: @larger-font-size;
  line-height: @larger-line-height;
}

.h3 {
  font-size: @largest-font-size;
  line-height: @largest-line-height;
}

// /* 文字对齐*/

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* 间距 */

.margin-t-s {
  margin-top: @small-space-size;
}

.margin-b-s {
  margin-bottom: @small-space-size;
}

.margin-l-s {
  margin-left: @small-space-size;
}

.margin-r-s {
  margin-right: @small-space-size;
}

.margin-t-m {
  margin-top: @common-space-size;
}

.margin-b-m {
  margin-bottom: @common-space-size;
}

.margin-l-m {
  margin-left: @common-space-size;
}

.margin-r-m {
  margin-right: @common-space-size;
}

.margin-t-l {
  margin-top: @large-space-size;
}

.margin-b-l {
  margin-bottom: @large-space-size;
}

.margin-l-l {
  margin-left: @large-space-size;
}

.margin-r-l {
  margin-right: @large-space-size;
}

.padding-t-s {
  padding-top: @small-space-size;
}

.padding-b-s {
  padding-bottom: @small-space-size;
}

.padding-l-s {
  padding-left: @small-space-size;
}

.padding-r-s {
  padding-right: @small-space-size;
}

.padding-t-m {
  padding-top: @common-space-size;
}

.padding-b-m {
  padding-bottom: @common-space-size;
}

.padding-l-m {
  padding-left: @common-space-size;
}

.padding-r-m {
  padding-right: @common-space-size;
}

.padding-t-l {
  padding-top: @large-space-size;
}

.padding-b-l {
  padding-bottom: @large-space-size;
}

.padding-l-l {
  padding-left: @large-space-size;
}

.padding-r-l {
  padding-right: @large-space-size;
}

.padding-r-0 {
  padding-right: 0;
}

.padding-l-0 {
  padding-left: 0;
}

.padding-t-0 {
  padding-top: 0;
}

.padding-b-0 {
  padding-bottom: 0;
}

.margin-b-0 {
  margin-bottom: 0;
}

.margin-t-0 {
  margin-top: 0;
}

.margin-l-0 {
  margin-left: 0;
}

.margin-r-0 {
  margin-right: 0;
}

/* 布局样式 */
.html,
body,
#root {
  margin: 0;
}