@newlogic-digital/ui 3.0.1 → 3.1.0

package/src/styles/Components/Form/CookieConsent.css

@@ -1,20 +1,15 @@
 .c-form-cookieconsent {
   & .wrp_form_head {
-    margin-bottom: 1.5rem;
-
-    & .ui-heading {
-      & span {
-        font-size: 1.5rem;
-      }
-    }
+    margin-bottom: 1rem;
   }
 
   & .wrp_form_body {
     display: flex;
     flex-direction: row;
-    margin: 1.5rem 0 1.75rem;
+    margin: 0 0 1.75rem;
+    line-height: 1.5;
 
-    @media (--media-400) {
+    @media (--media-m) {
       flex-direction: column;
     }
 
@@ -22,7 +17,7 @@
       &:not(:last-of-type) {
         margin-right: 1rem;
 
-        @media (--media-400) {
+        @media (--media-m) {
           margin-right: auto;
           margin-bottom: 0.75rem;
         }
@@ -31,6 +26,6 @@
   }
 
   & .wrp_form_foot {
-    margin-top: 1rem;
+    margin-top: 2rem;
   }
-}
+}

package/src/styles/Components/Item/+.css

@@ -0,0 +1 @@
+/* empty */

package/src/styles/Layout/+.css

@@ -1 +1,3 @@
+@import "Header.css";
 @import "Main.css";
+@import "Nav.css";

package/src/styles/Layout/Main.css

@@ -1,6 +1,8 @@
 html {
   font-family: sans-serif;
-  scroll-padding-top: 0;
+  scroll-padding-top: var(--l-scroll-padding-top, 0);
+  scroll-behavior: smooth;
+  accent-color: rgb(var(--color-accent));
 
   @media (--media-min-400) {
     font-size: 95%;
@@ -22,47 +24,8 @@ html {
     font-size: 90%;
   }
 
-  &.is-lib-drawer-active {
-    overflow: hidden;
-  }
-
-  &.no-js {
-    & .l-default {
-      opacity: 1;
-    }
-
-    & .l-spinner {
-      display: none;
-    }
-  }
-
-  &[class*="wf-"] {
-    & body {
-      & .l-default {
-        transition: var(--transition-opacity);
-      }
-
-      &:not(.is-body-preload) {
-        & .l-default {
-          opacity: 1;
-        }
-
-        & .l-spinner {
-          opacity: 0;
-          transition: var(--transition-opacity)
-        }
-      }
-
-      &.is-body-loaded {
-        & .l-spinner {
-          display: none;
-        }
-      }
-    }
-  }
-
   &.no-touch, &.no-touch * {
-    scrollbar-color: rgba(var(--color-default),0.2) rgb(var(--color-background));
+    scrollbar-color: rgb(var(--color-current) / 0.2) rgb(var(--color-background));
     scrollbar-width: thin;
 
     &::-webkit-scrollbar {
@@ -74,36 +37,43 @@ html {
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: rgba(var(--color-default),0.2);
+      background-color: rgb(var(--color-current) / 0.2);
     }
   }
 }
 
 body {
   font-family: var(--font-primary);
-  color: rgb(var(--color-default));
+  color: rgb(var(--color-current));
   font-weight: var(--font-normal);
   line-height: 1.5;
   position: relative;
   background-color: rgb(var(--color-background));
   cursor: default;
 
+  &::before {
+    position: fixed;
+    inset: 0;
+    content: "";
+    background-color: rgb(var(--color-dark) / 0.6);
+    z-index: var(--z-30);
+    transition: var(--transition-opacity);
+    opacity: 0;
+    pointer-events: none;
+
+    @nest .m\:is-body-overlay & {
+      @media (--media-m) {
+        pointer-events: auto;
+        opacity: 1;
+      }
+    }
+  }
+
   & .l-default {
-    overflow: visible !important;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
-
-  & a {
-    color: inherit;
-    text-decoration: none;
-
-    &:active,
-    &:hover {
-      outline-width: 0;
-    }
-  }
 }
 
 #l-main {
@@ -113,14 +83,9 @@ body {
   flex-direction: column;
 
   &.transition-fade {
-    @nest html.swup-enabled body.is-body-loaded & {
-      /* clean-css ignore:start */
-      transition: opacity .2s;
-      /* clean-css ignore:end */
-    }
-
     @nest html.swup-enabled & {
       /* clean-css ignore:start */
+      transition: opacity 0.15s;
       opacity: 1;
       /* clean-css ignore:end */
     }
@@ -136,11 +101,11 @@ body {
 .container {
   margin-left: auto;
   margin-right: auto;
-  max-width: var(--container);
+  max-width: var(--container-width);
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
 
-  &[data-size="sm"] {
-    --container: var(--container-sm);
+  &:--size-sm {
+    --container: var(--container-width-sm);
   }
 }

package/src/styles/Layout/Nav.css

@@ -0,0 +1,43 @@
+#l-nav {
+  & > .wrp_nav {
+    min-width: 22.5rem;
+    background-color: rgb(var(--color-background));
+    height: 100vh;
+
+    @nest .is-transition& {
+      transition: var(--transition-transform);
+    }
+  }
+
+  & .wrp_nav_head {
+    padding: 2rem 3rem;
+
+    & .elm_header_logo {
+      font-size: 1.875rem;
+
+      & .icon {
+        &, &::before {
+          display: block;
+        }
+      }
+    }
+  }
+
+  & .wrp_nav_body {
+    & .elm_header_nav {
+      display: block;
+    }
+
+    & .col {
+      margin: 0.75rem 0;
+    }
+
+    & a {
+      font-size: 1.5rem;
+      padding: 0 3rem;
+      font-weight: var(--font-medium);
+      text-align: left;
+      display: block;
+    }
+  }
+}

package/src/styles/Libraries/+.css

@@ -1,4 +1,3 @@
-@import "Animate.css";
 @import "Datepicker.css";
 @import "Dialog.css";
 @import "Drawer.css";
@@ -7,3 +6,4 @@
 @import "NativeSlider.css";
 @import "Ripple.css";
 @import "Tabs.css";
+@import "Tippy.css";

package/src/styles/Libraries/Datepicker.css

@@ -1,25 +1,29 @@
 .datepicker-dropdown {
+  --color-current: var(--color-default);
+
   z-index: 9999;
   transition: var(--transition-opacity), var(--transition-transform);
   will-change: transform;
+  color: rgb(var(--color-current));
 
   @nest html:not(.no-pointer-events) & {
     display: block;
   }
 
   & .datepicker-picker {
-    box-shadow: 0 .15em 1.5em 0 rgba(var(--color-dark),0.05), 0 0 1em 0 rgba(var(--color-dark),0.05);
+    box-shadow: 0 0.15em 1.5em 0 rgb(var(--color-dark) / 0.05), 0 0 1em 0 rgb(var(--color-dark) / 0.05);
     overflow: hidden;
     display: block;
+    border-radius: var(--radius);
   }
 
   &.datepicker-orient-top {
     padding-bottom: 0;
     margin-top: -0.75rem;
 
-    &:after, &:before {
+    &::after, &::before {
       top: 100%;
-      left: 1.25rem;
+      left: 1.3125rem;
       border: solid transparent;
       content: "";
       height: 0;
@@ -29,13 +33,13 @@
       margin-top: -1px;
     }
 
-    &:after {
+    &::after {
       border-top-color: #fff;
       border-width: 0.375rem;
       margin-left: -0.375rem;
     }
 
-    &:before {
+    &::before {
       border-top-color: #eee;
       border-width: 0.4375rem;
       margin-left: -0.4375rem;
@@ -50,9 +54,9 @@
     padding-top: 0;
     margin-top: 0.75rem;
 
-    &:after, &:before {
+    &::after, &::before {
       bottom: 100%;
-      left: 1.25rem;
+      left: 1.3125rem;
       border: solid transparent;
       content: "";
       height: 0;
@@ -61,13 +65,13 @@
       pointer-events: none;
     }
 
-    &:after {
+    &::after {
       border-bottom-color: #fff;
       border-width: 0.375rem;
       margin-left: -0.375rem;
     }
 
-    &:before {
+    &::before {
       border-bottom-color: #eee;
       border-width: 0.4375rem;
       margin-left: -0.4375rem;
@@ -88,7 +92,7 @@
   font-size: 0.75rem;
   font-weight: var(--font-semibold);
   text-transform: uppercase;
-  color: rgb(var(--color-primary));
+  color: rgb(var(--color-accent));
 }
 
 .datepicker-cell {
@@ -96,34 +100,57 @@
 }
 
 .datepicker-cell.selected, .datepicker-cell.selected:hover {
-  background-color: rgb(var(--color-primary));
+  background-color: rgb(var(--color-accent));
 }
 
-.datepicker-time {
-  padding: 0.5rem;
+.datepicker-controls {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0.125rem;
 
-  & input {
-    height: 1.875rem;
-    color: rgb(var(--color-default));
-    font-size: 0.875rem;
-    border: 0;
-    max-width: 4.375rem;
+  & .ok-btn {
+    background: rgb(var(--color-accent));
+    color: rgb(var(--color-light)) !important;
+    border-color: rgb(var(--color-accent)) !important;
     font-weight: var(--font-medium);
+  }
+
+  & :is(.button, input) {
+    margin-left: 0.125rem !important;
+    margin-right: 0.125rem !important;
+  }
+
+  & input {
+    color: rgb(var(--color-current));
+    font-size: 0.8125rem;
+    min-width: 4.5rem;
+    max-width: 4.5rem;
+    font-weight: var(--font-normal);
     background-color: transparent;
+    border: 1px solid #dbdbdb;
+    height: 1.6875rem;
+    border-radius: var(--radius) !important;
+    padding: 0 0.1875rem !important;
+
+    @nest .chrome & {
+      padding: 0 0.125rem 0 0.25rem !important;
+      min-width: 3.75rem;
+    }
+
+    @nest .safari & {
+      min-width: 3rem;
+    }
 
-    &.polyfill {
-      max-width: 2.25rem;
+    &::-webkit-calendar-picker-indicator {
+      padding: 0;
+      margin: 0;
     }
   }
 }
 
-.datepicker-footer {
-  background-color: rgb(var(--color-background));
-  box-shadow: none;
-  border-top: 1px solid rgba(var(--color-default), 0.05);
+.datepicker-input.in-edit:active, .datepicker-input.in-edit:focus {
+  box-shadow: inherit;
 }
 
 .button {
@@ -131,22 +158,25 @@
     font-size: 0;
     height: 2.25rem;
 
-    &:before {
-      @mixin iconfont;
+    &::before {
+      width: 1em;
+      height: 1em;
       font-size: 1rem;
       display: block;
+      background-color: currentColor;
+      content: "";
     }
   }
 
   &.prev-btn {
-    &:before {
-      content: var(--icon-chevron-left);
+    &::before {
+      mask: var(--icon-chevron-left);
     }
   }
 
   &.next-btn {
-    &:before {
-      content: var(--icon-chevron-right);
+    &::before {
+      mask: var(--icon-chevron-right);
     }
   }
 
@@ -156,19 +186,35 @@
   }
 }
 
+.datepicker-footer {
+  background-color: rgb(var(--color-background));
+  box-shadow: none;
+  border-top: 1px solid rgb(var(--color-current) / 0.05);
+
+  & .datepicker-controls {
+    & + .datepicker-time {
+      padding-top: 0.25rem;
+    }
+  }
+
+  & .button {
+    border-radius: var(--radius) !important;
+  }
+}
+
 .dark {
-  & .datepicker-picker, & .datepicker-time {
+  & :is(.datepicker-picker, .datepicker-time) {
     background-color: rgb(var(--color-background-100));
   }
 
   & .datepicker-dropdown.datepicker-orient-bottom {
-    &:before, &:after {
+    &::before, &::after {
       border-bottom-color: rgb(var(--color-background-100));
     }
   }
 
   & .datepicker-dropdown.datepicker-orient-top {
-    &:before, &:after {
+    &::before, &::after {
       border-top-color: rgb(var(--color-background-100));
     }
   }
@@ -176,7 +222,7 @@
   & .datepicker-controls .button {
     border-color: transparent;
     background-color: rgb(var(--color-background-100));
-    color: rgb(var(--color-default)) !important;
+    color: rgb(var(--color-current)) !important;
   }
 
   & .datepicker-header .datepicker-controls {
@@ -184,16 +230,16 @@
 
     & .button {
       &:hover {
-        background-color: rgba(var(--color-light), 0.1);
+        background-color: rgb(var(--color-light) / 0.1);
       }
     }
   }
 
   & .datepicker-cell:not(.disabled):hover {
-    background-color: rgba(var(--color-light), 0.1);
+    background-color: rgb(var(--color-light) / 0.1);
   }
 
   & .datepicker-cell.focused:not(.selected) {
-    background-color: rgba(var(--color-light), 0.2);
+    background-color: rgb(var(--color-light) / 0.2);
   }
-}
+}

package/src/styles/Libraries/Dialog.css

@@ -1,18 +1,19 @@
 .lib-dialog {
   --lib-dialog-bg: var(--color-dark);
   --lib-dialog-opacity: 0.8;
-  animation: 0.3s ease 0s backwards 1 fadeIn;
+
+  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: rgba(var(--lib-dialog-bg), var(--lib-dialog-opacity));
+  background-color: rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));
   overscroll-behavior: contain;
 
-  &[data-state="hiding"] {
-    animation: 0.3s ease 0s forwards 1 fadeOut;
+  &:--state-hiding {
+    animation: 0.3s ease 0s forwards 1 fade-out;
     pointer-events: none;
   }
-}
+}

package/src/styles/Libraries/Drawer.css

@@ -1,9 +1,9 @@
 .lib-drawer {
-  --drawerOpacity: 0;
+  --lib-drawer-opacity: 0;
+
   z-index: var(--z-30);
   width: 100%;
   height: 100%;
-  //display: none;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -13,6 +13,10 @@
   display: flex;
   flex-direction: row;
 
+  & > div {
+    scroll-snap-align: end;
+  }
+
   &[data-action*="scroll"] {
     overflow-x: auto;
     overflow-y: hidden;
@@ -21,7 +25,7 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
 
-    &[data-state="active"] {
+    &:--state-active {
       scroll-snap-type: x mandatory;
     }
 
@@ -31,46 +35,42 @@
     }
   }
 
-  &:before {
+  &::before {
     position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     z-index: -1;
-    background-color: rgba(var(--color-default), 0.6);
+    background-color: rgb(var(--color-dark) / 0.6);
     content: "";
-    opacity: var(--drawerOpacity);
+    opacity: var(--lib-drawer-opacity);
 
     @nest .is-opacity& {
       transition: var(--transition-opacity);
     }
 
-    @nest :not([data-state="active"])& {
+    @nest :not(:--state-active)& {
       opacity: 0;
     }
   }
 
-  &:not([data-state="active"]) {
+  &:not(:--state-active) {
     pointer-events: none;
 
     & > div {
       transform: translateX(-28.125rem);
 
-      @media (--media-400) {
+      @media (--media-m) {
         transform: translateX(-22.5rem);
       }
     }
   }
 
-  &:after {
+  &::after {
     content: "";
     display: block;
     min-width: 100vw;
     scroll-snap-align: end;
   }
-
-  & > div {
-    scroll-snap-align: end;
-  }
-}
+}