Skip to content

Commit 511389d

Browse files
SimekSimek
committed
update Navigation styling, align more wih react.dev
1 parent 682333d commit 511389d

1 file changed

Lines changed: 135 additions & 50 deletions

File tree

‎website/src/css/customTheme.scss‎

Lines changed: 135 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,13 @@ div[class^="generatedIndexPage"] {
241241
max-width: 100%;
242242
width: 100%;
243243
}
244+
245+
.navbar__inner {
246+
max-width: 100% !important;
247+
width: 100%;
248+
padding: var(--ifm-navbar-padding-vertical)
249+
var(--ifm-navbar-padding-horizontal);
250+
}
244251
}
245252

246253
@media (max-width: 1320px) and (min-width: 997px) {
@@ -660,13 +667,20 @@ a[class*="tagRegular"] {
660667
/* Navbar */
661668

662669
.navbar {
670+
padding: 0;
671+
663672
&.navbar--dark {
664-
background-color: var(--deepdark);
673+
background-color: #20232aee;
665674
}
666675

667676
.navbar__inner {
668677
max-width: 1360px;
669678
margin: 0 auto;
679+
backdrop-filter: blur(12px);
680+
681+
&.navbar-sidebar--show {
682+
backdrop-filter: none;
683+
}
670684
}
671685

672686
.navbar__title {
@@ -678,7 +692,51 @@ a[class*="tagRegular"] {
678692
color: var(--brand);
679693
}
680694

695+
.navbar__link {
696+
transition:
697+
color 0.15s,
698+
background-color 0.15s;
699+
700+
&:hover {
701+
color: #fff;
702+
background-color: var(--dark);
703+
}
704+
}
705+
706+
.navbar__link--active {
707+
background-color: #61dafb11;
708+
709+
&:hover {
710+
color: var(--brand);
711+
background-color: #61dafb11;
712+
}
713+
}
714+
715+
.navbar-github-link,
716+
button[class*="toggleButton"] {
717+
transition: scale 0.2s;
718+
719+
&:hover {
720+
background-color: var(--dark);
721+
}
722+
723+
&:active {
724+
scale: 0.95;
725+
}
726+
}
727+
681728
.navbar__item {
729+
border-radius: 32px;
730+
padding-inline: 12px;
731+
cursor: pointer;
732+
transition-property: scale;
733+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
734+
transition-duration: 0.15s;
735+
736+
&:active {
737+
scale: 0.97;
738+
}
739+
682740
&.navbar__link {
683741
font-weight: 400;
684742
font-size: 17px;
@@ -690,24 +748,35 @@ a[class*="tagRegular"] {
690748
font-weight: 400;
691749
font-size: 14px;
692750
}
693-
ul {
694-
/* Control navbar dropdown alignment */
695-
top: calc(100% + 0px);
696-
left: 0;
697-
}
698751
}
699752

700753
&.dropdown--right {
701754
.dropdown__menu {
702-
min-width: 168px;
755+
min-width: 158px;
703756
}
704757
}
705758
}
706759

707-
.dropdown > .navbar__link:after {
708-
margin-left: 8px;
709-
top: 1px;
710-
opacity: 0.75;
760+
.dropdown {
761+
&.navbar__item:active {
762+
scale: none;
763+
}
764+
765+
.navbar__link {
766+
&:hover {
767+
background-color: transparent;
768+
}
769+
}
770+
771+
& > .navbar__link:after {
772+
margin-left: 8px;
773+
top: 1px;
774+
opacity: 0.75;
775+
}
776+
777+
&:hover > .navbar__link:after {
778+
color: var(--brand);
779+
}
711780
}
712781

713782
.navbar__logo {
@@ -721,27 +790,34 @@ a[class*="tagRegular"] {
721790
}
722791

723792
.DocSearch-Button {
724-
border-radius: var(--ifm-global-radius);
725-
padding: 0 6px 0 10px;
793+
border-radius: 32px;
794+
border: 1px solid var(--light);
795+
padding: 0 8px 0 12px;
726796
font-family: var(--ifm-font-family-base);
727797

728798
.DocSearch-Search-Icon {
729799
width: 16px;
730800
margin-top: -1px;
801+
color: var(--docsearch-muted-color);
802+
}
803+
804+
.DocSearch-Button-Key--pressed {
805+
box-shadow: var(--docsearch-key-shadow);
806+
transform: none;
731807
}
732808
}
733809

734-
.DocSearch-Button-Placeholder,
735-
.DocSearch-Button-Key {
736-
font-size: 14px !important;
810+
.DocSearch-Button-Placeholder {
811+
font-size: 14px;
737812
}
738813

739814
.DocSearch-Button-Key {
740-
padding-bottom: 0 !important;
815+
font-size: 12px;
816+
font-weight: 600;
741817
}
742818

743-
.DocSearch-Button-Key svg {
744-
margin-bottom: 1px !important;
819+
.DocSearch-Button-Keys {
820+
margin-top: 1px;
745821
}
746822

747823
.dropdown__menu {
@@ -752,42 +828,48 @@ a[class*="tagRegular"] {
752828
}
753829
}
754830

831+
.navbar__items {
832+
gap: 8px;
833+
}
834+
755835
.navbar__items div[class^="navbarSearchContainer"] {
756-
padding-left: 14px;
836+
padding-left: 6px;
757837
}
758838

759839
.navbar-github-link {
840+
display: flex;
841+
height: 36px;
842+
width: 36px;
843+
padding: 0;
844+
align-items: center;
845+
justify-content: center;
846+
760847
&:after {
761848
transition: opacity 0.2s;
762849
content: "";
763-
width: 24px;
764-
height: 24px;
850+
width: 20px;
851+
height: 20px;
765852
display: flex;
766853
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
767854
background-repeat: no-repeat;
768855
background-position: center;
769856
}
857+
}
770858

771-
&:hover:after {
772-
opacity: 0.5;
773-
}
859+
.navbar-sidebar__back:hover {
860+
background: var(--ifm-code-background);
774861
}
862+
}
775863

776-
.navbar__link--active:after {
777-
content: "";
778-
display: flex;
779-
width: calc(100% + 40px);
780-
height: 4px;
781-
margin-top: -4px;
782-
margin-left: -20px;
783-
margin-right: -20px;
784-
position: relative;
785-
top: 18px;
786-
background: var(--brand);
864+
html[data-theme="light"] {
865+
.navbar.navbar--dark {
866+
background-color: #111317ee;
787867
}
868+
}
788869

789-
.navbar-sidebar__back:hover {
790-
background: var(--ifm-code-background);
870+
html[data-theme="dark"] {
871+
.navbar-sidebar {
872+
background: var(--ifm-background-color);
791873
}
792874
}
793875

@@ -843,16 +925,6 @@ So we need to "revert" some CSS vars to not enforce dark mode
843925
}
844926
}
845927

846-
html[data-theme="dark"] {
847-
.navbar-sidebar {
848-
background: var(--ifm-background-color);
849-
}
850-
851-
.navbar button[class*="toggleButton"]:hover {
852-
background: var(--ifm-color-emphasis-200);
853-
}
854-
}
855-
856928
@media (max-width: 1200px) {
857929
.navbar {
858930
.navbar__item.navbar__link {
@@ -864,10 +936,12 @@ html[data-theme="dark"] {
864936
}
865937

866938
.DocSearch-Button {
867-
padding: 0 12px;
868-
max-width: 40px;
939+
padding: 0;
940+
justify-content: center;
941+
width: 36px;
869942
}
870943

944+
.DocSearch-Button-Keys,
871945
.DocSearch-Button-Key,
872946
.DocSearch-Button-KeySeparator,
873947
.DocSearch-Button-Placeholder {
@@ -876,6 +950,17 @@ html[data-theme="dark"] {
876950
}
877951
}
878952

953+
@media (max-width: 996px) {
954+
.navbar__items div[class^="navbarSearchContainer"] {
955+
position: static;
956+
padding-left: 0;
957+
}
958+
959+
.navbar-github-link {
960+
display: none !important;
961+
}
962+
}
963+
879964
/* Sidebar */
880965

881966
aside[class^="theme-doc-sidebar-container"] {

0 commit comments

Comments
 (0)