@purpurds/drawer 7.0.0 → 7.2.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.
- package/dist/LICENSE.txt +4 -4
- package/dist/drawer.cjs.js +9 -9
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +216 -216
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +7 -7
- package/src/drawer-content.module.scss +14 -5
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-drawer-
|
|
1
|
+
._purpur-drawer-content_5mlbf_1{bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;right:0;width:100%}@media (prefers-reduced-motion: no-preference){._purpur-drawer-content_5mlbf_1{animation:_drawerSmallScreenAnimation_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--fit-to-content_5mlbf_16{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_5mlbf_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_5mlbf_16{max-height:100vh;max-height:100dvh}}@media screen and (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-drawer-content_5mlbf_1{animation:_drawerLargeScreenAnimation_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_5mlbf_1:focus{outline:none}._purpur-drawer-content__content-container_5mlbf_43{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_5mlbf_48[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_5mlbf_48[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_5mlbf_48[data-swipe=end]{animation:_slideDown_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_5mlbf_58{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_5mlbf_69{background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed}@media (prefers-reduced-motion: no-preference){._purpur-drawer-overlay_5mlbf_69{animation:_overlayAnimation_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}@keyframes _slideDown_5mlbf_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_5mlbf_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_5mlbf_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_5mlbf_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": "7.
|
|
3
|
+
"version": "7.2.0",
|
|
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/
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/button": "7.
|
|
25
|
-
"@purpurds/
|
|
26
|
-
"@purpurds/
|
|
21
|
+
"@purpurds/heading": "7.2.0",
|
|
22
|
+
"@purpurds/icon": "7.2.0",
|
|
23
|
+
"@purpurds/paragraph": "7.2.0",
|
|
24
|
+
"@purpurds/button": "7.2.0",
|
|
25
|
+
"@purpurds/tokens": "7.2.0",
|
|
26
|
+
"@purpurds/visually-hidden": "7.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"eslint": "9.24.0",
|
|
@@ -3,16 +3,19 @@
|
|
|
3
3
|
$animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
|
|
4
4
|
|
|
5
5
|
.purpur-drawer-content {
|
|
6
|
-
animation: drawerSmallScreenAnimation $animation-settings;
|
|
7
6
|
bottom: 0;
|
|
8
7
|
height: 90vh; /* Fallback for older browsers */
|
|
9
8
|
height: 90dvh;
|
|
10
9
|
max-width: 100%;
|
|
11
10
|
position: absolute;
|
|
12
11
|
right: 0;
|
|
13
|
-
transition: transform $animation-settings;
|
|
14
12
|
width: 100%;
|
|
15
13
|
|
|
14
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
15
|
+
animation: drawerSmallScreenAnimation $animation-settings;
|
|
16
|
+
transition: transform $animation-settings;
|
|
17
|
+
}
|
|
18
|
+
|
|
16
19
|
&--fit-to-content {
|
|
17
20
|
display: flex;
|
|
18
21
|
flex-direction: column;
|
|
@@ -22,7 +25,6 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
22
25
|
}
|
|
23
26
|
|
|
24
27
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
25
|
-
animation: drawerLargeScreenAnimation $animation-settings;
|
|
26
28
|
height: 100vh; /* Fallback for older browsers */
|
|
27
29
|
height: 100dvh;
|
|
28
30
|
max-width: calc(30rem * var(--purpur-rescale));
|
|
@@ -32,6 +34,10 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
32
34
|
max-height: 100vh; /* Fallback for older browsers */
|
|
33
35
|
max-height: 100dvh;
|
|
34
36
|
}
|
|
37
|
+
|
|
38
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
39
|
+
animation: drawerLargeScreenAnimation $animation-settings;
|
|
40
|
+
}
|
|
35
41
|
}
|
|
36
42
|
|
|
37
43
|
&:focus {
|
|
@@ -72,11 +78,14 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
.purpur-drawer-overlay {
|
|
75
|
-
animation: overlayAnimation $animation-settings;
|
|
76
81
|
background: var(--purpur-color-overlay-default);
|
|
77
82
|
inset: 0;
|
|
78
83
|
position: fixed;
|
|
79
|
-
|
|
84
|
+
|
|
85
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
86
|
+
animation: overlayAnimation $animation-settings;
|
|
87
|
+
transition: opacity $animation-settings;
|
|
88
|
+
}
|
|
80
89
|
}
|
|
81
90
|
|
|
82
91
|
@keyframes slideDown {
|