component for shaping container

This commit is contained in:
reverend 2021-03-09 12:40:36 +01:00
parent bf86048cb5
commit 73f2d4aea9
3 changed files with 65 additions and 0 deletions

View File

@ -0,0 +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()
+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()
+RV-Block__Modifier--name('circle')
padding-top 100%
width 100%
position relative
&, *
clip-path circle()
*
position absolute
top 0
left 0
bottom 0
right 0
+RV-Block('RV-Shape')
+RV-Block__Modifier()
RV-Shape--square()
+RV-Block__Modifier()
RV-Shape--circle()

View File

@ -0,0 +1,17 @@
{
"name": "Shape",
"variants": [
{
"name": "Square",
"context": {
"modifier": "RV-Shape--square"
}
},
{
"name": "Circle",
"context": {
"modifier": "RV-Shape--circle"
}
}
]
}

View File

@ -0,0 +1,3 @@
<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>