Release 3.8.0: upgraded UIkit framework to 3.21.0, updated SCSS varia…

…bles

README.md

@@ -2,7 +2,7 @@
 Starter development template for building [UIkit v3](https://getuikit.com/) themed [OctoberCMS](https://octobercms.com/) sites.
 
 Includes:
-- latest UIkit ^3.20 [source from official repository](https://github.com/uikit/uikit)
+- latest UIkit ^3.21 [source from official repository](https://github.com/uikit/uikit)
 - style guide layout with most UI components
 - [GulpJS-based build system](https://nystudio107.com/blog/a-gulp-workflow-for-frontend-development-automation) for development and production
 - [NPM-based config system](https://nystudio107.com/blog/a-better-package-json-for-the-frontend) for development and production

assets/js/uikit3.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.20.11 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.21.0 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -3534,7 +3534,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.20.11";
+    App.version = "3.21.0";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -7804,9 +7804,9 @@
 
     var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";
 
-    var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
+    var searchMedium = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
 
-    var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
+    var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
 
     var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5\"/></svg>";
 
@@ -8002,8 +8002,8 @@
       "pagination-next": paginationNext,
       "pagination-previous": paginationPrevious,
       "search-icon": searchIcon,
+      "search-medium": searchMedium,
       "search-large": searchLarge,
-      "search-navbar": searchNavbar,
       "search-toggle-icon": searchIcon,
       "slidenav-next": slidenavNext,
       "slidenav-next-large": slidenavNextLarge,
@@ -8052,7 +8052,7 @@
       i18n: { toggle: "Open Search", submit: "Submit Search" },
       beforeConnect() {
         const isToggle = hasClass(this.$el, "uk-search-toggle") || hasClass(this.$el, "uk-navbar-toggle");
-        this.icon = isToggle ? "search-toggle-icon" : hasClass(this.$el, "uk-search-icon") && this.$el.closest(".uk-search-large") ? "search-large" : this.$el.closest(".uk-search-navbar") ? "search-navbar" : this.$props.icon;
+        this.icon = isToggle ? "search-toggle-icon" : hasClass(this.$el, "uk-search-icon") && this.$el.closest(".uk-search-large") ? "search-large" : this.$el.closest(".uk-search-medium") ? "search-medium" : this.$props.icon;
         if (hasAttr(this.$el, "aria-label")) {
           return;
         }

assets/scss/_components-variables.scss

@@ -929,15 +929,22 @@ $search-default-width: 240px !default;
 $search-default-height: $global-control-height !default;
 $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-focus-background: darken($search-default-background, 2%) !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-width: 240px !default;
+$search-navbar-height: $global-control-height !default;
+$search-navbar-padding-horizontal: 10px !default;
+$search-navbar-background: $global-background !default;
+$search-navbar-focus-background: darken($search-navbar-background, 1%) !default;
+$search-navbar-icon-width: $global-control-height !default;
 $search-navbar-icon-padding: 0 !default;
+$search-medium-width: 400px !default;
+$search-medium-height: 40px !default;
+$search-medium-background: transparent !default;
+$search-medium-font-size: $global-large-font-size !default;
+$search-medium-icon-width: 40px !default;
+$search-medium-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
@@ -951,7 +958,9 @@ $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: $inverse-global-muted-background !default;
 $inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
-$inverse-search-navbar-background: transparent !default;
+$inverse-search-navbar-background: $inverse-global-muted-background !default;
+$inverse-search-navbar-focus-background: fade-in($inverse-search-navbar-background, 0.05) !default;
+$inverse-search-medium-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;
 $inverse-search-toggle-hover-color: $inverse-global-color !default;