Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-09 07:25:21 +02:00
Code Issues Releases Activity

fixed header and sidebar added

Browse source
This commit is contained in:
Umang G. Patel 2022-06-03 00:45:22 +05:30
parent 984f57601c
commit f4ba12fbfe
4 changed files with 32 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/styles/components/header.pcss
View file

@ -6,7 +6,10 @@
border-bottom: 1px solid var(--color-line-gray); border-bottom: 1px solid var(--color-line-gray);
font-size: 18px; font-size: 18px;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: fixed;
width: 100%;
z-index: 2;
background: white;
@media (--mobile) { @media (--mobile) {
line-height: 40px; line-height: 40px;

8
src/frontend/styles/layout.pcss
View file

@ -1,6 +1,5 @@
.docs { .docs {
display: flex; display: flex;
@media (--mobile) { @media (--mobile) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -8,7 +7,11 @@
&__aside { &__aside {
width: var(--layout-width-aside); width: var(--layout-width-aside);
padding: 0px 22px; padding: 0px 22px;
border-right: solid 1px #e8e8eb; border-right: solid 1px var(--color-line-gray);
position: fixed;
height: calc(
100vh - var(--layout-padding-vertical) - var(--layout-height-header)
);
@media (--mobile) { @media (--mobile) {
width: 100%; width: 100%;
@ -37,6 +40,7 @@
&__aside, &__aside,
&__content { &__content {
padding-top: var(--layout-padding-vertical); padding-top: var(--layout-padding-vertical);
margin-top: var(--layout-height-header);
@media (--mobile) { @media (--mobile) {
padding: 20px 0; padding: 20px 0;

24
src/frontend/styles/main.pcss
View file

@ -1,14 +1,14 @@
@import 'normalize.css'; @import "normalize.css";
@import './vars.pcss'; @import "./vars.pcss";
@import './layout.pcss'; @import "./layout.pcss";
@import './carbon.pcss'; @import "./carbon.pcss";
@import './components/header.pcss'; @import "./components/header.pcss";
@import './components/aside.pcss'; @import "./components/aside.pcss";
@import './components/writing.pcss'; @import "./components/writing.pcss";
@import './components/page.pcss'; @import "./components/page.pcss";
@import './components/landing.pcss'; @import "./components/landing.pcss";
@import './components/auth.pcss'; @import "./components/auth.pcss";
@import './components/button.pcss'; @import "./components/button.pcss";
body { body {
font-family: system-ui, Helvetica, Arial, Verdana; font-family: system-ui, Helvetica, Arial, Verdana;
@ -23,5 +23,5 @@ svg {
a { a {
text-decoration: none; text-decoration: none;
color: inherit color: inherit;
} }

21
src/frontend/styles/vars.pcss
View file

@ -3,28 +3,28 @@
--color-text-second: #5d6068; --color-text-second: #5d6068;
--color-line-gray: #e8e8eb; --color-line-gray: #e8e8eb;
--color-link-active: #2071cc; --color-link-active: #2071cc;
--color-link-hover: #F3F6F8; --color-link-hover: #f3f6f8;
--color-bg-light: #f8f7fa; --color-bg-light: #f8f7fa;
--color-page-active: #ff1767; --color-page-active: #ff1767;
--color-button-primary: #3389FF; --color-button-primary: #3389ff;
--color-button-primary-hover: #2E7AE6; --color-button-primary-hover: #2e7ae6;
--color-button-primary-active: #296DCC; --color-button-primary-active: #296dcc;
--color-button-secondary: #717682; --color-button-secondary: #717682;
--color-button-secondary-hover: #5D6068; --color-button-secondary-hover: #5d6068;
--color-button-secondary-active: #4B4F5B; --color-button-secondary-active: #4b4f5b;
--color-button-warning: #EF5C5C;
--color-button-warning-hover: #D65151;
--color-button-warning-active: #BD4848;
--color-button-warning: #ef5c5c;
--color-button-warning-hover: #d65151;
--color-button-warning-active: #bd4848;
/** /**
* Site layout sizes * Site layout sizes
*/ */
--layout-padding-horizontal: 16px; --layout-padding-horizontal: 16px;
--layout-padding-vertical: 30px; --layout-padding-vertical: 30px;
--layout-height-header: 57px;
--layout-width-aside: 300px; --layout-width-aside: 300px;
--layout-width-main-col: 650px; --layout-width-main-col: 650px;
@ -61,7 +61,6 @@
} }
} }
--button-primary { --button-primary {
background: var(--color-link-active); background: var(--color-link-active);
color: #fff; color: #fff;