mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-17 03:01:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updates

Browse source
This commit is contained in:
Eric Liu 2020-10-03 09:06:20 -07:00
commit f3c9acc406
206 changed files with 3180 additions and 479 deletions
Download patch file Download diff file Expand all files Collapse all files

8
framed/Modal/ComposedModal/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.zb7hza5tg5k" name="" class="bx--checkbox"> <label for="ccs-0.zb7hza5tg5k" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

8
framed/Modal/DangerModal/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.jlj8buzpr09" 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.jlj8buzpr09" 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.jlj8buzpr09" aria-labelledby="bx--modal-header__heading--modal-ccs-0.jlj8buzpr09" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

8
framed/Modal/Modal/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.ikbbz13tknp" 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.ikbbz13tknp" 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.ikbbz13tknp" aria-labelledby="bx--modal-header__heading--modal-ccs-0.ikbbz13tknp" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

8
framed/Modal/ModalExtraSmall/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.7f0zg5qwex3" 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.7f0zg5qwex3" 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.7f0zg5qwex3" aria-labelledby="bx--modal-header__heading--modal-ccs-0.7f0zg5qwex3" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

8
framed/Modal/ModalLarge/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.behsy1emr7i" 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.behsy1emr7i" 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.behsy1emr7i" aria-labelledby="bx--modal-header__heading--modal-ccs-0.behsy1emr7i" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

8
framed/Modal/ModalPreventOutsideClick/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.b38nijqzl6" 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.b38nijqzl6" 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.b38nijqzl6" aria-labelledby="bx--modal-header__heading--modal-ccs-0.b38nijqzl6" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

8
framed/Modal/ModalSmall/index.html
View file

@ -4,11 +4,11 @@
<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">
</head>
<body>
<div id="app"></div>
<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.nyuwncfkhj9" 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.nyuwncfkhj9" 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.nyuwncfkhj9" aria-labelledby="bx--modal-header__heading--modal-ccs-0.nyuwncfkhj9" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>

9
framed/Modal/PassiveModal/index.html
View file

@ -4,11 +4,12 @@
<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">
</head>
<body>
<div id="app"></div>
<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.uzx6v4cylm" 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.uzx6v4cylm" class="bx--modal-header__heading">IBM Cloudant</h3> </div> <div id="bx--modal-body--ccs-0.uzx6v4cylm" aria-labelledby="bx--modal-header__heading--modal-ccs-0.uzx6v4cylm" 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="/carbon-components-svelte/assets/index.3ce6747c.js"></script>
<script type="module" src="/carbon-components-svelte/assets/index.c724c7a8.js"></script>
</body></html>