lostplaces-frontend/components/rcss.bundled.scss
2021-10-18 15:59:45 +02:00

1091 lines
16 KiB
SCSS

// Padding and Margin sizes
$-spacing-small: 10px;
$-spacing-medium: 25px;
$-spacing-large: 35px;
//
.RV-Dummy {
overflow: hidden;
&--orange {
background-color: #F4A460 !important;
}
&--blue {
background-color: #6495ED !important;
}
&--green {
background-color: #90EE90 !important;
}
&--red {
background-color: #ce6d6d !important;
}
&--yellow{
background-color: #eae144 !important;
}
background-color: #F4A460;
&:nth-child(2n){
background-color: #6495ED;
}
&:nth-child(3n){
background-color: #90EE90;
}
&__Landscape {
min-width: 200px;
width: 100%;
min-height: 130px;
}
&__Portrait{
min-width: 130px;
width: 100%;
min-height: 200px;
}
&__Square {
min-width: 300px;
width: 100%;
min-height: 300px;
&--large {
height: 500px;
width: 500px;
}
&--small{
height: 100px;
width: 100px;
}
}
&--square {
height: 350px;
width: 350px;
}
&--portrait {
height: 350px;
width: 150px;
}
&--landscape {
width: 350px;
height: 150px;
}
&--red {
background-color: #d8583e;
}
}
/**
* Mixins to maintain aspect ratio of an element.
*/
@mixin RV-AspectRatio--XtoY($aspectX: 1, $aspectY: 1) {
--aspectX: #{$aspectX};
--aspectY: #{$aspectY};
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
}
@mixin RV-AspectRatio--1to2 {
@include RV-AspectRatio--XtoY(1, 2);
}
@mixin RV-AspectRatio--2to1 {
@include RV-AspectRatio--XtoY(2, 1);
}
@mixin RV-AspectRatio--3to2 {
@include RV-AspectRatio--XtoY(3, 2);
}
@mixin RV-AspectRatio--4to3 {
@include RV-AspectRatio--XtoY(4, 3);
}
@mixin RV-AspectRatio--16to9 {
@include RV-AspectRatio--XtoY(16, 9);
}
@mixin RV-AspectRatio {
position: relative;
overflow: hidden;
height: unset;
width: unset;
* {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.RV-AspectRatio {
@include RV-AspectRatio;
&--1to2 {
@include RV-AspectRatio--1to2;
}
&--2to1 {
@include RV-AspectRatio--2to1;
}
&--3to2 {
@include RV-AspectRatio--3to2;
}
&--4to3 {
@include RV-AspectRatio--4to3;
}
&--16to9 {
@include RV-AspectRatio--16to9;
}
}
/**
* This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
* A focal point is a manual choosen point in an object that will be in the center of the cropped object.
* If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
* The focal point is given in percentages relative to the objects size.
* To set the focal point either use one the the predefined classes or set them using inline CSS:
* class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
*
*/
@mixin RV-FocalPoint--upperHalf {
--focalY: 25%;
}
@mixin RV-FocalPoint--lowerHalf {
--focalY: 75%;
}
@mixin RV-FocalPoint--leftHalf {
--focalX: 25%;
}
@mixin RV-FocalPoint--rightHalf {
--focalX: 75%;
}
@mixin RV-FocalPoint($focalX: 50%, $focalY: 50%) {
--focalX: #{$focalX};
--focalY: #{$focalY};
height: 100%;
width: 100%;
display: block;
object-fit: cover;
object-position: var(--focalX) var(--focalY);
}
.RV-FocalPoint {
@include RV-FocalPoint;
&--upperHalf {
@include RV-FocalPoint--upperHalf;
}
&--lowerHalf {
@include RV-FocalPoint--lowerHalf;
}
&--leftHalf {
@include RV-FocalPoint--leftHalf;
}
&--rightHalf {
@include RV-FocalPoint--rightHalf;
}
}
@mixin RV-Rotation--degree($degree) {
--rotationDegree: #{$degree};
}
@mixin RV-Rotation--left {
@include RV-Rotation--degree(-90deg);
}
@mixin RV-Rotation--right {
@include RV-Rotation--degree(90deg);
}
@mixin RV-Rotation--upsideDown {
@include RV-Rotation--degree(180deg);
}
@mixin RV-Rotation {
--rotationDegree: 0deg;
transform: rotate(var(--rotationDegree));
}
.RV-Rotation {
@include RV-Rotation;
&--left {
@include RV-Rotation--left;
}
&--right {
@include RV-Rotation--right;
}
&--upsideDown {
@include RV-Rotation--upsideDown;
}
}
/**
* This mixins lets to shape elements to squares or circles.
* Note: Even if the class RV-Shape itself is not nessecary (at this point)
* you still should use it to maintain compatiblity:
* CSS: class="RV-Shape RV-Shape--square"
* Stylues:
* RV-Shape()
* RV-Shape--square()
* You may want to combine this mixin with RV-FocalPoint.
*/
@mixin RV-Shape--square{
width: 100%;
position: relative;
&:after {
padding-bottom: 100%;
content: '';
display: block;
}
* {
position: absolute;
width: 100%;
height: 100%;
}
}
@mixin RV-Shape--circle {
@include RV-Shape--square;
&, * {
clip-path: circle()
}
}
.RV-Shape{
&--square {
@include RV-Shape--square;
}
&--circle {
@include RV-Shape--circle;
}
}
@mixin RV-Alignment--top {
display: flex;
align-content: start;
}
@mixin RV-Alignment--bottom {
display: flex;
align-content: end;
}
@mixin RV-Alignment--left {
display: flex;
justify-content: start;
}
@mixin RV-Alignment--right {
display: flex;
justify-content: end;
}
@mixin RV-Alignment--horizontalCenter {
display: flex;
justify-content:0 center;
}
@mixin RV-Alignment--verticalCenter {
display: flex;
align-items: center;
}
@mixin RV-Alignment--center {
display: flex;
align-items: center;
justify-content: center;
}
.RV-Alignment {
&--top {
@include RV-Alignment--top;
}
&--bottom {
@include RV-Alignment--bottom;
}
&--left {
@include RV-Alignment--left;
}
&--right {
@include RV-Alignment--right;
}
&--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
&--verticalCenter {
@include RV-Alignment--verticalCenter;
}
&--center {
@include RV-Alignment--center;
}
}
html {
--spacing-factor: 1.5;
--spacing-none: 0;
--spacing-small: calc(var(--spacing-regular) / var(--spacing-factor));
--spacing-regular: 1em;
--spacing-medium: calc(var(--spacing-regular) * var(--spacing-factor));
--spacing-large: calc(var(--spacing-regular) * (var(--spacing-factor) * var(--spacing-factor)));
--spacing-extra-large: calc(var(--spacing-regular) * (var(--spacing-factor) * var(--spacing-factor) * var(--spacing-factor)));
--spacing: var(--spacing-regular);
}
.RV-Spacing {
&--none {
--spacing: var(--spacing-none);
}
&--small {
--spacing: var(--spacing-small);
}
&--regular {
--spacing: var(--spacing-regular);
}
&--medium {
--spacing: var(--spacing-medium);
}
&--large {
--spacing: var(--spacing-large);
}
&--extra-large {
--spacing: var(--spacing-extra-large);
}
}
/*
* Classes for easy flexrow usage
*/
/*
* Orientation
*/
@mixin RV-Flex--horizontal {
flex-direction: row;
}
@mixin RV-Flex--vertical {
flex-direction: column;
}
/*
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
@mixin RV-Flex--wrap {
flex-direction: row;
flex-wrap: wrap;
}
/*
* Varios relative width of items to each other
*/
@mixin RV-Flex__Item--narrower {
flex-grow: 2;
flex-shrink: 10;
}
@mixin RV-Flex__Item--narrow {
flex-grow: 4;
flex-shrink: 8;
}
@mixin RV-Flex__Item--wide {
flex-grow: 8;
flex-shrink: 4;
}
@mixin RV-Flex__Item--wider {
flex-grow: 10;
flex-shrink: 2;
}
/*
* Item has always the given width
*/
@mixin RV-Flex__Item--fixedSize {
flex-basis: var(--fixedSize);
flex-grow: 0;
flex-shrink: 0;
}
/*
* Item width relativ to the container
*/
@mixin RV-Flex__Item--half {
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
@mixin RV-Flex__Item--third {
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100%/3);
}
@mixin RV-Flex__Item--quarter {
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
}
@mixin RV-Flex__Item--content {
flex-grow: 0;
flex-shrink: 0;
flex-basis: max-content;
}
/* ##########
* Item class
* ##########
*/
@mixin RV-Flex__Item {
flex-grow: 5;
flex-shrink: 5;
}
@mixin RV-Flex {
display: flex;
gap: var(--gap);
}
/* ##########
* Block
########### */
.RV-Flex {
$block: &;
--gap: 0;
@include RV-Flex;
&__Item {
--fixedSize: 100px;
@include RV-Flex__Item;
&--narrower {
@include RV-Flex__Item--narrower;
}
&--narrow {
@include RV-Flex__Item--narrow;
}
&--wide {
@include RV-Flex__Item--wide;
}
&--wider {
@include RV-Flex__Item--wider;
}
&--half {
@include RV-Flex__Item--half;
}
&--third {
@include RV-Flex__Item--third;
}
&--quarter {
@include RV-Flex__Item--quarter;
}
&--fixedSize {
@include RV-Flex__Item--fixedSize;
}
&--content {
@include RV-Flex__Item--content;
}
}
}
/*
* ####
* Item
* ####
*/
@mixin RV-BreakPoint__Item--outside {
flex-shrink: 999;
}
@mixin RV-BreakPoint__Item--inside {
flex-grow: 0;
}
@mixin RV-BreakPoint__Item {
@include RV-Flex__Item;
flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
overflow: hidden;
--outer-spacing: 0;
--inner-spacing: 0;
}
/*
* ####
* Wrap
* ####
*/
@mixin RV-BreakPoint--wrap__Item--outside {
margin-bottom: -100vh;
}
/*
* ##########
* Horizontal
* ##########
*/
@mixin RV-BreakPoint--horizontal__Item--outside{
margin-bottom: unset;
height: unset;
}
@mixin RV-BreakPoint--horizontal {
flex-wrap: nowrap;
flex-direction: row;
}
/*
* ########
* Vertical
* ########
*/
@mixin RV-BreakPoint--vertical__Item--outside {
margin-bottom: unset;
height: unset;
}
@mixin RV-BreakPoint--vertical {
flex-direction: column;
flex-wrap: nowrap;
height: 100vh;
}
/*
* #####
* Block
* #####
*/
@mixin RV-BreakPoint{
@include RV-Flex;
@include RV-Flex--wrap;
overflow-y: hidden;
//RV-Reset()
gap: 0px;
}
.RV-BreakPoint {
$block: &;
--breakPoint: 500px;
@include RV-BreakPoint;
&__Item {
@include RV-BreakPoint__Item;
&--outside {
@include RV-BreakPoint__Item--outside;
}
&--inside {
@include RV-BreakPoint__Item--inside;
}
}
&--wrap &__Item{
&--outside {
@include RV-BreakPoint--wrap__Item--outside;
}
}
&--horizontal {
@include RV-BreakPoint--horizontal;
& #{$block}__Item {
&--outside {
@include RV-BreakPoint--wrap__Item--outside;
}
}
}
&--vertical {
@include RV-BreakPoint--vertical;
& #{$block}__Item {
&--outside {
@include RV-BreakPoint--vertical__Item--outside;
}
}
}
}
@mixin RV-Grid--autoWidth {
grid-template-columns: repeat(auto-fit, minmax(var(--itemMinWidth), 1fr));
grid-template-rows: repeat(auto-fill, minmax(var(--itemHeight), 1fr));
grid-auto-rows: minmax(var(--itemHeight), 1fr);
}
@mixin RV-Grid--fixedSize{
grid-template-rows: repeat(auto-fill, minmax(var(--itemHeight), 1fr));
grid-auto-rows: minmax(var(--itemHeight), 1fr);
grid-template-columns: repeat(auto-fill, var(--itemWidth));
justify-content: space-between;
}
@mixin RV-Grid--masonry__Item {
width: 100%;
margin-bottom: var(--gap);
&:last-child {
margin-bottom: 0;
}
}
@mixin RV-Grid--masonry {
display: block;
column-count: auto;
column-width: var(--itemWidth);
}
@mixin RV-Grid__Item{
height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
& > * {
height: 100%;
width: 100%;
}
}
@mixin RV-Grid{
display: grid;
grid-template-columns: repeat(auto-fill, var(--itemWidth));
gap: var(--gap);
}
.RV-Grid {
$block: &;
--itemHeight: 300px;
--itemWidth: 300px;
--itemMinWidth: 300px;
--gap: 15px;
@include RV-Grid;
&__Item {
@include RV-Grid__Item;
}
&--autoWidth {
@include RV-Grid--autoWidth;
}
&--masonry {
@include RV-Grid--masonry;
& #{$block}__Item {
@include RV-Grid--masonry__Item;
}
}
&--fixedSize {
@include RV-Grid--fixedSize;
}
}
/* #############
* Element Mixins
* ############# */
@mixin RV-Turner__Base{
height: var(--base-height);
flex-basis: var(--base-width);
flex-shrink: 0;
flex-grow: 1;
}
@mixin RV-Turner__Content {
flex-grow: 9999;
flex-basis: var(--base-width);
min-width: var(--base-width);
max-height: var(--base-height);
overflow: hidden;
}
/* ############
* Block Mixin
* ############ */
@mixin RV-Turner($base-height, $base-width) {
--base-height: #{$base-height};
--base-width: #{$base-width};
display: flex;
max-width: calc(3 * var(--base-width));
min-width: var(--base-width);
}
@mixin RV-Turner--horizontal__Base {
width: var(--base-width);
}
@mixin RV-Turner--horizontal {
flex-wrap: nowrap;
flex-direction: row;
overflow: hidden;
height: var(--base-height);
}
@mixin RV-Turner--vertical {
flex-wrap: nowrap;
flex-direction: column;
}
@mixin RV-Turner--auto {
flex-wrap: wrap;
}
.RV-Turner {
$block: &;
@include RV-Turner(300px, 300px);
&--horizontal {
@include RV-Turner--horizontal;
#{$block}__Base {
@include RV-Turner--horizontal__Base;
}
}
&--vertical {
@include RV-Turner--vertical;
}
&--auto {
@include RV-Turner--auto;
}
&__Base {
@include RV-Turner__Base;
}
&__Content {
@include RV-Turner__Content;
}
}
.RV-Label {
display: contents;
}
@mixin RV-Icon {
@include RV-Shape--square;
background-repeat: no-repeat;
display: block;
background-size: contain;
color: transparent;
height: 100%;
* {
width: 0;
}
img, .RV-Image {
height: 100%;
width: unset;
}
}
.RV-Icon {
@include RV-Icon;
}
.RV-Field {
display: flex;
flex-direction: row;
justify-content: space-between;
&--vertical {
flex-direction: column;
}
&--horizontal {
flex-direction: row;
}
}
@mixin RV-Button {
@include RV-Flex;
@include RV-Flex--horizontal;
align-items: center;
height: var(--height);
}
@mixin RV-Button__Icon {
height: 1.5em;
img, .RV-Image {
position: unset;
}
}
.RV-Button {
@include RV-Button;
white-space: nowrap;
overflow: hidden;
--height: 2rem;
&__Icon {
@include RV-Button__Icon;
}
}
.RV-Link {
$block: &;
text-align: center;
width: max-content;
&__Anchor {
text-decoration: none;
}
&--button {
position: relative;
background-color: gray;
padding: 10px;
#{$block}__Anchor::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
@mixin RV-Iconized__Text {
order: 10;
}
@mixin RV-Iconized__Icon--small {
--icon-size: var(--spacing-small);
}
@mixin RV-Iconized__Icon--regular {
--icon-size: var(--spacing-regular);
}
@mixin RV-Iconized__Icon--medium {
--icon-size: var(--spacing-medium);
}
@mixin RV-Iconized__Icon--large {
--icon-size: var(--spacing-large);
}
@mixin RV-Iconized__Icon--extraLarge {
--icon-size: var(--spacing-extra-large);
}
@mixin RV-Iconized__Icon--left {
* {
order: 5;
}
}
@mixin RV-Iconized__Icon--right {
* {
order: 15;
}
}
@mixin RV-Iconized__Icon {
display: contents;
* {
height: 100%;
height: var(--icon-size);
}
}
@mixin RV-Iconized {
--icon-size: var(--spacing-regular);
display: inline-flex;
position: relative;
align-items: center;
gap: calc(var(--icon-size) / 2);
}
.RV-Iconized {
@include RV-Iconized;
&__Text {
@include RV-Iconized__Text;
}
&__Icon {
@include RV-Iconized__Icon;
&--small {
@include RV-Iconized__Icon--small;
}
&--regular {
@include RV-Iconized__Icon--regular;
}
&--medium {
@include RV-Iconized__Icon--medium;
}
&--large {
@include RV-Iconized__Icon--large;
}
&--extraLarge {
@include RV-Iconized__Icon--extraLarge;
}
&--right {
@include RV-Iconized__Icon--right;
}
&--left {
@include RV-Iconized__Icon--left;
}
}
}
//
//
@mixin RV-LinkList--horizontal {
--itemHeight: var(--linkHeight);
--itemMinWidth: var(--linkWidth);
.RV-LinkList__List {
@include RV-Grid;
@include RV-Grid--autoWidth;
gap: var(--spacing);
}
}
@mixin RV-LinkList__List {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing);
}
@mixin RV-LinkList__Item {
.RV-Link {
padding: var(--linkHeight);
box-sizing: border-box;
width: 100%;
}
}
@mixin RV-LinkList {
}
.RV-LinkList {
--linkWidth: 12em;
--linkHeight: 1em;
&__List {
@include RV-LinkList__List;
}
&__Item {
@include RV-LinkList__Item;
}
&--horizontal {
@include RV-LinkList--horizontal;
}
}
.RV-Teaser {
$block: &;
@include RV-Turner(300px, 300px);
&__Image {
@include RV-Turner__Base;
}
&__Content {
@include RV-Turner__Content;
@include RV-Flex;
@include RV-Flex--vertical;
}
&--auto {
@include RV-Turner--auto;
}
&--horizontal {
@include RV-Turner--horizontal;
#{$block}__Image {
@include RV-Turner--horizontal__Base;
}
}
&--vertical {
@include RV-Turner--vertical;
}
}