@newlogic-digital/ui 3.7.5 → 4.2.0

package/src/styles/Layout/Main.css

@@ -1,31 +0,0 @@
-html {
-  scroll-padding-top: var(--l-scroll-padding-top);
-
-  @media (min-width: 60em) and (max-width: 75.9375rem) {
-    font-size: 87.5%;
-  }
-}
-
-body {
-  background-color: var(--color-body);
-  display: flex;
-  flex-direction: column;
-  overflow-x: clip;
-}
-
-.l-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-
-  &.swup-transition {
-    html.swup-enabled & {
-      transition: opacity 0.15s;
-      opacity: 1;
-    }
-
-    html.is-animating & {
-      opacity: 0;
-    }
-  }
-}

package/src/styles/Layout/Nav.css

@@ -1,23 +0,0 @@
-.l-nav {
-  .c-drawer-content {
-    padding: 2rem;
-  }
-
-  [data-part~="logo"] {
-    display: flex;
-    padding: 0.75rem 0 2.5rem;
-  }
-
-  [data-part~="nav"] {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: flex-start;
-
-    & a {
-      padding: 0.5rem 0;
-      font-size: 1.75rem;
-      display: block;
-    }
-  }
-}

package/src/styles/Libraries/+.css

@@ -1,2 +0,0 @@
-@import "Datepicker.css";
-@import "Pickr.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/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/Sections/+.css

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

package/src/styles/Ui/+.css

@@ -1,16 +0,0 @@
-@import "Badge.css";
-@import "Btn.css";
-@import "Check.css";
-@import "Control.css";
-@import "ControlSelect.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,8 +0,0 @@
-@import "winduum/src/ui/badge/default.css";
-@import "winduum/src/ui/badge/default-props.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,14 +0,0 @@
-@import "winduum/src/ui/btn/default.css";
-@import "winduum/src/ui/btn/default-props.css";
-@import "winduum/src/ui/btn/lg.css";
-@import "winduum/src/ui/btn/sm.css";
-@import "winduum/src/ui/btn/interactive.css";
-@import "winduum/src/ui/btn/interactive-props.css";
-@import "winduum/src/ui/btn/loading.css";
-@import "winduum/src/ui/btn/loading-props.css";
-@import "winduum/src/ui/btn/wide.css";
-@import "winduum/src/ui/btn/bordered.css";
-@import "winduum/src/ui/btn/ghosted.css";
-@import "winduum/src/ui/btn/muted.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/index.css";

package/src/styles/Ui/Control.css

@@ -1,57 +0,0 @@
-@import "winduum/src/ui/control/default.css";
-@import "winduum/src/ui/control/default-props.css";
-@import "winduum/src/ui/control/interactive.css";
-@import "winduum/src/ui/control/interactive-props.css";
-@import "winduum/src/ui/control/file.css";
-@import "winduum/src/ui/control/select.css";
-@import "winduum/src/ui/control/select-props.css";
-@import "winduum/src/ui/control/icon.css";
-@import "winduum/src/ui/control/icon-props.css";
-@import "winduum/src/ui/control/floating.css";
-@import "winduum/src/ui/control/floating-props.css";
-@import "winduum/src/ui/control/invalid.css";
-
-.ui-control {
-  --ui-control-font-size: var(--text-sm);
-
-  &.active label,
-  :where(input, textarea):is(:focus, [placeholder]) ~ label,
-  :where(select):is([data-placeholder]) ~ label,
-  &:has(.-active-) label {
-    transform: translateY(calc(var(--ui-control-label-translate-y) * -1)) scale(var(--ui-control-label-scale));
-    opacity: var(--ui-control-label-focus-opacity, 0.5);
-  }
-
-  &:has(label):not(.active) select:not([data-placeholder]) {
-    font-size: 0;
-    height: inherit;
-
-    & option {
-      font-size: var(--ui-control-font-size);
-    }
-  }
-
-  :where(.color) {
-    width: var(--ui-control-icon-size);
-    height: var(--ui-control-icon-size);
-    border-radius: 50%;
-    overflow: hidden;
-    display: block;
-    border: 1px solid rgb(0 0 0 / 15%);
-  }
-
-  :where([type="number"]) {
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-    }
-  }
-
-  :where(input) {
-    &::-webkit-calendar-picker-indicator {
-      display: none;
-    }
-  }
-}

package/src/styles/Ui/ControlSelect.css

@@ -1,57 +0,0 @@
-.ui-control[data-controller~="ui-control-select"] {
-  position: relative;
-  cursor: pointer;
-
-  & select {
-    pointer-events: none;
-  }
-
-  & div[aria-hidden] {
-    grid-area: c-control;
-    will-change: transform;
-    border-radius: inherit;
-    position: absolute;
-    background-color: var(--color-body);
-    z-index: 100;
-    inset-inline: 0;
-    top: 100%;
-    margin-top: 0.5rem;
-    border: 1px solid color-mix(in srgb, currentcolor 10%, transparent);
-    transform: scaleY(0);
-    opacity: 0;
-    transition: var(--transition-opacity), var(--transition-transform);
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-    transition-duration: 200ms;
-    backface-visibility: hidden;
-    transform-origin: center top;
-    user-select: none;
-    max-height: 12rem;
-    overflow-y: auto;
-    box-shadow: 0 0.15em 1.5em 0 color-mix(in srgb, var(--color-dark) 5%, transparent), 0 0 1em 0 color-mix(in srgb, var(--color-dark) 5%, transparent);
-    padding: 0.375rem;
-    color: currentcolor;
-    cursor: default;
-
-    & [data-option] {
-      padding: calc(var(--ui-control-px) / 1.5) var(--ui-control-px);
-      cursor: pointer;
-      transition: var(--transition-background);
-      font-size: var(--ui-control-font-size);
-      border-radius: inherit;
-
-      &[data-disabled] {
-        opacity: 0.5;
-        pointer-events: none;
-      }
-
-      &:is(:hover, :focus) {
-        background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
-      }
-    }
-  }
-
-  &:focus-within select ~ div[aria-hidden] {
-    opacity: 1;
-    transform: none;
-  }
-}

package/src/styles/Ui/Group.css

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

package/src/styles/Ui/Heading.css

@@ -1,4 +0,0 @@
-@import "winduum/src/ui/heading/default.css";
-@import "winduum/src/ui/heading/default-props.css";
-@import "winduum/src/ui/heading/sm.css";
-@import "winduum/src/ui/heading/lg.css";

package/src/styles/Ui/Image.css

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

package/src/styles/Ui/Info.css

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

package/src/styles/Ui/Label.css

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

package/src/styles/Ui/Link.css

@@ -1,8 +0,0 @@
-@import "winduum/src/ui/link/default.css";
-@import "winduum/src/ui/link/interactive.css";
-@import "winduum/src/ui/link/interactive-props.css";
-
-.ui-link {
-  --ui-link-font-weight: var(--font-medium);
-  --ui-link-font-size: var(--text-sm);
-}

package/src/styles/Ui/Notice.css

@@ -1,9 +0,0 @@
-@import "winduum/src/ui/notice/index.css";
-
-.ui-notice {
-  align-items: flex-start;
-
-  hr {
-    width: 100%;
-  }
-}

package/src/styles/Ui/Progress.css

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

package/src/styles/Ui/Switch.css

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

package/src/styles/Ui/Text.css

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

package/src/styles/Ui/Title.css

@@ -1,4 +0,0 @@
-@import "winduum/src/ui/title/default.css";
-@import "winduum/src/ui/title/default-props.css";
-@import "winduum/src/ui/title/sm.css";
-@import "winduum/src/ui/title/lg.css";

package/src/styles/Utils/+.css

@@ -1,6 +0,0 @@
-@import "breakpoints.css";
-@import "config.css";
-@import "default.css";
-@import "keyframes.css";
-@import "theme/+.css";
-@import "utilities.css";

package/src/styles/Utils/config.css

@@ -1,16 +0,0 @@
-@import "winduum/src/base/config/font.css";
-@import "winduum/src/base/config/mask.css";
-@import "winduum/src/base/config/rounded.css";
-@import "winduum/src/base/config/spacing.css";
-@import "winduum/src/base/config/text.css";
-@import "winduum/src/base/config/transition.css";
-@import "winduum/src/base/config/z.css";
-
-:root, :host {
-  --container: min(100% - (var(--container-padding) * 2), var(--container-width));
-  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
-  --container-width: 80rem;
-  --container-lg-width: 90rem;
-  --container-padding: 5vw;
-  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
-}

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

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

package/src/styles/Utils/utilities.css

@@ -1,42 +0,0 @@
-@import "winduum/src/utilities/common.css";
-@import "winduum/src/utilities/container/default.css";
-@import "winduum/src/utilities/ripple/index.css";
-@import "winduum/src/utilities/skeleton/index.css";
-@import "winduum/src/utilities/underline.css";
-@import "winduum/src/utilities/swap/index.css";
-
-.container {
-  width: var(--container);
-  margin-inline: auto;
-}
-
-.reveal {
-  opacity: 0;
-  transition-property: var(--transition);
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: 0.75s;
-  will-change: transform;
-
-  @media (prefers-reduced-motion) {
-    opacity: 1;
-    transform: none;
-  }
-
-  @media print {
-    opacity: 1;
-    transform: none;
-  }
-
-  &:is(.in), .no-js & {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.no-scrollbar {
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

package/src/templates/Components/Dialog/Basic.latte

@@ -1,24 +0,0 @@
-<dialog class="c-dialog">
-    <form class="c-dialog-content">
-        <div class="flex justify-between">
-            <h2 class="ui-heading">Info</h2>
-            <button class="ui-btn square ghosted accent-main" type="button" data-action="click->lib-dialog#close">
-                <svg>
-                    <use href="#icon-x-mark"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="py-4">
-            <div class="ui-text">
-                {foreach range(1, 44) as $i}
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
-                {/foreach}
-            </div>
-        </div>
-        <div class="flex">
-            <div class="col max-md:w-full">
-                <button class="ui-btn" type="button" data-action="click->lib-dialog#close">Continue</button>
-            </div>
-        </div>
-    </form>
-</dialog>

package/src/templates/Components/Dialog/CookieConsent.latte

@@ -1,27 +0,0 @@
-{var $center = true}
-
-<dialog class="c-dialog c-dialog-cookieconsent {if $center}center{/if}" data-controller="c-dialog-cookieconsent">
-    <div class="c-dialog-content">
-        <div class="mt-2 mb-4 md:mb-6">
-            {if true}
-                <div class="ui-image w-40 my-4">
-                    <img src="{placeholder(160, 46)}">
-                </div>
-            {/if}
-            <div class="ui-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
-        </div>
-        <div class="ui-text">
-            <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
-            <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
-        </div>
-        <div class="flex-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
-            <div class="flex flex-col w-full">
-                <button class="ui-btn lg w-full" data-action="click->c-dialog-cookieconsent#approve">Ano, souhlasím</button>
-            </div>
-            <div class="flex w-full gap-4">
-                <a class="ui-btn ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
-                <button class="ui-btn ghosted lg accent-main flex-1 px-4" data-action="click->c-dialog-cookieconsent#decline"><span>Nesouhlasím</span></button>
-            </div>
-        </div>
-    </div>
-</dialog>

package/src/templates/Layout/Header.latte

@@ -1,38 +0,0 @@
-<header class="l-header flex-center" data-controller="l-header">
-    <a href="/" class="mr-12" title="Newlogic UI" data-l-header-target="logo" data-part="logo">
-        <svg class="w-auto h-6" fill="currentColor" viewBox="0 0 194 32">
-            <path d="M121.152 0a2.813 2.813 0 0 0-2.805 2.626l.001.009a2.81 2.81 0 0 0 5.608-.009v-.008A2.81 2.81 0 0 0 121.151 0ZM70.216.103V25.34h4.628V.103Zm95.062 1.751v13.152c0 6.505 4.044 10.9 10.162 10.9 5.978 0 9.952-4.395 9.952-10.9V1.854h-3.763v13.152c0 4.395-2.496 7.279-6.189 7.279-3.868 0-6.4-2.884-6.4-7.28V1.856Zm24.077 0v23.56h3.763V1.855ZM0 1.854V25.34h4.767V10.268L17.773 25.34h3.996V1.854H17v15.494L3.996 1.854H0Zm105.945 5.448a8.498 8.498 0 0 0-.503 16.98h-.024.025a8.382 8.382 0 0 0 5.503-1.606v.28l-.001-.016a4.528 4.528 0 0 1-4.873 4.889h.011a5.358 5.358 0 0 1-4.778-2.524l-3.746 2.84c1.508 2.418 4.45 3.855 8.517 3.855 5.645 0 9.36-2.979 9.36-8.342l-.04-15.809h-4.45v1.08a8.46 8.46 0 0 0-5-1.627zm-73.61.011a9.28 9.28 0 1 0 .335 18.553l-.023-.001c.162.009.325.013.489.013 3.609 0 6.701-2.21 8.018-5.41l-4.138-.876-.011.023a4.467 4.467 0 0 1-4.335 2.29h-.007a4.532 4.532 0 0 1-4.373-4.066h13.32l-.002-1.576v-.017a9.28 9.28 0 0 0-9.273-8.933zm102.628.01-.137.002h.006-.117a9.273 9.273 0 1 0 .112 18.543h-.015c.097.003.195.005.292.005 4.059 0 7.473-2.757 8.486-6.562l-4.282-1.086-.006.03a4.447 4.447 0 0 1-4.475 3.371h-.01a5.033 5.033 0 0 1 .21-10.064 4.18 4.18 0 0 1 4.113 3.475l4.451-1.262-.016-.064a8.998 8.998 0 0 0-8.611-6.387zm-48.503.099c-.116 0-.231.002-.33.006h-.053a9.487 9.487 0 1 0 9.482 9.184v-.09a9.1 9.1 0 0 0-9.1-9.1zm-44.884.422 5.818 17.53h4.172l3.47-10.304 3.435 10.305h4.17l5.823-17.527h-4.59l-3.47 10.797-3.577-10.797h-3.613L49.64 18.61 46.167 7.844h-4.591zm77.265.01V25.34l4.628.005V7.853Zm-12.871 3.352c.099 0 .197.004.282.009l.121-.002a4.577 4.577 0 0 1 4.577 4.559l-.001-.002v.001a4.577 4.577 0 0 1-4.697 4.558 4.566 4.566 0 1 1-.282-9.123zm-73.075.147c1.95 0 3.578 1.37 3.982 3.226h-8.443l.008-.03a4.39 4.39 0 0 1 4.299-3.193h-.008l.162-.003zm53.184.48a5.002 5.002 0 0 1 4.994 4.779h-.001a5.046 5.046 0 0 1-4.94 5.219h-.053a5 5 0 0 1 0-9.999zm64.47 6.02-.066.001a3.945 3.945 0 1 0 3.945 3.965l.001-.085a3.88 3.88 0 0 0-3.88-3.88zm-.056.908a3.088 3.088 0 0 1 3.087 3.058v.039c0 1.7-1.378 3.078-3.078 3.078h-.02a3.087 3.087 0 0 1 .01-6.175zm-1.475 1.147v3.589h.907v-1.104h.494l.907 1.104h1.071l-1.006-1.204h-.001l.009-.003c.477-.17.82-.626.82-1.162v-.016c0-.71-.552-1.204-1.46-1.204h-1.74zm.92.77h.802c.374 0 .612.159.612.453 0 .295-.237.493-.612.493h-.803z"/>
-        </svg>
-    </a>
-    <div class="flex-col ml-auto md:hidden">
-        <button
-            class="l_header_menu"
-            aria-label="Menu"
-            data-action="click->controller#delegate"
-            data-controller-name-param="c-drawer"
-            data-controller-action-param="toggle"
-        >
-            <svg class="size-6"><use href="#icon-bars-3"></use></svg>
-        </button>
-    </div>
-    <nav class="flex-center gap-8 max-md:[.l-header_&]:hidden" data-l-header-target="nav" data-part="nav">
-        <a href="{$page->url}" title="{$page->name}" class="ui-link" n:foreach="$layout->nav as $page">{$page->name}</a>
-    </nav>
-    <div class="flex max-md:hidden items-center gap-x-6 ml-auto">
-        <div class="flex-col">
-            <button class="ui-btn square ghosted accent-light" data-action="utils#darkMode">
-                <svg class="icon-moon dark:hidden">
-                    <use href="#icon-moon"></use>
-                </svg>
-                <svg class="icon-sun hidden dark:block">
-                    <use href="#icon-sun"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="flex-col">
-            <div class="l_header_cta">
-                <a href="https://www.newlogic.cz" title="newlogic.cz" class="ui-btn accent-light" target="_blank" rel="noopener"><span>Newlogic.cz</span></a>
-            </div>
-        </div>
-    </div>
-</header>