uikit 3.23.7 → 3.23.8-dev.ff7a25595

package/src/scss/components/iconnav.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Iconnav
 // Description:     Component to create icon navigations
 //
@@ -38,7 +40,7 @@
     list-style: none;
     /* 3 */
     margin-left: (-$iconnav-margin-horizontal);
-    @if(mixin-exists(hook-iconnav)) {@include hook-iconnav();}
+    @if(meta.mixin-exists(hook-iconnav)) {@include hook-iconnav();}
 }
 
 /*
@@ -76,19 +78,19 @@
     color: $iconnav-item-color;
     /* 5 */
     text-decoration: none;
-    @if(mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();}
+    @if(meta.mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();}
 }
 
 /* Hover */
 .uk-iconnav > * > a:hover {
     color: $iconnav-item-hover-color;
-    @if(mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();}
+    @if(meta.mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();}
 }
 
 /* Active */
 .uk-iconnav > .uk-active > a {
     color: $iconnav-item-active-color;
-    @if(mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();}
+    @if(meta.mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();}
 }
 
 
@@ -118,7 +120,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();}
+@if(meta.mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();}
 
 // @mixin hook-iconnav(){}
 // @mixin hook-iconnav-item(){}

package/src/scss/components/inverse.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Inverse
 // Description:     Inverse component style for light or dark backgrounds
 //
@@ -26,9 +28,9 @@
  * `uk-dark` is or dark colors on light backgrounds
  */
 
-@if ($inverse-global-color-mode == light) { .uk-light { @if (mixin-exists(hook-inverse)) {@include hook-inverse();}}}
+@if ($inverse-global-color-mode == light) { .uk-light { @if (meta.mixin-exists(hook-inverse)) {@include hook-inverse();}}}
 
-@if ($inverse-global-color-mode == dark) { .uk-dark { @if (mixin-exists(hook-inverse)) {@include hook-inverse();}}}
+@if ($inverse-global-color-mode == dark) { .uk-dark { @if (meta.mixin-exists(hook-inverse)) {@include hook-inverse();}}}
 
 /*
  * Pass dropbar behind color to JS

package/src/scss/components/label.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Label
 // Description:     Component to indicate important notes
 //
@@ -29,7 +31,7 @@
     color: $label-color;
     vertical-align: middle;
     white-space: nowrap;
-    @if(mixin-exists(hook-label)) {@include hook-label();}
+    @if(meta.mixin-exists(hook-label)) {@include hook-label();}
 }
 
 
@@ -43,7 +45,7 @@
 .uk-label-success {
     background-color: $label-success-background;
     color: $label-success-color;
-    @if(mixin-exists(hook-label-success)) {@include hook-label-success();}
+    @if(meta.mixin-exists(hook-label-success)) {@include hook-label-success();}
 }
 
 /*
@@ -53,7 +55,7 @@
 .uk-label-warning {
     background-color: $label-warning-background;
     color: $label-warning-color;
-    @if(mixin-exists(hook-label-warning)) {@include hook-label-warning();}
+    @if(meta.mixin-exists(hook-label-warning)) {@include hook-label-warning();}
 }
 
 /*
@@ -63,14 +65,14 @@
 .uk-label-danger {
     background-color: $label-danger-background;
     color: $label-danger-color;
-    @if(mixin-exists(hook-label-danger)) {@include hook-label-danger();}
+    @if(meta.mixin-exists(hook-label-danger)) {@include hook-label-danger();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-label-misc)) {@include hook-label-misc();}
+@if(meta.mixin-exists(hook-label-misc)) {@include hook-label-misc();}
 
 // @mixin hook-label(){}
 // @mixin hook-label-success(){}

package/src/scss/components/leader.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Leader
 // Description:     Component to create dot leaders
 //
@@ -34,7 +36,7 @@
     content: attr(data-fill);
     /* 4 */
     white-space: nowrap;
-    @if(mixin-exists(hook-leader)) {@include hook-leader();}
+    @if(meta.mixin-exists(hook-leader)) {@include hook-leader();}
 }
 
 /*
@@ -53,7 +55,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-leader-misc)) {@include hook-leader-misc();}
+@if(meta.mixin-exists(hook-leader-misc)) {@include hook-leader-misc();}
 
 // @mixin hook-leader(){}
 // @mixin hook-leader-misc(){}

package/src/scss/components/lightbox.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Lightbox
 // Description:     Component to create an lightbox image gallery
 //
@@ -60,7 +62,7 @@
     transition: opacity 0.15s linear;
     /* 7 */
     touch-action: pinch-zoom;
-    @if(mixin-exists(hook-lightbox)) {@include hook-lightbox();}
+    @if(meta.mixin-exists(hook-lightbox)) {@include hook-lightbox();}
 }
 
 /*
@@ -128,7 +130,7 @@
     will-change: transform, opacity;
     /* 4 */
     overflow: auto;
-    @if(mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();}
+    @if(meta.mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();}
 }
 
 /* 2 */
@@ -171,7 +173,7 @@
     padding: $lightbox-caption-padding-vertical $lightbox-caption-padding-horizontal;
     background: $lightbox-caption-background;
     color: $lightbox-caption-color;
-    @if(mixin-exists(hook-lightbox-caption)) {@include hook-lightbox-caption();}
+    @if(meta.mixin-exists(hook-lightbox-caption)) {@include hook-lightbox-caption();}
 }
 
 .uk-lightbox-caption > * { color: $lightbox-caption-color; }
@@ -195,7 +197,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();}
+@if(meta.mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();}
 
 // @mixin hook-lightbox(){}
 // @mixin hook-lightbox-item(){}

package/src/scss/components/link.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Link
 // Description:     Styles for links
 //
@@ -30,14 +32,14 @@ a.uk-link-muted,
 .uk-link-muted a,
 .uk-link-toggle .uk-link-muted {
     color: $link-muted-color;
-    @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
+    @if(meta.mixin-exists(hook-link-muted)) {@include hook-link-muted();}
 }
 
 a.uk-link-muted:hover,
 .uk-link-muted a:hover,
 .uk-link-toggle:hover .uk-link-muted {
     color: $link-muted-hover-color;
-    @if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();}
+    @if(meta.mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();}
 }
 
 
@@ -48,14 +50,14 @@ a.uk-link-text,
 .uk-link-text a,
 .uk-link-toggle .uk-link-text {
     color: inherit;
-    @if(mixin-exists(hook-link-text)) {@include hook-link-text();}
+    @if(meta.mixin-exists(hook-link-text)) {@include hook-link-text();}
 }
 
 a.uk-link-text:hover,
 .uk-link-text a:hover,
 .uk-link-toggle:hover .uk-link-text {
     color: $link-text-hover-color;
-    @if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
+    @if(meta.mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
 }
 
 
@@ -66,7 +68,7 @@ a.uk-link-heading,
 .uk-link-heading a,
 .uk-link-toggle .uk-link-heading {
     color: inherit;
-    @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
+    @if(meta.mixin-exists(hook-link-heading)) {@include hook-link-heading();}
 }
 
 a.uk-link-heading:hover,
@@ -74,7 +76,7 @@ a.uk-link-heading:hover,
 .uk-link-toggle:hover .uk-link-heading {
     color: $link-heading-hover-color;
     text-decoration: $link-heading-hover-text-decoration;
-    @if(mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();}
+    @if(meta.mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();}
 }
 
 
@@ -89,7 +91,7 @@ a.uk-link-reset,
 .uk-link-reset a {
     color: inherit !important;
     text-decoration: none !important;
-    @if(mixin-exists(hook-link-reset)) {@include hook-link-reset();}
+    @if(meta.mixin-exists(hook-link-reset)) {@include hook-link-reset();}
 }
 
 
@@ -105,7 +107,7 @@ a.uk-link-reset,
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-link-misc)) {@include hook-link-misc();}
+@if(meta.mixin-exists(hook-link-misc)) {@include hook-link-misc();}
 
 // @mixin hook-link-muted(){}
 // @mixin hook-link-muted-hover(){}

package/src/scss/components/list.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            List
 // Description:     Styles for lists
 //
@@ -120,7 +122,7 @@
     margin-top: $list-divider-margin-top;
     padding-top: $list-divider-margin-top;
     border-top: $list-divider-border-width solid $list-divider-border;
-    @if(mixin-exists(hook-list-divider)) {@include hook-list-divider();}
+    @if(meta.mixin-exists(hook-list-divider)) {@include hook-list-divider();}
 }
 
 /*
@@ -129,7 +131,7 @@
 
 .uk-list-striped > * {
     padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
-    @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
+    @if(meta.mixin-exists(hook-list-striped)) {@include hook-list-striped();}
 }
 
 .uk-list-striped > :nth-of-type(odd) { background: $list-striped-background; }
@@ -178,7 +180,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-list-misc)) {@include hook-list-misc();}
+@if(meta.mixin-exists(hook-list-misc)) {@include hook-list-misc();}
 
 // @mixin hook-list-divider(){}
 // @mixin hook-list-striped(){}

package/src/scss/components/margin.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Margin
 // Description:     Utilities for margins
 //
@@ -250,6 +252,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();}
+@if(meta.mixin-exists(hook-margin-misc)) {@include hook-margin-misc();}
 
 // @mixin hook-margin-misc(){}

package/src/scss/components/marker.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Marker
 // Description:     Component to create a marker icon
 //
@@ -24,20 +26,20 @@
     padding: $marker-padding;
     background: $marker-background;
     color: $marker-color;
-    @if(mixin-exists(hook-marker)) {@include hook-marker();}
+    @if(meta.mixin-exists(hook-marker)) {@include hook-marker();}
 }
 
 /* Hover */
 .uk-marker:hover {
     color: $marker-hover-color;
-    @if(mixin-exists(hook-marker-hover)) {@include hook-marker-hover();}
+    @if(meta.mixin-exists(hook-marker-hover)) {@include hook-marker-hover();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-marker-misc)) {@include hook-marker-misc();}
+@if(meta.mixin-exists(hook-marker-misc)) {@include hook-marker-misc();}
 
 // @mixin hook-marker(){}
 // @mixin hook-marker-hover(){}

package/src/scss/components/mixin.scss

@@ -1,3 +1,5 @@
+@use "sass:string";
+
 //
 // Component:       Mixin
 // Description:     Defines mixins which are used across all components
@@ -14,11 +16,11 @@
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
 @function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
+    $index: string.index($string, $search);
 
     @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace +
-            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+        @return string.slice($string, 1, $index - 1) + $replace +
+            str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
     }
 
     @return $string;
@@ -27,6 +29,6 @@
 @mixin svg-fill($src, $color-default, $color-new) {
     $replace-src: str-replace($src, $color-default, $color-new) !default;
     $replace-src: str-replace($replace-src, '#', '%23');
-    $replace-src: quote($replace-src);
+    $replace-src: string.quote($replace-src);
     background-image: url($replace-src);
 }

package/src/scss/components/modal.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Modal
 // Description:     Component to create modal dialogs
 //
@@ -69,7 +71,7 @@
     /* 6 */
     opacity: 0;
     transition: opacity 0.15s linear;
-    @if(mixin-exists(hook-modal)) {@include hook-modal();}
+    @if(meta.mixin-exists(hook-modal)) {@include hook-modal();}
 }
 
 /* Phone landscape and bigger */
@@ -133,7 +135,7 @@
     transform: translateY(-100px);
     transition: 0.3s linear;
     transition-property: opacity, transform;
-    @if(mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();}
+    @if(meta.mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();}
 }
 
 /*
@@ -174,7 +176,7 @@
     width: 100%;
     max-width: 100%;
     transform: translateY(0);
-    @if(mixin-exists(hook-modal-full)) {@include hook-modal-full();}
+    @if(meta.mixin-exists(hook-modal-full)) {@include hook-modal-full();}
 }
 
 
@@ -184,21 +186,21 @@
 .uk-modal-body {
     display: flow-root;
     padding: $modal-body-padding-vertical $modal-body-padding-horizontal;
-    @if(mixin-exists(hook-modal-body)) {@include hook-modal-body();}
+    @if(meta.mixin-exists(hook-modal-body)) {@include hook-modal-body();}
 }
 
 .uk-modal-header {
     display: flow-root;
     padding: $modal-header-padding-vertical $modal-header-padding-horizontal;
     background: $modal-header-background;
-    @if(mixin-exists(hook-modal-header)) {@include hook-modal-header();}
+    @if(meta.mixin-exists(hook-modal-header)) {@include hook-modal-header();}
 }
 
 .uk-modal-footer {
     display: flow-root;
     padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal;
     background: $modal-footer-background;
-    @if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();}
+    @if(meta.mixin-exists(hook-modal-footer)) {@include hook-modal-footer();}
 }
 
 /* Phone landscape and bigger */
@@ -225,7 +227,7 @@
 .uk-modal-title {
     font-size: $modal-title-font-size;
     line-height: $modal-title-line-height;
-    @if(mixin-exists(hook-modal-title)) {@include hook-modal-title();}
+    @if(meta.mixin-exists(hook-modal-title)) {@include hook-modal-title();}
 }
 
 
@@ -239,7 +241,7 @@
     top: $modal-close-position;
     right: $modal-close-position;
     padding: $modal-close-padding;
-    @if(mixin-exists(hook-modal-close)) {@include hook-modal-close();}
+    @if(meta.mixin-exists(hook-modal-close)) {@include hook-modal-close();}
 }
 
 /*
@@ -253,7 +255,7 @@
  */
 
 [class*="uk-modal-close-"]:hover {
-    @if(mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();}
+    @if(meta.mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();}
 }
 
 /*
@@ -261,11 +263,11 @@
  */
 
 .uk-modal-close-default {
-    @if(mixin-exists(hook-modal-close-default)) {@include hook-modal-close-default();}
+    @if(meta.mixin-exists(hook-modal-close-default)) {@include hook-modal-close-default();}
 }
 
 .uk-modal-close-default:hover {
-    @if(mixin-exists(hook-modal-close-default-hover)) {@include hook-modal-close-default-hover();}
+    @if(meta.mixin-exists(hook-modal-close-default-hover)) {@include hook-modal-close-default-hover();}
 }
 
 /*
@@ -279,12 +281,12 @@
     right: (-$modal-close-padding);
     transform: translate(0, -($modal-close-outside-translate));
     color: $modal-close-outside-color;
-    @if(mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();}
+    @if(meta.mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();}
 }
 
 .uk-modal-close-outside:hover {
     color: $modal-close-outside-hover-color;
-    @if(mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();}
+    @if(meta.mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();}
 }
 
 /* Tablet landscape and bigger */
@@ -303,18 +305,18 @@
  */
 
 .uk-modal-close-full {
-    @if(mixin-exists(hook-modal-close-full)) {@include hook-modal-close-full();}
+    @if(meta.mixin-exists(hook-modal-close-full)) {@include hook-modal-close-full();}
 }
 
 .uk-modal-close-full:hover {
-    @if(mixin-exists(hook-modal-close-full-hover)) {@include hook-modal-close-full-hover();}
+    @if(meta.mixin-exists(hook-modal-close-full-hover)) {@include hook-modal-close-full-hover();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-modal-misc)) {@include hook-modal-misc();}
+@if(meta.mixin-exists(hook-modal-misc)) {@include hook-modal-misc();}
 
 // @mixin hook-modal(){}
 // @mixin hook-modal-dialog(){}