lostplaces-frontend/components/rcss.bundled.scss

// Padding and Margin sizes

$-spacing-small: 10px;
$-spacing-medium: 25px;
$-spacing-large: 35px;

.pink {
	background-color: pink;
}
@mixin RV-Reset {
	margin: 0;
	padding: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: none;
}
@mixin RV-Alignment--top {
	display: grid;
	align-content: start;
}

@mixin RV-Alignment--bottom {
	display: grid;
	align-content: end;
}

@mixin RV-Alignment--left {
	display: grid;
	justify-content: start;
}

@mixin RV-Alignment--right {
	display: grid;
	justify-content: end;
}

@mixin RV-Alignment--horizontalCenter {
	display: grid;
	justify-content: center;
}

@mixin RV-Alignment--verticalCenter {
	display: grid;
	align-content: center;
}

@mixin RV-Alignment--center {
	@include RV-Alignment--horizontalCenter;
	@include RV-Alignment--verticalCenter;
}

@mixin RV-Alignment__Container {
	display: grid;

	&--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;
	}
}

@mixin RV-Alignment {
	&__Container {
		@include RV-Alignment__Container;
	}
}

.RV-Alignment {
	@include RV-Alignment;
}


@mixin RV-FlexRow__Container--column {
	display: flex;
	flex-direction: column;
}

@mixin RV-FlexRow__Container--multiRow {
	flex-wrap: wrap;
}

@mixin RV-FlexRow__Container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	&--multiRow {
		@include RV-FlexRow__Container--multiRow;
	}

	&--column {
		@include RV-FlexRow__Container--column;
	}
}

@mixin RV-FlexRow__Item--normal {
	flex-grow: 3;
	flex-shrink: 3;
}

@mixin RV-FlexRow__Item--narrower {
	flex-grow: 1;
	flex-shrink: 5;
}

@mixin RV-FlexRow__Item--narrow {
	flex-grow: 2;
	flex-shrink: 4;
}

@mixin RV-FlexRow__Item--wide {
	flex-grow: 4;
	flex-shrink: 2;
}
@mixin RV-FlexRow__Item--wider {
	flex-grow: 5;
	flex-shrink: 1;
}
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
	flex-grow: 0;
	flex-shrink: 0;
	width: min-content;
	flex-basis: $-width;
}

@mixin RV-FlexRow__Item {
	@include RV-Alignment;

	min-width: min-content;
	width: 100%;

	&,&--normal {
		@include RV-FlexRow__Item--normal;
	}

	&--narrower {
		@include RV-FlexRow__Item--narrower;
	}

	&--narrow {
		@include RV-FlexRow__Item--narrow;
	}

	&--wide {
		@include RV-FlexRow__Item--wide;
	}

	&--wider {
		@include RV-FlexRow__Item--wider;
	}

	&--fixedSize {
		@include RV-FlexRow__Item--fixedSize;
	}
}

@mixin RV-FlexRow {
	&__Container {
		@include RV-FlexRow__Container;
	}

	&__Item {
		@include RV-FlexRow__Item;
	}
}

.RV-FlexRow{
	@include RV-FlexRow;
}
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
	grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
	grid-auto-rows: minmax($-item_height, 1fr);
}

@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
	&__Container {
		@include RV-FlexGrid__Container($-item_width, $-item_height);
	}

	&__Item {
		@include RV-Alignment;
	}
}

.RV-FlexGrid{
	@include RV-FlexGrid;
}

@mixin RV-ContentCrop--bottom {
	img {
		object-position: botom;
	}
}

@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{
	&,* {
		overflow: hidden;
		word-break: break-all;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&--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__Container {
	@include RV-ContentCrop;
}
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
	
	&__Container#{$-suffix} {
		flex-direction: row;
	}

	&__Container#{$-suffix} &__Surface {
		min-width: $-base_width;
		height: $-base_height;
	}
}

@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') {
	&__Container#{$-suffix} {
		flex-direction: column;
		width:max-content;
	}

	&__Container#{$-suffix} &__Surface {
		width: $-base_width;
		min-height: $-base_height;
	}
}

@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') {

	&__Container#{$-suffix} {
		flex-flow: row wrap;
	}

	&__Container#{$-suffix} &__Surface {
		width: calc(100% - #{$-base_width});
		min-width: $-base-width;
		height: $-base_height;
	}
}

@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') {
	&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
		flex-grow: 1;
	}
}

@mixin RV-Fan ($-base_height, $-base_width) {
	@include RV-Fan--vertical($-base_height, $-base_width, '--vertical');
	@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal');
	@include RV-Fan--auto($-base_height, $-base_width, '--auto');
	@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth');

	&__Container {
		display: flex;
	}

	&__Base {
		height: $-base_height;
		width: $-base_width;
		flex: 0 0 auto;
	}

	&__Surface {
		@include RV-ContentCrop;
	}
}

.RV-Fan {
	@include RV-Fan(280px, 320px);
}
@mixin RV-FullWidthContent__Container {
	width: 100%;
}

@mixin RV-FullWidthContent__Item {
	width: 100%;
        @include RV-ContentCrop;
}

@mixin RV-FullWidthContent {
    &__Container {
        @include RV-FullWidthContent__Container;
    }

    &__Item {
		@include RV-FullWidthContent__Item;
    }
}

.RV-FullWidthContent {
    @include RV-FullWidthContent;
}
@mixin RV-BoxShadow($color) {

    position:relative;
    float:left;
    width:40%;
    margin:2em 10px 4em; 
    background:#fff;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

    &:before, &:after {
        content:"";
        position:absolute; 
        z-index:-2;
    }

    &--simple {
        box-shadow: 0 0 20px $color;
    }

    &--raised {
        &:after {
            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
    }

    &--liftedCorners {
          
        &:before, &:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            transform:rotate(-3deg);
        }
          
        &:after{
            right:10px; 
            left:auto;
            transform:rotate(3deg);
        }
    }
}

.RV-BoxShadow {
    @include RV-BoxShadow(#6b5690);
}
@mixin RV-ElementList {
    &__Container {
        list-style-type: none;
        @include RV-Reset;
    }

    &__Item {
        @include RV-Reset;
    }
}

.RV-ElementList {
    @include RV-ElementList;
}
@mixin RV-Spacing__Outer--small {
    margin: $-spacing-small;
}

@mixin RV-Spacing__Outer--medium {
    margin: $-spacing-medium;
}

@mixin RV-Spacing__Outer--large {
    margin: $-spacing-large;
}


@mixin RV-Spacing__Inner--small($-container-suffix: '__Container')  {
	padding: $-spacing-small;
	&#{$-container-suffix} {
		gap: $-spacing-small;
	}
}

@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container')  {
    padding: $-spacing-medium;
    &#{$-container-suffix} {
		gap: $-spacing-medium;
	}
}

@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') {
    padding: $-spacing-large;
    &#{$-container-suffix} {
		gap: $-spacing-large;
	}
}

@mixin RV-Spacing {
    &__Outer{
        &--small {
            @include RV-Spacing__Outer--small;
        }

        &--medium {
            @include RV-Spacing__Outer--medium;
        }

        &--large {
            @include RV-Spacing__Outer--large;
        }
    }

    &__Inner{
        &--small {
            @include RV-Spacing__Inner--small('');
        }

        &--medium {
            @include RV-Spacing__Inner--medium('');
        }

        &--large {
            @include RV-Spacing__Inner--large('');
        }
    }
}

.RV-Spacing {
    @include RV-Spacing;
}
.RV-Iconized {
	&__Container {
		position: relative;

		&--medium {
			top: -.5em;
		}

		&--large {
			top: -1.03073em;
		}

		&--huge {
			top: -2.05em;
		}
	}

	&__Icon {
		@include RV-Reset;
	}

	&__Container--small &__Icon{
		width: 1em;
		height: 1em;
		position: relative;
		top: .125em;
	}
	&__Container--medium &__Icon{
		width: 2em;
		height: 2em;
		position: relative;
		top: .625em;
	}
	&__Container--large &__Icon{
		width: 3em;
		height: 3em;
		position: relative;
		top: 1.15573em;
	}
	&__Container--huge &__Icon{
		width: 5em;
		height: 5em;
		position: relative;
		top: 2.175em;
	}
}

@mixin RV-ImageGrid {
    @include RV-ElementList;
    @include RV-FlexGrid;

    &__Container {
        @include RV-Spacing__Inner--medium;
    }

    &__Item {
        @include RV-ContentCrop;
        @include RV-ContentCrop--center;
    }
}

.RV-ImageGrid {
    @include RV-ImageGrid;
}