221 lines
3.4 KiB
SCSS
221 lines
3.4 KiB
SCSS
@import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_components/_ui.elemental';
|
|
|
|
/* style elements here */
|
|
/*.element {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.element.page-header-element + .element {
|
|
margin-top: -$grid-gutter-element-height;
|
|
}
|
|
|
|
.element.page-header-element {
|
|
padding-top: $grid-gutter-element-height;
|
|
.page-header {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.site__elements__sliderelement {
|
|
.element-container {
|
|
width: 100%;
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
&:first-child {
|
|
margin-top: -(2 * $grid-gutter-element-height);
|
|
}
|
|
}
|
|
|
|
.carousel-item-Image,
|
|
.carousel-item-Video {
|
|
.carousel-slide {
|
|
flex-direction: column;
|
|
max-height: 70vh;
|
|
max-height: calc(100vh - 10.5rem);
|
|
height: 70vh;
|
|
height: calc(100vh - 10.5rem);
|
|
align-items: center;
|
|
justify-content: center;
|
|
.img {
|
|
height: 100%;
|
|
width: auto;
|
|
min-width: 100%;
|
|
img {
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
max-width: inherit;
|
|
width: auto !important;
|
|
|
|
@media (min-height: 700px) {
|
|
width: auto !important;
|
|
}
|
|
|
|
@media (min-width: 2140px) {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.video {
|
|
padding-bottom: 56.25%;
|
|
position: relative;
|
|
iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: map-get($grid-breakpoints, 'sm') - 1) {
|
|
padding-bottom: 54rem;
|
|
}
|
|
}
|
|
|
|
.carousel-title {
|
|
font-size: 4.375rem;
|
|
a {
|
|
color: $white;
|
|
}
|
|
}
|
|
.carousel-caption {
|
|
width: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 5vh;
|
|
}
|
|
.slide-link {
|
|
color: $white;
|
|
}
|
|
|
|
.carousel-caption-container {
|
|
position: absolute;
|
|
top: auto;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
background: transparentize($black, 0.5);
|
|
max-width: 60%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
@media (max-width: $full-body-min-width - 1) {
|
|
.carousel-title,
|
|
.carousel-caption,
|
|
.slide-link {
|
|
color: $black;
|
|
}
|
|
.carousel-title {
|
|
font-size: 1.6rem;
|
|
a {
|
|
color: $body-color;
|
|
}
|
|
}
|
|
.carousel-caption {
|
|
position: static;
|
|
padding: 0;
|
|
.container {
|
|
padding: 0;
|
|
}
|
|
.carousel-caption-container {
|
|
position: relative;
|
|
background: $bg-alt;
|
|
color: $black;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel-item-Video {
|
|
.carousel-slide {
|
|
height: auto !important;
|
|
@media (max-width: map-get($grid-breakpoints, 'sm') - 1) {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel-slide .video {
|
|
height: 100%;
|
|
background: $black;
|
|
iframe {
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
|
|
.dynamic__elements__image__elements__elementimage {
|
|
text-align: center;
|
|
|
|
img {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.image-element__image {
|
|
background: $black;
|
|
}
|
|
|
|
.image-element__caption {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
background: $black;
|
|
color: $white;
|
|
}
|
|
|
|
.image-element__title {
|
|
margin-bottom: 0;
|
|
line-height: 2em;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
img {
|
|
filter: grayscale(1);
|
|
}
|
|
.image-element__caption {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.site__elements__accordion {
|
|
.card {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
.card-header {
|
|
@extend .bg-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-content-sidebar {
|
|
}
|
|
.Site_Widgets_SubmenuWidget {
|
|
.nav-link {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.site__elements__instagramelement {
|
|
.jsInstagramFeed-item {
|
|
flex: 25%;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
*/
|