@bigtablet/design-system 1.6.0 → 1.6.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.
Files changed (2) hide show
  1. package/dist/index.css +58 -6
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -50,6 +50,24 @@
50
50
  }
51
51
 
52
52
  /* src/ui/feedback/alert/style.scss */
53
+ @keyframes fade_in {
54
+ from {
55
+ opacity: 0;
56
+ }
57
+ to {
58
+ opacity: 1;
59
+ }
60
+ }
61
+ @keyframes slide_up {
62
+ from {
63
+ opacity: 0;
64
+ transform: translateY(20px);
65
+ }
66
+ to {
67
+ opacity: 1;
68
+ transform: translateY(0);
69
+ }
70
+ }
53
71
  .alert_overlay {
54
72
  position: fixed;
55
73
  inset: 0;
@@ -73,6 +91,7 @@
73
91
  font-size: 1.125rem;
74
92
  line-height: 1.5;
75
93
  font-weight: 600;
94
+ color: #3b82f6;
76
95
  padding: 0.75rem 1.25rem 0.25rem;
77
96
  }
78
97
  .alert_modal_message {
@@ -81,11 +100,12 @@
81
100
  line-height: 1.5;
82
101
  color: #666666;
83
102
  padding: 1.25rem;
84
- line-height: 1.6;
103
+ line-height: 1.75;
85
104
  }
86
105
  .alert_modal_actions {
87
106
  display: flex;
88
107
  gap: 0.5rem;
108
+ align-items: center;
89
109
  padding: 0 1.25rem 1.25rem;
90
110
  }
91
111
  .alert_modal_actions_left {
@@ -104,47 +124,79 @@
104
124
  font-weight: 600;
105
125
  cursor: pointer;
106
126
  border: 1px solid transparent;
107
- transition: 0.2s ease-out;
127
+ line-height: 1.5;
128
+ transition:
129
+ background 0.2s ease-out,
130
+ border-color 0.2s ease-out,
131
+ box-shadow 0.2s ease-out,
132
+ transform 0.2s ease-out;
108
133
  }
109
134
  .alert_modal_button:focus-visible {
110
- outline: 2px solid rgba(0, 0, 0, 0.08);
135
+ outline: none;
136
+ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
137
+ }
138
+ .alert_modal_button:active:not(:disabled) {
139
+ transform: scale(0.98);
140
+ }
141
+ .alert_modal_button:disabled {
142
+ cursor: not-allowed;
143
+ opacity: 0.6;
111
144
  }
112
145
  .alert_modal_button_cancel {
113
146
  background: #ffffff;
114
147
  border-color: #e5e5e5;
115
148
  color: #1a1a1a;
116
149
  }
117
- .alert_modal_button_cancel:hover {
150
+ .alert_modal_button_cancel:hover:not(:disabled) {
118
151
  background: #fafafa;
152
+ border-color: rgba(0, 0, 0, 0.08);
119
153
  }
120
154
  .alert_modal_button_confirm {
121
155
  color: #ffffff;
122
156
  }
123
- .alert_modal {
124
- }
125
157
  .alert_modal_info .alert_modal_title {
126
158
  color: #3b82f6;
127
159
  }
128
160
  .alert_modal_info .alert_modal_button_confirm {
129
161
  background: #3b82f6;
162
+ border-color: #3b82f6;
163
+ }
164
+ .alert_modal_info .alert_modal_button_confirm:hover:not(:disabled) {
165
+ background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
166
+ border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
130
167
  }
131
168
  .alert_modal_success .alert_modal_title {
132
169
  color: #10b981;
133
170
  }
134
171
  .alert_modal_success .alert_modal_button_confirm {
135
172
  background: #10b981;
173
+ border-color: #10b981;
174
+ }
175
+ .alert_modal_success .alert_modal_button_confirm:hover:not(:disabled) {
176
+ background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
177
+ border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
136
178
  }
137
179
  .alert_modal_warning .alert_modal_title {
138
180
  color: #f59e0b;
139
181
  }
140
182
  .alert_modal_warning .alert_modal_button_confirm {
141
183
  background: #f59e0b;
184
+ border-color: #f59e0b;
185
+ }
186
+ .alert_modal_warning .alert_modal_button_confirm:hover:not(:disabled) {
187
+ background: rgb(216.525984252, 139.3220472441, 8.874015748);
188
+ border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
142
189
  }
143
190
  .alert_modal_error .alert_modal_title {
144
191
  color: #ef4444;
145
192
  }
146
193
  .alert_modal_error .alert_modal_button_confirm {
147
194
  background: #ef4444;
195
+ border-color: #ef4444;
196
+ }
197
+ .alert_modal_error .alert_modal_button_confirm:hover:not(:disabled) {
198
+ background: rgb(236.5881773399, 39.8118226601, 39.8118226601);
199
+ border-color: rgb(236.5881773399, 39.8118226601, 39.8118226601);
148
200
  }
149
201
 
150
202
  /* src/ui/feedback/loading/style.scss */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigtablet/design-system",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "description": "Bigtablet Design System UI Components",
5
5
  "type": "module",
6
6
  "types": "dist/index.d.ts",