Yo 源文件
Yo 是一款基于 Mobile First 理念而设计的 CSS Framework,当然,它也适应于PC端的高级浏览器;其具备轻量,易用,快速且高度强大的自定义能力
Yo 是一款基于 Mobile First 理念而设计的 CSS Framework,当然,它也适应于PC端的高级浏览器;其具备轻量,易用,快速且高度强大的自定义能力
@charset "utf-8"; // 定义list的基础构造 @mixin _list { margin: map-get($list, margin); @include border( $border-width: map-get($list, border-width), $border-color: map-get($list, border-color), $radius: map-get($list, radius) ); > .label, > .item, .front { @include flexbox; @include align-items; // 修复某些安卓版本开启了3D,yo-list当成滚动内容时出现的诡异问题 // 移除该定义,请业务自行在需要的地方添加 // 该定义会将所有的item放到Composited Layer中,对性能有较大影响 // @include transform(translatez(0)); > .mark:not(:last-child), > .yo-ico:not(:last-child) { margin-right: .1rem; } // 定义需要自适应宽度的列 > .flex { @include flex; } > .info { color: map-get($list, info-color); font-size: map-get($list, info-font-size); } .detail { color: map-get($list, detail-color); font-size: map-get($list, detail-font-size); } > .yo-ico { display: block; &:last-child { margin: -.01rem 0 0 .05rem; color: map-get($list, more-color); font-size: map-get($list, more-font-size); } } &.tr { // 当模式为table时,padding将设置到col上 padding: 0; } } > .label { padding: map-get($list, label-padding); @include border( $border-width: 0 0 1px, $border-color: map-get($list, label-border-color) ); &:not(:first-child) { margin-top: -1px; // 除第一个.label外,其他.label都需要top,bottom2条线 // top线用于补全上一组的最后一根线 &::after { border-width: 1px 0; } } background-color: map-get($list, label-bgcolor); color: map-get($base, sub-color); font-size: map-get($list, label-font-size); font-weight: normal; // 定义单元格的padding > .col { padding: map-get($list, label-padding); } } > .item, .front { padding: map-get($list, item-padding); } > .item { // 使用opacity创建局部堆叠上下文束缚内部after边线不覆盖label // 如果想内容溢出容器,可以重置该值为1 opacity: .99999; overflow: hidden; background-color: #fff; color: map-get($base, color); font-size: map-get($list, item-font-size); @include border( $border-width: 0 0 1px, $border-color: map-get($list, item-border-color) ); // 除最后一项子项外边线内陷 &:not(:last-child)::after { left: map-get($list, item-border-space); } &:last-child { margin-bottom: -1px; // 最后一根线的颜色与外边框颜色相同 &::after { border-color: map-get($list, border-color); @if map-get($list, has-last-border) == false { border-width: 0; } } } .yo-input { display: block; } &-input { // 让输入框占满整个父容器 > .yo-input { height: auto; padding: 0; border: 0; } } &-stacked { display: block; > .mark { padding-bottom: .05rem; } } // 常规需要active的项目,没有使用到第3方组件的 &.item-active:active, // 为第3方组件提供active状态 &.item-light { &, .front { background-color: map-get($list, active-bgcolor); } } // 选中时背景和文本色 &.item-on { background-color: map-get($list, on-bgcolor); color: map-get($list, on-color); } // 定义单元格的padding > .col { padding: map-get($list, item-padding); } } > .label + > .item { } } /** * @module fragment * @method yo-list * @version 1.0.0 * @description 构造列表的自定义使用方法 * @demo http://doyoe.github.io/Yo/demo/fragment/yo-list.html * @param {String} $name 定义扩展名称 {add:1.0.0} * @param {Length} $margin 外边距 {add:1.0.0} * @param {Length} $radius 圆角半径长度 {add:1.0.0} * @param {Length} $border-width 外边框厚度 {add:1.4.0} * @param {Color} $bordercolor 边框色 {add:1.0.0}{del:2.0.0} * @param {Color} $border-color 边框色 {add:2.0.0} * @param {Length} $item-padding 子项的内补白 {add:1.0.0} * @param {Length} $label-padding 列表组头内补白 {add:1.0.0} * @param {Color} $label-bgcolor 列表组头背景色 {add:1.0.0} * @param {Color} $active-bgcolor 子项点击反馈背景色 {add:1.0.0} * @param {Color} $on-bgcolor 子项选中背景色 {add:1.0.0} * @param {Color} $on-color 子项选中文本色 {add:1.4.0} * @param {Boolean} $has-last-border 是否有最后一根底边线 {add:2.1.0} * @param {Color} $item-bordercolor 子项边框色 {add:1.2.0}{del:2.0.0} * @param {Color} $item-border-color 子项边框色 {add:2.0.0} * @param {Color} $label-bordercolor 列表组头边框色 {add:1.2.0}{del:2.0.0} * @param {Color} $label-border-color 列表组头边框色 {add:2.0.0} * @param {Length} $item-font-size 子项字号 {add:1.2.0} * @param {Length} $label-font-size 列表组头字号 {add:1.2.0} * @param {Length} $item-border-space 子项下边线距离左侧的间隙 {add:1.8.0} * @param {Length} $detail-font-size 详情区域字号 {add:2.0.0} * @param {Color} $detail-color 详情区域文本色 {add:2.0.0} * @param {Length} $info-font-size 描述区域字号 {add:2.0.0} * @param {Color} $info-color 描述区域文本色 {add:2.0.0} * @param {Length} $more-font-size 更多区域字号 {add:2.0.0} * @param {Color} $more-color 更多区域文本色 {add:2.0.0} */ @mixin yo-list( $name: default, $margin: default, $radius: default, $border-width: default, $border-color: default, $item-padding: default, $label-padding: default, $label-bgcolor: default, $active-bgcolor: default, $on-bgcolor: default, $on-color: default, $has-last-border: default, $item-border-color: default, $label-border-color: default, $item-font-size: default, $label-font-size: default, $item-border-space: default, $detail-font-size: default, $detail-color: default, $info-font-size: default, $info-color: default, $more-font-size: default, $more-color: default) { // 区别是否新增实例还是修改本身 $name: if($name == default, "", "-#{$name}"); // 如果值为default,则取config的定义 @if $margin == default { $margin: map-get($list, margin); } @if $radius == default { $radius: map-get($list, radius); } @if $border-width == default { $border-width: map-get($list, border-width); } @if $border-color == default { $border-color: map-get($list, border-color); } @if $item-padding == default { $item-padding: map-get($list, item-padding); } @if $label-padding == default { $label-padding: map-get($list, label-padding); } @if $label-bgcolor == default { $label-bgcolor: map-get($list, label-bgcolor); } @if $active-bgcolor == default { $active-bgcolor: map-get($list, active-bgcolor); } @if $on-bgcolor == default { $on-bgcolor: map-get($list, on-bgcolor); } @if $on-color == default { $on-color: map-get($list, on-color); } @if $has-last-border == default { $has-last-border: map-get($list, has-last-border); } @if $item-border-color == default { $item-border-color: map-get($list, item-border-color); } @if $label-border-color == default { $label-border-color: map-get($list, label-border-color); } @if $label-font-size == default { $label-font-size: map-get($list, label-font-size); } @if $item-font-size == default { $item-font-size: map-get($list, item-font-size); } @if $item-border-space == default { $item-border-space: map-get($list, item-border-space); } @if $detail-font-size == default { $detail-font-size: map-get($list, detail-font-size); } @if $detail-color == default { $detail-color: map-get($list, detail-color); } @if $info-font-size == default { $info-font-size: map-get($list, info-font-size); } @if $info-color == default { $info-color: map-get($list, info-color); } @if $more-font-size == default { $more-font-size: map-get($list, more-font-size); } @if $more-color == default { $more-color: map-get($list, more-color); } .yo-list#{$name} { @if $margin != map-get($list, margin) { margin: $margin; } @if $radius != map-get($list, radius) { border-radius: $radius; overflow: hidden; } &::after { // 如果$border-width不等于config设定,则重绘边框相关 @if $border-width != map-get($list, border-width) { border-width: $border-width; } // 如果$border-color不等于config设定,则重绘边框颜色 @if $border-color != map-get($list, border-color) { border-color: $border-color; } // 如果$radius不等于config设定,则重绘边框圆角 @if $radius != map-get($list, radius) { @include responsive(retina1x) { border-radius: $radius; } @include responsive(retina2x) { border-radius: $radius * 2; } @include responsive(retina3x) { border-radius: $radius * 3; } } } > .label, > .item, .front { > .info { @if $info-color != map-get($list, info-color) { color: $info-color; } @if $info-font-size != map-get($list, info-font-size) { font-size: $info-font-size; } } .detail { @if $detail-color != map-get($list, detail-color) { color: $detail-color; } @if $detail-font-size != map-get($list, detail-font-size) { font-size: $detail-font-size; } } > .yo-ico { &:last-child { @if $more-color != map-get($list, more-color) { color: $more-color; } @if $more-font-size != map-get($list, more-font-size) { font-size: $more-font-size; } } } } > .label { @if $label-padding != map-get($list, label-padding) { padding: $label-padding; > .col { padding: $label-padding; } } @if $label-bgcolor != map-get($list, label-bgcolor) { background-color: $label-bgcolor; } @if $label-font-size != map-get($list, label-font-size) { font-size: $label-font-size; } &::after { @if $label-border-color != map-get($list, label-border-color) { border-color: $label-border-color; } } } > .item, .front { @if $item-padding != map-get($list, item-padding) { padding: $item-padding; > .col { padding: $item-padding; } } } > .item { // 如果$item-font-size不等于config设定,则重绘子项字号 @if $item-font-size != map-get($list, item-font-size) { font-size: $item-font-size; } // 如果$item-border-color不等于config设定,则重绘子项边框色 &::after { @if $item-border-color != map-get($list, item-border-color) { border-color: $item-border-color; } } // 如果$item-border-space不等于config设定,则重绘子项边线间隙 &:not(:last-child)::after { @if $item-border-space != map-get($list, item-border-space) { left: $item-border-space; } } // 如果$border-color不等于config设定,则重绘最后一个子项边框色 &:last-child::after { @if $border-color != map-get($list, border-color) { border-color: $border-color; } @if $has-last-border != map-get($list, has-last-border) { @if $has-last-border { border-width: 0 0 1px; } @else { border-width: 0; } } } &.item-active:active, &.item-light { &, .front { @if $active-bgcolor != map-get($list, active-bgcolor) { background-color: $active-bgcolor; } } } &.item-on { @if $on-bgcolor != map-get($list, on-bgcolor) { background-color: $on-bgcolor; } @if $on-color != map-get($list, on-color) { color: $on-color; } } } // 增量扩展 @content; } } // 调用本文件时载入list基础构造 .yo-list { @include _list; }