raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-08 22:56:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use svg icon instead of CSS before

Browse Source 
CSS can be sometimes a little bit inconsistent to create such an icon. Using SVG is better solution to create beautiful icon.
This commit is contained in:
Jean-Baptiste Bellet
2021-02-16 16:57:13 +01:00
parent c7577e29d6
commit 36573701dc
2 changed files with 3 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/images/question-mark-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="24.87" cy="24.87" r="24" fill="#f4f9fd" stroke="#cfe1f3" stroke-miterlimit="10"/><path d="M36.31 18.13c0 7.51-8.11 7.63-8.11 10.4v.71c0 .74-.6 1.34-1.34 1.34h-5.11c-.74 0-1.34-.6-1.34-1.34v-.97c0-4 3.04-5.61 5.33-6.89 1.97-1.1 3.17-1.85 3.17-3.31 0-1.93-2.46-3.21-4.46-3.21-2.6 0-3.8 1.23-5.48 3.36-.45.57-1.28.68-1.87.24l-3.12-2.36a1.35 1.35 0 01-.3-1.83c2.65-3.89 6.02-6.07 11.27-6.07 5.49-.02 11.36 4.27 11.36 9.93zM29 36.86c0 2.59-2.11 4.71-4.71 4.71s-4.71-2.11-4.71-4.71c0-2.59 2.11-4.71 4.71-4.71S29 34.27 29 36.86z" fill="#81b2e1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 618 B

18
app/assets/stylesheets/darkswarm/question-mark-icon.scss
View File

@@ -1,6 +1,7 @@
.question-mark-icon {
position: relative;
top: 1px;
top: 6px;
background-image: image-url("question-mark-icon.svg");
// Reset button element css attributes
padding: 0;
@@ -13,21 +14,6 @@
&:focus {
background-color: transparent;
}
&::before {
content: "?";
padding-left: 1px;
display: inline-block;
color: $tiny-blue;
border: 1px solid $grey-250;
border-radius: 50%;
text-align: center;
background-color: $grey-075;
width: 20px;
height: 20px;
font-weight: bold;
font-size: 1rem;
}
}
.joyride-tip-guide.question-mark-tooltip {