LukeParke/sveltesociety.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltesociety.dev.git synced 2025-12-09 04:21:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: controls are misaligned and missing arrow icon

Browse Source
This commit is contained in:
Ambar Mutha
2021-08-03 00:31:11 +05:30
parent d69b6c841c
commit cad7605424
4 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/ComponentIndex/ArrowButton.svelte
View File

@@ -23,8 +23,8 @@
.arrow {
margin-left: 25px;
height: 16px;
-webkit-mask: url(/right-arrow.svg) no-repeat center;
mask: url(/right-arrow.svg) no-repeat center;
-webkit-mask: url(/images/right-arrow.svg) no-repeat center;
mask: url(/images/right-arrow.svg) no-repeat center;
background-color: #7e7e93;
}
div:hover .arrow {

6
src/routes/boilerplates/index.svelte
View File

@@ -47,6 +47,10 @@
@apply text-5xl;
}
hr {
margin-block: 4rem;
}
.controls {
display: flex;
justify-content: space-between;
@@ -57,7 +61,7 @@
.inputs {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-columns: repeat(4, auto);
grid-gap: 0.5rem;
margin-right: 2rem;
}

6
src/routes/components/index.svelte
View File

@@ -47,6 +47,10 @@
@apply text-5xl;
}
hr {
margin-block: 4rem;
}
.controls {
display: flex;
justify-content: space-between;
@@ -57,7 +61,7 @@
.inputs {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-columns: repeat(4, auto);
grid-gap: 0.5rem;
margin-right: 2rem;
}

3
static/images/right-arrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 -4.15258e-07L7.49717 2.00283L13.5779 8.08357L-4.77172e-07 8.08357L-3.53344e-07 10.9164L13.5779 10.9164L7.49717 16.9972L9.5 19L19 9.5L9.5 -4.15258e-07Z" fill="#7E7E93"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B