YO 库版本:0.1.2 moduleVersion
一个基于 Sass 开发的 CSS Framework,Mobile First 的设计理念使得 Yo 的体积超轻量,同时又能延伸到支持PC端。
一个基于 Sass 开发的 CSS Framework,Mobile First 的设计理念使得 Yo 的体积超轻量,同时又能延伸到支持PC端。
@charset "utf-8"; /** * Yo框架全局Variables * Yo基础变量map,如果不想定义某属性,将其value设置为null; * Yo仅使用2种长度单位:px用于边框,rem用于除边框之外的所有地方 */ $setting: ( // 版本号 version: "1.8.5dev", // 是否开启厂商前缀 is-vendor-prefix: true, // 厂商前缀 vendor-prefix: -webkit-, // 是否开启iOS 1px方案 is-ios-1pixel: false, // 背景图片服务器 bgimg-domain: "http://source.qunarzz.com/yo/bgimg/" ) !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() font-family: #{"Helvetica Neue", Helvetica, STHeiTi, sans-serif}, // lin-height line-height: 1.5, // 默认文档背景色 doc-bgcolor: #fafafa, // 默认边框色 bordercolor: #ccc, // 默认次级边框色 sub-bordercolor: #ddd, // 默认背景颜色 bgcolor: #fafafa, // 默认文本颜色 color: #212121, // 默认次级文本颜色 sub-color: #666, // 默认边框色 disabled-bordercolor: #ccc, // 默认文档颜色 disabled-bgcolor: #e0e0e0, // 默认禁用文本颜色 disabled-color: #bbb, // 高亮色 light-color: #FE0053, // 价格颜色 price-color: #f60, // Link Colors // 默认链接色 link-color: #00afc7, // 链接经过色 link-hover-color: #f60 ) !default; // responsive media types $media-types: ( // {String} 横屏 landscape: "screen and (orientation: landscape)", // {String} 竖屏 portrait: "screen and (orientation: portrait)", // {String} 视网膜屏2x retina2x: "(min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)", // {String} 视网膜屏3x retina3x: "(min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx)", // {String} PC pc: "(min-width: 8rem)", // {String} mobile mobile: "(max-width: 7.99rem)" ) !default; // ico font $ico: ( // {Boole} 是否使用图标字体 is-use: true, // {String} 图标字体文件名 font-name: yofont, // {Url} 图标字体路径 font-path: "http://source.qunarzz.com/fonts/yo/1.0.0/" ) !default; // Layout Stacked $stacked: ( // {Length} 区块外边距 margin: .2rem .1rem ) !default; // Layout flex $flex: ( // {String} 定义弹性布局: flex |inline-flex box: flex, // {String} 定义是水平布局还是垂直布局: row | column direction: column ) !default; // Layout align $align: ( // {String} 定义弹性水平对齐方式 text-align: center, // {String} 定义弹性垂直对齐方式 vertical-align: center ) !default; // Element loading(7) $loading: ( // {Length} 菊花大小 ico-size: .5rem, // {Color} 菊花颜色 ico-color: #212121, // {Color} mask颜色 mask-bgcolor: rgba(0, 0, 0, .1), // {Color} 背景颜色 bgcolor: null, // {Length} 字号 font-size: .14rem, // {Color} 文本颜色 color: map-get($base, color), // {String} loading的ico编码,自定义的webfont content: "\f089" ) !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(18) $btn: ( // {Color} Length border-width: 1px, // {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} 宽度 width: null, // {Length} 高度 height: 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: 1px, // {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 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 .1rem .12rem, // {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: map-get($base, sub-bordercolor), // {Color} 列表项组名边框色 label-bordercolor: #eee, // {Length} 列表项字号 item-font-size: .14rem, // {Length} 列表组头字号 label-font-size: .13rem, // {Length} 列表项下边线距离左侧的间隙 item-border-space: .1rem ) !default; // Widget tab(15) $tab: ( // {Length} 组件宽度 width: null, // {Length} 组件高度 height: .44rem, // {Length} 圆角半径 radius: null, // {Length} 边框厚度 border-width: 1px 0 0 0, // {Color} 边框色 bordercolor: map-get($base, bordercolor), // {Color} tab背景色 bgcolor: #fafafa, // {Color} tab文本色 color: map-get($base, sub-color), // {Color} tab激活背景色 on-bgcolor: null, // {Color} tab激活文本色 on-color: #00bec8, // {Length} 文本大小 font-size: .14rem, // {Length} 水平ico大小 x-ico-size: .12rem, // {Length} 垂直ico大小 y-ico-size: .2rem, // {Length} only ico大小 only-ico-size: .28rem, // {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(11) $header: ( // {Length} 高度 height: .44rem, // {Length} 两侧的子项宽度 item-width: .6rem, // {Length} 两侧的子项离边界的间隙 item-space: .15rem, // {Color} 边框色 bordercolor: #1ba9ba, // {Color} 背景色 bgcolor: #1ba9ba, // {Color} 文本色 color: #fff, // {Length} 文本大小 font-size: .18rem, // {Color} 文本色 item-color: null, // {Length} 两侧的子项ico颜色 item-ico-color: #7ff, // {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: 0 ) !default; // Widget suggest(15) $suggest: ( // {Length} 输入框高度 height: .29rem, // {Length} 搜索区文字大小 font-size: .14rem, // {Length} 搜索区内补白 op-padding: .07rem .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: rgba(#fff, .9), // {Length} 取消按钮区域宽度 cancel-width: .7rem ) !default; // Widget UI Dialog(11) $dialog: ( // {Length | null} 宽度 width: null, // {Length} 高度 height: null, // {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: .1rem, // {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: rgba(#000, .2) ) !default; // Widget UI slidermenu(1) $slidermenu: ( // {Length} action 宽度 action-width: 1rem, // {Color} action 背景色 action-bgcolor: #ccc ) !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; // Widget UI datepicker(25) $datepicker: ( // {Length} 星期bar高度 week-bar-height: .22rem, // {Color} 星期bar背景色 week-bar-bgcolor: #1ba9ba, // {Color} 星期bar文本色 week-bar-color: #fff, // {Length} 星期bar字号 week-bar-font-size: .12rem, // {Length} 月份bar高度 month-bar-height: .25rem, // {Color} 月份bar边线色 month-bar-bordercolor: #ddd, // {Color} 月份bar背景色 month-bar-bgcolor: #f9f9f9, // {Color} 月份bar文本色 month-bar-color: #000, // {Length} 月份bar字号 month-bar-font-size: .14rem, // {Length} 每行高度 week-height: .54rem, // {Color} 每行边线色 week-bordercolor: #ddd, // {Color} 每行文本色 week-color: #000, // {Length} 每日高度 day-height: .24rem, // {Length} 每日间距 day-margin: .05rem 0 .02rem, // {Length} 每日圆角 day-radius: 50%, // {Length} 每日字号 day-font-size: .14rem, // {color} 特殊日文本色 special-color: #f50, // {color} 周末文本色 weekend-color: #f00, // {color} 禁用日子文本色 disabled-color: map-get($base, disabled-color), // {color} 选中日期背景色 on-bgcolor: #1ba9ba, // {color} 选中日期文本色 on-color: #fff, // {color} 选中日期提示语文本色 on-tip-color: #1ba9ba, // {Length} 选中日期提示语字号 on-tip-font-size: .14rem, // {String} 开始日期提示语 start-content: "入店", // {String} 结束日期提示语 end-content: "离店" ) !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 suggest: 2501, // {Number} 浮层层级范围3001-4000 tip: 3001, // {Number} loading层级 loading: 9999 ) !default;