feat(cf2021): all filters, pagination as chips

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

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

source/_patterns/03-templates/cf-tool.mustache

@@ -9,8 +9,8 @@
 
         <section>
           <div class="flex justify-between items-center mb-4">
-            <h2 class="head-alt-base">Příspěvky v rozpravě</h2>
-            <div class="flex items-center space-x-8">
+            <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>
@@ -19,8 +19,31 @@
                 </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>
 
-              {{> molecules-inline-pagination(classes: "text-xs") }}
+              <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>
 

source/css/molecules/chips.pcss

 .chip {
   @apply
-    flex inline-flex content-center
+    flex inline-flex items-center
     py-2 px-3
     text-xs
     font-bold leading-none tracking-normal
@@ -47,7 +47,7 @@
 }
 
 .chip__icon {
-  @apply self-center pl-2 pr-3 pt-1 cursor-pointer;
+  @apply self-center cursor-pointer;
 
   font-size: .7rem;
 }
@@ -65,7 +65,7 @@
   }
 
   select {
-    @apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;
+    @apply w-full py-2 pl-3 z-10 cursor-pointer;
 
     appearance: none;
     background: none;
@@ -81,7 +81,7 @@
 
   .chip__icon {
     @apply
-      absolute right-0
+      pl-2 pr-3
       cursor-pointer;
   }
 }