@tmaito/themes v0.2.2

变量列表

/* Font */
@font-size-sm: 12px * @hd;
@font-size-base: 14px * @hd;
@font-size-l: 16px * @hd;
@font-size-lg: 18px * @hd;
@font-size-xl: 24px * @hd;
@font-size-xxl: 32px * @hd;
@font-size-xxxl: 48px * @hd;
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Tahoma, Arial, PingFangSC-Regular, "Hiragino Sans GB",
  "Microsoft Yahei", "Noto Sans", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

// Color
@info-color: #00aafb;
@error-color: #ff2233;
@primary-color: #006cd2;
@success-color: #14c437;
@warning-color: #ff8607;

// Text Color
@text-color-0: #000;
@text-color-3: #333;
@text-color-6: #666;
@text-color-9: #999;
@text-color-c: #ccc;
@text-color-f: #fff;

// Link Color
@link-color: #006cd2;
@link-hover-color: #0060bc;
@link-active-color: #0060bc;

// Icon Color
@icon-color: #ccc;
@icon-active-color: @link-active-color;

// Border Color
@border-color: #f0f0f0;
@border-color-extra: #e5f7ff;

// Background Color
@bg-base: #f8f9fd;
@bg-white: #fff;
@bg-1: #fafafa;
@bg-extra: #e5effc;
@bg-primary: @primary-color;

// vertical paddings
@padding-x: 8px; // small items
@padding-l: 16px; // small containers and buttons
@padding-lg: 24px; // containers

// vertical margins
@margin-x: 8px; // small items
@margin-l: 16px; // small containers and buttons
@margin-lg: 24px; // containers

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

mixins 列表

/*
 * 溢出(...)省略展示
 * @rowCount 须展示行数
 */
.ellipsis(@rowCount);

/*
 * 横线
 * @dir 方向
 * @style 样式
 * @width 宽度
 * @color 颜色
 */
.border(@dir: bottom, @style: solid, @width: 1px, @color: @color-border)

common 公用样式

可直接使用

<!-- 居中 -->
<div className="align-center">XXXX</div>
<!-- 居右 -->
<div className="align-right">XXXX</div>
<!-- 数字 -->
<div className="num">XXXX</div>
<!-- 链接 -->
<div className="link">XXXX</div>
<!-- 单行溢出... -->
<div className="ellipsis">XXXX</div>
<!-- 禁止操作 -->
<div className="not-allowed">XXXX</div>