uikit 3.18.3-dev.dceb0c996 → 3.18.4-dev.01a468d2e

package/src/scss/mixins.scss

@@ -1780,8 +1780,7 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
-    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/src/scss/variables-theme.scss

@@ -1288,7 +1288,7 @@ $table-striped-border-width: $global-border-width !default;
 $table-striped-border: $global-border !default;
 $text-meta-link-color: $text-meta-color !default;
 $text-meta-link-hover-color: $global-color !default;
-$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, spin($text-background-color, 40%) 100%) !default;
+$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, adjust-hue($text-background-color, 40) 100%) !default;
 $thumbnav-item-gradient: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4)) !default;
 $thumbnav-item-hover-opacity: 0 !default;
 $thumbnav-item-active-opacity: 0 !default;

package/tests/slider.html

@@ -41,6 +41,11 @@
                     <option value="0">Single</option>
                     <option value="1">Sets</option>
                 </select>
+                <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
+                    <option value="">All</option>
+                    <option value="first">First</option>
+                    <option value="center">Center</option>
+                </select>
             </div>
 
             <h2>Content Widths</h2>
@@ -577,6 +582,12 @@
                             <td>0</td>
                             <td>Slider item to show. 0 based index.</td>
                         </tr>
+                        <tr>
+                            <td><code>active</code></td>
+                            <td>String</td>
+                            <td>all</td>
+                            <td>Slider item/items to apply the transition active class to. (all|first|center)</td>
+                        </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>
                             <td>Boolean</td>
@@ -646,7 +657,7 @@
         <script>
 
             const {attr, $$, on} = UIkit.util;
-            for (const attribute of ['finite', 'center', 'sets']) {
+            for (const attribute of ['finite', 'center', 'sets', 'active']) {
                 on(`#js-${attribute}-switcher`, 'change', e =>
                     attr($$('[uk-slider]'), attribute, e.target.value)
                 );

package/tests/utility.html

@@ -420,39 +420,64 @@
                 <a class="uk-logo" href="#">Text Logo</a>
             </p>
 
-            <div class="uk-flex-inline uk-margin uk-grid-small" uk-grid>
+            <div class="uk-child-width-auto uk-grid-small" uk-grid>
                 <div>
-                    <p>Image</p>
+                    <p>Image<br>-</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
-                        <img src="images/photo.jpg" width="200" height="133" alt="">
+                        <img src="images/photo.jpg" width="150" height="100" alt="">
                     </a>
                 </div>
                 <div>
-                    <p>+ Inverse Image</p>
+                    <p>Picture<br>-</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
-                        <img src="images/photo.jpg" width="200" height="133" alt="">
-                        <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
+                        <picture>
+                            <img src="images/photo.jpg" width="150" height="100" alt="">
+                        </picture>
+                    </a>
+                </div>
+                <div>
+                    <p>Image<br>Inverse Image</p>
+                    <a class="uk-logo" href="#" aria-label="Back to Home">
+                        <img src="images/photo.jpg" width="150" height="100" alt="">
+                        <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
                     </a>
                 </div>
                 <div>
-                    <p>Picture</p>
+                    <p>Picture<br>Inverse Picture</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
                         <picture>
-                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                            <img src="images/photo.jpg" width="150" height="100" alt="">
+                        </picture>
+                        <picture>
+                            <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
                         </picture>
                     </a>
                 </div>
                 <div>
-                    <p>+ Inverse Picture</p>
+                    <p>Picture<br>Inverse SVG</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
                         <picture>
-                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                            <img src="images/photo.jpg" width="150" height="100" alt="">
                         </picture>
+                        <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
+                    </a>
+                </div>
+                <div>
+                    <p>SVG<br>Inverse Picture</p>
+                    <a class="uk-logo" href="#" aria-label="Back to Home">
+                        <img src="images/icons.svg#table" alt="" uk-svg>
                         <picture>
-                            <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
+                            <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
                         </picture>
                     </a>
                 </div>
+                <div>
+                    <p>SVG<br>Inverse SVG</p>
+                    <a class="uk-logo" href="#" aria-label="Back to Home">
+                        <img src="images/icons.svg#table" alt="" uk-svg>
+                        <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
+                    </a>
+                </div>
             </div>
 
         </div>