ant-design-vue/components/upload/style/index.less

471 lines
9.3 KiB
Plaintext
Raw Normal View History

@import '../../style/themes/default';
@import '../../style/mixins/index';
2018-04-13 08:19:50 +00:00
@upload-prefix-cls: ~'@{ant-prefix}-upload';
@upload-item: ~'@{ant-prefix}-upload-list-item';
2018-04-13 08:19:50 +00:00
@upload-pictrue-card-size: 104px;
.@{upload-prefix-cls} {
.reset-component;
outline: 0;
p {
margin: 0;
}
&-btn {
display: block;
width: 100%;
outline: none;
}
input[type='file'] {
2018-04-13 08:19:50 +00:00
cursor: pointer;
}
&&-select {
display: inline-block;
}
&&-select-picture-card {
border: @border-width-base dashed @border-color-base;
width: @upload-pictrue-card-size;
height: @upload-pictrue-card-size;
border-radius: @border-radius-base;
background-color: @background-color-light;
text-align: center;
cursor: pointer;
transition: border-color 0.3s ease;
vertical-align: top;
margin-right: 8px;
margin-bottom: 8px;
display: table;
> .@{upload-prefix-cls} {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 8px;
}
&:hover {
border-color: @primary-color;
}
}
&&-drag {
border: @border-width-base dashed @border-color-base;
transition: border-color 0.3s;
2018-04-13 08:19:50 +00:00
cursor: pointer;
border-radius: @border-radius-base;
text-align: center;
width: 100%;
height: 100%;
position: relative;
background: @background-color-light;
2018-09-16 13:36:22 +00:00
.@{upload-prefix-cls} {
padding: 16px 0;
}
2018-04-13 08:19:50 +00:00
&.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
border: 2px dashed @primary-5;
}
&.@{upload-prefix-cls}-disabled {
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} {
font-size: 48px;
color: @primary-5;
}
margin-bottom: 20px;
}
p.@{upload-prefix-cls}-text {
font-size: @font-size-lg;
margin: 0 0 4px;
color: @heading-color;
}
p.@{upload-prefix-cls}-hint {
font-size: @font-size-base;
color: @text-color-secondary;
}
.@{iconfont-css-prefix}-plus {
font-size: 30px;
transition: all 0.3s;
2018-04-13 08:19:50 +00:00
color: @disabled-color;
&:hover {
color: @text-color-secondary;
}
}
&:hover .@{iconfont-css-prefix}-plus {
color: @text-color-secondary;
}
}
}
.@{upload-prefix-cls}-list {
.reset-component;
.clearfix;
&-item {
margin-top: 8px;
font-size: @font-size-base;
position: relative;
height: 22px;
&-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: @font-size-base + 8px;
width: 100%;
display: inline-block;
}
&-info {
height: 100%;
padding: 0 12px 0 4px;
transition: background-color 0.3s;
2018-04-13 08:19:50 +00:00
> span {
display: block;
}
.@{iconfont-css-prefix}-loading,
.@{iconfont-css-prefix}-paper-clip {
font-size: @font-size-base;
color: @text-color-secondary;
position: absolute;
top: @font-size-base / 2 - 2px;
}
}
2018-11-14 13:33:56 +00:00
.@{iconfont-css-prefix}-close {
2018-04-13 08:19:50 +00:00
.iconfont-size-under-12px(10px);
transition: all 0.3s;
2018-04-13 08:19:50 +00:00
opacity: 0;
cursor: pointer;
position: absolute;
2018-11-14 13:33:56 +00:00
top: 6px;
2018-04-13 08:19:50 +00:00
right: 4px;
color: @text-color-secondary;
2018-11-14 13:33:56 +00:00
line-height: 0;
2018-04-13 08:19:50 +00:00
&:hover {
color: @text-color;
}
}
&:hover &-info {
background-color: @item-hover-bg;
}
2018-11-14 13:33:56 +00:00
&:hover .@{iconfont-css-prefix}-close {
2018-04-13 08:19:50 +00:00
opacity: 1;
}
&-error,
&-error .@{iconfont-css-prefix}-paper-clip,
&-error &-name {
color: @error-color;
}
2018-11-14 13:33:56 +00:00
&-error .@{iconfont-css-prefix}-close {
2018-04-13 08:19:50 +00:00
opacity: 1;
color: @error-color !important;
}
&-progress {
line-height: 0;
font-size: @font-size-base;
position: absolute;
width: 100%;
bottom: -12px;
padding-left: @font-size-base + 12px;
}
}
&-picture,
&-picture-card {
.@{upload-item} {
padding: 8px;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
height: 66px;
position: relative;
&:hover {
background: transparent;
}
&-error {
border-color: @error-color;
}
}
.@{upload-item}-info {
padding: 0;
}
.@{upload-item}:hover .@{upload-item}-info {
background: transparent;
}
.@{upload-item}-uploading {
border-style: dashed;
}
.@{upload-item}-thumbnail {
width: 48px;
height: 48px;
position: absolute;
top: 8px;
left: 8px;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
text-align: center;
line-height: 54px;
font-size: 26px;
opacity: 0.8;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
}
.@{upload-item}-icon {
font-size: 26px;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
2018-04-13 08:19:50 +00:00
}
.@{upload-item}-thumbnail img {
width: 48px;
height: 48px;
display: block;
overflow: hidden;
}
.@{upload-item}-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0 0 8px;
line-height: 44px;
transition: all 0.3s;
2018-04-13 08:19:50 +00:00
padding-left: 48px;
padding-right: 8px;
max-width: 100%;
display: inline-block;
box-sizing: border-box;
}
.@{upload-item}-uploading .@{upload-item}-name {
line-height: 28px;
}
.@{upload-item}-progress {
padding-left: 56px;
margin-top: 0;
bottom: 14px;
width: ~'calc(100% - 24px)';
2018-04-13 08:19:50 +00:00
}
2018-11-14 13:33:56 +00:00
.@{iconfont-css-prefix}-close {
2018-04-13 08:19:50 +00:00
position: absolute;
right: 8px;
top: 8px;
line-height: 1;
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
opacity: 1;
2018-04-13 08:19:50 +00:00
}
}
&-picture-card {
2018-11-14 13:33:56 +00:00
// https://github.com/ant-design/ant-design/issues/11183
float: left;
2018-04-13 08:19:50 +00:00
&.@{upload-prefix-cls}-list:after {
display: none;
}
.@{upload-item} {
float: left;
width: @upload-pictrue-card-size;
height: @upload-pictrue-card-size;
margin: 0 8px 8px 0;
}
.@{upload-item}-info {
height: 100%;
position: relative;
overflow: hidden;
&:before {
content: ' ';
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s;
2018-04-13 08:19:50 +00:00
width: 100%;
height: 100%;
opacity: 0;
}
}
.@{upload-item}:hover .@{upload-item}-info:before {
opacity: 1;
}
.@{upload-item}-actions {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
white-space: nowrap;
opacity: 0;
transition: all 0.3s;
2018-04-13 08:19:50 +00:00
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
z-index: 10;
transition: all 0.3s;
2018-04-13 08:19:50 +00:00
cursor: pointer;
font-size: 16px;
width: 16px;
color: @text-color-dark;
margin: 0 4px;
&:hover {
color: #fff;
}
}
}
.@{upload-item}-info:hover + .@{upload-item}-actions,
.@{upload-item}-actions:hover {
opacity: 1;
}
.@{upload-item}-thumbnail,
.@{upload-item}-thumbnail img {
display: block;
width: 100%;
height: 100%;
position: static;
}
.@{upload-item}-name {
margin: 8px 0 0;
padding: 0;
text-align: center;
line-height: @line-height-base;
display: none;
}
.anticon-picture + .@{upload-item}-name {
display: block;
}
.@{upload-item}-uploading {
&.@{upload-item} {
background-color: @background-color-light;
}
.@{upload-item}-info {
height: auto;
&:before,
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
display: none;
}
}
&-text {
margin-top: 18px;
color: @text-color-secondary;
}
}
.@{upload-item}-progress {
padding-left: 0;
bottom: 32px;
}
}
.@{upload-prefix-cls}-success-icon {
color: @success-color;
font-weight: bold;
}
.@{upload-prefix-cls}-animate-enter,
.@{upload-prefix-cls}-animate-leave,
.@{upload-prefix-cls}-animate-inline-enter,
.@{upload-prefix-cls}-animate-inline-leave {
animation-duration: 0.3s;
2018-04-13 08:19:50 +00:00
animation-fill-mode: @ease-in-out-circ;
}
.@{upload-prefix-cls}-animate-enter {
animation-name: uploadAnimateIn;
}
.@{upload-prefix-cls}-animate-leave {
animation-name: uploadAnimateOut;
}
.@{upload-prefix-cls}-animate-inline-enter {
animation-name: uploadAnimateInlineIn;
}
.@{upload-prefix-cls}-animate-inline-leave {
animation-name: uploadAnimateInlineOut;
}
}
@keyframes uploadAnimateIn {
from {
height: 0;
margin: 0;
opacity: 0;
padding: 0;
}
}
@keyframes uploadAnimateOut {
to {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}
@keyframes uploadAnimateInlineIn {
from {
width: 0;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
}
}
@keyframes uploadAnimateInlineOut {
to {
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
2019-01-02 13:01:56 +00:00
}