Small theme updates & fixes (#637)

* [NHUB-351], Advanced search changes and Modal improvements * fix lint * fix lint 2 * small fix * css fix * theme update * CSS fixes and improvements * theme and logo handling improvements * Theme CSS updates and Fixes * UI fixes based on feedback * Misc UI fixes * New Coverage icons * logo.html update * Various layout improvements * [CPCN-329] Broken design of Request more seats and Download dialog * [NHUB-394], [CPCN-293], [NHUB-402] * NHUB-410 * [NHUB-421] Optimize list items for larger screen sizes * [NHUB-412] Introduce a Planning item icon in the NH Agenda list views * Quick filters improvements * lint fix * Changed wording for Quick filter reset * Mobile layout improvements * small CSS fix * Small theme updates & fixes
superdesk · Oct 26, 2023 · 094619a · 094619a
1 parent f2651f3
commit 094619a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 31 deletions.
diff --git a/assets/styles/custom-variables.scss b/assets/styles/custom-variables.scss
@@ -386,26 +386,28 @@ $container-max-widths: (
     --simplecard-item-padding--compact: var(--space--1) var(--space--1) var(--space--1) var(--space--3);
 
     // COMPONENT: SIDENAV
-    --sidenav-color-bg:                 var(--color-primary);
-    --sidenav-color-item-bg:            transparent;
-    --sidenav-color-item-fg:            hsla(0, 0%, 100%, 1);
-    --sidenav-color-item-bg--active:    hsla(0, 0%, 100%, 1);
-    --sidenav-color-item-fg--active:    var(--color-primary);
-    --sidenav-color-badge-bg:           hsla(0, 0%, 16%, 1);
-    --sidenav-color-badge-fg:           hsla(0, 0%, 98%, 1);
-    --sidenav-color-badge-active-outline:hsla(0, 0%, 98%, 1);
-    --sidenav-item-badge-size:          1.25rem;
-    --sidenav-item-badge-font-size:     0.6875rem;
-    --sidenav-item-helper-icon-size:    1.25rem;
-    --sidenav-item-helper-icon-fg:      var(--sidenav-color-bg);
-    --sidenav-item-border-radius:       var(--border-radius--s);
-    --separator-dot-size:               3px;
-    --separator-dot-color-bg:           var(--sidenav-color-item-fg);
+    --sidenav-color-bg:                     var(--color-primary);
+    --sidenav-color-item-bg:                transparent;
+    --sidenav-color-item-fg:                hsla(0, 0%, 100%, 1);
+    --sidenav-color-item-bg--active:        hsla(0, 0%, 100%, 1);
+    --sidenav-color-item-fg--active:        var(--color-primary);
+    --sidenav-color-badge-bg:               hsla(0, 0%, 16%, 1);
+    --sidenav-color-badge-bg--active:       hsla(0, 0%, 16%, 1);
+    --sidenav-color-badge-fg:               hsla(0, 0%, 98%, 1);
+    --sidenav-color-badge-fg--active:       hsla(0, 0%, 98%, 1);
+    --sidenav-color-badge-outline--active:  var(--sidenav-color-item-bg--active);
+    --sidenav-item-badge-size:              1.25rem;
+    --sidenav-item-badge-font-size:         0.6875rem;
+    --sidenav-item-helper-icon-size:        1.25rem;
+    --sidenav-item-helper-icon-fg:          var(--sidenav-color-bg);
+    --sidenav-item-border-radius:           var(--border-radius--s);
+    --separator-dot-size:                   3px;
+    --separator-dot-color-bg:               var(--sidenav-color-item-fg);
     // Title and size options
-    --sidenav-item-title-display:       block; // set to none to hide the title
-    --sidenav-size-width:               80px; // width of the sidenav on desktop
-    --sidenav-item-gap:                 8px; // left and right spacing between item and the bar on desktop
-    --sidenav-item-width:               calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    --sidenav-item-title-display:           block; // set to none to hide the title
+    --sidenav-size-width:                   80px; // width of the sidenav on desktop
+    --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
+    --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
 
     // COMPONENT: PROFILE MODAL
     --profile-header-height: 56px;

diff --git a/assets/styles/index.scss b/assets/styles/index.scss
@@ -506,7 +506,9 @@ body.print {
 
         &.active {
             .sidenav-icons__badge {
-                outline: 2px solid var(--sidenav-color-badge-active-outline);
+                outline: 2px solid var(--sidenav-color-badge-outline--active);
+                background-color: var(--sidenav-color-badge-bg--active);
+                color: var(--sidenav-color-badge-fg--active);
             }
 
             a {
@@ -3786,8 +3788,8 @@ article.list {
 }
 .collapsible-box__header-title {
     font-size: var(--text-size--large);
-    line-height: 1;
-    font-weight: 500;
+    line-height: 1.1;
+    font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/design_app/src/assets/styles/theme_Command-News.css b/design_app/src/assets/styles/theme_Command-News.css
@@ -44,12 +44,13 @@
     --top-bar-nav-brand-border-type: solid;
 
     /* COMPONENT: SIDENAV */
-    --sidenav-color-bg:                 hsl(0, 3%, 15%);
-    --sidenav-color-item-bg--active:    hsl(356, 72%, 46%);
-    --sidenav-color-item-fg--active:    hsla(0, 0%, 100%, 1);
-    --sidenav-color-badge-bg:           hsla(0, 0%, 98%, 1);
-    --sidenav-color-badge-fg:           hsl(356, 72%, 46%);
-    --sidenav-color-badge-active-outline:   hsl(356, 72%, 46%);
+    --sidenav-color-bg:                     hsl(0, 3%, 15%);
+    --sidenav-color-item-bg--active:        hsl(356, 72%, 46%);
+    --sidenav-color-item-fg--active:        hsla(0, 0%, 100%, 1);
+    --sidenav-color-badge-bg:               hsla(0, 0%, 98%, 1);
+    --sidenav-color-badge-bg--active:       hsla(0, 0%, 98%, 1);
+    --sidenav-color-badge-fg:               hsl(356, 72%, 46%);
+    --sidenav-color-badge-fg--active:       hsl(356, 72%, 46%);
 
     /* COMPONENT: BUTTONS */
     /* // Primary */

diff --git a/design_app/src/assets/styles/theme_News-Pro.css b/design_app/src/assets/styles/theme_News-Pro.css
@@ -48,9 +48,10 @@
     --sidenav-color-bg:                     var(--color-primary);
     --sidenav-color-item-bg--active:        hsla(0, 0%, 100%, 1);
     --sidenav-color-item-fg--active:        hsl(356, 72%, 46%);
-    --sidenav-color-badge-bg:               hsla(0, 0%, 98%, 1);
-    --sidenav-color-badge-fg:               hsl(356, 72%, 46%);
-    --sidenav-color-badge-active-outline:   hsl(356, 72%, 46%);
+    --sidenav-color-badge-bg:               hsla(0, 0%, 18%, 1);
+    --sidenav-color-badge-bg--active:       hsla(0, 0%, 18%, 1);
+    --sidenav-color-badge-fg:               hsla(0, 0%, 98%, 1);
+    --sidenav-color-badge-fg--active:       hsla(0, 0%, 98%, 1);
 
     /* COMPONENT: BUTTONS */
     /* // Primary */