fix(CardGrid): item css

crlang · Jan 12, 2022 · 19e50a0 · 19e50a0
1 parent 5a74163
commit 19e50a0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 41 deletions.
diff --git a/src/components/CardGrid/src/index.scss b/src/components/CardGrid/src/index.scss
@@ -0,0 +1,41 @@
+@use 'sass:math';
+
+$prefix-cls: '#{$namespace}-card-grid';
+
+.#{$prefix-cls} {
+  overflow: visible;
+
+  &__container {
+    @for $i from 1 through 20 {
+      &.row-span#{$i} > .#{$prefix-cls}-item {
+        width: math.div(100%, $i);
+      }
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+
+    > .#{$prefix-cls}-item {
+      padding: 24px;
+      cursor: pointer;
+      border: 0;
+      border-radius: 0;
+      box-shadow: 1px 0 #f0f0f0, 0 1px #f0f0f0, 1px 1px #f0f0f0, 1px 0 #f0f0f0 inset, 0 1px #f0f0f0 inset;
+      transition: all 0.3s;
+
+      &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0,0.15);
+      }
+
+      &.items-direction-column {
+        flex-direction: column;
+      }
+    }
+
+    &.items-center > .#{$prefix-cls}-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/components/CardGrid/src/index.vue b/src/components/CardGrid/src/index.vue
@@ -55,44 +55,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-$prefix-cls: '#{$namespace}-card-grid';
-
-.#{$prefix-cls} {
-  overflow: visible;
-
-  &__container {
-    // @for $i from 1 through 20 {
-    //   &.row-span#{$i} > .#{$prefix-cls}-item {
-    //     width: math.div(100%, $i);
-    //   }
-    // }
-
-    display: flex;
-    flex-wrap: wrap;
-
-    > .#{$prefix-cls}-item {
-      padding: 24px;
-      cursor: pointer;
-      border: 0;
-      border-radius: 0;
-      box-shadow: 1px 0 #f0f0f0, 0 1px #f0f0f0, 1px 1px #f0f0f0, 1px 0 #f0f0f0 inset, 0 1px #f0f0f0 inset;
-      transition: all 0.3s;
-
-      &:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0,0.15);
-      }
-
-      &.items-direction-column {
-        flex-direction: column;
-      }
-    }
-
-    &.items-center > .#{$prefix-cls}-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-</style>
+<style lang="scss" src="./index.scss"></style>