New component
This commit is contained in:
parent
066de9a052
commit
e56415913f
@ -1,3 +1,4 @@
|
||||
@import 'flexRow/flexRow';
|
||||
@import 'flexGrid/flexGrid';
|
||||
@import 'contentCrop/contentCrop';
|
||||
@import 'fan/fan';
|
@ -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;
|
||||
}
|
17
components/01_Layouts/fan/_fan.scss
Normal file
17
components/01_Layouts/fan/_fan.scss
Normal file
@ -0,0 +1,17 @@
|
||||
@mixin RV-Fan {
|
||||
&__Container {
|
||||
display: flex;
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.RV-Fan {
|
||||
@include RV-Fan;
|
||||
}
|
1
components/01_Layouts/fan/fan.config.json
Normal file
1
components/01_Layouts/fan/fan.config.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
8
components/01_Layouts/fan/fan.hbs
Normal file
8
components/01_Layouts/fan/fan.hbs
Normal 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>
|
@ -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; }
|
||||
|
Loading…
Reference in New Issue
Block a user