diff --git a/components/02_ContentShape/shape/_shape.styl b/components/02_ContentShape/shape/_shape.styl new file mode 100644 index 0000000..72fb5a3 --- /dev/null +++ b/components/02_ContentShape/shape/_shape.styl @@ -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() \ No newline at end of file diff --git a/components/02_ContentShape/shape/shape.config.json b/components/02_ContentShape/shape/shape.config.json new file mode 100644 index 0000000..92dc757 --- /dev/null +++ b/components/02_ContentShape/shape/shape.config.json @@ -0,0 +1,17 @@ +{ + "name": "Shape", + "variants": [ + { + "name": "Square", + "context": { + "modifier": "RV-Shape--square" + } + }, + { + "name": "Circle", + "context": { + "modifier": "RV-Shape--circle" + } + } + ] +} \ No newline at end of file diff --git a/components/02_ContentShape/shape/shape.hbs b/components/02_ContentShape/shape/shape.hbs new file mode 100644 index 0000000..8ab86b2 --- /dev/null +++ b/components/02_ContentShape/shape/shape.hbs @@ -0,0 +1,3 @@ +