常用样式
2017-10-13 本文已影响0人
谁在听
/*单行文本超出省略*/
.aui-ellipsis-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*两行文本超出省略*/
.aui-ellipsis-2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*水平线*/
.aui-hr {
width: 100%;
position: relative;
border-top: 1px solid #dddddd;
height: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
.aui-hr{
border: none;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd
50%,transparent 50%);
}
}
/*单选、多选、开关*/
.aui-radio,
.aui-checkbox {
width: 1.2rem;
height: 1.2rem;
background-color: #ffffff;
border: solid 1px #dddddd;
-webkit-border-radius: 0.6rem;
border-radius: 0.6rem;
font-size: 0.8rem;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
vertical-align: top;
cursor: default;
-webkit-appearance: none;
-webkit-user-select: none;
user-select: none;
-webkit-transition: background-color ease 0.1s;
transition: background-color ease 0.1s;
}
.aui-checkbox {
border-radius: 0.1rem;
}
.aui-radio:checked,
.aui-radio.aui-checked,
.aui-checkbox:checked,
.aui-checkbox.aui-checked {
background-color: #03a9f4;
border: solid 1px #03a9f4;
text-align: center;
background-clip: padding-box;
}
.aui-radio:checked:before,
.aui-radio.aui-checked:before,
.aui-checkbox:checked:before,
.aui-checkbox.aui-checked:before,
.aui-radio:checked:after,
.aui-radio.aui-checked:after,
.aui-checkbox:checked:after,
.aui-checkbox.aui-checked:after {
content: '';
width: 0.5rem;
height: 0.3rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.25rem;
margin-top: -0.25rem;
background: transparent;
border: 1px solid #ffffff;
border-top: none;
border-right: none;
z-index: 2;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.aui-radio:disabled,
.aui-radio.aui-disabled,
.aui-checkbox:disabled,
.aui-checkbox.aui-disabled {
background-color: #dddddd;
border: solid 1px #dddddd;
}
.aui-radio:disabled:before,
.aui-radio.aui-disabled:before,
.aui-radio:disabled:after,
.aui-radio.aui-disabled:after,
.aui-checkbox:disabled:before,
.aui-checkbox.aui-disabled:before,
.aui-checkbox:disabled:after,
.aui-checkbox.aui-disabled:after {
content: '';
width: 0.5rem;
height: 0.3rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.25rem;
margin-top: -0.25rem;
background: transparent;
border: 1px solid #ffffff;
border-top: none;
border-right: none;
z-index: 2;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.aui-switch {
width: 2.3rem;
height: 1.2rem;
position: relative;
vertical-align: top;
border: 1px solid #dddddd;
background-color: #dddddd;
border-radius: 0.6rem;
background-clip: content-box;
display: inline-block;
outline: none;
-webkit-appearance: none;
appearance: none;
-webkit-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.aui-switch:before {
width: 1.1rem;
height: 1.1rem;
position: absolute;
top: 0;
left: 0;
border-radius: 0.6rem;
background-color: #fff;
content: '';
-webkit-transition: left 0.2s;
transition: left 0.2s;
}
.aui-switch:checked {
border-color: #03a9f4;
background-color: #03a9f4;
}
.aui-switch:checked:before {
left: 1.1rem;
}