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

Finished Component

Browse Source
This commit is contained in:
reverend 2020-08-23 11:35:03 +02:00
parent fd6b1f52c2
commit 1b57714c0e
2 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/01_Layouts/fan/_fan.scss
View File

@ -1,4 +1,4 @@
@mixin RV-Fan {
@mixin RV-Fan ($base_height, $base_width) {
&__Container {
display: flex;
@ -8,10 +8,29 @@
&--vertical {
flex-direction: column;
width:max-content;
}
}
&__Base {
height: $base_height;
width: $base_width;
flex: 0 0 auto;
}
&__Surface {
@include RV-ContentCrop;
}
&__Container--horizontal &__Surface {
height: $base_height;
}
&__Container--vertical &__Surface {
width: $base_width;
}
}
.RV-Fan {
@include RV-Fan;
@include RV-Fan(280px, 320px);
}

23
components/01_Layouts/fan/fan.hbs
View File

@ -1,8 +1,25 @@
<div class="RV-Fan__Container RV-Fan__Container--horizontal">
<div class="landscape red RV-Fan__Base"></div>
<div class="RV-Fan__Container RV-Fan__Container--horizontal RV-Fan__Container--realFan">
<div class="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>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p>
</div>
</div>
<br><br>
<div class="RV-Fan__Container RV-Fan__Container--vertical">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p>
</div>
</div>