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

Minor changes

Browse Source
This commit is contained in:
reverend 2021-01-03 17:02:32 +01:00
parent 5d1df5e9a3
commit d5f9122ab2
3 changed files with 59 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/01_Layouts/fan/_fan.styl
View File

@ -48,7 +48,6 @@ RV-Fan(base_height, base_width, prefix='&')
{prefix}__Surface {prefix}__Surface
RV-ContentCrop() RV-ContentCrop()
RV-ContentCrop__Text--fade()
.RV-Fan .RV-Fan
RV-Fan(280px, 320px) RV-Fan(280px, 320px)

2
components/05_Components/imageGrid/_imageGrid.styl
View File

@ -3,7 +3,7 @@ RV-ImageGrid()
&__Container &__Container
RV-Spacing__Inner--small() RV-Spacing__Inner--small()
RV-FlexGrid__Container--autoWidth() RV-FlexGrid__Container--masonry()
&__Item &__Item
RV-ContentCrop() RV-ContentCrop()

405
public/rcss.css
View File

@ -176,7 +176,6 @@
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.21; line-height: 1.21;
z-index: -20;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
max-height: 96.80000000000001%; max-height: 96.80000000000001%;
@ -199,7 +198,7 @@
top: -25%; top: -25%;
width: 100%; width: 100%;
height: 25%; height: 25%;
z-index: -10; z-index: 10;
} }
.RV-ContentCrop--ellipsis:after { .RV-ContentCrop--ellipsis:after {
position: relative; position: relative;
@ -212,6 +211,21 @@
background-color: #fff; background-color: #fff;
padding: 0 2px; padding: 0 2px;
} }
.RV-ContentCrop--left .RV-Image * {
object-position: left;
}
.RV-ContentCrop--center .RV-Image * {
object-position: center;
}
.RV-ContentCrop--top .RV-Image * {
object-position: top;
}
.RV-ContentCrop--bottom .RV-Image * {
object-position: bottom;
}
.RV-ContentCrop--center .RV-Image * {
object-position: center;
}
.RV-ContentCrop--square { .RV-ContentCrop--square {
width: 100%; width: 100%;
padding-top: 100%; padding-top: 100%;
@ -304,21 +318,6 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.RV-ContentCrop--left .RV-Image * {
object-position: left;
}
.RV-ContentCrop--center .RV-Image * {
object-position: center;
}
.RV-ContentCrop--top .RV-Image * {
object-position: top;
}
.RV-ContentCrop--bottom .RV-Image * {
object-position: bottom;
}
.RV-ContentCrop--center .RV-Image * {
object-position: center;
}
.RV-Fan__Container--vertical { .RV-Fan__Container--vertical {
flex-direction: column; flex-direction: column;
width: max-content; width: max-content;
@ -370,7 +369,6 @@
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.21; line-height: 1.21;
z-index: -20;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
max-height: 96.80000000000001%; max-height: 96.80000000000001%;
@ -393,7 +391,7 @@
top: -25%; top: -25%;
width: 100%; width: 100%;
height: 25%; height: 25%;
z-index: -10; z-index: 10;
} }
.RV-Fan__Surface--ellipsis:after { .RV-Fan__Surface--ellipsis:after {
position: relative; position: relative;
@ -406,113 +404,6 @@
background-color: #fff; background-color: #fff;
padding: 0 2px; padding: 0 2px;
} }
.RV-Fan__Surface--square {
width: 100%;
padding-top: 100%;
position: relative;
}
.RV-Fan__Surface--square .RV-Image *,
.RV-Fan__Surface--square div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--circle {
width: 100%;
padding-top: 100%;
position: relative;
border-radius: 50%;
}
.RV-Fan__Surface--circle .RV-Image *,
.RV-Fan__Surface--circle div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--1to2 {
width: 100%;
padding-top: 200%;
position: relative;
}
.RV-Fan__Surface--1to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--2to1 {
width: 100%;
padding-top: 50%;
position: relative;
}
.RV-Fan__Surface--2to1 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--4to3 {
width: 100%;
padding-top: 75%;
position: relative;
}
.RV-Fan__Surface--4to3 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--16to9 {
width: 100%;
padding-top: 56.25%;
position: relative;
}
.RV-Fan__Surface--16to9 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--3to2 {
width: 100%;
padding-top: 66.66666666666666%;
position: relative;
}
.RV-Fan__Surface--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-Fan__Surface--left .RV-Image * {
object-position: left;
}
.RV-Fan__Surface--center .RV-Image * {
object-position: center;
}
.RV-Fan__Surface--top .RV-Image * {
object-position: top;
}
.RV-Fan__Surface--bottom .RV-Image * {
object-position: bottom;
}
.RV-Fan__Surface--center .RV-Image * {
object-position: center;
}
.RV-FlexGrid__Container { .RV-FlexGrid__Container {
display: grid; display: grid;
} }
@ -698,7 +589,6 @@
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.21; line-height: 1.21;
z-index: -20;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
max-height: 96.80000000000001%; max-height: 96.80000000000001%;
@ -721,7 +611,7 @@
top: -25%; top: -25%;
width: 100%; width: 100%;
height: 25%; height: 25%;
z-index: -10; z-index: 10;
} }
.RV-FullWidthContent__Item--ellipsis:after { .RV-FullWidthContent__Item--ellipsis:after {
position: relative; position: relative;
@ -734,113 +624,6 @@
background-color: #fff; background-color: #fff;
padding: 0 2px; padding: 0 2px;
} }
.RV-FullWidthContent__Item--square {
width: 100%;
padding-top: 100%;
position: relative;
}
.RV-FullWidthContent__Item--square .RV-Image *,
.RV-FullWidthContent__Item--square div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--circle {
width: 100%;
padding-top: 100%;
position: relative;
border-radius: 50%;
}
.RV-FullWidthContent__Item--circle .RV-Image *,
.RV-FullWidthContent__Item--circle div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--1to2 {
width: 100%;
padding-top: 200%;
position: relative;
}
.RV-FullWidthContent__Item--1to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--2to1 {
width: 100%;
padding-top: 50%;
position: relative;
}
.RV-FullWidthContent__Item--2to1 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--4to3 {
width: 100%;
padding-top: 75%;
position: relative;
}
.RV-FullWidthContent__Item--4to3 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--16to9 {
width: 100%;
padding-top: 56.25%;
position: relative;
}
.RV-FullWidthContent__Item--16to9 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--3to2 {
width: 100%;
padding-top: 66.66666666666666%;
position: relative;
}
.RV-FullWidthContent__Item--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--left .RV-Image * {
object-position: left;
}
.RV-FullWidthContent__Item--center .RV-Image * {
object-position: center;
}
.RV-FullWidthContent__Item--top .RV-Image * {
object-position: top;
}
.RV-FullWidthContent__Item--bottom .RV-Image * {
object-position: bottom;
}
.RV-FullWidthContent__Item--center .RV-Image * {
object-position: center;
}
.RV-ElementList { .RV-ElementList {
display: flex; display: flex;
height: 100%; height: 100%;
@ -1065,9 +848,9 @@
padding: 10px; padding: 10px;
gap: 10px; gap: 10px;
column-gap: 10px; column-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); display: block;
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); column-count: auto;
grid-auto-rows: minmax(300px, 1fr); column-width: 300px;
} }
.RV-ImageGrid__Item { .RV-ImageGrid__Item {
display: block; display: block;
@ -1085,7 +868,6 @@
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.21; line-height: 1.21;
z-index: -20;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
max-height: 96.80000000000001%; max-height: 96.80000000000001%;
@ -1108,7 +890,7 @@
top: -25%; top: -25%;
width: 100%; width: 100%;
height: 25%; height: 25%;
z-index: -10; z-index: 10;
} }
.RV-ImageGrid__Item--ellipsis:after { .RV-ImageGrid__Item--ellipsis:after {
position: relative; position: relative;
@ -1121,125 +903,54 @@
background-color: #fff; background-color: #fff;
padding: 0 2px; padding: 0 2px;
} }
.RV-ImageGrid__Item--square {
width: 100%;
padding-top: 100%;
position: relative;
}
.RV-ImageGrid__Item--square .RV-Image *,
.RV-ImageGrid__Item--square div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--circle {
width: 100%;
padding-top: 100%;
position: relative;
border-radius: 50%;
}
.RV-ImageGrid__Item--circle .RV-Image *,
.RV-ImageGrid__Item--circle div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--1to2 {
width: 100%;
padding-top: 200%;
position: relative;
}
.RV-ImageGrid__Item--1to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--2to1 {
width: 100%;
padding-top: 50%;
position: relative;
}
.RV-ImageGrid__Item--2to1 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--4to3 {
width: 100%;
padding-top: 75%;
position: relative;
}
.RV-ImageGrid__Item--4to3 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--16to9 {
width: 100%;
padding-top: 56.25%;
position: relative;
}
.RV-ImageGrid__Item--16to9 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--3to2 {
width: 100%;
padding-top: 66.66666666666666%;
position: relative;
}
.RV-ImageGrid__Item--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--left .RV-Image * {
object-position: left;
}
.RV-ImageGrid__Item--center .RV-Image * {
object-position: center;
}
.RV-ImageGrid__Item--top .RV-Image * {
object-position: top;
}
.RV-ImageGrid__Item--bottom .RV-Image * {
object-position: bottom;
}
.RV-ImageGrid__Item--center .RV-Image * {
object-position: center;
}
.RV-ImageGrid__Item .RV-Image * { .RV-ImageGrid__Item .RV-Image * {
object-position: center; object-position: center;
} }
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * { .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * {
margin-bottom: 10px; margin-bottom: 10px;
} }
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * * {
margin-bottom: unset;
}
.RV-ImageGrid__Container.RV-Spacing__Inner--small * {
margin-bottom: 10px;
}
.RV-ImageGrid__Container.RV-Spacing__Inner--small * * {
margin-bottom: unset;
}
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * { .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * {
margin-bottom: 25px; margin-bottom: 25px;
} }
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * * {
margin-bottom: unset;
}
.RV-ImageGrid__Container.RV-Spacing__Inner--medium * {
margin-bottom: 25px;
}
.RV-ImageGrid__Container.RV-Spacing__Inner--medium * * {
margin-bottom: unset;
}
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * { .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * {
margin-bottom: 35px; margin-bottom: 35px;
} }
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * * {
margin-bottom: unset;
}
.RV-ImageGrid__Container.RV-Spacing__Inner--large * {
margin-bottom: 35px;
}
.RV-ImageGrid__Container.RV-Spacing__Inner--large * * {
margin-bottom: unset;
}
.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * { .RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * {
margin-bottom: 10px; margin-bottom: 10px;
} }
.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * * {
margin-bottom: unset;
}
.RV-ImageGrid__Container.RV-ImageGrid__Container * {
margin-bottom: 10px;
}
.RV-ImageGrid__Container.RV-ImageGrid__Container * * {
margin-bottom: unset;
}