Converting Stylus to BEM-Generator and adding Boxshadows

This commit is contained in:
reverend 2021-01-17 22:33:38 +01:00
parent d9127d503a
commit 78902c530f
6 changed files with 198 additions and 121 deletions

View File

@ -1,3 +1,4 @@
@import 'spacing/_spacing' @import 'spacing/_spacing'
@import 'boxShadow/_boxShadow' @import 'boxShadow/_boxShadow'
@import 'iconized/_iconized' @import 'iconized/_iconized'

View File

@ -1,39 +1,102 @@
/*
* A collection of Box Shadows
*/
/*
* Just a simple box shadow, surrounding the box
*/
RV-BoxShadow--simple(color) RV-BoxShadow--simple(color)
box-shadow 0 0 10px color +RV-Block__Modifier--name('simple')
box-shadow 0 0 10px 3px color
RV-BoxShadow(color) /*
* Hhuge shadow under the bottom of the
* box, which creates an levitation effect
*/
RV-BoxShadow--levitating(color)
+RV-Block__Modifier--name('levitating')
box-shadow: color 0px 1px 1px 0px inset, color 0px 40px 80px -15px, color 0px 30px 60px -30px;
position relative /*
float left * Stacked, retro, synth wave style
background-color white * shadows unterneath the box
* To change the color using CSS vars
* you have to set the separte r, g, b values
* --color: 107, 86, 144
* This may cause other types of shadow to break
* if used in the same selector / var scope
*/
RV-BoxShadow--stacked(color)
+RV-Block__Modifier--name('stacked')
--color red(@--color), green(@--color), blue(@--color)
box-shadow: 'rgba(%s, 0.4) 0px 5px, rgba(%s, 0.3) 0px 10px, rgba(%s, 0.2) 0px 15px, rgba(%s, 0.1) 0px 20px, rgba(%s, 0.05) 0px 25px' % (color color color color color)
&:before, &:after /*
content "" * Two shadows at the lower left and right of the box
position absolute * to create the effect the corners are lifted like
z-index -2 * a piece of paper
*/
&--simple RV-BoxShadow--liftedCorners(color)
RV-BoxShadow--simple(color) +RV-Block__Modifier--name('liftedCorners')
&--raised
&:after
box-shadow 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
&--liftedCorners
&:before, &:after &:before, &:after
bottom 15px bottom 15px
left 10px left 10px
width 50% width 50%
height 20% height 20%
max-width 300px box-shadow 0 15px 8px color
box-shadow 0 15px 10px rgba(0, 0, 0, 0.7) transform rotate(-5deg)
transform rotate(-3deg)
&:after &:after
right 10px right 10px
left auto left auto
transform rotate(3deg) transform rotate(5deg)
.RV-BoxShadow /*
RV-BoxShadow(#6b5690) * A suttle drop shadow in the middle of the element
*/
RV-BoxShadow--drop(color)
+RV-Block__Modifier--name('drop')
position relative
box-shadow 0 1px 4px color
&:after
box-shadow 0 0 40px color
bottom 0px
left 10%
right 10%
width 80%
height 50%
border-radius 100%
RV-BoxShadow()
position relative
float left
background-color white
&:before, &:after
content ''
position absolute
z-index -2
+RV-Block('RV-BoxShadow')
RV-CSSParameter({
color: #6b5690
})
RV-BoxShadow()
+RV-Block__Modifier()
RV-BoxShadow--simple(color)
+RV-Block__Modifier()
RV-BoxShadow--liftedCorners(color)
+RV-Block__Modifier()
RV-BoxShadow--levitating(color)
+RV-Block__Modifier()
RV-BoxShadow--stacked(color)
+RV-Block__Modifier()
RV-BoxShadow--drop(color)

View File

@ -1,11 +1,18 @@
<div class="RV-BoxShadow--raised" style="width: 300px; height: 300px; margin: 20px 0 0 20px;"> <div class="RV-BoxShadow RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
<div class="RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
<img src="https://via.placeholder.com/300/7242af"/> <img src="https://via.placeholder.com/300/7242af"/>
</div> </div>
<div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;"> <div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<img src="https://via.placeholder.com/300/7242af"/> <img src="https://via.placeholder.com/300/7242af"/>
</div> </div>
<div class="RV-BoxShadow RV-BoxShadow--levitating" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
<div class="RV-BoxShadow RV-BoxShadow--stacked" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
<div class="RV-BoxShadow RV-BoxShadow--drop" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<img src="https://via.placeholder.com/300/7242af"/>
</div>

View File

@ -1,56 +1,70 @@
RV-Iconized__Container() RV-Iconized--extraSmall()
position relative +RV-Block__Modifier--name('extraSmall')
+RV-Element('Icon')
width 1em
height 1em
position relative
top .125em
&--small RV-Iconized--small()
+RV-Block__Modifier('small')
top -.25em top -.25em
+RV-Element('Icon')
width 1.5em
height 1.5em
position relative
top .45em
&--medium RV-Iconized--medium()
+RV-Block__Modifier--name('medium')
top -.5em top -.5em
+RV-Element('Icon')
width 2em
height 2em
position relative
top .625em
&--large RV-Iconized--large()
+RV-Block__Modifier--name('large')
top -1.03073em top -1.03073em
+RV-Element('Icon')
width 3em
height 3em
position relative
top 1.15573em
&--huge RV-Iconized--huge()
+RV-Block__Modifier--name('huge')
top -2.05em top -2.05em
+RV-Element('Icon')
width 5em
height 5em
position relative
top 2.175em
RV-Iconized__Icon() RV-Iconized__Icon()
RV-Reset() +RV-Element--name('Icon')
RV-Reset()
&__Container--extraSmall &__Icon RV-Iconized()
width 1em position relative
height 1em
position relative
top .125em
&__Container--small &__Icon
width 1.5em
height 1.5em
position relative
top .45em
&__Container--medium &__Icon +RV-Block('RV-Iconized')
width 2em +RV-Element()
height 2em RV-Iconized__Icon()
position relative
top .625em
&__Container--large &__Icon +RV-Block__Modifier()
width 3em RV-Iconized--extraSmall()
height 3em
position relative
top 1.15573em
&__Container--huge &__Icon +RV-Block__Modifier()
width 5em RV-Iconized--small()
height 5em
position relative
top 2.175em
RV-Iconized(prefix='&') +RV-Block__Modifier()
{prefix}__Container RV-Iconized--medium()
RV-Iconized__Container()
RV-Iconized__Icon() +RV-Block__Modifier()
RV-Iconized--large()
.RV-Iconized +RV-Block__Modifier()
RV-Iconized() RV-Iconized--huge()

View File

@ -1,4 +1,4 @@
<span class="RV-Iconized__Container RV-Iconized__Container--extraSmall"> <span class="RV-Iconized RV-Iconized--extraSmall">
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" <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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"> x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
@ -10,7 +10,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
<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 RV-Iconized__Container--small"> <span class="RV-Iconized RV-Iconized--small">
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" <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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"> x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
@ -22,7 +22,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
<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 RV-Iconized__Container--medium"> <span class="RV-Iconized RV-Iconized--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>
@ -30,7 +30,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
<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 RV-Iconized__Container--large"> <span class="RV-Iconized RV-Iconized--large">
<svg class="RV-Iconized__Icon RV-Iconized__Icon" 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>
@ -41,7 +41,7 @@ v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,
<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, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre 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, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre 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 RV-Iconized__Container--small"> <span class="RV-Iconized RV-Iconized--small">
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" <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 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
xml:space="preserve"> xml:space="preserve">

View File

@ -1,54 +1,46 @@
RV-Spacing__Outer--small() RV-Spacing__Outer--small()
margin spacing-small +RV-Element__Modifier('small')
margin spacing-small
--outer-spacing spacing-small
RV-Spacing__Outer--medium() RV-Spacing__Outer--medium()
margin spacing-medium +RV-Element__Modifier('medium')
margin spacing-medium
--outer-spacing spacing-medium
RV-Spacing__Outer--large() RV-Spacing__Outer--large()
margin spacing-large +RV-Element__Modifier('large')
margin spacing-large
--outer-spacing spacing-large
RV-Spacing__Inner--small() RV-Spacing__Inner--small()
padding spacing-small +RV-Element__Modifier('small')
gap spacing-small padding spacing-small
column-gap spacing-small gap spacing-small
column-gap spacing-small
RV-Utils__Hook--catch('masonry_grid', spacing-small) --inner-spacing spacing-small
RV-Spacing__Inner--medium() RV-Spacing__Inner--medium()
padding spacing-medium +RV-Element__Modifier('medium')
gap spacing-medium padding spacing-medium
column-gap spacing-medium gap spacing-medium
column-gap spacing-medium
RV-Utils__Hook--catch('masonry_grid', spacing-medium) --inner-spacing spacing-medium
RV-Spacing__Inner--large() RV-Spacing__Inner--large()
padding spacing-large +RV-Element__Modifier('large')
gap spacing-large padding spacing-large
column-gap spacing-large gap spacing-large
column-gap spacing-large
--inner-spacing spacing-large
RV-Utils__Hook--catch('masonry_grid', spacing-large) +RV-Block('RV-Spacing')
+RV-Element('Outer')
RV-Spacing__Outer--small()
RV-Spacing__Outer--medium()
RV-Spacing__Outer--large()
RV-Spacing(prefix='&') +RV-Element('Inner')
{prefix}__Outer RV-Spacing__Inner--small()
&--small RV-Spacing__Inner--medium()
RV-Spacing__Outer--small() RV-Spacing__Inner--large()
&--medium
RV-Spacing__Outer--medium()
&--large
RV-Spacing__Outer--large()
{prefix}__Inner
&--small
RV-Spacing__Inner--small()
&--medium
RV-Spacing__Inner--medium()
&--large
RV-Spacing__Inner--large()
.RV-Spacing
RV-Spacing()