177 lines
3.4 KiB
CSS
177 lines
3.4 KiB
CSS
|
.g-featured-slider {
|
||
|
|
& .logo-bar-container {
|
||
|
|
display: flex;
|
||
|
|
padding: 32px 0;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
& .logo-bar {
|
||
|
|
flex-basis: 33.333%;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
transition: transform 0.2s ease;
|
||
|
|
margin-right: 32px;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .logo-container {
|
||
|
|
height: 84px;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 24px;
|
||
|
|
|
||
|
|
& picture,
|
||
|
|
& img {
|
||
|
|
object-fit: contain;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
height: 92px;
|
||
|
|
padding: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .progress-bar {
|
||
|
|
width: 100%;
|
||
|
|
height: 2px;
|
||
|
|
display: block;
|
||
|
|
background-color: var(--DEPRECATED-gray-9);
|
||
|
|
|
||
|
|
&.dark {
|
||
|
|
background-color: var(--DEPRECATED-gray-3);
|
||
|
|
}
|
||
|
|
|
||
|
|
& span {
|
||
|
|
width: 0;
|
||
|
|
background-color: var(--brand);
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
animation-duration: 10s;
|
||
|
|
&.nomad {
|
||
|
|
background-color: var(--nomad);
|
||
|
|
}
|
||
|
|
&.consul {
|
||
|
|
background-color: var(--consul);
|
||
|
|
}
|
||
|
|
&.terraform {
|
||
|
|
background-color: var(--terraform);
|
||
|
|
}
|
||
|
|
&.active {
|
||
|
|
animation-name: case-study-bar;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* When there are two case studies */
|
||
|
|
&.double {
|
||
|
|
& .logo-bar {
|
||
|
|
flex-basis: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
padding: 0 0 48px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .feature-container {
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
& .slider-container {
|
||
|
|
transition: transform 400ms ease-out;
|
||
|
|
|
||
|
|
& .slider-frame {
|
||
|
|
& .feature {
|
||
|
|
& .feature-image {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
|
||
|
|
& img,
|
||
|
|
& picture {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .feature-content {
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
& h3 {
|
||
|
|
margin: 0 0 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .single-logo {
|
||
|
|
margin-bottom: 32px;
|
||
|
|
width: 100%;
|
||
|
|
height: 65px;
|
||
|
|
|
||
|
|
& picture,
|
||
|
|
& img {
|
||
|
|
height: 100%;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .g-btn {
|
||
|
|
margin-top: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
& .feature-image {
|
||
|
|
margin-bottom: 0;
|
||
|
|
flex-basis: 60%;
|
||
|
|
margin-right: 64px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& .feature-content {
|
||
|
|
flex-basis: 40%;
|
||
|
|
text-align: left;
|
||
|
|
|
||
|
|
& p {
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
& + p {
|
||
|
|
margin-top: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.single {
|
||
|
|
& .case-study {
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes case-study-bar {
|
||
|
|
0% {
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|