muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +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"; @import "~/styles/variables.scss";
.wrap { .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 { .title {

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

@ -1,7 +1,7 @@
@import "~/styles/variables.scss"; @import "~/styles/variables.scss";
.wrap { .wrap {
@include lab_shadow; @include outer_shadow;
border-radius: $radius; border-radius: $radius;
background-color: $content_bg; 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 styles from './styles.module.scss';
import { LabBottomPanel } from '~/components/lab/LabBottomPanel'; import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
import { isAfter, parseISO } from 'date-fns'; import { isAfter, parseISO } from 'date-fns';
import classNames from 'classnames';
interface IProps { interface IProps {
node: INode; node: INode;
@ -22,7 +23,7 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
); );
return ( return (
<div className={styles.wrap}> <div className={classNames(styles.wrap, { [styles.heroic]: node.is_heroic })}>
{lab} {lab}
<LabBottomPanel <LabBottomPanel
node={node} node={node}

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

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

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

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

12
src/styles/variables.scss
View file

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