Deployed 375be39291 to v4.0.8 with MkDocs 1.2 and mike 1.0.1

This commit is contained in:
GitHub Action committed 2021-06-09 13:34:22 +00:00
1 parent 435554e342
commit 997efafade
252 files changed
+15277 -91166

No files matched your search

+53 -325
View File
@@ -6,20 +6,20 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Documentation for Lens IDE. The only system you’ll ever need to take control of your Kubernetes clusters. It's open source and free. Download it today!">
<meta name="description" content="Documentation for Lens Extension Development and API.">
<link rel="canonical" href="https://api-docs.k8slens.dev/extensions/capabilities/styling/">
<link rel="canonical" href="https://api-docs.k8slens.dev/v4.0.8/extensions/capabilities/styling/">
<meta name="author" content="Mirantis, Inc.">
<link rel="shortcut icon" href="../../../img/favicon.ico">
<meta name="generator" content="mkdocs-1.1.2, mkdocs-material-6.1.0+insiders-1.7.0">
<meta name="generator" content="mkdocs-1.2, mkdocs-material-6.1.0+insiders-1.7.0">
<title>Styling - Lens Documentation</title>
<title>Styling - Lens Extension Development</title>
@@ -64,7 +64,7 @@
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="">
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="" data-md-color-accent="">
<script>var palette=JSON.parse(localStorage.getItem("__palette")||"{}");if(void 0!==palette.color)for(var key in palette.color)document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
@@ -88,7 +88,7 @@
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid" aria-label="Header">
<a href="https://api-docs.k8slens.dev" title="Lens Documentation" class="md-header-nav__button md-logo" aria-label="Lens Documentation">
<a href="https://api-docs.k8slens.dev/v4.0.8" title="Lens Extension Development" class="md-header-nav__button md-logo" aria-label="Lens Extension Development">
<img src="../../../img/lens-logo-icon.svg" alt="logo">
@@ -100,7 +100,7 @@
<div class="md-header-nav__ellipsis">
<div class="md-header-nav__topic">
<span class="md-ellipsis">
Lens Documentation
Lens Extension Development
</span>
</div>
<div class="md-header-nav__topic">
@@ -118,15 +118,15 @@
<button class="md-header-nav__button md-icon" title="Switch to light mode" aria-label="Switch to light mode" data-md-option="palette" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" data-md-state="hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 00-5 5 5 5 0 005 5h10a5 5 0 005-5 5 5 0 00-5-5m0 8a3 3 0 01-3-3 3 3 0 013-3 3 3 0 013 3 3 3 0 01-3 3z"/></svg>
<button class="md-header-nav__button md-icon" title="Switch to dark mode" aria-label="Switch to dark mode" data-md-option="palette" data-md-color-scheme="slate" data-md-color-primary="" data-md-color-accent="" data-md-state="hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2m10-3a5 5 0 015 5 5 5 0 01-5 5H7a5 5 0 01-5-5 5 5 0 015-5h10M7 9a3 3 0 00-3 3 3 3 0 003 3h10a3 3 0 003-3 3 3 0 00-3-3H7z"/></svg>
</button>
<button class="md-header-nav__button md-icon" title="Switch to dark mode" aria-label="Switch to dark mode" data-md-option="palette" data-md-color-scheme="slate" data-md-color-primary="" data-md-color-accent="" data-md-state="hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2m10-3a5 5 0 015 5 5 5 0 01-5 5H7a5 5 0 01-5-5 5 5 0 015-5h10M7 9a3 3 0 00-3 3 3 3 0 003 3h10a3 3 0 003-3 3 3 0 00-3-3H7z"/></svg>
<button class="md-header-nav__button md-icon" title="Switch to light mode" aria-label="Switch to light mode" data-md-option="palette" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" data-md-state="hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 00-5 5 5 5 0 005 5h10a5 5 0 005-5 5 5 0 00-5-5m0 8a3 3 0 01-3-3 3 3 0 013-3 3 3 0 013 3 3 3 0 01-3 3z"/></svg>
</button>
@@ -196,12 +196,12 @@
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="https://api-docs.k8slens.dev" title="Lens Documentation" class="md-nav__button md-logo" aria-label="Lens Documentation">
<a href="https://api-docs.k8slens.dev/v4.0.8" title="Lens Extension Development" class="md-nav__button md-logo" aria-label="Lens Extension Development">
<img src="../../../img/lens-logo-icon.svg" alt="logo">
</a>
Lens Documentation
Lens Extension Development
</label>
<div class="md-nav__source">
@@ -236,161 +236,16 @@
<li class="md-nav__item">
<a href="../../../getting-started/" class="md-nav__link">
Getting Started
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2">
<label class="md-nav__link" for="nav-3">
Managing Clusters
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Managing Clusters" data-md-level="1">
<label class="md-nav__title" for="nav-3">
<span class="md-nav__icon md-icon"></span>
Managing Clusters
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
Adding Clusters
</a>
</li>
<li class="md-nav__item">
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
Removing Clusters
</a>
</li>
<li class="md-nav__item">
<a href="../../../clusters/settings/" class="md-nav__link">
Settings
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../helm/" class="md-nav__link">
Using Helm Charts
</a>
</li>
<li class="md-nav__item">
<a href="../../usage/" class="md-nav__link">
Using Extensions
</a>
</li>
<li class="md-nav__item">
<a href="../../../getting-started/preferences/" class="md-nav__link">
Preferences
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<label class="md-nav__link" for="nav-7">
Extension Development
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extension Development" data-md-level="1">
<label class="md-nav__title" for="nav-7">
<span class="md-nav__icon md-icon"></span>
Extension Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2">
<label class="md-nav__link" for="nav-7-2">
<label class="md-nav__link" for="nav-2">
Getting Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
<label class="md-nav__title" for="nav-7-2">
<nav class="md-nav" aria-label="Getting Started" data-md-level="1">
<label class="md-nav__title" for="nav-2">
<span class="md-nav__icon md-icon"></span>
Getting Started
</label>
@@ -449,24 +304,24 @@
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-3" type="checkbox" id="nav-7-3" checked>
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3" checked>
<label class="md-nav__link" for="nav-7-3">
<label class="md-nav__link" for="nav-3">
Extension Capabilities
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extension Capabilities" data-md-level="2">
<label class="md-nav__title" for="nav-7-3">
<nav class="md-nav" aria-label="Extension Capabilities" data-md-level="1">
<label class="md-nav__title" for="nav-3">
<span class="md-nav__icon md-icon"></span>
Extension Capabilities
</label>
@@ -596,38 +451,26 @@
</li>
<li class="md-nav__item">
<a href="../color-reference/" class="md-nav__link">
Color Reference
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-4" type="checkbox" id="nav-7-4">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4">
<label class="md-nav__link" for="nav-7-4">
<label class="md-nav__link" for="nav-4">
Extension Guides
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extension Guides" data-md-level="2">
<label class="md-nav__title" for="nav-7-4">
<nav class="md-nav" aria-label="Extension Guides" data-md-level="1">
<label class="md-nav__title" for="nav-4">
<span class="md-nav__icon md-icon"></span>
Extension Guides
</label>
@@ -701,7 +544,7 @@
<li class="md-nav__item">
<a href="../../guides/working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
@@ -710,22 +553,22 @@
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-5" type="checkbox" id="nav-7-5">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5">
<label class="md-nav__link" for="nav-7-5">
<label class="md-nav__link" for="nav-5">
Testing and Publishing
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Testing and Publishing" data-md-level="2">
<label class="md-nav__title" for="nav-7-5">
<nav class="md-nav" aria-label="Testing and Publishing" data-md-level="1">
<label class="md-nav__title" for="nav-5">
<span class="md-nav__icon md-icon"></span>
Testing and Publishing
</label>
@@ -760,10 +603,10 @@
</nav>
</li>
<li class="md-nav__item">
@@ -772,121 +615,6 @@
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Contributing
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Contributing" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<span class="md-nav__icon md-icon"></span>
Contributing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../contributing/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/development/" class="md-nav__link">
Development
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/documentation/" class="md-nav__link">
Documentation
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/maintainers/" class="md-nav__link">
Maintainers
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/promotion/" class="md-nav__link">
Promotion
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../support/" class="md-nav__link">
Support
</a>
</li>
<li class="md-nav__item">
<a href="../../../faq/" class="md-nav__link">
FAQ
</a>
</li>
</ul>
</nav>
@@ -1071,9 +799,9 @@
<p>When the light theme is active, the <code>&lt;body&gt;</code> element gets a "theme-light" class, or: <code>&lt;body class="theme-light"&gt;</code>. If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
<p>There is a way of detect active theme and its changes in JS. <a href="https://github.com/mobxjs/mobx-react#observercomponent">MobX observer function/decorator</a> can be used for this purpose.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;mobx-react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">App</span><span class="p">,</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">Theme</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">&quot;react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">&quot;mobx-react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">App</span><span class="p">,</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">Theme</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="err">@</span><span class="nx">observer</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">SupportPage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
@@ -1144,13 +872,13 @@
</a>
<a href="../color-reference/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="../../guides/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Color Reference
Overview
</div>
</div>
<div class="md-footer-nav__button md-icon">
@@ -1166,7 +894,7 @@
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2020 <a href="https://mirantis.com/">Mirantis Inc.</a> - All rights reserved.
Copyright &copy; 2021 <a href="https://mirantis.com/">Mirantis Inc.</a> - All rights reserved.
</div>
@@ -1222,4 +950,4 @@
</body>
</html>
</html>