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

tabs -> spaces

Browse Source
This commit is contained in:
Jason Miller
2018-03-29 15:43:14 -04:00
parent 5e6500d196
commit 76ceea0e52
19 changed files with 503 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/app/style.scss
View File

@@ -1,21 +1,25 @@
@import '~style/helpers.scss';
.app {
position: absolute;
top: $toolbar-height;
left: 0;
width: 100%;
bottom: 0;
contain: size layout style;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 100%;
bottom: 0;
overflow: hidden;
z-index: 1;
> .content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.header {
flex: 0 0 auto;
position: relative;
}
.content {
flex: 1 1 auto;
contain: size layout style;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}

1
src/components/app/style.scss.d.ts vendored
View File

@@ -1,2 +1,3 @@
export const app: string;
export const header: string;
export const content: string;

26
src/components/drawer/style.scss
View File

@@ -1,29 +1,29 @@
@import '~style/helpers.scss';
:global {
// @import '~preact-material-components/Drawer/style.css';
@import '~preact-material-components/List/mdc-list.scss';
// @import '~preact-material-components/Drawer/style.css';
@import '~preact-material-components/List/mdc-list.scss';
}
.drawer {
:global(.mdc-list-item__start-detail) {
margin-right: 16px;
}
:global(.mdc-list-item__start-detail) {
margin-right: 16px;
}
}
.logo {
width: 50%;
width: 50%;
}
.category img {
opacity: .6;
opacity: .6;
}
.bottom {
position: absolute;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
left: 0;
width: 100%;
position: absolute;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
left: 0;
width: 100%;
}

24
src/components/fab/style.scss
View File

@@ -1,18 +1,18 @@
@import '~style/helpers.scss';
:global {
@import '~preact-material-components/Fab/mdc-fab.scss';
@import '~preact-material-components/Fab/mdc-fab.scss';
}
.fab {
position: fixed;
right: 14px;
bottom: 14px;
z-index: 4;
.progress {
width: 24px;
height: 24px;
color: white;
--mdc-theme-primary: #fff;
}
position: fixed;
right: 14px;
bottom: 14px;
z-index: 4;
.progress {
width: 24px;
height: 24px;
color: white;
--mdc-theme-primary: #fff;
}
}

57
src/components/header/style.scss
View File

@@ -1,51 +1,52 @@
@import '~style/helpers.scss';
:global {
@import '~preact-material-components/Toolbar/mdc-toolbar.scss';
@import '~preact-material-components/Toolbar/mdc-toolbar.scss';
}
.toolbar {
height: $toolbar-height;
// height: $toolbar-height;
&.minimal {
height: $toolbar-height / 2;
}
&.minimal {
display: none;
// height: $toolbar-height / 2;
}
// > * {
// min-height: 0;
// }
// > * {
// min-height: 0;
// }
}
.fileInput {
position: absolute;
left: 0;
top: -999px;
position: absolute;
left: 0;
top: -999px;
}
.fab {
position: fixed;
display: block;
right: 14px;
bottom: 14px;
// z-index: 999;
// transform: translateZ(0);
position: fixed;
display: block;
right: 14px;
bottom: 14px;
// z-index: 999;
// transform: translateZ(0);
}
.logo {
height: 1em;
height: 1em;
}
.menu {
position: absolute;
top: $toolbar-height;
right: 5px;
position: absolute;
top: $toolbar-height;
right: 5px;
.menuItem {
margin-right: 16px;
}
.menuItem {
margin-right: 16px;
}
}
.title {
padding: 3px 0 0;
font-weight: 300;
font-size: 140%;
padding: 3px 0 0;
font-weight: 300;
font-size: 140%;
}

14
src/components/home/style.scss
View File

@@ -1,20 +1,20 @@
@import '~style/helpers.scss';
// :global {
// @import '~preact-material-components/Button/mdc-button.scss';
// // @import '~preact-material-components/Switch/mdc-switch.scss';
// @import '~preact-material-components/Button/mdc-button.scss';
// // @import '~preact-material-components/Switch/mdc-switch.scss';
// }
.home {
padding: 20px;
opacity: 0;
padding: 20px;
opacity: 0;
}
.active {
animation: fadeIn 2s forwards ease 1;
animation: fadeIn 2s forwards ease 1;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from { opacity: 0; }
to { opacity: 1; }
}