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.

View file

gulpfile.js

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

View file

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.

View file

scripts/postinstall.js

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

View file

source/_annotations/annotations.js

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

View file

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.

View file

source/_meta/_00-head.mustache

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

View file

source/_meta/_01-foot.mustache

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

View file

source/_patterns/.gitkeep

100755 → 100644

+0 −0

File mode changed from 100755 to 100644.

View file

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/_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/cf-tool.mustache

deleted100644 → 0

+0 −261

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

		<div class="container container--wide pt-8 lg:py-24">
		<article class="space-y-8">

		<div class="grid grid-cols-3 gap-8" style="height: 30rem;">
		<div class="col-span-2 space-y-8">
		<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

		<section>
		<div class="flex justify-between items-center mb-4">
		<h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2>
		<div class="flex items-center">
		<span class="chip chip--grey-125 chip--select text-xs">
		<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 text-xs ml-1">
		<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 text-xs mr-4 ml-1">
		<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>

		<span class="chip chip--grey-125 text-xs">
		<span class="chip__icon ico--chevron-left mr-2"></span>
		Novější
		</span>

		<span class="chip chip--grey-125 text-xs ml-1">
		Starší
		<span class="chip__icon ico--chevron-right ml-2"></span>
		</span>
		</div>
		</div>

		<div class="space-y-6">
		<div class="flex items-start bg-yellow-100 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:46</span>
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
		</div>
		<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>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<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 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>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<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:40</span>
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}}
		</div>
		<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>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
		<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:38</span>
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		<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>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
		<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:30</span>
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}}
		{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
		</div>
		<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>
		</div>
		</div>
		<p class="text-black leading-normal">{{ excerpt.medium }}</p>
		</div>
		</div>
		</div>

		<div class="my-8 space-y-4">
		{{> molecules-textarea-field(nolabel: true) }}
		<div class="space-x-4">
		{{> atoms-basic-button(classes: "text-base btn--black btn--hoveractive", cta: "Přidat příspěvek") }}
		<span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
		</div>
		</div>
		</section>
		</div>
		<div class="flex flex-col flex-1 overflow-hidden">
		<h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
		<div class="overflow-hidden flex flex-1">
		<div class="overflow-scroll h-full space-y-px">
		<div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<div class="font-bold text-sm">11:55</div>
		{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
		</div>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		<div class="p-3 bg-yellow-100 border-green-300 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<div class="font-bold text-sm">11:52</div>
		{{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
		</div>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 p-3 border-blue-300 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<div class="font-bold text-sm">11:51</div>
		{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
		</div>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		<div class="p-3 border-red-600 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<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>
		<span class="leading-tight mb-2">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<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>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		<div class="p-3 border-orange-300 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<div class="font-bold text-sm">11:28</div>
		{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
		</div>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		<div class="bg-grey-50 p-3 border-green-300 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<div class="font-bold text-sm">11:20</div>
		{{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
		</div>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		<div class="p-3 border-blue-300 border-l-4">
		<div class="flex items-center space-x-2 mb-2">
		<div class="font-bold text-sm">11:00</div>
		{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
		</div>
		<span class="leading-tight">{{ excerpt.short }}</span>
		</div>
		</div>
		</div>
		</div>
		</div>

		</article>
		</div>

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/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

+92 −87

Original line number	Diff line number	Diff line
		@@ -3,7 +3,8 @@
		}

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

		.h-allcaps {
		@@ -11,40 +12,46 @@
		}


		@responsive {
		.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;
		}


		@@ -125,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/css/atoms/icons.pcss

+366 −83

Original line number	Diff line number	Diff line

		@font-face {
		font-family: 'pirati-ui';
		src: url('../fonts/pirati-ui.eot?0709c769c818c71145690e5adb0caf5f');
		src: url('../fonts/pirati-ui.eot?0709c769c818c71145690e5adb0caf5f#iefix') format('embedded-opentype'),
		url('../fonts/pirati-ui.ttf?0709c769c818c71145690e5adb0caf5f') format('truetype'),
		url('../fonts/pirati-ui.woff?0709c769c818c71145690e5adb0caf5f') format('woff'),
		url('../fonts/pirati-ui.svg?0709c769c818c71145690e5adb0caf5f#pirati-ui') format('svg');
		src: url('../fonts/pirati-ui.eot?964zxx');
		src: url('../fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
		url('../fonts/pirati-ui.ttf?964zxx') format('truetype'),
		url('../fonts/pirati-ui.woff?964zxx') format('woff'),
		url('../fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: block;
		@@ -26,79 +25,363 @@
		-moz-osx-font-smoothing: grayscale;
		}

		.ico--strategy:before { content: "\e932"; }
		.ico--pig:before { content: "\e928"; }
		.ico--thermometer:before { content: "\e90a"; }
		.ico--pirati:before { content: "\e90d"; }
		.ico--stackshare:before { content: "\e90f"; }
		.ico--open-source:before { content: "\e90e"; }
		.ico--search:before { content: "\e913"; }
		.ico--cross:before { content: "\e937"; }
		.ico--checkbox-checked:before { content: "\e938"; }
		.ico--quill:before { content: "\e939"; }
		.ico--feather:before { content: "\e939"; }
		.ico--write:before { content: "\e939"; }
		.ico--edit:before { content: "\e939"; }
		.ico--sphere:before { content: "\e93a"; }
		.ico--globe:before { content: "\e93a"; }
		.ico--internet:before { content: "\e93a"; }
		.ico--wikipedia:before { content: "\e93b"; }
		.ico--brand:before { content: "\e93b"; }
		.ico--youtube:before { content: "\e936"; }
		.ico--users:before { content: "\e934"; }
		.ico--group:before { content: "\e934"; }
		.ico--team:before { content: "\e934"; }
		.ico--members:before { content: "\e934"; }
		.ico--community:before { content: "\e934"; }
		.ico--collaborate:before { content: "\e934"; }
		.ico--book:before { content: "\e935"; }
		.ico--read:before { content: "\e935"; }
		.ico--reading:before { content: "\e935"; }
		.ico--bubbles:before { content: "\e930"; }
		.ico--map:before { content: "\e914"; }
		.ico--compass:before { content: "\e915"; }
		.ico--folder-open:before { content: "\e916"; }
		.ico--folder:before { content: "\e917"; }
		.ico--drawer:before { content: "\e918"; }
		.ico--stop:before { content: "\e919"; }
		.ico--github:before { content: "\e91a"; }
		.ico--clock:before { content: "\e91b"; }
		.ico--calendar:before { content: "\e91c"; }
		.ico--flickr:before { content: "\e91d"; }
		.ico--instagram:before { content: "\e91e"; }
		.ico--twitter:before { content: "\e91f"; }
		.ico--newspaper:before { content: "\e920"; }
		.ico--cart:before { content: "\e921"; }
		.ico--home:before { content: "\e922"; }
		.ico--link:before { content: "\e912"; }
		.ico--power:before { content: "\e90c"; }
		.ico--location:before { content: "\e906"; }
		.ico--phone:before { content: "\e907"; }
		.ico--linkedin:before { content: "\e903"; }
		.ico--github1:before { content: "\e904"; }
		.ico--gplus:before { content: "\e900"; }
		.ico--twitter1:before { content: "\e901"; }
		.ico--facebook:before { content: "\e902"; }
		.ico--menu:before { content: "\e933"; }
		.ico--chevron-right:before { content: "\e923"; }
		.ico--chevron-left:before { content: "\e924"; }
		.ico--chevron-down:before { content: "\e925"; }
		.ico--chevron-up:before { content: "\e926"; }
		.ico--zoom_out_map:before { content: "\e927"; }
		.ico--arrow-down:before { content: "\e911"; }
		.ico--link1:before { content: "\e910"; }
		.ico--city:before { content: "\e908"; }
		.ico--beer:before { content: "\e909"; }
		.ico--edit-pencil:before { content: "\e929"; }
		.ico--at:before { content: "\e905"; }
		.ico--thumbs-down:before { content: "\e93d"; }
		.ico--thumbs-up:before { content: "\e93e"; }
		.ico--tasks:before { content: "\e93c"; }
		.ico--calculator:before { content: "\e931"; }
		.ico--bank:before { content: "\e92a"; }
		.ico--facebook-official:before { content: "\e92b"; }
		.ico--close:before { content: "\e92c"; }
		.ico--anchor:before { content: "\e92d"; }
		.ico--feed:before { content: "\e92e"; }
		.ico--paw:before { content: "\e90b"; }
		.ico--envelope:before { content: "\e92f"; }
		No newline at end of file
		.ico--mastodon:before {
		content: "\e973";
		}
		.ico--helios:before {
		content: "\e96e";
		}
		.ico--redmine:before {
		content: "\e96f";
		}
		.ico--zulip:before {
		content: "\e970";
		}
		.ico--forum:before {
		content: "\e971";
		}
		.ico--pirati:before {
		content: "\e90d";
		}
		.ico--jitsi:before {
		content: "\e90f";
		}
		.ico--open-source:before {
		content: "\e90e";
		}
		.ico--donation-full:before {
		content: "\e96c";
		}
		.ico--donation-outline:before {
		content: "\e96d";
		}
		.ico--strategy:before {
		content: "\e932";
		}
		.ico--pig:before {
		content: "\e928";
		}
		.ico--thermometer:before {
		content: "\e90a";
		}
		.ico--menu:before {
		content: "\e933";
		}
		.ico--chevron-right:before {
		content: "\e923";
		}
		.ico--chevron-left:before {
		content: "\e924";
		}
		.ico--chevron-down:before {
		content: "\e925";
		}
		.ico--chevron-up:before {
		content: "\e926";
		}
		.ico--link-horizontal:before {
		content: "\e910";
		}
		.ico--beer:before {
		content: "\e909";
		}
		.ico--food:before {
		content: "\e968";
		}
		.ico--dots-three-vertical:before {
		content: "\e940";
		}
		.ico--dots-three-horizontal:before {
		content: "\e941";
		}
		.ico--log-out:before {
		content: "\e942";
		}
		.ico--envelope:before {
		content: "\e908";
		}
		.ico--pin:before {
		content: "\e943";
		}
		.ico--at:before {
		content: "\e905";
		}
		.ico--glass:before {
		content: "\e967";
		}
		.ico--checkmark:before {
		content: "\e965";
		}
		.ico--info:before {
		content: "\e901";
		}
		.ico--question:before {
		content: "\e904";
		}
		.ico--warning:before {
		content: "\e93f";
		}
		.ico--code:before {
		content: "\e94a";
		}
		.ico--checkbox-unchecked:before {
		content: "\e94e";
		}
		.ico--star-full:before {
		content: "\e94f";
		}
		.ico--star-empty:before {
		content: "\e950";
		}
		.ico--bookmark:before {
		content: "\e951";
		}
		.ico--cog:before {
		content: "\e952";
		}
		.ico--key:before {
		content: "\e953";
		}
		.ico--zoom-in:before {
		content: "\e954";
		}
		.ico--zoom-out:before {
		content: "\e955";
		}
		.ico--shrink:before {
		content: "\e956";
		}
		.ico--printer:before {
		content: "\e957";
		}
		.ico--file-openoffice:before {
		content: "\e958";
		}
		.ico--user:before {
		content: "\e959";
		}
		.ico--file-excel:before {
		content: "\e95a";
		}
		.ico--file-word:before {
		content: "\e95b";
		}
		.ico--file-pdf:before {
		content: "\e95c";
		}
		.ico--file-picture:before {
		content: "\e95d";
		}
		.ico--file-blank:before {
		content: "\e95e";
		}
		.ico--folder-upload:before {
		content: "\e95f";
		}
		.ico--upload:before {
		content: "\e960";
		}
		.ico--cloud-upload:before {
		content: "\e961";
		}
		.ico--folder-download:before {
		content: "\e962";
		}
		.ico--download:before {
		content: "\e963";
		}
		.ico--cloud-download:before {
		content: "\e964";
		}
		.ico--alarm:before {
		content: "\e900";
		}
		.ico--calculator:before {
		content: "\e911";
		}
		.ico--facebook-full:before {
		content: "\e913";
		}
		.ico--feed:before {
		content: "\e927";
		}
		.ico--library:before {
		content: "\e929";
		}
		.ico--office:before {
		content: "\e92a";
		}
		.ico--attachment:before {
		content: "\e92b";
		}
		.ico--enlarge:before {
		content: "\e92c";
		}
		.ico--eye-off:before {
		content: "\e92e";
		}
		.ico--eye:before {
		content: "\e92f";
		}
		.ico--share:before {
		content: "\e931";
		}
		.ico--search:before {
		content: "\e939";
		}
		.ico--pencil:before {
		content: "\e93c";
		}
		.ico--lock-open:before {
		content: "\e947";
		}
		.ico--lock:before {
		content: "\e948";
		}
		.ico--equalizer:before {
		content: "\e949";
		}
		.ico--switch:before {
		content: "\e94b";
		}
		.ico--loop:before {
		content: "\e94c";
		}
		.ico--refresh:before {
		content: "\e94d";
		}
		.ico--bullhorn:before {
		content: "\e944";
		}
		.ico--bin:before {
		content: "\e945";
		}
		.ico--cross:before {
		content: "\e937";
		}
		.ico--checkbox-checked:before {
		content: "\e938";
		}
		.ico--globe:before {
		content: "\e93a";
		}
		.ico--wikipedia:before {
		content: "\e93b";
		}
		.ico--youtube:before {
		content: "\e936";
		}
		.ico--users:before {
		content: "\e934";
		}
		.ico--book:before {
		content: "\e935";
		}
		.ico--bubbles:before {
		content: "\e930";
		}
		.ico--map:before {
		content: "\e914";
		}
		.ico--compass:before {
		content: "\e915";
		}
		.ico--folder-open:before {
		content: "\e916";
		}
		.ico--folder:before {
		content: "\e917";
		}
		.ico--drawer:before {
		content: "\e918";
		}
		.ico--stop:before {
		content: "\e919";
		}
		.ico--github:before {
		content: "\e91a";
		}
		.ico--clock:before {
		content: "\e91b";
		}
		.ico--calendar:before {
		content: "\e91c";
		}
		.ico--flickr:before {
		content: "\e91d";
		}
		.ico--instagram:before {
		content: "\e91e";
		}
		.ico--twitter:before {
		content: "\e91f";
		}
		.ico--newspaper:before {
		content: "\e920";
		}
		.ico--cart:before {
		content: "\e921";
		}
		.ico--home:before {
		content: "\e922";
		}
		.ico--link:before {
		content: "\e912";
		}
		.ico--power:before {
		content: "\e90c";
		}
		.ico--rocket:before {
		content: "\e946";
		}
		.ico--location:before {
		content: "\e906";
		}
		.ico--phone:before {
		content: "\e907";
		}
		.ico--linkedin:before {
		content: "\e903";
		}
		.ico--facebook:before {
		content: "\e902";
		}
		.ico--envelop:before {
		content: "\e972";
		}
		.ico--file-text2:before {
		content: "\e974";
		}
		.ico--price-tag:before {
		content: "\e975";
		}
		.ico--price-tags:before {
		content: "\e976";
		}
		.ico--stats-dots:before {
		content: "\e99b";
		}
		.ico--bed:before {
		content: "\e969";
		}
		.ico--train:before {
		content: "\e96a";
		}
		.ico--bus:before {
		content: "\e96b";
		}
		.ico--wheelchair:before {
		content: "\e966";
		}
		.ico--thumbs-down:before {
		content: "\e93d";
		}
		.ico--thumbs-up:before {
		content: "\e93e";
		}
		.ico--anchor:before {
		content: "\e92d";
		}
		.ico--paw:before {
		content: "\e90b";
		}

source/css/atoms/list.pcss

+1 −1

Original line number	Diff line number	Diff line
		@@ -46,7 +46,7 @@

		.unordered-list--dense,
		.content-block ul {
		@apply row-gap-0;
		@apply gap-y-0;
		}

		.unordered-list--linked,

source/css/atoms/super-button.pcss

+1 −5

Original line number	Diff line number	Diff line
		.super-button {
		@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200;
		@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200 md:px-6;

		&:hover {
		@apply no-underline;
		}

		@screen md {
		@apply px-6;
		}
		}

		.super-button__body {

source/css/atoms/table.pcss

+17 −1

Original line number	Diff line number	Diff line
		@@ -12,6 +12,13 @@
		}
		}

		.table--light {
		th,
		thead td {
		@apply bg-transparent text-black;
		}
		}

		.table--striped,
		.content-block table {
		tr:nth-child(even) td {
		@@ -35,6 +42,15 @@
		th,
		thead td,
		td {
		@apply p-2;
		@apply px-2 py-1;
		}
		}


		.table--unxpadded {
		th,
		thead td,
		td {
		@apply px-0;
		}
		}

source/css/atoms/text-shadow.pcss

0 → 100644

+15 −0

Original line number	Diff line number	Diff line
		.text-shadow-xs {
		text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
		}
		.text-shadow-sm {
		text-shadow: 1px 1px .25rem rgba(0, 0, 0, 0.3)
		}
		.text-shadow {
		text-shadow: 1px 1px .25rem rgba(0, 0, 0, 0.3);
		}
		.text-shadow-md {
		text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.5);
		}
		.text-shadow-lg {
		text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.8);
		}

source/css/atoms/tooltip.pcss

0 → 100644

+262 −0

Original line number	Diff line number	Diff line
		.tooltip {
		--bg-opacity: 0.8 !important;
		z-index: 999;

		@apply inline-block relative pointer-events-none;

		&::before,
		&::after {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		opacity: 0.8;
		}

		&,
		&.tooltip--default {
		@apply text-xs py-2 px-4 rounded-none;
		}

		&--top,
		&.tooltip--top
		&.place-top {
		margin-top: -10px;

		&::before {
		border-top: 8px solid transparent;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		bottom: -8px;
		left: 50%;
		margin-left: -10px;
		}

		&::after {
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		bottom: -6px;
		left: 50%;
		margin-left: -8px;
		border-top-style: solid;
		border-top-width: 6px;
		}
		}

		&--bottom,
		&.tooltip--bottom,
		&.place-bottom {
		margin-top: 10px;

		&::before {
		border-bottom: 8px solid transparent;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		top: -8px;
		left: 50%;
		margin-left: -10px;
		}

		&::after {
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		top: -6px;
		left: 50%;
		margin-left: -8px;
		border-bottom-style: solid;
		border-bottom-width: 6px;
		}
		}

		&--left,
		&.tooltip--left,
		&.place-left {
		margin-left: -10px;
		margin-top: 0;

		&::before {
		border-left: 8px solid transparent;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		right: -8px;
		top: 50%;
		margin-top: -5px;
		}

		&::after {
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		right: -6px;
		top: 50%;
		margin-top: -4px;
		border-left-style: solid;
		border-left-width: 6px;
		}
		}

		&--right,
		&.tooltip--right,
		&.place-right {
		margin-left: 10px;
		margin-top: 0;

		&::before {
		border-right: 8px solid transparent;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		left: -8px;
		top: 50%;
		margin-top: -5px;
		}

		&::after {
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		left: -6px;
		top: 50%;
		margin-top: -4px;
		border-right-style: solid;
		border-right-width: 6px;
		}
		}

		&,
		&--default,
		&--dark,
		&.type-dark,
		&--black {
		@apply bg-black text-white;

		&.place-top::after,
		&.tooltip--top::after {
		border-top-color: theme("colors.black");
		}
		&.place-bottom::after,
		&.tooltip--bottom::after {
		border-bottom-color: theme("colors.black");
		}
		&.place-left::after,
		&.tooltip--left::after {
		border-left-color: theme("colors.black");
		}
		&.place-right::after,
		&.tooltip--right::after {
		border-right-color: theme("colors.black");
		}
		}

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

		&.place-top::after,
		&.tooltip--top::after {
		border-top-color: theme("colors.red.600");
		}
		&.place-bottom::after,
		&.tooltip--bottom::after {
		border-bottom-color: theme("colors.red.600");
		}
		&.place-left::after,
		&.tooltip--left::after {
		border-left-color: theme("colors.red.600");
		}
		&.place-right::after,
		&.tooltip--right::after {
		border-right-color: theme("colors.red.600");
		}
		}

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

		&.place-top::after,
		&.tooltip--top::after {
		border-top-color: theme("colors.yellow.400");
		}
		&.place-bottom::after,
		&.tooltip--bottom::after {
		border-bottom-color: theme("colors.yellow.400");
		}
		&.place-left::after,
		&.tooltip--left::after {
		border-left-color: theme("colors.yellow.400");
		}
		&.place-right::after,
		&.tooltip--right::after {
		border-right-color: theme("colors.yellow.400");
		}
		}

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

		&.place-top::after,
		&.tooltip--top::after {
		border-top-color: theme("colors.blue.300");
		}
		&.place-bottom::after,
		&.tooltip--bottom::after {
		border-bottom-color: theme("colors.blue.300");
		}
		&.place-left::after,
		&.tooltip--left::after {
		border-left-color: theme("colors.blue.300");
		}
		&.place-right::after,
		&.tooltip--right::after {
		border-right-color: theme("colors.blue.300");
		}
		}

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

		&.place-top::after,
		&.tooltip--top::after {
		border-top-color: theme("colors.grey.125");
		}
		&.place-bottom::after,
		&.tooltip--bottom::after {
		border-bottom-color: theme("colors.grey.125");
		}
		&.place-left::after,
		&.tooltip--left::after {
		border-left-color: theme("colors.grey.125");
		}
		&.place-right::after,
		&.tooltip--right::after {
		border-right-color: theme("colors.grey.125");
		}
		}

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

		&.place-top::after,
		&.tooltip--top::after {
		border-top-color: theme("colors.green.400");
		}
		&.place-bottom::after,
		&.tooltip--bottom::after {
		border-bottom-color: theme("colors.green.400");
		}
		&.place-left::after,
		&.tooltip--left::after {
		border-left-color: theme("colors.green.400");
		}
		&.place-right::after,
		&.tooltip--right::after {
		border-right-color: theme("colors.green.400");
		}
		}
		}

source/css/molecules/article-card.pcss

+3 −3

Original line number	Diff line number	Diff line
		@@ -21,15 +21,15 @@
		/* padding shall be kept in sync with general card */
		/* No pointer events to make full article cover clickable */
		@apply absolute left-0 bottom-0 p-4 pointer-events-none;

		}

		.article-card-sharing {
		/* Turn on pointer events to make sharer clickable */
		@apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
		@apply mb-4 lg:transition lg:duration-200 lg:opacity-0 lg:pointer-events-auto;
		}

		.article-card:hover .article-card-sharing {
		@apply opacity-100;
		@apply lg:opacity-100;
		}

		.article-card-meta {

source/css/molecules/banner.pcss

+1 −5

Original line number	Diff line number	Diff line
		.banner {
		@apply px-4 py-8 flex flex-wrap flex-col;

		@screen lg {
		@apply px-8;
		}
		@apply px-4 py-8 flex flex-wrap flex-col lg:px-8;
		}

		.banner__icon {

source/css/molecules/calendar.pcss

+1 −5

Original line number	Diff line number	Diff line
		@@ -14,11 +14,7 @@
		@apply h-full border-r border-grey-125 p-2 flex justify-center items-start;

		&:first-child {
		@apply border-l;

		@screen xl {
		@apply border-l-0;
		}
		@apply border-l xl:border-l-0;
		}

		&.calendar-table-row__col--norborder {

source/css/molecules/candidate-card.pcss

+3 −8

Original line number	Diff line number	Diff line
		@@ -33,7 +33,7 @@
		@apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;

		> div {
		@apply px-4 flex items-center;
		@apply px-4 flex items-center md:justify-center;

		&:not(:first-child) {
		@apply border-l border-grey-125;
		@@ -48,8 +48,6 @@
		}

		@screen md {
		@apply justify-center;

		&:first-child {
		@apply w-auto text-left;
		}
		@@ -66,12 +64,9 @@
		}

		.candidate-card__social {
		@apply p-4;
		grid-area: social;
		@apply p-4 md:text-center;

		@screen md {
		@apply text-center;
		}
		grid-area: social;
		}

		@screen sm {

source/css/molecules/candidate-table-row.pcss

+1 −1

Original line number	Diff line number	Diff line
		@@ -44,7 +44,7 @@
		}

		.candidate-table-row__affiliation {
		@apply flex items-center justify-start whitespace-no-wrap py-1 pl-6 pr-4;
		@apply flex items-center justify-start whitespace-nowrap py-1 pl-6 pr-4;
		grid-area: affiliation;
		}

source/css/molecules/chips.pcss

+22 −8

Original line number	Diff line number	Diff line
		@@ -4,8 +4,7 @@
		py-2 px-3
		text-xs
		font-bold leading-none tracking-normal
		cursor-pointer
		whitespace-no-wrap;
		whitespace-nowrap;
		}

		.chip--condensed {
		@@ -36,6 +35,9 @@
		.chip--green-300 {
		@apply bg-green-300 text-white;
		}
		.chip--green-400 {
		@apply bg-green-400 text-white;
		}
		.chip--orange-300 {
		@apply bg-orange-200 text-white;
		}
		@@ -46,6 +48,21 @@
		@apply bg-red-600 text-white;
		}

		.chip--hoveractive:hover {
		&.chip--black {
		@apply bg-grey-700;
		}
		&.chip--grey-700 {
		@apply bg-grey-500;
		}
		&.chip--grey-500 {
		@apply bg-grey-300;
		}
		&.chip--grey-125 {
		@apply bg-grey-100;
		}
		}

		.chip__icon {
		@apply self-center cursor-pointer;

		@@ -59,13 +76,8 @@
		.chip--select {
		@apply relative p-0 inline-flex items-center;

		&:hover,
		&:focus {
		@apply bg-opacity-50;
		}

		select {
		@apply w-full py-2 pl-3 z-10 cursor-pointer;
		@apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;

		appearance: none;
		background: none;
		@@ -81,6 +93,8 @@

		.chip__icon {
		@apply
		absolute
		right-0
		pl-2 pr-3
		cursor-pointer;
		}

source/css/molecules/content-block.pcss

+5 −1

Original line number	Diff line number	Diff line
		@@ -65,6 +65,10 @@
		@apply text-sm;
		}

		pre {
		line-height: 1;
		}

		/* Contact lines are quite frequent so these are blacklisted for anchor style specifically. */
		a:not(.contact-line):not(.content-block--nostyle) {
		@apply underline;

source/css/molecules/dropdown-button.pcss

0 → 100644

+19 −0

Original line number	Diff line number	Diff line
		.dropdown-button {
		@apply relative;
		}

		.dropdown-button__choices {
		@apply hidden absolute shadow-md z-10 bottom-0 right-0 transform translate-y-full;
		}

		.dropdown-button:hover .dropdown-button__choices {
		@apply block max-w-sm;
		}

		.dropdown-button__choice {
		@apply block no-underline text-left;

		a:hover {
		@apply no-underline;
		}
		}

source/css/molecules/dropdown.pcss

0 → 100644

+24 −0

Original line number	Diff line number	Diff line
		.dropdown {
		@apply relative inline-block;
		}

		.dropdown__content {
		@apply hidden absolute shadow-md z-10;
		}

		.dropdown:hover .dropdown__content {
		@apply block max-w-sm;
		}

		.dropdown__content-item {
		@apply block no-underline;

		a:hover {
		@apply no-underline;
		}
		}


		.dropdown--right .dropdown__content {
		@apply right-0;
		}

source/css/molecules/form-field.pcss

+17 −8

Original line number	Diff line number	Diff line
		@@ -14,24 +14,33 @@
		@apply absolute w-full h-full pointer-events-none;

		content: "";
		box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
		box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05);
		}

		&,
		&--row-items {
		/* Allow bypass defualt positioning */
		&:not(.form-field__wrapper--freeform) {
		.form-field__control + .form-field__control {
		@apply ml-4;
		}
		}

		&--col-items {
		}

		.form-field__wrapper--row-items {
		@apply flex-row;

		.form-field__control + .form-field__control {
		@apply ml-4 mt-0;
		}
		}

		.form-field__wrapper--col-items {
		@apply flex-col;

		.form-field__control + .form-field__control {
		@apply ml-0 mt-4;
		}
		}
		}

		.form-field__error,
		.form-field__help-text {

Source

Target

Files

Some changes are not shown.