Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

All the boxshadow

Browse Source
This commit is contained in:
reverend 2020-08-27 15:47:03 +02:00
parent 6a1e281b3e
commit 607de24c14
3 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/04_Templates/placeDetail/_placeDetail.scss
View File

@ -3,6 +3,7 @@
.LP-PlaceDetail__Image{ .LP-PlaceDetail__Image{
width: 700px; width: 700px;
max-height: 500px; max-height: 500px;
@include RV-BoxShadow--simple($-grey);
box-shadow: 0 0 10px $-grey; box-shadow: 0 0 10px $-grey;
object-fit: cover; object-fit: cover;
object-position: 0 0; object-position: 0 0;

31
components/rcss.bundled.scss
View File

@ -178,6 +178,12 @@ $-spacing-large: 35px;
} }
} }
@mixin RV-FlexRow--multiRow {
&__Container {
@include RV-FlexRow__Container--multiRow;
}
}
@mixin RV-FlexRow { @mixin RV-FlexRow {
&__Container { &__Container {
@include RV-FlexRow__Container; @include RV-FlexRow__Container;
@ -367,14 +373,14 @@ $-spacing-large: 35px;
.RV-FullWidthContent { .RV-FullWidthContent {
@include RV-FullWidthContent; @include RV-FullWidthContent;
} }
@mixin RV-BoxShadow($color) { @mixin RV-BoxShadow--simple($-color) {
box-shadow: 0 0 10px $-color;
}
@mixin RV-BoxShadow($-color) {
position:relative; position:relative;
float:left; 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 { &:before, &:after {
content:""; content:"";
@ -383,7 +389,7 @@ $-spacing-large: 35px;
} }
&--simple { &--simple {
box-shadow: 0 0 20px $color; @include RV-BoxShadow--simple($-color);
} }
&--raised { &--raised {
@ -500,6 +506,10 @@ $-spacing-large: 35px;
&__Container { &__Container {
position: relative; position: relative;
&--small {
top: -.25em;
}
&--medium { &--medium {
top: -.5em; top: -.5em;
} }
@ -517,13 +527,20 @@ $-spacing-large: 35px;
@include RV-Reset; @include RV-Reset;
} }
&__Container--small &__Icon{ &__Container--extraSmall &__Icon{
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
top: .125em; top: .125em;
} }
&__Container--small &__Icon{
width: 1.5em;
height: 1.5em;
position: relative;
top: .45em;
}
&__Container--medium &__Icon{ &__Container--medium &__Icon{
width: 2em; width: 2em;
height: 2em; height: 2em;

19
public/main.css
View File

@ -225,17 +225,13 @@
.RV-BoxShadow { .RV-BoxShadow {
position: relative; position: relative;
float: left; 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; }
.RV-BoxShadow:before, .RV-BoxShadow:after { .RV-BoxShadow:before, .RV-BoxShadow:after {
content: ""; content: "";
position: absolute; position: absolute;
z-index: -2; } z-index: -2; }
.RV-BoxShadow--simple { .RV-BoxShadow--simple {
box-shadow: 0 0 20px #6b5690; } box-shadow: 0 0 10px #6b5690; }
.RV-BoxShadow--raised:after { .RV-BoxShadow--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; } 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; }
.RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after {
@ -296,6 +292,8 @@
.RV-Iconized__Container { .RV-Iconized__Container {
position: relative; } position: relative; }
.RV-Iconized__Container--small {
top: -.25em; }
.RV-Iconized__Container--medium { .RV-Iconized__Container--medium {
top: -.5em; } top: -.5em; }
.RV-Iconized__Container--large { .RV-Iconized__Container--large {
@ -312,12 +310,18 @@
right: 0; right: 0;
border: none; } border: none; }
.RV-Iconized__Container--small .RV-Iconized__Icon { .RV-Iconized__Container--extraSmall .RV-Iconized__Icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
top: .125em; } top: .125em; }
.RV-Iconized__Container--small .RV-Iconized__Icon {
width: 1.5em;
height: 1.5em;
position: relative;
top: .45em; }
.RV-Iconized__Container--medium .RV-Iconized__Icon { .RV-Iconized__Container--medium .RV-Iconized__Icon {
width: 2em; width: 2em;
height: 2em; height: 2em;
@ -1388,6 +1392,7 @@ body {
width: 700px; width: 700px;
max-height: 500px; max-height: 500px;
box-shadow: 0 0 10px #565656; box-shadow: 0 0 10px #565656;
box-shadow: 0 0 10px #565656;
object-fit: cover; object-fit: cover;
object-position: 0 0; object-position: 0 0;
margin: 0; margin: 0;