mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21: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 {
position: absolute;
bottom: 1rem;
fill: var(--cds-ui-05);
fill: var(--cds-icon-01);
}
.icon--left {

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

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

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

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

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

@ -30,7 +30,7 @@
z-index: 9999;
top: 2.5rem;
left: 0;
width: 12rem;
width: 16rem;
height: calc(100% - 2.5rem);
background-color: var(--cds-ui-01);
overflow-y: scroll;
@ -110,7 +110,12 @@
}} />
<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>
{#each results as { name }, i (name)}
<li>