Von 00 nach 10 verschoben
This commit is contained in:
parent
c656dc2929
commit
7e751d1078
@ -1,79 +0,0 @@
|
|||||||
RV-Truncation--fade(background-color=white)
|
|
||||||
padding-bottom 20px
|
|
||||||
&: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) - 60px)
|
|
||||||
width 100%
|
|
||||||
height 50px
|
|
||||||
line-height var(--line-height)
|
|
||||||
z-index 10
|
|
||||||
*:after
|
|
||||||
display inline-block
|
|
||||||
background-color #fff
|
|
||||||
content '###'
|
|
||||||
color transparent
|
|
||||||
position absolute
|
|
||||||
right 0
|
|
||||||
z-index 30
|
|
||||||
|
|
||||||
RV-Truncation--ellipsis(background-color=white)
|
|
||||||
&:after
|
|
||||||
position absolute
|
|
||||||
display block
|
|
||||||
right 0
|
|
||||||
content '...'
|
|
||||||
background-color background-color
|
|
||||||
padding-left 5px
|
|
||||||
padding-bottom 10px
|
|
||||||
box-shadow -10px 8px 6px 0px #fff;
|
|
||||||
line-height --line-height
|
|
||||||
top calc(--height - 40px)
|
|
||||||
*:after
|
|
||||||
display inline-block
|
|
||||||
background-color #fff
|
|
||||||
content '###'
|
|
||||||
color transparent
|
|
||||||
position absolute
|
|
||||||
right 0
|
|
||||||
z-index 30
|
|
||||||
|
|
||||||
RV-Truncation(line-height=1.3, height=350px)
|
|
||||||
RV-CSSParameter({
|
|
||||||
line-height: line-height,
|
|
||||||
height: height
|
|
||||||
})
|
|
||||||
|
|
||||||
background-color = white
|
|
||||||
display block
|
|
||||||
overflow hidden
|
|
||||||
position relative
|
|
||||||
|
|
||||||
height calc_height()
|
|
||||||
width calc_width()
|
|
||||||
|
|
||||||
*
|
|
||||||
overflow hidden
|
|
||||||
display block
|
|
||||||
position relative
|
|
||||||
text-overflow ellipsis
|
|
||||||
background-color background-color
|
|
||||||
|
|
||||||
line-height line-height
|
|
||||||
max-height floor(height / (line-height * 16)) * (line-height * 16)
|
|
||||||
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
.RV-Truncation
|
|
||||||
RV-Truncation()
|
|
||||||
|
|
||||||
&--fade
|
|
||||||
RV-Truncation--fade()
|
|
||||||
|
|
||||||
&--ellipsis
|
|
||||||
RV-Truncation--ellipsis()
|
|
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Truncation",
|
|
||||||
"variants": [
|
|
||||||
{
|
|
||||||
"name": "Fade",
|
|
||||||
"context": {
|
|
||||||
"modifier": "RV-Truncation--fade"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Ellipsis",
|
|
||||||
"context": {
|
|
||||||
"modifier": "RV-Truncation--ellipsis"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
@ -1,5 +0,0 @@
|
|||||||
<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}">
|
|
||||||
<p>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
@ -12,6 +12,9 @@ RV-FlexRow--horizontal()
|
|||||||
RV-FlexRow--vertical()
|
RV-FlexRow--vertical()
|
||||||
+RV-Block__Modifier--name('vertical')
|
+RV-Block__Modifier--name('vertical')
|
||||||
flex-direction column
|
flex-direction column
|
||||||
|
|
||||||
|
+RV-Element('Item')
|
||||||
|
margin-bottom unset
|
||||||
|
|
||||||
|
|
||||||
RV-FlexRow__Item--outsideBreakPoint()
|
RV-FlexRow__Item--outsideBreakPoint()
|
||||||
@ -31,7 +34,6 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
|
|||||||
+RV-Block__Modifier--name('breakPoint')
|
+RV-Block__Modifier--name('breakPoint')
|
||||||
RV-Reset()
|
RV-Reset()
|
||||||
gap 0px
|
gap 0px
|
||||||
height unset
|
|
||||||
|
|
||||||
RV-Utils__ElementAmount--range(0, 20, @(index, total){
|
RV-Utils__ElementAmount--range(0, 20, @(index, total){
|
||||||
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
|
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
|
||||||
@ -67,7 +69,6 @@ RV-FlexRow--auto()
|
|||||||
########### */
|
########### */
|
||||||
RV-FlexRow__Item()
|
RV-FlexRow__Item()
|
||||||
+RV-Element--name('Item')
|
+RV-Element--name('Item')
|
||||||
flex-basis max-content
|
|
||||||
flex-grow 3
|
flex-grow 3
|
||||||
flex-shrink 3
|
flex-shrink 3
|
||||||
|
|
||||||
@ -179,14 +180,14 @@ RV-FlexRow()
|
|||||||
+RV-Element__Modifier()
|
+RV-Element__Modifier()
|
||||||
RV-FlexRow__Item--content()
|
RV-FlexRow__Item--content()
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
+RV-Block__Modifier()
|
||||||
RV-FlexRow--horizontal()
|
RV-FlexRow--horizontal()
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
+RV-Block__Modifier()
|
||||||
RV-FlexRow--vertical()
|
RV-FlexRow--vertical()
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
|
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
+RV-Block__Modifier()
|
||||||
RV-FlexRow--auto()
|
RV-FlexRow--auto()
|
@ -1,4 +1,4 @@
|
|||||||
RV-Pagination__Item()
|
/*RV-Pagination__Item()
|
||||||
RV-FlexRow__Item()
|
RV-FlexRow__Item()
|
||||||
.RV-Link
|
.RV-Link
|
||||||
padding 15px 20px
|
padding 15px 20px
|
||||||
@ -20,3 +20,4 @@ RV-Pagination__List(breakpoint=500px)
|
|||||||
&__Label
|
&__Label
|
||||||
RV-FlexRow__Item--outsideBreakPoint()
|
RV-FlexRow__Item--outsideBreakPoint()
|
||||||
|
|
||||||
|
*/
|
@ -28,7 +28,7 @@ RV-Shape--circle()
|
|||||||
position relative
|
position relative
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
border-radius 50%
|
clip-path circle()
|
||||||
|
|
||||||
*
|
*
|
||||||
position absolute
|
position absolute
|
@ -1,3 +1,6 @@
|
|||||||
|
html
|
||||||
|
--shf: 4.9406564584124654e-322;
|
||||||
|
|
||||||
@import '00_Tools/_tools'
|
@import '00_Tools/_tools'
|
||||||
|
|
||||||
@import '01_Layouts/_layouts'
|
@import '01_Layouts/_layouts'
|
||||||
@ -5,7 +8,7 @@
|
|||||||
@import '03_Atoms/_atoms'
|
@import '03_Atoms/_atoms'
|
||||||
@import '04_Molecules/_molecules'
|
@import '04_Molecules/_molecules'
|
||||||
|
|
||||||
@import '00_ContentShape/_contentShape'
|
@import '10_ContentShape/_contentShape'
|
||||||
//@import '05_Organisms/_organisms'
|
//@import '05_Organisms/_organisms'
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user