@newlogic-digital/ui 3.0.1 → 3.1.0

package/src/styles/Utils/vars.css

@@ -1,79 +1,102 @@
 :root {
-  --z-10: 10;
-  --z-20: 20;
-  --z-30: 30;
-  --z-40: 40;
-  --z-50: 50;
+  --font-primary: "Poppins", sans-serif;
+  --font-secondary: "Poppins", sans-serif;
   --color-google: 219, 68, 55;
   --color-linkedin: 40, 103, 178;
   --color-youtube: 255, 0, 0;
   --color-instagram: 193, 53, 132;
   --color-twitter: 29, 161, 242;
   --color-facebook: 24, 119, 242;
+  --radius: 0.5rem;
+  --container-width: 75rem;
+  --container-width-sm: 50rem;
+  --container-padding: 5vw;
+  --font-bold: 700;
+  --font-semibold: 600;
+  --font-medium: 500;
+  --font-normal: 400;
+  --font-light: 300;
+  --font-thin: 200;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+  --transition: 0.3s;
   --transition-color: color var(--transition) ease 0s;
   --transition-background: background var(--transition) ease 0s;
   --transition-opacity: opacity var(--transition) ease 0s;
   --transition-transform: transform var(--transition) ease 0s;
   --transition-border: border-color var(--transition) ease 0s;
   --transition-shadow: box-shadow var(--transition) ease 0s;
+
+  @media (--media-t) {
+    --container-padding: 3rem;
+  }
 }
 
+/* @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: 88em);
-
-@custom-media --media-touch (max-width: 59.9375em);
+@custom-media --media-touch (max-width: 59.9375em);
+
+/* @custom-selector --theme */
+@custom-selector :--theme-dark [data-theme~="dark"];
+@custom-selector :--theme-light [data-theme~="light"];
+
+/* @custom-selector --size */
+@custom-selector :--size [data-size];
+@custom-selector :--size-base [data-size~="base"];
+@custom-selector :--size-xl [data-size~="xl"];
+@custom-selector :--size-lg [data-size~="lg"];
+@custom-selector :--size-md [data-size~="md"];
+@custom-selector :--size-sm [data-size~="sm"];
+@custom-selector :--size-xs [data-size~="xs"];
+
+/* @custom-selector --state */
+@custom-selector :--state-active [data-state~="active"];
+@custom-selector :--state-focus [data-state~="focus"];
+@custom-selector :--state-loading [data-state~="loading"];
+@custom-selector :--state-valid [data-state~="valid"];
+@custom-selector :--state-invalid [data-state~="invalid"];
+@custom-selector :--state-placeholder [data-state~="placeholder"];
+@custom-selector :--state-hiding [data-state~="hiding"];
+
+/* @custom-selector --type */
+@custom-selector :--type-square [data-type~="square"];
+@custom-selector :--type-square-m [data-type~="m:square"];
+@custom-selector :--type-circle [data-type~="circle"];
+@custom-selector :--type-circle-m [data-type~="m:circle"];
+@custom-selector :--type-outline [data-type~="outline"];
+@custom-selector :--type-number [data-type~="number"];
+@custom-selector :--type-color [data-type~="color"];
+@custom-selector :--type-file [data-type~="file"];
+@custom-selector :--type-scrollable [data-type~="scrollable"];
+@custom-selector :--type-center [data-type~="center"];

package/src/styles/Utils/vendor.css

@@ -1,2 +1 @@
-@import url(https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css);
-@import url(https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.0.3/dist/css/datepicker.min.css);
+/* empty */

package/src/styles/main.css

@@ -1,10 +1,13 @@
+@import "Utils/normalize.css";
 @import "Utils/vendor.css";
-@import 'Utils/theme/main.css';
-@import 'Utils/reference.css';
+@import "Utils/theme/main.css";
+@import "Utils/vars.css";
 @import "Utils/default.css";
+@import "Utils/icons.css";
+@import "Utils/keyframes.css";
 @import "Layout/+.css";
 @import "Components/+.css";
 @import "Ui/+.css";
 @import "Sections/+.css";
 @import "Libraries/+.css";
-@import "Utils/print.css";
+@import "Utils/print.css";

package/src/styles/tailwind.css

@@ -1,5 +1,2 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "Utils/tailwind/base.css";
 @import "Utils/tailwind/gutters.css";
-@import "Utils/tailwind/content.css";

package/src/templates/Components/CookieConsent.twig

@@ -0,0 +1,30 @@
+{% set center = true %}
+{% set closable = false %}
+
+<div class="c-cookieconsent" data-type="{% if center %}center{% endif %} {% if closable %}closable{% endif %}">
+    <div class="wrp bg-background">
+        <div class="wrp_c_head mt-2">
+            {% if true %}
+                <div class="ui-image w-40 mb-6">
+                    <img src="{{ placeholder(160, 46) }}">
+                </div>
+            {% endif %}
+            <div class="ui-heading">Privacy settings and&nbsp;cookies&nbsp;🍪</div>
+        </div>
+        <div class="wrp_c_body">
+            <div class="ui-text">
+                <p>The Website uses cookies to provide services, personalize ads and analyze traffic.</p>
+                <p></p>
+                <p>By the following option, you agree to the use of cookies and the use of data about your behavior on the website to display targeted&nbsp;advertising. </p>
+            </div>
+        </div>
+        <div class="wrp_c_foot {% if center %}flex-col space-y-6{% else %}space-x-10{% endif %}">
+            <div class="col w-full">
+                <button class="ui-btn w-full" data-size="lg" aria-label="Souhlasím s použitím cookies" data-lib-cookieconsent-approve>Yes, I agree</button>
+            </div>
+            <div class="col {% if not center %}pr-6{% endif %}">
+                <a href="/gdpr" class="ui-link" title="více informací & nastavení"><span>Information and settings</span></a>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -1,11 +1,15 @@
 <div class="c-dialog c-dialog-basic" data-size="sm" data-type="scrollable">
     <form class="wrp_dialog">
-        <button class="elm_dialog_close icon-close" type="button" data-action="click->lib-dialog#hide"></button>
+        <button class="elm_dialog_close 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-wsw">
+            <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 %}
@@ -13,7 +17,7 @@
         </div>
         <div class="wrp_dialog_foot">
             <div class="col m:col-12">
-                <button class="ui-btn" type="button" data-action="click->lib-dialog#hide"><span>Pokračovat</span></button>
+                <button class="ui-btn" type="button" data-action="click->lib-dialog#hide">Continue</button>
             </div>
         </div>
     </form>

package/src/templates/Layout/Header.twig

@@ -0,0 +1,42 @@
+<header id="l-header" class="{% if headerNormal %}is-l-header-normal{% endif %}" data-controller="l-header">
+    <div class="wrp_header_body row-x">
+        <div class="col">
+            <a href="/" class="elm_header_logo" title="Newlogic UI">
+                <svg class="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>
+        <div class="col ml-auto t:hidden">
+            <button class="elm_header_menu" data-action="click->lib-drawer#show" aria-label="Menu">
+                <svg class="icon"><use href="#icon-menu"></use></svg>
+            </button>
+        </div>
+        <div class="col m:hidden">
+            <nav class="elm_header_nav row">
+                {% for page in layout.nav %}
+                    <div class="col">
+                        <a href="{{ page.url }}" title="{{ page.name }}" class="ui-link after:content-none">{{ page.name }}</a>
+                    </div>
+                {% endfor %}
+            </nav>
+        </div>
+        <div class="col m:hidden flex-row items-center space-x-6 ml-auto">
+            <div class="col">
+                <button class="ui-icon" data-action="click->lib#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="col">
+                <div class="elm_header_cta">
+                    <a href="https://www.newlogic.cz" title="newlogic.cz" class="ui-btn bg-secondary" target="_blank" rel="noopener"><span>Newlogic.cz</span></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>

package/src/templates/Layout/Main.twig

@@ -1,72 +1,55 @@
 <!DOCTYPE html>
-<html class="no-js no-sw" lang="{{ lang }}">
-<head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>{{ page.title }}</title>
-
-    <meta name="keywords" content="">
-    <meta name="description" content="">
-    <meta name="author" content="" />
-    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover" />
-    <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
-    <meta name="format-detection" content="telephone=no">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-title" content="{{ page.title }}">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-
-    {% for url in prefetch %}
-        <link rel="dns-prefetch" href="{{ url }}">
-    {% endfor %}
-
-    {% if config.serve.mode == "not" %}
-        {% if assets.css.tailwind|exists %}
-        <link rel="stylesheet" href="{{ assets.css.tailwind }}" />
+<html class="no-js sw" lang="{{ lang }}">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>{{ page.title }}</title>
+
+        <meta name="keywords" content="">
+        <meta name="description" content="">
+        <meta name="author" content="">
+        <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
+        <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
+        <meta name="format-detection" content="telephone=no">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-title" content="{{ page.title }}">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+
+        {% for url in prefetch %}
+            <link rel="dns-prefetch" href="{{ url }}">
+        {% endfor %}
+
+        {% for url in assets.css.all %}
+            <link rel="stylesheet" href="{{ url|asset }}">
+        {% endfor %}
+
+        {% if config.serve.mode == 'dev' %}
+            <link rel="stylesheet" href="{{ attribute(assets.css, 'tailwind.src') }}">
         {% endif %}
-        <script type="module" noshim>
-            import "{{ attribute(assets.css, 'icons.src') }}";
-            import "{{ attribute(assets.css, 'core.src') }}";
-        </script>
-    {% else %}
-        {% include "../Layout/Preload.twig" %}
-    {% endif %}
-
-    <script src="{{ assets.js.lazysizes }}" async></script>
 
-    <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') }
-        document.documentElement.className = document.documentElement.className.replace("no-js", "js"); matchMedia("(hover: hover) and (pointer: fine)").matches && document.documentElement.classList.add("no-touch");/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add("mobile");document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, ""));!function(e) { var t; e.match(/(msie|trident)/i) ? document.documentElement.classList.add("ie") : e.match(/edge/) ? document.documentElement.classList.add("edge") : (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0]) } (navigator.userAgent.toLowerCase());
-    </script>
+        <script src="{{ assets.js.lazysizes }}" async></script>
 
-    {% if config.serve.mode == "dev" %}
-        <script src="{{ attribute(assets.js, 'es-module-shims') }}" defer></script>
-        <script type="importmap-shim">
-            {{ fetch (assets.js.importmap) }}
-        </script>
-        <script src="{{ attribute(assets.js, 'core.src') }}" type="module-shim"></script>
-    {% else %}
         <script>
-            typeof String.prototype.matchAll !== "undefined" ?
-                document.write('<script src="{{ assets.js.core|asset }}" type="module"><\/script>') :
-                document.write('<script src="{{ assets.js.polyfills|asset }}"><\/script><script>requirejs([\'{{ attribute(assets.js, 'core.es5')|asset }}\'])<\/script>')
+            (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
+            document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch'); /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile'); document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, '')); !function(e) { let t; (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0]) } (navigator.userAgent.toLowerCase());
         </script>
-    {% endif %}
-</head>
 
-<body class="{% if preload %}is-body-preload{% else %}is-body-loaded{% endif %}" data-controller="lib lib-dialog lib-drawer lib-fetch">
-    {% if preload and config.serve.mode != "dev" %}
-        <svg class="l-spinner" width="32" height="32" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(var(--color-primary))" d="M256 511.998c-68.38 0-132.67-26.629-181.02-74.98C26.629 388.658 0 324.378 0 255.998c0-48.42 13.591-95.57 39.303-136.35 25-39.648 60.332-71.686 102.18-92.65l21.5 42.916c-34.02 17.044-62.74 43.095-83.074 75.334-20.873 33.11-31.906 71.4-31.906 110.75 0 114.69 93.309 208 208 208s208-93.309 208-208c0-39.346-11.033-77.641-31.905-110.74-20.34-32.249-49.06-58.299-83.08-75.342L370.518 27c41.846 20.964 77.179 53.002 102.18 92.65C498.409 160.429 512 207.577 512 256c0 68.38-26.629 132.67-74.98 181.02C388.667 485.371 324.38 512 256 512z"/></svg>
-    {% endif %}
-    <div class="l-default">
-        {% include "../Layout/Header.twig" %}
-        <main id="l-main" class="transition-fade">
-            {% include "../Utils/sections.twig" with {sections: page.body} %}
-        </main>
-        {% include "../Layout/Footer.twig" %}
-    </div>
+        <script src="{{ assets.js.main|asset }}" type="module"></script>
+    </head>
+
+    <body data-controller="lib lib-dialog lib-drawer lib-fetch">
+        <div class="l-default">
+            {% include '../Layout/Header.twig' %}
+            <main id="l-main" class="transition-fade">
+                {% include '../Utils/sections.twig' with {sections: page.body} %}
+            </main>
+            {% include '../Layout/Footer.twig' %}
+        </div>
+
+        {% if layout.cookies %}
+            {% include '../Components/CookieConsent.twig' %}
+        {% endif %}
 
-    {% if layout.cookies %}
-        {% include "../Components/CookieConsent.twig" %}
-    {% endif %}
-</body>
-</html>
+        {{ fetch ('/src/icons.svg') }}
+    </body>
+</html>

package/src/templates/Sections/Gdpr.twig

@@ -0,0 +1,64 @@
+<div class="s-text py-14">
+    <div class="container">
+        <div class="d:col-10 ml-auto mr-auto">
+            <div class="wrp_s_head mb-8">
+                <h2 class="ui-heading">Cookies settings</h2>
+            </div>
+            <div class="wrp_s_body">
+                <form class="c-form-cookieconsent" data-controller="c-form-cookieconsent" autocomplete="off">
+                        <div class="wrp_form_head">
+                            <div class="ui-text">
+                                <h4>Cookies settings</h4>
+                                <p>
+                                    Lorem ipsum
+                                </p>
+                                <p></p>
+                            </div>
+                        </div>
+                        <div class="wrp_form_head">
+                            <div class="ui-text">
+                                <h5>Necessary cookies</h5>
+                                <p>
+                                    Lorem ipsum
+                                </p>
+                            </div>
+                        </div>
+                        <div class="wrp_form_body">
+                            <label class="ui-switch" data-controller="ui-radio">
+                                <input type="checkbox" value="decline" checked disabled>
+                            </label>
+                        </div>
+                        <div class="wrp_form_head">
+                            <div class="ui-text">
+                                <h5>Performance cookies</h5>
+                                <p>
+                                    Lorem ipsum
+                                </p>
+                            </div>
+                        </div>
+                        <div class="wrp_form_body">
+                            <label class="ui-switch" data-controller="ui-radio">
+                                <input type="checkbox" value="performance">
+                            </label>
+                        </div>
+                        <div class="wrp_form_head">
+                            <div class="ui-text">
+                                <h5>Marketing cookies</h5>
+                                <p>
+                                    Lorem ipsum
+                                </p>
+                            </div>
+                        </div>
+                        <div class="wrp_form_body">
+                            <label class="ui-switch" data-controller="ui-radio">
+                                <input type="checkbox" value="marketing">
+                            </label>
+                        </div>
+                        <div class="wrp_form_foot">
+                            <button class="ui-btn" data-action="click->lib#ripple"><span>Save settings</span></button>
+                        </div>
+                    </form>
+            </div>
+        </div>
+    </div>
+</div>