view-ui-plus
Version:
A high quality UI components Library with Vue.js 3
114 lines (112 loc) • 2.6 kB
text/less
@image-preview-prefix-cls: ~"@{css-prefix}image-preview";
.@{image-preview-prefix-cls} {
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
&-mask {
.mask;
}
&-wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
user-select: none;
overflow: hidden;
}
&-transition {
transition: transform .3s ease;
}
&-image {
cursor: grab;
}
&-grabbing {
cursor: grabbing;
}
&-limit {
max-width: 100%;
max-height: 100%;
}
&-loading, &-fail {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&-fail {
color: @white;
font-size: @font-size-large;
}
&-hidden {
display: none;
}
&-operations {
height: 40px;
position: absolute;
left: 50%;
bottom: 30px;
z-index: 1;
border-radius: @border-radius-small;
overflow: hidden;
background: @image-preview-operations-background;
transform: translate(-50%);
&-item {
margin: 0 6px;
padding: 4px 8px;
width: 36px;
height: 40px;
color: @white;
cursor: pointer;
transition: opacity .1s @ease-in-out;
&:hover {
opacity: @image-preview-operations-hover;
}
}
&-wait {
cursor: wait;
}
}
&-arrow-left,
&-arrow-right,
&-arrow-close {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
color: @white;
cursor: pointer;
z-index: 1;
font-size: @image-preview-operations-fontsize;
background: @image-preview-operations-background;
//transition: opacity .1s @ease-in-out;
//&:not(.@{image-preview-prefix-cls}-arrow-disabled):hover {
// opacity: @image-preview-operations-hover;
//}
}
&-arrow-close {
position: absolute;
right: 16px;
top: 16px;
}
&-arrow-left,
&-arrow-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&-arrow-left {
left: 16px;
}
&-arrow-right {
right: 16px;
}
&-arrow-disabled {
cursor: @cursor-disabled;
color: @image-preview-operations-disabled-color;
}
}