@andreyshpigunov/x 0.5.1 → 0.5.3

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

package/src/components/x/dropdown.css

@@ -14,6 +14,7 @@ All right reserved.
   --dropdown-padding: .8rem;
   --dropdown-max-width: 28rem;
   --dropdown-item-padding: .6rem 2.4rem .6rem 1.2rem;
+  --dropdown-item-font-size: inherit;
   --dropdown-item-font-color: black;
   --dropdown-item-font-color-hover: black;
   --dropdown-item-background-color: white;
@@ -131,6 +132,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/helpers.css

@@ -101,6 +101,14 @@ 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
 */
 
@@ -1094,6 +1102,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/typo.css

@@ -9,14 +9,6 @@ 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 {
@@ -187,106 +179,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) }
-    }
-  }
-
 }

package/src/css/x.css

@@ -7,10 +7,11 @@ All right reserved.
 ----------------------------------------*/
 
 
-@layer reset, space, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, typo, helpers, colors;
+@layer reset, space, typo, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, helpers, colors;
 
 @import "../components/x/reset.css";
 @import "../components/x/space.css";
+@import "../components/x/typo.css";
 @import "../components/x/links.css";
 @import "../components/x/grid.css";
 @import "../components/x/flex.css";
@@ -25,7 +26,6 @@ All right reserved.
 /* @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";
 
@@ -187,6 +187,14 @@ 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
 */
 
@@ -222,12 +230,4 @@ 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
 */

package/src/js/app.js

@@ -31,7 +31,7 @@ window.element3 = (params) => {
 }
 window.headerAnimation = (params) => {
   // console.log(x.device.size.s);
-  let _height = 100;
+  let _height = (x.device.size.xs || x.device.size.s) ? 100 : 120;
   // console.log(_height);
   let header = x.qs('.header');
   let headerLogo = x.qs('.header-logo img');
@@ -44,4 +44,4 @@ window.headerAnimation = (params) => {
 
 window.onload = () => {
   x.lib.transitionsOn()
-}
+}