@sproutsocial/racine 8.6.0 → 8.6.1-collapsible-fix.0
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.
|
@@ -10,29 +10,27 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
|
|
|
10
10
|
will-change: max-height;
|
|
11
11
|
position: relative;
|
|
12
12
|
overflow: auto;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
linear-gradient(
|
|
18
|
-
rgba(255, 255, 255, 0),
|
|
19
|
-
${(p) => p.theme.colors.neutral[100]} 70%
|
|
20
|
-
)
|
|
21
|
-
0 100%,
|
|
22
|
-
/* Shadows */
|
|
23
|
-
radial-gradient(
|
|
24
|
-
farthest-side at 50% 0,
|
|
25
|
-
rgb(39 51 51 / 5%),
|
|
26
|
-
rgba(0, 0, 0, 0)
|
|
13
|
+
&.minimum {
|
|
14
|
+
background: /* Shadow covers */ linear-gradient(
|
|
15
|
+
transparent 30%,
|
|
16
|
+
rgba(255, 255, 255, 0)
|
|
27
17
|
),
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
18
|
+
linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
|
|
19
|
+
/* Shadows */
|
|
20
|
+
radial-gradient(
|
|
21
|
+
farthest-side at 50% 0,
|
|
22
|
+
rgb(39 51 51 / 5%),
|
|
23
|
+
rgba(0, 0, 0, 0)
|
|
24
|
+
),
|
|
25
|
+
radial-gradient(
|
|
26
|
+
farthest-side at 50% 100%,
|
|
27
|
+
rgb(39 51 51 / 5%),
|
|
28
|
+
rgba(0, 0, 0, 0)
|
|
29
|
+
)
|
|
30
|
+
0 100%;
|
|
31
|
+
background-repeat: no-repeat;
|
|
32
|
+
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
|
|
33
|
+
background-attachment: local, local, scroll, scroll;
|
|
34
|
+
${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
|
|
35
|
+
}
|
|
38
36
|
`;
|
|
@@ -118,6 +118,7 @@ var Panel = function Panel(_ref3) {
|
|
|
118
118
|
}
|
|
119
119
|
}, [isOpen]);
|
|
120
120
|
return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
|
|
121
|
+
className: collapsedHeight > 0 ? "minimum" : "",
|
|
121
122
|
scrollable: isOpen,
|
|
122
123
|
maxHeight: isOpen ? maxHeight : collapsedHeight,
|
|
123
124
|
minHeight: collapsedHeight,
|
|
@@ -12,14 +12,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
12
12
|
var CollapsingBox = (0, _styledComponents.default)(_Box.default).withConfig({
|
|
13
13
|
displayName: "styles__CollapsingBox",
|
|
14
14
|
componentId: "sc-1xvfbl7-0"
|
|
15
|
-
})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto
|
|
15
|
+
})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;&.minimum{background:linear-gradient( transparent 30%,rgba(255,255,255,0) ),linear-gradient(rgba(255,255,255,0),transparent 70%) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";}"], function (p) {
|
|
16
16
|
return p.theme.duration.medium;
|
|
17
17
|
}, function (p) {
|
|
18
18
|
return p.theme.easing.ease_inout;
|
|
19
|
-
}, function (p) {
|
|
20
|
-
return p.theme.colors.neutral[100];
|
|
21
|
-
}, function (p) {
|
|
22
|
-
return p.theme.colors.neutral[100];
|
|
23
19
|
}, function (_ref) {
|
|
24
20
|
var scrollable = _ref.scrollable;
|
|
25
21
|
return scrollable ? "overflow: auto" : "overflow: hidden";
|
package/lib/Collapsible/index.js
CHANGED
|
@@ -104,6 +104,7 @@ var Panel = function Panel(_ref3) {
|
|
|
104
104
|
}
|
|
105
105
|
}, [isOpen]);
|
|
106
106
|
return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
|
|
107
|
+
className: collapsedHeight > 0 ? "minimum" : "",
|
|
107
108
|
scrollable: isOpen,
|
|
108
109
|
maxHeight: isOpen ? maxHeight : collapsedHeight,
|
|
109
110
|
minHeight: collapsedHeight,
|
|
@@ -3,14 +3,10 @@ import Box from "../Box";
|
|
|
3
3
|
export var CollapsingBox = styled(Box).withConfig({
|
|
4
4
|
displayName: "styles__CollapsingBox",
|
|
5
5
|
componentId: "sc-1xvfbl7-0"
|
|
6
|
-
})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto
|
|
6
|
+
})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;&.minimum{background:linear-gradient( transparent 30%,rgba(255,255,255,0) ),linear-gradient(rgba(255,255,255,0),transparent 70%) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";}"], function (p) {
|
|
7
7
|
return p.theme.duration.medium;
|
|
8
8
|
}, function (p) {
|
|
9
9
|
return p.theme.easing.ease_inout;
|
|
10
|
-
}, function (p) {
|
|
11
|
-
return p.theme.colors.neutral[100];
|
|
12
|
-
}, function (p) {
|
|
13
|
-
return p.theme.colors.neutral[100];
|
|
14
10
|
}, function (_ref) {
|
|
15
11
|
var scrollable = _ref.scrollable;
|
|
16
12
|
return scrollable ? "overflow: auto" : "overflow: hidden";
|