@tmaito/themes
v0.2.2
Published
基于 less 的样式主题
Downloads
10
Readme
变量列表
/* 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>