@newlogic-digital/ui 3.0.3 → 3.2.0

package/src/styles/Components/CookieConsent.css

@@ -1,210 +1,71 @@
 .c-cookieconsent {
   position: fixed;
+  inset: 0;
   display: none;
-  z-index: 1;
-  color: rgb(var(--color-invert));
-  left: 1rem;
-  bottom: 1rem;
-  background-color: rgb(var(--color-default));
-  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
-
-  @media (--media-400) {
-    display: block;
-    transform: translateY(100%);
-
-    &.is-animate {
-      &:before {
-        transform: translateX(-50%) translateY(0);
-      }
-    }
-
-    &.is-mobile-show {
-      &:before {
-        transform: translateY(125%) translateX(-50%);
-        opacity: 0;
-        z-index: -2;
-      }
-    }
-
-    &.is-background-light {
-      &:after {
-        background-color: rgb(var(--color-background));
-      }
-    }
-
-    &:after {
-      position: absolute;
-      inset: 0;
-      background-color: rgb(var(--color-default));
-      content: "";
-      z-index: -1;
-    }
-
-    &:before {
-      color: rgb(var(--color-invert));
-      font-size: 0.875rem;
-      height: 2.625rem;
-      display: block;
-      position: absolute;
-      background-color: rgb(var(--color-default));
-      left: 50%;
-      bottom: 100%;
-      content: attr(data-title);
-      line-height: 2.625rem;
-      padding: 0 1.5rem;
-      transform: translateY(125%) translateX(-50%);
-      white-space: nowrap;
-      cursor: pointer;
-      transition: var(--transition-opacity), var(--transition-transform);
-      margin-bottom: calc(0.625rem + env(safe-area-inset-bottom));
-      border-radius: var(--radius);
-    }
+  z-index: var(--z-50);
+  background-color: rgb(var(--color-dark) / 0.75);
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  @media print {
+    display: none !important;
   }
 
-  &.is-background-light {
-    color: rgb(var(--color-default));
-    background-color: rgb(var(--color-background));
-    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
-  }
-
-  @media (--media-min-960) {
-    width: 40rem;
+  &:not(.is-animate) {
+    animation: 0.5s ease 0s forwards 1 fade-out;
   }
 
-  @media (--media-only-768) {
-    left: 50%;
-    width: 40rem;
-    margin-left: -20rem;
-    bottom: 0;
+  &.is-animate {
+    animation: 0.5s ease 0s backwards 1 fade-in;
   }
 
-  @media (--media-400) {
-    left: 0;
-    right: 0;
-    bottom: 0;
+  &:--state-active {
+    display: flex;
   }
 
-  &:not(.is-animate) {
-    @media (--media-min-768) {
-      animation: 0.5s ease 0s forwards 1 slideOutDown;
-    }
+  & .wrp {
+    max-width: 32rem;
+    width: calc(100% - 2rem);
+    border-radius: var(--radius);
+    padding: 2rem;
 
-    @media (--media-min-960) {
-      animation: 0.5s ease 0s forwards 1 fadeOutLeft;
-    }
+    @nest :--type-center& {
+      max-width: 26rem;
+      text-align: center;
 
-    @media (--media-400) {
-      &.is-mobile-show {
-        animation: 0.5s ease 0s forwards 1 slideOutDown;
+      & .ui-image {
+        margin-left: auto;
+        margin-right: auto;
       }
     }
-  }
-
-  &.is-animate {
-    @media (--media-min-768) {
-      animation: 0.5s ease 0s backwards 1 slideInUp;
-    }
 
-    @media (--media-min-960) {
-      animation: 0.5s ease 0s backwards 1 fadeInLeft;
-    }
+    & .wrp_c_head {
+      margin-bottom: 1rem;
 
-    @media (--media-400) {
-      &.is-mobile-show {
-        animation: 0.5s ease 0s forwards 1 slideInUp;
+      @media (--media-t) {
+        margin-bottom: 1.5rem;
       }
     }
-  }
 
-  &[data-state="active"] {
-    display: block;
-
-    @media (--media-400) {
-      max-width: 100%;
+    & .wrp_c_body {
+      & .ui-text {
+        --ui-text-size: 0.875rem;
+      }
     }
-  }
 
-  & .wrp {
-    & .wrp_c_options {
+    & .wrp_c_foot {
       display: flex;
-      margin-top: 1.5rem;
       align-items: center;
+      margin-top: 1.5rem;
 
-      @media (--media-400) {
-        justify-content: center;
-        flex-wrap: wrap;
-        flex-direction: column;
+      @media (--media-t) {
+        margin-top: 2rem;
       }
 
       & .ui-link {
-        margin-right: 1rem;
-
-        @media (--media-400) {
-          margin: 0 1rem 1rem;
-        }
-
-        & span {
-          display: block;
-
-          @media (--media-min-768) {
-            font-size: 0.75rem;
-          }
-
-          &:before {
-            border-color: rgb(var(--color-invert));
-
-            @nest .is-background-light& {
-              border-color: rgb(var(--color-default));
-            }
-          }
-        }
+        font-weight: var(--font-normal);
       }
-
-      & .ui-btn {
-
-        @media (--media-min-768) {
-          margin-left: auto;
-          padding: 0.625rem 0.75rem;
-        }
-
-        @media (--media-400) {
-          margin-top: 0.375rem;
-        }
-
-        &[data-lib-cookieconsent-approve] {
-          color: rgb(var(--color-success));
-        }
-
-        & span {
-          &:not(.icon-l) {
-            @media (--media-min-768) {
-              font-size: 0.75rem;
-            }
-          }
-
-          &.icon-l {
-            &:before {
-              font-size: 1rem;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  & p {
-    margin: 0;
-    font-size: 0.875rem;
-
-    @media (--media-min-768) {
-      font-size: 0.75rem;
-      line-height: 2;
-      padding-right: 1rem;
-    }
-
-    @media (--media-400) {
-      line-height: 1.75;
-      text-align: center;
     }
   }
-}
+}

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

@@ -2,7 +2,8 @@
   --c-dialog-py: 1rem;
   --c-dialog-px: 1.5rem;
   --c-dialog-offset-y: 2rem;
-  animation: 0.3s ease 0s backwards 1 fadeInDown;
+
+  animation: 0.3s ease 0s backwards 1 fade-in-down;
   position: relative;
   z-index: var(--z-30);
   display: flex;
@@ -16,31 +17,32 @@
   border-bottom: var(--c-dialog-offset-y) solid transparent;
   width: calc(100% - 2rem);
 
-  @nest [data-state*="hiding"] & {
-    animation: 0.3s ease 0s forwards 1 fadeOutUp;
+  @nest :--state-hiding & {
+    animation: 0.3s ease 0s forwards 1 fade-out-up;
   }
 
-  @media (--media-min-768) {
+  @media (--media-t) {
     --c-dialog-offset-y: 4rem;
+
     width: 100%;
     min-width: 18.75rem;
     max-width: 40rem;
   }
 
-  &[data-size="sm"] {
+  &:--size-sm {
     max-width: 31.25rem;
   }
 
-  &[data-size="base"] {
+  &:--size-base {
     max-width: none;
     width: auto;
   }
 
-  &[data-size="lg"] {
+  &:--size-lg {
     max-width: 80rem;
   }
 
-  &[data-type="scrollable"] {
+  &:--type-scrollable {
     height: 100%;
 
     & .wrp_dialog_body {
@@ -63,7 +65,7 @@
     flex-direction: column;
     max-height: 100%;
 
-    @media (--media-min-768) {
+    @media (--media-t) {
       --c-dialog-py: 1.25rem;
     }
   }
@@ -72,10 +74,5 @@
     position: absolute;
     right: 1rem;
     top: 1rem;
-    transition: var(--transition-opacity);
-
-    &:hover {
-      opacity: 0.8;
-    }
   }
-}
+}

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/Layout/+.css

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

package/src/styles/Layout/Header.css

@@ -0,0 +1,54 @@
+:root {
+  --l-header-height: 4rem;
+  --l-scroll-padding-top: calc(var(--l-header-height) + 1rem);
+}
+
+#l-header {
+  z-index: var(--z-20);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0 2rem;
+  background-color: rgb(var(--color-dark));
+  color: rgb(var(--color-light));
+
+  @nest .dark & {
+    background-color: rgb(var(--color-background-100));
+  }
+
+  &.is-l-header-normal {
+    & ~ #l-main {
+      padding-top: var(--l-header-height);
+    }
+  }
+
+  & .wrp_header_body {
+    align-items: center;
+    height: var(--l-header-height);
+  }
+
+  & .elm_header_logo {
+    font-size: 1.5rem;
+    margin-right: 3rem;
+  }
+
+  & .elm_header_menu {
+    position: relative;
+    font-size: 1.75rem;
+
+    &::after {
+      position: absolute;
+      inset: -0.5rem;
+      content: "";
+    }
+  }
+
+  & .elm_header_nav {
+    --gx: 2rem;
+
+    & .ui-link {
+      padding: 1.25rem 0;
+    }
+  }
+}

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";