diff options
Diffstat (limited to 'customization/theme.html')
| -rw-r--r-- | customization/theme.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/customization/theme.html b/customization/theme.html new file mode 100644 index 000000000..ddd7e928b --- /dev/null +++ b/customization/theme.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html lang="en-US"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <title>Theme customization | OpenBMC Web UI Style Guide</title> + <meta name="generator" content="VuePress 1.8.2"> + + <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI"> + + <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/23.42b49486.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js"> + <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css"> + </head> + <body> + <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link"> + Guide +</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active"> + Customization +</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external"> + Github + <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link"> + Guide +</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active"> + Customization +</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external"> + Github + <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="sidebar-link">Presentation Layer Architecture</a></li><li><a href="/webui-vue/customization/theme.html" aria-current="page" class="active sidebar-link">Theme customization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#environment-specific-builds" class="sidebar-link">Environment specific builds</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#bootstrap-sass-options" class="sidebar-link">Bootstrap Sass Options</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#bootstrap-sass-variables" class="sidebar-link">Bootstrap Sass Variables</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#openbmc-custom-sass-options" class="sidebar-link">OpenBMC Custom Sass Options</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#updating-colors" class="sidebar-link">Updating Colors</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#adding-a-logo" class="sidebar-link">Adding a logo</a></li></ul></li><li><a href="/webui-vue/customization/build.html" class="sidebar-link">Build Customization</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="theme-customization"><a href="#theme-customization" class="header-anchor">#</a> Theme customization</h1> <p>Customization of the application requires knowledge of Sass and CSS. It also +will require becoming familiar with the Bootstrap and Bootstrap-Vue component +libraries. This section outlines the global options and variables that can be +removed or updated to meet organizational brand guidelines.</p> <h2 id="environment-specific-builds"><a href="#environment-specific-builds" class="header-anchor">#</a> Environment specific builds</h2> <p>Any organization can create a build that meets their branding and other +customization needs. This includes customization of the state store, routing, +application navigation, and theming.</p> <p><a href="/customization/build">Read more in the Build Customization section</a></p> <h3 id="configuring-environment-specific-builds"><a href="#configuring-environment-specific-builds" class="header-anchor">#</a> Configuring environment specific builds</h3> <p>The complete instructions can be found in the <code>env</code> directory in a file called +env.md or by viewing the <a href="/webui-vue/customization/env.html">Configuring environment specific builds +page</a></p> <h2 id="bootstrap-sass-options"><a href="#bootstrap-sass-options" class="header-anchor">#</a> Bootstrap Sass Options</h2> <p>The Bootstrap Sass options are global styling toggles. The naming convention for +these built-in variables is <code>enabled-*</code>.</p> <h3 id="enable-rounded"><a href="#enable-rounded" class="header-anchor">#</a> $enable-rounded</h3> <p>This option enables or disables the border-radius styles on various components.</p> <ul><li>Set to <code>false</code> to remove rounded corners on all container elements and buttons</li></ul> <h3 id="enable-validation-icons"><a href="#enable-validation-icons" class="header-anchor">#</a> $enable-validation-icons</h3> <p>This option enables or disables background-image icons within textual inputs and +some custom forms for validation states.</p> <ul><li>Set to <code>false</code> due to inability to style icons using CSS</li></ul> <h3 id="more-information"><a href="#more-information" class="header-anchor">#</a> More information</h3> <ul><li><a href="https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">View all the Bootstrap Sass +Options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="bootstrap-sass-variables"><a href="#bootstrap-sass-variables" class="header-anchor">#</a> Bootstrap Sass Variables</h2> <p>These are global variables that Bootstrap defines in the +<code>/node_modules/bootstrap/scss/variables.scss</code> helper file. Adding a variable +listed in this file to the <code>/src/assets/styles/bmc/helpers/_variables.scss</code> file +will override the Bootstrap defined value.</p> <h3 id="transition-base"><a href="#transition-base" class="header-anchor">#</a> $transition-base</h3> <p>This variable sets the base CSS transition style throughout the application.</p> <ul><li>Set to <code>all $duration--moderate-02 $standard-easing--productive</code></li></ul> <h3 id="transition-fade"><a href="#transition-fade" class="header-anchor">#</a> $transition-fade</h3> <p>This variable sets the transition when showing and hiding elements.</p> <ul><li>Set to <code>opacity $duration--moderate-01 $standard-easing--productive</code></li></ul> <h3 id="transition-collapse"><a href="#transition-collapse" class="header-anchor">#</a> $transition-collapse</h3> <p>This variable sets the CSS transitions throughout the application when expanding +and collapsing elements.</p> <ul><li>Set to <code>height $duration--slow-01 $standard-easing--expressive</code></li></ul> <h3 id="more-information-2"><a href="#more-information-2" class="header-anchor">#</a> More Information</h3> <ul><li><a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">Carbon Design System Motion +Guidelines<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.smashingmagazine.com/2019/02/animation-design-system/" target="_blank" rel="noopener noreferrer">Including Animation In Your Design +System<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="openbmc-custom-sass-options"><a href="#openbmc-custom-sass-options" class="header-anchor">#</a> OpenBMC Custom Sass Options</h2> <h3 id="responsive-layout-bp"><a href="#responsive-layout-bp" class="header-anchor">#</a> $responsive-layout-bp</h3> <p>This variable determines when the primary navigation is hidden and when the +hamburger menu is displayed. The breakpoint is defined using a Bootstrap +function that only accepts a key from the Bootstrap <code>$grid-breakpoints</code> map.</p> <ul><li>xs - Navigation is always displayed</li> <li>sm - Navigation displayed when the viewport is greater than 576px</li> <li>md - Navigation displayed when the viewport is greater than 768px</li> <li>lg - Navigation displayed when the viewport is greater than 992px</li> <li>xl - Navigation displayed when the viewport is less than 1200px</li></ul> <h4 id="responsive-resources"><a href="#responsive-resources" class="header-anchor">#</a> Responsive Resources</h4> <ul><li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Bootstrap responsive +breakpoints<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Bootstrap Sass +Mixins<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Customizing the Bootstrap +Grid<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="header-height"><a href="#header-height" class="header-anchor">#</a> $header-height</h3> <p>This variable determines the height of the OpenBMC Web UI header element.</p> <ul><li>Default value: 56px</li></ul> <h3 id="navigation-width"><a href="#navigation-width" class="header-anchor">#</a> $navigation-width</h3> <p>This variable determines the width of the primary navigation menu when expanded.</p> <ul><li>Default value: 300px</li></ul> <h3 id="container-bgd"><a href="#container-bgd" class="header-anchor">#</a> $container-bgd</h3> <p>This option sets the background of page containers. Changing the value of this +variable will change the background color for the following elements:</p> <ul><li>Login page</li> <li>Primary navigation section</li> <li>Quick links section on the overview page</li></ul> <h4 id="value"><a href="#value" class="header-anchor">#</a> Value</h4> <ul><li>Default value: $gray-200</li></ul> <h3 id="primary-nav-hover"><a href="#primary-nav-hover" class="header-anchor">#</a> $primary-nav-hover</h3> <p>The semantic naming of this variable identifies its purpose. This color should +always be slightly darker than the <code>$container-bgd</code> value.</p> <ul><li>Default value: $gray-300</li></ul> <h2 id="updating-colors"><a href="#updating-colors" class="header-anchor">#</a> Updating Colors</h2> <p>Supporting a different color palette is a simple process. The default color +palette is supported using the Sass variables outlined in the color guidelines +and color maps outlined in the theme's overview. The following sections provide +directions to update the settings to meet your organization's needs.</p> <h3 id="color"><a href="#color" class="header-anchor">#</a> Color</h3> <p>The OpenBMC Web UI uses Sass variables and maps to build its layout and +components. Bootstrap variables and maps use the <code>!default</code> flag to allow for +overrides. There are three Sass maps created to establish the color palette. +These include the <code>color</code> map, <code>theme-color</code> map, and <code>gray</code> map. These maps are +used by Bootstrap to build the application's CSS stylesheets.</p> <h4 id="all-colors"><a href="#all-colors" class="header-anchor">#</a> All Colors</h4> <p>The OpenBMC Web UI custom colors are available as Sass variables and a Sass map +in <code>/src/assets/styles/bmc/helpers/_variables.scss</code>. The OpenBMC theme only +requires a subset of the colors to create the look and feel of the application. +Adding, removing, or updating the color variables and map is how the application +color palette can be customized. Using these variables outside of the helper +files is discouraged to avoid tightly coupling the OpenBMC Web UI theme to +specific colors.</p> <p>The <code>color</code> map is not as important as the <code>theme-color</code> map. A tight-coupling +of the Sass variable name to the color name makes it hard to use the <code>color</code> map +keys for customization. Using these keys in Sass stylesheets or single-file +components is discouraged.</p> <h4 id="theme-colors"><a href="#theme-colors" class="header-anchor">#</a> Theme Colors</h4> <p>The theme color variables and the <code>theme-color</code> map consist of a subset of the +color variables. This smaller color palette creates a scheme that is not +dependent on specific colors like blue or green. Several of the Bootstrap +<code>theme-color</code> map keys are required to generate the CSS styles. The OpenBMC Web +UI <code>theme-color</code> map has the same keys as the Bootstrap <code>theme-color</code> map with +custom values.</p> <p>The <code>theme-color</code> map is used heavily throughout the application. The +Bootstrap-Vue components <code>variant</code> prop also utilizes the <code>theme-color</code> map. +This map is the key to customizing the application's color palette. Take a look +at the <a href="/guide/guidelines/colors">color guidelines</a> to better understand default +theme-colors map.</p> <h4 id="gray-colors"><a href="#gray-colors" class="header-anchor">#</a> Gray Colors</h4> <p>The gray color palette contains nine shades of gray that range from light to +dark. Bootstrap sets a default gray color value for each color variable from +100-900 in increments of one hundred, for example, <code>$gray-100</code>, <code>$gray-200</code>, +<code>$gray-300</code> through <code>gray-900</code>. Bootstrap does not create a color map for any of +the colors except gray. The Bootstrap documentation indicates that adding color +maps for all the default colors is scheduled to be delivered in a future patch. +The OpenBMC Web UI color theme overrides all shades of the Bootstrap default +gray variable values.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#color" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap +colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="bootstrap-color-functions"><a href="#bootstrap-color-functions" class="header-anchor">#</a> Bootstrap Color Functions</h3> <ul><li><code>color('<color map key>)</code></li> <li><code>theme-color('<theme color map key>)</code></li> <li><code>gray('<gray color palette key'>)</code></li></ul> <h4 id="example"><a href="#example" class="header-anchor">#</a> Example</h4> <div class="language-SCSS extra-class"><pre class="language-scss"><code><span class="token selector">.some-selector </span><span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span><span class="token string">"blue"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">"light"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">gray</span><span class="token punctuation">(</span><span class="token string">"900"</span><span class="token punctuation">)</span> +<span class="token punctuation">}</span> +</code></pre></div><p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#functions" target="_blank" rel="noopener noreferrer">Learn more about using Bootstrap +functions<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="adding-a-logo"><a href="#adding-a-logo" class="header-anchor">#</a> Adding a logo</h2> <p>The updated page header can include a small logo. The guidelines for adding a +logo and the suggested logo dimensions are currently in progress. It may be +challenging to meet all organization brand guidelines due to the minimal height +of the page header. The company logo might be able to be set in the primary +navigation, but a design supporting that option will be the focus of future +design work.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev"> + ← + <a href="/webui-vue/customization/" class="prev router-link-active"> + Presentation Layer Architecture + </a></span> <span class="next"><a href="/webui-vue/customization/build.html"> + Build Customization + </a> + → + </span></p></div> </main></div><div class="global-ui"></div></div> + <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/23.42b49486.js" defer></script> + </body> +</html> |