Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reordering words alphabetically + addiong global dynamic accordeon classes

Browse Source
This commit is contained in:
Antoine M 2023-12-13 16:35:33 +01:00
parent 033257bae8
commit fa02598390
15 changed files with 74 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
blocks/vocabulaire-summary/build/block.json
View File

@ -16,7 +16,6 @@
},
"textdomain": "homegrade-blocks",
"editorScript": "file:./index.js",
"viewScript": "file:./frontend.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",

1
blocks/vocabulaire-summary/build/frontend.asset.php
View File

@ -1 +0,0 @@
<?php return array('dependencies' => array(), 'version' => '2d7b588bd723edf3035b');

51
blocks/vocabulaire-summary/build/frontend.js
View File

@ -1,51 +0,0 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*************************!*\
!*** ./src/frontend.js ***!
\*************************/
window.addEventListener("DOMContentLoaded", event => {
// GETTING ELEMENTS FROM THE DOM
const vocabulaireSummary = document.querySelector(".homegrade-blocks-vocabulaire-summary");
const wordsDetails = vocabulaireSummary.querySelectorAll("details");
function openAccordion(wordDetail) {
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
let contentDefinitionParagraph = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content");
wordDetail.setAttribute("open", "true");
wordDetail.setAttribute("is_opening", "");
contentDefinitionWrapper.style.height = contentDefinitionParagraph.offsetHeight + "px";
// remove is opening after css transition
wordDetail.addEventListener("transitionend", () => {
wordDetail.removeAttribute("is_opening");
});
}
function closeAccordion(wordDetail) {
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
contentDefinitionWrapper.style.height = "0px";
setTimeout(() => {
wordDetail.removeAttribute("open");
}, 300);
}
// HANDLING CLICK
function toggleActive(wordDetail) {
let isOpen = wordDetail.getAttribute("open");
let isOpening = wordDetail.getAttribute("is_opening");
if (isOpen == null && isOpening == null) {
openAccordion(wordDetail);
}
if (isOpen == "true") {
closeAccordion(wordDetail);
}
}
// HANDLING CLICK
Array.from(wordsDetails).forEach(wordDetail => {
wordDetail.addEventListener("click", event => {
event.preventDefault();
toggleActive(wordDetail);
});
});
});
/******/ })()
;
//# sourceMappingURL=frontend.js.map

1
blocks/vocabulaire-summary/build/frontend.js.map
View File

@ -1 +0,0 @@
{"version":3,"file":"frontend.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtD;EACA,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAChD,uCACD,CAAC;EACD,MAAMC,YAAY,GAAGH,kBAAkB,CAACI,gBAAgB,CAAC,SAAS,CAAC;EAEnE,SAASC,aAAaA,CAACC,UAAU,EAAE;IAClC,IAAIC,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IACD,IAAIM,0BAA0B,GAAGF,UAAU,CAACJ,aAAa,CACxD,gDACD,CAAC;IACDI,UAAU,CAACG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;IACvCH,UAAU,CAACG,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;IAEzCF,wBAAwB,CAACG,KAAK,CAACC,MAAM,GACpCH,0BAA0B,CAACI,YAAY,GAAG,IAAI;IAC/C;;IAEAN,UAAU,CAACR,gBAAgB,CAAC,eAAe,EAAE,MAAM;MAClDQ,UAAU,CAACO,eAAe,CAAC,YAAY,CAAC;IACzC,CAAC,CAAC;EACH;EACA,SAASC,cAAcA,CAACR,UAAU,EAAE;IACnC,IAAIC,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IAEDK,wBAAwB,CAACG,KAAK,CAACC,MAAM,GAAG,KAAK;IAE7CI,UAAU,CAAC,MAAM;MAChBT,UAAU,CAACO,eAAe,CAAC,MAAM,CAAC;IACnC,CAAC,EAAE,GAAG,CAAC;EACR;EACA;EACA,SAASG,YAAYA,CAACV,UAAU,EAAE;IACjC,IAAIW,MAAM,GAAGX,UAAU,CAACY,YAAY,CAAC,MAAM,CAAC;IAC5C,IAAIC,SAAS,GAAGb,UAAU,CAACY,YAAY,CAAC,YAAY,CAAC;IAErD,IAAID,MAAM,IAAI,IAAI,IAAIE,SAAS,IAAI,IAAI,EAAE;MACxCd,aAAa,CAACC,UAAU,CAAC;IAC1B;IACA,IAAIW,MAAM,IAAI,MAAM,EAAE;MACrBH,cAAc,CAACR,UAAU,CAAC;IAC3B;EACD;;EAEA;EACAc,KAAK,CAACC,IAAI,CAAClB,YAAY,CAAC,CAACmB,OAAO,CAAEhB,UAAU,IAAK;IAChDA,UAAU,CAACR,gBAAgB,CAAC,OAAO,EAAGC,KAAK,IAAK;MAC/CA,KAAK,CAACwB,cAAc,CAAC,CAAC;MACtBP,YAAY,CAACV,UAAU,CAAC;IACzB,CAAC,CAAC;EACH,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://vocabulaire-summary/./src/frontend.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\t// GETTING ELEMENTS FROM THE DOM\r\n\tconst vocabulaireSummary = document.querySelector(\r\n\t\t\".homegrade-blocks-vocabulaire-summary\"\r\n\t);\r\n\tconst wordsDetails = vocabulaireSummary.querySelectorAll(\"details\");\r\n\r\n\tfunction openAccordion(wordDetail) {\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\t\tlet contentDefinitionParagraph = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content\"\r\n\t\t);\r\n\t\twordDetail.setAttribute(\"open\", \"true\");\r\n\t\twordDetail.setAttribute(\"is_opening\", \"\");\r\n\r\n\t\tcontentDefinitionWrapper.style.height =\r\n\t\t\tcontentDefinitionParagraph.offsetHeight + \"px\";\r\n\t\t// remove is opening after css transition\r\n\r\n\t\twordDetail.addEventListener(\"transitionend\", () => {\r\n\t\t\twordDetail.removeAttribute(\"is_opening\");\r\n\t\t});\r\n\t}\r\n\tfunction closeAccordion(wordDetail) {\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\r\n\t\tcontentDefinitionWrapper.style.height = \"0px\";\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\twordDetail.removeAttribute(\"open\");\r\n\t\t}, 300);\r\n\t}\r\n\t// HANDLING CLICK\r\n\tfunction toggleActive(wordDetail) {\r\n\t\tlet isOpen = wordDetail.getAttribute(\"open\");\r\n\t\tlet isOpening = wordDetail.getAttribute(\"is_opening\");\r\n\r\n\t\tif (isOpen == null && isOpening == null) {\r\n\t\t\topenAccordion(wordDetail);\r\n\t\t}\r\n\t\tif (isOpen == \"true\") {\r\n\t\t\tcloseAccordion(wordDetail);\r\n\t\t}\r\n\t}\r\n\r\n\t// HANDLING CLICK\r\n\tArray.from(wordsDetails).forEach((wordDetail) => {\r\n\t\twordDetail.addEventListener(\"click\", (event) => {\r\n\t\t\tevent.preventDefault();\r\n\t\t\ttoggleActive(wordDetail);\r\n\t\t});\r\n\t});\r\n});\r\n"],"names":["window","addEventListener","event","vocabulaireSummary","document","querySelector","wordsDetails","querySelectorAll","openAccordion","wordDetail","contentDefinitionWrapper","contentDefinitionParagraph","setAttribute","style","height","offsetHeight","removeAttribute","closeAccordion","setTimeout","toggleActive","isOpen","getAttribute","isOpening","Array","from","forEach","preventDefault"],"sourceRoot":""}

2
blocks/vocabulaire-summary/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '4d48acb9717b060f5b98');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '7dbd2ffcc4b8c84acf7f');

8
blocks/vocabulaire-summary/build/index.js
View File

@ -205,10 +205,12 @@ function Edit({
className: "open-close-cta",
alt: ""
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-vocabulaire-summary__content-wrapper"
className: "homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
class: " homegrade-dynamic-accordeon__content"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "homegrade-blocks-vocabulaire-summary__content"
}, elem.tooltipDefinition)))));
}, elem.tooltipDefinition))))));
}
/***/ }),
@ -336,7 +338,7 @@ module.exports = window["wp"]["i18n"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":{"foreground":"#DF1E1E","src":"testimonial"},"description":"Pour afficher tout le vocabulaire contenu dans la fiche","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","viewScript":"file:./frontend.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"tooltipWords":{"type":"array","default":[]}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":{"foreground":"#DF1E1E","src":"testimonial"},"description":"Pour afficher tout le vocabulaire contenu dans la fiche","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"tooltipWords":{"type":"array","default":[]}}}');
/***/ })

2
blocks/vocabulaire-summary/build/index.js.map
View File

File diff suppressed because one or more lines are too long

12
blocks/vocabulaire-summary/build/render.php
View File

@ -21,17 +21,19 @@ $thematique = get_the_terms($post->ID, 'thematiques')[0];
</h2>
<?php foreach ($tooltipWords as $word) : ?>
<details class="question">
<details class="question homegrade-dynamic-accordeon">
<summary>
<?php echo $word['tooltipText']; ?>
<div class="open-close-icon">
<img src="<?php echo plugins_url('/', dirname(__FILE__)) . 'src/img/chevron_down.svg' ?>" class="open-close-cta" alt="" />
</div>
</summary>
<div class="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p class="homegrade-blocks-vocabulaire-summary__content">
<?php echo $word['tooltipDefinition']; ?>
</p>
<div class="homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
<div class=" homegrade-dynamic-accordeon__content">
<p class="homegrade-blocks-vocabulaire-summary__content">
<?php echo $word['tooltipDefinition']; ?>
</p>
</div>
</div>
</details>
<?php endforeach; ?>

53
blocks/vocabulaire-summary/build/style-index.css
View File

@ -1,57 +1,4 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-vocabulaire-summary {
padding: 20px;
}
.homegrade-blocks-vocabulaire-summary details {
cursor: pointer;
padding: 20px;
background-color: white;
}
.homegrade-blocks-vocabulaire-summary details[open] summary .open-close-icon {
transform: translate(0, -50%) rotate(180deg);
}
.homegrade-blocks-vocabulaire-summary summary {
cursor: pointer;
position: relative;
margin: 0;
font-weight: bold;
}
.homegrade-blocks-vocabulaire-summary summary::marker {
content: none;
}
.homegrade-blocks-vocabulaire-summary summary .open-close-icon {
transition: transform 0.3s ease-in-out;
right: 20px;
top: 50%;
transform: translate(0, -50%);
position: absolute;
display: flex;
border: 2px solid black;
justify-content: center;
align-items: center;
border-radius: 50%;
height: 26px;
width: 26px;
}
.homegrade-blocks-vocabulaire-summary__title {
margin: 0;
padding-bottom: 20px;
}
.homegrade-blocks-vocabulaire-summary__content {
padding-top: 30px;
}
.homegrade-blocks-vocabulaire-summary__content-wrapper {
overflow: hidden;
height: 0;
transition: height 0.3s ease-in-out;
}
/*# sourceMappingURL=style-index.css.map*/

2
blocks/vocabulaire-summary/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;AAAD;AACC;EACC;EACA;EACA;AACF;AACC;EACC;AACF;AACC;EACC;EACA;EACA;EACA;AACF;AAAE;EACC;AAEH;AAAE;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACH;AAEC;EACC;EACA;AAAF;AAEC;EACC;AAAF;AAEC;EACC;EACA;EACA;AAAF,C","sources":["webpack://vocabulaire-summary/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.homegrade-blocks-vocabulaire-summary {\n\tpadding: 20px;\n\tdetails {\n\t\tcursor: pointer;\n\t\tpadding: 20px;\n\t\tbackground-color: white;\n\t}\n\tdetails[open] summary .open-close-icon {\n\t\ttransform: translate(0, -50%) rotate(180deg);\n\t}\n\tsummary {\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\tmargin: 0;\n\t\tfont-weight: bold;\n\t\t&::marker {\n\t\t\tcontent: none;\n\t\t}\n\t\t.open-close-icon {\n\t\t\t// transform-origin: center center;\n\t\t\ttransition: transform 0.3s ease-in-out;\n\t\t\tright: 20px;\n\t\t\ttop: 50%;\n\t\t\ttransform: translate(0, -50%);\n\t\t\tposition: absolute;\n\t\t\tdisplay: flex;\n\t\t\tborder: 2px solid black;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tborder-radius: 50%;\n\t\t\theight: 26px;\n\t\t\twidth: 26px;\n\t\t}\n\t}\n\t&__title {\n\t\tmargin: 0;\n\t\tpadding-bottom: 20px;\n\t}\n\t&__content {\n\t\tpadding-top: 30px;\n\t}\n\t&__content-wrapper {\n\t\toverflow: hidden;\n\t\theight: 0;\n\t\ttransition: height 0.3s ease-in-out;\n\t}\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;AAAD;AACC;EACC;EACA;EACA;AACF;AACC;EACC;AACF;AACC;EACC;EACA;EACA;EACA;AACF;AAAE;EACC;AAEH;AAAE;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACH;AAEC;EACC;EACA;AAAF;AAEC;EACC;AAAF;AAEC;EACC;EACA;AAAF,C","sources":["webpack://vocabulaire-summary/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.homegrade-blocks-vocabulaire-summary {\n\tpadding: 20px;\n\tdetails {\n\t\tcursor: pointer;\n\t\tpadding: 20px;\n\t\tbackground-color: white;\n\t}\n\tdetails[open] summary .open-close-icon {\n\t\ttransform: translate(0, -50%) rotate(180deg);\n\t}\n\tsummary {\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\tmargin: 0;\n\t\tfont-weight: bold;\n\t\t&::marker {\n\t\t\tcontent: none;\n\t\t}\n\t\t.open-close-icon {\n\t\t\t// transform-origin: center center;\n\t\t\ttransition: transform 0.3s ease-in-out;\n\t\t\tright: 20px;\n\t\t\ttop: 50%;\n\t\t\ttransform: translate(0, -50%);\n\t\t\tposition: absolute;\n\t\t\tdisplay: flex;\n\t\t\tborder: 2px solid black;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tborder-radius: 50%;\n\t\t\theight: 26px;\n\t\t\twidth: 26px;\n\t\t}\n\t}\n\t&__title {\n\t\tmargin: 0;\n\t\tpadding-bottom: 20px;\n\t}\n\t&__content {\n\t\tpadding-top: 30px;\n\t}\n\t&__content-wrapper {\n\t\toverflow: hidden;\n\t\ttransition: height 0.3s ease-in-out;\n\t}\n}\n"],"names":[],"sourceRoot":""}

1
blocks/vocabulaire-summary/src/block.json
View File

@ -16,7 +16,6 @@
},
"textdomain": "homegrade-blocks",
"editorScript": "file:./index.js",
"viewScript": "file:./frontend.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",

10
blocks/vocabulaire-summary/src/edit.js
View File

@ -182,10 +182,12 @@ export default function Edit({ attributes, setAttributes }) {
<img src={chevronDown} className="open-close-cta" alt="" />
</div>
</summary>
<div className="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p className="homegrade-blocks-vocabulaire-summary__content">
{elem.tooltipDefinition}
</p>
<div className="homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
<div class=" homegrade-dynamic-accordeon__content">
<p className="homegrade-blocks-vocabulaire-summary__content">
{elem.tooltipDefinition}
</p>
</div>
</div>
</details>
))}

57
blocks/vocabulaire-summary/src/frontend.js
View File

@ -1,57 +0,0 @@
window.addEventListener("DOMContentLoaded", (event) => {
// GETTING ELEMENTS FROM THE DOM
const vocabulaireSummary = document.querySelector(
".homegrade-blocks-vocabulaire-summary"
);
const wordsDetails = vocabulaireSummary.querySelectorAll("details");
function openAccordion(wordDetail) {
let contentDefinitionWrapper = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content-wrapper"
);
let contentDefinitionParagraph = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content"
);
wordDetail.setAttribute("open", "true");
wordDetail.setAttribute("is_opening", "");
contentDefinitionWrapper.style.height =
contentDefinitionParagraph.offsetHeight + "px";
// remove is opening after css transition
wordDetail.addEventListener("transitionend", () => {
wordDetail.removeAttribute("is_opening");
});
}
function closeAccordion(wordDetail) {
let contentDefinitionWrapper = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content-wrapper"
);
contentDefinitionWrapper.style.height = "0px";
setTimeout(() => {
wordDetail.removeAttribute("open");
}, 300);
}
// HANDLING CLICK
function toggleActive(wordDetail) {
let isOpen = wordDetail.getAttribute("open");
let isOpening = wordDetail.getAttribute("is_opening");
if (isOpen == null && isOpening == null) {
openAccordion(wordDetail);
}
if (isOpen == "true") {
closeAccordion(wordDetail);
}
}
// HANDLING CLICK
Array.from(wordsDetails).forEach((wordDetail) => {
wordDetail.addEventListener("click", (event) => {
event.preventDefault();
toggleActive(wordDetail);
});
});
});

12
blocks/vocabulaire-summary/src/render.php
View File

@ -21,17 +21,19 @@ $thematique = get_the_terms($post->ID, 'thematiques')[0];
</h2>
<?php foreach ($tooltipWords as $word) : ?>
<details class="question">
<details class="question homegrade-dynamic-accordeon">
<summary>
<?php echo $word['tooltipText']; ?>
<div class="open-close-icon">
<img src="<?php echo plugins_url('/', dirname(__FILE__)) . 'src/img/chevron_down.svg' ?>" class="open-close-cta" alt="" />
</div>
</summary>
<div class="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p class="homegrade-blocks-vocabulaire-summary__content">
<?php echo $word['tooltipDefinition']; ?>
</p>
<div class="homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
<div class=" homegrade-dynamic-accordeon__content">
<p class="homegrade-blocks-vocabulaire-summary__content">
<?php echo $word['tooltipDefinition']; ?>
</p>
</div>
</div>
</details>
<?php endforeach; ?>

99
blocks/vocabulaire-summary/src/style.scss
View File

@ -1,54 +1,47 @@
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
// /**
// * The following styles get applied both on the front of your site
// * and in the editor.
// *
// * Replace them with your own styles or remove the file completely.
// */
.homegrade-blocks-vocabulaire-summary {
padding: 20px;
details {
cursor: pointer;
padding: 20px;
background-color: white;
}
details[open] summary .open-close-icon {
transform: translate(0, -50%) rotate(180deg);
}
summary {
cursor: pointer;
position: relative;
margin: 0;
font-weight: bold;
&::marker {
content: none;
}
.open-close-icon {
// transform-origin: center center;
transition: transform 0.3s ease-in-out;
right: 20px;
top: 50%;
transform: translate(0, -50%);
position: absolute;
display: flex;
border: 2px solid black;
justify-content: center;
align-items: center;
border-radius: 50%;
height: 26px;
width: 26px;
}
}
&__title {
margin: 0;
padding-bottom: 20px;
}
&__content {
padding-top: 30px;
}
&__content-wrapper {
overflow: hidden;
height: 0;
transition: height 0.3s ease-in-out;
}
}
// .homegrade-blocks-vocabulaire-summary {
// padding: 20px;
// details {
// cursor: pointer;
// padding: 20px;
// background-color: white;
// }
// details[open] summary .open-close-icon {
// transform: translate(0, -50%) rotate(180deg);
// }
// summary {
// cursor: pointer;
// position: relative;
// margin: 0;
// font-weight: bold;
// &::marker {
// content: none;
// }
// .open-close-icon {
// // transform-origin: center center;
// transition: transform 0.3s ease-in-out;
// right: 20px;
// top: 50%;
// transform: translate(0, -50%);
// position: absolute;
// display: flex;
// border: 2px solid black;
// justify-content: center;
// align-items: center;
// border-radius: 50%;
// height: 26px;
// width: 26px;
// }
// }
// &__title {
// margin: 0;
// padding-bottom: 20px;
// }
// }