From 4e88fbbb9bbb2640732166864d04320cd95c8404 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 23 Aug 2020 14:40:14 +0200 Subject: [PATCH] Current Bulid --- public/rcss.css | 198 ++++++++++++++++++++++++++++-------------------- 1 file changed, 116 insertions(+), 82 deletions(-) diff --git a/public/rcss.css b/public/rcss.css index 26f0057..870d03f 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -1,67 +1,72 @@ @import url(./pink.css); +.RV-Alignment__Container { + display: grid; } + .RV-Alignment__Container--top { + align-content: start; } + .RV-Alignment__Container--bottom { + align-content: end; } + .RV-Alignment__Container--left { + justify-content: start; } + .RV-Alignment__Container--right { + justify-content: end; } + .RV-Alignment__Container--horizontalCenter { + justify-content: center; } + .RV-Alignment__Container--verticalCenter { + align-content: center; } + .RV-Alignment__Container--center { + justify-content: center; + align-content: center; } + .RV-FlexRow__Container { display: flex; flex-direction: row; - gap: 10px; justify-content: space-around; } .RV-FlexRow__Container--wrap { flex-wrap: wrap; } .RV-FlexRow__Item { width: 100%; } - .RV-FlexRow__Item * { - text-align: unset; - display: flex; - flex-direction: row; } - .RV-FlexRow__Item--fixedSize { - flex: 0 0; - width: min-content; } - .RV-FlexRow__Item--center { - text-align: center; } - .RV-FlexRow__Item--center * { + .RV-FlexRow__Item__Container { + display: grid; } + .RV-FlexRow__Item__Container--top { + align-content: start; } + .RV-FlexRow__Item__Container--bottom { + align-content: end; } + .RV-FlexRow__Item__Container--left { + justify-content: start; } + .RV-FlexRow__Item__Container--right { + justify-content: end; } + .RV-FlexRow__Item__Container--horizontalCenter { justify-content: center; } - .RV-FlexRow__Item--left { - text-align: left; } - .RV-FlexRow__Item--left * { - justify-content: flex-start; } - .RV-FlexRow__Item--right { - text-align: right; } - .RV-FlexRow__Item--right * { - justify-content: flex-end; } + .RV-FlexRow__Item__Container--verticalCenter { + align-content: center; } + .RV-FlexRow__Item__Container--center { + justify-content: center; + align-content: center; } .RV-FlexGrid__Container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(auto-fill, 300px); grid-auto-rows: 300px; } - .RV-FlexGrid__Container--sameHeight { - grid-auto-rows: 1fr; } - .RV-FlexGrid__Container--spacing { - gap: 10px; } -.RV-FlexGrid__Item * { - text-align: unset; - display: flex; - flex-direction: row; } - -.RV-FlexGrid__Item--fixedSize { - flex: 0 0; - width: min-content; } - -.RV-FlexGrid__Item--center { - text-align: center; } - .RV-FlexGrid__Item--center * { +.RV-FlexGrid__Item__Container { + display: grid; } + .RV-FlexGrid__Item__Container--top { + align-content: start; } + .RV-FlexGrid__Item__Container--bottom { + align-content: end; } + .RV-FlexGrid__Item__Container--left { + justify-content: start; } + .RV-FlexGrid__Item__Container--right { + justify-content: end; } + .RV-FlexGrid__Item__Container--horizontalCenter { justify-content: center; } - -.RV-FlexGrid__Item--left { - text-align: left; } - .RV-FlexGrid__Item--left * { - justify-content: flex-start; } - -.RV-FlexGrid__Item--right { - text-align: right; } - .RV-FlexGrid__Item--right * { - justify-content: flex-end; } + .RV-FlexGrid__Item__Container--verticalCenter { + align-content: center; } + .RV-FlexGrid__Item__Container--center { + justify-content: center; + align-content: center; } .RV-ContentCrop__Container, .RV-ContentCrop__Container * { overflow: hidden; @@ -87,13 +92,34 @@ .RV-ContentCrop__Container--center img { object-position: center; } +.RV-Fan__Container--vertical { + flex-direction: column; + width: max-content; } + +.RV-Fan__Container--vertical .RV-Fan__Surface { + width: 320px; + min-height: 280px; } + +.RV-Fan__Container--horizontal { + flex-direction: row; } + +.RV-Fan__Container--horizontal .RV-Fan__Surface { + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--auto { + flex-flow: row wrap; } + +.RV-Fan__Container--auto .RV-Fan__Surface { + width: calc(100% - 320px); + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { + flex-grow: 1; } + .RV-Fan__Container { display: flex; } - .RV-Fan__Container--horizontal { - flex-direction: row; } - .RV-Fan__Container--vertical { - flex-direction: column; - width: max-content; } .RV-Fan__Base { height: 280px; @@ -124,12 +150,6 @@ .RV-Fan__Surface--center img { object-position: center; } -.RV-Fan__Container--horizontal .RV-Fan__Surface { - height: 280px; } - -.RV-Fan__Container--vertical .RV-Fan__Surface { - width: 320px; } - .RV-FullWidthContent__Container { width: 100%; } @@ -219,6 +239,30 @@ padding: 35px; gap: 35px; } +.RV-Iconized__Icon--small { + width: 1em; + height: 1em; + position: relative; + top: .125em; } + +.RV-Iconized__Icon--medium { + width: 2em; + height: 2em; + position: relative; + top: .625em; } + +.RV-Iconized__Icon--large { + width: 3em; + height: 3em; + position: relative; + top: 1.15573em; } + +.RV-Iconized__Icon--huge { + width: 5em; + height: 5em; + position: relative; + top: 2.175em; } + .RV-ImageGrid__Container { list-style-type: none; margin: 0; @@ -241,34 +285,24 @@ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(auto-fill, 300px); grid-auto-rows: 300px; } - .RV-ImageGrid__Container--sameHeight { - grid-auto-rows: 1fr; } - .RV-ImageGrid__Container--spacing { - gap: 10px; } -.RV-ImageGrid__Item * { - text-align: unset; - display: flex; - flex-direction: row; } - -.RV-ImageGrid__Item--fixedSize { - flex: 0 0; - width: min-content; } - -.RV-ImageGrid__Item--center { - text-align: center; } - .RV-ImageGrid__Item--center * { +.RV-ImageGrid__Item__Container { + display: grid; } + .RV-ImageGrid__Item__Container--top { + align-content: start; } + .RV-ImageGrid__Item__Container--bottom { + align-content: end; } + .RV-ImageGrid__Item__Container--left { + justify-content: start; } + .RV-ImageGrid__Item__Container--right { + justify-content: end; } + .RV-ImageGrid__Item__Container--horizontalCenter { justify-content: center; } - -.RV-ImageGrid__Item--left { - text-align: left; } - .RV-ImageGrid__Item--left * { - justify-content: flex-start; } - -.RV-ImageGrid__Item--right { - text-align: right; } - .RV-ImageGrid__Item--right * { - justify-content: flex-end; } + .RV-ImageGrid__Item__Container--verticalCenter { + align-content: center; } + .RV-ImageGrid__Item__Container--center { + justify-content: center; + align-content: center; } .RV-ImageGrid__Container { padding: 25px;