muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed lab shadows and heroic columns

Browse source
This commit is contained in:
Fedor Katurov 2021-09-28 17:36:54 +07:00
parent 2e4cb24cf4
commit f336974efd
6 changed files with 22 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/lab/LabBanner/styles.module.scss
View file

@ -1,9 +1,13 @@
@import "~/styles/variables.scss";
.wrap {
@include lab_shadow;
@include outer_shadow;
@include lab_gradient;
background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
display: flex;
align-items: flex-end;
justify-content: stretch;
min-height: $cell;
}
.title {

2
src/components/lab/LabHead/styles.module.scss
View file

@ -1,7 +1,7 @@
@import "~/styles/variables.scss";
.wrap {
@include lab_shadow;
@include outer_shadow;
border-radius: $radius;
background-color: $content_bg;

3
src/components/lab/LabNode/index.tsx
View file

@ -4,6 +4,7 @@ import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
import styles from './styles.module.scss';
import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
import { isAfter, parseISO } from 'date-fns';
import classNames from 'classnames';
interface IProps {
node: INode;
@ -22,7 +23,7 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
);
return (
<div className={styles.wrap}>
<div className={classNames(styles.wrap, { [styles.heroic]: node.is_heroic })}>
{lab}
<LabBottomPanel
node={node}

6
src/components/lab/LabNode/styles.module.scss
View file

@ -1,12 +1,16 @@
@import "~/styles/variables.scss";
.wrap {
@include lab_shadow;
@include outer_shadow;
background-color: $lab_post_bg;
cursor: pointer;
min-width: 0;
border-radius: $radius;
&.heroic {
@include hero_gradient;
}
}

2
src/containers/lab/LabStats/styles.module.scss
View file

@ -16,7 +16,7 @@
}
.card {
@include lab_shadow;
@include outer_shadow;
border-radius: $radius;
background: $comment_bg;

12
src/styles/variables.scss
View file

@ -259,9 +259,11 @@ $sidebar_border: transparentize(white, 0.95);
cursor: pointer;
}
@mixin lab_shadow {
box-shadow:
transparentize(black, 0.5) 0 0 0 1px,
inset transparentize(white, 0.9) 0 1px,
lighten(black, 0.1) 0 4px;
@mixin lab_gradient {
background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
}
@mixin hero_gradient {
$color: mix($wisegreen, $content_bg, 30%);
background: linear-gradient(170deg, lighten($color, 10%), $color 200px);
}