diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx index cce1ff2a..68262270 100644 --- a/src/components/lab/LabHead/index.tsx +++ b/src/components/lab/LabHead/index.tsx @@ -7,8 +7,6 @@ interface IProps { } const LabHead: FC = ({ isLoading }) => { - return null; - return (
diff --git a/src/components/lab/LabHeadItem/styles.module.scss b/src/components/lab/LabHeadItem/styles.module.scss index cb5b360e..54ca62a0 100644 --- a/src/components/lab/LabHeadItem/styles.module.scss +++ b/src/components/lab/LabHeadItem/styles.module.scss @@ -13,10 +13,7 @@ } &.active { - color: $blue; - background-color: lighten($content_bg, 6%); - border-radius: $radius; - padding: 0 $gap; + color: $wisegreen; } } diff --git a/src/containers/lab/LabGrid/styles.module.scss b/src/containers/lab/LabGrid/styles.module.scss index ebb9e957..8e8b1ebf 100644 --- a/src/containers/lab/LabGrid/styles.module.scss +++ b/src/containers/lab/LabGrid/styles.module.scss @@ -11,6 +11,10 @@ div.wrap { box-sizing: border-box; padding: 0 $gap / 2; + @include tablet { + padding: 0; + } + & > div { margin-bottom: $gap; } diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx index dd96967c..c1d02176 100644 --- a/src/layouts/LabLayout/index.tsx +++ b/src/layouts/LabLayout/index.tsx @@ -32,7 +32,10 @@ const LabLayout: FC = () => {
- +
+ +
+
diff --git a/src/layouts/LabLayout/styles.module.scss b/src/layouts/LabLayout/styles.module.scss index 7d2b266e..0bee1b35 100644 --- a/src/layouts/LabLayout/styles.module.scss +++ b/src/layouts/LabLayout/styles.module.scss @@ -40,4 +40,15 @@ .content { min-width: 0; + margin-left: -$gap / 2; + + @include tablet { + margin-left: 0; + padding-bottom: $gap / 2; + } +} + +.head { + padding: 0 $gap / 2; + display: none; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1fbdd131..e7f42e0c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -162,6 +162,7 @@ $sidebar_border: transparentize(white, 0.95); @content; } } + @mixin desktop { @media (max-width: $content_width) { @content;