@andreyshpigunov/x 0.3.89 → 0.4.0

package/src/css/app.css

@@ -21,7 +21,7 @@ All right reserved.
 }
 
 
-@media (--dark) {
+@media (prefers-color-scheme: dark) {
     :root {
       /* x */
         --font-color: #ddd;
@@ -66,7 +66,7 @@ All right reserved.
   grid-area: copyright;
 }
 
-@media (--medium) {
+@media (min-width: 768px) {
   .foot {
     grid-template-rows: 1fr;
     grid-template-columns: 140px 1fr 200px;
@@ -82,7 +82,7 @@ All right reserved.
     height: 100px;
     will-change: height;
     
-    @media (--medium) {
+    @media (min-width: 768px) {
         height: 120px;
     }
 }
@@ -103,23 +103,22 @@ All right reserved.
         max-width: 100px;
         will-change: transform;
         
-        @media (--medium) {
+        @media (min-width: 768px) {
             max-width: 120px;
         }
     }
 }
 .header-github {
-    
     & a {
         display: block;
         width: 40px;
         height: 40px;
-        background-image: url('../assets/github-mark.png');
         background-position: center;
         background-size: cover;
-        
+        background-image: url(/assets/img/github-mark.png);
+
         @media (prefers-color-scheme: dark) {
-            background-image: url('../assets/github-mark-white.png');
+            background-image: url(/assets/img/github-mark-white.png);
         }
     }
 }

package/src/css/x.css

@@ -8,10 +8,8 @@ All right reserved.
 
 
 @import "../components/x/reset.css";
-@import "../components/x/typo.css";
 @import "../components/x/space.css";
 @import "../components/x/links.css";
-@import "../components/x/helpers.css";
 @import "../components/x/grid.css";
 @import "../components/x/flex.css";
 @import "../components/x/flow.css";
@@ -22,231 +20,211 @@ All right reserved.
 @import "../components/x/slider.css";
 @import "../components/x/sticky.css";
 @import "../components/x/modal.css";
-@import "../components/x/debug.css";
+/* @import "../components/x/debug.css"; */
 @import "../components/x/scroll.css";
 @import "../components/x/icons.css";
+@import "../components/x/typo.css";
+@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
+  .buttons-group
+*/
 
-PostCSS custom media
-====================
-@custom-media --small-max  (max-width: 599px);
-@custom-media --medium-min (min-width: 600px);
-@custom-media --medium-max (max-width: 999px);
-@custom-media --large-min  (min-width: 1000px);
-@custom-media --xlarge-min (min-width: 1400px);
-@custom-media --small  (min-width: 0px);
-@custom-media --medium (min-width: 600px);
-@custom-media --large  (min-width: 1000px);
-@custom-media --xlarge (min-width: 1400px);
-@custom-media --dark (prefers-color-scheme: dark);
-
-reset.css
-=========
---line-height: 1.5;
---font-color: #000;
---font-size-base: 62.5%;
---font-scale: 1;
---font-size: 1.6rem;
---font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
---font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
---background-color: #fff;
-
-typo.css
-========
---headers-margin-top: 1em;
---headers-margin-bottom: .5em;
---headers-font-family: var(--font-family);
---headers-font-weight: 700;
---headers-font-color: var(--font-color);
-
---h1-font-size: 2.5em;
---h2-font-size: 2.0em;
---h3-font-size: 1.5em;
---h4-font-size: 1.25em;
---h5-font-size: 1.125em;
---h6-font-size: 1.0em;
-
---h1-line-height: 1.2;
---h2-line-height: 1.3;
---h3-line-height: 1.4;
-
---paragraph-margin: 1em;
-
---figure-margin: 2.5em auto 2em;
---figcaption-margin-top: .5em;
---figcaption-font-size: var(--font-size);
---figcaption-color: #999;
-
---blockquote-margin: 2em 0;
---blockquote-padding: 1em 2em;
---blockquote-border: solid .2em var(--font-color);
-
---table-padding: .5em .75em;
---table-border: 1px solid #e4e4e4;
---table-header-font-weight: 700;
-
-space.css
-=========
---space-0:  0;
---space-1:  0.4rem;
---space-2:  0.8rem;
---space-3:  1.2rem;
---space-4:  1.6rem;
---space-5:  2.4rem;
---space-6:  3.2rem;
---space-7:  4.8rem;
---space-8:  6.4rem;
---space-9:  9.6rem;
---space-10: 12.8rem;
-
-links.css
-=========
---link-color: #0060cc;
---link-decoration-line: underline;
---link-decoration-style: solid;
-
-Additional variables and their default values:
---link-color-hover: var(--link-color);
---link-color-visited: var(--link-color);
---link-decoration-line-hover: var(--link-decoration-line-hover, var(--link-decoration-line));
---link-decoration-style-hover: var(--link-decoration-style-hover, var(--link-decoration-style));
---link-decoration-thickness: .06em;
---link-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
---link-decoration-color-hover: currentcolor;
---link-decoration-color-visited: currentcolor;
---link-underline-offset: .25em;
---link-transition: all .1s ease-out;
-
-helpers.css
-===========
---container-max-width: 160rem;
-
---shadow-1:  0 2px 4px #00000018;
---shadow-2:  0 4px 8px #00000018;
---shadow-3:  0 6px 12px #00000018;
---shadow-4:  0 8px 16px #00000018;
---shadow-5:  0 10px 20px #00000018;
---shadow-6:  0 12px 24px #00000018;
---shadow-7:  0 14px 28px #00000018;
---shadow-8:  0 16px 32px #00000018;
---shadow-9:  0 18px 36px #00000018;
---shadow-10: 0 20px 40px #00000018;
-
-flow.css
-========
-.flow
-.flow.s[0-10] (m,l,xl)   - vertical space
-
-form.css
-========
---form-width: 40rem;
---form-height-coeff: 2.5;
---form-side-padding: 1rem;
-
---form-font-size: var(--font-size);
---form-font-color: #000;
---form-font-color-readonly: #000;
---form-font-color-disabled: #666;
---form-font-color-placeholder: #ccc;
-
---form-border-width: 0.1rem;
---form-border-radius: 0.8rem;
---form-border-color: #d4d4d4;
---form-border-color-focused: #8cf;
---form-border-color-error: #f00;
---form-border-color-readonly: #ddd;
---form-border-color-disabled: #ddd;
+/*
+  .color-primary
+  .color-success
+  .color-warning
+  .color-danger
+  .color-error
+  .color-grey
+  
+  .bg-primary
+  .bg-success
+  .bg-warning
+  .bg-danger
+  .bg-error
+  .bg-grey
+*/
 
---form-background-color: #fff;
---form-background-color-readonly: #fafafa;
---form-background-color-disabled: #f6f6f6;
+/*
+  .flex     (s,m,l,xl)
+  
+  .flex.fr  (s,m,l,xl)  - flex row
+  .flex.fc  (s,m,l,xl)  - flex column
+  .flex.fw  (s,m,l,xl)  - flex wrap
+  .flex.fnw (s,m,l,xl)  - flex nowrap
+  
+  .flex.ais  (s,m,l,xl)  - stretch
+  .flex.aifs (s,m,l,xl)  - flex start
+  .flex.aic  (s,m,l,xl)  - center
+  .flex.aife (s,m,l,xl)  - flex end
+  
+  .flex.jcfs (s,m,l,xl)  - flex start
+  .flex.jcc  (s,m,l,xl)  - center
+  .flex.jcfe (s,m,l,xl)  - flex end
+  .flex.jcsb (s,m,l,xl)  - space between
+  .flex.jcsa (s,m,l,xl)  - space around
+  .flex.jcse (s,m,l,xl)  - space evenly
+  
+  .flex > .c[1-12]/[1-12] (s,m,l,xl) - column width "column/columns"
+*/
 
-Additional variables and their default values:
---form-height: 4rem;
+/*
+  .flow
+  .flow.s[0-10] (s,m,l,xl)   - vertical space
+*/
 
-buttons.css
-===========
---button-height-coeff: 2.5;
---button-side-padding-coeff: 1.25;
---button-color: var(--color-grey);
---button-font-color: #000;
---button-transition: all .1s ease-out;
---button-font-size: var(--font-size);
---button-transform: scale(1);
---button-transform-hover: none;
---button-transform-active: scale(.99);
---button-transform-origin: center bottom;
---button-box-shadow: none;
---button-box-shadow-hover: none;
---button-box-shadow-active: none;
+/*
+  .grid                   (s,m,l,xl)
+  .grid.g[1-12]           (s,m,l,xl)  - columns limit in grid
+  .grid > .c[1-12]        (s,m,l,xl)  - column width
+  .grid > .c[1-12]/[1-12] (s,m,l,xl)  - columns range for content
+*/
 
-Additional variables and their default values:
---button-height: 4rem;
---button-side-padding: 2rem;
---button-font-family: var(--font-family);
---button-font-weight: 400;
---button-disabled-opacity: .5;
---button-border-radius: calc(var(--button-font-size) * 0.6);
---button-color-hover: auto;
---button-color-active: auto;
---button-font-color-hover: auto;
---button-font-color-active: auto;
+/*
+  .antialiased
+  .container
+  .unselectable
+  .unclickable
+  .upper
+  .lower
+  .nowrap
+  .hyphens
+  .pointer
+  .toe - text-overflow: ellipsis
+  .lc[1-5] (m,l,xl) — text line clamp
+  .oh
+  .touch-show
+  .touch-hide
+  .rel
+  .abs
+  .ins
+  .fit-none    (s,m,l,xl)
+  .fit-cover   (s,m,l,xl)
+  .fit-contain (s,m,l,xl)
+  .t[0-12][n]   (s,m,l,xl)
+  .b[0-12][n]   (s,m,l,xl)
+  .l[0-12][n]   (s,m,l,xl)
+  .r[0-12][n]   (s,m,l,xl)
+  .z[0-12]   (s,m,l,xl)
+  .op[0-10]
+  .ratio1x1  (s,m,l,xl)
+  .ratio2x1  (s,m,l,xl)
+  .ratio3x1  (s,m,l,xl)
+  .ratio4x1  (s,m,l,xl)
+  .ratio3x2  (s,m,l,xl)
+  .ratio4x3  (s,m,l,xl)
+  .ratio16x9 (s,m,l,xl)
+  .ratio1x2  (s,m,l,xl)
+  .ratio1x3  (s,m,l,xl)
+  .ratio1x4  (s,m,l,xl)
+  .ratio2x3  (s,m,l,xl)
+  .ratio3x4  (s,m,l,xl)
+  .ratio9x16 (s,m,l,xl)
+  .break-word
+  .visually-hidden
+  .invisible
+  .scroll-responsive
+  .hidden       (s,m,l,xl)
+  .hidden-next  (s,m,l,xl)
+  .block        (s,m,l,xl)
+  .inline       (s,m,l,xl)
+  .inline-block (s,m,l,xl)
+  .fullscreen
+  .max                    (s,m,l,xl)
+  .w[10-190] step 10      (s,m,l,xl)
+  .w[200-380] step 20     (s,m,l,xl)
+  .w[400-1600] step 100   (s,m,l,xl)
+  .max[10-190] step 10    (s,m,l,xl)
+  .max[200-380] step 20   (s,m,l,xl)
+  .max[400-1600] step 100 (s,m,l,xl)
+  .min[10-190] step 10    (s,m,l,xl)
+  .min[200-380] step 20   (s,m,l,xl)
+  .min[400-1600] step 100 (s,m,l,xl)
+  .al      (s,m,l,xl)
+  .ar      (s,m,l,xl)
+  .ac      (s,m,l,xl)
+  .aj      (s,m,l,xl)
+  .m[0-12][n]  (s,m,l,xl)
+  .mx[0-12][n] (s,m,l,xl)
+  .my[0-12][n] (s,m,l,xl)
+  .mt[0-12][n] (s,m,l,xl)
+  .mb[0-12][n] (s,m,l,xl)
+  .ml[0-12][n] (s,m,l,xl)
+  .mr[0-12][n] (s,m,l,xl)
+  .ma  (s,m,l,xl)
+  .mxa (s,m,l,xl)
+  .mya (s,m,l,xl)
+  .mta (s,m,l,xl)
+  .mba (s,m,l,xl)
+  .mla (s,m,l,xl)
+  .mra (s,m,l,xl)
+  .p[0-12]  (s,m,l,xl)
+  .px[0-12] (s,m,l,xl)
+  .py[0-12] (s,m,l,xl)
+  .pt[0-12] (s,m,l,xl)
+  .pb[0-12] (s,m,l,xl)
+  .pl[0-12] (s,m,l,xl)
+  .pr[0-12] (s,m,l,xl)
+  .gap[0-12]  (s,m,l,xl)
+  .gapx[0-12] (s,m,l,xl)
+  .gapy[0-12] (s,m,l,xl)
+  .br[0-12]  (s,m,l,xl)
+  .br100     (s,m,l,xl)
+  .sh[0-10]  (s,m,l,xl)
+  .o[0-10]   (s,m,l,xl)
+  .no-print
+*/
 
-dropdown.css
-============
---dropdown-border-radius: 1.2rem;
---dropdown-backgroud-color: white;
---dropdown-box-shadow: var(--shadow-4);
---dropdown-padding: .8rem;
---dropdown-item-padding: .6rem 2.4rem .6rem 1.2rem;
---dropdown-item-font-color: black;
---dropdown-item-font-color-hover: black;
---dropdown-item-background-color: white;
---dropdown-item-background-color-hover: var(--color-grey);
---dropdown-divider-color: var(--color-grey);
+/*
+  .icon - base icon style
+  .icon.s[10-60] step 2 (m,l) - icon size in px
+*/
 
-slides.css
-==========
---slides-point-color: #ffffff66;
---slides-point-color-active: #fff;
---slides-point-size: .3rem;
---slides-point-gap: .3rem;
---slides-point-side-padding: 1.6rem;
---slides-point-bottom-padding: 1rem;
+/*
+  a
+  a.link
+  a.hover
+  a.active
+  a.link--noline
+  a.link--underline
+  a.link--dashed
+  a.link--dotted
+  a.link--wavy
+*/
 
-modal.css
-=========
---modal-margin-x: 3vw;
---modal-margin-y: 3vw;
---modal-padding: clamp(4rem, 4vw, 5rem) clamp(2.5rem, 4vw, 5rem);
---modal-background: #fff;
---modal-box-shadow: 0 1rem 4rem #00000033;
---modal-border-radius: 1.6rem;
---modal-closer-margin: .6rem;
---modal-closer-area: 4rem;
---modal-closer-size: 2.6rem;
---modal-closer-width: .2rem;
---modal-closer-color: #ccc;
---modal-closer-color-hover: #f00;
---modal-overlay-background-color: #00000066;
+/*
+  .scroll
+  .scroll--contain
+  .scroll--x-proximity
+  .scroll--x-mandatory
+*/
 
-scroll.css
-==========
---scroll-scrollbar-size: 6px;
---scroll-scrollbar-thumb-background: #00000011;
---scroll-scrollbar-thumb-background-hover: #00000022;
+/*
+  .space[0-10] (s,m,l,xl)   - vertical space
+*/
 
-colors.css
-==========
---color-primary: #0088ee;
---color-success: #33c433;
---color-warning: #ff8800;
---color-danger: #ee3333;
---color-error: #ee3333;
---color-grey: #f4f5f6;
+/* .sticky (s,m,l,xl) */
 
+/*
+  .h[1-6]
+  .mono
+  .italic
+  .strike
+  .fs[10-19] step 1 (m,l,xl) - size in rem - 1.0, 1.1, 1.2, ..., 1.9
+  .fs[20-64] step 2 (m,l,xl) - size in rem - 2.0, 2.2, 2.4, ..., 6.4
+  .fw[100-900] step 100 (m,l,xl)
+  .ls[0-4] (m,l,xl)
+  .lh[0-9] (m,l,xl)  - values: 1.0-1.9
 */

package/src/js/app.js

@@ -9,8 +9,8 @@
 
 import './x.js';
 // import Alpine from 'alpinejs'
- 
- 
+
+
 // window.Alpine = Alpine;
 // Alpine.start();
 
@@ -19,29 +19,29 @@ x.init();
 // Animation global functions
 window.element1 = (params) => {
   let rotate = params.progress * -360;
-  params.element.style.transform = 'rotate(' + rotate +  'deg)';
+  params.element.style.transform = 'rotate(' + rotate + 'deg)';
 }
 window.element2 = (params) => {
   let rotate = params.progress * 180;
-  params.element.style.transform = 'rotate(' + rotate +  'deg)';
+  params.element.style.transform = 'rotate(' + rotate + 'deg)';
 }
 window.element3 = (params) => {
   let rotate = params.progress * 120;
-  params.element.style.transform = 'rotate(' + rotate +  'deg)';
+  params.element.style.transform = 'rotate(' + rotate + 'deg)';
 }
 window.headerAnimation = (params) => {
   // console.log(x.device.size.s);
-  let _height = x.device.size.s ? 100 : 120;
+  let _height = 100;
   // console.log(_height);
   let header = qs('.header');
   let headerLogo = qs('.header-logo img');
   let height = _height - params.progress * _height / 2;
   let scale = 1 - params.progress * 0.5;
   header.style.height = height + 'px';
-  headerLogo.style.transform = 'scale(' + scale +  ')';
+  headerLogo.style.transform = 'scale(' + scale + ')';
   x.lib.switchClass(header, 'header_compact', params.progress == 1);
 }
 
 window.onload = () => {
   x.lib.transitionsOn()
-}
+}

package/src/js/x.js

@@ -7,45 +7,45 @@
 //
 
 
-import { modal        }  from "../components/x/modal";
-import { animate      }  from "../components/x/animate";
-import { appear       }  from "../components/x/appear";
-import { lazyload     }  from "../components/x/lazyload";
-import { loadmore     }  from "../components/x/loadmore";
-import { sheets       }  from "../components/x/sheets";
-import { dropdown     }  from "../components/x/dropdown";
-import { autocomplete }  from "../components/x/autocomplete";
-import { scroll       }  from "../components/x/scroll";
-import { hover        }  from "../components/x/hover";
-import { device       }  from "../components/x/device";
-import { lib          }  from "../components/x/lib";
-import { form         }  from "../components/x/form";
-import { sticky       }  from "../components/x/sticky";
-import { slider       }  from "../components/x/slider";
+import { modal } from "../components/x/modal";
+import { animate } from "../components/x/animate";
+import { appear } from "../components/x/appear";
+import { lazyload } from "../components/x/lazyload";
+import { loadmore } from "../components/x/loadmore";
+import { sheets } from "../components/x/sheets";
+import { dropdown } from "../components/x/dropdown";
+import { autocomplete } from "../components/x/autocomplete";
+import { scroll } from "../components/x/scroll";
+import { hover } from "../components/x/hover";
+import { device } from "../components/x/device";
+import { lib } from "../components/x/lib";
+import { form } from "../components/x/form";
+import { sticky } from "../components/x/sticky";
+import { slider } from "../components/x/slider";
 
 
 class X {
   constructor() {
-    this.modal        = modal;
-    this.animate      = animate;
-    this.appear       = appear;
-    this.lazyload     = lazyload;
-    this.loadmore     = loadmore;
-    this.sheets       = sheets;
-    this.dropdown     = dropdown;
+    this.modal = modal;
+    this.animate = animate;
+    this.appear = appear;
+    this.lazyload = lazyload;
+    this.loadmore = loadmore;
+    this.sheets = sheets;
+    this.dropdown = dropdown;
     this.autocomplete = autocomplete;
-    this.scroll       = scroll;
-    this.hover        = hover;
-    this.device       = device;
-    this.lib          = lib;
-    this.render       = lib.render.bind(lib);
-    this.form         = form;
-    this.sticky       = sticky;
-    this.slider       = slider;
-
+    this.scroll = scroll;
+    this.hover = hover;
+    this.device = device;
+    this.lib = lib;
+    this.render = lib.render.bind(lib);
+    this.form = form;
+    this.sticky = sticky;
+    this.slider = slider;
+    
     this.initialized = false;
   }
-
+  
   init() {
     if (!this.initialized) {
       this.device.init();
@@ -60,7 +60,7 @@ class X {
       this.sticky.init();
       this.slider.init();
       hover.init();
-
+      
       this.initialized = true;
     }
   }
@@ -71,11 +71,7 @@ const x = new X();
 // Make 'x' as global variable
 window.x = x;
 
-// Query selectors shorthands
-window.qs  = x.lib.qs;
-window.qsa = x.lib.qsa;
-
-// New shortcuts for selectors
-window.x.id  = x.lib.id;
-window.x.qs  = x.lib.qs;
-window.x.qsa = x.lib.qsa;
+// Shortcuts for selectors
+window.x.id = x.lib.id;
+window.x.qs = x.lib.qs;
+window.x.qsa = x.lib.qsa;

package/babel.config.cjs

@@ -1,4 +0,0 @@
-// babel.config.cjs — used by Jest (babel-jest)
-module.exports = {
-  presets: ['@babel/preset-env'],
-};