uikit 3.23.7 → 3.23.8-dev.97ee4c1bb

package/src/scss/components/button.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Button
 // Description:     Styles for buttons
 //
@@ -78,7 +80,7 @@
     text-align: center;
     /* 10 */
     text-decoration: none;
-    @if(mixin-exists(hook-button)) {@include hook-button();}
+    @if(meta.mixin-exists(hook-button)) {@include hook-button();}
 }
 
 .uk-button:not(:disabled) { cursor: pointer; }
@@ -96,13 +98,13 @@
 .uk-button:hover {
     /* 9 */
     text-decoration: none;
-    @if(mixin-exists(hook-button-hover)) {@include hook-button-hover();}
+    @if(meta.mixin-exists(hook-button-hover)) {@include hook-button-hover();}
 }
 
 /* OnClick + Active */
 .uk-button:active,
 .uk-button.uk-active {
-    @if(mixin-exists(hook-button-active)) {@include hook-button-active();}
+    @if(meta.mixin-exists(hook-button-active)) {@include hook-button-active();}
 }
 
 
@@ -116,14 +118,14 @@
 .uk-button-default {
     background-color: $button-default-background;
     color: $button-default-color;
-    @if(mixin-exists(hook-button-default)) {@include hook-button-default();}
+    @if(meta.mixin-exists(hook-button-default)) {@include hook-button-default();}
 }
 
 /* Hover */
 .uk-button-default:hover {
     background-color: $button-default-hover-background;
     color: $button-default-hover-color;
-    @if(mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();}
+    @if(meta.mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();}
 }
 
 /* OnClick + Active */
@@ -131,7 +133,7 @@
 .uk-button-default.uk-active {
     background-color: $button-default-active-background;
     color: $button-default-active-color;
-    @if(mixin-exists(hook-button-default-active)) {@include hook-button-default-active();}
+    @if(meta.mixin-exists(hook-button-default-active)) {@include hook-button-default-active();}
 }
 
 /*
@@ -141,14 +143,14 @@
 .uk-button-primary {
     background-color: $button-primary-background;
     color: $button-primary-color;
-    @if(mixin-exists(hook-button-primary)) {@include hook-button-primary();}
+    @if(meta.mixin-exists(hook-button-primary)) {@include hook-button-primary();}
 }
 
 /* Hover */
 .uk-button-primary:hover {
     background-color: $button-primary-hover-background;
     color: $button-primary-hover-color;
-    @if(mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();}
+    @if(meta.mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();}
 }
 
 /* OnClick + Active */
@@ -156,7 +158,7 @@
 .uk-button-primary.uk-active {
     background-color: $button-primary-active-background;
     color: $button-primary-active-color;
-    @if(mixin-exists(hook-button-primary-active)) {@include hook-button-primary-active();}
+    @if(meta.mixin-exists(hook-button-primary-active)) {@include hook-button-primary-active();}
 }
 
 /*
@@ -166,14 +168,14 @@
 .uk-button-secondary {
     background-color: $button-secondary-background;
     color: $button-secondary-color;
-    @if(mixin-exists(hook-button-secondary)) {@include hook-button-secondary();}
+    @if(meta.mixin-exists(hook-button-secondary)) {@include hook-button-secondary();}
 }
 
 /* Hover */
 .uk-button-secondary:hover {
     background-color: $button-secondary-hover-background;
     color: $button-secondary-hover-color;
-    @if(mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();}
+    @if(meta.mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();}
 }
 
 /* OnClick + Active */
@@ -181,7 +183,7 @@
 .uk-button-secondary.uk-active {
     background-color: $button-secondary-active-background;
     color: $button-secondary-active-color;
-    @if(mixin-exists(hook-button-secondary-active)) {@include hook-button-secondary-active();}
+    @if(meta.mixin-exists(hook-button-secondary-active)) {@include hook-button-secondary-active();}
 }
 
 /*
@@ -191,14 +193,14 @@
 .uk-button-danger {
     background-color: $button-danger-background;
     color: $button-danger-color;
-    @if(mixin-exists(hook-button-danger)) {@include hook-button-danger();}
+    @if(meta.mixin-exists(hook-button-danger)) {@include hook-button-danger();}
 }
 
 /* Hover */
 .uk-button-danger:hover {
     background-color: $button-danger-hover-background;
     color: $button-danger-hover-color;
-    @if(mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();}
+    @if(meta.mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();}
 }
 
 /* OnClick + Active */
@@ -206,7 +208,7 @@
 .uk-button-danger.uk-active {
     background-color: $button-danger-active-background;
     color: $button-danger-active-color;
-    @if(mixin-exists(hook-button-danger-active)) {@include hook-button-danger-active();}
+    @if(meta.mixin-exists(hook-button-danger-active)) {@include hook-button-danger-active();}
 }
 
 /*
@@ -220,7 +222,7 @@
 .uk-button-danger:disabled {
     background-color: $button-disabled-background;
     color: $button-disabled-color;
-    @if(mixin-exists(hook-button-disabled)) {@include hook-button-disabled();}
+    @if(meta.mixin-exists(hook-button-disabled)) {@include hook-button-disabled();}
 }
 
 
@@ -231,14 +233,14 @@
     padding: 0 $button-small-padding-horizontal;
     line-height: $button-small-line-height;
     font-size: $button-small-font-size;
-    @if(mixin-exists(hook-button-small)) {@include hook-button-small();}
+    @if(meta.mixin-exists(hook-button-small)) {@include hook-button-small();}
 }
 
 .uk-button-large {
     padding: 0 $button-large-padding-horizontal;
     line-height: $button-large-line-height;
     font-size: $button-large-font-size;
-    @if(mixin-exists(hook-button-large)) {@include hook-button-large();}
+    @if(meta.mixin-exists(hook-button-large)) {@include hook-button-large();}
 }
 
 
@@ -258,19 +260,19 @@
     background: none;
     /* 2 */
     color: $button-text-color;
-    @if(mixin-exists(hook-button-text)) {@include hook-button-text();}
+    @if(meta.mixin-exists(hook-button-text)) {@include hook-button-text();}
 }
 
 /* Hover */
 .uk-button-text:hover {
     color: $button-text-hover-color;
-    @if(mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();}
+    @if(meta.mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();}
 }
 
 /* Disabled */
 .uk-button-text:disabled {
     color: $button-text-disabled-color;
-    @if(mixin-exists(hook-button-text-disabled)) {@include hook-button-text-disabled();}
+    @if(meta.mixin-exists(hook-button-text-disabled)) {@include hook-button-text-disabled();}
 }
 
 /*
@@ -286,7 +288,7 @@
     background: none;
     /* 2 */
     color: $button-link-color;
-    @if(mixin-exists(hook-button-link)) {@include hook-button-link();}
+    @if(meta.mixin-exists(hook-button-link)) {@include hook-button-link();}
 }
 
 /* Hover */
@@ -324,7 +326,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-button-misc)) {@include hook-button-misc();}
+@if(meta.mixin-exists(hook-button-misc)) {@include hook-button-misc();}
 
 // @mixin hook-button(){}
 // @mixin hook-button-hover(){}

package/src/scss/components/card.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Card
 // Description:     Component to create boxed content containers
 //
@@ -47,7 +49,7 @@
 .uk-card {
     position: relative;
     box-sizing: border-box;
-    @if(mixin-exists(hook-card)) {@include hook-card();}
+    @if(meta.mixin-exists(hook-card)) {@include hook-card();}
 }
 
 
@@ -57,19 +59,19 @@
 .uk-card-body {
     display: flow-root;
     padding: $card-body-padding-vertical $card-body-padding-horizontal;
-    @if(mixin-exists(hook-card-body)) {@include hook-card-body();}
+    @if(meta.mixin-exists(hook-card-body)) {@include hook-card-body();}
 }
 
 .uk-card-header {
     display: flow-root;
     padding: $card-header-padding-vertical $card-header-padding-horizontal;
-    @if(mixin-exists(hook-card-header)) {@include hook-card-header();}
+    @if(meta.mixin-exists(hook-card-header)) {@include hook-card-header();}
 }
 
 .uk-card-footer {
     display: flow-root;
     padding: $card-footer-padding-vertical $card-footer-padding-horizontal;
-    @if(mixin-exists(hook-card-footer)) {@include hook-card-footer();}
+    @if(meta.mixin-exists(hook-card-footer)) {@include hook-card-footer();}
 }
 
 /* Desktop and bigger */
@@ -101,25 +103,25 @@
  */
 
 [class*="uk-card-media"] {
-    @if(mixin-exists(hook-card-media)) {@include hook-card-media();}
+    @if(meta.mixin-exists(hook-card-media)) {@include hook-card-media();}
 }
 
 .uk-card-media-top,
 .uk-grid-stack > .uk-card-media-left,
 .uk-grid-stack > .uk-card-media-right {
-    @if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();}
+    @if(meta.mixin-exists(hook-card-media-top)) {@include hook-card-media-top();}
 }
 
 .uk-card-media-bottom {
-    @if(mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();}
+    @if(meta.mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();}
 }
 
 :not(.uk-grid-stack) > .uk-card-media-left {
-    @if(mixin-exists(hook-card-media-left)) {@include hook-card-media-left();}
+    @if(meta.mixin-exists(hook-card-media-left)) {@include hook-card-media-left();}
 }
 
 :not(.uk-grid-stack) > .uk-card-media-right {
-    @if(mixin-exists(hook-card-media-right)) {@include hook-card-media-right();}
+    @if(meta.mixin-exists(hook-card-media-right)) {@include hook-card-media-right();}
 }
 
 
@@ -129,7 +131,7 @@
 .uk-card-title {
     font-size: $card-title-font-size;
     line-height: $card-title-line-height;
-    @if(mixin-exists(hook-card-title)) {@include hook-card-title();}
+    @if(meta.mixin-exists(hook-card-title)) {@include hook-card-title();}
 }
 
 
@@ -161,7 +163,7 @@
     justify-content: center;
     align-items: center;
     line-height: 0;
-    @if(mixin-exists(hook-card-badge)) {@include hook-card-badge();}
+    @if(meta.mixin-exists(hook-card-badge)) {@include hook-card-badge();}
 }
 
 /*
@@ -176,7 +178,7 @@
 
 .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
     background-color: $card-hover-background;
-    @if(mixin-exists(hook-card-hover)) {@include hook-card-hover();}
+    @if(meta.mixin-exists(hook-card-hover)) {@include hook-card-hover();}
 }
 
 
@@ -192,25 +194,25 @@
     --uk-inverse: #{$card-default-color-mode};
     background-color: $card-default-background;
     color: $card-default-color;
-    @if(mixin-exists(hook-card-default)) {@include hook-card-default();}
+    @if(meta.mixin-exists(hook-card-default)) {@include hook-card-default();}
 }
 
 .uk-card-default .uk-card-title {
     color: $card-default-title-color;
-    @if(mixin-exists(hook-card-default-title)) {@include hook-card-default-title();}
+    @if(meta.mixin-exists(hook-card-default-title)) {@include hook-card-default-title();}
 }
 
 .uk-card-default.uk-card-hover:hover {
     background-color: $card-default-hover-background;
-    @if(mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();}
+    @if(meta.mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();}
 }
 
 .uk-card-default .uk-card-header {
-    @if(mixin-exists(hook-card-default-header)) {@include hook-card-default-header();}
+    @if(meta.mixin-exists(hook-card-default-header)) {@include hook-card-default-header();}
 }
 
 .uk-card-default .uk-card-footer {
-    @if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();}
+    @if(meta.mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();}
 }
 
 // Color Mode
@@ -227,17 +229,17 @@
     --uk-inverse: #{$card-primary-color-mode};
     background-color: $card-primary-background;
     color: $card-primary-color;
-    @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();}
+    @if(meta.mixin-exists(hook-card-primary)) {@include hook-card-primary();}
 }
 
 .uk-card-primary .uk-card-title {
     color: $card-primary-title-color;
-    @if(mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();}
+    @if(meta.mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();}
 }
 
 .uk-card-primary.uk-card-hover:hover {
     background-color: $card-primary-hover-background;
-    @if(mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();}
+    @if(meta.mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();}
 }
 
 // Color Mode
@@ -254,17 +256,17 @@
     --uk-inverse: #{$card-secondary-color-mode};
     background-color: $card-secondary-background;
     color: $card-secondary-color;
-    @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}
+    @if(meta.mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}
 }
 
 .uk-card-secondary .uk-card-title {
     color: $card-secondary-title-color;
-    @if(mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();}
+    @if(meta.mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();}
 }
 
 .uk-card-secondary.uk-card-hover:hover {
     background-color: $card-secondary-hover-background;
-    @if(mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();}
+    @if(meta.mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();}
 }
 
 // Color Mode
@@ -306,7 +308,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-card-misc)) {@include hook-card-misc();}
+@if(meta.mixin-exists(hook-card-misc)) {@include hook-card-misc();}
 
 // @mixin hook-card(){}
 // @mixin hook-card-body(){}

package/src/scss/components/close.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Close
 // Description:     Component to create a close button
 //
@@ -21,20 +23,20 @@
 
 .uk-close {
     color: $close-color;
-    @if(mixin-exists(hook-close)) {@include hook-close();}
+    @if(meta.mixin-exists(hook-close)) {@include hook-close();}
 }
 
 /* Hover */
 .uk-close:hover {
     color: $close-hover-color;
-    @if(mixin-exists(hook-close-hover)) {@include hook-close-hover();}
+    @if(meta.mixin-exists(hook-close-hover)) {@include hook-close-hover();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-close-misc)) {@include hook-close-misc();}
+@if(meta.mixin-exists(hook-close-misc)) {@include hook-close-misc();}
 
 // @mixin hook-close(){}
 // @mixin hook-close-hover(){}

package/src/scss/components/column.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Column
 // Description:     Utilities for text columns
 //
@@ -122,7 +124,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-column-misc)) {@include hook-column-misc();}
+@if(meta.mixin-exists(hook-column-misc)) {@include hook-column-misc();}
 
 // @mixin hook-column-misc(){}
 

package/src/scss/components/comment.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Comment
 // Description:     Component to create nested comments
 //
@@ -28,7 +30,7 @@
  ========================================================================== */
 
 .uk-comment {
-    @if(mixin-exists(hook-comment)) {@include hook-comment();}
+    @if(meta.mixin-exists(hook-comment)) {@include hook-comment();}
 }
 
 
@@ -39,13 +41,13 @@
     display: flow-root;
     overflow-wrap: break-word;
     word-wrap: break-word;
-    @if(mixin-exists(hook-comment-body)) {@include hook-comment-body();}
+    @if(meta.mixin-exists(hook-comment-body)) {@include hook-comment-body();}
 }
 
 .uk-comment-header {
     display: flow-root;
     margin-bottom: $comment-header-margin-bottom;
-    @if(mixin-exists(hook-comment-header)) {@include hook-comment-header();}
+    @if(meta.mixin-exists(hook-comment-header)) {@include hook-comment-header();}
 }
 
 /*
@@ -62,7 +64,7 @@
 .uk-comment-title {
     font-size: $comment-title-font-size;
     line-height: $comment-title-line-height;
-    @if(mixin-exists(hook-comment-title)) {@include hook-comment-title();}
+    @if(meta.mixin-exists(hook-comment-title)) {@include hook-comment-title();}
 }
 
 
@@ -73,7 +75,7 @@
     font-size: $comment-meta-font-size;
     line-height: $comment-meta-line-height;
     color: $comment-meta-color;
-    @if(mixin-exists(hook-comment-meta)) {@include hook-comment-meta();}
+    @if(meta.mixin-exists(hook-comment-meta)) {@include hook-comment-meta();}
 }
 
 
@@ -81,7 +83,7 @@
  ========================================================================== */
 
 .uk-comment-avatar {
-    @if(mixin-exists(hook-comment-avatar)) {@include hook-comment-avatar();}
+    @if(meta.mixin-exists(hook-comment-avatar)) {@include hook-comment-avatar();}
 }
 
 
@@ -96,7 +98,7 @@
 /* Adjacent siblings */
 .uk-comment-list > :nth-child(n+2) {
     margin-top: $comment-list-margin-top;
-    @if(mixin-exists(hook-comment-list-adjacent)) {@include hook-comment-list-adjacent();}
+    @if(meta.mixin-exists(hook-comment-list-adjacent)) {@include hook-comment-list-adjacent();}
 }
 
 /*
@@ -108,7 +110,7 @@
     margin: $comment-list-margin-top 0 0 0;
     padding-left: $comment-list-padding-left;
     list-style: none;
-    @if(mixin-exists(hook-comment-list-sub)) {@include hook-comment-list-sub();}
+    @if(meta.mixin-exists(hook-comment-list-sub)) {@include hook-comment-list-sub();}
 }
 
 /* Tablet and bigger */
@@ -121,7 +123,7 @@
 /* Adjacent siblings */
 .uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
     margin-top: $comment-list-margin-top;
-    @if(mixin-exists(hook-comment-list-sub-adjacent)) {@include hook-comment-list-sub-adjacent();}
+    @if(meta.mixin-exists(hook-comment-list-sub-adjacent)) {@include hook-comment-list-sub-adjacent();}
 }
 
 
@@ -129,14 +131,14 @@
  ========================================================================== */
 
 .uk-comment-primary {
-    @if(mixin-exists(hook-comment-primary)) {@include hook-comment-primary();}
+    @if(meta.mixin-exists(hook-comment-primary)) {@include hook-comment-primary();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-comment-misc)) {@include hook-comment-misc();}
+@if(meta.mixin-exists(hook-comment-misc)) {@include hook-comment-misc();}
 
 // @mixin hook-comment(){}
 // @mixin hook-comment-body(){}

package/src/scss/components/container.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "sass:string";
+
 // Name:            Container
 // Description:     Component to align and center your site and grid content
 //
@@ -104,10 +107,10 @@
 @media (min-width: $breakpoint-small) {
 
     .uk-container-expand-left.uk-container-xsmall,
-    .uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-s})'); }
+    .uk-container-expand-right.uk-container-xsmall { max-width: string.unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-s})'); }
 
     .uk-container-expand-left.uk-container-small,
-    .uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-s})'); }
+    .uk-container-expand-right.uk-container-small { max-width: string.unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-s})'); }
 
 }
 
@@ -115,19 +118,19 @@
 @media (min-width: $breakpoint-medium) {
 
     .uk-container-expand-left,
-    .uk-container-expand-right { max-width: unquote('calc(50% + (#{$container-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+    .uk-container-expand-right { max-width: string.unquote('calc(50% + (#{$container-max-width} / 2) - #{$container-padding-horizontal-m})'); }
 
     .uk-container-expand-left.uk-container-xsmall,
-    .uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+    .uk-container-expand-right.uk-container-xsmall { max-width: string.unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-m})'); }
 
     .uk-container-expand-left.uk-container-small,
-    .uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+    .uk-container-expand-right.uk-container-small { max-width: string.unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-m})'); }
 
     .uk-container-expand-left.uk-container-large,
-    .uk-container-expand-right.uk-container-large { max-width: unquote('calc(50% + (#{$container-large-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+    .uk-container-expand-right.uk-container-large { max-width: string.unquote('calc(50% + (#{$container-large-max-width} / 2) - #{$container-padding-horizontal-m})'); }
 
     .uk-container-expand-left.uk-container-xlarge,
-    .uk-container-expand-right.uk-container-xlarge { max-width: unquote('calc(50% + (#{$container-xlarge-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+    .uk-container-expand-right.uk-container-xlarge { max-width: string.unquote('calc(50% + (#{$container-xlarge-max-width} / 2) - #{$container-padding-horizontal-m})'); }
 
 }
 
@@ -141,7 +144,7 @@
  */
 
 .uk-container-item-padding-remove-left,
-.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal})'); }
+.uk-container-item-padding-remove-right { width: string.unquote('calc(100% + #{$container-padding-horizontal})'); }
 
 .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal); }
 .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal); }
@@ -150,7 +153,7 @@
 @media (min-width: $breakpoint-small) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-s})'); }
+    .uk-container-item-padding-remove-right { width: string.unquote('calc(100% + #{$container-padding-horizontal-s})'); }
 
     .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-s); }
     .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-s); }
@@ -161,7 +164,7 @@
 @media (min-width: $breakpoint-medium) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-m})'); }
+    .uk-container-item-padding-remove-right { width: string.unquote('calc(100% + #{$container-padding-horizontal-m})'); }
 
     .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-m); }
     .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-m); }
@@ -172,6 +175,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();}
+@if(meta.mixin-exists(hook-container-misc)) {@include hook-container-misc();}
 
 // @mixin hook-container-misc(){}

package/src/scss/components/countdown.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Countdown
 // Description:     Component to create countdown timers
 //
@@ -27,7 +29,7 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
  ========================================================================== */
 
 .uk-countdown {
-    @if(mixin-exists(hook-countdown)) {@include hook-countdown();}
+    @if(meta.mixin-exists(hook-countdown)) {@include hook-countdown();}
 }
 
 
@@ -36,7 +38,7 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
 
 .uk-countdown-number,
 .uk-countdown-separator {
-    @if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
+    @if(meta.mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
 }
 
 
@@ -55,7 +57,7 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
     /* 2 */
     font-size: $countdown-number-font-size;
     line-height: $countdown-number-line-height;
-    @if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
+    @if(meta.mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
 }
 
 /* Phone landscape and bigger */
@@ -79,7 +81,7 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
 .uk-countdown-separator {
     font-size: $countdown-separator-font-size;
     line-height: $countdown-separator-line-height;
-    @if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
+    @if(meta.mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
 }
 
 /* Phone landscape and bigger */
@@ -101,14 +103,14 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
  ========================================================================== */
 
 .uk-countdown-label {
-    @if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();}
+    @if(meta.mixin-exists(hook-countdown-label)) {@include hook-countdown-label();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();}
+@if(meta.mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();}
 
 // @mixin hook-countdown(){}
 // @mixin hook-countdown-item(){}

package/src/scss/components/cover.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Cover
 // Description:     Utilities to let embedded content cover their container in a centered position
 //
@@ -71,6 +73,6 @@ iframe[data-uk-cover] { pointer-events: none; }
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-cover-misc)) {@include hook-cover-misc();}
+@if(meta.mixin-exists(hook-cover-misc)) {@include hook-cover-misc();}
 
 // @mixin hook-cover-misc(){}