8a9dcde3c965a1aeeecda794c1be30fc0e6fc5fd to master · TO / Weby / ui-styleguide

Some changes are not shown.

For a faster browsing experience, only 101 of 165 files are shown. Download one of the files below to see all changes.

.gitlab-ci.yml

+1 −1

Original line number	Diff line number	Diff line
		@@ -15,7 +15,7 @@ build:
		- npm run build
		after_script:
		- TAG=`git describe --tags $(git rev-list --tags --max-count=1)`
		- echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
		- echo "{\"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
		- "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
		artifacts:
		expire_in: 30 min

LICENSE

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

README.md

+40 −1

Original line number	Diff line number	Diff line
		@@ -35,7 +35,6 @@ The `npm` command will install project dependencies and the `npm run develop`
		command builds the project, sets up a local server for the Patternlab UI and
		watches relevant template files to rebuild on any changes.


		### Build

		The build command compiles the styleguide CSS and the Patternlab output but it
		@@ -92,3 +91,43 @@ current project settings. Add/modify icons and finally download your new icon
		font. Delete contents of the `source/icons` and put all the content from your
		downloaded font. When finished, run `npm run update-iconset` that will update
		both the style and pattern file automatically.


		## Developing other websites with pirati-ui

		In order to integrate `pirati-ui` with other websites, you will need to include
		at least the CSS source that defines look and feel. Simply place the following
		code in your `<head>`:


		```html
		<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
		```

		If you want to use the JS enahancements as well, you will also need to:

		1. Include Vue.js:

		```html
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
		```

		2. Include `pirati-ui` JS bundle:

		```html
		<script src="[ROOT_URL]/js/main.bundle.js"></script>
		```

		Make sure that Vue.js is included before the JS bundle. The best place for
		both of the JS sources is at the end of your HTML document.

		The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
		one of official bundles hosted at `https://styleguide.pir-test.eu`:

		- https://styleguide.pir-test.eu/latest/
		- https://styleguide.pir-test.eu/1.x.x/
		- ... and so on

		Alternatively, you can run the `pirati-ui` locally. In this case, just run
		`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
		Usually, this will be `http://localhost:3000/`.

gulpfile.js

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

package-lock.json

+14178 −3784

File changed.

Preview size limit exceeded, changes collapsed.

package.json

100755 → 100644

+13 −6

Original line number	Diff line number	Diff line
		{
		"name": "edition-node-gulp",
		"description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
		"version": "1.4.2",
		"version": "2.20.0",
		"dependencies": {
		"@fullcalendar/core": "^6.1.5",
		"@fullcalendar/daygrid": "^6.1.5",
		"@fullcalendar/interaction": "^6.1.5",
		"@fullcalendar/multimonth": "^6.1.6",
		"@fullcalendar/vue": "^6.1.5",
		"browser-sync": "^2.26.7",
		"gulp": "^4.0.2",
		"kind-of": "^6.0.3",
		@@ -12,7 +17,8 @@
		"styleguidekit-assets-default": "^3.0.0",
		"styleguidekit-mustache-default": "^3.0.0",
		"tailwindcss-elevation": "^0.3.4",
		"vue": "^2.6.11",
		"tippy.js": "^6.3.7",
		"vue": "^2.7.14",
		"vue2-flip-countdown": "^0.10.0"
		},
		"resolutions": {
		@@ -53,10 +59,11 @@
		"@rollup/stream": "^1.0.0",
		"acorn": "^6.4.1",
		"autoprefixer": "^9.5.1",
		"chart.js": "^4.2.0",
		"color": "^3.1.2",
		"gulp-add-src": "^1.0.0",
		"gulp-concat": "^2.6.1",
		"gulp-postcss": "^8.0.0",
		"gulp-postcss": "^9.0.0",
		"gulp-rename": "^2.0.0",
		"lodash": "^4.17.15",
		"postcss-assets": "^5.0.0",
		@@ -69,10 +76,10 @@
		"rollup-plugin-terser": "^6.1.0",
		"rollup-plugin-vue": "^5.1.9",
		"tailwind-css-variables": "^2.0.3",
		"tailwindcss": "^1.4.6",
		"tailwindcss-typography": "^3.1.0",
		"tailwindcss": "^3.3.3",
		"@tailwindcss/typography": "^0.5.10",
		"vinyl-buffer": "^1.0.1",
		"vinyl-source-stream": "^2.0.0",
		"vue-template-compiler": "^2.6.11"
		"vue-template-compiler": "^2.7.14"
		}
		}

patternlab-config.json

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

scripts/postinstall.js

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

source/_annotations/annotations.js

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

source/_data/data.json

100755 → 100644

+36 −9

Original line number	Diff line number	Diff line
		@@ -4,27 +4,27 @@
		"title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
		"img": {
		"avatar": {
		"src": "http://placeimg.com/100/100/people",
		"src": "https://picsum.photos/100",
		"alt": "Avatar"
		},
		"square": {
		"src": "http://placeimg.com/300/300/nature",
		"src": "https://picsum.photos/300",
		"alt": "Square"
		},
		"rectangle": {
		"src": "http://placeimg.com/400/300/tech",
		"src": "https://picsum.photos/400/300",
		"alt": "Rectangle"
		},
		"landscape-4x3": {
		"src": "http://placeimg.com/400/300/tech",
		"src": "https://picsum.photos/400/300",
		"alt": "4x3 Image"
		},
		"landscape-16x9": {
		"src": "http://placeimg.com/640/360/tech",
		"src": "https://picsum.photos/640/360",
		"alt": "16x9 Image"
		},
		"landscape-16x9-fullhd": {
		"src": "https://loremflickr.com/1920/1080",
		"src": "https://picsum.photos/1920/1080",
		"alt": "16x9 Image Full HD"
		}
		},
		@@ -32,6 +32,9 @@
		"short": "Lorizzle pimpin' dolizzle sit amet I",
		"medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
		},
		"list": {
		"item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
		},
		"excerpt": {
		"short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
		"medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
		@@ -49,10 +52,11 @@
		"last": "Koolen",
		"lasti": "K",
		"occupation": "Software company manager and open-source software expert",
		"email": "example@example.com",
		"email": "someone.from.the.party@pirati.cz",
		"claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
		"party": "Pirátská strana",
		"age": "30",
		"city": "Valašské Meziříčí",
		"position": "1"
		},
		"organization": {
		@@ -97,6 +101,7 @@
		"label": "Název políčka",
		"placeholder": "Placeholder"
		},
		"calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
		"greyColors": [
		{"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
		{"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
		@@ -117,11 +122,27 @@
		{"cls": "white", "name": "White", "hex": "#ffffff"}
		]
		},
		{
		"name": "Olive",
		"variants": [
		{"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
		]
		},
		{
		"name": "Green",
		"variants": [
		{"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
		{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
		{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
		{"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
		{"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
		]
		},
		{
		"name": "Yellow",
		"variants": [
		{"cls": "yellow-100", "name": "Yellow 100", "hex": "#fff7bf"},
		{"cls": "yellow-200", "name": "Yellow 200", "hex": "#f7f38a"},
		{"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
		{"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
		]
		},
		{
		@@ -165,6 +186,12 @@
		"variants": [
		{"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
		]
		},
		{
		"name": "Pirati",
		"variants": [
		{"cls": "pirati-yellow", "name": "Yellow", "hex": "#fec934"}
		]
		}
		]
		}

source/_data/listitems.json

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

source/_meta/_00-head.mustache

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

source/_meta/_01-foot.mustache

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

source/_patterns/.gitkeep

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

source/_patterns/00-atoms/01-text/text-shadow.mustache

0 → 100644

+7 −0

Original line number	Diff line number	Diff line
		<div>
		<h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
		<h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
		<h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
		<h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
		<h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
		</div>

source/_patterns/00-atoms/02-icons/icons.mustache

+1069 −663

File changed.

Preview size limit exceeded, changes collapsed.

source/_patterns/00-atoms/03-buttons/00-basic-button.mustache

+1 −1

Original line number	Diff line number	Diff line
		<button class="btn {{ classes }}">
		<button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
		<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
		</button>

source/_patterns/00-atoms/03-buttons/01-icon-button.mustache

+1 −1

Original line number	Diff line number	Diff line
		<button class="btn btn--icon {{ classes }}">
		<button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
		<div class="btn__body-wrap">
		<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
		<div class="btn__icon {{ iconClasses }}">

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

+36 −2

Original line number	Diff line number	Diff line
		@@ -7,10 +7,27 @@
		{{> atoms-basic-button(classes: "btn--white") }}
		{{> atoms-basic-button(classes: "btn--blue-300") }}
		{{> atoms-basic-button(classes: "btn--cyan-200") }}
		{{> atoms-basic-button(classes: "btn--green-200") }}
		{{> atoms-basic-button(classes: "btn--green-400") }}
		{{> atoms-basic-button(classes: "btn--green-300") }}
		{{> atoms-basic-button(classes: "btn--orange-300") }}
		{{> atoms-basic-button(classes: "btn--violet-400") }}
		{{> atoms-basic-button(classes: "btn--violet-500") }}
		{{> atoms-basic-button(classes: "btn--red-600") }}
		</div>
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-basic-button(classes: "btn--black", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--white", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
		{{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
		</div>
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-icon-button(classes: "btn--black") }}
		@@ -20,9 +37,26 @@
		{{> atoms-icon-button(classes: "btn--white") }}
		{{> atoms-icon-button(classes: "btn--blue-300") }}
		{{> atoms-icon-button(classes: "btn--cyan-200") }}
		{{> atoms-icon-button(classes: "btn--green-200") }}
		{{> atoms-icon-button(classes: "btn--green-400") }}
		{{> atoms-icon-button(classes: "btn--green-300") }}
		{{> atoms-icon-button(classes: "btn--orange-300") }}
		{{> atoms-icon-button(classes: "btn--violet-400") }}
		{{> atoms-icon-button(classes: "btn--violet-500") }}
		{{> atoms-icon-button(classes: "btn--red-600") }}
		</div>
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-icon-button(classes: "btn--black", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--white", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
		{{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
		</div>
		</div>

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

+4 −2

Original line number	Diff line number	Diff line
		@@ -7,7 +7,8 @@
		{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
		{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
		@@ -20,7 +21,8 @@
		{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
		{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache

+4 −2

Original line number	Diff line number	Diff line
		@@ -7,7 +7,8 @@
		{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
		{{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
		{{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
		{{> atoms-basic-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
		{{> atoms-basic-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
		{{> atoms-basic-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
		{{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
		{{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
		{{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
		@@ -21,7 +22,8 @@
		{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
		{{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
		{{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
		{{> atoms-icon-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
		{{> atoms-icon-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
		{{> atoms-icon-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
		{{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
		{{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
		{{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}

source/_patterns/00-atoms/03-buttons/loading-button.mustache

0 → 100644

+7 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-basic-button(classes: "text-sm btn--loading" )}}
		{{> atoms-basic-button(classes: "text-base btn--loading" )}}
		{{> atoms-basic-button(classes: "text-lg btn--loading" )}}
		</div>
		</div>

source/_patterns/00-atoms/04-animations/ping.mustache

0 → 100644

+4 −0

Original line number	Diff line number	Diff line
		<span class="inline-flex h-4 w-4 mr-4 relative">
		<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
		<span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
		</span>

source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache

+6 −6

Original line number	Diff line number	Diff line
		<ul class="unordered-list unordered-list--dense">
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>

source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache

+48 −24

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list leading-tight">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list leading-snug">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list leading-normal">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list leading-relaxed">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		</div>

source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache

+48 −24

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list text-xs">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list text-sm">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list text-lg">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		<div class="inline-flex flex-col space-y-2">
		<ul class="unordered-list text-xl">
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>{{ excerpt.short }}</li>
		<li>
		{{{ list.item }}}
		<ul class="unordered-list">
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>
		</div>
		</div>

source/_patterns/00-atoms/04-lists/unordered-list.mustache

+6 −6

Original line number	Diff line number	Diff line
		<ul class="unordered-list">
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{ headline.short }}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		<li>{{{ list.item }}}</li>
		</ul>

source/_patterns/00-atoms/15-form-fields/13-textarea.mustache

+1 −1

<textarea class="text-input form-field__control {{ classes }}" value="" rows="10" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}></textarea>

<textarea class="text-input form-field__control {{ classes }}" value="" rows="{{ rows }}{{^ rows }}10{{/ rows }}" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>{{ textareaContent }}</textarea>

source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-tooltip(classes: "tooltip--black") }}
		{{> atoms-tooltip(classes: "tooltip--grey-125") }}
		{{> atoms-tooltip(classes: "tooltip--red-600") }}
		{{> atoms-tooltip(classes: "tooltip--yellow-400") }}
		{{> atoms-tooltip(classes: "tooltip--green-400") }}
		{{> atoms-tooltip(classes: "tooltip--blue-300") }}
		</div>
		</div>

source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache

0 → 100644

+86 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--black tooltip--top") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--black tooltip--bottom") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--black tooltip--left") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--black tooltip--right") }}
		</div>
		</div>
		<div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--top") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--bottom") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--left") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--right") }}
		</div>
		</div>
		<div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--top") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--bottom") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--left") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--right") }}
		</div>
		</div>
		<div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--top") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--bottom") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--left") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--right") }}
		</div>
		</div>
		<div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--top") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--bottom") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--left") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--right") }}
		</div>
		</div>
		<div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--top") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--bottom") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--left") }}
		</div>
		<div class="p-8">
		{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--right") }}
		</div>
		</div>
		</div>

source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache

0 → 100644

+11 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-tooltip(classes: "tooltip--dark") }}
		{{> atoms-tooltip(classes: "tooltip--light") }}
		{{> atoms-tooltip(classes: "tooltip--default") }}
		{{> atoms-tooltip(classes: "tooltip--error") }}
		{{> atoms-tooltip(classes: "tooltip--warning") }}
		{{> atoms-tooltip(classes: "tooltip--success") }}
		{{> atoms-tooltip(classes: "tooltip--info") }}
		</div>
		</div>

source/_patterns/00-atoms/16-tooltips/tooltip.mustache

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>

source/_patterns/00-atoms/17-alerts/alert-colors.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
		</div>
		</div>

source/_patterns/00-atoms/17-alerts/alert-faded.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
		</div>
		</div>

source/_patterns/00-atoms/17-alerts/alert-semantic.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
		{{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
		</div>
		</div>

source/_patterns/00-atoms/17-alerts/alert.mustache

0 → 100644

+6 −0

Original line number	Diff line number	Diff line
		<span class="alert {{ classes }}">
		{{# icon }}
		<i class="alert__icon {{ icon }}"></i>
		{{/ icon }}
		<span>{{ excerpt.short }}</span>
		</span>

source/_patterns/00-atoms/18-calendars/month-calendar.mustache

0 → 100644

+3 −0

Original line number	Diff line number	Diff line
		<div class="__js-root">
		<ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
		</div>

source/_patterns/00-atoms/18-calendars/year-calendar.mustache

0 → 100644

+3 −0

Original line number	Diff line number	Diff line
		<div class="__js-root">
		<ui-year-calendar events='{{ calendarData }}'></ui-year-calendar>
		</div>

source/_patterns/00-atoms/19-image/image.mustache

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		<img src="https://picsum.photos/300/200" class="{{ classes }}">

source/_patterns/01-molecules/02-cards/card-actions.mustache

0 → 100644

+28 −0

Original line number	Diff line number	Diff line
		<div class="card">
		<div class="card__body">
		<div class="flex items-center justify-between mb-4">
		<h1 class="card-headline">Ukončit rozpravu?</h1>
		<button><i class="ico--cross"></i></button>
		</div>
		<p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
		</div>
		<div class="card-actions space-x-1">
		{{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
		{{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
		</div>
		</div>


		<div class="card">
		<div class="card__body">
		<div class="flex items-center justify-between mb-4">
		<h1 class="card-headline">Ukončit rozpravu?</h1>
		<button><i class="ico--cross"></i></button>
		</div>
		<p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
		</div>
		<div class="card-actions card-actions--right space-x-1">
		{{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
		{{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
		</div>
		</div>

source/_patterns/01-molecules/03-candidate-card/candidate-card.mustache

+3 −2

Original line number	Diff line number	Diff line
		@@ -7,8 +7,9 @@
		</div>
		<div class="candidate-card__bio">
		<h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
		<a href="#" class="block font-light mb-4">{{ person.email }}</a>
		<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
		<a href="#" class="candidate-card__bio-item block mb-4">{{ person.email }}</a>
		<h2 class="candidate-card__bio-item">{{ person.occupation }}</h2>
		<h2 class="head-allcaps-4xs mt-4">{{ person.city }}</h2>
		</div>
		<div class="candidate-card__affiliation">
		<div>{{ person.age }} let</div>

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

+1 −1

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@
		<div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
		{{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
		<div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
		<div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div>
		<div class="candidate-table-row__bio font-condensed">{{ person.age }} let, {{ person.occupation }}, {{ person.city }}</div>
		<div class="candidate-table-row__affiliation">
		{{> atoms-basic-avatar(classes: "w-6 mr-2") }}
		<span class="font-bold font-condensed">{{ person.party }}</span>

source/_patterns/01-molecules/05-pagination/inline-pagination.mustache

0 → 100644

+9 −0

Original line number	Diff line number	Diff line
		<nav class="pagination pagination--inline space-x-1 {{ classes }}">
		{{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
		{{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
		{{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
		{{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
		{{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
		{{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
		{{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
		</nav>

source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache

0 → 100644

+4 −0

Original line number	Diff line number	Diff line
		<nav class="pagination pagination--inline space-x-1 {{ classes }}">
		{{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
		{{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
		</nav>

source/_patterns/01-molecules/06-banner/color-variants.mustache

+3 −3

Original line number	Diff line number	Diff line
		<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
		{{> molecules-banner(color: "bg-black") }}
		{{> molecules-banner(color: "bg-violet-300") }}
		{{> molecules-banner(color: "bg-green-200") }}
		{{> molecules-banner(color: "bg-blue-200") }}
		{{> molecules-banner(color: "bg-violet-500") }}
		{{> molecules-banner(color: "bg-red-600") }}
		{{> molecules-banner(color: "bg-blue-300") }}
		{{> molecules-banner(color: "bg-brands-facebook") }}
		{{> molecules-banner(color: "bg-brands-twitter") }}
		</div>

source/_patterns/01-molecules/14-form-fields/textarea-field.mustache

+3 −1

Original line number	Diff line number	Diff line
		<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
		{{^ nolabel }}
		<label class="form-field__label" for="field">{{ label }}{{^ label }}{{ form.label }}{{/ label }}</label>
		{{/ nolabel }}
		<div class="form-field__wrapper form-field__wrapper--shadowed">
		{{> atoms-textarea }}
		</div>

source/_patterns/01-molecules/15-navbar/navbar-menu.mustache

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		<ul class="navbar-menu text-white">
		<li class="navbar-menu__item">
		<a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
		</li>
		<li class="navbar-menu__item">
		<ui-navbar-subitem-replacing label="Lidé">
		<span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
		<div class="navbar-menu__submenu-wrap">
		<ul class="navbar-menu__submenu">
		<li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
		</ul>
		</div>
		</ui-navbar-subtitem-replacing>
		</li>
		<li class="navbar-menu__item">
		<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
		</li>
		<li class="navbar-menu__item">
		<a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
		</li>
		</ul>

source/_patterns/01-molecules/16-chips/chip-colors.mustache

0 → 100644

+17 −0

Original line number	Diff line number	Diff line
		<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
		<div class="inline-flex flex-col space-y-2">
		{{> molecules-chip(classes: "chip--black") }}
		{{> molecules-chip(classes: "chip--grey-700") }}
		{{> molecules-chip(classes: "chip--grey-500") }}
		{{> molecules-chip(classes: "chip--grey-125") }}
		{{> molecules-chip(classes: "chip--blue-300") }}
		{{> molecules-chip(classes: "chip--cyan-200") }}
		{{> molecules-chip(classes: "chip--cyan-500") }}
		{{> molecules-chip(classes: "chip--green-300") }}
		{{> molecules-chip(classes: "chip--green-400") }}
		{{> molecules-chip(classes: "chip--orange-300") }}
		{{> molecules-chip(classes: "chip--violet-400") }}
		{{> molecules-chip(classes: "chip--violet-500") }}
		{{> molecules-chip(classes: "chip--red-600") }}
		</div>
		</div>

source/_patterns/01-molecules/16-chips/chip-pagination.mustache

0 → 100644

+7 −0

Original line number	Diff line number	Diff line
		<span class="chip chip--grey-125 chip--hoveractive text-xs">
		<span class="ico--chevron-left"></span>
		</span>

		<span class="chip chip--grey-125 chip--hoveractive ml-1">
		<span class="ico--chevron-right"></span>
		</span>

source/_patterns/01-molecules/16-chips/chip-select.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<span class="chip chip--black chip--select">
		<select>
		<option value="">Select input choice</option>
		<option value="">choice</option>
		<option value="">choice</option>
		<option value="">choice</option>
		<option value="">choice</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>

source/_patterns/01-molecules/16-chips/chip.mustache

0 → 100644

+3 −0

Original line number	Diff line number	Diff line
		<div class="chip {{ classes }}">
		{{ cta }}
		</div>

source/_patterns/01-molecules/17-thumbs/thumbs-inactive.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="space-x-2 text-sm flex items-center">
		<button class="text-grey-200 hover:text-blue-300 flex items-center space-x-1">
		<span class="font-bold">6</span>
		<i class="ico--thumbs-up"></i>
		</button>
		<button class="text-grey-200 hover:text-red-600 flex items-center space-x-1">
		<i class="ico--thumbs-down transform -scale-x-1"></i>
		<span class="font-bold">2</span>
		</button>
		</div>

source/_patterns/01-molecules/17-thumbs/thumbs.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="space-x-2 text-sm flex items-center">
		<button class="text-blue-300 flex items-center space-x-1">
		<span class="font-bold">6</span>
		<i class="ico--thumbs-up"></i>
		</button>
		<button class="text-red-600 flex items-center space-x-1">
		<i class="ico--thumbs-down transform -scale-x-1"></i>
		<span class="font-bold">2</span>
		</button>
		</div>

source/_patterns/01-molecules/18-chat/chat-post-with-labels.mustache

0 → 100644

+16 −0

Original line number	Diff line number	Diff line
		<div class="flex items-start p-2 -ml-2">
		<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
		<div class="flex-1 overflow-hidden">
		<div class="mb-1">
		<div class="flex justify-between">
		<div class="flex items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
		</div>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>

source/_patterns/01-molecules/18-chat/chat-post-with-ratings.mustache

0 → 100644

+16 −0

Original line number	Diff line number	Diff line
		<div class="flex items-start p-2 -ml-2">
		<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
		<div class="flex-1 overflow-hidden">
		<div class="mb-1">
		<div class="flex justify-between">
		<div class="flex items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>

source/_patterns/01-molecules/18-chat/chat-post.mustache

0 → 100644

+15 −0

Original line number	Diff line number	Diff line
		<div class="flex items-start p-2 -ml-2">
		<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
		<div class="flex-1 overflow-hidden">
		<div class="mb-1">
		<div class="flex justify-between">
		<div class="flex items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
		</div>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>

source/_patterns/01-molecules/19-dropdown/dropdown.mustache

0 → 100644

+6 −0

Original line number	Diff line number	Diff line
		<div class="dropdown">
		<span>Dropdown</span>
		<div class="dropdown-content">
		<p>Hello World!</p>
		</div>
		</div>

source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache

0 → 100644

+13 −0

Original line number	Diff line number	Diff line
		<div class="btn btn--icon {{ classes }}">
		<div class="btn__body-wrap">
		<button class="btn__body {{ bodyClasses }}">{{ cta }}</button>
		<button class="btn__icon dropdown-button">
		<i class="ico--chevron-down"></i>
		<ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
		<li class="dropdown-button__choice hover:bg-grey-125">
		<a class="block px-4 py-3" href="#">Navrhnout postup</a>
		</li>
		</ul>
		</button>
		</div>
		</div>

source/_patterns/01-molecules/21-modal/modal.mustache

0 → 100644

+25 −0

Original line number	Diff line number	Diff line
		<div class="modal__overlay hidden toggle-modal-sample-1" id="modal-sample-1">
		<div class="modal__content" role="dialog">
		<div class="modal__container w-full max-w-2xl" role="dialog">
		<div class="modal__container-body elevation-10">
		<button class="modal__close" title="Zavřít"><i class="ico--cross"></i></button>
		{{> molecules-image-card }}
		</div>
		</div>
		</div>
		</div>

		<button class="toggle-modal-sample-1">Toggle modal</button>

		<script>
		var toggles = document.getElementsByClassName("toggle-modal-sample-1");
		var modal = document.getElementById("modal-sample-1");

		for (var i = 0; i < toggles.length; i++) {
		toggles[i].addEventListener("click", function () {
		modal.classList.toggle("hidden");
		})

		}

		</script>

source/_patterns/01-molecules/22-images/images.mustache

0 → 100644

+5 −0

Original line number	Diff line number	Diff line
		{{> atoms-image(classes: "mx-auto my-6 lg:max-w-[800px] max-w-full object-contain") }}
		{{> atoms-image(classes: "float-left mr-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
		{{> atoms-image(classes: "float-left mr-4 mb-6 object-contain") }}
		{{> atoms-image(classes: "float-right ml-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
		{{> atoms-image(classes: "float-right ml-4 mb-6 object-contain") }}

source/_patterns/02-organisms/00-global/subnav.mustache

+2 −2

Original line number	Diff line number	Diff line
		@@ -45,11 +45,11 @@
		</nav>
		<aside class="subnav-aside">
		<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
		<a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
		<a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--cross"></i></a>
		<ui-region-map class="container container--default"></ui-region-map>
		</div>
		<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
		<a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
		<a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--cross"></i></a>
		<div class="container container--default">
		<ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
		</div>

source/_patterns/02-organisms/00-global/navbar.mustache→source/_patterns/02-organisms/01-navbar/navbar.mustache

+24 −15

Original line number	Diff line number	Diff line
		@@ -28,25 +28,34 @@
		<a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
		</li>
		<li class="navbar-menu__item">
		<ui-navbar-subitem label="Lidé">
		<ui-navbar-subitem-replacing label="Lidé" items="[["Delší link co je delší než hlavní menu položka", "{{ link.templates-people }}"]]">
		<span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
		<div class="navbar-menu__submenu-wrap">
		<ul class="navbar-menu__submenu">
		<li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
		</ul>
		</ui-navbar-subtitem>
		</div>
		</ui-navbar-subtitem-replacing>
		</li>
		<li class="navbar-menu__item">
		<ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
		<ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[["Detail aktuality", "{{ link.templates-article-detail }}"]]">
		<a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
		<div class="navbar-menu__submenu-wrap">
		<ul class="navbar-menu__submenu">
		<li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
		</ul>
		</ui-navbar-subtitem>
		</div>
		</ui-navbar-subtitem-replacing>
		</li>
		<li class="navbar-menu__item">
		<ui-navbar-subitem label="Volby">
		<ui-navbar-subitem-replacing label="Volby" items="[["Volební rozcestník", "{{ link.templates-elections }}"]]">
		<span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
		<div class="navbar-menu__submenu-wrap">
		<ul class="navbar-menu__submenu">
		<li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
		</ul>
		</ui-navbar-subtitem>
		</div>
		</ui-navbar-subtitem-replacing>
		</li>
		<li class="navbar-menu__item">
		<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

source/_patterns/02-organisms/02-simplified-footer/simplified-footer.mustache

0 → 100644

+4 −0

Original line number	Diff line number	Diff line
		<footer class="border-t border-grey-125 pt-4 flex flex-col md:flex-row md:justify-between space-y-4">
		<img src="/images/logo-full-black.svg" class="w-32" alt="Pirátská strana" />
		<p>Piráti, 2021. Všechna práva vyhlazena.</p>
		</footer>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-actions.mustache

0 → 100644

+29 −0

Original line number	Diff line number	Diff line
		<nav class="navbar navbar--simple __js-root">
		<ui-app inline-template>
		<ui-navbar inline-template>
		<div>
		<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
		<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
		<a href="#">
		<img src="/images/logo-round-white.svg" class="w-8" />
		</a>
		<span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
		</div>
		<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
		<a href="#" @click="show = !show" class="no-underline hover:no-underline">
		<i class="ico--menu text-3xl"></i>
		</a>
		</div>
		<div v-if="show \|\| isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
		<div class="flex-grow">
		{{> molecules-navbar-menu }}
		</div>
		<div class="flex items-center space-x-4">
		{{> atoms-button(classes: "btn--grey-125 btn--hoveractive btn--to-white", cta: "Přihlášení") }}
		</div>
		</div>
		</div>
		</div>
		</ui-navbar>
		</ui-app>
		</nav>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache

0 → 100644

+40 −0

Original line number	Diff line number	Diff line
		<nav class="navbar navbar--simple __js-root">
		<ui-app inline-template>
		<ui-navbar inline-template>
		<div>
		<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
		<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
		<a href="#">
		<img src="/images/logo-round-white.svg" class="w-8" />
		</a>
		<span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
		</div>
		<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
		<a href="#" @click="show = !show" class="no-underline hover:no-underline">
		<i class="ico--menu text-3xl"></i>
		</a>
		</div>
		<div v-if="show \|\| isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
		<div class="flex-grow">
		{{> molecules-navbar-menu }}
		</div>
		</div>
		<div class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
		<div class="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
		<span class="relative inline-flex h-4 w-4 mr-4" title="Jsi online">
		<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
		<span class="inline-flex rounded-full w-4 h-4 bg-green-400"></span>
		</span>
		<span class="hidden md:block text-grey-200">Jsi online</span>
		</div>
		<div class="flex items-center space-x-4">
		<span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
		{{> atoms-basic-avatar(classes: "avatar--2xs") }}
		<button class="text-grey-200 hover:text-white"><i class="ico--log-out"></i></button>
		</div>
		</div>
		</div>
		</div>
		</ui-navbar>
		</ui-app>
		</nav>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar.mustache

0 → 100644

+26 −0

Original line number	Diff line number	Diff line
		<nav class="navbar navbar--simple __js-root">
		<ui-app inline-template>
		<ui-navbar inline-template>
		<div>
		<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
		<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
		<a href="#">
		<img src="/images/logo-round-white.svg" class="w-8" />
		</a>
		<span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
		</div>
		<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
		<a href="#" @click="show = !show" class="no-underline hover:no-underline">
		<i class="ico--menu text-3xl"></i>
		</a>
		</div>
		<div v-if="show \|\| isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
		<div class="flex-grow">
		{{> molecules-navbar-menu }}
		</div>
		</div>
		</div>
		</div>
		</ui-navbar>
		</ui-app>
		</nav>

source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache

0 → 100644

+35 −0

Original line number	Diff line number	Diff line
		<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
		<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
		<div class="lg:row-span-2 lg:col-span-3 order-1">
		{{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
		<h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
		</div>
		<div class="lg:row-span-1 lg:col-span-3 order-3">
		<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
		{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
		{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
		</div>
		</div>
		<div class="lg:row-span-3 lg:col-span-4 order-2">
		<img src="/images/hero-profile-img.png" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" />
		</div>
		</div>
		<div class="container container--default text-white text-center md:text-left">
		<hr class="hr--big opacity-25" />
		<div class="leading-loose grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 text-shadow-lg text-base md:text-sm">
		<span><a href="#" class="font-bold">Radnice</a></span>
		<span><a href="#">Praha 1</a></span>
		<span><a href="#">Praha 2</a></span>
		<span><a href="#">Praha 3</a></span>
		<span><a href="#">Praha 4</a></span>
		<span><a href="#">Praha 5</a></span>
		<span><a href="#">Praha 6</a></span>
		<span><a href="#">Praha 7</a></span>
		<span><a href="#">Praha 8</a></span>
		<span><a href="#">Praha 9</a></span>
		<span><a href="#">Praha 10</a></span>
		<span><a href="#">Praha 11</a></span>
		<span><a href="#">Praha 12</a></span>
		</div>
		</div>
		</article>

source/_patterns/02-organisms/03-hero/elections-hero.mustache

+5 −5

Original line number	Diff line number	Diff line
		<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
		<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
		<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
		<div class="lg:row-span-2 lg:col-span-3 order-1">
		{{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
		<h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
		<h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
		</div>
		<div class="lg:row-span-1 lg:col-span-3 order-3">
		<div class="mt-4 md:mt-8 space-y-4">
		{{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
		{{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
		<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
		{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
		{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
		</div>
		</div>
		<div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/hero.mustache

+2 −2

Original line number	Diff line number	Diff line
		<article class="hero {{ classes }}">
		<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
		<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
		<div class="lg:row-span-4 lg:col-span-3 order-1">
		<h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
		</div>
		<div class="lg:row-span-1 lg:col-span-3 order-3">
		<div class="mt-4 md:mt-8">
		{{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
		{{> atoms-icon-button(classes: "btn--black block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg", icon: "ico--chevron-right") }}
		</div>
		</div>
		<div class="lg:row-span-5 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/home-hero.mustache

+4 −4

Original line number	Diff line number	Diff line
		<article class="hero py-8 lg:py-16 {{ classes }}">
		<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
		<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
		<div class="lg:row-span-2 lg:col-span-3 order-1">
		<h1 class="head-alt-md md:head-alt-xl">Piráti Pardubického kraje</h1>
		<h1 class="head-alt-lg md:head-alt-xl">Piráti Pardubického kraje</h1>
		</div>
		<div class="lg:row-span-1 lg:col-span-3 order-3">
		<div class="mt-4 md:mt-8 space-y-4">
		{{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
		<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
		{{> atoms-icon-button(icon: "ico--chevron-right", classes: "block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg") }}
		</div>
		</div>
		<div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/image-hero.mustache

+5 −13

Original line number	Diff line number	Diff line
		<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
		<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
		<div class="lg:row-span-4 lg:col-span-3 order-1">
		<h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
		</div>
		<div class="lg:row-span-1 lg:col-span-3 order-3">
		<div class="mt-4 md:mt-8 space-y-4">
		{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
		{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
		</div>
		</div>
		<div class="lg:row-span-5 lg:col-span-4 order-2">
		<img src="/images/hero-profile-img.png" />
		<article class="hero hero--image hero--condensed {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
		<div class="container text-center">
		<h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
		<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
		{{> atoms-basic-button(classes: "btn--white btn--autowidth text-sm md:text-lg") }}
		</div>
		</div>
		</article>

source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		{{> organisms-event-feed(withActionMenu: true) }}

source/_patterns/02-organisms/08-event-feed/event-feed.mustache

0 → 100644

+145 −0

Original line number	Diff line number	Diff line
		<div class="space-y-px {{ classes }}">
		<div class="bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50 ">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:55</div>
		{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
		</div>
		<div class="bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:52</div>
		{{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený návrh postupu")}}
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:51</div>
		{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
		</li>
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:43</div>
		{{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
		<a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu »</a>
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
		</li>
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:35</div>
		{{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
		</li>
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:28</div>
		{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
		<div class="flex items-center justify-between mb-2">
		<div class="space-x-2 flex items-center">
		<div class="font-bold text-sm">11:28</div>
		{{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
		</div>
		{{# withActionMenu }}
		<div class="dropdown dropdown--right">
		<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-white hover:bg-grey-125">
		<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
		</li>
		</ul>
		</div>
		{{/ withActionMenu }}
		</div>
		<span class="leading-tight text-sm lg:text-base"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
		</div>
		</div>

source/_patterns/02-organisms/09-chip-dropdown/chip-dropdown.mustache

0 → 100644

+24 −0

Original line number	Diff line number	Diff line
		<div class="dropdown">
		<div class="chip chip--grey-125">
		<span>Select</span>
		<span class="chip__icon ico--chevron-down ml-2"></span>
		</div>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
		<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
		<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
		</ul>
		</div>


		<div class="dropdown dropdown--right">
		<div class="chip chip--grey-125">
		<span>Select</span>
		<span class="chip__icon ico--chevron-down ml-2"></span>
		</div>
		<ul class="dropdown__content text-xs whitespace-no-wrap">
		<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
		<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
		<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
		</ul>
		</div>

source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache

0 → 100644

+11 −0

Original line number	Diff line number	Diff line
		<div class="h-screen w-screen flex justify-center items-center">
		<div class="text-center">
		<img
		src="/images/logo-round-black.svg"
		class="w-24 mb-2 inline-block"
		alt="Pirátská strana"
		/>
		<h1 class="head-alt-lg mb-2">Název aplikace</h1>
		<p class="text-lg">Načítám aplikaci ...</p>
		</div>
		</div>

source/_patterns/02-organisms/11-vertical-navbar/vertical-navbar.mustache

0 → 100644

+10 −0

Original line number	Diff line number	Diff line
		<div class="vertical-navbar">
		<ul class="vertical-navbar__items">
		<li class="vertical-navbar__item"><a aria-current="page" href="/">Rozcestník</a></li>
		<li class="vertical-navbar__item vertical-navbar__item--active"><a aria-current="page" href="/registrace">Registrace</a></li>
		<li class="vertical-navbar__item"><a href="/ubytovani">Ubytování</a></li>
		<li class="vertical-navbar__item"><a href="/mapa">Mapa</a></li>
		<li class="vertical-navbar__item"><a href="/organizatori">Organizátoři</a></li>
		<li class="vertical-navbar__item"><a href="/pro-dobrovolniky">Pro dobrovolníky</a></li>
		</ul>
		</div>

source/_patterns/02-organisms/12-chart/chart.mustache

0 → 100644

+5 −0

Original line number	Diff line number	Diff line
		<div class="py-4">
		<canvas
		class="lg:h-120 lg:w-auto w-full mx-auto __chart-example"
		></canvas>
		</div>

source/_patterns/03-templates/candidate-detail.mustache

+8 −2

Original line number	Diff line number	Diff line
		{{> organisms-header }}

		<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
		<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
		<div class="container container--default text-center lg:text-left">
		<h1 class="head-alt-md md:head-alt-xl max-w-2xl">{{ person.first }} {{ person.last }}</h1>
		<h2 class="head-xs mt-2 max-w-xl">{{ person.occupation }}</h2>
		@@ -11,7 +11,13 @@
		<main>
		<div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
		<section class="lg:w-3/5 xl:w-2/3">
		<div class="mb-16">
		{{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
		</div>
		<div>
		<h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
		{{> atoms-month-calendar() }}
		</div>
		</section>
		<section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
		<div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">

source/_patterns/03-templates/cf2021/anonymous.mustache

0 → 100644

+237 −0

Original line number	Diff line number	Diff line
		{{> organisms-simplified-navbar-with-actions }}

		<article class="container container--wide pt-8 lg:py-24 cf2021">
		<div class="cf2021__title flex justify-between">
		<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
		</div>

		<section class="cf2021__video space-y-8">
		<div class="container-padding--zero md:container-padding--auto">
		<div class="iframe-container">
		<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
		<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
		<div><strong>0</strong> <span>členů online</span></div>
		<div><strong>0</strong> <span>online celkem</span></div>
		<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
		</div>
		</div>
		</section>

		<section class="cf2021__notifications">
		<div class="lg:card lg:elevation-10">
		<div class="container-padding--zero lg:container-padding--auto">
		{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
		</div>
		</div>
		</section>

		<section class="cf2021__posts">
		<div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
		<h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
		<div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
		<div class="-mx-1">
		<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
		<select>
		<option value="">Vše</option>
		<option value="">Jen aktivní</option>
		<option value="">Jen archivované</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>
		<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
		<select>
		<option value="">Podle času</option>
		<option value="">Podle podpory</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>
		<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
		<select>
		<option value="">Návrhy i příspěvky</option>
		<option value="">Jen návrhy</option>
		<option value="">Jen příspěvky</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>
		</div>

		<div>
		{{> molecules-chip-pagination }}
		</div>
		</div>
		</div>

		<div class="space-y-6 container-padding--zero lg:container-padding--auto">
		<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:46</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:42</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:40</span>
		<a href="#" class="text-grey-200 text-xs ml-2 underline hidden md:inline">(Upraveno přesdedajícím)</a>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		</div>
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		</div>
		</section>
		</article>

source/_patterns/03-templates/cf2021/chairman.mustache

0 → 100644

+453 −0

File added.

Preview size limit exceeded, changes collapsed.

source/_patterns/03-templates/cf2021/user.mustache

0 → 100644

+246 −0

Original line number	Diff line number	Diff line
		{{> organisms-simplified-navbar-with-avatar }}

		<article class="container container--wide pt-8 lg:py-24 cf2021">
		<div class="cf2021__title flex justify-between">
		<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
		</div>

		<section class="cf2021__video space-y-8">
		<div class="container-padding--zero md:container-padding--auto">
		<div class="iframe-container">
		<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
		<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
		<div><strong>0</strong> <span>členů online</span></div>
		<div><strong>0</strong> <span>online celkem</span></div>
		<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
		</div>
		</div>
		</section>

		<section class="cf2021__notifications">
		<div class="lg:card lg:elevation-10">
		<div class="container-padding--zero lg:container-padding--auto">
		{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
		</div>
		</div>
		</section>

		<section class="cf2021__posts">
		<div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
		<h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
		<div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
		<div class="-mx-1">
		<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
		<select>
		<option value="">Vše</option>
		<option value="">Jen aktivní</option>
		<option value="">Jen archivované</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>
		<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
		<select>
		<option value="">Podle času</option>
		<option value="">Podle podpory</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>
		<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
		<select>
		<option value="">Návrhy i příspěvky</option>
		<option value="">Jen návrhy</option>
		<option value="">Jen příspěvky</option>
		</select>
		<span class="chip__icon ico--chevron-down"></span>
		</span>
		</div>

		<div>
		{{> molecules-chip-pagination }}
		</div>
		</div>
		</div>

		<div class="space-y-6 container-padding--zero lg:container-padding--auto">
		<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
		<a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 lg:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
		<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
		<div class="flex-1">
		<div class="mb-1">
		<div class="flex justify-between items-start xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<div class="flex flex-col xl:flex-row xl:items-center">
		<span class="font-bold">{{ person.first }} {{ person.last }}</span>
		<div class="mt-1 xl:mt-0">
		<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
		<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
		</div>
		</div>
		<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
		{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		</div>
		{{> molecules-thumbs }}
		</div>
		</div>
		<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		</div>

		<div class="my-8 space-y-4">
		{{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
		<div class="space-x-4">
		{{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
		<span class="text-sm text-grey-200 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
		</div>
		</div>
		</section>

		</article>

source/_patterns/03-templates/elections.mustache

+1 −1

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@
		{{> organisms-elections-hero }}

		<div class="__js-root">
		<ui-view-provider :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
		<ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
		<main>
		<div class="container container--default pt-8 lg:py-24">
		<div class="text-center">

source/css/atoms/alert.pcss

0 → 100644

+41 −0

Original line number	Diff line number	Diff line
		.alert {
		@apply p-4 flex leading-snug;

		&--dark,
		&--black {
		@apply bg-black text-white;
		}

		&--light,
		&--grey-125 {
		@apply bg-grey-125 text-grey-300;
		}

		&--error,
		&--red-600 {
		@apply bg-red-600 text-white;
		}

		&--warning,
		&--yellow-400 {
		@apply bg-yellow-400 text-black;
		}

		&--success,
		&--green-400 {
		@apply bg-green-400 text-white;
		}

		&--info,
		&--blue-300 {
		@apply bg-blue-300 text-white;
		}

		&--faded {
		@apply bg-opacity-75;
		}
		}

		.alert__icon {
		@apply mr-2;
		}

source/css/atoms/animations.pcss

0 → 100644

+16 −0

Original line number	Diff line number	Diff line
		/* Obsolete with Tailwind 1.6, backported. */
		@keyframes animate-ping {
		0% {
		transform: scale(1);
		opacity: 1;
		}
		75%, 100% {
		transform: scale(2);
		opacity: 0;
		}
		}


		.animate-ping {
		animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
		}

source/css/atoms/avatar.pcss

+23 −22

Original line number	Diff line number	Diff line
		@@ -6,7 +6,9 @@
		}
		}

		@responsive {
		.avatar--2xs {
		@apply w-8;
		}
		.avatar--xs {
		@apply w-12;
		}
		@@ -28,7 +30,6 @@
		.avatar--3xl {
		@apply w-56;
		}
		}

		.avatar--bordered {
		img {

source/css/atoms/card.pcss

+14 −7

Original line number	Diff line number	Diff line
		@responsive {
		.card {
		@apply elevation-2;
		}
		@@ -6,7 +5,6 @@
		.card__body {
		@apply p-8;
		}
		}

		.card--hoveractive {
		@apply transition duration-200;
		@@ -23,3 +21,12 @@
		.card-body-text {
		@apply font-light leading-normal text-sm break-words ;
		}

		.card-actions {
		@apply px-8 py-4 border-t border-grey-125 flex items-center;
		}


		.card-actions--right {
		@apply justify-end;
		}

source/css/atoms/contact-line.pcss

+1 −5

Original line number	Diff line number	Diff line
		@@ -9,11 +9,7 @@

		&.contact-line--responsive {
		i {
		@apply hidden;

		@screen lg {
		@apply inline-block;
		}
		@apply hidden lg:inline-block;
		}
		}
		}

source/css/atoms/container.pcss

+12 −14

Original line number	Diff line number	Diff line
		@@ -10,7 +10,6 @@
		}


		@responsive {
		/* Removes default container padding from the element. */
		/* @note: needs to be kept in sync with tailwind configuration */
		.container-padding--zero {
		@@ -27,4 +26,3 @@
		margin-left: 0;
		margin-right: 0;
		}
		}

source/css/atoms/form-field.pcss

+3 −2

Original line number	Diff line number	Diff line
		.text-input-addon {
		@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-no-wrap border border-grey-200 transition duration-200;
		@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-nowrap border border-grey-200 transition duration-200;
		}

		.text-input {
		@@ -114,7 +114,7 @@
		@apply relative flex;

		input {
		@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-grey-200 border border-grey-200 transition duration-200;
		@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;

		&:hover:not([disabled]):not([readonly]) {
		@apply border-grey-300;
		@@ -127,6 +127,7 @@

		&:checked {
		@apply bg-blue-300 border-transparent;

		}

		&[disabled] {

source/css/atoms/full-calendar.pcss

0 → 100644

+61 −0

Original line number	Diff line number	Diff line
		:root {
		--fc-button-bg-color: #000;
		--fc-button-border-color: #000;
		--fc-button-hover-bg-color: #f9ce05;
		--fc-button-hover-border-color: #f9ce05;
		--fc-button-active-bg-color: #f9ce05;
		--fc-button-active-border-color: #f9ce05;
		--fc-event-bg-color: #fea86a;
		--fc-event-border-color: #fea86a;
		--fc-border-color: #ed9654;
		--fc-today-bg-color: #ed9654;
		--fc-daygrid-event-dot-width: 4px;
		}

		.fc {
		@apply font-condensed;
		}

		.fc-col-header {
		width: 100%!important;
		}

		/* Don't underline only when there is no href attribute defined. */
		.fc .fc-col-header-cell-cushion:not([href]),
		.fc .fc-daygrid-day-number:not([href]) {
		@apply no-underline;
		}

		.fc .fc-col-header-cell {
		@apply bg-orange-300 p-3 font-alt text-white text-xl capitalize;
		}

		.fc .fc-button {
		@apply font-alt rounded-none px-5 py-2 duration-150;
		}

		.fc .fc-button:hover:not(:disabled),
		.fc .fc-button:active:not(:disabled){
		@apply text-black;
		}

		.fc .fc-event {
		@apply p-1 rounded-none border-none text-sm;
		}

		.fc .fc-toolbar-title,
		.fc .fc-today-button {
		@apply capitalize;
		}

		.fc .fc-daygrid-day-number {
		@apply font-alt text-3xl text-orange-300;
		}

		.fc .fc-multimonth-daygrid .fc-daygrid-day-number {
		@apply text-base;
		}

		.fc .fc-day-today .fc-daygrid-day-number {
		@apply text-white;
		}

source/css/atoms/heading.pcss

+103 −85

Original line number	Diff line number	Diff line
		@responsive {
		.h-default {
		@apply font-condensed font-medium leading-tight;
		}

		.h-alt {
		@apply font-alt font-normal;
		line-height: 0.96;
		}

		.h-allcaps {
		@apply font-condensed font-normal uppercase leading-tight;
		}


		.head-alt-xl,
		.content-block .head-alt-xl {
		@apply text-7xl font-alt font-normal leading-negative;
		@apply text-7xl font-alt font-normal;
		line-height: 0.96;
		}

		.head-alt-lg,
		.content-block .head-alt-lg {
		@apply text-6xl font-alt font-normal leading-negative;
		@apply text-6xl font-alt font-normal;
		line-height: 0.96;
		}

		.head-alt-md,
		.content-block .head-alt-md {
		@apply text-4xl font-alt font-normal leading-negative;
		@apply text-4xl font-alt font-normal;
		line-height: 0.96;
		}

		.head-alt-base,
		.content-block .head-alt-base {
		@apply text-3xl font-alt font-normal leading-negative;
		@apply text-3xl font-alt font-normal;
		line-height: 0.96;
		}

		.head-alt-sm,
		.content-block .head-alt-sm {
		@apply text-2xl font-alt font-normal leading-negative;
		@apply text-2xl font-alt font-normal;
		line-height: 0.96;
		}

		.head-alt-xs,
		.content-block .head-alt-xs {
		@apply text-xl font-alt font-normal leading-negative;
		@apply text-xl font-alt font-normal;
		line-height: 0.96;
		}

		.head-alt-2xs,
		.content-block .head-alt-2xs {
		@apply text-lg font-alt font-normal leading-negative;
		@apply text-lg font-alt font-normal;
		line-height: 0.96;
		}


		@@ -112,5 +132,3 @@
		.content-block .head-allcaps-heavy-4xs {
		@apply text-sm font-condensed font-bold uppercase leading-tight;
		}
		}

source/css/atoms/horizontal-rule.pcss

+3 −15

Original line number	Diff line number	Diff line
		hr:not(.hr--unstyled) {
		@apply border-t border-grey-100 my-4;

		@screen md {
		@apply my-8;
		}
		@apply border-t border-grey-100 my-4 md:my-8;

		&.hr--big {
		@apply my-8;

		@screen md {
		@apply my-16;
		}
		@apply my-8 md:my-16;
		}

		&.hr--condensed {
		@apply my-2;

		@screen md {
		@apply my-4;
		}
		@apply my-2 md:my-4;
		}
		}

Source

Target

Files

Some changes are not shown.