reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New component

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
components/01_Layouts/_layouts.scss
View File

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

4
components/01_Layouts/contentCrop/_contentCrop.scss
View File

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

17
components/01_Layouts/fan/_fan.scss Normal file
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;
}

1
components/01_Layouts/fan/fan.config.json Normal file
View File

@@ -0,0 +1 @@
{}

8
components/01_Layouts/fan/fan.hbs Normal file
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>

19
public/rcss.css
View File

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