diff --git a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
index b07e5c04905c3f531accd62849d3cac2233fe87f..ca2a6b717fa6dd222be697fc8877fdf484831b3a 100644
--- a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+++ b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
@@ -11,6 +11,7 @@
{{> 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-icon-button(classes: "btn--black") }}
@@ -24,5 +25,6 @@
{{> 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>
diff --git a/source/_patterns/01-molecules/16-chips/chip-colors.mustache b/source/_patterns/01-molecules/16-chips/chip-colors.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..7e86402b7af22b12ed4d5ff5b06b07635be62c8d
--- /dev/null
+++ b/source/_patterns/01-molecules/16-chips/chip-colors.mustache
@@ -0,0 +1,16 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> molecules-chip(classes: "chip--black") }}
+ {{> molecules-chip(classes: "chip--grey-700") }}
+ {{> molecules-chip(classes: "chip--grey-500") }}
+ {{> molecules-chip(classes: "chip--grey-125") }}
+ {{> molecules-chip(classes: "chip--blue-300") }}
+ {{> molecules-chip(classes: "chip--cyan-200") }}
+ {{> molecules-chip(classes: "chip--cyan-500") }}
+ {{> molecules-chip(classes: "chip--green-300") }}
+ {{> molecules-chip(classes: "chip--orange-300") }}
+ {{> molecules-chip(classes: "chip--violet-400") }}
+ {{> molecules-chip(classes: "chip--violet-500") }}
+ {{> molecules-chip(classes: "chip--red-600") }}
+ </div>
+</div>
diff --git a/source/_patterns/01-molecules/16-chips/chip-select.mustache b/source/_patterns/01-molecules/16-chips/chip-select.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..bdf4dea8c999339515c0f4022c5719a71885c34b
--- /dev/null
+++ b/source/_patterns/01-molecules/16-chips/chip-select.mustache
@@ -0,0 +1,10 @@
+<span class="chip chip--black chip--select">
+ <select>
+ <option value="">Select input choice</option>
+ <option value="">choice</option>
+ <option value="">choice</option>
+ <option value="">choice</option>
+ <option value="">choice</option>
+ </select>
+ <span class="chip__icon ico--chevron-down"></span>
+</span>
diff --git a/source/_patterns/01-molecules/16-chips/chip.mustache b/source/_patterns/01-molecules/16-chips/chip.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..7c1e0840961baa23d820d383d1e5e12974f198d3
--- /dev/null
+++ b/source/_patterns/01-molecules/16-chips/chip.mustache
@@ -0,0 +1,3 @@
+<div class="chip {{ classes }}">
+ {{ cta }}
+</div>
diff --git a/source/_patterns/03-templates/cf-tool.mustache b/source/_patterns/03-templates/cf-tool.mustache
index 710251bd6fc029f76fefdf04b9f79ee1347f50af..a47b1ceb544b956540849d3a5cfee8bfcf88300f 100644
--- a/source/_patterns/03-templates/cf-tool.mustache
+++ b/source/_patterns/03-templates/cf-tool.mustache
@@ -10,7 +10,18 @@
<section>
<div class="flex justify-between items-center mb-4">
<h2 class="head-alt-base">Příspěvky v rozpravě</h2>
- {{> molecules-inline-pagination(classes: "text-xs") }}
+ <div class="flex items-center space-x-8">
+ <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>
+
+ {{> molecules-inline-pagination(classes: "text-xs") }}
+ </div>
</div>
<div class="space-y-6">
@@ -19,12 +30,13 @@
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
- <div>
+ <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-3 text-sm flex items-center">
+ <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>
@@ -44,12 +56,13 @@
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
- <div>
+ <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-3 text-sm flex items-center">
+ <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>
@@ -69,12 +82,13 @@
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
- <div>
+ <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-3 text-sm flex items-center">
+ <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>
@@ -89,17 +103,19 @@
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-2 -ml-2">
+ <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>
+ <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-3 text-sm flex items-center">
+ <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>
@@ -114,17 +130,19 @@
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-2 -ml-2">
+ <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>
+ <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-3 text-sm flex items-center">
+ <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>
@@ -144,8 +162,8 @@
<div class="my-8 space-y-4">
{{> molecules-textarea-field(nolabel: true) }}
<div class="space-x-4">
- {{> atoms-basic-button(classes: "text-base", cta: "Přidat příspěvek") }}
- <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat také <a href="#" class="underline">Markdown</a>.</span>
+ {{> 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>
@@ -157,58 +175,59 @@
<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>
- <div class="bg-orange-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Zamítnutý návrh postupu</div>
+ {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
- {{ excerpt.short }}
+ <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>
- <div class="bg-green-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Schválený návrh postupu</div>
+ {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
- {{ excerpt.short }}
+ <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>
- <div class="bg-blue-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Přijatelný návrh postupu</div>
+ {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
- {{ excerpt.short }}
+ <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>
- <div class="bg-red-600 text-white px-1 py-1 font-bold text-xs rounded-sm">Rozhodující hlasování</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>
- {{ excerpt.short }}
+ <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>
- <div class="bg-cyan-500 text-white px-1 py-1 font-bold text-xs rounded-sm">Oznámení předsedajícího</div>
+ {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
</div>
- {{ excerpt.short }}
+ <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>
- <div class="bg-orange-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Zamítnutý návrh postupu</div>
+ {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
- {{ excerpt.short }}
+ <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>
- <div class="bg-green-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Schválený návrh postupu</div>
+ {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
- {{ excerpt.short }}
+ <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>
- <div class="bg-blue-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Přijatelný návrh postupu</div>
+ {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
- {{ excerpt.short }}
+ <span class="leading-tight">{{ excerpt.short }}</span>
</div>
</div>
</div>
diff --git a/source/css/molecules/chips.pcss b/source/css/molecules/chips.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..8aab72796db359677b85ae80b4082719dc2d6943
--- /dev/null
+++ b/source/css/molecules/chips.pcss
@@ -0,0 +1,87 @@
+.chip {
+ @apply
+ flex inline-flex content-center
+ py-2 px-3
+ text-xs
+ font-bold leading-none tracking-normal
+ cursor-pointer
+ whitespace-no-wrap;
+}
+
+.chip--condensed {
+ @apply p-1;
+}
+
+.chip--black {
+ @apply bg-black text-white;
+}
+.chip--grey-700 {
+ @apply bg-grey-700 text-white;
+}
+.chip--grey-500 {
+ @apply bg-grey-500 text-white;
+}
+.chip--grey-125 {
+ @apply bg-grey-125 text-black;
+}
+.chip--blue-300 {
+ @apply bg-blue-300 text-white;
+}
+.chip--cyan-200 {
+ @apply bg-cyan-200 text-white;
+}
+.chip--cyan-500 {
+ @apply bg-cyan-500 text-white;
+}
+.chip--green-300 {
+ @apply bg-green-300 text-white;
+}
+.chip--orange-300 {
+ @apply bg-orange-200 text-white;
+}
+.chip--violet-400 {
+ @apply bg-violet-400 text-white;
+}
+.chip--red-600 {
+ @apply bg-red-600 text-white;
+}
+
+.chip__icon {
+ @apply self-center pl-2 pr-3 pt-1 cursor-pointer;
+
+ font-size: .7rem;
+}
+
+.chip--lg {
+ @apply py-2 pl-3;
+}
+
+.chip--select {
+ @apply relative p-0 inline-flex items-center;
+
+ &:hover,
+ &:focus {
+ @apply bg-opacity-50;
+ }
+
+ select {
+ @apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;
+
+ appearance: none;
+ background: none;
+ }
+
+ &.chip--lg {
+ @apply p-0;
+
+ select {
+ @apply py-3 pl-4 pr-8;
+ }
+ }
+
+ .chip__icon {
+ @apply
+ absolute right-0
+ cursor-pointer;
+ }
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 132c3738c48ddde9d165fbb107a6be73e10f5a16..de712b108df039bc11d992740d32421bb64194a5 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -41,6 +41,7 @@
@import "./molecules/calendar.pcss";
@import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-table-row.pcss";
+@import "./molecules/chips.pcss";
@import "./molecules/content-block.pcss";
@import "./molecules/flip-clock.pcss";
@import "./molecules/form-field.pcss";
diff --git a/tailwind.config.js b/tailwind.config.js
index 4c455350e6b4dbb1b568c6262e3a28b89db5ba4e..bb45559e610ae22c0c9463a34a42c986ba61c640 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -253,6 +253,10 @@ module.exports = {
text: 'white',
background: 'violet.500',
},
+ 'red-600': {
+ text: 'white',
+ background: 'red.600',
+ },
'brands-facebook': {
text: 'white',
background: 'brands.facebook',