acud
Version:
acg react 组件库
654 lines (573 loc) • 17 kB
text/less
@import '../../style/themes/index';
@import '../../style/mixins/index';
@upload-prefix-cls: ~'@{acud-prefix}-upload';
@upload-item: ~'@{acud-prefix}-upload-list-item';
@upload-picture-card-size: 120px;
@upload-picture-card-border-style: 1px;
@heading-color: fade(#000, 85%);
@background-color-light: hsv(0, 0, 98%);
@border-color-base: hsv(0, 0, 85%);
@primary-7: @B7;
@primary-5: @B5;
@item-hover-bg: #f5f5f5;
@error-color: @E6;
@error-color-deprecated-bg: red;
@black: #000;
@text-color-dark: 255 255 255 .85;
@text-color-inverse: #fff;
@upload-pic-marker-bg: #080E1A;
@upload-pic-marker-color: #fff;
.@{upload-prefix-cls} {
.reset-component();
outline: 0;
p {
margin: 0;
}
&-btn {
display: block;
width: 100%;
outline: none;
}
input[type='file'] {
cursor: pointer;
}
&&-select {
display: inline-block;
}
&&-disabled {
cursor: not-allowed;
}
&&-select-picture-card {
width: @upload-picture-card-size;
height: @upload-picture-card-size;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
vertical-align: top;
// background-color: @background-color-light;
// border: @border-width-base dashed @border-color-base;
border-radius: @R3;
border-width: 1px;
border-style: solid;
cursor: pointer;
transition: border-color .3s;
overflow: hidden;
.basic-tp-config(@upload-pic-tp);
.basic-p-config(@upload-pic-p);
.@{iconfont-css-prefix} {
.basic-tp-config(@upload-poc-icon-tp);
}
> .@{upload-prefix-cls} {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
// &:hover {
// border-color: @primary-color;
// .@{upload-prefix-cls}-disabled& {
// border-color: @border-color-base;
// }
// }
}
&&-drag {
position: relative;
width: 100%;
height: 100%;
text-align: center;
border: @border-width-base dashed @border-color-base;
border-radius: @R4;
cursor: pointer;
transition: border-color .3s;
&.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
border-color: @primary-7;
}
&.@{upload-prefix-cls}-drag-click:not(.@{upload-prefix-cls}-disabled) {
border-color: @B7;
&:hover{
border-color: @B7;
}
}
&.@{upload-prefix-cls}-disabled {
background: @G10;
cursor: not-allowed;
}
.@{upload-prefix-cls}-btn {
display: table;
height: 100%;
}
.@{upload-prefix-cls}-drag-container {
display: table-cell;
vertical-align: middle;
}
&:not(.@{upload-prefix-cls}-disabled):hover {
border-color: @primary-5;
}
p.@{upload-prefix-cls}-drag-icon {
.@{iconfont-css-prefix} {
color: @primary-5;
font-size: 48px;
}
margin-bottom: 20px;
}
p.@{upload-prefix-cls}-text {
margin: 0 0 4px;
color: @heading-color;
font-size: @font-size-lg;
}
p.@{upload-prefix-cls}-hint {
color: @text-color-secondary;
font-size: @font-size-base;
}
.@{iconfont-css-prefix}-outlined-plus {
color: @disabled-color;
font-size: 30px;
transition: all .3s;
&:hover {
color: @text-color-secondary;
}
}
&:hover .@{iconfont-css-prefix}-outlined-plus {
color: @text-color-secondary;
}
}
&-picture-card-wrapper {
// .clearfix();
display: inline-block;
width: 100%;
}
&-des-bottom {
font-size: @T2;
color: @G5;
margin: @P 0;
line-height: 1.5;
font-weight: @font-weight-400;
}
&-des-right {
font-size: @T2;
color: @G5;
margin-left: @P * 2;
font-weight: @font-weight-400;
display: inline-block;
line-height: @P * 8;
vertical-align: bottom;
}
}
.@{upload-prefix-cls}-list {
.reset-component();
// .clearfix();
line-height: @line-height-base;
// ============================ Item ============================
&-item {
position: relative;
font-size: @font-size-base;
transition: background-color .3s;
overflow-y: hidden;
&-name {
display: inline-block;
width: 100%;
padding-left: @font-size-base + 8px;
overflow: hidden;
line-height: @line-height-base;
white-space: nowrap;
text-overflow: ellipsis;
.basic-tp-config(@upload-list-tp);
}
&-card-actions {
position: absolute;
right: @P;
&-btn {
opacity: 0;
}
&-btn.@{acud-prefix}-btn-sm {
height: 20px;
line-height: 1;
width: 15px;
vertical-align: -30%;
}
&.picture {
top: 22px;
line-height: 0;
}
&-btn:focus,
&.picture &-btn {
opacity: 1;
}
.@{iconfont-css-prefix} {
.basic-tp-config(@upload-list-close-tp);
}
}
&-info {
height: @P * 6;
padding: 0 .5 * @P;
border-radius: @R2;
> span {
display: block;
width: 100%;
height: 100%;
}
.@{iconfont-css-prefix}-outlined-loading,
.@{upload-prefix-cls}-text-icon {
line-height: 0;
.@{iconfont-css-prefix} {
color: @text-color-secondary;
font-size: @font-size-base;
.basic-tp-config(@upload-list-icon-tp);
}
}
}
.@{iconfont-css-prefix}-outlined-close {
// position: absolute;
// top: 4px;
// right: 4px;
// color: @text-color-secondary;
font-size: 10px;
line-height: 0;
cursor: pointer;
opacity: 0;
transition: all .3s;
&:hover {
color: @text-color;
}
}
&:hover {
// background-color: @item-hover-bg;
background-color: ~'@{@{upload-list-p}-hover-background-color}';
}
&:hover .@{iconfont-css-prefix}-outlined-close {
opacity: 1;
}
.@{iconfont-css-prefix}-outlined-cloud-download {
transition: all .3s;
opacity: 0;
}
&:hover .@{iconfont-css-prefix}-outlined-cloud-download {
opacity: 1;
}
&-card-actions-btn {
margin-right: 6px;
&:last-child {
margin-right: 0;
}
}
&:hover &-card-actions-btn {
opacity: 1;
}
&-error,
&-error .@{upload-prefix-cls}-text-icon > .@{iconfont-css-prefix},
&-error &-name,
&-error .@{upload-prefix-cls}-list-item-info .@{upload-prefix-cls}-text-icon .@{iconfont-css-prefix}:hover {
color: @error-color;
}
&-error &-card-actions {
.@{upload-prefix-cls}-text-icon {
color: @error-color;
}
}
&-progress {
width: 100%;
padding-left: @P;
padding-right: @P;
font-size: @T2;
line-height: 0;
}
}
// =================== Picture & Picture Card ===================
&-picture,
&-picture-card {
.@{upload-item} {
position: relative;
height: 66px;
padding: 0;
border: @border-width-base solid @border-color-base;
border-radius: @border-radius-base;
&:hover {
background: transparent;
}
}
.@{upload-item}.@{upload-item}-error {
border-color: @error-color;
}
.@{upload-item}-info {
padding: 0;
height: 56px;
}
.@{upload-item}:hover .@{upload-item}-info {
background: transparent;
}
// .@{upload-item}-uploading {
// border-style: dashed;
// }
.@{upload-item}-thumbnail {
width: 48px;
height: 48px;
line-height: 90px;
text-align: center;
opacity: .8;
.@{iconfont-css-prefix} {
// margin-top: 24px;
font-size: 26px;
}
}
// Adjust the color of the error icon : https://github.com/acud-design/acud-design/pull/24160
.@{upload-item}-error .@{upload-item}-thumbnail {
.@{iconfont-css-prefix} {
svg path {
&[fill='#e6f7ff'] {
fill: @error-color-deprecated-bg;
}
&[fill='#1890ff'] {
fill: @error-color;
}
}
}
}
.@{upload-item}-icon {
position: absolute;
top: 50%;
left: 50%;
font-size: 26px;
transform: translate(-50%, -50%);
.@{iconfont-css-prefix} {
font-size: 26px;
}
}
.@{upload-item}-image {
max-width: 100%;
}
.@{upload-item}-thumbnail img {
display: block;
width: 48px;
height: 48px;
overflow: hidden;
}
.@{upload-item}-name {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
margin: 0 0 0 8px;
padding-right: 8px;
padding-left: 48px;
overflow: hidden;
line-height: 44px;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .3s;
}
// .@{upload-item}-uploading .@{upload-item}-name {
// margin-bottom: 12px;
// }
.@{iconfont-css-prefix}-outlined-close {
position: absolute;
top: 8px;
right: 8px;
line-height: 1;
opacity: 1;
}
}
// ======================== Picture Card ========================
&-picture-card {
&-container {
display: inline-block;
width: @upload-picture-card-size;
height: @upload-picture-card-size;
margin: 0 @margin-xs @margin-xs 0;
vertical-align: top;
}
&.@{upload-prefix-cls}-list {
&::after {
display: none;
}
}
.@{upload-item} {
height: 100%;
margin: 0;
border: 1px solid ~'@{@{upload-pic-p}-default-border-color}';
border-radius: @R3;
}
.@{upload-item}-info {
position: relative;
height: 100%;
overflow: hidden;
&::before {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: fade(@upload-pic-marker-bg, 50%);
opacity: 0;
transition: all .3s;
content: ' ';
}
}
.@{upload-item}:hover .@{upload-item}-info::before {
opacity: 1;
}
.@{upload-item}-actions {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
white-space: nowrap;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .3s;
.@{iconfont-css-prefix}-outlined-button-upload,
.@{iconfont-css-prefix}-outlined-eye,
.@{iconfont-css-prefix}-outlined-download,
.@{iconfont-css-prefix}-outlined-delete {
z-index: 10;
width: 16px;
color: @upload-pic-marker-color;
font-size: 16px;
vertical-align: -4px;
cursor: pointer;
transition: all .3s;
color: #fff;
}
> * {
margin-right: 8px;
&:last-child {
margin-right: 0;
}
}
}
.@{upload-item}-info:hover + .@{upload-item}-actions,
.@{upload-item}-actions:hover {
opacity: 1;
}
.@{upload-item}-thumbnail,
.@{upload-item}-thumbnail img {
position: static;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.@{upload-item}-name {
display: none;
margin: 8px 0 0;
padding: 0;
line-height: @line-height-base;
text-align: center;
}
.@{upload-item}-file + .@{upload-item}-name {
position: absolute;
bottom: 38px;
display: block;
}
.@{upload-item}-uploading {
.@{upload-item}-info {
height: 100%;
&::before,
.@{iconfont-css-prefix}-outlined-eye,
.@{iconfont-css-prefix}-outlined-button-upload,
.@{iconfont-css-prefix}-outlined-delete {
display: none;
}
}
.@{upload-prefix-cls}-list-item-info .@{upload-prefix-cls}-list-item-thumbnail {
line-height: 140px;
}
}
.@{upload-item}-progress {
position: absolute;
top: 11 * @P;
left: 50%;
padding-left: 2 * @P;
padding-right: 2 * @P;
width: 24 * @P;
transform: translateX(-50%);
}
}
// ======================= Picture & Text =======================
&-text,
&-picture {
&-container {
transition: opacity @animation-duration-slow, height @animation-duration-slow;
&::before {
display: table;
width: 0;
height: 0;
content: '';
}
// Don't know why span here, just stretch it
.@{upload-prefix-cls}-span {
display: block;
flex: auto;
}
}
// text & picture no need this additional element.
// But it used for picture-card, let's keep it.
.@{upload-prefix-cls}-span {
display: flex;
align-items: center;
> * {
flex: none;
}
}
.@{upload-item}-name {
flex: auto;
margin: 0;
padding: 0 @P * 2 0 @P;
}
// .@{upload-item}-card-actions {
// position: static;
// }
}
// ============================ Text ============================
&-text {
&-container {
margin-bottom: @P * 2;
&:first-child {
margin-top: @P * 2;
}
}
.@{upload-item}-progress {
margin-top: @P;
margin-bottom: @P * 0.5;
}
}
// =========================== Motion ===========================
.@{upload-prefix-cls}-animate-inline-appear,
.@{upload-prefix-cls}-animate-inline-enter,
.@{upload-prefix-cls}-animate-inline-leave {
animation-duration: @animation-duration-slow;
animation-fill-mode: @ease-in-out-circ;
}
.@{upload-prefix-cls}-animate-inline-appear,
.@{upload-prefix-cls}-animate-inline-enter {
animation-name: uploadAnimateInlineIn;
}
.@{upload-prefix-cls}-animate-inline-leave {
animation-name: uploadAnimateInlineOut;
}
.error-tooltip {
.@{acud-prefix}-tooltip-inner {
color: @E6;
}
}
.@{acud-prefix}-progress-line .@{acud-prefix}-progress-wrapper {
margin-right: 0;
padding-right: 0;
}
}
@keyframes uploadAnimateInlineIn {
from {
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}
@keyframes uploadAnimateInlineOut {
to {
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}