소스 검색

Bug Fix: Center the spinner on the slide or container.

NaotoshiFujita 5 년 전
부모
커밋
505f05ae39
3개의 변경된 파일9개의 추가작업 그리고 7개의 파일을 삭제
  1. 1 1
      dist/css/splide-core.min.css
  2. 0 0
      dist/css/splide.min.css
  3. 8 6
      src/sass/core/object/main/_main.scss

+ 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.is-loading{display:flex;justify-content:center;align-items:center}.splide__slide img{vertical-align:bottom}.splide__container{box-sizing:border-box}.splide__spinner{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{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}

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/css/splide.min.css


+ 8 - 6
src/sass/core/object/main/_main.scss

@@ -15,22 +15,24 @@
     position: relative;
     box-sizing: border-box;
 
-    &.is-loading {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
     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;

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.