@purpurds/drawer 6.11.1 → 6.12.1
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/LICENSE.txt +4 -4
- package/dist/drawer-content.d.ts.map +1 -1
- package/dist/drawer.cjs.js +7 -7
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +5 -4
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +7 -7
- package/src/drawer-container.module.scss +27 -5
- package/src/drawer-content.tsx +1 -0
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-drawer-content_1xk2s_1{animation:_drawerSmallScreenAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;right:0;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}._purpur-drawer-content--fit-to-content_1xk2s_12{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_1xk2s_1{animation:_drawerLargeScreenAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_1xk2s_12{max-height:100vh;max-height:100dvh}}._purpur-drawer-content_1xk2s_1:focus{outline:none}._purpur-drawer-content__content-container_1xk2s_35{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=end]{animation:_slideDown_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_1xk2s_50{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_1xk2s_61{animation:_overlayAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_1xk2s_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_1xk2s_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_1xk2s_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_1xk2s_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--
|
|
1
|
+
._purpur-drawer-content_1xk2s_1{animation:_drawerSmallScreenAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;right:0;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}._purpur-drawer-content--fit-to-content_1xk2s_12{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_1xk2s_1{animation:_drawerLargeScreenAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_1xk2s_12{max-height:100vh;max-height:100dvh}}._purpur-drawer-content_1xk2s_1:focus{outline:none}._purpur-drawer-content__content-container_1xk2s_35{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=end]{animation:_slideDown_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_1xk2s_50{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_1xk2s_61{animation:_overlayAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_1xk2s_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_1xk2s_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_1xk2s_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_1xk2s_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-150);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}@media screen and (min-width: 600px){._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}}._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}}._purpur-drawer-frame_1gdvv_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_1gdvv_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_1gdvv_17{gap:0}._purpur-drawer-frame__header_1gdvv_20{flex:0 0 auto}._purpur-drawer-frame__body_1gdvv_23{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1gdvv_27{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1gdvv_27 ._purpur-drawer-frame__body_1gdvv_23{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1gdvv_36{flex:0 0 auto}._purpur-drawer-frame__content-container_1gdvv_39{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1gdvv_44{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1r0fa_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1r0fa_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1r0fa_10{height:100%}._purpur-drawer-scroll-area__scrollbar_1r0fa_13{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1r0fa_24{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1r0fa_24:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/drawer",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.12.1",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/drawer.cjs.js",
|
|
6
6
|
"types": "./dist/drawer.d.ts",
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
"@radix-ui/react-dialog": "~1.1.6",
|
|
19
19
|
"@radix-ui/react-scroll-area": "~1.2.3",
|
|
20
20
|
"classnames": "~2.5.0",
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/paragraph": "6.
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
26
|
-
"@purpurds/
|
|
21
|
+
"@purpurds/heading": "6.12.1",
|
|
22
|
+
"@purpurds/paragraph": "6.12.1",
|
|
23
|
+
"@purpurds/tokens": "6.12.1",
|
|
24
|
+
"@purpurds/button": "6.12.1",
|
|
25
|
+
"@purpurds/icon": "6.12.1",
|
|
26
|
+
"@purpurds/visually-hidden": "6.12.1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"eslint": "9.24.0",
|
|
@@ -1,24 +1,46 @@
|
|
|
1
|
+
@use "@purpurds/tokens/breakpoint/variables" as *;
|
|
2
|
+
|
|
1
3
|
.purpur-drawer-container {
|
|
2
4
|
$root: &;
|
|
3
5
|
&--header {
|
|
4
|
-
padding: var(--purpur-spacing-
|
|
6
|
+
padding: var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-150);
|
|
5
7
|
border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
|
|
8
|
+
|
|
9
|
+
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
10
|
+
padding: var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-200);
|
|
11
|
+
}
|
|
6
12
|
}
|
|
7
13
|
|
|
8
14
|
&--body {
|
|
9
|
-
padding: var(--purpur-spacing-
|
|
15
|
+
padding: var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0;
|
|
16
|
+
|
|
17
|
+
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
18
|
+
padding: var(--purpur-spacing-400) var(--purpur-spacing-300) 0;
|
|
19
|
+
}
|
|
10
20
|
|
|
11
21
|
&#{$root}--sticky {
|
|
12
|
-
padding: var(--purpur-spacing-
|
|
22
|
+
padding: var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm);
|
|
23
|
+
|
|
24
|
+
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
25
|
+
padding: var(--purpur-spacing-400) var(--purpur-spacing-300);
|
|
26
|
+
}
|
|
13
27
|
}
|
|
14
28
|
}
|
|
15
29
|
|
|
16
30
|
&--footer {
|
|
17
|
-
padding: 0 var(--purpur-spacing-
|
|
31
|
+
padding: 0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200);
|
|
32
|
+
|
|
33
|
+
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
34
|
+
padding: 0 var(--purpur-spacing-300) var(--purpur-spacing-200);
|
|
35
|
+
}
|
|
18
36
|
|
|
19
37
|
&#{$root}--sticky {
|
|
20
38
|
border-top: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
|
|
21
|
-
padding: var(--purpur-spacing-200) var(--purpur-spacing-
|
|
39
|
+
padding: var(--purpur-spacing-200) var(--purpur-spacing-page-padding-sm);
|
|
40
|
+
|
|
41
|
+
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
42
|
+
padding: var(--purpur-spacing-200) var(--purpur-spacing-300);
|
|
43
|
+
}
|
|
22
44
|
}
|
|
23
45
|
}
|
|
24
46
|
}
|