e4f37e415d45af21dde2bb443506098bae4cf92a to master · TO / Weby / ui-styleguide

Some changes are not shown.

For a faster browsing experience, only 102 of 150 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.

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.8.0",
		"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

+19 −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"
		}
		},
		@@ -101,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"},
		@@ -124,21 +125,24 @@
		{
		"name": "Olive",
		"variants": [
		{"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"},
		{"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
		]
		},
		{
		"name": "Green",
		"variants": [
		{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
		{"cls": "green-300", "name": "Green 300", "hex": "#77cea1"}
		{"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-200", "name": "Yellow 200", "hex": "#f7f38a"},
		{"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
		{"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
		]
		},
		{
		@@ -182,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 −681

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

+34 −2

Original line number	Diff line number	Diff line
		@@ -7,12 +7,28 @@
		{{> 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") }}
		{{> atoms-icon-button(classes: "btn--grey-700") }}
		@@ -21,10 +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/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/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/15-navbar/navbar-menu.mustache

+8 −5

Original line number	Diff line number	Diff line
		@@ -3,11 +3,14 @@
		<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é">
		<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">
		<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

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

+1 −0

Original line number	Diff line number	Diff line
		@@ -8,6 +8,7 @@
		{{> 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") }}

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/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/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/00-global/navbar/simplified-navbar.mustache→source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar.mustache

+0 −4

Original line number	Diff line number	Diff line
		@@ -18,10 +18,6 @@
		<div class="flex-grow">
		{{> molecules-navbar-menu }}
		</div>
		<div class="flex items-center space-x-4">
		<span class="head-xs">{{ person.first }} {{ person.last }}</span>
		{{> atoms-basic-avatar(classes: "avatar--xs") }}
		</div>
		</div>
		</div>
		</div>

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

Target

Files

Some changes are not shown.