Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change list of menus and add hover effect of menu #189

Merged
merged 12 commits into from
Jun 2, 2022
Merged

Change list of menus and add hover effect of menu #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
64002d7
feat: change list of menus and add hover effect of menu
Y-k-Y May 11, 2022
5846a79
fix: fix hover effect
Y-k-Y May 11, 2022
16099b7
fix: fix wrong font size, height, padding and etc to same as Figma
Y-k-Y May 14, 2022
d248b7e
Merge branch 'main' into feature/new-header
Y-k-Y May 24, 2022
9fa2974
fix: fix class name
Y-k-Y May 24, 2022
59b1f13
fix: fix wrong css values
Y-k-Y Jun 1, 2022
b56ed5e
fix: fix typo
Y-k-Y Jun 1, 2022
0112d67
Delete package-lock.json
robonetphy Jun 1, 2022
88c36e6
fix: change menu height as much as button height and padding
Y-k-Y Jun 1, 2022
7b2a8f0
fix: fix logo and menu items on header
Y-k-Y Jun 1, 2022
c944e10
fix: fix --layout-padding-horizontal value
Y-k-Y Jun 2, 2022
98694ca
fix: remove irrelevant var
Y-k-Y Jun 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .codexdocsrc.sample
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
"description": "A block-styled editor with clean JSON output",
"menu": [
"Guides",
"API",
"Plugins",
{"title": "Support Project", "uri": "/support"}
{"title": "CodeX", "uri": "https://codex.so"}
],
"landingFrameSrc": "https://codex.so/editor?frame=1",
"startPage": "",
Expand Down
32 changes: 21 additions & 11 deletions src/frontend/styles/components/header.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.docs-header {
display: flex;
justify-content: space-between;
flex-shrink: 0;
padding: 0 var(--layout-padding-horisontal);
padding: 12px var(--layout-padding-horizontal);
border-bottom: 1px solid var(--color-line-gray);
font-size: 15.8px;
line-height: 50px;
font-size: 18px;
flex-wrap: wrap;
position: relative;

Expand All @@ -15,17 +15,34 @@
&__menu-link,
&__logo {
display: inline-block;
text-decoration: none;
align-self: center;
robonetphy marked this conversation as resolved.
Show resolved Hide resolved
line-height: 24px;
}

&__logo {
robonetphy marked this conversation as resolved.
Show resolved Hide resolved
padding: 4px 0;
font-weight: bold;
color: inherit;
}

&__menu-link {
padding: 4px 10px;
font-weight: 500;
border-radius: 8px;
transition: background-color .13s;

&:hover {
background-color: var(--color-link-hover);
}
}

&__menu {
display: flex;
margin: 0 0 0 auto;
margin: 0;
gap: 10px;
padding-left: 0;
font-size: 16px;

@media (--mobile) {
flex-basis: 100%;
Expand All @@ -36,7 +53,6 @@
display: inline-flex;
align-items: center;
list-style: none;
margin-left: 20px;

@media (--mobile) {
margin-left: 0;
Expand Down Expand Up @@ -66,11 +82,5 @@
}
}
}

&-link {
&:hover {
color: var(--color-link-active);
}
}
}
}
6 changes: 3 additions & 3 deletions src/frontend/styles/layout.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.docs {
display: flex;
padding: 0 var(--layout-padding-horisontal);
padding: 0 var(--layout-padding-horizontal);

@media (--mobile) {
flex-wrap: wrap;
Expand All @@ -12,8 +12,8 @@
@media (--mobile) {
width: 100%;
flex-basis: 100%;
padding: 20px var(--layout-padding-horisontal) !important;
margin: 0 calc(-1 * var(--layout-padding-horisontal));
padding: 20px var(--layout-padding-horizontal) !important;
margin: 0 calc(-1 * var(--layout-padding-horizontal));
border-bottom: 1px solid var(--color-line-gray);
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/frontend/styles/vars.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
--color-text-second: #5d6068;
--color-line-gray: #E8E8EB;
--color-link-active: #2071cc;
--color-link-hover: #F3F6F8;
--color-bg-light: #f8f7fa;
--color-page-active: #ff1767;

Expand All @@ -22,13 +23,13 @@
/**
* Site layout sizes
*/
--layout-padding-horisontal: 30px;
--layout-padding-horizontal: 16px;
--layout-padding-vertical: 30px;
--layout-width-aside: 300px;
--layout-width-main-col: 650px;

@media (--mobile) {
--layout-padding-horisontal: 15px;
--layout-padding-horizontal: 15px;
--layout-padding-vertical: 15px;
}

Expand Down