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

Fixing iconized

Browse Source
This commit is contained in:
reverend 2020-08-23 19:20:21 +02:00
parent 4cab1fa9ad
commit 9373d0d35c
2 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/02_Styles/iconized/_iconized.scss
View File

@ -1,28 +1,46 @@
.RV-Iconized { .RV-Iconized {
&__Container {
position: relative;
&--medium {
top: -.5em;
}
&--large {
top: -1.03073em;
}
&--huge {
top: -2.05em;
}
}
&__Icon { &__Icon {
&--small { @include RV-Reset;
}
&__Container--small &__Icon{
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
top: .125em; top: .125em;
} }
&--medium { &__Container--medium &__Icon{
width: 2em; width: 2em;
height: 2em; height: 2em;
position: relative; position: relative;
top: .625em; top: .625em;
} }
&--large { &__Container--large &__Icon{
width: 3em; width: 3em;
height: 3em; height: 3em;
position: relative; position: relative;
top: 1.15573em; top: 1.15573em;
} }
&--huge { &__Container--huge &__Icon{
width: 5em; width: 5em;
height: 5em; height: 5em;
position: relative; position: relative;
top: 2.175em; top: 2.175em;
} }
}
} }

14
components/02_Styles/iconized/iconized.hbs
View File

@ -1,12 +1,12 @@
<span class="RV-Iconized__Container"> <span class="RV-Iconized__Container RV-Iconized__Container--small">
<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"> <svg class="RV-Iconized__Icon RV-Iconized__Icon" 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="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> <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> </svg>
<span class="RV-Iconized__Text">This is a text</span> <span class="RV-Iconized__Text">This is a text</span>
</span> </span>
<br> <br>
<span class="RV-Iconized__Container"> <span class="RV-Iconized__Container RV-Iconized__Container--medium">
<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"> <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="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> <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>
@ -14,8 +14,8 @@
<span class="RV-Iconized__Text">This is a text</span> <span class="RV-Iconized__Text">This is a text</span>
</span> </span>
<br> <br>
<span class="RV-Iconized__Container"> <span class="RV-Iconized__Container RV-Iconized__Container--large">
<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"> <svg class="RV-Iconized__Icon RV-Iconized__Icon" 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="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> <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> </svg>
@ -25,8 +25,8 @@
<p style="font-size: 18px;"> <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. 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="#"> <a href="#">
<span class="RV-Iconized__Container"> <span class="RV-Iconized__Container RV-Iconized__Container--small">
<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;" <svg class="RV-Iconized__Icon" 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"> xml:space="preserve">
<g> <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 <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