YO 库版本:0.1.2 moduleVersion
一个基于 Sass 开发的 CSS Framework,Mobile First 的设计理念使得 Yo 的体积超轻量,同时又能延伸到支持PC端。
一个基于 Sass 开发的 CSS Framework,Mobile First 的设计理念使得 Yo 的体积超轻量,同时又能延伸到支持PC端。
@charset "utf-8"; @import "../core/variables"; @import "../core/classes"; // 定义checked的基础构造 @mixin _checked { display: inline-block; position: relative; @include square(map-get($checked, size)); font-size: map-get($checked, font-size); font-family: map-get($ico, font-name); text-align: center; vertical-align: middle; cursor: pointer; > input, > .type { display: inline-block; position: absolute; top: 0; left: 0; @include square(100%); } > input { z-index: 2; opacity: 0; } > .type { @include border-radius(map-get($checked, radius)); background-color: transparent; // 当边框厚度大于0时,才定义边框相关属性 @if map-get($checked, border-width) != null and map-get($checked, border-width) != 0 { border-width: map-get($checked, border-width); border-style: solid; border-color: map-get($checked, bordercolor); line-height: map-get($checked, size) - nth(map-get($checked, border-width), 1) * 2; } @else { line-height: map-get($checked, size); } &::after { content: map-get($checked, content); color: map-get($checked, color); } } > input:checked + .type { @if map-get($checked, border-width) != null and map-get($checked, border-width) != 0 { border-color: map-get($checked, on-bordercolor); } background-color: map-get($checked, on-bgcolor); &::after { color: map-get($checked, on-color); } } > input:disabled + .type { opacity: .4; @if map-get($checked, border-width) != null and map-get($checked, border-width) != 0 { border-color: map-get($base, disabled-bordercolor) !important; } background-color: map-get($base, disabled-bgcolor) !important; &::after { color: map-get($base, disabled-color) !important; } } } /** * @module element * @method yo-checked * @description 构造单选多选的自定义使用方法,可同时作用于 checkbox 与 radio * @demo http://doyoe.github.io/Yo/demo/element/yo-checked.html * @param {String} $name 为新的扩展定义一个名称 * @param {String} $content 标记(对勾,圆点或者任意字符,可以是webfonts的编码) * @param {Length} $size 元件大小 * @param {Length} $font-size 标记大小 * @param {Length} $border-width 边框厚度 * @param {Color} $bordercolor 边框色 * @param {Color} $bgcolor 背景色 * @param {Color} $color 标记色 * @param {Color} $on-bordercolor 选中时的边框色 * @param {Color} $on-bgcolor 选中时的背景色 * @param {Color} $on-color 选中时的标记色 * @param {Length} $radius 圆角半径长度 */ @mixin yo-checked( $name: default, $content: default, $size: default, $font-size: default, $border-width: default, $bordercolor: default, $bgcolor: default, $color: default, $on-bordercolor: default, $on-bgcolor: default, $on-color: default, $radius: default) { // 区别是否新增实例还是修改本身 @if $name == default { $name: ""; } @else { $name: "-#{$name}"; } // 如果值为default,则取config的定义 @if $content == default { $content: map-get($checked, content); } @if $size == default { $size: map-get($checked, size); } @if $font-size == default { $font-size: map-get($checked, font-size); } @if $border-width == default { $border-width: map-get($checked, border-width); } @if $bordercolor == default { $bordercolor: map-get($checked, bordercolor); } @if $bgcolor == default { $bgcolor: map-get($checked, bgcolor); } @if $color == default { $color: map-get($checked, color); } @if $on-bordercolor == default { $on-bordercolor: map-get($checked, on-bordercolor); } @if $on-bgcolor == default { $on-bgcolor: map-get($checked, on-bgcolor); } @if $on-color == default { $on-color: map-get($checked, on-color); } @if $radius == default { $radius: map-get($checked, radius); } .yo-checked#{$name} { @if $size != map-get($checked, size) { @include square($size); } @if $font-size != map-get($checked, font-size) { font-size: $font-size; } > .type { @if $radius != map-get($checked, radius) { // 构造里已处理过边框+圆角+背景溢出的问题,所以这里写原生即可 border-radius: $radius; } // 如果$border-width不等于config设定,则重绘边框相关 @if $border-width != map-get($checked, border-width) { // 如果$border-width为null,重设置为0 @if $border-width == null { $border-width: 0; } border-width: $border-width; // 如果$bordercolor不等于config设定,则重绘边框色 @if $bordercolor != map-get($checked, bordercolor) { @if $border-width != 0 { border-color: $bordercolor; } } @else { // 如果config的边框厚度定义为null或者0,在扩展时,加上边框色 @if map-get($checked, border-width) == null or map-get($checked, border-width) == 0 { border-color: map-get($checked, bordercolor); } } // 如果config的边框厚度定义为null或者0,在扩展时,加上border-style @if map-get($checked, border-width) == null or map-get($checked, border-width) == 0 { border-style: solid; } line-height: $size - nth($border-width, 1) * 2; } @else { // 如果扩展的边框厚度大于0且边框色和config边框色不同,在扩展时,重绘边框色 @if $border-width != null and $border-width != 0 and $bordercolor != map-get($checked, bordercolor) { border-color: $bordercolor; } } @if $bgcolor != map-get($checked, bgcolor) { background-color: $bgcolor; } &::after { @if $content != map-get($checked, content) { content: $content; } @if $color != map-get($checked, color) { color: $color; } } } > input:checked + .type { // 如果$border-width不等于config设定,则重绘边框相关 @if $border-width != map-get($checked, border-width) { // 如果$border-width为null,重设置为0 @if $border-width == null { $border-width: 0; } // 如果$on-bordercolor不等于config设定,则重绘边框色 @if $on-bordercolor != map-get($checked, on-bordercolor) { @if $border-width != 0 { border-color: $on-bordercolor; } } @else { // 如果config的边框厚度定义为null或者0,在扩展时,加上边框色 @if map-get($checked, border-width) == null or map-get($checked, border-width) == 0 { border-color: map-get($checked, on-bordercolor); } } } @else { // 如果扩展的边框厚度大于0且边框色和config边框色不同,在扩展时,重绘边框色 @if $border-width != null and $border-width != 0 and $on-bordercolor != map-get($checked, on-bordercolor) { border-color: $on-bordercolor; } } @if $on-bgcolor != map-get($checked, on-bgcolor) { background-color: $on-bgcolor; } &::after { @if $on-color != map-get($checked, on-color) { color: $on-color; } } } // 增量扩展 @content; } } // 调用本文件时载入checked基础构造 .yo-checked { @include _checked; }