mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

style(palimpsest): revise styles

Browse source
This commit is contained in:
Eric Liu 2020-01-20 16:51:34 -08:00
commit 1802d963ac
4 changed files with 38 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
palimpsest/src/components/ButtonTile.svelte
View file

@ -36,7 +36,7 @@
.icon { .icon {
position: absolute; position: absolute;
bottom: 1rem; bottom: 1rem;
fill: var(--cds-ui-05); fill: var(--cds-icon-01);
} }
.icon--left { .icon--left {

2
palimpsest/src/components/Component/Component.svelte
View file

@ -60,7 +60,7 @@
<style> <style>
main { main {
margin-top: 5rem; margin-top: 5rem;
padding-left: 12rem; padding-left: 16rem;
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }

49
palimpsest/src/components/Home.svelte
View file

@ -4,14 +4,14 @@
import ButtonTile from './ButtonTile.svelte'; import ButtonTile from './ButtonTile.svelte';
$: { $: {
document.title = `Carbon Components Svelte`; document.title = 'Carbon Components Svelte';
} }
</script> </script>
<style> <style>
main { main {
margin-top: 5rem; margin-top: 2.5rem;
padding-left: 12rem; padding-left: 16rem;
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
@ -21,6 +21,11 @@
} }
} }
.banner {
background: var(--cds-ui-01);
padding: 2.5rem 0 1.5rem;
}
.bx--grid { .bx--grid {
max-width: 66rem; max-width: 66rem;
} }
@ -41,31 +46,35 @@
} }
h3 { h3 {
margin-top: 4rem; margin-top: 2.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
</style> </style>
<main> <main>
<div class="bx--grid"> <div class="banner">
<div class="bx--row"> <div class="bx--grid">
<div class="bx--col"> <div class="bx--row">
<img src={Logo} alt="Logo" class="logo" /> <div class="bx--col">
<h1> <img src={Logo} alt="Logo" class="logo" />
<span> <h1>
<strong>Carbon</strong> <span>
</span> <strong>Carbon</strong>
<span> </span>
<strong>Components</strong> <span>
</span> <strong>Components</strong>
<span> </span>
<strong>Svelte</strong> <span>
</span> <strong>Svelte</strong>
</h1> </span>
<p>The Carbon Design System implemented in Svelte</p> </h1>
<h3>The Carbon Design System implemented in Svelte.</h3>
</div>
</div> </div>
</div> </div>
</div>
<div class="bx--grid">
<div class="bx--row"> <div class="bx--row">
<div class="bx--col"> <div class="bx--col">
<h3>Packages</h3> <h3>Packages</h3>

9
palimpsest/src/components/SideNav.svelte
View file

@ -30,7 +30,7 @@
z-index: 9999; z-index: 9999;
top: 2.5rem; top: 2.5rem;
left: 0; left: 0;
width: 12rem; width: 16rem;
height: calc(100% - 2.5rem); height: calc(100% - 2.5rem);
background-color: var(--cds-ui-01); background-color: var(--cds-ui-01);
overflow-y: scroll; overflow-y: scroll;
@ -110,7 +110,12 @@
}} /> }} />
<nav class:toggled={$sideNavToggled}> <nav class:toggled={$sideNavToggled}>
<Search small id="search-components" labelText="Components" bind:value /> <Search
small
id="search-components"
labelText="Components"
placeholder="Search components..."
bind:value />
<ul> <ul>
{#each results as { name }, i (name)} {#each results as { name }, i (name)}
<li> <li>