Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • clickable-select-chevron
  • feat/new-image-formats
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-12
  • 2.0.0-alpha-13
  • 2.0.0-alpha-14
  • 2.0.0-alpha-15
  • 2.0.0-alpha-16
  • 2.0.0-alpha-17
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
  • 2.0.1
  • 2.0.2
  • 2.0.3
  • 2.0.4
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.10.0
  • 2.11.0
  • 2.12.1
  • 2.13.0
  • 2.14.0
  • 2.15.0
  • 2.16.0
  • 2.16.1
  • 2.17.0
  • 2.18.0
  • 2.19.0
  • 2.2.0
  • 2.2.1
  • 2.20.0
  • 2.3.0
  • 2.3.1
  • 2.3.2
  • 2.3.3
  • 2.3.4
  • 2.4.0
  • 2.5.0
  • 2.5.1
  • 2.5.2
  • 2.6.0
  • 2.7.0
  • 2.7.1
  • 2.8.0
  • 2.9.0
  • 2.9.1
74 results

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
29 results
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1405 additions and 415 deletions
source/_patterns/02-organisms/08-event-feed/event-feed.mustache 0 → 100644
View file @ aac6d1d3
<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 &raquo;</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
View file @ aac6d1d3
<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
View file @ aac6d1d3
<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
View file @ aac6d1d3
<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
View file @ aac6d1d3
<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
View file @ aac6d1d3
{{> 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 deleted 100644 → 0
View file @ e4f37e41
{{> 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 &raquo;</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
View file @ aac6d1d3
{{> 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
View file @ aac6d1d3
This diff is collapsed.
source/_patterns/03-templates/cf2021/user.mustache 0 → 100644
View file @ aac6d1d3
{{> 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
View file @ aac6d1d3
.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
View file @ aac6d1d3
/* 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
View file @ aac6d1d3
......@@ -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
View file @ aac6d1d3
@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
View file @ aac6d1d3
......@@ -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
View file @ aac6d1d3
......@@ -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
View file @ aac6d1d3
.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
View file @ aac6d1d3
: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
View file @ aac6d1d3
......@@ -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
View file @ aac6d1d3
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;
}
}

Pirátský GitLab - Home of the CopyLeft