wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix layout demo css

Browse source
This commit is contained in:
hobbes7878 2024-08-22 12:32:14 +01:00
parent b2f371682e
commit 6ee1389152
2 changed files with 58 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/Article/Article.stories.svelte
View file

@ -74,41 +74,35 @@
</Article>
</Story>
<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
:global(html) {
#article-story-basic,
#article-column-widths-demo {
width: calc(100% + 30px);
margin-left: -15px;
}
#article-column-widths-demo {
background-color: #ddd;
position: relative;
margin-bottom: 10px;
.article-boundaries {
padding: 0;
width: 100%;
height: 100%;
background-color: #bbb;
&.custom {
div.article-block {
background: rgb(211, 132, 123);
}
}
}
div.article-block {
height: 300px;
background: #81a1c1;
margin-bottom: 2px;
height: 50px;
padding-left: 3px;
color: white;
font-size: 12px;
}
}
:global(#article-story-basic, #article-column-widths-demo) {
width: calc(100% + 30px);
margin-left: -15px;
}
:global(#article-column-widths-demo) {
background-color: #ddd;
position: relative;
margin-bottom: 10px;
}
:global(#article-column-widths-demo .article-boundaries) {
padding: 0;
width: 100%;
height: 100%;
background-color: #bbb;
}
:global(
#article-column-widths-demo .article-boundaries.custom div.article-block
) {
background: rgb(211, 132, 123);
}
:global(#article-column-widths-demo div.article-block) {
height: 300px;
background: #81a1c1;
margin-bottom: 2px;
height: 50px;
padding-left: 3px;
color: white;
font-size: 12px;
}
div.demo-container {

63
src/components/Block/Block.stories.svelte
View file

@ -118,40 +118,37 @@
</Article>
</Story>
<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
:global(html) {
#block-demo-article {
background-color: #ddd;
position: relative;
width: calc(100% + 30px);
margin-left: -15px;
.article-boundaries {
padding: 0 0 18px;
width: 100%;
height: 100%;
background-color: #bbb;
}
div.article-block {
height: 100px;
background: #81a1c1;
&.block-snap-widths-demo {
margin-bottom: 2px;
height: 40px;
font-size: 11px;
&.even {
background: rgb(211, 132, 123);
}
}
}
.label,
div.article-block.block-snap-widths-demo {
padding-left: 3px;
color: white;
}
}
:global(#block-demo-article) {
background-color: #ddd;
position: relative;
width: calc(100% + 30px);
margin-left: -15px;
}
:global(#block-demo-article .article-boundaries) {
padding: 0 0 18px;
width: 100%;
height: 100%;
background-color: #bbb;
}
:global(#block-demo-article div.article-block) {
height: 100px;
background: #81a1c1;
}
:global(#block-demo-article div.article-block.block-snap-widths-demo) {
margin-bottom: 2px;
height: 40px;
font-size: 11px;
}
:global(#block-demo-article div.article-block.block-snap-widths-demo.even) {
background: rgb(211, 132, 123);
}
:global(
#block-demo-article .label,
#block-demo-article div.article-block.block-snap-widths-demo
) {
padding-left: 3px;
color: white;
}
div#block-flex-example {