Apply visibility: hidden to carousel spacers in amp-carousel 0.2 (#33279

) * Apply visibility: hidden to spacer elements * Prettier
ampproject · Mar 22, 2021 · 777e394 · 777e394
1 parent e9c144b
commit 777e394
Showing 1 changed file with 27 additions and 18 deletions.
diff --git a/extensions/amp-base-carousel/0.1/carousel.css b/extensions/amp-base-carousel/0.1/carousel.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
- /**
+/**
   * We need a separate container for `position: absolute` for two reasons:
   *
   * 1. We do not want to make the scrolling area positioned, so that content
@@ -57,17 +57,17 @@
  * calculating the 100% height (or width) of the slide.
 */
 /* Firefox */
-.i-amphtml-carousel-scroll[hide-scrollbar="true"] {
-  scrollbar-width: none; 
+.i-amphtml-carousel-scroll[hide-scrollbar='true'] {
+  scrollbar-width: none;
 }
 
- /* Chrome, Safari */
-.i-amphtml-carousel-scroll[hide-scrollbar="true"]::-webkit-scrollbar {
+/* Chrome, Safari */
+.i-amphtml-carousel-scroll[hide-scrollbar='true']::-webkit-scrollbar {
   display: none;
   box-sizing: content-box !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="true"] {
+.i-amphtml-carousel-scroll[horizontal='true'] {
   flex-direction: row;
   scroll-snap-type-x: mandatory; /* Firefox, IE */
   scroll-snap-type: x mandatory;
@@ -76,7 +76,7 @@
   overflow-y: hidden;
 }
 
-.i-amphtml-carousel-scroll[horizontal="false"] {
+.i-amphtml-carousel-scroll[horizontal='false'] {
   flex-direction: column;
   scroll-snap-type-y: mandatory; /* Firefox, IE */
   scroll-snap-type: y mandatory;
@@ -85,16 +85,17 @@
   overflow-x: hidden;
 }
 
-.i-amphtml-carousel-scroll[snap="false"] {
+.i-amphtml-carousel-scroll[snap='false'] {
   scroll-snap-type: none;
 }
 
-.i-amphtml-carousel-scroll[user-scrollable="false"] {
+.i-amphtml-carousel-scroll[user-scrollable='false'] {
   overflow: hidden;
 }
 
 .i-amphtml-carousel-spacer {
-  z-index: -1;  
+  visibility: hidden;
+  z-index: -1;
 }
 
 .i-amphtml-carousel-slotted,
@@ -107,29 +108,37 @@
   scroll-snap-stop: always;
 }
 
-.i-amphtml-carousel-scroll[horizontal="true"][mixed-length="false"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="true"][mixed-length="false"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='true'][mixed-length='false']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='true'][mixed-length='false']
+  > .i-amphtml-carousel-spacer {
   /** TODO(sparhami) Do not use CSS custom property */
   width: calc(100% / var(--visible-count)) !important;
   min-width: auto !important;
   max-width: none !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="false"][mixed-length="false"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="false"][mixed-length="false"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='false'][mixed-length='false']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='false'][mixed-length='false']
+  > .i-amphtml-carousel-spacer {
   /** TODO(sparhami) Do not use CSS custom property */
   height: calc(100% / var(--visible-count)) !important;
   min-height: auto !important;
   max-height: none !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="true"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="true"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='true'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='true'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-spacer {
   max-width: 100% !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="false"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="false"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='false'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='false'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-spacer {
   max-height: 100% !important;
 }