uikit 3.22.1 → 3.22.3-dev.73b0d86b9

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.22.1",
+  "version": "3.22.3-dev.73b0d86b9",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -30,7 +30,7 @@
     "dateformat": "^5.0.3",
     "esbuild": "^0.24.0",
     "eslint": "^9.6.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "execa": "^9.3.0",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",

package/src/js/components/countdown.js

@@ -73,8 +73,8 @@ export default {
                 }
             } else if (!this.timer) {
                 this.started = true;
-                trigger(this.$el, 'countdownstart');
                 this.timer = setInterval(this.update, 1000);
+                trigger(this.$el, 'countdownstart');
             }
 
             for (const unit of units) {

package/src/less/components/form.less

@@ -182,7 +182,6 @@
 .uk-input[type="search"]::-webkit-search-cancel-button,
 .uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
 
-
 /*
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
@@ -190,6 +189,19 @@
 .uk-input[type="number"]::-webkit-inner-spin-button,
 .uk-input[type="number"]::-webkit-outer-spin-button { height: auto; }
 
+/*
+ * Correct vertical alignment in Safari.
+ */
+
+.uk-input[type="date"]::-webkit-datetime-edit,
+.uk-input[type="time"]::-webkit-datetime-edit,
+.uk-input[type="datetime-local"]::-webkit-datetime-edit {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    padding: 0;
+}
+
 /*
  * Removes placeholder transparency in Firefox.
  */

package/src/less/components/list.less

@@ -83,68 +83,45 @@
 
 
 /* Marker modifiers
- * Moving `::marker` inside `::before` to style it differently
- * To style the `::marker` is currently only supported in Firefox and Safari
  ========================================================================== */
 
-.uk-list-disc > *,
-.uk-list-circle > *,
-.uk-list-square > *,
-.uk-list-decimal > *,
-.uk-list-hyphen > * { padding-left: @list-padding-left; }
+.uk-list-disc,
+.uk-list-circle,
+.uk-list-square,
+.uk-list-decimal,
+.uk-list-hyphen { padding-left: @list-padding-left; }
 
-/*
- * Type modifiers
- */
-
-.uk-list-decimal { counter-reset: decimal; }
-.uk-list-decimal > * { counter-increment: decimal; }
-
-.uk-list-disc > ::before,
-.uk-list-circle > ::before,
-.uk-list-square > ::before,
-.uk-list-decimal > ::before,
-.uk-list-hyphen > ::before {
-    content: "";
-    position: relative;
-    left: -@list-padding-left;
-    width: @list-padding-left;
-    height: @list-marker-height;
-    margin-bottom: -@list-marker-height;
-    display: list-item;
-    list-style-position: inside;
-    text-align: right;
-}
-
-.uk-list-disc > ::before { list-style-type: disc; }
-.uk-list-circle > ::before { list-style-type: circle; }
-.uk-list-square > ::before { list-style-type: square; }
-.uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; }
-.uk-list-hyphen > ::before { content: '–\00A0\00A0'; }
+.uk-list-disc { list-style-type: disc; }
+.uk-list-circle { list-style-type: circle; }
+.uk-list-square { list-style-type: square; }
+.uk-list-decimal { list-style-type: decimal; }
+.uk-list-hyphen { list-style-type: '–  '; }
 
 /*
  * Color modifiers
  */
 
-.uk-list-muted > ::before { color: @list-muted-color !important; }
-.uk-list-emphasis > ::before { color: @list-emphasis-color !important; }
-.uk-list-primary > ::before { color: @list-primary-color !important; }
-.uk-list-secondary > ::before { color: @list-secondary-color !important; }
+.uk-list-muted > ::marker { color: @list-muted-color !important; }
+.uk-list-emphasis > ::marker { color: @list-emphasis-color !important; }
+.uk-list-primary > ::marker { color: @list-primary-color !important; }
+.uk-list-secondary > ::marker { color: @list-secondary-color !important; }
 
 
 /* Image bullet modifier
  ========================================================================== */
 
-.uk-list-bullet > * { padding-left: @list-padding-left; }
+.uk-list-bullet > * {
+    position: relative;
+    padding-left: @list-padding-left;
+}
 
 .uk-list-bullet > ::before {
     content: "";
-    display: list-item;
-    position: relative;
-    left: -@list-padding-left;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: @list-padding-left;
-    height: @list-marker-height;
-    margin-bottom: -@list-marker-height;
+    height: @global-line-height * 1em;
     .svg-fill(@internal-list-bullet-image, "#000", @list-bullet-icon-color);
     background-repeat: no-repeat;
     background-position: 50% 50%;
@@ -242,10 +219,10 @@
 
 .hook-inverse() {
 
-    .uk-list-muted > ::before { color: @inverse-list-muted-color !important; }
-    .uk-list-emphasis > ::before { color: @inverse-list-emphasis-color !important; }
-    .uk-list-primary > ::before { color: @inverse-list-primary-color !important; }
-    .uk-list-secondary > ::before { color: @inverse-list-secondary-color !important; }
+    .uk-list-muted > ::marker { color: @inverse-list-muted-color !important; }
+    .uk-list-emphasis > ::marker { color: @inverse-list-emphasis-color !important; }
+    .uk-list-primary > ::marker { color: @inverse-list-primary-color !important; }
+    .uk-list-secondary > ::marker { color: @inverse-list-secondary-color !important; }
 
     .uk-list-bullet > ::before {
         .svg-fill(@internal-list-bullet-image, "#000", @inverse-list-bullet-icon-color);

package/src/scss/components/form.scss

@@ -125,7 +125,6 @@
 .uk-input[type="search"]::-webkit-search-cancel-button,
 .uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
 
-
 /*
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
@@ -133,6 +132,19 @@
 .uk-input[type="number"]::-webkit-inner-spin-button,
 .uk-input[type="number"]::-webkit-outer-spin-button { height: auto; }
 
+/*
+ * Correct vertical alignment in Safari.
+ */
+
+.uk-input[type="date"]::-webkit-datetime-edit,
+.uk-input[type="time"]::-webkit-datetime-edit,
+.uk-input[type="datetime-local"]::-webkit-datetime-edit {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    padding: 0;
+}
+
 /*
  * Removes placeholder transparency in Firefox.
  */

package/src/scss/components/list.scss

@@ -64,68 +64,45 @@
 
 
 /* Marker modifiers
- * Moving `::marker` inside `::before` to style it differently
- * To style the `::marker` is currently only supported in Firefox and Safari
  ========================================================================== */
 
-.uk-list-disc > *,
-.uk-list-circle > *,
-.uk-list-square > *,
-.uk-list-decimal > *,
-.uk-list-hyphen > * { padding-left: $list-padding-left; }
+.uk-list-disc,
+.uk-list-circle,
+.uk-list-square,
+.uk-list-decimal,
+.uk-list-hyphen { padding-left: $list-padding-left; }
 
-/*
- * Type modifiers
- */
-
-.uk-list-decimal { counter-reset: decimal; }
-.uk-list-decimal > * { counter-increment: decimal; }
-
-.uk-list-disc > ::before,
-.uk-list-circle > ::before,
-.uk-list-square > ::before,
-.uk-list-decimal > ::before,
-.uk-list-hyphen > ::before {
-    content: "";
-    position: relative;
-    left: (-$list-padding-left);
-    width: $list-padding-left;
-    height: $list-marker-height;
-    margin-bottom: (-$list-marker-height);
-    display: list-item;
-    list-style-position: inside;
-    text-align: right;
-}
-
-.uk-list-disc > ::before { list-style-type: disc; }
-.uk-list-circle > ::before { list-style-type: circle; }
-.uk-list-square > ::before { list-style-type: square; }
-.uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; }
-.uk-list-hyphen > ::before { content: '–\00A0\00A0'; }
+.uk-list-disc { list-style-type: disc; }
+.uk-list-circle { list-style-type: circle; }
+.uk-list-square { list-style-type: square; }
+.uk-list-decimal { list-style-type: decimal; }
+.uk-list-hyphen { list-style-type: '–  '; }
 
 /*
  * Color modifiers
  */
 
-.uk-list-muted > ::before { color: $list-muted-color !important; }
-.uk-list-emphasis > ::before { color: $list-emphasis-color !important; }
-.uk-list-primary > ::before { color: $list-primary-color !important; }
-.uk-list-secondary > ::before { color: $list-secondary-color !important; }
+.uk-list-muted > ::marker { color: $list-muted-color !important; }
+.uk-list-emphasis > ::marker { color: $list-emphasis-color !important; }
+.uk-list-primary > ::marker { color: $list-primary-color !important; }
+.uk-list-secondary > ::marker { color: $list-secondary-color !important; }
 
 
 /* Image bullet modifier
  ========================================================================== */
 
-.uk-list-bullet > * { padding-left: $list-padding-left; }
+.uk-list-bullet > * {
+    position: relative;
+    padding-left: $list-padding-left;
+}
 
 .uk-list-bullet > ::before {
     content: "";
-    display: list-item;
-    position: relative;
-    left: (-$list-padding-left);
+    position: absolute;
+    top: 0;
+    left: 0;
     width: $list-padding-left;
-    height: $list-marker-height;
-    margin-bottom: (-$list-marker-height);
+    height: $global-line-height * 1em;
     @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color);
     background-repeat: no-repeat;
     background-position: 50% 50%;

package/src/scss/mixins-theme.scss

@@ -1266,10 +1266,10 @@
 }
 @mixin hook-inverse-component-list(){
 
-    .uk-list-muted > ::before { color: $inverse-list-muted-color !important; }
-    .uk-list-emphasis > ::before { color: $inverse-list-emphasis-color !important; }
-    .uk-list-primary > ::before { color: $inverse-list-primary-color !important; }
-    .uk-list-secondary > ::before { color: $inverse-list-secondary-color !important; }
+    .uk-list-muted > ::marker { color: $inverse-list-muted-color !important; }
+    .uk-list-emphasis > ::marker { color: $inverse-list-emphasis-color !important; }
+    .uk-list-primary > ::marker { color: $inverse-list-primary-color !important; }
+    .uk-list-secondary > ::marker { color: $inverse-list-secondary-color !important; }
 
     .uk-list-bullet > ::before {
         @include svg-fill($internal-list-bullet-image, "#000", $inverse-list-bullet-icon-color);

package/src/scss/mixins.scss

@@ -1002,10 +1002,10 @@
 @mixin hook-inverse-list-striped(){}
 @mixin hook-inverse-component-list(){
 
-    .uk-list-muted > ::before { color: $inverse-list-muted-color !important; }
-    .uk-list-emphasis > ::before { color: $inverse-list-emphasis-color !important; }
-    .uk-list-primary > ::before { color: $inverse-list-primary-color !important; }
-    .uk-list-secondary > ::before { color: $inverse-list-secondary-color !important; }
+    .uk-list-muted > ::marker { color: $inverse-list-muted-color !important; }
+    .uk-list-emphasis > ::marker { color: $inverse-list-emphasis-color !important; }
+    .uk-list-primary > ::marker { color: $inverse-list-primary-color !important; }
+    .uk-list-secondary > ::marker { color: $inverse-list-secondary-color !important; }
 
     .uk-list-bullet > ::before {
         @include svg-fill($internal-list-bullet-image, "#000", $inverse-list-bullet-icon-color);

package/tests/slider.html

@@ -403,7 +403,7 @@
 
                 </div>
 
-                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
+                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin uk-position-relative"></ul>
 
             </div>
 
@@ -411,54 +411,47 @@
 
             <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%; clsActivated: uk-transition-active">
 
-                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
-
-                    <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
-                        <div>
-                            <img src="images/slider1.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider2.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider3.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider4.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider5.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider1.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider2.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider3.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider4.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
-                        </div>
-                        <div>
-                            <img src="images/slider5.jpg" width="400" height="600" alt="">
-                            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
-                        </div>
+                <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-light">
+                    <div>
+                        <img src="images/slider1.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider2.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider3.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider4.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider5.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider1.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider2.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider3.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider4.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
+                    </div>
+                    <div>
+                        <img src="images/slider5.jpg" width="400" height="600" alt="">
+                        <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                     </div>
-
-                    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
-                    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
-
                 </div>
 
                 <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>