diff --git a/components/04_Templates/placeDetail/_placeDetail.scss b/components/04_Templates/placeDetail/_placeDetail.scss index 9f06f68..020d390 100644 --- a/components/04_Templates/placeDetail/_placeDetail.scss +++ b/components/04_Templates/placeDetail/_placeDetail.scss @@ -2,7 +2,8 @@ .LP-PlaceDetail__Image{ width: 700px; - max-height: 500px; + max-height: 500px; + @include RV-BoxShadow--simple($-grey); box-shadow: 0 0 10px $-grey; object-fit: cover; object-position: 0 0; diff --git a/components/rcss.bundled.scss b/components/rcss.bundled.scss index de37d40..f76fc20 100644 --- a/components/rcss.bundled.scss +++ b/components/rcss.bundled.scss @@ -178,6 +178,12 @@ $-spacing-large: 35px; } } +@mixin RV-FlexRow--multiRow { + &__Container { + @include RV-FlexRow__Container--multiRow; + } +} + @mixin RV-FlexRow { &__Container { @include RV-FlexRow__Container; @@ -367,14 +373,14 @@ $-spacing-large: 35px; .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; 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:""; @@ -383,7 +389,7 @@ $-spacing-large: 35px; } &--simple { - box-shadow: 0 0 20px $color; + @include RV-BoxShadow--simple($-color); } &--raised { @@ -500,6 +506,10 @@ $-spacing-large: 35px; &__Container { position: relative; + &--small { + top: -.25em; + } + &--medium { top: -.5em; } @@ -517,12 +527,19 @@ $-spacing-large: 35px; @include RV-Reset; } - &__Container--small &__Icon{ + &__Container--extraSmall &__Icon{ width: 1em; height: 1em; position: relative; top: .125em; } + + &__Container--small &__Icon{ + width: 1.5em; + height: 1.5em; + position: relative; + top: .45em; + } &__Container--medium &__Icon{ width: 2em; diff --git a/public/main.css b/public/main.css index 31ae191..712a8e5 100644 --- a/public/main.css +++ b/public/main.css @@ -225,17 +225,13 @@ .RV-BoxShadow { 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; } + float: left; } .RV-BoxShadow:before, .RV-BoxShadow:after { content: ""; position: absolute; z-index: -2; } .RV-BoxShadow--simple { - box-shadow: 0 0 20px #6b5690; } + box-shadow: 0 0 10px #6b5690; } .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; } .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { @@ -296,6 +292,8 @@ .RV-Iconized__Container { position: relative; } + .RV-Iconized__Container--small { + top: -.25em; } .RV-Iconized__Container--medium { top: -.5em; } .RV-Iconized__Container--large { @@ -312,12 +310,18 @@ right: 0; border: none; } -.RV-Iconized__Container--small .RV-Iconized__Icon { +.RV-Iconized__Container--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; 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 { width: 2em; height: 2em; @@ -1388,6 +1392,7 @@ body { width: 700px; max-height: 500px; box-shadow: 0 0 10px #565656; + box-shadow: 0 0 10px #565656; object-fit: cover; object-position: 0 0; margin: 0;