Przeglądaj źródła

Refactoring packages, the CSS and the build system.

NaotoshiFujita 3 lat temu
rodzic
commit
b70791dffe
80 zmienionych plików z 481 dodań i 396 usunięć
  1. 1 1
      dist/css/splide-core.min.css
  2. 0 0
      dist/css/splide.min.css
  3. 0 0
      dist/css/themes/splide-default.min.css
  4. 0 0
      dist/css/themes/splide-sea-green.min.css
  5. 0 0
      dist/css/themes/splide-skyblue.min.css
  6. 45 45
      dist/js/splide.esm.js
  7. 5 5
      dist/js/splide.js
  8. 1 1
      dist/js/splide.min.js
  9. BIN
      dist/js/splide.min.js.gz
  10. 55 0
      gulp/build-css.js
  11. 36 0
      gulp/build-js.js
  12. 6 141
      gulpfile.js
  13. 3 2
      jest.config.js
  14. 122 78
      package-lock.json
  15. 11 8
      package.json
  16. 0 0
      src/css/core/foundation/animations.scss
  17. 2 0
      src/css/core/foundation/variables.scss
  18. 4 0
      src/css/core/index.scss
  19. 0 0
      src/css/core/object/modifiers/draggable.scss
  20. 0 0
      src/css/core/object/modifiers/fade.scss
  21. 4 0
      src/css/core/object/modifiers/index.scss
  22. 0 0
      src/css/core/object/modifiers/rtl.scss
  23. 0 0
      src/css/core/object/modifiers/ttb.scss
  24. 0 0
      src/css/core/object/objects/container.scss
  25. 8 0
      src/css/core/object/objects/index.scss
  26. 0 0
      src/css/core/object/objects/list.scss
  27. 0 0
      src/css/core/object/objects/pagination.scss
  28. 0 0
      src/css/core/object/objects/root.scss
  29. 0 0
      src/css/core/object/objects/slide.scss
  30. 0 0
      src/css/core/object/objects/slider.scss
  31. 3 1
      src/css/core/object/objects/spinner.scss
  32. 0 0
      src/css/core/object/objects/track.scss
  33. 11 0
      src/css/themes/default/foundation/variables.scss
  34. 3 0
      src/css/themes/default/index.scss
  35. 3 0
      src/css/themes/default/object/modifiers/index.scss
  36. 0 0
      src/css/themes/default/object/modifiers/nav.scss
  37. 0 0
      src/css/themes/default/object/modifiers/rtl.scss
  38. 0 0
      src/css/themes/default/object/modifiers/ttb.scss
  39. 4 1
      src/css/themes/default/object/objects/arrow.scss
  40. 3 0
      src/css/themes/default/object/objects/index.scss
  41. 2 0
      src/css/themes/default/object/objects/pagination.scss
  42. 3 1
      src/css/themes/default/object/objects/progress.scss
  43. 17 0
      src/css/themes/sea-green/foundation/variables.scss
  44. 3 0
      src/css/themes/sea-green/index.scss
  45. 3 0
      src/css/themes/sea-green/object/modifiers/index.scss
  46. 4 2
      src/css/themes/sea-green/object/modifiers/nav.scss
  47. 0 0
      src/css/themes/sea-green/object/modifiers/rtl.scss
  48. 5 3
      src/css/themes/sea-green/object/modifiers/ttb.scss
  49. 6 3
      src/css/themes/sea-green/object/objects/arrow.scss
  50. 7 0
      src/css/themes/sea-green/object/objects/index.scss
  51. 6 2
      src/css/themes/sea-green/object/objects/pagination.scss
  52. 13 0
      src/css/themes/sea-green/object/objects/progress.scss
  53. 0 0
      src/css/themes/sea-green/object/objects/root.scss
  54. 0 0
      src/css/themes/sea-green/object/objects/slide.scss
  55. 8 0
      src/css/themes/sea-green/object/objects/spinner.scss
  56. 5 0
      src/css/themes/sea-green/variables/colors.scss
  57. 14 0
      src/css/themes/skyblue/foundation/variables.scss
  58. 3 0
      src/css/themes/skyblue/index.scss
  59. 3 0
      src/css/themes/skyblue/object/modifiers/index.scss
  60. 4 2
      src/css/themes/skyblue/object/modifiers/nav.scss
  61. 0 0
      src/css/themes/skyblue/object/modifiers/rtl.scss
  62. 0 0
      src/css/themes/skyblue/object/modifiers/ttb.scss
  63. 7 3
      src/css/themes/skyblue/object/objects/arrow.scss
  64. 5 0
      src/css/themes/skyblue/object/objects/index.scss
  65. 7 3
      src/css/themes/skyblue/object/objects/pagination.scss
  66. 13 0
      src/css/themes/skyblue/object/objects/progress.scss
  67. 8 0
      src/css/themes/skyblue/object/objects/spinner.scss
  68. 5 0
      src/css/themes/skyblue/variables/colors.scss
  69. 0 2
      src/sass/core/foundation/_variables.scss
  70. 0 5
      src/sass/core/splide-core.scss
  71. 0 11
      src/sass/themes/default/foundation/_variables.scss
  72. 0 5
      src/sass/themes/default/splide-default.scss
  73. 0 17
      src/sass/themes/sea-green/foundation/_variables.scss
  74. 0 9
      src/sass/themes/sea-green/object/objects/_progress.scss
  75. 0 6
      src/sass/themes/sea-green/object/objects/_spinner.scss
  76. 0 5
      src/sass/themes/sea-green/splide-sea-green.scss
  77. 0 14
      src/sass/themes/sky-blue/foundation/_variables.scss
  78. 0 9
      src/sass/themes/sky-blue/object/objects/_progress.scss
  79. 0 6
      src/sass/themes/sky-blue/object/objects/_spinner.scss
  80. 0 5
      src/sass/themes/sky-blue/splide-sky-blue.scss

+ 1 - 1
dist/css/splide-core.min.css

@@ -1 +1 @@
-@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{box-sizing:border-box;position:relative}.splide__list{margin:0!important;padding:0!important;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{align-items:center;display:inline-flex;flex-wrap:wrap;justify-content:center;margin:0;width:95%}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0}.splide{visibility:hidden}.splide,.splide__slide{outline:none;position:relative}.splide__slide{box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}.splide__container{box-sizing:border-box;position:relative}.splide__list{margin:0!important;padding:0!important;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{align-items:center;display:inline-flex;flex-wrap:wrap;justify-content:center;margin:0;width:95%}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0}.splide{visibility:hidden}.splide,.splide__slide{outline:none;position:relative}.splide__slide{box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}

Plik diff jest za duży
+ 0 - 0
dist/css/splide.min.css


Plik diff jest za duży
+ 0 - 0
dist/css/themes/splide-default.min.css


Plik diff jest za duży
+ 0 - 0
dist/css/themes/splide-sea-green.min.css


Plik diff jest za duży
+ 0 - 0
dist/css/themes/splide-skyblue.min.css


+ 45 - 45
dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.21
+ * Version  : 2.4.22
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -14,39 +14,39 @@
 	else
 		root["Splide"] = factory();
 })(self, function() {
-return /******/ (() => { // webpackBootstrap
+return /******/ (function() { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	// The require scope
 /******/ 	var __webpack_require__ = {};
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
+/******/ 	!function() {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 		__webpack_require__.d = function(exports, definition) {
 /******/ 			for(var key in definition) {
 /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
 /******/ 		};
-/******/ 	})();
+/******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
+/******/ 	!function() {
+/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
+/******/ 	!function() {
 /******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
+/******/ 		__webpack_require__.r = function(exports) {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
 /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
 /******/ 		};
-/******/ 	})();
+/******/ 	}();
 /******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
@@ -55,18 +55,18 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* binding */ module_Splide)
+  "default": function() { return /* binding */ module_Splide; }
 });
 
 // NAMESPACE OBJECT: ./src/js/constants/states.js
 var states_namespaceObject = {};
 __webpack_require__.r(states_namespaceObject);
 __webpack_require__.d(states_namespaceObject, {
-  "CREATED": () => (CREATED),
-  "DESTROYED": () => (DESTROYED),
-  "IDLE": () => (IDLE),
-  "MOUNTED": () => (MOUNTED),
-  "MOVING": () => (MOVING)
+  "CREATED": function() { return CREATED; },
+  "DESTROYED": function() { return DESTROYED; },
+  "IDLE": function() { return IDLE; },
+  "MOUNTED": function() { return MOUNTED; },
+  "MOVING": function() { return MOVING; }
 });
 
 ;// CONCATENATED MODULE: ./src/js/core/event.js
@@ -80,7 +80,7 @@ __webpack_require__.d(states_namespaceObject, {
 /**
  * The function for providing an Event object simply managing events.
  */
-/* harmony default export */ const core_event = (function () {
+/* harmony default export */ var core_event = (function () {
   /**
    * Store all event data.
    *
@@ -197,7 +197,7 @@ __webpack_require__.d(states_namespaceObject, {
  *
  * @param {string|number} initialState - Provide the initial state value.
  */
-/* harmony default export */ const state = (function (initialState) {
+/* harmony default export */ var state = (function (initialState) {
   /**
    * Store the current state.
    *
@@ -724,7 +724,7 @@ var FADE = 'fade';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const slide = (function (Splide, Components) {
+/* harmony default export */ var slide = (function (Splide, Components) {
   /**
    * Hold the list element.
    *
@@ -797,7 +797,7 @@ var FADE = 'fade';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const fade = (function (Splide, Components) {
+/* harmony default export */ var fade = (function (Splide, Components) {
   var Fade = {
     /**
      * Called when the component is mounted.
@@ -1859,7 +1859,7 @@ var Splide = /*#__PURE__*/function () {
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const options = (function (Splide) {
+/* harmony default export */ var options = (function (Splide) {
   /**
    * Retrieve options from the data attribute.
    * Note that IE10 doesn't support dataset property.
@@ -1946,7 +1946,7 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
  * @return {Object} - The sub component object.
  */
 
-/* harmony default export */ const elements_slide = (function (Splide, index, realIndex, slide) {
+/* harmony default export */ var elements_slide = (function (Splide, index, realIndex, slide) {
   /**
    * Whether to update "is-active" class before or after transition.
    *
@@ -2169,7 +2169,7 @@ var UID_NAME = 'uid';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const components_elements = (function (Splide, Components) {
+/* harmony default export */ var components_elements = (function (Splide, Components) {
   /**
    * Hold the root element.
    *
@@ -2443,7 +2443,7 @@ var floor = Math.floor;
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const controller = (function (Splide, Components) {
+/* harmony default export */ var controller = (function (Splide, Components) {
   /**
    * Store current options.
    *
@@ -2756,7 +2756,7 @@ var abs = Math.abs;
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const track = (function (Splide, Components) {
+/* harmony default export */ var track = (function (Splide, Components) {
   /**
    * Hold the Layout component.
    *
@@ -3091,7 +3091,7 @@ var abs = Math.abs;
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const clones = (function (Splide, Components) {
+/* harmony default export */ var clones = (function (Splide, Components) {
   /**
    * Store information of all clones.
    *
@@ -3279,7 +3279,7 @@ var abs = Math.abs;
  * @return {Object} - The resolver object.
  */
 
-/* harmony default export */ const horizontal = (function (Splide, Components) {
+/* harmony default export */ var horizontal = (function (Splide, Components) {
   /**
    * Keep the Elements component.
    *
@@ -3438,7 +3438,7 @@ var abs = Math.abs;
  * @return {Object} - The resolver object.
  */
 
-/* harmony default export */ const vertical = (function (Splide, Components) {
+/* harmony default export */ var vertical = (function (Splide, Components) {
   /**
    * Keep the Elements component.
    *
@@ -3686,7 +3686,7 @@ function createInterval(callback, interval, progress) {
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const layout = (function (Splide, Components) {
+/* harmony default export */ var layout = (function (Splide, Components) {
   /**
    * Keep the Elements component.
    *
@@ -3823,7 +3823,7 @@ var FRICTION_REDUCER = 7;
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const drag = (function (Splide, Components) {
+/* harmony default export */ var drag = (function (Splide, Components) {
   /**
    * Store the Move component.
    *
@@ -4147,7 +4147,7 @@ var FRICTION_REDUCER = 7;
  *
  * @return {Object} - The component object.
  */
-/* harmony default export */ const click = (function (Splide, Components) {
+/* harmony default export */ var click = (function (Splide, Components) {
   /**
    * Whether click is disabled or not.
    *
@@ -4228,7 +4228,7 @@ var PAUSE_FLAGS = {
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const autoplay = (function (Splide, Components, name) {
+/* harmony default export */ var autoplay = (function (Splide, Components, name) {
   /**
    * Store pause flags.
    *
@@ -4404,7 +4404,7 @@ var PAUSE_FLAGS = {
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const cover = (function (Splide, Components) {
+/* harmony default export */ var cover = (function (Splide, Components) {
   /**
    * Hold options.
    *
@@ -4526,7 +4526,7 @@ var SIZE = 40;
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const arrows = (function (Splide, Components, name) {
+/* harmony default export */ var arrows = (function (Splide, Components, name) {
   /**
    * Previous arrow element.
    *
@@ -4657,7 +4657,7 @@ var SIZE = 40;
 
   function appendArrows() {
     var wrapper = create('div', {
-      "class": classes.arrows
+      class: classes.arrows
     });
     append(wrapper, prev);
     append(wrapper, next);
@@ -4714,7 +4714,7 @@ var UPDATE_EVENT = 'updated.page refresh.page';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const pagination = (function (Splide, Components, name) {
+/* harmony default export */ var pagination = (function (Splide, Components, name) {
   /**
    * Store all data for pagination.
    * - list: A list element.
@@ -4844,14 +4844,14 @@ var UPDATE_EVENT = 'updated.page refresh.page';
     var options = Splide.options;
     var classes = Splide.classes;
     var list = create('ul', {
-      "class": classes.pagination
+      class: classes.pagination
     });
     var items = Elements.getSlides(false).filter(function (Slide) {
       return options.focus !== false || Slide.index % options.perPage === 0;
     }).map(function (Slide, page) {
       var li = create('li', {});
       var button = create('button', {
-        "class": classes.page,
+        class: classes.page,
         type: 'button'
       });
       append(li, button);
@@ -4908,7 +4908,7 @@ var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const lazyload = (function (Splide, Components, name) {
+/* harmony default export */ var lazyload = (function (Splide, Components, name) {
   /**
    * Next index for sequential loading.
    *
@@ -5029,7 +5029,7 @@ var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
   function load(img, Slide) {
     addClass(Slide.slide, STATUS_CLASSES.loading);
     var spinner = create('span', {
-      "class": Splide.classes.spinner
+      class: Splide.classes.spinner
     });
     append(img.parentElement, spinner);
 
@@ -5180,7 +5180,7 @@ var KEY_MAP = {
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const keyboard = (function (Splide) {
+/* harmony default export */ var keyboard = (function (Splide) {
   /**
    * Hold the target element.
    *
@@ -5240,7 +5240,7 @@ var KEY_MAP = {
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const a11y = (function (Splide, Components) {
+/* harmony default export */ var a11y = (function (Splide, Components) {
   /**
    * Hold a i18n object.
    *
@@ -5511,7 +5511,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const sync = (function (Splide) {
+/* harmony default export */ var sync = (function (Splide) {
   /**
    * Keep the sibling Splide instance.
    *
@@ -5663,7 +5663,7 @@ var THROTTLE = 50;
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ const breakpoints = (function (Splide) {
+/* harmony default export */ var breakpoints = (function (Splide) {
   /**
    * Store breakpoints.
    *

+ 5 - 5
dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.21
+ * Version  : 2.4.22
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -4642,7 +4642,7 @@ var SIZE = 40;
 
   function appendArrows() {
     var wrapper = create('div', {
-      "class": classes.arrows
+      class: classes.arrows
     });
     append(wrapper, prev);
     append(wrapper, next);
@@ -4829,14 +4829,14 @@ var UPDATE_EVENT = 'updated.page refresh.page';
     var options = Splide.options;
     var classes = Splide.classes;
     var list = create('ul', {
-      "class": classes.pagination
+      class: classes.pagination
     });
     var items = Elements.getSlides(false).filter(function (Slide) {
       return options.focus !== false || Slide.index % options.perPage === 0;
     }).map(function (Slide, page) {
       var li = create('li', {});
       var button = create('button', {
-        "class": classes.page,
+        class: classes.page,
         type: 'button'
       });
       append(li, button);
@@ -5014,7 +5014,7 @@ var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
   function load(img, Slide) {
     addClass(Slide.slide, STATUS_CLASSES.loading);
     var spinner = create('span', {
-      "class": Splide.classes.spinner
+      class: Splide.classes.spinner
     });
     append(img.parentElement, spinner);
 

Plik diff jest za duży
+ 1 - 1
dist/js/splide.min.js


BIN
dist/js/splide.min.js.gz


+ 55 - 0
gulp/build-css.js

@@ -0,0 +1,55 @@
+const { src, dest } = require( 'gulp' );
+const sass         = require( 'gulp-dart-sass' );
+const postcss      = require( 'gulp-postcss' );
+const cssnano      = require( 'cssnano' );
+const autoprefixer = require( 'autoprefixer' );
+const rename       = require( 'gulp-rename' );
+const through      = require( 'through2' );
+const fs           = require( 'fs' );
+const path         = require( 'path' );
+
+function buildCss() {
+	return src( [
+		'./src/css/core/index.scss',
+		'./src/css/themes/default/index.scss',
+		'./src/css/themes/sea-green/index.scss',
+		'./src/css/themes/skyblue/index.scss',
+	], { base: 'src' } )
+		.pipe( sass() )
+		.pipe( postcss( [
+			cssnano( { reduceIdents: false } ),
+			autoprefixer(),
+		] ) )
+		.pipe( rename( path => {
+			const fragments = path.dirname.split( '\\' );
+			const dirname   = fragments.slice( 0, -1 ).join( '\\' );
+
+			return {
+				dirname,
+				basename: `splide-${ fragments[ fragments.length - 1 ] }.min`,
+				extname : '.css',
+			};
+		} ) )
+		.pipe( dest( 'dist' ) )
+		.pipe( copy() );
+}
+
+function copy() {
+	return through( { objectMode: true }, ( file, encoding, cb ) => {
+		if ( file.path.includes( 'splide-default' ) ) {
+			const result    = path.parse( file.path );
+			const fragments = result.dir.split( '\\' );
+			const dirname   = fragments.slice( 0, -1 ).join( '\\' );
+
+			fs.copyFile( file.path, `${ dirname }\\splide.min.css`, error => {
+				if ( error ) {
+					throw error;
+				}
+			} );
+		}
+
+		cb( null, file );
+	} );
+}
+
+module.exports = buildCss;

+ 36 - 0
gulp/build-js.js

@@ -0,0 +1,36 @@
+const gulp          = require( 'gulp' );
+const webpack       = require( 'webpack' );
+const webpackStream = require( 'webpack-stream' );
+const gzip          = require( 'gulp-gzip' );
+
+
+const js = {
+	complete: {
+		path: '../build/complete/config',
+		dest: './dist/js',
+	},
+	minified: {
+		path: '../build/complete/config-min',
+		dest: './dist/js',
+		gzip: true,
+	},
+	module: {
+		path: '../build/module/config',
+		dest: './dist/js',
+	},
+};
+
+function buildJs( done ) {
+	Object.values( js ).forEach( settings => {
+		const stream = webpackStream( { config: require( settings.path ) }, webpack )
+			.pipe( gulp.dest( settings.dest ) );
+
+		if ( settings.gzip ) {
+			stream.pipe( gzip() ).pipe( gulp.dest( settings.dest ) );
+		}
+	} );
+
+	done();
+}
+
+module.exports = buildJs;

+ 6 - 141
gulpfile.js

@@ -1,142 +1,7 @@
-'use strict';
+const { parallel } = require( 'gulp' );
+const buildCss = require( './gulp/build-css' );
+const buildJs  = require( './gulp/build-js' );
 
-/*
- * Dependencies.
- */
-const gulp          = require( 'gulp' );
-const rename        = require( 'gulp-rename' );
-const sass          = require( 'gulp-dart-sass' );
-const sassGlob      = require( 'gulp-sass-glob' );
-const postcss       = require( 'gulp-postcss' );
-const autoprefixer  = require( 'autoprefixer' );
-const cssnano       = require( 'cssnano' );
-const merge         = require( 'merge-stream' );
-const concat        = require( 'gulp-concat' );
-const webpack       = require( 'webpack' );
-const webpackStream = require( 'webpack-stream' );
-const eslint        = require( 'gulp-eslint' );
-const gzip          = require( 'gulp-gzip' );
-
-/*
- * Webpack config paths.
- */
-const js = {
-	complete: {
-		path: './build/complete/config',
-		dest: './dist/js',
-	},
-	minified: {
-		path: './build/complete/config-min',
-		dest: './dist/js',
-		gzip: true,
-	},
-	modular: {
-		path: './build/module/config',
-		dest: './dist/js',
-	},
-};
-
-/*
- * Path definitions.
- */
-const css = {
-	all: {
-		path : './src/sass/core/*.scss',
-		dest : './dist/css',
-		merge: {
-			filename: 'splide.css',
-			path    : './src/sass/themes/default/*.scss',
-		},
-	},
-	core: {
-		path: './src/sass/core/*.scss',
-		dest: './dist/css',
-	},
-	default: {
-		path    : './src/sass/core/*.scss',
-		dest    : './dist/css/themes',
-		basename: 'splide-default',
-		merge   : {
-			filename: 'splide.css',
-			path    : './src/sass/themes/default/*.scss',
-		},
-	},
-	skyblue: {
-		path    : './src/sass/core/*.scss',
-		dest    : './dist/css/themes',
-		basename: 'splide-skyblue',
-		merge   : {
-			filename: 'splide.css',
-			path    : './src/sass/themes/sky-blue/*.scss',
-		},
-	},
-	seagreen: {
-		path    : './src/sass/core/*.scss',
-		dest    : './dist/css/themes',
-		basename: 'splide-sea-green',
-		merge   : {
-			filename: 'splide.css',
-			path    : './src/sass/themes/sea-green/*.scss',
-		},
-	},
-};
-
-/*
- * Build a script file.
- */
-gulp.task( 'build:js', done => {
-	Object.values( js ).forEach( settings => {
-		const stream = webpackStream( { config: require( settings.path ) }, webpack )
-			.pipe( gulp.dest( settings.dest ) );
-
-		if ( settings.gzip ) {
-			stream.pipe( gzip() ).pipe( gulp.dest( settings.dest ) );
-		}
-	} );
-
-	done();
-} );
-
-/*
- * Build sass files.
- */
-gulp.task( 'build:sass', done => {
-	Object.values( css ).forEach( settings => {
-		let stream = gulp.src( settings.path );
-
-		if ( settings.merge ) {
-			stream = merge( stream, gulp.src( settings.merge.path ) )
-				.pipe( sassGlob() )
-				.pipe( sass() )
-				.pipe( concat( settings.merge.filename ) );
-		}
-
-		stream = stream
-			.pipe( sassGlob() )
-			.pipe( sass() )
-			.pipe( postcss( [
-				cssnano( { reduceIdents: false } ),
-				autoprefixer( { overrideBrowserslist: [ '> 5%' ] } )
-			] ) );
-
-		if ( settings.basename ) {
-			stream = stream.pipe( rename( { basename: settings.basename } ) );
-		}
-
-		stream
-			.pipe( rename( { suffix: '.min' } ) )
-			.pipe( gulp.dest( settings.dest ) );
-	} );
-
-	done();
-} );
-
-/*
- * Run lint.
- */
-gulp.task( 'lint', () => {
-	return gulp.src( [ './src/**/*.js', './tests/**/*.js' ] )
-		.pipe( eslint( { useEslintrc: true } ) )
-		.pipe( eslint.format() )
-		.pipe( eslint.failAfterError() );
-} );
+exports[ 'build:js' ]  = buildJs;
+exports[ 'build:css' ] = buildCss;
+exports[ 'build:all' ] = parallel( buildJs, buildCss );

+ 3 - 2
jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-	rootDir: './tests',
-};
+	rootDir        : './tests',
+	testEnvironment: 'jsdom',
+};

+ 122 - 78
package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.21",
+  "version": "2.4.22",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5061,6 +5061,18 @@
       "requires": {
         "graceful-fs": "^4.1.11",
         "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "fs-write-stream-atomic": {
@@ -5435,6 +5447,18 @@
         "concat-with-sourcemaps": "^1.0.0",
         "through2": "^2.0.0",
         "vinyl": "^2.0.0"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "gulp-dart-sass": {
@@ -5467,6 +5491,16 @@
           "requires": {
             "ansi-regex": "^3.0.0"
           }
+        },
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
         }
       }
     },
@@ -5493,6 +5527,18 @@
         "plugin-error": "^1.0.0",
         "stream-to-array": "^2.3.0",
         "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "gulp-postcss": {
@@ -5535,48 +5581,6 @@
         }
       }
     },
-    "gulp-sass-glob": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-sass-glob/-/gulp-sass-glob-1.1.0.tgz",
-      "integrity": "sha512-BYDCjb68iMAxLGt2uuw7jaZ51cnWxAbQ4EtFDOOsMXOc0Ul+SFW1iiMOSI/efpO27ycmX9U8Eb4Clerww5Tf5Q==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4",
-        "slash": "^3.0.0",
-        "through2": "^3.0.1"
-      },
-      "dependencies": {
-        "through2": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.4",
-            "readable-stream": "2 || 3"
-          }
-        }
-      }
-    },
-    "gulp-uglify": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz",
-      "integrity": "sha512-gk1dhB74AkV2kzqPMQBLA3jPoIAPd/nlNzP2XMDSG8XZrqnlCiDGAqC+rZOumzFvB5zOphlFh6yr3lgcAb/OOg==",
-      "dev": true,
-      "requires": {
-        "array-each": "^1.0.1",
-        "extend-shallow": "^3.0.2",
-        "gulplog": "^1.0.0",
-        "has-gulplog": "^0.1.0",
-        "isobject": "^3.0.1",
-        "make-error-cause": "^1.1.1",
-        "safe-buffer": "^5.1.2",
-        "through2": "^2.0.0",
-        "uglify-js": "^3.0.5",
-        "vinyl-sourcemaps-apply": "^0.2.0"
-      }
-    },
     "gulplog": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
@@ -5601,15 +5605,6 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
-    "has-gulplog": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
-      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
-      "dev": true,
-      "requires": {
-        "sparkles": "^1.0.0"
-      }
-    },
     "has-symbols": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
@@ -8124,21 +8119,6 @@
         "semver": "^6.0.0"
       }
     },
-    "make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
-    },
-    "make-error-cause": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/make-error-cause/-/make-error-cause-1.2.2.tgz",
-      "integrity": "sha1-3wOI/NCzeBbf8KX7gQiTl3fcvJ0=",
-      "dev": true,
-      "requires": {
-        "make-error": "^1.2.0"
-      }
-    },
     "make-iterator": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
@@ -8446,6 +8426,16 @@
             "end-of-stream": "^1.1.0",
             "once": "^1.3.1"
           }
+        },
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
         }
       }
     },
@@ -9876,6 +9866,18 @@
         "remove-bom-buffer": "^3.0.0",
         "safe-buffer": "^5.1.0",
         "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "remove-trailing-separator": {
@@ -10997,13 +10999,25 @@
       "dev": true
     },
     "through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
       "dev": true,
       "requires": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
+        "readable-stream": "3"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
       }
     },
     "through2-filter": {
@@ -11014,6 +11028,18 @@
       "requires": {
         "through2": "~2.0.0",
         "xtend": "~4.0.0"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "time-stamp": {
@@ -11122,6 +11148,18 @@
       "dev": true,
       "requires": {
         "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "tough-cookie": {
@@ -11198,12 +11236,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "uglify-js": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.1.tgz",
-      "integrity": "sha512-JhS3hmcVaXlp/xSo3PKY5R0JqKs5M3IV+exdLHW99qKvKivPO4Z8qbej6mte17SOPqAOVMjt/XGgWacnFSzM3g==",
-      "dev": true
-    },
     "unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
@@ -11515,6 +11547,18 @@
         "value-or-function": "^3.0.0",
         "vinyl": "^2.0.0",
         "vinyl-sourcemap": "^1.1.0"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "vinyl-sourcemap": {

+ 11 - 8
package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.21",
+  "version": "2.4.22",
   "description": "Splide is a lightweight and powerful slider/carousel without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -38,19 +38,22 @@
     "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-rollup": "^2.17.0",
-    "gulp-sass-glob": "^1.1.0",
-    "gulp-uglify": "^3.0.2",
     "jest": "^27.0.6",
     "merge-stream": "^2.0.0",
     "postcss": "^8.3.6",
-    "serialize-javascript": "^6.0.0",
+    "through2": "^4.0.2",
     "webpack": "^5.50.0",
     "webpack-stream": "^6.1.2"
   },
   "scripts": {
     "build:js": "gulp build:js",
-    "build:sass": "gulp build:sass",
-    "test": "jest --clearCache && jest",
-    "lint": "gulp lint"
-  }
+    "build:css": "gulp build:css",
+    "build:all": "gulp build:all",
+    "jest": "jest --clearCache && jest",
+    "eslint": "eslint src"
+  },
+  "browserslist": [
+    "> 5%",
+    "ie 11"
+  ]
 }

+ 0 - 0
src/sass/core/foundation/_animations.scss → src/css/core/foundation/animations.scss


+ 2 - 0
src/css/core/foundation/variables.scss

@@ -0,0 +1,2 @@
+//// Loading spinner size.
+//$spinner-size: 20px !default;

+ 4 - 0
src/css/core/index.scss

@@ -0,0 +1,4 @@
+@forward 'foundation/animations';
+@forward 'foundation/variables';
+@forward 'object/modifiers';
+@forward 'object/objects';

+ 0 - 0
src/sass/core/object/modifiers/_draggable.scss → src/css/core/object/modifiers/draggable.scss


+ 0 - 0
src/sass/core/object/modifiers/_fade.scss → src/css/core/object/modifiers/fade.scss


+ 4 - 0
src/css/core/object/modifiers/index.scss

@@ -0,0 +1,4 @@
+@forward 'draggable';
+@forward 'fade';
+@forward 'rtl';
+@forward 'ttb';

+ 0 - 0
src/sass/core/object/modifiers/_rtl.scss → src/css/core/object/modifiers/rtl.scss


+ 0 - 0
src/sass/core/object/modifiers/_ttb.scss → src/css/core/object/modifiers/ttb.scss


+ 0 - 0
src/sass/core/object/objects/_container.scss → src/css/core/object/objects/container.scss


+ 8 - 0
src/css/core/object/objects/index.scss

@@ -0,0 +1,8 @@
+@forward 'container';
+@forward 'list';
+@forward 'pagination';
+@forward 'root';
+@forward 'slide';
+@forward 'slider';
+@forward 'spinner';
+@forward 'track';

+ 0 - 0
src/sass/core/object/objects/_list.scss → src/css/core/object/objects/list.scss


+ 0 - 0
src/sass/core/object/objects/_pagination.scss → src/css/core/object/objects/pagination.scss


+ 0 - 0
src/sass/core/object/objects/_root.scss → src/css/core/object/objects/root.scss


+ 0 - 0
src/sass/core/object/objects/_slide.scss → src/css/core/object/objects/slide.scss


+ 0 - 0
src/sass/core/object/objects/_slider.scss → src/css/core/object/objects/slider.scss


+ 3 - 1
src/sass/core/object/objects/_spinner.scss → src/css/core/object/objects/spinner.scss

@@ -1,3 +1,5 @@
+$spinner-size: 20px !default;
+
 .splide {
   &__spinner {
     position: absolute;
@@ -16,4 +18,4 @@
 
     animation: splide-loading 1s infinite linear;
   }
-}
+}

+ 0 - 0
src/sass/core/object/objects/_track.scss → src/css/core/object/objects/track.scss


+ 11 - 0
src/css/themes/default/foundation/variables.scss

@@ -0,0 +1,11 @@
+//// Arrow button size.
+//$arrow-button-size: 2em !default;
+//
+//// Arrow SVG size.
+//$arrow-size: 1.2em !default;
+//
+//// Dots indicator size.
+//$dot-size: 8px !default;
+//
+//// Height of a progress bar.
+//$progress-bar-height: 3px !default;

+ 3 - 0
src/css/themes/default/index.scss

@@ -0,0 +1,3 @@
+@forward '../../core';
+@forward 'object/objects';
+@forward 'object/modifiers';

+ 3 - 0
src/css/themes/default/object/modifiers/index.scss

@@ -0,0 +1,3 @@
+@forward 'nav';
+@forward 'rtl';
+@forward 'ttb';

+ 0 - 0
src/sass/themes/default/object/modifiers/_nav.scss → src/css/themes/default/object/modifiers/nav.scss


+ 0 - 0
src/sass/themes/default/object/modifiers/_rtl.scss → src/css/themes/default/object/modifiers/rtl.scss


+ 0 - 0
src/sass/themes/default/object/modifiers/_ttb.scss → src/css/themes/default/object/modifiers/ttb.scss


+ 4 - 1
src/sass/themes/default/object/objects/_arrow.scss → src/css/themes/default/object/objects/arrow.scss

@@ -1,3 +1,6 @@
+$arrow-button-size: 2em !default;
+$arrow-size: 1.2em !default;
+
 .splide {
   &__arrow {
     position: absolute;
@@ -41,4 +44,4 @@
       right: 1em;
     }
   }
-}
+}

+ 3 - 0
src/css/themes/default/object/objects/index.scss

@@ -0,0 +1,3 @@
+@forward 'arrow';
+@forward 'pagination';
+@forward 'progress';

+ 2 - 0
src/sass/themes/default/object/objects/_pagination.scss → src/css/themes/default/object/objects/pagination.scss

@@ -1,3 +1,5 @@
+$dot-size: 8px !default;
+
 .splide {
   &__pagination {
     position: absolute;

+ 3 - 1
src/sass/themes/default/object/objects/_progress.scss → src/css/themes/default/object/objects/progress.scss

@@ -1,3 +1,5 @@
+$progress-bar-height: 3px !default;
+
 .splide {
   &__progress {
     &__bar {
@@ -6,4 +8,4 @@
       background: #ccc;
     }
   }
-}
+}

+ 17 - 0
src/css/themes/sea-green/foundation/variables.scss

@@ -0,0 +1,17 @@
+//// Main color.
+//$main-color: #20b2aa;
+//
+//// Lighter main color.
+//$light-main-color: lighten( $main-color, 20% );
+//
+//// Arrow SVG size.
+//$arrow-size: 2.5em !default;
+//
+//// Pagination indicator width.
+//$indicator-width: 20px !default;
+//
+//// Pagination indicator height.
+//$indicator-height: 5px !default;
+//
+//// Height of a progress bar.
+//$progress-bar-height: 3px !default;

+ 3 - 0
src/css/themes/sea-green/index.scss

@@ -0,0 +1,3 @@
+@forward '../../core';
+@forward 'object/objects';
+@forward 'object/modifiers';

+ 3 - 0
src/css/themes/sea-green/object/modifiers/index.scss

@@ -0,0 +1,3 @@
+@forward 'nav';
+@forward 'rtl';
+@forward 'ttb';

+ 4 - 2
src/sass/themes/sea-green/object/modifiers/_nav.scss → src/css/themes/sea-green/object/modifiers/nav.scss

@@ -1,3 +1,5 @@
+@use '../../variables/colors';
+
 .splide {
   $root: &;
 
@@ -11,7 +13,7 @@
           border-radius: 4px;
 
           &.is-active {
-            border-color: $main-color;
+            border-color: colors.$main;
             opacity: 1;
           }
 
@@ -22,4 +24,4 @@
       }
     }
   }
-}
+}

+ 0 - 0
src/sass/themes/sea-green/object/modifiers/_rtl.scss → src/css/themes/sea-green/object/modifiers/rtl.scss


+ 5 - 3
src/sass/themes/sea-green/object/modifiers/_ttb.scss → src/css/themes/sea-green/object/modifiers/ttb.scss

@@ -1,3 +1,5 @@
+@use '../objects/pagination';
+
 .splide {
   $root: &;
 
@@ -35,9 +37,9 @@
       transform: translate( 0, 50% );
 
       #{$root}__pagination__page {
-        width: $indicator-height;
-        height: $indicator-width;
+        width: pagination.$indicator-height;
+        height: pagination.$indicator-width;
       }
     }
   }
-}
+}

+ 6 - 3
src/sass/themes/sea-green/object/objects/_arrow.scss → src/css/themes/sea-green/object/objects/arrow.scss

@@ -1,3 +1,6 @@
+@use '../../variables/colors';
+$arrow-size: 2.5em !default;
+
 .splide {
   $root: &;
 
@@ -13,14 +16,14 @@
     svg {
       width: $arrow-size;
       height: $arrow-size;
-      fill: $main-color;
+      fill: colors.$main;
       transition: fill .2s linear;
     }
 
     &:hover {
       cursor: pointer;
       svg {
-        fill: $light-main-color;
+        fill: colors.$main-light;
       }
     }
 
@@ -54,4 +57,4 @@
       }
     }
   }
-}
+}

+ 7 - 0
src/css/themes/sea-green/object/objects/index.scss

@@ -0,0 +1,7 @@
+@forward 'arrow';
+@forward 'pagination';
+@forward 'progress';
+@forward 'root';
+@forward 'slide';
+@forward 'spinner';
+

+ 6 - 2
src/sass/themes/sea-green/object/objects/_pagination.scss → src/css/themes/sea-green/object/objects/pagination.scss

@@ -1,4 +1,8 @@
 @use 'sass:math';
+@use '../../variables/colors';
+
+$indicator-width: 20px !default;
+$indicator-height: 5px !default;
 
 .splide {
   &__pagination {
@@ -21,12 +25,12 @@
       border: none;
 
       &.is-active {
-        background: $main-color;
+        background: colors.$main;
       }
 
       &:hover {
         cursor: pointer;
-        background: $light-main-color;
+        background: colors.$main-light;
       }
 
       &:focus {

+ 13 - 0
src/css/themes/sea-green/object/objects/progress.scss

@@ -0,0 +1,13 @@
+@use '../../variables/colors';
+
+$progress-bar-height: 3px !default;
+
+.splide {
+  &__progress {
+    &__bar {
+      width: 0;
+      height: $progress-bar-height;
+      background: colors.$main;
+    }
+  }
+}

+ 0 - 0
src/sass/themes/sea-green/object/objects/_root.scss → src/css/themes/sea-green/object/objects/root.scss


+ 0 - 0
src/sass/themes/sea-green/object/objects/_slide.scss → src/css/themes/sea-green/object/objects/slide.scss


+ 8 - 0
src/css/themes/sea-green/object/objects/spinner.scss

@@ -0,0 +1,8 @@
+@use '../../variables/colors';
+
+.splide {
+  &__spinner {
+    border: 2px solid colors.$main;
+    border-left-color: transparent;
+  }
+}

+ 5 - 0
src/css/themes/sea-green/variables/colors.scss

@@ -0,0 +1,5 @@
+// Main color.
+$main: #20b2aa !default;
+
+// Lighter main color.
+$main-light: lighten( $main, 20% ) !default;

+ 14 - 0
src/css/themes/skyblue/foundation/variables.scss

@@ -0,0 +1,14 @@
+//// Main color.
+//$main-color: #00bfff;
+//
+//// Lighter main color.
+//$light-main-color: lighten( $main-color, 20% );
+//
+//// Arrow SVG size.
+//$arrow-size: 2.5em !default;
+//
+//// Dots indicator size.
+//$dot-size: 10px !default;
+//
+//// Height of a progress bar.
+//$progress-bar-height: 3px !default;

+ 3 - 0
src/css/themes/skyblue/index.scss

@@ -0,0 +1,3 @@
+@forward '../../core';
+@forward 'object/objects';
+@forward 'object/modifiers';

+ 3 - 0
src/css/themes/skyblue/object/modifiers/index.scss

@@ -0,0 +1,3 @@
+@forward 'nav';
+@forward 'rtl';
+@forward 'ttb';

+ 4 - 2
src/sass/themes/sky-blue/object/modifiers/_nav.scss → src/css/themes/skyblue/object/modifiers/nav.scss

@@ -1,3 +1,5 @@
+@use '../../variables/colors';
+
 .splide {
   $root: &;
 
@@ -10,7 +12,7 @@
           opacity: .7;
 
           &.is-active {
-            border-color: $main-color;
+            border-color: colors.$main;
             opacity: 1;
           }
 
@@ -21,4 +23,4 @@
       }
     }
   }
-}
+}

+ 0 - 0
src/sass/themes/sky-blue/object/modifiers/_rtl.scss → src/css/themes/skyblue/object/modifiers/rtl.scss


+ 0 - 0
src/sass/themes/sky-blue/object/modifiers/_ttb.scss → src/css/themes/skyblue/object/modifiers/ttb.scss


+ 7 - 3
src/sass/themes/sky-blue/object/objects/_arrow.scss → src/css/themes/skyblue/object/objects/arrow.scss

@@ -1,3 +1,7 @@
+@use '../../variables/colors';
+
+$arrow-size: 2.5em !default;
+
 .splide {
   &__arrow {
     position: absolute;
@@ -11,14 +15,14 @@
     svg {
       width: $arrow-size;
       height: $arrow-size;
-      fill: $main-color;
+      fill: colors.$main;
       transition: fill .2s linear;
     }
 
     &:hover {
       cursor: pointer;
       svg {
-        fill: $light-main-color;
+        fill: colors.$main-light;
       }
     }
 
@@ -38,4 +42,4 @@
       right: 1em;
     }
   }
-}
+}

+ 5 - 0
src/css/themes/skyblue/object/objects/index.scss

@@ -0,0 +1,5 @@
+@forward 'arrow';
+@forward 'pagination';
+@forward 'progress';
+@forward 'spinner';
+

+ 7 - 3
src/sass/themes/sky-blue/object/objects/_pagination.scss → src/css/themes/skyblue/object/objects/pagination.scss

@@ -1,3 +1,7 @@
+@use '../../variables/colors';
+
+$dot-size: 10px !default;
+
 .splide {
   &__pagination {
     position: absolute;
@@ -20,12 +24,12 @@
 
       &.is-active {
         transform: scale( 1.4 );
-        background: $main-color;
+        background: colors.$main;
       }
 
       &:hover {
         cursor: pointer;
-        background: $light-main-color;
+        background: colors.$main-light;
       }
 
       &:focus {
@@ -33,4 +37,4 @@
       }
     }
   }
-}
+}

+ 13 - 0
src/css/themes/skyblue/object/objects/progress.scss

@@ -0,0 +1,13 @@
+@use '../../variables/colors';
+
+$progress-bar-height: 3px !default;
+
+.splide {
+  &__progress {
+    &__bar {
+      width: 0;
+      height: $progress-bar-height;
+      background: colors.$main;
+    }
+  }
+}

+ 8 - 0
src/css/themes/skyblue/object/objects/spinner.scss

@@ -0,0 +1,8 @@
+@use '../../variables/colors';
+
+.splide {
+  &__spinner {
+    border: 2px solid colors.$main;
+    border-left-color: transparent;
+  }
+}

+ 5 - 0
src/css/themes/skyblue/variables/colors.scss

@@ -0,0 +1,5 @@
+// Main color.
+$main: #00bfff !default;
+
+// Lighter main color.
+$main-light: lighten( $main, 20% ) !default;

+ 0 - 2
src/sass/core/foundation/_variables.scss

@@ -1,2 +0,0 @@
-// Loading spinner size.
-$spinner-size: 20px;

+ 0 - 5
src/sass/core/splide-core.scss

@@ -1,5 +0,0 @@
-@import 'foundation/**';
-
-@import 'object/objects/**';
-
-@import 'object/modifiers/**';

+ 0 - 11
src/sass/themes/default/foundation/_variables.scss

@@ -1,11 +0,0 @@
-// Arrow button size.
-$arrow-button-size: 2em !default;
-
-// Arrow SVG size.
-$arrow-size: 1.2em !default;
-
-// Dots indicator size.
-$dot-size: 8px !default;
-
-// Height of a progress bar.
-$progress-bar-height: 3px !default;

+ 0 - 5
src/sass/themes/default/splide-default.scss

@@ -1,5 +0,0 @@
-@import 'foundation/**';
-
-@import 'object/objects/**';
-
-@import 'object/modifiers/**';

+ 0 - 17
src/sass/themes/sea-green/foundation/_variables.scss

@@ -1,17 +0,0 @@
-// Main color.
-$main-color: #20b2aa;
-
-// Lighter main color.
-$light-main-color: lighten( $main-color, 20% );
-
-// Arrow SVG size.
-$arrow-size: 2.5em !default;
-
-// Pagination indicator width.
-$indicator-width: 20px !default;
-
-// Pagination indicator height.
-$indicator-height: 5px !default;
-
-// Height of a progress bar.
-$progress-bar-height: 3px !default;

+ 0 - 9
src/sass/themes/sea-green/object/objects/_progress.scss

@@ -1,9 +0,0 @@
-.splide {
-  &__progress {
-    &__bar {
-      width: 0;
-      height: $progress-bar-height;
-      background: $main-color;
-    }
-  }
-}

+ 0 - 6
src/sass/themes/sea-green/object/objects/_spinner.scss

@@ -1,6 +0,0 @@
-.splide {
-  &__spinner {
-    border: 2px solid $main-color;
-    border-left-color: transparent;
-  }
-}

+ 0 - 5
src/sass/themes/sea-green/splide-sea-green.scss

@@ -1,5 +0,0 @@
-@import 'foundation/**';
-
-@import 'object/objects/**';
-
-@import 'object/modifiers/**';

+ 0 - 14
src/sass/themes/sky-blue/foundation/_variables.scss

@@ -1,14 +0,0 @@
-// Main color.
-$main-color: #00bfff;
-
-// Lighter main color.
-$light-main-color: lighten( $main-color, 20% );
-
-// Arrow SVG size.
-$arrow-size: 2.5em !default;
-
-// Dots indicator size.
-$dot-size: 10px !default;
-
-// Height of a progress bar.
-$progress-bar-height: 3px !default;

+ 0 - 9
src/sass/themes/sky-blue/object/objects/_progress.scss

@@ -1,9 +0,0 @@
-.splide {
-  &__progress {
-    &__bar {
-      width: 0;
-      height: $progress-bar-height;
-      background: $main-color;
-    }
-  }
-}

+ 0 - 6
src/sass/themes/sky-blue/object/objects/_spinner.scss

@@ -1,6 +0,0 @@
-.splide {
-  &__spinner {
-    border: 2px solid $main-color;
-    border-left-color: transparent;
-  }
-}

+ 0 - 5
src/sass/themes/sky-blue/splide-sky-blue.scss

@@ -1,5 +0,0 @@
-@import 'foundation/**';
-
-@import 'object/objects/**';
-
-@import 'object/modifiers/**';

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików