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

fixing stacking problem with bullets

Browse Source
This commit is contained in:
Antoine M 2023-10-12 15:55:36 +02:00
parent d8d87e0525
commit be58962c50
15 changed files with 140 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/focused-thematique/build/focus-point-thematique/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => 'b34654bdfab6ce8e5f75');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '8effa02505a2c3bfaa3f');

10
blocks/focused-thematique/build/focus-point-thematique/index.js
View File

@ -66,7 +66,7 @@ function Edit({
className: "focus-point-modification-pannel",
title: "Gestion du points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-focus-point-bullet"
className: "homegrade-blocks-focus-point-bullet-panel-preview"
}, focusIndex), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextControl, {
placeholder: "Ins\xE9rer le titre de votre point focus",
label: "Titre du point focus",
@ -95,7 +95,9 @@ function Edit({
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription));
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "focus-point-title"
}, focusTitle), focusCaptionDescription));
}
/***/ }),
@ -181,7 +183,9 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription);
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "focus-point-title"
}, focusTitle), focusCaptionDescription);
}
/***/ }),

2
blocks/focused-thematique/build/focus-point-thematique/index.js.map
View File

File diff suppressed because one or more lines are too long

2
blocks/focused-thematique/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '5b519e7f67aa2e01257f');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '6d996a67717d11da59bc');

34
blocks/focused-thematique/build/index.css
View File

@ -1,29 +1,17 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-thematique-cover .block-editor-block-list__layout,
.homegrade-blocks-focused-thematique-cover .block-editor-block-list__block {
position: unset;
}
.wpblock-cover-container {
position: relative;
}
.wpblock-cover-container.is-loading .components-spinner {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
top: 0;
margin: auto;
}
.wpblock-cover-container.is-loading img {
opacity: 10%;
.homegrade-blocks-focus-point-bullet-panel-preview {
width: 40px;
height: 40px;
background: red;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
margin-bottom: 10px;
}
.homegrade-blocks-focus-point {

2
blocks/focused-thematique/build/index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMC;;EAEC;AAAF;;AAGA;EACC;AAAD;AAEE;EACC;EACA;EACA;EACA;EACA;EACA;AAAH;AAEE;EACC;AAAH;;AAKA;EACC;AAFD;;AAKA;EACC;EACA;EACA;AAFD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n.homegrade-blocks-focused-thematique-cover {\n\t.block-editor-block-list__layout,\n\t.block-editor-block-list__block {\n\t\tposition: unset;\n\t}\n}\n.wpblock-cover-container {\n\tposition: relative;\n\t&.is-loading {\n\t\t.components-spinner {\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tright: 50%;\n\t\t\tbottom: 0;\n\t\t\ttop: 0;\n\t\t\tmargin: auto;\n\t\t}\n\t\timg {\n\t\t\topacity: 10%;\n\t\t}\n\t}\n}\n\n.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"index.css","mappings":";;;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACD;;AAEA;EACC;AACD;;AAEA;EACC;EACA;EACA;AACD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-focus-point-bullet-panel-preview {\n\twidth: 40px;\n\theight: 40px;\n\tbackground: red;\n\tcolor: white;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-weight: 800;\n\tmargin-bottom: 10px;\n}\n\n.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}

14
blocks/focused-thematique/build/index.js
View File

@ -289,7 +289,7 @@ function Edit({
className: "focus-point-modification-pannel",
title: "Gestion du points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-focus-point-bullet"
className: "homegrade-blocks-focus-point-bullet-panel-preview"
}, focusIndex), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextControl, {
placeholder: "Ins\xE9rer le titre de votre point focus",
label: "Titre du point focus",
@ -318,7 +318,9 @@ function Edit({
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription));
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "focus-point-title"
}, focusTitle), focusCaptionDescription));
}
/***/ }),
@ -404,7 +406,9 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription);
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "focus-point-title"
}, focusTitle), focusCaptionDescription);
}
/***/ }),
@ -493,7 +497,9 @@ function save({
style: {
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`
}
},
"data-postion-x": focusBullet.x * 100,
"data-postion-y": focusBullet.y * 100
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "homegrade-blocks-focus-point-bullet__index"
}, index + 1));

2
blocks/focused-thematique/build/index.js.map
View File

File diff suppressed because one or more lines are too long

58
blocks/focused-thematique/build/style-index.css
View File

@ -1,18 +1,21 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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 ***!
\***************************************************************************************************************************************************************************************************************************************/
.homegrade-blocks-focused-thematique-cover figure {
position: relative;
}
.homegrade-blocks-focused-thematique {
padding-bottom: 100px;
}
.homegrade-blocks-focused-thematique figure {
padding-bottom: 50px;
position: relative;
}
.homegrade-blocks-focused-thematique figcaption {
padding-top: 20px;
}
.homegrade-blocks-focused-thematique figcaption .focus-point-title {
font-weight: bold;
margin-right: 10px;
}
.homegrade-blocks-focused-thematique__figcaption-toggle {
opacity: 0.9999;
font-weight: bold;
display: flex;
align-items: center;
@ -32,14 +35,14 @@
display: none;
height: 0;
}
.homegrade-blocks-focus-point-bullet {
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet {
position: absolute !important;
border-radius: 50%;
transition: scale 0.2s ease-in-out;
z-index: 10;
z-index: 1;
transform: translateX(-50%);
}
.homegrade-blocks-focus-point-bullet__index {
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet__index {
font-weight: 700;
width: 20px;
height: 20px;
@ -52,15 +55,23 @@
align-items: center;
padding: 16px;
}
.homegrade-blocks-focus-point-bullet__tooltip-container {
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
}
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet:hover + .homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex;
}
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet__tooltip-container {
z-index: 999;
position: absolute;
left: 44%;
top: 25%;
transform: translate(-50%, -100%);
background-color: white;
opacity: 0.9999;
border-radius: 14px;
padding: 10px;
position: absolute;
top: -4px;
left: 50%;
transform: translate(-50%, -100%);
width: -moz-max-content;
width: max-content;
min-width: 70px;
@ -70,9 +81,8 @@
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.homegrade-blocks-focus-point-bullet__tooltip-container:after {
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet__tooltip-container:after {
content: "";
display: block;
background-color: white;
@ -85,20 +95,8 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999;
}
.homegrade-blocks-focus-point-bullet__tooltip-container__title {
width: auto;
min-width: 100px;
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
}
.homegrade-blocks-focus-point-bullet:hover .homegrade-blocks-focus-point-bullet__tooltip-container {
.homegrade-blocks-focused-thematique .homegrade-blocks-focus-point-bullet__tooltip-container:hover {
display: flex;
z-index: 999;
position: absolute;
}
.tooltip-title {

2
blocks/focused-thematique/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AACC;EACC;AAAF;;AAIA;EACC;AADD;AAEC;EACC;AAAF;AAEC;EACC;EACA;EACA;EACA;AAAF;AACE;EACC;EACA;EACA;EACA;EACA;EACA;AACH;AACE;EACC;AACH;AAEC;EACC;EACA;AAAF;;AAoEA;EACC;EACA;EACA;EACA;AAjED;AAkEC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhEF;AAmEC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjEF;AAmEE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjEH;AAmEE;EACC;EACA;AAjEH;;AA2EA;EACC;EACA;EACA;AAxED;AA6EC;EACC;EACA;EACA;AA3EF;;AAiFA;EACC;EACA;AA9ED,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":[".homegrade-blocks-focused-thematique-cover {\n\tfigure {\n\t\tposition: relative;\n\t}\n}\n\n.homegrade-blocks-focused-thematique {\n\tpadding-bottom: 100px;\n\tfigure {\n\t\tpadding-bottom: 50px;\n\t}\n\t&__figcaption-toggle {\n\t\topacity: 0.9999;\n\t\tfont-weight: bold;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\timg {\n\t\t\theight: 8px;\n\t\t\twidth: auto;\n\t\t\tmargin-top: 2px;\n\t\t\tmargin-left: 10px;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t&[aria-expanded=\"true\"] img {\n\t\t\ttransform: rotate(-180deg);\n\t\t}\n\t}\n\tfigcaption[aria-hidden=\"true\"] {\n\t\tdisplay: none;\n\t\theight: 0;\n\t}\n}\n// .homegrade-blocks-focus-point-bullet:hover {\n// \tscale: 1.2;\n// \tfilter: brightness(1.2) hue-rotate(10deg);\n// }\n// .homegrade-blocks-focus-point-bullet {\n// \tbackground-color: red;\n// \tborder-radius: 50%;\n// \t// width: 6px;\n// \t// height: 6px;\n// \tposition: absolute !important;\n// \ttop: 0;\n// \tleft: 0;\n// \tz-index: 99;\n// \tcolor: white;\n// \tdisplay: flex;\n// \tjustify-content: center;\n// \talign-items: center;\n// \tpadding: 10px;\n// \ttransition: scale 0.2s ease-in-out;\n// \t&:after {\n// \t\tposition: absolute;\n// \t\tcontent: \"\";\n// \t\tdisplay: block;\n// \t\twidth: 100%;\n// \t\theight: 100%;\n// \t\tborder-radius: 50%;\n// \t\tbackground-color: red;\n// \t\topacity: 0.2;\n// \t\twidth: 200%;\n// \t\theight: 200%;\n// \t}\n// }\n// .focus-point-popup-container {\n// \tbackground-color: white;\n// \tborder-radius: 14px;\n// \tpadding: 10px;\n// \ttransform: translate(-34%, -110%);\n// \tposition: absolute;\n// \ttop: 0;\n// \tleft: 0;\n// \tmax-width: 400px;\n// \ttext-align: center;\n// \tdisplay: flex;\n// \tjustify-content: center;\n// \talign-items: center;\n// \tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n// \t&:after {\n// \t\tcontent: \"\";\n// \t\tdisplay: block;\n// \t\tbackground-color: white;\n// \t\tposition: absolute;\n// \t\ttop: 100%;\n// \t\tleft: 50%;\n// \t\twidth: 10px;\n// \t\theight: 10px;\n// \t\ttransform: translate(-50%, -50%) rotate(45deg);\n// \t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n// \t}\n// \t&__title {\n// \t\twidth: auto;\n// \t\tmin-width: 100px;\n// \t}\n// }\n\n.homegrade-blocks-focus-point-bullet {\n\tposition: absolute !important;\n\tborder-radius: 50%;\n\ttransition: scale 0.2s ease-in-out;\n\tz-index: 10;\n\t&__index {\n\t\tfont-weight: 700;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tposition: relative;\n\t\tcolor: white;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 16px;\n\t}\n\n\t&__tooltip-container {\n\t\tbackground-color: white;\n\t\topacity: 0.9999;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -100%);\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 220px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\t\tz-index: 999;\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t&__title {\n\t\t\twidth: auto;\n\t\t\tmin-width: 100px;\n\t\t}\n\t}\n}\n// .homegrade-blocks-focus-point-bullet:hover {\n// \t.homegrade-blocks-focus-point-bullet__tooltip-container:not(:hover) {\n// \t\tbackground-color: yellow !important;\n// \t}\n// }\n\n.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n\tz-index: 1;\n\t// ~ .homegrade-blocks-focus-point-bullet {\n\t// \t// background-color: yellow !important;\n\t// \tz-index: 1;\n\t// }\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tdisplay: flex;\n\t\tz-index: 999;\n\t\tposition: absolute;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;EACC;AACD;AAAC;EACC;EACA;AAEF;AAAC;EACC;AAEF;AADE;EACC;EACA;AAGH;AAAC;EACC;EACA;EACA;AAEF;AADE;EACC;EACA;EACA;EACA;EACA;EACA;AAGH;AADE;EACC;AAGH;AAAC;EACC;EACA;AAEF;AACC;EACC;EACA;EACA;EACA;EACA;AACF;AACE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACH;AAGC;EACC;EACA;EACA;AADF;AAGE;EAEC;AAFH;AAeC;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfF;AAiBE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfH;AAwBC;EACC;AAtBF;;AA4BA;EACC;EACA;AAzBD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":[".homegrade-blocks-focused-thematique {\n\tpadding-bottom: 100px;\n\tfigure {\n\t\tpadding-bottom: 50px;\n\t\tposition: relative;\n\t}\n\tfigcaption {\n\t\tpadding-top: 20px;\n\t\t.focus-point-title {\n\t\t\tfont-weight: bold;\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n\t&__figcaption-toggle {\n\t\tfont-weight: bold;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\timg {\n\t\t\theight: 8px;\n\t\t\twidth: auto;\n\t\t\tmargin-top: 2px;\n\t\t\tmargin-left: 10px;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t&[aria-expanded=\"true\"] img {\n\t\t\ttransform: rotate(-180deg);\n\t\t}\n\t}\n\tfigcaption[aria-hidden=\"true\"] {\n\t\tdisplay: none;\n\t\theight: 0;\n\t}\n\n\t.homegrade-blocks-focus-point-bullet {\n\t\tposition: absolute !important;\n\t\tborder-radius: 50%;\n\t\ttransition: scale 0.2s ease-in-out;\n\t\tz-index: 1;\n\t\ttransform: translateX(-50%);\n\n\t\t&__index {\n\t\t\tfont-weight: 700;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tposition: relative;\n\t\t\tcolor: white;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: 16px;\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet:hover {\n\t\tscale: 1.2;\n\t\tfilter: brightness(1.2) hue-rotate(10deg);\n\t\tz-index: 1;\n\n\t\t& + .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t\t// background-color: red;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t// ~ .homegrade-blocks-focus-point-bullet {\n\t\t// \t// background-color: yellow !important;\n\t\t// \tz-index: 1;\n\t\t// }\n\t\t// .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t// \tdisplay: flex;\n\t\t// \tz-index: 999;\n\t\t// \tposition: absolute;\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tz-index: 999;\n\t\tposition: absolute;\n\t\tleft: calc(44%);\n\t\ttop: 25%;\n\t\ttransform: translate(-50%, calc(-100%));\n\n\t\tbackground-color: white;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 220px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t// &__tooltip-container {\n\t\t// \t&__title {\n\t\t// \t\twidth: auto;\n\t\t// \t\tmin-width: 100px;\n\t\t// \t}\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container:hover {\n\t\tdisplay: flex;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}

37
blocks/focused-thematique/src/editor.scss
View File

@ -1,29 +1,14 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-thematique-cover {
.block-editor-block-list__layout,
.block-editor-block-list__block {
position: unset;
}
}
.wpblock-cover-container {
position: relative;
&.is-loading {
.components-spinner {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
top: 0;
margin: auto;
}
img {
opacity: 10%;
}
}
.homegrade-blocks-focus-point-bullet-panel-preview {
width: 40px;
height: 40px;
background: red;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
margin-bottom: 10px;
}
.homegrade-blocks-focus-point {

3
blocks/focused-thematique/src/focus-point-thematique/edit.js
View File

@ -43,7 +43,7 @@ export default function Edit({
className="focus-point-modification-pannel"
title="Gestion du points de focus"
>
<div className="homegrade-blocks-focus-point-bullet">
<div className="homegrade-blocks-focus-point-bullet-panel-preview">
{focusIndex}
</div>
<TextControl
@ -80,6 +80,7 @@ export default function Edit({
className: `homegrade-blocks-focus-point-caption`,
})}
>
<span className="focus-point-title">{focusTitle}</span>
{focusCaptionDescription}
</li>
</>

1
blocks/focused-thematique/src/focus-point-thematique/save.js
View File

@ -21,6 +21,7 @@ export default function save({ attributes }) {
>
{focusIndex}
</div> */}
<span className="focus-point-title">{focusTitle}</span>
{focusCaptionDescription}
</li>
);

2
blocks/focused-thematique/src/save.js
View File

@ -23,6 +23,8 @@ export default function save({ attributes }) {
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`,
}}
data-postion-x={focusBullet.x * 100}
data-postion-y={focusBullet.y * 100}
>
<span className="homegrade-blocks-focus-point-bullet__index">
{index + 1}

151
blocks/focused-thematique/src/style.scss
View File

@ -1,16 +1,17 @@
.homegrade-blocks-focused-thematique-cover {
figure {
position: relative;
}
}
.homegrade-blocks-focused-thematique {
padding-bottom: 100px;
figure {
padding-bottom: 50px;
position: relative;
}
figcaption {
padding-top: 20px;
.focus-point-title {
font-weight: bold;
margin-right: 10px;
}
}
&__figcaption-toggle {
opacity: 0.9999;
font-weight: bold;
display: flex;
align-items: center;
@ -30,77 +31,14 @@
display: none;
height: 0;
}
}
// .homegrade-blocks-focus-point-bullet:hover {
// scale: 1.2;
// filter: brightness(1.2) hue-rotate(10deg);
// }
// .homegrade-blocks-focus-point-bullet {
// background-color: red;
// border-radius: 50%;
// // width: 6px;
// // height: 6px;
// position: absolute !important;
// top: 0;
// left: 0;
// z-index: 99;
// color: white;
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 10px;
// transition: scale 0.2s ease-in-out;
// &:after {
// position: absolute;
// content: "";
// display: block;
// width: 100%;
// height: 100%;
// border-radius: 50%;
// background-color: red;
// opacity: 0.2;
// width: 200%;
// height: 200%;
// }
// }
// .focus-point-popup-container {
// background-color: white;
// border-radius: 14px;
// padding: 10px;
// transform: translate(-34%, -110%);
// position: absolute;
// top: 0;
// left: 0;
// max-width: 400px;
// text-align: center;
// display: flex;
// justify-content: center;
// align-items: center;
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
// &:after {
// content: "";
// display: block;
// background-color: white;
// position: absolute;
// top: 100%;
// left: 50%;
// width: 10px;
// height: 10px;
// transform: translate(-50%, -50%) rotate(45deg);
// box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
// }
// &__title {
// width: auto;
// min-width: 100px;
// }
// }
.homegrade-blocks-focus-point-bullet {
.homegrade-blocks-focus-point-bullet {
position: absolute !important;
border-radius: 50%;
transition: scale 0.2s ease-in-out;
z-index: 10;
z-index: 1;
transform: translateX(-50%);
&__index {
font-weight: 700;
width: 20px;
@ -114,16 +52,39 @@
align-items: center;
padding: 16px;
}
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
& + .homegrade-blocks-focus-point-bullet__tooltip-container {
// background-color: red;
display: flex;
}
// ~ .homegrade-blocks-focus-point-bullet {
// // background-color: yellow !important;
// z-index: 1;
// }
// .homegrade-blocks-focus-point-bullet__tooltip-container {
// display: flex;
// z-index: 999;
// position: absolute;
// }
}
.homegrade-blocks-focus-point-bullet__tooltip-container {
z-index: 999;
position: absolute;
left: calc(44%);
top: 25%;
transform: translate(-50%, calc(-100%));
&__tooltip-container {
background-color: white;
opacity: 0.9999;
border-radius: 14px;
padding: 10px;
position: absolute;
top: -4px;
left: 50%;
transform: translate(-50%, -100%);
width: max-content;
min-width: 70px;
max-width: 220px;
@ -132,7 +93,6 @@
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
&:after {
content: "";
@ -147,30 +107,15 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999;
}
&__title {
width: auto;
min-width: 100px;
}
}
}
// .homegrade-blocks-focus-point-bullet:hover {
// .homegrade-blocks-focus-point-bullet__tooltip-container:not(:hover) {
// background-color: yellow !important;
// }
// }
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
// ~ .homegrade-blocks-focus-point-bullet {
// // background-color: yellow !important;
// z-index: 1;
// &__tooltip-container {
// &__title {
// width: auto;
// min-width: 100px;
// }
.homegrade-blocks-focus-point-bullet__tooltip-container {
// }
}
.homegrade-blocks-focus-point-bullet__tooltip-container:hover {
display: flex;
z-index: 999;
position: absolute;
}
}