diff --git a/.gitignore b/.gitignore
index 1075984..f5bd4d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,3 @@ temp/*
/public/assets/
/public/*.html
/public/*.json
-/public/emails/*.html
-#!.gitkeep
\ No newline at end of file
diff --git a/.stylelintrc b/.stylelintrc
index a445d7c..7427483 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,13 +1,17 @@
{
"extends": "stylelint-config-standard",
"rules": {
- "no-descending-specificity": null,
- "font-family-no-missing-generic-family-keyword": [true, {"ignoreFontFamilies": ["iconfont"]}],
- "at-rule-no-unknown": [true, {"ignoreAtRules": ["mixin", "define-mixin", "layer", "variants"]}],
+ "at-rule-no-unknown": [true, {"ignoreAtRules": ["layer", "tailwind"]}],
"selector-list-comma-newline-after": "always-multi-line",
"string-quotes": "double",
"comment-empty-line-before": ["always", {"except": ["first-nested"], "ignore": ["stylelint-commands"], "ignoreComments": ["/^clean-css/"]}],
- "length-zero-no-unit": [true, {"ignore": ["custom-properties"]}]
+ "length-zero-no-unit": [true, {"ignore": ["custom-properties"]}],
+ "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }],
+ "alpha-value-notation": "number",
+ "property-no-vendor-prefix": [true, { "ignoreProperties": "appearance" }],
+ "number-max-precision": [4, { "ignoreProperties": "letter-spacing" }],
+ "max-line-length": 140,
+ "selector-class-pattern": null
},
- "ignoreFiles": ["src/icons/*.css", "**/+.css"]
-}
\ No newline at end of file
+ "ignoreFiles": ["**/+.css", "src/styles/Utils/normalize.css", "src/styles/Ui/Input.css"]
+}
diff --git a/CHANGELOG b/CHANGELOG
index 750fd42..904351c 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,12 @@
+v3.1.0
+* feat: tailwind v3 update
+* feat: stimulus v3 update
+* feat: iconfont replaced with svg icons
+* feat: updated lib-cookieconsent
+* feat: improved lib-anchor
+* feat: most of callbacks replaced with promises
+* feat: complete refactor of CSS and JS
+
v3.0.13
* feat: recaptcha enterprise
diff --git a/README.md b/README.md
index 731bb8e..a488c49 100644
--- a/README.md
+++ b/README.md
@@ -10,9 +10,7 @@
# 🎨 Newlogic UI
-> v3 is still in early development
-
-Modern and modular CSS framework with the best principles.
+Lightweight, modern and modular CSS framework with the best principles
- 💡 Modern
- 📦 Modular
@@ -20,7 +18,9 @@ Modern and modular CSS framework with the best principles.
- ✨️ Progressive
- ⚡️ Fast
-Newlogic UI is component framework with simple syntax. Inspired by popular frameworks like Bootstrap and Bulma. It uses Tailwind CSS for utility classes. The modern approach comes first.
+Newlogic UI is component framework with easy syntax. Modern approach of CSS properties, enriched with utility classes from Tailwind. Inspired by favourite frameworks like Boostrap and Bulma
+
+Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP
## ⚙️ Under the hood
* **[Newlogic Core](https://core.newlogic.cz/)** - set of tools that can be used to create modern web applications
@@ -32,7 +32,7 @@ Newlogic UI is component framework with simple syntax. Inspired by popular frame
* **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
-The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS code and contains other tools for web development. The source code is written in way that it can be used with other tools or a completely different environment than NodeJS, such as Deno. In general the rule is that the source code should be executable in current or future browsers, so it's written with W3C standards in mind. The framework is modular and you can really use only what is needed for your project.
+The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.
## 🪄 Instalation
@@ -56,7 +56,6 @@ $ npm i @newlogic-newlogic/ui
```css
/* main.css or individual modules */
-@import "node_modules/@newlogic/ui/src/icons/style.css"
@import "node_modules/@newlogic/ui/src/styles/main.css"
```
@@ -75,10 +74,7 @@ import "node_modules/@newlogic/ui/src/scripts/main.js"
Each Newlogic Core project has to have config via `gulpfile.js`, docs - [core.newlogic.cz](https://core.newlogic.cz/)
## 📌 Future plans
-- finishing docs and translating it to english
-- lighthouse optimization
-- upgrading form elements
-- new elements - dropdown, notificaton, snack and more
+- performance optimization
## Licence
GNU GPLv3
diff --git a/gulpfile.js b/gulpfile.js
index 121c106..686435a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,7 +1,12 @@
import { defineConfig } from '@newlogic-digital/core'
-import postcssMixins from 'postcss-mixins'
+import cms from "./src/module.cms.js"
export default defineConfig({
+ config: true,
+ modules: {cms},
+ serve: {
+ https: true
+ },
scripts: {
importResolution: {
directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Utils/Functions', 'Ui']
@@ -13,11 +18,12 @@ export default defineConfig({
},
styles: {
purge: {
- content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'temp/cdn/*.js'],
+ enabled: true,
+ content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'www/templates/**/*.tpl', 'temp/cdn/*.js', 'admin_ex/js/templates/*.html', 'index.html'],
options: {
safelist: {
standard: [/(class|is-|to-|grecaptcha)/],
- deep: [/(ui-wsw|wsw|datepicker)/]
+ deep: [/(ui-text|wsw|datepicker)/]
}
}
},
@@ -29,164 +35,7 @@ export default defineConfig({
},
themePath: 'Utils/theme/{THEME}.{FORMAT}',
postcss: {
- extend: [postcssMixins]
+ extend: []
}
- },
- tailwind: {
- darkMode: 'class', // or "media" or "class"
- corePlugins: {
- preflight: false,
- container: false,
- ringWidth: false,
- ringColor: false,
- ringOpacity: false,
- ringOffsetWidth: false,
- ringOffsetColor: false,
- gradientColorStops: false,
- backgroundImage: false,
- boxShadow: false
- },
- theme: {
- extend: {
- colors: {
- background: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-background), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-background), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-background))'
- },
- default: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-default), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-default), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-default))'
- },
- invert: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-invert), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-invert), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-invert))'
- },
- light: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-light), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-light), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-light))'
- },
- dark: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-dark), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-dark), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-dark))'
- },
- primary: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-primary), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-primary))'
- },
- secondary: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-secondary), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-secondary), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-secondary))'
- },
- warning: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-warning), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-warning), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-warning))'
- },
- error: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-error), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-error), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-error))'
- },
- info: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-info), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-info), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-info))'
- },
- success: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(var(--color-success), ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(var(--color-success), var(${opacityVariable}, 1))`
- }
- return 'rgb(var(--color-success))'
- }
- }
- },
- fontFamily: {
- primary: 'var(--font-primary)',
- secondary: 'var(--font-secondary)'
- },
- fontWeight: {
- light: 'var(--weight-light)',
- normal: 'var(--weight-normal)',
- medium: 'var(--weight-medium)',
- semibold: 'var(--weight-semibold)',
- bold: 'var(--weight-bold)',
- extrabold: 'var(--weight-extrabold)'
- },
- zIndex: {
- 0: 0,
- 10: 'var(--z-10)',
- 20: 'var(--z-20)',
- 30: 'var(--z-30)',
- 40: 'var(--z-40)',
- 50: 'var(--z-50)',
- auto: 'auto'
- },
- screens: {
- m: { max: '47.9375em' },
- t: '48em',
- d: '60em',
- w: '76em',
- hd: '88em',
- touch: { max: '59.9375em' }
- }
- },
- variants: {
- extend: {
- backgroundColor: ['checked'],
- borderColor: ['checked'],
- textColor: ['checked']
- }
- },
- plugins: []
}
})
diff --git a/package.json b/package.json
index b68e2aa..dc50873 100644
--- a/package.json
+++ b/package.json
@@ -1,29 +1,27 @@
{
"name": "@newlogic-digital/ui",
- "version": "3.0.13",
+ "version": "3.1.0",
"type": "module",
"main": "gulpfile.js",
"author": "New Logic Studio s.r.o.",
- "description": "Modern and modular CSS framework with the best principles",
+ "description": "Lightweight, modern and modular CSS framework with the best principles",
"license": "GNU GPLv3",
"scripts": {
- "utils:eslint": "eslint 'src/**/*.js' --fix",
- "utils:stylelint": "stylelint 'src/**/*.css' --fix"
+ "utils:eslint": "eslint 'src/scripts/**/*.js' --fix",
+ "utils:stylelint": "stylelint 'src/styles/**/*.css' --fix"
},
"imports": {},
"dependencies": {
- "@simonwep/pickr": "^1.8.1",
- "@stimulus/core": "2.0.0",
- "cleave.js": "^1.6.0",
+ "@simonwep/pickr": "^1.8.2",
+ "@hotwired/stimulus": "3.0.1",
"swup": "2.0.14",
- "tippy.js": "^6.3.1",
- "vanillajs-datepicker": "^1.1.4"
+ "tippy.js": "^6.3.7",
+ "vanillajs-datepicker": "^1.2.0"
},
"devDependencies": {
- "@newlogic-digital/core": "~0.6.3",
+ "@newlogic-digital/core": "~0.9.5",
"eslint-config-standard": "^16.0.3",
- "postcss-mixins": "^8.1.0",
- "stylelint-config-standard": "^22.0.0"
+ "stylelint-config-standard": "^24.0.0"
},
"files": [
"src",
diff --git a/public/sw.js b/public/sw.js
new file mode 100644
index 0000000..221e1ef
--- /dev/null
+++ b/public/sw.js
@@ -0,0 +1,30 @@
+const offlineUrl = '/offline'
+
+self.addEventListener('install', function(event) {
+ const offlineRequest = new Request(offlineUrl)
+
+ event.waitUntil(
+ fetch(offlineRequest).then(function(response) {
+ return caches.open('offline').then(function(cache) {
+ console.log('[oninstall] Cached offline page', response.url)
+ return cache.put(offlineRequest, response)
+ })
+ })
+ )
+})
+
+self.addEventListener('fetch', function(event) {
+ const request = event.request
+
+ if (request.url.match(/\.(css|jpg|jpeg|png|gif|js|woff|woff2|ttf|svg|mp4|webp)$/) || request.url.indexOf(request.referrer) !== 0) {
+ } else if (request.method === 'GET') {
+ event.respondWith(
+ fetch(request).catch(function(error) {
+ console.log('[onfetch] Failed. Serving cached offline fallback ' + error)
+ return caches.open('offline').then(function(cache) {
+ return cache.match(offlineUrl)
+ })
+ })
+ )
+ }
+})
diff --git a/src/icons.svg b/src/icons.svg
new file mode 100644
index 0000000..77d4751
--- /dev/null
+++ b/src/icons.svg
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/icons/iconfont.css b/src/icons/iconfont.css
deleted file mode 100644
index 0bb4c5a..0000000
--- a/src/icons/iconfont.css
+++ /dev/null
@@ -1,171 +0,0 @@
-@import "variables.css";
-
-@font-face {
- font-family: 'iconfont';
- src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
- font-weight: normal;
- font-style: normal;
- font-display: block;
-}
-
-[class^="icon-"]:before, [class*=" icon-"]:before {
- /* use !important to prevent issues with browser extensions that change fonts */
- font-family: 'iconfont' ;
- speak: never;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-logo-nl {
- &:before {
- content: var(--icon-logo-nl);
- }
-}
-.icon-logo {
- &:before {
- content: var(--icon-logo);
- }
-}
-.icon-recaptcha .path1 {
- &:before {
- content: var(--icon-recaptcha-path1);
- color: rgb(28, 58, 169);
- }
-}
-.icon-recaptcha .path2 {
- &:before {
- content: var(--icon-recaptcha-path2);
- margin-left: -1em;
- color: rgb(66, 133, 244);
- }
-}
-.icon-recaptcha .path3 {
- &:before {
- content: var(--icon-recaptcha-path3);
- margin-left: -1em;
- color: rgb(171, 171, 171);
- }
-}
-.icon-menu {
- &:before {
- content: var(--icon-menu);
- }
-}
-.icon-dark {
- &:before {
- content: var(--icon-dark);
- }
-}
-.icon-light {
- &:before {
- content: var(--icon-light);
- }
-}
-.icon-radio-filled {
- &:before {
- content: var(--icon-radio-filled);
- }
-}
-.icon-checkbox-filled {
- &:before {
- content: var(--icon-checkbox-filled);
- }
-}
-.icon-circle-cancel {
- &:before {
- content: var(--icon-circle-cancel);
- }
-}
-.icon-close {
- &:before {
- content: var(--icon-close);
- }
-}
-.icon-chevron-left {
- &:before {
- content: var(--icon-chevron-left);
- }
-}
-.icon-chevron-right {
- &:before {
- content: var(--icon-chevron-right);
- }
-}
-.icon-chevron-down {
- &:before {
- content: var(--icon-chevron-down);
- }
-}
-.icon-chevron-up {
- &:before {
- content: var(--icon-chevron-up);
- }
-}
-.icon-social-facebook {
- &:before {
- content: var(--icon-social-facebook);
- }
-}
-.icon-social-twitter {
- &:before {
- content: var(--icon-social-twitter);
- }
-}
-.icon-social-instagram {
- &:before {
- content: var(--icon-social-instagram);
- }
-}
-.icon-social-pinterest {
- &:before {
- content: var(--icon-social-pinterest);
- }
-}
-.icon-social-linkedin {
- &:before {
- content: var(--icon-social-linkedin);
- }
-}
-.icon-youtube {
- &:before {
- content: var(--icon-youtube);
- }
-}
-.icon-tripadvisor {
- &:before {
- content: var(--icon-tripadvisor);
- }
-}
-.icon-angle-down {
- &:before {
- content: var(--icon-angle-down);
- }
-}
-.icon-angle-up {
- &:before {
- content: var(--icon-angle-up);
- }
-}
-.icon-paper-clip {
- &:before {
- content: var(--icon-paper-clip);
- }
-}
-.icon-valid {
- &:before {
- content: var(--icon-valid);
- }
-}
-.icon-invalid {
- &:before {
- content: var(--icon-invalid);
- }
-}
-
diff --git a/src/icons/selection.json b/src/icons/selection.json
deleted file mode 100644
index fe5fc00..0000000
--- a/src/icons/selection.json
+++ /dev/null
@@ -1 +0,0 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M3876.852 0c-47.596 0-86.556 36.976-89.738 84.044l0.020 0.272c3.166 46.792 42.124 83.77 89.72 83.77s86.552-36.974 89.734-84.044l-0.020-0.278c-3.162-46.792-42.12-83.766-89.716-83.766zM2246.91 3.278v807.594h148.082v-807.594zM0 59.332v751.538h152.534v-482.312l416.196 482.312h127.87l-0.004-751.534h-152.574v495.798l-416.152-495.8zM3390.242 233.672c-150.18 0-271.926 121.742-271.926 271.922 0 144.518 112.74 262.7 255.828 271.444-0.254-0.016-0.512-0.018-0.766-0.034l0.798 0.038c5.566 0.342 11.172 0.524 16.824 0.524 59.88 0 115.214-19.472 159.262-51.91v8.948l-0.036-0.52c0.324 3.95 0.488 7.946 0.488 11.98 0 80.032-64.878 144.91-144.91 144.91-4.048 0-8.060-0.16-11.504-0.452l0.352-0.012c-2.448 0.104-4.908 0.152-7.378 0.152-61.126 0-114.772-32.016-145.504-80.906l-119.906 90.87c48.262 77.38 142.428 123.37 272.566 123.37 180.626 0 299.504-95.322 299.504-266.956l-1.242-505.862h-142.43v34.544c-44.9-32.732-100.202-52.050-160.020-52.050zM1034.702 234.026c-163.99 0-296.934 132.944-296.934 296.934s132.944 296.93 296.934 296.93c3.774 0 7.53-0.068 10.73-0.192l-0.72-0.034c5.174 0.288 10.384 0.438 15.628 0.438 115.488 0 214.45-70.75 256.586-173.11l-132.406-28.048-0.376 0.738c-24.356 44.086-71.312 73.942-125.242 73.942-4.744 0-9.434-0.232-13.472-0.636l-0.202-0.004c-72.946-2.062-132.396-58.048-139.952-130.134h426.212l-0.038-50.448-0.016-0.53c-5.834-158.854-136.452-285.844-296.73-285.844zM4318.814 234.354c-1.54 0-3.078 0.012-4.378 0.032l0.192 0.004c-1.248-0.014-2.502-0.022-3.754-0.022-163.872 0-296.72 132.848-296.72 296.72s132.846 296.72 296.72 296.72c1.254 0 2.506-0.006 3.566-0.020l-0.458-0.012c3.104 0.102 6.222 0.152 9.352 0.152 129.864 0 239.122-88.226 271.546-209.972l-137.030-34.77-0.208 0.976c-15.344 62.004-71.354 107.968-138.098 107.968-1.796 0-3.586-0.032-5.11-0.090l-0.296-0.012c-86.092-3.24-154.89-74.052-154.89-160.938 0-86.848 68.746-157.638 155.082-160.942 2.148-0.104 4.306-0.164 6.48-0.164 65.852 0 120.574 47.678 131.64 111.194l142.43-40.382-0.528-2.038c-35.756-118.282-145.592-204.402-275.538-204.402zM2766.702 237.496c-3.706 0-7.394 0.074-10.54 0.194-0.566-0.002-1.13-0.004-1.696-0.004-167.656 0-303.57 135.912-303.57 303.57 0 167.656 135.914 303.566 303.57 303.566s303.57-135.908 303.57-303.566c0-3.402-0.054-6.792-0.152-9.676v0c0-0.962 0.020-1.926 0.020-2.89 0-160.822-130.374-291.194-291.196-291.194zM1330.422 251.012l186.192 560.972h133.48l111.036-329.734 109.926 329.734h133.48l186.32-560.844h-146.922l-111.038 345.492-114.422-345.492h-115.622l-114.422 344.378-111.082-344.508zM3802.914 251.306v559.566l148.082 0.172v-559.738zM3391.028 358.602c3.172 0 6.32 0.098 9.016 0.276 1.296-0.034 2.594-0.050 3.898-0.050 80.676 0 146.112 65.234 146.45 145.862l-0.040-0.044v0.026c-0.288 80.64-65.746 145.922-146.452 145.922-1.354 0-2.698-0.024-3.844-0.054h-0.020c-2.984 0.182-5.99 0.278-9.016 0.278-80.694 0-146.108-65.414-146.108-146.11s65.414-146.11 146.108-146.11zM1052.636 363.282c62.376 0 114.512 43.842 127.434 103.254l-270.168-0.004 0.242-0.988c16.646-58.972 70.85-102.192 135.148-102.192 0.848 0 1.696 0.012 2.414 0.024l-0.246 0.008c1.716-0.066 3.442-0.102 5.176-0.102zM2754.512 378.63c85.884 0 155.964 67.676 159.832 152.952h-0.044v-0.28c0.072 1.952 0.106 3.914 0.106 5.884 0 88.020-70.444 159.588-158.2 161.406-0.564 0.006-1.126 0.012-1.688 0.012-88.358 0-159.984-71.63-159.984-159.988s71.626-159.984 159.984-159.984zM4817.542 571.308c-0.734 0-1.466 0.006-2.086 0.016-69.718 0-126.238 56.522-126.238 126.242s56.522 126.238 126.242 126.238c69.494 0 125.872-56.152 126.238-125.594v-0.004c0.020-0.9 0.032-1.808 0.032-2.716 0-68.586-55.602-124.184-124.188-124.184zM4815.762 600.356c54.23 0 98.256 43.698 98.788 97.852v0c0 0.414 0 0.826 0 1.242 0 54.396-44.096 98.492-98.492 98.492-0.212 0-0.426 0-0.604 0h-0.020c-54.414-0.172-98.472-44.34-98.472-98.794 0-54.562 44.234-98.794 98.792-98.794zM4768.566 637.054v114.848h29.034v-35.328h15.802l29.034 35.328h34.258l-32.204-38.538h-0.042l0.274-0.086c15.286-5.43 26.234-20.022 26.234-37.172 0-0.18 0-0.362 0-0.512 0-22.738-17.646-38.538-46.722-38.538zM4797.984 661.676h25.694c11.948 0 19.57 5.094 19.57 14.516s-7.58 15.762-19.57 15.762l-25.694-0.004z"],"width":4992,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["logo-nl"],"grid":16},"attrs":[{}],"properties":{"order":72,"id":0,"prevSize":24,"code":59648,"name":"logo-nl"},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M3876.852 0c-47.596 0-86.554 36.975-89.742 84.043l0.020 0.273c3.166 46.792 42.123 83.77 89.719 83.77s86.552-36.975 89.734-84.043l-0.020-0.277c-3.158-46.792-42.115-83.766-89.711-83.766zM2246.91 3.277v807.594h148.082v-807.594h-148.082zM5288.879 59.328v420.852c0 208.176 129.405 348.836 325.203 348.836 191.297 0 318.453-140.66 318.453-348.836v-420.852h-120.402v420.852c0 140.659-79.897 232.934-198.051 232.934-123.78 0-204.797-92.274-204.797-232.934v-420.852h-120.406zM6059.348 59.328v753.934h120.406v-753.934h-120.406zM0 59.332v751.539h152.535v-482.312l416.195 482.312h127.871l-0.004-751.535h-152.574v495.797l-416.152-495.801h-127.871zM3390.242 233.672c-150.18 0-271.926 121.742-271.926 271.922 0 144.517 112.739 262.7 255.828 271.445-0.254-0.016-0.512-0.018-0.766-0.035l0.797 0.039c5.566 0.343 11.173 0.523 16.824 0.523 59.88 0 115.214-19.472 159.262-51.91v8.949l-0.035-0.52c0.324 3.95 0.488 7.946 0.488 11.98 0 80.032-64.878 144.91-144.91 144.91-4.048 0-8.060-0.161-11.504-0.453l0.352-0.012c-2.448 0.104-4.907 0.152-7.379 0.152-61.126 0-114.772-32.016-145.504-80.906l-119.906 90.871c48.262 77.38 142.428 123.371 272.566 123.371 180.626 0 299.504-95.323 299.504-266.957l-1.242-505.863h-142.43v34.543c-44.9-32.732-100.203-52.051-160.020-52.051zM1034.703 234.027c-163.99 0-296.934 132.944-296.934 296.934s132.944 296.93 296.934 296.93c3.774 0 7.53-0.067 10.73-0.191l-0.719-0.035c5.174 0.288 10.385 0.438 15.629 0.438 115.488 0 214.45-70.749 256.586-173.109l-132.406-28.047-0.375 0.738c-24.356 44.086-71.312 73.941-125.242 73.941-4.744 0-9.435-0.233-13.473-0.637l-0.203-0.004c-72.946-2.062-132.397-58.047-139.953-130.133h426.211l-0.039-50.449-0.016-0.531c-5.834-158.854-136.452-285.844-296.73-285.844zM4318.812 234.355c-1.54 0-3.077 0.012-4.379 0.031l0.191 0.004c-1.248-0.014-2.502-0.023-3.754-0.023-163.872 0-296.719 132.847-296.719 296.719s132.847 296.719 296.719 296.719c1.254 0 2.507-0.006 3.567-0.020l-0.457-0.012c3.104 0.102 6.222 0.152 9.352 0.152 129.864 0 239.121-88.227 271.547-209.973l-137.031-34.77-0.207 0.977c-15.344 62.004-71.354 107.969-138.098 107.969-1.796 0-3.585-0.032-5.109-0.090l-0.297-0.012c-86.092-3.24-154.891-74.053-154.891-160.938 0-86.848 68.746-157.637 155.082-160.941 2.148-0.103 4.306-0.164 6.48-0.164 65.852 0 120.573 47.679 131.641 111.195l142.43-40.383-0.527-2.039c-35.756-118.282-145.591-204.402-275.539-204.402zM2766.703 237.496c-3.707 0-7.395 0.073-10.539 0.195-0.565-0.002-1.13-0.004-1.695-0.004-167.656 0-303.57 135.912-303.57 303.57 0 167.656 135.914 303.566 303.57 303.566s303.57-135.908 303.57-303.566c0-3.402-0.054-6.792-0.152-9.676 0.020-0.963 0.019-1.926 0.019-2.891 0-160.822-130.373-291.195-291.195-291.195h-0.008zM1330.422 251.012l186.191 560.973h133.48l111.035-329.734 109.926 329.734h133.481l186.32-560.844h-146.922l-111.039 345.492-114.422-345.492h-115.621l-114.422 344.379-111.082-344.508h-146.926zM3802.914 251.305v559.566l148.082 0.172v-559.738h-148.082zM3391.020 358.602h0.008c3.172 0 6.32 0.099 9.016 0.277 1.295-0.033 2.594-0.051 3.898-0.051 80.676 0 146.113 65.233 146.449 145.863l-0.039-0.043v0.027c-0.288 80.64-65.747 145.922-146.453 145.922-1.354 0-2.698-0.023-3.844-0.055h-0.019c-2.983 0.182-5.989 0.277-9.016 0.277-80.694 0-146.109-65.415-146.109-146.109s65.413-146.109 146.109-146.109zM1052.637 363.281c62.376 0 114.512 43.842 127.434 103.254l-270.168-0.004 0.242-0.988c16.646-58.972 70.85-102.191 135.148-102.191 0.848 0 1.696 0.012 2.414 0.023l-0.246 0.008c1.716-0.066 3.442-0.102 5.176-0.102zM2754.512 378.629c85.884 0 155.964 67.675 159.832 152.953h-0.047c0.066 1.859 0.102 3.726 0.102 5.602 0 88.020-70.443 159.588-158.199 161.406-0.564 0.006-1.125 0.012-1.687 0.012-88.358 0-159.984-71.63-159.984-159.988s71.626-159.984 159.984-159.984zM4817.543 571.309c-0.734 0-1.466 0.006-2.086 0.016-69.718 0-126.238 56.522-126.238 126.242s56.522 126.238 126.242 126.238c69.495 0 125.872-56.152 126.238-125.594v-0.004c0.020-0.9 0.031-1.807 0.031-2.715 0-68.586-55.601-124.184-124.187-124.184zM4815.754 600.355h0.008c54.23 0 98.255 43.698 98.789 97.852-0.001 0.414 0 0.826 0 1.242 0 54.396-44.096 98.492-98.492 98.492h-0.625c-54.414-0.172-98.473-44.339-98.473-98.793 0-54.562 44.233-98.793 98.793-98.793zM4768.566 637.055v114.848h29.035v-35.328h15.801l29.035 35.328h34.258l-32.203-38.539h-0.043l0.273-0.086c15.286-5.43 26.234-20.022 26.234-37.172v-0.512c0-22.738-17.647-38.539-46.723-38.539h-55.668zM4797.984 661.676h25.695c11.948 0 19.57 5.094 19.57 14.516s-7.58 15.762-19.57 15.762l-25.695-0.004v-30.273z"],"width":6208,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["logo"],"grid":16},"attrs":[{}],"properties":{"order":73,"id":2,"name":"logo","prevSize":24,"code":59653},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M1024.093 511.281c-0.024-7.344-0.194-14.648-0.523-21.918v-414.444l-114.576 114.576c-93.774-114.784-236.43-188.097-396.215-188.097-166.285 0-314.012 79.371-407.396 202.29l187.805 189.78c18.405-34.038 44.551-63.274 76.077-85.355 32.788-25.586 79.244-46.507 143.509-46.507 7.764 0 13.756 0.907 18.159 2.616 79.623 6.285 148.642 50.227 189.28 114.006l-132.937 132.937c168.382-0.661 358.601-1.049 436.805 0.085z","M509.791 1.417c-7.344 0.024-14.648 0.194-21.918 0.523h-414.444l114.576 114.576c-114.784 93.774-188.097 236.43-188.097 396.215 0 166.285 79.372 314.012 202.29 407.396l189.78-187.805c-34.038-18.405-63.274-44.551-85.355-76.077-25.585-32.788-46.507-79.244-46.507-143.509 0-7.764 0.907-13.756 2.616-18.159 6.285-79.623 50.227-148.642 114.006-189.28l132.937 132.937c-0.661-168.382-1.050-358.601 0.085-436.805z","M-0.073 512.72c0.024 7.344 0.194 14.648 0.523 21.918v414.444l114.576-114.576c93.774 114.784 236.43 188.097 396.215 188.097 166.285 0 314.012-79.371 407.396-202.29l-187.805-189.78c-18.405 34.038-44.551 63.274-76.077 85.355-32.788 25.586-79.244 46.507-143.509 46.507-7.764 0-13.756-0.907-18.159-2.616-79.623-6.285-148.642-50.227-189.28-114.006l132.937-132.937c-168.382 0.661-358.601 1.049-436.805-0.085z"],"attrs":[{"fill":"rgb(28, 58, 169)"},{"fill":"rgb(66, 133, 244)"},{"fill":"rgb(171, 171, 171)"}],"isMulticolor":true,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{"f":0},{"f":3},{"f":4}]},"tags":["recaptcha"],"grid":16},"attrs":[{"fill":"rgb(28, 58, 169)"},{"fill":"rgb(66, 133, 244)"},{"fill":"rgb(171, 171, 171)"}],"properties":{"order":74,"id":3,"name":"recaptcha","prevSize":24,"code":59660,"codes":[59660,59671,59672]},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M0.010 170.664h1023.98v114.664h-1023.98v-114.664zM0.010 567.99v-111.998h1023.98v111.998h-1023.98zM0.010 853.317v-114.664h1023.98v114.664h-1023.98z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1261271301152202761":[],"150202791171171171128581691661332441911031121":[]},"tags":["menu"],"grid":16},"attrs":[],"properties":{"order":75,"id":4,"prevSize":24,"code":59664,"name":"menu"},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M512 160c-194.404 0-352 157.596-352 352s157.596 352 352 352c194.404 0 352-157.596 352-352v0c0-194.404-157.596-352-352-352v0zM224 512c-0-0.040-0-0.087-0-0.134 0-159.058 128.942-288 288-288 28.502 0 56.038 4.14 82.038 11.853l-2.038-0.519c-121.368 35.691-208.465 146.074-208.465 276.8s87.098 241.109 206.429 276.285l2.037 0.515c-23.962 7.194-51.498 11.334-80 11.334-159.058 0-288-128.942-288-288 0-0.047 0-0.094 0-0.142l-0 0.007z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["dark"],"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]}},"attrs":[{}],"properties":{"order":70,"id":29,"name":"dark","prevSize":24,"code":59650},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M752 512c0 132.548-107.452 240-240 240s-240-107.452-240-240c0-132.548 107.452-240 240-240s240 107.452 240 240z","M512 192c17.673 0 32-14.327 32-32v0-128c0-17.673-14.327-32-32-32s-32 14.327-32 32v0 128c0 17.673 14.327 32 32 32v0zM512 832c-17.673 0-32 14.327-32 32v0 128c0 17.673 14.327 32 32 32s32-14.327 32-32v0-128c0-17.673-14.327-32-32-32v0zM992 480h-128c-17.673 0-32 14.327-32 32s14.327 32 32 32v0h128c17.673 0 32-14.327 32-32s-14.327-32-32-32v0zM192 512c0-17.673-14.327-32-32-32v0h-128c-17.673 0-32 14.327-32 32s14.327 32 32 32v0h128c17.673 0 32-14.327 32-32v0zM240 286.4c5.937 5.937 14.14 9.61 23.2 9.61 18.12 0 32.81-14.689 32.81-32.81 0-9.060-3.672-17.263-9.61-23.2v-0l-91.2-89.6c-5.9-7.807-15.167-12.8-25.6-12.8-17.673 0-32 14.327-32 32 0 10.433 4.993 19.7 12.72 25.542l0.080 0.058zM784 737.6c-5.937-5.937-14.14-9.61-23.2-9.61-18.12 0-32.81 14.689-32.81 32.81 0 9.060 3.672 17.263 9.61 23.2l91.2 91.2c5.9 7.807 15.167 12.8 25.6 12.8 17.673 0 32-14.327 32-32 0-10.433-4.993-19.7-12.72-25.542l-0.080-0.058zM761.6 294.4c8.784-0.129 16.691-3.778 22.395-9.595l0.005-0.005 91.2-91.2c7.807-5.9 12.8-15.167 12.8-25.6 0-17.673-14.327-32-32-32-10.433 0-19.7 4.993-25.542 12.72l-0.058 0.080-92.8 91.2c-5.658 5.768-9.151 13.678-9.151 22.403 0 17.515 14.072 31.744 31.527 31.997l0.024 0zM240 737.6l-89.6 91.2c-7.807 5.9-12.8 15.167-12.8 25.6 0 17.673 14.327 32 32 32 10.433 0 19.7-4.993 25.542-12.72l0.058-0.080 91.2-89.6c5.937-5.937 9.61-14.14 9.61-23.2 0-18.12-14.689-32.81-32.81-32.81-9.060 0-17.263 3.672-23.2 9.61l-0 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["light"],"colorPermutations":{"150202791171171171128581691661332441911031121":[{},{}]}},"attrs":[{},{}],"properties":{"order":71,"id":30,"name":"light","prevSize":24,"code":59652},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M512 320c-106.038 0-192 85.962-192 192v0c0 106.038 85.962 192 192 192v0c106.038 0 192-85.962 192-192v0c0-106.038-85.962-192-192-192z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["radio-filled"],"grid":16},"attrs":[{}],"properties":{"order":76,"id":5,"name":"radio-filled","prevSize":24,"code":59673},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M421.8 770.2c-13.4 0-26-5.2-35.6-14.8l-181-181c-10-9.6-15.4-22.4-15.4-36.2 0-27.8 22.6-50.2 50.2-50.2 13.8 0 26.6 5.4 36.2 15.4l144.6 144.6 309.8-324.8c8.8-9.6 21-15.2 34.2-16h0.6c0.8 0 1.4 0 2.2 0 27.8 0 50.2 22.6 50.2 50.2 0 13.4-5.2 25.8-14.4 35.4l-345.2 361.8c-9.6 10-22.6 15.6-36.4 15.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["checkbox-filled"],"grid":16},"attrs":[{}],"properties":{"order":57,"id":8,"name":"checkbox-filled","prevSize":24,"code":59674},"setIdx":0,"setId":0,"iconIdx":7},{"icon":{"paths":["M737.052 673.952l-161.952-161.952 161.952-161.952-63.1-63.098-161.952 161.954-161.952-161.952-63.098 63.098 161.954 161.954-161.952 161.952 63.098 63.1 161.954-161.952 161.952 161.952zM512 64c248.188 0 448 199.812 448 448s-199.812 448-448 448-448-199.812-448-448 199.812-448 448-448z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["circle-cancel"],"grid":16},"attrs":[{}],"properties":{"order":54,"id":11,"name":"circle-cancel","prevSize":24,"code":59670},"setIdx":0,"setId":0,"iconIdx":8},{"icon":{"paths":["M788.51 732.978l-220.964-220.978 220.952-220.952c6.821-7.055 11.024-16.679 11.024-27.284 0-21.69-17.583-39.274-39.274-39.274-10.606 0-20.229 4.203-27.295 11.035l-220.954 220.941-220.952-220.978c-7.107-7.107-16.926-11.504-27.772-11.504-21.692 0-39.276 17.584-39.276 39.276 0 10.846 4.397 20.665 11.504 27.772v0l220.952 220.978-220.978 220.978c-6.818 7.054-11.018 16.675-11.018 27.277 0 21.69 17.583 39.274 39.274 39.274 10.608 0 20.234-4.207 27.302-11.041l220.967-220.954 220.952 220.978c7.108 7.11 16.93 11.508 27.78 11.508 21.695 0 39.282-17.587 39.282-39.282 0-10.846-4.396-20.664-11.502-27.772v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["close"],"grid":16},"attrs":[{}],"properties":{"order":1,"id":12,"prevSize":24,"code":59663,"name":"close"},"setIdx":0,"setId":0,"iconIdx":9},{"icon":{"paths":["M628.322 833.714c-9.508-0.306-17.91-4.8-23.45-11.688l-0.046-0.062-235.738-289.35c-4.4-5.354-7.072-12.28-7.072-19.83s2.67-14.472 7.114-19.882l-0.046 0.056 235.738-289.104c5.726-8.25 15.154-13.586 25.822-13.586 17.308 0 31.336 14.030 31.336 31.336 0 8.41-3.312 16.044-8.702 21.672l0.012-0.012-219.582 269.52 219.582 269.52c4.53 5.396 7.284 12.42 7.284 20.082 0 17.306-14.032 31.336-31.336 31.336-0.322 0-0.64-0.006-0.962-0.016l0.046 0.002z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["chevron-left"],"grid":16},"attrs":[{}],"properties":{"order":32,"id":13,"prevSize":24,"code":59655,"name":"chevron-left"},"setIdx":0,"setId":0,"iconIdx":10},{"icon":{"paths":["M395.678 190.286c9.508 0.306 17.91 4.8 23.45 11.688l0.046 0.062 235.738 289.35c4.4 5.354 7.072 12.28 7.072 19.83s-2.67 14.472-7.114 19.882l0.046-0.056-235.738 289.104c-5.726 8.25-15.154 13.586-25.822 13.586-17.308 0-31.336-14.030-31.336-31.336 0-8.41 3.312-16.044 8.702-21.672l-0.012 0.012 219.582-269.52-219.582-269.52c-4.53-5.396-7.284-12.42-7.284-20.082 0-17.306 14.032-31.336 31.336-31.336 0.322 0 0.64 0.006 0.962 0.016l-0.046-0.002z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["chevron-right"],"grid":16},"attrs":[{}],"properties":{"order":29,"id":14,"prevSize":24,"code":59649,"name":"chevron-right"},"setIdx":0,"setId":0,"iconIdx":11},{"icon":{"paths":["M833.714 395.678c-0.306 9.508-4.8 17.91-11.688 23.45l-0.062 0.046-289.35 235.738c-5.354 4.4-12.28 7.072-19.83 7.072s-14.472-2.67-19.882-7.114l0.056 0.046-289.104-235.738c-8.25-5.726-13.586-15.154-13.586-25.822 0-17.308 14.030-31.336 31.336-31.336 8.41 0 16.044 3.312 21.672 8.702l-0.012-0.012 269.52 219.582 269.52-219.582c5.396-4.53 12.42-7.284 20.082-7.284 17.306 0 31.336 14.032 31.336 31.336 0 0.322-0.006 0.64-0.016 0.962l0.002-0.046z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["chevron-down"],"grid":16},"attrs":[{}],"properties":{"order":65,"id":15,"prevSize":24,"code":59656,"name":"chevron-down"},"setIdx":0,"setId":0,"iconIdx":12},{"icon":{"paths":["M190.286 628.322c0.306-9.508 4.8-17.91 11.688-23.45l0.062-0.046 289.35-235.738c5.354-4.4 12.28-7.072 19.83-7.072s14.472 2.67 19.882 7.114l-0.056-0.046 289.104 235.738c8.25 5.726 13.586 15.154 13.586 25.822 0 17.308-14.030 31.336-31.336 31.336-8.41 0-16.044-3.312-21.672-8.702l0.012 0.012-269.52-219.582-269.52 219.582c-5.396 4.53-12.42 7.284-20.082 7.284-17.306 0-31.336-14.032-31.336-31.336 0-0.322 0.006-0.64 0.016-0.962l-0.002 0.046z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["chevron-up"],"grid":16},"attrs":[{}],"properties":{"order":30,"id":16,"prevSize":24,"code":59657,"name":"chevron-up"},"setIdx":0,"setId":0,"iconIdx":13},{"icon":{"paths":["M554.667 426.667h128v128h-128v298.667h-128v-298.667h-128v-128h128v-53.547c0-50.731 15.957-114.816 47.701-149.845 31.744-35.115 71.381-52.608 118.869-52.608h89.429v128h-89.6c-21.248 0-38.4 17.152-38.4 38.357v89.643z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["social-facebook"],"grid":16},"attrs":[{}],"properties":{"order":58,"id":17,"name":"social-facebook","prevSize":24,"code":59658},"setIdx":0,"setId":0,"iconIdx":14},{"icon":{"paths":["M805.973 299.179c34.475-21.163 57.301-50.048 68.48-86.784-33.536 17.792-66.944 29.995-100.309 36.736-29.995-32.256-67.968-48.64-113.493-48.64-44.501 0-82.091 15.616-112.768 45.995-30.507 30.592-45.909 67.755-45.909 111.147 0 13.184 1.664 24.96 4.992 34.944-131.243-4.48-239.872-58.923-325.461-163.712-14.507 25.643-21.76 51.755-21.76 78.763 0 55.509 23.424 99.499 70.187 131.797-26.667-2.261-50.176-9.003-70.187-20.053 0 39.637 11.648 72.747 34.987 101.888 23.424 28.843 53.504 47.232 90.24 55.083-13.312 3.413-27.349 5.035-41.771 5.035-13.312 0-22.741-1.109-28.331-3.541 9.813 32.299 28.331 58.496 55.083 78.549 26.667 20.139 57.344 30.763 91.819 31.701-56.832 44.587-121.813 66.645-195.328 66.645-18.005 0-30.763-0.256-38.485-1.621 72.405 47.019 153.003 70.357 242.176 70.357 91.264 0 171.904-23.125 242.091-69.376 70.187-45.995 121.984-102.741 155.264-169.557 33.451-66.731 50.005-136.192 50.005-208.725v-19.968c32.341-24.32 58.496-51.712 78.507-81.963-29.013 12.501-59.008 20.992-90.027 25.301z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["social-twitter"],"grid":16},"attrs":[{}],"properties":{"order":59,"id":18,"name":"social-twitter","prevSize":24,"code":59661},"setIdx":0,"setId":0,"iconIdx":15},{"icon":{"paths":["M710.788 74.667h-397.576c-131.2 0-238.545 107.345-238.545 238.545v397.576c0 131.2 107.345 238.545 238.545 238.545h397.576c131.2 0 238.545-107.345 238.545-238.545v-397.576c0-131.2-107.345-238.545-238.545-238.545zM869.818 710.788c0 87.467-71.564 159.031-159.031 159.031h-397.576c-87.467 0-159.031-71.564-159.031-159.031v-397.576c0-87.467 71.564-159.031 159.031-159.031h397.576c87.467 0 159.031 71.564 159.031 159.031v397.576z","M543.806 313.212c-19.878-3.976-39.758-3.976-59.636 0-107.345 15.903-182.885 119.273-166.982 226.618 7.951 51.685 35.782 99.394 79.515 131.2 35.782 23.855 75.54 39.758 119.273 39.758 7.951 0 19.878 0 27.831-3.976 51.685-7.951 99.394-35.782 131.2-79.515s43.733-95.418 35.782-147.103c-11.927-87.467-79.515-155.055-166.982-166.982zM611.394 579.588c-19.878 23.855-47.709 43.733-79.515 47.709-63.612 7.951-127.224-35.782-135.176-99.394-11.927-63.612 35.782-127.224 99.394-135.176 3.976 0 11.927 0 15.903 0s11.927 0 15.903 0c51.685 7.951 91.442 47.709 99.394 99.394 7.951 31.806 0 63.612-15.903 87.467z","M702.836 265.503c-7.951 7.951-11.927 15.903-11.927 27.831s3.976 19.878 11.927 27.831c7.951 7.951 19.878 11.927 27.831 11.927 11.927 0 19.878-3.976 27.831-11.927s11.927-19.878 11.927-27.831c0-11.927-3.976-19.878-11.927-27.831-15.903-15.903-39.758-15.903-55.66 0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{},{},{}]},"tags":["social-instagram"],"grid":16},"attrs":[{},{},{}],"properties":{"order":46,"id":19,"name":"social-instagram","prevSize":24,"code":59665},"setIdx":0,"setId":0,"iconIdx":16},{"icon":{"paths":["M532.736 203.563c-180.48 0-271.488 129.408-271.488 237.312 0 65.408 24.789 123.477 77.781 145.109 8.747 3.584 16.512 0.171 19.029-9.429 1.749-6.699 5.888-23.595 7.765-30.592 2.603-9.429 1.579-12.8-5.419-21.12-15.317-18.005-25.088-41.472-25.088-74.539 0-96 71.808-181.931 187.051-181.931 102.059 0 158.123 62.421 158.123 145.579 0 109.568-48.512 201.984-120.491 201.984-39.765 0-69.504-32.853-59.947-73.173 11.435-48.213 33.536-100.139 33.536-134.827 0-31.104-16.725-57.003-51.2-57.003-40.619 0-73.301 41.984-73.301 98.304 0 35.883 12.203 60.117 12.203 60.117s-41.643 176.171-48.896 207.019c-14.507 61.44-2.176 136.789-1.067 144.427 0.555 4.437 6.357 5.589 8.96 2.176 3.755-4.907 52.181-64.725 68.565-124.373 4.736-16.896 26.752-104.32 26.752-104.32 13.269 25.131 51.755 47.275 92.8 47.275 122.155 0 204.971-111.275 204.971-260.395-0.128-112.64-95.573-217.6-240.64-217.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["social-pinterest"],"grid":16},"attrs":[{}],"properties":{"order":43,"id":20,"name":"social-pinterest","prevSize":24,"code":59666},"setIdx":0,"setId":0,"iconIdx":17},{"icon":{"paths":["M341.333 810.667h-128v-426.667h128v426.667zM810.667 810.667h-128v-227.925c0-59.392-21.163-88.96-63.104-88.96-33.237 0-54.315 16.555-64.896 49.707 0 53.845 0 267.179 0 267.179h-128c0 0 1.707-384 0-426.667h101.035l7.808 85.333h2.645c26.24-42.667 68.181-71.595 125.696-71.595 43.733 0 79.104 12.16 106.112 42.709 27.179 30.592 40.704 71.637 40.704 129.28v240.939z","M343.467 277.333c0 35.347-29.609 64-66.133 64s-66.133-28.653-66.133-64c0-35.347 29.609-64 66.133-64s66.133 28.653 66.133 64z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{},{}]},"tags":["social-linkedin"],"grid":16},"attrs":[{},{}],"properties":{"order":44,"id":21,"name":"social-linkedin","prevSize":24,"code":59667},"setIdx":0,"setId":0,"iconIdx":18},{"icon":{"paths":["M598.995 661.145v90.429q0 28.716-16.714 28.716-9.856 0-19.288-9.428v-129.003q9.426-9.428 19.288-9.428 16.714 0 16.714 28.716zM743.857 661.574v19.716h-38.57v-19.716q0-29.142 19.288-29.142t19.288 29.142zM329.851 568.142h45.858v-40.286h-133.718v40.286h45v243.862h42.858v-243.862zM453.281 812.004h38.142v-211.718h-38.142v162.002q-12.86 18-24.43 18-7.713 0-9-9-0.428-1.287-0.428-15.002v-156.003h-38.142v167.574q0 20.998 3.429 31.286 5.142 15.858 24.858 15.858 20.57 0 43.716-26.144v23.14zM637.139 748.575v-84.432q0-31.286-3.86-42.43-7.284-24.002-30.431-24.002-21.43 0-39.86 23.14v-93.002h-38.142v284.147h38.142v-20.57q19.288 23.572 39.86 23.572 23.14 0 30.431-23.572 3.86-11.57 3.86-42.858zM781.999 744.289v-5.571h-39q0 21.86-0.856 26.144-2.998 15.43-17.144 15.43-19.716 0-19.716-29.57v-37.288h76.714v-44.144q0-33.858-11.57-49.714-16.714-21.86-45.428-21.86-29.142 0-45.858 21.86-11.998 15.858-11.998 49.714v74.142q0 33.858 12.43 49.714 16.714 21.86 46.288 21.86 30.86 0 46.288-22.714 7.713-11.57 9-23.14 0.856-3.86 0.856-24.858zM521.424 352.998v-90q0-29.572-18.428-29.572t-18.428 29.572v90q0 29.999 18.428 29.999t18.428-29.999zM829.571 674.861q0 100.288-11.142 150.002-6.002 25.284-24.858 42.43t-43.716 19.716q-78.858 9-237.859 9t-237.859-9q-24.858-2.57-43.93-19.716t-24.642-42.43q-11.142-48-11.142-150.002 0-100.288 11.142-150.002 6.002-25.284 24.858-42.43t44.144-20.142q78.428-8.572 237.432-8.572t237.859 8.572q24.858 2.998 43.931 20.142t24.642 42.43q11.142 48 11.142 150.002zM401.852 127.995h43.716l-51.856 171.002v116.144h-42.858v-116.144q-6.002-31.714-26.144-90.86-15.858-44.144-27.857-80.144h45.426l30.43 112.715zM560.425 270.711v75.002q0 34.715-11.998 50.574-15.858 21.86-45.428 21.86-28.716 0-45-21.86-11.998-16.284-11.998-50.573v-75.002q0-34.284 11.998-50.142 16.284-21.86 45-21.86 29.57 0 45.428 21.86 11.998 15.858 11.998 50.142zM703.997 201.281v213.86h-39v-23.572q-22.714 26.572-44.144 26.572-19.716 0-25.284-15.858-3.429-10.288-3.429-32.141v-168.86h39v157.287q0 14.14 0.428 15.002 1.287 9.428 9 9.428 11.57 0 24.43-18.428v-163.288h39z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2322186712552552551":[],"102102102112612713011522027612322186712552552551":[],"10210210211261271301152202761":[],"102102102112612713011522027612042042041232218671":[],"1261271301152202761":[],"150202791171171171128581691661332441911031121":[]},"tags":["youtube"],"grid":16},"attrs":[],"properties":{"order":26,"id":22,"prevSize":24,"code":59662,"name":"youtube"},"setIdx":0,"setId":0,"iconIdx":19},{"icon":{"paths":["M628.601 218.441c27.038 3.378 57.452 10.138 84.486 20.277 47.314 13.517 94.625 33.795 135.181 60.831 3.378 3.378 6.762 3.378 10.138 3.378 50.693 0 101.388 0 152.082 0 3.378 0 6.762 0 13.517 0 0 0 0 0 0 0-3.378 6.762-6.762 10.138-10.138 13.517-16.899 27.038-30.416 54.075-40.555 84.486 0 3.378 0 6.76 0 10.138 43.931 64.21 57.452 135.181 40.555 209.532-16.899 67.593-54.071 118.284-111.526 155.46-40.555 27.038-87.869 37.178-135.181 40.555-20.277 0-40.555-3.378-60.831-6.762-50.693-13.517-91.249-37.178-125.043-74.349-3.378-3.378-10.138-10.138-13.517-16.899-16.899 27.038-37.178 54.075-54.071 81.11-16.899-27.038-37.178-54.071-54.071-81.11 0 0 0 0-3.378 0 0 0 0 0 0 0-40.555 50.693-94.625 81.11-158.84 91.249-37.178 6.76-70.972 3.377-104.766-6.762-50.693-13.517-91.249-40.555-125.043-77.728s-54.075-81.11-60.831-131.805c-10.138-47.314 3.378-91.249 3.378-101.388 6.76-30.416 20.277-60.831 40.555-87.869 0-3.378 3.378-6.76 0-6.76-10.138-23.655-23.655-50.693-37.178-74.349-3.378-6.76-10.138-10.138-13.516-16.903v-3.378c0 0 3.378 0 3.378 0 50.693 0 101.388 0 155.46 0 3.378 0 3.378 0 6.76-3.378 37.178-23.655 74.349-40.555 114.905-57.452 30.416-10.138 57.452-16.903 87.869-23.655s57.452-10.138 87.869-10.138c74.349-3.378 131.805 3.378 172.358 10.138v0zM564.388 556.398c0 111.526 91.249 206.155 202.772 206.155s202.772-91.249 202.772-202.772c0-118.284-94.625-206.155-209.532-202.772-108.145 0-196.013 87.869-196.013 199.392v0zM256.85 353.622c-111.526 0-206.155 91.249-202.772 206.155 3.378 108.145 91.249 202.772 206.155 199.392 111.526 0 202.775-91.249 202.775-202.772-3.378-111.526-94.625-202.772-206.155-202.772v0zM266.987 299.55c60.831 3.378 118.286 27.038 162.219 67.593 47.314 40.555 74.349 94.625 81.11 155.459 10.138-60.831 37.178-111.526 81.11-155.46 43.931-40.555 98.007-64.21 158.84-67.593-70.972-33.792-148.701-47.314-226.432-47.314-87.869 0-175.737 13.516-256.848 47.314v0z","M767.162 427.974c70.972 0 125.043 57.452 125.043 125.044 0 70.972-54.071 125.043-121.665 128.424-74.349 3.378-131.805-54.071-131.805-125.043 0-74.349 60.831-128.422 128.422-128.422v0zM848.271 556.398c0-43.934-37.178-81.11-81.11-81.11-47.314 0-84.486 37.178-84.486 81.11s37.178 84.486 81.11 84.486c47.314-3.378 84.486-40.555 84.486-84.486v0z","M253.469 427.974c70.972 0 125.044 57.452 125.044 125.044 0 70.972-57.452 125.043-121.665 125.043-74.349 3.378-131.805-54.071-131.805-125.043s60.831-125.043 128.422-125.043v0zM334.578 556.398c0-47.314-37.178-81.11-84.486-81.11-43.931-3.378-81.11 33.792-81.11 81.11 0 43.934 37.178 81.11 84.486 81.11 43.931 0 81.11-37.178 81.11-81.11v0z","M767.162 512.463c23.655 0 40.555 20.277 40.555 40.555 0 23.654-20.277 40.555-40.555 40.555-23.655 0-43.931-16.899-43.931-40.555 0-20.277 20.277-40.555 43.931-40.555v0z","M253.469 512.463c23.655 0 43.931 20.277 43.931 40.555 0 23.654-20.277 43.934-43.934 43.934s-43.934-16.899-43.934-43.934c0-20.277 20.277-40.555 43.934-40.555v0z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1261271301152202761":[],"150202791171171171128581691661332441911031121":[]},"tags":["tripadvisor"],"grid":16},"attrs":[],"properties":{"order":27,"id":23,"prevSize":24,"code":59659,"name":"tripadvisor"},"setIdx":0,"setId":0,"iconIdx":20},{"icon":{"paths":["M318.968 383.656c-17.358 0.406-31.276 14.576-31.276 31.996 0 8.13 3.032 15.55 8.024 21.194l-0.030-0.034 191.906 224c5.904 6.866 14.604 11.19 24.31 11.19 9.692 0 18.38-4.308 24.248-11.116l0.034-0.042 192.094-224c4.952-5.608 7.972-13.020 7.972-21.136 0-17.676-14.328-32.002-32.004-32.002-9.828 0-18.622 4.43-24.494 11.404l-0.040 0.048-167.812 195.656-167.594-195.626c-5.912-7.072-14.738-11.54-24.606-11.54-0.26 0-0.518 0.002-0.776 0.010h0.038z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["angle-down"],"grid":16},"attrs":[{}],"properties":{"order":66,"id":24,"name":"angle-down","prevSize":24,"code":59668},"setIdx":0,"setId":0,"iconIdx":21},{"icon":{"paths":["M705.030 640.344c17.36-0.408 31.276-14.576 31.276-31.996 0-8.13-3.030-15.55-8.024-21.196l0.030 0.034-191.906-224c-5.904-6.868-14.602-11.19-24.312-11.19-9.692 0-18.38 4.31-24.248 11.116l-0.036 0.040-192.094 224c-4.952 5.606-7.974 13.020-7.974 21.136 0 17.674 14.328 32.004 32.002 32.004 9.828 0 18.622-4.43 24.492-11.404l0.040-0.048 167.812-195.656 167.594 195.624c5.912 7.072 14.736 11.54 24.606 11.54 0.26 0 0.518-0.004 0.776-0.010h-0.038z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["angle-up"],"grid":16},"attrs":[{}],"properties":{"order":67,"id":25,"name":"angle-up","prevSize":24,"code":59669},"setIdx":0,"setId":0,"iconIdx":22},{"icon":{"paths":["M852.004 172.088c-41.49-41.49-96.908-69.548-157.070-73.454s-124.596 17.422-179.644 70.768c-0.1 0.098-0.192 0.192-0.288 0.288l-258.982 258.98c-4.914 4.78-7.962 11.456-7.962 18.844 0 14.514 11.766 26.282 26.282 26.282 7.388 0 14.064-3.048 18.838-7.956l258.692-258.692c45.664-44.252 93.774-59.158 139.65-56.18s90.044 25.010 123.318 58.284c33.274 33.276 55.232 77.37 58.212 123.248s-11.928 93.986-56.178 139.65l-388.176 388.176c-31.328 31.328-63.592 41.38-94.576 39.558s-61.274-16.706-84.124-39.558c-22.85-22.85-37.734-53.14-39.558-84.124s8.23-63.248 39.558-94.576l302.164-302.164c16.94-16.94 33.006-21.61 48.702-20.686s31.634 8.7 43.696 20.76c12.060 12.060 19.764 27.926 20.686 43.622s-3.746 31.762-20.686 48.702l-172.676 172.676c-4.914 4.78-7.962 11.456-7.962 18.844 0 14.514 11.766 26.28 26.282 26.28 7.388 0 14.062-3.048 18.838-7.956l172.682-172.682c26.23-26.23 37.704-58.744 35.928-88.916s-15.61-57.418-35.928-77.736c-20.318-20.318-47.638-34.226-77.808-36s-62.684 9.698-88.914 35.928l-302.164 302.164c-40.618 40.62-57.546 89.4-54.872 134.86s23.764 87.056 54.872 118.166c31.11 31.11 72.78 52.272 118.238 54.946s94.168-14.326 134.786-54.946l388.466-388.466c0.096-0.096 0.192-0.19 0.284-0.286l0.004-0.004c53.35-55.048 74.676-119.48 70.77-179.644s-31.892-115.508-73.382-156.998z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]},"tags":["paper-clip"],"grid":16},"attrs":[{}],"properties":{"order":64,"id":26,"name":"paper-clip","prevSize":24,"code":59651},"setIdx":0,"setId":0,"iconIdx":23},{"icon":{"paths":["M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM710.1 371.2c13.592 0.418 25.784 6.072 34.698 15v0c9.264 9.264 14.992 22.062 14.992 36.2s-5.73 26.936-14.992 36.2l-241 241.1c-9.266 9.262-22.064 14.99-36.2 14.99s-26.934-5.728-36.2-14.99l-112.6-112.6c-9.262-9.264-14.992-22.062-14.992-36.2s5.728-26.934 14.992-36.2v0c9.264-9.262 22.062-14.992 36.2-14.992s26.936 5.728 36.2 14.992l76.4 76.4 204.8-204.9c9.268-9.28 22.078-15.022 36.23-15.022 0.518 0 1.034 0.008 1.546 0.024l-0.076-0.002z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["valid"],"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]}},"attrs":[{}],"properties":{"order":69,"id":28,"name":"valid","prevSize":24,"code":59654},"setIdx":0,"setId":0,"iconIdx":24},{"icon":{"paths":["M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM377.3 355.4c13.628 0.392 25.86 6.050 34.798 15l99.902 99.9 99.9-99.9c9.268-9.28 22.078-15.022 36.23-15.022 0.518 0 1.034 0.008 1.546 0.024l-0.076-0.002c13.626 0.392 25.86 6.050 34.798 15v0c9.264 9.264 14.992 22.062 14.992 36.2s-5.73 26.936-14.992 36.2l-100 100 100 99.9c9.264 9.264 14.992 22.062 14.992 36.2s-5.73 26.934-14.992 36.2v0c-9.27 9.294-22.090 15.042-36.25 15.042s-26.98-5.75-36.25-15.042l-99.9-99.9-99.9 99.9c-9.264 9.264-22.062 14.992-36.2 14.992s-26.936-5.73-36.2-14.992v0c-9.262-9.264-14.992-22.062-14.992-36.2s5.728-26.934 14.992-36.2l99.9-99.9-99.9-100c-9.262-9.264-14.992-22.062-14.992-36.2s5.728-26.936 14.992-36.2v0c9.268-9.278 22.076-15.018 36.226-15.018 0.484 0 0.964 0.008 1.444 0.020l-0.072-0.002z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["invalid"],"colorPermutations":{"150202791171171171128581691661332441911031121":[{}]}},"attrs":[{}],"properties":{"order":68,"id":27,"name":"invalid","prevSize":24,"code":59675},"setIdx":0,"setId":0,"iconIdx":25}],"height":1024,"metadata":{"name":"iconfont"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"iconfont","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":true,"cssVars":true,"cssVarsFormat":"less","showSelector":true,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50,"quickUsageToken":{"newlogic-ui-next":false},"gridSize":16,"showGrid":true}}
\ No newline at end of file
diff --git a/src/icons/variables.css b/src/icons/variables.css
deleted file mode 100644
index ebc50b3..0000000
--- a/src/icons/variables.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root {--icomoon-font-family: "iconfont";
---icomoon-font-path: ".";
---icon-logo-nl: "\e900";
---icon-logo: "\e905";
---icon-recaptcha-path1: "\e90c";
---icon-recaptcha-path2: "\e917";
---icon-recaptcha-path3: "\e918";
---icon-menu: "\e910";
---icon-dark: "\e902";
---icon-light: "\e904";
---icon-radio-filled: "\e919";
---icon-checkbox-filled: "\e91a";
---icon-circle-cancel: "\e916";
---icon-close: "\e90f";
---icon-chevron-left: "\e907";
---icon-chevron-right: "\e901";
---icon-chevron-down: "\e908";
---icon-chevron-up: "\e909";
---icon-social-facebook: "\e90a";
---icon-social-twitter: "\e90d";
---icon-social-instagram: "\e911";
---icon-social-pinterest: "\e912";
---icon-social-linkedin: "\e913";
---icon-youtube: "\e90e";
---icon-tripadvisor: "\e90b";
---icon-angle-down: "\e914";
---icon-angle-up: "\e915";
---icon-paper-clip: "\e903";
---icon-valid: "\e906";
---icon-invalid: "\e91b";
-}
\ No newline at end of file
diff --git a/src/main.json b/src/main.json
index 97dd57f..0174997 100644
--- a/src/main.json
+++ b/src/main.json
@@ -8,26 +8,29 @@
"css": {
"all": [
"/src/styles/main.css",
- "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block",
- "/src/icons/iconfont.css"
+ "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block"
],
"tailwind": "/temp/tailwind.css",
- "tailwind.src": "/src/styles/tailwind.css"
+ "tailwind.src": "/src/styles/tailwind.css",
+ "ratio": "/temp/ratio.css"
},
"js": {
"importmap": "/public/importmap.json",
"main": "/src/scripts/main.js",
- "es-module-shims": "https://cdn.jsdelivr.net/npm/es-module-shims@0.12.8/dist/es-module-shims.js",
- "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"
+ "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"
}
},
"layout": {
"template": "Layout/Main.twig",
- "cookies": true,
+ "cookies": false,
"nav": [
{
- "name": "Domů",
+ "name": "Home",
"url": "/"
+ },
+ {
+ "name": "Documentation",
+ "url": "/ui"
}
]
},
diff --git a/src/scripts/Components/CookieConsent.js b/src/scripts/Components/CookieConsent.js
index 4cb73d5..3a16b59 100644
--- a/src/scripts/Components/CookieConsent.js
+++ b/src/scripts/Components/CookieConsent.js
@@ -1,81 +1,82 @@
import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
import LibCookieConsent from '../Libraries/CookieConsent.js'
-LibCookieConsent.init()
-
LibStimulus.register('c-cookieconsent', class extends Controller {
connect() {
const selector = this.element
- if (localStorage.getItem('cookieconsent') === null) {
+ if (document.querySelector('.c-form-cookieconsent') !== null) {
+ return
+ }
+
+ if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
setTimeout(() => {
selector._addDataValue('state', 'active')
selector.classList.add('is-animate')
}, 1500)
}
- selector.addEventListener('click', () => {
- selector.classList.add('is-mobile-show')
+ selector._hasDataValue('type', 'closable') &&
+ selector.addEventListener('click', e => {
+ if (e.target.closest('.c-cookieconsent > .wrp') === null) {
+ this.hide([])
+ }
})
selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
- LibCookieConsent.set('approve')
- selector.classList.remove('is-animate')
-
- setTimeout(() => {
- selector._removeDataValue('state', 'active')
- selector.remove()
- }, 500)
+ this.hide(['performance', 'marketing'])
})
+ }
- selector.querySelector('[data-lib-cookieconsent-decline]').addEventListener('click', () => {
- LibCookieConsent.set('performance')
- selector.classList.remove('is-animate')
+ hide(type) {
+ LibCookieConsent.set(type)
+ this.element.classList.remove('is-animate')
- setTimeout(() => {
- selector._removeDataValue('state', 'active')
- selector.remove()
- }, 500)
- })
+ setTimeout(() => {
+ this.element._removeDataValue('state', 'active')
+ this.element.remove()
+ }, 500)
}
})
LibStimulus.register('c-form-cookieconsent', class extends Controller {
connect() {
const selector = this.element
+ const type = localStorage.getItem('lib-cookieconsent')
- if (localStorage.getItem('cookieconsent') !== null) {
- if (localStorage.getItem('cookieconsent') === 'approve') {
- const type = localStorage.getItem('cookieconsent_type')
-
- if (type !== null) {
- if (type === 'performance') {
- selector.querySelector('input[value="performance"]').checked = true
- } else {
- selector.querySelector('input[value="approve"]').checked = true
- }
- } else {
- selector.querySelector('input[value="approve"]').checked = true
+ document.querySelector('.c-cookieconsent').classList.remove('is-animate')
+ document.querySelector('.c-cookieconsent')._removeDataValue('state', 'active')
+
+ if (type !== null) {
+ this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+ input.checked = false
+ })
+
+ JSON.parse(type).forEach(type => {
+ if (selector.querySelector(`input[value="${type}"]`) !== null) {
+ selector.querySelector(`input[value="${type}"]`).checked = true
}
- } else if (localStorage.getItem('cookieconsent') === 'decline') {
- selector.querySelector('input[value="decline"]').checked = true
- }
+ })
}
selector.addEventListener('submit', e => {
e.preventDefault()
- const value = (new FormData(e.target)).get('cookies')
+ const type = []
- if (value === 'approve') {
- LibCookieConsent.set('marketing')
- location.reload()
- } else if (value === 'performance') {
- LibCookieConsent.set('performance')
- location.reload()
- } else if (value === 'decline') {
- LibCookieConsent.set('decline', () => location.reload())
- }
+ this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+ input.checked && type.push(input.value)
+ })
+
+ LibCookieConsent.set(type)
+ location.reload()
})
}
+
+ disconnect() {
+ if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
+ document.querySelector('.c-cookieconsent')._addDataValue('state', 'active')
+ document.querySelector('.c-cookieconsent').classList.add('is-animate')
+ }
+ }
})
diff --git a/src/scripts/Components/Form.js b/src/scripts/Components/Form.js
index 0857965..065c279 100644
--- a/src/scripts/Components/Form.js
+++ b/src/scripts/Components/Form.js
@@ -27,11 +27,7 @@ LibStimulus.register('c-form', class extends Controller {
}
connect() {
- const element = this.element
-
- if (typeof HTMLFormElement.prototype.reportValidity !== 'undefined') {
- element.setAttribute('novalidate', '')
- element.addEventListener('submit', e => this.validate(element, e), false)
- }
+ this.element.setAttribute('novalidate', '')
+ this.element.addEventListener('submit', e => this.validate(this.element, e))
}
})
diff --git a/src/scripts/Layout/+.js b/src/scripts/Layout/+.js
index 00e03a7..12fc7ef 100644
--- a/src/scripts/Layout/+.js
+++ b/src/scripts/Layout/+.js
@@ -1 +1,2 @@
+import './Header.js'
import './Main.js'
diff --git a/src/scripts/Layout/Header.js b/src/scripts/Layout/Header.js
new file mode 100644
index 0000000..203eee2
--- /dev/null
+++ b/src/scripts/Layout/Header.js
@@ -0,0 +1,18 @@
+import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('l-header', class extends Controller {
+ connect() {
+ if (document.querySelector('#l-nav') === null) {
+ this.element.insertAdjacentHTML('afterend', '
')
+
+ getController(document.body, 'lib-drawer').init()
+
+ const layoutNav = document.querySelector('#l-nav')
+ const logo = this.element.querySelector('.elm_header_logo').outerHTML
+ const nav = this.element.querySelector('.elm_header_nav').outerHTML
+
+ layoutNav.querySelector('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
+ layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
+ }
+ }
+})
diff --git a/src/scripts/Layout/Main.js b/src/scripts/Layout/Main.js
index 6ee4084..f85d1e2 100644
--- a/src/scripts/Layout/Main.js
+++ b/src/scripts/Layout/Main.js
@@ -9,8 +9,14 @@ import LibNativeSlider from '../Libraries/NativeSlider.js'
import cdn from '../Utils/cdn.js'
LibStimulus.register('lib', class extends Controller {
+ connect() {
+ if (!('scrollBehavior' in document.documentElement.style)) {
+ importScript(cdn.seamless).then(() => window.seamless.polyfill())
+ }
+ }
+
ripple(e) {
- LibRipple(e.currentTarget, e)
+ LibRipple(e)
}
anchor(e) {
@@ -18,45 +24,38 @@ LibStimulus.register('lib', class extends Controller {
LibAnchor.action(e.currentTarget)
}
- darkMode(e) {
- const currentTarget = e.currentTarget
-
+ darkMode() {
if (document.documentElement.classList.contains('dark')) {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
- currentTarget.classList.remove('icon-light')
} else {
localStorage.theme = 'dark'
document.documentElement.classList.add('dark')
- currentTarget.classList.add('icon-light')
}
}
})
LibStimulus.register('lib-dialog', class extends Controller {
- connect() {
- const element = this.element
-
- if (typeof element.dataset.libDialogOpen !== 'undefined') {
- const url = element.getAttribute('data-action-url')
+ async connect() {
+ if (this.element.getAttribute('data-lib-dialog-open')) {
+ const url = this.element.getAttribute('data-action-url')
if (url) {
- LibDialog.action(element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
+ await LibDialog.action(this.element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
} else {
- LibDialog.show(document.querySelector(element.dataset.libDialogOpen).innerHTML, () => loadStimulus(document.querySelector('.lib-dialog')))
+ await LibDialog.show(document.querySelector(this.element.getAttribute('data-lib-dialog-open')).innerHTML, () => loadStimulus(document.querySelector('.lib-dialog')))
}
}
}
- show(e) {
- const element = e.currentTarget
- const url = element.getAttribute('data-action-url')
+ async show({ currentTarget }) {
+ const url = currentTarget.getAttribute('data-action-url')
- LibDialog.action(element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
+ await LibDialog.action(currentTarget, url)
}
- hide() {
- LibDialog.hide()
+ async hide() {
+ await LibDialog.hide()
}
})
@@ -68,10 +67,6 @@ LibStimulus.register('lib-tabs', class extends Controller {
LibStimulus.register('lib-ns', class extends Controller {
connect() {
- if (!('scrollBehavior' in document.documentElement.style)) {
- importScript(cdn.seamless).then(() => window.seamless.polyfill())
- }
-
LibNativeSlider(this.element.querySelector('[data-lib-ns]'), this.element)
}
})
diff --git a/src/scripts/Libraries/+.js b/src/scripts/Libraries/+.js
index e38914a..079c269 100644
--- a/src/scripts/Libraries/+.js
+++ b/src/scripts/Libraries/+.js
@@ -2,6 +2,7 @@ export { default as Anchor } from './Anchor.js'
export { default as CookieConsent } from './CookieConsent.js'
export { default as Dialog } from './Dialog.js'
import './Drawer.js'
+import './Fetch.js'
export { default as NativeSlider } from './NativeSlider.js'
import './ReCaptcha.js'
export { default as Ripple } from './Ripple.js'
diff --git a/src/scripts/Libraries/Anchor.js b/src/scripts/Libraries/Anchor.js
index 9002753..382d326 100644
--- a/src/scripts/Libraries/Anchor.js
+++ b/src/scripts/Libraries/Anchor.js
@@ -1,51 +1,29 @@
const LibAnchor = {
animation: (element) => {
- let offset
- const attr = 'data-offset'
-
- if (window.innerWidth > 960) {
- offset = 0
-
- if (element.getAttribute(attr) !== null) {
- if (isNaN(parseInt(element.getAttribute(attr)))) {
- offset = document.querySelector(element.getAttribute(attr)).offsetHeight
- } else {
- offset = parseInt(element.getAttribute(attr))
- }
- }
- }
+ const offset = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('scroll-padding-top'))
document.documentElement.scroll({ top: element.offsetTop - offset, behavior: 'smooth' })
},
action: (element) => {
- let href = element.getAttribute('href')
-
- if (href === null) {
- href = element.getAttribute('data-action-href')
- }
+ const href = element.href ? element.getAttribute('href') : element.getAttribute('data-action-href')
+ const data = element.dataset.libAnhor ? element.dataset.libAnhor : ''
+ const target = document.querySelector(`[id="${href.replace('#', '')}"]`)
- const id = document.querySelector(`[id="${href.replace('#', '')}"]`)
- let options = element.getAttribute('data-action-options')
-
- if (options === null) {
- options = ''
- }
-
- if (id !== null) {
- if (!(options.indexOf('mobile') > -1 && window.innerWidth > 960)) {
- LibAnchor.animation(id)
+ if (target !== null) {
+ if (!(data.includes('mobile') && window.innerWidth > 960)) {
+ LibAnchor.animation(target)
+ }
- if (options.indexOf('hash') > -1) {
- window.location.hash = id
- }
+ if (!data.includes('silent')) {
+ window.location.hash = target.id
}
}
},
init: () => {
- const selector = [...document.querySelectorAll('[id]')]
+ const selector = document.querySelectorAll('[id]')
if (selector[0] !== null) {
- selector.forEach((element) => {
+ selector.forEach(element => {
if (window.location.hash && element.getAttribute('id') === window.location.hash.replace('#', '')) {
LibAnchor.animation(element)
}
@@ -54,6 +32,4 @@ const LibAnchor = {
}
}
-LibAnchor.init()
-
export default LibAnchor
diff --git a/src/scripts/Libraries/CookieConsent.js b/src/scripts/Libraries/CookieConsent.js
index d09ab83..7b70e91 100644
--- a/src/scripts/Libraries/CookieConsent.js
+++ b/src/scripts/Libraries/CookieConsent.js
@@ -1,41 +1,20 @@
const LibCookieConsent = {
init: () => {
- if (localStorage.getItem('cookieconsent') === 'approve') {
- const type = localStorage.getItem('cookieconsent_type')
+ const type = localStorage.getItem('lib-cookieconsent')
- if (type !== null) {
- if (type === 'performance') {
- LibCookieConsent.append('performance')
- } else if (type === 'marketing') {
- LibCookieConsent.append('all')
- }
- } else {
- LibCookieConsent.append('all')
- }
- } else if (localStorage.getItem('cookieconsent') === null) {
- LibCookieConsent.append('all')
+ if (type !== null) {
+ JSON.parse(type).forEach(type => LibCookieConsent.append(type))
}
},
- set: (type, callback) => {
- if (type === 'approve') {
- localStorage.setItem('cookieconsent', 'approve')
- LibCookieConsent.append('all')
- } else if (type === 'performance') {
- localStorage.setItem('cookieconsent', 'approve')
- localStorage.setItem('cookieconsent_type', 'performance')
- LibCookieConsent.append('performance')
- } else if (type === 'marketing') {
- localStorage.setItem('cookieconsent', 'approve')
- localStorage.setItem('cookieconsent_type', 'marketing')
- LibCookieConsent.append('all')
- } else if (type === 'decline') {
- localStorage.setItem('cookieconsent', 'decline')
- localStorage.removeItem('cookieconsent_type')
+ set: (type) => {
+ localStorage.setItem('lib-cookieconsent', JSON.stringify(type))
+ localStorage.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
+
+ if (type.length > 0) {
+ type.forEach(type => LibCookieConsent.append(type))
+ } else {
+ localStorage.setItem('lib-cookieconsent', JSON.stringify([]))
LibCookieConsent.remove()
-
- if (callback) {
- callback()
- }
}
},
remove: () => {
@@ -77,4 +56,6 @@ const LibCookieConsent = {
}
}
+LibCookieConsent.init()
+
export default LibCookieConsent
diff --git a/src/scripts/Libraries/Dialog.js b/src/scripts/Libraries/Dialog.js
index d51e89f..0a44083 100644
--- a/src/scripts/Libraries/Dialog.js
+++ b/src/scripts/Libraries/Dialog.js
@@ -1,69 +1,73 @@
+import { loadStimulus } from './Stimulus.js'
+
const LibDialog = {
- show: (content, callback) => {
- if (document.querySelector('.lib-dialog > [class^="c-dialog"]') !== null) {
- document.querySelector('.lib-dialog > [class^="c-dialog"]').remove()
- }
+ show: async(content) => {
+ return new Promise(resolve => {
+ if (document.querySelector('.lib-dialog > [class^="c-dialog"]') !== null) {
+ document.querySelector('.lib-dialog > [class^="c-dialog"]').remove()
+ }
- if (document.querySelector('.lib-dialog') === null) {
- document.body.insertAdjacentHTML('beforeend', '
')
- }
+ if (document.querySelector('.lib-dialog') === null) {
+ document.body.insertAdjacentHTML('beforeend', '
')
+ }
- document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
- document.querySelector('.lib-dialog').style.display = 'flex'
+ document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
+ document.querySelector('.lib-dialog').style.display = 'flex'
- function outerHeight(el) {
- return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom)
- }
+ function outerHeight(el) {
+ return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom)
+ }
- if (outerHeight(document.querySelector('.lib-dialog > [class^="c-dialog"]')) > window.innerHeight) {
- const offset = window.innerWidth - document.body.clientWidth
+ if (outerHeight(document.querySelector('.lib-dialog > [class^="c-dialog"]')) > window.innerHeight) {
+ const offset = window.innerWidth - document.body.clientWidth
- document.documentElement.style.paddingRight = `${offset}px`
- document.documentElement.classList.add('is-overflow-hidden')
+ document.documentElement.style.paddingRight = `${offset}px`
+ document.documentElement.classList.add('overflow-hidden')
- if (document.querySelector('#l-header') !== null) {
- document.querySelector('#l-header').style.right = `${offset}px`
+ if (document.querySelector('#l-header') !== null) {
+ document.querySelector('#l-header').style.right = `${offset}px`
+ }
}
- }
- if (callback) {
- callback()
- }
+ loadStimulus(document.querySelector('.lib-dialog'))
- document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
- if (e.target.classList.contains('lib-dialog')) {
- document.documentElement.addEventListener('mouseup', function e() {
- LibDialog.hide()
- document.documentElement.removeEventListener('mouseup', e)
- })
- }
- }, true)
- },
- hide: (callback) => {
- if (document.querySelector('.lib-dialog') !== null) {
- document.querySelector('.lib-dialog')._addDataValue('state', 'hiding')
- }
+ resolve()
- setTimeout(() => {
+ document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
+ if (e.target.classList.contains('lib-dialog')) {
+ document.documentElement.addEventListener('mouseup', function e() {
+ LibDialog.hide()
+ document.documentElement.removeEventListener('mouseup', e)
+ })
+ }
+ }, true)
+ })
+ },
+ hide: async() => {
+ return new Promise(resolve => {
if (document.querySelector('.lib-dialog') !== null) {
- document.querySelector('.lib-dialog').style.display = 'none'
- document.documentElement.classList.remove('is-overflow-hidden')
+ document.querySelector('.lib-dialog')._addDataValue('state', 'hiding')
+ }
- if (document.querySelector('#l-header') !== null) {
- document.querySelector('#l-header').style.right = ''
- }
+ setTimeout(() => {
+ if (document.querySelector('.lib-dialog') !== null) {
+ document.querySelector('.lib-dialog').style.display = 'none'
+ document.documentElement.classList.remove('overflow-hidden')
- document.querySelector('.lib-dialog').remove()
- }
+ if (document.querySelector('#l-header') !== null) {
+ document.querySelector('#l-header').style.right = ''
+ }
- if (callback) {
- callback()
- }
- }, 300)
+ document.querySelector('.lib-dialog').remove()
+ }
+
+ resolve()
+ }, 300)
+ })
},
- action: (element, url, callback) => {
+ action: async(element, url) => {
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => response.json()).then(({ dialog }) => {
- LibDialog.show(dialog, callback)
+ LibDialog.show(dialog)
})
}
}
diff --git a/src/scripts/Libraries/Drawer.js b/src/scripts/Libraries/Drawer.js
index c6a74f0..c2e6ce9 100644
--- a/src/scripts/Libraries/Drawer.js
+++ b/src/scripts/Libraries/Drawer.js
@@ -3,8 +3,8 @@ import { LibStimulus, Controller } from './Stimulus.js'
LibStimulus.register('lib-drawer', class extends Controller {
init() {
setTimeout(() => this.queryTarget('nav').classList.add('is-transition'), 50)
- this.queryTarget('nav').addEventListener('click', (e) => {
- if (e.target === this.queryTarget('nav')) {
+ this.queryTarget('nav').addEventListener('click', ({ target }) => {
+ if (target === this.queryTarget('nav')) {
this.hide()
}
})
@@ -12,28 +12,28 @@ LibStimulus.register('lib-drawer', class extends Controller {
show() {
this.queryTarget('nav').scrollLeft = 0
- this.queryTarget('nav').style.setProperty('--drawerOpacity', '1')
+ this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '1')
this.queryTarget('nav').classList.add('is-opacity')
this.queryTarget('nav')._addDataValue('state', 'active')
- document.documentElement.classList.add('is-lib-drawer-active')
+ document.documentElement.classList.add('overflow-hidden')
}
hide() {
this.queryTarget('nav')._removeDataValue('state', 'active')
this.queryTarget('nav').classList.add('is-opacity')
- this.queryTarget('nav').style.setProperty('--drawerOpacity', '0')
- document.documentElement.classList.remove('is-lib-drawer-active')
+ this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '0')
+ document.documentElement.classList.remove('overflow-hidden')
}
- scroll(e) {
- if (e.target.scrollLeft > 1) {
+ scroll({ target }) {
+ if (target.scrollLeft > 1) {
this.queryTarget('nav').classList.remove('is-opacity')
- this.queryTarget('nav').style.setProperty('--drawerOpacity', `${Math.abs((e.target.scrollLeft / this.queryTarget('nav').children[0].clientWidth) - 1)}`)
+ this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.queryTarget('nav').children[0].clientWidth) - 1)}`)
}
- if (e.target.scrollLeft === this.queryTarget('nav').children[0].clientWidth) {
+ if (target.scrollLeft === this.queryTarget('nav').children[0].clientWidth) {
this.queryTarget('nav')._removeDataValue('state', 'active')
- document.documentElement.classList.remove('is-lib-drawer-active')
+ document.documentElement.classList.remove('overflow-hidden')
}
}
})
diff --git a/src/scripts/Libraries/NativeSlider.js b/src/scripts/Libraries/NativeSlider.js
index 5f7a04b..9d6fbe4 100644
--- a/src/scripts/Libraries/NativeSlider.js
+++ b/src/scripts/Libraries/NativeSlider.js
@@ -15,36 +15,38 @@ export default function LibNativeSlider(selector, parent) {
if (!selector.classList.contains('is-fade')) {
self.behavior = 'smooth'
- const grabbing = () => {
- self.isDown = false
- self.paused = false
- selector.classList.remove('is-grabbing')
- selector.scrollLeft = selector.scrollLeft - 1
- }
+ if (!document.documentElement.classList.contains('safari')) {
+ const grabbing = () => {
+ self.isDown = false
+ self.paused = false
+ selector.classList.remove('is-grabbing')
+ selector.scrollLeft = selector.scrollLeft - 1
+ }
- selector.addEventListener('mouseleave', grabbing)
+ selector.addEventListener('mouseleave', grabbing)
- selector.addEventListener('mouseup', grabbing)
+ selector.addEventListener('mouseup', grabbing)
- selector.addEventListener('mousedown', e => {
- self.isDown = true
- self.startX = e.pageX - selector.offsetLeft
- self.scrollLeft = selector.scrollLeft
- self.paused = true
- })
+ selector.addEventListener('mousedown', e => {
+ self.isDown = true
+ self.startX = e.pageX - selector.offsetLeft
+ self.scrollLeft = selector.scrollLeft
+ self.paused = true
+ })
- selector.addEventListener('mousemove', e => {
- if (!self.isDown) return
- e.preventDefault()
- const x = e.pageX - selector.offsetLeft
- const walk = (x - self.startX) * 1.25
- selector.classList.add('is-grabbing')
- selector.scrollLeft = self.scrollLeft - walk
+ selector.addEventListener('mousemove', e => {
+ if (!self.isDown) return
+ e.preventDefault()
+ const x = e.pageX - selector.offsetLeft
+ const walk = (x - self.startX) * 1.25
+ selector.classList.add('is-grabbing')
+ selector.scrollLeft = self.scrollLeft - walk
- selector.ondragstart = dragEvent => {
- dragEvent.preventDefault()
- }
- })
+ selector.ondragstart = dragEvent => {
+ dragEvent.preventDefault()
+ }
+ })
+ }
}
if (self.ref.counterMax !== null) {
diff --git a/src/scripts/Libraries/ReCaptcha.js b/src/scripts/Libraries/ReCaptcha.js
index 71e007e..8dc5973 100644
--- a/src/scripts/Libraries/ReCaptcha.js
+++ b/src/scripts/Libraries/ReCaptcha.js
@@ -7,13 +7,21 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
importScript(cdn.recaptcha.replace('{apikey}', this.data.get('api')))
}
- execute(e) {
- e.preventDefault()
-
- window.grecaptcha.enterprise.ready(() => {
- window.grecaptcha.enterprise.execute(this.data.get('api'), { action: this.data.get('action') ? this.data.get('action') : 'form' }).then(token => {
- this.element.querySelector('[name="gtoken"]').value = token
+ async execute() {
+ return new Promise(resolve => {
+ window.grecaptcha.enterprise.ready(() => {
+ window.grecaptcha.enterprise.execute(this.data.get('api'), { action: this.data.get('action') ? this.data.get('action') : 'form' }).then(token => {
+ this.element.querySelector('[name="gtoken"]').value = token
+ resolve()
+ })
})
})
}
+
+ async submit(e) {
+ e.preventDefault()
+
+ await this.execute()
+ this.element.submit()
+ }
})
diff --git a/src/scripts/Libraries/Ripple.js b/src/scripts/Libraries/Ripple.js
index 32cfa81..5a3af75 100644
--- a/src/scripts/Libraries/Ripple.js
+++ b/src/scripts/Libraries/Ripple.js
@@ -1,38 +1,24 @@
-export default function LibRipple(element, e) {
- const init = (container) => {
- if (container.querySelector('.lib-ripple-inner') === null) {
- container.insertAdjacentHTML('beforeend', "
")
- }
+const LibRipple = ({ currentTarget, layerX, layerY }) => {
+ const container = currentTarget
- const ink = container.querySelector('.lib-ripple-inner')
-
- ink.classList.remove('animation')
-
- if (ink.clientWidth === 0 && ink.clientHeight === 0) {
- const d = Math.max(element.offsetWidth, element.offsetHeight)
+ if (container.querySelector('.lib-ripple') === null) {
+ container.insertAdjacentHTML('beforeend', "
")
+ }
- ink.style.width = d + 'px'
- ink.style.height = d + 'px'
- }
+ const ink = container.querySelector('.lib-ripple')
- let x, y
+ ink.classList.remove('animation')
- if (container === document.body) {
- x = e.clientX - container.offsetLeft - (ink.clientWidth / 2)
- y = e.clientY - container.offsetTop - (ink.clientHeight / 2)
- } else {
- x = e.pageX - container.offsetLeft - (ink.clientWidth / 2)
- y = e.pageY - container.offsetTop - (ink.clientHeight / 2)
- }
+ if (ink.clientWidth === 0 && ink.clientHeight === 0) {
+ const d = Math.max(container.offsetWidth, container.offsetHeight)
- ink.style.top = y + 'px'
- ink.style.left = x + 'px'
- ink.classList.add('animation')
+ ink.style.width = d + 'px'
+ ink.style.height = d + 'px'
}
- if (element.getAttribute('data-action-ripple') === 'body') {
- init(document.body)
- } else {
- init(element)
- }
+ ink.style.top = layerY - (ink.clientHeight / 2) + 'px'
+ ink.style.left = layerX - (ink.clientWidth / 2) + 'px'
+ ink.classList.add('animation')
}
+
+export default LibRipple
diff --git a/src/scripts/Libraries/Stimulus.js b/src/scripts/Libraries/Stimulus.js
index 572cb57..6d3adad 100644
--- a/src/scripts/Libraries/Stimulus.js
+++ b/src/scripts/Libraries/Stimulus.js
@@ -1,13 +1,9 @@
-import { Application, Controller as DefaultController } from '@stimulus/core'
+import { Application, Controller as DefaultController } from '@hotwired/stimulus'
import loadStimulus from '../Utils/Functions/loadStimulus.js'
-const LibStimulus = new Application(document.documentElement, {
- controllerAttribute: 'data-controller',
- actionAttribute: 'data-action',
- targetAttribute: 'data-ref'
-})
+const LibStimulus = new Application(document.documentElement)
-export const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
+const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
class Controller extends DefaultController {
getValue(value) {
@@ -39,8 +35,8 @@ class Controller extends DefaultController {
}
}
-LibStimulus.start().then(() => loadStimulus(document))
+LibStimulus.start().then(() => loadStimulus(document.body))
-window.LibStimulus = { instance: LibStimulus, Controller, loadStimulus }
+window.LibStimulus = { default: LibStimulus, Controller, loadStimulus }
-export { LibStimulus, Controller, loadStimulus }
+export { LibStimulus, Controller, loadStimulus, getController }
diff --git a/src/scripts/Libraries/Swup.js b/src/scripts/Libraries/Swup.js
index 03a3cf3..34b845f 100644
--- a/src/scripts/Libraries/Swup.js
+++ b/src/scripts/Libraries/Swup.js
@@ -1,28 +1,28 @@
import Swup from 'swup'
-import { LibStimulus, loadStimulus } from './Stimulus.js'
+import { getController, loadStimulus } from './Stimulus.js'
import LibAnchor from './Anchor.js'
import LibDialog from './Dialog.js'
import LibCookieConsent from './CookieConsent.js'
const LibSwup = new Swup({
- containers: ['#l-main'],
- linkSelector: `a[href^="${window.location.origin}"]:not([data-no-swup]):not([target="_blank"]), a[href^="/"]:not([data-no-swup]):not([target="_blank"]), a[href^="#"]:not([data-no-swup])`
+ containers: ['#l-main', '#l-header'].filter(element => document.querySelector(element)),
+ linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
})
-LibSwup.on('clickLink', () => {
- document.body.classList.remove('is-overflow-hidden')
+LibSwup.on('clickLink', async() => {
+ document.body.classList.remove('overflow-hidden')
- if (document.querySelector('.is-lib-drawer-active') !== null) {
- LibStimulus.getController(document.body, 'lib-drawer').hide()
+ if (document.querySelector('.lib-drawer[data-state~="active"]') !== null) {
+ getController(document.body, 'lib-drawer').hide()
}
if (document.querySelector('.lib-dialog') !== null) {
- LibDialog.hide()
+ await LibDialog.hide()
}
})
LibSwup.on('animationOutDone', () => {
- window.scrollTo(0, 0)
+ document.documentElement.scroll({ top: 0, behavior: 'instant' })
})
LibSwup.on('contentReplaced', () => {
@@ -38,12 +38,12 @@ LibSwup.on('contentReplaced', () => {
}
})
+ LibAnchor.init()
+
LibSwup.options.containers.forEach(selector => {
loadStimulus(document.querySelector(selector))
})
- LibAnchor.init()
-
if (typeof window.fbq !== 'undefined') {
window.fbq('track', 'PageView')
}
diff --git a/src/scripts/Libraries/Tabs.js b/src/scripts/Libraries/Tabs.js
index 7bf7406..ab16d0a 100644
--- a/src/scripts/Libraries/Tabs.js
+++ b/src/scripts/Libraries/Tabs.js
@@ -1,5 +1,5 @@
-export default function LibTabs(element, callback) {
- [...element.querySelector('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]')].forEach((selector, index) => {
+export default function LibTabs(element) {
+ element.querySelector('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach((selector, index) => {
selector.addEventListener('click', e => {
e.preventDefault()
@@ -11,10 +11,6 @@ export default function LibTabs(element, callback) {
})
element.querySelector('[data-lib-tabs-area]').children[index]._addDataValue('state', 'active')
-
- if (callback) {
- callback(index)
- }
})
})
}
diff --git a/src/scripts/Libraries/Tippy.js b/src/scripts/Libraries/Tippy.js
index 847a876..bc03e93 100644
--- a/src/scripts/Libraries/Tippy.js
+++ b/src/scripts/Libraries/Tippy.js
@@ -27,12 +27,12 @@ export default class LibTippy {
options.content = document.querySelector('#' + template).innerHTML
} else {
options.content = `
-
-
- ${element.getAttribute('aria-label')}
-
-
- `
+
+
+ ${element.getAttribute('aria-label')}
+
+
+ `
}
}
@@ -64,7 +64,7 @@ export default class LibTippy {
if (this.type.includes('-full')) {
instance.popper.classList.add('is-full')
- document.documentElement.classList.add('m:is-overlay')
+ document.documentElement.classList.add('m:is-body-overlay')
}
if (typeof name === 'undefined') {
@@ -77,7 +77,7 @@ export default class LibTippy {
},
onHide: () => {
if (this.type.includes('-full')) {
- setTimeout(() => document.documentElement.classList.remove('m:is-overlay'), 50)
+ setTimeout(() => document.documentElement.classList.remove('m:is-body-overlay'), 50)
}
}
}
diff --git a/src/scripts/Ui/Input.js b/src/scripts/Ui/Input.js
index c93bf2e..da6946c 100644
--- a/src/scripts/Ui/Input.js
+++ b/src/scripts/Ui/Input.js
@@ -3,7 +3,7 @@ import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
import { importStyle } from '../Utils/Functions/+.js'
LibStimulus.register('ui-input', class extends Controller {
- connect() {
+ async connect() {
const element = this.element
this.validate(element, false)
@@ -14,13 +14,11 @@ LibStimulus.register('ui-input', class extends Controller {
this.typeNumber(element)
- this.typeTime(element)
-
- this.typeDatetime(element)
+ this.typeFile(element)
- this.typeColor(element)
+ await this.typeDatetime(element)
- this.typeFile(element)
+ await this.typeColor(element)
}
validate(element, validate) {
@@ -42,15 +40,15 @@ LibStimulus.register('ui-input', class extends Controller {
if (input.checkValidity()) {
element._addDataValue('state', 'valid')
-
- // if (element.querySelector(`[class^="icon"][class*="valid"]`) === null) {
- // element.insertAdjacentHTML("beforeend", ` `)
- // }
} else {
element._addDataValue('state', 'invalid')
if (element.querySelector('[class^="icon"][class*="valid"]') === null) {
- element.insertAdjacentHTML('beforeend', ` `)
+ const icon = element.querySelector('.icon-r')
+ const elm = icon || element
+ const where = icon ? 'afterend' : 'beforeend'
+
+ elm.insertAdjacentHTML(where, `
`)
}
}
}
@@ -103,7 +101,7 @@ LibStimulus.register('ui-input', class extends Controller {
const date = element.querySelector('[type^="date"]')
if (date !== null && !document.documentElement.classList.contains('mobile')) {
- const lang = await import(`/* @vite-ignore */https://cdn.esm.sh/v41/vanillajs-datepicker/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.js`)
+ const lang = await import(`/* @vite-ignore */https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/js/i18n/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.min.js`)
const { Datepicker } = await import('vanillajs-datepicker')
await importStyle(cdn.datepicker)
@@ -116,8 +114,7 @@ LibStimulus.register('ui-input', class extends Controller {
let currentDate; let currentTime = null
date.setAttribute('type', 'hidden')
- element.insertAdjacentHTML('beforeend', ` `)
- element.querySelector('[type="text"]').addEventListener('keydown', (e) => e.preventDefault())
+ element.insertAdjacentHTML('beforeend', ` `)
const hidden = element.querySelector('[type="hidden"]')
@@ -126,31 +123,51 @@ LibStimulus.register('ui-input', class extends Controller {
}
const datepicker = new Datepicker(element.querySelector('[type="text"]'), Object.assign({
- autohide: true,
+ autohide: !datetime,
language: document.documentElement.lang,
+ format: 'dd.mm.yyyy',
+ clearBtn: true,
+ todayBtn: true,
+ todayBtnMode: 1,
minDate: Datepicker.parseDate(hidden.getAttribute('min'), 'yyyy-mm-dd'),
maxDate: Datepicker.parseDate(hidden.getAttribute('max'), 'yyyy-mm-dd')
}, JSON.parse(element.getAttribute('data-lib-datepicker'))))
-
datepicker.setDate(Datepicker.parseDate(hidden.value, 'yyyy-mm-dd'))
if (datetime && hidden.value) {
- element.insertAdjacentHTML('afterbegin', `${datepicker.getDate('dd.mm.yyyy') + ' ' + hidden.dataset.time} `)
+ element.insertAdjacentHTML('afterbegin', `${datepicker.getDate('dd.mm.yyyy') + ' ' + hidden.dataset.time} `)
+ }
+
+ if (datetime) {
+ datepicker.element.addEventListener('keydown', e => {
+ if (e.key === 'Backspace' || e.key === 'Delete') {
+ datepicker.setDate({ clear: true })
+ } else {
+ e.preventDefault()
+ }
+ })
}
datepicker.element.addEventListener('changeDate', () => {
if (typeof hidden.dataset.time !== 'undefined') {
- hidden.value = datepicker.getDate('yyyy-mm-dd') + 'T' + hidden.dataset.time
+ if (typeof datepicker.getDate('yyyy-mm-dd') !== 'undefined') {
+ hidden.value = datepicker.getDate('yyyy-mm-dd') + 'T' + hidden.dataset.time
- const value = datepicker.getDate('dd.mm.yyyy') + ' ' + hidden.dataset.time
+ const value = '' + datepicker.getDate('dd.mm.yyyy') + ' ' + hidden.dataset.time
- if (element.querySelector('.input') === null) {
- element.insertAdjacentHTML('afterbegin', `${value} `)
+ if (element.querySelector('.input') === null) {
+ element.insertAdjacentHTML('afterbegin', `${value} `)
+ } else {
+ element.querySelector('.input').innerHTML = value
+ }
} else {
- element.querySelector('.input').textContent = value
+ hidden.value = ''
+ element.querySelector('.input').textContent = ''
}
- } else {
+ } else if (datepicker.getDate()) {
hidden.value = datepicker.getDate('yyyy-mm-dd')
+ } else {
+ hidden.value = ''
}
hidden.dispatchEvent(new Event('change', { bubbles: true }))
@@ -172,18 +189,29 @@ LibStimulus.register('ui-input', class extends Controller {
currentTime = time
- footer.insertAdjacentHTML('beforeend', `
`)
-
- this.typeTime(footer)
+ footer.querySelector('.datepicker-controls').insertAdjacentHTML('beforeend', `Ok `)
footer.querySelector('[type="time"]').addEventListener('change', e => {
hidden.setAttribute('data-time', e.target.value)
})
- footer.querySelector('[type="time"]').addEventListener('click', e => {
+ footer.querySelector('[type="time"]').addEventListener('mousedown', e =>
+ e.stopPropagation()
+ )
+
+ footer.querySelector('[type="time"]').addEventListener('blur', e => {
e.stopPropagation()
e.preventDefault()
- e.target.focus()
+ datepicker.element.focus()
+ })
+
+ footer.querySelector('[data-ok]').addEventListener('click', e => {
+ if (hidden.value === '') {
+ footer.querySelector('.today-btn').click()
+ }
+
+ datepicker.element.focus()
+ datepicker.hide()
})
} else if (datetime) {
currentTime = hidden.dataset.time
@@ -193,37 +221,19 @@ LibStimulus.register('ui-input', class extends Controller {
datepicker.element.addEventListener('hide', element => {
if (hidden.value === '') {
this.element._removeDataValue('state', 'active')
- }
-
- if (datetime) {
- element.detail.datepicker.picker.element.querySelector('[type="time"]').dispatchEvent(new Event('change', { bubbles: true }))
+ } else {
+ if (datetime) {
+ element.detail.datepicker.picker.element.querySelector('[type="time"]').dispatchEvent(new Event('change', { bubbles: true }))
- if (currentDate === datepicker.getDate('yyyy-mm-dd') && currentTime.toString() !== hidden.dataset.time.toString()) {
- datepicker.element.dispatchEvent(new Event('changeDate', { bubbles: true }))
+ if (currentDate !== datepicker.getDate('yyyy-mm-dd') || currentTime.toString() !== hidden.dataset.time.toString()) {
+ datepicker.element.dispatchEvent(new Event('changeDate', { bubbles: true }))
+ }
}
}
})
}
}
- async typeTime(element) {
- if (element.querySelector('[type="time"]') !== null && element.querySelector('[type="time"]').type !== 'time') {
- const Cleave = (await import('cleave.js')).default
-
- element.querySelector('[type="time"]').setAttribute('placeholder', '--:--')
- element.querySelector('[type="time"]').classList.add('polyfill')
-
- if (element.querySelector('label') !== null) {
- element.querySelector('[type="time"]').classList.add('is-label')
- }
-
- new Cleave(element.querySelector('[type="time"]'), {
- time: true,
- timePattern: ['h', 'm']
- })
- }
- }
-
async typeColor(element) {
if (element.querySelector('[type="color"]') !== null) {
element.setAttribute('data-type', 'color')
diff --git a/src/scripts/Ui/Select.js b/src/scripts/Ui/Select.js
index 61298a1..a6371ef 100644
--- a/src/scripts/Ui/Select.js
+++ b/src/scripts/Ui/Select.js
@@ -20,13 +20,17 @@ LibStimulus.register('ui-select', class extends Controller {
element._addDataValue('state', 'invalid')
if (element.querySelector('[class^="icon"][class*="valid"]') === null) {
- element.insertAdjacentHTML('beforeend', ` `)
+ const icon = element.querySelector('.icon-r')
+ const elm = icon || element
+ const where = icon ? 'afterend' : 'beforeend'
+
+ elm.insertAdjacentHTML(where, `
`)
}
}
}
connect() {
- const self = this; const element = self.element
+ const element = this.element
const select = element.querySelector('select')
const option = element.querySelectorAll('[data-option]')
diff --git a/src/scripts/Ui/Text.js b/src/scripts/Ui/Text.js
index 8ef7a6a..3b092a3 100644
--- a/src/scripts/Ui/Text.js
+++ b/src/scripts/Ui/Text.js
@@ -1,16 +1,16 @@
import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-LibStimulus.register('ui-wsw', class extends Controller {
+LibStimulus.register('ui-text', class extends Controller {
connect() {
- const self = this; const element = self.element
+ const element = this.element
Array.from(element.querySelectorAll('table')).forEach(table => {
- self.wrap(table, new DOMParser().parseFromString('
', 'text/html').body.firstChild)
+ this.wrap(table, new DOMParser().parseFromString('
', 'text/html').body.firstChild)
})
Array.from(element.querySelectorAll('iframe')).forEach(iframe => {
- if (iframe.src.match(/youtubee\.com/i)) {
- self.wrap(iframe, new DOMParser().parseFromString(`
`, 'text/html').body.firstChild)
+ if (iframe.src.match(/youtube\.com/i)) {
+ this.wrap(iframe, new DOMParser().parseFromString(`
`, 'text/html').body.firstChild)
} else if (iframe.width && iframe.style.aspectRatio !== 'undefined') {
iframe.style.aspectRatio = iframe.width + '/' + iframe.height
iframe.style.height = 'auto'
diff --git a/src/scripts/Utils/Functions/+.js b/src/scripts/Utils/Functions/+.js
index b2fb626..2069e23 100644
--- a/src/scripts/Utils/Functions/+.js
+++ b/src/scripts/Utils/Functions/+.js
@@ -1,4 +1,5 @@
import './dataValue.js'
+export { default as fetchHandler } from './fetchHandler.js'
export { default as importScript } from './importScript.js'
export { default as importStyle } from './importStyle.js'
export { default as inView } from './inView.js'
diff --git a/src/scripts/Utils/Functions/dataValue.js b/src/scripts/Utils/Functions/dataValue.js
index 3995fda..c4f0871 100644
--- a/src/scripts/Utils/Functions/dataValue.js
+++ b/src/scripts/Utils/Functions/dataValue.js
@@ -41,3 +41,12 @@ Element.prototype._hasDataValue = function(key, value) {
if (attribute === null) return false
return attribute.split(' ').includes(value)
}
+
+Element.prototype._getDataValue = function(key) {
+ key = `data-${key}`
+
+ const attribute = this.getAttribute(key)
+
+ if (attribute === null) return ''
+ return attribute
+}
diff --git a/src/scripts/Utils/Functions/inView.js b/src/scripts/Utils/Functions/inView.js
index 32587a7..4ee81fc 100644
--- a/src/scripts/Utils/Functions/inView.js
+++ b/src/scripts/Utils/Functions/inView.js
@@ -1,28 +1,25 @@
-export default function inView(element, callback, options) {
+export default function inView(element, options) {
let inView = false
- if (typeof IntersectionObserver === 'undefined' && callback) {
- callback()
- return false
- }
+ return new Promise((resolve) => {
+ if (typeof IntersectionObserver === 'undefined') {
+ resolve()
+ return false
+ }
- if (typeof options === 'undefined') {
- options = {}
- }
+ if (typeof options === 'undefined') {
+ options = {}
+ }
- if (typeof options.rootMargin === 'undefined') {
- options.rootMargin = '100px'
- }
+ if (typeof options.rootMargin === 'undefined') {
+ options.rootMargin = '100px'
+ }
- new IntersectionObserver(
- entries => {
+ new IntersectionObserver(entries => {
if (entries[0].isIntersecting && inView === false) {
inView = entries[0].isIntersecting
-
- if (callback) {
- callback()
- }
+ resolve()
}
- }, options
- ).observe(element)
+ }, options).observe(element)
+ })
}
diff --git a/src/scripts/Utils/Functions/loadStimulus.js b/src/scripts/Utils/Functions/loadStimulus.js
index 833c593..be8bbd2 100644
--- a/src/scripts/Utils/Functions/loadStimulus.js
+++ b/src/scripts/Utils/Functions/loadStimulus.js
@@ -1,5 +1,9 @@
-const dynamicControllers = ['ui-input', 'ui-select', 'ui-wsw', 'ui-checkbox', 'ui-radio', 'c-cookieconsent', 'c-form-cookieconsent']
-const dynamicActions = [['a[href^="#"]', 'click->lib#anchor'], ['.ui-btn', 'click->lib#ripple']]
+const dynamicControllers = ['ui-input', 'ui-select', 'ui-text', 'ui-checkbox', 'ui-radio', 'c-cookieconsent', 'c-form-cookieconsent']
+const dynamicActions = [['.ui-btn', 'click->lib#ripple']]
+
+if (!('scrollBehavior' in document.documentElement.style)) {
+ dynamicActions.push(['a[href^="#"]', 'click->lib#anchor'])
+}
function loadControllers(parent, selectors) {
if (parent !== null) {
diff --git a/src/scripts/Utils/cdn.js b/src/scripts/Utils/cdn.js
index cfd562c..3b26104 100644
--- a/src/scripts/Utils/cdn.js
+++ b/src/scripts/Utils/cdn.js
@@ -1,7 +1,7 @@
export default {
recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
- seamless: 'https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.2.3/dist/es5/seamless.min.js',
+ seamless: 'https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@2.1.6/lib/bundle.min.js',
pickr_css: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/themes/nano.min.css',
- tippy: 'https://cdn.jsdelivr.net/combine/npm/tippy.js@6.3.1/dist/tippy.css,npm/tippy.js@6.3.1/dist/svg-arrow.css,npm/tippy.js@6.3.1/themes/light-border.css,npm/tippy.js@6.3.1/animations/scale.css',
- datepicker: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.0.3/dist/css/datepicker.min.css'
+ tippy: 'https://cdn.jsdelivr.net/combine/npm/tippy.js@6.3.7/dist/tippy.css,npm/tippy.js@6.3.1/dist/svg-arrow.css,npm/tippy.js@6.3.7/themes/light-border.css,npm/tippy.js@6.3.7/animations/scale.css',
+ datepicker: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css'
}
diff --git a/src/styles/Components/CookieConsent.css b/src/styles/Components/CookieConsent.css
index e603601..13f2ff7 100644
--- a/src/styles/Components/CookieConsent.css
+++ b/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, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.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;
- }
+ & .wrp_c_head {
+ margin-bottom: 1rem;
- @media (--media-min-960) {
- animation: 0.5s ease 0s backwards 1 fadeInLeft;
- }
-
- @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;
- align-self: center;
-
- @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] {
- --ui-btn-bg: 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;
}
}
}
diff --git a/src/styles/Components/Dialog/Default.css b/src/styles/Components/Dialog/Default.css
index c6136f6..6723eb3 100644
--- a/src/styles/Components/Dialog/Default.css
+++ b/src/styles/Components/Dialog/Default.css
@@ -3,7 +3,7 @@
--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;
@@ -17,11 +17,11 @@
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%;
@@ -29,20 +29,20 @@
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 {
@@ -65,7 +65,7 @@
flex-direction: column;
max-height: 100%;
- @media (--media-min-768) {
+ @media (--media-t) {
--c-dialog-py: 1.25rem;
}
}
@@ -74,10 +74,5 @@
position: absolute;
right: 1rem;
top: 1rem;
- transition: var(--transition-opacity);
-
- &:hover {
- opacity: 0.8;
- }
}
}
diff --git a/src/styles/Components/Form/CookieConsent.css b/src/styles/Components/Form/CookieConsent.css
index d111c32..3916272 100644
--- a/src/styles/Components/Form/CookieConsent.css
+++ b/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;
}
}
diff --git a/src/styles/Layout/+.css b/src/styles/Layout/+.css
index 5418bab..6cbd57e 100644
--- a/src/styles/Layout/+.css
+++ b/src/styles/Layout/+.css
@@ -1 +1,3 @@
+@import "Header.css";
@import "Main.css";
+@import "Nav.css";
diff --git a/src/templates/Sections/.gitkeep b/src/styles/Layout/Header.css
similarity index 100%
rename from src/templates/Sections/.gitkeep
rename to src/styles/Layout/Header.css
diff --git a/src/styles/Layout/Main.css b/src/styles/Layout/Main.css
index f768e41..1b9f95e 100644
--- a/src/styles/Layout/Main.css
+++ b/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,16 +24,8 @@ html {
font-size: 90%;
}
- &.is-overlay {
- overflow: hidden;
- }
-
- &.is-lib-drawer-active {
- overflow: hidden;
- }
-
&.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 {
@@ -43,14 +37,14 @@ 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;
@@ -61,13 +55,13 @@ body {
position: fixed;
inset: 0;
content: "";
- background-color: rgba(var(--color-dark), 0.6);
+ 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-overlay & {
+ @nest .m\:is-body-overlay & {
@media (--media-m) {
pointer-events: auto;
opacity: 1;
@@ -76,21 +70,10 @@ body {
}
& .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 {
@@ -102,7 +85,7 @@ body {
&.transition-fade {
@nest html.swup-enabled & {
/* clean-css ignore:start */
- transition: opacity 0.2s;
+ transition: opacity 0.15s;
opacity: 1;
/* clean-css ignore:end */
}
@@ -118,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);
}
}
diff --git a/src/styles/Layout/Nav.css b/src/styles/Layout/Nav.css
new file mode 100644
index 0000000..c4a7cf6
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/styles/Libraries/+.css b/src/styles/Libraries/+.css
index f666beb..bb17b98 100644
--- a/src/styles/Libraries/+.css
+++ b/src/styles/Libraries/+.css
@@ -1,4 +1,3 @@
-@import "Animate.css";
@import "Datepicker.css";
@import "Dialog.css";
@import "Drawer.css";
diff --git a/src/styles/Libraries/Datepicker.css b/src/styles/Libraries/Datepicker.css
index f6cdffa..5eac909 100644
--- a/src/styles/Libraries/Datepicker.css
+++ b/src/styles/Libraries/Datepicker.css
@@ -1,16 +1,20 @@
.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 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 {
@@ -19,7 +23,7 @@
&::after, &::before {
top: 100%;
- left: 1.25rem;
+ left: 1.3125rem;
border: solid transparent;
content: "";
height: 0;
@@ -52,7 +56,7 @@
&::after, &::before {
bottom: 100%;
- left: 1.25rem;
+ left: 1.3125rem;
border: solid transparent;
content: "";
height: 0;
@@ -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 {
@@ -132,22 +159,24 @@
height: 2.25rem;
&::before {
- @mixin iconfont;
-
+ width: 1em;
+ height: 1em;
font-size: 1rem;
display: block;
+ background-color: currentColor;
+ content: "";
}
}
&.prev-btn {
&::before {
- content: var(--icon-chevron-left);
+ mask: var(--icon-chevron-left);
}
}
&.next-btn {
&::before {
- content: var(--icon-chevron-right);
+ mask: var(--icon-chevron-right);
}
}
@@ -157,8 +186,24 @@
}
}
+.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));
}
@@ -177,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 {
@@ -185,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);
}
}
diff --git a/src/styles/Libraries/Dialog.css b/src/styles/Libraries/Dialog.css
index 0b6d992..3b36ef6 100644
--- a/src/styles/Libraries/Dialog.css
+++ b/src/styles/Libraries/Dialog.css
@@ -2,18 +2,18 @@
--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;
}
}
diff --git a/src/styles/Libraries/Drawer.css b/src/styles/Libraries/Drawer.css
index b9a6204..40e74b3 100644
--- a/src/styles/Libraries/Drawer.css
+++ b/src/styles/Libraries/Drawer.css
@@ -1,5 +1,5 @@
.lib-drawer {
- --drawerOpacity: 0;
+ --lib-drawer-opacity: 0;
z-index: var(--z-30);
width: 100%;
@@ -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;
}
@@ -38,26 +42,26 @@
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);
}
}
@@ -69,8 +73,4 @@
min-width: 100vw;
scroll-snap-align: end;
}
-
- & > div {
- scroll-snap-align: end;
- }
}
diff --git a/src/styles/Libraries/Hint.css b/src/styles/Libraries/Hint.css
index 5d3f159..516505d 100644
--- a/src/styles/Libraries/Hint.css
+++ b/src/styles/Libraries/Hint.css
@@ -41,7 +41,7 @@
will-change: transform;
backface-visibility: hidden;
- @nest :hover&, :focus& {
+ @nest :is(:hover, :focus)& {
visibility: visible;
opacity: 1;
transition-delay: 100ms;
@@ -81,17 +81,17 @@
font-family: inherit;
line-height: 0.875rem;
white-space: nowrap;
- box-shadow: 0.25rem 0.25rem 0.5rem rgba(var(--lib-hint-bg), 0.15);
+ box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--lib-hint-bg) / 0.15);
@nest .lib-hint-light& {
- box-shadow: 0.25rem 0.25rem 0.5rem rgba(var(--color-dark), 0.15);
+ box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--color-dark) / 0.15);
}
@nest [aria-label]& {
content: attr(aria-label);
}
- @nest .lib-hint-sm&, .lib-hint-md&, .lib-hint-lg& {
+ @nest :is(.lib-hint-sm, .lib-hint-md, .lib-hint-lg)& {
white-space: normal;
line-height: 1.5;
word-wrap: break-word;
@@ -120,7 +120,7 @@
left: calc(50% - 0.375rem);
margin-bottom: -0.6875rem;
- @nest :hover&, :focus& {
+ @nest :is(:hover, :focus)& {
transform: translateY(-0.5rem);
}
}
@@ -128,7 +128,7 @@
&::after {
transform: translateX(-50%);
- @nest :hover&, :focus& {
+ @nest :is(:hover, :focus)& {
transform: translateX(-50%) translateY(-0.5rem);
}
}
diff --git a/src/styles/Libraries/NativeSlider.css b/src/styles/Libraries/NativeSlider.css
index 40eaca7..f7602cb 100644
--- a/src/styles/Libraries/NativeSlider.css
+++ b/src/styles/Libraries/NativeSlider.css
@@ -6,6 +6,20 @@
scrollbar-width: none !important;
-ms-overflow-style: none;
+ & > * {
+ flex: 0 0 auto;
+ scroll-snap-align: start;
+
+ @nest .is-fade& {
+ opacity: 0;
+ transition: var(--transition-opacity);
+
+ &[data-state="active"] {
+ opacity: 1;
+ }
+ }
+ }
+
&::-webkit-scrollbar {
display: none !important;
}
@@ -24,29 +38,15 @@
pointer-events: none;
}
}
-
- & > div, & > picture {
- flex: 0 0 auto;
- scroll-snap-align: start;
-
- @nest .is-fade& {
- opacity: 0;
- transition: var(--transition-opacity);
-
- &[data-state="active"] {
- opacity: 1;
- }
- }
- }
}
[data-lib-ns-nav-item] {
width: 0.75rem;
height: 0.75rem;
- border: 0.125rem solid rgb(var(--color-default));
+ border: 0.125rem solid rgb(var(--color-current));
border-radius: 50%;
&[data-state*="active"] {
- background-color: rgb(var(--color-default));
+ background-color: rgb(var(--color-current));
}
}
diff --git a/src/styles/Libraries/Ripple.css b/src/styles/Libraries/Ripple.css
index 1ec97ae..65bca9f 100644
--- a/src/styles/Libraries/Ripple.css
+++ b/src/styles/Libraries/Ripple.css
@@ -1,15 +1,16 @@
-[data-lib-ripple] {
+[data-action*="lib#ripple"] {
+ --lib-ripple-bg: rgb(var(--color-background));
+
position: relative;
user-select: none;
}
-.lib-ripple-inner {
+.lib-ripple {
position: absolute;
- background: rgb(var(--color-background));
+ background: var(--lib-ripple-bg);
border-radius: 50%;
transform: scale(0);
opacity: 0.4;
- animation-duration: 1s;
pointer-events: none;
@nest body > & {
@@ -22,5 +23,7 @@
&.animation {
animation-name: ripple;
+ animation-duration: 1s;
+ animation-fill-mode: both;
}
}
diff --git a/src/styles/Libraries/Tabs.css b/src/styles/Libraries/Tabs.css
index d428410..1831d40 100644
--- a/src/styles/Libraries/Tabs.css
+++ b/src/styles/Libraries/Tabs.css
@@ -7,11 +7,11 @@
& [data-lib-tabs-area] {
& > [data-lib-tabs-item] {
- animation: 0.3s ease 0s backwards 1 fadeOut;
+ animation: 0.3s ease 0s backwards 1 fade-out;
display: none;
- &[data-state="active"] {
- animation: 0.3s ease 0s backwards 1 fadeIn;
+ &:--state-active {
+ animation: 0.3s ease 0s backwards 1 fade-in;
display: block;
}
}
diff --git a/src/styles/Libraries/Tippy.css b/src/styles/Libraries/Tippy.css
index 45fd437..e7d230d 100644
--- a/src/styles/Libraries/Tippy.css
+++ b/src/styles/Libraries/Tippy.css
@@ -8,9 +8,9 @@
&[data-theme~="light-border"] {
background-color: rgb(var(--color-background));
background-clip: padding-box;
- border: 1px solid rgba(0, 8, 16, 0.05);
- color: rgb(var(--color-default));
- box-shadow: 0 3px 14px -0.5px rgba(0, 8, 16, 0.08);
+ border: 1px solid rgb(0 8 16 / 0.05);
+ color: rgb(var(--color-current));
+ box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 0.08);
border-radius: var(--radius);
left: 0.1875rem;
@@ -77,7 +77,7 @@
transition-timing-function: ease !important;
transition-duration: 300ms !important;
- &[data-state=hidden] {
+ &[data-state="hidden"] {
transform: translateY(100%);
opacity: 0;
}
diff --git a/src/styles/Ui/+.css b/src/styles/Ui/+.css
index c824807..ed65a7f 100644
--- a/src/styles/Ui/+.css
+++ b/src/styles/Ui/+.css
@@ -4,6 +4,7 @@
@import "Dropdown.css";
@import "Heading.css";
@import "Icon.css";
+@import "Image.css";
@import "Input.css";
@import "Label.css";
@import "Link.css";
@@ -11,5 +12,6 @@
@import "Progress.css";
@import "Radio.css";
@import "Select.css";
+@import "Switch.css";
@import "Text.css";
@import "Title.css";
diff --git a/src/styles/Ui/Badge.css b/src/styles/Ui/Badge.css
index 43b8e34..d114011 100644
--- a/src/styles/Ui/Badge.css
+++ b/src/styles/Ui/Badge.css
@@ -1,45 +1,58 @@
.ui-badge {
+ --ui-badge-width: auto;
+ --ui-badge-height: 1.5rem;
--ui-badge-py: 0.375rem;
--ui-badge-px: 0.5rem;
--ui-badge-size: 0.75rem;
+ --ui-badge-radius: var(--radius);
--ui-badge-weight: var(--font-normal);
- --ui-badge-bg: var(--color-primary);
- --ui-badge-color: var(--color-light);
+ --ui-badge-bg-opacity: var(--tw-bg-opacity, 1);
+ --ui-badge-text-opacity: var(--tw-text-opacity, 1);
+ --ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));
+ --ui-badge-color: rgb(var(--color-light) / var(--ui-badge-text-opacity));
+ --ui-badge-hover-opacity: 0.8;
display: inline-flex;
align-self: flex-start;
align-items: center;
text-align: center;
justify-content: center;
+ flex-shrink: 0;
font-size: var(--ui-badge-size);
font-weight: var(--ui-badge-weight);
padding: var(--ui-badge-py) var(--ui-badge-px);
- border-radius: var(--radius);
- background-color: rgb(var(--ui-badge-bg));
- color: rgb(var(--ui-badge-color));
+ border-radius: var(--ui-badge-radius);
+ background-color: var(--ui-badge-bg);
+ color: var(--ui-badge-color);
+ width: var(--ui-badge-width);
+ height: var(--ui-badge-height);
line-height: var(--ui-badge-size);
transition: var(--transition-opacity);
- @nest .no-touch [href]:hover&, .no-touch button:hover& {
- opacity: 0.8;
+ @nest .no-touch &:is([href]:hover, button:hover) {
+ opacity: var(--ui-badge-hover-opacity);
}
- &[data-type^="square"], &[data-type^="circle"] {
- --ui-badge-px: var(--ui-badge-py);
+ & svg {
+ width: 1em;
+ height: 1em;
+ }
- width: calc(var(--ui-badge-size) + (2 * var(--ui-badge-py)));
+ &:--type-square, &:--type-circle {
+ --ui-badge-px: var(--ui-badge-py);
+ --ui-badge-width: var(--ui-badge-height);
}
- &[data-type^="circle"] {
+ &:--type-circle {
border-radius: 50%;
}
- &[data-size="sm"] {
- --ui-badge-py: 0.25rem;
- --ui-badge-px: 0.5rem;
+ &:--size-sm {
+ --ui-badge-height: 1.25rem;
}
- &[data-size="md"] {
+ &:--size-md {
+ --ui-badge-height: 1.75rem;
--ui-badge-py: 0.5rem;
}
}
diff --git a/src/styles/Ui/Btn.css b/src/styles/Ui/Btn.css
index 3243a23..069677f 100644
--- a/src/styles/Ui/Btn.css
+++ b/src/styles/Ui/Btn.css
@@ -1,12 +1,17 @@
.ui-btn {
- --ui-btn-width: 2.375rem;
+ --ui-btn-width: auto;
+ --ui-btn-height: 2.375rem;
--ui-btn-py: 0.375rem;
--ui-btn-px: 1rem;
--ui-btn-size: 0.875rem;
+ --ui-btn-radius: var(--radius);
--ui-btn-weight: var(--font-medium);
- --ui-btn-bg: var(--color-primary);
- --ui-btn-color: var(--color-light);
+ --ui-btn-bg-opacity: var(--tw-bg-opacity, 1);
+ --ui-btn-text-opacity: var(--tw-text-opacity, 1);
+ --ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));
+ --ui-btn-color: rgb(var(--color-light) / var(--ui-btn-text-opacity));
--ui-btn-hover-opacity: 0.2;
+ --ui-btn-outline-width: 2px;
--ui-btn-outline-opacity: 0.5;
--ui-btn-icon-size: 1.125rem;
--ui-btn-icon-offset: calc((var(--ui-btn-py) / 1) * -1);
@@ -20,17 +25,27 @@
position: relative;
z-index: 1;
white-space: nowrap;
+ flex-shrink: 0;
font-size: var(--ui-btn-size);
font-weight: var(--ui-btn-weight);
- height: var(--ui-btn-width);
+ width: var(--ui-btn-width);
+ height: var(--ui-btn-height);
padding: var(--ui-btn-py) var(--ui-btn-px);
- border-radius: var(--radius);
+ border-radius: var(--ui-btn-radius);
transition: var(--transition-opacity), var(--transition-background);
- background-color: rgb(var(--ui-btn-bg));
- color: rgb(var(--ui-btn-color));
+ background-color: var(--ui-btn-bg);
+ color: var(--ui-btn-color);
- @nest .dark .bg-default& {
- --ui-btn-color: var(--color-dark);
+ @nest .dark &.bg-default {
+ --ui-btn-color: rgb(var(--color-dark));
+ }
+
+ &:--theme-light {
+ --ui-btn-color: rgb(var(--color-light) / var(--tw-text-opacity, 1));
+ }
+
+ &:--theme-dark {
+ --ui-btn-color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
}
&::before {
@@ -39,20 +54,23 @@
width: 100%;
height: 100%;
content: "";
- background-color: currentColor;
+ background-color: var(--ui-btn-color);
z-index: -1;
opacity: 0;
transition: var(--transition-opacity);
- @nest .no-touch :hover&, [data-state="active"]&, :focus& {
+ @nest .no-touch :is(:hover, :focus)&, :is(:--state-active)& {
opacity: var(--ui-btn-hover-opacity);
}
}
- & > span {
- &[class^="icon"] {
- font-size: var(--ui-btn-icon-size);
- }
+ & > svg {
+ width: 1em;
+ height: 1em;
+ }
+
+ & > [class^="icon"] {
+ font-size: var(--ui-btn-icon-size);
&.icon-l {
&:not([class*="mr-"]) {
@@ -79,10 +97,15 @@
}
}
- &[data-type*="outline"] {
- --ui-btn-bg: transparent;
- --ui-btn-color: var(--color-primary);
- --ui-btn-hover-opacity: 0.05;
+ &:--type-outline {
+ --ui-btn-color: currentColor;
+ --ui-btn-hover-opacity: 0.1;
+
+ background-color: transparent;
+
+ &::before {
+ background-color: var(--ui-btn-bg);
+ }
&::after {
position: absolute;
@@ -91,35 +114,31 @@
height: 100%;
content: "";
background-color: transparent;
- border: 1px solid currentColor;
+ border: var(--ui-btn-outline-width) solid var(--ui-btn-bg);
box-sizing: border-box;
opacity: var(--ui-btn-outline-opacity);
- border-radius: var(--radius);
+ border-radius: var(--ui-btn-radius);
}
}
- &[data-type^="square"], &[data-type^="circle"] {
+ &:--type-square, &:--type-circle {
--ui-btn-py: var(--ui-btn-py);
-
- width: var(--ui-btn-width);
+ --ui-btn-width: var(--ui-btn-height);
}
- &[data-type^="circle"] {
+ &:--type-circle {
border-radius: 50%;
}
- &[data-size="lg"] {
+ &:--size-lg {
--ui-btn-icon-size: 1.5rem;
- --ui-btn-width: 3rem;
+ --ui-btn-height: 3rem;
--ui-btn-px: 1.25rem;
}
- &[data-state="loading"] {
+ &:--state-loading {
pointer-events: none;
-
- & > span {
- opacity: 0;
- }
+ color: var(--ui-btn-bg);
&::before {
z-index: 1;
@@ -127,10 +146,10 @@
height: 1rem;
content: "";
background-color: transparent;
- border: 2px solid currentColor;
+ border: 2px solid var(--ui-btn-color);
border-right-color: transparent;
border-radius: 50%;
- animation: load 0.45s infinite linear;
+ animation: spin 0.45s infinite linear;
position: absolute;
margin-left: -0.625rem;
margin-top: -0.625rem;
@@ -140,18 +159,17 @@
}
}
- @media (--media-400) {
- &[data-type*="m:square"], &[data-type*="m:circle"] {
+ @media (--media-m) {
+ &:--type-square-m, &:--type-circle-m {
--ui-btn-py: var(--ui-btn-py);
+ --ui-btn-width: var(--ui-btn-height);
- width: var(--ui-btn-width);
-
- & > span {
+ & > * {
margin: 0 !important;
}
}
- &[data-type*="m:circle"] {
+ &:--type-circle-m {
border-radius: 50%;
}
}
@@ -161,9 +179,14 @@
display: flex;
& .ui-btn {
- &:not(:first-of-type) {
- box-shadow: -1px 0 rgba(var(--ui-btn-color), var(--ui-btn-hover-opacity));
+ &:not(:last-of-type) {
+ &, &::after {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+ &:not(:first-of-type) {
&, &::after {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -172,12 +195,13 @@
&::after {
border-left: 0;
}
- }
- &:not(:last-of-type) {
- &, &::after {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ &, &:--theme-light {
+ box-shadow: -1px 0 rgb(var(--color-light) / var(--ui-btn-hover-opacity));
+ }
+
+ &:--theme-dark {
+ box-shadow: -1px 0 rgb(var(--color-dark) / var(--ui-btn-hover-opacity));
}
}
}
diff --git a/src/styles/Ui/Checkbox.css b/src/styles/Ui/Checkbox.css
index 12900e7..5b4412d 100644
--- a/src/styles/Ui/Checkbox.css
+++ b/src/styles/Ui/Checkbox.css
@@ -1,13 +1,17 @@
.ui-checkbox, .ui-radio {
--ui-checkbox-width: 1.25rem;
--ui-checkbox-size: 0.875rem;
- --ui-checkbox-bg: var(--color-background);
--ui-checkbox-bg-opacity: 0.1;
- --ui-checkbox-border-color: var(--color-default);
+ --ui-checkbox-bg-raw: var(--color-background);
--ui-checkbox-border-opacity: 0.3;
- --ui-checkbox-checked-bg: var(--color-primary);
- --ui-checkbox-checked-fg: var(--color-light);
+ --ui-checkbox-border-color-raw: var(--color-current);
+ --ui-checkbox-checked-bg: rgb(var(--ui-checkbox-checked-bg-raw));
+ --ui-checkbox-checked-bg-raw: var(--color-accent);
+ --ui-checkbox-checked-fg: rgb(var(--color-light));
+ --ui-checkbox-color: currentColor;
--ui-checkbox-radius: 0.375rem;
+ --ui-checkbox-icon: var(--icon-check);
+ --ui-checkbox-icon-size: 1.125rem;
transition: var(--transition-color);
display: inline-flex;
@@ -16,26 +20,33 @@
user-select: none;
font-size: var(--ui-checkbox-size);
z-index: 1;
+ color: var(--ui-checkbox-color);
@nest .text-light & {
- --ui-checkbox-border-color: var(--color-light);
+ --ui-checkbox-border-color-raw: var(--color-light);
}
- &[data-state="invalid"] {
- --ui-checkbox-border-color: var(--color-error);
+ &:--theme-light {
+ --ui-checkbox-checked-fg: rgb(var(--color-light));
+ }
+
+ &:--theme-dark {
+ --ui-checkbox-checked-fg: rgb(var(--color-dark));
+ }
- color: rgb(var(--color-error));
+ &:--state-invalid {
+ --ui-checkbox-border-color-raw: var(--color-error);
+ --ui-checkbox-color: rgb(var(--color-error));
}
& input {
position: relative;
display: inline-flex;
- -moz-appearance: none;
appearance: none;
height: var(--ui-checkbox-width);
width: var(--ui-checkbox-width);
- background-color: rgba(var(--ui-checkbox-bg), var(--ui-checkbox-bg-opacity));
- border: 1px solid rgba(var(--ui-checkbox-border-color), var(--ui-checkbox-border-opacity));
+ background-color: rgb(var(--ui-checkbox-bg-raw) / var(--ui-checkbox-bg-opacity));
+ border: 1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--ui-checkbox-border-opacity));
border-radius: var(--ui-checkbox-radius);
cursor: pointer;
outline: none;
@@ -43,66 +54,72 @@
align-items: center;
transition: var(--transition-border), var(--transition-background), var(--transition-shadow);
- &:focus {
+ &::before {
+ line-height: var(--ui-checkbox-icon-size);
+ font-size: var(--ui-checkbox-icon-size);
+ text-indent: 0;
+ display: block;
+ transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
+ color: var(--ui-checkbox-checked-fg);
+ content: "";
+ background-color: currentColor;
+ mask: var(--ui-checkbox-icon);
+ opacity: 0;
+ transform: scale(0);
+ will-change: transform;
+ width: 1em;
+ height: 1em;
+ }
+
+ &:not(:only-child) {
+ margin-right: 0.75rem;
+
+ @nest .flex-row-reverse& {
+ margin-right: 0;
+ margin-left: 0.75rem;
+ }
+ }
+
+ &:focus, &:hover {
+ --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
+ --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
--ui-checkbox-border-opacity: 0.75;
+ --ui-checkbox-bg-opacity: 0.1;
}
&:checked {
--ui-checkbox-border-opacity: 0;
+ background-color: var(--ui-checkbox-checked-bg);
+
&:focus {
- box-shadow: 0 0 0 0 rgb(var(--color-default)), 0 0 0 3px rgba(var(--ui-checkbox-checked-bg), 0.15), 0 1px 2px 0 rgba(var(--color-default), 0.05);
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.15),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
@nest .dark & {
- box-shadow: 0 0 0 0 rgb(var(--color-default)), 0 0 0 3px rgba(var(--ui-checkbox-checked-bg), 0.3), 0 1px 2px 0 rgba(var(--color-default), 0.05);
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.3),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
}
}
- &:not([class*="checked:bg"]) {
- background-color: rgb(var(--ui-checkbox-checked-bg));
- }
-
&::before {
opacity: 1;
transform: scale(1);
}
}
-
- &:not(:only-child) {
- margin-right: 0.75rem;
-
- @nest .flex-row-reverse& {
- margin-right: 0;
- margin-left: 0.75rem;
- }
- }
-
- &::before {
- @mixin iconfont;
-
- line-height: 1.125rem;
- font-size: 1.125rem;
- text-indent: 0;
- display: block;
- transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
- color: rgb(var(--ui-checkbox-checked-fg));
- content: var(--icon-checkbox-filled);
- opacity: 0;
- transform: scale(0);
- will-change: transform;
- }
}
& a {
text-decoration: underline;
- transition: var(--transition-color);
+ transition: var(--transition-opacity);
+ color: rgb(var(--color-accent));
- &:not([class*="text-"]) {
- color: rgb(var(--color-primary));
-
- @nest .no-touch &[href]:hover {
- color: rgba(var(--color-primary), 0.8);
- }
+ @nest .no-touch &[href]:hover {
+ opacity: 0.8;
}
}
}
diff --git a/src/styles/Ui/Heading.css b/src/styles/Ui/Heading.css
index 619e503..4505fad 100644
--- a/src/styles/Ui/Heading.css
+++ b/src/styles/Ui/Heading.css
@@ -1,21 +1,21 @@
.ui-heading {
+ --ui-heading-size: 1.5rem;
+ --ui-heading-size-line: 0.5rem;
+
display: block;
font-weight: var(--font-bold);
- line-height: 1.15;
-
- &:not([data-size]) {
- font-size: 1.5rem;
- }
+ font-size: var(--ui-heading-size);
+ line-height: calc(var(--ui-heading-size) + var(--ui-heading-size-line));
- &[data-size^="lg"] {
- font-size: 1.625rem;
+ &:--size-lg {
+ --ui-heading-size: 1.75rem;
- @media (--media-min-768) {
- font-size: 2rem;
+ @media (--media-t) {
+ --ui-heading-size: 2rem;
}
}
- &[data-size^="sm"] {
- font-size: 1.125rem;
+ &:--size-sm {
+ --ui-heading-size: 1.25rem;
}
}
diff --git a/src/styles/Ui/Icon.css b/src/styles/Ui/Icon.css
index 85e0adb..814efab 100644
--- a/src/styles/Ui/Icon.css
+++ b/src/styles/Ui/Icon.css
@@ -1,14 +1,33 @@
.ui-icon {
+ --ui-icon-hover-opacity: 0.7;
+ --ui-icon-size: 1.25rem;
+
display: inline-flex;
- font-size: 1.25rem;
+ position: relative;
+ font-size: var(--ui-icon-size);
+
+ &, & svg {
+ width: 1em;
+ height: 1em;
+ }
- &[class*="icon-"], & [class*="icon-"] {
- &::before {
- transition: var(--transition-opacity);
+ & > * {
+ transition: var(--transition-opacity);
- @nest .no-touch [href]:hover&, .no-touch button:hover& {
- opacity: 0.8;
- }
+ @nest .no-touch :is([href]:hover, button:hover)& {
+ opacity: var(--ui-icon-hover-opacity);
}
}
}
+
+.ui-icon-text {
+ --ui-icon-hover-opacity: 0.7;
+
+ display: inline-flex;
+ align-items: center;
+ transition: var(--transition-opacity), var(--transition-color);
+
+ @nest .no-touch &:is([href]:hover, button:hover) {
+ opacity: var(--ui-icon-hover-opacity);
+ }
+}
diff --git a/src/styles/Ui/Image.css b/src/styles/Ui/Image.css
new file mode 100644
index 0000000..abb5b10
--- /dev/null
+++ b/src/styles/Ui/Image.css
@@ -0,0 +1,23 @@
+.ui-image {
+ position: relative;
+
+ &:not(.bg-transparent) {
+ background-color: rgb(var(--color-background-100));
+ }
+
+ &::before {
+ content: "";
+ display: block;
+ }
+
+ & > * {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ @nest picture& > img {
+ object-fit: cover;
+ }
+}
diff --git a/src/styles/Ui/Input.css b/src/styles/Ui/Input.css
index dbe3a24..408d6eb 100644
--- a/src/styles/Ui/Input.css
+++ b/src/styles/Ui/Input.css
@@ -1,188 +1,65 @@
-.ui-input {
+.ui-input, .ui-select {
--ui-input-height: 3rem;
- --ui-input-py: 0.25rem;
+ --ui-input-height-textarea: 8rem;
+ --ui-input-py: 0.75rem;
--ui-input-px: 1rem;
--ui-input-size: 0.875rem;
--ui-input-icon-size: 1.25rem;
+ --ui-input-icon-spacing: 0.5rem;
--ui-input-weight: var(--font-medium);
- --ui-input-border-color: var(--color-default);
+ --ui-input-border-color: var(--color-current);
--ui-input-border-opacity: 0.15;
--ui-input-radius: var(--radius);
position: relative;
- display: block;
+ display: flex;
+ flex-direction: column;
font-size: var(--ui-input-size);
- @nest .text-light & {
- --ui-input-border-color: var(--color-light);
+ @media (--media-d) {
+ --ui-input-height-textarea: 12rem;
}
- & .icon-l, & .icon-r {
- font-weight: var(--font-medium);
- position: absolute;
- z-index: 10;
- transition: var(--transition-opacity);
- right: calc(var(--ui-input-px) / 1.25);
- content: "";
- top: calc(var(--ui-input-height) / 2);
- margin-top: calc(var(--ui-input-icon-size) / -2);
- font-size: var(--ui-input-icon-size);
-
- &[aria-label] {
- &.icon-r ~ [class*="valid"] {
- right: calc(var(--ui-input-icon-size) + calc(var(--ui-input-px) / 0.75));
- }
-
- &::after {
- content: attr(aria-label);
- font-size: var(--ui-input-size);
- display: block;
- }
- }
-
- &.icon-l {
- right: auto;
- left: calc(var(--ui-input-px) / 1.25);
- }
-
- & .lib-hint-top {
- position: absolute;
- inset: 0;
- z-index: 1;
-
- &::after {
- white-space: normal;
- line-height: 1.5;
- word-wrap: normal;
- width: 10rem;
- font-weight: var(--font-normal);
- font-size: 0.75rem;
- }
- }
-
- &[class*="valid"] {
- &::after {
- position: absolute;
- inset: 0.375rem;
- background-color: rgb(var(--color-light));
- content: "";
- z-index: 0;
- }
-
- &::before {
- position: relative;
- z-index: 1;
- }
- }
-
- &.icon-valid {
- @nest [data-icon*="right"]& {
- display: none;
- }
- }
+ &:--size-lg {
+ --ui-input-height: 3rem;
}
- &[data-type="number"] {
- width: 6rem;
-
- & [class*="valid"] {
- display: none;
- }
-
- & input {
- padding-right: 1.875rem;
- font-size: 1rem;
- font-weight: var(--font-semibold);
- text-align: center;
- }
-
- &::after {
- content: normal;
- }
-
- &[data-title] {
- & input {
- padding-left: 0.375rem;
- padding-right: 2.5rem;
- }
-
- &::after {
- color: rgb(var(--color-default));
- content: attr(data-title);
- position: absolute;
- display: block;
- opacity: 1;
- font-size: 0.75rem;
- letter-spacing: -0.01875rem;
- margin-top: -0.5625rem;
- right: 2.125rem;
- top: 50%;
- }
- }
- }
-
- &[data-type="color"] {
- & .color {
- width: 1.125rem;
- height: 1.125rem;
- border-radius: 50%;
- top: 50%;
- left: 0.875rem;
- overflow: hidden;
- position: absolute;
- display: block;
- margin-top: -0.5625rem;
- border: 1px solid rgba(0, 0, 0, 0.15);
- }
-
- & input {
- padding-left: 2.5rem;
- }
- }
-
- &[data-type="file"] {
- color: rgb(var(--color-default));
- font-weight: var(--font-normal);
- border-radius: var(--ui-input-radius);
- transition: var(--transition-border);
- position: relative;
- width: 100%;
- display: flex;
- line-height: normal;
- height: var(--ui-input-height);
- background-color: rgb(var(--color-background));
- border: 1px solid rgba(var(--color-default), 0.15);
-
- &[data-state*="invalid"] {
- border-color: rgb(var(--color-error));
- }
-
- & input {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- z-index: 10;
- }
-
- &:focus-within {
- border-color: rgba(var(--color-default), 0.25);
- }
+ & svg {
+ width: 1em;
+ height: 1em;
+ display: block;
}
- & .input {
+ & > label {
+ display: block;
position: absolute;
- inset: 0;
+ z-index: 1;
pointer-events: none;
- display: flex;
- align-items: center;
+ transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color);
+ transform-origin: 0 50%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ transform: perspective(100px);
+ will-change: transform;
+ font-weight: var(--ui-input-weight);
+ left: var(--ui-input-px);
+ right: var(--ui-input-px);
+ top: calc(var(--ui-input-height) / 2);
+ line-height: var(--ui-input-size);
+ margin-top: calc(var(--ui-input-size) / 2 * -1);
+ order: -1;
- & ~ input {
- font-size: 0;
+ @nest [data-has~="icon-l"]& {
+ left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
+ }
+
+ @nest [data-has~="icon-r"]& {
+ right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
}
}
- & input, & textarea, & .input {
+ & > :is(input, textarea, select, .input) {
width: 100%;
transition: var(--transition-border), var(--transition-shadow);
box-shadow: none;
@@ -192,40 +69,15 @@
height: var(--ui-input-height);
font-weight: var(--ui-input-weight);
border-radius: var(--ui-input-radius);
- padding: calc(var(--ui-input-height) / 2.5) var(--ui-input-px) var(--ui-input-py);
+ padding: calc(var(--ui-input-py) * 1.75) var(--ui-input-px) calc(var(--ui-input-py) * 0.5);
color: inherit;
- border: 1px solid rgba(var(--ui-input-border-color), var(--ui-input-border-opacity));
- background-clip: padding-box;
+ border: 1px solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity));
- @nest [data-icon*="left"]& {
- padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
- }
-
- @nest [data-icon*="right"]&, [data-state*="valid"]& {
- padding-right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
- }
-
- @nest :not([data-state*="placeholder"])& {
- &[placeholder] {
- padding-top: var(--ui-input-py);
- }
- }
- }
-
- & input, & textarea {
&[disabled] {
cursor: default;
background-color: rgb(var(--color-background-100));
}
- &:invalid {
- box-shadow: none;
- }
-
- &:focus {
- --ui-input-border-opacity: 0.3;
- }
-
&[required] {
& ~ label {
&::after {
@@ -235,27 +87,59 @@
}
}
- @nest [data-state*="invalid"]& {
+ &:focus {
+ --ui-input-border-opacity: 1;
+ --ui-input-border-color: var(--color-accent);
+
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--color-accent) / 0.15),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
+
+ @nest .dark & {
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--color-accent) / 0.3),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
+ }
+ }
+
+ @nest :--state-invalid& {
border-color: rgb(var(--color-error));
box-shadow: none;
&:focus {
- box-shadow: 0 0 0 0 rgb(var(--color-default)), 0 0 0 3px rgba(var(--color-error), 0.1), 0 1px 2px 0 rgba(var(--color-default), 0.05);
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--color-error) / 0.1),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
@nest .dark & {
- box-shadow: 0 0 0 0 rgb(var(--color-default)), 0 0 0 3px rgba(var(--color-error), 0.2), 0 1px 2px 0 rgba(var(--color-default), 0.05);
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--color-error) / 0.2),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
}
}
}
- @nest [data-state*="active"]&, [data-state*="placeholder"]&, &:focus {
- & ~ label {
- transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
+ @nest [data-has~="icon-l"]& {
+ padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
+ }
+
+ @nest [data-has~="icon-r"]&, :--state-invalid& {
+ padding-right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
+ }
+
+ @nest :not(:--state-placeholder)& {
+ &:is([placeholder], [data-placeholder]) {
+ padding-top: var(--ui-input-py);
+ padding-bottom: var(--ui-input-py);
}
}
}
- & input {
+ & > input {
&::-ms-clear {
display: none;
}
@@ -270,65 +154,212 @@
& ~ .icon {
position: absolute;
- right: 0;
+ right: calc(var(--ui-input-height) / 4 - 0.25rem);
color: rgb(var(--color-primary));
- padding: 0 0.4375rem;
cursor: pointer;
user-select: none;
font-size: 1.25rem;
top: auto;
margin-top: auto;
-
- &::before {
- position: relative;
- }
+ width: 1em;
+ height: 1em;
+ background-color: rgb(var(--color-accent));
&.icon-angle-up {
- top: 0;
- padding-top: 0.25rem;
-
- &::before {
- top: 0.3125rem;
- }
+ top: calc((var(--ui-input-height) / 2) - 1.25rem + 0.1875rem);
+ mask: var(--icon-angle-up);
}
&.icon-angle-down {
- bottom: 0;
- padding-bottom: 0.25rem;
-
- &::before {
- bottom: 0.3125rem;
- }
+ top: calc((var(--ui-input-height) / 2) - 0.1875rem);
+ mask: var(--icon-angle-down);
}
}
& ~ .icon-r {
- right: calc(var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.25));
+ margin-right: calc(var(--ui-input-height) / 4 + var(--ui-input-icon-spacing));
}
}
- &[type="color"] {
- opacity: 0;
+ &[type^="date"] {
+ appearance: none;
+
+ &::-webkit-date-and-time-value {
+ text-align: left;
+ }
+
+ @nest :not(:--state-active)&, html:not(.mobile) & {
+ font-size: 0;
+ }
+
+ @nest html.mobile:not(.safari) & {
+ padding-left: calc(var(--ui-input-px) - 0.3125rem);
+ }
+ }
+
+ &[type="time"] {
+ &::-webkit-calendar-picker-indicator {
+ display: none;
+ }
+
+ @nest :not(:--state-active)& {
+ &:not([placeholder]):not(:focus) {
+ font-size: 0;
+ }
+ }
+
+ @nest html.mobile:not(.safari) & {
+ padding-left: calc(var(--ui-input-px) - 0.3125rem);
+ appearance: none;
+ }
+ }
+ }
+
+ & > textarea {
+ resize: vertical;
+ overflow: hidden;
+ min-height: var(--ui-input-height-textarea);
+ }
+
+ & > input, & > textarea {
+ background-clip: padding-box;
+ cursor: text;
+
+ &:invalid {
+ box-shadow: none;
+ }
+
+ @nest :is(:--state-active, :--state-placeholder)&, &:focus {
+ & ~ label {
+ transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
+ }
+ }
+ }
+
+ & > .input {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ display: flex;
+ align-items: center;
+
+ & span {
+ color: transparent;
}
+ }
+
+ & > [class^="icon-"] {
+ font-weight: var(--font-medium);
+ position: absolute;
+ z-index: 10;
+ transition: var(--transition-opacity);
+ content: "";
+ top: calc(var(--ui-input-height) / 2);
+ margin-top: calc(var(--ui-input-icon-size) / -2);
+ font-size: var(--ui-input-icon-size);
+ width: 1em;
+ height: 1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &.icon-r {
+ right: calc(var(--ui-input-px));
+
+ & + .icon-r {
+ right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
+ }
+ }
+
+ &.icon-l {
+ left: calc(var(--ui-input-px));
+
+ & + .icon-l {
+ left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
+ }
+ }
+
+ &[aria-label]:not([class*="lib-hint"]) {
+ &::after {
+ content: attr(aria-label);
+ font-size: var(--ui-input-size);
+ display: block;
+ margin-top: -1px;
+ }
+ }
+
+ &[class*="lib-hint"] {
+ &::after {
+ white-space: normal;
+ line-height: 1.5;
+ word-wrap: normal;
+ width: 10rem;
+ font-weight: var(--font-normal);
+ font-size: 0.75rem;
+ }
+ }
+ }
- &[type="file"] {
+ &:--type-color {
+ & .color {
+ width: var(--ui-input-icon-size);
+ height: var(--ui-input-icon-size);
+ border-radius: 50%;
+ left: calc(var(--ui-input-px) / 1.25);
+ overflow: hidden;
+ position: absolute;
+ display: block;
+ top: calc(var(--ui-input-height) / 2);
+ margin-top: calc(var(--ui-input-icon-size) / -2);
+ border: 1px solid rgb(0 0 0 / 0.15);
+ }
+
+ & input {
+ padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
+ }
+ }
+
+ &:--type-file {
+ color: rgb(var(--color-current));
+ font-weight: var(--font-normal);
+ border-radius: var(--ui-input-radius);
+ transition: var(--transition-border);
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ line-height: normal;
+ height: var(--ui-input-height);
+ background-color: rgb(var(--color-background));
+ border: 1px solid rgb(var(--color-current) / 0.15);
+
+ &:--state-invalid {
+ border-color: rgb(var(--color-error));
+ }
+
+ & [type="file"] {
cursor: pointer;
opacity: 0;
font-size: 0;
display: block;
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
& + .icon {
font-size: var(--ui-input-size);
display: flex;
align-items: center;
padding: 0.5625rem 1.25rem 0.5625rem 2.75rem;
- color: rgba(var(--color-default), 0.75);
+ color: rgb(var(--color-current) / 0.75);
white-space: nowrap;
- background-color: rgba(var(--color-default), 0.05);
+ background-color: rgb(var(--color-current) / 0.05);
border-top-left-radius: var(--ui-input-radius);
border-bottom-left-radius: var(--ui-input-radius);
- @media (--media-768) {
+ @media (--media-t) {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
line-height: 1rem;
@@ -340,6 +371,11 @@
top: 50%;
font-size: 1.125rem;
margin-top: -0.5625rem;
+ content: "";
+ width: 1em;
+ height: 1em;
+ mask: var(--icon-upload);
+ background-color: currentColor;
}
}
@@ -358,78 +394,27 @@
&[data-placeholder]::before {
content: attr(data-placeholder);
- color: rgba(var(--color-default), 0.6);
+ color: rgb(var(--color-current) / 0.6);
}
}
}
- &[type^="date"] {
- appearance: none;
-
- @nest :not([data-state*="active"])&, html:not(.mobile) & {
- font-size: 0;
- }
-
- @nest html.android & {
- padding-left: calc(var(--ui-input-px) - 0.3125rem);
- }
- }
-
- &[type="time"] {
- & ~ label {
- background-color: rgb(var(--color-background));
- padding-bottom: 0.1875rem;
- }
-
- &.is-label {
- padding-top: 1.25rem;
- }
-
- @nest html.mobile & {
- appearance: none;
- }
-
- @nest html.android & {
- padding-left: calc(var(--ui-input-px) - 0.3125rem);
- }
- }
- }
-
- & textarea {
- resize: vertical;
- overflow: hidden;
- min-height: 8.75rem;
-
- @media (--media-min-960) {
- min-height: 13.125rem;
+ &:focus-within {
+ border-color: rgb(var(--color-current) / 0.25);
}
}
+}
- & label {
- display: block;
- position: absolute;
- z-index: 1;
- pointer-events: none;
- transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color);
- transform-origin: 0 50%;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- transform: perspective(100px);
- will-change: transform;
- font-weight: var(--ui-input-weight);
- left: var(--ui-input-px);
- right: var(--ui-input-px);
- top: calc(var(--ui-input-height) / 2);
- line-height: var(--ui-input-size);
- margin-top: calc(var(--ui-input-size) / 2 * -1);
+.pcr-app {
+ border-radius: var(--radius);
+ overflow: hidden;
- @nest [data-icon*="left"]& {
- left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
- }
+ @nest .dark & {
+ background: rgb(var(--color-background-200));
- @nest [data-icon*="right"]& {
- right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
+ & .pcr-interaction input {
+ background: rgb(var(--color-background-100));
+ box-shadow: none !important;
}
}
}
diff --git a/src/styles/Ui/Label.css b/src/styles/Ui/Label.css
index b7c82db..74c33c8 100644
--- a/src/styles/Ui/Label.css
+++ b/src/styles/Ui/Label.css
@@ -1,9 +1,14 @@
.ui-label {
- font-size: 0.875rem;
+ --ui-label-size: 0.875rem;
+ --ui-label-size-line: 0.5rem;
+ --ui-label-spacing: 0.05rem;
+
display: block;
+ font-size: var(--ui-title-size);
+ line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
font-weight: var(--font-medium);
- &:not(:last-child) {
- margin-bottom: 0.5rem;
+ & ~ :is([class^="ui-"]:not(&), [class^="c-"]) {
+ margin-top: 0.5rem;
}
}
diff --git a/src/styles/Ui/Link.css b/src/styles/Ui/Link.css
index a217834..0dac406 100644
--- a/src/styles/Ui/Link.css
+++ b/src/styles/Ui/Link.css
@@ -26,7 +26,7 @@
transition: var(--transition-opacity), var(--transition-transform);
transform: translateY(-0.25rem);
- @nest .no-touch :hover:not([href^="tel:"]):not([href^="mailto:"])& {
+ @nest .no-touch :not([href^="tel:"], [href^="mailto:"]):hover& {
transform: none;
opacity: var(--ui-link-underline-opacity);
}
diff --git a/src/styles/Ui/Notice.css b/src/styles/Ui/Notice.css
index bc4e6fc..4639fcc 100644
--- a/src/styles/Ui/Notice.css
+++ b/src/styles/Ui/Notice.css
@@ -1,4 +1,7 @@
.ui-notice {
+ --color-current: var(--color-accent);
+ --ui-notice-bg: rgb(var(--color-accent));
+ --ui-notice-outline-opacity: 0.1;
--ui-notice-size: 0.875rem;
--ui-notice-py: 1.25rem;
--ui-notice-px: 1.5rem;
@@ -8,6 +11,7 @@
padding: var(--ui-notice-py) var(--ui-notice-px);
font-size: var(--ui-notice-size);
border-radius: var(--radius);
+ color: rgb(var(--color-current));
&:not([class*="bg-"]) {
&::before, &::after {
@@ -21,27 +25,20 @@
}
&::before {
- background-color: currentColor;
- opacity: 0.1;
+ background-color: var(--ui-notice-bg);
+ opacity: var(--ui-notice-outline-opacity);
}
&::after {
- box-shadow: inset 0 0 0 1px currentColor;
- opacity: 0.1;
+ box-shadow: inset 0 0 0 1px var(--ui-notice-bg);
+ opacity: var(--ui-notice-outline-opacity);
}
}
- & hr {
- opacity: 0.1;
- }
-
& a {
text-decoration: underline;
transition: var(--transition-opacity);
-
- &:not([class*="text-"]) {
- color: currentColor !important;
- }
+ color: currentColor !important;
@nest .no-touch &[href]:hover {
opacity: 0.8;
diff --git a/src/styles/Ui/Progress.css b/src/styles/Ui/Progress.css
index 4b5e130..36cd9a9 100644
--- a/src/styles/Ui/Progress.css
+++ b/src/styles/Ui/Progress.css
@@ -4,29 +4,26 @@
--ui-progress-bg: var(--color-background-200);
--ui-progress-bg-opacity: 1;
- -moz-appearance: none;
appearance: none;
box-shadow: none;
border: 0;
height: var(--ui-progress-height);
border-radius: var(--ui-progress-radius);
- background-color: rgba(var(--ui-progress-bg), var(--ui-progress-bg-opacity));
- color: currentColor;
+ background-color: rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));
+ color: rgb(var(--color-accent));
width: 100%;
@nest .bg-dark & {
- background-color: rgba(var(--color-light), 0.1);
-
- &::-webkit-progress-bar {
- background-color: rgba(var(--color-light), 0.1);
+ &, &::-webkit-progress-bar {
+ background-color: rgb(var(--color-light) / 0.1);
}
}
- &[data-size="sm"] {
+ &:--size-sm {
--ui-progress-height: 0.5rem;
}
- &[data-size="lg"] {
+ &:--size-lg {
--ui-progress-height: 1.5rem;
}
@@ -45,25 +42,15 @@
}
&:indeterminate {
- animation: 1.5s ease 0s forwards infinite moveIndeterminate;
- background-image: linear-gradient(to right, currentColor 30%, rgba(var(--ui-progress-bg), var(--ui-progress-bg-opacity)) 30%);
+ animation: 1.5s linear 0s forwards infinite move-indeterminate;
+ background-image: linear-gradient(to right, currentColor 30%, rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);
background-position: top left;
background-repeat: no-repeat;
background-size: 150% 150%;
- border-radius: 999px;
+ border-radius: var(--ui-progress-radius);
&::-moz-progress-bar {
background-color: transparent;
}
}
}
-
-@keyframes moveIndeterminate {
- from {
- background-position: 200% 0;
- }
-
- to {
- background-position: -200% 0;
- }
-}
diff --git a/src/styles/Ui/Radio.css b/src/styles/Ui/Radio.css
index c077a6d..ec126c4 100644
--- a/src/styles/Ui/Radio.css
+++ b/src/styles/Ui/Radio.css
@@ -1,9 +1,4 @@
.ui-radio {
- & input {
- border-radius: 50%;
-
- &::before {
- content: var(--icon-radio-filled);
- }
- }
+ --ui-checkbox-icon: var(--icon-radio);
+ --ui-checkbox-radius: 50%;
}
diff --git a/src/styles/Ui/Select.css b/src/styles/Ui/Select.css
index 368bd27..39b7cf9 100644
--- a/src/styles/Ui/Select.css
+++ b/src/styles/Ui/Select.css
@@ -1,85 +1,30 @@
.ui-select {
- --ui-select-height: 3rem;
- --ui-select-py: 0.25rem;
- --ui-select-px: 1rem;
- --ui-select-size: 0.875rem;
- --ui-select-icon-size: 1.25rem;
- --ui-select-weight: var(--font-medium);
- --ui-select-border-color: var(--color-default);
- --ui-select-border-opacity: 0.15;
- --ui-select-radius: var(--radius);
-
- position: relative;
- display: block;
- font-size: var(--ui-select-size);
cursor: pointer;
user-select: none;
- & [class^="icon"] {
- font-weight: var(--font-medium);
- position: absolute;
- z-index: 1;
- transition: var(--transition-opacity);
- left: calc(var(--ui-select-px) / 1.25);
- content: "";
- top: calc(var(--ui-select-height) / 2);
- margin-top: calc(var(--ui-select-icon-size) / -2);
- font-size: var(--ui-select-icon-size);
-
- & .lib-hint-top {
- position: absolute;
- inset: 0;
- z-index: 1;
-
- &::after {
- white-space: normal;
- line-height: 1.5;
- word-wrap: break-word;
- width: 10rem;
- font-weight: var(--font-normal);
- font-size: 0.75rem;
- }
- }
-
- &[class*="valid"] {
- left: auto;
- right: calc(var(--ui-select-px) / 1.25);
- z-index: 2;
-
- &::after {
- position: absolute;
- inset: 0.375rem;
- background-color: rgb(var(--color-light));
- content: "";
- z-index: 0;
- }
-
- &::before {
- position: relative;
- z-index: 1;
- }
+ &:--state-active {
+ & label {
+ transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
}
}
&::after {
- @mixin iconfont;
-
+ width: 1em;
+ height: 1em;
+ background-color: currentColor;
+ content: "";
position: absolute;
z-index: 1;
font-size: 1.5rem;
- right: calc(var(--ui-select-px) / 1.5);
- top: 50%;
+ right: calc(var(--ui-input-height) / 4);
+ top: calc(var(--ui-input-height) / 2);
margin-top: -0.75rem;
will-change: transform;
transition: transform 200ms;
- content: var(--icon-angle-down);
+ mask: var(--icon-angle-down);
pointer-events: none;
- @nest [data-state*="invalid"]& {
- color: rgb(var(--color-error));
- }
-
- @nest [data-state*="focus"]& {
+ @nest :--state-focus& {
@nest .no-touch:not(.macintel) & {
transform: rotate(180deg);
}
@@ -87,18 +32,6 @@
}
& select {
- width: 100%;
- transition: var(--transition-border), var(--transition-shadow);
- box-shadow: none;
- line-height: normal;
- background-color: transparent;
- font-size: inherit;
- height: var(--ui-select-height);
- font-weight: var(--ui-select-weight);
- border-radius: var(--ui-select-radius);
- padding: calc(var(--ui-select-height) / 2.5) var(--ui-select-px) var(--ui-select-py);
- color: inherit;
- border: 1px solid rgba(var(--ui-select-border-color), var(--ui-select-border-opacity));
position: relative;
z-index: 1;
text-overflow: ellipsis;
@@ -106,139 +39,85 @@
-webkit-appearance: none;
-moz-appearance: none;
- @nest [data-icon]& {
- padding-left: calc(var(--ui-select-px) + var(--ui-select-icon-size) + calc(var(--ui-select-px) / 1.75));
- }
-
- @nest [data-state*="valid"]& {
- padding-right: calc(var(--ui-select-px) + var(--ui-select-icon-size) + calc(var(--ui-select-px) / 1.75));
- }
-
- @nest :not([data-state*="placeholder"])& {
- &[data-placeholder] {
- padding-top: var(--ui-select-py);
- }
- }
-
- &[disabled] {
- cursor: default;
- background-color: rgb(var(--color-background-100));
- }
-
@nest [tabindex]& {
pointer-events: none;
}
- @nest [tabindex][data-state*="focus"]& {
- border-color: rgba(var(--color-default), calc(var(--ui-select-border-opacity) * 2));
- border-bottom-color: rgba(var(--color-default), var(--ui-select-border-opacity));
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
+ @nest [tabindex]:--state-focus& {
+ --ui-input-border-opacity: 1;
+ --ui-input-border-color: var(--color-accent);
- &:focus {
- outline: 0;
- border-color: rgba(var(--color-default), calc(var(--ui-select-border-opacity) * 2));
- }
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--color-accent) / 0.15),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
- &[required] {
- & ~ label {
- &::after {
- color: rgb(var(--color-error));
- content: " *";
- }
+ @nest .dark & {
+ box-shadow:
+ 0 0 0 0 rgb(var(--color-current)),
+ 0 0 0 3px rgb(var(--color-accent) / 0.3),
+ 0 1px 2px 0 rgb(var(--color-current) / 0.05);
}
}
- @nest [data-state*="invalid"]& {
- border-color: rgb(var(--color-error));
-
- &:focus {
- box-shadow: 0 0 0 0 rgb(var(--color-default)), 0 0 0 3px rgba(var(--color-error), 0.1), 0 1px 2px 0 rgba(var(--color-default), 0.05);
-
- @nest .dark & {
- box-shadow: 0 0 0 0 rgb(var(--color-default)), 0 0 0 3px rgba(var(--color-error), 0.2), 0 1px 2px 0 rgba(var(--color-default), 0.05);
- }
+ @nest :not(:--state-active)& {
+ &:not([data-placeholder]) {
+ font-size: 0;
}
}
+ &:focus {
+ outline: 0;
+ }
+
&:-moz-focusring {
color: inherit;
text-shadow: 0 0 0 #000;
}
-
- &:not([data-placeholder]) {
- @nest :not([data-state*="active"])& {
- font-size: 0;
- }
- }
}
& option {
- font-size: var(--ui-select-size);
-
- &:not(:checked) {
- color: inherit;
- }
+ font-size: var(--ui-input-size);
+ color: rgb(var(--color-default));
+ background-color: rgb(var(--color-background));
&[disabled] {
opacity: 0.5;
}
}
- &[data-state*="active"] {
- & label {
- transform: translateY(calc(var(--ui-select-size) / 1.4 * -1)) scale(0.8);
+ & > [class^="icon-"] {
+ &.icon-r {
+ right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
}
}
- & label {
- display: block;
- position: absolute;
- z-index: 1;
- pointer-events: none;
- transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color);
- transform-origin: 0 50%;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- transform: perspective(100px);
- will-change: transform;
- font-weight: var(--ui-select-weight);
- left: var(--ui-select-px);
- right: var(--ui-select-px);
- top: calc(var(--ui-select-height) / 2);
- line-height: var(--ui-select-size);
- margin-top: calc(var(--ui-select-size) / 2 * -1);
-
- @nest [data-icon]& {
- left: calc(var(--ui-select-px) + var(--ui-select-icon-size) + calc(var(--ui-select-px) / 1.75));
- }
-
- @nest html.ie & {
- display: none;
- }
- }
+ & > div[aria-hidden] {
+ --color-current: var(--color-default);
- & > div {
will-change: transform;
- border-radius: var(--ui-select-radius);
+ border-radius: var(--ui-input-radius);
position: absolute;
background-color: rgb(var(--color-background));
- z-index: 10;
+ z-index: 100;
left: 0;
right: 0;
top: 100%;
- border: 1px solid rgba(var(--color-default), 0.3);
- border-top: 0;
+ margin-top: 0.5rem;
+ border: 1px solid rgb(var(--color-current) / 0.075);
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;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
+ max-height: 12rem;
+ overflow-y: auto;
+ box-shadow: 0 0.15em 1.5em 0 rgb(var(--color-dark) / 0.05), 0 0 1em 0 rgb(var(--color-dark) / 0.05);
+ padding: 0.375rem;
+ color: rgb(var(--color-current));
@nest [data-state*="focus"]& {
opacity: 1;
@@ -246,25 +125,15 @@
}
& [data-option] {
- padding: calc(var(--ui-select-px) / 1.5) var(--ui-select-px);
+ padding: calc(var(--ui-input-px) / 1.5) var(--ui-input-px);
cursor: pointer;
transition: var(--transition-background);
- font-size: var(--ui-select-size);
+ font-size: var(--ui-input-size);
+ border-radius: var(--radius);
- @nest .no-touch &:hover, &:focus {
- background-color: rgba(var(--color-default), 0.01);
+ @nest .no-touch &:is(:hover, :focus) {
+ background-color: rgb(var(--color-accent) / 0.1);
}
}
}
}
-
-@media screen and (min-width: 0 \0) and (min-resolution: +72dpi) {
- .ui-select::after {
- content: "";
- }
-
- select {
- padding: 0.5rem !important;
- min-width: 4rem;
- }
-}
diff --git a/src/styles/Ui/Switch.css b/src/styles/Ui/Switch.css
new file mode 100644
index 0000000..c7e6795
--- /dev/null
+++ b/src/styles/Ui/Switch.css
@@ -0,0 +1,70 @@
+.ui-switch {
+ --ui-switch-width: 3rem;
+ --ui-switch-height: 1.5rem;
+ --ui-switch-padding: 0.375rem;
+ --ui-swtich-bg: var(--color-dark);
+ --ui-swtich-bg-opacity: 0.2;
+ --ui-swtich-fg: var(--color-accent);
+ --ui-switch-radius: 999px;
+
+ @nest .dark & {
+ --ui-swtich-bg: var(--color-background-300);
+ }
+
+ display: inline-flex;
+ color: rgb(var(--ui-swtich-fg));
+ position: relative;
+
+ &:--size-sm {
+ --ui-switch-width: 2.5rem;
+ --ui-switch-height: 1.25rem;
+ }
+
+ &:--size-lg {
+ --ui-switch-width: 4rem;
+ --ui-switch-height: 2rem;
+ }
+
+ & input {
+ width: var(--ui-switch-width);
+ height: var(--ui-switch-height);
+ display: block;
+ position: relative;
+ border-radius: var(--ui-switch-radius);
+ background-color: rgb(var(--ui-swtich-bg));
+ transition: var(--transition-background);
+ cursor: pointer;
+ appearance: none;
+ outline: none;
+ color: inherit;
+
+ &[disabled] {
+ opacity: 0.8;
+ pointer-events: none;
+ }
+
+ &::before {
+ width: calc(var(--ui-switch-height) - var(--ui-switch-padding));
+ height: calc(var(--ui-switch-height) - var(--ui-switch-padding));
+ background-color: rgb(var(--color-light));
+ border-radius: var(--ui-switch-radius);
+ position: absolute;
+ left: var(--ui-switch-height);
+ top: 50%;
+ content: "";
+ display: block;
+ margin-left: calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);
+ transition: left var(--transition), var(--transition-background);
+ transform: translateY(-50%);
+ }
+
+ &:checked {
+ background-color: currentColor;
+
+ &::before {
+ background-color: rgb(var(--color-light));
+ left: 100%;
+ }
+ }
+ }
+}
diff --git a/src/styles/Ui/Text.css b/src/styles/Ui/Text.css
index 6b51fc3..cc60bb3 100644
--- a/src/styles/Ui/Text.css
+++ b/src/styles/Ui/Text.css
@@ -2,19 +2,17 @@
--ui-text-size: 0.9375rem;
--ui-text-weight: var(--font-normal);
--ui-text-weight-bold: var(--font-semibold);
- --ui-text-marker-color: var(--color-primary);
- --ui-text-link-color: var(--color-primary);
font-weight: var(--ui-text-weight);
font-size: var(--ui-text-size);
- line-height: 1.75;
+ line-height: calc(var(--ui-text-size) + 0.75rem);
& a {
text-decoration: underline;
transition: var(--transition-opacity);
&:not([class*="text-"]) {
- color: rgb(var(--ui-text-link-color));
+ color: rgb(var(--color-accent));
@nest .no-touch &[href]:hover {
opacity: 0.8;
@@ -34,7 +32,7 @@
& figure {
margin: 1rem 0;
- @media (--media-min-768) {
+ @media (--media-t) {
margin: 2rem 0;
}
@@ -49,17 +47,17 @@
max-width: 100%;
height: auto !important;
- @media (--media-400) {
+ @media (--media-m) {
display: block;
float: none !important;
}
- @media (--media-min-768) {
+ @media (--media-t) {
&[style*="right"], &.float-right {
margin: 0 0 2rem 4rem;
}
- &[style="left"], &.float-left {
+ &[style*="left"], &.float-left {
margin: 0 2rem 4rem 0;
}
}
@@ -79,44 +77,33 @@
}
& hr {
- margin: 1.125rem 0;
+ margin: 1.25rem 0;
}
& :is(h1, h2, h3, h4, h5, h6) {
font-weight: var(--ui-text-weight-bold);
font-family: var(--font-secondary);
- line-height: 1.15;
- margin: 0 0 1.125rem;
+ font-size: var(--ui-text-heading-size, 1rem);
+ line-height: calc(var(--ui-text-heading-size) + 0.5rem);
+ margin: 0 0 1.25rem;
}
& h1 {
- font-size: 2rem;
+ --ui-text-heading-size: 2.25rem;
}
& h2 {
- font-size: 1.5rem;
+ --ui-text-heading-size: 1.75rem;
}
- & h3 {
- font-size: 1.125rem;
- }
-
- & h4 {
- font-size: 1.125rem;
- }
-
- & h5 {
- font-size: 1rem;
- }
-
- & h6 {
- font-size: 1rem;
+ & h3, & h4 {
+ --ui-text-heading-size: 1.25rem;
}
& table {
border: 0;
- @media (--media-400) {
+ @media (--media-m) {
min-width: 100%;
}
@@ -127,13 +114,13 @@
& thead {
font-weight: var(--ui-text-weight-bold);
- border-bottom: 1px solid rgb(var(--color-background-200));
+ border-bottom: 1px solid rgb(var(--color-current) / 0.075);
}
& tbody {
& tr {
&:nth-of-type(even) {
- background-color: rgb(var(--color-background-100));
+ background-color: rgb(var(--color-current) / 0.05);
}
}
}
@@ -144,8 +131,8 @@
}
& blockquote {
- background-color: rgb(var(--color-background-100));
- border-left: 0.3125rem solid rgb(var(--color-background-200));
+ background-color: rgb(var(--color-current) / 0.075);
+ border-left: 0.3125rem solid rgb(var(--color-accent) / 1);
padding: 1.25em 1.5em;
margin: 0;
font-size: inherit;
@@ -158,17 +145,30 @@
font-size: 0.85em;
color: #476582;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
- background-color: rgba(27, 31, 35, 0.05);
+ background-color: rgb(27 31 35 / 0.05);
@nest .dark & {
background-color: rgb(var(--color-background-100));
- color: #da1039;
+ color: rgb(var(--color-primary));
+ }
+ }
+
+ & ol {
+ margin: 0 0 1.5rem;
+ padding: 0 0 0 1rem;
+
+ & li {
+ padding-left: 0.5rem;
+
+ &::marker {
+ color: rgb(var(--color-accent));
+ }
}
}
& ul {
list-style-type: none !important;
- margin: 0;
+ margin: 0 0 1.5rem;
padding: 0;
& li {
@@ -185,19 +185,12 @@
height: 0.25rem;
position: absolute;
content: "";
- border: 1px solid rgb(var(--ui-text-marker-color));
- background-color: rgb(var(--ui-text-marker-color));
+ border: 1px solid rgb(var(--color-accent));
+ background-color: rgb(var(--color-accent));
left: 0;
top: 0.625rem;
text-indent: 0;
- }
- }
-
- &, &[style*="disc"] {
- & li {
- &::before {
- border-radius: 50%;
- }
+ border-radius: 50%;
}
}
@@ -219,23 +212,10 @@
}
}
- & ol {
- margin: 0;
- padding: 0 0 0 1rem;
-
- & li {
- padding-left: 0.5rem;
-
- &::marker {
- color: rgb(var(--ui-text-marker-color));
- }
- }
- }
-
& .elm_text_table {
display: block;
- @media (--media-400) {
+ @media (--media-m) {
max-width: 100%;
overflow: auto;
}
diff --git a/src/styles/Ui/Title.css b/src/styles/Ui/Title.css
index 8beb282..b548a95 100644
--- a/src/styles/Ui/Title.css
+++ b/src/styles/Ui/Title.css
@@ -1,10 +1,14 @@
.ui-title {
+ --ui-title-size: 0.875rem;
+ --ui-title-size-line: 0.5rem;
+ --ui-title-spacing: 0.05rem;
+
display: block;
- line-height: 1.15;
- font-size: 0.875rem;
+ font-size: var(--ui-title-size);
+ line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
font-weight: var(--font-semibold);
&[class*="uppercase"] {
- letter-spacing: 0.05rem;
+ letter-spacing: var(--ui-title-spacing);
}
}
diff --git a/src/styles/Utils/default.css b/src/styles/Utils/default.css
index fe39165..11c2c1a 100644
--- a/src/styles/Utils/default.css
+++ b/src/styles/Utils/default.css
@@ -1,23 +1,47 @@
-@define-mixin iconfont {
- font-family: "iconfont" !important;
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+::selection {
+ color: rgb(var(--color-light));
+ background-color: rgb(var(--color-accent));
}
-::selection {
- color: rgb(var(--color-invert));
- background-color: rgb(var(--color-primary));
+ul, ol {
+ padding: 0;
+ margin: 0;
+}
+
+ul {
+ list-style: none;
}
-::-ms-input-placeholder {
- color: rgba(var(--color-default), 0.54) !important;
- opacity: initial !important;
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: block;
+ vertical-align: middle;
+}
+
+a, area, button, input, label, select, summary, textarea, [tabindex] {
+ touch-action: manipulation;
}
hr {
@@ -26,8 +50,8 @@ hr {
display: block;
border: 0;
color: inherit;
- border-top: 1px solid currentColor;
- opacity: 0.15;
+ border-top: 1px solid rgb(var(--color-current));
+ opacity: 0.2;
margin: 1rem 0;
padding: 0;
}
@@ -56,77 +80,61 @@ textarea {
resize: vertical;
}
-* {
- box-sizing: border-box;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-
-h1, h2, h3, h4, h5, h6 {
- font-size: inherit;
- margin: 0;
-}
-
-ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
table {
border-collapse: collapse;
border-spacing: 0;
}
-img {
- max-width: 100%;
- display: block;
+svg[class^="icon"] {
+ width: 1em;
+ height: 1em;
}
-a, area, button, input, label, select, summary, textarea, [tabindex] {
- touch-action: manipulation;
-}
+a {
+ color: inherit;
+ text-decoration: none;
-@-moz-document url-prefix() {
- select {
- text-indent: -0.125rem;
+ &:active,
+ &:hover {
+ outline-width: 0;
}
}
-[class^="icon"], [class*="icon"] {
- &::before {
- display: block;
- }
+* {
+ box-sizing: border-box;
+ outline: none;
+ -webkit-tap-highlight-color: rgb(255 255 255 / 0);
}
-[class^="path"] {
- @mixin iconfont;
+*,
+::before,
+::after {
+ border-width: 0;
+ border-style: solid;
+ border-color: rgb(var(--color-current) / var(--tw-text-opacity, 1));
}
-[data-ratio] {
- position: relative;
-
- &:not(.bg-transparent) {
- background-color: rgb(var(--color-background-100));
- }
-
+[class*="aspect-"] {
&::before {
content: "";
display: block;
}
+}
- & > * {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- }
+[hidden] {
+ display: none;
+}
- @nest picture& > img {
- object-fit: cover;
+@supports (-moz-appearance: none) {
+ select {
+ text-indent: -0.125rem;
}
}
.grecaptcha-badge {
display: none;
}
+
+.google-map * {
+ border-style: none;
+}
diff --git a/src/styles/Utils/icons.css b/src/styles/Utils/icons.css
new file mode 100644
index 0000000..fac4da4
--- /dev/null
+++ b/src/styles/Utils/icons.css
@@ -0,0 +1,9 @@
+:root {
+ --icon-check: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+ --icon-radio: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+ --icon-chevron-right: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+ --icon-chevron-left: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+ --icon-angle-up: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+ --icon-angle-down: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+ --icon-upload: url('data:image/svg+xml, ') no-repeat 50% 50% / contain;
+}
diff --git a/src/styles/Libraries/Animate.css b/src/styles/Utils/keyframes.css
similarity index 63%
rename from src/styles/Libraries/Animate.css
rename to src/styles/Utils/keyframes.css
index e4529b9..66b5829 100644
--- a/src/styles/Libraries/Animate.css
+++ b/src/styles/Utils/keyframes.css
@@ -1,17 +1,4 @@
-/* TODO asi předělat do tailwindu */
-.animate {
- animation-duration: 0.5s;
- animation-fill-mode: both;
-}
-
-.animate-load {
- animation-name: load;
- animation-iteration-count: infinite;
- animation-duration: 1.5s;
- animation-fill-mode: both;
-}
-
-@keyframes load {
+@keyframes spin {
0% {
transform: rotate(0deg);
}
@@ -21,10 +8,20 @@
}
}
-@keyframes fadeInLeft {
+@keyframes move-indeterminate {
+ from {
+ background-position: 200% 0;
+ }
+
+ to {
+ background-position: -200% 0;
+ }
+}
+
+@keyframes fade-in-left {
from {
opacity: 0;
- transform: translate3d(-5rem, 0, 0);
+ transform: translateX(-5rem);
}
to {
@@ -33,10 +30,10 @@
}
}
-@keyframes fadeInRight {
+@keyframes fade-in-right {
from {
opacity: 0;
- transform: translate3d(5rem, 0, 0);
+ transform: translateX(5rem);
}
to {
@@ -45,7 +42,7 @@
}
}
-@keyframes fadeInUp {
+@keyframes fade-in-up {
0% {
opacity: 0;
transform: translateY(2rem);
@@ -57,7 +54,7 @@
}
}
-@keyframes fadeInDown {
+@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-2rem);
@@ -69,7 +66,7 @@
}
}
-@keyframes fadeOutLeft {
+@keyframes fade-out-left {
from {
opacity: 1;
transform: none;
@@ -77,11 +74,11 @@
to {
opacity: 0;
- transform: translate3d(-5rem, 0, 0);
+ transform: translateX(-5rem);
}
}
-@keyframes fadeOutRight {
+@keyframes fade-out-right {
from {
opacity: 1;
transform: none;
@@ -89,11 +86,11 @@
to {
opacity: 0;
- transform: translate3d(5rem, 0, 0);
+ transform: translateX(5rem);
}
}
-@keyframes fadeOutUp {
+@keyframes fade-out-up {
0% {
opacity: 1;
transform: translateY(0);
@@ -105,7 +102,7 @@
}
}
-@keyframes fadeOutDown {
+@keyframes fade-out-down {
0% {
opacity: 1;
transform: translateY(0);
@@ -117,7 +114,7 @@
}
}
-@keyframes fadeIn {
+@keyframes fade-in {
from {
opacity: 0;
}
@@ -127,7 +124,7 @@
}
}
-@keyframes fadeOut {
+@keyframes fade-out {
from {
opacity: 1;
}
@@ -137,7 +134,7 @@
}
}
-@keyframes slideInDown {
+@keyframes slide-in-down {
0% {
transform: translateY(-100%);
}
@@ -147,7 +144,7 @@
}
}
-@keyframes slideOutUp {
+@keyframes slide-out-up {
0% {
transform: translateY(0);
}
@@ -157,7 +154,7 @@
}
}
-@keyframes slideInUp {
+@keyframes slide-in-up {
0% {
transform: translateY(100%);
}
@@ -167,7 +164,7 @@
}
}
-@keyframes slideOutDown {
+@keyframes slide-out-down {
0% {
transform: translateY(0);
}
@@ -183,10 +180,3 @@
opacity: 0;
}
}
-
-@keyframes rippleSmall {
- 100% {
- transform: scale(0.5);
- opacity: 0;
- }
-}
diff --git a/src/styles/Utils/normalize.css b/src/styles/Utils/normalize.css
new file mode 100644
index 0000000..4894603
--- /dev/null
+++ b/src/styles/Utils/normalize.css
@@ -0,0 +1,223 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size (opinionated).
+*/
+
+html {
+ -webkit-text-size-adjust: 100%; /* 2 */
+ tab-size: 4; /* 3 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+1. Remove the margin in all browsers.
+*/
+
+body {
+ margin: 0; /* 1 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+ text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+ font-weight: var(--font-bold);
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+ font-family:
+ ui-monospace,
+ SFMono-Regular,
+ Consolas,
+ 'Liberation Mono',
+ Menlo,
+ monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+ font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+ text-indent: 0; /* 1 */
+ border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+ padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+ display: list-item;
+}
diff --git a/src/styles/Utils/reference.css b/src/styles/Utils/reference.css
deleted file mode 100644
index d75eb0d..0000000
--- a/src/styles/Utils/reference.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "theme/vars.css";
-@import "vars.css";
diff --git a/src/styles/Utils/tailwind/base.css b/src/styles/Utils/tailwind/base.css
new file mode 100644
index 0000000..5a69f85
--- /dev/null
+++ b/src/styles/Utils/tailwind/base.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+ .current {
+ background-color: currentColor;
+ color: currentColor;
+ }
+
+ .animation {
+ animation-duration: 0.5s;
+ animation-fill-mode: both;
+ }
+}
diff --git a/src/styles/Utils/tailwind/content.css b/src/styles/Utils/tailwind/content.css
deleted file mode 100644
index f7c8982..0000000
--- a/src/styles/Utils/tailwind/content.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@layer utilities {
- @variants responsive {
- .before-content {
- content: attr(data-content);
- }
-
- .after-content {
- content: attr(data-content);
- }
-
- .before-none {
- &::after {
- content: none;
- }
- }
-
- .after-none {
- &::after {
- content: none;
- }
- }
- }
-}
diff --git a/src/styles/Utils/tailwind/gutters.css b/src/styles/Utils/tailwind/gutters.css
index 216f61a..f8e99d2 100644
--- a/src/styles/Utils/tailwind/gutters.css
+++ b/src/styles/Utils/tailwind/gutters.css
@@ -1,348 +1,346 @@
@layer utilities {
- @variants responsive {
- .row {
- --gx: 0rem;
- --gy: 0rem;
+ .row {
+ --gx: 0rem;
+ --gy: 0rem;
- display: flex;
- margin: calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2);
+ display: flex;
+ margin: calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2);
- & > * {
- padding: calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2);
- }
+ & > * {
+ padding: calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2);
}
+ }
- .row-y {
- --gy: 0rem;
+ .row-y {
+ --gy: 0rem;
- display: flex;
- margin-top: calc(var(--gy) / -2);
- margin-bottom: calc(var(--gy) / -2);
+ display: flex;
+ margin-top: calc(var(--gy) / -2);
+ margin-bottom: calc(var(--gy) / -2);
- & > * {
- padding-top: calc(var(--gy) / 2);
- padding-bottom: calc(var(--gy) / 2);
- }
+ & > * {
+ padding-top: calc(var(--gy) / 2);
+ padding-bottom: calc(var(--gy) / 2);
}
+ }
- .row-x {
- --gx: 0rem;
+ .row-x {
+ --gx: 0rem;
- display: flex;
- margin-left: calc(var(--gx) / -2);
- margin-right: calc(var(--gx) / -2);
+ display: flex;
+ margin-left: calc(var(--gx) / -2);
+ margin-right: calc(var(--gx) / -2);
- & > * {
- padding-left: calc(var(--gx) / 2);
- padding-right: calc(var(--gx) / 2);
- }
+ & > * {
+ padding-left: calc(var(--gx) / 2);
+ padding-right: calc(var(--gx) / 2);
}
+ }
- .col {
- display: flex;
+ .col {
+ display: flex;
- &:not([class*="flex-row"]) {
- flex-direction: column;
- }
+ &:not([class*="flex-row"]) {
+ flex-direction: column;
}
+ }
- .g-0 {
- --gx: 0rem;
- --gy: 0rem;
- }
+ .g-0 {
+ --gx: 0rem;
+ --gy: 0rem;
+ }
- .g-1 {
- --gx: 0.25rem;
- --gy: 0.25rem;
- }
+ .g-1 {
+ --gx: 0.25rem;
+ --gy: 0.25rem;
+ }
- .g-2 {
- --gx: 0.5rem;
- --gy: 0.5rem;
- }
+ .g-2 {
+ --gx: 0.5rem;
+ --gy: 0.5rem;
+ }
- .g-3 {
- --gx: 0.75rem;
- --gy: 0.75rem;
- }
+ .g-3 {
+ --gx: 0.75rem;
+ --gy: 0.75rem;
+ }
- .g-4 {
- --gx: 1rem;
- --gy: 1rem;
- }
+ .g-4 {
+ --gx: 1rem;
+ --gy: 1rem;
+ }
- .g-5 {
- --gx: 1.25rem;
- --gy: 1.25rem;
- }
+ .g-5 {
+ --gx: 1.25rem;
+ --gy: 1.25rem;
+ }
- .g-6 {
- --gx: 1.5rem;
- --gy: 1.5rem;
- }
+ .g-6 {
+ --gx: 1.5rem;
+ --gy: 1.5rem;
+ }
- .g-7 {
- --gx: 1.75rem;
- --gy: 1.75rem;
- }
+ .g-7 {
+ --gx: 1.75rem;
+ --gy: 1.75rem;
+ }
- .g-8 {
- --gx: 2rem;
- --gy: 2rem;
- }
+ .g-8 {
+ --gx: 2rem;
+ --gy: 2rem;
+ }
- .g-9 {
- --gx: 2.25rem;
- --gy: 2.25rem;
- }
+ .g-9 {
+ --gx: 2.25rem;
+ --gy: 2.25rem;
+ }
- .g-10 {
- --gx: 2.5rem;
- --gy: 2.5rem;
- }
+ .g-10 {
+ --gx: 2.5rem;
+ --gy: 2.5rem;
+ }
- .g-11 {
- --gx: 2.75rem;
- --gy: 2.75rem;
- }
+ .g-11 {
+ --gx: 2.75rem;
+ --gy: 2.75rem;
+ }
- .g-12 {
- --gx: 3rem;
- --gy: 3rem;
- }
+ .g-12 {
+ --gx: 3rem;
+ --gy: 3rem;
+ }
- .g-14 {
- --gx: 3.5rem;
- --gy: 3.5rem;
- }
+ .g-14 {
+ --gx: 3.5rem;
+ --gy: 3.5rem;
+ }
- .g-16 {
- --gx: 4rem;
- --gy: 4rem;
- }
+ .g-16 {
+ --gx: 4rem;
+ --gy: 4rem;
+ }
- .g-20 {
- --gx: 5rem;
- --gy: 5rem;
- }
+ .g-20 {
+ --gx: 5rem;
+ --gy: 5rem;
+ }
- .g-24 {
- --gx: 6rem;
- --gy: 6rem;
- }
+ .g-24 {
+ --gx: 6rem;
+ --gy: 6rem;
+ }
- .g-28 {
- --gx: 7rem;
- --gy: 7rem;
- }
+ .g-28 {
+ --gx: 7rem;
+ --gy: 7rem;
+ }
- .g-32 {
- --gx: 8rem;
- --gy: 8rem;
- }
+ .g-32 {
+ --gx: 8rem;
+ --gy: 8rem;
+ }
- .gx-0 {
- --gx: 0;
- }
+ .gx-0 {
+ --gx: 0;
+ }
- .gx-1 {
- --gx: 0.25rem;
- }
+ .gx-1 {
+ --gx: 0.25rem;
+ }
- .gx-2 {
- --gx: 0.5rem;
- }
+ .gx-2 {
+ --gx: 0.5rem;
+ }
- .gx-3 {
- --gx: 0.75rem;
- }
+ .gx-3 {
+ --gx: 0.75rem;
+ }
- .gx-4 {
- --gx: 1rem;
- }
+ .gx-4 {
+ --gx: 1rem;
+ }
- .gx-5 {
- --gx: 1.25rem;
- }
+ .gx-5 {
+ --gx: 1.25rem;
+ }
- .gx-6 {
- --gx: 1.5rem;
- }
+ .gx-6 {
+ --gx: 1.5rem;
+ }
- .gx-7 {
- --gx: 1.75rem;
- }
+ .gx-7 {
+ --gx: 1.75rem;
+ }
- .gx-8 {
- --gx: 2rem;
- }
+ .gx-8 {
+ --gx: 2rem;
+ }
- .gx-9 {
- --gx: 2.25rem;
- }
+ .gx-9 {
+ --gx: 2.25rem;
+ }
- .gx-10 {
- --gx: 2.5rem;
- }
+ .gx-10 {
+ --gx: 2.5rem;
+ }
- .gx-11 {
- --gx: 2.75rem;
- }
+ .gx-11 {
+ --gx: 2.75rem;
+ }
- .gx-12 {
- --gx: 3rem;
- }
+ .gx-12 {
+ --gx: 3rem;
+ }
- .gx-14 {
- --gx: 3.5rem;
- }
+ .gx-14 {
+ --gx: 3.5rem;
+ }
- .gx-16 {
- --gx: 4rem;
- }
+ .gx-16 {
+ --gx: 4rem;
+ }
- .gx-20 {
- --gx: 5rem;
- }
+ .gx-20 {
+ --gx: 5rem;
+ }
- .gx-24 {
- --gx: 6rem;
- }
+ .gx-24 {
+ --gx: 6rem;
+ }
- .gx-28 {
- --gx: 7rem;
- }
+ .gx-28 {
+ --gx: 7rem;
+ }
- .gx-32 {
- --gx: 8rem;
- }
+ .gx-32 {
+ --gx: 8rem;
+ }
- .gy-0 {
- --gy: 0;
- }
+ .gy-0 {
+ --gy: 0;
+ }
- .gy-1 {
- --gy: 0.25rem;
- }
+ .gy-1 {
+ --gy: 0.25rem;
+ }
- .gy-2 {
- --gy: 0.5rem;
- }
+ .gy-2 {
+ --gy: 0.5rem;
+ }
- .gy-3 {
- --gy: 0.75rem;
- }
+ .gy-3 {
+ --gy: 0.75rem;
+ }
- .gy-4 {
- --gy: 1rem;
- }
+ .gy-4 {
+ --gy: 1rem;
+ }
- .gy-5 {
- --gy: 1.25rem;
- }
+ .gy-5 {
+ --gy: 1.25rem;
+ }
- .gy-6 {
- --gy: 1.5rem;
- }
+ .gy-6 {
+ --gy: 1.5rem;
+ }
- .gy-7 {
- --gy: 1.75rem;
- }
+ .gy-7 {
+ --gy: 1.75rem;
+ }
- .gy-8 {
- --gy: 2rem;
- }
+ .gy-8 {
+ --gy: 2rem;
+ }
- .gy-9 {
- --gy: 2.25rem;
- }
+ .gy-9 {
+ --gy: 2.25rem;
+ }
- .gy-10 {
- --gy: 2.5rem;
- }
+ .gy-10 {
+ --gy: 2.5rem;
+ }
- .gy-11 {
- --gy: 2.75rem;
- }
+ .gy-11 {
+ --gy: 2.75rem;
+ }
- .gy-12 {
- --gy: 3rem;
- }
+ .gy-12 {
+ --gy: 3rem;
+ }
- .gy-14 {
- --gy: 3.5rem;
- }
+ .gy-14 {
+ --gy: 3.5rem;
+ }
- .gy-16 {
- --gy: 4rem;
- }
+ .gy-16 {
+ --gy: 4rem;
+ }
- .gy-20 {
- --gy: 5rem;
- }
+ .gy-20 {
+ --gy: 5rem;
+ }
- .gy-24 {
- --gy: 6rem;
- }
+ .gy-24 {
+ --gy: 6rem;
+ }
- .gy-28 {
- --gy: 7rem;
- }
+ .gy-28 {
+ --gy: 7rem;
+ }
- .gy-32 {
- --gy: 8rem;
- }
+ .gy-32 {
+ --gy: 8rem;
+ }
- .col-auto {
- width: auto;
- }
+ .col-auto {
+ width: auto;
+ }
- .col-1 {
- width: 8.333333%;
- }
+ .col-1 {
+ width: 8.3333%;
+ }
- .col-2 {
- width: 16.666667%;
- }
+ .col-2 {
+ width: 16.6667%;
+ }
- .col-3 {
- width: 25%;
- }
+ .col-3 {
+ width: 25%;
+ }
- .col-4 {
- width: 33.333333%;
- }
+ .col-4 {
+ width: 33.3333%;
+ }
- .col-5 {
- width: 41.666667%;
- }
+ .col-5 {
+ width: 41.6667%;
+ }
- .col-6 {
- width: 50%;
- }
+ .col-6 {
+ width: 50%;
+ }
- .col-7 {
- width: 58.333333%;
- }
+ .col-7 {
+ width: 58.3333%;
+ }
- .col-8 {
- width: 66.666667%;
- }
+ .col-8 {
+ width: 66.6667%;
+ }
- .col-9 {
- width: 75%;
- }
+ .col-9 {
+ width: 75%;
+ }
- .col-10 {
- width: 83.333333%;
- }
+ .col-10 {
+ width: 83.3333%;
+ }
- .col-11 {
- width: 91.666667%;
- }
+ .col-11 {
+ width: 91.6667%;
+ }
- .col-12 {
- width: 100%;
- }
+ .col-12 {
+ width: 100%;
}
}
diff --git a/src/styles/Utils/theme/main.css b/src/styles/Utils/theme/main.css
index 6a72f0f..2b1ebdd 100644
--- a/src/styles/Utils/theme/main.css
+++ b/src/styles/Utils/theme/main.css
@@ -1,25 +1,28 @@
:root {
- --color-default: 17, 19, 21;
- --color-invert: 255, 255, 255;
- --color-primary: 131, 205, 79;
- --color-secondary: 69, 71, 72;
- --color-light: 255, 255, 255;
- --color-dark: 17, 19, 21;
- --color-success: 33, 154, 67;
- --color-error: 254, 50, 75;
- --color-warning: 254, 179, 53;
- --color-info: 102, 153, 204;
- --color-background: 255, 255, 255;
- --color-background-100: 245, 245, 245;
- --color-background-200: 235, 235, 235;
- --color-background-300: 225, 225, 225;
+ --color-accent: var(--color-primary);
+ --color-current: var(--color-default);
+ --color-default: 17 19 21;
+ --color-invert: 255 255 255;
+ --color-primary: 131 205 79;
+ --color-secondary: 69 71 72;
+ --color-light: 255 255 255;
+ --color-dark: 17 19 21;
+ --color-success: 33 154 67;
+ --color-error: 254 50 75;
+ --color-warning: 254 179 53;
+ --color-info: 102 153 204;
+ --color-background: 255 255 255;
+ --color-background-100: 245 245 245;
+ --color-background-200: 235 235 235;
+ --color-background-300: 225 225 225;
&.dark {
- --color-default: 255, 255, 255;
- --color-invert: 17, 19, 21;
- --color-background: 17, 19, 21;
- --color-background-100: 30, 32, 34;
- --color-background-200: 37, 39, 41;
- --color-background-300: 47, 49, 51;
+ --color-default: 201 209 217;
+ --color-invert: 14 17 22;
+ --color-secondary: 39 41 46;
+ --color-background: 14 17 22;
+ --color-background-100: 23 27 34;
+ --color-background-200: 26 32 38;
+ --color-background-300: 30 36 46;
}
}
diff --git a/src/styles/Utils/theme/vars.css b/src/styles/Utils/theme/vars.css
deleted file mode 100644
index 011a7cd..0000000
--- a/src/styles/Utils/theme/vars.css
+++ /dev/null
@@ -1,19 +0,0 @@
-:root {
- --font-primary: "Poppins", sans-serif;
- --font-secondary: "Poppins", sans-serif;
- --transition: 0.3s;
- --radius: 0.5rem;
- --container: 75rem;
- --container-sm: 50rem;
- --container-padding: 5vw;
- --font-bold: 700;
- --font-semibold: 600;
- --font-medium: 500;
- --font-normal: 400;
- --font-light: 300;
- --font-thin: 200;
-
- @media (--media-t) {
- --container-padding: 3rem;
- }
-}
diff --git a/src/styles/Utils/vars.css b/src/styles/Utils/vars.css
index 6224adb..0ac49aa 100644
--- a/src/styles/Utils/vars.css
+++ b/src/styles/Utils/vars.css
@@ -1,23 +1,41 @@
: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);
@@ -48,3 +66,37 @@
@custom-media --media-w (min-width: 76em);
@custom-media --media-hd (min-width: 88em);
@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"];
diff --git a/src/styles/Utils/vendor.css b/src/styles/Utils/vendor.css
index 301e6ec..40a8c17 100644
--- a/src/styles/Utils/vendor.css
+++ b/src/styles/Utils/vendor.css
@@ -1 +1 @@
-@import url(https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css);
+/* empty */
diff --git a/src/styles/main.css b/src/styles/main.css
index 4f587e2..b721708 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,7 +1,10 @@
+@import "Utils/normalize.css";
@import "Utils/vendor.css";
@import "Utils/theme/main.css";
-@import "Utils/reference.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";
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index b7af753..3105768 100644
--- a/src/styles/tailwind.css
+++ b/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";
diff --git a/src/templates/Components/CookieConsent.twig b/src/templates/Components/CookieConsent.twig
index 9fdf858..404c5ef 100644
--- a/src/templates/Components/CookieConsent.twig
+++ b/src/templates/Components/CookieConsent.twig
@@ -1,12 +1,30 @@
-
-
-
-
Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookies. Následující volbou souhlasíte s využíváním cookies a použití údajů o vašem chování na webu pro zobrazení cílené reklamy. Personalizaci a cílenou reklamu si můžete kdykoliv vypnout nebo upravit.
+{% set center = true %}
+{% set closable = false %}
+
+
+
+
+ {% if true %}
+
+
+
+ {% endif %}
+
Privacy settings and cookies 🍪
-
-
více informací & nastavení
-
vypnout personalizaci
-
Souhlasím s použitím cookies
+
+
+
The Website uses cookies to provide services, personalize ads and analyze traffic.
+
+
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 advertising.
+
+
+
-
\ No newline at end of file
+
diff --git a/src/templates/Components/Dialogs/Basic.twig b/src/templates/Components/Dialogs/Basic.twig
index 54044dc..5a436b4 100644
--- a/src/templates/Components/Dialogs/Basic.twig
+++ b/src/templates/Components/Dialogs/Basic.twig
@@ -1,11 +1,15 @@