+++ /dev/null
-@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;
- }
- }
-
-}
--- /dev/null
+// 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;
+ }
+ }
+
+}
projects / fluidbook-html5.git / commitdiff