mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed 656797ab to latest with MkDocs 1.1.2 and mike 0.5.5
This commit is contained in:
GitHub Action committed
1 parent
4b7d627edb
commit
c8a79ab626
225 files changed
+7575
-10242
No files matched your search
@@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Color reference - Lens Documentation</title>
|
||||
<title>Color Reference - Lens Documentation</title>
|
||||
|
||||
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
Color reference
|
||||
Color Reference
|
||||
|
||||
</span>
|
||||
</div>
|
||||
@@ -271,7 +271,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
|
||||
Adding clusters
|
||||
Adding Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -283,7 +283,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
|
||||
Removing cluster
|
||||
Removing Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -386,13 +386,13 @@
|
||||
<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">
|
||||
Get Started
|
||||
Getting Started
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
|
||||
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
|
||||
<label class="md-nav__title" for="nav-7-2">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Get Started
|
||||
Getting Started
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
@@ -402,6 +402,18 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../get-started/overview/" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../get-started/your-first-extension/" class="md-nav__link">
|
||||
Your First Extension
|
||||
@@ -466,18 +478,6 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../common-capabilities/" class="md-nav__link">
|
||||
Common Capabilities
|
||||
@@ -512,12 +512,12 @@
|
||||
|
||||
|
||||
<label class="md-nav__link md-nav__link--active" for="__toc">
|
||||
Color reference
|
||||
Color Reference
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
|
||||
<a href="./" class="md-nav__link md-nav__link--active">
|
||||
Color reference
|
||||
Color Reference
|
||||
</a>
|
||||
|
||||
|
||||
@@ -731,18 +731,6 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
|
||||
Bundling Extensions
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
@@ -271,7 +271,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
|
||||
Adding clusters
|
||||
Adding Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -283,7 +283,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
|
||||
Removing cluster
|
||||
Removing Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -386,13 +386,13 @@
|
||||
<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">
|
||||
Get Started
|
||||
Getting Started
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
|
||||
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
|
||||
<label class="md-nav__title" for="nav-7-2">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Get Started
|
||||
Getting Started
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
@@ -402,6 +402,18 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../get-started/overview/" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../get-started/your-first-extension/" class="md-nav__link">
|
||||
Your First Extension
|
||||
@@ -465,18 +477,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -645,7 +645,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../color-reference/" class="md-nav__link">
|
||||
Color reference
|
||||
Color Reference
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -750,18 +750,6 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
|
||||
Bundling Extensions
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -1268,7 +1256,7 @@
|
||||
<div class="md-footer-nav">
|
||||
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
|
||||
|
||||
<a href="../" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||
<a href="../../get-started/wrapping-up/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||
<div class="md-footer-nav__button md-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
|
||||
</div>
|
||||
@@ -1277,7 +1265,7 @@
|
||||
<span class="md-footer-nav__direction">
|
||||
Previous
|
||||
</span>
|
||||
Overview
|
||||
Wrapping Up
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Overview - Lens Documentation</title>
|
||||
<title>Index - Lens Documentation</title>
|
||||
|
||||
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
Overview
|
||||
Index
|
||||
|
||||
</span>
|
||||
</div>
|
||||
@@ -266,7 +266,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../clusters/adding-clusters/" class="md-nav__link">
|
||||
Adding clusters
|
||||
Adding Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -278,7 +278,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../clusters/removing-clusters/" class="md-nav__link">
|
||||
Removing cluster
|
||||
Removing Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -340,12 +340,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
||||
<li class="md-nav__item md-nav__item--nested">
|
||||
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
|
||||
|
||||
<label class="md-nav__link" for="nav-7">
|
||||
Extension Development
|
||||
@@ -381,13 +379,13 @@
|
||||
<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">
|
||||
Get Started
|
||||
Getting Started
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
|
||||
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
|
||||
<label class="md-nav__title" for="nav-7-2">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Get Started
|
||||
Getting Started
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
@@ -397,6 +395,18 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../get-started/overview/" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../get-started/your-first-extension/" class="md-nav__link">
|
||||
Your First Extension
|
||||
@@ -437,12 +447,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
||||
<li class="md-nav__item 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-7-3" type="checkbox" id="nav-7-3">
|
||||
|
||||
<label class="md-nav__link" for="nav-7-3">
|
||||
Extension Capabilities
|
||||
@@ -460,25 +468,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item md-nav__item--active">
|
||||
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||||
|
||||
|
||||
<a href="./" class="md-nav__link md-nav__link--active">
|
||||
Overview
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="common-capabilities/" class="md-nav__link">
|
||||
@@ -506,7 +495,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="color-reference/" class="md-nav__link">
|
||||
Color reference
|
||||
Color Reference
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -611,18 +600,6 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../testing-and-publishing/bundling/" class="md-nav__link">
|
||||
Bundling Extensions
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -756,7 +733,7 @@
|
||||
|
||||
|
||||
|
||||
<h1>Overview</h1>
|
||||
<h1>Index</h1>
|
||||
|
||||
|
||||
|
||||
@@ -774,41 +751,6 @@
|
||||
|
||||
<footer class="md-footer">
|
||||
|
||||
<div class="md-footer-nav">
|
||||
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
|
||||
|
||||
<a href="../get-started/wrapping-up/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||
<div class="md-footer-nav__button md-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
|
||||
</div>
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
Previous
|
||||
</span>
|
||||
Wrapping Up
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="common-capabilities/" 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>
|
||||
Common Capabilities
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer-nav__button md-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="md-footer-meta md-typeset">
|
||||
<div class="md-footer-meta__inner md-grid">
|
||||
<div class="md-footer-copyright">
|
||||
|
||||
@@ -271,7 +271,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
|
||||
Adding clusters
|
||||
Adding Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -283,7 +283,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
|
||||
Removing cluster
|
||||
Removing Clusters
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -386,13 +386,13 @@
|
||||
<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">
|
||||
Get Started
|
||||
Getting Started
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
|
||||
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
|
||||
<label class="md-nav__title" for="nav-7-2">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Get Started
|
||||
Getting Started
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
@@ -402,6 +402,18 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../get-started/overview/" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../get-started/your-first-extension/" class="md-nav__link">
|
||||
Your First Extension
|
||||
@@ -466,18 +478,6 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../" class="md-nav__link">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../common-capabilities/" class="md-nav__link">
|
||||
Common Capabilities
|
||||
@@ -558,7 +558,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#theme-switching" class="md-nav__link">
|
||||
Theme switching
|
||||
Theme Switching
|
||||
</a>
|
||||
|
||||
</li>
|
||||
@@ -570,7 +570,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#injected-styles" class="md-nav__link">
|
||||
Injected styles
|
||||
Injected Styles
|
||||
</a>
|
||||
|
||||
</li>
|
||||
@@ -596,7 +596,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../color-reference/" class="md-nav__link">
|
||||
Color reference
|
||||
Color Reference
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -701,18 +701,6 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
|
||||
Bundling Extensions
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -898,7 +886,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#theme-switching" class="md-nav__link">
|
||||
Theme switching
|
||||
Theme Switching
|
||||
</a>
|
||||
|
||||
</li>
|
||||
@@ -910,7 +898,7 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#injected-styles" class="md-nav__link">
|
||||
Injected styles
|
||||
Injected Styles
|
||||
</a>
|
||||
|
||||
</li>
|
||||
@@ -936,7 +924,7 @@
|
||||
|
||||
|
||||
|
||||
<h1 id="styling-an-extension">Styling an extension<a class="headerlink" href="#styling-an-extension" title="Permanent link">#</a></h1>
|
||||
<h1 id="styling-an-extension">Styling an Extension<a class="headerlink" href="#styling-an-extension" title="Permanent link">#</a></h1>
|
||||
<p>Lens provides a set of global styles and UI components that can be used by any extension to preserve the look and feel of the application.</p>
|
||||
<h2 id="layout">Layout<a class="headerlink" href="#layout" title="Permanent link">#</a></h2>
|
||||
<p>For layout tasks Lens is using <a href="https://www.npmjs.com/package/flex.box">flex.box</a> library which provides helpful class names to specify some of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> properties. For example, <code>div</code> with class names:</p>
|
||||
@@ -1006,7 +994,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>A complete list of all themable colors can be found in the <a href="../color-reference">color reference</a>.</p>
|
||||
<h3 id="theme-switching">Theme switching<a class="headerlink" href="#theme-switching" title="Permanent link">#</a></h3>
|
||||
<h3 id="theme-switching">Theme Switching<a class="headerlink" href="#theme-switching" title="Permanent link">#</a></h3>
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, <code><body class="theme-light"></code>. If the class isn't there, assume the theme is dark. The active theme can be changed in the <code>Preferences</code> page:
|
||||
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
|
||||
<p>Currently, there is no prescribed way of detecting changes to the theme in JavaScript. <a href="https://github.com/lensapp/lens/issues/1336">This issue</a> hopes to improve on this. In the meantime, you can use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">MutationObserver</a> to observe the <code><body></code> element's <code>class</code> attribute to see if the "theme-light" class gets added to it:</p>
|
||||
@@ -1035,7 +1023,7 @@
|
||||
<span class="p">},</span> <span class="p">[]);</span> <span class="c1">// run once on mount</span>
|
||||
<span class="p">...</span>
|
||||
</code></pre></div>
|
||||
<h2 id="injected-styles">Injected styles<a class="headerlink" href="#injected-styles" title="Permanent link">#</a></h2>
|
||||
<h2 id="injected-styles">Injected Styles<a class="headerlink" href="#injected-styles" title="Permanent link">#</a></h2>
|
||||
<p>Every extension is affected by list of default global styles defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>. These are basic browser resets and element styles like setting the <code>box-sizing</code> property for every element, default text and background colors, default font sizes, basic heading formatting, etc.</p>
|
||||
<p>Extension may overwrite these if needed. They have low CSS specificity, so overriding them should be fairly easy.</p>
|
||||
<h2 id="css-in-js">CSS-in-JS<a class="headerlink" href="#css-in-js" title="Permanent link">#</a></h2>
|
||||
@@ -1083,7 +1071,7 @@
|
||||
<span class="md-footer-nav__direction">
|
||||
Next
|
||||
</span>
|
||||
Color reference
|
||||
Color Reference
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer-nav__button md-icon">
|
||||
|
||||
Reference in new issue
Block a user