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

Initial Options Flyout

Browse Source
This commit is contained in:
Jason Miller
2020-12-09 18:11:44 -05:00
parent 646747b039
commit 7de8fa9da3
7 changed files with 146 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/client/lazy-app/Compress/Options/style.css
View File

@@ -14,13 +14,21 @@
background-color: var(--main-theme-color);
color: var(--header-text-color);
margin: 0;
padding: 10px var(--horizontal-padding);
height: 38px;
padding: 0 0 0 var(--horizontal-padding);
font-weight: bold;
font-size: 1.4rem;
border-bottom: 1px solid var(--off-black);
transition: all 300ms ease-in-out;
transition-property: background-color, color;
display: grid;
align-items: center;
grid-template-columns: 1fr;
grid-auto-columns: max-content;
grid-auto-flow: column;
gap: 0.8rem 0;
position: sticky;
top: 0;
z-index: 1;
@@ -81,3 +89,63 @@
box-sizing: border-box;
border-radius: 4px;
}
.options-title aside {
right: 10px;
bottom: calc(100% + 10px);
}
.title-button {
composes: unbutton from global;
border-radius: 50%;
background: rgba(255, 255, 255, 0);
&:hover,
&:active {
background: rgba(255, 255, 255, 0.3);
}
svg {
--size: 24px;
fill: var(--header-text-color);
display: block;
width: var(--size);
height: var(--size);
padding: 5px;
}
}
.menu-button {
display: flex;
align-items: center;
box-sizing: border-box;
margin: 8px 0;
background-color: rgba(29, 29, 29, 0.92);
border: 1px solid rgba(0, 0, 0, 0.67);
border-radius: 2rem;
line-height: 1.1;
white-space: nowrap;
height: 39px;
padding: 0 16px;
font-size: 1.2rem;
cursor: pointer;
color: #fff;
&:hover {
background: rgba(50, 50, 50, 0.92);
}
&:focus {
box-shadow: 0 0 0 2px #fff;
outline: none;
z-index: 1;
}
& > svg {
position: relative;
width: 18px;
height: 18px;
margin-right: 12px;
color: var(--main-theme-color);
}
}