/var/www/vhosts/ihelp.ro/httpdocs/webroot.dev/scss/import/blocks
Edit: /var/www/vhosts/ihelp.ro/httpdocs/webroot.dev/scss/import/blocks/_block__slider.scss (5248B)
.block__slider {
&.homepage {
display: flex;
justify-content: flex-end;
.slider-homepage {
margin: 0 -15px;
width: calc(100% + 30px);
.owl-stage-outer,
.owl-stage,
.owl-item,
.item {
height: 100%;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.text-wrapper {
background: rgba(0, 0, 0, 0.25);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 30px 15px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
h2 {
font-weight: bold;
font-size: 32px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
p {
font-size: 18px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
line-height: 1.3;
}
.btn:hover {
background: #fff;
}
}
.owl-nav {
.owl-prev,
.owl-next {
display: block;
width: 40px;
height: 40px;
background: #fff;
position: absolute;
top: 100%;
border-radius: 5px;
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 54px;
line-height: 30px;
color: $primary;
margin-top: -3px;
font-family: "Arial", sans-serif;
}
}
.owl-prev {
left: 5px;
}
.owl-next {
right: 5px;
}
}
.owl-dots {
position: absolute;
top: 100%;
left: 55px;
right: 55px;
margin-top: 5px;
text-align: center;
.owl-dot {
display: inline-block;
width: 12px;
height: 12px;
background: #fff;
border-radius: 100%;
margin: 2px;
border: 2px solid $primary;
box-shadow: 0 0 0 #000;
transition: all 300ms ease;
&.active {
background: $primary;
}
}
}
}
@media (min-width: 768px) {
.slider-homepage {
margin: 0;
height: 415px;
width: calc(100% - 320px);
.text-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20px 20px;
}
.owl-nav {
.owl-prev,
.owl-next {
position: absolute;
display: block;
top: auto;
bottom: 10px;
}
.owl-prev {
left: 15px;
}
.owl-next {
right: 15px;
}
}
.owl-dots {
bottom: 10px;
top: auto;
left: 45px;
right: 45px;
margin-top: 5px;
.owl-dot {
width: 16px;
height: 16px;
box-shadow: 0 0 3px #000;
}
}
}
}
@media (min-width: 992px) {
.slider-homepage {
.text-wrapper {
padding: 60px 80px;
}
.owl-nav {
.owl-prev,
.owl-next {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
}
.owl-prev {
left: 15px;
}
.owl-next {
right: 15px;
}
}
.owl-dots {
bottom: 10px;
top: auto;
left: 15px;
right: 15px;
}
}
}
}
}