@andreyshpigunov/x 0.4.4 → 0.5.1

package/src/components/x/reset.css

@@ -45,176 +45,180 @@ All right reserved.
   --space-10: 6.4rem;
 }
 
-html, body, main, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center, dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline;
-  box-sizing: border-box;
-}
-:before,
-:after {
-  box-sizing: border-box;
-}
-html,
-body {
-  min-width: 320px;
-  min-height: 100vh;
-  max-height: none;
-}
-html {
-  line-height: var(--line-height);
-  font-family: var(--font-family);
-  font-size: calc(var(--font-size-base) * var(--font-scale));
-  background-color: var(--background-color);
-  font-synthesis: initial;
-  text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: #00000000;
-  font-feature-settings: 'liga', 'kern';
-  color: var(--font-color);
-  scroll-behavior: smooth;
-  scroll-padding-top: 10vh;
-  scroll-padding-bottom: 10vh;
-
-  /* !- Scaling */
-  &.scale5n { --font-scale: 0.75 }
-  &.scale4n { --font-scale: 0.80 }
-  &.scale3n { --font-scale: 0.85 }
-  &.scale2n { --font-scale: 0.90 }
-  &.scale1n { --font-scale: 0.95 }
-  &.scale0  { --font-scale: 1.00 }
-  &.scale1  { --font-scale: 1.05 }
-  &.scale2  { --font-scale: 1.10 }
-  &.scale3  { --font-scale: 1.15 }
-  &.scale4  { --font-scale: 1.20 }
-  &.scale5  { --font-scale: 1.25 }
+@layer reset {
   
-  &.no-transitions * {
-    transition: none !important;
+  html, body, main, div, span, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center, dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
   }
-}
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
+  :before,
+  :after {
+    box-sizing: border-box;
   }
-}
-body {
-  font-size: var(--font-size);
-}
-blockquote, q {
-  quotes: none;
+  html,
+  body {
+    min-width: 320px;
+    min-height: 100vh;
+    max-height: none;
+  }
+  html {
+    line-height: var(--line-height);
+    font-family: var(--font-family);
+    font-size: calc(var(--font-size-base) * var(--font-scale));
+    background-color: var(--background-color);
+    font-synthesis: initial;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: #00000000;
+    font-feature-settings: 'liga', 'kern';
+    color: var(--font-color);
+    scroll-behavior: smooth;
+    scroll-padding-top: 10vh;
+    scroll-padding-bottom: 10vh;
   
-  &:before,
-  &:after {
-    content: none;
+    /* !- Scaling */
+    &.scale5n { --font-scale: 0.75 }
+    &.scale4n { --font-scale: 0.80 }
+    &.scale3n { --font-scale: 0.85 }
+    &.scale2n { --font-scale: 0.90 }
+    &.scale1n { --font-scale: 0.95 }
+    &.scale0  { --font-scale: 1.00 }
+    &.scale1  { --font-scale: 1.05 }
+    &.scale2  { --font-scale: 1.10 }
+    &.scale3  { --font-scale: 1.15 }
+    &.scale4  { --font-scale: 1.20 }
+    &.scale5  { --font-scale: 1.25 }
+    
+    &.no-transitions * {
+      transition: none !important;
+    }
   }
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  & tr td,
-  & tr th {
-    vertical-align: top;
-    text-align: left;
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
   }
-}
-input[type=button],
-input[type=submit],
-input[type=reset],
-input[type=radio],
-input[type=checkbox],
-select, button {
-  cursor: pointer;
-}
-input, textarea,
-select, button {
-  margin: 0;
-}
-textarea {
-  line-height: var(--line-height);
-}
-a, button, .button,
-input[type=button] {
-  touch-action: manipulation;
-}
-:focus {
-  outline: 0;
-}
-:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-[hidden] {
-  display: none !important;
-}
-hr {
-  display: block;
-  height: .1rem;
-  margin: 1.6rem 0;
-  border: none;
-  background-color: #88888822;
-}
-sup, sub {
-  position: relative;
-  top: -.8em;
-  font-size: 1.1em;
-}
-sub {
-  top: auto;
-  bottom: -.8em;
-}
-mark {
-  margin: 0 -.4em;
-  padding: 0 .4em;
-  background-color: #fe0;
-}
-code, kbd, samp {
-  font-family: var(--font-family-mono);
-}
-strong, b {
-  font-weight: 700;
-}
-em, i, var, dfn, cite {
-  font-style: italic;
-}
-ins, u {
-  text-decoration: underline;
-}
-del, s {
-  text-decoration: line-through;
-}
-img {
-  display: block;
-  width: auto;
-  height: auto;
-  max-width: 100%;
-}
-ul.reset,
-ol.reset {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  body {
+    font-size: var(--font-size);
+  }
+  blockquote, q {
+    quotes: none;
+    
+    &:before,
+    &:after {
+      content: none;
+    }
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
   
-  & > li {
+    & tr td,
+    & tr th {
+      vertical-align: top;
+      text-align: left;
+    }
+  }
+  input[type=button],
+  input[type=submit],
+  input[type=reset],
+  input[type=radio],
+  input[type=checkbox],
+  select, button {
+    cursor: pointer;
+  }
+  input, textarea,
+  select, button {
+    margin: 0;
+  }
+  textarea {
+    line-height: var(--line-height);
+  }
+  a, button, .button,
+  input[type=button] {
+    touch-action: manipulation;
+  }
+  :focus {
+    outline: 0;
+  }
+  :focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  [hidden] {
+    display: none !important;
+  }
+  hr {
+    display: block;
+    height: .1rem;
+    margin: 1.6rem 0;
+    border: none;
+    background-color: #88888822;
+  }
+  sup, sub {
+    position: relative;
+    top: -.8em;
+    font-size: 1.1em;
+  }
+  sub {
+    top: auto;
+    bottom: -.8em;
+  }
+  mark {
+    margin: 0 -.4em;
+    padding: 0 .4em;
+    background-color: #fe0;
+  }
+  code, kbd, samp {
+    font-family: var(--font-family-mono);
+  }
+  strong, b {
+    font-weight: 700;
+  }
+  em, i, var, dfn, cite {
+    font-style: italic;
+  }
+  ins, u {
+    text-decoration: underline;
+  }
+  del, s {
+    text-decoration: line-through;
+  }
+  img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+  }
+  ul.reset,
+  ol.reset {
     margin: 0;
     padding: 0;
+    list-style: none;
+    
+    & > li {
+      margin: 0;
+      padding: 0;
+    }
   }
-}
-pre {
-  font-family: var(--font-family-mono);
-  white-space: pre-wrap;
+  pre {
+    font-family: var(--font-family-mono);
+    white-space: pre-wrap;
+  }
+
 }

package/src/components/x/scroll.css

@@ -9,9 +9,11 @@ All right reserved.
 
 /*
   .scroll
-  .scroll--contain
-  .scroll--x-proximity
-  .scroll--x-mandatory
+  .scroll_x
+  .scroll_y
+  .scroll_contain
+  .scroll_x-proximity
+  .scroll_x-mandatory
 */
 
 :root {
@@ -20,79 +22,83 @@ All right reserved.
   --scroll-scrollbar-thumb-background-hover: #00000022;
 }
 
-.scroll {
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  /* Hide scrollbar in IE and Edge */
-  -ms-overflow-style: none;
-  /* Hide scrollbar in Firefox */
-  scrollbar-width: none;
-  touch-action: pan-x;
-
-  &::-webkit-scrollbar {
-    width: var(--scroll-scrollbar-size);
-    height: var(--scroll-scrollbar-size);
+@layer scroll {
+  
+  .scroll {
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* Hide scrollbar in IE and Edge */
+    -ms-overflow-style: none;
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+    touch-action: pan-x;
+  
+    &::-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;
+    }
   }
-
-  &::-webkit-scrollbar-track {
-    background-color: none;
-    border-radius: var(--scroll-scrollbar-size);
+  
+  .scroll_x {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    touch-action: pan-x;
   }
-
-  &::-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;
+  
+  .scroll_y {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    touch-action: pan-y;
   }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scroll-scrollbar-thumb-background-hover);
+  
+  .scroll_contain {
+    overscroll-behavior: contain;
   }
-
-  &::-webkit-scrollbar-button,
-  &::-webkit-scrollbar-track-piece,
-  &::-webkit-scrollbar-corner,
-  &::-webkit-resizer {
-    display: none;
-  }
-}
-
-.scroll.scroll--x {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  touch-action: pan-x;
-}
-
-.scroll.scroll--y {
-  overflow-x: hidden;
-  overflow-y: scroll;
-  touch-action: pan-y;
-}
-
-.scroll--contain {
-  overscroll-behavior: contain;
-}
-
-.scroll--x-proximity {
-  scroll-snap-type: x proximity;
-}
-.scroll--x-mandatory {
-  scroll-snap-type: x mandatory;
-}
-
-.scroll--x-proximity,
-.scroll--x-mandatory {
-  & > * {
-    scroll-snap-align: start;
+  
+  .scroll_x-proximity {
+    scroll-snap-type: x proximity;
   }
-  &.scroll--align-center > * {
-    scroll-snap-align: center;
+  .scroll_x-mandatory {
+    scroll-snap-type: x mandatory;
   }
-  &.scroll--align-end > * {
-    scroll-snap-align: end;
+  
+  .scroll_x-proximity,
+  .scroll_x-mandatory {
+    & > * {
+      scroll-snap-align: start;
+    }
+    &.scroll_align-center > * {
+      scroll-snap-align: center;
+    }
+    &.scroll_align-end > * {
+      scroll-snap-align: end;
+    }
   }
+
 }

package/src/components/x/sheets.css

@@ -7,6 +7,10 @@ All right reserved.
 ----------------------------------------*/
 
 
-[x-sheet]:not(.active) {
-  display: none;
+@layer sheets {
+
+  [x-sheet]:not(.active) {
+    display: none;
+  }
+
 }

package/src/components/x/slider.css

@@ -22,74 +22,78 @@ All right reserved.
   --slider-object-fit: cover;
 }
 
-.slider {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  touch-action: auto; /* по умолчанию не блокируем жесты; класс `.slider_touch` включает pan-y */
-  overscroll-behavior: contain;    /* не отдаём overscroll родителю */
-}
-.slider_touch {
-  touch-action: pan-y;  /* разрешаем только вертикальные жесты браузеру */
-}
-.slider-wrapper {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-  will-change: transform;
-  transform: translateZ(0); /* создаёт отдельный композитный слой */
-  backface-visibility: hidden;
-}
-.slider-item {
-  display: flex;
-  position: relative;
-  min-width: 100%;
-  flex: 0 0 100%,
-}
-.slider-item a {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.slider-item img {
-  width: 100%;
-  max-width: none;
-  height: 100%;
-  object-fit: var(--slider-object-fit);
-  pointer-events: auto;
-}
-.slider-indicators {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: var(--slider-indicators-left);
-  right: var(--slider-indicators-right);
-  top: var(--slider-indicators-top);
-  bottom: var(--slider-indicators-bottom);
-  width: var(--slider-indicators-width);
-  height: var(--slider-indicators-height);
-  gap: var(--slider-indicators-gap);
-  opacity: var(--slider-indicators-init-opacity);
-  will-change: opacity;
-  transition: opacity .2s ease-out;
-  pointer-events: none;
-}
-.slider-indicators span {
-  display: flex;
-  flex: 1;
-  width: var(--slider-point-size);
-  min-width: var(--slider-point-size);
-  height: var(--slider-point-size);
-  border-radius: var(--slider-point-size);
-  background: var(--slider-point-color);
-  transition: background .1s ease-out;
-}
-.slider-indicators span.active {
-  background: var(--slider-point-color-active);
-}
-html.touch .slider .slider-indicators,
-.slider:hover .slider-indicators {
-  opacity: 1;
+@layer slider {
+  
+  .slider {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    touch-action: auto; /* по умолчанию не блокируем жесты; класс `.slider_touch` включает pan-y */
+    overscroll-behavior: contain;    /* не отдаём overscroll родителю */
+  }
+  .slider_touch {
+    touch-action: pan-y;  /* разрешаем только вертикальные жесты браузеру */
+  }
+  .slider-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
+    will-change: transform;
+    transform: translateZ(0); /* создаёт отдельный композитный слой */
+    backface-visibility: hidden;
+  }
+  .slider-item {
+    display: flex;
+    position: relative;
+    min-width: 100%;
+    flex: 0 0 100%,
+  }
+  .slider-item a {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .slider-item img {
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    object-fit: var(--slider-object-fit);
+    pointer-events: auto;
+  }
+  .slider-indicators {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: var(--slider-indicators-left);
+    right: var(--slider-indicators-right);
+    top: var(--slider-indicators-top);
+    bottom: var(--slider-indicators-bottom);
+    width: var(--slider-indicators-width);
+    height: var(--slider-indicators-height);
+    gap: var(--slider-indicators-gap);
+    opacity: var(--slider-indicators-init-opacity);
+    will-change: opacity;
+    transition: opacity .2s ease-out;
+    pointer-events: none;
+  }
+  .slider-indicators span {
+    display: flex;
+    flex: 1;
+    width: var(--slider-point-size);
+    min-width: var(--slider-point-size);
+    height: var(--slider-point-size);
+    border-radius: var(--slider-point-size);
+    background: var(--slider-point-color);
+    transition: background .1s ease-out;
+  }
+  .slider-indicators span.active {
+    background: var(--slider-point-color-active);
+  }
+  html.touch .slider .slider-indicators,
+  .slider:hover .slider-indicators {
+    opacity: 1;
+  }
+
 }