New component

This commit is contained in:
reverend 2020-08-21 17:51:22 +02:00
parent 066de9a052
commit e56415913f
6 changed files with 43 additions and 9 deletions

View File

@ -1,3 +1,4 @@
@import 'flexRow/flexRow';
@import 'flexGrid/flexGrid';
@import 'contentCrop/contentCrop';
@import 'fan/fan';

View File

@ -1,4 +1,4 @@
RV-ContentCrop{
@mixin RV-ContentCrop{
&,* {
overflow: hidden;
word-break: break-all;
@ -37,5 +37,5 @@ RV-ContentCrop{
}
.RV-ContentCrop__Container {
@extend RV-ContentCrop;
@include RV-ContentCrop;
}

View File

@ -0,0 +1,17 @@
@mixin RV-Fan {
&__Container {
display: flex;
&--horizontal {
flex-direction: row;
}
&--vertical {
flex-direction: column;
}
}
}
.RV-Fan {
@include RV-Fan;
}

View File

@ -0,0 +1 @@
{}

View File

@ -0,0 +1,8 @@
<div class="RV-Fan__Container RV-Fan__Container--horizontal">
<div class="landscape red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<p>Some content here</p>
<p>More conthent over here</p>
<p>And something here</p>
</div>
</div>

View File

@ -61,24 +61,31 @@
.RV-FlexGrid__Item--right * {
justify-content: flex-end; }
RV-ContentCrop, .RV-ContentCrop__Container, RV-ContentCrop *, .RV-ContentCrop__Container * {
.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
overflow: hidden;
word-break: break-all; }
RV-ContentCrop img, .RV-ContentCrop__Container img {
.RV-ContentCrop__Container img {
width: inherit;
height: inherit;
object-fit: cover;
object-position: center; }
RV-ContentCrop--left img {
.RV-ContentCrop__Container--left img {
object-position: left; }
RV-ContentCrop--right img {
.RV-ContentCrop__Container--right img {
object-position: right; }
RV-ContentCrop--top img {
.RV-ContentCrop__Container--top img {
object-position: top; }
RV-ContentCrop--bottom img {
.RV-ContentCrop__Container--bottom img {
object-position: bottom; }
.RV-Fan__Container {
display: flex; }
.RV-Fan__Container--horizontal {
flex-direction: row; }
.RV-Fan__Container--vertical {
flex-direction: column; }