lostplaces-frontend/components/rcss.bundled.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: 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;
	}
}