Merge pull request #7689 from dulithsenanayake/fix-tab-issues-master

[Master] - Fix tab issues

en/docs/administer/key-managers/configure-custom-connector.md

@@ -132,7 +132,7 @@ When registering a third-party Identity Provider as a Key Manager in the Admin P
 
 1. Sign in to the Admin Portal using the following URL: `https://<hostname>:9443/admin`
 
-      !!! tip
+    !!! tip
           For example, this URL can be `https://localhost:9443/admin` and you can use `admin` as the username and password to access the Admin Portal.
 
 2. Add a new Key Manager.
@@ -462,7 +462,7 @@ When registering a third-party Identity Provider as a Key Manager in the Admin P
 
 1. Sign in to the Developer Portal using the following URL: `https://<hostname>:9443/devportal`
 
-      !!! tip
+    !!! tip
           This can be `https://localhost:9443/devportal` and you can use “admin” as the username and password to access the Developer Portal.
 
 2. Click **Applications**.

en/docs/administer/key-managers/configure-keycloak-connector.md

@@ -97,7 +97,7 @@ Follow the instructions given below to configure Keycloak as a third-party Key M
     
          [![Add Keycloak configurations]({{base_path}}/assets/img/administer/keycloak-endpoints.png)]({{base_path}}/assets/img/administer/keycloak-endpoints.png)
          
-         !!! tip
+        !!! tip
              * Configuring the well-known URL populates all the default configurations in the table once you click **Import**. 
              * It is mandatory to provide the **Client Id** and **Client Secret**.
 

en/docs/administer/logging-and-monitoring/logging/admin-configuring-the-log-provider.md

@@ -60,8 +60,8 @@ After implementing the above interfaces, update the `logging-config.xml` file st
         </logFileProviderConfig>
     </loggingConfig>
     ```
-        !!! note
-    The default "InMemoryLogProvider" uses the CarbonMemoryAppender. Therefore the log4j.properties file stored in &lt;PRODUCT\_HOME&gt;/repository/conf/ directory should be updated with the following log4j.appender.CARBON\_MEMORY property:
+    !!! note
+        The default "InMemoryLogProvider" uses the CarbonMemoryAppender. Therefore the log4j.properties file stored in &lt;PRODUCT\_HOME&gt;/repository/conf/ directory should be updated with the following log4j.appender.CARBON\_MEMORY property:
 
     ``` java
         log4j.appender.CARBON_MEMORY=org.wso2.carbon.logging.service.appender.CarbonMemoryAppender]

en/docs/administer/managing-users-and-roles/managing-user-stores/configuring-the-system-administrator.md

@@ -3,7 +3,7 @@
 The **admin** user is the super tenant that will be able to manage all other users, roles and permissions in the system by using the management console of the product. Therefore, the user that should have admin permissions is required to be stored in the primary user store when you start the system for the first time . The documentation on setting up primary user stores will explain how to configure the administrator while configuring the user store. The information under this topic will explain the main configurations that are relevant to setting up the system administrator.
 
 !!! note
-If the primary user store is read-only, you will be using a user ID and role that already exists in the user store, for the administrator. If the user store is read/write, you have the option of creating the administrator user in the user store as explained below. By default, the embedded H2 database (with read/write enabled) is used for both these purposes in WSO2 products.
+    If the primary user store is read-only, you will be using a user ID and role that already exists in the user store, for the administrator. If the user store is read/write, you have the option of creating the administrator user in the user store as explained below. By default, the embedded H2 database (with read/write enabled) is used for both these purposes in WSO2 products.
 
 
 Note the following key facts about the system administrator in your system:
@@ -72,8 +72,10 @@ Note the following regarding the configuration above.
 <td><div class="content-wrapper">
 <p>Do NOT put the password here but leave the default value. I f the user store is read-only, this element and its value are ignored. This password is used only if the user store is read-write and the <code>               AddAdmin              </code> value is set to <code>               true              </code> .<br />
 </p>
-!!! note
+<div class="admonition note">
+<p class="admonition-title">Note</p>
 <p>Note that the password in the <code>               user-mgt.xml              </code> file is written to the primary user store when the server starts for the first time. Thereafter, the password will be validated from the primary user store and not from the <code>               user-mgt.xml              </code> file. Therefore, if you need to change the admin password stored in the user store, you cannot simply change the value in the <code>               user-mgt.xml              </code> file. To change the admin password, you must use the <strong>Change Password</strong> option from the management console as explained <a href="https://docs.wso2.com/display/ADMIN44x/Changing+a+Password">here</a> .</p>
+</div>
 
 </div></td>
 </tr>

en/docs/administer/managing-users-and-roles/managing-user-stores/working-with-properties-of-user-stores.md

@@ -46,8 +46,10 @@ The following table provides descriptions of the key properties you use to confi
 <td><code>             UserSearchBase            </code></td>
 <td><div class="content-wrapper">
 <p>DN of the context or object under which the user entries are stored in the user store. In this case, it is the &quot;users&quot; container. When the user store searches for users, it will start from this location of the directory.</p>
-!!! info
+<div class="admonition info">
+<p class="admonition-title">Info</p>
 <p>Different databases have different search bases.</p>
+</div>
 
 </div></td>
 </tr>
@@ -59,8 +61,10 @@ The following table provides descriptions of the key properties you use to confi
 <td><code>             UserNameAttribute            </code></td>
 <td><div class="content-wrapper">
 <p>The attribute used for uniquely identifying a user entry. Users can be authenticated using their email address, UID, etc.</p>
-!!! info
+<div class="admonition info">
+<p class="admonition-title">Info</p>
 <p>The name of the attribute is considered as the username.</p>
+</div>
 
 <p>For information on using email address to authenticate users, click <a href="https://docs.wso2.com/display/IS530/Using+Email+Address+as+the+Username">here</a> .</p>
 </div></td>
@@ -205,8 +209,10 @@ The following table provides descriptions of the key properties you use to confi
 <td><p><code>              StoreSaltedPassword             </code></p></td>
 <td><div class="content-wrapper">
 <p>(JDBC) Indicates whether to salt the password.</p>
-!!! tip
+<div class="admonition tip">
+<p class="admonition-title">Tip</p>
 <p><strong>Tip:</strong> Make sure you secure the password with salt and key.</p>
+</div>
 
 </div></td>
 </tr>

en/docs/administer/multitenancy/adding-new-tenants.md

@@ -51,8 +51,8 @@ You can invoke these operations using a SOAP client like SOAP UI as follows:
             api-manager.bat
     ```
 
-        !!! tip
-    Get the list of available admin services
+    !!! tip
+        Get the list of available admin services
 
     If you want to discover the admin services that are exposed by your product:
 
@@ -84,11 +84,11 @@ You can invoke these operations using a SOAP client like SOAP UI as follows:
     This assumes that you are running the SOAP UI client from the same machine as the product instance. Note that there are several operations shown in the SOAP UI after importing the WSDL file:
 
     ![]({{base_path}}/assets/attachments/126562777/126562782.png)
-        !!! warning
-    Before invoking an operation:
+    !!! warning
+        Before invoking an operation:
 
-    -   Be sure to set the admin user's credentials for authorization in the SOAP UI.
-    -   Note that it is **not recommended** to delete tenants.
+        -   Be sure to set the admin user's credentials for authorization in the SOAP UI.
+        -   Note that it is **not recommended** to delete tenants.
 
 
 4.  Click on the operation to open the request view. For example, to activate a tenant use the `activateTenant` operation.

en/docs/api-analytics/samples/publishing-analytics-events-to-external-systems.md

@@ -23,7 +23,7 @@ Follow the instructions below to create the custom event publisher.
 
      2. Define the `wso2-nexus` repository in the `pom.xml` file.
 
-         ```
+         ```xml
           <repository>
               <id>wso2-nexus</id>
               <name>WSO2 internal Repository</name>
@@ -38,7 +38,7 @@ Follow the instructions below to create the custom event publisher.
 
      3.  Add the dependency in the `pom.xml` file.
 
-        ```
+        ```xml
           <dependency>
               <groupId>org.wso2.am.analytics.publisher</groupId>
               <artifactId>org.wso2.am.analytics.publisher.client</artifactId>
@@ -86,15 +86,16 @@ Follow the instructions below to configure WSO2 API Gateway and Choreo Connect f
 ??? info "API Manager Gateway"
 
     Follow the instructions below to configure WSO2 API Gateway for the sample created above:
+
     1. Copy the JAR file to the `<API-M_HOME>/repository/components/lib` directory.
     2. Open the `<API-M_HOME>/repository/conf/deployment.toml` file in a text editor and modify the `apim.analytics` section as follows:
 
-         ```
-         [apim.analytics]
-         enable = true
-         properties."publisher.reporter.class" = "<FullyQualifiedClassNameOfMetricReporterImplClass>"
-         logger.reporter.level = "INFO"
-         ```
+        ```toml
+        [apim.analytics]
+        enable = true
+        properties."publisher.reporter.class" = "<FullyQualifiedClassNameOfMetricReporterImplClass>"
+        logger.reporter.level = "INFO"
+        ```
 
     3. Open the `<API-M_HOME>/repository/conf/log4j2.properties` file in a text editor and do the following modifications.
 
@@ -113,10 +114,11 @@ Follow the instructions below to configure WSO2 API Gateway and Choreo Connect f
 
 ??? info "Choreo Connect"
     Follow the instructions below to configure Choreo Connect for the sample created above:
+
     1. Copy the JAR file to the `choreo-connect-1.0.0/docker-compose/resources/enforcer/dropins` directory.
     2. Open the `choreo-connect-1.0.0/docker-compose/choreo-connect-with-apim/conf/config.toml` file in a text editor and modify the `analytics` section as follows:
 
-         ```
+        ```
           [analytics]
               enabled = true
               [analytics.enforcer]

en/docs/assets/css/orange-palette.css

@@ -8,7 +8,7 @@
     --md-accent-fg-color--transparent: #526cfe1a;
     --md-accent-bg-color: #fff;
     --md-accent-bg-color--light: #ffffffb3;
-    --md-hjs-color: #00f;
+    --md-hjs-color: #444;
 }
 :root {
     --md-text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

en/docs/assets/css/theme.css

@@ -16,7 +16,7 @@
  * under the License.
  */
 
- .md-tabs__link--active {
+.md-tabs__link--active {
     opacity: 1 !important;
 }
 
@@ -222,7 +222,7 @@ html .md-footer-meta.md-typeset a {
 .md-tabs>.md-grid,
 .md-main>.md-grid {
     max-width: none;
-    padding-left: 2.5rem;
+    padding-left: 1.5rem;
     padding-right: 2rem;
 }
 
@@ -354,45 +354,6 @@ html .md-footer-meta.md-typeset a {
     }
 }
 
-.text--replace {
-    overflow: hidden;
-    color: transparent;
-    text-indent: 100%;
-    white-space: nowrap
-}
-
-.cd-top {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: inline-block;
-    height: 40px;
-    width: 40px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-    background: url(../lib/backtotop/img/cd-top-arrow.svg) no-repeat center 50%;
-    background-color: hsla(5, 76%, 62%, 0.8);
-}
-
-.js .cd-top {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .3s, visibility .3s, background-color .3s
-}
-
-.js .cd-top--is-visible {
-    visibility: visible;
-    opacity: 1
-}
-
-.js .cd-top--fade-out {
-    opacity: .5
-}
-
-.js .cd-top:hover {
-    background-color: hsl(5, 76%, 62%);
-    opacity: 1
-}
-
 .md-footer__title {
     font-size: .75rem;
 }
@@ -422,8 +383,7 @@ html .md-footer-meta.md-typeset a {
     width: 100%;
     margin: 0 auto;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-wrap: wrap;
 }
 
 @media screen and (max-width: 767px) {
@@ -433,7 +393,7 @@ html .md-footer-meta.md-typeset a {
 }
 
 .card {
-    height: 110px;
+    min-height: 110px;
     flex-basis: 0;
     flex-grow: 1;
     color: #404040;
@@ -449,7 +409,6 @@ html .md-footer-meta.md-typeset a {
     position: relative;
     display: flex;
     justify-content: left;
-    align-items: center;
     flex-direction: row;
     cursor: pointer;
     transition: all 0.6s ease;
@@ -459,6 +418,7 @@ html .md-footer-meta.md-typeset a {
 .card.img {
     flex-direction: column;
     height: 200px;
+    align-items: center;
 }
 
 .card:hover {
@@ -473,8 +433,6 @@ html .md-footer-meta.md-typeset a {
 }
 
 .card-content {
-    justify-content: center;
-    height: 88px;
     display: flex;
     align-items: left;
     text-align: left;
@@ -597,7 +555,8 @@ html .md-footer-meta.md-typeset a {
 }  */
 
 .md-typeset table:not([class]) td {
-    vertical-align: middle;
+    vertical-align: top;
+    padding: 0.6rem 0.8rem;
 }
 
 .mb-tabs__dropdown {
@@ -677,7 +636,7 @@ html .md-footer-meta.md-typeset a {
 
 .md-header__inner {
     max-width: none;
-    padding-left: 3.5rem;
+    padding-left: 2.5rem;
     padding-right: 2rem;
 }
 
@@ -1380,4 +1339,10 @@ html .md-typeset .superfences-tabs>label:hover {
 
 .md-main__inner {
     margin-top: 0;
+}
+
+@media only screen and (min-width: 60em) {
+    .md-content {
+        margin-right: 12.1rem;
+    }
 }

en/docs/assets/js/theme.js

@@ -224,44 +224,6 @@ if (tocBtn) {
     };
 }
 
-/*
- * TOC position highlight on scroll
- */
-// var observeeList = document.querySelectorAll(".md-sidebar__inner > .md-nav--secondary .md-nav__link");
-// var listElems = document.querySelectorAll(".md-sidebar__inner > .md-nav--secondary > ul li");
-// var config = { attributes: true, childList: true, subtree: true };
-
-// var callback = function(mutationsList, observer) {
-//     for(var mutation of mutationsList) {
-//         if (mutation.type == 'attributes') {
-//             mutation.target.parentNode.setAttribute(mutation.attributeName,
-//                 mutation.target.getAttribute(mutation.attributeName));
-//             scrollerPosition(mutation);
-//         }
-//     }
-// };
-
-var observer = new MutationObserver(callback);
-
-if (listElems.length > 0) {
-    listElems[0].classList.add('active');
-}
-
-for (var i = 0; i < observeeList.length; i++) {
-    var el = observeeList[i];
-
-    observer.observe(el, config);
-
-    el.onclick = function(e) {
-        listElems.forEach(function(elm) {
-            if (elm.classList) {
-                elm.classList.remove('active');
-            }
-        });
-
-        e.target.parentNode.classList.add('active');
-    }
-}
 
 function scrollerPosition(mutation) {
     var blurList = document.querySelectorAll(".md-sidebar__inner > .md-nav--secondary > ul li > .md-nav__link[data-md-state='blur']");
@@ -301,21 +263,6 @@ function setActive(parentNode, i) {
     setActive(parentNode.parentNode.parentNode.parentNode, ++i);
 }
 
-
-/*
- * Handle edit icon on scroll
- */
-var editIcon = document.getElementById('editIcon');
-
-window.addEventListener('scroll', function() {
-    var scrollPosition = window.scrollY || document.documentElement.scrollTop;
-    if (scrollPosition >= 90) {
-        editIcon.classList.add('active');
-    } else {
-        editIcon.classList.remove('active');
-    }
-});
-
 /*
  * Fixes the issue related to clicking on anchors and landing somewhere below it
  */

en/docs/consume/customizations/adding-internationalization.md

@@ -163,7 +163,7 @@ Follow the instructions below to change the direction of the UI:
     
      Add the following configuration to change the page direction to RTL (Right To Left).  
 
-     !!! note
+    !!! note
          If you have already done customizations to the default theme, make sure to merge the following with the existing changes carefully.
 
     ```js