File tree Expand file tree Collapse file tree 2 files changed +42
-45
lines changed
src/lib/components/FileDrop Expand file tree Collapse file tree 2 files changed +42
-45
lines changed Original file line number Diff line number Diff line change @@ -16,6 +16,8 @@ dropfile comes with both a component and an action. The component is basically a
16
16
17
17
### Component
18
18
19
+ See [ this REPL for minmimal usage] ( https://svelte.dev/repl/511ad04931514bcf98f7408edb08d075?version=3.41.0 ) .
20
+
19
21
``` html
20
22
<script >
21
23
import FileDrop from " filedrop-svelte" ;
@@ -46,6 +48,8 @@ dropfile comes with both a component and an action. The component is basically a
46
48
47
49
### Action
48
50
51
+ See this [ REPL for minimal usage] ( https://svelte.dev/repl/645841f327b8484093f94b84de8a7e64?version=3.41.0 ) .
52
+
49
53
``` html
50
54
<script >
51
55
import { filedrop } from " filedrop-svelte" ;
Original file line number Diff line number Diff line change 65
65
<p >Drag & drop or select to upload {isMulti ? " files" : " a file " }</p >
66
66
</slot >
67
67
</div >
68
- {#if ! disableStyles && ! containerClass }
69
- <style >
70
- .filedrop {
71
- background-color : #f0f0f0 ;
72
- height : 200px ;
73
- display : flex ;
74
- flex-direction : column ;
75
- align-items : center ;
76
- justify-content : center ;
77
- border-radius : 0.375rem ;
78
- border : 0.7em dashed #c3c3c3 ;
79
- outline : 1em solid #f0f0f0 ;
80
- transition : border 0.3s ease-in-out ;
81
- outline-offset : -1.3em ;
82
- padding : 0.475em ;
83
- }
84
- .filedrop :focus {
85
- border-color : #2196f3 ;
86
- }
87
- .filedrop :hover {
88
- border-color : #343434 ;
89
- }
90
- .filedrop p ,
91
- .filedrop svg {
92
- transition : color 0.1s ;
93
- transition : fill 0.1s ;
94
- }
95
- .filedrop :focus p ,
96
- .filedrop :focus svg {
97
- color : #2196f3 ;
98
- fill : #2196f3 ;
99
- }
100
- .filedrop :hover p ,
101
- .filedrop :hover svg {
102
- color : #343434 ;
103
- fill : #343434 ;
104
- }
105
- p {
106
- color : #373737 ;
107
- font-size : 1.2em ;
108
- cursor : default ;
109
- align-content : center ;
110
- }
111
- </style >
112
- {/if }
68
+
69
+ <style >
70
+ .filedrop {
71
+ background-color : #f0f0f0 ;
72
+ height : 200px ;
73
+ display : flex ;
74
+ flex-direction : column ;
75
+ align-items : center ;
76
+ justify-content : center ;
77
+ border-radius : 0.375rem ;
78
+ border : 0.7em dashed #c3c3c3 ;
79
+ outline : 1em solid #f0f0f0 ;
80
+ transition : border 0.3s ease-in-out ;
81
+ outline-offset : -1.3em ;
82
+ padding : 0.475em ;
83
+ }
84
+ .filedrop :focus {
85
+ border-color : #2196f3 ;
86
+ }
87
+ .filedrop :hover {
88
+ border-color : #343434 ;
89
+ }
90
+ .filedrop p {
91
+ transition : color 0.1s ;
92
+ transition : fill 0.1s ;
93
+ }
94
+ .filedrop :focus p {
95
+ color : #2196f3 ;
96
+ fill : #2196f3 ;
97
+ }
98
+ .filedrop :hover p ,
99
+ p {
100
+ color : #373737 ;
101
+ font-size : 1.2em ;
102
+ cursor : default ;
103
+ align-content : center ;
104
+ }
105
+ </style >
You can’t perform that action at this time.
0 commit comments