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

two-up styles

Browse Source
This commit is contained in:
Jake Archibald
2020-11-27 14:48:59 +00:00
parent edfd353c18
commit c53c803baa
4 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
View File

@@ -73,9 +73,14 @@ export default class TwoUp extends HTMLElement {
connectedCallback() { connectedCallback() {
this._childrenChange(); this._childrenChange();
this._handle.innerHTML = `<div class="${ // prettier-ignore
styles.scrubber this._handle.innerHTML =
}">${`<svg viewBox="0 0 27 20" fill="currentColor">${'<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'}</svg>`}</div>`; `<div class="${styles.scrubber}">${
`<svg viewBox="0 0 27 20">${
`<path class="${styles.arrowLeft}" d="M9.6 0L0 9.6l9.6 9.6z"/>` +
`<path class="${styles.arrowRight}" d="M17 19.2l9.5-9.6L16.9 0z"/>`
}</svg>
`}</div>`;
if (!this._everConnected) { if (!this._everConnected) {
this._resetPosition(); this._resetPosition();

20
src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css
View File

@@ -2,12 +2,11 @@ two-up {
display: grid; display: grid;
position: relative; position: relative;
--split-point: 0; --split-point: 0;
--accent-color: #777; --track-color: rgb(0 0 0 / 0.6);
--track-color: var(--accent-color); --thumb-background: var(--black);
--thumb-background: #fff;
--thumb-color: var(--accent-color); --thumb-color: var(--accent-color);
--thumb-size: 62px; --thumb-size: 62px;
--bar-size: 6px; --bar-size: 9px;
--bar-touch-size: 30px; --bar-touch-size: 30px;
} }
@@ -37,8 +36,6 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
height: 100%; height: 100%;
width: var(--bar-size); width: var(--bar-size);
margin: 0 auto; margin: 0 auto;
box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0, 0, 0, 0.1),
0 1px 4px rgba(0, 0, 0, 0.4);
background: var(--track-color); background: var(--track-color);
} }
@@ -47,14 +44,11 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform-origin: 50% 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: var(--thumb-size); width: var(--thumb-size);
height: calc(var(--thumb-size) * 0.9); height: calc(var(--thumb-size) * 0.9);
background: var(--thumb-background); background: var(--thumb-background);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: var(--thumb-size); border-radius: var(--thumb-size);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
color: var(--thumb-color); color: var(--thumb-color);
box-sizing: border-box; box-sizing: border-box;
padding: 0 calc(var(--thumb-size) * 0.24); padding: 0 calc(var(--thumb-size) * 0.24);
@@ -64,6 +58,14 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
flex: 1; flex: 1;
} }
.arrow-left {
fill: var(--pink);
}
.arrow-right {
fill: var(--blue);
}
two-up[orientation='vertical'] .two-up-handle { two-up[orientation='vertical'] .two-up-handle {
width: auto; width: auto;
height: var(--bar-touch-size); height: var(--bar-touch-size);

2
src/shared/prerendered-app/Intro/index.tsx
View File

@@ -46,7 +46,7 @@ const demos = [
url: logo, url: logo,
iconUrl: logoIcon, iconUrl: logoIcon,
}, },
]; ] as const;
const blobAnimImport = const blobAnimImport =
!__PRERENDER__ && matchMedia('(prefers-reduced-motion: reduce)').matches !__PRERENDER__ && matchMedia('(prefers-reduced-motion: reduce)').matches

2
src/shared/prerendered-app/colors.css
View File

@@ -2,6 +2,8 @@ html {
--pink: #ff3385; --pink: #ff3385;
--hot-pink: #ff0066; --hot-pink: #ff0066;
--white: #fff; --white: #fff;
--black: #000;
--blue: #5fb4e4;
--dim-blue: #0a7bcc; --dim-blue: #0a7bcc;
--deep-blue: #09f; --deep-blue: #09f;
--light-blue: #76c8ff; --light-blue: #76c8ff;