@newlogic-digital/ui 3.3.0 → 3.4.2

package/src/styles/Components/Dialog/Default.css

@@ -1,49 +1,35 @@
 .c-dialog {
-  --c-dialog-py: 1rem;
+  --c-dialog-py: 1.5rem;
   --c-dialog-px: 1.5rem;
-  --c-dialog-offset-y: 2rem;
+  --c-dialog-width: 40rem;
+  --c-dialog-animation-duration: 0.3s;
 
-  animation: 0.3s ease 0s backwards 1 fade-in-down;
+  animation: var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;
   position: relative;
-  z-index: var(--z-30);
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
-  margin-right: auto;
-  pointer-events: none;
-  min-height: 100%;
-  align-self: baseline;
-  border-top: var(--c-dialog-offset-y) solid transparent;
-  border-bottom: var(--c-dialog-offset-y) solid transparent;
-  width: calc(100% - 2rem);
+  z-index: var(--z-20);
+  margin: auto;
+  background-color: rgb(var(--color-background));
+  width: 100%;
+  max-width: var(--c-dialog-width);
+  border-radius: var(--rounded-md);
+  padding: var(--c-dialog-py) var(--c-dialog-px);
 
-  @nest :--state-hiding & {
-    animation: 0.3s ease 0s forwards 1 fade-out-up;
-  }
-
-  @media (--media-t) {
-    --c-dialog-offset-y: 4rem;
-
-    width: 100%;
-    min-width: 18.75rem;
-    max-width: 40rem;
+  @nest dialog:not([open]) & {
+    animation: var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up;
   }
 
   &:--size-sm {
-    max-width: 31.25rem;
-  }
-
-  &:--size-base {
-    max-width: none;
-    width: auto;
+    --c-dialog-width: 32rem;
   }
 
   &:--size-lg {
-    max-width: 80rem;
+    --c-dialog-width: 80rem;
   }
 
   &:--type-scrollable {
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     & .wrp_dialog_body {
       flex: 1 1 auto;
@@ -54,25 +40,4 @@
       -webkit-overflow-scrolling: touch;
     }
   }
-
-  & .wrp_dialog {
-    position: relative;
-    background-color: rgb(var(--color-background));
-    pointer-events: auto;
-    border-radius: var(--radius);
-    padding: var(--c-dialog-py) var(--c-dialog-px);
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-
-    @media (--media-t) {
-      --c-dialog-py: 1.25rem;
-    }
-  }
-
-  & .elm_dialog_close {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-  }
 }

package/src/styles/Layout/Main.css

@@ -4,26 +4,22 @@ html {
   scroll-behavior: smooth;
   accent-color: rgb(var(--color-accent));
 
-  @media (--media-min-400) {
+  @media (--media-sm) {
     font-size: 95%;
   }
 
-  @media (--media-min-768) {
+  @media not all and (--media-sm), (--media-md) {
     font-size: 90%;
   }
 
-  @media (--media-min-1360) {
+  @media (--media-2xl) {
     font-size: 100%;
   }
 
-  @media (--media-only-960) {
+  @media (max-width: 64em) and (--media-lg) {
     font-size: 80%;
   }
 
-  @media (--media-360) {
-    font-size: 90%;
-  }
-
   &.no-touch, &.no-touch * {
     scrollbar-color: rgb(var(--color-current) / 0.2) rgb(var(--color-background));
     scrollbar-width: thin;
@@ -97,15 +93,3 @@ body {
     }
   }
 }
-
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--container-width);
-  padding-left: var(--container-padding);
-  padding-right: var(--container-padding);
-
-  &:--size-sm {
-    --container: var(--container-width-sm);
-  }
-}

package/src/styles/Libraries/Dialog.css

@@ -1,19 +1,35 @@
 .lib-dialog {
-  --lib-dialog-bg: var(--color-dark);
-  --lib-dialog-opacity: 0.8;
+  --lib-ripple-bg: rgb(var(--color-dark) / var(--tw-bg-opacity, 0.8));
+  --lib-dialog-py: 2rem;
+  --lib-dialog-px: 1.5rem;
+  --lib-dialog-animation-duration: 0.3s;
 
-  animation: 0.3s ease 0s backwards 1 fade-in;
   inset: 0;
   z-index: var(--z-30);
   position: fixed;
-  display: none;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));
+  background-color: var(--lib-ripple-bg);
   overscroll-behavior: contain;
+  display: flex;
+  visibility: hidden;
+  padding: var(--lib-dialog-py) var(--lib-dialog-px);
 
-  &:--state-hiding {
-    animation: 0.3s ease 0s forwards 1 fade-out;
+  &:not([open]) {
+    animation: var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;
     pointer-events: none;
   }
+
+  &[open] {
+    animation: var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in;
+  }
+
+  @nest .is-lib-dialog-open & {
+    visibility: visible;
+  }
+}
+
+.is-lib-dialog-open {
+  overflow: hidden;
+  padding-right: var(--lib-dialog-scrollbar-width, 0);
 }

package/src/styles/Libraries/Drawer.css

@@ -5,10 +5,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: hidden;
   display: flex;
   flex-direction: row;
@@ -37,10 +34,7 @@
 
   &::before {
     position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
     background-color: rgb(var(--color-dark) / 0.6);
     content: "";

package/src/styles/Libraries/Ripple.css

@@ -1,29 +1,16 @@
 [data-action*="lib#ripple"] {
-  --lib-ripple-bg: rgb(var(--color-background));
-
   position: relative;
   user-select: none;
 }
 
 .lib-ripple {
+  --lib-ripple-animation-duration: 1s;
+  --lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, 0.4));
+
   position: absolute;
   background: var(--lib-ripple-bg);
   border-radius: 50%;
   transform: scale(0);
-  opacity: 0.4;
+  animation-duration: var(--lib-ripple-animation-duration);
   pointer-events: none;
-
-  @nest body > & {
-    position: fixed;
-  }
-
-  @nest html.ie & {
-    z-index: -1;
-  }
-
-  &.animation {
-    animation-name: ripple;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-  }
 }

package/src/styles/Ui/Checkbox.css

@@ -81,7 +81,6 @@
       content: "";
       background-color: currentColor;
       mask: var(--ui-checkbox-icon);
-      opacity: 0;
       transform: scale(0);
       will-change: transform;
       width: 1em;

package/src/styles/Ui/Link.css

@@ -29,7 +29,7 @@
     border-bottom: 1px solid currentColor;
     opacity: 0;
     position: absolute;
-    inset: auto 0 0 0;
+    inset: auto 0 0;
     transition: var(--transition-opacity), var(--transition-transform);
     transform: translateY(-0.25rem);
 

package/src/styles/Ui/Text.css

@@ -166,6 +166,10 @@
     margin: 0 0 1.5rem;
     padding: 0 0 0 1rem;
 
+    &:not([type]) {
+      list-style: decimal;
+    }
+
     & li {
       padding-left: 0.5rem;
 
@@ -192,6 +196,7 @@
       &::before {
         width: 0.25rem;
         height: 0.25rem;
+        box-sizing: content-box;
         position: absolute;
         content: "";
         border: 1px solid rgb(var(--color-accent));

package/src/styles/Utils/+.css

@@ -1,9 +1,10 @@
-@import "default.css";
-@import "icons.css";
-@import "keyframes.css";
-@import "normalize.css";
-@import "print.css";
-@import "tailwind/+.css";
-@import "theme/+.css";
-@import "vars.css";
-@import "vendor.css";
+@import "breakpoints.css";
+@import "default.css";
+@import "icons.css";
+@import "keyframes.css";
+@import "normalize.css";
+@import "print.css";
+@import "tailwind/+.css";
+@import "theme/+.css";
+@import "vars.css";
+@import "vendor.css";

package/src/styles/Utils/breakpoints.css

@@ -0,0 +1,9 @@
+@custom-media --media-m (max-width: 47.9375em);
+@custom-media --media-t (min-width: 48em);
+@custom-media --media-d (min-width: 60em);
+@custom-media --media-w (min-width: 76em);
+@custom-media --media-hd (min-width: 85em);
+@custom-media --media-mhd (min-width: 88em);
+@custom-media --media-fhd (min-width: 100em);
+@custom-media --media-touch (max-width: 59.9375em);
+@custom-media --media-touch-only (max-width: 59.9375em) and (min-width: 47.9375em);

package/src/styles/Utils/default.css

@@ -3,125 +3,29 @@
   background-color: rgb(var(--color-accent));
 }
 
-ul, ol {
-  padding: 0;
-  margin: 0;
-}
-
-ul {
-  list-style: none;
-}
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
+:where(*) {
+  outline: none;
+  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
 }
 
-a, area, button, input, label, select, summary, textarea, [tabindex] {
-  touch-action: manipulation;
+:where([hidden]) {
+  display: none;
 }
 
-hr {
-  width: 100%;
-  height: 1px;
+:where(svg) {
+  stroke-width: 1.5;
   display: block;
-  border: 0;
-  color: inherit;
-  border-top: 1px solid rgb(var(--color-current));
-  opacity: 0.2;
-  margin: 1rem 0;
-  padding: 0;
 }
 
-picture {
+:where(hr) {
   display: block;
+  border-top: 2px solid rgb(var(--color-current) / var(--tw-border-opacity, 0.15));
+  border-radius: var(--rounded);
 }
 
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  appearance: none;
-  background: transparent;
-  border: 0;
+:where(ol, ul) {
   padding: 0;
-  cursor: pointer;
-  color: inherit;
-  font-size: 1rem;
-}
-
-textarea {
-  resize: vertical;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-svg[class^="icon"] {
-  width: 1em;
-  height: 1em;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-
-  &:active,
-  &:hover {
-    outline-width: 0;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  outline: none;
-  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
-}
-
-*,
-::before,
-::after {
-  border-width: 0;
-  border-style: solid;
-  border-color: rgb(var(--color-current) / var(--tw-text-opacity, 1));
-}
-
-[hidden] {
-  display: none;
-}
-
-@supports (-moz-appearance: none) {
-  select {
-    text-indent: -0.125rem;
-  }
+  margin: 0;
 }
 
 .grecaptcha-badge {

package/src/styles/Utils/tailwind/+.css

@@ -1,2 +1,3 @@
-@import "base.css";
-@import "gutters.css";
+@import "base.css";
+@import "gutters.css";
+@import "utilities.css";

package/src/styles/Utils/tailwind/base.css

@@ -1,40 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
-  .current {
-    background-color: currentColor;
-    color: currentColor;
-  }
-
-  .animation {
-    animation-duration: 0.5s;
-    animation-fill-mode: both;
-  }
-
-  .slider {
-    margin-left: calc(var(--container-padding-calc) * -1);
-    margin-right: calc(var(--container-padding-calc) * -1);
-    padding-left: var(--container-padding-calc);
-    scroll-padding-left: var(--container-padding-calc);
-    scroll-padding-right: var(--container-padding-calc);
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    user-select: none;
-    scrollbar-width: none !important;
-    -ms-overflow-style: none;
-    display: flex;
-
-    & > * {
-      flex: 0 0 auto;
-      scroll-snap-align: start;
-
-      &:last-child {
-        box-sizing: content-box;
-        border-right: var(--container-padding-calc) solid transparent;
-      }
-    }
-  }
-}

package/src/styles/Utils/tailwind/utilities.css

@@ -0,0 +1,48 @@
+@layer utilities {
+  .current {
+    background-color: currentColor;
+    color: currentColor;
+  }
+
+  .animation {
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+  }
+
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--container-width);
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+
+    &:--size-sm {
+      --container: var(--container-width-sm);
+    }
+  }
+
+  .slider {
+    margin-left: calc(var(--container-padding-calc) * -1);
+    margin-right: calc(var(--container-padding-calc) * -1);
+    padding-left: var(--container-padding-calc);
+    scroll-padding-left: var(--container-padding-calc);
+    scroll-padding-right: var(--container-padding-calc);
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    user-select: none;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none;
+    display: flex;
+
+    & > * {
+      flex: 0 0 auto;
+      scroll-snap-align: start;
+
+      &:last-child {
+        box-sizing: content-box;
+        border-right: var(--container-padding-calc) solid transparent;
+      }
+    }
+  }
+}

package/src/styles/Utils/theme/+.css

@@ -1 +1 @@
-@import "main.css";
+@import "main.css";

package/src/styles/Utils/vars.css

@@ -56,41 +56,6 @@
   }
 }
 
-/* @custom-media --media */
-@custom-media --media-1600 (max-width: 114.9375em);
-@custom-media --media-1408 (max-width: 99.9375em);
-@custom-media --media-1360 (max-width: 87.9375em);
-@custom-media --media-1216 (max-width: 84.9375em);
-@custom-media --media-1024 (max-width: 75.9375em);
-@custom-media --media-960 (max-width: 63.9375em);
-@custom-media --media-768 (max-width: 59.9375em);
-@custom-media --media-400 (max-width: 47.9375em);
-@custom-media --media-360 (max-width: 24.9375em);
-@custom-media --media-320 (max-width: 22.4375em);
-@custom-media --media-min-2000 (min-width: 125em);
-@custom-media --media-min-1600 (min-width: 100em);
-@custom-media --media-min-1408 (min-width: 88em);
-@custom-media --media-min-1360 (min-width: 85em);
-@custom-media --media-min-1216 (min-width: 76em);
-@custom-media --media-min-1024 (min-width: 64em);
-@custom-media --media-min-960 (min-width: 60em);
-@custom-media --media-min-768 (min-width: 48em);
-@custom-media --media-min-400 (min-width: 25em);
-@custom-media --media-min-360 (min-width: 22.5em);
-@custom-media --media-min-320 (min-width: 20em);
-@custom-media --media-only-1024 (max-width: 75.9375em) and (min-width: 60em);
-@custom-media --media-only-960 (max-width: 63.9375em) and (min-width: 60em);
-@custom-media --media-only-768 (max-width: 59.9375em) and (min-width: 60em);
-@custom-media --media-m (max-width: 47.9375em);
-@custom-media --media-t (min-width: 48em);
-@custom-media --media-d (min-width: 60em);
-@custom-media --media-w (min-width: 76em);
-@custom-media --media-hd (min-width: 85em);
-@custom-media --media-mhd (min-width: 88em);
-@custom-media --media-fhd (min-width: 100em);
-@custom-media --media-touch (max-width: 59.9375em);
-@custom-media --media-touch-only (max-width: 59.9375em) and (min-width: 47.9375em);
-
 /* @custom-selector --theme */
 @custom-selector :--theme-dark [data-theme~="dark"];
 @custom-selector :--theme-light [data-theme~="light"];

package/src/styles/Utils/vendor.css

@@ -1 +1,2 @@
-/* empty */
+@import "winduum/src/base/reset.css";
+@import "winduum/src/base/breakpoints.css";

package/src/styles/main.css

@@ -1,6 +1,6 @@
-@import "Utils/normalize.css";
 @import "Utils/vendor.css";
 @import "Utils/theme/main.css";
+@import "Utils/breakpoints.css";
 @import "Utils/vars.css";
 @import "Utils/default.css";
 @import "Utils/icons.css";
@@ -11,5 +11,4 @@
 @import "Sections/+.css";
 @import "Libraries/+.css";
 @import "Utils/print.css";
-@import "Utils/tailwind/base.css";
-@import "Utils/tailwind/gutters.css";
+@import "Utils/tailwind/+.css";

package/src/templates/Components/Dialogs/Basic.twig

@@ -1,24 +1,22 @@
-<div class="c-dialog c-dialog-basic" data-size="sm" data-type="scrollable">
-    <form class="wrp_dialog">
-        <button class="elm_dialog_close ui-icon" type="button" data-action="click->lib-dialog#hide">
+<form class="c-dialog c-dialog-basic" data-size="sm" data-type="scrollable">
+    <div class="wrp_dialog_head flex justify-between">
+        <h2 class="ui-heading">Info</h2>
+        <button class="ui-icon" type="button" data-action="click->lib-dialog#hide">
             <svg>
                 <use href="#icon-x"></use>
             </svg>
         </button>
-        <div class="wrp_dialog_head">
-            <h2 class="ui-heading">Info</h2>
-        </div>
-        <div class="wrp_dialog_body py-4">
-            <div class="ui-text">
-                {% for i in 1..44 %}
+    </div>
+    <div class="wrp_dialog_body py-4">
+        <div class="ui-text">
+            {% for i in 1..44 %}
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
-                {% endfor %}
-            </div>
+            {% endfor %}
         </div>
-        <div class="wrp_dialog_foot">
-            <div class="col m:col-12">
-                <button class="ui-btn" type="button" data-action="click->lib-dialog#hide">Continue</button>
-            </div>
+    </div>
+    <div class="wrp_dialog_foot">
+        <div class="col m:col-12">
+            <button class="ui-btn" type="button" data-action="click->lib-dialog#hide">Continue</button>
         </div>
-    </form>
-</div>
+    </div>
+</form>