source/_patterns/01-molecules/15-navbar/navbar-menu.mustache

+<ul class="navbar-menu text-white">
+  <li class="navbar-menu__item">
+    <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
+  </li>
+  <li class="navbar-menu__item">
+    <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>
+      </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>
+  </li>
+  <li class="navbar-menu__item">
+    <a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
+  </li>
+</ul>

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

+<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--green-400") }}
+    {{> 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>

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

+<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/16-chips/chip-select.mustache

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

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

+<div class="chip {{ classes }}">
+  {{ cta }}
+</div>

source/_patterns/01-molecules/17-thumbs/thumbs-inactive.mustache

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

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

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

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

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

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

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

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

+{{> 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

@@ -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.mustache → source/_patterns/02-organisms/01-navbar/navbar.mustache

@@ -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="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
+                  <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="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
+                  <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="[[&quot;Volební rozcestník&quot;, &quot;{{ link.templates-elections }}&quot;]]">
+                  <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

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

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

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

@@ -14,25 +14,10 @@
               <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">
-            <ul class="navbar-menu text-white">
-              <li class="navbar-menu__item">
-                <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é">
-                  <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>
-              </li>
-              <li class="navbar-menu__item">
-                <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
-              </li>
-              <li class="navbar-menu__item">
-                <a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
-              </li>
-            </ul>
+          <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>
       </div>