bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537207170
##########
File path: website/www/site/assets/scss/_quotes.scss
##########
@@ -63,10 +63,121 @@
margin-right: 0;
}
}
+
+ // Sliding feature is only displayed on mobile version
+ .keen-slider {
+ display: none;
+ }
+
+ .dots {
+ display: none;
+ }
+
+ .keen-slider {
+ width: 327px;
+ margin: 0 auto;
+ border-radius: 16px;
+ background-color: $color-white;
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16),
+ 0 4px 4px 0 rgba(0, 0, 0, 0.06);
+
+ .keen-slider__slide {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 100%;
+ max-width: 327px;
+ height: 468px;
+ padding: 55px 24px 24px 24px;
+
+ .quote-text {
+ @extend .component-quote;
+
+ margin: 108px 0 20px 0;
+ }
+
+ img {
+ width: 172px;
+ }
+ }
+ }
+
+ .dots {
+ display: none;
+ padding: 10px 0;
+ justify-content: center;
+ margin-top: 46px;
+ }
+
+ .dot {
+ border: none;
+ width: 13px;
+ height: 13px;
+ background: $color-smoke;
+ border-radius: 50%;
+ margin: 0 5px;
+ padding: 4px;
+ cursor: pointer;
+ }
+
+ .dot:focus {
+ outline: none;
+ }
+
+ .dot--active {
+ background: $color-sun;
+ }
}
@media (max-width: $tablet) {
.quotes {
- display: none;
+ .quotes-title {
+ margin-bottom: 64px;
+ }
+
+ .quotes-desktop {
+ display: none;
+ }
+
+ .keen-slider {
+ display: flex;
+ }
+
+ .dots {
+ display: flex;
+ }
}
}
+
+/*# sourceMappingURL=keen-slider.min.css.map */
+// This is pulled from
"https://cdn.jsdelivr.net/npm/[email protected]/keen-slider.min.css"; to serve
the consistency
Review comment:
Done!
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
