external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-11 16:26:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

We don't need the invalid state, as we'll accept all types.

Browse Source
This commit is contained in:
Jake Archibald
2018-10-15 22:58:34 +01:00
parent 3cf5221114
commit 51ee851811
2 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/App/style.scss
View File

@@ -15,40 +15,34 @@ Note: These styles are temporary. They will be replaced before going live.
.drop { .drop {
overflow: hidden; overflow: hidden;
touch-action: none; touch-action: none;
height:100%; height: 100%;
width:100%; width: 100%;
&::after { &:global {
content: ''; &::after {
position: absolute; content: '';
display: block; position: absolute;
left: 10px; display: block;
top: 10px; left: 10px;
right: 10px; top: 10px;
bottom: 10px; right: 10px;
border: 2px dashed #fff; bottom: 10px;
border-radius: 10px; border: 2px dashed #fff;
opacity: 0; background-color:rgba(88, 116, 88, 0.2);
transform: scale(0.95); border-color: rgba(65, 129, 65, 0.5);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end; border-radius: 10px;
pointer-events: none; opacity: 0;
} transform: scale(0.95);
transition: all 200ms ease-in;
transition-property: transform, opacity;
pointer-events: none;
}
&.drop-valid::after, &.drop-valid::after {
&.drop-invalid::after { opacity: 1;
opacity: 1; transform: scale(1);
transform: scale(1); transition-timing-function: ease-out;
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1); }
}
&.drop-valid::after {
background-color:rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5);
}
&.drop-invalid::after {
background-color:rgba(119, 85, 85, 0.2);
border-color:rgba(129, 63, 63, 0.5);
} }
} }

1
src/init-app.tsx
View File

@@ -16,6 +16,7 @@ if (process.env.NODE_ENV === 'development') {
// When an update to any module is received, re-import the app and trigger a full re-render: // When an update to any module is received, re-import the app and trigger a full re-render:
module.hot.accept('./components/App', () => { module.hot.accept('./components/App', () => {
// The linter doesn't like the capital A in App. It is wrong.
// tslint:disable-next-line variable-name // tslint:disable-next-line variable-name
import('./components/App').then(({ default: App }) => { import('./components/App').then(({ default: App }) => {
root = render(<App />, document.body, root); root = render(<App />, document.body, root);