@andreyshpigunov/x 0.5.2 → 0.5.4

package/index.html

@@ -19,7 +19,7 @@
   "functionName": "headerAnimation"
 }'>
   <header class="header flex aic sticky t0 px5 m:px6 l:px8 unselectable">
-    <div class="header-version nowrap">0.5.2</div>
+    <div class="header-version nowrap">0.5.4</div>
     <div class="header-logo mxa">
       <a role="button" x-scrollto="#top">
         <img src="assets/img/logo.png" alt="x" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andreyshpigunov/x",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "x-js": "dist/x.js",
   "app-js": "assets/js/app.js",
   "targets": {

package/src/components/x/buttons.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .button
   .button_label
@@ -20,53 +21,6 @@ All right reserved.
   .buttons-group
 */
 
-:root {
-  /*
-    External variables:
-    typo.css
-      --font-family
-      --font-size
-    colors.css
-      --color-grey
-      --color-primary
-      --color-success
-      --color-warning
-      --color-danger
-  */
-  
-  /* Required variables */
-  --button-height-coeff: 2.5;
-  --button-side-padding-coeff: 1.25;
-  --button-color: var(--color-grey);
-  --button-font-family: var(--font-family);
-  --button-font-color: #000;
-  --button-font-weight: 400;
-  --button-transition: all .1s ease-out;
-  --button-font-size: var(--font-size);
-  --button-transform: translate(0,0);
-  --button-transform-hover: none;
-  --button-transform-active: translate(0,.1rem);
-  --button-transform-origin: center bottom;
-  --button-box-shadow: 0 .1rem .1rem #00000011;
-  --button-box-shadow-hover: 0 .1rem .1rem #00000022;
-  --button-box-shadow-active: inset 0 0 .1rem #00000011;
-  --button-disabled-opacity: .5;
-  --button-border-radius: calc(var(--button-font-size) * 0.6);
-
-  /* Strength of hover (lighten) / active (darken). Override on :root or .button--* to tune. */
-  --button-hover-lighten: 10%;
-  --button-active-darken: 5%;
-  
-  /*
-    Additional variables and their default values:
-    --button-height: 4rem;
-    --button-side-padding: 2rem;
-    --button-hover-lighten: 20%  (how much white to mix on hover);
-    --button-active-darken: 20%  (how much black to mix on active).
-    Override --button-color-hover / --button-color-active for custom behaviour (e.g. .button--clear).
-  */
-}
-
 @layer buttons {
   
   .button, [type=submit] {

package/src/components/x/colors.css

@@ -26,17 +26,6 @@ All right reserved.
   .bg-grey
 */
 
-:root {
-  --color-primary: #0088ee;
-  --color-success: #33c433;
-  --color-warning: #ff8800;
-  --color-danger: #ee3333;
-  --color-error: #ee3333;
-  --color-black: #fff;
-  --color-white: #000;
-  --color-grey: #f4f5f6;
-}
-
 @layer colors {
     
   .color-primary {

package/src/components/x/dropdown.css

@@ -7,20 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --dropdown-border-radius: 1.2rem;
-  --dropdown-backgroud-color: white;
-  --dropdown-box-shadow: var(--shadow-4);
-  --dropdown-padding: .8rem;
-  --dropdown-max-width: 28rem;
-  --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);
-}
-
 @layer dropdown {
   
   [x-dropdown] {
@@ -131,6 +117,7 @@ All right reserved.
         display: block;
         padding: var(--dropdown-item-padding);
         line-height: 1.4;
+        font-size: var(--dropdown-item-font-size);
         color: var(--dropdown-item-font-color);
         white-space: nowrap;
         text-overflow: ellipsis;

package/src/components/x/flex.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .flex     (s,m,l,xl)
   

package/src/components/x/flow.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .flow
   .flow.s[0-10] (s,m,l,xl)   - vertical space

package/src/components/x/form.css

@@ -7,35 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --form-width: 40rem;
-  --form-height-coeff: 2.6;
-  --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: .1rem;
-  --form-border-radius: .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;
-  */
-}
-
 @layer form {
   
   input[type="color"],

package/src/components/x/grid.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .grid                   (s,m,l,xl)
   .grid.g[1-12]           (s,m,l,xl)  - columns limit in grid
@@ -13,7 +14,6 @@ All right reserved.
   .grid > .c[1-12]/[1-12] (s,m,l,xl)  - columns range for content
 */
 
-
 @layer grid {
   
   .grid { display: grid }

package/src/components/x/helpers.css

@@ -101,25 +101,17 @@ All right reserved.
   .br100     (s,m,l,xl)
   .sh[0-10]  (s,m,l,xl)
   .o[0-10]   (s,m,l,xl)
+  .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
   .no-print
 */
 
-
-:root {
-  --container-max-width: 160rem;
-  
-  --shadow-1:  0 2px 4px #00000016;
-  --shadow-2:  0 4px 8px #00000016;
-  --shadow-3:  0 6px 12px #00000016;
-  --shadow-4:  0 8px 16px #00000016;
-  --shadow-5:  0 10px 20px #00000016;
-  --shadow-6:  0 12px 24px #00000016;
-  --shadow-7:  0 14px 28px #00000016;
-  --shadow-8:  0 16px 32px #00000016;
-  --shadow-9:  0 18px 36px #00000016;
-  --shadow-10: 0 20px 40px #00000016;
-}
-
 @layer helpers {
   
   /* !- Font smoothing */
@@ -1094,6 +1086,104 @@ All right reserved.
   }
   
   
+  /* !- 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) }
+    }
+    @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 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) {
+    @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 {
+    .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: 1024px) {
+    @for $i from 0 to 4 {
+      .l\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
+    }
+  }
+  @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 {
+    .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) }
+    }
+  }
+
+  
   /* !- Print */
   @media print {
     .no-print {

package/src/components/x/links.css

@@ -21,26 +21,6 @@ All right reserved.
   a.link_wavy
 */
 
-:root {
-  --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;
-  */
-}
-
 @layer links {
   
   a {

package/src/components/x/modal.css

@@ -7,27 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --modal-margin-top: 3vw;
-  --modal-margin-bottom: 3vw;
-  --modal-margin-left: 3vw;
-  --modal-margin-right: 3vw;
-  --modal-padding-top: clamp(2.5rem, 4vw, 5rem);
-  --modal-padding-bottom: clamp(2.5rem, 4vw, 5rem);
-  --modal-padding-left: clamp(2.5rem, 4vw, 5rem);
-  --modal-padding-right: 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.4rem;
-  --modal-closer-width: .2rem;
-  --modal-closer-color: #ccc;
-  --modal-closer-color-hover: #f00;
-  --modal-overlay-background-color: #00000066;
-}
-
 @layer modal {
 
   html.modal_active body {

package/src/components/x/reset.css

@@ -19,32 +19,6 @@ All right reserved.
   All queries are mobile first.
 */
 
-:root {
-  /* Base variables */
-  --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;
-  --line-height: 1.5;
-  --font-size-base: 62.5%;
-  --font-size: 1.6rem;
-  --font-scale: 1;
-  --font-color: #000;
-  --background-color: #fff;
-
-  /* Spaces */
-  --space-0:  0;
-  --space-1:  0.4rem;
-  --space-2:  0.8rem;
-  --space-3:  1.2rem;
-  --space-4:  1.6rem;
-  --space-5:  2.0rem;
-  --space-6:  2.4rem;
-  --space-7:  3.2rem;
-  --space-8:  4.0rem;
-  --space-9:  4.8rem;
-  --space-10: 6.4rem;
-}
-
 @layer reset {
   
   html, body, main, div, span, object, iframe,

package/src/components/x/scroll.css

@@ -16,12 +16,6 @@ All right reserved.
   .scroll_x-mandatory
 */
 
-:root {
-  --scroll-scrollbar-size: 6px;
-  --scroll-scrollbar-thumb-background: #00000011;
-  --scroll-scrollbar-thumb-background-hover: #00000022;
-}
-
 @layer scroll {
   
   .scroll {

package/src/components/x/slider.css

@@ -7,21 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --slider-point-color: #ffffff66;
-  --slider-point-color-active: #fff;
-  --slider-point-size: .3rem;
-  --slider-indicators-gap: .3rem;
-  --slider-indicators-top: auto;
-  --slider-indicators-left: 1.2rem;
-  --slider-indicators-right: 1.2rem;
-  --slider-indicators-bottom: 1rem;
-  --slider-indicators-width: auto;
-  --slider-indicators-height: var(--slider-point-size);
-  --slider-indicators-init-opacity: 0;
-  --slider-object-fit: cover;
-}
-
 @layer slider {
   
   .slider {

package/src/components/x/typo.css

@@ -9,52 +9,8 @@ All right reserved.
 
 /*
   .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
 */
 
-:root {
-  --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: 3.2rem;
-  --h2-font-size: 2.4rem;
-  --h3-font-size: 2.0rem;
-  --h4-font-size: 1.6rem;
-  --h5-font-size: 1.4rem;
-  --h6-font-size: 1.2rem;
-
-  --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: none;
-  --blockquote-font-style: italic;
-
-  --table-padding: .5em .75em;
-  --table-border: 1px solid #e4e4e4;
-  --table-caption-font-weight: 700;
-  --table-header-font-weight: 700;
-}
-
 @layer typo {
   
   /* !- Headers */
@@ -187,106 +143,4 @@ All right reserved.
     }
   }
   
-  
-  /* !- 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) }
-    }
-    @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 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) {
-    @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 {
-    .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: 1024px) {
-    @for $i from 0 to 4 {
-      .l\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
-    }
-  }
-  @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 {
-    .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) }
-    }
-  }
-
 }