Merge pull request #302 from templaza/developer

Version 2.6.5
templaza · May 16, 2023 · f961779 · f961779
2 parents f7edf37 + ea2dacb
commit f961779
Show file tree

Hide file tree

Showing 86 changed files with 2,305 additions and 649 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 [![Github All Releases](https://img.shields.io/github/downloads/templaza/astroid-framework/total.svg)](https://github.com/templaza/astroid-framework/releases)
 [![License: GPL v3](https://img.shields.io/badge/License-GPL%20v3-blue.svg)](http://www.gnu.org/licenses/gpl-3.0)
 [![GitHub release](https://img.shields.io/github/release/templaza/astroid-framework.svg)](https://github.com/templaza/astroid-framework/releases)
+[![Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/2MwtsAX4Py)
 
 # Astroid Framework - Powerful Joomla Template Framework
 
@@ -26,6 +27,8 @@
 * Sass ready
 * Responsive & Accessible Design
 * Refactored Codebase
+* RTL Support
+* Light & Dark Color Mode
 
 ## Requirements
 * Joomla: 3.x, 4.x
@@ -37,9 +40,11 @@
 | &nbsp;&nbsp;Chrome 64+&nbsp;&nbsp; | &nbsp;&nbsp;Firefox 58+&nbsp;&nbsp; | &nbsp;&nbsp;Edge 14+&nbsp;&nbsp; | &nbsp;&nbsp;Safari 10+ &nbsp;&nbsp; |
 
 ## Links
-* [Documentation](https://github.com/templaza/astroid-framework/wiki)
-* [Translations](https://github.com/templaza/astroid-framework/tree/language)
-* [Changelogs](https://github.com/templaza/astroid-framework/releases)
+* [Homepage](https://astroidframe.work/) - Learn more about Astroid
+* [Documentation](https://docs.astroidframe.work/) - How to use Astroid
+* [Translations](https://github.com/templaza/astroid-framework/tree/language) - Join to translate Astroid
+* [Changelogs](https://github.com/templaza/astroid-framework/releases) - View our Changelogs
+* [Discord Chat](https://discord.gg/2MwtsAX4Py) - Join our developer chat on Discord.
 
 ## Find an Astroid Template provider
 * [TemPlaza - Joomla Template](https://www.templaza.com/joomla-templates.html)

diff --git a/assets/js/astroid-framework.js b/assets/js/astroid-framework.js
@@ -486,19 +486,29 @@ astroidFramework.directive("colorPicker", function ($parse) {
          if ($(element).hasClass("color-picker-lg")) {
             var spectrumConfigExtend = angular.copy(spectrumConfig);
             spectrumConfigExtend.replacerClassName = "color-picker-lg";
-            $(element).spectrum(spectrumConfigExtend)
+            $(element).spectrum(spectrumConfigExtend);
          } else {
             $(element).spectrum(spectrumConfig)
          }
          $(element).on("move.spectrum", function (e, tinycolor) {
-            $(element).spectrum("set", tinycolor.toRgbString())
+            if (tinycolor !== null && tinycolor !== undefined) {
+               $(element).spectrum("set", tinycolor.toRgbString());
+            }
          });
+
          var setColor = function () {
-            $(element).spectrum("set", ngModel.$modelValue)
+            if (ngModel.$modelValue !== undefined && ngModel.$modelValue) {
+               try {
+                  var _params = JSON.parse(ngModel.$modelValue);
+                  $(element).spectrum("set", _params.light);
+               } catch (e) {
+                  $(element).spectrum("set", ngModel.$modelValue);
+               }
+            }
          };
          setTimeout(function () {
-            var _value = $(element).val();
-            $(element).spectrum("set", _value);
+            // var _value = $(element).val();
+            // $(element).spectrum("set", _value);
             scope.$watch(attrs["ngModel"], setColor)
          }, 200)
       }
@@ -924,4 +934,71 @@ astroidFramework.directive("astroidgradient", ["$http", function ($http) {
          }, 100)
       }
    }
+}]);
+astroidFramework.directive("astroidcolor", ["$http", function ($http) {
+   return {
+      restrict: "A",
+      scope: true,
+      require: "ngModel",
+      link: function ($scope, $element, $attrs, ngModel) {
+         if (typeof $ == "undefined") {
+            var $ = jQuery
+         }
+         var _colorPicker = $($element).parent(".astroid-color"),
+             _colorLight = $(_colorPicker).find(".color-light"),
+             _colorDark = $(_colorPicker).find(".color-dark"),
+             _initValue = false;
+         var updatePreview = function () {
+            var _light = _colorLight.val();
+            var _dark = _colorDark.val();
+
+            var _params = {
+               light: "",
+               dark: "",
+            };
+            _params.light = _light;
+            _params.dark = _dark;
+            _params = JSON.stringify(_params);
+            ngModel.$setViewValue(_params);
+            $($element).val(_params);
+            $scope.$apply()
+         };
+         _colorLight.bind("change", updatePreview);
+         _colorDark.bind("change", updatePreview);
+
+         var setValue = function () {
+            if (!_initValue) {
+               _initValue = true;
+               if (typeof ngModel.$modelValue != "undefined") {
+                  try {
+                     var _params = JSON.parse(ngModel.$modelValue)
+                  } catch (e) {
+                     if (ngModel.$modelValue) {
+                        _params = {
+                           light: ngModel.$modelValue,
+                           dark: ngModel.$modelValue,
+                        }
+                     } else {
+                        _params = {
+                           light: "",
+                           dark: "",
+                        }
+                     }
+                  }
+               } else {
+                  var _params = {
+                     light: "",
+                     dark: "",
+                  }
+               }
+               _colorLight.spectrum("set", _params.light);
+               _colorDark.spectrum("set", _params.dark);
+               updatePreview()
+            }
+         };
+         setTimeout(function () {
+            setValue()
+         }, 100)
+      }
+   }
 }]);
diff --git a/assets/js/astroid.js b/assets/js/astroid.js
@@ -767,7 +767,7 @@ var AstroidAdmin = function AstroidAdmin() {
          this.initSelect();
          this.initSelectGrouping();
          //this.initAnimationSelector();
-         //this.initColorPicker();
+         // this.initColorPicker();
       } catch (e) {}
    };
 

diff --git a/assets/vendor/angular/ezlb.js b/assets/vendor/angular/ezlb.js
@@ -561,7 +561,6 @@ astroidFramework.controller('layoutController', function ($scope, $compile) {
                var _f = $('#element-settings-form').find('[name="' + _key + '"]');
                if (_f.length) {
                   if (_f.attr('type') == 'radio') {
-                     //console.log(_value);
                      $scope.elementParams[_key] = _value;
                      _change = true;
                   }
@@ -571,7 +570,6 @@ astroidFramework.controller('layoutController', function ($scope, $compile) {
                $scope.$apply();
             }
 
-
             Admin.ringLoading($('#element-settings').children('.ezlb-pop-body'), false);
             if (typeof _focus != 'undefined') {
                $('#element-settings').find('#' + _focus).focus();

diff --git a/assets/vendor/astroid/js/mobilemenu.js b/assets/vendor/astroid/js/mobilemenu.js
@@ -30,6 +30,12 @@
                // Add Button For Toggle Sub Menu
                if ($(this).children('a').length) {
                   $(this).children('a').after(_indicator);
+                  if ($(this).children('a').hasClass('item-link-heading')) {
+                     $(this).children('a').bind('click', function (event) {
+                        event.preventDefault();
+                        _indicator.next('.dropdown-menus').toggleClass('menu_open');
+                     });
+                  }
                }else{
                   $(this).children('span').after(_indicator);
                }

diff --git a/assets/vendor/astroid/js/offcanvas.js b/assets/vendor/astroid/js/offcanvas.js
@@ -22,21 +22,21 @@
             _class = 'astroid-offcanvas';
          }
 
-         // Added for click then close the Offcanvas the Menu  
-            var _li  = $(_content).find('li');
-            var _li_a  = _li.find("a");
-            _li_a.click(function(){
+         // Added for click then close the Offcanvas the Menu
+         var _li  = $(_content).find('li');
+         var _li_a  = _li.find("a");
+         _li_a.click(function(){
+            if (!_li_a.hasClass('item-link-heading')) {
                _reset();
-            });
-
-            
+            }
+         });
+
          $('body').addClass(_dir);
          var _reset = function () {
             _container.removeClass(_class + '-open');
             _trigger.removeClass('active');
             setTimeout(function () {
                $('body').removeClass(_class + '-opened');
-
             }, 500);
          };
 
@@ -59,7 +59,6 @@
                $(document).unbind(_eventtype, _bodyClick);
                $(_close).unbind(_eventtype, _bodyClick);
             }
-
          };
 
          _content.addClass(_effect);

diff --git a/assets/vendor/astroid/js/script.js b/assets/vendor/astroid/js/script.js
@@ -241,6 +241,57 @@
       $("#astroid-preloader").removeClass('d-flex').addClass('d-none');
    };
 
+   var setCookie = function (name, value, days) {
+      if (days) {
+         var date = new Date();
+         date.setTime(date.getTime()+(days*24*60*60*1000));
+         var expires = "; expires="+date.toGMTString();
+      }
+      else var expires = "";
+      document.cookie = name+"="+value+expires+"; path=/";
+   }
+
+   var initColorMode = function () {
+      if ($('.astroid-color-mode').length) {
+         var switcher   =  $('.astroid-color-mode .switcher'),
+             color_mode =  'light';
+         if (ASTROID_COLOR_MODE === 'auto') {
+            var cur_hour   =  new Date().getHours();
+            if ( (24 - cur_hour < 7) || (cur_hour < 6) ) {
+               color_mode  =  'dark';
+            }
+            if (color_mode === 'dark') {
+               switcher.prop('checked', true);
+            } else {
+               switcher.prop('checked', false);
+            }
+         } else {
+            color_mode  =  ASTROID_COLOR_MODE;
+         }
+         $('html').attr('data-bs-theme', color_mode);
+
+         switcher.on('change', function() {
+            if(this.checked) {
+               switcher.each(function (i, el){
+                  if (!this.checked){
+                     $(el).prop('checked', true);
+                  }
+               });
+               $('html').attr('data-bs-theme', 'dark');
+               setCookie('astroid-color-mode-'+TEMPLATE_HASH, 'dark', 3);
+            } else {
+               switcher.each(function (i, el){
+                  if (this.checked){
+                     $(el).prop('checked', false);
+                  }
+               });
+               $('html').attr('data-bs-theme', 'light');
+               setCookie('astroid-color-mode-'+TEMPLATE_HASH, 'light', 3);
+            }
+         });
+      }
+   }
+
    // Events
    var docReady = function () {
       initDisplay();
@@ -249,6 +300,7 @@
       initSidebarMenu();
       //initMegamenu();
       //initSubmenu();
+      initColorMode();
       initBackToTop();
       initHeader();
       initEmptyHeaderContent();

diff --git a/assets/vendor/astroid/scss/_header.scss b/assets/vendor/astroid/scss/_header.scss
@@ -85,6 +85,9 @@
          .astroid-logo-sticky:not([hidden]) {
             @include media-breakpoint-up(md) {
                display: block !important;
+               &.dark {
+                  display: none !important;
+               }
             }
          }
       }
@@ -115,7 +118,10 @@ header .logo-wrapper {
 .astroid-logo {
    @include media-breakpoint-down(md) {
       .astroid-logo-default {
-         display: none;
+         display: none !important;
+         &.dark {
+            display: none !important;
+         }
       }
    }
 
@@ -138,6 +144,43 @@ header .logo-wrapper {
    }
 }
 
+.astroid-logo-default {
+   &.dark {
+      display: none;
+   }
+}
+
+@include color-mode(dark) {
+   .astroid-header-section {
+      .astroid-header-sticky {
+         .astroid-logo {
+            .astroid-logo-sticky:not([hidden]) {
+               @include media-breakpoint-up(md) {
+                  display: none !important;
+                  &.dark {
+                     display: block !important;
+                  }
+               }
+            }
+         }
+      }
+   }
+   .astroid-logo-mobile {
+      @include media-breakpoint-down(md) {
+         display: none !important;
+         &.dark {
+            display: block !important;
+         }
+      }
+   }
+   .astroid-logo-default {
+      display: none;
+      &.dark {
+         display: block;
+      }
+   }
+}
+
 .fixed-header {
    .astroid-logo {
 

diff --git a/assets/vendor/astroid/scss/utilities/_colormode.scss b/assets/vendor/astroid/scss/utilities/_colormode.scss
@@ -0,0 +1,19 @@
+.astroid-color-mode .form-switch {
+  .form-check-input {
+    width: 2.8em;
+    height: 1.5em;
+    border-width: 3px;
+    &:not(:checked) {
+      --bs-form-switch-bg: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxnPjxwYXRoIGQ9Ik0yNTYsMTQ0Yy02MS43NSwwLTExMiw1MC4yNS0xMTIsMTEyYzAsNjEuNzQ5LDUwLjI1LDExMiwxMTIsMTEyczExMi01MC4yNTEsMTEyLTExMiAgICBDMzY4LDE5NC4yNSwzMTcuNzUsMTQ0LDI1NiwxNDR6IE0yNTYsMTEyYzguODMzLDAsMTYtNy4xNDYsMTYtMTZWNjRjMC04LjgzMy03LjE2Ny0xNi0xNi0xNmMtOC44NTQsMC0xNiw3LjE2Ny0xNiwxNnYzMiAgICBDMjQwLDEwNC44NTQsMjQ3LjE0NiwxMTIsMjU2LDExMnogTTI1Niw0MDBjLTguODU0LDAtMTYsNy4xNjctMTYsMTZ2MzJjMCw4Ljg1NCw3LjE0NiwxNiwxNiwxNmM4LjgzMywwLDE2LTcuMTQ2LDE2LTE2di0zMiAgICBDMjcyLDQwNy4xNjcsMjY0LjgzMyw0MDAsMjU2LDQwMHogTTM4MC40MTcsMTU0LjE2N2wyMi42MjUtMjIuNjI1YzYuMjUtNi4yNSw2LjI1LTE2LjM3NSwwLTIyLjYyNSAgICBjLTYuMjUxLTYuMjUtMTYuMzc1LTYuMjUtMjIuNjI1LDBsLTIyLjYyNSwyMi42MjVjLTYuMjUxLDYuMjUtNi4yNTEsMTYuMzc1LDAsMjIuNjI1ICAgIEMzNjQuMDQyLDE2MC40MTYsMzc0LjE2NiwxNjAuNDE2LDM4MC40MTcsMTU0LjE2N3ogTTEzMS41NDEsMzU3Ljg1NGwtMjIuNjIzLDIyLjYyNWMtNi4yNTIsNi4yNS02LjI1MiwxNi4zNzcsMCwyMi42MjUgICAgYzYuMjQ5LDYuMjUsMTYuMzczLDYuMjUsMjIuNjIzLDBsMjIuNjI1LTIyLjYyNWM2LjI1MS02LjI5MSw2LjI1MS0xNi4zNzUsMC0yMi42MjUgICAgQzE0Ny45MTcsMzUxLjYwNCwxMzcuNzkyLDM1MS41NjIsMTMxLjU0MSwzNTcuODU0eiBNMTEyLDI1NmMwLTguODMzLTcuMTY3LTE2LTE2LTE2SDY0Yy04Ljg1NCwwLTE2LDcuMTY3LTE2LDE2ICAgIGMwLDguODU0LDcuMTQ2LDE2LDE2LDE2aDMyQzEwNC44MzMsMjcyLDExMiwyNjQuODU0LDExMiwyNTZ6IE00NDgsMjQwaC0zMmMtOC44NTQsMC0xNiw3LjE2Ny0xNiwxNmMwLDguODU0LDcuMTQ2LDE2LDE2LDE2aDMyICAgIGM4LjgzMywwLDE2LTcuMTQ2LDE2LTE2QzQ2NCwyNDcuMTY3LDQ1Ni44MzMsMjQwLDQ0OCwyNDB6IE0xMzEuNTIxLDE1NC4xNjdjNi4yNDksNi4yNSwxNi4zNzUsNi4yNSwyMi42MjUsMCAgICBjNi4yNDktNi4yNSw2LjI0OS0xNi4zNzUsMC0yMi42MjVsLTIyLjYyNS0yMi42MjVjLTYuMjUtNi4yNS0xNi4zNzYtNi4yNS0yMi42MjUsMGMtNi4yNSw2LjI1LTYuMjUsMTYuMzc1LDAsMjIuNjI1ICAgIEwxMzEuNTIxLDE1NC4xNjd6IE0zODAuNDU5LDM1Ny44MTJjLTYuMjkzLTYuMjUtMTYuMzc2LTYuMjUtMjIuNjI1LDBjLTYuMjUsNi4yNDgtNi4yOTMsMTYuMzc1LDAsMjIuNjI1bDIyLjYyNSwyMi42MjUgICAgYzYuMjQ5LDYuMjQ4LDE2LjM3NCw2LjI0OCwyMi42MjUsMGM2LjI0OS02LjI1LDYuMjQ5LTE2LjM3NywwLTIyLjYyNUwzODAuNDU5LDM1Ny44MTJ6IiBmaWxsPSIjMUQxRDFCIi8+PC9nPjwvZz48L3N2Zz4=');
+      &:focus {
+        --bs-form-switch-bg: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxnPjxwYXRoIGQ9Ik0yNTYsMTQ0Yy02MS43NSwwLTExMiw1MC4yNS0xMTIsMTEyYzAsNjEuNzQ5LDUwLjI1LDExMiwxMTIsMTEyczExMi01MC4yNTEsMTEyLTExMiAgICBDMzY4LDE5NC4yNSwzMTcuNzUsMTQ0LDI1NiwxNDR6IE0yNTYsMTEyYzguODMzLDAsMTYtNy4xNDYsMTYtMTZWNjRjMC04LjgzMy03LjE2Ny0xNi0xNi0xNmMtOC44NTQsMC0xNiw3LjE2Ny0xNiwxNnYzMiAgICBDMjQwLDEwNC44NTQsMjQ3LjE0NiwxMTIsMjU2LDExMnogTTI1Niw0MDBjLTguODU0LDAtMTYsNy4xNjctMTYsMTZ2MzJjMCw4Ljg1NCw3LjE0NiwxNiwxNiwxNmM4LjgzMywwLDE2LTcuMTQ2LDE2LTE2di0zMiAgICBDMjcyLDQwNy4xNjcsMjY0LjgzMyw0MDAsMjU2LDQwMHogTTM4MC40MTcsMTU0LjE2N2wyMi42MjUtMjIuNjI1YzYuMjUtNi4yNSw2LjI1LTE2LjM3NSwwLTIyLjYyNSAgICBjLTYuMjUxLTYuMjUtMTYuMzc1LTYuMjUtMjIuNjI1LDBsLTIyLjYyNSwyMi42MjVjLTYuMjUxLDYuMjUtNi4yNTEsMTYuMzc1LDAsMjIuNjI1ICAgIEMzNjQuMDQyLDE2MC40MTYsMzc0LjE2NiwxNjAuNDE2LDM4MC40MTcsMTU0LjE2N3ogTTEzMS41NDEsMzU3Ljg1NGwtMjIuNjIzLDIyLjYyNWMtNi4yNTIsNi4yNS02LjI1MiwxNi4zNzcsMCwyMi42MjUgICAgYzYuMjQ5LDYuMjUsMTYuMzczLDYuMjUsMjIuNjIzLDBsMjIuNjI1LTIyLjYyNWM2LjI1MS02LjI5MSw2LjI1MS0xNi4zNzUsMC0yMi42MjUgICAgQzE0Ny45MTcsMzUxLjYwNCwxMzcuNzkyLDM1MS41NjIsMTMxLjU0MSwzNTcuODU0eiBNMTEyLDI1NmMwLTguODMzLTcuMTY3LTE2LTE2LTE2SDY0Yy04Ljg1NCwwLTE2LDcuMTY3LTE2LDE2ICAgIGMwLDguODU0LDcuMTQ2LDE2LDE2LDE2aDMyQzEwNC44MzMsMjcyLDExMiwyNjQuODU0LDExMiwyNTZ6IE00NDgsMjQwaC0zMmMtOC44NTQsMC0xNiw3LjE2Ny0xNiwxNmMwLDguODU0LDcuMTQ2LDE2LDE2LDE2aDMyICAgIGM4LjgzMywwLDE2LTcuMTQ2LDE2LTE2QzQ2NCwyNDcuMTY3LDQ1Ni44MzMsMjQwLDQ0OCwyNDB6IE0xMzEuNTIxLDE1NC4xNjdjNi4yNDksNi4yNSwxNi4zNzUsNi4yNSwyMi42MjUsMCAgICBjNi4yNDktNi4yNSw2LjI0OS0xNi4zNzUsMC0yMi42MjVsLTIyLjYyNS0yMi42MjVjLTYuMjUtNi4yNS0xNi4zNzYtNi4yNS0yMi42MjUsMGMtNi4yNSw2LjI1LTYuMjUsMTYuMzc1LDAsMjIuNjI1ICAgIEwxMzEuNTIxLDE1NC4xNjd6IE0zODAuNDU5LDM1Ny44MTJjLTYuMjkzLTYuMjUtMTYuMzc2LTYuMjUtMjIuNjI1LDBjLTYuMjUsNi4yNDgtNi4yOTMsMTYuMzc1LDAsMjIuNjI1bDIyLjYyNSwyMi42MjUgICAgYzYuMjQ5LDYuMjQ4LDE2LjM3NCw2LjI0OCwyMi42MjUsMGM2LjI0OS02LjI1LDYuMjQ5LTE2LjM3NywwLTIyLjYyNUwzODAuNDU5LDM1Ny44MTJ6IiBmaWxsPSIjMUQxRDFCIi8+PC9nPjwvZz48L3N2Zz4=');
+      }
+    }
+    &:checked {
+      --bs-form-switch-bg: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDExLjgwN0E5LjAwMiA5LjAwMiAwIDAgMSAxMC4wNDkgMmE5Ljk0MiA5Ljk0MiAwIDAgMC01LjEyIDIuNzM1Yy0zLjkwNSAzLjkwNS0zLjkwNSAxMC4yMzcgMCAxNC4xNDIgMy45MDYgMy45MDYgMTAuMjM3IDMuOTA1IDE0LjE0MyAwYTkuOTQ2IDkuOTQ2IDAgMCAwIDIuNzM1LTUuMTE5QTkuMDAzIDkuMDAzIDAgMCAxIDEyIDExLjgwN3oiIGZpbGw9IiNmZmZmZmYiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==');
+      &:focus {
+        --bs-form-switch-bg: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDExLjgwN0E5LjAwMiA5LjAwMiAwIDAgMSAxMC4wNDkgMmE5Ljk0MiA5Ljk0MiAwIDAgMC01LjEyIDIuNzM1Yy0zLjkwNSAzLjkwNS0zLjkwNSAxMC4yMzcgMCAxNC4xNDIgMy45MDYgMy45MDYgMTAuMjM3IDMuOTA1IDE0LjE0MyAwYTkuOTQ2IDkuOTQ2IDAgMCAwIDIuNzM1LTUuMTE5QTkuMDAzIDkuMDAzIDAgMCAxIDEyIDExLjgwN3oiIGZpbGw9IiNmZmZmZmYiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==');
+      }
+    }
+  }
+}