From c656dc2929b80534fc99944af1accea4c600fbd9 Mon Sep 17 00:00:00 2001 From: reverend Date: Thu, 4 Mar 2021 17:37:09 +0100 Subject: [PATCH] Switching to BEM Generator --- .../aspectRatio/_aspectRatio.styl | 75 +++++++++++-------- .../focalPoint/_focalPoint.styl | 65 +++++++++------- components/00_ContentShape/shape/_shape.styl | 63 +++++++++------- 3 files changed, 118 insertions(+), 85 deletions(-) diff --git a/components/00_ContentShape/aspectRatio/_aspectRatio.styl b/components/00_ContentShape/aspectRatio/_aspectRatio.styl index 0874fbb..b2d611f 100644 --- a/components/00_ContentShape/aspectRatio/_aspectRatio.styl +++ b/components/00_ContentShape/aspectRatio/_aspectRatio.styl @@ -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() \ No newline at end of file diff --git a/components/00_ContentShape/focalPoint/_focalPoint.styl b/components/00_ContentShape/focalPoint/_focalPoint.styl index 0441918..bcbe58a 100644 --- a/components/00_ContentShape/focalPoint/_focalPoint.styl +++ b/components/00_ContentShape/focalPoint/_focalPoint.styl @@ -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() \ No newline at end of file diff --git a/components/00_ContentShape/shape/_shape.styl b/components/00_ContentShape/shape/_shape.styl index 34ab2f3..c0fe866 100644 --- a/components/00_ContentShape/shape/_shape.styl +++ b/components/00_ContentShape/shape/_shape.styl @@ -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() \ No newline at end of file