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

Switching to BEM Generator

Browse Source
This commit is contained in:
reverend 2021-03-04 17:37:09 +01:00
parent 6c5a7704b4
commit c656dc2929
3 changed files with 118 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
components/00_ContentShape/aspectRatio/_aspectRatio.styl
View File

@ -1,16 +1,41 @@
/**
* Mixins to maintain aspect ratio of an element.
*/
RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
RV-CSSParameter({
aspectX: aspectX,
aspectY: aspectY
})
padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
&:last-child
margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
+RV-Block__Modifier--name('XtoY')
RV-CSSParameter({
aspectX: aspectX,
aspectY: aspectY
})
RV-Utils__ElementAmount(1, @(index, totale){
margin-bottom 0px
})
padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
&:last-child
margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
RV-Utils__ElementAmount(1, @(index, totale){
margin-bottom 0px
})
RV-AspectRatio--1to2()
+RV-Block__Modifier('1to2')
RV-AspectRatio--XtoY(1, 2)
RV-AspectRatio--2to1()
+RV-Block__Modifier('2to1')
RV-AspectRatio--XtoY(2, 1)
RV-AspectRatio--3to2()
+RV-Block__Modifier('3to2')
RV-AspectRatio--XtoY(3, 2)
RV-AspectRatio--4to3()
+RV-Block__Modifier('4to3')
RV-AspectRatio--XtoY(4, 3)
RV-AspectRatio--16to9()
+RV-Block__Modifier('16to9')
RV-AspectRatio--XtoY(16, 9)
RV-AspectRatio()
position relative
@ -26,36 +51,20 @@ RV-AspectRatio()
bottom 0
right 0
RV-AspectRatio--1to2()
RV-AspectRatio--XtoY(1, 2)
RV-AspectRatio--2to1()
RV-AspectRatio--XtoY(2, 1)
RV-AspectRatio--3to2()
RV-AspectRatio--XtoY(3, 2)
RV-AspectRatio--4to3()
RV-AspectRatio--XtoY(4, 3)
RV-AspectRatio--16to9()
RV-AspectRatio--XtoY(16, 9)
.RV-AspectRatio
+RV-Block('RV-AspectRatio')
RV-AspectRatio()
&--1to2
+RV-Block__Modifier()
RV-AspectRatio--1to2()
&--2to1
+RV-Block__Modifier()
RV-AspectRatio--2to1()
&--3to2
+RV-Block__Modifier()
RV-AspectRatio--3to2()
&--4to3
+RV-Block__Modifier()
RV-AspectRatio--4to3()
&--16to9
+RV-Block__Modifier()
RV-AspectRatio--16to9()

65
components/00_ContentShape/focalPoint/_focalPoint.styl
View File

@ -1,4 +1,37 @@
// FocalPoint in percentage
/**
* This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
* A focal point is a manual choosen point in an object that will be in the center of the cropped object.
* If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
* The focal point is given in percentages relative to the objects size.
* To set the focal point either use one the the predefined classes or set them using inline CSS:
* class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
*
*/
RV-FocalPoint--upperHalf()
+RV-Block__Modifier--name('upperHalf')
RV-CSSParameter({
focalY: 25%
})
RV-FocalPoint--lowerHalf()
+RV-Block__Modifier--name('lowerHalf')
RV-CSSParameter({
focalY: 75%
})
RV-FocalPoint--leftHalf()
+RV-Block__Modifier--name('leftHalf')
RV-CSSParameter({
focalX: 25%
})
RV-FocalPoint--rightHalf()
+RV-Block__Modifier--name('rightHalf')
RV-CSSParameter({
focalX: 75%
})
RV-FocalPoint(focalX=50%, focalY=50%)
RV-CSSParameter({
focalX: focalX,
@ -10,39 +43,19 @@ RV-FocalPoint(focalX=50%, focalY=50%)
object-fit cover
object-position --focalX --focalY
RV-FocalPoint--upperHalf()
RV-CSSParameter({
focalY: 25%
})
RV-FocalPoint--lowerHalf()
RV-CSSParameter({
focalY: 75%
})
RV-FocalPoint--leftHalf()
RV-CSSParameter({
focalX: 25%
})
RV-FocalPoint--rightHalf()
RV-CSSParameter({
focalX: 75%
})
.RV-FocalPoint
+RV-Block('RV-FocalPoint')
RV-FocalPoint()
&--upperHalf
+RV-Block__Modifier()
RV-FocalPoint--upperHalf()
&--lowerHalf
+RV-Block__Modifier()
RV-FocalPoint--lowerHalf()
&--leftHalf
+RV-Block__Modifier()
RV-FocalPoint--leftHalf()
&--rightHalf
+RV-Block__Modifier()
RV-FocalPoint--rightHalf()

63
components/00_ContentShape/shape/_shape.styl
View File

@ -1,34 +1,45 @@
/**
* This mixins lets to shape elements to squares or circles.
* Note: Even if the class RV-Shape itself is not nessecary (at this point)
* you still should use it to maintain compatiblity:
* CSS: class="RV-Shape RV-Shape--square"
* Stylues:
* RV-Shape()
* RV-Shape--square()
* You may want to combine this mixin with RV-FocalPoint.
*/
RV-Shape--square()
padding-top 100%
width 100%
position relative
*
position absolute
top 0
left 0
bottom 0
right 0
+RV-Block__Modifier--name('square')
padding-top 100%
width 100%
position relative
*
position absolute
top 0
left 0
bottom 0
right 0
RV-Shape--circle()
padding-top 100%
width 100%
position relative
+RV-Block__Modifier--name('circle')
padding-top 100%
width 100%
position relative
&, *
border-radius 50%
*
position absolute
top 0
left 0
bottom 0
right 0
&, *
border-radius 50%
*
position absolute
top 0
left 0
bottom 0
right 0
.RV-Shape
&--square
+RV-Block('RV-Shape')
+RV-Block__Modifier()
RV-Shape--square()
&--circle
+RV-Block__Modifier()
RV-Shape--circle()