diff --git a/components/01_Layouts/contentCrop/_contentCrop.styl b/components/01_Layouts/contentCrop/_contentCrop.styl index bc7ea93..304e25f 100644 --- a/components/01_Layouts/contentCrop/_contentCrop.styl +++ b/components/01_Layouts/contentCrop/_contentCrop.styl @@ -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() \ No newline at end of file + RV-ContentCrop() + RV-ContentCrop--shorthands() \ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index f873a25..99646e2 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -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) \ No newline at end of file + RV-Fan(280px, 320px) \ No newline at end of file diff --git a/components/01_Layouts/fan/fan.hbs b/components/01_Layouts/fan/fan.hbs index a04318b..2a396cb 100644 --- a/components/01_Layouts/fan/fan.hbs +++ b/components/01_Layouts/fan/fan.hbs @@ -1,24 +1,27 @@
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. +
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.
+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.Some content here
+Some content here
More conthent over here
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.
+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.Some content here
More conthent over here
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.
+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.Some content here
More conthent over here
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.
+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.