@charset "utf-8";
@import "../core/variables";
@import "../core/classes";
/**
* Yo框架fragment基础构造
-----------------------
* Yo内置了包括:dialog, popup, tip, tab, switch, rating等基础组件
*
* @class fragment
* @module Yo
*/
// 定义list的基础构造
// 使用方法请查看 yo-list.scss
@mixin _list {
margin: map-get($list, margin);
border-radius: map-get($list, radius);
// 当边框厚度大于0时,才定义边框相关属性
@if map-get($list, border-width) != null and
map-get($list, border-width) != 0 {
border-width: map-get($list, border-width);
border-style: solid;
border-color: map-get($list, bordercolor);
}
> .label,
> .item,
.front {
@include flexbox;
@include align-items;
> .mark:not(:last-child),
> .yo-ico:not(:last-child) {
margin-right: .1rem;
}
// 定义需要自适应宽度的列
> .flex {
@include flex;
}
> .mark,
> .yo-ico,
> .col,
> .flex {
display: block;
}
&.tr {
// 当模式为table时,padding将设置到col上
padding: 0;
}
}
> .label {
margin-top: -1px;
padding: map-get($list, label-padding);
border: 1px solid map-get($list, label-bordercolor);
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 {
border-bottom: .01rem solid map-get($list, item-bordercolor);
background-color: #fff;
color: map-get($base, color);
font-size: map-get($list, item-font-size);
&:last-child {
margin-bottom: -.01rem;
// 最后一根线的颜色与外边框颜色相同
border-color: map-get($list, bordercolor);
}
&-stacked {
display: block;
> .mark {
padding-bottom: .05rem;
}
}
&-input {
// 让输入框占满整个父容器
> .yo-input {
height: auto;
padding: 0;
border: 0;
}
}
&-input,
&-active,
&-on,
&-light {
cursor: pointer;
}
// 常规需要active的项目,没有使用到第3方组件的
&.item-active:active,
// 为第3方组件提供active状态
&.item-light {
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);
}
}
> .yo-slidermenu {
display: block;
padding: 0 !important;
}
}
// 定义table的基础构造
// 使用方法请查看 yo-table.scss
@mixin _table {
width: map-get($table, width);
background-color: #fff;
thead {
background-color: map-get($table, thead-bgcolor);
th {
padding: map-get($table, thead-padding);
}
}
td {
padding: map-get($table, tbody-padding);
}
th,
td {
// 判断是够需要垂直边框
@if map-get($table, has-vertical-border) == false {
border-width: 0 0 1px 0;
} @else {
border-width: 1px;
}
border-style: solid;
border-color: map-get($table, bordercolor);
}
tbody {
tr:nth-child(odd) {
background-color: map-get($table, odd-bgcolor);
}
tr:nth-child(even) {
background-color: map-get($table, even-bgcolor);
}
tr:active,
tr.active {
background-color: map-get($table, active-bgcolor);
}
tr.on{
background-color: map-get($table, on-bgcolor);
}
}
}
// 定义btnbar的基础构造
// 使用方法请查看 yo-btnbar.scss
@mixin _btnbar {
display: inline-block;
vertical-align: middle;
> .yo-btn {
float: left;
&:not(:first-child) {
margin-left: -.01rem !important;
}
&:first-child {
// 如果按钮有圆角,那么去掉第一个按钮的右侧圆角
@if map-get($btn, radius) != 0 {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
// 如果工具栏定义了圆角,那么不管按钮有没有左侧圆角,都重绘
@if map-get($btnbar, radius) != auto and map-get($btnbar, radius) != map-get($btn, radius) {
border-top-left-radius: map-get($btnbar, radius);
border-bottom-left-radius: map-get($btnbar, radius);
}
}
&:last-child {
// 如果按钮有圆角,那么去掉最后一个按钮的左侧圆角
@if map-get($btn, radius) != 0 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// 如果工具栏定义了圆角,那么不管按钮有没有右侧圆角,都重绘
@if map-get($btnbar, radius) != auto and map-get($btnbar, radius) != map-get($btn, radius) {
border-top-right-radius: map-get($btnbar, radius);
border-bottom-right-radius: map-get($btnbar, radius);
}
}
&:not(:first-child):not(:last-child){
// 如果按钮有圆角,那么清除中间所有按钮的圆角
@if map-get($btn, radius) != 0 {
border-radius: 0;
}
}
}
}
// 定义header的基础构造
// 使用方法请查看 yo-header.scss
@mixin _header {
position: relative;
overflow: hidden;
height: map-get($header, height);
line-height: map-get($header, height);
border-bottom: 1px solid map-get($header, bordercolor);
background-color: map-get($header, bgcolor);
// 如果config预设值不等于base color,则重绘color
@if map-get($header, color) != map-get($base, color) {
color: map-get($header, color);
}
// 如果config预设值不等于base font-size,则重绘font-size
@if map-get($header, font-size) != map-get($base, font-size) {
font-size: map-get($header, font-size);
}
@include ellipsis;
text-align: center;
> .title {
@include ellipsis;
margin: 0 map-get($header, item-width);
}
> .regret,
> .affirm {
position: absolute;
top: 0;
width: map-get($header, item-width);
// 如果config预设值不等于parent font-size,则重绘子项的font-size
@if map-get($header, item-font-size) != map-get($header, font-size) {
font-size: map-get($header, item-font-size);
}
@include link;
&.yo-ico,
> .yo-ico {
font-size: map-get($header, item-ico-size);
}
}
> .regret {
left: 0;
padding-left: map-get($header, item-space);
text-align: left;
}
> .affirm {
right: 0;
padding-right: map-get($header, item-space);
text-align: right;
}
}