uikit 3.18.4-dev.4d31fe360 → 3.18.4-dev.5aef5369c

package/src/scss/components/width.scss

@@ -26,10 +26,10 @@
 }
 
 .uk-child-width-1-2 > * { width: 50%; }
-.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); }
+.uk-child-width-1-3 > * { width: unquote('calc(100% / 3)'); }
 .uk-child-width-1-4 > * { width: 25%; }
 .uk-child-width-1-5 > * { width: 20%; }
-.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); }
+.uk-child-width-1-6 > * { width: unquote('calc(100% / 6)'); }
 
 .uk-child-width-auto > * { width: auto; }
 
@@ -38,7 +38,6 @@
  *    flex items won't shrink below their minimum intrinsic content size.
  *    Using `1px` instead of `0`, so items still wrap into the next line,
  *    if they have zero width and padding and the predecessor is 100% wide.
- * 2. Reset flex if auto classes are combined with expand classes
  */
 
 .uk-child-width-expand > :not([class*="uk-width"]) {
@@ -52,21 +51,26 @@
 
     .uk-child-width-1-1\@s > * { width: 100%; }
     .uk-child-width-1-2\@s > * { width: 50%; }
-    .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@s > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@s > * { width: 25%; }
     .uk-child-width-1-5\@s > * { width: 20%; }
-    .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@s > * { width: unquote('calc(100% / 6)'); }
 
-    .uk-child-width-auto\@s > * {
-        width: auto;
-        /* 2 */
-        flex: initial;
-    }
+    .uk-child-width-auto\@s > * { width: auto; }
     .uk-child-width-expand\@s > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@s > :not([class*="uk-width"]),
+    .uk-child-width-auto\@s > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Tablet landscape and bigger */
@@ -74,20 +78,26 @@
 
     .uk-child-width-1-1\@m > * { width: 100%; }
     .uk-child-width-1-2\@m > * { width: 50%; }
-    .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@m > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@m > * { width: 25%; }
     .uk-child-width-1-5\@m > * { width: 20%; }
-    .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@m > * { width: unquote('calc(100% / 6)'); }
 
-    .uk-child-width-auto\@m > * {
-        width: auto;
-        flex: initial;
-    }
+    .uk-child-width-auto\@m > * { width: auto; }
     .uk-child-width-expand\@m > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@m > :not([class*="uk-width"]),
+    .uk-child-width-auto\@m > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Desktop and bigger */
@@ -95,20 +105,26 @@
 
     .uk-child-width-1-1\@l > * { width: 100%; }
     .uk-child-width-1-2\@l > * { width: 50%; }
-    .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@l > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@l > * { width: 25%; }
     .uk-child-width-1-5\@l > * { width: 20%; }
-    .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@l > * { width: unquote('calc(100% / 6)'); }
 
-    .uk-child-width-auto\@l > * {
-        width: auto;
-        flex: initial;
-    }
+    .uk-child-width-auto\@l > * { width: auto; }
     .uk-child-width-expand\@l > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@l > :not([class*="uk-width"]),
+    .uk-child-width-auto\@l > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Large screen and bigger */
@@ -116,20 +132,26 @@
 
     .uk-child-width-1-1\@xl > * { width: 100%; }
     .uk-child-width-1-2\@xl > * { width: 50%; }
-    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@xl > * { width: 25%; }
     .uk-child-width-1-5\@xl > * { width: 20%; }
-    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% / 6)'); }
 
-    .uk-child-width-auto\@xl > * {
-        width: auto;
-        flex: initial;
-    }
+    .uk-child-width-auto\@xl > * { width: auto; }
     .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@xl > :not([class*="uk-width"]),
+    .uk-child-width-auto\@xl > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 
@@ -151,8 +173,8 @@
 .uk-width-1-2 { width: 50%; }
 
 /* Thirds */
-.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); }
-.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); }
+.uk-width-1-3 { width: unquote('calc(100% / 3)'); }
+.uk-width-2-3 { width: unquote('calc(200% / 3)'); }
 
 /* Quarters */
 .uk-width-1-4 { width: 25%; }
@@ -165,8 +187,8 @@
 .uk-width-4-5 { width: 80%; }
 
 /* Sixths */
-.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); }
-.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); }
+.uk-width-1-6 { width: unquote('calc(100% / 6)'); }
+.uk-width-5-6 { width: unquote('calc(500% / 6)'); }
 
 /* Pixel */
 .uk-width-small { width: $width-small-width; }
@@ -197,8 +219,8 @@
     .uk-width-1-2\@s { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@s { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@s { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@s { width: 25%; }
@@ -211,8 +233,8 @@
     .uk-width-4-5\@s { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@s { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@s { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@s { width: $width-small-width; }
@@ -225,10 +247,7 @@
 }
 
     /* Auto */
-    .uk-width-auto\@s {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@s { width: auto; }
 
     /* Expand */
     .uk-width-expand\@s {
@@ -236,6 +255,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@s,
+    .uk-width-1-2\@s,
+    .uk-width-1-3\@s,
+    .uk-width-2-3\@s,
+    .uk-width-1-4\@s,
+    .uk-width-3-4\@s,
+    .uk-width-1-5\@s,
+    .uk-width-2-5\@s,
+    .uk-width-3-5\@s,
+    .uk-width-4-5\@s,
+    .uk-width-1-6\@s,
+    .uk-width-5-6\@s,
+    .uk-width-small\@s,
+    .uk-width-medium\@s,
+    .uk-width-large\@s,
+    .uk-width-xlarge\@s,
+    .uk-width-2xlarge\@s,
+    .uk-width-auto\@s { flex: initial; }
+
 }
 
 /* Tablet landscape and bigger */
@@ -248,8 +287,8 @@
     .uk-width-1-2\@m { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@m { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@m { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@m { width: 25%; }
@@ -262,8 +301,8 @@
     .uk-width-4-5\@m { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@m { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@m { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@m { width: $width-small-width; }
@@ -276,10 +315,7 @@
 }
 
      /* Auto */
-    .uk-width-auto\@m {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@m { width: auto; }
 
     /* Expand */
     .uk-width-expand\@m {
@@ -287,6 +323,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@m,
+    .uk-width-1-2\@m,
+    .uk-width-1-3\@m,
+    .uk-width-2-3\@m,
+    .uk-width-1-4\@m,
+    .uk-width-3-4\@m,
+    .uk-width-1-5\@m,
+    .uk-width-2-5\@m,
+    .uk-width-3-5\@m,
+    .uk-width-4-5\@m,
+    .uk-width-1-6\@m,
+    .uk-width-5-6\@m,
+    .uk-width-small\@m,
+    .uk-width-medium\@m,
+    .uk-width-large\@m,
+    .uk-width-xlarge\@m,
+    .uk-width-2xlarge\@m,
+    .uk-width-auto\@m { flex: initial; }
+
 }
 
 /* Desktop and bigger */
@@ -299,8 +355,8 @@
     .uk-width-1-2\@l { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@l { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@l { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@l { width: 25%; }
@@ -313,8 +369,8 @@
     .uk-width-4-5\@l { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@l { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@l { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@l { width: $width-small-width; }
@@ -327,10 +383,7 @@
 }
 
     /* Auto */
-    .uk-width-auto\@l {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@l { width: auto; }
 
     /* Expand */
     .uk-width-expand\@l {
@@ -338,6 +391,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@l,
+    .uk-width-1-2\@l,
+    .uk-width-1-3\@l,
+    .uk-width-2-3\@l,
+    .uk-width-1-4\@l,
+    .uk-width-3-4\@l,
+    .uk-width-1-5\@l,
+    .uk-width-2-5\@l,
+    .uk-width-3-5\@l,
+    .uk-width-4-5\@l,
+    .uk-width-1-6\@l,
+    .uk-width-5-6\@l,
+    .uk-width-small\@l,
+    .uk-width-medium\@l,
+    .uk-width-large\@l,
+    .uk-width-xlarge\@l,
+    .uk-width-2xlarge\@l,
+    .uk-width-auto\@l { flex: initial; }
+
 }
 
 /* Large screen and bigger */
@@ -350,8 +423,8 @@
     .uk-width-1-2\@xl { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@xl { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@xl { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@xl { width: 25%; }
@@ -364,8 +437,8 @@
     .uk-width-4-5\@xl { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@xl { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@xl { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@xl { width: $width-small-width; }
@@ -378,10 +451,7 @@
 }
 
     /* Auto */
-    .uk-width-auto\@xl {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@xl { width: auto; }
 
     /* Expand */
     .uk-width-expand\@xl {
@@ -389,6 +459,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@xl,
+    .uk-width-1-2\@xl,
+    .uk-width-1-3\@xl,
+    .uk-width-2-3\@xl,
+    .uk-width-1-4\@xl,
+    .uk-width-3-4\@xl,
+    .uk-width-1-5\@xl,
+    .uk-width-2-5\@xl,
+    .uk-width-3-5\@xl,
+    .uk-width-4-5\@xl,
+    .uk-width-1-6\@xl,
+    .uk-width-5-6\@xl,
+    .uk-width-small\@xl,
+    .uk-width-medium\@xl,
+    .uk-width-large\@xl,
+    .uk-width-xlarge\@xl,
+    .uk-width-2xlarge\@xl,
+    .uk-width-auto\@xl { flex: initial; }
+
 }
 
 /* Intrinsic Widths

package/tests/slider.html

@@ -586,7 +586,7 @@
                             <td><code>active</code></td>
                             <td>String</td>
                             <td>all</td>
-                            <td>Slider item/items to apply the transition active class to (all|first|center).</td>
+                            <td>Slider item/items to apply the transition active class to (all|first).</td>
                         </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>