reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Converting Layouts to Stylus

Browse Source
This commit is contained in:
reverend
2021-01-03 12:36:12 +01:00
parent 3f3874427c
commit 333aa9d1b5
36 changed files with 1088 additions and 1773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
components/01_Layouts/contentCrop/_contentCrop.scss
View File

@@ -1,200 +0,0 @@
@mixin RV-ContentCrop--bottom {
img {
object-position: bottom;
}
}
@mixin RV-ContentCrop--top {
img {
object-position: top;
}
}
@mixin RV-ContentCrop--right {
img {
object-position: right;
}
}
@mixin RV-ContentCrop--left {
img {
object-position: left;
}
}
@mixin RV-ContentCrop--center {
img {
object-position: center;
}
}
@mixin RV-ContentCrop__Text--fade($-background-color: white) {
&--fade {
&:after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
display: block;
content: ' ';
opacity: 0.8;
position: relative;
top: -25%;
width: 100%;
height: 25%;
z-index: -10;
}
}
}
@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
&--ellipsis {
&:after {
position: relative;
display: block;
bottom: 1.2em;
left: calc(100% - 3ch);
content: '...';
font-size: 1.2em;
min-width: 2em;
background-color: $-background-color;
padding: 0 2px;
}
}
}
@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {
p {
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0;
margin: 0;
line-height: #{$-line-height};
// Determining the max line count and caclulating the height
z-index: -20;
position: relative;
background-color: #{$-background-color};
height: floor(100% / $-line-height / 16) * $-line-height * 16;
}
&--fade {
@include RV-ContentCrop__Text--fade($-background-color);
}
&--ellipsis {
@include RV-ContentCrop__Text--ellipsis($-background-color);
}
}
@mixin RV-ContentCrop__Shapes--square {
width: 100%;
padding-top: 100%;
position: relative;
img,
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
@mixin RV-ContentCrop__Shapes--circle {
@include RV-ContentCrop__Shapes--square;
border-radius: 50%;
}
@mixin RV-ContentCrop__Shapes--xtoy($-x, $-y) {
width: 100%;
padding-top: 100% * ($-y / $-x);
position: relative;
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
@mixin RV-ContentCrop__Shapes {
&--square {
@include RV-ContentCrop__Shapes--square;
}
&--circle {
@include RV_ContentCrop__Shapes--circle;
}
&--1to2 {
@include RV-ContentCrop__Shapes--xtoy(1, 2);
}
&--2to1 {
@include RV-ContentCrop__Shapes--xtoy(2, 1);
}
&--4to3 {
@include RV-ContentCrop__Shapes--xtoy(4, 3);
}
&--16to9 {
@include RV-ContentCrop__Shapes--xtoy(16, 9);
}
&--3to2 {
@include RV-ContentCrop__Shapes--xtoy(3, 2);
}
}
@mixin RV-ContentCrop__Image {
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
@mixin 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;
@include RV-ContentCrop__Image;
@include RV-ContentCrop__Text($-line-height);
@include RV-ContentCrop__Shapes;
&--left {
@include RV-ContentCrop--left;
}
&--center {
@include RV-ContentCrop--center;
}
&--top {
@include RV-ContentCrop--top;
}
&--bottom {
@include RV-ContentCrop--bottom;
}
&--center {
@include RV-ContentCrop--center;
}
}
.RV-ContentCrop {
@include RV-ContentCrop;
}

154
components/01_Layouts/contentCrop/_contentCrop.styl Normal file
View File

@@ -0,0 +1,154 @@
RV-ContentCrop--bottom()
img
object-position bottom
RV-ContentCrop--top()
img
object-position top
RV-ContentCrop--right()
img
object-position right
RV-ContentCrop--left()
img
object-position left
RV-ContentCrop--center()
img
object-position center
RV-ContentCrop__Text--fade(background-color=white)
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
position relative
top -25%
width 100%
height 25%
z-index -10
RV-ContentCrop__Text--ellipsis(background-color=white)
&:after
position relative
display block
bottom 1.2em
left calc(100% - 3ch)
content '...'
font-size 1.2em
min-width 2em
background-color background-color
padding 0 2px
RV-ContentCrop__Text(line-height=1.1, background-color=white)
p
overflow hidden
display block
text-overflow ellipsis
padding 0
margin 0
line-height line-height
// Determining the max line count and caclulating the height
z-index -20
position relative
background-color background-color
height floor(100% / line-height / 16) * line-height * 16
&--fade
RV-ContentCrop__Text--fade(background-color)
&--ellipsis
RV-ContentCrop__Text--ellipsis(background-color)
RV-ContentCrop__Shapes--square()
width 100%
padding-top 100%
position relative
img,
div
position absolute
top 0
left 0
bottom 0
right 0
RV_ContentCrop__Shapes--circle()
RV-ContentCrop__Shapes--square()
border-radius 50%
RV-ContentCrop__Shapes--xtoy(-x, -y)
width 100%
padding-top 100% * (-y / -x)
position relative
img
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
RV-ContentCrop__Shapes()
&--square
RV-ContentCrop__Shapes--square()
&--circle
RV_ContentCrop__Shapes--circle()
&--1to2
RV-ContentCrop__Shapes--xtoy(1, 2)
&--2to1
RV-ContentCrop__Shapes--xtoy(2, 1)
&--4to3
RV-ContentCrop__Shapes--xtoy(4, 3)
&--16to9
RV-ContentCrop__Shapes--xtoy(16, 9)
&--3to2
RV-ContentCrop__Shapes--xtoy(3, 2)
RV-ContentCrop__Image()
img
width 100%
height 100%
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()
&--left
RV-ContentCrop--left()
&--center
RV-ContentCrop--center()
&--top
RV-ContentCrop--top()
&--bottom
RV-ContentCrop--bottom()
&--center
RV-ContentCrop--center()
.RV-ContentCrop
RV-ContentCrop()