@egovernments/digit-ui-components-css 0.0.2-beta.27 → 0.0.2-beta.28

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/index.css +33 -38
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/bottomSheetV2.scss +75 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.27",
3
+ "version": "0.0.2-beta.28",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -1,121 +1,105 @@
1
1
  .digit-bottom-sheet {
2
- position: fixed;
3
- left: 0;
4
- right: 0;
5
- bottom: 0;
6
- transition: height 0.3s ease;
7
- background-color: theme(digitv2.lightTheme.paper-primary);
8
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem theme(digitv2.spacers.spacer1) -0.063rem #00000026;
9
- overflow: hidden;
10
- border-radius: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
11
- display: flex;
12
- flex-direction: column;
13
-
14
- &.full{
15
- border-radius: theme(digitv2.spacers.spacer0);
16
- }
2
+ position: fixed;
3
+ left: 0;
4
+ right: 0;
5
+ bottom: 0;
6
+ transition: height 0.3s ease;
7
+ background-color: theme(digitv2.lightTheme.paper-primary);
8
+ box-shadow: theme(digitv2.spacers.spacer0) -0.063rem theme(digitv2.spacers.spacer1) -0.063rem #00000026;
9
+ overflow: hidden;
10
+ border-radius: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
11
+ display: flex;
12
+ flex-direction: column;
13
+
14
+ &.full {
15
+ border-radius: theme(digitv2.spacers.spacer0);
16
+ }
17
17
  }
18
18
 
19
19
  .digit-bottom-sheet.closed {
20
- height: theme(digitv2.spacers.spacer10);
21
-
22
- &.actionsEnabled {
23
- height: fit-content;
24
- }
25
- }
26
-
27
-
28
- .digit-bottom-sheet.fixed {
29
- height: 30vh;
20
+ &.actionsEnabled {
21
+ height: fit-content;
22
+ }
30
23
  }
31
24
 
32
- .digit-bottom-sheet.quarter {
33
- height: 50vh;
34
- }
25
+ .digit-bottom-sheet-header {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ height: theme(digitv2.spacers.spacer10);
35
30
 
36
- .digit-bottom-sheet.intermediate {
37
- height: 75vh;
31
+ &.actionsEnabled {
32
+ height: theme(digitv2.spacers.spacer6);
33
+ }
38
34
  }
39
35
 
40
- .digit-bottom-sheet.full {
41
- height: calc(100vh - 3.5rem);
36
+ .digit-bottom-sheet-drag-cursor {
37
+ position: absolute;
38
+ top: 0;
39
+ left: 50%;
40
+ transform: translateX(-50%);
41
+ width: 100%;
42
+ height: 100%;
43
+ background-color: transparent;
44
+ cursor: ns-resize;
42
45
  }
43
46
 
44
- .digit-bottom-sheet-header {
45
- display: flex;
46
- justify-content: center;
47
- height: theme(digitv2.spacers.spacer10);
48
- cursor: pointer;
49
-
50
- &.fixed,
51
- &.quarter,
52
- &.intermediate,
53
- &.full{
54
- height: 1.875rem;
55
- }
56
-
57
- &.actionsEnabled {
58
- height: theme(digitv2.spacers.spacer6);
59
- }
47
+ .digit-bottom-sheet-handle-indicator {
48
+ width: 6.25rem;
49
+ height: 0.375rem;
50
+ border-radius: theme(digitv2.spacers.spacer1);
51
+ background-color: #D9D9D9;
52
+ margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
60
53
  }
61
54
 
62
55
  .digit-bottom-sheet-content {
63
- padding: theme(digitv2.spacers.spacer4);
64
- overflow-y: scroll;
65
- display: flex;
66
- flex-direction: column;
67
-
68
- @media (max-aspect-ratio: 9/16) {
69
- gap:theme(digitv2.spacers.spacer4);
70
- }
71
-
72
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
73
- gap:theme(digitv2.spacers.spacer5);
74
- }
75
-
76
- @media (min-aspect-ratio: 3/4) {
77
- gap:theme(digitv2.spacers.spacer6);
78
- }
79
- }
56
+ padding: theme(digitv2.spacers.spacer4);
57
+ overflow-y: scroll;
58
+ display: flex;
59
+ flex-direction: column;
80
60
 
61
+ @media (max-aspect-ratio: 9/16) {
62
+ gap: theme(digitv2.spacers.spacer4);
63
+ }
81
64
 
82
- .digit-bottom-sheet-handle-indicator {
83
- width: 6.25rem;
84
- height: 0.375rem;
85
- border-radius: theme(digitv2.spacers.spacer1);
86
- background-color: #D9D9D9;
87
- margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
65
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
66
+ gap: theme(digitv2.spacers.spacer5);
67
+ }
68
+
69
+ @media (min-aspect-ratio: 3/4) {
70
+ gap: theme(digitv2.spacers.spacer6);
71
+ }
88
72
  }
89
73
 
90
74
  .digit-bottom-sheet-actions {
91
- padding: theme(digitv2.spacers.spacer4);
92
- display: flex;
93
- gap: theme(digitv2.spacers.spacer6);
94
- background-color: #FFFFFF;
95
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
96
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
97
- justify-content: flex-end;
98
-
99
- &.equallButtons{
100
- justify-content: flex-start;
101
- button {
102
- flex: 1;
75
+ padding: theme(digitv2.spacers.spacer4);
76
+ display: flex;
77
+ gap: theme(digitv2.spacers.spacer6);
78
+ background-color: #FFFFFF;
79
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
80
+ box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
81
+ justify-content: flex-end;
82
+
83
+ &.equalButtons {
84
+ justify-content: flex-start;
85
+
86
+ button {
87
+ flex: 1;
88
+ }
103
89
  }
104
- }
105
-
106
90
  }
107
91
 
108
92
  .digit-bottom-sheet-content::-webkit-scrollbar {
109
- width: 0.375rem;
110
- background-color: theme(digitv2.lightTheme.generic-background);
93
+ width: 0.375rem;
94
+ background-color: theme(digitv2.lightTheme.generic-background);
111
95
  }
112
96
 
113
97
  .digit-bottom-sheet-content::-webkit-scrollbar-track {
114
- background-color: theme(digitv2.lightTheme.generic-background);
115
- border-radius: 0.563rem;
98
+ background-color: theme(digitv2.lightTheme.generic-background);
99
+ border-radius: 0.563rem;
116
100
  }
117
101
 
118
102
  .digit-bottom-sheet-content::-webkit-scrollbar-thumb {
119
- background-color: theme(digitv2.lightTheme.generic-divider);
120
- border-radius: 0.563rem;
103
+ background-color: theme(digitv2.lightTheme.generic-divider);
104
+ border-radius: 0.563rem;
121
105
  }