forked from M-Labs/web2019
Fix bottom side gradient
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
eb196b086e
commit
1cb9c90c65
@ -72,29 +72,28 @@ button {
|
|||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: calc(3/10 * 100%);
|
max-width: max(1/4 * 100%, 310px);
|
||||||
min-width: calc(1/4 * 100%);
|
|
||||||
/*padding-bottom: 4rem!important;*/
|
/*padding-bottom: 4rem!important;*/
|
||||||
}
|
|
||||||
|
|
||||||
> aside.aside:after {
|
.gradient-bottom {
|
||||||
position: fixed;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
max-width: calc(3/10 * 100%);
|
//width: max(1/4 * 100%, 310px);
|
||||||
min-width: 0;
|
width: inherit;
|
||||||
content: "";
|
content: "";
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
rgba(13, 53, 71, 1),
|
rgba(13, 53, 71, 1),
|
||||||
rgba(13, 53, 71, 0)
|
rgba(13, 53, 71, 0)
|
||||||
);
|
);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> section.main {
|
> section.main {
|
||||||
flex: 4;
|
flex: 4;
|
||||||
max-width: calc(3/4 * 100%);
|
width: calc(3/4 * 100%);
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -98,6 +98,10 @@
|
|||||||
min-width: max(300px, 30%);
|
min-width: max(300px, 30%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#root-shop .layout>aside.aside .gradient-bottom {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
#root-shop .productItem {
|
#root-shop .productItem {
|
||||||
padding: 2rem 1rem 1rem;
|
padding: 2rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
@ -412,7 +416,7 @@
|
|||||||
|
|
||||||
#root-shop .layout>aside.aside.menu-opened + section.main:after {
|
#root-shop .layout>aside.aside.menu-opened + section.main:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: fixed;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: rgba(0, 0, 0, .3);
|
background-color: rgba(0, 0, 0, .3);
|
||||||
@ -431,8 +435,8 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root-shop .layout>aside.aside:after {
|
#root-shop .layout>aside.aside .gradient-bottom {
|
||||||
width: 0;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root-shop .layout>aside.aside + section.main {
|
#root-shop .layout>aside.aside + section.main {
|
||||||
@ -559,8 +563,8 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root-shop .layout>aside.aside:after {
|
#root-shop .layout>aside.aside .gradient-bottom {
|
||||||
width: 0;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root-shop .layout>aside.aside + section.main {
|
#root-shop .layout>aside.aside + section.main {
|
||||||
|
File diff suppressed because one or more lines are too long
@ -6,6 +6,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
|
|||||||
import {BacklogGroups} from "./BacklogGroups";
|
import {BacklogGroups} from "./BacklogGroups";
|
||||||
import {SearchBar} from "./SearchBar";
|
import {SearchBar} from "./SearchBar";
|
||||||
import {BacklogSearchResult} from "./BacklogSearchResult";
|
import {BacklogSearchResult} from "./BacklogSearchResult";
|
||||||
|
import {GradientBottom} from "./GradientBottom";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component that renders the backlog in the aside
|
* Component that renders the backlog in the aside
|
||||||
@ -56,6 +57,8 @@ export function Backlog() {
|
|||||||
{provided.placeholder}
|
{provided.placeholder}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<GradientBottom/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
7
static/js/shop/GradientBottom.jsx
Normal file
7
static/js/shop/GradientBottom.jsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export function GradientBottom() {
|
||||||
|
return (
|
||||||
|
<div className="gradient-bottom"></div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user