mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
Updates
This commit is contained in:
Eric Liu
parent
e90fd049a0
commit
d2e47ea570
205 changed files with 3925 additions and 428 deletions
14
framed/Grid/AspectRatioColumns/index.html
Normal file
14
framed/Grid/AspectRatioColumns/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid"><div class="bx--row"><div class="bx--col bx--aspect-ratio bx--aspect-ratio--2x1" style="outline: 1px solid var(--cds-interactive-04);">2x1</div> <div class="bx--col bx--aspect-ratio bx--aspect-ratio--2x1" style="outline: 1px solid var(--cds-interactive-04);">2x1</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Grid/CondensedGrid/index.html
Normal file
14
framed/Grid/CondensedGrid/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid bx--grid--condensed"><div class="bx--row"><div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Grid/FullWidthGrid/index.html
Normal file
14
framed/Grid/FullWidthGrid/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid bx--grid--full-width"><div class="bx--row"><div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Grid/Grid/index.html
Normal file
14
framed/Grid/Grid/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid"><div class="bx--row"><div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Grid/NarrowGrid/index.html
Normal file
14
framed/Grid/NarrowGrid/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid bx--grid--narrow"><div class="bx--row"><div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div> <div class="bx--col" style="outline: 1px solid var(--cds-interactive-04);">Column</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Grid/OffsetColumns/index.html
Normal file
14
framed/Grid/OffsetColumns/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid"><div class="bx--row"><div class="bx--col-sm-1 bx--offset-sm-3" style="outline: 1px solid var(--cds-interactive-04);">Offset 3</div> <div class="bx--col-sm-2 bx--offset-sm-2" style="outline: 1px solid var(--cds-interactive-04);">Offset 2</div> <div class="bx--col-sm-3 bx--offset-sm-1" style="outline: 1px solid var(--cds-interactive-04);">Offset 1</div> <div class="bx--col-sm-4 bx--offset-sm-0" style="outline: 1px solid var(--cds-interactive-04);">Offset 0</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Grid/ResponsiveGrid/index.html
Normal file
14
framed/Grid/ResponsiveGrid/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--grid"><div class="bx--row"><div class="bx--col-sm-1 bx--col-md-4 bx--col-lg-8" style="outline: 1px solid var(--cds-interactive-04);">sm: 1, md: 4, lg: 8</div> <div class="bx--col-sm-1 bx--col-md-2 bx--col-lg-2" style="outline: 1px solid var(--cds-interactive-04);">sm: 1, md: 2, lg: 2</div> <div class="bx--col-sm-1 bx--col-md-1 bx--col-lg-1" style="outline: 1px solid var(--cds-interactive-04);">sm: 1, md: 1, lg: 1</div> <div class="bx--col-sm-1 bx--col-md-1 bx--col-lg-1" style="outline: 1px solid var(--cds-interactive-04);">sm: 1, md: 1, lg: 1</div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Loading/Loading/index.html
Normal file
14
framed/Loading/Loading/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div class="bx--loading-overlay"><div aria-atomic="true" aria-labelledby="ccs-0.2et2jc9suhg" aria-live="assertive" class="bx--loading"><label id="ccs-0.2et2jc9suhg" class="bx--visually-hidden">Active loading indicator</label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg"><title>Active loading indicator</title><circle cx="0" cy="0" r="37.5" class="bx--loading__stroke"></circle></svg></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/ComposedModal/index.html
Normal file
14
framed/Modal/ComposedModal/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><div role="presentation" tabindex="-1" class="bx--modal is-visible"><div class="undefined bx--modal-container"><div class="bx--modal-header"> <p class="bx--modal-header__heading bx--type-beta">Confirm changes</p> <button type="button" title="Close" aria-label="Close" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon " preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><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></svg></button></div> <div class="bx--modal-content bx--modal-content--with-form"><div class="bx--form-item bx--checkbox-wrapper"><input type="checkbox" id="ccs-0.cae7z534amf" name="" class="bx--checkbox"> <label for="ccs-0.cae7z534amf" class="bx--checkbox-label"><span class="bx--checkbox-label-text">I have reviewed the changes</span></label></div></div> <div class="bx--modal-footer"> <button role="button" type="button" tabindex="0" disabled="" class="bx--btn bx--btn--primary bx--btn--disabled"> Proceed </button> </div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/DangerModal/index.html
Normal file
14
framed/Modal/DangerModal/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--danger"> Delete all </button> <div role="presentation" tabindex="-1" id="ccs-0.tqijvli2ov" class="bx--modal bx--modal-tall bx--modal--danger"><div role="dialog" aria-modal="true" aria-label="Delete all instances" class="bx--modal-container"><div class="bx--modal-header"> <h3 id="bx--modal-header__heading--modal-ccs-0.tqijvli2ov" class="bx--modal-header__heading">Delete all instances</h3> <button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button></div> <div id="bx--modal-body--ccs-0.tqijvli2ov" aria-labelledby="bx--modal-header__heading--modal-ccs-0.tqijvli2ov" class="bx--modal-content"><p>This is a permanent action and cannot be undone.</p></div> <div class="bx--modal-footer"><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--secondary"> Cancel </button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--danger"> Delete </button></div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/Modal/index.html
Normal file
14
framed/Modal/Modal/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--primary"> Create database </button> <div role="presentation" tabindex="-1" id="ccs-0.tx2u6xze0l" class="bx--modal bx--modal-tall"><div role="dialog" aria-modal="true" aria-label="Create database" class="bx--modal-container"><div class="bx--modal-header"> <h3 id="bx--modal-header__heading--modal-ccs-0.tx2u6xze0l" class="bx--modal-header__heading">Create database</h3> <button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button></div> <div id="bx--modal-body--ccs-0.tx2u6xze0l" aria-labelledby="bx--modal-header__heading--modal-ccs-0.tx2u6xze0l" class="bx--modal-content"><p>Create a new Cloudant database in the US South region.</p></div> <div class="bx--modal-footer"><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--secondary"> Cancel </button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--primary"> Confirm </button></div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/ModalExtraSmall/index.html
Normal file
14
framed/Modal/ModalExtraSmall/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body class="bx--body--with-modal-open" style="">
|
||||
<div id="app" style=""><div role="presentation" tabindex="-1" id="ccs-0.hi6r768opt7" class="bx--modal bx--modal-tall is-visible"><div role="dialog" aria-modal="true" aria-label="Create database" class="bx--modal-container--xs bx--modal-container"><div class="bx--modal-header"> <h3 id="bx--modal-header__heading--modal-ccs-0.hi6r768opt7" class="bx--modal-header__heading">Create database</h3> <button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button></div> <div id="bx--modal-body--ccs-0.hi6r768opt7" aria-labelledby="bx--modal-header__heading--modal-ccs-0.hi6r768opt7" class="bx--modal-content"><p>Create a new Cloudant database in the US South region.</p></div> <div class="bx--modal-footer"><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--secondary"> Cancel </button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--primary"> Confirm </button></div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/ModalLarge/index.html
Normal file
14
framed/Modal/ModalLarge/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body class="bx--body--with-modal-open" style="">
|
||||
<div id="app" style=""><div role="presentation" tabindex="-1" id="ccs-0.tqa3hlka8l" class="bx--modal bx--modal-tall is-visible"><div role="dialog" aria-modal="true" aria-label="Create database" class="bx--modal-container--lg bx--modal-container"><div class="bx--modal-header"> <h3 id="bx--modal-header__heading--modal-ccs-0.tqa3hlka8l" class="bx--modal-header__heading">Create database</h3> <button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button></div> <div id="bx--modal-body--ccs-0.tqa3hlka8l" aria-labelledby="bx--modal-header__heading--modal-ccs-0.tqa3hlka8l" class="bx--modal-content"><p>Create a new Cloudant database in the US South region.</p></div> <div class="bx--modal-footer"><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--secondary"> Cancel </button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--primary"> Confirm </button></div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/ModalPreventOutsideClick/index.html
Normal file
14
framed/Modal/ModalPreventOutsideClick/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body class="bx--body--with-modal-open" style="">
|
||||
<div id="app" style=""><div role="presentation" tabindex="-1" id="ccs-0.rbmatbb2sgi" class="bx--modal bx--modal-tall is-visible"><div role="dialog" aria-modal="true" aria-label="Create database" class="bx--modal-container"><div class="bx--modal-header"> <h3 id="bx--modal-header__heading--modal-ccs-0.rbmatbb2sgi" class="bx--modal-header__heading">Create database</h3> <button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button></div> <div id="bx--modal-body--ccs-0.rbmatbb2sgi" aria-labelledby="bx--modal-header__heading--modal-ccs-0.rbmatbb2sgi" class="bx--modal-content"><p>Create a new Cloudant database in the US South region.</p></div> <div class="bx--modal-footer"><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--secondary"> Cancel </button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--primary"> Confirm </button></div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/Modal/ModalSmall/index.html
Normal file
14
framed/Modal/ModalSmall/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body class="bx--body--with-modal-open" style="">
|
||||
<div id="app" style=""><div role="presentation" tabindex="-1" id="ccs-0.zfrhp32sp" class="bx--modal bx--modal-tall is-visible"><div role="dialog" aria-modal="true" aria-label="Create database" class="bx--modal-container--sm bx--modal-container"><div class="bx--modal-header"> <h3 id="bx--modal-header__heading--modal-ccs-0.zfrhp32sp" class="bx--modal-header__heading">Create database</h3> <button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button></div> <div id="bx--modal-body--ccs-0.zfrhp32sp" aria-labelledby="bx--modal-header__heading--modal-ccs-0.zfrhp32sp" class="bx--modal-content"><p>Create a new Cloudant database in the US South region.</p></div> <div class="bx--modal-footer"><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--secondary"> Cancel </button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--primary"> Confirm </button></div></div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
15
framed/Modal/PassiveModal/index.html
Normal file
15
framed/Modal/PassiveModal/index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></style></head>
|
||||
<body style="">
|
||||
<div id="app" style=""><button role="button" type="button" tabindex="0" class="bx--btn bx--btn--tertiary"> Learn more </button> <div role="presentation" tabindex="-1" id="ccs-0.gfmjnbs1iy8" class="bx--modal"><div role="dialog" aria-modal="true" aria-label="IBM Cloudant" class="bx--modal-container"><div class="bx--modal-header"><button type="button" aria-label="Close the modal" title="Close the modal" class="bx--modal-close"><svg data-carbon-icon="Close20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--modal-close__icon" preserveAspectRatio="xMidYMid meet" aria-label="Close the modal" role="img" focusable="false"><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></svg></button> <h3 id="bx--modal-header__heading--modal-ccs-0.gfmjnbs1iy8" class="bx--modal-header__heading">IBM Cloudant</h3> </div> <div id="bx--modal-body--ccs-0.gfmjnbs1iy8" aria-labelledby="bx--modal-header__heading--modal-ccs-0.gfmjnbs1iy8" class="bx--modal-content"><p>IBM Cloudant is a distributed, secure database with global availability and
|
||||
zero vendor lock-in used to build web and mobile apps at scale.</p></div> </div></div> </div>
|
||||
|
||||
<script type="module" src="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/UIShell/HeaderNav/index.html
Normal file
14
framed/UIShell/HeaderNav/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></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 </span> Carbon Svelte</a> <nav class="bx--header__nav"><ul role="menubar" class="bx--header__menu-bar"><li><a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item"><span class="bx--text-truncate--end">Link 1</span></a></li> <li><a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item"><span class="bx--text-truncate--end">Link 2</span></a></li> <li><a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item"><span class="bx--text-truncate--end">Link 3</span></a></li> <li title="Expand/Collapse" class="bx--header__submenu"><a role="menuitem" tabindex="0" aria-haspopup="menu" aria-expanded="false" aria-label="Menu" href="/" class="bx--header__menu-item bx--header__menu-title">Menu <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--header__menu-arrow" preserveAspectRatio="xMidYMid meet" aria-label="Expand/Collapse" role="img" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg></a> <ul role="menu" aria-label="Menu" class="bx--header__menu"><li><a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item"><span class="bx--text-truncate--end">Link 1</span></a></li> <li><a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item"><span class="bx--text-truncate--end">Link 2</span></a></li> <li><a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item"><span class="bx--text-truncate--end">Link 3</span></a></li></ul></li></ul></nav></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="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/UIShell/HeaderSwitcher/index.html
Normal file
14
framed/UIShell/HeaderSwitcher/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../assets/style.cdc12fd8.css">
|
||||
<style></style><style></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 </span> Carbon Svelte</a> <div class="bx--header__global"> <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="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
14
framed/UIShell/HeaderUtilities/index.html
Normal file
14
framed/UIShell/HeaderUtilities/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="../../../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carbon Components Svelte</title>
|
||||
<link rel="stylesheet" href="../../../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 </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="../../../assets/index.e7d8faec.js"></script>
|
||||
|
||||
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue