move style declaractions under .ant-carousel

9 years ago · cb1ce102ff
3 changed files with 165 additions and 162 deletions
--- a/components/carousel/index.md
+++ b/components/carousel/index.md
@ -23,7 +23,7 @@
 | onChange         | 切换面板的回调                               | Function | 无

 <style>
-.slick-slide {
+.ant-carousel .slick-slide {
  text-align: center;
  height: 100px;
  line-height: 100px;
--- a/style/components/carousel/slick-theme.less
+++ b/style/components/carousel/slick-theme.less
@ -1,110 +1,113 @@

-/* Arrows */
+.ant-carousel {

-.slick-prev,
-.slick-next {
-  position: absolute;
-  display: block;
-  height: 20px;
-  width: 20px;
-  line-height: 0px;
-  font-size: 0px;
-  cursor: pointer;
-  background: transparent;
-  color: transparent;
-  top: 50%;
-  margin-top: -10px;
-  padding: 0;
-  border: none;
-  outline: none;
-  &:hover, &:focus {
-    outline: none;
+  /* Arrows */
+
+  .slick-prev,
+  .slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
    background: transparent;
    color: transparent;
-    &:before {
-      opacity: 1;
+    top: 50%;
+    margin-top: -10px;
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+      outline: none;
+      background: transparent;
+      color: transparent;
+      &:before {
+        opacity: 1;
+      }
+    }
+    &.slick-disabled:before {
+      opacity: 0.25;
    }
  }
-  &.slick-disabled:before {
-    opacity: 0.25;
-  }
-}

-.slick-prev {
-  left: -25px;
-  &:before {
-    content: "←";
+  .slick-prev {
+    left: -25px;
+    &:before {
+      content: "←";
+    }
  }
-}

-.slick-next {
-  right: -25px;
-  &:before {
-    content: "→";
+  .slick-next {
+    right: -25px;
+    &:before {
+      content: "→";
+    }
  }
-}

-/* Dots */
+  /* Dots */

-.slick-slider {
-  padding-bottom: 45px;
-}
+  .slick-slider {
+    padding-bottom: 45px;
+  }

-.slick-dots {
-  position: absolute;
-  bottom: 0px;
-  list-style: none;
-  display: block;
-  text-align: center;
-  padding: 0;
-  width: 100%;
-  li {
-    position: relative;
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    margin: 0 5px;
+  .slick-dots {
+    position: absolute;
+    bottom: 0px;
+    list-style: none;
+    display: block;
+    text-align: center;
    padding: 0;
-    cursor: pointer;
-    button {
-      border: 0;
-      background: transparent;
-      display: block;
+    width: 100%;
+    li {
+      position: relative;
+      display: inline-block;
      height: 20px;
      width: 20px;
-      outline: none;
-      line-height: 0px;
-      font-size: 0px;
-      color: transparent;
-      padding: 5px;
+      margin: 0 5px;
+      padding: 0;
      cursor: pointer;
-      &:hover, &:focus {
+      button {
+        border: 0;
+        background: transparent;
+        display: block;
+        height: 20px;
+        width: 20px;
        outline: none;
+        line-height: 0px;
+        font-size: 0px;
+        color: transparent;
+        padding: 5px;
+        cursor: pointer;
+        &:hover, &:focus {
+          outline: none;
+          &:before {
+            opacity: 1;
+          }
+        }
        &:before {
-          opacity: 1;
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: "•";
+          width: 20px;
+          height: 20px;
+          font-size: 18px;
+          font-family: arial, sans-serif;
+          line-height: 20px;
+          text-align: center;
+          color: gray;
+          opacity: 0.25;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
        }
      }
-      &:before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        content: "•";
-        width: 20px;
-        height: 20px;
-        font-size: 18px;
-        font-family: arial, sans-serif;
-        line-height: 20px;
-        text-align: center;
-        color: gray;
-        opacity: 0.25;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+      &.slick-active button:before {
+        color: black;
+        opacity: 0.75;
      }
    }
-    &.slick-active button:before {
-      color: black;
-      opacity: 0.75;
-    }
  }
 }

--- a/style/components/carousel/slick.less
+++ b/style/components/carousel/slick.less
@ -1,102 +1,102 @@

-.slick-slider {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -ms-touch-action: pan-y;
-  touch-action: pan-y;
-  -webkit-tap-highlight-color: transparent;
-}
-.slick-list {
-  position: relative;
-  overflow: hidden;
-  display: block;
-  margin: 0;
-  padding: 0;
-
-  &:focus {
-    outline: none;
-  }
+.ant-carousel {

-  &.dragging {
-    cursor: pointer;
-    cursor: hand;
+  .slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
  }
-}
-.slick-slider .slick-track,
-.slick-slider .slick-list {
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
+  .slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;

-.slick-track {
-  position: relative;
-  left: 0;
-  top: 0;
-  display: block;
+    &:focus {
+      outline: none;
+    }

-  &:before,
-  &:after {
-    content: "";
-    display: table;
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
  }
-
-  &:after {
-    clear: both;
+  .slick-slider .slick-track,
+  .slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
  }

-  .slick-loading & {
-    visibility: hidden;
-  }
-}
-.slick-slide {
-  float: left;
-  height: 100%;
-  min-height: 1px;
-  [dir="rtl"] & {
-    float: right;
-  }
-  img {
+  .slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
    display: block;
+
+    &:before,
+    &:after {
+      content: "";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    .slick-loading & {
+      visibility: hidden;
+    }
  }
-  &.slick-loading img {
-    display: none;
-  }
+  .slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+      float: right;
+    }
+    img {
+      display: block;
+    }
+    &.slick-loading img {
+      display: none;
+    }

-  display: none;
+    display: none;

-  &.dragging img {
-    pointer-events: none;
+    &.dragging img {
+      pointer-events: none;
+    }
  }

-  .slick-initialized & {
+  .slick-initialized .slick-slide {
    display: block;
  }

-  .slick-loading & {
+  .slick-loading .slick-slide {
    visibility: hidden;
  }

-  .slick-vertical & {
+  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
-}
-.slick-arrow.slick-hidden {
-  display: none;
-}
-
-
-
+  .slick-arrow.slick-hidden {
+    display: none;
+  }

+}