Converting Stylus to BEM-Generator and adding Boxshadows
This commit is contained in:
parent
d9127d503a
commit
78902c530f
@ -1,3 +1,4 @@
|
|||||||
@import 'spacing/_spacing'
|
@import 'spacing/_spacing'
|
||||||
|
|
||||||
@import 'boxShadow/_boxShadow'
|
@import 'boxShadow/_boxShadow'
|
||||||
@import 'iconized/_iconized'
|
@import 'iconized/_iconized'
|
@ -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)
|
@ -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>
|
@ -1,56 +1,70 @@
|
|||||||
RV-Iconized__Container()
|
RV-Iconized--extraSmall()
|
||||||
position relative
|
+RV-Block__Modifier--name('extraSmall')
|
||||||
|
+RV-Element('Icon')
|
||||||
&--small
|
|
||||||
top -.25em
|
|
||||||
|
|
||||||
&--medium
|
|
||||||
top -.5em
|
|
||||||
|
|
||||||
&--large
|
|
||||||
top -1.03073em
|
|
||||||
|
|
||||||
&--huge
|
|
||||||
top -2.05em
|
|
||||||
|
|
||||||
RV-Iconized__Icon()
|
|
||||||
RV-Reset()
|
|
||||||
|
|
||||||
&__Container--extraSmall &__Icon
|
|
||||||
width 1em
|
width 1em
|
||||||
height 1em
|
height 1em
|
||||||
position relative
|
position relative
|
||||||
top .125em
|
top .125em
|
||||||
|
|
||||||
&__Container--small &__Icon
|
RV-Iconized--small()
|
||||||
|
+RV-Block__Modifier('small')
|
||||||
|
top -.25em
|
||||||
|
+RV-Element('Icon')
|
||||||
width 1.5em
|
width 1.5em
|
||||||
height 1.5em
|
height 1.5em
|
||||||
position relative
|
position relative
|
||||||
top .45em
|
top .45em
|
||||||
|
|
||||||
&__Container--medium &__Icon
|
RV-Iconized--medium()
|
||||||
|
+RV-Block__Modifier--name('medium')
|
||||||
|
top -.5em
|
||||||
|
+RV-Element('Icon')
|
||||||
width 2em
|
width 2em
|
||||||
height 2em
|
height 2em
|
||||||
position relative
|
position relative
|
||||||
top .625em
|
top .625em
|
||||||
|
|
||||||
&__Container--large &__Icon
|
RV-Iconized--large()
|
||||||
|
+RV-Block__Modifier--name('large')
|
||||||
|
top -1.03073em
|
||||||
|
+RV-Element('Icon')
|
||||||
width 3em
|
width 3em
|
||||||
height 3em
|
height 3em
|
||||||
position relative
|
position relative
|
||||||
top 1.15573em
|
top 1.15573em
|
||||||
|
|
||||||
&__Container--huge &__Icon
|
RV-Iconized--huge()
|
||||||
|
+RV-Block__Modifier--name('huge')
|
||||||
|
top -2.05em
|
||||||
|
+RV-Element('Icon')
|
||||||
width 5em
|
width 5em
|
||||||
height 5em
|
height 5em
|
||||||
position relative
|
position relative
|
||||||
top 2.175em
|
top 2.175em
|
||||||
|
|
||||||
RV-Iconized(prefix='&')
|
RV-Iconized__Icon()
|
||||||
{prefix}__Container
|
+RV-Element--name('Icon')
|
||||||
RV-Iconized__Container()
|
RV-Reset()
|
||||||
|
|
||||||
|
RV-Iconized()
|
||||||
|
position relative
|
||||||
|
|
||||||
|
|
||||||
|
+RV-Block('RV-Iconized')
|
||||||
|
+RV-Element()
|
||||||
RV-Iconized__Icon()
|
RV-Iconized__Icon()
|
||||||
|
|
||||||
.RV-Iconized
|
+RV-Block__Modifier()
|
||||||
RV-Iconized()
|
RV-Iconized--extraSmall()
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-Iconized--small()
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-Iconized--medium()
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-Iconized--large()
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-Iconized--huge()
|
@ -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, 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 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">
|
||||||
|
@ -1,54 +1,46 @@
|
|||||||
RV-Spacing__Outer--small()
|
RV-Spacing__Outer--small()
|
||||||
|
+RV-Element__Modifier('small')
|
||||||
margin spacing-small
|
margin spacing-small
|
||||||
|
--outer-spacing spacing-small
|
||||||
|
|
||||||
RV-Spacing__Outer--medium()
|
RV-Spacing__Outer--medium()
|
||||||
|
+RV-Element__Modifier('medium')
|
||||||
margin spacing-medium
|
margin spacing-medium
|
||||||
|
--outer-spacing spacing-medium
|
||||||
|
|
||||||
RV-Spacing__Outer--large()
|
RV-Spacing__Outer--large()
|
||||||
|
+RV-Element__Modifier('large')
|
||||||
margin spacing-large
|
margin spacing-large
|
||||||
|
--outer-spacing spacing-large
|
||||||
|
|
||||||
RV-Spacing__Inner--small()
|
RV-Spacing__Inner--small()
|
||||||
|
+RV-Element__Modifier('small')
|
||||||
padding spacing-small
|
padding spacing-small
|
||||||
gap spacing-small
|
gap spacing-small
|
||||||
column-gap spacing-small
|
column-gap spacing-small
|
||||||
|
--inner-spacing spacing-small
|
||||||
RV-Utils__Hook--catch('masonry_grid', spacing-small)
|
|
||||||
|
|
||||||
RV-Spacing__Inner--medium()
|
RV-Spacing__Inner--medium()
|
||||||
|
+RV-Element__Modifier('medium')
|
||||||
padding spacing-medium
|
padding spacing-medium
|
||||||
gap spacing-medium
|
gap spacing-medium
|
||||||
column-gap spacing-medium
|
column-gap spacing-medium
|
||||||
|
--inner-spacing spacing-medium
|
||||||
RV-Utils__Hook--catch('masonry_grid', spacing-medium)
|
|
||||||
|
|
||||||
RV-Spacing__Inner--large()
|
RV-Spacing__Inner--large()
|
||||||
|
+RV-Element__Modifier('large')
|
||||||
padding spacing-large
|
padding spacing-large
|
||||||
gap spacing-large
|
gap spacing-large
|
||||||
column-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(prefix='&')
|
|
||||||
{prefix}__Outer
|
|
||||||
&--small
|
|
||||||
RV-Spacing__Outer--small()
|
RV-Spacing__Outer--small()
|
||||||
|
|
||||||
&--medium
|
|
||||||
RV-Spacing__Outer--medium()
|
RV-Spacing__Outer--medium()
|
||||||
|
|
||||||
&--large
|
|
||||||
RV-Spacing__Outer--large()
|
RV-Spacing__Outer--large()
|
||||||
|
|
||||||
{prefix}__Inner
|
+RV-Element('Inner')
|
||||||
&--small
|
|
||||||
RV-Spacing__Inner--small()
|
RV-Spacing__Inner--small()
|
||||||
|
|
||||||
&--medium
|
|
||||||
RV-Spacing__Inner--medium()
|
RV-Spacing__Inner--medium()
|
||||||
|
|
||||||
&--large
|
|
||||||
RV-Spacing__Inner--large()
|
RV-Spacing__Inner--large()
|
||||||
|
|
||||||
.RV-Spacing
|
|
||||||
RV-Spacing()
|
|
Loading…
Reference in New Issue
Block a user