yu.css.ui
Version:
纯CSS通用UI模块和组件
146 lines (145 loc) • 4.67 kB
CSS
ul.yu-file-list {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px;
color: #606266;
padding-inline-start: 0;
padding: 0; }
ul.yu-file-list > li {
list-style: none; }
ul.yu-file-list > li {
font-size: 0; }
ul.yu-file-list > li > span {
vertical-align: middle;
font-size: 14px; }
ul.yu-file-list > li > i {
vertical-align: middle;
font-size: 14px; }
ul.yu-file-list.simple > li {
transition: background-color 0.4s ease;
padding: 4px; }
ul.yu-file-list.simple > li.primary > i:first-child {
color: #409EFF; }
ul.yu-file-list.simple > li.primary > span {
color: #409EFF; }
ul.yu-file-list.simple > li.success > i:first-child {
color: #67C23A; }
ul.yu-file-list.simple > li.success > span {
color: #67C23A; }
ul.yu-file-list.simple > li.warning > i:first-child {
color: #fecf20; }
ul.yu-file-list.simple > li.warning > span {
color: #fecf20; }
ul.yu-file-list.simple > li.info > i:first-child {
color: #909399; }
ul.yu-file-list.simple > li.info > span {
color: #909399; }
ul.yu-file-list.simple > li.danger > i:first-child {
color: #F56C6C; }
ul.yu-file-list.simple > li.danger > span {
color: #F56C6C; }
ul.yu-file-list.simple > li:hover {
background-color: #f5f5f9; }
ul.yu-file-list.simple > li:hover > i.icon-close {
opacity: 1; }
ul.yu-file-list.simple > li:hover > i.icon-close:hover {
color: #767980; }
ul.yu-file-list.simple > li > i {
font-size: 14px; }
ul.yu-file-list.simple > li > i.icon-close {
cursor: pointer;
color: #909399;
transition: opacity 0.4s ease;
float: right;
opacity: 0;
padding: 4px; }
ul.yu-file-list.picture > li {
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid #E4E7ED;
border-radius: 4px;
display: inline-block;
margin: 0 8px 14px 0; }
ul.yu-file-list.picture > li > .wrap {
font-size: 0;
position: relative;
height: 100%;
line-height: 98px;
text-align: center; }
ul.yu-file-list.picture > li > .wrap > img {
vertical-align: middle;
max-width: 98px;
max-height: 98px; }
ul.yu-file-list.picture > li > .wrap > .mask {
position: absolute;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
text-align: center;
transition: opacity 0.4s ease; }
ul.yu-file-list.picture > li > .wrap > .mask > i {
opacity: 0.8;
margin: 0 4px;
cursor: pointer;
transition: opacity 0.4s ease; }
ul.yu-file-list.picture > li > .wrap > .mask > i:hover {
opacity: 1; }
ul.yu-file-list.picture > li > .wrap:hover > .mask {
opacity: 1; }
ul.yu-file-list.title-picture > li {
position: relative;
height: 60px;
box-sizing: border-box;
border: 1px solid #E4E7ED;
border-radius: 4px;
margin: 0 8px 14px 0;
display: flex; }
ul.yu-file-list.title-picture > li > .wrap {
font-size: 0;
width: 58px;
height: 58px;
line-height: 58px;
text-align: center;
display: inline-block;
align-items: center; }
ul.yu-file-list.title-picture > li > .wrap > img {
vertical-align: middle;
max-width: 58px;
max-height: 58px; }
ul.yu-file-list.title-picture > li > span {
align-items: center;
vertical-align: middle;
line-height: 58px;
word-break: break-all;
padding: 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
ul.yu-file-list.title-picture > li i.icon-close {
position: absolute;
top: 0;
right: 0; }
ul.yu-file-list.title-picture > li:hover > i.icon-close {
opacity: 1; }
ul.yu-file-list.title-picture > li:hover > i.icon-close:hover {
color: #767980; }
ul.yu-file-list.title-picture > li > i {
font-size: 14px;
vertical-align: middle; }
ul.yu-file-list.title-picture > li > i.icon-close {
cursor: pointer;
color: #909399;
transition: opacity 0.4s ease;
float: right;
opacity: 0;
padding: 4px; }
ul.yu-file-list.inline {
display: flex; }
ul.yu-file-list.inline > li {
width: 200px; }
ul.yu-file-list.block > li {
width: 100%; }