Skip to content

Commit 79d4366

Browse files
eric-schneiderjosuebran
eric-schneider
and
josuebran
authored
DOC-3854: Fix admonition UI issues (#77)
* Fix caution and tip block * Fix titles color, admonition border and tables * Fix title color, lists, tables and nested border color * titles styles * Color for caution * Fix menu for tablets and adjust sidebar with heroblock * Fix admonition block container overflow --------- Co-authored-by: Josué Bran <[email protected]>
1 parent 2f32d19 commit 79d4366

10 files changed

+112
-41
lines changed

‎gcx/styles/src/css/doc.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,7 @@
456456
padding: 0;
457457
}
458458

459+
.doc .title,
459460
.doc .admonitionblock .title,
460461
.doc .exampleblock .title,
461462
.doc .imageblock .title,

‎gcx/styles/src/css/helios-gcx-alerts.css‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,40 @@
88
display: block;
99
}
1010

11-
.doc .admonitionblock.caution tr {
11+
.doc .admonitionblock .tableblock tr {
12+
display: table-row;
13+
}
14+
15+
.doc .admonitionblock .tableblock.fit-content {
16+
display: table-cell;
17+
}
18+
19+
.doc .admonitionblock tr {
20+
word-break: break-word;
21+
}
22+
23+
.doc .admonitionblock.caution > table > tbody > tr {
1224
display: block;
1325
background: var(--color-white);
14-
border: 2px solid #3b4260;
26+
border: 2px solid #E64328;
1527
border-radius: 6px;
1628
}
1729

1830
.doc .admonitionblock.caution td.content {
1931
color: var(--color-black);
2032
}
2133

22-
.doc .admonitionblock.tip tr {
34+
.doc .admonitionblock.tip > table > tbody > tr {
2335
display: block;
2436
background: var(--color-white);
2537
border: 2px solid var(--color-green-700);
2638
border-radius: 6px;
2739
}
2840

41+
.dark-mode .doc .admonitionblock.tip tr {
42+
background: var(--color-purple-700);
43+
}
44+
2945
.doc .admonitionblock.tip td.content {
3046
color: var(--color-black);
3147
}
@@ -35,7 +51,7 @@
3551
color: var(--color-white)!important;
3652
}
3753

38-
.doc .admonitionblock.warning tr {
54+
.doc .admonitionblock.warning > table > tbody > tr {
3955
display: block;
4056
background: var(--color-white);
4157
border: 2px solid var(--color-red-500);
@@ -46,7 +62,7 @@
4662
color: var(--color-black);
4763
}
4864

49-
.doc .admonitionblock.important tr {
65+
.doc .admonitionblock.important > table > tbody > tr {
5066
display: block;
5167
background: var(--color-white);
5268
border: 2px solid var(--color-gray-neutral-700);
@@ -64,7 +80,7 @@
6480
color: var(--color-black);
6581
}
6682

67-
.doc .admonitionblock.note tr {
83+
.doc .admonitionblock.note > table > tbody > tr {
6884
display: block;
6985
background: var(--color-white);
7086
border: 2px solid var(--color-green-700);

‎gcx/styles/src/css/helios-gcx-header.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
display: none;
2525
}
2626

27-
@media screen and (min-width:769px) {
27+
@media screen and (min-width:1024px) {
2828
.navbar-end .navbar-end__group {
2929
display: flex;
3030
}
@@ -62,13 +62,13 @@
6262
align-items: center;
6363
}
6464

65-
@media screen and (min-width:769px) {
65+
@media screen and (min-width:1024px) {
6666
.doc-link {
6767
display: flex;
6868
}
6969
}
7070

71-
@media only screen and (max-width: 600px) {
71+
@media only screen and (max-width: 1024px) {
7272
.is-clipped--navbar .navbar-menu {
7373
background: #2e394e;
7474
box-shadow: none!important;

‎gcx/styles/src/css/helios-gcx-heroBlock.css‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,36 @@
2828
visibility: hidden;
2929
}
3030

31-
.toolbar:has(~ .dsHeroBlock),
31+
.toolbar:has(~ .dsHeroBlock) .breadcrumbs,
3232
.dsHeroBlock + .content h1.page {
3333
display: none;
3434
}
3535

36+
.toolbar.with-hero {
37+
position: absolute;
38+
background: transparent;
39+
}
40+
41+
.toolbar.with-hero .breadcrumbs {
42+
display: none;
43+
}
44+
45+
.toolbar.with-hero .nav-toggle {
46+
background: url(../img/menu-white.svg) no-repeat 50% 47.5%;
47+
background-size: 49%;
48+
}
49+
50+
.toolbar.with-hero .nav-toggle.is-active {
51+
background: url(../img/back.svg) no-repeat 50% 47.5%;
52+
background-size: 49%;
53+
}
54+
55+
.dark-mode .toolbar.with-hero .nav-toggle.is-active {
56+
background: url(../img/back-white.svg) no-repeat 50% 47.5%;
57+
background-size: 49%;
58+
}
59+
60+
3661
.dsHeroContent {
3762
padding: 72px 60px;
3863
width: 50%;

‎gcx/styles/src/css/helios-gcx-icons.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,18 @@
99
border: 2px solid var(--color-green-700);
1010
}
1111

12-
.doc .admonitionblock.warning .icon,
13-
.doc .admonitionblock.caution .icon {
12+
.doc .admonitionblock.warning .icon {
1413
color: var(--color-red-500);
1514
background-color: var(--color-red-500);
1615
border: 2px solid var(--color-red-500);
1716
}
1817

18+
.doc .admonitionblock.caution .icon {
19+
color: #E64328;
20+
background-color: #E64328;
21+
border: 2px solid #E64328;
22+
}
23+
1924
.doc .admonitionblock.important .icon {
2025
color: var(--color-gray-neutral-700);
2126
background-color: var(--color-gray-neutral-700);

‎gcx/styles/src/css/helios-gcx-links.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,20 @@
4747
color: var(--color-white)!important;
4848
}
4949

50+
.dark-mode .doc .sidebarblock {
51+
background: var(--color-purple-700);
52+
}
53+
5054
.doc .admonitionblock.caution a {
5155
color: var(--color-black)!important;
5256
text-decoration: underline;
5357
}
5458

59+
.dark-mode .doc .admonitionblock.caution a {
60+
color: var(--color-white)!important;
61+
}
62+
63+
5564
.doc .admonitionblock.tip a {
5665
color: var(--color-black)!important;
5766
text-decoration: underline;

‎gcx/styles/src/css/helios-gcx-sidebar.css‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
.nav-container {
1212
width: 314px;
1313
box-shadow: 2px 0px 0px var(--nav-border-color);
14-
transition: 150ms ease-in-out
14+
transition: width 150ms ease-in-out, visibility 150ms ease-in-out;
15+
background: white;
16+
z-index: 4;
1517
}
1618

1719
@media screen and (min-width:769px) {
@@ -286,10 +288,19 @@ label.collapse_label:after {
286288
width: 20px;
287289
}
288290

291+
.nav-toggle.is-active {
292+
position: absolute;
293+
z-index: 99999;
294+
}
295+
296+
.nav-container.sidebar.is-active +
297+
.article .toolbar.with-hero {
298+
top: 0;
299+
z-index: 9999;
300+
}
301+
289302
@media only screen and (max-width: 600px) {
290303
.nav-toggle.is-active {
291-
position: absolute;
292-
z-index: 99999;
293304
top: 10px;
294305
left: 15px;
295306
}
@@ -305,13 +316,21 @@ label.collapse_label:after {
305316
background: white;
306317
z-index: 9999;
307318
}
308-
.dark-mode .nav,
309-
.dark-mode .nav-container {
310-
background: var(--color-purple-background);
311-
z-index: 9999;
319+
}
320+
321+
@media only screen and (min-width: 600px) {
322+
.nav-toggle.is-active {
323+
top: 1rem;
324+
left: 1.1rem;
312325
}
313326
}
314327

328+
.dark-mode .nav,
329+
.dark-mode .nav-container {
330+
background: var(--color-purple-background);
331+
/*z-index: 9999;*/
332+
}
333+
315334
.dark-mode .nav-toggle {
316335
background: url(../img/menu-white.svg) no-repeat 50% 47.5%;
317336
background-size: 49%;

‎gcx/styles/src/css/helios-gcx-titles.css‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
1+
.doc .admonitionblock .title {
2+
color: var(--color-black);
3+
}
4+
5+
6+
.doc .title,
17
.doc .admonitionblock .title,
28
.doc .exampleblock .title,
39
.doc .imageblock .title,
410
.doc .literalblock .title,
511
.doc .listingblock .title,
612
.doc .openblock .title,
713
.doc .tableblock caption {
8-
color: var(--heading-font-color);
14+
color: var(--color-black);
915
}
1016

17+
.doc .admonitionblock .quoteblock .title {
18+
color: var(--color-black);
19+
}
20+
21+
.dark-mode .doc .title,
1122
.dark-mode .doc .admonitionblock .title,
1223
.dark-mode .doc .exampleblock .title,
1324
.dark-mode .doc .imageblock .title,
@@ -19,6 +30,7 @@
1930
}
2031

2132
.doc .sidebarblock>.content>.title {
33+
color: var(--color-black);
2234
text-align: left;
2335
}
2436

@@ -34,24 +46,8 @@
3446
text-decoration: none;
3547
}
3648

37-
.doc .admonitionblock.caution .title {
38-
color: #3b4260!important;
39-
}
40-
41-
.doc .admonitionblock.tip .title {
42-
color: #008040!important;
43-
}
44-
45-
.doc .admonitionblock.warning .title {
46-
color: #916707!important;
47-
}
48-
49-
.doc .admonitionblock.important .title {
50-
color: #D52424!important;
51-
}
52-
53-
.doc .admonitionblock.note .title {
54-
color: #1E71D4!important;
49+
.dark-mode .doc .quoteblock .title {
50+
color: var(--color-black);
5551
}
5652

5753
.dark-mode .doc h2:not(.discrete) {

‎gcx/styles/src/css/helios-gcx.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,7 @@ gcx-full .full-articles {
507507
.doc .listingblock .title,
508508
.doc .openblock .title,
509509
.doc .tableblock caption {
510-
color: var(--heading-font-color);
510+
color: var(--color-black);
511511
}
512512

513513
.dark-mode .doc .admonitionblock .title,

‎gcx/styles/src/js/08-gcx-helios.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,6 @@ if (heroBlock) {
157157

158158
/* fallback for firefox :has pseudo-class */
159159
document.querySelector('.dsHeroBlock').innerHTML = heroHTML
160-
document.querySelector('.toolbar').style.display = 'none'
160+
document.querySelector('.toolbar').classList.add('with-hero')
161161
document.querySelector('h1.page').style.display = 'none'
162-
}
162+
}

0 commit comments

Comments
 (0)