From 9e10f8206d6219f11e667b965736ce1c31c4ce6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lubom=C3=ADr=20Bla=C5=BEek?= Date: Thu, 3 Feb 2022 15:52:38 +0100 Subject: [PATCH] feat(version): 3.1 --- .gitignore | 2 - .stylelintrc | 16 +- CHANGELOG | 9 + README.md | 16 +- gulpfile.js | 171 +- package.json | 22 +- public/sw.js | 30 + src/icons.svg | 32 + src/icons/iconfont.css | 171 -- src/icons/selection.json | 1 - src/icons/variables.css | 31 - src/main.json | 17 +- src/scripts/Components/CookieConsent.js | 91 +- src/scripts/Components/Form.js | 8 +- src/scripts/Layout/+.js | 1 + src/scripts/Layout/Header.js | 18 + src/scripts/Layout/Main.js | 41 +- src/scripts/Libraries/+.js | 1 + src/scripts/Libraries/Anchor.js | 48 +- src/scripts/Libraries/CookieConsent.js | 45 +- src/scripts/Libraries/Dialog.js | 102 +- src/scripts/Libraries/Drawer.js | 22 +- src/scripts/Libraries/NativeSlider.js | 52 +- src/scripts/Libraries/ReCaptcha.js | 20 +- src/scripts/Libraries/Ripple.js | 46 +- src/scripts/Libraries/Stimulus.js | 16 +- src/scripts/Libraries/Swup.js | 22 +- src/scripts/Libraries/Tabs.js | 8 +- src/scripts/Libraries/Tippy.js | 16 +- src/scripts/Ui/Input.js | 114 +- src/scripts/Ui/Select.js | 8 +- src/scripts/Ui/Text.js | 10 +- src/scripts/Utils/Functions/+.js | 1 + src/scripts/Utils/Functions/dataValue.js | 9 + src/scripts/Utils/Functions/inView.js | 35 +- src/scripts/Utils/Functions/loadStimulus.js | 8 +- src/scripts/Utils/cdn.js | 6 +- src/styles/Components/CookieConsent.css | 217 +- src/styles/Components/Dialog/Default.css | 23 +- src/styles/Components/Form/CookieConsent.css | 17 +- src/styles/Layout/+.css | 2 + .../.gitkeep => styles/Layout/Header.css} | 0 src/styles/Layout/Main.css | 41 +- src/styles/Layout/Nav.css | 43 + src/styles/Libraries/+.css | 1 - src/styles/Libraries/Datepicker.css | 101 +- src/styles/Libraries/Dialog.css | 8 +- src/styles/Libraries/Drawer.css | 22 +- src/styles/Libraries/Hint.css | 12 +- src/styles/Libraries/NativeSlider.css | 32 +- src/styles/Libraries/Ripple.css | 11 +- src/styles/Libraries/Tabs.css | 6 +- src/styles/Libraries/Tippy.css | 8 +- src/styles/Ui/+.css | 2 + src/styles/Ui/Badge.css | 43 +- src/styles/Ui/Btn.css | 118 +- src/styles/Ui/Checkbox.css | 115 +- src/styles/Ui/Heading.css | 22 +- src/styles/Ui/Icon.css | 33 +- src/styles/Ui/Image.css | 23 + src/styles/Ui/Input.css | 553 +++-- src/styles/Ui/Label.css | 11 +- src/styles/Ui/Link.css | 2 +- src/styles/Ui/Notice.css | 21 +- src/styles/Ui/Progress.css | 31 +- src/styles/Ui/Radio.css | 9 +- src/styles/Ui/Select.css | 239 +- src/styles/Ui/Switch.css | 70 + src/styles/Ui/Text.css | 98 +- src/styles/Ui/Title.css | 10 +- src/styles/Utils/default.css | 138 +- src/styles/Utils/icons.css | 9 + .../Animate.css => Utils/keyframes.css} | 68 +- src/styles/Utils/normalize.css | 223 ++ src/styles/Utils/reference.css | 2 - src/styles/Utils/tailwind/base.css | 15 + src/styles/Utils/tailwind/content.css | 23 - src/styles/Utils/tailwind/gutters.css | 520 ++-- src/styles/Utils/theme/main.css | 43 +- src/styles/Utils/theme/vars.css | 19 - src/styles/Utils/vars.css | 62 +- src/styles/Utils/vendor.css | 2 +- src/styles/main.css | 5 +- src/styles/tailwind.css | 5 +- src/templates/Components/CookieConsent.twig | 36 +- src/templates/Components/Dialogs/Basic.twig | 10 +- src/templates/Layout/Header.twig | 42 + src/templates/Layout/Main.twig | 14 +- src/templates/Sections/Gdpr.twig | 64 + src/templates/Sections/Ui.twig | 2104 +++++++++++++++++ src/templates/gdpr.json | 11 + src/templates/index.json | 9 +- src/templates/json-tippy.twig | 4 +- src/templates/ui.json | 11 + tailwind.config.cjs | 60 + 95 files changed, 4448 insertions(+), 2261 deletions(-) create mode 100644 public/sw.js create mode 100644 src/icons.svg delete mode 100644 src/icons/iconfont.css delete mode 100644 src/icons/selection.json delete mode 100644 src/icons/variables.css create mode 100644 src/scripts/Layout/Header.js rename src/{templates/Sections/.gitkeep => styles/Layout/Header.css} (100%) create mode 100644 src/styles/Layout/Nav.css create mode 100644 src/styles/Ui/Image.css create mode 100644 src/styles/Ui/Switch.css create mode 100644 src/styles/Utils/icons.css rename src/styles/{Libraries/Animate.css => Utils/keyframes.css} (63%) create mode 100644 src/styles/Utils/normalize.css delete mode 100644 src/styles/Utils/reference.css create mode 100644 src/styles/Utils/tailwind/base.css delete mode 100644 src/styles/Utils/tailwind/content.css delete mode 100644 src/styles/Utils/theme/vars.css create mode 100644 src/templates/Sections/Gdpr.twig create mode 100644 src/templates/Sections/Ui.twig create mode 100644 src/templates/gdpr.json create mode 100644 src/templates/ui.json create mode 100644 tailwind.config.cjs 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', ``) 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í - - +
+
+

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.

+
+
+
+
+ +
+
+ Information and settings +
-
\ 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 @@
- +

Info

-
+
{% for i in 1..44 %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.

{% endfor %} @@ -13,7 +17,7 @@
- +
diff --git a/src/templates/Layout/Header.twig b/src/templates/Layout/Header.twig index e69de29..8aba06e 100644 --- a/src/templates/Layout/Header.twig +++ b/src/templates/Layout/Header.twig @@ -0,0 +1,42 @@ + diff --git a/src/templates/Layout/Main.twig b/src/templates/Layout/Main.twig index 5d09086..8e703b3 100644 --- a/src/templates/Layout/Main.twig +++ b/src/templates/Layout/Main.twig @@ -1,5 +1,5 @@ - + @@ -34,15 +34,7 @@ document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch'); /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile'); document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, '')); !function(e) { let t; (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0]) } (navigator.userAgent.toLowerCase()); - {% if config.serve.mode == 'devoff' %} - - - - {% else %} - - {% endif %} + @@ -57,5 +49,7 @@ {% if layout.cookies %} {% include '../Components/CookieConsent.twig' %} {% endif %} + + {{ fetch ('/src/icons.svg') }} diff --git a/src/templates/Sections/Gdpr.twig b/src/templates/Sections/Gdpr.twig new file mode 100644 index 0000000..8ebd36b --- /dev/null +++ b/src/templates/Sections/Gdpr.twig @@ -0,0 +1,64 @@ +
+
+
+
+

Cookies settings

+
+
+
+
+
+

Cookies settings

+

+ Lorem ipsum +

+

+
+
+
+
+
Necessary cookies
+

+ Lorem ipsum +

+
+
+
+ +
+
+
+
Performance cookies
+

+ Lorem ipsum +

+
+
+
+ +
+
+
+
Marketing cookies
+

+ Lorem ipsum +

+
+
+
+ +
+
+ +
+
+
+
+
+
diff --git a/src/templates/Sections/Ui.twig b/src/templates/Sections/Ui.twig new file mode 100644 index 0000000..528f3f0 --- /dev/null +++ b/src/templates/Sections/Ui.twig @@ -0,0 +1,2104 @@ +{% if section.intro %} +
+
+
+

Lightweight, modern and modular CSS framework with best principles

+
+

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

+
+
+
+ + Documentation + +
+
+ + Github v3.1.x + +
+
+
+ git clone --depth 1 https://github.com/newlogic-digital/ui.git . && npm i +
+
+
+

Under the hood

+
+
+ + + +
+
+ + + +
+
+ + + + + + + + + + +
+
+ + + + + + + + + +
+
+
+
+
Newlogic Core
+
+
+
Vite
+
+
+
PostCSS
+
+
+
Lightweight
+
+
+
Modern
+
+
+
Modular
+
+
+
Responsive
+
+
+
Progressive
+
+
+
Fast
+
+
+
Dark Mode
+
+
+
Easy syntax
+
+
+
CSS Variables
+
+
+
ES6 Javascript
+
+
+
Dynamic imports
+
+
+
Importmaps
+
+
+
Icomoon
+
+
+
Lazysizes
+
+
+
Mobile First
+
+
+
Backend First
+
+
+
+

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.

+
+
+
+ + + + + Product by Newlogic Digital + +
+
+
+{% else %} + + +
+
+
+
+
+

Get started

+ +
+
+

Components

+ +
+
+

Tailwind

+ +
+
+

Libraries

+ +
+
+

Ostatní

+ +
+
+
+
+
+
+
+

Get started

+
+

Minimal version Node.js 14+ and NPM 7+

+
+
+
+

Instalation

+
+

In existing project (with Newlogic Core)

+
+ {% code "bash" %} + $ npm i + {% endcode %} +
+

Creating a new project (with Newlogic Core)

+
+ {% code "bash" %} + $ git clone --depth 1 https://github.com/newlogic-digital/ui.git . + $ npm i + {% endcode %} +
+

Use with in any other environment

+
+ {% code "bash" %} + $ npm i @newlogic-digital/ui + {% endcode %} + {% code "css" %} + /* main.css or separate modules */ + @import "node_modules/@newlogic-digital/ui/src/styles/main.css" + {% endcode %} + {% code "js" %} + /* main.js or separate modules */ + import "node_modules/@newlogic-digital/ui/src/scripts/main.js" + {% endcode %} +
+
+

Core

+
+

Newlogic Core is used as the main toolset, the complete documentation is at core.newlogic.cz

+

Framework can also be used with other tools, more information is in the section Build

+
+
+
+

Theme

+
+

Main CSS variables can be configured in styles/Utils/theme/main.css a styles/Utils/vars.css, you can also create any number of color variations.

+

+

Keyframes can be added in styles/Utils/keyframes.css, print styles in styles/Utils/print.css, import of external css in styles/Utils/vendor.css and tailwind styles can be extended instyles/Utils/tailwind

+
+
+
+

Layout

+
+

Global styles are located at styles/Layout/Main.css, others layout styles are for eg. Header.css, Footer.css and naming should be done in following format #l-header, #l-footer

+

+

Global scripts are located at scripts/Layout/Main.js

+

+

Example of basic layout in HTML:

+
+ {% code "html" %} + + + + + + + + + + + +
+ +
+ +
+
+
+ + + {% endcode %} +
+
+
+
+

Components

+
+

List of basic components used in Newlogic UI

+
+
+
+

Headings

+
+

Attributes

+
    +
  • data-size: lg sm
    • +
+
+ {% code "html:mirror" %} +

Big heading

+ {% endcode %} + {% code "html:mirror" %} +

Normal heading

+ {% endcode %} + {% code "html:mirror" %} +

Small heading

+ {% endcode %} + {% code "html:mirror" %} + Title + {% endcode %} +
+
+
+

Buttons

+
+

Button can be extended with svg icon

+

Position of the icon can be done with class icon-r (to right) or + icon-l (to left)

+

CSS properties can be adjusted with --ui-btn prefix

+

You can change the button color with following tailwind classes - accent-*, bg-*, text-*

+

+

Attributes

+
    +
  • data-size: lg
    • +
  • data-type: outline, square, m:square, circle, m:circle
    • +
  • data-state: active, loading
    • +
+
+ {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} +
+ + + + +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} +
+
+ +
+

Icons

+
+

Icons can be added to src/icons.svg as symbols. They are inlined into HTML and used as with href linking.

+

We use few icons from heroicons.com

+
+ {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + + + {% endcode %} + {% code "html:mirror" %} + + + + + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} +
+
+
+

Forms

+
+

label is animated upon interaction, if you add it after select, input or textarea

+

You can also use variant without label with attribute placeholder and data-placeholder for select

+

+

Forms elements have visual validation for invalid items

+

This functionality can be turned off with attribute data-novalidate on element

+

CSS properties can be adjusted with --ui-input and --ui-checkbox prefix

+

+

Attributes

+
    +
  • data-state: active (element is not empty), valid, invalid, placeholder (label is always up)
    • +
  • data-has: icon-l, icon-r (for when icon is used)
    • +
+
+ {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ + + + + +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ + + +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ + + +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} +
+
+ {% code "html:mirror" %} +
+ + +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ +
+ {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} +
+
+
+

Example form, for javascript form validation upon send you can add attribute data-controller="c-form"

+
+ {% code "html:mirror" %} +
+
+
+ + +
+
+ + +
+
+
+
Protected with reCAPTCHA (Privacy policy - Terms of use)
+ +
+
+ +
+
+ {% endcode %} +
+
+
+

Notice

+
+

Notice is an easy notice frame that you can combine with text or button and change the accent color as you need.

+
+ {% code "html:mirror" %} +
+ Warning notice +
+ {% endcode %} + {% code "html:mirror" %} +
+ Success notice +
+ {% endcode %} + {% code "html:mirror" %} +
+ Info notice +
+ {% endcode %} + {% code "html:mirror" %} +
+ Error notice +
+ {% endcode %} + {% code "html:mirror" %} +
+ Error notice +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+
+

Nicely done!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.

+
+
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ Info notice +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+ Warning notice +
+ +
+ {% endcode %} + {% code "html:mirror" %} +
+
+

Badly done!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.

+
+
+ +
+ {% endcode %} +
+
+

Badge

+
+

CSS properties can be adjusted with --ui-badge prefix

+

+

Attributes

+
    +
  • data-size: sm, md, lg
    • +
  • data-type: square, circle
    • +
+
+ {% code "html:mirror" %} +
+ Default +
+ {% endcode %} + {% code "html:mirror" %} +
+ Dark +
+ {% endcode %} + {% code "html:mirror" %} +
+ Light +
+ {% endcode %} + {% code "html:mirror" %} +
+ Primary +
+ {% endcode %} + {% code "html:mirror" %} + + Secondary + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} + + {% endcode %} + {% code "html:mirror" %} +
+
+ npm +
+
+ 7.1.2 +
+
+ {% endcode %} +
+
+
+

Progress

+
+

Progress bar is easy UI element, which uses native <progress> tag

+

If you skip value attribute, the bar is animated as intermediate

+

CSS properties can be adjusted with --ui-progress

+

+

Attributes

+
    +
  • data-size: sm, lg
    • +
+
+
+ {% code "html:mirror" %} + 15% + {% endcode %} + {% code "html:mirror" %} + 15% + {% endcode %} + {% code "html:mirror" %} + 15% + {% endcode %} + {% code "html:mirror" %} + 15% + {% endcode %} + {% code "html:mirror" %} + 15% + {% endcode %} +
+
+
+
+

Texty

+
+

Into text element you can add all elements as h1-6, p, ul, ul, table etc.

+
+ {% code "html:mirror" %} +
+

h1 heading

+

h2 heading

+

h3 heading

+

h4 heading

+
h5 heading
+
h6 heading
+

Lorem ipsum dolor

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur + metus. In bibendum nisi et dui sagittis efficitur. Proin porttitor diam at quam + finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in + hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et + lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl. + Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in + laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis. + Phasellus non pretium libero.

+

+
    +
  • Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In + bibendum nisi et dui +
    • +
  • Donec eget efficitur metus
    • +
+

+
    +
  • Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In + bibendum nisi et dui +
    • +
  • Donec eget efficitur metus
    • +
+

+
    +
  • Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In + bibendum nisi et dui +
    • +
  • Donec eget efficitur metus
    • +
+

+
    +
  1. Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In + bibendum nisi et dui +
    2. +
  2. Donec eget efficitur metus
    3. +
+
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+

+
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
+

+
+ +
+ Figure 1: Some beautiful placeholders +
+
+

Heading

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+

+ +
+ {% endcode %} +
+
+
+
+

Tailwind

+
+
+

Newlogic UI uses Tailwind CSS for all utility classes. It is extednded by CSS properties, custom colors, flex grid and alternative responsive classes

+
+
+

Colors

+
+

Colors are defined as CSS properties, so you can refer the colors in code as var(--color-primary) and you can use other colors from Tailwind

+

+

Use for text

+
+ {% code "html:mirror" %} +
text-primary
+
text-primary
+
text-secondary
+
text-success
+
text-error
+
text-info
+
text-warning
+
text-default
+
text-invert

+
text-light

+
text-dark
+ {% endcode %} +
+

Use as background

+
+ {% code "html:mirror" %} +
bg-primary
+
bg-secondary
+
bg-success
+
bg-error
+
bg-info
+
bg-warning
+
bg-default
+
bg-invert
+
bg-light
+
bg-dark
+ {% endcode %} +
+

Use as accent

+

You can change accent of any element globally with accent- color

+

+
+ {% code "html:mirror" %} +
+
+ + +
+
+ Notice with inherited accent +
+ +
+ {% endcode %} +
+
+

Responsive

+
+

Newlogic UI is mobile-first and has 5 main breakpoints, these breakpoints are used instead of Tailwind syntax as lg, sm etc.

+

+
    +
  • m: mobile (<768)
    • +
  • t: tablet (>768)
    • +
  • d: desktop (>960)
    • +
  • w: widescreen (>1216)
    • +
  • hd: fullhd (>1408)
    • +
  • touch: touch (<960)
    • +
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ <768px + + 768-959px + + 960-1215px + + 1216-1408px + + >1408px +
+ m: + + - +
+ - + + t: +
+ - + + d: +
+ - + + w: +
+ - + + hd: +
+ touch: + + - +
+
+
+
+
+

Container

+
+

Container aligns content to center with maximum width of 1200px

+

You can adjust following CSS properties --container-width --container-width-sm, --container-padding

+

+

Attributes

+
    +
  • data-size: sm (=800px)
    • +
+
+
+ {% code "html:mirror" %} +
+
+
container
+
+ {% endcode %} +
+
+
+
+

Grid

+
+

For grid system you can use native Tailwind Grid, but Newlogic UI has also it's own flex grid system similiar to Boostrap grid

+

+

Features

+ +

+

You can use following responsive prefixes for all classes: m: (<768), t: (>768), d: (>960), w: (>1216), hd: (>1408)

+

Rows are not wrapped by default, for wrapping you have to use flex-wrap

+

+
+ {% code "html:mirror" %} +
+
+
1
+
+
+
2
+
+
+ {% endcode %} + {% code "html:mirror" %} +
+
+
+
1
+
+
+
+
2
+
+
+ {% endcode %} + {% code "html:mirror" %} +
+
+
+
1
+
+
+
+
2
+
+
+ {% endcode %} + {% code "html:mirror" %} +
+
+
+
1
+
+
+
2
+
+
+
+
+
+
+
+
1
+
+
+
2
+
+
+
+
2
+
+
+
+
2
+
+
+
1
+
+
+
+
+
1
+
+
+
2
+
+
+
+
2
+
+
+
+
+
+
+
+
+
+
1
+
+
+
2
+
+
+
+
+
2
+
+
+
+
+
1
+
+
+
2
+
+
+
+
+
+
+
+
1
+
+
+
2
+
+
+
+
+
1
+
+
+
2
+
+
+
+
+ {% endcode %} +
+
+
+
+

Libraries

+
+
+

Anchor

+
+

Located in src/scripts/Libraries/Anchor.js

+

Anchors works native by default and are defined normally as always in the browser

+

+

For adding extra functionality you can add following attributes data-action="click->lib#anchor" and data-lib-anchor="silent mobile"

+

+

Silent determines if we want to hide the hash and mobile if the anchor should only work on the phone. If we do not want either, we do not specify the attribute

+

+

Offset is calculated automatically with CSS property --l-scroll-padding-top

+

+

+

Examples:

+
+ {% code "html" %} + Link to anchor +
+ {% endcode %} + {% code "html" %} + +
+ {% endcode %} +
+
+
+

CookieConsent

+
+

Located in src/scripts/Libraries/CookieConsent.js, src/styles/Components/CookieConsent.css, src/styles/Components/Form/CookieConsent.css

+

+

The content is being prepared ...

+
+
+
+

Datepicker

+
+

Mainlly used for ui-input for type="date" and type="datetime-local"

+

Located in src/styles/Libraries/Datepicker.css and Vanilla JS Datepicker is used as library

+

+

The content is being prepared ...

+
+
+
+

Dialog

+
+

On any element you can add data-action="click->lib-dialog#show" with attribute data-action-url which is url to *.json file or url request which contains html. For closing the dialog window, you can add data-action="click->lib-dialog#hide" to any element

+

+

Adding data-lib-dialog-open attribute on data-controller="lib-dialog" (by default located on body), then the dialog gets open upon page load

+

Url is passed the same way as normal, you can also add selector to data-lib-dialog-open and HTML content of that selector opens as dialog.

+

+

+

Methods

+
    +
  • open dialog with dialog with fetch request: LibDialog.action(url)
    • +
  • open dialog with any content: LibDialog.show(content)
    • +
  • close dialog: LibDialog.hide()
    • +
+

All methods returns promise

+

+

+

Attributes (c-dialog)

+
    +
  • data-size: sm, base, lg
    • +
  • data-type: scrollable - scroll inside dialog
    • +
  • class: justify-center - vertical align to center
    • +
+
+ {% code "html:mirror" %} + + {% endcode %} +
+
+

Drawer

+
+

Located in src/scripts/Libraries/Drawer.js, src/styles/Libraries/Drawer.css

+

+

The content is being prepared ...

+
+
+
+

Fetch

+
+

Located in src/scripts/Libraries/Fetch.js

+

+

The content is being prepared ...

+
+
+
+

Hint

+
+

Located in src/styles/Libraries/Hint.css

+

+

The content is being prepared ...

+
+
+
+

Lazysizes

+
+

Images should be wrapped insude .ui-image class and as div or picture

+

You can add layzload for the images with the library lazysizes

+

To maintain ratio of the images you have to add ratio class from tailwind, for example aspect-[4/3]

+

Styles for lazysizes are located in src/styles/Libraries/Lazysizes.css

+
+ +
+ {% code "html:mirror" %} +
+ + +
+ {% endcode %} +
+
+ {% code "html:mirror" %} + + + + + {% endcode %} +
+
+

Lazyload can be added also on iframe

+
+
+ {% code "html:mirror" %} +
+ +
+ {% endcode %} +
+
+
+
+

NativeSlider

+
+

Lightweight scroll based slider, which uses CSS scroll-snap

+

It is intended for a simple solution, for advanced sliders it is recommended to use sliders such as Flickity

+

+

Dot navigation can be generated with data-lib-ns-nav attribute or manually with each data-lib-ns-nav-item attribute

+

Arrow control can be controlled with data-lib-ns-prev and data-lib-ns-next attributes

+

+

Slider area is defined with data-lib-ns attribute, you can set autoplay by entering a number in the attribute

+

Other advanced params are <progress data-lib-ns-progress></progress>, data-lib-ns-counter="min" and data-lib-ns-counter="max"

+

+

The sliders is initialized with data-controller="lib-ns" on parent element

+
+
+ {% code "html:mirror" %} +
+
+ {% for i in 1..6 %} +
+
+ +
+
+ {% endfor %} +
+
+
+ +
+
+
+
+
+
+
+
1/
+
+
+ +
+
+ +
+
+
+ {% endcode %} +
+
+
+
+

ReCaptcha

+
+

Located in src/scripts/Libraries/ReCaptcha.js

+

+

Uses Google's recaptcha-enterprise

+

+

ReCaptcha can be added to various types of forms, which can be optionally distinguished with attribute data-lib-recaptcha-action

+

Api key has to be added with data-lib-recaptcha-api attribute

+

+

It can be evaluated upon submitting the form, with attribute data-action="submit->lib-recaptcha#submit"

+
+ {% code "html" %} +
+ + +
+ {% endcode %} +
+
+

Ripple

+
+

The ripple effect is automatically applied to buttons and other components

+

The effect is possible apply anywhere using the attribute data-action="click->lib#ripple" +

Background color can be changed with CSS property --lib-ripple-bg

+

+

Methods

+
    +
  • initialization to any selector: LibRipple(element)
    • +
+

+
+ {% code "html:mirror" %} +
Ripple me
+ {% endcode %} +
+
+
+

Stimulus

+
+

Stimulus is used for component definition, events and other JS interaction

+

This library ensures the life of individual components and initializes them automatically when the content is redrawn

+

+

Stimulus uses three main attributes data-controller (component definition), data-action (event definition - click, change etc.), data-target (ref element in DOM)

+

+

Example usage of all attributes

+

+
+ {% code "html" %} +
+ +
+
+ {% endcode %} + {% code "javascript" %} + import {LibStimulus, Controller, getController} from "../Libraries/Stimulus.js"; + + LibStimulus.register("lib-example", class extends Controller { + // alternative target definitions (you can also use this.queryTarget or this.queryTargetAll instead) + get target() { + return { + myTarget: this.targets.find("myTarget") + } + } + + // can be used without this type definition, but the methods this.data.get, this.data.set, this.data.has must be used and the data attribute must not have postfix -value + static get values() { + return { + text: Number + } + } + + connect() { + // starts when the controller is loaded into DOM + } + + disconnect() { + // starts when the controller is deleted from DOM, use mainly if event listeners that are outside the controller are created in connect + } + + show(e) { + // specific action to which the event can be applied + let currentTarget = e.currentTarget; + + // refer to a specific target element and add a class and color settings + this.queryTarget("myTarget").classList.add(this.getClass("active")); + this.queryTarget("myTarget").style.color = currentTarget.dataset.actionColor; + + // extract custom text defined by the controller, this always refers to the controller + if (!this.hasValue("text")) { + this.setValue("text", 1); + } + + this.queryTarget("myTarget").textContent = this.getValue("text"); + this.setValue("text", 2); + + // This method can be used to communicate with another controller + getController(document.querySelector(".other_controller"), "other_controller").doSomething() + } + }) + {% endcode %} +
+

To fully understand the functionality, we recommend studying documentation

+
+
+
+
+

Swup

+
+

Full-page animations are used between pages using a library Swup +

+

Everything is automatic and if the JS is correctly defined via Stimulus, all JS is automatically reinitialized after site navigation

+

+

If you do not want to use Swup on a specific link, you can use the attribute data-no-swup

+
+
+
+
+

Tabs

+
+

Tabs are divided into navigation section data-lib-tabs-nav and content section data-lib-tabs-area

+

+

In the navigation section, select the items that will be switched by the attribute data-lib-tabs-item="nav", in the content section, we mark individual items with an attribute data-lib-tabs-item="area"

+

+

In order to define that these are switch tabs, it is necessary to define the element by an attribute data-controller="lib-tabs" or you can self-initialize on any selector with method

+

+

Methods

+
    +
  • initialization: LibTabs(element)
    • +
+
+ {% code "html:mirror" %} +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui + sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor + turpis ullamcorper. 1

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui + sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor + turpis ullamcorper. 2

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui + sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor + turpis ullamcorper. 3

+
+
+
+
+ {% endcode %} +
+
+

Tippy

+
+

For dropdowns and tooltips the Tippy.js library is used

+

Tippy properties can be freely modified using attributes data-tippy-*

+

The basic properties are defined by data-lib-tippy="type, template"

+
    +
  • type can be dropdown or tooltip with variants -arrow and -full (full width view on your phone)
    • +
  • template can be id section with html or url for fetch (the response must contain json with the key content)
    • +
+

+

Methods

+
    +
  • initialization: new LibTippy(element, attributes)
    • +
+
+
+

Loading tippy template from external file

+
+ {% code "html:mirror" %} + + {% endcode %} +
+

Loading a tippy template from an inline template

+
+ {% code "html:mirror" %} + + + {% endcode %} +
+

Classic tooltip

+
+ {% code "html:mirror" %} + + {% endcode %} +
+
+
+
+

Other

+
+
+

Functions

+
+

Functions which you can use in JS

+

+

dataValue - working with data attributes

+

_addDataValue(key,value) - adds value to data-key

+

_removeDataValue(key,value) - removes value from data-key

+

_hasDataValue(key,value) - if value exists in data-key, returns true or false

+

+

importScript

+
    +
  • can be used to load scripts the old way into windowwith importScript(url) (returns promise)
    • +
+

+

importStyle

+
    +
  • can be used to load styles into headwith importStyle(url) (returns promise)
    • +
+

inView - is the conent in viewport?

+
    +
  • can be used to call code if the content is visible in the viewport inView(selector, options) (returns promise)
    • +
  • options are optional and you can add same params asi in IntersectionObserver
    • +
+

+

loadStymulus - dynamic load of stimulus elements

+
    +
  • reload elements within a particular selector : loadStimulus(selector)
    • +
  • the definition of which elements are dynamically loaded is in the array: dynamicControllers and dynamicActions
    • +
+
+
+
+
+

Build

+
+

Newlogic UI can be used with other tools, without the need to use Newlogic Core or in a completely different environment than NodeJS

+

+

Following PostCSS plugins are used:

+ {% code "json" %} + { + "devDependencies": { + "autoprefixer": "*", + "tailwindcss": "*", + "postcss-custom-media": "*", + "postcss-custom-selectors": "*", + "postcss-import": "*", + "postcss-nesting": "*", + } + } + {% endcode %} +

+

Tailwind config is located at root in tailwind.config.cjs

+

+

The CSS framework can then be configured for use in modern build tools such as Vite or Snowpack.

+

Theoretically it is even possible to build outside the NodeJS environment in Deno with PostCSS

+

+

Without use of Newlogic Core you can't use compilation of twig templates from src/templates

+
+
+
+
+
+
+
+
+{% endif %} diff --git a/src/templates/gdpr.json b/src/templates/gdpr.json new file mode 100644 index 0000000..1c3fb8b --- /dev/null +++ b/src/templates/gdpr.json @@ -0,0 +1,11 @@ +{ + "headerNormal": true, + "page": { + "title": "Newlogic UI", + "body": [ + { + "src": "Sections/Gdpr" + } + ] + } +} diff --git a/src/templates/index.json b/src/templates/index.json index f3e84f4..437b80c 100644 --- a/src/templates/index.json +++ b/src/templates/index.json @@ -1,5 +1,12 @@ { + "headerNormal": true, "page": { - "title": "Newlogic UI" + "title": "Newlogic UI", + "body": [ + { + "src": "Sections/Ui", + "intro": true + } + ] } } \ No newline at end of file diff --git a/src/templates/json-tippy.twig b/src/templates/json-tippy.twig index cb0dc96..9b607e9 100644 --- a/src/templates/json-tippy.twig +++ b/src/templates/json-tippy.twig @@ -2,12 +2,12 @@
  • -
  • -
    • diff --git a/src/templates/ui.json b/src/templates/ui.json new file mode 100644 index 0000000..16d69d9 --- /dev/null +++ b/src/templates/ui.json @@ -0,0 +1,11 @@ +{ + "headerNormal": true, + "page": { + "title": "Newlogic UI", + "body": [ + { + "src": "Sections/Ui" + } + ] + } +} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..a5fc97b --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,60 @@ +const { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations } = require('@newlogic-digital/core/modules/tailwind/index.cjs') +const plugin = require('tailwindcss/plugin') + +const colors = [ + 'background', 'default', 'invert', 'light', 'dark', 'primary', 'secondary', + 'warning', 'error', 'info', 'success' +] + +const animations = [ + 'fade-in', 'fade-out' +] + +module.exports = { + darkMode: 'class', + content: [ + './src/**/*.{js,html,twig}' + ], + corePlugins: { + preflight: false, + container: false, + ringWidth: false, + ringColor: false, + ringOpacity: false, + ringOffsetWidth: false, + ringOffsetColor: false, + gradientColorStops: false, + backgroundImage: false, + accentColor: false + }, + theme: { + extend: { + colors: tailwindColors(colors), + fontFamily: tailwindVariables('font', ['primary', 'secondary']), + fontWeight: tailwindVariables('font', ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold']), + zIndex: tailwindVariables('z', [10, 20, 30, 40, 50, 60], { + 0: 0, + auto: 'auto' + }), + screens: { + m: { max: '47.9375em' }, + t: '48em', + d: '60em', + w: '76em', + hd: '88em', + touch: { max: '59.9375em' } + } + }, + }, + plugins: [ + plugin(({ addUtilities }) => { + addUtilities(tailwindColorsAccent(colors)) + }), + plugin(({ addUtilities }) => { + addUtilities(tailwindColorsCurrent(colors)) + }), + plugin(({ addUtilities }) => { + addUtilities(tailwindAnimations(animations)) + }) + ], +}