@charset "utf-8";
@import "../core/variables";
@import "../core/classes";
/**
* Yo框架element基础构造
-----------------------
* Yo内置了包括按钮,输入框,单选,多选,区间,分值等基础元素
*
* @class element
* @module Yo
*/
// 定义按钮的基础构造
// 使用方法请查看 yo-btn.scss
@mixin _btn {
display: inline-block;
overflow: hidden;
padding: map-get($btn, padding);
// 当边框厚度大于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;
}
// 内阴影,用来描内部的1px白边
box-shadow: inset .01rem .01rem rgba(255, 255, 255, .1);
border-radius: map-get($btn, radius);
background-color: map-get($btn, bgcolor);
color: map-get($btn, color);
text-align: center;
vertical-align: middle;
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);
}
}
// 定义输入框的基础构造
// 使用方法请查看 yo-input.scss
@mixin _input {
&,
&::-webkit-inner-spin-button {
@include appearance;
}
width: map-get($input, width);
height: map-get($input, height);
padding: map-get($input, padding);
border: .01rem solid map-get($input, bordercolor);
border-radius: map-get($input, radius);
background-color: map-get($input, bgcolor);
// 如果input颜色值与base相同,则不设置
@if map-get($input, color) != map-get($base, color) {
color: map-get($input, color);
}
&::-webkit-input-placeholder {
color: map-get($input, placeholder-color);
}
}
// 定义loading的基础构造
// 使用方法请查看 yo-loading.scss
@mixin _loading {
display: block;
position: absolute;
z-index: map-get($z-index, loading);
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
min-width: map-get($loading, size) + .2rem;
min-height: map-get($loading, size) + .2rem;
background-color: map-get($loading, mask-bgcolor);
text-align: center;
&:before,
&:after {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
content: "\0020";
}
&:after {
@include square(.04em);
margin-top: -.1rem;
background: transparent;
border-radius: 50%;
@include animation(loading 1s infinite linear);
@include transform-origin(center);
box-shadow:
.35em -.29em,
.47em -.03em 0 .01em,
.4em .20em 0 .02em,
.25em .38em 0 .03em,
0 .44em 0 .04em,
-.22em .38em 0 .05em,
-.38em .24em 0 .05em,
-.42em 0 0 .06em,
-.36em -.21em 0 .06em,
-.2em -.36em 0 .06em,
0 -.41em 0 .07em;
font-size: map-get($loading, size);
color: map-get($loading, color);
}
&:before {
@include square(map-get($loading, size) * 2);
border-radius: .1rem;
background-color: map-get($loading, bgcolor);
}
> .inner {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
margin-top: map-get($loading, size) - .18rem;
font-size: .12rem;
color: map-get($loading, color);
}
}
// 定义区间选择的基础构造
// 使用方法请查看 yo-range.scss
@mixin _range {
@include flexbox;
line-height: 1;
> input[type="range"] {
@include appearance(none);
@include flex;
overflow: hidden;
height: .28rem;
background-image: -webkit-linear-gradient(right, map-get($range, outer-bgcolor) 0%, map-get($range, outer-bgcolor) 100%);
background-image: linear-gradient(to right, map-get($range, outer-bgcolor) 0%, map-get($range, outer-bgcolor) 100%);
background-size: 100% .04rem;
background-repeat: no-repeat;
background-position: center;
&::-webkit-slider-thumb {
@include appearance(none);
@include square(.2rem);
position: relative;
border: 0;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .25);
background-color: map-get($range, ball-color);
&::before {
position: absolute;
top: 8px;
left: -2001px;
width: 2000px;
height: 4px;
background-color: map-get($range, inner-bgcolor);
content: "\0020";
}
}
&:disabled {
opacity: .4;
&::-webkit-slider-thumb::before {
background-color: #444;
}
}
}
> .yo-ico {
font-size: .2rem;
&:first-child {
margin-right: .1rem;
}
&:last-child {
margin-left: .1rem;
}
}
}
@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 {
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;
}
}
}
// 定义radio的基础构造
// 使用方法请查看 yo-radio.scss
@mixin _radio {
@include appearance(none);
position: relative;
@include square(map-get($radio, size));
border-radius: map-get($radio, radius);
background-color: map-get($radio, bgcolor);
// 将 color 设置为 transparent,这时如果不需要边框,就可以将 $bordercolor 设置为 null 了,边框色为 color 设置
border: .01rem solid;
border-color: map-get($radio, bordercolor);
color: transparent;
font-size: map-get($radio, size);
cursor: pointer;
vertical-align: middle;
&::after {
position:absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
@if map-get($radio, type) == tick {
content: "✓";
} @else {
content: "●";
}
font-size: 68%;
opacity: 0;
}
&:checked {
border-color: map-get($radio, on-bordercolor);
background-color: map-get($radio, on-bgcolor);
&::after {
color: map-get($radio, on-color);
opacity: 1;
}
}
&:disabled {
opacity: .4;
border-color: map-get($base, disabled-bordercolor) !important;
background-color: map-get($base, disabled-bgcolor) !important;
&::after {
color: map-get($base, disabled-color) !important;
}
}
}
// 定义checkbox的基础构造
// 使用方法请查看 yo-checkbox.scss
@mixin _checkbox {
@include appearance(none);
position: relative;
@include square(map-get($checkbox, size));
border-radius: map-get($checkbox, radius);
background-color: map-get($checkbox, bgcolor);
// 将 color 设置为 transparent,这时如果不需要边框,就可以将 $bordercolor 设置为 null 了,边框色为 color 设置
border: .01rem solid;
border-color: map-get($checkbox, bordercolor);
color: transparent;
font-size: map-get($checkbox, size);
cursor: pointer;
vertical-align: middle;
&::after {
position:absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
@if map-get($checkbox, type) == tick {
content: "✓";
} @else {
content: "●";
}
font-size: 68%;
opacity: 0;
}
&:checked {
border-color: map-get($checkbox, on-bordercolor);
background-color: map-get($checkbox, on-bgcolor);
&::after {
color: map-get($checkbox, on-color);
opacity: 1;
}
}
&:disabled {
opacity: .4;
border-color: map-get($base, disabled-bordercolor) !important;
background-color: map-get($base, disabled-bgcolor) !important;
&::after {
color: map-get($base, disabled-color) !important;
}
}
}
// 定义badge的基础构造
// 使用方法请查看 yo-badge.scss
@mixin _badge {
display: inline-block;
min-width: .16rem;
min-height: .16rem;
padding: map-get($badge, padding);
// 当边框厚度大于0时,才定义边框相关属性
@if map-get($badge, border-width) != null and
map-get($badge, border-width) != 0 {
border-width: map-get($badge, border-width);
border-style: solid;
border-color: map-get($badge, bordercolor);
}
border-radius: map-get($badge, radius);
background-color: map-get($badge, bgcolor);
color: map-get($badge, color);
font-size: map-get($badge, font-size);
@if map-get($badge, font-size) == null or
map-get($badge, font-size) <= .14rem {
line-height: .14rem;
} @else {
line-height: map-get($badge, font-size);
}
text-align: center;
}
// 定义loadtip的基础构造
// 使用方法请查看 yo-loadtip.scss
@mixin _loadtip {
@include flexbox(inline);
@include align-items;
color: map-get($loadtip, color);
font-size: map-get($loadtip, font-size);
> .yo-ico {
display: block;
@include transform-origin(center);
color: map-get($loadtip, ico-color);
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
@include transform(rotatez(0deg));
&-flip {
@include transform(rotatez(180deg));
}
}
> .yo-ico-loading {
@include animation(loadtip 1s infinite linear);
}
> .text {
@include flex;
margin-left: .1rem;
> .time {
display: block;
font-size: .12rem;
}
}
}
// 定义score的基础构造
// 使用方法请查看 yo-score.scss
@mixin _score {
position: relative;
width: map-get($score, item-width) * 5;
height: map-get($score, item-height);
overflow: hidden;
&,
> .index {
display: inline-block;
background: url(#{map-get($setting, bgimg-domain)}#{map-get($score, url)}) repeat-x;
@if map-get($score, item-height) != null {
background-size: auto map-get($score, item-height) * 2;
}
}
> .index {
height: 100%;
background-position: 0 -#{map-get($score, item-height)};
line-height: 10;
vertical-align: top;
}
}