uikit 3.7.7-dev.4ce0508ae → 3.8.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.7.7-dev.4ce0508ae",
+  "version": "3.8.1",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -34,26 +34,26 @@
   },
   "homepage": "https://getuikit.com",
   "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.5",
+    "@rollup/plugin-alias": "^3.1.8",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-replace": "^2.4.2",
     "archiver": "5.3.0",
     "camelcase": "^6.2.0",
-    "clean-css": "^5.1.5",
+    "clean-css": "^5.2.2",
     "dateformat": "^4.6.3",
-    "eslint": "8.0.1",
+    "eslint": "8.1.0",
     "glob": "^7.2.0",
     "inquirer": "8.2.0",
     "less": "^2.7.2",
     "minimist": "^1.2.5",
     "npm-watch": "github:dasdeck/npm-watch#46a8a36c61cfd998ed53d27f62eaf79e11c395b4",
-    "postcss": "8.3.9",
-    "rollup": "^2.57.0",
+    "postcss": "8.3.11",
+    "rollup": "^2.59.0",
     "rollup-plugin-html": "^0.2.1",
     "rtlcss": "^3.3.0",
     "semver": "^7.3.2",
     "svgo": "^1.3.2",
-    "uglify-js": "^3.14.2"
+    "uglify-js": "^3.14.3"
   },
   "watch": {
     "compile-js": "src/js/**/*.js",

package/src/js/util/viewport.js

@@ -37,25 +37,31 @@ export function scrollTop(element, top) {
 export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
 
     const parents = isVisible(element) ? scrollParents(element) : [];
-    let diff = 0;
     return parents.reduce((fn, scrollElement, i) => {
 
-        const {scrollTop, scrollHeight} = scrollElement;
+        const {scrollTop, scrollHeight, offsetHeight} = scrollElement;
         const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
+        const {height: elHeight, top: elTop} = offset(parents[i - 1] || element);
 
         let top = Math.ceil(
-            offset(parents[i - 1] || element).top
+            elTop
             - offset(getViewport(scrollElement)).top
             - offsetBy
-            + diff
             + scrollTop
         );
 
+        if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
+            top += offsetBy;
+        } else {
+            offsetBy = 0;
+        }
+
         if (top > maxScroll) {
-            diff = top - maxScroll;
+            offsetBy -= top - maxScroll;
             top = maxScroll;
-        } else {
-            diff = 0;
+        } else if (top < 0) {
+            offsetBy -= top;
+            top = 0;
         }
 
         return () => scrollTo(scrollElement, top - scrollTop).then(fn);

package/src/less/components/base.less

@@ -76,7 +76,10 @@
 @base-pre-font-family:                          @base-code-font-family;
 @base-pre-color:                                @global-color;
 
-@base-focus-outline:                            @global-emphasis-color;     
+@base-focus-outline-width:                      2px;
+@base-focus-outline-style:                      dotted;
+@base-focus-outline:                            @global-emphasis-color;
+@base-focus-outline-offset:                     1px;
 
 @base-selection-background:                     #39f;
 @base-selection-color:                          @global-inverse-color;
@@ -521,22 +524,26 @@ pre code { font-family: @base-pre-font-family; }
 
 /*
  * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor. 
- * 1. Set `:focus` style as fallback for `:focus-visible`.
- * 2. Remove `:focus` style for browsers which support `:focus-visible`.
- * 2. Set `:focus-visible` style for browsers which support it.
+ * 1. Fallback: Remove `:focus` for a negative tabindexes.
+ * 2. Fallback: Set `:focus` style but not for negative tabindexes.
+ * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
+ * 4. Set `:focus-visible` style for browsers which support it.
  */
 
 /* 1 */
-:focus {
-    outline: 2px dotted @base-focus-outline;
-    outline-offset: 1px;
-}
+:focus { outline: none; }
 
 /* 2 */
-:focus:not(:focus-visible) { outline: none; }
+:focus:not([tabindex^='-']) {
+    outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline;
+    outline-offset: @base-focus-outline-offset;
+}
 
 /* 3 */
-:focus-visible { outline: 2px dotted @base-focus-outline; }
+:focus:not(:focus-visible) { outline: none; }
+
+/* 4 */
+:focus-visible { outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline; }
 
 
 /* Selection pseudo-element

package/src/less/components/padding.less

@@ -16,7 +16,7 @@
 
 @padding-small-padding:                                 @global-small-gutter;
 
-@padding-large-padding:                                 @global-gutter;
+@padding-large-padding:                                 @global-medium-gutter;
 @padding-large-padding-l:                               @global-large-gutter;
 
 

package/src/less/components/utility.less

@@ -49,8 +49,8 @@
 
 @logo-font-size:                                @global-large-font-size;
 @logo-font-family:                              @global-font-family;
-@logo-color:                                    @global-color;
-@logo-hover-color:                              @global-color;
+@logo-color:                                    @global-emphasis-color;
+@logo-hover-color:                              @global-emphasis-color;
 
 @dragover-box-shadow:                           0 0 20px rgba(100,100,100,0.3);
 
@@ -470,8 +470,8 @@
 // Inverse
 // ========================================================================
 
-@inverse-logo-color:                           @inverse-global-color;
-@inverse-logo-hover-color:                     @inverse-global-color;
+@inverse-logo-color:                           @inverse-global-emphasis-color;
+@inverse-logo-hover-color:                     @inverse-global-emphasis-color;
 
 .hook-inverse() {
 

package/src/scss/components/base.scss

@@ -76,7 +76,10 @@ $base-pre-line-height:                           1.5 !default;
 $base-pre-font-family:                           $base-code-font-family !default;
 $base-pre-color:                                 $global-color !default;
 
-$base-focus-outline:                             $global-emphasis-color !default;     
+$base-focus-outline-width:                       2px !default;
+$base-focus-outline-style:                       dotted !default;
+$base-focus-outline:                             $global-emphasis-color !default;
+$base-focus-outline-offset:                      1px !default;
 
 $base-selection-background:                      #39f !default;
 $base-selection-color:                           $global-inverse-color !default;
@@ -521,22 +524,26 @@ pre code { font-family: $base-pre-font-family; }
 
 /*
  * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor. 
- * 1. Set `:focus` style as fallback for `:focus-visible`.
- * 2. Remove `:focus` style for browsers which support `:focus-visible`.
- * 2. Set `:focus-visible` style for browsers which support it.
+ * 1. Fallback: Remove `:focus` for a negative tabindexes.
+ * 2. Fallback: Set `:focus` style but not for negative tabindexes.
+ * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
+ * 4. Set `:focus-visible` style for browsers which support it.
  */
 
 /* 1 */
-:focus {
-    outline: 2px dotted $base-focus-outline;
-    outline-offset: 1px;
-}
+:focus { outline: none; }
 
 /* 2 */
-:focus:not(:focus-visible) { outline: none; }
+:focus:not([tabindex^='-']) {
+    outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline;
+    outline-offset: $base-focus-outline-offset;
+}
 
 /* 3 */
-:focus-visible { outline: 2px dotted $base-focus-outline; }
+:focus:not(:focus-visible) { outline: none; }
+
+/* 4 */
+:focus-visible { outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline; }
 
 
 /* Selection pseudo-element

package/src/scss/components/padding.scss

@@ -16,7 +16,7 @@ $padding-padding-l:                                      $global-medium-gutter !
 
 $padding-small-padding:                                  $global-small-gutter !default;
 
-$padding-large-padding:                                  $global-gutter !default;
+$padding-large-padding:                                  $global-medium-gutter !default;
 $padding-large-padding-l:                                $global-large-gutter !default;
 
 

package/src/scss/components/utility.scss

@@ -49,8 +49,8 @@ $dropcap-font-size:                              (($global-line-height * 3) * 1e
 
 $logo-font-size:                                 $global-large-font-size !default;
 $logo-font-family:                               $global-font-family !default;
-$logo-color:                                     $global-color !default;
-$logo-hover-color:                               $global-color !default;
+$logo-color:                                     $global-emphasis-color !default;
+$logo-hover-color:                               $global-emphasis-color !default;
 
 $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3) !default;
 
@@ -470,8 +470,8 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 // Inverse
 // ========================================================================
 
-$inverse-logo-color:                            $inverse-global-color !default;
-$inverse-logo-hover-color:                      $inverse-global-color !default;
+$inverse-logo-color:                            $inverse-global-emphasis-color !default;
+$inverse-logo-hover-color:                      $inverse-global-emphasis-color !default;
 
 
 

package/src/scss/variables-theme.scss

@@ -142,7 +142,10 @@ $base-pre-font-size: $global-small-font-size !default;
 $base-pre-line-height: 1.5 !default;
 $base-pre-font-family: $base-code-font-family !default;
 $base-pre-color: $global-color !default;
+$base-focus-outline-width: 2px !default;
+$base-focus-outline-style: dotted !default;
 $base-focus-outline: $global-emphasis-color !default;
+$base-focus-outline-offset: 1px !default;
 $base-selection-background: #39f !default;
 $base-selection-color: $global-inverse-color !default;
 $inverse-base-color: $inverse-global-color !default;
@@ -798,7 +801,7 @@ $overlay-primary-color-mode: light !default;
 $padding-padding: $global-gutter !default;
 $padding-padding-l: $global-medium-gutter !default;
 $padding-small-padding: $global-small-gutter !default;
-$padding-large-padding: $global-gutter !default;
+$padding-large-padding: $global-medium-gutter !default;
 $padding-large-padding-l: $global-large-gutter !default;
 $pagination-margin-horizontal: 0 !default;
 $pagination-item-padding-vertical: 5px !default;
@@ -1041,11 +1044,11 @@ $dropcap-margin-right: 10px !default;
 $dropcap-font-size: (($global-line-height * 3) * 1em) !default;
 $logo-font-size: $global-large-font-size !default;
 $logo-font-family: $global-font-family !default;
-$logo-color: $global-color !default;
-$logo-hover-color: $global-color !default;
+$logo-color: $global-emphasis-color !default;
+$logo-hover-color: $global-emphasis-color !default;
 $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default;
-$inverse-logo-color: $inverse-global-color !default;
-$inverse-logo-hover-color: $inverse-global-color !default;
+$inverse-logo-color: $inverse-global-emphasis-color !default;
+$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;

package/src/scss/variables.scss

@@ -142,7 +142,10 @@ $base-pre-font-size: $global-small-font-size !default;
 $base-pre-line-height: 1.5 !default;
 $base-pre-font-family: $base-code-font-family !default;
 $base-pre-color: $global-color !default;
+$base-focus-outline-width: 2px !default;
+$base-focus-outline-style: dotted !default;
 $base-focus-outline: $global-emphasis-color !default;
+$base-focus-outline-offset: 1px !default;
 $base-selection-background: #39f !default;
 $base-selection-color: $global-inverse-color !default;
 $inverse-base-color: $inverse-global-color !default;
@@ -796,7 +799,7 @@ $overlay-primary-color-mode: light !default;
 $padding-padding: $global-gutter !default;
 $padding-padding-l: $global-medium-gutter !default;
 $padding-small-padding: $global-small-gutter !default;
-$padding-large-padding: $global-gutter !default;
+$padding-large-padding: $global-medium-gutter !default;
 $padding-large-padding-l: $global-large-gutter !default;
 $pagination-margin-horizontal: 0 !default;
 $pagination-item-padding-vertical: 5px !default;
@@ -1039,11 +1042,11 @@ $dropcap-margin-right: 10px !default;
 $dropcap-font-size: (($global-line-height * 3) * 1em) !default;
 $logo-font-size: $global-large-font-size !default;
 $logo-font-family: $global-font-family !default;
-$logo-color: $global-color !default;
-$logo-hover-color: $global-color !default;
+$logo-color: $global-emphasis-color !default;
+$logo-hover-color: $global-emphasis-color !default;
 $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default;
-$inverse-logo-color: $inverse-global-color !default;
-$inverse-logo-hover-color: $inverse-global-color !default;
+$inverse-logo-color: $inverse-global-emphasis-color !default;
+$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;

package/tests/scroll.html

@@ -6,6 +6,15 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Scroll - UIkit tests</title>
         <script src="js/test.js"></script>
+        <script>
+
+            UIkit.util.on(document, 'change', '#offset', function (e) {
+                UIkit.util.$$('[uk-scroll]').forEach(function (el) {
+                    el.setAttribute('data-offset', e.target.value);
+                })
+            })
+
+        </script>
     </head>
 
     <body>
@@ -14,12 +23,67 @@
 
             <h1>Scroll</h1>
 
+            <div class="uk-margin">
+                <label class="uk-form-label" for="offset">Offset</label>
+                <div class="uk-form-controls">
+                    <input class="uk-input uk-form-width-small" id="offset" type="text" value="0">
+                </div>
+            </div>
             <a class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down!</a>
+            <a class="uk-button uk-button-default" href="#second-card" uk-scroll>Go to second card!</a>
+            <a class="uk-button uk-button-default" href="#nested-card" uk-scroll>Go to last nested card!</a>
             <a id="js-top-callback" class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down with callback!</a>
 
-            <div style="height: 2000px;"></div>
+            <div class="uk-flex uk-flex-column uk-flex-center" style="height: 2000px;">
+
+                <div class="uk-overflow-auto" style="height: 300px;">
+                    <div class="uk-card uk-card-default uk-card-hover uk-card-body">
+                        <h3 class="uk-card-title">1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                    </div>
+                    <div id="second-card" class="uk-card uk-card-primary uk-card-hover uk-card-body">
+                        <h3 class="uk-card-title">2</h3>
+                        <div class="uk-overflow-auto" style="height: 250px;">
+                            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Nested 1</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+                            <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Nested 2</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+                            <div id="nested-card" class="uk-card uk-card-default uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Nested 3</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
+                        <h3 class="uk-card-title">3</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                    </div>
+                </div>
+
+
+            </div>
 
             <a id="bottom" class="uk-button uk-button-default" href="#" uk-scroll>Go Up!</a>
+            <a class="uk-button uk-button-default" href="#nested-card" uk-scroll>Go to last nested card!</a>
 
             <script>