ContentCrop for Fan Layout
This commit is contained in:
parent
80bed0b6c7
commit
7093252248
@ -28,7 +28,7 @@ RV-ContentCrop__Text--fade(background-color=white)
|
||||
top -25%
|
||||
width 100%
|
||||
height 25%
|
||||
z-index -10
|
||||
z-index 10
|
||||
|
||||
RV-ContentCrop__Text--ellipsis(background-color=white)
|
||||
&:after
|
||||
@ -49,7 +49,6 @@ RV-ContentCrop__Text(line-height=1.1, background-color=white)
|
||||
text-overflow ellipsis
|
||||
// Determining the max line count and caclulating the height
|
||||
line-height line-height
|
||||
z-index -20
|
||||
position relative
|
||||
background-color background-color
|
||||
max-height floor(100% / line-height / 16) * line-height * 16
|
||||
@ -130,19 +129,7 @@ RV-ContentCrop__Image()
|
||||
object-fit cover
|
||||
display block
|
||||
|
||||
RV-ContentCrop(line-height=1.1, prefix='&')
|
||||
|
||||
// Heuristic, just to be safe
|
||||
line-height = line-height * 1.1
|
||||
background-color = white
|
||||
display block
|
||||
overflow hidden
|
||||
|
||||
RV-ContentCrop__Image()
|
||||
RV-ContentCrop__Text(line-height)
|
||||
|
||||
RV-ContentCrop__Shapes()
|
||||
|
||||
RV-ContentCrop--shorthands()
|
||||
&--left
|
||||
RV-ContentCrop--left()
|
||||
|
||||
@ -158,5 +145,20 @@ RV-ContentCrop(line-height=1.1, prefix='&')
|
||||
&--center
|
||||
RV-ContentCrop--center()
|
||||
|
||||
RV-ContentCrop__Shapes()
|
||||
|
||||
|
||||
RV-ContentCrop(line-height=1.1, prefix='&')
|
||||
// Heuristic, just to be safe
|
||||
line-height = line-height * 1.1
|
||||
background-color = white
|
||||
display block
|
||||
overflow hidden
|
||||
|
||||
RV-ContentCrop__Image()
|
||||
RV-ContentCrop__Text(line-height)
|
||||
|
||||
|
||||
.RV-ContentCrop
|
||||
RV-ContentCrop()
|
||||
RV-ContentCrop()
|
||||
RV-ContentCrop--shorthands()
|
@ -1,53 +1,54 @@
|
||||
RV-Fan--horizontal(base_height, base_width, prefix='&', suffix= '')
|
||||
|
||||
{prefix}__Container{suffix}
|
||||
flex-direction row
|
||||
{prefix}__Container{suffix}
|
||||
flex-direction row
|
||||
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
min-width base_width
|
||||
height base_height
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
min-width base_width
|
||||
height base_height
|
||||
|
||||
RV-Fan--vertical(base_height, base_width, prefix='&', suffix='')
|
||||
{prefix}__Container{suffix}
|
||||
flex-direction column
|
||||
width max-content
|
||||
{prefix}__Container{suffix}
|
||||
flex-direction column
|
||||
width max-content
|
||||
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
width base_width
|
||||
min-height base_height
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
width base_width
|
||||
min-height base_height
|
||||
|
||||
RV-Fan--auto(base_height, base_width, prefix='&', suffix='')
|
||||
|
||||
{prefix}__Container{suffix}
|
||||
flex-flow row wrap
|
||||
flex-flow row wrap
|
||||
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
width 'calc(100% - %s)' % base_width
|
||||
min-width base_width
|
||||
height base_height
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
width 'calc(100% - %s)' % base_width
|
||||
min-width base_width
|
||||
height base_height
|
||||
|
||||
RV-Fan--fullWidth(base_height, base_width, prefix='&', suffix='')
|
||||
|
||||
{prefix}__Container{suffix} {prefix}__Base,
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
flex-grow 1
|
||||
{prefix}__Container{suffix} {prefix}__Base,
|
||||
{prefix}__Container{suffix} {prefix}__Surface
|
||||
flex-grow 1
|
||||
|
||||
RV-Fan(base_height, base_width, prefix='&')
|
||||
RV-Fan--vertical(base_height, base_width, prefix, '--vertical')
|
||||
RV-Fan--horizontal(base_height, base_width, prefix, '--horizontal')
|
||||
RV-Fan--auto(base_height, base_width, prefix, '--auto')
|
||||
RV-Fan--fullWidth(base_height, base_width, prefix, '--fullWidth')
|
||||
RV-Fan--vertical(base_height, base_width, prefix, '--vertical')
|
||||
RV-Fan--horizontal(base_height, base_width, prefix, '--horizontal')
|
||||
RV-Fan--auto(base_height, base_width, prefix, '--auto')
|
||||
RV-Fan--fullWidth(base_height, base_width, prefix, '--fullWidth')
|
||||
|
||||
{prefix}__Container
|
||||
display flex
|
||||
{prefix}__Container
|
||||
display flex
|
||||
|
||||
{prefix}__Base
|
||||
height base_height
|
||||
width base_width
|
||||
flex 0 0 auto
|
||||
{prefix}__Base
|
||||
height base_height
|
||||
width base_width
|
||||
flex 0 0 auto
|
||||
|
||||
{prefix}__Surface
|
||||
RV-ContentCrop()
|
||||
{prefix}__Surface
|
||||
RV-ContentCrop()
|
||||
RV-ContentCrop__Text--fade()
|
||||
|
||||
.RV-Fan
|
||||
RV-Fan(280px, 320px)
|
||||
RV-Fan(280px, 320px)
|
@ -1,24 +1,27 @@
|
||||
<div class="RV-Fan__Container RV-Fan__Container--horizontal">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<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.
|
||||
<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.
|
||||
|
||||
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>
|
||||
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>
|
||||
<br><br>
|
||||
<div class="RV-Fan__Container RV-Fan__Container--auto">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<p>Some content here</p>
|
||||
<div class="RV-Text">
|
||||
<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>
|
||||
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>
|
||||
|
||||
@ -27,25 +30,29 @@ Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repelle
|
||||
<div class="RV-Fan__Container RV-Fan__Container--auto RV-Fan__Container--fullWidth">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<div class="RV-Text">
|
||||
<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>
|
||||
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>
|
||||
<br><br>
|
||||
<div class="RV-Fan__Container RV-Fan__Container--vertical">
|
||||
<div class="red RV-Fan__Base"></div>
|
||||
<div class="green RV-Fan__Surface">
|
||||
<div class="RV-Text">
|
||||
<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>
|
||||
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>
|
@ -1,8 +1,8 @@
|
||||
<div class="RV-ImageGrid">
|
||||
<ul class="RV-ImageGrid__Container">
|
||||
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi01.png'}}" alt=""></li>
|
||||
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi02.jpeg'}}" alt=""></li>
|
||||
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi03.jpeg'}}" alt=""></li>
|
||||
<li class="RV-ImageGrid__Item RV-ImageGrid__Item"><img src="{{path '/images/hasi04.png'}}" alt=""></li>
|
||||
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi01.png'}}" alt=""></div></li>
|
||||
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi02.jpeg'}}" alt=""></div></li>
|
||||
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi03.jpeg'}}" alt=""></div></li>
|
||||
<li class="RV-ImageGrid__Item"><div class="RV-Image"><img src="{{path '/images/hasi04.png'}}" alt=""></div></li>
|
||||
</ul>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user