@andreyshpigunov/x 0.3.72

package/src/css/x.css

@@ -0,0 +1,252 @@
+/*----------------------------------------
+x.css / x
+Small and simple CSS & JavaScript library with interesting features
+
+Created by Andrey Shpigunov at 20.03.2025
+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";
+@import "../components/x/form.css";
+@import "../components/x/buttons.css";
+@import "../components/x/dropdown.css";
+@import "../components/x/sheets.css";
+@import "../components/x/slider.css";
+@import "../components/x/sticky.css";
+@import "../components/x/modal.css";
+@import "../components/x/debug.css";
+@import "../components/x/scroll.css";
+@import "../components/x/icons.css";
+@import "../components/x/colors.css";
+
+
+/*
+
+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;
+
+--form-background-color: #fff;
+--form-background-color-readonly: #fafafa;
+--form-background-color-disabled: #f6f6f6;
+
+Additional variables and their default values:
+--form-height: 4rem;
+
+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;
+
+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;
+
+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);
+
+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;
+
+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.css
+==========
+--scroll-scrollbar-size: 6px;
+--scroll-scrollbar-thumb-background: #00000011;
+--scroll-scrollbar-thumb-background-hover: #00000022;
+
+colors.css
+==========
+--color-primary: #0088ee;
+--color-success: #33c433;
+--color-warning: #ff8800;
+--color-danger: #ee3333;
+--color-error: #ee3333;
+--color-grey: #f4f5f6;
+
+*/

package/src/js/app.js

@@ -0,0 +1,47 @@
+//
+//  app.js / x
+//  App
+//
+//  Created by Andrey Shpigunov at 20.03.2025
+//  All right reserved.
+//
+
+
+import './x.js';
+// import Alpine from 'alpinejs'
+ 
+ 
+// window.Alpine = Alpine;
+// Alpine.start();
+
+x.init();
+
+// Animation global functions
+window.element1 = (params) => {
+  let rotate = params.progress * -360;
+  params.element.style.transform = 'rotate(' + rotate +  'deg)';
+}
+window.element2 = (params) => {
+  let rotate = params.progress * 180;
+  params.element.style.transform = 'rotate(' + rotate +  'deg)';
+}
+window.element3 = (params) => {
+  let rotate = params.progress * 120;
+  params.element.style.transform = 'rotate(' + rotate +  'deg)';
+}
+window.headerAnimation = (params) => {
+  // console.log(x.device.size.s);
+  let _height = x.device.size.s ? 100 : 120;
+  // 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 +  ')';
+  x.lib.switchClass(header, 'header_compact', params.progress == 1);
+}
+
+window.onload = () => {
+  x.lib.transitionsOn()
+}

package/src/js/x.js

@@ -0,0 +1,81 @@
+//
+//  x.js / x
+//  Small and simple CSS & JavaScript library with interesting features
+//
+//  Created by Andrey Shpigunov at 20.03.2025
+//  All right reserved.
+//
+
+
+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.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.initialized = false;
+  }
+  
+  init() {
+    if (!this.initialized) {
+      this.device.init();
+      this.modal.init();
+      this.animate.init();
+      this.appear.init();
+      this.lazyload.init();
+      this.loadmore.init();
+      this.sheets.init();
+      this.dropdown.init();
+      this.scroll.init();
+      this.sticky.init();
+      this.slider.init();
+      hover();
+      
+      this.initialized = true;
+    }
+  }
+};
+
+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;