react-image-accordion 1.1.8 → 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/README.md
CHANGED
|
@@ -128,8 +128,8 @@ export const test = () => {
|
|
|
128
128
|
AccordionWidth= "40rem"
|
|
129
129
|
AccordionHeight= "30rem"
|
|
130
130
|
ContentSize={[".5rem", ".5rem", ".6rem", ".7rem", "1.1rem"]}
|
|
131
|
-
ShowButton= false,
|
|
132
|
-
onClick= (e) => console.log(e.id, e.title),
|
|
131
|
+
ShowButton= {false},
|
|
132
|
+
onClick= {(e) => console.log(e.id, e.title)},
|
|
133
133
|
/>
|
|
134
134
|
);
|
|
135
135
|
};
|
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",
|
|
@@ -127,11 +127,6 @@ function UseImageAccordion({
|
|
|
127
127
|
role: "region"
|
|
128
128
|
}, /*#__PURE__*/React.createElement("p", null, item.content), ShowButton && /*#__PURE__*/React.createElement("button", {
|
|
129
129
|
className: "accordion-Link",
|
|
130
|
-
style: {
|
|
131
|
-
bottom: `calc((${AccordionHeight} - 12rem - 5px) * -1 )`,
|
|
132
|
-
zIndex: "100",
|
|
133
|
-
isolation: "isolate"
|
|
134
|
-
},
|
|
135
130
|
onClick: e => {
|
|
136
131
|
e.stopPropagation();
|
|
137
132
|
onClick({
|
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",
|
|
@@ -135,11 +135,6 @@ function UseImageAccordion({
|
|
|
135
135
|
role: "region"
|
|
136
136
|
}, /*#__PURE__*/React__default["default"].createElement("p", null, item.content), ShowButton && /*#__PURE__*/React__default["default"].createElement("button", {
|
|
137
137
|
className: "accordion-Link",
|
|
138
|
-
style: {
|
|
139
|
-
bottom: `calc((${AccordionHeight} - 12rem - 5px) * -1 )`,
|
|
140
|
-
zIndex: "100",
|
|
141
|
-
isolation: "isolate"
|
|
142
|
-
},
|
|
143
138
|
onClick: e => {
|
|
144
139
|
e.stopPropagation();
|
|
145
140
|
onClick({
|
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,
|
|
@@ -160,11 +162,12 @@ img {
|
|
|
160
162
|
}
|
|
161
163
|
|
|
162
164
|
.accordion-Link {
|
|
163
|
-
all:revert;
|
|
165
|
+
all: revert;
|
|
164
166
|
display: block;
|
|
165
|
-
position:
|
|
167
|
+
position: absolute;
|
|
166
168
|
left: -0.1rem;
|
|
167
|
-
|
|
169
|
+
bottom: 0;
|
|
170
|
+
margin: 0.75rem;
|
|
168
171
|
width: 10rem;
|
|
169
172
|
height: var(--_button-size);
|
|
170
173
|
background: hsl(0 0% 0% /0.55);
|
|
@@ -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}
|
|
@@ -105,11 +105,6 @@ function UseImageAccordion({
|
|
|
105
105
|
{ShowButton && (
|
|
106
106
|
<button
|
|
107
107
|
className="accordion-Link"
|
|
108
|
-
style={{
|
|
109
|
-
bottom: `calc((${AccordionHeight} - 12rem - 5px) * -1 )`,
|
|
110
|
-
zIndex: "100",
|
|
111
|
-
isolation: "isolate",
|
|
112
|
-
}}
|
|
113
108
|
onClick={(e) => {
|
|
114
109
|
e.stopPropagation();
|
|
115
110
|
onClick({ id: item.id, title: item.title });
|