lostplaces-frontend/components/rcss.bundled.scss
2020-08-25 16:26:18 +02:00

563 lines
9.0 KiB
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;
}