Jelajahi Sumber

Restructure Scss files, using sass-glob.

NaotoshiFujita 5 tahun lalu
induk
melakukan
34454e1ad3

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

@@ -1 +1 @@
-@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide{position:relative;visibility:hidden}.splide__track{overflow:hidden}.splide__list{display:flex}.splide__slide{position:relative;box-sizing:border-box}.splide__slide img{vertical-align:bottom}.splide__container{box-sizing:border-box}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__pagination{display:inline-flex;align-items:center}.splide__pagination li{display:inline-flex}.splide__sr{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.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{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center}.splide__pagination li{display:inline-flex}.splide{position:relative;visibility:hidden}.splide__slide{position:relative;box-sizing:border-box}.splide__slide img{vertical-align:bottom}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__sr{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.splide__track{overflow:hidden}.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{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}

File diff ditekan karena terlalu besar
+ 0 - 0
dist/css/splide.min.css


+ 3 - 0
gulpfile.js

@@ -6,6 +6,7 @@
 const gulp          = require( 'gulp' );
 const rename        = require( 'gulp-rename' );
 const sass          = require( 'gulp-sass' );
+const sassGlob      = require( 'gulp-sass-glob' );
 const postcss       = require( 'gulp-postcss' );
 const autoprefixer  = require( 'autoprefixer' );
 const cssnano       = require( 'cssnano' );
@@ -77,11 +78,13 @@ gulp.task( 'build:sass', done => {
 
 		if ( settings.merge ) {
 			stream = merge( stream, gulp.src( settings.merge.path ) )
+				.pipe( sassGlob() )
 				.pipe( sass() )
 				.pipe( concat( settings.merge.filename ) );
 		}
 
 		stream
+			.pipe( sassGlob() )
 			.pipe( sass() )
 			.pipe( postcss( [
 				cssnano( { reduceIdents: false } ),

+ 29 - 0
package-lock.json

@@ -5675,6 +5675,35 @@
         }
       }
     },
+    "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": {
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "through2": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
+          "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "2.3.6"
+          }
+        }
+      }
+    },
     "gulp-uglify": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz",

+ 2 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "gulp-rename": "^1.4.0",
     "gulp-rollup": "^2.16.2",
     "gulp-sass": "^4.0.2",
+    "gulp-sass-glob": "^1.1.0",
     "gulp-uglify": "^3.0.2",
     "jest": "^24.8.0",
     "merge-stream": "^2.0.0",

+ 0 - 9
src/sass/core/object/_object.scss

@@ -1,9 +0,0 @@
-@import "main/main";
-
-@import "modifiers/draggable";
-
-@import "modifiers/fade";
-
-@import "modifiers/rtl";
-
-@import "modifiers/ttb";

+ 0 - 76
src/sass/core/object/main/_main.scss

@@ -1,76 +0,0 @@
-.splide {
-  $root: &;
-  position: relative;
-  visibility: hidden;
-
-  &__track {
-    overflow: hidden;
-  }
-
-  &__list {
-    display: flex;
-  }
-
-  &__slide {
-    position: relative;
-    box-sizing: border-box;
-
-    img {
-      vertical-align: bottom;
-    }
-  }
-
-  &__container {
-    position: relative;
-    box-sizing: border-box;
-  }
-
-  &__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 #999;
-    border-left-color: transparent;
-
-    animation: splide-loading 1s infinite linear;
-  }
-
-  &__pagination {
-    display: inline-flex;
-    align-items: center;
-
-    li {
-      display: inline-flex;
-    }
-
-    &__page {
-      &.is-active {
-      }
-    }
-  }
-
-  &__progress {
-    &__bar {
-    }
-  }
-
-  &__sr {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-  }
-}

+ 6 - 0
src/sass/core/object/objects/_container.scss

@@ -0,0 +1,6 @@
+.splide {
+  &__container {
+    position: relative;
+    box-sizing: border-box;
+  }
+}

+ 5 - 0
src/sass/core/object/objects/_list.scss

@@ -0,0 +1,5 @@
+.splide {
+  &__list {
+    display: flex;
+  }
+}

+ 15 - 0
src/sass/core/object/objects/_pagination.scss

@@ -0,0 +1,15 @@
+.splide {
+  &__pagination {
+    display: inline-flex;
+    align-items: center;
+
+    li {
+      display: inline-flex;
+    }
+
+    &__page {
+      &.is-active {
+      }
+    }
+  }
+}

+ 4 - 0
src/sass/core/object/objects/_root.scss

@@ -0,0 +1,4 @@
+.splide {
+  position: relative;
+  visibility: hidden;
+}

+ 10 - 0
src/sass/core/object/objects/_slide.scss

@@ -0,0 +1,10 @@
+.splide {
+  &__slide {
+    position: relative;
+    box-sizing: border-box;
+
+    img {
+      vertical-align: bottom;
+    }
+  }
+}

+ 19 - 0
src/sass/core/object/objects/_spinner.scss

@@ -0,0 +1,19 @@
+.splide {
+  &__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 #999;
+    border-left-color: transparent;
+
+    animation: splide-loading 1s infinite linear;
+  }
+}

+ 13 - 0
src/sass/core/object/objects/_sr.scss

@@ -0,0 +1,13 @@
+.splide {
+  &__sr {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
+}

+ 5 - 0
src/sass/core/object/objects/_track.scss

@@ -0,0 +1,5 @@
+.splide {
+  &__track {
+    overflow: hidden;
+  }
+}

+ 3 - 3
src/sass/core/splide-core.scss

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

+ 0 - 5
src/sass/themes/default/object/_object.scss

@@ -1,5 +0,0 @@
-@import "main/main";
-
-@import "modifiers/nav";
-
-@import "modifiers/ttb";

+ 0 - 87
src/sass/themes/default/object/main/_main.scss

@@ -1,87 +0,0 @@
-.splide {
-  &__arrow {
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    transform: translateY( -50% );
-    width: $arrow-button-size;
-    height: $arrow-button-size;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    padding: 0;
-    opacity: .7;
-    background: #ccc;
-
-    svg {
-      width: $arrow-size;
-    }
-
-    &:hover {
-      cursor: pointer;
-      opacity: .9;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &--prev {
-      left: 1em;
-
-      svg {
-        transform: scaleX( -1 );
-      }
-    }
-
-    &--next {
-      right: 1em;
-    }
-  }
-
-  &__pagination {
-    position: absolute;
-    z-index: 1;
-    bottom: .5em;
-    left: 50%;
-    transform: translateX( -50% );
-    padding: 0;
-
-    &__page {
-      display: inline-block;
-      width: $dot-size;
-      height: $dot-size;
-      background: #ccc;
-      border-radius: 50%;
-      margin: 3px;
-      padding: 0;
-      transition: transfrom .2s linear;
-      border: none;
-      opacity: .7;
-
-      &.is-active {
-        transform: scale( 1.4 );
-        background: white;
-      }
-
-      &:hover {
-        cursor: pointer;
-        opacity: .9;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  &__progress {
-    &__bar {
-      width: 0;
-      height: $progress-bar-height;
-      background: #ccc;
-    }
-  }
-}

+ 43 - 0
src/sass/themes/default/object/objects/_arrow.scss

@@ -0,0 +1,43 @@
+.splide {
+  &__arrow {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY( -50% );
+    width: $arrow-button-size;
+    height: $arrow-button-size;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 0;
+    opacity: .7;
+    background: #ccc;
+
+    svg {
+      width: $arrow-size;
+    }
+
+    &:hover {
+      cursor: pointer;
+      opacity: .9;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--prev {
+      left: 1em;
+
+      svg {
+        transform: scaleX( -1 );
+      }
+    }
+
+    &--next {
+      right: 1em;
+    }
+  }
+}

+ 37 - 0
src/sass/themes/default/object/objects/_pagination.scss

@@ -0,0 +1,37 @@
+.splide {
+  &__pagination {
+    position: absolute;
+    z-index: 1;
+    bottom: .5em;
+    left: 50%;
+    transform: translateX( -50% );
+    padding: 0;
+
+    &__page {
+      display: inline-block;
+      width: $dot-size;
+      height: $dot-size;
+      background: #ccc;
+      border-radius: 50%;
+      margin: 3px;
+      padding: 0;
+      transition: transfrom .2s linear;
+      border: none;
+      opacity: .7;
+
+      &.is-active {
+        transform: scale( 1.4 );
+        background: white;
+      }
+
+      &:hover {
+        cursor: pointer;
+        opacity: .9;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}

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

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

+ 4 - 2
src/sass/themes/default/splide-default.scss

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

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini