diff --git a/source/_patterns/00-atoms/18-collapsibles/accordeon-row-fadeout.mustache b/source/_patterns/00-atoms/18-collapsibles/accordeon-row-fadeout.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..8cbc250a0db6ff05bc9764a21e1b30f84601b560
--- /dev/null
+++ b/source/_patterns/00-atoms/18-collapsibles/accordeon-row-fadeout.mustache
@@ -0,0 +1,37 @@
+<div class="accordeon-row accordeon-row--fadeout h-full">
+ <div class="accordeon-row-head" v-on:click="toggleElement" 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 mb-0">{{^ heading }}{{ headline.short }}{{/ heading }}{{ heading }}</h3>
+ <i class="ico--chevron-down"></i>
+ </div>
+ <div class="accordeon-row-body accordeon-row-body--fadeout" style="height:220px">
+ <div>
+ <p>{{ description }}</p>
+ <p>{{ description }}</p>
+ <p>{{ description }}</p>
+ <p>{{ description }}</p>
+ </div>
+ </div>
+ <button class="btn btn--icon absolute bottom-8 left-8" onclick="this.parentElement.classList.add('accordeon-row--open');">
+ <div class="btn__body-wrap">
+ <div class="btn__body bg-acidgreen -bottom-20 text-black py-4">Zobrazit více</div>
+ <div class="btn__icon bg-black">
+ <i class="ico--chevron-right"></i>
+ </div>
+ </div>
+ </button>
+</div>
+<script>
+/*should run once on any page accordeon rows with fadeouts are present*/
+document.addEventListener("DOMContentLoaded", setMaxHeightsFadeouts);
+window.addEventListener('resize', setMaxHeightsFadeouts);
+function setMaxHeightsFadeouts(){
+ // set height for css transition
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--fadeout');
+
+ if(accordeonRowBodies !== null) {
+ for (var i = 0; i < accordeonRowBodies.length; i++) {
+ accordeonRowBodies[i].style.maxHeight=(parseInt(accordeonRowBodies[i].scrollHeight) + 32) + "px";
+ };/*plus padding*/
+ }
+}
+</script>
diff --git a/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache b/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache
index f6dec9a6632d9903e5cb23a9574114ba00fbb370..f12ab9c2b1fc15bff90bb4e3a5b5538716bf1a99 100644
--- a/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache
+++ b/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache
@@ -3,7 +3,7 @@
<h3 class="accordeon-row-heading head-alt-xs">{{ headline.short }}</h3>
<i class="ico--chevron-down"></i>
</div>
- <div class="accordeon-row-body">
+ <div class="accordeon-row-body accordeon-row-body--classic">
<div>
<p>{{ description }}</p>
</div>
diff --git a/source/_patterns/01-molecules/22-accordeon/accordeon.mustache b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
index 971059bb180a3696d38167a3384cec8eebfb6207..f5415bb10e27b5e14f2e2eb20d3eb81398f0709f 100644
--- a/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
+++ b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
@@ -5,7 +5,7 @@
<h3 class="accordeon-row-heading head-alt-xs">{{ headline.short }}</h3>
<i class="ico--chevron-down"></i>
</div>
- <div class="accordeon-row-body">
+ <div class="accordeon-row-body accordeon-row-body--classic">
<div>
<p>Some <b>rich text</b> description. {{ description }} Some <a href="#">rich text</a> description. </p>
</div>
@@ -19,7 +19,7 @@ document.addEventListener("DOMContentLoaded", setMaxHeights);
window.addEventListener('resize', setMaxHeights);
function setMaxHeights(){
// set height for css transition
- var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--classic');
if(accordeonRowBodies !== null) {
for (var i = 0; i < accordeonRowBodies.length; i++) {
diff --git a/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache b/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
index e0c23fe58c140517b6038eaf3e597b595360bd27..ecc88093818cc5e18c2bd959abd463d3ed95f8d7 100644
--- a/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
+++ b/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
@@ -4,7 +4,7 @@
<h2 class="head-alt-sm md:head-alt-md mb-9">Problém</h2>
<p class="text-base mb-8">{{> atoms-paragraph-with-sources }}</p>
<div id="proc-je-to-problem">
- {{> atoms-accordeon-row-preview }}
+ {{> atoms-accordeon-row-fadeout }}
</div>
</div>
<div id="nase-vize" class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
diff --git a/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache b/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
index 3ad76e31d067ddd7e8c58a7744feed4a05ad6764..146e5979de6c3b421b8e6159c86d882c63d6efd2 100644
--- a/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
+++ b/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
@@ -119,20 +119,3 @@
</div>
{{> organisms-footer-pirati-stan }}
-<script>
-/*copied from molecules/accordeon-preview.mustache.*/
-/*should run once on any page accordeon rows with previews are present*/
-document.addEventListener("DOMContentLoaded", setMaxHeightsPreviews);
-window.addEventListener('resize', setMaxHeightsPreviews);
-function setMaxHeightsPreviews(){
- // set height for css transition
- var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--preview');
-
- if(accordeonRowBodies !== null) {
- for (var i = 0; i < accordeonRowBodies.length; i++) {
- accordeonRowBodies[i].style.maxHeight=accordeonRowBodies[i].getElementsByClassName("clampedcontent")[0]
-.scrollHeight + "px";
- };
- }
-}
-</script>
diff --git a/source/css/atoms/collapsibles.pcss b/source/css/atoms/collapsibles.pcss
index 0e60b225c5bee798448f763f72b4729a86e94088..c04c30723a2604ba6b59b1521c5b4019e9f20196 100644
--- a/source/css/atoms/collapsibles.pcss
+++ b/source/css/atoms/collapsibles.pcss
@@ -2,7 +2,8 @@
@apply bg-grey-125;
}
-.accordeon-row.accordeon-row--preview.accordeon-row--open{
+.accordeon-row.accordeon-row--preview.accordeon-row--open,
+.accordeon-row.accordeon-row--fadeout.accordeon-row--open{
@apply bg-black;
}
.accordeon-row-head{
@@ -16,7 +17,8 @@
@apply absolute top-1/2 right-8 transform -translate-y-2/4 transition transition-transform duration-500;
}
}
-.accordeon-row--preview .accordeon-row-head{
+.accordeon-row--preview .accordeon-row-head,
+.accordeon-row--fadeout .accordeon-row-head{
@apply pb-4;
i{
@apply translate-y-0;
@@ -41,6 +43,13 @@
}
}
}
+.accordeon-row.accordeon-row--fadeout{
+ .accordeon-row-body{
+ &>div{
+ @apply py-0;
+ }
+ }
+}
.accordeon-row--open{
@apply bg-black text-white;
@@ -51,7 +60,7 @@
max-height: 2000px; /* max-height set by js, css fallback to high number */
}
}
-.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview){
+.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview):not(.accordeon-row--fadeout){
.accordeon-row-body{
max-height: 0px!important
}
@@ -61,6 +70,38 @@
max-height: 80px!important;
}
}
+
+.accordeon-row.accordeon-row--fadeout.accordeon-row--open{
+ .btn{
+ @apply hidden;
+ }
+ .accordeon-row-body{
+ height: auto!important;
+
+ div{
+ @apply pb-8;
+ }
+ }
+}
+.accordeon-row.accordeon-row--fadeout:not(.accordeon-row--open){
+ @apply relative;
+
+ .accordeon-row-body{
+ max-height: 220px!important;
+ @apply overflow-hidden;
+
+ &::after {
+ content: "";
+ background-image: linear-gradient(to top, #fff 4rem, rgba(255, 255, 255, 0) 220px);
+ @apply absolute bottom-0 left-0 w-full;
+ height: inherit;
+ }
+ }
+ .btn{
+ @apply block;
+ }
+
+}
.container-collapsible{
/*can be applied to even higher parents. Hides floating nav if inside it */
&:not(.container-collapsible-open){
@@ -68,7 +109,7 @@
@apply overflow-hidden;
&::after {
content: "";
- background-image: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 20rem);
+ background-image: linear-gradient(to top, #fff 4.5rem, rgba(255, 255, 255, 0) 20rem);
@apply absolute bottom-0 left-0 w-full;
height: inherit;
}