548 lines
11 KiB
Plaintext
548 lines
11 KiB
Plaintext
@import '../../styles/common';
|
|
@import '../../Button/styles/mixin';
|
|
@import '../../Loader/styles/mixin';
|
|
@import 'mixin';
|
|
|
|
// Uploader
|
|
// ----------------------
|
|
|
|
// Uploader Name Space
|
|
@uplns: ~'@{ns}uploader';
|
|
|
|
.@{uplns} {
|
|
&-trigger {
|
|
input[type='file'] {
|
|
position: absolute !important;
|
|
clip: rect(1px 1px 1px 1px);
|
|
}
|
|
|
|
&-disabled {
|
|
opacity: 0.3;
|
|
//cursor: not-allowed;
|
|
|
|
.@{uplns}-trigger-btn {
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-file-item-disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
|
|
.@{uplns}-picture & .@{uplns}-file-item-status {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.@{uplns}-file-item-btn-remove {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-file-item-icon-reupload {
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
color: @uploader-file-item-retry-icon-color;
|
|
|
|
&::before {
|
|
font-family: @font-family-icon;
|
|
content: @uploader-file-item-retry-icon-content;
|
|
font-style: normal;
|
|
|
|
&,
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{uplns}-text {
|
|
.@{uplns}-file-items {
|
|
margin-top: @uploader-file-list-margin-top;
|
|
}
|
|
|
|
.@{uplns}-file-item {
|
|
padding: @padding-base-vertical 30px @padding-base-vertical 36px;
|
|
position: relative;
|
|
transition: 0.3s linear background-color;
|
|
|
|
&:hover {
|
|
background-color: @uploader-item-hover-background-color;
|
|
}
|
|
|
|
&-icon-wrapper {
|
|
position: absolute;
|
|
display: inline-block;
|
|
top: @padding-base-vertical;
|
|
left: @padding-base-horizontal;
|
|
width: @line-height-computed;
|
|
text-align: center;
|
|
}
|
|
|
|
&-icon-loading {
|
|
.@{uplns}-file-item-icon {
|
|
.set-side-length(@loader-default-diameter);
|
|
.loader-spin();
|
|
}
|
|
}
|
|
|
|
&-icon {
|
|
&::before {
|
|
font-family: @font-family-icon;
|
|
content: @uploader-file-item-icon-content;
|
|
font-style: normal;
|
|
color: @uploader-default-font-color;
|
|
font-size: @uploader-file-item-icon-font-size;
|
|
line-height: unit((@line-height-computed / @uploader-file-item-icon-font-size));
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&,
|
|
& > a {
|
|
color: @uploader-default-font-color;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
> a {
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
.ellipsis();
|
|
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&-size {
|
|
flex: 0 0 auto;
|
|
color: @uploader-light-font-color;
|
|
padding: 0 @uploader-base-padding;
|
|
}
|
|
|
|
&-status {
|
|
flex: 0 0 auto;
|
|
.ie-float(right);
|
|
.ie-display(table);
|
|
|
|
> a {
|
|
.reset-link-text-decoration();
|
|
}
|
|
}
|
|
|
|
&-btn-remove {
|
|
position: absolute;
|
|
font-size: 12px;
|
|
// (36px - font-size)/2
|
|
top: 12px;
|
|
right: @padding-base-horizontal;
|
|
color: @uploader-light-font-color;
|
|
cursor: pointer;
|
|
.icon-font();
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&::before {
|
|
.icon-font();
|
|
|
|
content: @default-close-btn-content;
|
|
}
|
|
|
|
[aria-hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-panel {
|
|
position: relative;
|
|
}
|
|
|
|
&-progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
|
|
&-bar {
|
|
height: 2px;
|
|
background-color: @H500;
|
|
transition: width 0.3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{uplns}-file-item-has-error {
|
|
.@{uplns}-file-item-content,
|
|
.@{uplns}-file-item-title {
|
|
color: @error-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{uplns}-picture {
|
|
display: inline-block;
|
|
.clearfix();
|
|
|
|
.@{uplns}-trigger-btn {
|
|
.btn(base);
|
|
.button-ripple();
|
|
.btn-subtle();
|
|
|
|
width: @uploader-picture-side-length;
|
|
height: @uploader-picture-side-length;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 2px dotted @uploader-picture-border-color;
|
|
border-radius: @border-radius-base;
|
|
margin-top: @uploader-picture-item-gap;
|
|
}
|
|
|
|
.@{uplns}-trigger.@{uplns}-trigger-disabled .@{uplns}-trigger-btn {
|
|
color: @btn-subtle-color !important;
|
|
background-color: transparent !important;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.@{uplns}-trigger,
|
|
.@{uplns}-file-item {
|
|
float: left;
|
|
}
|
|
|
|
.@{uplns}-file-items {
|
|
display: inline;
|
|
}
|
|
|
|
.@{uplns}-file-item {
|
|
width: @uploader-picture-side-length;
|
|
height: @uploader-picture-side-length;
|
|
overflow: hidden;
|
|
background-color: @uploader-picture-background-color;
|
|
border-radius: @border-radius-base;
|
|
position: relative;
|
|
margin-top: @uploader-picture-item-gap;
|
|
margin-right: @uploader-picture-item-gap;
|
|
|
|
&-preview {
|
|
position: relative;
|
|
height: @uploader-picture-side-length;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
z-index: @zindex-uploader-picture-preview;
|
|
|
|
> img {
|
|
.img-cover();
|
|
}
|
|
}
|
|
|
|
&-status {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: @uploader-picture-side-length;
|
|
height: @uploader-picture-side-length;
|
|
text-align: center;
|
|
z-index: @zindex-uploader-picture-error-wrapper;
|
|
background-color: @uploader-picture-item-background;
|
|
cursor: default;
|
|
color: @error-color;
|
|
padding-top: 14px;
|
|
|
|
> span {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
> a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&-icon-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
&-btn-remove {
|
|
color: @uploader-light-font-color;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 3px;
|
|
width: @uploader-picture-remove-button-radius;
|
|
height: @uploader-picture-remove-button-radius;
|
|
line-height: @uploader-picture-remove-button-radius;
|
|
text-align: center;
|
|
background-color: @uploader-picture-item-btn-remove-background;
|
|
border-radius: 50%;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: 0.2s opacity;
|
|
z-index: @zindex-uploader-picture-remove-button;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&::before {
|
|
.icon-font();
|
|
|
|
content: @default-close-btn-content;
|
|
}
|
|
|
|
[aria-hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover .@{uplns}-file-item-btn-remove {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
&-icon-loading {
|
|
display: block;
|
|
width: @uploader-picture-side-length;
|
|
height: @uploader-picture-side-length;
|
|
line-height: @uploader-picture-side-length;
|
|
background-color: @uploader-picture-item-background;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: @zindex-uploader-picture-loading-wrapper;
|
|
text-align: center;
|
|
|
|
.@{uplns}-file-item-icon {
|
|
.set-side-length(@loader-default-diameter);
|
|
.loader-spin();
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reset margin-left.
|
|
.@{uplns}-file-item-icon-reupload {
|
|
margin-left: 0;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.@{uplns}-text,
|
|
.@{uplns}-picture-text {
|
|
.@{uplns}-trigger-btn {
|
|
.btn(base);
|
|
|
|
color: @btn-default-color;
|
|
background: @btn-default-bg;
|
|
}
|
|
|
|
.@{uplns}-trigger-disabled .@{uplns}-trigger-btn {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.@{uplns}-trigger:not(.@{uplns}-trigger-disabled) .@{uplns}-trigger-btn {
|
|
.button-ripple();
|
|
|
|
&:focus,
|
|
&.focus {
|
|
color: @btn-default-color;
|
|
background-color: @btn-default-focus-bg;
|
|
}
|
|
|
|
&:hover {
|
|
color: @btn-default-hover-color;
|
|
background-color: @btn-default-hover-bg;
|
|
}
|
|
|
|
&:active,
|
|
&.@{ns}btn-active {
|
|
color: @btn-default-color;
|
|
background-color: @btn-default-active-bg;
|
|
background-image: none;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.focus {
|
|
color: @btn-default-color;
|
|
background-color: @btn-default-active-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{uplns}-picture-text {
|
|
.@{uplns}-file-item {
|
|
position: relative;
|
|
height: @uploader-picture-text-preview-side-length;
|
|
padding-left: @uploader-picture-text-preview-side-length;
|
|
margin-top: @uploader-picture-item-gap;
|
|
padding-right: 30px;
|
|
border: 1px solid @uploader-picture-text-border-color;
|
|
border-radius: @border-radius-base;
|
|
overflow: hidden;
|
|
transition: 0.3s linear background-color;
|
|
|
|
&:hover {
|
|
background-color: @uploader-item-hover-background-color;
|
|
}
|
|
|
|
&-icon-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
&-preview {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: @uploader-picture-text-preview-side-length;
|
|
height: @uploader-picture-text-preview-side-length;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
background-color: @uploader-picture-background-color;
|
|
overflow: hidden;
|
|
border-radius: @border-radius-base 0 0 @border-radius-base;
|
|
|
|
> img {
|
|
.img-cover();
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
padding: 5px 12px;
|
|
|
|
.@{uplns}-file-item-title,
|
|
.@{uplns}-file-item-size {
|
|
display: block;
|
|
}
|
|
|
|
.@{uplns}-file-item-title {
|
|
.ellipsis();
|
|
|
|
color: @uploader-default-font-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.@{uplns}-file-item-size {
|
|
color: @uploader-light-font-color;
|
|
}
|
|
}
|
|
|
|
&-btn-remove {
|
|
position: absolute;
|
|
top: 0;
|
|
right: @padding-base-horizontal;
|
|
color: @uploader-light-font-color;
|
|
cursor: pointer;
|
|
height: @uploader-picture-text-preview-side-length;
|
|
line-height: @uploader-picture-text-preview-side-length;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&::before {
|
|
.icon-font();
|
|
|
|
content: @default-close-btn-content;
|
|
}
|
|
|
|
[aria-hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
padding-left: @uploader-picture-text-preview-side-length;
|
|
|
|
&-bar {
|
|
height: 2px;
|
|
background-color: @H500;
|
|
transition: width 0.3s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&-icon-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: @uploader-picture-text-preview-side-length;
|
|
height: @uploader-picture-text-preview-side-length;
|
|
z-index: 1;
|
|
background-color: @uploader-picture-item-background;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
|
|
.@{uplns}-file-item-icon {
|
|
.set-side-length(@loader-default-diameter);
|
|
.loader-spin();
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{uplns}-file-item-has-error {
|
|
.@{uplns}-file-item-size {
|
|
display: none;
|
|
}
|
|
|
|
.@{uplns}-file-item-title,
|
|
.@{uplns}-file-item-status {
|
|
display: block;
|
|
color: @error-color;
|
|
|
|
a,
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{uplns}-draggable {
|
|
.@{uplns}-trigger-customize .@{uplns}-trigger-btn {
|
|
display: block;
|
|
background: @uploader-drag-and-drop-background-color;
|
|
border: 1px dashed @uploader-drag-and-drop-border-color;
|
|
}
|
|
|
|
.@{uplns}-trigger.@{uplns}-trigger-customize:not(.@{uplns}-trigger-disabled) .@{uplns}-trigger-btn:hover,
|
|
.@{uplns}-trigger-drag-over .@{uplns}-trigger-btn.@{uplns}-trigger-customize {
|
|
border-color: @uploader-drag-and-drop-border-hover-color;
|
|
}
|
|
|
|
.@{uplns}-trigger-disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.@{uplns}-trigger-disabled .@{uplns}-trigger-btn {
|
|
pointer-events: none;
|
|
}
|
|
}
|