Skip to content

Instantly share code, notes, and snippets.

@mattparlane
Created November 21, 2023 02:47
Show Gist options
  • Save mattparlane/dbc659081d10d5cfd0f866b76b1c4622 to your computer and use it in GitHub Desktop.
Save mattparlane/dbc659081d10d5cfd0f866b76b1c4622 to your computer and use it in GitHub Desktop.
#component {
position: relative;
#slider-component-2 {
background: $outer_bg_color;
padding: 40px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: $background_horizontal_position $background_vertical_position;
width: 100%;
height: 100%;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5); /* Adjust the color and opacity as needed */
}
}
.carousel-inner {
width: 70%;
margin: 60px auto;
overflow: unset !important;
.carousel-item{
margin-top: 2rem;
background: white;
height: 100%;
border: 1px solid #ddd;
.carousel-content {
border: 1px solid #ddd;
background: #fff;
margin: auto;
height: 100%;
.img-fluid {
max-width: 100%;
object-fit: cover;
width: 100%;
}
.author_review {
margin: 40px;
}
/* Default styles */
.dynamic-row {
display: flex;
flex-direction: row;
background-color: $testimonial_box_background_colour;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.dynamic-column {
display: flex;
}
/* Desktop */
@media (min-width: 768px) {
.dynamic-column {
display: flex;
&:first-child {
width: $horizontal_split_ratio;
}
&:last-child {
width: 100% - $horizontal_split_ratio;
}
&:only-child {
width: 100%;
}
}
}
/* Mobile */
@media(max-width: 768px) {
.dynamic-row {
display: flex;
flex-direction: column;
}
.dynamic-column {
display: flex;
width: auto;
text-align: center;
}
}
}
}
}
ol.indicators {
width: 60%;
margin: 0 auto;
padding: 0;
list-style-type: none!important;
position: relative;
cursor: pointer;
li {
width: 20px;
display: inline-block;
height: 20px;
border-radius: 20px;
margin: 0 3px;
.svg-inline--fa {
width: 20px;
display: inline-block;
height: 20px;
border-radius: 20px;
color: $indicator_color;
}
}
li.active {
.svg-inline--fa {
color: $indicator_active_color!important;
}
}
:hover {
.svg-inline--fa {
color: $hover_color;
}
}
}
.carousel-control-next,
.carousel-control-prev {
color: $chevron_color;
width: 25px;
opacity: 1;
.carousel-control-icon-slider-2 {
width: 100px;
height: 100px;
}
&:hover {
color: $hover_color;
}
}
.carousel-control-prev {
left: 7%;
top: 60px;
width: 80px;
}
.carousel-control-next {
right: 7%;
top: 60px;
width: 80px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment