external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-14 09:39:15 +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

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

@@ -18,6 +18,7 @@ Note: These styles are temporary. They will be replaced before going live.
height: 100%; height: 100%;
width: 100%; width: 100%;
&:global {
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@@ -27,28 +28,21 @@ Note: These styles are temporary. They will be replaced before going live.
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
border: 2px dashed #fff; border: 2px dashed #fff;
background-color:rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5);
border-radius: 10px; border-radius: 10px;
opacity: 0; opacity: 0;
transform: scale(0.95); transform: scale(0.95);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end; transition: all 200ms ease-in;
transition-property: transform, opacity;
pointer-events: none; pointer-events: none;
} }
&.drop-valid::after, &.drop-valid::after {
&.drop-invalid::after {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1); transition-timing-function: ease-out;
} }
&.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);