mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-23 11:59:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(components): [upload] dragger unlimited width (#7330)

Browse Source 
* style(components): [upload] dragger unlimited width

* style(components): [upload] only modify the style when dragged

* style(components): [upload] set variables for dragger padding

* style(components): [upload] use getCssVar

Co-authored-by: hezhaoshun <hezhaoshun@cmcm.com>
This commit is contained in:
joson 2022-04-28 00:06:31 +08:00 committed by GitHub
parent 16989d8187
commit f8eee1e668
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/components/upload/src/upload-content.vue
View File

@ -1,6 +1,6 @@
<template>
<div
:class="[ns.b(), ns.m(listType)]"
:class="[ns.b(), ns.m(listType), ns.is('drag', drag)]"
tabindex="0"
@click="handleClick"
@keydown.self.enter.space="handleKeydown"

14
packages/theme-chalk/src/common/var.scss
View File

@ -923,7 +923,6 @@ $tree: map.merge(
);
// Dropdown
$dropdown: () !default;
$dropdown: map.merge(
(
@ -1200,7 +1199,6 @@ $calendar: map.merge(
);
// Form
// css3 var in packages/theme-chalk/src/form.scss
$form: () !default;
$form: map.merge(
@ -1269,7 +1267,6 @@ $descriptions: map.merge(
);
// Result
// css3 var in packages/theme-chalk/src/result.scss
$result: () !default;
$result: map.merge(
@ -1284,6 +1281,17 @@ $result: map.merge(
$result
);
// Upload
// css3 var in packages/theme-chalk/src/upload.scss
$upload: () !default;
$upload: map.merge(
(
'dragger-padding-horizontal': 40px,
'dragger-padding-vertical': 10px,
),
$upload
);
// transition
$transition: () !default;
$transition: map.merge(

16
packages/theme-chalk/src/upload.scss
View File

@ -19,6 +19,10 @@
}
}
@include b(upload) {
@include set-component-css-var('upload', $upload);
}
@include b(upload) {
@include utils-inline-flex-center;
@ -69,6 +73,10 @@
}
}
@include when(drag) {
display: block;
}
&:focus {
border-color: getCssVar('color-primary');
color: getCssVar('color-primary');
@ -80,12 +88,12 @@
}
@include b(upload-dragger) {
padding: getCssVar('upload-dragger-padding-horizontal')
getCssVar('upload-dragger-padding-vertical');
background-color: getCssVar('fill-color', 'blank');
border: 1px dashed getCssVar('border-color');
border-radius: 6px;
box-sizing: border-box;
width: 360px;
height: 180px;
text-align: center;
cursor: pointer;
position: relative;
@ -94,7 +102,7 @@
.#{bem('icon', '', 'upload')} {
font-size: 67px;
color: getCssVar('text-color', 'placeholder');
margin: 40px 0 16px;
margin-bottom: 16px;
line-height: 50px;
}
@ -124,6 +132,8 @@
}
@include when(dragover) {
padding: calc(#{getCssVar('upload-dragger-padding-horizontal')} - 1px)
calc(#{getCssVar('upload-dragger-padding-vertical')} - 1px);
background-color: getCssVar('color', 'primary', 'light-9');
border: 2px dashed getCssVar('color-primary');
}