@charset "utf-8";
/**
* Yo框架全局Variables
-----------------------
* Yo基础变量map,如果不想定义某属性,将其value设置为null
*
* @class variables
* @module Yo
*/
$setting: (
// 版本号
version: "1.0.0",
// 是否开启厂商前缀
is-vendor-prefix: true,
// 厂商前缀
vendor-prefix: -webkit-,
// 背景图片服务器
bgimg-domain: "../../../bgimg/"
) !default;
// Layout Stacked
$stacked: (
// {Length} 区块外边距
margin: .2rem .1rem
) !default;
// Layout flex
$flex: (
// {String} 定义弹性布局是flex还是inline-flex
box: flex,
// {String} 定义是水平布局还是垂直布局
direction: column
) !default;
// responsive media types
$media-types: (
// {String} 横屏
landscape: "screen and (orientation: landscape)",
// {String} 竖屏
portrait: "screen and (orientation: portrait)",
// {String} 视网膜屏
retina: "screen and (-webkit-min-device-pixel-ratio: 2)",
// {String} PC
pc: "screen and (min-width: 800px)",
// {String} mobile
mobile: "screen and (max-width: 799px)"
) !default;
// base
$base: (
// 响应式的类型:none | scaling
responsive-type: none,
// html root使用100px,方便rem单位的换算
font-size-root: 100px,
// 适配:用于做元素随屏幕大小而变化的情况
font-size-root-scaling: 31.25vw,
// body的默认字体
// chrome37.0.2062.120/opera24在body上使用rem时有个bug(其他版本未测):
// 只要引用了外部样式,不论里面的内容是什么,body上的rem就会失效
// 这时在开发者工具里,关闭又开启一次该条属性,则生效,刷新又挂
// 所以这里注释该条属性,默认字号不能从root相对而来,所以定义成px
font-size: 14px,
// font-family
// escape('微软雅黑').replace(/\%u/g,'\\').toLowerCase()
// 可参考http://alloyteam.github.io/Spirit/modules/Standard/index.html
font-family: #{"Helvetica Neue", Helvetica, STHeiTi, sans-serif},
// lin-height
line-height: 1.5,
// 默认文档背景色
doc-bgcolor: #fafafa,
// 默认边框色
bordercolor: #ddd,
// 默认背景颜色
bgcolor: #fafafa,
// 默认文本颜色
color: #212121,
// 默认次级文本颜色
sub-color: #9e9e9e,
// 默认边框色
disabled-bordercolor: #bbb,
// 默认文档颜色
disabled-bgcolor: #ccc,
// 默认禁用文本颜色
disabled-color: #f9f9f9,
// 高亮色
light-color: #FE0053,
// 价格颜色
price-color: #f60,
// Link Colors
// 默认链接色
link-color: #00afc7,
// 链接经过色
link-hover-color: #f60
) !default;
// ico font
$ico: (
// {Boole} 是否使用图标字体
is-use: true,
// {String} 图标字体文件名
font-name: yofont,
// {String} 使用哪几种图标
font-types: eot,
// {Url} 图标字体路径
font-path: "../../../font/"
) !default;
// Element loading(4)
$loading: (
// {Length} 菊花大小
size: .5rem,
// {Color} 菊花颜色
color: #333,
// {Color} mask颜色
mask-bgcolor:rgba(0, 0, 0, .1),
// {Color} 背景颜色
bgcolor: null
) !default;
// Element Input(8)
$input: (
// {Length} 输入框宽度
width: 100%,
// {Length} 输入框高度
height: .44rem,
// {Length} 输入框内补白
padding: .1rem,
// {Length} 输入框圆角
radius: .02rem,
// {Color} 输入框边框色
bordercolor: map-get($base, bordercolor),
// {Color} 输入框背景色
bgcolor: transparent,
// {Color} 文本色
color: map-get($base, color),
// {Color} 占位符颜色
placeholder-color: #bbb
) !default;
// Element Button(16)
$btn: (
// {Color} Length
border-width: .01rem,
// {Color} 边框色
bordercolor: #e26704,
// {Color} 背景色
bgcolor: #ff801a,
// {Color} 文本色
color: #fff,
// {Color} 激活时边框色
active-bordercolor: null,
// {Color} 激活时背景色
active-bgcolor: null,
// {Color} 激活时文本色
active-color: null,
// {Length} 内补白(使用em让根据字号动态调整)
padding: 0 1.2em,
// {Length} 圆角半径
radius: .02rem,
// {Length} 字号
font-size: null,
// {Length} 默认预设3种尺寸按钮:
// small
s-height: .28rem,
s-font-size: .12rem,
// medium
m-height: .36rem,
m-font-size: .14rem,
// large
l-height: .44rem,
l-font-size: .16rem
) !default;
// Element UI badge(7)
$badge: (
// {Length} 内补白
padding: 0 .03rem,
// {Color} 边框厚度
border-width: .01rem,
// {Color} 边框色
bordercolor: #f00,
// {Color} 背景色
bgcolor: #f00,
// {Color} 文本色
color: #fff,
// {Number} 圆角
radius: .1rem,
// {Length} 字号
font-size: .12rem
) !default;
// Element checked(11)
$checked: (
// {String} 选中标记的内容,可以是自定义的webfont
content: "\f078",
// {Length} 元件大小
size: .2rem,
// {Length} 标签大小
font-size: .12rem,
// {Length} 边框厚度
border-width: null,
// {Color} 未选中时的边框色
bordercolor: null,
// {Color} 未选中时的背景色
bgcolor: null,
// {Color} 未选中时的标记颜色
color: transparent,
// {Color} 激活边框色
on-bordercolor: null,
// {Color} 激活背景色
on-bgcolor: null,
// {Color} 激活标记颜色
on-color: #2b94ff,
// {Length} 圆角
radius: .05rem
) !default;
// Element radio(8)
$radio: (
// {String} 选中标记类型: [circle | tick]
type: circle,
// {Length} radio尺寸
size: .2rem,
// {Color} radio边框色
bordercolor: map-get($base, bordercolor),
// {Color} radio背景色
bgcolor: #fff,
// {Color} radio选中背景色
on-bgcolor: #2b94ff,
// {Color} radio选中边框色
on-bordercolor: #2b94ff,
// {Color} radio选中标记色
on-color: #fff,
// {Length} 圆角
radius: 50%
) !default;
// Element checkbox(8)
$checkbox: (
// {String} 选中标记类型: [circle | tick]
type: tick,
// {Length} checkbox尺寸
size: .2rem,
// {Color} checkbox边框色
bordercolor: map-get($base, bordercolor),
// {Color} checkbox背景色
bgcolor: #fff,
// {Color} checkbox选中背景色
on-bgcolor: #2b94ff,
// {Color} checkbox选中边框色
on-bordercolor: #2b94ff,
// {Color} checkbox选中标记色
on-color: #fff,
// {Length} checkbox圆角
radius: .05rem
) !default;
// Element range(3)
$range: (
// {Color} 已选择区域的滑轴背景色
inner-bgcolor: #444,
// {Color} 未选择区域的滑轴背景色
outer-bgcolor: #ccc,
// {Color} 滑块色
ball-color: #fff
) !default;
// Element loadtip(3)
$loadtip: (
// {Color} 文本色
color: #666,
// {Length} 字号
font-size: .14rem,
// {Color} ico色
ico-color: map-get($base, link-color)
) !default;
// Widget UI score(3)
$score: (
// {Length} 单项宽度
item-width: .16rem,
// {Length} 单项高度
item-height: .12rem,
// {String} 图片URL
url: "star.png"
) !default;
// Fragment btnbar(1)
$btnbar: (
// {auto | Length} 工具栏圆角
// 当值为auto时,btnbar的圆角半径取决于按钮的圆角定义
radius: auto
) !default;
// Fragment list(14)
$list: (
// {Length} 列表外边距
margin: null,
// {Length} 列表圆角
radius: null,
// {Length} 列表边框厚度
border-width: null,
// {Color} 列表边框色
bordercolor: map-get($base, bordercolor),
// {Length} 列表项内补白,列表项有最小高度.44rem
item-padding: .11rem,
// {Length} 列表组头内补白
label-padding: .03rem .1rem,
// {Color} 列表组头背景色
label-bgcolor: map-get($base, bgcolor),
// {Color} 点击反馈背景色
active-bgcolor: #f8f8f8,
// {Color} 选中背景色
on-bgcolor: null,
// {Color} 选中文本色
on-color: null,
// {Color} 列表项边框色
item-bordercolor: #eee,
// {Color} 列表项组名边框色
label-bordercolor: #eee,
// {Length} 列表项字号
item-font-size: .14rem,
// {Length} 列表组头字号
label-font-size: .13rem
) !default;
// Widget tab(14)
$tab: (
// {Length} 组件高度
height: .49rem,
// {Length} 圆角半径
radius: null,
// {Length} 边框厚度
border-width: .01rem 0 0 0,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {Color} tab背景色
bgcolor: #fafafa,
// {Color} tab文本色
color: map-get($base, color),
// {Color} tab激活背景色
on-bgcolor: #fff,
// {Color} tab激活文本色
on-color: #000,
// {Length} 文本大小
font-size: null,
// {Length} 水平ico大小
x-ico-size: .24rem,
// {Length} 垂直ico大小
y-ico-size: .2rem,
// {Length} only ico大小
only-ico-size: .32rem,
// {Color} item间隔线高度
item-border-height: 100%,
// {Color} item间隔线颜色
item-bordercolor: transparent
) !default;
// Fragment Table(10)
$table: (
// {Length} 表头部内补白
width: 100%,
// {Boole} 是否需要纵向边框
has-vertical-border: false,
// {Length} 表头部内补白
thead-padding: .05rem .1rem,
// {Length} 表主体内补白
tbody-padding: .1rem,
// {Color} table边框色,表格必须有边框,所以不能有null值
bordercolor: map-get($base, bordercolor),
// {Color} 表头部背景色
thead-bgcolor: #eee,
// {Color} 表主体奇数行背景色
odd-bgcolor: null,
// {Color} 表主体偶数行背景色
even-bgcolor: null,
// {Color} 表主体激活行背景色
active-bgcolor: null,
// {Color} 表主体选中行背景色
on-bgcolor: null
) !default;
// Fragment header(9)
$header: (
// {Length} 高度
height: .44rem,
// {Length} 两侧的子项宽度
item-width: .6rem,
// {Length} 两侧的子项离边界的间隙
item-space: .15rem,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {Color} 背景色
bgcolor: #fff,
// {Color} 文本色
color: map-get($base, color),
// {Length} 文本大小
font-size: .16rem,
// {Color} 文本色
item-color: map-get($base, color),
// {Length} 两侧的子项文本大小
item-font-size: .14rem,
// {Length} 两侧的子项ico大小
item-ico-size: .2rem
) !default;
// Widget switch(5)
$switch: (
// {Color} 激活边框色
checked-bordercolor: #4bd763,
// {Color} 激活背景色
checked-bgcolor: #4bd763,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {Color} 背景色
bgcolor: map-get($base, bgcolor),
// {Color} 滑块色
ball-color: #fff
) !default;
// Widget index(3)
$index: (
// {Length} 索引宽度
width: .3rem,
// {Color} 文本色
color: #555,
// {Length} 索引字号
font-size: .12rem
) !default;
// Widget group(1)
$group: (
// {Length} group顶部偏移值
top: .95rem
) !default;
// Widget search(15)
$search: (
// {Length} 输入框高度
height: .3rem,
// {Length} 搜索区文字大小
font-size: .14rem,
// {Length} 搜索区内补白
op-padding: .1rem,
// {Length} 输入框圆角
radius: .05rem,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {Color} 输入框背景色
bgcolor: map-get($base, bordercolor),
// {Color} 输入框文本色
color: map-get($base, color),
// {Color} 激活边框色
on-bordercolor: null,
// {Color} 激活背景色
on-bgcolor: null,
// {Color} placeholder文本色
placeholder-color:#fff,
// {Color} 操作区图标颜色
ico-color: #999,
// {Color} 取消按钮颜色
cancel-color: map-get($base, link-color),
// {Color} 搜索区背景色
op-bgcolor: #fff,
// {Color} mask背景色
mask-bgcolor: #fff,
// {Length} 取消按钮区域宽度
cancel-width: .7rem
) !default;
// Widget UI Dialog(11)
$dialog: (
// {Length | null} 宽度
width: null,
// {Length} 高度
height: 3rem,
// {Length} 圆角
radius: .05rem,
// {Number} 阴影透明度(如果不想使用阴影,值为0)
shadow-opacity: .5,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {Length} 头部高度
hd-height: .44rem,
// {Color} 头部背景色
hd-bgcolor: white,
// {Color} 标题颜色
title-color: map-get($base, color),
// {Length} 标题文字大小
title-font-size: .16rem,
// {Length} 主体区域间隙
bd-padding: .16rem .1rem .15rem,
// {Length} 主体区域文字大小
bd-font-size: .16rem
) !default;
// Widget UI Popup(11)
$popup: (
// {Length | null} 宽度
width: null,
// {Length} 高度
height: 3rem,
// {Length} 圆角
radius: .03rem,
// {Number} 阴影透明度(如果不想使用阴影,值为0)
shadow-opacity: .5,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {Length} 头部高度
hd-height: .5rem,
// {Color} 头部背景色
hd-bgcolor: #eee,
// {Color} 标题颜色
title-color: map-get($base, color),
// {Length} 标题文字大小
title-font-size: .16rem,
// {Length} 主体区域间隙
bd-padding: .1rem,
// {Length} 箭头大小
arrow-size: .12rem
) !default;
// Widget UI Tip(4)
$tip: (
// {Length} 内补白
padding: .06rem .15rem,
// {Length} 圆角
radius: .05rem,
// {Color} 背景色
bgcolor: #000,
// {Color} 文本色
color: #fff
) !default;
// Widget UI select(3)
$select: (
// {Length} 默认显示几个列表项
item: 5,
// {Length} 每个列表项的高度
item-height: .3rem,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
) !default;
// Widget UI number(7)
$number: (
// {Length} 宽度
width: 1.2rem,
// {Length} 高度
height: .36rem,
// {Color} 边框色
bordercolor: map-get($base, bordercolor),
// {color} 输入框文本色
color: map-get($base, color),
// {Color} 加减号背景色
sign-bgcolor: map-get($base, bgcolor),
// {Color} 加减号文本色
sign-color: #999,
// {Color} 禁用加减号文本色
disabled-sign-color: map-get($base, disabled-color)
) !default;
// Widget UI switchable(9)
$switchable: (
// {Boolen} 是否有按钮
has-btn: false,
// {Length} 按钮大小
btn-size: .44rem,
// {Color} 按钮背景色
btn-bgcolor: rgba(#09a5c4, .8),
// {Color} 按钮文本色
btn-color: #fff,
// {Color} 按钮按下时背景色
btn-active-bgcolor: rgba(#09a5c4, .5),
// {Color} 按钮按下时文本色
btn-active-color: null,
// {Length} 索引大小
index-size: .1rem,
// {Color} 索引背景色
index-bgcolor: #85c8d1,
// {Color} 索引的当前项背景色
index-on-bgcolor: #09a5c4
) !default;
// Widget UI mask(1)
$mask: (
// {Color} 背景色
bgcolor: #fff
) !default;
// Widget UI slidermenu(1)
$slidermenu: (
// {Length} action 宽度
action-width: 1rem,
// {Color} action 背景色
action-bgcolor: #eee
) !default;
// Widget UI rating(3)
$rating: (
// {Length} 单项宽度
item-width: .24rem,
// {Length} 单项高度
item-height: .18rem,
// {String} 图片URL
url: "star.png"
) !default;
// Widget UI dblist(1)
$dblist: (
// {Length} 导航panel宽度
aside-width: null,
// {Length} 导航panel顺序,从0开始
aside-order: null
) !default;
// z-index
$z-index: (
// {Number} 下拉菜单层级范围50-100
dropdown: 50,
// {Number} 遮罩层级
mask: 1000,
// {Number} 弹窗层级范围1001-2000
dialog: 1001,
// {Number} 浮层层级范围2001-2500
popup: 2001,
// {Number} 浮层层级范围2501-3000
search: 2501,
// {Number} 浮层层级范围3001-4000
tip: 3001,
// {Number} loading层级
loading: 9999
) !default;