@charset "utf-8";
@import "../core/variables";
@import "../core/classes";
/**
* Yo框架widget基础构造
-----------------------
* Yo内置了常见的通用代码片段,如:列表,表格,按钮组,头
*
* @class widget
* @module Yo
*/
// 定义弹窗dialog的基础构造
// 使用方法请查看 yo-dialog.scss
@mixin _dialog {
@include flexbox();
@include flex-direction(column);
position: fixed;
z-index: map-get($z-index, dialog);
overflow: hidden;
border-radius: map-get($dialog, radius);
@if map-get($dialog, shadow-opacity) != null {
box-shadow: 0 0 5px rgba(map-get($dialog, bordercolor), map-get($dialog, shadow-opacity));
}
border: 1px solid map-get($dialog, bordercolor);
min-width: 2.8rem;
max-width: 90%;
width: map-get($dialog, width);
height: map-get($dialog, height);
background: #fff;
text-align: center;
> .hd {
position: relative;
height: map-get($dialog, hd-height);
background: map-get($dialog, hd-bgcolor);
line-height: map-get($dialog, hd-height);
margin-bottom: -.2rem;
.title {
overflow: hidden;
height: 100%;
margin: 0 60px;
@if map-get($dialog, title-color) != map-get($base, color) {
color: map-get($dialog, title-color);
}
@if map-get($dialog, title-font-size) != map-get($base, font-size) {
font-size: map-get($dialog, title-font-size);
}
}
.regret,
.affirm {
position: absolute;
top: 0;
}
.regret {
left: .1rem;
}
.affirm {
right: .1rem;
}
}
> .bd {
@include flex();
@include overflow();
padding: map-get($dialog, bd-padding);
@if map-get($dialog, bd-font-size) != map-get($base, font-size) {
font-size: map-get($dialog, bd-font-size);
}
}
> .ft {
@include flexbox();
text-align: center;
@include yo-btn(
$border-width: .01rem 0 0 0,
$bordercolor: map-get($base, bordercolor),
$bgcolor: #fff,
$color: map-get($base, link-color),
$radius: 0,
$active-bgcolor: #f9f9f9
);
> .yo-btn {
@include flex();
&:last-child:not(:only-child),
&:only-child {
font-weight: bold;
}
&:last-child:not(:only-child) {
border-left-width: .01rem;
}
}
}
}
// 定义浮层popup的基础构造
// 使用方法请查看 yo-popup.scss
@mixin _popup {
@include flexbox();
@include flex-direction(column);
position: absolute;
z-index: map-get($z-index, popup);
border-radius: map-get($popup, radius);
@if map-get($popup, shadow-opacity) != null {
box-shadow: 0 0 5px rgba(map-get($popup, bordercolor), map-get($popup, shadow-opacity));
}
border: 1px solid map-get($popup, bordercolor);
min-width: 2.8rem;
min-height: 1rem;
width: map-get($popup, width);
height: map-get($popup, height);
background: #fff;
// 改用标签的方式,因为JS需要控制位置
> .arrow::after {
position: absolute;
content: "◆";
color: #fff;
font-size: map-get($popup, arrow-size) * 2;
line-height: 1;
}
// 控制箭头方向
.arrow-top,
.arrow-down {
&::after {
@include transform(translate(-50%));
left: 50%;
}
}
.arrow-top::after {
top: -#{map-get($popup, arrow-size) - .01rem};
// 箭头边框色
text-shadow: 0 -1px map-get($popup, bordercolor);
}
.arrow-down::after {
bottom: -#{map-get($popup, arrow-size) - .01rem};
// 箭头边框色
text-shadow: 0 1px map-get($popup, bordercolor);
}
.arrow-right,
.arrow-left {
&::after {
@include transform(translate(0, -50%));
top: 50%;
}
}
.arrow-right::after {
right: -#{map-get($popup, arrow-size) - .01rem};
// 箭头边框色
text-shadow: 1px 0 map-get($popup, bordercolor);
}
.arrow-left::after {
left: -#{map-get($popup, arrow-size) - .01rem};
// 箭头边框色
text-shadow: -1px 0 map-get($popup, bordercolor);
}
// 有hd或ft时,箭头的颜色应该和hd或ft相同
.arrow-extra.arrow::after {
color: map-get($popup, hd-bgcolor);
}
> .hd,
> .bd {
position: relative;
z-index: 2;
}
> .hd {
height: map-get($popup, hd-height);
border-bottom: 1px solid map-get($popup, bordercolor);
background: map-get($popup, hd-bgcolor);
line-height: map-get($popup, hd-height);
text-align: center;
.title {
overflow: hidden;
height: 100%;
margin: 0 60px;
@if map-get($popup, title-color) != map-get($base, color) {
color: map-get($popup, title-color);
}
@if map-get($popup, title-font-size) != map-get($base, font-size) {
font-size: map-get($popup, title-font-size);
}
}
.regret,
.affirm {
position: absolute;
top: 0;
}
.regret {left: 10px;}
.affirm {right: 10px;}
}
> .bd {
@include flex();
@include overflow();
padding: map-get($popup, bd-padding);
}
> .ft {
padding: .1rem 0;
border-top: 1px solid map-get($popup, bordercolor);
text-align: center;
}
}
// 定义浮层tip的基础构造
// 使用方法请查看 yo-tip.scss
@mixin _tip{
position: fixed;
min-width: 1rem;
max-width: 90%;
z-index: map-get($z-index, tip);
padding: map-get($tip, padding);
border-radius: map-get($tip, radius);
background-color: rgba(map-get($tip, bgcolor), .5);
color: map-get($tip, color);
text-align: center;
}
// 定义mask的基础构造
// 使用方法请查看 yo-mask.scss
@mixin _mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: map-get($z-index, mask);
background-color: rgba(map-get($mask, bgcolor), .5);
}
// 定义select的基础构造
// 使用方法请查看 yo-select.scss
@mixin _select {
@include flexbox();
position: relative;
overflow: hidden;
height: map-get($select, item-height) * map-get($select, item);
line-height: map-get($select, item-height);
&::before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: map-get($select, item-height);
margin-top: -#{map-get($select, item-height) / 2};
content: "\0020";
border: 1px solid map-get($select, bordercolor);
border-width: 1px 0;
}
&-item,
&-item-list,
&-item ul {
height: 100%;
}
&-item {
@include flex();
position: relative;
z-index: 2;
text-align: center;
}
&-item-list {
ul {
position: relative;
}
li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: map-get($select, item-height);
&.disabled {
opacity: .4;
}
}
}
&-item-tag {
position: absolute;
top: 50%;
right: .1rem;
margin-top: -#{map-get($select, item-height) / 2};
}
> .mask {
position: absolute;
z-index: 3;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "\0020";
pointer-events: none;
// background: -webkit-linear-gradient(top, white, transparent 40%, transparent 40%, transparent 60%, transparent 60%, white);
}
}
// 定义tab的基础构造
// 使用方法请查看 yo-tab.scss
@mixin _tab {
@include flexbox();
height: map-get($tab, height);
border-radius: map-get($tab, radius);
border-width: map-get($tab, border-width);
border-style: solid;
border-color: map-get($tab, bordercolor);
background-color: map-get($tab, bgcolor);
font-size: map-get($tab, font-size);
text-align: center;
line-height: map-get($tab, height);
> .item{
@include flex();
position: relative;
&:not(:last-child)::after {
position: absolute;
top: 50%;
right: 0;
@include transform(translatey(-50%));
width: .01rem;
height: map-get($tab, item-border-height);
background-color: map-get($tab, item-bordercolor);
content: "\0020";
}
color: map-get($tab, color);
&:active,
&.on,
&-on {
background-color: map-get($tab, on-bgcolor);
color: map-get($tab, on-color);
}
&-top-ico {
padding-top: .04rem;
line-height: .2rem;
.yo-ico {
display: block;
font-size: map-get($tab, y-ico-size);
}
}
&-left-ico {
.yo-ico {
font-size: map-get($tab, x-ico-size);
}
}
&-only-ico {
.yo-ico {
font-size: map-get($tab, only-ico-size);
}
}
}
}
// 定义number的基础构造
// 使用方法请查看 yo-number.scss
@mixin _number{
@include flexbox(inline-flex);
overflow: hidden;
width: map-get($number, width);
height: map-get($number, height);
line-height: map-get($number, height);
border: 1px solid map-get($number, bordercolor);
border-radius: 0;
box-shadow: 1px 1px 1px rgba(map-get($number, bordercolor),.3);
background-color: #fff;
font-size: 0;
vertical-align: middle;
> .minus,
> .plus,
> .input{
text-align: center;
}
> .minus,
> .plus{
display: block;
width: .35rem;
background-color: map-get($number, sign-bgcolor);
color: map-get($number, sign-color);
font-size: 30px;
font-family: arial;
cursor: pointer;
&.disabled{
color: map-get($number, disabled-sign-color);
cursor: not-allowed;
}
}
> .input{
@include flex();
border: 1px solid map-get($number, bordercolor);
border-width: 0 1px;
box-shadow: inset 1px 1px 1px rgba(map-get($number, bordercolor), .1);
border-radius: 0;
color: map-get($number, color);
font-size: .16rem;
&,
&::-webkit-inner-spin-button{
@include appearance();
}
}
}
// 定义search的基础构造
// 使用方法请查看 yo-search.scss
@mixin _search {
@include flexbox();
@include flex-direction(column);
> .operate {
position: relative;
overflow: hidden;
z-index: map-get($z-index, search);
font-size: map-get($search, font-size);
line-height: map-get($search, height);
padding: map-get($search, op-padding);
border-bottom: 1px solid map-get($search, bordercolor);
background-color: map-get($search, op-bgcolor);
> .action {
display: block;
position: relative;
z-index: 2;
height: map-get($search, height);
> .input {
width: 100%;
height: 100%;
padding: 0 .3rem;
@include appearance;
border: 1px solid map-get($search, bordercolor);
border-radius: map-get($search, radius);
background-color: map-get($search, bgcolor);
color: map-get($search, color);
font-size: map-get($search, font-size);
line-height: map-get($base, line-height);
}
> .yo-ico-delete,
> .yo-ico-fresh,
> .yo-ico-stop {
display: none;
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 0 .08rem;
color: map-get($search, ico-color);
}
> .label {
@include flexbox;
position: absolute;
top: 0;
left: 50%;
@include transition(all .2s ease-in);
@include transform(translatex(-50%) translatez(0));
color: map-get($search, placeholder-color);
> .placeholder {
margin-left: .08rem;
}
}
}
> .cancel {
position: absolute;
top: 50%;
right: 0;
@include transform(translatey(-50%));
width: map-get($search, cancel-width);
color: map-get($search, cancel-color);
text-align: center;
}
&-on,
&-fresh,
&-stop {
> .action > .input {
border-color: map-get($search, on-bordercolor);
background-color: map-get($search, on-bgcolor);
}
}
&-on {
> .action {
margin-right: map-get($search, cancel-width);
> .label {
left: .1rem;
@include transform(translatex(0) translatez(0));
}
> .yo-ico-delete {
display: inline-block;
}
}
}
&-fresh,
&-stop {
> .action {
> .input {
text-align: center;
}
> .label {
display: none;
}
}
}
&-fresh {
> .action {
> .yo-ico-fresh {
display: inline-block;
}
}
}
&-stop {
> .action {
> .yo-ico-stop {
display: inline-block;
}
}
}
}
> .cont {
@include flex();
display: none;
position: absolute;
top: .95rem;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(map-get($search, mask-bgcolor), .9);
> .recommend,
> .result {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
> .yo-group {
top: 0;
}
}
&-on {
display: block;
}
}
// 模态搜索
&-modal {
position: fixed;
z-index: map-get($z-index, search);
top: 0;
right: 0;
left: 0;
height: 100%;
> .cont {
position: relative;
top: 0;
}
}
}
// 定义index的基础构造
// 使用方法请查看 yo-index.scss
@mixin _index {
width: map-get($index, width);
text-transform: uppercase;
color: map-get($index, color);
font-size: map-get($index, font-size);
line-height: 1.1;
text-align: center;
.ellipsis {
display: inline-block;
@include square(map-get($index, font-size) / 2);
border-radius: 50%;
background-color: map-get($index, color);
}
}
// 定义group的基础构造
// 使用方法请查看 yo-group.scss
@mixin _group {
position: absolute;
top: map-get($group, top);
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
> .sticky,
> .scroll-index {
position: absolute;
top: 0;
right: 0;
}
> .sticky {
left: 0;
padding: map-get($list, label-padding);
background-color: map-get($list, label-bgcolor);
color: map-get($base, sub-color);
}
.no-data {
height: 100%;
padding-top: 1rem;
text-align: center;
}
}
// 定义switchable的基础构造
// 使用方法请查看 yo-switchable.scss
@mixin _switchable {
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
> .cont {
position: relative;
white-space: nowrap;
@include killspace;
> .item {
@include killspace-item;
width: 100%;
background-color: #eee;
min-height: .1rem;
.img {
max-width: 100%;
max-height: 100%;
height: auto;
}
}
}
> .index {
position: absolute;
bottom: .05rem;
left: 50%;
@include transform(translate(-50%, 0) translatez(0));
> li {
float: left;
margin: 0 .05rem;
@include square(map-get($switchable, index-size));
border-radius: 50%;
background-color: map-get($switchable, index-bgcolor);
&.on {
background-color: map-get($switchable, index-on-bgcolor);
}
}
}
> .yo-ico {
@if map-get($switchable, has-btn) == false {
display: none;
}
position: absolute;
top: 50%;
@include transform(translate(0, -50%) translatez(0));
@include square(map-get($switchable, btn-size));
border-radius: 50%;
background-color: map-get($switchable, btn-bgcolor);
color: map-get($switchable, btn-color);
line-height: map-get($switchable, btn-size);
cursor: pointer;
&:active {
background-color: map-get($switchable, btn-active-bgcolor);
color: map-get($switchable, btn-active-color);
}
}
> .yo-ico-prev {
left: 0;
}
> .yo-ico-next {
right: 0;
}
}
// 定义switch的基础构造
// 使用方法请查看 yo-switch.scss
@mixin _switch {
display: inline-block;
> input {
display: none;
}
> .track {
display: inline-block;
position: relative;
width: .6rem;
height: .32rem;
margin: 0;
cursor: pointer;
border: .02rem solid map-get($switch, bordercolor);
border-radius: .16rem;
background-color: map-get($switch, bgcolor);
vertical-align: middle;
@include transition(border-color .1s ease-out, background-color .1s ease-out);
> .handle {
position: absolute;
top: 0;
left: 0;
@include square(.28rem);
border-radius: 50%;
background-color: map-get($switch, ball-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
@include transition(transform .1s ease-out);
-webkit-transform: translate(0, 0); // samsung s4 4.4.2 如果写了Z或者3D,元素的边框及背景色无法被圆角化
transform: translate(0, 0) translatez(0);
}
}
> input:checked + .track {
border-color: map-get($switch, checked-bordercolor);
background-color: map-get($switch, checked-bgcolor);
> .handle {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0) translatez(0);
}
}
> input:disabled + .track {
opacity: .4;
border-color: map-get($base, disabled-bordercolor);
background-color: map-get($base, disabled-bordercolor);
}
}
// 定义slidermenu的基础构造
// 使用方法请查看 yo-slidermenu.scss
@mixin _slidermenu {
&,
.item {
position: relative;
}
.front {
position: relative;
z-index: 2;
background-color: #fff;
}
.action {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
width: map-get($slidermenu, action-width);
height: 100%;
background-color: map-get($slidermenu, action-bgcolor);
}
}
// 定义rating的基础构造
// 使用方法请查看 yo-rating.scss
@mixin _rating {
display: inline-block;
position: relative;
width: map-get($rating, item-width) * 5;
height: map-get($rating, item-height);
overflow: hidden;
&,
> .index,
> .item {
background: url(#{map-get($setting, bgimg-domain)}#{map-get($rating, url)}) repeat-x;
@if map-get($rating, item-height) != null {
background-size: auto map-get($rating, item-height) * 2;
}
}
> .index,
> .item {
position: absolute;
top: 0;
left: 0;
height: 100%;
line-height: 10;
}
> .index {
background-position: 0 -#{map-get($rating, item-height)};
}
> .item {
z-index: 3;
width: 20%;
// 默认情况下不显示
background-position: 0 100px;
cursor: pointer;
&:nth-of-type(2) {
left: 20%;
&:hover {
width: 40%;
}
}
&:nth-of-type(3) {
left: 40%;
&:hover {
width: 60%;
}
}
&:nth-of-type(4) {
left: 60%;
&:hover {
width: 80%;
}
}
&:nth-of-type(5) {
left: 80%;
&:hover {
width: 100%;
}
}
&:hover {
z-index: 2;
left: 0 !important;
background-position: 0 -#{map-get($rating, item-height)};
}
}
}
// 定义dblist的基础构造
// 使用方法请查看 yo-dblist.scss
@mixin _dblist {
@include flexbox;
min-height: 2rem;
height: 100%;
> .item {
position: relative;
min-width: .1rem;
&:first-child {
width: map-get($dblist, aside-width);
@include order(map-get($dblist, aside-order));
}
&:not(:first-child) {
@include flex;
}
}
}