mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity
carbon-components-svelte/framed/UIShell/HeaderUtilities/index.html
Eric Liu 23df7bfbae Updates
2020-10-02 20:26:53 -07:00

14 lines
No EOL
6.2 KiB
HTML
Raw Blame History

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<link rel="icon" href="/carbon-components-svelte/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carbon Components Svelte</title>
<link rel="stylesheet" href="/carbon-components-svelte/assets/style.cdc12fd8.css">
<style></style><style>.search-wrapper.svelte-16k0yud{position:relative;display:flex;max-width:28rem;width:100%;margin-left:.5rem;height:3rem;background-color:#393939;color:#fff;transition:max-width .11s cubic-bezier(.2,0,.38,.9),background .11s cubic-bezier(.2,0,.38,.9)}.search-wrapper-hidden.svelte-16k0yud{max-width:3rem;background-color:#161616}.search-focus.svelte-16k0yud{outline:#fff solid 2px;outline-offset:-2px}.search-wrapper-2.svelte-16k0yud{display:flex;flex-grow:1;border-bottom:1px solid #393939}.btn-search.svelte-16k0yud{width:3rem;height:100%;padding:0;flex-shrink:0;opacity:1;transition:background-color .11s cubic-bezier(.2,0,.38,.9),opacity .11s cubic-bezier(.2,0,.38,.9)}.btn-search-disabled.svelte-16k0yud{border:none;pointer-events:none}.input-search.svelte-16k0yud{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;color:#fff;caret-color:#fff;background-color:initial;border:none;outline:0;width:100%;height:3rem;padding:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9)}.input-hidden.svelte-16k0yud{opacity:0;pointer-events:none}.btn-clear.svelte-16k0yud{width:3rem;height:100%;padding:0;flex-shrink:0;opacity:1;display:block;transition:background-color .11s cubic-bezier(.2,0,.38,.9),opacity .11s cubic-bezier(.2,0,.38,.9)}.btn-clear.svelte-16k0yud:hover{background-color:#4c4c4c}.btn-clear-hidden.svelte-16k0yud{opacity:0;display:none}</style></head>
<body style="">
<div id="app" style=""><header role="banner" aria-label="IBM " class="bx--header"><div slot="skip-to-content"><a href="#main-content" tabindex="0" class="bx--skip-to-content">Skip to main content</a></div> <a class="bx--header__name"><span class="bx--header__name--prefix">IBM&nbsp;</span> Carbon Svelte</a> <div class="bx--header__global"><div role="search" class="search-wrapper svelte-16k0yud search-wrapper-hidden"><div id="right-panel-action-search" class="search-wrapper-2 svelte-16k0yud" role="combobox" aria-expanded="false"><button tabindex="0" aria-label="Search" type="button" class="svelte-16k0yud bx--header__action btn-search"><svg data-carbon-icon="Search20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M30,28.59,22.45,21A11,11,0,1,0,21,22.45L28.59,30ZM5,14a9,9,0,1,1,9,9A9,9,0,0,1,5,14Z"></path><title>Search</title></svg></button> <input id="input-search-field" type="text" autocomplete="off" tabindex="-1" class="input-search svelte-16k0yud input-hidden" placeholder="Search"> <button id="right-panel-close-search" tabindex="-1" type="button" aria-label="Clear search" class="svelte-16k0yud bx--header__action btn-clear btn-clear-hidden"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path><title>Close</title></svg></button></div></div> <button type="button" aria-label="Settings" class="bx--header__action"><svg data-carbon-icon="SettingsAdjust20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M30 8h-4.1c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2v2h14.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30V8zM21 12c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3S22.7 12 21 12zM2 24h4.1c.5 2.3 2.5 4 4.9 4s4.4-1.7 4.9-4H30v-2H15.9c-.5-2.3-2.5-4-4.9-4s-4.4 1.7-4.9 4H2V24zM11 20c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3S9.3 20 11 20z"></path></svg></button> <div><button type="button" class="bx--header__action svelte-19vx6se"><svg data-carbon-icon="AppSwitcher20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path></svg> </button> </div></div></header> <nav class="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--expanded"><ul class="bx--side-nav__items"><li class="bx--side-nav__item"><a class="bx--side-nav__link"> <span class="bx--side-nav__link-text">Link 1</span></a></li> <li class="bx--side-nav__item"><a class="bx--side-nav__link"> <span class="bx--side-nav__link-text">Link 2</span></a></li> <li class="bx--side-nav__item"><a class="bx--side-nav__link"> <span class="bx--side-nav__link-text">Link 3</span></a></li> <li class="bx--side-nav__item"><button type="button" aria-expanded="false" class="bx--side-nav__submenu"> <span class="bx--side-nav__submenu-title">Menu</span> <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"><svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path><title>Open Menu</title></svg></div></button> <ul role="menu" class="bx--side-nav__menu"><li class="bx--side-nav__menu-item"><a href="/" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link 1</span></a></li> <li class="bx--side-nav__menu-item"><a href="/" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link 2</span></a></li> <li class="bx--side-nav__menu-item"><a href="/" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link 3</span></a></li></ul></li></ul></nav> <main id="main-content" class="bx--content"><div class="bx--grid"><div class="bx--row"><div class="bx--col"><h1>Welcome</h1></div></div></div></main> </div>
<script type="module" src="/carbon-components-svelte/assets/index.c2c9d961.js"></script>
</body></html>
Reference in a new issue View git blame Copy permalink