component for shaping container
This commit is contained in:
parent
bf86048cb5
commit
73f2d4aea9
45
components/02_ContentShape/shape/_shape.styl
Normal file
45
components/02_ContentShape/shape/_shape.styl
Normal 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()
|
17
components/02_ContentShape/shape/shape.config.json
Normal file
17
components/02_ContentShape/shape/shape.config.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "Shape",
|
||||
"variants": [
|
||||
{
|
||||
"name": "Square",
|
||||
"context": {
|
||||
"modifier": "RV-Shape--square"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Circle",
|
||||
"context": {
|
||||
"modifier": "RV-Shape--circle"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
3
components/02_ContentShape/shape/shape.hbs
Normal file
3
components/02_ContentShape/shape/shape.hbs
Normal 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>
|
Loading…
Reference in New Issue
Block a user