@fremtind/jokul 1.4.1 → 1.5.0

package/styles/components/loader/loader.css

@@ -1,100 +1,103 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl-loader {
-  display: flex;
-}
-.jkl-loader--inline {
-  display: inline-flex;
-}
-.jkl-loader__dot {
-  display: block;
-  transform-origin: center;
-  background-color: currentColor;
-  height: 0.9em;
-  width: 0.9em;
-  animation: 2500ms linear infinite;
-}
-.jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-u66zm3c;
-  margin-right: 1.71em;
-}
-.jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-u66zm3o;
-  margin-right: 1.9em;
-}
-.jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-u66zm3v;
-}
-@media screen and (forced-colors: active) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  .jkl-loader {
+    display: flex;
+  }
+  .jkl-loader--inline {
+    display: inline-flex;
+  }
   .jkl-loader__dot {
-    background-color: CanvasText;
-  }
-}
-.jkl-button .jkl-loader > .jkl-loader__dot, .jkl-loader--medium > .jkl-loader__dot {
-  height: 0.35em;
-  width: 0.35em;
-}
-.jkl-button .jkl-loader > .jkl-loader__dot--left, .jkl-loader--medium > .jkl-loader__dot--left {
-  margin-right: 0.585em;
-}
-.jkl-button .jkl-loader > .jkl-loader__dot--middle, .jkl-loader--medium > .jkl-loader__dot--middle {
-  margin-right: 0.65em;
-}
-.jkl-loader--small > .jkl-loader__dot {
-  height: 0.25em;
-  width: 0.25em;
-}
-.jkl-loader--small > .jkl-loader__dot--left {
-  margin-right: 0.27em;
-}
-.jkl-loader--small > .jkl-loader__dot--middle {
-  margin-right: 0.3em;
-}
-
-@keyframes jkl-loader-left-spin-u66zm3c {
-  0% {
-    transform: rotate(0) scale(0);
-  }
-  30% {
-    transform: rotate(90deg) scale(1);
-  }
-  70% {
-    transform: rotate(180deg) scale(0);
-  }
-  100% {
-    transform: rotate(180deg) scale(0);
-  }
-}
-@keyframes jkl-loader-middle-spin-u66zm3o {
-  0% {
-    transform: rotate(20deg) scale(0);
-  }
-  10% {
-    transform: rotate(20deg) scale(0);
-  }
-  40% {
-    transform: rotate(110deg) scale(1.4);
-  }
-  85% {
-    transform: rotate(200deg) scale(0);
-  }
-  100% {
-    transform: rotate(200deg) scale(0);
-  }
-}
-@keyframes jkl-loader-right-spin-u66zm3v {
-  0% {
-    transform: rotate(40deg) scale(0);
-  }
-  20% {
-    transform: rotate(40deg) scale(0);
-  }
-  50% {
-    transform: rotate(130deg) scale(1);
-  }
-  100% {
-    transform: rotate(220deg) scale(0);
+    display: block;
+    transform-origin: center;
+    background-color: currentColor;
+    height: 0.9em;
+    width: 0.9em;
+    animation: 2500ms linear infinite;
+  }
+  .jkl-loader__dot--left {
+    animation-name: jkl-loader-left-spin-u78fvqf;
+    margin-right: 1.71em;
+  }
+  .jkl-loader__dot--middle {
+    animation-name: jkl-loader-middle-spin-u78fvqx;
+    margin-right: 1.9em;
+  }
+  .jkl-loader__dot--right {
+    animation-name: jkl-loader-right-spin-u78fvqy;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-loader__dot {
+      background-color: CanvasText;
+    }
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot, .jkl-loader--medium > .jkl-loader__dot {
+    height: 0.35em;
+    width: 0.35em;
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot--left, .jkl-loader--medium > .jkl-loader__dot--left {
+    margin-right: 0.585em;
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot--middle, .jkl-loader--medium > .jkl-loader__dot--middle {
+    margin-right: 0.65em;
+  }
+  .jkl-loader--small > .jkl-loader__dot {
+    height: 0.25em;
+    width: 0.25em;
+  }
+  .jkl-loader--small > .jkl-loader__dot--left {
+    margin-right: 0.27em;
+  }
+  .jkl-loader--small > .jkl-loader__dot--middle {
+    margin-right: 0.3em;
+  }
+  @keyframes jkl-loader-left-spin-u78fvqf {
+    0% {
+      transform: rotate(0) scale(0);
+    }
+    30% {
+      transform: rotate(90deg) scale(1);
+    }
+    70% {
+      transform: rotate(180deg) scale(0);
+    }
+    100% {
+      transform: rotate(180deg) scale(0);
+    }
+  }
+  @keyframes jkl-loader-middle-spin-u78fvqx {
+    0% {
+      transform: rotate(20deg) scale(0);
+    }
+    10% {
+      transform: rotate(20deg) scale(0);
+    }
+    40% {
+      transform: rotate(110deg) scale(1.4);
+    }
+    85% {
+      transform: rotate(200deg) scale(0);
+    }
+    100% {
+      transform: rotate(200deg) scale(0);
+    }
+  }
+  @keyframes jkl-loader-right-spin-u78fvqy {
+    0% {
+      transform: rotate(40deg) scale(0);
+    }
+    20% {
+      transform: rotate(40deg) scale(0);
+    }
+    50% {
+      transform: rotate(130deg) scale(1);
+    }
+    100% {
+      transform: rotate(220deg) scale(0);
+    }
   }
 }

package/styles/components/loader/loader.min.css

@@ -1 +1 @@
-.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-u66zm3c;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u66zm3o;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u66zm3v}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-u66zm3c{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-u66zm3o{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-u66zm3v{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}
+@layer jokul.components{.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-u78fvqf;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u78fvqx;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u78fvqy}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-u78fvqf{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-u78fvqx{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-u78fvqy{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}

package/styles/components/loader/loader.scss

@@ -15,122 +15,125 @@ $_loader-left-animation-name: jkl-loader-left-spin-#{string.unique-id()};
 $_loader-middle-animation-name: jkl-loader-middle-spin-#{string.unique-id()};
 $_loader-right-animation-name: jkl-loader-right-spin-#{string.unique-id()};
 
-.jkl-loader {
-    display: flex;
+@layer jokul.components {
+    .jkl-loader {
+        display: flex;
 
-    &--inline {
-        display: inline-flex;
-    }
-
-    &__dot {
-        display: block;
-        transform-origin: center;
-        background-color: currentColor;
-        height: $_loader-dot-size--large;
-        width: $_loader-dot-size--large;
-        animation: $_loader-animation-properties;
-
-        &--left {
-            animation-name: $_loader-left-animation-name;
-            margin-right: $_loader-spacing--large * 0.9; // for visual balance
+        &--inline {
+            display: inline-flex;
         }
 
-        &--middle {
-            animation-name: $_loader-middle-animation-name;
-            margin-right: $_loader-spacing--large;
+        &__dot {
+            display: block;
+            transform-origin: center;
+            background-color: currentColor;
+            height: $_loader-dot-size--large;
+            width: $_loader-dot-size--large;
+            animation: $_loader-animation-properties;
+
+            &--left {
+                animation-name: $_loader-left-animation-name;
+                margin-right: $_loader-spacing--large
+                    * 0.9; // for visual balance
+            }
+
+            &--middle {
+                animation-name: $_loader-middle-animation-name;
+                margin-right: $_loader-spacing--large;
+            }
+
+            &--right {
+                animation-name: $_loader-right-animation-name;
+            }
+
+            @include jkl.forced-colors-mode {
+                background-color: CanvasText;
+            }
         }
 
-        &--right {
-            animation-name: $_loader-right-animation-name;
-        }
+        .jkl-button & > .jkl-loader__dot,
+        &--medium > .jkl-loader__dot {
+            height: $_loader-dot-size--medium;
+            width: $_loader-dot-size--medium;
+
+            &--left {
+                margin-right: $_loader-spacing--medium * 0.9;
+            }
 
-        @include jkl.forced-colors-mode {
-            background-color: CanvasText;
+            &--middle {
+                margin-right: $_loader-spacing--medium;
+            }
         }
-    }
 
-    .jkl-button & > .jkl-loader__dot,
-    &--medium > .jkl-loader__dot {
-        height: $_loader-dot-size--medium;
-        width: $_loader-dot-size--medium;
+        &--small > .jkl-loader__dot {
+            height: $_loader-dot-size--small;
+            width: $_loader-dot-size--small;
 
-        &--left {
-            margin-right: $_loader-spacing--medium * 0.9;
-        }
+            &--left {
+                margin-right: $_loader-spacing--small * 0.9;
+            }
 
-        &--middle {
-            margin-right: $_loader-spacing--medium;
+            &--middle {
+                margin-right: $_loader-spacing--small;
+            }
         }
     }
 
-    &--small > .jkl-loader__dot {
-        height: $_loader-dot-size--small;
-        width: $_loader-dot-size--small;
-
-        &--left {
-            margin-right: $_loader-spacing--small * 0.9;
+    @keyframes #{$_loader-left-animation-name} {
+        0% {
+            transform: rotate(0) scale(0);
         }
 
-        &--middle {
-            margin-right: $_loader-spacing--small;
+        30% {
+            transform: rotate(90deg) scale(1);
         }
-    }
-}
-
-@keyframes #{$_loader-left-animation-name} {
-    0% {
-        transform: rotate(0) scale(0);
-    }
-
-    30% {
-        transform: rotate(90deg) scale(1);
-    }
 
-    70% {
-        transform: rotate(180deg) scale(0);
-    }
+        70% {
+            transform: rotate(180deg) scale(0);
+        }
 
-    100% {
-        transform: rotate(180deg) scale(0);
+        100% {
+            transform: rotate(180deg) scale(0);
+        }
     }
-}
 
-@keyframes #{$_loader-middle-animation-name} {
-    0% {
-        transform: rotate(20deg) scale(0);
-    }
+    @keyframes #{$_loader-middle-animation-name} {
+        0% {
+            transform: rotate(20deg) scale(0);
+        }
 
-    10% {
-        transform: rotate(20deg) scale(0);
-    }
+        10% {
+            transform: rotate(20deg) scale(0);
+        }
 
-    40% {
-        transform: rotate(110deg) scale(1.4);
-    }
+        40% {
+            transform: rotate(110deg) scale(1.4);
+        }
 
-    85% {
-        transform: rotate(200deg) scale(0);
-    }
+        85% {
+            transform: rotate(200deg) scale(0);
+        }
 
-    100% {
-        transform: rotate(200deg) scale(0);
+        100% {
+            transform: rotate(200deg) scale(0);
+        }
     }
-}
 
-@keyframes #{$_loader-right-animation-name} {
-    0% {
-        transform: rotate(40deg) scale(0);
-    }
+    @keyframes #{$_loader-right-animation-name} {
+        0% {
+            transform: rotate(40deg) scale(0);
+        }
 
-    20% {
-        transform: rotate(40deg) scale(0);
-    }
+        20% {
+            transform: rotate(40deg) scale(0);
+        }
 
-    50% {
-        transform: rotate(130deg) scale(1);
-    }
+        50% {
+            transform: rotate(130deg) scale(1);
+        }
 
-    100% {
-        transform: rotate(220deg) scale(0);
+        100% {
+            transform: rotate(220deg) scale(0);
+        }
     }
 }