@andreyshpigunov/x 0.3.89 → 0.4.1

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;
@@ -78,131 +78,130 @@ All right reserved.
 
 
 .header {
-    z-index: 100;
-    height: 100px;
-    will-change: height;
-    
-    @media (--medium) {
-        height: 120px;
-    }
+  z-index: 100;
+  height: 100px;
+  will-change: height;
+  
+  @media (min-width: 768px) {
+      height: 120px;
+  }
 }
 .header_compact {
     
 }
 .header-version {
-    width: 40px;
-    font-weight: 700;
+  width: 40px;
+  font-weight: 700;
 }
 .header-logo {
-    transform-origin: top;
+  transform-origin: top;
+  
+  & a {
+    display: block;
+  }
+  & img {
+    max-width: 100px;
+    will-change: transform;
     
-    & a {
-        display: block;
-    }
-    & img {
-        max-width: 100px;
-        will-change: transform;
-        
-        @media (--medium) {
-            max-width: 120px;
-        }
+    @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;
-        
-        @media (prefers-color-scheme: dark) {
-            background-image: url('../assets/github-mark-white.png');
-        }
+  & a {
+    display: block;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../img/github-mark.png);
+
+    @media (prefers-color-scheme: dark) {
+      background-image: url(../img/github-mark-white.png);
     }
+  }
 }
 
 .modalNavigation {
-    z-index: 10;
+  z-index: 10;
 }
 .modalNavigation-inner {
-    display: flex;
-    gap: 10px;
-    padding: 10px 0;
+  display: flex;
+  gap: 10px;
+  padding: 10px 0;
 }
 .modalNavigation a {
-    cursor: pointer;
-    padding: 4px 14px;
-    color: #000;
-    background: #fff;
-    border: solid 1px #000;
-    border-radius: 100px;
+  cursor: pointer;
+  padding: 4px 14px;
+  color: #000;
+  background: #fff;
+  border: solid 1px #000;
+  border-radius: 100px;
+  
+  &.active {
+    color: #fff;
+    background: #000;
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    color: #eee;
+    background: #222;
+    border: solid 1px #222;
     
     &.active {
-        color: #fff;
-        background: #000;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-        color: #eee;
-        background: #222;
-        border: solid 1px #222;
-        
-        &.active {
-            color: #000;
-            background: #fff;
-        }
+      color: #000;
+      background: #fff;
     }
+  }
 }
 
 
 code {
-    padding: 2px;
-    font-size: var(--code-font-size);
-    color: var(--code-font-color);
-    background: var(--code-background-color);
+  padding: 2px;
+  font-size: var(--code-font-size);
+  color: var(--code-font-color);
+  background: var(--code-background-color);
 }
 .codeBlock {
-    position: relative;
-    padding: 16px 20px 16px 10px;
-    background: var(--code-background-color);
-    counter-reset: row 0;
-    border-radius: 8px;
+  position: relative;
+  padding: 16px 20px 16px 10px;
+  background: var(--code-background-color);
+  counter-reset: row 0;
+  border-radius: 8px;
+  
+  &:before {
+    content: '</>';
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    letter-spacing: 1px;
+    line-height: 1;
+    font-weight: 500;
+    font-size: 18px;
+    font-family: var(--font-family-mono);
+    color: #ccc;
+  }
+  
+  & code {
+    display: flex;
+    counter-increment: row 1;
+    line-height: 1.4;
     
     &:before {
-        content: '</>';
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        letter-spacing: 1px;
-        line-height: 1;
-        font-weight: 500;
-        font-size: 18px;
-        font-family: var(--font-family-mono);
-        color: #ccc;
-    }
-    
-    & code {
-        display: flex;
-        counter-increment: row 1;
-        line-height: 1.4;
-        
-        &:before {
-            content: counter(row);
-            user-select: none;
-            width: 30px;
-            margin-right: 20px;
-            color: #ccc;
-            text-align: right;
-        }
+      content: counter(row);
+      user-select: none;
+      width: 30px;
+      margin-right: 20px;
+      color: #ccc;
+      text-align: right;
     }
+  }
 }
 
 .button code {
-    color: inherit;
-    background: inherit;
+  color: inherit;
+  background: inherit;
 }
 
 

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
 */