Adapting ContentShape to Mixinname based generator

This commit is contained in:
reverend 2021-03-19 13:50:26 +01:00
parent 8c8eb4c097
commit 3afa94abd3
6 changed files with 134 additions and 117 deletions

View File

@ -1,42 +1,47 @@
RV-Alignment()
display grid
RV-Alignment--top() RV-Alignment--top()
+RV-Block--modifier() +RV-Block--modifier()
display grid
align-content start align-content start
RV-Alignment--bottom() RV-Alignment--bottom()
+RV-Block--modifier() +RV-Block--modifier()
display grid
align-content end align-content end
RV-Alignment--left() RV-Alignment--left()
+RV-Block--modifier() +RV-Block--modifier()
display grid
justify-content start justify-content start
RV-Alignment--right() RV-Alignment--right()
+RV-Block--modifier() +RV-Block--modifier()
justify-content: end display grid
justify-content end
RV-Alignment--horizontalCenter() RV-Alignment--horizontalCenter()
+RV-Block--modifier() +RV-Block--modifier()
display grid
justify-content center justify-content center
RV-Alignment--verticalCenter() RV-Alignment--verticalCenter()
+RV-Block--modifier() +RV-Block--modifier()
display grid
align-items center align-items center
RV-Alignment--center() RV-Alignment--center()
+RV-Block--modifier() +RV-Block--modifier()
display grid
align-items center align-items center
justify-content center justify-content center
+RV-Block--shorthand('RV-Alignment') RV-Alignment()
RV-Alignment() +RV-Block()
RV-Alignment--top()
RV-Alignment--top() RV-Alignment--bottom()
RV-Alignment--bottom() RV-Alignment--left()
RV-Alignment--left() RV-Alignment--right()
RV-Alignment--right() RV-Alignment--horizontalCenter()
RV-Alignment--horizontalCenter() RV-Alignment--verticalCenter()
RV-Alignment--verticalCenter() RV-Alignment--center()
RV-Alignment--center()
RV-Alignment()

View File

@ -36,26 +36,26 @@ RV-AspectRatio--16to9()
+RV-Block--modifier() +RV-Block--modifier()
RV-AspectRatio--XtoY(16, 9) RV-AspectRatio--XtoY(16, 9)
RV-AspectRatio()
+RV-Block()
position relative
overflow hidden
height unset
width unset
*
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
RV-AspectRatio--1to2()
RV-AspectRatio--2to1()
RV-AspectRatio--3to2()
RV-AspectRatio--4to3()
RV-AspectRatio--16to9()
RV-AspectRatio() RV-AspectRatio()
position relative
overflow hidden
height unset
width unset
*
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
+RV-Block--shorthand('RV-AspectRatio')
RV-AspectRatio()
RV-AspectRatio--1to2()
RV-AspectRatio--2to1()
RV-AspectRatio--3to2()
RV-AspectRatio--4to3()
RV-AspectRatio--16to9()

View File

@ -33,23 +33,25 @@ RV-FocalPoint--rightHalf()
}) })
RV-FocalPoint(focalX=50%, focalY=50%) RV-FocalPoint(focalX=50%, focalY=50%)
RV-CSSParameter({ +RV-Block()
focalX: focalX, RV-CSSParameter({
focalY: focalY focalX: focalX,
}) focalY: focalY
})
height 100%
width 100% height 100%
display block width 100%
object-fit cover display block
object-position --focalX --focalY object-fit cover
object-position --focalX --focalY
RV-FocalPoint--upperHalf()
RV-FocalPoint--lowerHalf()
RV-FocalPoint--leftHalf()
RV-FocalPoint--rightHalf()
+RV-Block--shorthand('RV-FocalPoint') RV-FocalPoint()
RV-FocalPoint()
RV-FocalPoint--upperHalf()
RV-FocalPoint--lowerHalf()
RV-FocalPoint--leftHalf()
RV-FocalPoint--rightHalf()

View File

@ -37,6 +37,9 @@ RV-Shape--circle()
bottom 0 bottom 0
right 0 right 0
+RV-Block--shorthand('RV-Shape') RV-Shape()
RV-Shape--square() +RV-Block()
RV-Shape--circle() RV-Shape--square()
RV-Shape--circle()
RV-Shape()

View File

@ -3,75 +3,82 @@
* Because this is actually realy messed up in native CSS, you have to specify the line-height * Because this is actually realy messed up in native CSS, you have to specify the line-height
* and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case. * and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case.
*/ */
RV-Truncation--fade__Content(background-color)
+RV-Element()
&:last-child:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content '###'
color transparent
opacity 1
position absolute
top calc(var(--height) - 40px)
width 100%
height calc(1.5 * var(--line-height))
z-index 10
RV-Truncation--fade(background-color=white) RV-Truncation--fade(background-color=white)
+RV-Block--modifier() +RV-Block--modifier()
RV-Truncation--fade__Content(background-color)
+RV-Element('Content')
&:last-child:after RV-Truncation--ellipsis__Cutter(background-color)
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color) +RV-Element()
display block &:after
content '###' position absolute
color transparent display block
opacity 1 right 0
position absolute content '...'
top calc(var(--height) - 40px) background-color background-color
width 100% padding-left 5px
height calc(1.5 * var(--line-height)) padding-bottom 10px
z-index 10 box-shadow -10px 8px 6px 0px background-color;
line-height --line-height
top calc(var(--height) - 38px)
RV-Truncation--ellipsis__Content(background-color)
+RV-Element()
&:after
display block
background-color background-color
content ''
position relative
right 0
height --height
width 100%
bottom -100%
z-index 30
RV-Truncation--ellipsis(background-color=white) RV-Truncation--ellipsis(background-color=white)
+RV-Block--modifier() +RV-Block--modifier()
RV-Truncation--ellipsis__Cutter(background-color)
+RV-Element('Cutter') RV-Truncation--ellipsis__Content(background-color)
&:after
position absolute
display block
right 0
content '...'
background-color background-color
padding-left 5px
padding-bottom 10px
box-shadow -10px 8px 6px 0px background-color;
line-height --line-height
top calc(var(--height) - 38px)
+RV-Element('Content')
&:after
display block
background-color background-color
content ''
position relative
right 0
height --height
width 100%
bottom -100%
z-index 30
RV-Truncation(line-height=1.3em, height=100%, background-color=white) RV-Truncation(line-height=1.3em, height=100%, background-color=white)
RV-CSSParameter({ +RV-Block()
line-height: line-height, RV-CSSParameter({
height: height, line-height: line-height,
background-color: background-color height: height,
}) background-color: background-color
})
display grid
align-content flex-start display grid
grid-template-rows repeat(auto-fill, --line-height) align-content flex-start
height --height grid-template-rows repeat(auto-fill, --line-height)
height --height
height calc_height(--height)
width calc_width() height calc_height(--height)
width calc_width()
position relative
position relative
*
overflow hidden *
grid-row 1/-1 overflow hidden
background --background-color grid-row 1/-1
background --background-color
line-height --line-height line-height --line-height
+RV-Block--shorthand('RV-Truncation') RV-Truncation--fade(--background-color)
RV-Truncation() RV-Truncation--ellipsis(--background-color)
RV-Truncation--fade(--background-color) RV-Truncation()
RV-Truncation--ellipsis(--background-color)

View File

@ -1,4 +1,4 @@
<div class="{{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px"> <div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px">
<div class="RV-Truncation__Cutter"> <div class="RV-Truncation__Cutter">
<p class="RV-Truncation__Content"> <p class="RV-Truncation__Content">
You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.