react-image-accordion 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js
CHANGED
|
@@ -27,7 +27,7 @@ function styleInject(css, ref) {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.
|
|
30
|
+
var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.accordionImage {\n --_button-size: 3rem;\n --_panel-padding: 0.75rem;\n --_panel-gap: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (min-width: 45em) {\n .accordionImage {\n flex-direction: row;\n height: 30rem;\n }\n}\n\n.accordionImage * {\n margin: 0;\n}\n\n.accordion-panel {\n position: relative;\n isolation: isolate;\n flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n overflow: hidden;\n padding: var(--_panel-padding);\n padding-right: calc(var(--_panel-padding) * 4);\n border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel {\n transition: flex-basis 500ms, flex-grow 500ms;\n }\n}\n\n.accordion-panel:nth-child(1) {\n --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n flex-basis: clamp(15rem, 40vh, 20rem);\n flex-grow: 1;\n}\n\n.accordion-trigger {\n outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n outline: 3px solid var(--_panel-color);\n outline-offset: 4px;\n}\n\n.accordion-content > p {\n transform: translateY(2rem);\n opacity: 0;\n margin-left: calc(var(--_button-size) + var(--_panel-gap));\n color: rgb(255, 255, 255) !important;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transition: transform 500ms 500ms, opacity 500ms 500ms;\n }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transform: translateY(0);\n opacity: 1;\n}\n\n.accordion-title {\n font-size: 1.5rem;\n font-weight: 700;\n position: relative;\n isolation: isolate;\n display: grid;\n align-items: center;\n color: rgb(255, 255, 255) !important;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-Link,\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n display: none;\n}\n\n@media (max-width: 44.999em) {\n .accordion-title::after {\n content: \"\";\n position: absolute;\n\n left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n width: calc(100% + (var(--_button-size) * 2));\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n z-index: -1;\n border-radius: 100vw;\n }\n}\n\n.accordion-Link {\n all: revert;\n display: block;\n position: absolute;\n left: -0.1rem;\n bottom: 0;\n margin: 0.75rem;\n width: 10rem;\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n border-radius: 100vw;\n padding: 0.75rem;\n font-weight: bolder;\n}\n\n.accordion-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: -1;\n transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n filter: brightness(0.5);\n}\n.accordion-trigger {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--_panel-gap);\n background: transparent;\n border: 0;\n padding: 0;\n}\n.accordion-icon {\n fill: var(--_panel-color);\n background: hsl(0 0% 0% /0.55);\n width: var(--_button-size);\n aspect-ratio: 1/1;\n padding: 0.75rem;\n border-radius: 50%;\n z-index: 10;\n}\n";
|
|
31
31
|
styleInject(css_248z);
|
|
32
32
|
|
|
33
33
|
function UseImageAccordion({
|
|
@@ -93,7 +93,7 @@ function UseImageAccordion({
|
|
|
93
93
|
}, /*#__PURE__*/React.createElement("style", {
|
|
94
94
|
scoped: true
|
|
95
95
|
}, HeightStyle), /*#__PURE__*/React.createElement("div", {
|
|
96
|
-
className: "
|
|
96
|
+
className: "accordionImage AccHeight"
|
|
97
97
|
}, accordionData.map(item => /*#__PURE__*/React.createElement("div", {
|
|
98
98
|
key: item.id,
|
|
99
99
|
className: "accordion-panel",
|
package/dist/index.js
CHANGED
|
@@ -35,7 +35,7 @@ function styleInject(css, ref) {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.
|
|
38
|
+
var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.accordionImage {\n --_button-size: 3rem;\n --_panel-padding: 0.75rem;\n --_panel-gap: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (min-width: 45em) {\n .accordionImage {\n flex-direction: row;\n height: 30rem;\n }\n}\n\n.accordionImage * {\n margin: 0;\n}\n\n.accordion-panel {\n position: relative;\n isolation: isolate;\n flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n overflow: hidden;\n padding: var(--_panel-padding);\n padding-right: calc(var(--_panel-padding) * 4);\n border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel {\n transition: flex-basis 500ms, flex-grow 500ms;\n }\n}\n\n.accordion-panel:nth-child(1) {\n --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n flex-basis: clamp(15rem, 40vh, 20rem);\n flex-grow: 1;\n}\n\n.accordion-trigger {\n outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n outline: 3px solid var(--_panel-color);\n outline-offset: 4px;\n}\n\n.accordion-content > p {\n transform: translateY(2rem);\n opacity: 0;\n margin-left: calc(var(--_button-size) + var(--_panel-gap));\n color: rgb(255, 255, 255) !important;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transition: transform 500ms 500ms, opacity 500ms 500ms;\n }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transform: translateY(0);\n opacity: 1;\n}\n\n.accordion-title {\n font-size: 1.5rem;\n font-weight: 700;\n position: relative;\n isolation: isolate;\n display: grid;\n align-items: center;\n color: rgb(255, 255, 255) !important;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-Link,\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n display: none;\n}\n\n@media (max-width: 44.999em) {\n .accordion-title::after {\n content: \"\";\n position: absolute;\n\n left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n width: calc(100% + (var(--_button-size) * 2));\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n z-index: -1;\n border-radius: 100vw;\n }\n}\n\n.accordion-Link {\n all: revert;\n display: block;\n position: absolute;\n left: -0.1rem;\n bottom: 0;\n margin: 0.75rem;\n width: 10rem;\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n border-radius: 100vw;\n padding: 0.75rem;\n font-weight: bolder;\n}\n\n.accordion-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: -1;\n transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n filter: brightness(0.5);\n}\n.accordion-trigger {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--_panel-gap);\n background: transparent;\n border: 0;\n padding: 0;\n}\n.accordion-icon {\n fill: var(--_panel-color);\n background: hsl(0 0% 0% /0.55);\n width: var(--_button-size);\n aspect-ratio: 1/1;\n padding: 0.75rem;\n border-radius: 50%;\n z-index: 10;\n}\n";
|
|
39
39
|
styleInject(css_248z);
|
|
40
40
|
|
|
41
41
|
function UseImageAccordion({
|
|
@@ -101,7 +101,7 @@ function UseImageAccordion({
|
|
|
101
101
|
}, /*#__PURE__*/React__default["default"].createElement("style", {
|
|
102
102
|
scoped: true
|
|
103
103
|
}, HeightStyle), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
104
|
-
className: "
|
|
104
|
+
className: "accordionImage AccHeight"
|
|
105
105
|
}, accordionData.map(item => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
106
106
|
key: item.id,
|
|
107
107
|
className: "accordion-panel",
|
package/package.json
CHANGED
|
@@ -31,7 +31,7 @@ img {
|
|
|
31
31
|
padding-inline: 1rem;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
.accordionImage {
|
|
35
35
|
--_button-size: 3rem;
|
|
36
36
|
--_panel-padding: 0.75rem;
|
|
37
37
|
--_panel-gap: 1rem;
|
|
@@ -42,13 +42,13 @@ img {
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 45em) {
|
|
45
|
-
.
|
|
45
|
+
.accordionImage {
|
|
46
46
|
flex-direction: row;
|
|
47
47
|
height: 30rem;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
51
|
+
.accordionImage * {
|
|
52
52
|
margin: 0;
|
|
53
53
|
}
|
|
54
54
|
|
|
@@ -118,6 +118,7 @@ img {
|
|
|
118
118
|
transform: translateY(2rem);
|
|
119
119
|
opacity: 0;
|
|
120
120
|
margin-left: calc(var(--_button-size) + var(--_panel-gap));
|
|
121
|
+
color: rgb(255, 255, 255) !important;
|
|
121
122
|
}
|
|
122
123
|
|
|
123
124
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -138,6 +139,7 @@ img {
|
|
|
138
139
|
isolation: isolate;
|
|
139
140
|
display: grid;
|
|
140
141
|
align-items: center;
|
|
142
|
+
color: rgb(255, 255, 255) !important;
|
|
141
143
|
}
|
|
142
144
|
|
|
143
145
|
.accordion-panel:has([aria-expanded="false"]) .accordion-Link,
|
|
@@ -65,7 +65,7 @@ function UseImageAccordion({
|
|
|
65
65
|
<>
|
|
66
66
|
<div className="wrapper" style={{ width: AccordionWidth }}>
|
|
67
67
|
<style scoped>{HeightStyle}</style>
|
|
68
|
-
<div className="
|
|
68
|
+
<div className="accordionImage AccHeight">
|
|
69
69
|
{accordionData.map((item) => (
|
|
70
70
|
<div
|
|
71
71
|
key={item.id}
|