Skip to content

Commit 1ac4a33

Browse files
committed
remove conditional around styling
1 parent 783bb7f commit 1ac4a33

File tree

2 files changed

+42
-45
lines changed

2 files changed

+42
-45
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ dropfile comes with both a component and an action. The component is basically a
1616

1717
### Component
1818

19+
See [this REPL for minmimal usage](https://svelte.dev/repl/511ad04931514bcf98f7408edb08d075?version=3.41.0).
20+
1921
```html
2022
<script>
2123
import FileDrop from "filedrop-svelte";
@@ -46,6 +48,8 @@ dropfile comes with both a component and an action. The component is basically a
4648

4749
### Action
4850

51+
See this [REPL for minimal usage](https://svelte.dev/repl/645841f327b8484093f94b84de8a7e64?version=3.41.0).
52+
4953
```html
5054
<script>
5155
import { filedrop } from "filedrop-svelte";

src/lib/components/FileDrop/FileDrop.svelte

Lines changed: 38 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -65,48 +65,41 @@
6565
<p>Drag &amp; drop or select to upload {isMulti ? "files" : "a file "}</p>
6666
</slot>
6767
</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>

0 commit comments

Comments
 (0)