├── .project ├── README.md ├── environment.yaml ├── fekit.config ├── images ├── ajax-loader.gif ├── arrow.png ├── iconfonts │ ├── footer.ttf │ ├── footer.woff │ ├── iconfont.ttf │ ├── iconfont.woff │ ├── navmore.ttf │ └── navmore.woff ├── img1.jpg ├── img10.jpg ├── img11.jpg ├── img12.jpg ├── img13.jpg ├── img14.jpg ├── img15.jpg ├── img16.jpg ├── img17.jpg ├── img18.jpg ├── img19.jpg ├── img2.jpg ├── img3.jpg ├── img4.jpg ├── img5.jpg ├── img6.jpg ├── img7.jpg ├── img8.jpg ├── img9.jpg ├── swiper1.jpg ├── swiper2.jpg ├── swiper3.jpg ├── swiper4.jpg ├── swiper5.jpg └── swiper6.jpg ├── index.html ├── mock ├── home.json └── mock.js └── src ├── scripts ├── app.js ├── lib │ ├── spa.min.js │ ├── swiper-3.3.1.min.js │ └── swiper.animate1.0.2.min.js ├── tpl │ ├── home.string │ ├── index.string │ ├── message.string │ ├── my.string │ └── nav.string └── views │ ├── home.js │ ├── index.js │ ├── message.js │ ├── my.js │ └── nav.js └── styles ├── lib ├── ani │ ├── README.md │ ├── classes.scss │ ├── elastic-in-down.scss │ ├── elastic-in-left.scss │ ├── elastic-in-right.scss │ ├── elastic-in-up.scss │ ├── elastic-in.scss │ ├── elastic-out-down.scss │ ├── elastic-out-left.scss │ ├── elastic-out-right.scss │ ├── elastic-out-up.scss │ ├── elastic-out.scss │ ├── elastic-x.scss │ ├── elastic-y.scss │ ├── extrusion.scss │ ├── fade-in-down.scss │ ├── fade-in-left.scss │ ├── fade-in-right.scss │ ├── fade-in-up.scss │ ├── fade-in.scss │ ├── fade-out-down.scss │ ├── fade-out-left.scss │ ├── fade-out-right.scss │ ├── fade-out-up.scss │ ├── fade-out.scss │ ├── flash.scss │ ├── flip-in-x.scss │ ├── flip-in-y.scss │ ├── flip-out-x.scss │ ├── flip-out-y.scss │ ├── flip.scss │ ├── hinge.scss │ ├── pulse.scss │ ├── roll-in-left.scss │ ├── roll-in-right.scss │ ├── roll-out-left.scss │ ├── roll-out-right.scss │ ├── rotate-in-down-left.scss │ ├── rotate-in-down-right.scss │ ├── rotate-in-up-left.scss │ ├── rotate-in-up-right.scss │ ├── rotate-in.scss │ ├── rotate-out-down-left.scss │ ├── rotate-out-down-right.scss │ ├── rotate-out-up-left.scss │ ├── rotate-out-up-right.scss │ ├── rotate-out.scss │ ├── rotate.scss │ ├── shake.scss │ ├── sling.scss │ ├── speed-in-left.scss │ ├── speed-in-right.scss │ ├── speed-out-left.scss │ ├── speed-out-right.scss │ ├── stretch.scss │ ├── swing.scss │ ├── wobble.scss │ ├── zoom-in-down.scss │ ├── zoom-in-left.scss │ ├── zoom-in-right.scss │ ├── zoom-in-up.scss │ ├── zoom-in.scss │ ├── zoom-out-down.scss │ ├── zoom-out-left.scss │ ├── zoom-out-right.scss │ ├── zoom-out-up.scss │ └── zoom-out.scss ├── core │ ├── classes.scss │ ├── reset.scss │ └── variables.scss ├── element │ ├── classes.scss │ ├── yo-badge.scss │ ├── yo-btn.scss │ ├── yo-checked.scss │ ├── yo-input.scss │ ├── yo-loading.scss │ ├── yo-loadtip.scss │ ├── yo-range.scss │ └── yo-score.scss ├── fragment │ ├── classes.scss │ ├── yo-btnbar.scss │ ├── yo-header.scss │ ├── yo-list.scss │ └── yo-table.scss ├── layout │ ├── classes.scss │ ├── yo-align.scss │ ├── yo-flex.scss │ └── yo-stacked.scss └── widget │ ├── classes.scss │ ├── yo-datepicker.scss │ ├── yo-dblist.scss │ ├── yo-dialog.scss │ ├── yo-group.scss │ ├── yo-index.scss │ ├── yo-mask.scss │ ├── yo-number.scss │ ├── yo-panel.scss │ ├── yo-popup.scss │ ├── yo-rating.scss │ ├── yo-select.scss │ ├── yo-slidermenu.scss │ ├── yo-suggest.scss │ ├── yo-switch.scss │ ├── yo-switchable.scss │ ├── yo-tab.scss │ └── yo-tip.scss └── usage ├── app.scss ├── core ├── animate.min.css ├── common.scss ├── config.scss ├── reset.scss └── swiper-3.3.1.min.css ├── layout └── layout.scss └── modules ├── home.scss ├── index.scss └── nav.scss /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | mywebapp 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.ide.core.unifiedBuilder 10 | 11 | 12 | 13 | 14 | 15 | com.aptana.projects.webnature 16 | 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/README.md -------------------------------------------------------------------------------- /environment.yaml: -------------------------------------------------------------------------------- 1 | local: 2 | DEBUG: true 3 | 4 | dev: 5 | DEBUG: true 6 | 7 | beta: 8 | DEBUG: false 9 | 10 | prd: 11 | DEBUG: false -------------------------------------------------------------------------------- /fekit.config: -------------------------------------------------------------------------------- 1 | { 2 | "compiler": "modular", 3 | "name": "mywebapp", 4 | "version": "0.0.0", 5 | "dependencies": {}, 6 | "alias": {}, 7 | "export": [ 8 | "scripts/app.js", 9 | "styles/usage/app.scss" 10 | ] 11 | } -------------------------------------------------------------------------------- /images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/ajax-loader.gif -------------------------------------------------------------------------------- /images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/arrow.png -------------------------------------------------------------------------------- /images/iconfonts/footer.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/iconfonts/footer.ttf -------------------------------------------------------------------------------- /images/iconfonts/footer.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/iconfonts/footer.woff -------------------------------------------------------------------------------- /images/iconfonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/iconfonts/iconfont.ttf -------------------------------------------------------------------------------- /images/iconfonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/iconfonts/iconfont.woff -------------------------------------------------------------------------------- /images/iconfonts/navmore.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/iconfonts/navmore.ttf -------------------------------------------------------------------------------- /images/iconfonts/navmore.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/iconfonts/navmore.woff -------------------------------------------------------------------------------- /images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img1.jpg -------------------------------------------------------------------------------- /images/img10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img10.jpg -------------------------------------------------------------------------------- /images/img11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img11.jpg -------------------------------------------------------------------------------- /images/img12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img12.jpg -------------------------------------------------------------------------------- /images/img13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img13.jpg -------------------------------------------------------------------------------- /images/img14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img14.jpg -------------------------------------------------------------------------------- /images/img15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img15.jpg -------------------------------------------------------------------------------- /images/img16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img16.jpg -------------------------------------------------------------------------------- /images/img17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img17.jpg -------------------------------------------------------------------------------- /images/img18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img18.jpg -------------------------------------------------------------------------------- /images/img19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img19.jpg -------------------------------------------------------------------------------- /images/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img2.jpg -------------------------------------------------------------------------------- /images/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img3.jpg -------------------------------------------------------------------------------- /images/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img4.jpg -------------------------------------------------------------------------------- /images/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img5.jpg -------------------------------------------------------------------------------- /images/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img6.jpg -------------------------------------------------------------------------------- /images/img7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img7.jpg -------------------------------------------------------------------------------- /images/img8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img8.jpg -------------------------------------------------------------------------------- /images/img9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/img9.jpg -------------------------------------------------------------------------------- /images/swiper1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/swiper1.jpg -------------------------------------------------------------------------------- /images/swiper2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/swiper2.jpg -------------------------------------------------------------------------------- /images/swiper3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/swiper3.jpg -------------------------------------------------------------------------------- /images/swiper4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/swiper4.jpg -------------------------------------------------------------------------------- /images/swiper5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/swiper5.jpg -------------------------------------------------------------------------------- /images/swiper6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webkit-zcl/code/dedcfb8679300c8a0ab54e27fa285b131baa3a98/images/swiper6.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /mock/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "ret": true, 3 | "errCode": 24, 4 | "errMsg": "", 5 | "data": [ 6 | { 7 | "img": "/mywebapp/images/img1.jpg", 8 | "title": "重点推荐" 9 | }, 10 | { 11 | "img": "/mywebapp/images/img2.jpg", 12 | "title": "区域加盟" 13 | }, 14 | { 15 | "img": "/mywebapp/images/img3.jpg", 16 | "title": "时尚凉鞋" 17 | }, 18 | { 19 | "img": "/mywebapp/images/img4.jpg", 20 | "title": "粗跟鞋" 21 | }, 22 | { 23 | "img": "/mywebapp/images/img5.jpg", 24 | "title": "高跟鞋" 25 | }, 26 | { 27 | "img": "/mywebapp/images/img6.jpg", 28 | "title": "平底鞋" 29 | }, 30 | { 31 | "img": "/mywebapp/images/img7.jpg", 32 | "title": "鞋与生活" 33 | }, 34 | { 35 | "img": "/mywebapp/images/img8.jpg", 36 | "title": "坡跟鞋" 37 | }, 38 | { 39 | "img": "/mywebapp/images/img9.jpg", 40 | "title": "防水台" 41 | }, 42 | { 43 | "img": "/mywebapp/images/img10.jpg", 44 | "title": "厚底鞋" 45 | }, 46 | { 47 | "img": "/mywebapp/images/img11.jpg", 48 | "title": "我的鞋柜" 49 | }, 50 | { 51 | "img": "/mywebapp/images/img12.jpg", 52 | "title": "鞋衣搭配" 53 | }, 54 | { 55 | "img": "/mywebapp/images/img13.jpg", 56 | "title": "热门款式" 57 | }, 58 | { 59 | "img": "/mywebapp/images/img14.jpg", 60 | "title": "终端经营" 61 | }, 62 | { 63 | "img": "/mywebapp/images/img15.jpg", 64 | "title": "欧美经典" 65 | }, 66 | { 67 | "img": "/mywebapp/images/img16.jpg", 68 | "title": "行业展会" 69 | }, 70 | { 71 | "img": "/mywebapp/images/img17.jpg", 72 | "title": "技术交流" 73 | }, 74 | { 75 | "img": "/mywebapp/images/img18.jpg", 76 | "title": "时尚生活" 77 | }, 78 | { 79 | "img": "/mywebapp/images/img19.jpg", 80 | "title": "轻松一笑" 81 | } 82 | ] 83 | } 84 | -------------------------------------------------------------------------------- /mock/mock.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: [{ 3 | pattern: /\/api\/homeList.php/, 4 | respondwith: './home.json' 5 | }] 6 | }; 7 | -------------------------------------------------------------------------------- /src/scripts/app.js: -------------------------------------------------------------------------------- 1 | require('./lib/spa.min.js'); 2 | require('./lib/swiper-3.3.1.min.js'); 3 | 4 | // require views 5 | require('./views/index.js'); 6 | require('./views/home.js'); 7 | require('./views/nav.js'); 8 | require('./views/my.js'); 9 | require('./views/message.js'); 10 | 11 | // 定义默认视图 12 | SPA.config({ 13 | indexView: 'home' 14 | }); 15 | 16 | -------------------------------------------------------------------------------- /src/scripts/lib/swiper.animate1.0.2.min.js: -------------------------------------------------------------------------------- 1 | //本插件由www.swiper.com.cn提供 2 | function swiperAnimateCache(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i 2 | 7 | 8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 38 | 39 | 40 | 44 | 48 | 52 | 53 |
41 | 42 | 43 | 45 | 46 | 47 | 49 | 50 | 51 |
54 | 58 | 59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/scripts/tpl/index.string: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
    5 |
  • 6 | 7 | 首页 8 |
    • 9 |
  • 10 | 11 | 导航 12 |
    • 13 |
  • 14 | 15 |
    • 16 |
  • 17 | 18 | 会员 19 |
    • 20 |
  • 21 | 22 | 留言 23 |
    • 24 |
25 |
26 |
27 | -------------------------------------------------------------------------------- /src/scripts/tpl/message.string: -------------------------------------------------------------------------------- 1 |
message
2 | -------------------------------------------------------------------------------- /src/scripts/tpl/my.string: -------------------------------------------------------------------------------- 1 |
my
2 | -------------------------------------------------------------------------------- /src/scripts/tpl/nav.string: -------------------------------------------------------------------------------- 1 |
导航
2 |
3 |
4 |
    5 |
  • 6 | 7 |
    8 | 9 |
    • 10 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /src/scripts/views/home.js: -------------------------------------------------------------------------------- 1 | // 引入模板 2 | var homeTpl = require('../tpl/home.string'); 3 | 4 | 5 | //定义一个视图 6 | SPA.defineView('home',{ 7 | //将模板放在body里面 8 | html:homeTpl, 9 | plugins:[ 10 | 'delegated', 11 | { 12 | name:'avalon', 13 | //新建ajax获取的数组 14 | options:function(vm){ 15 | vm.homeList = []; 16 | //定义一个临时公共数组 用来存放第一次加载的数据（和加载更多时的一维数组） 17 | vm.homeTempList = []; 18 | } 19 | } 20 | ], 21 | //给视图定义公共的属性和方法 22 | init:{ 23 | //将一维数组转化为二维数组 24 | formatArray:function(arr){ 25 | var newArr = [];//定义二维数组 26 | for(var i=0;i` 14 | * @param {Length} $padding 内补白 15 | * @param {Length} $border-width 边框厚度 16 | * @param {Color} $bordercolor 边框色 17 | * @param {Color} $bgcolor 背景色 18 | * @param {Color} $color 文本色 19 | * @param {Length} $radius 圆角半径长度 20 | * @param {Length} $font-size 字号大小 21 | */ 22 | 23 | @mixin yo-badge( 24 | $name: default, 25 | $padding: default, 26 | $border-width: default, 27 | $bordercolor: default, 28 | $bgcolor: default, 29 | $color: default, 30 | $radius: default, 31 | $font-size: default) { 32 | // 区别是否新增实例还是修改本身 33 | @if $name == default { 34 | $name: ""; 35 | } @else { 36 | $name: "-#{$name}"; 37 | } 38 | // 如果值为default，则取config的定义 39 | @if $padding == default { 40 | $padding: map-get($badge, padding); 41 | } 42 | @if $border-width == default { 43 | $border-width: map-get($badge, border-width); 44 | } 45 | @if $bordercolor == default { 46 | $bordercolor: map-get($badge, bordercolor); 47 | } 48 | @if $bgcolor == default { 49 | $bgcolor: map-get($badge, bgcolor); 50 | } 51 | @if $color == default { 52 | $color: map-get($badge, color); 53 | } 54 | @if $radius == default { 55 | $radius: map-get($badge, radius); 56 | } 57 | @if $font-size == default { 58 | $font-size: map-get($badge, font-size); 59 | } 60 | .yo-badge#{$name} { 61 | // 如果$padding不等于config设定，则重绘内补白 62 | @if $padding != map-get($badge, padding) { 63 | padding: $padding; 64 | } 65 | // 如果$border-width不等于config设定，则重绘边框相关 66 | @if $border-width != map-get($badge, border-width) { 67 | // 如果$border-width为null，重设置为0 68 | @if $border-width == null { 69 | $border-width: 0; 70 | } 71 | border-width: $border-width; 72 | // 如果$bordercolor不等于config设定，则重绘边框色 73 | @if $bordercolor != map-get($badge, bordercolor) { 74 | @if $border-width != 0 { 75 | border-color: $bordercolor; 76 | } 77 | } @else { 78 | // 如果config的边框厚度定义为null或者0，在扩展时，加上边框色 79 | @if map-get($badge, border-width) == null or 80 | map-get($badge, border-width) == 0 { 81 | border-color: map-get($badge, bordercolor); 82 | } 83 | } 84 | // 如果config的边框厚度定义为null或者0，在扩展时，加上border-style 85 | @if map-get($badge, border-width) == null or 86 | map-get($badge, border-width) == 0 { 87 | border-style: solid; 88 | } 89 | } @else { 90 | // 如果扩展的边框厚度大于0且边框色和config边框色不同，在扩展时，重绘边框色 91 | @if $border-width != null and 92 | $border-width != 0 and 93 | $bordercolor != map-get($badge, bordercolor) { 94 | border-color: $bordercolor; 95 | } 96 | } 97 | // 如果$bgcolor不等于config设定，则重绘背景色 98 | @if $bgcolor != map-get($badge, bgcolor) { 99 | background-color: $bgcolor; 100 | } 101 | // 如果$color不等于config设定，则重绘文本色 102 | @if $color != map-get($badge, color) { 103 | color: $color; 104 | } 105 | // 如果$radius不等于config设定，则重绘圆角 106 | @if $radius != map-get($badge, radius) { 107 | // 构造里已处理过边框+圆角+背景溢出的问题，所以这里写原生即可 108 | border-radius: $radius; 109 | } 110 | // 如果$font-size不等于config设定，则重绘字号 111 | @if $font-size != map-get($badge, font-size) { 112 | font-size: $font-size; 113 | // 如果$font-size不等于config设定，并且不等于null，且大于.14rem时，重绘行高 114 | @if $font-size != null and 115 | $font-size > .14rem { 116 | line-height: $font-size; 117 | } 118 | } 119 | // 增量扩展 120 | @content; 121 | } 122 | } 123 | 124 | // 调用本文件时载入气泡基础构造 125 | .yo-badge { 126 | @include _badge; 127 | } -------------------------------------------------------------------------------- /src/styles/lib/element/yo-btn.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class element 6 | */ 7 | 8 | /** 9 | * 构造按钮的自定义使用方法，可轻松自定义边框，尺寸，背景，文字等 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-btn.html) 12 | * @method yo-btn 13 | * @param {String} $name 为新的按钮扩展定义一个名称 14 | * @param {Length} $border-width 按钮边框厚度 15 | * @param {Color} $bordercolor 按钮边框色 16 | * @param {Color} $bgcolor 按钮背景色 17 | * @param {Color} $color 按钮文本色 18 | * @param {Color} $active-bordercolor 触点（鼠标，手指或其它）按下时的按钮边框色 19 | * @param {Color} $active-bgcolor 触点（鼠标，手指或其它）按下的按钮背景色 20 | * @param {Color} $active-color 触点（鼠标，手指或其它）按下的按钮文本色 21 | * @param {Length} $padding 按钮内补白 22 | * @param {Length} $radius 按钮圆角半径长度 23 | * @param {Length} $font-size 按钮字号大小 24 | * @param {Length} $width 按钮宽度 25 | * @param {Length} $height 按钮高度 26 | */ 27 | 28 | @mixin yo-btn( 29 | $name: default, 30 | $border-width: default, 31 | $bordercolor: default, 32 | $bgcolor: default, 33 | $color: default, 34 | $active-bordercolor: default, 35 | $active-bgcolor: default, 36 | $active-color: default, 37 | $padding: default, 38 | $radius: default, 39 | $font-size: default, 40 | $width: default, 41 | $height: default) { 42 | // 区别是否新增实例还是修改本身 43 | @if $name == default { 44 | $name: ""; 45 | } @else { 46 | $name: "-#{$name}"; 47 | } 48 | // 如果值为default，则取config的定义 49 | @if $border-width == default { 50 | $border-width: map-get($btn, border-width); 51 | } 52 | @if $bordercolor == default { 53 | $bordercolor: map-get($btn, bordercolor); 54 | } 55 | @if $bgcolor == default { 56 | $bgcolor: map-get($btn, bgcolor); 57 | } 58 | @if $color == default { 59 | $color: map-get($btn, color); 60 | } 61 | @if $active-bordercolor == default { 62 | $active-bordercolor: map-get($btn, active-bordercolor); 63 | } 64 | @if $active-bgcolor == default { 65 | $active-bgcolor: map-get($btn, active-bgcolor); 66 | } 67 | @if $active-color == default { 68 | $active-color: map-get($btn, active-color); 69 | } 70 | @if $padding == default { 71 | $padding: map-get($btn, padding); 72 | } 73 | @if $radius == default { 74 | $radius: map-get($btn, radius); 75 | } 76 | @if $font-size == default { 77 | $font-size: map-get($btn, font-size); 78 | } 79 | @if $width == default { 80 | $width: map-get($btn, width); 81 | } 82 | @if $height == default { 83 | $height: map-get($btn, height); 84 | } 85 | .yo-btn#{$name} { 86 | // 如果$width不等于default，则重绘宽度 87 | @if $width != default { 88 | width: $width; 89 | } 90 | // 如果$height不等于default，则重绘高度和行高 91 | @if $height != default { 92 | height: $height; 93 | line-height: $height; 94 | } 95 | // 如果$padding不等于config设定，则重绘内补白 96 | @if $padding != map-get($btn, padding) { 97 | padding: $padding; 98 | } 99 | // 如果$radius不等于config设定，则重绘圆角 100 | @if $radius != map-get($btn, radius) { 101 | // 构造里已处理过边框+圆角+背景溢出的问题，所以这里写原生即可 102 | border-radius: $radius; 103 | } 104 | // 如果$border-width不等于config设定，则重绘边框相关 105 | @if $border-width != map-get($btn, border-width) { 106 | // 如果$border-width为null，重设置为0 107 | @if $border-width == null { 108 | $border-width: 0; 109 | } 110 | border-width: $border-width; 111 | // 如果$bordercolor不等于config设定，则重绘边框色 112 | @if $bordercolor != map-get($btn, bordercolor) { 113 | @if $border-width != 0 { 114 | border-color: $bordercolor; 115 | } 116 | } @else { 117 | // 如果config的边框厚度定义为null或者0，在扩展时，加上边框色 118 | @if map-get($btn, border-width) == null or 119 | map-get($btn, border-width) == 0 { 120 | border-color: map-get($btn, bordercolor); 121 | } 122 | } 123 | // 如果config的边框厚度定义为null或者0，在扩展时，加上border-style 124 | @if map-get($btn, border-width) == null or 125 | map-get($btn, border-width) == 0 { 126 | border-style: solid; 127 | } 128 | } @else { 129 | // 如果扩展的边框厚度大于0且边框色和config边框色不同，在扩展时，重绘边框色 130 | @if $border-width != null and 131 | $border-width != 0 and 132 | $bordercolor != map-get($btn, bordercolor) { 133 | border-color: $bordercolor; 134 | } 135 | } 136 | // 如果$bgcolor不等于config设定，则重绘背景色 137 | @if $bgcolor != map-get($btn, bgcolor) { 138 | background-color: $bgcolor; 139 | } 140 | // 如果$color不等于config设定，则重绘文本色 141 | @if $color != map-get($btn, color) { 142 | color: $color; 143 | } 144 | // 如果$font-size不等于config设定，则重绘文本字号 145 | @if $font-size != map-get($btn, font-size) { 146 | font-size: $font-size; 147 | } 148 | &:active { 149 | @if $active-bordercolor != map-get($btn, active-bordercolor) { 150 | border-color: $active-bordercolor; 151 | } 152 | @if $active-bgcolor != map-get($btn, active-bgcolor) { 153 | background-color: $active-bgcolor; 154 | } 155 | @if $active-color != map-get($btn, active-color) { 156 | color: $active-color; 157 | } 158 | } 159 | // 增量扩展 160 | @content; 161 | } 162 | } 163 | 164 | // 调用本文件时载入按钮基础构造 165 | .yo-btn { 166 | @include _btn; 167 | // 默认载入按钮的三种尺寸:s, m, l 168 | &-s { 169 | height: map-get($btn, s-height); 170 | line-height: map-get($btn, s-height); 171 | font-size: map-get($btn, s-font-size); 172 | } 173 | &-m { 174 | height: map-get($btn, m-height); 175 | line-height: map-get($btn, m-height); 176 | font-size: map-get($btn, m-font-size); 177 | } 178 | &-l { 179 | height: map-get($btn, l-height); 180 | line-height: map-get($btn, l-height); 181 | font-size: map-get($btn, l-font-size); 182 | } 183 | // 通栏按钮 184 | &-stacked { 185 | display: block; 186 | width: 100%; 187 | } 188 | } -------------------------------------------------------------------------------- /src/styles/lib/element/yo-checked.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class element 6 | */ 7 | 8 | /** 9 | * 构造单选多选的自定义使用方法，可同时作用于 checkbox 与 radio 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-checked.html) 12 | * @method yo-checked 13 | * @param {String} $name 为新的扩展定义一个名称 14 | * @param {String} $content 标记（对勾，圆点或者任意字符，可以是webfonts的编码） 15 | * @param {Length} $size 元件大小 16 | * @param {Length} $font-size 标记大小 17 | * @param {Length} $border-width 边框厚度 18 | * @param {Color} $bordercolor 边框色 19 | * @param {Color} $bgcolor 背景色 20 | * @param {Color} $color 标记色 21 | * @param {Color} $on-bordercolor 选中时的边框色 22 | * @param {Color} $on-bgcolor 选中时的背景色 23 | * @param {Color} $on-color 选中时的标记色 24 | * @param {Length} $radius 圆角半径长度 25 | */ 26 | 27 | @mixin yo-checked( 28 | $name: default, 29 | $content: default, 30 | $size: default, 31 | $font-size: default, 32 | $border-width: default, 33 | $bordercolor: default, 34 | $bgcolor: default, 35 | $color: default, 36 | $on-bordercolor: default, 37 | $on-bgcolor: default, 38 | $on-color: default, 39 | $radius: default) { 40 | // 区别是否新增实例还是修改本身 41 | @if $name == default { 42 | $name: ""; 43 | } @else { 44 | $name: "-#{$name}"; 45 | } 46 | // 如果值为default，则取config的定义 47 | @if $content == default { 48 | $content: map-get($checked, content); 49 | } 50 | @if $size == default { 51 | $size: map-get($checked, size); 52 | } 53 | @if $font-size == default { 54 | $font-size: map-get($checked, font-size); 55 | } 56 | @if $border-width == default { 57 | $border-width: map-get($checked, border-width); 58 | } 59 | @if $bordercolor == default { 60 | $bordercolor: map-get($checked, bordercolor); 61 | } 62 | @if $bgcolor == default { 63 | $bgcolor: map-get($checked, bgcolor); 64 | } 65 | @if $color == default { 66 | $color: map-get($checked, color); 67 | } 68 | @if $on-bordercolor == default { 69 | $on-bordercolor: map-get($checked, on-bordercolor); 70 | } 71 | @if $on-bgcolor == default { 72 | $on-bgcolor: map-get($checked, on-bgcolor); 73 | } 74 | @if $on-color == default { 75 | $on-color: map-get($checked, on-color); 76 | } 77 | @if $radius == default { 78 | $radius: map-get($checked, radius); 79 | } 80 | .yo-checked#{$name} { 81 | @if $size != map-get($checked, size) { 82 | @include square($size); 83 | } 84 | @if $font-size != map-get($checked, font-size) { 85 | font-size: $font-size; 86 | } 87 | > .type { 88 | @if $radius != map-get($checked, radius) { 89 | // 构造里已处理过边框+圆角+背景溢出的问题，所以这里写原生即可 90 | border-radius: $radius; 91 | } 92 | // 如果$border-width不等于config设定，则重绘边框相关 93 | @if $border-width != map-get($checked, border-width) { 94 | // 如果$border-width为null，重设置为0 95 | @if $border-width == null { 96 | $border-width: 0; 97 | } 98 | border-width: $border-width; 99 | // 如果$bordercolor不等于config设定，则重绘边框色 100 | @if $bordercolor != map-get($checked, bordercolor) { 101 | @if $border-width != 0 { 102 | border-color: $bordercolor; 103 | } 104 | } @else { 105 | // 如果config的边框厚度定义为null或者0，在扩展时，加上边框色 106 | @if map-get($checked, border-width) == null or 107 | map-get($checked, border-width) == 0 { 108 | border-color: map-get($checked, bordercolor); 109 | } 110 | } 111 | // 如果config的边框厚度定义为null或者0，在扩展时，加上border-style 112 | @if map-get($checked, border-width) == null or 113 | map-get($checked, border-width) == 0 { 114 | border-style: solid; 115 | } 116 | line-height: $size - nth($border-width, 1) * 2; 117 | } @else { 118 | // 如果扩展的边框厚度大于0且边框色和config边框色不同，在扩展时，重绘边框色 119 | @if $border-width != null and 120 | $border-width != 0 and 121 | $bordercolor != map-get($checked, bordercolor) { 122 | border-color: $bordercolor; 123 | } 124 | } 125 | @if $bgcolor != map-get($checked, bgcolor) { 126 | background-color: $bgcolor; 127 | } 128 | &::after { 129 | @if $content != map-get($checked, content) { 130 | content: $content; 131 | } 132 | @if $color != map-get($checked, color) { 133 | color: $color; 134 | } 135 | } 136 | } 137 | > input:checked + .type { 138 | // 如果$border-width不等于config设定，则重绘边框相关 139 | @if $border-width != map-get($checked, border-width) { 140 | // 如果$border-width为null，重设置为0 141 | @if $border-width == null { 142 | $border-width: 0; 143 | } 144 | // 如果$on-bordercolor不等于config设定，则重绘边框色 145 | @if $on-bordercolor != map-get($checked, on-bordercolor) { 146 | @if $border-width != 0 { 147 | border-color: $on-bordercolor; 148 | } 149 | } @else { 150 | // 如果config的边框厚度定义为null或者0，在扩展时，加上边框色 151 | @if map-get($checked, border-width) == null or 152 | map-get($checked, border-width) == 0 { 153 | border-color: map-get($checked, on-bordercolor); 154 | } 155 | } 156 | } @else { 157 | // 如果扩展的边框厚度大于0且边框色和config边框色不同，在扩展时，重绘边框色 158 | @if $border-width != null and 159 | $border-width != 0 and 160 | $on-bordercolor != map-get($checked, on-bordercolor) { 161 | border-color: $on-bordercolor; 162 | } 163 | } 164 | @if $on-bgcolor != map-get($checked, on-bgcolor) { 165 | background-color: $on-bgcolor; 166 | } 167 | &::after { 168 | @if $on-color != map-get($checked, on-color) { 169 | color: $on-color; 170 | } 171 | } 172 | } 173 | // 增量扩展 174 | @content; 175 | } 176 | } 177 | 178 | // 调用本文件时载入checked基础构造 179 | .yo-checked { 180 | @include _checked; 181 | } 182 | -------------------------------------------------------------------------------- /src/styles/lib/element/yo-input.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class element 6 | */ 7 | 8 | /** 9 | * 构造输入框的自定义使用方法，可同时作用于 input 与 textarea 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-input.html) 12 | * @method yo-input 13 | * @param {String} $name 为新的扩展定义一个名称 14 | * @param {Length} $width 宽度 15 | * @param {Length} $height 高度 16 | * @param {Length} $padding 内补白 17 | * @param {Length} $radius 圆角半径长度 18 | * @param {Color} $bordercolor 边框色 19 | * @param {Color} $bgcolor 背景色 20 | * @param {Color} $color 文本色 21 | * @param {Color} $placeholder-color placeholder文本色 22 | */ 23 | 24 | @mixin yo-input( 25 | $name: default, 26 | $width: default, 27 | $height: default, 28 | $padding: default, 29 | $radius: default, 30 | $bordercolor: default, 31 | $bgcolor: default, 32 | $color: default, 33 | $placeholder-color: default) { 34 | // 区别是否新增实例还是修改本身 35 | @if $name == default { 36 | $name: ""; 37 | } @else { 38 | $name: "-#{$name}"; 39 | } 40 | // 如果值为default，则取config的定义 41 | @if $width == default { 42 | $width: map-get($input, width); 43 | } 44 | @if $height == default { 45 | $height: map-get($input, height); 46 | } 47 | @if $padding == default { 48 | $padding: map-get($input, padding); 49 | } 50 | @if $radius == default { 51 | $radius: map-get($input, radius); 52 | } 53 | @if $bordercolor == default { 54 | $bordercolor: map-get($input, bordercolor); 55 | } 56 | @if $bgcolor == default { 57 | $bgcolor: map-get($input, bgcolor); 58 | } 59 | @if $color == default { 60 | $color: map-get($input, color); 61 | } 62 | @if $placeholder-color == default { 63 | $placeholder-color: map-get($input, placeholder-color); 64 | } 65 | .yo-input#{$name} { 66 | @if $width != map-get($input, width) { 67 | width: $width; 68 | } 69 | @if $height != map-get($input, height) { 70 | height: $height; 71 | } 72 | @if $padding != map-get($input, padding) { 73 | padding: $padding; 74 | } 75 | @if $radius != map-get($input, radius) { 76 | // 构造里已处理过边框+圆角+背景溢出的问题，所以这里写原生即可 77 | border-radius: $radius; 78 | } 79 | @if $bordercolor != map-get($input, bordercolor) { 80 | border-color: $bordercolor; 81 | } 82 | @if $bgcolor != map-get($input, bgcolor) { 83 | background-color: $bgcolor; 84 | } 85 | @if $color != map-get($input, color) { 86 | color: $color; 87 | } 88 | &::-webkit-input-placeholder { 89 | @if $placeholder-color != map-get($input, placeholder-color) { 90 | color: $placeholder-color; 91 | } 92 | } 93 | // 增量扩展 94 | @content; 95 | } 96 | } 97 | 98 | // 调用本文件时载入按钮基础构造 99 | .yo-input { 100 | @include _input; 101 | } -------------------------------------------------------------------------------- /src/styles/lib/element/yo-loading.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | @import "../ani/rotate"; 4 | 5 | /** 6 | * @class element 7 | */ 8 | 9 | /** 10 | * 构造加载中的自定义使用方法 11 | ----------------------- 12 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-loading.html) 13 | * @method yo-loading 14 | * @param {String} $name 为新的扩展定义一个名称 15 | * @param {Length} $ico-size loading的尺寸 16 | * @param {Color} $ico-color loading的颜色 17 | * @param {Color} $bgcolor 背景色 18 | * @param {Color} $mask-bgcolor 遮罩背景色 19 | * @param {Length} $font-size 文本字号 20 | * @param {Color} $color 文本颜色 21 | * @param {String} $content loading形态 22 | */ 23 | 24 | @mixin yo-loading( 25 | $name: default, 26 | $ico-size: default, 27 | $ico-color: default, 28 | $bgcolor: default, 29 | $mask-bgcolor: default, 30 | $font-size: default, 31 | $color: default, 32 | $content: default) { 33 | // 区别是否新增实例还是修改本身 34 | @if $name == default { 35 | $name: ""; 36 | } @else { 37 | $name: "-#{$name}"; 38 | } 39 | // 如果值为default，则取config的定义 40 | @if $ico-size == default { 41 | $ico-size: map-get($loading, ico-size); 42 | } 43 | @if $ico-color == default { 44 | $ico-color: map-get($loading, ico-color); 45 | } 46 | @if $bgcolor == default { 47 | $bgcolor: map-get($loading, bgcolor); 48 | } 49 | @if $mask-bgcolor == default { 50 | $mask-bgcolor: map-get($loading, mask-bgcolor); 51 | } 52 | @if $font-size == default { 53 | $font-size: map-get($loading, font-size); 54 | } 55 | @if $color == default { 56 | $color: map-get($loading, color); 57 | } 58 | @if $content == default { 59 | $content: map-get($loading, content); 60 | } 61 | .yo-loading#{$name} { 62 | // 如果$bgcolor不等于config预设值时，则重写遮罩背景色 63 | @if $mask-bgcolor != map-get($loading, mask-bgcolor) { 64 | background-color: $mask-bgcolor; 65 | } 66 | > .inner { 67 | @if $bgcolor != map-get($loading, bgcolor) { 68 | background-color: $bgcolor; 69 | } 70 | @if $color != map-get($loading, color) { 71 | color: $color; 72 | } 73 | @if $font-size != map-get($loading, font-size) { 74 | font-size: $font-size; 75 | } 76 | > .yo-ico { 77 | &::before { 78 | @if $content != map-get($loading, content) { 79 | content: $content; 80 | } 81 | @if $ico-color != map-get($loading, ico-color) { 82 | color: $ico-color; 83 | } 84 | @if $ico-size != map-get($loading, ico-size) { 85 | font-size: $ico-size; 86 | } 87 | } 88 | } 89 | } 90 | // 增量扩展 91 | @content; 92 | } 93 | } 94 | 95 | // 调用本文件时载入loading基础构造 96 | .yo-loading { 97 | @include _loading; 98 | } -------------------------------------------------------------------------------- /src/styles/lib/element/yo-loadtip.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | @import "../ani/rotate"; 4 | 5 | /** 6 | * @class element 7 | */ 8 | 9 | /** 10 | * 构造加载提示的自定义使用方法 11 | ----------------------- 12 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-loadtip.html) 13 | * @method yo-loadtip 14 | * @param {String} $name 为新的扩展定义一个名称 15 | * @param {Color} $color 文本色 16 | * @param {Length} $font-size 字号大小 17 | * @param {Color} $ico-color ico颜色 18 | */ 19 | 20 | @mixin yo-loadtip( 21 | $name: default, 22 | $color: default, 23 | $font-size: default, 24 | $ico-color: default) { 25 | // 区别是否新增实例还是修改本身 26 | @if $name == default { 27 | $name: ""; 28 | } @else { 29 | $name: "-#{$name}"; 30 | } 31 | // 如果值为default，则取config的定义 32 | @if $color == default { 33 | $color: map-get($loadtip, color); 34 | } 35 | @if $font-size == default { 36 | $font-size: map-get($loadtip, font-size); 37 | } 38 | @if $ico-color == default { 39 | $ico-color: map-get($loadtip, ico-color); 40 | } 41 | 42 | .yo-loadtip#{$name} { 43 | // 如果$color不等于config设定，则重绘文本色 44 | @if $color != map-get($loadtip, color) { 45 | color: $color; 46 | } 47 | // 如果$font-size不等于config设定，则重绘字号 48 | @if $font-size != map-get($loadtip, font-size) { 49 | font-size: $font-size; 50 | } 51 | > .yo-ico { 52 | // 如果$ico-color不等于config设定，则重绘ico颜色 53 | @if $ico-color != map-get($loadtip, ico-color) { 54 | color: $ico-color; 55 | } 56 | } 57 | // 增量扩展 58 | @content; 59 | } 60 | } 61 | 62 | // 调用本文件时载入气泡基础构造 63 | .yo-loadtip { 64 | @include _loadtip; 65 | } -------------------------------------------------------------------------------- /src/styles/lib/element/yo-range.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class element 6 | */ 7 | 8 | /** 9 | * 构造区间选择的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-range.html) 12 | * @method yo-range 13 | * @param {String} $name 为新的扩展定义一个名称 14 | * @param {Color} $inner-bgcolor 已选择区域滑条色 15 | * @param {Color} $outer-bgcolor 未选择区域滑条色 16 | * @param {Color} $ball-color 滑块色 17 | */ 18 | 19 | @mixin yo-range( 20 | $name: default, 21 | $inner-bgcolor: default, 22 | $outer-bgcolor: default, 23 | $ball-color: default) { 24 | // 区别是否新增实例还是修改本身 25 | @if $name == default { 26 | $name: ""; 27 | } @else { 28 | $name: "-#{$name}"; 29 | } 30 | // 如果值为default，则取config的定义 31 | @if $inner-bgcolor == default { 32 | $inner-bgcolor: map-get($range, inner-bgcolor); 33 | } 34 | @if $outer-bgcolor == default { 35 | $outer-bgcolor: map-get($range, outer-bgcolor); 36 | } 37 | @if $ball-color == default { 38 | $ball-color: map-get($range, ball-color); 39 | } 40 | .yo-range#{$name} { 41 | > input[type="range"] { 42 | @if $outer-bgcolor != map-get($range, outer-bgcolor) { 43 | background-image: -webkit-linear-gradient(to right, $outer-bgcolor 0%, $outer-bgcolor 100%); 44 | background-image: linear-gradient(to right, $outer-bgcolor 0%, $outer-bgcolor 100%); 45 | } 46 | &::-webkit-slider-thumb { 47 | @if $ball-color != map-get($range, ball-color) { 48 | background-color: $ball-color; 49 | } 50 | &::before { 51 | @if $inner-bgcolor != map-get($range, inner-bgcolor) { 52 | background: $inner-bgcolor; 53 | } 54 | } 55 | } 56 | } 57 | // 增量扩展 58 | @content; 59 | } 60 | } 61 | 62 | // 调用本文件时载入按钮基础构造 63 | .yo-range { 64 | @include _range; 65 | } -------------------------------------------------------------------------------- /src/styles/lib/element/yo-score.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class element 6 | */ 7 | 8 | /** 9 | * 构造评分展示的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/element/yo-score.html) 12 | * @method yo-score 13 | * @param {String} $name 为新的扩展定义一个名称 14 | * @param {Length} $item-width 单项宽度 15 | * @param {Length} $item-height 单项高度 16 | * @param {String} $url 背景图片url 17 | */ 18 | 19 | @mixin yo-score( 20 | $name: default, 21 | $item-width: default, 22 | $item-height: default, 23 | $url: default) { 24 | // 区别是否新增实例还是修改本身 25 | @if $name == default { 26 | $name: ""; 27 | } @else { 28 | $name: "-#{$name}"; 29 | } 30 | // 如果值为default，则取config的定义 31 | @if $item-width == default { 32 | $item-width: map-get($score, item-width); 33 | } 34 | @if $item-height == default { 35 | $item-height: map-get($score, item-height); 36 | } 37 | @if $url == default { 38 | $url: map-get($score, url); 39 | } 40 | .yo-score#{$name} { 41 | @if $item-width != map-get($score, item-width) { 42 | width: $item-width * 5; 43 | } 44 | @if $item-height != map-get($score, item-height) { 45 | height: $item-height; 46 | } 47 | &, 48 | > .index { 49 | @if $url != map-get($score, url) { 50 | background-image: url(#{map-get($setting, bgimg-domain)}#{$url}); 51 | } 52 | @if $item-height != map-get($score, item-height) { 53 | background-size: auto $item-height * 2; 54 | } 55 | } 56 | > .index { 57 | @if $item-height != map-get($score, item-height) { 58 | background-position: 0 -#{$item-height}; 59 | } 60 | } 61 | // 增量扩展 62 | @content; 63 | } 64 | } 65 | 66 | // 调用本文件时载入score基础构造 67 | .yo-score { 68 | @include _score; 69 | } -------------------------------------------------------------------------------- /src/styles/lib/fragment/classes.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/variables"; 3 | @import "../core/classes"; 4 | /** 5 | * Yo框架fragment基础构造 6 | ----------------------- 7 | * Yo内置了包括：dialog, popup, tip, tab, switch, rating等基础组件 8 | * 9 | * @class fragment 10 | * @module Yo 11 | */ 12 | 13 | // 定义list的基础构造 14 | // 使用方法请查看 yo-list.scss 15 | @mixin _list { 16 | margin: map-get($list, margin); 17 | border-radius: map-get($list, radius); 18 | // 当边框厚度大于0时，才定义边框相关属性 19 | @if map-get($list, border-width) != null and 20 | map-get($list, border-width) != 0 { 21 | border-width: map-get($list, border-width); 22 | border-style: solid; 23 | border-color: map-get($list, bordercolor); 24 | } 25 | > .label, 26 | > .item, 27 | .front { 28 | @include flexbox; 29 | @include align-items; 30 | // 修复某些安卓版本开启了3D，yo-list当成滚动内容时出现的诡异问题 31 | @include transform(translatez(0)); 32 | > .mark:not(:last-child), 33 | > .yo-ico:not(:last-child) { 34 | margin-right: .1rem; 35 | } 36 | // 定义需要自适应宽度的列 37 | > .flex { 38 | @include flex; 39 | } 40 | > .mark, 41 | > .yo-ico, 42 | > .col, 43 | > .flex { 44 | display: block; 45 | } 46 | &.tr { 47 | // 当模式为table时，padding将设置到col上 48 | padding: 0; 49 | } 50 | } 51 | > .label { 52 | padding: map-get($list, label-padding); 53 | border: 1px solid map-get($list, label-bordercolor); 54 | border-width: 0 0 1px 0; 55 | background-color: map-get($list, label-bgcolor); 56 | color: map-get($base, sub-color); 57 | font-size: map-get($list, label-font-size); 58 | font-weight: normal; 59 | // 定义单元格的padding 60 | > .col { 61 | padding: map-get($list, label-padding); 62 | } 63 | &:not(:first-child) { 64 | border-width: 1px 0; 65 | margin-top: -1px; 66 | } 67 | } 68 | > .item, 69 | .front { 70 | padding: map-get($list, item-padding); 71 | } 72 | > .item { 73 | background-color: #fff; 74 | color: map-get($base, color); 75 | font-size: map-get($list, item-font-size); 76 | 77 | // 描述线条 78 | @include gradient(linear, map-get($list, item-bordercolor), map-get($list, item-bordercolor)); 79 | @include background-size(100% 1px); 80 | background-repeat: no-repeat; 81 | // 设置底边线的位置 82 | background-position: map-get($list, item-border-space) bottom; 83 | 84 | &:last-child { 85 | margin-bottom: -1px; 86 | // 最后一根线的颜色与外边框颜色相同 87 | @include gradient(linear, map-get($list, bordercolor), map-get($list, bordercolor)); 88 | // 最后一根线的左边不留间隙 89 | background-position: 0 bottom; 90 | } 91 | 92 | &-stacked { 93 | display: block; 94 | > .mark { 95 | padding-bottom: .05rem; 96 | } 97 | } 98 | &-input { 99 | // 让输入框占满整个父容器 100 | > .yo-input { 101 | height: auto; 102 | padding: 0; 103 | border: 0; 104 | } 105 | } 106 | // 常规需要active的项目，没有使用到第3方组件的 107 | &.item-active:active, 108 | // 为第3方组件提供active状态 109 | &.item-light { 110 | background-color: map-get($list, active-bgcolor); 111 | } 112 | // 选中时背景和文本色 113 | &.item-on { 114 | background-color: map-get($list, on-bgcolor); 115 | color: map-get($list, on-color); 116 | } 117 | // 定义单元格的padding 118 | > .col { 119 | padding: map-get($list, item-padding); 120 | } 121 | } 122 | > .yo-slidermenu { 123 | display: block; 124 | padding: 0 !important; 125 | } 126 | } 127 | 128 | // 定义table的基础构造 129 | // 使用方法请查看 yo-table.scss 130 | @mixin _table { 131 | width: map-get($table, width); 132 | background-color: #fff; 133 | thead { 134 | background-color: map-get($table, thead-bgcolor); 135 | th { 136 | padding: map-get($table, thead-padding); 137 | } 138 | } 139 | td { 140 | padding: map-get($table, tbody-padding); 141 | } 142 | th, 143 | td { 144 | // 判断是够需要垂直边框 145 | @if map-get($table, has-vertical-border) == false { 146 | border-width: 0 0 1px 0; 147 | } @else { 148 | border-width: 1px; 149 | } 150 | border-style: solid; 151 | border-color: map-get($table, bordercolor); 152 | } 153 | tbody { 154 | tr:nth-child(odd) { 155 | background-color: map-get($table, odd-bgcolor); 156 | } 157 | tr:nth-child(even) { 158 | background-color: map-get($table, even-bgcolor); 159 | } 160 | tr:active, 161 | tr.active { 162 | background-color: map-get($table, active-bgcolor); 163 | } 164 | tr.on{ 165 | background-color: map-get($table, on-bgcolor); 166 | } 167 | } 168 | } 169 | 170 | // 定义btnbar的基础构造 171 | // 使用方法请查看 yo-btnbar.scss 172 | @mixin _btnbar { 173 | display: inline-block; 174 | vertical-align: middle; 175 | > .yo-btn { 176 | float: left; 177 | &:not(:first-child) { 178 | margin-left: -.01rem !important; 179 | } 180 | &:first-child { 181 | // 如果按钮有圆角，那么去掉第一个按钮的右侧圆角 182 | @if map-get($btn, radius) != 0 { 183 | border-top-right-radius: 0; 184 | border-bottom-right-radius: 0; 185 | } 186 | // 如果工具栏定义了圆角，那么不管按钮有没有左侧圆角，都重绘 187 | @if map-get($btnbar, radius) != auto and map-get($btnbar, radius) != map-get($btn, radius) { 188 | border-top-left-radius: map-get($btnbar, radius); 189 | border-bottom-left-radius: map-get($btnbar, radius); 190 | } 191 | } 192 | &:last-child { 193 | // 如果按钮有圆角，那么去掉最后一个按钮的左侧圆角 194 | @if map-get($btn, radius) != 0 { 195 | border-top-left-radius: 0; 196 | border-bottom-left-radius: 0; 197 | } 198 | // 如果工具栏定义了圆角，那么不管按钮有没有右侧圆角，都重绘 199 | @if map-get($btnbar, radius) != auto and map-get($btnbar, radius) != map-get($btn, radius) { 200 | border-top-right-radius: map-get($btnbar, radius); 201 | border-bottom-right-radius: map-get($btnbar, radius); 202 | } 203 | } 204 | &:not(:first-child):not(:last-child){ 205 | // 如果按钮有圆角，那么清除中间所有按钮的圆角 206 | @if map-get($btn, radius) != 0 { 207 | border-radius: 0; 208 | } 209 | } 210 | } 211 | } 212 | 213 | // 定义header的基础构造 214 | // 使用方法请查看 yo-header.scss 215 | @mixin _header { 216 | position: relative; 217 | height: map-get($header, height); 218 | line-height: map-get($header, height); 219 | border-bottom: 1px solid map-get($header, bordercolor); 220 | background-color: map-get($header, bgcolor); 221 | // 如果config预设值不等于base color，则重绘color 222 | @if map-get($header, color) != map-get($base, color) { 223 | color: map-get($header, color); 224 | } 225 | // 如果config预设值不等于base font-size，则重绘font-size 226 | @if map-get($header, font-size) != map-get($base, font-size) { 227 | font-size: map-get($header, font-size); 228 | } 229 | @include ellipsis; 230 | text-align: center; 231 | > .title { 232 | @include ellipsis; 233 | margin: 0 map-get($header, item-width); 234 | } 235 | > .regret, 236 | > .affirm { 237 | position: absolute; 238 | top: 0; 239 | width: map-get($header, item-width); 240 | // 如果config预设值不等于parent color，则重绘子项的color 241 | @if map-get($header, item-color) != map-get($header, color) { 242 | color: map-get($header, item-color); 243 | } 244 | cursor: pointer; 245 | &:active { 246 | opacity: .5; 247 | } 248 | // 如果config预设值不等于parent font-size，则重绘子项的font-size 249 | @if map-get($header, item-font-size) != map-get($header, font-size) { 250 | font-size: map-get($header, item-font-size); 251 | } 252 | &.yo-ico, 253 | > .yo-ico { 254 | color: map-get($header, item-ico-color); 255 | font-size: map-get($header, item-ico-size); 256 | } 257 | } 258 | > .regret { 259 | left: 0; 260 | padding-left: map-get($header, item-space); 261 | text-align: left; 262 | } 263 | > .affirm { 264 | right: 0; 265 | padding-right: map-get($header, item-space); 266 | text-align: right; 267 | } 268 | } -------------------------------------------------------------------------------- /src/styles/lib/fragment/yo-btnbar.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | @import "../element/yo-btn"; 4 | 5 | /** 6 | * @class fragment 7 | */ 8 | 9 | /** 10 | * 构造按钮组的自定义使用方法 11 | ----------------------- 12 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/fragment/yo-btnbar.html) 13 | * @method yo-btnbar 14 | * @param {String} $name 为新的扩展定义一个名称 15 | * @param {Length} $radius 圆角半径长度 16 | */ 17 | 18 | @mixin yo-btnbar( 19 | $name: default, 20 | $radius: default) { 21 | // 区别是否新增实例还是修改本身 22 | @if $name == default { 23 | $name: ""; 24 | } @else { 25 | $name: "-#{$name}"; 26 | } 27 | // 如果值为default，则取config的定义 28 | @if $radius == default { 29 | $radius: map-get($btnbar, radius); 30 | } 31 | .yo-btnbar#{$name} { 32 | > .yo-btn { 33 | // 如果工具栏定义了圆角且不等于config定义，则重绘圆角半径 34 | @if $radius != map-get($btnbar, radius) { 35 | &:first-child { 36 | border-top-left-radius: $radius; 37 | border-bottom-left-radius: $radius; 38 | } 39 | &:last-child { 40 | border-top-right-radius: $radius; 41 | border-bottom-right-radius: $radius; 42 | } 43 | } 44 | } 45 | // 增量扩展 46 | @content; 47 | } 48 | } 49 | 50 | // 调用本文件时载入btnbar基础构造 51 | .yo-btnbar { 52 | @include _btnbar; 53 | } -------------------------------------------------------------------------------- /src/styles/lib/fragment/yo-header.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class fragment 6 | */ 7 | 8 | /** 9 | * 构造头的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/fragment/yo-header.html) 12 | * @method yo-header 13 | * @param {String} $name 定义yo-header名称 14 | * @param {Length} $height 定义yo-header高度 15 | * @param {Length} $item-width 定义yo-header两侧子项宽度 16 | * @param {Length} $item-space 定义yo-header两侧子项离边界的间隙 17 | * @param {Color} $bordercolor 定义yo-header边框色 18 | * @param {Color} $bgcolor 定义yo-header背景色 19 | * @param {Color} $color 定义yo-header文本色 20 | * @param {Length} $font-size 定义yo-header文本大小 21 | * @param {Color} $item-color 定义yo-header两侧的子项文本色 22 | * @param {Color} $item-ico-color 定义yo-header两侧的ico色 23 | * @param {Length} $item-font-size 定义yo-header两侧的子项文本大小 24 | * @param {Length} $item-ico-size 定义yo-header两侧的ico大小 25 | */ 26 | 27 | @mixin yo-header( 28 | $name: default, 29 | $height: default, 30 | $item-width: default, 31 | $item-space: default, 32 | $bordercolor: default, 33 | $bgcolor: default, 34 | $color: default, 35 | $font-size: default, 36 | $item-color: default, 37 | $item-ico-color: default, 38 | $item-font-size: default, 39 | $item-ico-size: default) { 40 | // 区别是否新增实例还是修改本身 41 | @if $name == default { 42 | $name: ""; 43 | } @else { 44 | $name: "-#{$name}"; 45 | } 46 | // 如果值为default，则取config的定义 47 | @if $height == default { 48 | $height: map-get($header, height); 49 | } 50 | @if $item-width == default { 51 | $item-width: map-get($header, item-width); 52 | } 53 | @if $item-space == default { 54 | $item-space: map-get($header, item-space); 55 | } 56 | @if $bordercolor == default { 57 | $bordercolor: map-get($header, bordercolor); 58 | } 59 | @if $bgcolor == default { 60 | $bgcolor: map-get($header, bgcolor); 61 | } 62 | @if $color == default { 63 | $color: map-get($header, color); 64 | } 65 | @if $font-size == default { 66 | $font-size: map-get($header, font-size); 67 | } 68 | @if $item-color == default { 69 | $item-color: map-get($header, item-color); 70 | } 71 | @if $item-ico-color == default { 72 | $item-ico-color: map-get($header, item-ico-color); 73 | } 74 | @if $item-font-size == default { 75 | $item-font-size: map-get($header, item-font-size); 76 | } 77 | @if $item-ico-size == default { 78 | $item-ico-size: map-get($header, item-ico-size); 79 | } 80 | .yo-header#{$name} { 81 | @if $height != map-get($header, height) { 82 | height: $height; 83 | line-height: $height; 84 | } 85 | @if $bordercolor != map-get($header, bordercolor) { 86 | border-color: $bordercolor; 87 | } 88 | @if $bgcolor != map-get($header, bgcolor) { 89 | background-color: $bgcolor; 90 | } 91 | @if $color != map-get($header, color) { 92 | color: $color; 93 | } 94 | @if $font-size != map-get($header, font-size) { 95 | font-size: $font-size; 96 | } 97 | > .title { 98 | @if $item-width != map-get($header, item-width) { 99 | margin: 0 $item-width; 100 | } 101 | } 102 | > .regret, 103 | > .affirm { 104 | @if $item-width != map-get($header, item-width) { 105 | width: $item-width; 106 | } 107 | @if $item-color != map-get($header, item-color) { 108 | color: $item-color; 109 | } 110 | @if $item-font-size != map-get($header, item-font-size) { 111 | font-size: $item-font-size; 112 | } 113 | &.yo-ico, 114 | > .yo-ico { 115 | @if $item-ico-color != map-get($header, item-ico-color) { 116 | color: $item-ico-color; 117 | } 118 | @if $item-ico-size != map-get($header, item-ico-size) { 119 | font-size: $item-ico-size; 120 | } 121 | } 122 | } 123 | @if $item-space != map-get($header, item-space) { 124 | > .regret { 125 | padding-left: $item-space; 126 | } 127 | > .affirm { 128 | padding-right: $item-space; 129 | } 130 | } 131 | // 增量扩展 132 | @content; 133 | } 134 | } 135 | 136 | // 调用本文件时载入header基础构造 137 | .yo-header { 138 | @include _header; 139 | } -------------------------------------------------------------------------------- /src/styles/lib/fragment/yo-list.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class fragment 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/fragment/yo-list.html) 12 | * @method yo-list 13 | * @param {String} $name 定义list名称 14 | * @param {Length} $margin 定义list外边距 15 | * @param {Length} $radius 定义list圆角 16 | * @param {Length} $border-width 定义list外边框厚度 17 | * @param {Color} $bordercolor 定义list边框色 18 | * @param {Length} $item-padding 定义list项的内补白 19 | * @param {Length} $label-padding 定义list分组标题内补白 20 | * @param {Color} $label-bgcolor 定义list分组标题背景色 21 | * @param {Color} $active-bgcolor 定义list点击反馈背景色 22 | * @param {Color} $on-bgcolor 定义list选中背景色 23 | * @param {Color} $on-color 定义list选中文本色 24 | * @param {Color} $item-bordercolor 定义list子项边框色 25 | * @param {Color} $label-bordercolor 定义list子项组头边框色 26 | * @param {Length} $item-font-size 定义list项字号 27 | * @param {Length} $label-font-size 定义list列表组头字号 28 | * @param {Length} $item-border-space 列表项下边线距离左侧的间隙 29 | */ 30 | 31 | @mixin yo-list( 32 | $name: default, 33 | $margin: default, 34 | $radius: default, 35 | $border-width: default, 36 | $bordercolor: default, 37 | $item-padding: default, 38 | $label-padding: default, 39 | $label-bgcolor: default, 40 | $active-bgcolor: default, 41 | $on-bgcolor: default, 42 | $on-color: default, 43 | $item-bordercolor: default, 44 | $label-bordercolor: default, 45 | $item-font-size: default, 46 | $label-font-size: default, 47 | $item-border-space: default) { 48 | // 区别是否新增实例还是修改本身 49 | @if $name == default { 50 | $name: ""; 51 | } @else { 52 | $name: "-#{$name}"; 53 | } 54 | // 如果值为default，则取config的定义 55 | @if $margin == default { 56 | $margin: map-get($list, margin); 57 | } 58 | @if $radius == default { 59 | $radius: map-get($list, radius); 60 | } 61 | @if $border-width == default { 62 | $border-width: map-get($list, border-width); 63 | } 64 | @if $bordercolor == default { 65 | $bordercolor: map-get($list, bordercolor); 66 | } 67 | @if $item-padding == default { 68 | $item-padding: map-get($list, item-padding); 69 | } 70 | @if $label-padding == default { 71 | $label-padding: map-get($list, label-padding); 72 | } 73 | @if $label-bgcolor == default { 74 | $label-bgcolor: map-get($list, label-bgcolor); 75 | } 76 | @if $active-bgcolor == default { 77 | $active-bgcolor: map-get($list, active-bgcolor); 78 | } 79 | @if $on-bgcolor == default { 80 | $on-bgcolor: map-get($list, on-bgcolor); 81 | } 82 | @if $on-color == default { 83 | $on-color: map-get($list, on-color); 84 | } 85 | @if $item-bordercolor == default { 86 | $item-bordercolor: map-get($list, item-bordercolor); 87 | } 88 | @if $label-bordercolor == default { 89 | $label-bordercolor: map-get($list, label-bordercolor); 90 | } 91 | @if $label-font-size == default { 92 | $label-font-size: map-get($list, label-font-size); 93 | } 94 | @if $item-font-size == default { 95 | $item-font-size: map-get($list, item-font-size); 96 | } 97 | @if $item-border-space == default { 98 | $item-border-space: map-get($list, item-border-space); 99 | } 100 | .yo-list#{$name} { 101 | @if $margin != map-get($list, margin) { 102 | margin: $margin; 103 | } 104 | @if $radius != map-get($list, radius) { 105 | border-radius: $radius; 106 | } 107 | // 如果$border-width不等于config设定，则重绘边框相关 108 | @if $border-width != map-get($list, border-width) { 109 | // 如果$border-width为null，重设置为0 110 | @if $border-width == null { 111 | $border-width: 0; 112 | } 113 | border-width: $border-width; 114 | // 如果$bordercolor不等于config设定，则重绘边框色 115 | @if $bordercolor != map-get($list, bordercolor) { 116 | @if $border-width != 0 { 117 | border-color: $bordercolor; 118 | } 119 | } @else { 120 | // 如果config的边框厚度定义为null或者0，在扩展时，加上边框色 121 | @if map-get($list, border-width) == null or 122 | map-get($list, border-width) == 0 { 123 | border-color: map-get($list, bordercolor); 124 | } 125 | } 126 | // 如果config的边框厚度定义为null或者0，在扩展时，加上border-style 127 | @if map-get($list, border-width) == null or 128 | map-get($list, border-width) == 0 { 129 | border-style: solid; 130 | } 131 | } @else { 132 | // 如果扩展的边框厚度大于0且边框色和config边框色不同，在扩展时，重绘边框色 133 | @if $border-width != null and 134 | $border-width != 0 and 135 | $bordercolor != map-get($list, bordercolor) { 136 | border-color: $bordercolor; 137 | } 138 | } 139 | > .label { 140 | @if $label-padding != map-get($list, label-padding) { 141 | padding: $label-padding; 142 | > .col { 143 | padding: $label-padding; 144 | } 145 | } 146 | @if $label-bordercolor != map-get($list, label-bordercolor) { 147 | border-color: $label-bordercolor; 148 | } 149 | @if $label-bgcolor != map-get($list, label-bgcolor) { 150 | background-color: $label-bgcolor; 151 | } 152 | @if $label-font-size != map-get($list, label-font-size) { 153 | font-size: $label-font-size; 154 | } 155 | } 156 | > .item, 157 | .front { 158 | @if $item-padding != map-get($list, item-padding) { 159 | padding: $item-padding; 160 | > .col { 161 | padding: $item-padding; 162 | } 163 | } 164 | } 165 | > .item { 166 | @if $item-bordercolor != map-get($list, item-bordercolor) { 167 | @include gradient(linear, $item-bordercolor, $item-bordercolor); 168 | } 169 | @if $item-border-space != map-get($list, item-border-space) { 170 | background-position: $item-border-space bottom; 171 | } 172 | @if $item-font-size != map-get($list, item-font-size) { 173 | font-size: $item-font-size; 174 | } 175 | &:last-child { 176 | // 最后一根线的颜色与外边框颜色相同 177 | @if $bordercolor != map-get($list, bordercolor) { 178 | @include gradient(linear, $bordercolor, $bordercolor); 179 | } 180 | } 181 | &.item-active:active, 182 | &.item-light { 183 | @if $active-bgcolor != map-get($list, active-bgcolor) { 184 | background-color: $active-bgcolor; 185 | } 186 | } 187 | &.item-on { 188 | @if $on-bgcolor != map-get($list, on-bgcolor) { 189 | background-color: $on-bgcolor; 190 | } 191 | @if $on-color != map-get($list, on-color) { 192 | color: $on-color; 193 | } 194 | } 195 | } 196 | // 增量扩展 197 | @content; 198 | } 199 | } 200 | 201 | // 调用本文件时载入list基础构造 202 | .yo-list { 203 | @include _list; 204 | } -------------------------------------------------------------------------------- /src/styles/lib/fragment/yo-table.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class fragment 6 | */ 7 | 8 | /** 9 | * 构造表格的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/fragment/yo-table.html) 12 | * @method yo-table 13 | * @param {String} $name 定义table名称 14 | * @param {String} $width 定义table长度 15 | * @param {Boole} $has-vertical-border 定义table是否需要纵向边框 16 | * @param {Length} $thead-padding 定义table头部内补白 17 | * @param {Length} $tbody-padding 定义table主体内补白 18 | * @param {Color} $bordercolor 定义table边框色 19 | * @param {Color} $thead-bgcolor 定义table头部背景色 20 | * @param {Color} $odd-bgcolor 定义table奇数行背景色 21 | * @param {Color} $even-bgcolor 定义table偶数行背景色 22 | * @param {Color} $active-bgcolor 定义table激活背景色 23 | * @param {Color} $on-bgcolor 定义table选中背景色 24 | */ 25 | 26 | @mixin yo-table( 27 | $name: default, 28 | $width: default, 29 | $has-vertical-border: default, 30 | $thead-padding: default, 31 | $tbody-padding: default, 32 | $bordercolor: default, 33 | $thead-bgcolor: default, 34 | $odd-bgcolor: default, 35 | $even-bgcolor: default, 36 | $active-bgcolor: default, 37 | $on-bgcolor: default) { 38 | // 区别是否新增实例还是修改本身 39 | @if $name == default { 40 | $name: ""; 41 | } @else { 42 | $name: "-#{$name}"; 43 | } 44 | // 如果值为default，则取config的定义 45 | @if $has-vertical-border == default { 46 | $has-vertical-border: map-get($table, has-vertical-border); 47 | } 48 | @if $thead-padding == default { 49 | $thead-padding: map-get($table, thead-padding); 50 | } 51 | @if $tbody-padding == default { 52 | $tbody-padding: map-get($table, tbody-padding); 53 | } 54 | @if $bordercolor == default { 55 | $bordercolor: map-get($table, bordercolor); 56 | } 57 | @if $thead-bgcolor == default { 58 | $thead-bgcolor: map-get($table, thead-bgcolor); 59 | } 60 | @if $odd-bgcolor == default { 61 | $odd-bgcolor: map-get($table, odd-bgcolor); 62 | } 63 | @if $even-bgcolor == default { 64 | $even-bgcolor: map-get($table, even-bgcolor); 65 | } 66 | @if $active-bgcolor == default { 67 | $active-bgcolor: map-get($table, active-bgcolor); 68 | } 69 | @if $on-bgcolor == default { 70 | $on-bgcolor: map-get($table, on-bgcolor); 71 | } 72 | .yo-table#{$name} { 73 | @if $width != default { 74 | width: $width; 75 | } 76 | thead { 77 | @if $thead-bgcolor != none and $thead-bgcolor != map-get($table, thead-bgcolor) { 78 | background-color: $thead-bgcolor; 79 | } 80 | th { 81 | @if $thead-padding != map-get($table, thead-padding) { 82 | padding: $thead-padding; 83 | } 84 | } 85 | } 86 | td { 87 | @if $tbody-padding != map-get($table, tbody-padding) { 88 | padding: $tbody-padding; 89 | } 90 | } 91 | th,td { 92 | @if $has-vertical-border == false { 93 | @if $has-vertical-border != map-get($table, has-vertical-border) { 94 | border-width: 0 0 1px 0; 95 | } 96 | } @else { 97 | @if $has-vertical-border != map-get($table, has-vertical-border) { 98 | border-width: 1px; 99 | } 100 | } 101 | @if $bordercolor != map-get($table, bordercolor) { 102 | border-color: $bordercolor; 103 | } 104 | } 105 | tbody { 106 | tr:nth-child(odd) { 107 | @if $odd-bgcolor != map-get($table, odd-bgcolor) { 108 | background-color: $odd-bgcolor; 109 | } 110 | } 111 | tr:nth-child(even) { 112 | @if $even-bgcolor != map-get($table, even-bgcolor) { 113 | background-color: $even-bgcolor; 114 | } 115 | } 116 | tr:active, 117 | tr.active { 118 | @if $active-bgcolor != map-get($table, active-bgcolor) { 119 | background-color: $active-bgcolor; 120 | } 121 | } 122 | tr.on { 123 | @if $on-bgcolor != map-get($table, on-bgcolor) { 124 | background-color: $on-bgcolor; 125 | } 126 | } 127 | } 128 | // 增量扩展 129 | @content; 130 | } 131 | } 132 | 133 | // 调用本文件时载入table基础构造 134 | .yo-table { 135 | @include _table; 136 | } -------------------------------------------------------------------------------- /src/styles/lib/layout/classes.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/variables"; 3 | @import "../core/classes"; 4 | /** 5 | * Yo框架layout 6 | ----------------------- 7 | * Yo内置的布局方式 8 | * 9 | * @class layout 10 | * @module Yo 11 | */ 12 | 13 | // 定义区块的基础构造 14 | // 使用方法请查看 yo-stacked.scss 15 | @mixin _stacked { 16 | display: block; 17 | margin: map-get($stacked, margin); 18 | } 19 | 20 | // 定义常见弹性布局 21 | // 使用方法请查看 yo-flex.scss 22 | @mixin _flex { 23 | height: 100%; 24 | &, 25 | .flex-inherit { 26 | @include flexbox(map-get($flex, box)); 27 | @include flex-direction(map-get($flex, direction)); 28 | overflow: hidden; 29 | } 30 | > .flex, 31 | .flex-inherit, 32 | .flex-inherit > .flex { 33 | @include flex(1, column); 34 | position: relative; 35 | } 36 | > .flex, 37 | .flex-inherit > .flex { 38 | @include overflow; 39 | } 40 | } 41 | 42 | // 定义常见水平垂直居中布局 43 | // 使用方法请查看 yo-align.scss 44 | @mixin _align { 45 | @include flexbox; 46 | @include fullscreen; 47 | @include align-items; 48 | @include justify-content; 49 | } -------------------------------------------------------------------------------- /src/styles/lib/layout/yo-align.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class layout 6 | */ 7 | 8 | /** 9 | * 构造弹性布局内容对齐使用方法，可以是横向和纵向 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/layout/yo-align.html) 12 | * @method yo-align 13 | * @param {String} $name 为新的扩展定义一个名称 14 | * @param {String} $text-align 指定水平对齐方式 15 | * @param {String} $vertical-align 指定垂直对齐方式 16 | */ 17 | 18 | @mixin yo-align( 19 | $name: default, 20 | $text-align: default, 21 | $vertical-align: default) { 22 | // 区别是否新增实例还是修改本身 23 | @if $name == default { 24 | $name: ""; 25 | } @else { 26 | $name: "-#{$name}"; 27 | } 28 | // 如果值为default，则取config的定义 29 | @if $text-align == default { 30 | $text-align: map-get($align, text-align); 31 | } 32 | @if $vertical-align == default { 33 | $vertical-align: map-get($align, vertical-align); 34 | } 35 | .yo-align#{$name} { 36 | // 如果$text-align不等于config预设，则重绘弹性盒水平对齐方式 37 | @if $text-align != map-get($align, text-align) { 38 | @include align-items($text-align); 39 | } 40 | // 如果$vertical-align不等于config预设，则重绘弹性盒垂直对齐方式 41 | @if $vertical-align != map-get($align, vertical-align) { 42 | @include justify-content(vertical-align); 43 | } 44 | // 增量扩展 45 | @content; 46 | } 47 | } 48 | 49 | // 调用本文件时载入弹性布局基础构造 50 | .yo-align { 51 | @include _align; 52 | } -------------------------------------------------------------------------------- /src/styles/lib/layout/yo-flex.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class layout 6 | */ 7 | 8 | /** 9 | * 构造弹性布局使用方法，可以是横向和纵向 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/layout/yo-flex.html) 12 | * @method yo-flex 13 | * @param {String} $name 为新的扩展定义一个名称 14 | * @param {String} $box 指定块级或者行级弹性盒 15 | * @param {String} $direction 指定是水平或者垂直布局 16 | */ 17 | 18 | @mixin yo-flex( 19 | $name: default, 20 | $box: default, 21 | $direction: default) { 22 | // 区别是否新增实例还是修改本身 23 | @if $name == default { 24 | $name: ""; 25 | } @else { 26 | $name: "-#{$name}"; 27 | } 28 | // 如果值为default，则取config的定义 29 | @if $box == default { 30 | $box: map-get($flex, box); 31 | } 32 | @if $direction == default { 33 | $direction: map-get($flex, direction); 34 | } 35 | .yo-flex#{$name} { 36 | &, 37 | > .flex-inherit { 38 | // 如果$box不等于config预设，则重绘弹性盒类型 39 | @if $box != map-get($flex, box) { 40 | @include flexbox($box); 41 | } 42 | // 如果$direction不等于config预设，则重绘方向 43 | @if $direction != map-get($flex, direction) { 44 | @include flex-direction($direction); 45 | } 46 | } 47 | > .flex, 48 | > .flex-inherit, 49 | > .flex-inherit > .flex { 50 | // 如果$direction不等于config预设，则重绘方向 51 | @if $direction != map-get($flex, direction) { 52 | @include flex(1, $direction); 53 | } 54 | } 55 | // 增量扩展 56 | @content; 57 | } 58 | } 59 | 60 | // 调用本文件时载入弹性布局基础构造 61 | .yo-flex { 62 | @include _flex; 63 | } -------------------------------------------------------------------------------- /src/styles/lib/layout/yo-stacked.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class layout 6 | */ 7 | 8 | /** 9 | * 构造独立区块布局 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/layout/yo-stacked.html) 12 | * @method yo-stacked 13 | * @param {defailt | String} $name 定义名称 14 | * @param {defailt | Color} $margin 定义外边距 15 | */ 16 | 17 | @mixin yo-stacked( 18 | $name: default, 19 | $margin: default) { 20 | // 区别是否新增实例还是修改本身 21 | @if $name == default { 22 | $name: ""; 23 | } @else { 24 | $name: "-#{$name}"; 25 | } 26 | // 如果值为default，则取config的定义 27 | @if $margin == default { 28 | $margin: map-get($stacked, margin); 29 | } 30 | .yo-stacked#{$name} { 31 | // 如果$margin不等于margin，则重绘外边距 32 | @if $margin != map-get($stacked, margin) { 33 | margin: $margin; 34 | } 35 | // 增量扩展 36 | @content; 37 | } 38 | } 39 | 40 | // 调用本文件时载入区块基础构造 41 | .yo-stacked { 42 | @include _stacked; 43 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-dblist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-dblist.html) 12 | * @method yo-dblist 13 | * @param {default | String} $name 扩展的名称 14 | * @param {default | Length} $aside-width 侧边栏宽度 15 | * @param {default | Length} $aside-order 侧边栏顺序 16 | */ 17 | 18 | @mixin yo-dblist( 19 | $name: default, 20 | $aside-width: default, 21 | $aside-order: default) { 22 | // 区别是否新增实例还是修改本身 23 | @if $name == default { 24 | $name: ""; 25 | } @else { 26 | $name: "-#{$name}"; 27 | } 28 | // 如果值为default，则取config的定义 29 | @if $aside-width == default { 30 | $aside-width: map-get($dblist, aside-width); 31 | } 32 | @if $aside-order == default { 33 | $aside-order: map-get($dblist, aside-order); 34 | } 35 | .yo-dblist#{$name} { 36 | > .item { 37 | &:first-child { 38 | @if $aside-width != map-get($dblist, aside-width) { 39 | width: $aside-width; 40 | } 41 | @if $aside-order != map-get($dblist, aside-order) { 42 | @include order($aside-order); 43 | } 44 | } 45 | } 46 | // 增量扩展 47 | @content; 48 | } 49 | } 50 | 51 | // 调用本文件时载入dblist基础构造 52 | .yo-dblist { 53 | @include _dblist; 54 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-dialog.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | @import "../element/yo-btn"; 4 | 5 | /** 6 | * @class widget 7 | */ 8 | 9 | /** 10 | * 构造列表的自定义使用方法 11 | ----------------------- 12 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-dialog.html) 13 | * @method yo-dialog 14 | * @param {default | String} $name 定义dialog名称 15 | * @param {default | Length | null} $width 定义dialog宽度 16 | * @param {default | Length} $height 定义dialog高度 17 | * @param {default | Length} $radius 定义dialog圆角 18 | * @param {default | Number} $shadow-opacity 定义dialog阴影透明度 19 | * @param {default | Color} $bordercolor 定义dialog边框色 20 | * @param {default | Length} $hd-height 定义dialog头部高度 21 | * @param {default | Color} $hd-bgcolor 定义dialog头部背景色 22 | * @param {default | Color} $title-color 定义dialog标题文本色 23 | * @param {default | Length} $title-font-size 定义dialog标题字号 24 | * @param {default | Length} $bd-padding 定义dialog主体补白 25 | * @param {default | Length} $bd-font-size 定义dialog主体字号 26 | */ 27 | 28 | @mixin yo-dialog( 29 | $name: default, 30 | $width: default, 31 | $height: default, 32 | $radius: default, 33 | $shadow-opacity: default, 34 | $bordercolor: default, 35 | $hd-height: default, 36 | $hd-bgcolor: default, 37 | $title-color: default, 38 | $title-font-size: default, 39 | $bd-padding: default, 40 | $bd-font-size: default) { 41 | // 区别是否新增实例还是修改本身 42 | @if $name == default { 43 | $name: ""; 44 | } @else { 45 | $name: "-#{$name}"; 46 | } 47 | // 如果值为default，则取config的定义 48 | @if $width == default { 49 | $width: map-get($dialog, width); 50 | } 51 | @if $height == default { 52 | $height: map-get($dialog, height); 53 | } 54 | @if $radius == default { 55 | $radius: map-get($dialog, radius); 56 | } 57 | @if $shadow-opacity == default { 58 | $shadow-opacity: map-get($dialog, shadow-opacity); 59 | } 60 | @if $bordercolor == default { 61 | $bordercolor: map-get($dialog, bordercolor); 62 | } 63 | @if $hd-height == default { 64 | $hd-height: map-get($dialog, hd-height); 65 | } 66 | @if $hd-bgcolor == default { 67 | $hd-bgcolor: map-get($dialog, hd-bgcolor); 68 | } 69 | @if $title-color == default { 70 | $title-color: map-get($dialog, title-color); 71 | } 72 | @if $title-font-size == default { 73 | $title-font-size: map-get($dialog, title-font-size); 74 | } 75 | @if $bd-padding == default { 76 | $bd-padding: map-get($dialog, bd-padding); 77 | } 78 | @if $bd-font-size == default { 79 | $bd-font-size: map-get($dialog, bd-font-size); 80 | } 81 | .yo-dialog#{$name} { 82 | @if $radius != map-get($dialog, radius) { 83 | border-radius: $radius; 84 | } 85 | @if $bordercolor != map-get($dialog, bordercolor) { 86 | border-color: $bordercolor; 87 | box-shadow: 0 0 5px rgba($bordercolor, $shadow-opacity); 88 | } @else { 89 | @if $shadow-opacity != map-get($dialog, shadow-opacity) { 90 | box-shadow: 0 0 5px rgba($bordercolor, $shadow-opacity); 91 | } 92 | } 93 | @if $width != map-get($dialog, width) { 94 | width: $width; 95 | } 96 | @if $height != map-get($dialog, height) { 97 | height: $height; 98 | } 99 | > .hd { 100 | @if $hd-height != map-get($dialog, hd-height) { 101 | height: $hd-height; 102 | line-height: $hd-height; 103 | } 104 | @if $hd-bgcolor != map-get($dialog, hd-bgcolor) { 105 | background: $hd-bgcolor; 106 | } 107 | .title { 108 | @if $title-color != map-get($dialog, title-color) and $title-color != map-get($base, color) { 109 | color: $title-color; 110 | } 111 | @if $title-font-size != map-get($dialog, title-font-size) and $title-font-size != map-get($base, font-size) { 112 | font-size: $title-font-size; 113 | } 114 | } 115 | } 116 | > .bd { 117 | @if $bd-padding != map-get($dialog, bd-padding) { 118 | padding: $bd-padding; 119 | } 120 | @if $bd-font-size != map-get($dialog, bd-font-size) and $bd-font-size != map-get($base, font-size) { 121 | font-size: $bd-font-size; 122 | } 123 | } 124 | // 增量扩展 125 | @content; 126 | } 127 | } 128 | 129 | // 调用本文件时载入dialog基础构造 130 | .yo-dialog { 131 | @include _dialog; 132 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-group.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | @import "../fragment/yo-list"; 4 | @import "yo-index"; 5 | 6 | /** 7 | * @class widget 8 | */ 9 | 10 | /** 11 | * 构造列表的自定义使用方法 12 | ----------------------- 13 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-group.html) 14 | * @method yo-group 15 | * @param {default | String} $name 定义yo-group名称 16 | * @param {default | Length} $top 定义yo-group顶部偏移值 17 | */ 18 | 19 | @mixin yo-group( 20 | $name: default, 21 | $top: default) { 22 | // 区别是否新增实例还是修改本身 23 | @if $name == default { 24 | $name: ""; 25 | } @else { 26 | $name: "-#{$name}"; 27 | } 28 | // 如果值为default，则取config的定义 29 | @if $top == default { 30 | $top: map-get($group, top); 31 | } 32 | .yo-group#{$name} { 33 | @if $top != map-get($group, top) { 34 | top: $top; 35 | } 36 | // 增量扩展 37 | @content; 38 | } 39 | } 40 | 41 | // 调用本文件时载入group基础构造 42 | .yo-group { 43 | @include _group; 44 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-index.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-index.html) 12 | * @method yo-index 13 | * @param {default | String} $name 定义yo-index名称 14 | * @param {default | Length} $width 定义yo-index宽度 15 | * @param {default | Color} $color 定义yo-index文本色 16 | * @param {default | Length} $font-size 定义yo-index文本字号 17 | */ 18 | 19 | @mixin yo-index( 20 | $name: default, 21 | $width: default, 22 | $color: default, 23 | $font-size: default) { 24 | // 区别是否新增实例还是修改本身 25 | @if $name == default { 26 | $name: ""; 27 | } @else { 28 | $name: "-#{$name}"; 29 | } 30 | // 如果值为default，则取config的定义 31 | @if $width == default { 32 | $width: map-get($index, width); 33 | } 34 | @if $color == default { 35 | $color: map-get($index, color); 36 | } 37 | @if $font-size == default { 38 | $font-size: map-get($index, font-size); 39 | } 40 | .yo-index#{$name} { 41 | @if $width != map-get($index, width) { 42 | width: $width; 43 | } 44 | @if $color != map-get($index, color) { 45 | color: $color; 46 | } 47 | @if $font-size != map-get($index, font-size) { 48 | font-size: $font-size; 49 | } 50 | .ellipsis { 51 | @if $color != map-get($index, color) { 52 | background-color: $color; 53 | } 54 | @if $font-size != map-get($index, font-size) { 55 | @include square($font-size / 2); 56 | } 57 | } 58 | // 增量扩展 59 | @content; 60 | } 61 | } 62 | 63 | // 调用本文件时载入index基础构造 64 | .yo-index { 65 | @include _index; 66 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-mask.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-mask.html) 12 | * @method yo-mask 13 | * @param {default | String} $name 定义yo-mask名称 14 | * @param {default | Color} $bgcolor 定义yo-mask背景色 15 | */ 16 | 17 | @mixin yo-mask( 18 | $name: default, 19 | $bgcolor: default) { 20 | // 区别是否新增实例还是修改本身 21 | @if $name == default { 22 | $name: ""; 23 | } @else { 24 | $name: "-#{$name}"; 25 | } 26 | // 如果值为default，则取config的定义 27 | @if $bgcolor == default { 28 | $bgcolor: map-get($mask, bgcolor); 29 | } 30 | .yo-mask#{$name} { 31 | @if $bgcolor != map-get($mask, bgcolor) { 32 | background-color: rgba($bgcolor, .5); 33 | } 34 | // 增量扩展 35 | @content; 36 | } 37 | } 38 | 39 | // 调用本文件时载入mask基础构造 40 | .yo-mask { 41 | @include _mask; 42 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-number.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-number.html) 12 | * @method yo-number 13 | * @param {default | String} $name 定义yo-number名称 14 | * @param {default | Length} $width 定义yo-number宽度 15 | * @param {default | Length} $height 定义yo-number高度 16 | * @param {default | Color} $bordercolor 定义yo-number边框色 17 | * @param {default | Color} $color 定义yo-number输入框文本色 18 | * @param {default | Color} $sign-bgcolor 定义yo-number加减号背景色 19 | * @param {default | Color} $sign-color 定义yo-number加减号文本色 20 | * @param {default | Color} $disabled-sign-color 定义yo-number禁用文本色 21 | */ 22 | 23 | @mixin yo-number( 24 | $name: default, 25 | $width: default, 26 | $height: default, 27 | $bordercolor: default, 28 | $color: default, 29 | $sign-bgcolor: default, 30 | $sign-color: default, 31 | $disabled-sign-color: default) { 32 | // 区别是否新增实例还是修改本身 33 | @if $name == default { 34 | $name: ""; 35 | } @else { 36 | $name: "-#{$name}"; 37 | } 38 | // 如果值为default，则取config的定义 39 | @if $width == default { 40 | $width: map-get($number, width); 41 | } 42 | @if $height == default { 43 | $height: map-get($number, height); 44 | } 45 | @if $bordercolor == default { 46 | $bordercolor: map-get($number, bordercolor); 47 | } 48 | @if $color == default { 49 | $color: map-get($number,color); 50 | } 51 | @if $sign-bgcolor == default { 52 | $sign-bgcolor: map-get($number, sign-bgcolor); 53 | } 54 | @if $sign-color == default { 55 | $sign-color: map-get($number, sign-color); 56 | } 57 | @if $disabled-sign-color == default { 58 | $disabled-sign-color: map-get($number, disabled-sign-color); 59 | } 60 | .yo-number#{$name} { 61 | @if $width != map-get($number, width) { 62 | width: $width; 63 | } 64 | @if $height != map-get($number, height) { 65 | height: $height; 66 | line-height: $height; 67 | } 68 | @if $bordercolor != map-get($number, bordercolor) { 69 | border-color: $bordercolor; 70 | box-shadow: 1px 1px 1px rgba($bordercolor,.3); 71 | } 72 | > .minus, 73 | > .plus { 74 | width: .35rem; 75 | @if $sign-bgcolor != map-get($number, sign-bgcolor) { 76 | background-color: $sign-bgcolor; 77 | } 78 | @if $sign-color != map-get($number, sign-color) { 79 | color: $sign-color; 80 | } 81 | &.disabled{ 82 | @if $disabled-sign-color != map-get($number, disabled-sign-color) { 83 | color: $disabled-sign-color; 84 | } 85 | } 86 | } 87 | > .input { 88 | @if $bordercolor != map-get($number, bordercolor) { 89 | border-color: $bordercolor; 90 | box-shadow: inset 1px 1px 1px rgba($bordercolor,.2); 91 | } 92 | @if $color != map-get($number, color) { 93 | color: $color; 94 | } 95 | } 96 | // 增量扩展 97 | @content; 98 | } 99 | } 100 | 101 | // 调用本文件时载入number基础构造 102 | .yo-number { 103 | @include _number; 104 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-panel.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-panel.html) 12 | * @method yo-panel 13 | * @param {default | String} $name 定义yo-panel名称 14 | * @param {default | Length} $top 定义yo-panel顶部偏移值 15 | */ 16 | 17 | @mixin yo-panel( 18 | $name: default, 19 | $top: default) { 20 | // 区别是否新增实例还是修改本身 21 | @if $name == default { 22 | $name: ""; 23 | } @else { 24 | $name: "-#{$name}"; 25 | } 26 | // 如果值为default，则取config的定义 27 | @if $top == default { 28 | $top: map-get($group, top); 29 | } 30 | .yo-panel#{$name} { 31 | @if $top != map-get($group, top) { 32 | top: $top; 33 | } 34 | // 增量扩展 35 | @content; 36 | } 37 | } 38 | 39 | // 调用本文件时载入panel基础构造 40 | .yo-panel { 41 | @include _group; 42 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-popup.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-popup.html) 12 | * @method yo-popup 13 | * @param {default | String} $name 定义popup名称 14 | * @param {default | Length | null} $width 定义popup宽度 15 | * @param {default | Length} $height 定义popup高度 16 | * @param {default | Length} $radius 定义popup圆角 17 | * @param {default | Number} $shadow-opacity 定义popup阴影透明度 18 | * @param {default | Color} $bordercolor 定义popup边框色 19 | * @param {default | Length} $hd-height 定义popup头部高度 20 | * @param {default | Color} $hd-bgcolor 定义popup头部背景色 21 | * @param {default | Color} $title-color 定义popup标题文本色 22 | * @param {default | Length} $title-font-size 定义popup标题字号 23 | * @param {default | Length} $bd-padding 定义popup主体补白 24 | * @param {default | Length} $arrow-size 定义popup箭头高度 25 | */ 26 | 27 | @mixin yo-popup( 28 | $name: default, 29 | $width: default, 30 | $height: default, 31 | $radius: default, 32 | $shadow-opacity: default, 33 | $bordercolor: default, 34 | $hd-height: default, 35 | $hd-bgcolor: default, 36 | $title-color: default, 37 | $title-font-size: default, 38 | $bd-padding: default, 39 | $arrow-size: default) { 40 | // 区别是否新增实例还是修改本身 41 | @if $name == default { 42 | $name: ""; 43 | } @else { 44 | $name: "-#{$name}"; 45 | } 46 | // 如果值为default，则取config的定义 47 | @if $width == default { 48 | $width: map-get($popup, width); 49 | } 50 | @if $height == default { 51 | $height: map-get($popup, height); 52 | } 53 | @if $radius == default { 54 | $radius: map-get($popup, radius); 55 | } 56 | @if $bordercolor == default { 57 | $bordercolor: map-get($popup, bordercolor); 58 | } 59 | @if $shadow-opacity == default { 60 | $shadow-opacity: map-get($popup, shadow-opacity); 61 | } 62 | @if $hd-height == default { 63 | $hd-height: map-get($popup, hd-height); 64 | } 65 | @if $hd-bgcolor == default { 66 | $hd-bgcolor: map-get($popup, hd-bgcolor); 67 | } 68 | @if $title-color == default { 69 | $title-color: map-get($popup, title-color); 70 | } 71 | @if $title-font-size == default { 72 | $title-font-size: map-get($popup, title-font-size); 73 | } 74 | @if $bd-padding == default { 75 | $bd-padding: map-get($popup, bd-padding); 76 | } 77 | @if $arrow-size == default { 78 | $arrow-size: map-get($popup, arrow-size); 79 | } 80 | .yo-popup#{$name} { 81 | > .arrow::after{ 82 | @if $arrow-size != map-get($popup, arrow-size) { 83 | font-size: $arrow-size * 2; 84 | } 85 | } 86 | .arrow-top::after{ 87 | @if $arrow-size != map-get($popup, arrow-size) { 88 | top: -$arrow-size + .01rem; 89 | } 90 | @if $bordercolor != map-get($popup, bordercolor) { 91 | text-shadow: 0 -1px $bordercolor; 92 | } 93 | } 94 | .arrow-down::after { 95 | @if $arrow-size != map-get($popup, arrow-size) { 96 | bottom: -$arrow-size + .01rem; 97 | } 98 | @if $bordercolor != map-get($popup, bordercolor) { 99 | text-shadow: 0 1px $bordercolor; 100 | } 101 | } 102 | .arrow-right::after { 103 | @if $arrow-size != map-get($popup, arrow-size) { 104 | right: -$arrow-size + .01rem; 105 | } 106 | @if $bordercolor != map-get($popup, bordercolor) { 107 | text-shadow: 1px 0 $bordercolor; 108 | } 109 | } 110 | .arrow-left::after { 111 | @if $arrow-size != map-get($popup, arrow-size) { 112 | left: -$arrow-size + .01rem; 113 | } 114 | @if $bordercolor != map-get($popup, bordercolor) { 115 | text-shadow: -1px 0 $bordercolor; 116 | } 117 | } 118 | .arrow-extra.arrow::after { 119 | @if $hd-bgcolor != map-get($popup, hd-bgcolor) { 120 | color: $hd-bgcolor; 121 | } 122 | } 123 | @if $radius != map-get($popup, radius) { 124 | border-radius: $radius; 125 | } 126 | @if $bordercolor != map-get($popup, bordercolor) { 127 | border-color: $bordercolor; 128 | box-shadow: 0 0 5px rgba($bordercolor, $shadow-opacity); 129 | } @else { 130 | @if $shadow-opacity != map-get($popup, shadow-opacity) { 131 | box-shadow: 0 0 5px rgba($bordercolor, $shadow-opacity); 132 | } 133 | } 134 | @if $width != map-get($popup, width) { 135 | width: $width; 136 | } 137 | @if $height != map-get($popup, height) { 138 | height: $height; 139 | } 140 | > .hd { 141 | @if $radius != map-get($popup, radius) { 142 | border-radius: $radius $radius 0 0; 143 | } 144 | @if $hd-height != map-get($popup, hd-height) { 145 | height: $hd-height; 146 | line-height: $hd-height; 147 | } 148 | @if $bordercolor != map-get($popup, bordercolor) { 149 | border-bottom-color: $bordercolor; 150 | } 151 | @if $hd-bgcolor != map-get($popup, hd-bgcolor) { 152 | background: $hd-bgcolor; 153 | } 154 | .title { 155 | @if $title-color != map-get($popup, title-color) and $title-color != map-get($base, color) { 156 | color: $title-color; 157 | } 158 | @if $title-font-size != map-get($popup, title-font-size) and $title-font-size != map-get($base, font-size) { 159 | font-size: $title-font-size; 160 | } 161 | } 162 | } 163 | > .bd { 164 | @if $bd-padding != map-get($popup, bd-padding) { 165 | padding: $bd-padding; 166 | } 167 | } 168 | > .ft { 169 | @if $bordercolor != map-get($popup, bordercolor) { 170 | border-color: $bordercolor; 171 | } 172 | } 173 | // 增量扩展 174 | @content; 175 | } 176 | } 177 | 178 | // 调用本文件时载入popup基础构造 179 | .yo-popup { 180 | @include _popup; 181 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-rating.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-rating.html) 12 | * @method yo-rating 13 | * @param {default | String} $name 定义yo-rating名称 14 | * @param {default | Length} $item-width 定义yo-rating 单项宽度 15 | * @param {default | Length} $item-height 定义yo-rating 单项高度 16 | * @param {default | Color} $url 定义yo-rating 图片url 17 | */ 18 | 19 | @mixin yo-rating( 20 | $name: default, 21 | $item-width: default, 22 | $item-height: default, 23 | $url: default) { 24 | // 区别是否新增实例还是修改本身 25 | @if $name == default { 26 | $name: ""; 27 | } @else { 28 | $name: "-#{$name}"; 29 | } 30 | // 如果值为default，则取config的定义 31 | @if $item-width == default { 32 | $item-width: map-get($rating, item-width); 33 | } 34 | @if $item-height == default { 35 | $item-height: map-get($rating, item-height); 36 | } 37 | @if $url == default { 38 | $url: map-get($rating, url); 39 | } 40 | .yo-rating#{$name} { 41 | @if $item-width != map-get($rating, item-width) { 42 | width: $item-width * 5; 43 | } 44 | @if $item-height != map-get($rating, item-height) { 45 | height: $item-height; 46 | } 47 | &, 48 | > .index, 49 | > .item { 50 | @if $url != map-get($rating, url) { 51 | background-image: url(#{map-get($setting, bgimg-domain)}#{$url}); 52 | } 53 | @if $item-height != map-get($rating, item-height) { 54 | background-size: auto $item-height * 2; 55 | } 56 | } 57 | > .index { 58 | @if $item-height != map-get($rating, item-height) { 59 | background-position: 0 -#{$item-height}; 60 | } 61 | } 62 | > .item { 63 | &:hover { 64 | @if $item-height != map-get($rating, item-height) { 65 | background-position: 0 -#{$item-height}; 66 | } 67 | } 68 | } 69 | // 增量扩展 70 | @content; 71 | } 72 | } 73 | 74 | // 调用本文件时载入rating基础构造 75 | .yo-rating { 76 | @include _rating; 77 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-select.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-select.html) 12 | * @method yo-select 13 | * @param {default | String} $name 定义select名称 14 | * @param {default | Length} $width 定义select显示的子项个数 15 | * @param {default | Length} $height 定义select子项高度 16 | * @param {default | Color} $bordercolor 定义select边框色 17 | */ 18 | 19 | @mixin yo-select( 20 | $name: default, 21 | $item: default, 22 | $item-height: default, 23 | $bordercolor: default) { 24 | // 区别是否新增实例还是修改本身 25 | @if $name == default { 26 | $name: ""; 27 | } @else { 28 | $name: "-#{$name}"; 29 | } 30 | // 如果值为default，则取config的定义 31 | @if $item == default { 32 | $item: map-get($select, item); 33 | } 34 | @if $item-height == default { 35 | $item-height: map-get($select, item-height); 36 | } 37 | @if $bordercolor == default { 38 | $bordercolor: map-get($select, bordercolor); 39 | } 40 | .yo-select#{$name} { 41 | @if $item-height != map-get($select, item-height) or $item != map-get($select, item) { 42 | height: $item-height * $item; 43 | line-height: $item-height; 44 | } 45 | &::before { 46 | @if $item-height != map-get($select, item-height) { 47 | height: $item-height; 48 | margin-top: -#{$item-height / 2}; 49 | } 50 | @if $bordercolor != map-get($select, bordercolor) { 51 | border-color: $bordercolor; 52 | } 53 | } 54 | &-item-tag { 55 | @if $item-height != map-get($select, item-height) or $item != map-get($select, item) { 56 | line-height: $item-height * $item; 57 | } 58 | } 59 | // 增量扩展 60 | @content; 61 | } 62 | } 63 | 64 | // 调用本文件时载入select基础构造 65 | .yo-select { 66 | @include _select; 67 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-slidermenu.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-slidermenu.html) 12 | * @method yo-slidermenu 13 | * @param {default | String} $name 扩展的名称 14 | * @param {default | Length} $action-width 定义action宽度 15 | * @param {default | Color} $action-bgcolor 定义action背景色 16 | */ 17 | 18 | @mixin yo-slidermenu( 19 | $name: default, 20 | $action-width: default, 21 | $action-bgcolor: default) { 22 | // 区别是否新增实例还是修改本身 23 | @if $name == default { 24 | $name: ""; 25 | } @else { 26 | $name: "-#{$name}"; 27 | } 28 | // 如果值为default，则取config的定义 29 | @if $action-width == default { 30 | $action-width: map-get($slidermenu, action-width); 31 | } 32 | @if $action-bgcolor == default { 33 | $action-bgcolor: map-get($slidermenu, action-bgcolor); 34 | } 35 | .yo-slidermenu#{$name} { 36 | > .action { 37 | @if $action-width != map-get($slidermenu, action-width) { 38 | width: $action-width; 39 | } 40 | @if $action-bgcolor != map-get($slidermenu, action-bgcolor) { 41 | background-color: $action-bgcolor; 42 | } 43 | } 44 | // 增量扩展 45 | @content; 46 | } 47 | } 48 | 49 | // 调用本文件时载入slidermenu基础构造 50 | .yo-slidermenu { 51 | @include _slidermenu; 52 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-suggest.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-suggest.html) 12 | * @method yo-suggest 13 | * @param {default | String} $name 定义yo-suggest名称 14 | * @param {default | Length} $height 定义yo-suggest高度 15 | * @param {default | Length} $font-size 定义yo-suggest文本大小 16 | * @param {default | Length} $op-padding 定义yo-suggest内补白 17 | * @param {default | Length} $radius 定义yo-suggest圆角 18 | * @param {default | Color} $bordercolor 定义yo-suggest边框色 19 | * @param {default | Color} $bgcolor 定义yo-suggest背景色 20 | * @param {default | Color} $color 定义yo-suggest文本色 21 | * @param {default | Color} $on-bordercolor 定义yo-suggest激活边框色 22 | * @param {default | Color} $on-bgcolor 定义yo-suggest激活背景色 23 | * @param {default | Color} $placeholder-color 定义yo-suggest占位背景色 24 | * @param {default | Color} $ico-color 定义yo-suggest 操作区ico颜色 25 | * @param {default | Color} $cancel-color 定义yo-suggest取消按钮颜色 26 | * @param {default | Color} $op-bgcolor 定义yo-suggest搜索区域背景色 27 | * @param {default | Color} $mask-bgcolor 定义yo-suggest遮罩背景色 28 | * @param {default | Length} $cancel-width 取消按钮区域宽度 29 | */ 30 | 31 | @mixin yo-suggest( 32 | $name: default, 33 | $height: default, 34 | $font-size: default, 35 | $op-padding: default, 36 | $radius: default, 37 | $bordercolor: default, 38 | $bgcolor: default, 39 | $color: default, 40 | $on-bordercolor: default, 41 | $on-bgcolor: default, 42 | $placeholder-color: default, 43 | $ico-color: default, 44 | $cancel-color: default, 45 | $op-bgcolor: default, 46 | $mask-bgcolor: default, 47 | $cancel-width: default) { 48 | // 区别是否新增实例还是修改本身 49 | @if $name == default { 50 | $name: ""; 51 | } @else { 52 | $name: "-#{$name}"; 53 | } 54 | // 如果值为default，则取config的定义 55 | @if $height == default { 56 | $height: map-get($suggest, height); 57 | } 58 | @if $font-size == default { 59 | $font-size: map-get($suggest, font-size); 60 | } 61 | @if $op-padding == default { 62 | $op-padding: map-get($suggest, op-padding); 63 | } 64 | @if $radius == default { 65 | $radius: map-get($suggest, radius); 66 | } 67 | @if $bordercolor == default { 68 | $bordercolor: map-get($suggest, bordercolor); 69 | } 70 | @if $bgcolor == default { 71 | $bgcolor: map-get($suggest, bgcolor); 72 | } 73 | @if $color == default { 74 | $color: map-get($suggest,color); 75 | } 76 | @if $on-bordercolor == default { 77 | $on-bordercolor: map-get($suggest, on-bordercolor); 78 | } 79 | @if $on-bgcolor == default { 80 | $on-bgcolor: map-get($suggest, on-bgcolor); 81 | } 82 | @if $placeholder-color == default { 83 | $placeholder-color: map-get($suggest, placeholder-color); 84 | } 85 | @if $ico-color == default { 86 | $ico-color: map-get($suggest, ico-color); 87 | } 88 | @if $cancel-color == default { 89 | $cancel-color: map-get($suggest, cancel-color); 90 | } 91 | @if $op-bgcolor == default { 92 | $op-bgcolor: map-get($suggest, op-bgcolor); 93 | } 94 | @if $mask-bgcolor == default { 95 | $mask-bgcolor: map-get($suggest, mask-bgcolor); 96 | } 97 | @if $cancel-width == default { 98 | $cancel-width: map-get($suggest, cancel-width); 99 | } 100 | .yo-suggest#{$name} { 101 | > .operate { 102 | @if $font-size != map-get($suggest, font-size) { 103 | font-size: $font-size; 104 | } 105 | @if $height != map-get($suggest, height) { 106 | line-height: $height; 107 | } 108 | @if $op-padding != map-get($suggest, op-padding) { 109 | padding: $op-padding; 110 | } 111 | @if $bordercolor != map-get($suggest, bordercolor) { 112 | border-bottom-color: $bordercolor; 113 | } 114 | @if $op-bgcolor != map-get($suggest, op-bgcolor) { 115 | background-color: $op-bgcolor; 116 | } 117 | > .action { 118 | @if $height != map-get($suggest, height) { 119 | height: $height; 120 | } 121 | > .input { 122 | @if $bordercolor != map-get($suggest, bordercolor) { 123 | border-color: $bordercolor; 124 | } 125 | @if $radius != map-get($suggest, radius) { 126 | border-radius: $radius; 127 | } 128 | @if $bgcolor != map-get($suggest, bgcolor) { 129 | background-color: $bgcolor; 130 | } 131 | @if $color != map-get($suggest, color) { 132 | color: $color; 133 | } 134 | @if $font-size != map-get($suggest, font-size) { 135 | font-size: $font-size; 136 | } 137 | } 138 | > .yo-ico-delete, 139 | > .yo-ico-fresh, 140 | > .yo-ico-stop { 141 | @if $ico-color != map-get($suggest, ico-color) { 142 | color: $ico-color; 143 | } 144 | } 145 | > .label { 146 | @if $placeholder-color != map-get($suggest, placeholder-color) { 147 | color: $placeholder-color; 148 | } 149 | } 150 | } 151 | > .cancel { 152 | @if $cancel-width != map-get($suggest, cancel-width) { 153 | width: $cancel-width; 154 | } 155 | @if $cancel-color != map-get($suggest, cancel-color) { 156 | color: $cancel-color; 157 | } 158 | } 159 | &-on, 160 | &-fresh, 161 | &-stop { 162 | > .action > .input { 163 | @if $on-bordercolor != map-get($suggest, on-bordercolor) { 164 | border-color: $on-bordercolor; 165 | } 166 | @if $on-bgcolor != map-get($suggest, on-bgcolor) { 167 | background-color: $on-bgcolor; 168 | } 169 | } 170 | } 171 | &-on { 172 | > .action { 173 | @if $cancel-width != map-get($suggest, cancel-width) { 174 | margin-right: $cancel-width; 175 | } 176 | } 177 | } 178 | } 179 | > .cont { 180 | @if $mask-bgcolor != map-get($suggest, mask-bgcolor) { 181 | background-color: rgba($mask-bgcolor, .9); 182 | } 183 | } 184 | // 增量扩展 185 | @content; 186 | } 187 | } 188 | 189 | // 调用本文件时载入suggest基础构造 190 | .yo-suggest { 191 | @include _suggest; 192 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-switch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-switch.html) 12 | * @method yo-switch 13 | * @param {default | String} $name 定义switch名称 14 | * @param {default | Color} $checked-bordercolor 定义switch激活边框色 15 | * @param {default | Color} $checked-bgcolor 定义switch激活背景色 16 | * @param {default | Color} $bordercolor 定义switch边框色 17 | * @param {default | Color} $bgcolor 定义switch背景色 18 | * @param {default | Color} $ball-color 定义switch滑块色 19 | */ 20 | 21 | @mixin yo-switch( 22 | $name: default, 23 | $checked-bordercolor: default, 24 | $checked-bgcolor: default, 25 | $bordercolor: default, 26 | $bgcolor: default, 27 | $ball-color: default) { 28 | // 区别是否新增实例还是修改本身 29 | @if $name == default { 30 | $name: ""; 31 | } @else { 32 | $name: "-#{$name}"; 33 | } 34 | // 如果值为default，则取config的定义 35 | @if $bordercolor == default { 36 | $bordercolor: map-get($switch, bordercolor); 37 | } 38 | @if $bgcolor == default { 39 | $bgcolor: map-get($switch, bgcolor); 40 | } 41 | @if $ball-color == default { 42 | $ball-color: map-get($switch, ball-color); 43 | } 44 | @if $checked-bordercolor == default { 45 | $checked-bordercolor: map-get($switch, checked-bordercolor); 46 | } 47 | @if $checked-bgcolor == default { 48 | $checked-bgcolor: map-get($switch, checked-bgcolor); 49 | } 50 | .yo-switch#{$name} { 51 | > .track { 52 | @if $bordercolor != map-get($switch, bordercolor) { 53 | border-color: $bordercolor; 54 | } 55 | @if $bgcolor != map-get($switch, bgcolor) { 56 | background-color: $bgcolor; 57 | } 58 | > .handle { 59 | @if $ball-color != map-get($switch, ball-color) { 60 | background-color: $ball-color; 61 | } 62 | } 63 | } 64 | > input:checked + .track { 65 | @if $checked-bordercolor != map-get($switch, checked-bordercolor) { 66 | border-color: $checked-bordercolor; 67 | } 68 | @if $checked-bgcolor != map-get($switch, checked-bgcolor) { 69 | background-color: $checked-bgcolor; 70 | } 71 | } 72 | // 增量扩展 73 | @content; 74 | } 75 | } 76 | 77 | // 调用本文件时载入switch基础构造 78 | .yo-switch { 79 | @include _switch; 80 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-switchable.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-switchable.html) 12 | * @method yo-switchable 13 | * @param {default | String} $name 扩展的名称 14 | * @param {default | Boolen} $has-btn 是否有按钮 15 | * @param {default | Length} $btn-size 按钮大小 16 | * @param {default | Length} $btn-bgcolor 按钮背景色 17 | * @param {default | Length} $btn-color 按钮文本色 18 | * @param {default | Color} $btn-active-bgcolor 按钮按下背景色 19 | * @param {default | Length} $btn-active-color 按钮按下文本色 20 | * @param {default | Length} $index-size 索引大小 21 | * @param {default | Color} $index-bgcolor 索引背景色 22 | * @param {default | Length} $index-on-bgcolor 索引当前项背景色 23 | */ 24 | 25 | @mixin yo-switchable( 26 | $name: default, 27 | $has-btn: default, 28 | $btn-size: default, 29 | $btn-bgcolor: default, 30 | $btn-color: default, 31 | $btn-active-bgcolor: default, 32 | $btn-active-color: default, 33 | $index-size: default, 34 | $index-bgcolor: default, 35 | $index-on-bgcolor: default) { 36 | // 区别是否新增实例还是修改本身 37 | @if $name == default { 38 | $name: ""; 39 | } @else { 40 | $name: "-#{$name}"; 41 | } 42 | // 如果值为default，则取config的定义 43 | @if $has-btn == default { 44 | $has-btn: map-get($switchable, has-btn); 45 | } 46 | @if $btn-size == default { 47 | $btn-size: map-get($switchable, btn-size); 48 | } 49 | @if $btn-bgcolor == default { 50 | $btn-bgcolor: map-get($switchable, btn-bgcolor); 51 | } 52 | @if $btn-color == default { 53 | $btn-color: map-get($switchable, btn-color); 54 | } 55 | @if $btn-active-bgcolor == default { 56 | $btn-active-bgcolor: map-get($switchable, btn-active-bgcolor); 57 | } 58 | @if $btn-active-color == default { 59 | $btn-active-color: map-get($switchable, btn-active-color); 60 | } 61 | @if $index-size == default { 62 | $index-size: map-get($switchable, index-size); 63 | } 64 | @if $index-bgcolor == default { 65 | $index-bgcolor: map-get($switchable, index-bgcolor); 66 | } 67 | @if $index-on-bgcolor == default { 68 | $index-on-bgcolor: map-get($switchable, index-on-bgcolor); 69 | } 70 | .yo-switchable#{$name} { 71 | > .index { 72 | > li { 73 | @if $index-size != map-get($switchable, index-size) { 74 | @include square($index-size); 75 | } 76 | @if $index-bgcolor != map-get($switchable, index-bgcolor) { 77 | background-color: $index-bgcolor; 78 | } 79 | &.on { 80 | @if $index-on-bgcolor != map-get($switchable, index-on-bgcolor) { 81 | background-color: $index-on-bgcolor; 82 | } 83 | } 84 | } 85 | } 86 | > .yo-ico { 87 | @if $has-btn != map-get($switchable, has-btn) { 88 | @if $has-btn == false { 89 | display: none; 90 | } @else { 91 | display: inline; 92 | } 93 | } 94 | @if $btn-size != map-get($switchable, btn-size) { 95 | @include square($btn-size); 96 | line-height: $btn-size; 97 | } 98 | @if $btn-bgcolor != map-get($switchable, btn-bgcolor) { 99 | background-color: $btn-bgcolor; 100 | } 101 | @if $btn-color != map-get($switchable, btn-color) { 102 | color: $btn-color; 103 | } 104 | &:active { 105 | @if $btn-active-bgcolor != map-get($switchable, btn-active-bgcolor) { 106 | background-color: $btn-active-bgcolor; 107 | } 108 | @if $btn-active-color != map-get($switchable, btn-active-color) { 109 | color: $btn-active-color; 110 | } 111 | } 112 | } 113 | // 增量扩展 114 | @content; 115 | } 116 | } 117 | 118 | // 调用本文件时载入switchableable基础构造 119 | .yo-switchable { 120 | @include _switchable; 121 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-tab.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-tab.html) 12 | * @method yo-tab 13 | * @param {default | String} $name 扩展的名称 14 | * @param {default | Length} $height 组件高度 15 | * @param {default | Length} $radius 圆角半径 16 | * @param {default | Length} $border-width 边框厚度 17 | * @param {default | Color} $bordercolor 边框色 18 | * @param {default | Color} $bgcolor 背景色 19 | * @param {default | Color} $color 文本色 20 | * @param {default | Color} $on-bgcolor 激活时背景色 21 | * @param {default | Color} $on-color 激活时文本色 22 | * @param {default | Color} $font-size 文本字号 23 | * @param {default | Color} $x-ico-size 子项内容为水平ico时，ico的大小 24 | * @param {default | Color} $y-ico-size 子项内容为垂直ico时，ico的大小 25 | * @param {default | Color} $only-ico-size 子项内容仅有ico时，ico的大小 26 | * @param {default | Length} $item-border-height 子项的间隔线高度 27 | * @param {default | Color} $item-bordercolor 子项的间隔线颜色 28 | */ 29 | 30 | @mixin yo-tab( 31 | $name: default, 32 | $height: default, 33 | $radius: default, 34 | $border-width: default, 35 | $bordercolor: default, 36 | $bgcolor: default, 37 | $color: default, 38 | $on-bordercolor: default, 39 | $on-bgcolor: default, 40 | $on-color: default, 41 | $font-size: default, 42 | $x-ico-size: default, 43 | $y-ico-size: default, 44 | $only-ico-size: default, 45 | $item-border-height: default, 46 | $item-bordercolor: default) { 47 | // 区别是否新增实例还是修改本身 48 | @if $name == default { 49 | $name: ""; 50 | } @else { 51 | $name: "-#{$name}"; 52 | } 53 | // 如果值为default，则取config的定义 54 | @if $height == default { 55 | $height: map-get($tab, height); 56 | } 57 | @if $radius == default { 58 | $radius: map-get($tab, radius); 59 | } 60 | @if $border-width == default { 61 | $border-width: map-get($tab, border-width); 62 | } 63 | @if $bordercolor == default { 64 | $bordercolor: map-get($tab, bordercolor); 65 | } 66 | @if $bgcolor == default { 67 | $bgcolor: map-get($tab, bgcolor); 68 | } 69 | @if $color == default { 70 | $color: map-get($tab, color); 71 | } 72 | @if $on-bordercolor == default { 73 | $on-bordercolor: map-get($tab, on-bordercolor); 74 | } 75 | @if $on-bgcolor == default { 76 | $on-bgcolor: map-get($tab, on-bgcolor); 77 | } 78 | @if $on-color == default { 79 | $on-color: map-get($tab, on-color); 80 | } 81 | @if $font-size == default { 82 | $font-size: map-get($tab, font-size); 83 | } 84 | @if $x-ico-size == default { 85 | $x-ico-size: map-get($tab, x-ico-size); 86 | } 87 | @if $y-ico-size == default { 88 | $y-ico-size: map-get($tab, y-ico-size); 89 | } 90 | @if $only-ico-size == default { 91 | $only-ico-size: map-get($tab, only-ico-size); 92 | } 93 | @if $item-border-height == default { 94 | $item-border-height: map-get($tab, item-border-height); 95 | } 96 | @if $item-bordercolor == default { 97 | $item-bordercolor: map-get($tab, item-bordercolor); 98 | } 99 | .yo-tab#{$name} { 100 | @if $height != map-get($tab, height) { 101 | height: $height; 102 | line-height: $height; 103 | } 104 | // 如果边框色与config值不同，则重设边框色 105 | @if $radius != map-get($tab, radius) { 106 | border-radius: $radius; 107 | } 108 | @if $border-width != map-get($tab, border-width) { 109 | border-width: $border-width; 110 | } 111 | @if $bordercolor != map-get($tab, bordercolor) { 112 | border-color: $bordercolor; 113 | } 114 | @if $bgcolor != map-get($tab, bgcolor) { 115 | background-color: $bgcolor; 116 | } 117 | @if $font-size != map-get($tab, font-size) and map-get($tab, font-size) != map-get($base, font-size) { 118 | font-size: $font-size; 119 | } 120 | > .item { 121 | &:not(:last-child)::after { 122 | @if $item-border-height != map-get($tab, item-border-height) { 123 | height: $item-border-height; 124 | } 125 | @if $item-bordercolor != map-get($tab, item-bordercolor) { 126 | background-color: $item-bordercolor; 127 | } 128 | } 129 | @if $color != map-get($tab, color) { 130 | color: $color; 131 | } 132 | &.item-on { 133 | @if $on-bgcolor != map-get($tab, on-bgcolor) { 134 | background-color: $on-bgcolor; 135 | } 136 | @if $on-color != map-get($tab, on-color) { 137 | color: $on-color; 138 | } 139 | } 140 | &-top-ico { 141 | .yo-ico { 142 | @if $y-ico-size != map-get($tab, y-ico-size) { 143 | font-size: $y-ico-size; 144 | } 145 | } 146 | } 147 | &-left-ico { 148 | .yo-ico { 149 | @if $x-ico-size != map-get($tab, x-ico-size) { 150 | font-size: $x-ico-size; 151 | } 152 | } 153 | } 154 | &-only-ico { 155 | .yo-ico { 156 | @if $only-ico-size != map-get($tab, only-ico-size) { 157 | font-size: $only-ico-size; 158 | } 159 | } 160 | } 161 | } 162 | // 增量扩展 163 | @content; 164 | } 165 | } 166 | 167 | // 调用本文件时载入tab基础构造 168 | .yo-tab { 169 | @include _tab; 170 | } -------------------------------------------------------------------------------- /src/styles/lib/widget/yo-tip.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @class widget 6 | */ 7 | 8 | /** 9 | * 构造列表的自定义使用方法 10 | ----------------------- 11 | * 使用方法，详见 [Demo](http://doyoe.github.io/Yo/demo/widget/yo-tip.html) 12 | * @method yo-tip 13 | * @param {default | String} $name 定义yo-tip名称 14 | * @param {default | Length} $padding 定义yo-tip内补白 15 | * @param {default | Length} $radius 定义yo-tip圆角 16 | * @param {default | Color} $bgcolor 定义yo-tip背景色 17 | * @param {default | Color} $color 定义yo-tip文本色 18 | */ 19 | 20 | @mixin yo-tip( 21 | $name: default, 22 | $padding: default, 23 | $radius: default, 24 | $bgcolor: default, 25 | $color: default) { 26 | // 区别是否新增实例还是修改本身 27 | @if $name == default { 28 | $name: ""; 29 | } @else { 30 | $name: "-#{$name}"; 31 | } 32 | // 如果值为default，则取config的定义 33 | @if $padding == default { 34 | $padding: map-get($tip, padding); 35 | } 36 | @if $radius == default { 37 | $radius: map-get($tip, radius); 38 | } 39 | @if $bgcolor == default { 40 | $bgcolor: map-get($tip, bgcolor); 41 | } 42 | @if $color == default { 43 | $color: map-get($tip,color); 44 | } 45 | .yo-tip#{$name} { 46 | @if $padding != map-get($tip, padding) { 47 | padding: $padding; 48 | } 49 | @if $radius != map-get($tip, radius) { 50 | border-radius: $radius; 51 | } 52 | @if $bgcolor != map-get($tip, bgcolor) { 53 | background-color: rgba($bgcolor, .5); 54 | } 55 | @if $color != map-get($tip, color) { 56 | color: $color; 57 | } 58 | // 增量扩展 59 | @content; 60 | } 61 | } 62 | 63 | // 调用本文件时载入tip基础构造 64 | .yo-tip { 65 | @include _tip; 66 | } -------------------------------------------------------------------------------- /src/styles/usage/app.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./layout/layout.scss"; 3 | @import "./core/swiper-3.3.1.min.css"; 4 | 5 | // Views 6 | @import "./modules/home.scss"; 7 | @import "./modules/index.scss"; 8 | @import "./modules/nav.scss"; 9 | 10 | -------------------------------------------------------------------------------- /src/styles/usage/core/common.scss: -------------------------------------------------------------------------------- 1 | $font-heiti-light: Heiti SC Light, Helvetica Neue, Helvetica, STHeiTi, sans-serif; 2 | $font-heiti-medium: Heiti SC Medium, Heiti SC Light, Helvetica Neue, Helvetica, STHeiTi, sans-serif; 3 | 4 | $base-color: #EA4438; 5 | 6 | @font-face { 7 | font-family: yofont; 8 | src: url("/mywebapp/images/iconfonts/iconfont.woff") format("woff"), url("/mywebapp/images/iconfonts/iconfont.ttf") format("truetype"); 9 | } 10 | 11 | @font-face { 12 | font-family: yofont; 13 | src: url("/mywebapp/images/iconfonts/footer.woff") format("woff"), url("/mywebapp/images/iconfonts/footer.ttf") format("truetype"); 14 | } 15 | @font-face { 16 | font-family: yofont; 17 | src: url("/mywebapp/images/iconfonts/navmore.woff") format("woff"), url("/mywebapp/images/iconfonts/navmore.ttf") format("truetype"); 18 | } -------------------------------------------------------------------------------- /src/styles/usage/core/reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import "../../lib/core/reset"; 4 | @import "config"; 5 | @import "common"; 6 | -------------------------------------------------------------------------------- /src/styles/usage/layout/layout.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // Import 4 | @import "../core/reset"; 5 | 6 | // Config 7 | spa-app { 8 | position: absolute; 9 | overflow: hidden; 10 | } 11 | 12 | spa-view { 13 | position: absolute; 14 | z-index: 0; 15 | top: 0; 16 | left: 0; 17 | bottom: 0; 18 | width: 100%; 19 | //background: #eceef0 !important; 20 | @include flexbox(flex); 21 | @include flex-direction(column); 22 | } 23 | -------------------------------------------------------------------------------- /src/styles/usage/modules/home.scss: -------------------------------------------------------------------------------- 1 | .m-index-container { 2 | @include flexbox(); 3 | header { 4 | width: 100%; 5 | height: 0.44rem; 6 | background: rgba(255,255,255,0.8); 7 | ul { 8 | width: 100%; 9 | height: 0.44rem; 10 | @include flexbox(); 11 | li:not(:nth-child(2)) { 12 | width: 0.44rem; 13 | text-align: center; 14 | line-height: 0.44rem; 15 | font-size: 0.26rem; 16 | color: rgba(0,0,0,0.8); 17 | } 18 | li:nth-child(2) { 19 | @include flex(); 20 | text-align: center; 21 | line-height: 0.44rem; 22 | font-size: 0.23rem; 23 | } 24 | } 25 | } 26 | section { 27 | @include flex(); 28 | width: 100%; 29 | //height: 100%; 30 | overflow: hidden; 31 | >div { 32 | 33 | .swiper-container { 34 | width: 100%; 35 | height: 1.5rem; 36 | .swiper-slide { 37 | width: 100%; 38 | height: 100%; 39 | } 40 | img { 41 | width: 100%; 42 | height: 100%; 43 | } 44 | } 45 | table { 46 | @include flex(); 47 | width: 100%; 48 | background: #fff; 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | tr { 52 | @include flexbox(); 53 | td { 54 | @include flex(); 55 | @include border(1px, #d6d6d6); 56 | i，b { 57 | width: 100%; 58 | @include align-items(center); 59 | @include justify-content(center); 60 | } 61 | i { 62 | height: 60%; 63 | //@include border(1px, #d6d6d6,solid,50%); 64 | img { 65 | width: 100%; 66 | padding: 0.1rem; 67 | text-align: center; 68 | @include border(1px, #d6d6d6,solid,50%); 69 | @include box-sizing(border-box); 70 | } 71 | } 72 | b { 73 | display: block; 74 | margin-bottom: 0.06rem; 75 | height: 40%; 76 | text-align: center; 77 | font-weight: 500; 78 | overflow : hidden; 79 | text-overflow: ellipsis; 80 | display: -webkit-box; 81 | -webkit-line-clamp: 1; 82 | -webkit-box-orient: vertical; 83 | } 84 | &.hidden{ 85 | visibility: hidden; 86 | } 87 | } 88 | } 89 | } 90 | 91 | // pull to refresh 92 | .head { 93 | margin-top: .05rem; 94 | text-align: center; 95 | } 96 | /*.head img { 97 | height: .16rem; 98 | width: .16rem; 99 | display: inline-block; 100 | transform: rotate(180deg); 101 | -webkit-transform: rotate(180deg); 102 | transition: transform 150ms; 103 | -webkit-transition: transform 150ms; 104 | } 105 | .up { 106 | transform: rotate(360deg) !important; 107 | -webkit-transform: rotate(360deg) !important; 108 | } 109 | .foot { 110 | text-align: center; 111 | margin: .05rem 0; 112 | } 113 | .foot img { 114 | height: .16rem; 115 | width: .16rem; 116 | display: inline-block; 117 | //transform: rotate(0deg); 118 | //-webkit-transform: rotate(0deg); 119 | transition: transform 150ms; 120 | -webkit-transition: transform 150ms; 121 | } 122 | .down { 123 | transform: rotate(180deg) !important; 124 | -webkit-transform: rotate(180deg) !important; 125 | }*/ 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/styles/usage/modules/index.scss: -------------------------------------------------------------------------------- 1 | // 首页样式： index.string 2 | .m-index { 3 | width: 100%; 4 | height: 100%; 5 | @include flexbox(); 6 | @include flex-direction(column); 7 | .m-index-container{ 8 | @include flex(); 9 | width: 100%; 10 | position: relative; 11 | } 12 | footer { 13 | width: 100%; 14 | height: 0.44rem; 15 | background: #fff; 16 | @include border(1px 0 0 0, #d6d6d6); 17 | ul { 18 | width: 100%; 19 | height: 100%; 20 | @include flexbox(); 21 | li { 22 | @include flex(); 23 | @include flexbox(); 24 | @include flex-direction(column); 25 | @include align-items(center); 26 | @include justify-content(center); 27 | &:nth-child(3) { 28 | position: relative; 29 | i { 30 | display: block; 31 | @include border(1px, red, solid, 50%); 32 | bottom: 0; 33 | left: 50%; 34 | position: absolute !important; 35 | //border: 0.01rem solid red; 36 | // border-radius: 50%; 37 | width: 0.55rem; 38 | height: 0.55rem; 39 | background: #fff; 40 | z-index: 9999; 41 | line-height: 0.55rem; 42 | font-size: 0.38rem; 43 | color: $base-color; 44 | @include transform(translate(-50%)); 45 | } 46 | } 47 | &.active { 48 | b, 49 | i { 50 | color: $base-color; 51 | } 52 | } 53 | b, 54 | i { 55 | display: block; 56 | color: #666; 57 | width: 100%; 58 | text-align: center; 59 | } 60 | i { 61 | font-size: 0.2rem; 62 | line-height: 0.2rem; 63 | } 64 | b { 65 | font-size: 0.12rem; 66 | } 67 | } 68 | } 69 | } 70 | } -------------------------------------------------------------------------------- /src/styles/usage/modules/nav.scss: -------------------------------------------------------------------------------- 1 | /*.m-index-container { 2 | header{ 3 | width: 100%; 4 | height: .44rem; 5 | background: rgba(255,255,255,1); 6 | @include border(1px, #d6d6d6); 7 | text-align: center; 8 | line-height: .44rem; 9 | font-weight: 600; 10 | font-size: .23rem; 11 | } 12 | section{ 13 | @include flex(); 14 | width: 100%; 15 | overflow: hidden; 16 | .nav-scroll-div{ 17 | background: #fff; 18 | ul{ 19 | width: 100%; 20 | li{ 21 | width: 100%; 22 | height: .35rem; 23 | @include border(1px, #d6d6d6); 24 | @include flexbox(); 25 | span{ 26 | display: block; 27 | width: .35rem; 28 | height: .35rem; 29 | img{ 30 | width: 100%; 31 | height: 100%; 32 | 33 | } 34 | } 35 | 36 | 37 | } 38 | div{ 39 | @include flex(); 40 | } 41 | } 42 | } 43 | } 44 | } 45 | }*/ --------------------------------------------------------------------------------