@ulu/frontend 0.1.0-beta.97 → 0.1.0-beta.99

package/docs-dev/demos/skeleton/index.html

@@ -5599,64 +5599,64 @@
     
 <h2 class="h2">Media Block</h2>
 
-<div class="skeleton" style="max-width: 350px;">
-  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
+<div style="max-width: 350px;">
+  <div class="skeleton-block skeleton-block--media layout-flex-center-all">
     <span class="fas fa-image type-large-xx" aria-hidden="true"></span>
   </div>
 </div>
 
 <h2 class="h2">Lines of Content/Text</h2>
 
-<div class="skeleton">
-  <p class="skeleton__text"></p>
-  <p class="skeleton__text"></p>
-  <p class="skeleton__text skeleton__text--small"></p>
-  <p class="skeleton__text"></p>
+<div>
+  <p class="skeleton-text"></p>
+  <p class="skeleton-text"></p>
+  <p class="skeleton-text skeleton-text--small"></p>
+  <p class="skeleton-text"></p>
 </div>
 
 <h2 class="h2">Paragraph</h2>
 
-<div class="skeleton">
+<div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-xx"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-x"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-xx"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-xx"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-xx"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--small-x"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-x"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--large-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--large-x"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-x"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--large"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--large"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--large"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--large"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--large"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--large"></span>
   </div>
 </div>
 
 <h2 class="h2">Card</h2>
 
-<article class="card skeleton">
+<article class="card">
   <div class="card__body">
     <div class="card__main">
       <div class="card__title">
-        <div class="skeleton__text skeleton__text--large skeleton__alt"></div>
+        <div class="skeleton-text skeleton-text--large skeleton-alt"></div>
       </div>
       <div class="card__content">
-        <span class="skeleton__text skeleton__text--inline skeleton__text--small-xxx"></span>
-        <span class="skeleton__text skeleton__text--inline skeleton__text--small-xxx"></span>
+        <span class="skeleton-text skeleton-text--inline skeleton-text--small-xxx"></span>
+        <span class="skeleton-text skeleton-text--inline skeleton-text--small-xxx"></span>
       </div>
     </div>
   </div>
   <div class="card__image">
-    <div class="skeleton__block skeleton__block--media card__image-media layout-flex-center-all">
+    <div class="skeleton-block card__image-media layout-flex-center-all">
       <span class="fas fa-image type-large-xx" aria-hidden="true"></span>
     </div>
   </div>

package/docs-dev/sass/components/skeleton/index.html

@@ -5789,7 +5789,7 @@
 <li><strong>Group:</strong> skeleton</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 75-78</li>
-<li><strong>Lines (code):</strong> 80-117</li>
+<li><strong>Lines (code):</strong> 80-122</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.97",
+  "version": "0.1.0-beta.99",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_skeleton.scss

@@ -79,38 +79,43 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("skeleton");
-
-  #{ $prefix } {
-    animation: get("animation") ;
+  #{ $prefix },
+  #{ $prefix }-background,
+  #{ $prefix }-block,
+  #{ $prefix }-text {
+    animation: get("animation");
     color: color.get(get("color"));
   }
-  #{ $prefix }__background-color {
+  #{ $prefix }-background {
+    animation: get("animation");
     background-color: color.get(get("background-color")) !important;
   }
-  #{ $prefix }__block,
-  #{ $prefix }__text {
+  #{ $prefix }-background--alt {
+    background-color: color.get(get("background-color-alt"));
+  }
+  #{ $prefix }-block,
+  #{ $prefix }-text {
+    animation: get("animation");
+    color: color.get(get("color"));
     background-color: color.get(get("background-color")) !important;
     border-radius: get("border-radius");
   }
-  #{ $prefix }__alt {
-    background-color: color.get(get("background-color-alt"));
-  }
-  #{ $prefix }__block--media {
+  #{ $prefix }-block--media {
     aspect-ratio: 4/3;
   }
-  #{ $prefix }__text {
+  #{ $prefix }-text {
     height: 1em;
     width: 60%;
     border-radius: get("text-border-radius");
   }
-  #{ $prefix }__text--inline {
+  #{ $prefix }-text--inline {
     display: inline-block;
   }
-  #{ $prefix }__text--inline + #{ $prefix }__text--inline {
+  #{ $prefix }-text--inline + #{ $prefix }-text--inline {
     margin-left: get("inline-margin");
   }
   @each $name, $value in get("text-sizes") {
-    #{ $prefix }__text--#{ $name } {
+    #{ $prefix }-text--#{ $name } {
       width: $value;
     }
   }