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 <josuebran@gmail.com>
riptano · Jun 15, 2023 · 79d4366 · 79d4366
1 parent 2f32d19
commit 79d4366
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 41 deletions.
diff --git a/gcx/styles/src/css/doc.css b/gcx/styles/src/css/doc.css
@@ -456,6 +456,7 @@
   padding: 0;
 }
 
+.doc .title,
 .doc .admonitionblock .title,
 .doc .exampleblock .title,
 .doc .imageblock .title,

diff --git a/gcx/styles/src/css/helios-gcx-alerts.css b/gcx/styles/src/css/helios-gcx-alerts.css
@@ -8,24 +8,40 @@
     display: block;
 }
 
-.doc .admonitionblock.caution tr {
+.doc .admonitionblock .tableblock tr {
+    display: table-row;
+}   
+
+.doc .admonitionblock .tableblock.fit-content {
+    display: table-cell;
+}
+
+.doc .admonitionblock tr {
+    word-break: break-word;
+}
+
+.doc .admonitionblock.caution > table > tbody > tr {
     display: block;
     background: var(--color-white);
-    border: 2px solid #3b4260;
+    border: 2px solid #E64328;
     border-radius: 6px;
 }
 
 .doc .admonitionblock.caution td.content {
     color: var(--color-black);
 }
 
-.doc .admonitionblock.tip tr {
+.doc .admonitionblock.tip > table > tbody > tr {
     display: block;
     background: var(--color-white);
     border: 2px solid var(--color-green-700);
     border-radius: 6px;
 }
 
+.dark-mode .doc .admonitionblock.tip tr {
+    background: var(--color-purple-700);
+}
+
 .doc .admonitionblock.tip td.content {
     color: var(--color-black);
 }
@@ -35,7 +51,7 @@
     color: var(--color-white)!important;
 }
 
-.doc .admonitionblock.warning tr {
+.doc .admonitionblock.warning > table > tbody > tr {
     display: block;
     background: var(--color-white);
     border: 2px solid var(--color-red-500);
@@ -46,7 +62,7 @@
     color: var(--color-black);
 }
 
-.doc .admonitionblock.important tr {
+.doc .admonitionblock.important > table > tbody > tr {
     display: block;
     background: var(--color-white);
     border: 2px solid var(--color-gray-neutral-700);
@@ -64,7 +80,7 @@
     color: var(--color-black);
 }
 
-.doc .admonitionblock.note tr {
+.doc .admonitionblock.note > table > tbody > tr {
     display: block;
     background: var(--color-white);
     border: 2px solid var(--color-green-700);

diff --git a/gcx/styles/src/css/helios-gcx-header.css b/gcx/styles/src/css/helios-gcx-header.css
@@ -24,7 +24,7 @@
     display: none;
 }
 
-@media screen and (min-width:769px) {
+@media screen and (min-width:1024px) {
     .navbar-end .navbar-end__group {
         display: flex;
     }
@@ -62,13 +62,13 @@
     align-items: center;
 }
 
-@media screen and (min-width:769px) {
+@media screen and (min-width:1024px) {
     .doc-link {
         display: flex;
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1024px) {
     .is-clipped--navbar .navbar-menu {
         background: #2e394e;
         box-shadow: none!important;

diff --git a/gcx/styles/src/css/helios-gcx-heroBlock.css b/gcx/styles/src/css/helios-gcx-heroBlock.css
@@ -28,11 +28,36 @@
     visibility: hidden;
   }
 
-  .toolbar:has(~ .dsHeroBlock),
+  .toolbar:has(~ .dsHeroBlock) .breadcrumbs,
   .dsHeroBlock + .content h1.page {
     display: none;
   }  
 
+  .toolbar.with-hero {
+    position: absolute;
+    background: transparent;
+  }
+
+  .toolbar.with-hero .breadcrumbs {
+    display: none;
+  }
+
+  .toolbar.with-hero .nav-toggle {
+    background: url(../img/menu-white.svg) no-repeat 50% 47.5%;
+    background-size: 49%;
+  }
+
+  .toolbar.with-hero .nav-toggle.is-active {
+    background: url(../img/back.svg) no-repeat 50% 47.5%;
+    background-size: 49%;
+  }
+
+  .dark-mode .toolbar.with-hero .nav-toggle.is-active {
+    background: url(../img/back-white.svg) no-repeat 50% 47.5%;
+    background-size: 49%;
+  }
+
+
   .dsHeroContent {
     padding: 72px 60px;
     width: 50%;

diff --git a/gcx/styles/src/css/helios-gcx-icons.css b/gcx/styles/src/css/helios-gcx-icons.css
@@ -9,13 +9,18 @@
     border: 2px solid var(--color-green-700);
 }
 
-.doc .admonitionblock.warning .icon,
-.doc .admonitionblock.caution .icon {
+.doc .admonitionblock.warning .icon {
     color: var(--color-red-500);
     background-color: var(--color-red-500);
     border: 2px solid var(--color-red-500);
 }
 
+.doc .admonitionblock.caution .icon {
+    color: #E64328;
+    background-color: #E64328;
+    border: 2px solid #E64328;
+}
+
 .doc .admonitionblock.important .icon {
     color: var(--color-gray-neutral-700);
     background-color: var(--color-gray-neutral-700);

diff --git a/gcx/styles/src/css/helios-gcx-links.css b/gcx/styles/src/css/helios-gcx-links.css
@@ -47,11 +47,20 @@
     color: var(--color-white)!important;
 }
 
+.dark-mode .doc .sidebarblock {
+    background: var(--color-purple-700);
+}
+
 .doc .admonitionblock.caution a {
     color: var(--color-black)!important;
     text-decoration: underline;
 }
 
+.dark-mode .doc .admonitionblock.caution a {
+    color: var(--color-white)!important;
+}
+
+
 .doc .admonitionblock.tip a {
     color: var(--color-black)!important;
     text-decoration: underline;

diff --git a/gcx/styles/src/css/helios-gcx-sidebar.css b/gcx/styles/src/css/helios-gcx-sidebar.css
@@ -11,7 +11,9 @@
 .nav-container {
     width: 314px;
     box-shadow: 2px 0px 0px var(--nav-border-color);
-    transition: 150ms ease-in-out
+    transition: width 150ms ease-in-out, visibility 150ms ease-in-out;
+    background: white;
+    z-index: 4;
 }
 
 @media screen and (min-width:769px) {
@@ -286,10 +288,19 @@ label.collapse_label:after {
     width: 20px;
 }
 
+.nav-toggle.is-active {
+    position: absolute;
+    z-index: 99999;
+}
+
+.nav-container.sidebar.is-active +
+.article .toolbar.with-hero {
+    top: 0;
+    z-index: 9999;
+}
+
 @media only screen and (max-width: 600px) {
     .nav-toggle.is-active {
-        position: absolute;
-        z-index: 99999;
         top: 10px;
         left: 15px;
     }
@@ -305,13 +316,21 @@ label.collapse_label:after {
         background: white;
         z-index: 9999;
     }
-    .dark-mode .nav,
-    .dark-mode .nav-container {
-        background: var(--color-purple-background);
-        z-index: 9999;
+}
+
+@media only screen and (min-width: 600px) {
+    .nav-toggle.is-active {
+        top: 1rem;
+        left: 1.1rem;
     }
 }
 
+.dark-mode .nav,
+.dark-mode .nav-container {
+    background: var(--color-purple-background);
+    /*z-index: 9999;*/
+}
+
 .dark-mode .nav-toggle {
     background: url(../img/menu-white.svg) no-repeat 50% 47.5%;
     background-size: 49%;

diff --git a/gcx/styles/src/css/helios-gcx-titles.css b/gcx/styles/src/css/helios-gcx-titles.css
@@ -1,13 +1,24 @@
+.doc .admonitionblock .title {
+    color: var(--color-black);
+}
+
+
+.doc .title,
 .doc .admonitionblock .title,
 .doc .exampleblock .title,
 .doc .imageblock .title,
 .doc .literalblock .title,
 .doc .listingblock .title,
 .doc .openblock .title,
 .doc .tableblock caption {
-    color: var(--heading-font-color);
+    color: var(--color-black);
 }
 
+.doc .admonitionblock .quoteblock .title {
+  color: var(--color-black);
+}
+
+.dark-mode .doc .title,
 .dark-mode .doc .admonitionblock .title,
 .dark-mode .doc .exampleblock .title,
 .dark-mode .doc .imageblock .title,
@@ -19,6 +30,7 @@
 }
 
 .doc .sidebarblock>.content>.title {
+    color: var(--color-black);
     text-align: left;
 }
 
@@ -34,24 +46,8 @@
     text-decoration: none;
 }
 
-.doc .admonitionblock.caution .title {
-    color: #3b4260!important;
-}
-
-.doc .admonitionblock.tip .title {
-    color: #008040!important;
-}
-
-.doc .admonitionblock.warning .title {
-    color: #916707!important;
-}
-
-.doc .admonitionblock.important .title {
-    color: #D52424!important;
-}
-
-.doc .admonitionblock.note .title {
-    color: #1E71D4!important;
+.dark-mode .doc .quoteblock .title {
+    color: var(--color-black);
 }
 
 .dark-mode .doc h2:not(.discrete) {

diff --git a/gcx/styles/src/css/helios-gcx.css b/gcx/styles/src/css/helios-gcx.css
@@ -507,7 +507,7 @@ gcx-full .full-articles {
 .doc .listingblock .title,
 .doc .openblock .title,
 .doc .tableblock caption {
-    color: var(--heading-font-color);
+    color: var(--color-black);
 }
 
 .dark-mode .doc .admonitionblock .title,

diff --git a/gcx/styles/src/js/08-gcx-helios.js b/gcx/styles/src/js/08-gcx-helios.js
@@ -157,6 +157,6 @@ if (heroBlock) {
 
   /* fallback for firefox :has pseudo-class */
   document.querySelector('.dsHeroBlock').innerHTML = heroHTML
-  document.querySelector('.toolbar').style.display = 'none'
+  document.querySelector('.toolbar').classList.add('with-hero')
   document.querySelector('h1.page').style.display = 'none'
-}
+}