mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
ui fixes, baselines, background image, sticky nav and close modal
This commit is contained in:
parent
994761b2cf
commit
17e55c8116
6 changed files with 21 additions and 18 deletions
|
|
@ -57,12 +57,12 @@
|
|||
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 6px 14px 11px 14px;
|
||||
padding: 8.5px 14px 8.5px 14px;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--boxShadow);
|
||||
|
||||
@media (--viewportMedium) {
|
||||
padding: 6px 14px 11px 14px;
|
||||
padding: 8.5px 14px 8.5px 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
color: var(--matterColorAnti);
|
||||
|
||||
@media (--viewportMedium) {
|
||||
margin: 7px 0 0 0;
|
||||
margin: 6px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
.root {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--zIndexTopbar);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
margin: 23px 24px 0 24px;
|
||||
}
|
||||
@media (--viewportLarge) {
|
||||
margin: 23px 0 0 0;
|
||||
margin: 22px 0 -2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
@media (--viewportLarge) {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
top: 151px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
}
|
||||
|
||||
.breakdownDesktop {
|
||||
margin: 0 48px 50px 48px;
|
||||
margin: 0 48px 47px 48px;
|
||||
}
|
||||
|
||||
.feedContainer {
|
||||
|
|
|
|||
|
|
@ -131,9 +131,6 @@
|
|||
predictions list */
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
|
||||
/* Pull text behind search suggestions */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ================ Modal ================ */
|
||||
|
|
|
|||
|
|
@ -18,11 +18,6 @@
|
|||
|
||||
@media (--viewportMedium) {
|
||||
min-height: calc(100vh - var(--topbarHeightDesktop));
|
||||
border: solid 24px #fcfcfc;
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
border: solid 36px #fcfcfc;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +29,6 @@
|
|||
@media (--viewportMedium) {
|
||||
justify-content: center;
|
||||
padding-top: 60px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,16 @@
|
|||
|
||||
/* Align the image within the container */
|
||||
background-position: center center;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
border-radius: 28px;
|
||||
border: solid 24px var(--matterColorBright);
|
||||
}
|
||||
|
||||
@media (--viewportLarge) {
|
||||
border-radius: 40px;
|
||||
border: solid 36px var(--matterColorBright);
|
||||
}
|
||||
}
|
||||
|
||||
/* ================ Colors ================ */
|
||||
|
|
@ -444,7 +454,7 @@
|
|||
|
||||
--marketplaceModalCloseStyles {
|
||||
/* Position inside modal */
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
|
|
@ -457,12 +467,13 @@
|
|||
width: auto;
|
||||
|
||||
/* Sizing (touch area) */
|
||||
padding: 24px 30px;
|
||||
padding: 24px 40px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
@media (--viewportMedium) {
|
||||
padding: 27px 30px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue