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

Including breakpoint in horizontal fan

This commit is contained in:
reverend 2021-03-10 00:56:25 +01:00
parent 212c587f7f
commit 640b45ad02
2 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/01_Layouts/fan/_fan.styl
View File

@ -16,29 +16,25 @@
*/
RV-Fan--horizontal(base-height, base-width)
+RV-Block--modifier()
flex-direction row
+RV-Element('Base')
//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
box-sizing border-box
flex-shrink 9999
flex-grow 1
max-width base-width
margin 0
padding 0
--_padding var(--inner-spacing)
--_margin var(--outer-spacing)
*
margin var(--_margin)
padding var(--_padding)
box-sizing border-box
RV-CSSParameter({
localBreakPoint: 'calc(2 * %s)' % base-width
})
RV-BreakPoint(--localBreakPoint)
+RV-Element('Surface')
height base-height
box-sizing border-box
flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
RV-BreakPoint__Item()
+RV-Element('Base')
RV-BreakPoint__Item()
+RV-Squash()
RV-BreakPoint__Item--outside()
flex-basis base-width
flex-grow 0
RV-BreakPoint--horizontal()
min-width unset
/*
* Base above, Surfce below
@ -53,7 +49,6 @@ RV-Fan--vertical(base-height, base-width)
+RV-Element('Surface')
width base-width
box-sizing border-box
min-width initial
min-height base-height
@ -88,6 +83,13 @@ RV-Fan__Base(base-height, base-width)
flex-basis base-width
flex-shrink 0
flex-grow 0
height base-height
width base-width
> *
height calc_height()
width calc_width()
RV-Fan__Surface--fixedHeight(height)
+RV-Element--modifier()
@ -105,7 +107,12 @@ RV-Fan__Surface(base-height, base-width)
box-sizing border-box
height base-height
flex-basis base-width
min-width base-width
flex-grow 1
> *
height calc_height()
width calc_width()
/* ############
* Block Mixin

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

@ -7,22 +7,20 @@
<br>
<br>
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop">
<div class="RV-Fan__Base RV-Spacing__Inner--small">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
</div>
<div class="RV-Fan__Base">
<img class="RV-Image RV-Spacing__Outer--small RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{path '/images/landscape.jpeg'}}"/>
</div>
<div class="RV-Fan__Surface RV-Spacing__Inner--small">
<div class="RV-Text">
<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.
</p>
<p>
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
</p>
<p>
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 class="RV-Fan__Surface">
<div class="RV-Spacing__Outer--small">
<div class="RV-Truncation">
<div class="RV-Truncation__Cutter">
<p class="RV-Truncation__Content">
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>
</div>
</div>
</div>