@andreyshpigunov/x 0.5.21 → 0.5.22

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.21</div>
+    <div class="header-version nowrap">0.5.22</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.21",
+  "version": "0.5.22",
   "x-js": "dist/x.js",
   "app-js": "assets/js/app.js",
   "targets": {

package/src/components/x/helpers.css

@@ -27,15 +27,16 @@ All right reserved.
   .fix
   .rel
   .abs
-  .ins
+  .inset
+  .fill
   .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)
+  .t[0-9][n]   (s,m,l,xl)
+  .b[0-9][n]   (s,m,l,xl)
+  .l[0-9][n]   (s,m,l,xl)
+  .r[0-9][n]   (s,m,l,xl)
+  .z[0-9]   (s,m,l,xl)
   .op[0-10]
   .ratio1x1  (s,m,l,xl)
   .ratio2x1  (s,m,l,xl)
@@ -103,8 +104,8 @@ All right reserved.
   .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)
+  .sh[0-5]  (s,m,l,xl)
+  .o[0-9]   (s,m,l,xl)
   .mono
   .italic
   .strike
@@ -248,7 +249,7 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Top, bottom, left, right, z-index */
-@for $i from 0 to 12 {
+@for $i from 0 to 9 {
   .t$(i) { top: var(--space-$(i)) }
   .b$(i) { bottom: var(--space-$(i)) }
   .l$(i) { left: var(--space-$(i)) }
@@ -260,7 +261,7 @@ html.touch .touch-hide { display: none }
   .z$(i) { z-index: $(i) }
 }
 @media (min-width: 640px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .s\:t$(i) { top: var(--space-$(i)) }
     .s\:b$(i) { bottom: var(--space-$(i)) }
     .s\:l$(i) { left: var(--space-$(i)) }
@@ -273,7 +274,7 @@ html.touch .touch-hide { display: none }
   }
 }
 @media (min-width: 768px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .m\:t$(i) { top: var(--space-$(i)) }
     .m\:b$(i) { bottom: var(--space-$(i)) }
     .m\:l$(i) { left: var(--space-$(i)) }
@@ -286,7 +287,7 @@ html.touch .touch-hide { display: none }
   }
 }
 @media (min-width: 1024px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .l\:t$(i) { top: var(--space-$(i)) }
     .l\:b$(i) { bottom: var(--space-$(i)) }
     .l\:l$(i) { left: var(--space-$(i)) }
@@ -299,7 +300,7 @@ html.touch .touch-hide { display: none }
   }
 }
 @media (min-width: 1280px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .xl\:t$(i) { top: var(--space-$(i)) }
     .xl\:b$(i) { bottom: var(--space-$(i)) }
     .xl\:l$(i) { left: var(--space-$(i)) }
@@ -697,7 +698,7 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Margin */
-@for $i from 0 to 12 {
+@for $i from 0 to 9 {
   .m$(i)  { margin: var(--space-$(i)) }
   .mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
   .my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
@@ -729,7 +730,7 @@ html.touch .touch-hide { display: none }
 .mra { margin-right: auto }
 
 @media (min-width: 640px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .s\:m$(i)  { margin: var(--space-$(i)) }
     .s\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
     .s\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
@@ -762,7 +763,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 768px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .m\:m$(i)  { margin: var(--space-$(i)) }
     .m\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
     .m\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
@@ -795,7 +796,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 1024px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .l\:m$(i)  { margin: var(--space-$(i)) }
     .l\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
     .l\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
@@ -828,7 +829,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 1280px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .xl\:m$(i)  { margin: var(--space-$(i)) }
     .xl\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
     .xl\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
@@ -862,7 +863,7 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Padding */
-@for $i from 0 to 12 {
+@for $i from 0 to 9 {
   .p$(i)  { padding: var(--space-$(i)) }
   .px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
   .py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
@@ -873,7 +874,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 640px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .s\:p$(i)  { padding: var(--space-$(i)) }
     .s\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
     .s\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
@@ -885,7 +886,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 768px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .m\:p$(i)  { padding: var(--space-$(i)) }
     .m\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
     .m\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
@@ -897,7 +898,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 1024px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .l\:p$(i)  { padding: var(--space-$(i)) }
     .l\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
     .l\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
@@ -909,7 +910,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 1280px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .xl\:p$(i)  { padding: var(--space-$(i)) }
     .xl\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
     .xl\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
@@ -922,14 +923,14 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Gap */
-@for $i from 0 to 12 {
+@for $i from 0 to 9 {
   .gap$(i) { gap: var(--space-$(i)) }
   .gapx$(i) { column-gap: var(--space-$(i)) }
   .gapy$(i) { row-gap: var(--space-$(i)) }
 }
 
 @media (min-width: 640px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .s\:gap$(i) { gap: var(--space-$(i)) }
     .s\:gapx$(i) { column-gap: var(--space-$(i)) }
     .s\:gapy$(i) { row-gap: var(--space-$(i)) }
@@ -937,7 +938,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 768px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .m\:gap$(i) { gap: var(--space-$(i)) }
     .m\:gapx$(i) { column-gap: var(--space-$(i)) }
     .m\:gapy$(i) { row-gap: var(--space-$(i)) }
@@ -945,7 +946,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 1024px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .l\:gap$(i) { gap: var(--space-$(i)) }
     .l\:gapx$(i) { column-gap: var(--space-$(i)) }
     .l\:gapy$(i) { row-gap: var(--space-$(i)) }
@@ -953,7 +954,7 @@ html.touch .touch-hide { display: none }
 }
 
 @media (min-width: 1280px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .xl\:gap$(i) { gap: var(--space-$(i)) }
     .xl\:gapx$(i) { column-gap: var(--space-$(i)) }
     .xl\:gapy$(i) { row-gap: var(--space-$(i)) }
@@ -962,34 +963,34 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Border radius */
-@for $i from 0 to 12 {
+@for $i from 0 to 9 {
   .br$(i) { border-radius: var(--space-$(i)) }
 }
 .br100 { border-radius: 100% }
 
 @media (min-width: 640px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .s\:br$(i) { border-radius: var(--space-$(i)) }
   }
   .s\:br100 { border-radius: 100% }
 }
 
 @media (min-width: 768px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .m\:br$(i) { border-radius: var(--space-$(i)) }
   }
   .m\:br100 { border-radius: 100% }
 }
 
 @media (min-width: 1024px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .l\:br$(i) { border-radius: var(--space-$(i)) }
   }
   .l\:br100 { border-radius: 100% }
 }
 
 @media (min-width: 1280px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .xl\:br$(i) { border-radius: var(--space-$(i)) }
   }
   .xl\:br100 { border-radius: 100% }
@@ -1067,26 +1068,26 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Order */
-@for $i from 0 to 12 {
+@for $i from 0 to 9 {
   .o$(i) { order: $(i) }
 }
 @media (min-width: 640px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .s\:o$(i) { order: $(i) }
   }
 }
 @media (min-width: 768px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .m\:o$(i) { order: $(i) }
   }
 }
 @media (min-width: 1024px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .l\:o$(i) { order: $(i) }
   }
 }
 @media (min-width: 1280px) {
-  @for $i from 0 to 12 {
+  @for $i from 0 to 9 {
     .xl\:o$(i) { order: $(i) }
   }
 }

package/src/components/x/space.css

@@ -8,17 +8,17 @@ All right reserved.
 
 
 /*
-  .space[0-10] (s,m,l,xl)   - vertical space
+  .space[0-9] (s,m,l,xl)   - vertical space
 */
 
-@for $i from 0 to 10 {
+@for $i from 0 to 9 {
   .space$(i) {
     height: var(--space-$(i));
   }
 }
 
 @media (min-width: 640px) {
-  @for $i from 0 to 10 {
+  @for $i from 0 to 9 {
     .s\:space$(i) {
       height: var(--space-$(i));
     }
@@ -26,7 +26,7 @@ All right reserved.
 }
 
 @media (min-width: 768px) {
-  @for $i from 0 to 10 {
+  @for $i from 0 to 9 {
     .m\:space$(i) {
       height: var(--space-$(i));
     }
@@ -34,7 +34,7 @@ All right reserved.
 }
 
 @media (min-width: 1024px) {
-  @for $i from 0 to 10 {
+  @for $i from 0 to 9 {
     .l\:space$(i) {
       height: var(--space-$(i));
     }
@@ -42,7 +42,7 @@ All right reserved.
 }
 
 @media (min-width: 1280px) {
-  @for $i from 0 to 10 {
+  @for $i from 0 to 9 {
     .xl\:space$(i) {
       height: var(--space-$(i));
     }

package/src/components/x/variables.css

@@ -25,12 +25,11 @@ All right reserved.
   --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;
+  --space-5:  2.4rem;
+  --space-6:  3.2rem;
+  --space-7:  4.8rem;
+  --space-8:  6.4rem;
+  --space-9:  8.0rem;
   
   --headers-margin-top: 1em;
   --headers-margin-bottom: .5em;
@@ -39,15 +38,15 @@ All right reserved.
   --headers-font-color: var(--font-color);
   
   --h1-font-size: 3.6rem;
-  --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;
+  --h2-font-size: 2.8rem;
+  --h3-font-size: 2.2rem;
+  --h4-font-size: 1.8rem;
+  --h5-font-size: 1.6rem;
+  --h6-font-size: 1.4rem;
   
   --h1-line-height: 1.2;
-  --h2-line-height: 1.3;
-  --h3-line-height: 1.4;
+  --h2-line-height: 1.25;
+  --h3-line-height: 1.3;
   
   --paragraph-margin: 1em;
   
@@ -68,17 +67,12 @@ All right reserved.
   
   --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;
-  
+  --shadow-1: 0 1px 2px #00000012, 0 1px 1px #0000000a;
+  --shadow-2: 0 2px 6px #00000014, 0 1px 2px #0000000c;
+  --shadow-3: 0 6px 16px #00000016, 0 2px 4px #0000000c;
+  --shadow-4: 0 12px 32px #00000018, 0 4px 8px #0000000e;
+  --shadow-5: 0 20px 48px #0000001a, 0 8px 16px #00000010;
+
   --link-color: #0060cc;
   --link-decoration-line: underline;
   --link-decoration-style: solid;