diff --git a/components/02_ContentShape/alignment/_alignment.styl b/components/02_ContentShape/alignment/_alignment.styl index 0f4c46c..692629d 100644 --- a/components/02_ContentShape/alignment/_alignment.styl +++ b/components/02_ContentShape/alignment/_alignment.styl @@ -1,42 +1,47 @@ -RV-Alignment() - display grid - RV-Alignment--top() +RV-Block--modifier() + display grid align-content start RV-Alignment--bottom() +RV-Block--modifier() + display grid align-content end RV-Alignment--left() +RV-Block--modifier() + display grid justify-content start RV-Alignment--right() +RV-Block--modifier() - justify-content: end + display grid + justify-content end RV-Alignment--horizontalCenter() +RV-Block--modifier() + display grid justify-content center RV-Alignment--verticalCenter() +RV-Block--modifier() + display grid align-items center RV-Alignment--center() +RV-Block--modifier() + display grid align-items center justify-content center -+RV-Block--shorthand('RV-Alignment') - RV-Alignment() - - RV-Alignment--top() - RV-Alignment--bottom() - RV-Alignment--left() - RV-Alignment--right() - RV-Alignment--horizontalCenter() - RV-Alignment--verticalCenter() - RV-Alignment--center() \ No newline at end of file +RV-Alignment() + +RV-Block() + RV-Alignment--top() + RV-Alignment--bottom() + RV-Alignment--left() + RV-Alignment--right() + RV-Alignment--horizontalCenter() + RV-Alignment--verticalCenter() + RV-Alignment--center() + +RV-Alignment() \ No newline at end of file diff --git a/components/02_ContentShape/aspectRatio/_aspectRatio.styl b/components/02_ContentShape/aspectRatio/_aspectRatio.styl index 1866367..834b36d 100644 --- a/components/02_ContentShape/aspectRatio/_aspectRatio.styl +++ b/components/02_ContentShape/aspectRatio/_aspectRatio.styl @@ -36,26 +36,26 @@ RV-AspectRatio--16to9() +RV-Block--modifier() 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() - 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() \ No newline at end of file diff --git a/components/02_ContentShape/focalPoint/_focalPoint.styl b/components/02_ContentShape/focalPoint/_focalPoint.styl index 2fd666a..0754182 100644 --- a/components/02_ContentShape/focalPoint/_focalPoint.styl +++ b/components/02_ContentShape/focalPoint/_focalPoint.styl @@ -33,23 +33,25 @@ RV-FocalPoint--rightHalf() }) RV-FocalPoint(focalX=50%, focalY=50%) - RV-CSSParameter({ - focalX: focalX, - focalY: focalY - }) - - height 100% - width 100% - display block - object-fit cover - object-position --focalX --focalY + +RV-Block() + RV-CSSParameter({ + focalX: focalX, + focalY: focalY + }) + + height 100% + width 100% + display block + 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() + \ No newline at end of file diff --git a/components/02_ContentShape/shape/_shape.styl b/components/02_ContentShape/shape/_shape.styl index 6e9e289..0b0db29 100644 --- a/components/02_ContentShape/shape/_shape.styl +++ b/components/02_ContentShape/shape/_shape.styl @@ -37,6 +37,9 @@ RV-Shape--circle() bottom 0 right 0 -+RV-Block--shorthand('RV-Shape') - RV-Shape--square() - RV-Shape--circle() \ No newline at end of file +RV-Shape() + +RV-Block() + RV-Shape--square() + RV-Shape--circle() + +RV-Shape() \ No newline at end of file diff --git a/components/02_ContentShape/truncation/_truncation.styl b/components/02_ContentShape/truncation/_truncation.styl index f05e022..260a6bb 100644 --- a/components/02_ContentShape/truncation/_truncation.styl +++ b/components/02_ContentShape/truncation/_truncation.styl @@ -3,75 +3,82 @@ * 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. */ + +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-Block--modifier() - - +RV-Element('Content') - &: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__Content(background-color) + +RV-Truncation--ellipsis__Cutter(background-color) + +RV-Element() + &: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-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-Block--modifier() - - +RV-Element('Cutter') - &: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--ellipsis__Cutter(background-color) + RV-Truncation--ellipsis__Content(background-color) RV-Truncation(line-height=1.3em, height=100%, background-color=white) - RV-CSSParameter({ - line-height: line-height, - height: height, - background-color: background-color - }) - - display grid - align-content flex-start - grid-template-rows repeat(auto-fill, --line-height) - height --height - - height calc_height(--height) - width calc_width() - - position relative - - * - overflow hidden - grid-row 1/-1 - background --background-color + +RV-Block() + RV-CSSParameter({ + line-height: line-height, + height: height, + background-color: background-color + }) + + display grid + align-content flex-start + grid-template-rows repeat(auto-fill, --line-height) + height --height + + height calc_height(--height) + width calc_width() + + position relative + + * + overflow hidden + grid-row 1/-1 + background --background-color line-height --line-height -+RV-Block--shorthand('RV-Truncation') - RV-Truncation() - - RV-Truncation--fade(--background-color) - RV-Truncation--ellipsis(--background-color) \ No newline at end of file + RV-Truncation--fade(--background-color) + RV-Truncation--ellipsis(--background-color) + +RV-Truncation() \ No newline at end of file diff --git a/components/02_ContentShape/truncation/truncation.hbs b/components/02_ContentShape/truncation/truncation.hbs index 63365bf..b4849fe 100644 --- a/components/02_ContentShape/truncation/truncation.hbs +++ b/components/02_ContentShape/truncation/truncation.hbs @@ -1,4 +1,4 @@ -
+

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, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re 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.