From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 20 Nov 2020 19:09:50 +0000 (+0100)
Subject: wip #4083
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f3823c5192dfa620632271e9c666357888eb5109;p=fluidbook-html5.git

wip #4083
---

diff --git a/style/fluidbook.slideshow.less b/style/fluidbook.slideshow.less
deleted file mode 100644
index 0cd62ef8..00000000
--- a/style/fluidbook.slideshow.less
+++ /dev/null
@@ -1,403 +0,0 @@
-@import "variables";
-
-// Splide JS Styling (adapted from SCSS)
-@main-color: @menu-select-background;
-@light-main-color: lighten(@main-color, 20%);
-@spinner-size: 20px; // Loading spinner
-@arrow-size: 2.5em; // Arrow SVG size.
-@dot-size: 10px; // Dots indicator size.
-@progress-bar-height: 3px; // Height of a progress bar.
-
-@keyframes splide-loading {
-  0% {
-    transform: rotateZ( 0 );
-  }
-
-  100% {
-    transform: rotateZ( 360deg );
-  }
-}
-
-.splide {
-  position: relative;
-  visibility: hidden;
-  outline: none;
-
-  //=== Container
-  &__container {
-    position: relative;
-    box-sizing: border-box;
-  }
-
-  //=== Track
-  &__track {
-    position: relative;
-    z-index: 0;
-    overflow: hidden;
-  }
-
-  //=== List
-  &__list {
-    margin: 0 auto !important;
-    padding: 0 !important;
-    width: max-content;
-    will-change: transform;
-
-    .splide.is-active & {
-      display: flex;
-    }
-
-  }
-
-  //=== Slide
-  &__slide {
-    position: relative;
-    box-sizing: border-box;
-    list-style-type: none !important;
-    margin: 0;
-    outline: none;
-    flex-shrink: 0;
-
-    img {
-      vertical-align: bottom;
-    }
-
-    &__container {
-      background-size: contain !important // Don't crop images
-      //background-position: bottom !important
-    }
-
-  }
-
-  //=== Slider
-  &__slider {
-    position: relative;
-  }
-
-  //=== Arrow
-  &__arrow {
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    transform: translateY( -50% );
-    border: none;
-    padding: 0;
-    background: transparent;
-
-    svg {
-      width: @arrow-size;
-      height: @arrow-size;
-      fill: @main-color;
-      transition: fill .2s linear;
-      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
-    }
-
-    &:hover {
-      cursor: pointer;
-      svg {
-        fill: @light-main-color;
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &--prev {
-      left: 1em;
-
-      svg {
-        transform: scaleX( -1 );
-      }
-    }
-
-    &--next {
-      right: 1em;
-    }
-  }
-
-  //=== Draggable
-  &--draggable {
-    > .splide__track > .splide__list > .splide__slide {
-      user-select: none;
-    }
-  }
-
-  //=== Fade
-  &--fade {
-    > .splide__track > .splide__list {
-      display: block;
-
-      > .splide__slide {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 0;
-        opacity: 0;
-
-        &.is-active {
-          position: relative;
-          z-index: 1;
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  //=== Pagination
-  &__pagination {
-    display: inline-flex;
-    align-items: center;
-    width: 95%;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 0;
-    position: absolute;
-    z-index: 1;
-    bottom: .5em;
-    left: 50%;
-    transform: translateX( -50% );
-    padding: 0;
-
-    li {
-      list-style-type: none;
-      display: inline-block;
-      line-height: 1;
-      margin: 0;
-    }
-
-    &__page {
-      display: inline-block;
-      width: @dot-size;
-      height: @dot-size;
-      background: #ccc;
-      border-radius: 50%;
-      margin: 3px;
-      padding: 0;
-      transition: all .2s linear;
-      border: none;
-
-      &.is-active {
-        transform: scale( 1.4 );
-        background: @main-color;
-      }
-
-      &:hover {
-        cursor: pointer;
-        background: @light-main-color;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  //=== Progress
-  &__progress {
-    &__bar {
-      width: 0;
-      height: @progress-bar-height;
-      background: @main-color;
-    }
-  }
-
-  //=== Spinner
-  &__spinner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-
-    display: inline-block;
-    width: @spinner-size;
-    height: @spinner-size;
-    border-radius: 50%;
-    border: 2px solid @main-color;
-    border-left-color: transparent;
-
-    animation: splide-loading 1s infinite linear;
-  }
-
-
-  //=== Nav
-  &--nav {
-    > .splide__track > .splide__list > .splide__slide {
-      //border: 3px solid transparent;
-      cursor: pointer;
-      opacity: .7;
-
-      &.is-active {
-        //border-color: @main-color;
-        opacity: 1;
-        position: relative;
-
-        &:after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          border: 3px solid @main-color;
-        }
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  //=== RTL support
-  &--rtl {
-    direction: rtl;
-
-    > .splide__track > .splide__arrows, > .splide__arrows .splide__arrow {
-      &--prev {
-        right: 1em;
-        left: auto;
-
-        svg {
-          transform: scaleX( 1 );
-        }
-      }
-
-      &--next {
-        left: 1em;
-        right: auto;
-
-        svg {
-          transform: scaleX( -1 );
-        }
-      }
-    }
-  }
-
-  //=== Top to Bottom (Vertical) mode
-  &--ttb {
-
-    > .splide__track > .splide__list {
-      display: block;
-    }
-
-    > .splide__pagination {
-      width: auto;
-    }
-
-    > .splide__track > .splide__arrows, > .splide__arrows {
-      .splide__arrow {
-        left: 50%;
-        transform: translate( -50%, 0 );
-
-        &--prev {
-          top: 1em;
-
-          svg {
-            transform: rotateZ( -90deg );
-          }
-        }
-
-        &--next {
-          top: auto;
-          bottom: 1em;
-
-          svg {
-            transform: rotateZ( 90deg );
-          }
-        }
-      }
-    }
-
-    > .splide__pagination {
-      display: flex;
-      flex-direction: column;
-      bottom: 50%;
-      left: auto;
-      right: .5em;
-      transform: translate( 0, 50% );
-    }
-  }
-
-}
-
-
-//=======================================
-
-
-// Slideshow Module
-[data-menu="slideshow"].hidden {
-  opacity: 0 !important;
-}
-
-.fb-slideshow-wrapper {
-  padding-bottom: 60px;
-  transition: opacity 0.15s;
-
-  &.small {
-    padding-bottom: 30px;
-  }
-
-  @media (max-width: 799px) {
-    padding-bottom: 30px;
-  }
-}
-
-.fb-slideshow {
-  position: relative;
-  padding: 0 60px;
-
-  &.fb-slideshow-fullscreen {
-    padding-left: 0;
-    padding-right: 0;
-
-    .fb-slideshow-slide {
-    }
-  }
-
-  img {
-    max-width: 100%;
-    align-self: center; // Stops IE11 distorting the image
-  }
-
-  &-slide {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &-image {
-      width: auto;
-      height: auto;
-    }
-
-    &-caption {
-      font-size: @slideshow-caption-size;
-      padding: 1em 1em 0;
-    }
-  }
-
-  &-thumbnails {
-    padding: 20px 60px 0;
-
-    &.fb-slideshow-fullscreen {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    &.fb-slideshow-nothumbs {
-      display: none;
-    }
-
-    .fb-slideshow-slide:last-child {
-      margin-right: 0 !important;
-    }
-
-    img {
-      cursor: pointer;
-    }
-  }
-
-}
diff --git a/style/slideshow/splide.less b/style/slideshow/splide.less
new file mode 100644
index 00000000..c9e216cc
--- /dev/null
+++ b/style/slideshow/splide.less
@@ -0,0 +1,401 @@
+// Splide JS Styling (adapted from SCSS)
+@main-color: @menu-select-background;
+@light-main-color: lighten(@main-color, 20%);
+@spinner-size: 20px; // Loading spinner
+@arrow-size: 2.5em; // Arrow SVG size.
+@dot-size: 10px; // Dots indicator size.
+@progress-bar-height: 3px; // Height of a progress bar.
+
+@keyframes splide-loading {
+  0% {
+    transform: rotateZ( 0 );
+  }
+
+  100% {
+    transform: rotateZ( 360deg );
+  }
+}
+
+.splide {
+  position: relative;
+  visibility: hidden;
+  outline: none;
+
+  //=== Container
+  &__container {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  //=== Track
+  &__track {
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  //=== List
+  &__list {
+    margin: 0 auto !important;
+    padding: 0 !important;
+    width: max-content;
+    will-change: transform;
+
+    .splide.is-active & {
+      display: flex;
+    }
+
+  }
+
+  //=== Slide
+  &__slide {
+    position: relative;
+    box-sizing: border-box;
+    list-style-type: none !important;
+    margin: 0;
+    outline: none;
+    flex-shrink: 0;
+
+    img {
+      vertical-align: bottom;
+    }
+
+    &__container {
+      background-size: contain !important // Don't crop images
+      //background-position: bottom !important
+    }
+
+  }
+
+  //=== Slider
+  &__slider {
+    position: relative;
+  }
+
+  //=== Arrow
+  &__arrow {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY( -50% );
+    border: none;
+    padding: 0;
+    background: transparent;
+
+    svg {
+      width: @arrow-size;
+      height: @arrow-size;
+      fill: @main-color;
+      transition: fill .2s linear;
+      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    }
+
+    &:hover {
+      cursor: pointer;
+      svg {
+        fill: @light-main-color;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--prev {
+      left: 1em;
+
+      svg {
+        transform: scaleX( -1 );
+      }
+    }
+
+    &--next {
+      right: 1em;
+    }
+  }
+
+  //=== Draggable
+  &--draggable {
+    > .splide__track > .splide__list > .splide__slide {
+      user-select: none;
+    }
+  }
+
+  //=== Fade
+  &--fade {
+    > .splide__track > .splide__list {
+      display: block;
+
+      > .splide__slide {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+        opacity: 0;
+
+        &.is-active {
+          position: relative;
+          z-index: 1;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  //=== Pagination
+  &__pagination {
+    display: inline-flex;
+    align-items: center;
+    width: 95%;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0;
+    position: absolute;
+    z-index: 1;
+    bottom: .5em;
+    left: 50%;
+    transform: translateX( -50% );
+    padding: 0;
+
+    li {
+      list-style-type: none;
+      display: inline-block;
+      line-height: 1;
+      margin: 0;
+    }
+
+    &__page {
+      display: inline-block;
+      width: @dot-size;
+      height: @dot-size;
+      background: #ccc;
+      border-radius: 50%;
+      margin: 3px;
+      padding: 0;
+      transition: all .2s linear;
+      border: none;
+
+      &.is-active {
+        transform: scale( 1.4 );
+        background: @main-color;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background: @light-main-color;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  //=== Progress
+  &__progress {
+    &__bar {
+      width: 0;
+      height: @progress-bar-height;
+      background: @main-color;
+    }
+  }
+
+  //=== Spinner
+  &__spinner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+
+    display: inline-block;
+    width: @spinner-size;
+    height: @spinner-size;
+    border-radius: 50%;
+    border: 2px solid @main-color;
+    border-left-color: transparent;
+
+    animation: splide-loading 1s infinite linear;
+  }
+
+
+  //=== Nav
+  &--nav {
+    > .splide__track > .splide__list > .splide__slide {
+      //border: 3px solid transparent;
+      cursor: pointer;
+      opacity: .7;
+
+      &.is-active {
+        //border-color: @main-color;
+        opacity: 1;
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 3px solid @main-color;
+        }
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  //=== RTL support
+  &--rtl {
+    direction: rtl;
+
+    > .splide__track > .splide__arrows, > .splide__arrows .splide__arrow {
+      &--prev {
+        right: 1em;
+        left: auto;
+
+        svg {
+          transform: scaleX( 1 );
+        }
+      }
+
+      &--next {
+        left: 1em;
+        right: auto;
+
+        svg {
+          transform: scaleX( -1 );
+        }
+      }
+    }
+  }
+
+  //=== Top to Bottom (Vertical) mode
+  &--ttb {
+
+    > .splide__track > .splide__list {
+      display: block;
+    }
+
+    > .splide__pagination {
+      width: auto;
+    }
+
+    > .splide__track > .splide__arrows, > .splide__arrows {
+      .splide__arrow {
+        left: 50%;
+        transform: translate( -50%, 0 );
+
+        &--prev {
+          top: 1em;
+
+          svg {
+            transform: rotateZ( -90deg );
+          }
+        }
+
+        &--next {
+          top: auto;
+          bottom: 1em;
+
+          svg {
+            transform: rotateZ( 90deg );
+          }
+        }
+      }
+    }
+
+    > .splide__pagination {
+      display: flex;
+      flex-direction: column;
+      bottom: 50%;
+      left: auto;
+      right: .5em;
+      transform: translate( 0, 50% );
+    }
+  }
+
+}
+
+
+//=======================================
+
+
+// Slideshow Module
+[data-menu="slideshow"].hidden {
+  opacity: 0 !important;
+}
+
+.fb-slideshow-wrapper {
+  padding-bottom: 60px;
+  transition: opacity 0.15s;
+
+  &.small {
+    padding-bottom: 30px;
+  }
+
+  @media (max-width: 799px) {
+    padding-bottom: 30px;
+  }
+}
+
+.fb-slideshow {
+  position: relative;
+  padding: 0 60px;
+
+  &.fb-slideshow-fullscreen {
+    padding-left: 0;
+    padding-right: 0;
+
+    .fb-slideshow-slide {
+    }
+  }
+
+  img {
+    max-width: 100%;
+    align-self: center; // Stops IE11 distorting the image
+  }
+
+  &-slide {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &-image {
+      width: auto;
+      height: auto;
+    }
+
+    &-caption {
+      font-size: @slideshow-caption-size;
+      padding: 1em 1em 0;
+    }
+  }
+
+  &-thumbnails {
+    padding: 20px 60px 0;
+
+    &.fb-slideshow-fullscreen {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    &.fb-slideshow-nothumbs {
+      display: none;
+    }
+
+    .fb-slideshow-slide:last-child {
+      margin-right: 0 !important;
+    }
+
+    img {
+      cursor: pointer;
+    }
+  }
+
+}