uikit 3.9.5-dev.e48c5e252 → 3.10.1-dev.6b26facf9

package/src/scss/components/search.scss

@@ -30,6 +30,7 @@ $search-default-background:                          $global-muted-background !d
 $search-default-focus-background:                    darken($search-default-background, 5%) !default;
 
 $search-default-icon-width:                          $global-control-height !default;
+$search-default-icon-padding:                        0 !default;
 
 $search-navbar-width:                                400px !default;
 $search-navbar-height:                               40px !default;
@@ -37,6 +38,7 @@ $search-navbar-background:                           transparent !default;
 $search-navbar-font-size:                            $global-large-font-size !default;
 
 $search-navbar-icon-width:                           40px !default;
+$search-navbar-icon-padding:                         0 !default;
 
 $search-large-width:                                 500px !default;
 $search-large-height:                                80px !default;
@@ -44,6 +46,7 @@ $search-large-background:                            transparent !default;
 $search-large-font-size:                             $global-2xlarge-font-size !default;
 
 $search-large-icon-width:                            80px !default;
+$search-large-icon-padding:                          0 !default;
 
 $search-toggle-color:                                $global-muted-color !default;
 $search-toggle-hover-color:                          $global-color !default;
@@ -205,8 +208,8 @@ $search-toggle-hover-color:                          $global-color !default;
 
 .uk-search-default .uk-search-icon { width: $search-default-icon-width; }
 
-.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width); }
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width); }
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width + $search-default-icon-padding); }
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -236,8 +239,8 @@ $search-toggle-hover-color:                          $global-color !default;
 
 .uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; }
 
-.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width); }
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width); }
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); }
 
 
 /* Large modifier
@@ -267,8 +270,8 @@ $search-toggle-hover-color:                          $global-color !default;
 
 .uk-search-large .uk-search-icon { width: $search-large-icon-width; }
 
-.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width); }
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width); }
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width + $search-large-icon-padding); }
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); }
 
 
 /* Toggle

package/src/scss/components/utility.scss

@@ -40,6 +40,7 @@ $border-rounded-border-radius:                   5px !default;
 $box-shadow-duration:                            0.1s !default;
 
 $box-shadow-bottom-height:                       30px !default;
+$box-shadow-bottom-bottom:                       (-$box-shadow-bottom-height) !default;
 $box-shadow-bottom-border-radius:                100% !default;
 $box-shadow-bottom-background:                   #444 !default;
 $box-shadow-bottom-blur:                         20px !default;
@@ -246,7 +247,8 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
  * Fix initial iframe width. Without the viewport is expanded on iOS devices
  */
 
-[uk-responsive] { max-width: 100%; }
+[uk-responsive],
+[data-uk-responsive] { max-width: 100%; }
 
 
 /* Border
@@ -303,10 +305,10 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     }
 
     .uk-box-shadow-bottom::after {
-        content: '';
+        content: "";
         /* 1 */
         position: absolute;
-        bottom: (-$box-shadow-bottom-height);
+        bottom: $box-shadow-bottom-bottom;
         left: 0;
         right: 0;
         z-index: -1;

package/src/scss/components/width.scss

@@ -370,6 +370,13 @@ $width-2xlarge-width:                            750px !default;
 
 }
 
+/* Intrinsic Widths
+ ========================================================================== */
+
+.uk-width-max-content { width: max-content; }
+
+.uk-width-min-content { width: min-content; }
+
 
 // Hooks
 // ========================================================================

package/src/scss/variables-theme.scss

@@ -836,16 +836,19 @@ $search-default-padding-horizontal: 10px !default;
 $search-default-background: transparent !default;
 $search-default-focus-background: darken($search-default-background, 5%) !default;
 $search-default-icon-width: $global-control-height !default;
+$search-default-icon-padding: 0 !default;
 $search-navbar-width: 400px !default;
 $search-navbar-height: 40px !default;
 $search-navbar-background: transparent !default;
 $search-navbar-font-size: $global-large-font-size !default;
 $search-navbar-icon-width: 40px !default;
+$search-navbar-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
 $search-large-icon-width: 80px !default;
+$search-large-icon-padding: 0 !default;
 $search-toggle-color: $global-muted-color !default;
 $search-toggle-hover-color: $global-color !default;
 $inverse-search-color: $inverse-global-color !default;
@@ -1037,6 +1040,7 @@ $panel-scrollable-border: $global-border !default;
 $border-rounded-border-radius: 5px !default;
 $box-shadow-duration: 0.1s !default;
 $box-shadow-bottom-height: 30px !default;
+$box-shadow-bottom-bottom: (-$box-shadow-bottom-height) !default;
 $box-shadow-bottom-border-radius: 100% !default;
 $box-shadow-bottom-background: #444 !default;
 $box-shadow-bottom-blur: 20px !default;

package/src/scss/variables.scss

@@ -834,16 +834,19 @@ $search-default-padding-horizontal: 10px !default;
 $search-default-background: $global-muted-background !default;
 $search-default-focus-background: darken($search-default-background, 5%) !default;
 $search-default-icon-width: $global-control-height !default;
+$search-default-icon-padding: 0 !default;
 $search-navbar-width: 400px !default;
 $search-navbar-height: 40px !default;
 $search-navbar-background: transparent !default;
 $search-navbar-font-size: $global-large-font-size !default;
 $search-navbar-icon-width: 40px !default;
+$search-navbar-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
 $search-large-icon-width: 80px !default;
+$search-large-icon-padding: 0 !default;
 $search-toggle-color: $global-muted-color !default;
 $search-toggle-hover-color: $global-color !default;
 $inverse-search-color: $inverse-global-color !default;
@@ -1035,6 +1038,7 @@ $panel-scrollable-border: $global-border !default;
 $border-rounded-border-radius: 5px !default;
 $box-shadow-duration: 0.1s !default;
 $box-shadow-bottom-height: 30px !default;
+$box-shadow-bottom-bottom: (-$box-shadow-bottom-height) !default;
 $box-shadow-bottom-border-radius: 100% !default;
 $box-shadow-bottom-background: #444 !default;
 $box-shadow-bottom-blur: 20px !default;

package/tests/base.html

@@ -15,13 +15,13 @@
             <div uk-grid>
                 <div class="uk-width-2-3@m">
 
-                    <h1>This is a H1 heading</h1>
+                    <h1>this is an H1 heading</h1>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h2>This is a H2 heading</h2>
+                    <h2>this is an H2 heading</h2>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -36,7 +36,7 @@
 
                     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h3>This is a H3 heading</h3>
+                    <h3>this is an H3 heading</h3>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -44,7 +44,7 @@
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h4>This is a H4 heading</h4>
+                    <h4>this is an H4 heading</h4>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -55,7 +55,7 @@
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h5>This is a H5 heading</h5>
+                    <h5>this is an H5 heading</h5>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -63,7 +63,7 @@
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h6>This is a H6 heading</h6>
+                    <h6>this is an H6 heading</h6>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -71,27 +71,27 @@
 
                     <hr>
 
-                    <h1>This is a H1 heading<br>with some more text</h1>
+                    <h1>this is an H1 heading<br>with some more text</h1>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h2>This is a H2 heading<br>with some more text</h2>
+                    <h2>this is an H2 heading<br>with some more text</h2>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h3>This is a H3 heading<br>with some more text</h3>
+                    <h3>this is an H3 heading<br>with some more text</h3>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h4>This is a H4 heading<br>with some more text</h4>
+                    <h4>this is an H4 heading<br>with some more text</h4>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h5>This is a H5 heading<br>with some more text</h5>
+                    <h5>this is an H5 heading<br>with some more text</h5>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h6>This is a H6 heading<br>with some more text</h6>
+                    <h6>this is an H6 heading<br>with some more text</h6>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 

package/tests/button.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Button - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             body { padding-bottom: 500px; }
 

package/tests/cover.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Cover - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .test-height { height: 300px; }
 
@@ -51,7 +51,7 @@
                     <h3>Iframe (YouTube)</h3>
 
                     <div class="test-height uk-cover-container uk-light">
-                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                         <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                             <h1>Heading</h1>
                         </div>
@@ -63,7 +63,7 @@
                     <h3>Iframe (Vimeo)</h3>
 
                     <div class="test-height uk-cover-container uk-light">
-                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" frameborder="0" allowfullscreen uk-cover></iframe>
+                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" allowfullscreen uk-cover></iframe>
                         <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                             <h1>Heading</h1>
                         </div>
@@ -94,7 +94,7 @@
 
                     <div class="uk-cover-container uk-light">
                         <canvas width="600" height="400"></canvas>
-                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                         <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                             <h1>Heading</h1>
                         </div>
@@ -123,7 +123,7 @@
                     <h3>Iframe (YouTube)</h3>
 
                     <div class="uk-cover-container uk-light" uk-height-viewport>
-                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                         <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                             <h1>Heading</h1>
                         </div>

package/tests/drop.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Drop - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .boundary { border: 1px dashed rgba(0,0,0,0.2); }
 
@@ -381,7 +381,7 @@
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
                             <td>true</td>
-                            <td>Referenced element to keep Drop's visibility. By default it's the window.</td>
+                            <td>Referenced element to keep Drop's visibility. By default, it's the window.</td>
                         </tr>
                         <tr>
                             <td><code>boundary-align</code></td>

package/tests/dropdown.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Dropdown - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .test {
                 display: block;

package/tests/flex.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Flex - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .uk-flex > * {
                 padding: 10px;

package/tests/grid-masonry.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Grid Masonry - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             :nth-child(7n-6) > .uk-panel { height: 120px; background: rgba(0,0,0,0.1); }
             :nth-child(7n-5) > .uk-panel { height: 180px; background: rgba(0,0,0,0.15); }

package/tests/grid-parallax.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Grid Parallax - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .uk-panel { height: 300px; }
 

package/tests/grid.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Grid - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .uk-panel {
                 padding: 10px;

package/tests/height.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Height - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             [uk-height-match] > * > .uk-panel {
                 padding: 10px;
@@ -86,7 +86,7 @@
                         <td><code>target</code></td>
                         <td>CSS selector</td>
                         <td><code>> *</code></td>
-                        <td>Elements that should match. By default the children will match.</td>
+                        <td>Elements that should match. By default, the children will match.</td>
                     </tr>
                     <tr>
                         <td><code>row</code></td>

package/tests/margin.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Margin - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .uk-panel {
                 padding: 20px;

package/tests/modal.html

@@ -384,14 +384,14 @@
         <div id="modal-media-youtube" class="uk-flex-top" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" frameborder="0" uk-video></iframe>
+                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-video></iframe>
             </div>
         </div>
 
         <div id="modal-media-vimeo" class="uk-flex-top" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" frameborder="0" uk-video></iframe>
+                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-video></iframe>
             </div>
         </div>
 

package/tests/navbar.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Navbar - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .test {
                 display: block;
@@ -1956,7 +1956,7 @@
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
                             <td>true</td>
-                            <td>Referenced element to keep Drop's visibility. By default it's the navbar component's element.</td>
+                            <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
                         </tr>
                         <tr>
                             <td><code>boundary-align</code></td>

package/tests/padding.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Padding - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .uk-panel { background: #f0f0f0; }
 

package/tests/parallax.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Parallax - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .test-color { border: 10px #fff solid; }
 

package/tests/search.html

@@ -18,7 +18,7 @@
 
             <div class="uk-margin">
                 <form class="uk-search uk-search-default">
-                    <input class="uk-search-input" type="search" placeholder="Search">
+                    <input class="uk-search-input" type="search" placeholder="Search" autofocus>
                 </form>
             </div>
 

package/tests/slider.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Slider - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .test > :nth-child(10n-9) > canvas { background: rgba(0,0,0,0.1); }
             .test > :nth-child(10n-8) > canvas { background: rgba(0,0,0,0.15); }

package/tests/slideshow.html

@@ -105,14 +105,14 @@
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">YouTube</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" frameborder="0" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" allowfullscreen uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">Vimeo</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>

package/tests/sticky.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Sticky - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             #viewport { border: 1px dashed rgba(0,0,0,0.2); }
 
@@ -115,7 +115,7 @@
                             <td><code>width-element</code></td>
                             <td>CSS Selector</td>
                             <td>false</td>
-                            <td>The element the Sticky should get its with from in active mode.</td>
+                            <td>The element the Sticky should get its width from in active mode.</td>
                         </tr>
                         <tr>
                             <td><code>show-on-up</code></td>

package/tests/switcher.html

@@ -346,7 +346,7 @@
                             <td><code>itemNav</code></td>
                             <td>CSS selector</td>
                             <td>false</td>
-                            <td>Related nav container. By default, nav items are found in related items container only.</td>
+                            <td>Related nav container. By default, nav items are found in related item's container only.</td>
                         </tr>
                         <tr>
                             <td><code>active</code></td>

package/tests/tab.html

@@ -170,7 +170,7 @@
                             <td><code>connect</code></td>
                             <td>CSS selector</td>
                             <td>false</td>
-                            <td>Related items container. By default next element with class 'uk-switcher'.</td>
+                            <td>Related items container. By default, next element with class 'uk-switcher'.</td>
                         </tr>
                         <tr>
                             <td><code>toggle</code></td>

package/tests/utility.html

@@ -235,7 +235,7 @@
             <div class="uk-child-width-1-3@s" uk-grid>
                 <div>
                     <p>JS Responsive Width (Iframe)</p>
-                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive></iframe>
+                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1" width="1920" height="1080" allowfullscreen uk-responsive></iframe>
                 </div>
                 <div>
                     <p>Responsive Height (Image)</p>

package/tests/video.html

@@ -18,7 +18,7 @@
                 <div>
 
                     <h3>Autoplay</h3>
-                    
+
                     <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
                     <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video="automute: true"></video>
 
@@ -28,7 +28,7 @@
                     <h3>Autoplay Inview</h3>
 
                     <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
-                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true; autoplay: inview"></iframe>
+                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-responsive uk-video="automute: true; autoplay: inview"></iframe>
                 </div>
             </div>
 
@@ -48,7 +48,7 @@
                         <td><code>autoplay</code></td>
                         <td>Boolean|String</td>
                         <td><code>true</code></td>
-                        <td>The video automatically plays/pauses as it's visible/hidden on the page. A value of `inview` will delay loading the video and play/pause the video as it enters/leaves the viewport.</td>
+                        <td>The video automatically plays/pauses when visible/hidden on the page. A value of `inview` will delay loading the video and play/pause the video as it enters/leaves the viewport.</td>
                     </tr>
                     <tr>
                         <td><code>automute</code></td>

package/tests/width.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Width - UIkit tests</title>
         <script src="js/test.js"></script>
-        <style type="text/css">
+        <style>
 
             .uk-panel {
                 padding: 10px;