@andreyshpigunov/x 0.5.0 → 0.5.1

package/src/components/x/dropdown.css

@@ -21,143 +21,147 @@ All right reserved.
   --dropdown-divider-color: var(--color-grey);
 }
 
-[x-dropdown] {
-  display: none;
-  list-style: none;
-  position: absolute;
-  top: 100%;
-  z-index: 1000;
-  opacity: 0;
-  min-width: 22rem;
-  max-width: var(--dropdown-max-width);
-  max-height: clamp(0px, 80vh, 500px);
-  overflow: auto;
-  list-style: none;
-  padding: var(--dropdown-padding);
-  margin: 0;
-  background-color: var(--dropdown-backgroud-color);
-  border: none;
-  box-shadow: var(--dropdown-box-shadow);
-  border-radius: var(--dropdown-border-radius);
-  transform: scale(.95);
-  transform-origin: top;
-  transition: opacity .15s ease-out,
-              transform .15s ease-out;
-  pointer-events: none;
-  overscroll-behavior: contain;
+@layer dropdown {
   
-  @media (min-width: 768px) {
-    max-width: calc(var(--dropdown-max-width) * 1.2);
-  }
-  
-  & > li {
-    margin: 0;
-  }
-  
-  &::-webkit-scrollbar {
-    width: var(--scroll-scrollbar-size);
-    height: var(--scroll-scrollbar-size);
-  }
-  
-  &::-webkit-scrollbar-track {
-    background-color: none;
-    border-radius: var(--scroll-scrollbar-size);
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    border-radius: var(--scroll-scrollbar-size);
-    background-color: var(--scroll-scrollbar-thumb-background);
-    will-change: background-color;
-    transition: background .2s ease-out;
-    cursor: pointer;
-  }
-  
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scroll-scrollbar-thumb-background-hover);
-  }
-  
-  &::-webkit-scrollbar-button,
-  &::-webkit-scrollbar-track-piece,
-  &::-webkit-scrollbar-corner,
-  &::-webkit-resizer {
+  [x-dropdown] {
     display: none;
-  }
-}
-
-.dropdown {
-  position: relative;
-  
-  &.dropdown_right > [x-dropdown] {
-    right: 0;
-    left: auto;
-  }
-  &.dropdown_bottom > [x-dropdown] {
-    bottom: 100%;
-    top: auto;
-    transform-origin: bottom;
-  }
-  &.dropdown_ready > [x-dropdown] {
-    display: block;
-    pointer-events: auto;
-  }
-  &.dropdown_open > [x-dropdown] {
-    opacity: 1;
-    transform: scale(1);
-  }
-  &.dropdown_wrap > [x-dropdown] li {
-    & > a,
-    & > span {
-      white-space: wrap;
+    list-style: none;
+    position: absolute;
+    top: 100%;
+    z-index: 1000;
+    opacity: 0;
+    min-width: 22rem;
+    max-width: var(--dropdown-max-width);
+    max-height: clamp(0px, 80vh, 500px);
+    overflow: auto;
+    list-style: none;
+    padding: var(--dropdown-padding);
+    margin: 0;
+    background-color: var(--dropdown-backgroud-color);
+    border: none;
+    box-shadow: var(--dropdown-box-shadow);
+    border-radius: var(--dropdown-border-radius);
+    transform: scale(.95);
+    transform-origin: top;
+    transition: opacity .15s ease-out,
+                transform .15s ease-out;
+    pointer-events: none;
+    overscroll-behavior: contain;
+    
+    @media (min-width: 768px) {
+      max-width: calc(var(--dropdown-max-width) * 1.2);
+    }
+    
+    & > li {
+      margin: 0;
+    }
+    
+    &::-webkit-scrollbar {
+      width: var(--scroll-scrollbar-size);
+      height: var(--scroll-scrollbar-size);
+    }
+    
+    &::-webkit-scrollbar-track {
+      background-color: none;
+      border-radius: var(--scroll-scrollbar-size);
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      border-radius: var(--scroll-scrollbar-size);
+      background-color: var(--scroll-scrollbar-thumb-background);
+      will-change: background-color;
+      transition: background .2s ease-out;
+      cursor: pointer;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--scroll-scrollbar-thumb-background-hover);
+    }
+    
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-track-piece,
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+      display: none;
     }
   }
-}
-
-
-[x-dropdown] {
   
-  & li {
+  .dropdown {
+    position: relative;
     
-    &.divider {
-      height: 0;
-      padding: 0;
-      margin: var(--dropdown-padding) calc(-1 * var(--dropdown-padding));
-      border-bottom: 1px solid var(--dropdown-divider-color);
+    &.dropdown_right > [x-dropdown] {
+      right: 0;
+      left: auto;
     }
-    
-    & > a,
-    & > span {
+    &.dropdown_bottom > [x-dropdown] {
+      bottom: 100%;
+      top: auto;
+      transform-origin: bottom;
+    }
+    &.dropdown_ready > [x-dropdown] {
       display: block;
-      padding: var(--dropdown-item-padding);
-      line-height: 1.4;
-      color: var(--dropdown-item-font-color);
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-decoration: none;
-      overflow: hidden;
-      border: none;
-      border-radius: calc(var(--dropdown-border-radius) / 2);
-      background: var(--dropdown-item-background-color);
+      pointer-events: auto;
     }
-    
-    & > a {
-      will-change: color, background, transform;
-      transition: all .1s ease-out;
+    &.dropdown_open > [x-dropdown] {
+      opacity: 1;
       transform: scale(1);
-      transform-origin: bottom center;
+    }
+    &.dropdown_wrap > [x-dropdown] li {
+      & > a,
+      & > span {
+        white-space: wrap;
+      }
+    }
+  }
+  
+  
+  [x-dropdown] {
+    
+    & li {
       
-      &:focus-visible,
-      &.focus-visible,
-      &:hover,
-      &.hover,
-      &:active,
-      &.active {
-        color: var(--dropdown-item-font-color-hover);
-        background: var(--dropdown-item-background-color-hover);
+      &.divider {
+        height: 0;
+        padding: 0;
+        margin: var(--dropdown-padding) calc(-1 * var(--dropdown-padding));
+        border-bottom: 1px solid var(--dropdown-divider-color);
       }
       
-      &:active {
-        transform: scale(.99);
+      & > a,
+      & > span {
+        display: block;
+        padding: var(--dropdown-item-padding);
+        line-height: 1.4;
+        color: var(--dropdown-item-font-color);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-decoration: none;
+        overflow: hidden;
+        border: none;
+        border-radius: calc(var(--dropdown-border-radius) / 2);
+        background: var(--dropdown-item-background-color);
+      }
+      
+      & > a {
+        will-change: color, background, transform;
+        transition: all .1s ease-out;
+        transform: scale(1);
+        transform-origin: bottom center;
+        
+        &:focus-visible,
+        &.focus-visible,
+        &:hover,
+        &.hover,
+        &:active,
+        &.active {
+          color: var(--dropdown-item-font-color-hover);
+          background: var(--dropdown-item-background-color-hover);
+        }
+        
+        &:active {
+          transform: scale(.99);
+        }
       }
     }
   }
+
 }

package/src/components/x/flex.css

@@ -29,168 +29,172 @@ All right reserved.
   .flex > .c[1-12]/[1-12] (s,m,l,xl) - column width "column/columns"
 */
 
-.flex { display: flex }
-
-[class*=flex] {
-  /* Columns */
-  @for $cols from 1 to 12 {
-    @for $col from 1 to $cols {
-      & > .c$(col)\/$(cols) {
-        flex-basis: calc($(col) / $(cols) * 100%);
-        max-width: calc($(col) / $(cols) * 100%);
-      }
-    }
-  }
+@layer flex {
+    
+  .flex { display: flex }
   
-  @media (min-width: 640px) {
+  [class*=flex] {
+    /* Columns */
     @for $cols from 1 to 12 {
       @for $col from 1 to $cols {
-        & > .s\:c$(col)\/$(cols) {
+        & > .c$(col)\/$(cols) {
           flex-basis: calc($(col) / $(cols) * 100%);
           max-width: calc($(col) / $(cols) * 100%);
         }
       }
     }
-  }
-  
-  @media (min-width: 768px) {
-    @for $cols from 1 to 12 {
-      @for $col from 1 to $cols {
-        & > .m\:c$(col)\/$(cols) {
-          flex-basis: calc($(col) / $(cols) * 100%);
-          max-width: calc($(col) / $(cols) * 100%);
+    
+    @media (min-width: 640px) {
+      @for $cols from 1 to 12 {
+        @for $col from 1 to $cols {
+          & > .s\:c$(col)\/$(cols) {
+            flex-basis: calc($(col) / $(cols) * 100%);
+            max-width: calc($(col) / $(cols) * 100%);
+          }
         }
       }
     }
-  }
-  
-  @media (min-width: 1024px) {
-    @for $cols from 1 to 12 {
-      @for $col from 1 to $cols {
-        & > .l\:c$(col)\/$(cols) {
-          flex-basis: calc($(col) / $(cols) * 100%);
-          max-width: calc($(col) / $(cols) * 100%);
+    
+    @media (min-width: 768px) {
+      @for $cols from 1 to 12 {
+        @for $col from 1 to $cols {
+          & > .m\:c$(col)\/$(cols) {
+            flex-basis: calc($(col) / $(cols) * 100%);
+            max-width: calc($(col) / $(cols) * 100%);
+          }
         }
       }
     }
-  }
-  
-  @media (min-width: 1280px) {
-    @for $cols from 1 to 12 {
-      @for $col from 1 to $cols {
-        & > .xl\:c$(col)\/$(cols) {
-          flex-basis: calc($(col) / $(cols) * 100%);
-          max-width: calc($(col) / $(cols) * 100%);
+    
+    @media (min-width: 1024px) {
+      @for $cols from 1 to 12 {
+        @for $col from 1 to $cols {
+          & > .l\:c$(col)\/$(cols) {
+            flex-basis: calc($(col) / $(cols) * 100%);
+            max-width: calc($(col) / $(cols) * 100%);
+          }
+        }
+      }
+    }
+    
+    @media (min-width: 1280px) {
+      @for $cols from 1 to 12 {
+        @for $col from 1 to $cols {
+          & > .xl\:c$(col)\/$(cols) {
+            flex-basis: calc($(col) / $(cols) * 100%);
+            max-width: calc($(col) / $(cols) * 100%);
+          }
         }
       }
     }
   }
-}
-
-.fr  { flex-direction: row }
-.fc  { flex-direction: column }
-.fw  { flex-wrap: wrap }
-.fnw { flex-wrap: nowrap }
-
-.ais  { align-items: stretch }
-.aifs { align-items: flex-start }
-.aic  { align-items: center }
-.aife { align-items: flex-end }
-
-.jcfs { justify-content: flex-start }
-.jcc  { justify-content: center }
-.jcfe { justify-content: flex-end }
-.jcsb { justify-content: space-between }
-.jcsa { justify-content: space-around }
-.jcse { justify-content: space-evenly }
-
-.no-shrink { flex-shrink: 0 }
-.no-grow { flex-grow: 0 }
-
-@media (min-width: 640px) {
-  .s\:fr  { flex-direction: row }
-  .s\:fc  { flex-direction: column }
-  .s\:fw  { flex-wrap: wrap }
-  .s\:fnw { flex-wrap: nowrap }
-  
-  .s\:ais  { align-items: stretch }
-  .s\:aifs { align-items: flex-start }
-  .s\:aic  { align-items: center }
-  .s\:aife { align-items: flex-end }
   
-  .s\:jcfs { justify-content: flex-start }
-  .s\:jcc  { justify-content: center }
-  .s\:jcfe { justify-content: flex-end }
-  .s\:jcsb { justify-content: space-between }
-  .s\:jcsa { justify-content: space-around }
-  .s\:jcse { justify-content: space-evenly }
+  .fr  { flex-direction: row }
+  .fc  { flex-direction: column }
+  .fw  { flex-wrap: wrap }
+  .fnw { flex-wrap: nowrap }
   
-  .s\:no-shrink { flex-shrink: 0 }
-  .s\:no-grow { flex-grow: 0 }
-}
-
-@media (min-width: 768px) {
-  .m\:fr  { flex-direction: row }
-  .m\:fc  { flex-direction: column }
-  .m\:fw  { flex-wrap: wrap }
-  .m\:fnw { flex-wrap: nowrap }
+  .ais  { align-items: stretch }
+  .aifs { align-items: flex-start }
+  .aic  { align-items: center }
+  .aife { align-items: flex-end }
   
-  .m\:ais  { align-items: stretch }
-  .m\:aifs { align-items: flex-start }
-  .m\:aic  { align-items: center }
-  .m\:aife { align-items: flex-end }
+  .jcfs { justify-content: flex-start }
+  .jcc  { justify-content: center }
+  .jcfe { justify-content: flex-end }
+  .jcsb { justify-content: space-between }
+  .jcsa { justify-content: space-around }
+  .jcse { justify-content: space-evenly }
   
-  .m\:jcfs { justify-content: flex-start }
-  .m\:jcc  { justify-content: center }
-  .m\:jcfe { justify-content: flex-end }
-  .m\:jcsb { justify-content: space-between }
-  .m\:jcsa { justify-content: space-around }
-  .m\:jcse { justify-content: space-evenly }
+  .no-shrink { flex-shrink: 0 }
+  .no-grow { flex-grow: 0 }
   
-  .m\:no-shrink { flex-shrink: 0 }
-  .m\:no-grow { flex-grow: 0 }
-}
-
-@media (min-width: 1024px) {
-  .l\:fr  { flex-direction: row }
-  .l\:fc  { flex-direction: column }
-  .l\:fw  { flex-wrap: wrap }
-  .l\:fnw { flex-wrap: nowrap }
+  @media (min-width: 640px) {
+    .s\:fr  { flex-direction: row }
+    .s\:fc  { flex-direction: column }
+    .s\:fw  { flex-wrap: wrap }
+    .s\:fnw { flex-wrap: nowrap }
+    
+    .s\:ais  { align-items: stretch }
+    .s\:aifs { align-items: flex-start }
+    .s\:aic  { align-items: center }
+    .s\:aife { align-items: flex-end }
+    
+    .s\:jcfs { justify-content: flex-start }
+    .s\:jcc  { justify-content: center }
+    .s\:jcfe { justify-content: flex-end }
+    .s\:jcsb { justify-content: space-between }
+    .s\:jcsa { justify-content: space-around }
+    .s\:jcse { justify-content: space-evenly }
+    
+    .s\:no-shrink { flex-shrink: 0 }
+    .s\:no-grow { flex-grow: 0 }
+  }
   
-  .l\:ais  { align-items: stretch }
-  .l\:aifs { align-items: flex-start }
-  .l\:aic  { align-items: center }
-  .l\:aife { align-items: flex-end }
+  @media (min-width: 768px) {
+    .m\:fr  { flex-direction: row }
+    .m\:fc  { flex-direction: column }
+    .m\:fw  { flex-wrap: wrap }
+    .m\:fnw { flex-wrap: nowrap }
+    
+    .m\:ais  { align-items: stretch }
+    .m\:aifs { align-items: flex-start }
+    .m\:aic  { align-items: center }
+    .m\:aife { align-items: flex-end }
+    
+    .m\:jcfs { justify-content: flex-start }
+    .m\:jcc  { justify-content: center }
+    .m\:jcfe { justify-content: flex-end }
+    .m\:jcsb { justify-content: space-between }
+    .m\:jcsa { justify-content: space-around }
+    .m\:jcse { justify-content: space-evenly }
+    
+    .m\:no-shrink { flex-shrink: 0 }
+    .m\:no-grow { flex-grow: 0 }
+  }
   
-  .l\:jcfs { justify-content: flex-start }
-  .l\:jcc  { justify-content: center }
-  .l\:jcfe { justify-content: flex-end }
-  .l\:jcsb { justify-content: space-between }
-  .l\:jcsa { justify-content: space-around }
-  .l\:jcse { justify-content: space-evenly }
+  @media (min-width: 1024px) {
+    .l\:fr  { flex-direction: row }
+    .l\:fc  { flex-direction: column }
+    .l\:fw  { flex-wrap: wrap }
+    .l\:fnw { flex-wrap: nowrap }
+    
+    .l\:ais  { align-items: stretch }
+    .l\:aifs { align-items: flex-start }
+    .l\:aic  { align-items: center }
+    .l\:aife { align-items: flex-end }
+    
+    .l\:jcfs { justify-content: flex-start }
+    .l\:jcc  { justify-content: center }
+    .l\:jcfe { justify-content: flex-end }
+    .l\:jcsb { justify-content: space-between }
+    .l\:jcsa { justify-content: space-around }
+    .l\:jcse { justify-content: space-evenly }
+    
+    .l\:no-shrink { flex-shrink: 0 }
+    .l\:no-grow { flex-grow: 0 }
+  }
   
-  .l\:no-shrink { flex-shrink: 0 }
-  .l\:no-grow { flex-grow: 0 }
-}
+  @media (min-width: 1280px) {
+    .xl\:fr  { flex-direction: row }
+    .xl\:fc  { flex-direction: column }
+    .xl\:fw  { flex-wrap: wrap }
+    .xl\:fnw { flex-wrap: nowrap }
+    
+    .xl\:ais  { align-items: stretch }
+    .xl\:aifs { align-items: flex-start }
+    .xl\:aic  { align-items: center }
+    .xl\:aife { align-items: flex-end }
+    
+    .xl\:jcfs { justify-content: flex-start }
+    .xl\:jcc  { justify-content: center }
+    .xl\:jcfe { justify-content: flex-end }
+    .xl\:jcsb { justify-content: space-between }
+    .xl\:jcsa { justify-content: space-around }
+    .xl\:jcse { justify-content: space-evenly }
+    
+    .xl\:no-shrink { flex-shrink: 0 }
+    .xl\:no-grow { flex-grow: 0 }
+  }
 
-@media (min-width: 1280px) {
-  .xl\:fr  { flex-direction: row }
-  .xl\:fc  { flex-direction: column }
-  .xl\:fw  { flex-wrap: wrap }
-  .xl\:fnw { flex-wrap: nowrap }
-  
-  .xl\:ais  { align-items: stretch }
-  .xl\:aifs { align-items: flex-start }
-  .xl\:aic  { align-items: center }
-  .xl\:aife { align-items: flex-end }
-  
-  .xl\:jcfs { justify-content: flex-start }
-  .xl\:jcc  { justify-content: center }
-  .xl\:jcfe { justify-content: flex-end }
-  .xl\:jcsb { justify-content: space-between }
-  .xl\:jcsa { justify-content: space-around }
-  .xl\:jcse { justify-content: space-evenly }
-  
-  .xl\:no-shrink { flex-shrink: 0 }
-  .xl\:no-grow { flex-grow: 0 }
 }

package/src/components/x/flow.css

@@ -11,47 +11,51 @@ All right reserved.
   .flow.s[0-10] (s,m,l,xl)   - vertical space
 */
 
-.flow {
+@layer flow {
   
-  & > * { margin: 0 }
-  
-  @for $i from 0 to 10 {
-    &.s$(i) > * {
-      margin-bottom: var(--space-$(i));
-    }
-  }
-  
-  @media (min-width: 640px) {
+  .flow {
+    
+    & > * { margin: 0 }
+    
     @for $i from 0 to 10 {
-      &.s\:s$(i) > * {
+      &.s$(i) > * {
         margin-bottom: var(--space-$(i));
       }
     }
-  }
-  
-  @media (min-width: 768px) {
-    @for $i from 0 to 10 {
-      &.m\:s$(i) > * {
-        margin-bottom: var(--space-$(i));
+    
+    @media (min-width: 640px) {
+      @for $i from 0 to 10 {
+        &.s\:s$(i) > * {
+          margin-bottom: var(--space-$(i));
+        }
       }
     }
-  }
-  
-  @media (min-width: 1024px) {
-    @for $i from 0 to 10 {
-      &.l\:s$(i) > * {
-        margin-bottom: var(--space-$(i));
+    
+    @media (min-width: 768px) {
+      @for $i from 0 to 10 {
+        &.m\:s$(i) > * {
+          margin-bottom: var(--space-$(i));
+        }
       }
     }
-  }
-  
-  @media (min-width: 1280px) {
-    @for $i from 0 to 10 {
-      &.xl\:s$(i) > * {
-        margin-bottom: var(--space-$(i));
+    
+    @media (min-width: 1024px) {
+      @for $i from 0 to 10 {
+        &.l\:s$(i) > * {
+          margin-bottom: var(--space-$(i));
+        }
+      }
+    }
+    
+    @media (min-width: 1280px) {
+      @for $i from 0 to 10 {
+        &.xl\:s$(i) > * {
+          margin-bottom: var(--space-$(i));
+        }
       }
     }
+    
+    & > *:last-child { margin-bottom: 0 }
   }
-  
-  & > *:last-child { margin-bottom: 0 }
+
 }