@andreyshpigunov/x 0.4.4 → 0.5.1

package/src/components/x/space.css

@@ -11,40 +11,44 @@ All right reserved.
   .space[0-10] (s,m,l,xl)   - vertical space
 */
 
-@for $i from 0 to 10 {
-  .space$(i) {
-    height: var(--space-$(i));
-  }
-}
-
-@media (min-width: 640px) {
+@layer space {
+  
   @for $i from 0 to 10 {
-    .s\:space$(i) {
+    .space$(i) {
       height: var(--space-$(i));
     }
   }
-}
-
-@media (min-width: 768px) {
-  @for $i from 0 to 10 {
-    .m\:space$(i) {
-      height: var(--space-$(i));
+  
+  @media (min-width: 640px) {
+    @for $i from 0 to 10 {
+      .s\:space$(i) {
+        height: var(--space-$(i));
+      }
     }
   }
-}
-
-@media (min-width: 1024px) {
-  @for $i from 0 to 10 {
-    .l\:space$(i) {
-      height: var(--space-$(i));
+  
+  @media (min-width: 768px) {
+    @for $i from 0 to 10 {
+      .m\:space$(i) {
+        height: var(--space-$(i));
+      }
     }
   }
-}
-
-@media (min-width: 1280px) {
-  @for $i from 0 to 10 {
-    .xl\:space$(i) {
-      height: var(--space-$(i));
+  
+  @media (min-width: 1024px) {
+    @for $i from 0 to 10 {
+      .l\:space$(i) {
+        height: var(--space-$(i));
+      }
+    }
+  }
+  
+  @media (min-width: 1280px) {
+    @for $i from 0 to 10 {
+      .xl\:space$(i) {
+        height: var(--space-$(i));
+      }
     }
   }
+
 }

package/src/components/x/sticky.css

@@ -9,18 +9,22 @@ All right reserved.
 
 /* .sticky (s,m,l,xl) */
 
-.sticky {
-  position: sticky;
-}
-@media (max-width: 640px) {
-  .s\:sticky { position: sticky }
-}
-@media (min-width: 768px) {
-  .m\:sticky { position: sticky }
-}
-@media (min-width: 1024px) {
-  .l\:sticky { position: sticky }
-}
-@media (min-width: 1280px) {
-  .xl\:sticky { position: sticky }
+@layer sticky {
+  
+  .sticky {
+    position: sticky;
+  }
+  @media (max-width: 640px) {
+    .s\:sticky { position: sticky }
+  }
+  @media (min-width: 768px) {
+    .m\:sticky { position: sticky }
+  }
+  @media (min-width: 1024px) {
+    .l\:sticky { position: sticky }
+  }
+  @media (min-width: 1280px) {
+    .xl\:sticky { position: sticky }
+  }
+
 }

package/src/components/x/sticky.js

@@ -23,7 +23,7 @@
  *     top: 0;
  *     z-index: 100;
  *   }
- *   .sticky.sticky--on {
+ *   .sticky.sticky_on {
  *     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  *   }
  *
@@ -76,7 +76,7 @@
  * CSS classes:
  *
  * - `.sticky` - Required class to mark element for observation
- * - `.sticky--on` - Added when element is in sticky state (not fully visible)
+ * - `.sticky_on` - Added when element is in sticky state (not fully visible)
  * - Removed when element returns to normal flow
  *
  * How it works:
@@ -85,7 +85,7 @@
  * 2. Uses threshold: 1 (element must be fully visible)
  * 3. Uses rootMargin: '-1px 0px 0px 0px' (triggers when top edge leaves viewport)
  * 4. When intersectionRatio < 1, element is sticky
- * 5. Toggles `sticky--on` class and dispatches events
+ * 5. Toggles `sticky_on` class and dispatches events
  *
  * Observer configuration:
  *
@@ -122,7 +122,7 @@
  * //
  * // <style>
  * //   .sticky { position: sticky; top: 0; z-index: 100; }
- * //   .sticky.sticky--on { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+ * //   .sticky.sticky_on { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  * // </style>
  * //
  * // <script type="module">
@@ -150,7 +150,7 @@ class Sticky {
      * Class to apply when sticky state is active.
      * @type {string}
      */
-    this.activeClass = 'sticky--on';
+    this.activeClass = 'sticky_on';
 
     /**
      * Root margin for IntersectionObserver.

package/src/components/x/typo.css

@@ -55,235 +55,238 @@ All right reserved.
   --table-header-font-weight: 700;
 }
 
-
-/* !- Headers */
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
-  margin-top: 0;
-  margin-bottom: var(--headers-margin-bottom);
-  font-family: var(--headers-font-family);
-  font-weight: var(--headers-font-weight);
-  color: var(--headers-font-color);
-}
-* + h2, * + .h2,
-* + h3, * + .h3,
-* + h4, * + .h4,
-* + h5, * + .h5,
-* + h6, * + .h6 {
-  margin-top: var(--headers-margin-top);
-}
-
-h1, .h1 {
-  line-height: var(--h1-line-height);
-  font-size: var(--h1-font-size);
-}
-h2, .h2 {
-  line-height: var(--h2-line-height);
-  font-size: var(--h2-font-size);
-}
-h3, .h3 {
-  line-height: var(--h3-line-height);
-  font-size: var(--h3-font-size);
-}
-h4, .h4 { font-size: var(--h4-font-size) }
-h5, .h5 { font-size: var(--h5-font-size) }
-h6, .h6 { font-size: var(--h6-font-size) }
-
-
-/* !- Paragraph */
-
-p {
-  margin: var(--paragraph-margin) 0;
-  font-style: inherit;
+@layer typo {
   
-  &:first-child { margin-top: 0 }
-  &:last-child  { margin-bottom: 0 }
-}
-
-
-/* !- Figure  */
-
-figure {
-  margin: var(--figure-margin);
-}
-figcaption {
-  margin-top: var(--figcaption-margin-top);
-  /* Negative margin pulls next block closer (optical balance) */
-  margin-bottom: calc(var(--figcaption-margin-top) * -1);
-  font-size: var(--figcaption-font-size);
-  color: var(--figcaption-color);
-}
-
-
-/* !- Blockquote */
-
-blockquote {
-  margin: var(--blockquote-margin);
-  padding: var(--blockquote-padding);
-  font-style: var(--blockquote-font-style);
-  hyphens: auto;
-  border-left: var(--blockquote-border);
-}
-
-
-/* !- Preformatted */
-
-pre {
-  margin: var(--paragraph-margin) 0;
-  font-family: var(--font-family-mono, monospace);
-}
-
-
-/* !- Lists */
-
-ul,
-ol,
-dl {
-  margin: var(--paragraph-margin) 0;
-  padding-left: calc(var(--paragraph-margin) * 1.5);
-  
-  & ul,
-  & ol,
-  & dl,
-  & li {
-    margin: var(--space-1) 0;
+  /* !- Headers */
+  
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
+    margin-top: 0;
+    margin-bottom: var(--headers-margin-bottom);
+    font-family: var(--headers-font-family);
+    font-weight: var(--headers-font-weight);
+    color: var(--headers-font-color);
+  }
+  * + h2, * + .h2,
+  * + h3, * + .h3,
+  * + h4, * + .h4,
+  * + h5, * + .h5,
+  * + h6, * + .h6 {
+    margin-top: var(--headers-margin-top);
   }
-}
-dl {
-  padding-left: 0;
   
-  & dt,
-  & dd { margin: var(--space-1) 0 }
-  & dt { font-weight: bold }
-}
-
-
-/* !- Table */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  & caption {
-    margin-bottom: var(--space-1);
-    padding: 0 var(--space-3);
-    font-weight: var(--table-caption-font-weight);
-    text-align: left;
+  h1, .h1 {
+    line-height: var(--h1-line-height);
+    font-size: var(--h1-font-size);
   }
-  & tr th {
-    font-weight: var(--table-header-font-weight);
+  h2, .h2 {
+    line-height: var(--h2-line-height);
+    font-size: var(--h2-font-size);
   }
-  & tr th,
-  & tr td {
-    padding: var(--table-padding);
-    border: var(--table-border);
-    vertical-align: top;
+  h3, .h3 {
+    line-height: var(--h3-line-height);
+    font-size: var(--h3-font-size);
   }
-}
-
-
-/* !- Font styles */
-
-.mono   { font-family: var(--font-family-mono, monospace) }
-.italic { font-style: italic }
-.strike { text-decoration: line-through }
-
-
-/* !- Font sizes */
-
-@for $i from 10 to 19 {
-  .fs$(i) { font-size: calc($(i)rem / 10) }
-}
-@for $i from 20 to 64 by 2 {
-  .fs$(i) { font-size: calc($(i)rem / 10) }
-}
-@for $i from 100 to 900 by 100 {
-  .fw$(i) { font-weight: $(i) }
-}
-
-@media (min-width: 768px) {
-  @for $i from 10 to 19 {
-    .m\:fs$(i) { font-size: calc($(i)rem / 10) }
+  h4, .h4 { font-size: var(--h4-font-size) }
+  h5, .h5 { font-size: var(--h5-font-size) }
+  h6, .h6 { font-size: var(--h6-font-size) }
+  
+  
+  /* !- Paragraph */
+  
+  p {
+    margin: var(--paragraph-margin) 0;
+    font-style: inherit;
+    
+    &:first-child { margin-top: 0 }
+    &:last-child  { margin-bottom: 0 }
   }
-  @for $i from 20 to 64 by 2 {
-    .m\:fs$(i) { font-size: calc($(i)rem / 10) }
+  
+  
+  /* !- Figure  */
+  
+  figure {
+    margin: var(--figure-margin);
   }
-  @for $i from 100 to 900 by 100 {
-    .m\:fw$(i) { font-weight: $(i) }
+  figcaption {
+    margin-top: var(--figcaption-margin-top);
+    /* Negative margin pulls next block closer (optical balance) */
+    margin-bottom: calc(var(--figcaption-margin-top) * -1);
+    font-size: var(--figcaption-font-size);
+    color: var(--figcaption-color);
   }
-}
-
-@media (min-width: 1024px) {
-  @for $i from 10 to 19 {
-    .l\:fs$(i) { font-size: calc($(i)rem / 10) }
+  
+  
+  /* !- Blockquote */
+  
+  blockquote {
+    margin: var(--blockquote-margin);
+    padding: var(--blockquote-padding);
+    font-style: var(--blockquote-font-style);
+    hyphens: auto;
+    border-left: var(--blockquote-border);
   }
-  @for $i from 20 to 64 by 2 {
-    .l\:fs$(i) { font-size: calc($(i)rem / 10) }
+  
+  
+  /* !- Preformatted */
+  
+  pre {
+    margin: var(--paragraph-margin) 0;
+    font-family: var(--font-family-mono, monospace);
   }
-  @for $i from 100 to 900 by 100 {
-    .l\:fw$(i) { font-weight: $(i) }
+  
+  
+  /* !- Lists */
+  
+  ul,
+  ol,
+  dl {
+    margin: var(--paragraph-margin) 0;
+    padding-left: calc(var(--paragraph-margin) * 1.5);
+    
+    & ul,
+    & ol,
+    & dl,
+    & li {
+      margin: var(--space-1) 0;
+    }
   }
-}
-
-@media (min-width: 1280px) {
+  dl {
+    padding-left: 0;
+    
+    & dt,
+    & dd { margin: var(--space-1) 0 }
+    & dt { font-weight: bold }
+  }
+  
+  
+  /* !- Table */
+  
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  
+    & caption {
+      margin-bottom: var(--space-1);
+      padding: 0 var(--space-3);
+      font-weight: var(--table-caption-font-weight);
+      text-align: left;
+    }
+    & tr th {
+      font-weight: var(--table-header-font-weight);
+    }
+    & tr th,
+    & tr td {
+      padding: var(--table-padding);
+      border: var(--table-border);
+      vertical-align: top;
+    }
+  }
+  
+  
+  /* !- Font styles */
+  
+  .mono   { font-family: var(--font-family-mono, monospace) }
+  .italic { font-style: italic }
+  .strike { text-decoration: line-through }
+  
+  
+  /* !- Font sizes */
+  
   @for $i from 10 to 19 {
-    .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
+    .fs$(i) { font-size: calc($(i)rem / 10) }
   }
   @for $i from 20 to 64 by 2 {
-    .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
+    .fs$(i) { font-size: calc($(i)rem / 10) }
   }
   @for $i from 100 to 900 by 100 {
-    .xl\:fw$(i) { font-weight: $(i) }
+    .fw$(i) { font-weight: $(i) }
   }
-}
-
-
-/* !- Letter spacing */
-
-@for $i from 0 to 4 {
-  .ls$(i) { letter-spacing: calc($(i)em * 0.625) }
-}
-
-@media (min-width: 768px) {
-  @for $i from 0 to 4 {
-    .m\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+  
+  @media (min-width: 768px) {
+    @for $i from 10 to 19 {
+      .m\:fs$(i) { font-size: calc($(i)rem / 10) }
+    }
+    @for $i from 20 to 64 by 2 {
+      .m\:fs$(i) { font-size: calc($(i)rem / 10) }
+    }
+    @for $i from 100 to 900 by 100 {
+      .m\:fw$(i) { font-weight: $(i) }
+    }
   }
-}
-@media (min-width: 1024px) {
-  @for $i from 0 to 4 {
-    .l\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+  
+  @media (min-width: 1024px) {
+    @for $i from 10 to 19 {
+      .l\:fs$(i) { font-size: calc($(i)rem / 10) }
+    }
+    @for $i from 20 to 64 by 2 {
+      .l\:fs$(i) { font-size: calc($(i)rem / 10) }
+    }
+    @for $i from 100 to 900 by 100 {
+      .l\:fw$(i) { font-weight: $(i) }
+    }
   }
-}
-@media (min-width: 1280px) {
+  
+  @media (min-width: 1280px) {
+    @for $i from 10 to 19 {
+      .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
+    }
+    @for $i from 20 to 64 by 2 {
+      .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
+    }
+    @for $i from 100 to 900 by 100 {
+      .xl\:fw$(i) { font-weight: $(i) }
+    }
+  }
+  
+  
+  /* !- Letter spacing */
+  
   @for $i from 0 to 4 {
-    .xl\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+    .ls$(i) { letter-spacing: calc($(i)em * 0.625) }
   }
-}
-
-
-/* !- Line height */
-
-@for $i from 0 to 9 {
-  .lh$(i)  { line-height: 1.$(i) }
-}
-
-@media (min-width: 768px) {
-  @for $i from 0 to 9 {
-    .m\:lh$(i)  { line-height: 1.$(i) }
+  
+  @media (min-width: 768px) {
+    @for $i from 0 to 4 {
+      .m\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+    }
   }
-}
-@media (min-width: 1024px) {
-  @for $i from 0 to 9 {
-    .l\:lh$(i)  { line-height: 1.$(i) }
+  @media (min-width: 1024px) {
+    @for $i from 0 to 4 {
+      .l\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+    }
   }
-}
-@media (min-width: 1280px) {
+  @media (min-width: 1280px) {
+    @for $i from 0 to 4 {
+      .xl\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+    }
+  }
+  
+  
+  /* !- Line height */
+  
   @for $i from 0 to 9 {
-    .xl\:lh$(i)  { line-height: 1.$(i) }
+    .lh$(i)  { line-height: 1.$(i) }
+  }
+  
+  @media (min-width: 768px) {
+    @for $i from 0 to 9 {
+      .m\:lh$(i)  { line-height: 1.$(i) }
+    }
   }
+  @media (min-width: 1024px) {
+    @for $i from 0 to 9 {
+      .l\:lh$(i)  { line-height: 1.$(i) }
+    }
+  }
+  @media (min-width: 1280px) {
+    @for $i from 0 to 9 {
+      .xl\:lh$(i)  { line-height: 1.$(i) }
+    }
+  }
+
 }

package/src/css/x.css

@@ -7,6 +7,8 @@ All right reserved.
 ----------------------------------------*/
 
 
+@layer reset, space, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, typo, helpers, colors;
+
 @import "../components/x/reset.css";
 @import "../components/x/space.css";
 @import "../components/x/links.css";
@@ -27,17 +29,18 @@ All right reserved.
 @import "../components/x/helpers.css";
 @import "../components/x/colors.css";
 
+
 /*
   .button
-  .button--label
-  .button--primary
-  .button--success
-  .button--warning
-  .button--danger
-  .button--white
-  .button--black
-  .button--clear
-  .button--dropdown
+  .button_label
+  .button_primary
+  .button_success
+  .button_warning
+  .button_danger
+  .button_white
+  .button_black
+  .button_clear
+  .button_dropdown
   .buttons-group
 */
 
@@ -197,18 +200,18 @@ 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
 */
 
 /*
   .scroll
-  .scroll--contain
-  .scroll--x-proximity
-  .scroll--x-mandatory
+  .scroll_contain
+  .scroll_x-proximity
+  .scroll_x-mandatory
 */
 
 /*