Skip to content

Commit dddabde

Browse files
KenniMKenniM
committed
Visual bugs in navbar fixed
Now it should work with Firefox and the other browsers
1 parent fb96187 commit dddabde

File tree

3 files changed

+51
-61
lines changed

3 files changed

+51
-61
lines changed

‎src/css/helios-gcx.css‎

Lines changed: 48 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,14 @@
6262
}
6363

6464
.nav-container {
65-
width: 294px;
65+
width: 314px;
6666
box-shadow: 2px 0px 0px var(--nav-border-color);
6767
transition: 150ms ease-in-out
6868
}
6969

7070
@media screen and (min-width:769px) {
7171
.nav-container {
72-
width: 294px;
72+
width: 314px;
7373
}
7474
}
7575

@@ -115,20 +115,20 @@ li.nav-item.toggler.is-active:hover {
115115
color: black;
116116
}
117117

118-
.nav-item.is-current-page {
119-
background-color: #f6f8fa;
120-
}
121118

122-
.nav-item.is-current-page::before {
123-
content: '';
124-
border: 2px solid var(--blue);
119+
.nav-item.is-current-page>a:before{
120+
content: "";
121+
border: 2px solid #007bff;
125122
top: 0;
126-
background: var(--blue);
123+
background: #007bff;
127124
left: 0;
128125
position: absolute;
129126
height: 100%;
130127
}
131128

129+
.nav-item.is-current-page>a{
130+
background-color: #f6f8fa;
131+
}
132132
.get-started {
133133
padding-right: 15px;
134134
}
@@ -664,13 +664,6 @@ a.ds_buttons_button:hover {
664664
margin: 8px 0;
665665
}
666666

667-
li.nav-item[data-depth='2'] {
668-
padding: 0 32px;
669-
}
670-
671-
li.nav-item[data-depth='3'] {
672-
padding: 0 32px 0 48px;
673-
}
674667

675668
gcx-schema-sample-app-gallery {
676669
--gcx-sample-appgallery-h4-font-size: 14px;
@@ -838,6 +831,7 @@ a.nav-link {
838831
display: block;
839832
padding: 8px 32px;
840833
margin: 0;
834+
position: relative;
841835
}
842836

843837
.nav-item .nav-text a {
@@ -1106,16 +1100,20 @@ label.switch_label:after {
11061100
color: var(--white);
11071101
}
11081102

1109-
.dark-mode .nav-item.is-current-page::before {
1110-
background: var(--color-interface-night-300);
1103+
1104+
.dark-mode .nav-item.is-current-page>a:before{
1105+
content: "";
11111106
border: 2px solid var(--color-interface-night-300);
1107+
top: 0;
1108+
background: var(--color-interface-night-300);
1109+
left: 0;
1110+
position: absolute;
1111+
height: 100%;
11121112
}
11131113

1114-
.dark-mode .nav-item.is-current-page {
1114+
.dark-mode .nav-item.is-current-page>a{
11151115
background-color: var(--color-interface-night-800);
11161116
}
1117-
1118-
11191117
/* Dark mode: Toolbar*/
11201118

11211119
.dark-mode .toolbar {
@@ -1415,18 +1413,6 @@ label.switch_label:after {
14151413
color: #fff;
14161414
}
14171415

1418-
li.nav-item.toggler.is-active[data-depth="2"]:hover .nav-text {
1419-
color: #000;
1420-
}
1421-
1422-
li.nav-item[data-depth="2"]:hover a {
1423-
color: #000;
1424-
}
1425-
1426-
.nav-item[data-depth="1"].toggler:hover button {
1427-
color: #000;
1428-
}
1429-
14301416
.dark-mode .nav-item[data-depth="1"].toggler:hover button {
14311417
color: #fff;
14321418
}
@@ -1456,10 +1442,6 @@ li.nav-item[data-depth="2"]:hover a {
14561442
background-color: #f6f8fa;
14571443
}
14581444

1459-
.nav-item[data-depth="1"].toggler:hover span {
1460-
color: #000;
1461-
}
1462-
14631445
.nav-item[data-depth="1"].toggler.is-active:hover span {
14641446
color: #6a7086;
14651447
}
@@ -1538,42 +1520,51 @@ code::before {
15381520
background-size: 49%;
15391521
}
15401522

1541-
1542-
li.nav-item.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) {
1543-
padding: 0;
1523+
/*New Nav Style - Firefox working*/
1524+
.dark-mode .nav-item.toggler>a:hover, .dark-mode .nav-item a:hover{
1525+
background: #2e394e;
15441526
}
15451527

1546-
li.nav-item.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) a.nav-link {
1547-
padding: 8px 62px;
1528+
.nav-item.toggler>a:hover, .nav-item a:hover{
1529+
background: #f6f8fa;
15481530
}
15491531

1550-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) {
1551-
padding: 0;
1532+
.nav-item.is-current-page[data-depth="1"]:not(.toggler)>a::before, .nav-item.is-current-page[data-depth="2"]:not(.toggler)>a::before {
1533+
height: 100%;
15521534
}
15531535

1554-
li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) a.nav-link {
1536+
.nav-item.is-active[data-depth="1"] li[data-depth="2"]>a.nav-link {
15551537
padding: 8px 62px;
15561538
}
15571539

1558-
li.nav-item[data-depth="3"] {
1559-
padding: 0;
1540+
.nav-item.is-active[data-depth="2"] li[data-depth="3"]>a.nav-link {
1541+
padding: 8px 0 8px 90px;
15601542
}
15611543

1562-
li.nav-item[data-depth="3"] a.nav-link {
1563-
padding-right: 32px!important;
1564-
padding-left: 64px!important;
1565-
margin: 0 0 0 32px!important;
1544+
.nav-item.is-current-page[data-depth="2"]>a.nav-link {
1545+
padding: 8px 62px;
15661546
}
1567-
1568-
li.nav-item.is-current-page.is-active:has(li):has(li) {
1569-
background: transparent;
1547+
.nav-item.is-current-path[data-depth="2"]>a.nav-link {
1548+
padding: 8px 62px;
15701549
}
15711550

1572-
li.nav-item.is-current-page.is-active:has(li):has(li):before {
1573-
background: transparent;
1574-
border: none;
1551+
.nav-item.is-current-page[data-depth="3"]>a.nav-link {
1552+
padding: 8px 85px;
1553+
}
1554+
.nav-item.is-current-path[data-depth="3"]>a.nav-link {
1555+
padding: 8px 85px;
1556+
}
1557+
.nav-item.is-current-page[data-depth="1"], .nav-item.is-current-page[data-depth="2"], .nav-item.is-current-page[data-depth="3"] {
1558+
padding: 0;
15751559
}
15761560

1561+
.nav-item.is-current-path[data-depth="1"], .nav-item.is-current-path[data-depth="2"], .nav-item.is-current-path[data-depth="3"] {
1562+
padding: 0;
1563+
}
1564+
.nav-item.is-active[data-depth="3"] li[data-depth="4"]>a.nav-link {
1565+
padding: 8px 16px 8px 120px;
1566+
}
1567+
/*End new styles - firefox working*/
15771568
.dark-mode .nav-item.is-current-page a {
15781569
color: white;
15791570
}

‎src/css/site.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
@import "typeface-roboto.css";
2-
@import "typeface-roboto-mono.css";
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
32
@import "vars.css";
43
@import "base.css";
54
@import "body.css";

‎src/css/vars.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@
7878
--body-line-height: 1.15;
7979
--body-font-color: var(--color-near-black);
8080
/*--body-font-family: "Nunito Sans", "Work Sans", sans-serif;*/
81-
--body-font-family: "Roboto", "Work Sans", sans-serif;
81+
--body-font-family: 'Roboto', sans-serif;
8282
--body-font-weight-bold: 600;
83-
--monospace-font-family: "Roboto Mono", monospace;
83+
--monospace-font-family: 'Roboto Mono', monospace;
8484
--monospace-font-weight-bold: 500;
8585
/* base */
8686
--body-background: var(--color-white);

0 commit comments

Comments
 (0)