@newlogic-digital/ui 3.5.0 → 4.0.0

package/src/styles/Components/CookieConsent.css

@@ -1,68 +0,0 @@
-.c-cookieconsent {
-  position: fixed;
-  inset: 0;
-  display: none;
-  z-index: var(--z-50);
-  background-color: rgb(var(--color-dark-rgb) / 75%);
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  @media print {
-    display: none !important;
-  }
-
-  &:not(.is-animate) {
-    animation: 0.5s ease 0s forwards 1 fade-out;
-  }
-
-  &.is-animate {
-    animation: 0.5s ease 0s backwards 1 fade-in;
-  }
-
-  &.active {
-    display: flex;
-  }
-
-  > .c {
-    max-width: 32rem;
-    width: calc(100% - 2rem);
-    border-radius: var(--rounded-2xl);
-    padding: 1rem;
-    background-color: var(--color-body-primary);
-
-    @media (--media-md) {
-      padding: 2rem;
-    }
-
-    > .c_head {
-      margin-bottom: 1rem;
-
-      @media (--media-md) {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    > .c_foot {
-      display: flex;
-      align-items: center;
-      margin-top: 1.5rem;
-
-      @media (--media-md) {
-        margin-top: 2rem;
-      }
-    }
-  }
-
-  &.is-center {
-    > .c {
-      max-width: 27rem;
-      text-align: center;
-
-      & .ui-image {
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-  }
-}

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

@@ -1 +0,0 @@
-@import "Default.css";

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

@@ -1,26 +0,0 @@
-@import "winduum/src/components/dialog.css";
-
-.c-dialog {
-  &.sm {
-    --c-dialog-width: 30rem;
-  }
-
-  &.lg {
-    --c-dialog-width: 50rem;
-  }
-
-  &.scrollable {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    & .c_dialog_body {
-      flex: 1 1 auto;
-      overflow: auto;
-      margin: var(--c-dialog-py) calc(var(--c-dialog-px) * -1);
-      padding: 0 var(--c-dialog-px);
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-}

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

@@ -1 +0,0 @@
-@import "Default.css";

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

@@ -1,8 +0,0 @@
-.c-dropdown {
-  padding: 0.875rem 0.75rem;
-  max-width: 16rem;
-  display: flex;
-  background-color: rgb(var(--color-body-rgb));
-  border-radius: var(--rounded);
-  box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 8%);
-}

package/src/styles/Components/Field.css

@@ -1 +0,0 @@
-@import "winduum/src/components/field.css";

package/src/styles/Layout/+.css

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

package/src/styles/Layout/Header.css

@@ -1,50 +0,0 @@
-:root {
-  --l-header-height: 4rem;
-  --l-scroll-padding-top: calc(var(--l-header-height) + 1rem);
-}
-
-#l-header {
-  --color-current: rgb(var(--color-light-rgb));
-
-  z-index: var(--z-20);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 0 2rem;
-  background-color: rgb(var(--color-dark-rgb));
-  color: var(--color-current);
-
-  .dark & {
-    background-color: var(--color-body-secondary);
-  }
-
-  &.is-l-header-normal {
-    & ~ #l-main {
-      padding-top: var(--l-header-height);
-    }
-  }
-
-  .l_header_body {
-    align-items: center;
-    height: var(--l-header-height);
-  }
-
-  .l_header_logo {
-    font-size: 1.5rem;
-    margin-right: 3rem;
-  }
-
-  .l_header_menu {
-    position: relative;
-    font-size: 1.5rem;
-  }
-
-  .l_header_nav {
-    gap: 2rem;
-
-    .ui-link {
-      padding: 1.25rem 0;
-    }
-  }
-}

package/src/styles/Layout/Main.css

@@ -1,28 +0,0 @@
-html {
-  scroll-behavior: smooth;
-  scroll-padding-top: var(--l-header-height);
-}
-
-body {
-  background-color: var(--color-body);
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-}
-
-#l-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-
-  &.transition-fade {
-    html.swup-enabled & {
-      transition: opacity 0.1s;
-      opacity: 1;
-    }
-
-    html.is-animating & {
-      opacity: 0;
-    }
-  }
-}

package/src/styles/Layout/Nav.css

@@ -1,47 +0,0 @@
-#l-nav {
-  --l-nav-width: calc(100vw - 2.5rem);
-
-  @media (--media-md) {
-    --l-nav-width: 25rem;
-  }
-
-  .l_header_nav {
-    flex-direction: column;
-  }
-
-  > .l_nav {
-    width: var(--l-nav-width);
-    background-color: var(--color-body);
-    height: 100vh;
-    flex-shrink: 0;
-    padding: 2rem;
-  }
-
-  .l_nav_head {
-    padding: 0.75rem 0 2.5rem;
-  }
-
-  .l_nav_body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-
-    & a {
-      padding: 0.5rem 0;
-      font-size: 1.75rem;
-      display: block;
-    }
-  }
-
-  &.is-transition {
-    > .l_nav {
-      transition: transform 0.3s ease;
-    }
-  }
-
-  &:not(.active) {
-    > .l_nav {
-      transform: translateX(calc(var(--l-nav-width) * -1));
-    }
-  }
-}

package/src/styles/Libraries/+.css

@@ -1,7 +0,0 @@
-@import "Datepicker.css";
-@import "Dialog.css";
-@import "Drawer.css";
-@import "Hint.css";
-@import "Pickr.css";
-@import "Ripple.css";
-@import "Tippy.css";

package/src/styles/Libraries/Datepicker.css

@@ -1,54 +0,0 @@
-@import "air-datepicker/air-datepicker.css";
-
-.air-datepicker {
-  --adp-btn-color: var(--color-primary);
-  --adp-day-name-color: var(--color-primary);
-  --adp-color-current-date: var(--color-main);
-  --adp-cell-background-color-selected: var(--color-primary);
-  --adp-cell-background-color-selected-hover: var(--color-primary);
-  --adp-cell-border-radius: var(--rounded);
-  --adp-border-radius: var(--rounded);
-
-  .dark & {
-    --adp-background-color: var(--color-body-tertiary);
-    --adp-background-color-hover: var(--color-body-secondary);
-    --adp-background-color-active: var(--color-body-secondary);
-    --adp-color: var(--color-main);
-    --adp-color-secondary: var(--color-main);
-    --adp-color-other-month: color-mix(in srgb, var(--color-main) 50%, var(--color-dark));
-    --adp-border-color: var(--color-body-secondary);
-    --adp-border-color-inner: var(--color-body-secondary);
-    --adp-border-color-inline: var(--color-body-secondary);
-  }
-
-  font-family: inherit;
-
-  & input[type="range"] {
-    border: 0;
-    outline: 0;
-  }
-
-  .air-datepicker--pointer {
-    &::after {
-      background: var(--adp-background-color);
-    }
-  }
-
-  .air-datepicker-cell {
-    &.-current- {
-      --sq: 0.25rem;
-      --bottom: 0.25rem;
-
-      &::before {
-        content: "";
-        width: var(--sq);
-        height: var(--sq);
-        border-radius: var(--rounded-full);
-        background-color: var(--color-success);
-        position: absolute;
-        bottom: var(--bottom);
-        left: calc(50% - var(--sq) / 2);
-      }
-    }
-  }
-}

package/src/styles/Libraries/Dialog.css

@@ -1 +0,0 @@
-@import "winduum/src/libraries/dialog.css";

package/src/styles/Libraries/Drawer.css

@@ -1,64 +0,0 @@
-.lib-drawer {
-  --lib-drawer-opacity: 0;
-
-  z-index: var(--z-30);
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-
-  & > div {
-    scroll-snap-align: end;
-  }
-
-  &[data-action*="scroll"] {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    user-select: none;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &.active {
-      scroll-snap-type: x proximity;
-    }
-
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-  }
-
-  &::before {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background-color: rgb(var(--color-dark-rgb) / 50%);
-    content: "";
-    opacity: var(--lib-drawer-opacity);
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    min-width: 100vw;
-    scroll-snap-align: end;
-  }
-
-  &.is-opacity {
-    &::before {
-      transition: var(--transition-opacity);
-    }
-  }
-
-  &:not(.active) {
-    pointer-events: none;
-
-    &::before {
-      opacity: 0;
-    }
-  }
-}

package/src/styles/Libraries/Hint.css

@@ -1,186 +0,0 @@
-[class*="lib-hint-"] {
-  --color-accent: var(--color-body);
-  --color-current: var(--color-body-fg);
-  --lib-hint-font-size: 0.75rem;
-  --lib-hint-font-weight: var(--font-normal);
-
-  position: relative;
-
-  &::before, &::after {
-    position: absolute;
-    visibility: hidden;
-    opacity: 0;
-    z-index: var(--z-10);
-    pointer-events: none;
-    transition: var(--transition-duration) ease;
-    transition-delay: 0ms;
-    will-change: transform;
-    backface-visibility: hidden;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    background-color: transparent;
-    border: 0.375rem solid transparent;
-    z-index: var(--z-20);
-  }
-
-  &::after {
-    border-radius: var(--rounded);
-    background-color: var(--color-accent);
-    color: var(--color-current);
-    padding: 0.75rem;
-    font-size: var(--lib-hint-font-size);
-    font-family: inherit;
-    line-height: 0.875rem;
-    white-space: nowrap;
-    box-shadow:
-      0 0.15rem 1.5rem 0 rgb(var(--color-main-rgb) / 10%),
-      0 0 1rem 0 rgb(var(--color-main-rgb) / 10%);
-    font-weight: var(--lib-hint-font-weight);
-    text-align: center;
-  }
-
-  &.lib-hint-top {
-    &::before, &::after {
-      bottom: 100%;
-      left: 50%;
-    }
-
-    &::before {
-      left: calc(50% - 0.375rem);
-      margin-bottom: -0.6875rem;
-    }
-
-    &::after {
-      transform: translateX(-50%);
-    }
-
-    &:is(:hover, :focus-visible) {
-      &::before {
-        transform: translateY(-0.5rem);
-      }
-
-      &::after {
-        transform: translateX(-50%) translateY(-0.5rem);
-      }
-    }
-  }
-
-  &.lib-hint-bottom {
-    &::before, &::after {
-      top: 100%;
-      left: 50%;
-    }
-
-    &::before {
-      left: calc(50% - 0.375rem);
-      margin-top: -0.6875rem;
-    }
-
-    &::after {
-      transform: translateX(-50%);
-    }
-
-    &:is(:hover, :focus-visible) {
-      &::before {
-        transform: translateY(0.5rem);
-      }
-
-      &::after {
-        transform: translateX(-50%) translateY(0.5rem);
-      }
-    }
-  }
-
-  &.lib-hint-right {
-    &::before, &::after {
-      left: 100%;
-      bottom: 50%;
-    }
-
-    &::before {
-      margin-left: -0.6875rem;
-      margin-bottom: -0.375rem;
-    }
-
-    &::after {
-      margin-bottom: -1.1875rem;
-    }
-
-    &:is(:hover, :focus-visible) {
-      &::before, &::after {
-        transform: translateX(0.5rem);
-      }
-    }
-  }
-
-  &.lib-hint-left {
-    &::before, &::after {
-      right: 100%;
-      bottom: 50%;
-    }
-
-    &::before {
-      margin-right: -0.6875rem;
-      margin-bottom: -0.375rem;
-    }
-
-    &::after {
-      margin-bottom: -1.1875rem;
-    }
-
-    &:is(:hover, :focus-visible) {
-      &::before, &::after {
-        transform: translateX(-0.5rem);
-      }
-    }
-  }
-
-  &[aria-label]::after {
-    content: attr(aria-label);
-  }
-
-  &[class*="lib-hint-top"]::before {
-    border-top-color: var(--color-accent);
-  }
-
-  &[class*="lib-hint-bottom"]::before {
-    border-bottom-color: var(--color-accent);
-  }
-
-  &[class*="lib-hint-left"]::before {
-    border-left-color: var(--color-accent);
-  }
-
-  &[class*="lib-hint-right"]::before {
-    border-right-color: var(--color-accent);
-  }
-
-  &:is(.lib-hint-sm, .lib-hint-md, .lib-hint-lg)::after {
-    white-space: normal;
-    line-height: 1.5;
-    word-wrap: break-word;
-  }
-
-  &.lib-hint-sm::after {
-    width: 5rem;
-  }
-
-  &.lib-hint-md::after {
-    width: 10rem;
-  }
-
-  &.lib-hint-lg::after {
-    width: 15rem;
-  }
-
-  &:is(:hover, :focus-visible) {
-    &::before, &::after {
-      visibility: visible;
-      opacity: 1;
-      transition-delay: 100ms;
-    }
-  }
-}

package/src/styles/Libraries/Pickr.css

@@ -1,13 +0,0 @@
-.pcr-app {
-  border-radius: var(--rounded);
-  overflow: hidden;
-
-  .dark & {
-    background: var(--color-body-secondary);
-
-    .pcr-interaction input {
-      background: var(--color-body-tertiary);
-      box-shadow: none;
-    }
-  }
-}

package/src/styles/Libraries/Ripple.css

@@ -1 +0,0 @@
-@import "winduum/src/libraries/ripple.css";

package/src/styles/Libraries/Tippy.css

@@ -1,73 +0,0 @@
-.tippy-content {
-  padding: 0;
-}
-
-.tippy-box {
-  background-color: transparent;
-  color: inherit;
-  box-shadow: none;
-  font-size: inherit;
-  line-height: inherit;
-
-  &[data-placement="bottom-end"] {
-    &[data-animation="scale"] {
-      transform-origin: top right;
-    }
-  }
-
-  &[data-placement="bottom-start"] {
-    &[data-animation="scale"] {
-      transform-origin: top left;
-    }
-  }
-}
-
-.tippy-svg-arrow {
-  fill: var(--color-body);
-}
-
-[data-tippy-root] {
-  &.is-full {
-    @media not all and (--media-md) {
-      inset: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      position: fixed !important;
-      transform: none !important;
-      visibility: visible !important;
-      pointer-events: none;
-      max-width: 100%;
-      background-color: color-mix(in srgb, var(--color-dark) 50%, transparent);
-      transition: var(--transition-opacity);
-      opacity: 0;
-
-      &:has(.tippy-content[data-state="visible"]) {
-        opacity: 1;
-      }
-
-      & .tippy-content {
-        pointer-events: auto;
-      }
-
-      & .tippy-box {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        transition-timing-function: ease;
-        transition-duration: 300ms;
-
-        &[data-state="hidden"] {
-          transform: translateY(100%);
-          opacity: 0;
-        }
-      }
-
-      .c-dropdown {
-        max-width: 100%;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-}

package/src/styles/Sections/+.css

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

package/src/styles/Ui/+.css

@@ -1,17 +0,0 @@
-@import "Badge.css";
-@import "Btn.css";
-@import "Check.css";
-@import "Control.css";
-@import "ControlSelect.css";
-@import "Dot.css";
-@import "Group.css";
-@import "Heading.css";
-@import "Image.css";
-@import "Info.css";
-@import "Label.css";
-@import "Link.css";
-@import "Notice.css";
-@import "Progress.css";
-@import "Switch.css";
-@import "Text.css";
-@import "Title.css";

package/src/styles/Ui/Badge.css

@@ -1,7 +0,0 @@
-@import "winduum/src/ui/badge/default.css";
-@import "winduum/src/ui/badge/sm.css";
-@import "winduum/src/ui/badge/lg.css";
-@import "winduum/src/ui/badge/bordered.css";
-@import "winduum/src/ui/badge/muted.css";
-@import "winduum/src/ui/badge/square.css";
-@import "winduum/src/ui/badge/circle.css";

package/src/styles/Ui/Btn.css

@@ -1,13 +0,0 @@
-@import "winduum/src/ui/btn/default.css";
-@import "winduum/src/ui/btn/sm.css";
-@import "winduum/src/ui/btn/lg.css";
-@import "winduum/src/ui/btn/loading.css";
-@import "winduum/src/ui/btn/wide.css";
-@import "winduum/src/ui/btn/bordered.css";
-@import "winduum/src/ui/btn/hover-fill.css";
-@import "winduum/src/ui/btn/gradient.css";
-@import "winduum/src/ui/btn/gradient-bordered.css";
-@import "winduum/src/ui/btn/muted.css";
-@import "winduum/src/ui/btn/raised.css";
-@import "winduum/src/ui/btn/square.css";
-@import "winduum/src/ui/btn/circle.css";

package/src/styles/Ui/Check.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/check.css";