Update docFx Template

- Use new logo (rebranding)
- Re-introduce the search icon in the Nav->Search control
- Fix formatting issue with toc expand char "›"
- Update alignment + spacing around the icon in the Toc->Filter control

Author: Impertatore

RWSTemplate/logo.svg

@@ -14,6 +14,7 @@
     <div class="collapse navbar-collapse" id="navbar">
       <form class="navbar-form navbar-right" role="search" id="search">
         <div class="form-group">
+          <span class="glyphicon glyphicon-search search-icon"></span>
           <input type="text" class="form-control" id="search-query" placeholder="{{__global.search}}" autocomplete="off">
         </div>
       </form>

RWSTemplate/partials/navbar.tmpl.partial

@@ -26,6 +26,15 @@ a {
   cursor: pointer;
 }
 
+#logo {
+    margin-top: 6px;
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    width: 209px;
+}
+
 button:hover,
 button:focus,
 a:hover,
@@ -614,20 +623,21 @@ body .toc {
   transform: rotate(90deg);
 }
 
-.toc .nav>li>.expand-stub::before,
-.toc .nav>li.active>.expand-stub::before {
-  color: var(--highlight-light);
-  color: var(--font-color);
-  display: inline-block;
-  height: .9rem;
-  width: 1.2rem;
-  text-align: center;
-  overflow: hidden;
-  content: "›";
-  font-size: 1.5rem;
-  line-height: .9rem;
-  transform: rotate(0deg);
-  transition: 350ms ease-out;
+.toc .nav > li > .expand-stub::before,
+.toc .nav > li.active > .expand-stub::before {
+    color: var(--font-color);
+    display: inline-block;
+    height: 2rem;
+    width: 1.5rem; 
+    line-height: 1.5rem; 
+    text-align: center;
+    overflow: visible;
+    content: "›";
+    font-size: 2rem;
+    font-weight: bold;
+    transform: rotate(0deg);
+    transition: 350ms ease-out;
+    vertical-align: middle; 
 }
 
 .toc .nav > li.filtered > ul,
@@ -756,7 +766,7 @@ body .toc {
 
 .toc-filter > input {
   color: var(--input-text);
-  padding-left: 2.3rem;
+  padding-left: 3rem;
   padding-right: 1rem;
   width: 100%;
   height: calc(1.5em + 8px); /* Adjust height by adding 5 pixels */
@@ -772,11 +782,9 @@ body .toc {
 .toc-filter > .filter-icon {
   position: absolute;
   top: 2px;
-  left: 5px;
+  left: 8px;
 }
 
-
-
 .toc-filter>.clear-icon {
   position: absolute;
   text-align: center;

RWSTemplate/styles/docfx.css

@@ -730,26 +730,50 @@ $(function () {
       var imgClass = $img.attr('class');
       var imgURL = $img.attr('src');
 
-      jQuery.get(imgURL, function (data) {
-        // Get the SVG tag, ignore the rest
-        var $svg = jQuery(data).find('svg');
+        jQuery.get(imgURL, function (data) {
+            // Get the SVG tag, ignore the rest
+            var $svg = jQuery(data).find('svg');
 
-        // Add replaced image's ID to the new SVG
-        if (typeof imgID !== 'undefined') {
-          $svg = $svg.attr('id', imgID);
-        }
-        // Add replaced image's classes to the new SVG
-        if (typeof imgClass !== 'undefined') {
-          $svg = $svg.attr('class', imgClass + ' replaced-svg');
-        }
+            // Add replaced image's ID to the new SVG
+            if (typeof imgID !== 'undefined') {
+                $svg = $svg.attr('id', imgID);
+            }
+            // Add replaced image's classes to the new SVG
+            if (typeof imgClass !== 'undefined') {
+                $svg = $svg.attr('class', imgClass + ' replaced-svg');
+            }
 
-        // Remove any invalid XML tags as per http://validator.w3.org
-        $svg = $svg.removeAttr('xmlns:a');
+            // Remove any invalid XML tags as per http://validator.w3.org
+            $svg = $svg.removeAttr('xmlns:a');
+
+            // Fix clip-path URLs in styles
+            $svg.find('[style]').each(function () {
+                var style = jQuery(this).attr('style');
+                if (style && style.indexOf('url(#clippath)') !== -1) {
+                    var uniqueId = 'clippath-' + Math.floor(Math.random() * 10000);
+                    // Find <clipPath> element and update id
+                    $svg.find('clipPath#clippath').attr('id', uniqueId);
+                    // Replace url reference to unique id
+                    style = style.replace(/url\(#clippath\)/g, 'url(#' + uniqueId + ')');
+                    jQuery(this).attr('style', style);
+                }
+            });
+
+            // Also fix clip-path references in attributes (e.g. clip-path="url(#clippath)")
+            $svg.find('[clip-path]').each(function () {
+                var cpValue = jQuery(this).attr('clip-path');
+                if (cpValue && cpValue.indexOf('url(#clippath)') !== -1) {
+                    var uniqueId = 'clippath-' + Math.floor(Math.random() * 10000);
+                    $svg.find('clipPath#clippath').attr('id', uniqueId);
+                    var newValue = cpValue.replace(/url\(#clippath\)/g, 'url(#' + uniqueId + ')');
+                    jQuery(this).attr('clip-path', newValue);
+                }
+            });
 
-        // Replace image with new SVG
-        $img.replaceWith($svg);
+            // Replace image with new SVG
+            $img.replaceWith($svg);
 
-      }, 'xml');
+        }, 'xml');
     });
   }