reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Iconization of text

Browse Source
This commit is contained in:
reverend
2020-08-23 14:36:48 +02:00
parent 179472a219
commit 97164e6acc
3 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/02_Styles/iconized/_iconized.scss
+28
View File
@@ -0,0 +1,28 @@
.RV-Iconized {
&__Icon {
&--small {
width: 1em;
height: 1em;
position: relative;
top: .125em;
}
&--medium {
width: 2em;
height: 2em;
position: relative;
top: .625em;
}
&--large {
width: 3em;
height: 3em;
position: relative;
top: 1.15573em;
}
&--huge {
width: 5em;
height: 5em;
position: relative;
top: 2.175em;
}
}
}
components/02_Styles/iconized/iconized.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/02_Styles/iconized/iconized.hbs
+45
View File
@@ -0,0 +1,45 @@
<span class="RV-Iconized__Container">
<svg class="RV-Iconized__Icon RV-Iconized__Icon--small" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
</svg>
<span class="RV-Iconized__Text">This is a text</span>
</span>
<br>
<span class="RV-Iconized__Container">
<svg class="RV-Iconized__Icon RV-Iconized__Icon--medium" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
</svg>
<span class="RV-Iconized__Text">This is a text</span>
</span>
<br>
<span class="RV-Iconized__Container">
<svg class="RV-Iconized__Icon RV-Iconized__Icon--large" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
</svg>
<span class="RV-Iconized__Text">This is a text</span>
</span>
<br>
<p style="font-size: 18px;">
You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
<a href="#">
<span class="RV-Iconized__Container">
<svg class="RV-Iconized__Icon--small" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.136 482.135" style="enable-background:new 0 0 482.136 482.135;"
xml:space="preserve">
<g>
<path d="M455.482,198.184L326.829,326.832c-35.535,35.54-93.108,35.54-128.646,0l-42.881-42.886l42.881-42.876l42.884,42.876
c11.845,11.822,31.064,11.846,42.886,0l128.644-128.643c11.816-11.831,11.816-31.066,0-42.9l-42.881-42.881
c-11.822-11.814-31.064-11.814-42.887,0l-45.928,45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526
c35.535-35.521,93.136-35.521,128.644,0l42.886,42.881C491.018,105.045,491.018,162.663,455.482,198.184z M201.206,366.698
l-45.903,45.9c-11.845,11.846-31.064,11.817-42.881,0l-42.884-42.881c-11.845-11.821-11.845-31.041,0-42.886l128.646-128.648
c11.819-11.814,31.069-11.814,42.884,0l42.886,42.886l42.876-42.886l-42.876-42.881c-35.54-35.521-93.113-35.521-128.65,0
L26.655,283.946c-35.538,35.545-35.538,93.146,0,128.652l42.883,42.882c35.51,35.54,93.11,35.54,128.646,0l72.496-72.499
C246.724,384.578,222.588,379.197,201.206,366.698z"/>
</g>
</svg>
</span>
</a>
You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
</p>