mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
0d70b5f3a1
Related to: https://github.com/fleetdm/confidential/issues/13759 Changes: - Created website/assets/images/logos - Added 38 logos to the new logos folder - Updated the website's `<logo-carousel>` component to display two rows of logos and to use the new images in the images/logos folder.
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: 180s;
|
|
|
|
[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%);
|
|
}
|
|
}
|
|
}
|