@andreyshpigunov/x 0.4.4 → 0.5.1

package/src/components/x/icons.css

@@ -9,50 +9,54 @@ All right reserved.
 
 /*
   .icon - base icon style
-  .icon.s[10-60] step 2 (m,l) - icon size in px
+  .icon[10-60] step 2 (m,l) - icon size in px
 */
 
-.icon,
-.icon > svg,
-.icon > img {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  max-width: none;
-  max-height: none;
-}
-.icon > svg,
-.icon > img {
-  display: block;
-}
-
-@for $i from 10 to 60 by 2 {
-  .icon.s$(i),
-  .icon.s$(i) > svg,
-  .icon.s$(i) > img {
-    width: calc($(i)rem / 10);
-    height: calc($(i)rem / 10);
+@layer icons {
+    
+  .icon,
+  .icon > svg,
+  .icon > img {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    max-width: none;
+    max-height: none;
   }
-}
-
-@media (min-width: 768px) {
+  .icon > svg,
+  .icon > img {
+    display: block;
+  }
+  
   @for $i from 10 to 60 by 2 {
-    .m\:icon.s$(i),
-    .m\:icon.s$(i) > svg,
-    .m\:icon.s$(i) > img {
+    .icon$(i),
+    .icon$(i) > svg,
+    .icon$(i) > img {
       width: calc($(i)rem / 10);
       height: calc($(i)rem / 10);
     }
   }
-}
-
-@media (min-width: 1024px) {
-  @for $i from 10 to 60 by 2 {
-    .l\:icon.s$(i),
-    .l\:icon.s$(i) > svg,
-    .l\:icon.s$(i) > img {
-      width: calc($(i)rem / 10);
-      height: calc($(i)rem / 10);
+  
+  @media (min-width: 768px) {
+    @for $i from 10 to 60 by 2 {
+      .m\:icon$(i),
+      .m\:icon$(i) > svg,
+      .m\:icon$(i) > img {
+        width: calc($(i)rem / 10);
+        height: calc($(i)rem / 10);
+      }
     }
   }
+  
+  @media (min-width: 1024px) {
+    @for $i from 10 to 60 by 2 {
+      .l\:icon$(i),
+      .l\:icon$(i) > svg,
+      .l\:icon$(i) > img {
+        width: calc($(i)rem / 10);
+        height: calc($(i)rem / 10);
+      }
+    }
+  }
+
 }

package/src/components/x/lib.js

@@ -90,8 +90,8 @@
  *   const items = lib.qsa('li', container);
  *
  * Classes with delay (for transitions):
- *   await lib.addClass('.element', 'active', 100); // Adds --ready class, waits 100ms, then adds active
- *   await lib.removeClass('.element', 'active', 200); // Removes active, waits 200ms, removes --ready
+ *   await lib.addClass('.element', 'active', 100); // Adds _ready class, waits 100ms, then adds active
+ *   await lib.removeClass('.element', 'active', 200); // Removes active, waits 200ms, removes _ready
  *
  * Formatting:
  *   lib.price(1234.56);        // "1 234.56"
@@ -333,7 +333,7 @@ class Lib {
     if (!len) return;
 
     if (delay > 0) {
-      const readyClass = className.replace(/--.*/, '') + '--ready';
+      const readyClass = className.replace(/_.*/, '') + '_ready';
       for (let i = 0; i < len; i++) items[i].classList.add(readyClass);
       await new Promise(res => setTimeout(res, delay));
     }
@@ -357,7 +357,7 @@ class Lib {
 
     if (delay > 0) {
       await new Promise(res => setTimeout(res, delay));
-      const readyClass = className.replace(/--.*/, '') + '--ready';
+      const readyClass = className.replace(/_.*/, '') + '_ready';
       for (let i = 0; i < len; i++) items[i].classList.remove(readyClass);
     }
   }

package/src/components/x/links.css

@@ -14,11 +14,11 @@ All right reserved.
   a.link
   a.hover
   a.active
-  a.link--noline
-  a.link--underline
-  a.link--dashed
-  a.link--dotted
-  a.link--wavy
+  a.link_noline
+  a.link_underline
+  a.link_dashed
+  a.link_dotted
+  a.link_wavy
 */
 
 :root {
@@ -41,70 +41,74 @@ All right reserved.
   */
 }
 
-a {
+@layer links {
   
-  &[role=button] {
-    cursor: pointer;
-  }
-  &:link,
-  &.link {
-    outline: none;
-    cursor: pointer;
-    color: var(--link-color);
-    transition: var(--link-transition, all .1s ease-out);
+  a {
     
-    text-decoration-line: var(--link-decoration-line);
-    text-decoration-style: var(--link-decoration-style);
-    text-decoration-color: var(--link-decoration-color, color-mix(in srgb, currentcolor, transparent 75%));
-    text-decoration-thickness: clamp(1px, var(--link-decoration-thickness, .06em), 10px);
-    text-underline-offset: var(--link-underline-offset, .25em);
-  }
-  &:visited {
-    color: var(--link-color-visited, var(--link-color));
-    text-decoration-color: var(--link-decoration-color-visited, currentcolor);
-  }
-  @media (any-hover: hover) {
-    &:hover,
-    &.hover {
+    &[role=button] {
+      cursor: pointer;
+    }
+    &:link,
+    &.link {
+      outline: none;
+      cursor: pointer;
+      color: var(--link-color);
+      transition: var(--link-transition, all .1s ease-out);
+      
+      text-decoration-line: var(--link-decoration-line);
+      text-decoration-style: var(--link-decoration-style);
+      text-decoration-color: var(--link-decoration-color, color-mix(in srgb, currentcolor, transparent 75%));
+      text-decoration-thickness: clamp(1px, var(--link-decoration-thickness, .06em), 10px);
+      text-underline-offset: var(--link-underline-offset, .25em);
+    }
+    &:visited {
+      color: var(--link-color-visited, var(--link-color));
+      text-decoration-color: var(--link-decoration-color-visited, currentcolor);
+    }
+    @media (any-hover: hover) {
+      &:hover,
+      &.hover {
+        color: var(--link-color-hover, var(--link-color));
+        text-decoration-line: var(--link-decoration-line-hover, var(--link-decoration-line));
+        text-decoration-style: var(--link-decoration-style-hover, var(--link-decoration-style));
+        text-decoration-color: var(--link-decoration-color-hover, currentcolor);
+      }
+    }
+    &:active,
+    &.active {
       color: var(--link-color-hover, var(--link-color));
       text-decoration-line: var(--link-decoration-line-hover, var(--link-decoration-line));
       text-decoration-style: var(--link-decoration-style-hover, var(--link-decoration-style));
       text-decoration-color: var(--link-decoration-color-hover, currentcolor);
     }
-  }
-  &:active,
-  &.active {
-    color: var(--link-color-hover, var(--link-color));
-    text-decoration-line: var(--link-decoration-line-hover, var(--link-decoration-line));
-    text-decoration-style: var(--link-decoration-style-hover, var(--link-decoration-style));
-    text-decoration-color: var(--link-decoration-color-hover, currentcolor);
+    
+    /* Link predefined styles */
+    
+    &.link_noline {
+      --link-decoration-line: none;
+    }
+    &.link_underline {
+      --link-decoration-line: underline;
+    }
+    &.link_dashed {
+      --link-decoration-style: dashed;
+    }
+    &.link_dotted {
+      --link-decoration-style: dotted;
+    }
+    &.link_wavy {
+      --link-decoration-style: wavy;
+    }
   }
   
-  /* Link predefined styles */
   
-  &.link--noline {
-    --link-decoration-line: none;
-  }
-  &.link--underline {
-    --link-decoration-line: underline;
-  }
-  &.link--dashed {
-    --link-decoration-style: dashed;
-  }
-  &.link--dotted {
-    --link-decoration-style: dotted;
-  }
-  &.link--wavy {
-    --link-decoration-style: wavy;
+  /* Remove underline from phones */
+  
+  a[href^="tel"],
+  a[href^="tel"]:hover,
+  a[href^="tel"]:active {
+    color: inherit;
+    text-decoration: inherit;
   }
-}
-
-
-/* Remove underline from phones */
 
-a[href^="tel"],
-a[href^="tel"]:hover,
-a[href^="tel"]:active {
-  color: inherit;
-  text-decoration: inherit;
 }