Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-08 06:55:26 +02:00
Code Issues Releases Activity

resposive right side added

Browse source
This commit is contained in:
Umang G. Patel 2022-06-19 19:41:18 +05:30
parent 65c6ca1c44
commit beadcf8081
3 changed files with 28 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/styles/components/aside.pcss
View file

@ -106,13 +106,13 @@
} }
.table-of-content { .table-of-content {
padding-left: 22px;
border-left: solid 1px var(--color-line-gray); border-left: solid 1px var(--color-line-gray);
font-size: 14px;
letter-spacing: 0.01em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; letter-spacing: 0.01em;
background: red; font-size: 14px;
width: 100%; width: 100%;
/*dummy values*/
background: var(--color-line-gray);
height: 300px;
} }

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

@ -5,7 +5,7 @@
&__aside { &__aside {
width: var(--layout-width-aside); width: var(--layout-width-aside);
padding: 0px 22px; padding: 0px var(--layout-padding-horizontal-aside);
border-right: solid 1px var(--color-line-gray); border-right: solid 1px var(--color-line-gray);
position: fixed; position: fixed;
top: var(--layout-height-header); top: var(--layout-height-header);
@ -37,17 +37,11 @@
} }
&__aside-right { &__aside-right {
padding-left: var(--layout-right-aside-padding-left);
padding-bottom: 30px;
position: fixed; position: fixed;
top: var(--layout-height-header); top: var(--layout-height-header);
right: 0; right: 0;
width: calc( width: var(--layout-width-aside-right);
var(--layout-width-right-aside)-var(--layout-right-aside-padding-left) max-width: var(--layout-width-aside-right);
);
max-width: calc(
var(--layout-width-right-aside)-var(--layout-right-aside-padding-left)
);
} }
&__aside, &__aside,

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

@ -26,25 +26,35 @@
--layout-padding-vertical: 30px; --layout-padding-vertical: 30px;
--layout-width-aside: 300px; --layout-width-aside: 300px;
--layout-padding-horizontal-aside: 22px;
--layout-width-main-col: 650px; --layout-width-main-col: 650px;
--layout-width-aside-right-title: 277px; --layout-max-width-aside-right: 450px;
--layout-right-aside-resposive-width: 160px; --layout-max-space-from-right-aside: 160px;
--layout-width-right-aside-available: calc( --layout-available-right-aside-width: calc(
50% - var(--layout-width-main-col) / 2 - 50% - var(--layout-width-main-col) / 2
var(--layout-right-aside-resposive-width)
); );
--layout-width-right-aside: max(
320px, --layout-width-aside-right: min(
var(--layout-width-right-aside-available) var(--layout-available-right-aside-width),
var(--layout-max-width-aside-right)
); );
--layout-right-aside-padding-left: 30px;
--layout-height-header: 57px; --layout-height-header: 57px;
@media (--extrem-wide-desktop) {
--layout-width-aside-right: calc(
var(--layout-available-right-aside-width)-var(
--layout-max-space-from-right-aside
)
);
}
@media (--mobile) { @media (--mobile) {
--layout-padding-horizontal: 15px; --layout-padding-horizontal: 15px;
--layout-padding-vertical: 15px; --layout-padding-vertical: 15px;
--layout-width-aside-right: 0px;
} }
--font-mono: Menlo, Monaco, Consolas, Courier New, monospace; --font-mono: Menlo, Monaco, Consolas, Courier New, monospace;
@ -89,6 +99,7 @@
/** /**
* Custom media queries * Custom media queries
*/ */
@custom-media --extrem-wide-desktop all and (min-width: 1710px);
@custom-media --wide-desktop all and (min-width: 1300px); @custom-media --wide-desktop all and (min-width: 1300px);
@custom-media --desktop all and (min-width: 1050px); @custom-media --desktop all and (min-width: 1050px);
@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px); @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);