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"; // 定义按钮的基础构造 @mixin _btn { display: inline-block; overflow: hidden; width: map-get($btn, width); height: map-get($btn, height); line-height: map-get($btn, height); padding: map-get($btn, padding); vertical-align: top; // 当边框厚度大于0时,才定义边框相关属性 @if map-get($btn, border-width) != null and map-get($btn, border-width) != 0 { border-width: map-get($btn, border-width); border-style: solid; border-color: map-get($btn, bordercolor); } @else { // 当使用input和button时,清除默认带有的外边框 border-style: none; } @include border-radius(map-get($btn, radius)); background-color: map-get($btn, bgcolor); color: map-get($btn, color); text-align: center; cursor: pointer; &:active { // 当边框厚度大于0时,才定义边框相关属性 @if map-get($btn, border-width) != null and map-get($btn, border-width) != 0 { border-color: map-get($btn, active-bordercolor); } background-color: map-get($btn, active-bgcolor); color: map-get($btn, active-color); } &-disabled { opacity: 1; cursor: not-allowed; &, &:focus, &:active { border-color: map-get($base, disabled-bordercolor); background-color: map-get($base, disabled-bgcolor); color: map-get($base, disabled-color); } } } /** * @module element * @method yo-btn * @description 构造按钮的自定义使用方法,可轻松自定义边框,尺寸,背景,文字等 * @demo http://doyoe.github.io/Yo/demo/element/yo-btn.html * @param {String} $name 为新的按钮扩展定义一个名称 * @param {Length} $border-width 按钮边框厚度 * @param {Color} $bordercolor 按钮边框色 * @param {Color} $bgcolor 按钮背景色 * @param {Color} $color 按钮文本色 * @param {Color} $active-bordercolor 触点(鼠标,手指或其它)按下时的按钮边框色 * @param {Color} $active-bgcolor 触点(鼠标,手指或其它)按下的按钮背景色 * @param {Color} $active-color 触点(鼠标,手指或其它)按下的按钮文本色 * @param {Length} $padding 按钮内补白 * @param {Length} $radius 按钮圆角半径长度 * @param {Length} $font-size 按钮字号大小 * @param {Length} $width 按钮宽度 * @param {Length} $height 按钮高度 */ @mixin yo-btn( $name: default, $border-width: default, $bordercolor: default, $bgcolor: default, $color: default, $active-bordercolor: default, $active-bgcolor: default, $active-color: default, $padding: default, $radius: default, $font-size: default, $width: default, $height: default) { // 区别是否新增实例还是修改本身 @if $name == default { $name: ""; } @else { $name: "-#{$name}"; } // 如果值为default,则取config的定义 @if $border-width == default { $border-width: map-get($btn, border-width); } @if $bordercolor == default { $bordercolor: map-get($btn, bordercolor); } @if $bgcolor == default { $bgcolor: map-get($btn, bgcolor); } @if $color == default { $color: map-get($btn, color); } @if $active-bordercolor == default { $active-bordercolor: map-get($btn, active-bordercolor); } @if $active-bgcolor == default { $active-bgcolor: map-get($btn, active-bgcolor); } @if $active-color == default { $active-color: map-get($btn, active-color); } @if $padding == default { $padding: map-get($btn, padding); } @if $radius == default { $radius: map-get($btn, radius); } @if $font-size == default { $font-size: map-get($btn, font-size); } @if $width == default { $width: map-get($btn, width); } @if $height == default { $height: map-get($btn, height); } .yo-btn#{$name} { // 如果$width不等于config设定,则重绘宽度 @if $width != map-get($btn, width) { width: $width; } // 如果$height不等于config设定,则重绘高度和行高 @if $height != map-get($btn, height) { height: $height; line-height: $height; } // 如果$padding不等于config设定,则重绘内补白 @if $padding != map-get($btn, padding) { padding: $padding; } // 如果$radius不等于config设定,则重绘圆角 @if $radius != map-get($btn, radius) { // 构造里已处理过边框+圆角+背景溢出的问题,所以这里写原生即可 border-radius: $radius; } // 如果$border-width不等于config设定,则重绘边框相关 @if $border-width != map-get($btn, border-width) { // 如果$border-width为null,重设置为0 @if $border-width == null { $border-width: 0; } border-width: $border-width; // 如果$bordercolor不等于config设定,则重绘边框色 @if $bordercolor != map-get($btn, bordercolor) { @if $border-width != 0 { border-color: $bordercolor; } } @else { // 如果config的边框厚度定义为null或者0,在扩展时,加上边框色 @if map-get($btn, border-width) == null or map-get($btn, border-width) == 0 { border-color: map-get($btn, bordercolor); } } // 如果config的边框厚度定义为null或者0,在扩展时,加上border-style @if map-get($btn, border-width) == null or map-get($btn, border-width) == 0 { border-style: solid; } } @else { // 如果扩展的边框厚度大于0且边框色和config边框色不同,在扩展时,重绘边框色 @if $border-width != null and $border-width != 0 and $bordercolor != map-get($btn, bordercolor) { border-color: $bordercolor; } } // 如果$bgcolor不等于config设定,则重绘背景色 @if $bgcolor != map-get($btn, bgcolor) { background-color: $bgcolor; } // 如果$color不等于config设定,则重绘文本色 @if $color != map-get($btn, color) { color: $color; } // 如果$font-size不等于config设定,则重绘文本字号 @if $font-size != map-get($btn, font-size) { font-size: $font-size; } &:active { @if $active-bordercolor != map-get($btn, active-bordercolor) { border-color: $active-bordercolor; } @if $active-bgcolor != map-get($btn, active-bgcolor) { background-color: $active-bgcolor; } @if $active-color != map-get($btn, active-color) { color: $active-color; } } // 增量扩展 @content; } } // 调用本文件时载入按钮基础构造 .yo-btn { @include _btn; // 默认载入按钮的三种尺寸:s, m, l &-s { height: map-get($btn, s-height); line-height: map-get($btn, s-height); font-size: map-get($btn, s-font-size); } &-m { height: map-get($btn, m-height); line-height: map-get($btn, m-height); font-size: map-get($btn, m-font-size); } &-l { height: map-get($btn, l-height); line-height: map-get($btn, l-height); font-size: map-get($btn, l-font-size); } // 通栏按钮 &-stacked { display: block; width: 100%; } }