accordeon molecule

source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache

@@ -23,5 +23,22 @@
     <div>
       {{> atoms-basic-button(classes: "text-lg btn--condensed" )}}
     </div>
+    <div>
+      {{> atoms-basic-button(classes: "text-xl btn--condensed", bodyClasses: "py-4 leading-5" )}}
+    </div>
+  </div>
+  <div class="space-y-2">
+    <div>
+      {{> atoms-icon-button(classes: "text-sm btn--condensed" )}}
+    </div>
+    <div>
+      {{> atoms-icon-button(classes: "text-base btn--condensed" )}}
+    </div>
+    <div>
+      {{> atoms-icon-button(classes: "text-lg btn--condensed" )}}
+    </div>
+    <div>
+      {{> atoms-icon-button(icon: "ico--chevron-right", classes: "text-lg", bodyClasses: "py-8 leading-4", iconClasses: "px-8 bg-grey-800 border-grey-500" )}}
+    </div>
   </div>
 </div>

source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache

+<div class="accordeon-row">
+	<div class="accordeon-row-head" onclick="if(this.parentElement.classList.contains('accordeon-row--open')) this.parentElement.classList.remove('accordeon-row--open'); else this.parentElement.classList.add('accordeon-row--open');">
+		<h3 class="accordeon-row-heading head-alt-xs">{{ headline.short }}</h3>
+		<i class="ico--chevron-down"></i>
+	</div>
+	<div class="accordeon-row-body">
+		<p>{{ description }}</p>
+	</div>
+</div>
\ No newline at end of file

source/_patterns/01-molecules/22-accordeon/accordeon.mustache

+<div class="space-y-1">
+	{{> atoms-accordeon-row }}
+	{{> atoms-accordeon-row }}
+</div>
\ No newline at end of file

source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache

@@ -3,10 +3,10 @@
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
-  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper candidate-card-list__item-wrapper--last") }}
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
   {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
-  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper  candidate-card-list__item-wrapper--last") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
 </div>

source/_patterns/03-templates/homepage-pirati-stan.mustache

+{{> organisms-header }}
+{{> organisms-hero-pirati-stan }}
+
+<div class="container container--default lg:pb-24">
+  <section>
+    <h1 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 mt-10 md:mt-24">Aktuality</h1>
+    {{> organisms-article-card-list-pirati-stan(onlyThree: true) }}
+
+    <nav class="text-center">
+      {{> atoms-icon-button(cta: "Další články", icon: "ico--chevron-right", classes: "text-xl pt-8") }}
+    </nav>
+  </section>
+
+  <section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+    {{> molecules-banner }}
+  </section>
+
+  <section>
+    <h1 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 mt-10 md:mt-24">Výpis kandidátů</h1>
+    {{> organisms-candidate-card-list-pirati-stan(onlyEight: true) }}
+
+    <nav class="text-center">
+      {{> atoms-icon-button(cta: "Zobrazit výpis", icon: "ico--chevron-right", classes: "text-lg my-8 mx-4", bodyClasses: "py-8 leading-4", iconClasses: "px-8 bg-grey-800 border-grey-500" )}}
+      {{> atoms-icon-button(cta: "Filtrovat pomocí mapy", icon: "ico--chevron-right", classes: "text-lg my-8 mx-4", bodyClasses: "sm:whitespace-nowrap py-8 leading-4", iconClasses: "px-8 bg-grey-800 border-grey-500" )}}
+    </nav>
+  </section>
+
+  <section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+    {{> organisms-countdown }}
+  </section>
+
+  <div class="flex flex-col lg:flex-row lg:space-x-8">
+    {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "ico--facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+    {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "ico--bubbles", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+  </div>
+</div>
+
+{{> organisms-footer }}

source/css/atoms/collapsibles.pcss

+.accordeon-row{
+	@apply bg-grey-125;
+}
+.accordeon-row-head{
+	@apply relative p-8 cursor-pointer;
+
+	.accordeon-row-heading{
+		padding-top: 1px; /*font vertical center fix*/
+	}
+	i{
+		@apply absolute top-1/2 right-8 transform -translate-y-2/4 transition transition-transform duration-500;
+	}
+}
+.accordeon-row-body{
+	@apply leading-loose overflow-hidden max-h-0;
+	
+	-moz-transition: max-height 0.5s ease;
+	-webkit-transition: max-height 0.5s ease;
+	-o-transition: max-height 0.5s ease;
+	transition: max-height 0.5s ease;
+	p{
+	  	@apply px-8 pt-8 pb-14;
+	}
+}
+
+.accordeon-row--open{
+	@apply bg-black text-white;
+	i{
+		@apply absolute top-1/2 right-8 transform -translate-y-2/4 rotate-90;
+	}
+	.accordeon-row-body{
+		max-height: 1000px;
+	}
+}
\ No newline at end of file