mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
f5ca82575b
Changes: - Removed a logo from the logo carousel and added missing logos to the bottom row of logos on the /customers page, and increased the animation duration. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Logo carousel updated with new partner logos and reconfigured ordering: SandboxAQ, Webflow, Abridge, Coinbase, Smarter Technologies, Treeline, and Grafana Labs. * **Style** * Carousel scrolling duration increased for a smoother, more leisurely horizontal animation. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
142 lines
3.2 KiB
Text
Vendored
142 lines
3.2 KiB
Text
Vendored
|
|
/**
|
|
* <ajax-button>
|
|
*
|
|
* App-wide styles for our ajax buttons.
|
|
*/
|
|
@animation-duration: 220s;
|
|
|
|
[parasails-component='logo-carousel'] {
|
|
margin-bottom: 80px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
|
|
a {
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
[purpose='logo-carousel-bottom'], [purpose='logo-carousel-top'] {
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
img {
|
|
vertical-align: middle;
|
|
height: 32px;
|
|
margin-right: 40px;
|
|
margin-left: 4px;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
[purpose='fade-left'] {
|
|
height: 100%;
|
|
width: 80px;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
animation: none;
|
|
background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
|
|
}
|
|
[purpose='fade-right'] {
|
|
height: 100%;
|
|
width: 80px;
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
animation: none;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
|
}
|
|
}
|
|
|
|
[purpose='logo-carousel-top'] {
|
|
|
|
[purpose='logo-row'] {
|
|
white-space: nowrap;
|
|
animation: scroll-horizontal @animation-duration linear infinite;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
&.safari-13-scroll-animation {
|
|
animation: scroll-horizontal-safari-13 @animation-duration linear infinite;
|
|
}
|
|
&.ios-13-scroll-animation {
|
|
animation: scroll-horizontal-ios-13 @animation-duration linear infinite;
|
|
}
|
|
}
|
|
}
|
|
[purpose='logo-carousel-bottom'] {
|
|
margin-top: 32px;
|
|
[purpose='logo-row'] {
|
|
white-space: nowrap;
|
|
animation: scroll-horizontal-reverse @animation-duration linear infinite;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
&.safari-13-scroll-animation {
|
|
animation: scroll-horizontal-reverse-safari-13 @animation-duration linear infinite;
|
|
}
|
|
&.ios-13-scroll-animation {
|
|
animation: scroll-horizontal-reverse-ios-13 @animation-duration linear infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
margin-bottom: 64px;
|
|
[purpose='logo-carousel'] {
|
|
img {
|
|
margin-right: 48px;
|
|
}
|
|
}
|
|
}
|
|
@keyframes scroll-horizontal {
|
|
0% {
|
|
transform: translateX(50%);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
@keyframes scroll-horizontal-safari-13 {
|
|
0% {
|
|
transform: translateX(75%);
|
|
}
|
|
100% {
|
|
transform: translateX(-25%);
|
|
}
|
|
}
|
|
@keyframes scroll-horizontal-ios-13 {
|
|
0% {
|
|
transform: translateX(130%);
|
|
}
|
|
100% {
|
|
transform: translateX(-132%);
|
|
}
|
|
}
|
|
@keyframes scroll-horizontal-reverse {
|
|
0% {
|
|
transform: translateX(-50%);
|
|
}
|
|
100% {
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
@keyframes scroll-horizontal-reverse-safari-13 {
|
|
0% {
|
|
transform: translateX(-50%);
|
|
}
|
|
100% {
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
@keyframes scroll-horizontal-reverse-ios-13 {
|
|
0% {
|
|
transform: translateX(-132%);
|
|
}
|
|
100% {
|
|
transform: translateX(130%);
|
|
}
|
|
}
|
|
}
|