1091 lines
16 KiB
SCSS
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: 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;
|
|
}
|
|
} |