fix: column, support span with md, sm and lg

wetix · Dec 31, 2020 · 96743cd · 96743cd
1 parent ce201fd
commit 96743cd
Showing 1 changed file with 27 additions and 11 deletions.
diff --git a/packages/column/src/Column.svelte b/packages/column/src/Column.svelte
@@ -9,9 +9,9 @@
   export let justify = "center";
   export let style = "";
 
-  let classes = `responsive-ui-column--${span}`;
+  let cls = `responsive-ui-column--${span}`;
   if (isNaN(Number(span))) {
-    classes = Object.entries(<Device>span)
+    cls = Object.entries(<Device>span)
       .map(([k, v]) => `responsive-ui-column--${k}-${v}`)
       .join(" ");
   }
@@ -116,23 +116,24 @@
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--4 {
-      $width: 16.66666667%;
+
+    &--1 {
+      $width: 4.16666667%;
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--3 {
-      $width: 12.5%;
+    &--2 {
+      $width: 8.33333333%;
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--2 {
-      $width: 8.33333333%;
+    &--3 {
+      $width: 12.5%;
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--1 {
-      $width: 4.16666667%;
+    &--4 {
+      $width: 16.66666667%;
       flex: 0 0 $width;
       max-width: $width;
     }
@@ -148,6 +149,21 @@
 
   @media (max-width: 480px) {
     .responsive-ui-column {
+      &--sm-1 {
+        $width: 4.16666667%;
+        flex: 0 0 $width;
+        max-width: $width;
+      }
+      &--sm-2 {
+        $width: 8.33333333%;
+        flex: 0 0 $width;
+        max-width: $width;
+      }
+      &--sm-3 {
+        $width: 12.5%;
+        flex: 0 0 $width;
+        max-width: $width;
+      }
       &--sm-4 {
         $width: 16.66666667%;
         flex: 0 0 $width !important;
@@ -177,6 +193,6 @@
   }
 </style>
 
-<div class={`responsive-ui-column--${justify} ${classes} ${className}`} {style}>
+<div class={`responsive-ui-column--${justify} ${cls} ${className}`} {style}>
   <slot />
 </div>