@rpgjs/ui-css 5.0.0-beta.4 → 5.0.0-beta.6

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rpgjs/ui-css",
3
- "version": "5.0.0-beta.4",
3
+ "version": "5.0.0-beta.6",
4
4
  "description": "CSS library for RPG UI components - framework-agnostic and fully customizable",
5
5
  "license": "MIT",
6
6
  "author": "Samuel Ronce",
@@ -25,18 +25,28 @@
25
25
  }
26
26
 
27
27
  .rpg-ui-dialog-container[data-full-width="false"] .rpg-ui-dialog {
28
+ width: min(720px, 100%);
29
+ max-width: 100%;
28
30
  margin-left: auto;
29
31
  margin-right: auto;
30
32
  }
31
33
 
32
34
  .rpg-ui-dialog {
35
+ --rpg-ui-dialog-min-height: 256px;
36
+ --rpg-ui-dialog-padding: 24px;
37
+ --rpg-ui-dialog-face-margin: 8px;
38
+ --rpg-ui-dialog-face-size: calc(
39
+ var(--rpg-ui-dialog-min-height) -
40
+ var(--rpg-ui-dialog-padding) * 2 -
41
+ var(--rpg-ui-dialog-face-margin) * 2
42
+ );
33
43
  background: var(--rpg-ui-surface);
34
44
  border: 4px solid var(--rpg-ui-border);
35
45
  border-radius: var(--rpg-ui-radius-lg);
36
- padding: 24px;
46
+ padding: var(--rpg-ui-dialog-padding);
37
47
  position: relative;
38
48
  box-shadow: var(--rpg-ui-shadow-lg);
39
- min-height: 256px;
49
+ min-height: var(--rpg-ui-dialog-min-height);
40
50
  display: flex;
41
51
  flex-direction: column;
42
52
  margin-top: 24px;
@@ -116,20 +126,26 @@
116
126
  justify-content: flex-start;
117
127
  flex-direction: row;
118
128
  flex-wrap: nowrap;
129
+ flex: 1 1 auto;
119
130
  min-height: 128px;
120
131
  width: 100%;
121
132
  }
122
133
 
134
+ .rpg-ui-dialog-body > :first-child {
135
+ flex: 1 1 auto;
136
+ min-width: 0;
137
+ }
138
+
123
139
  .rpg-ui-dialog-face {
124
140
  flex: 0 0 auto;
125
- width: 96px;
126
- height: 96px;
127
- align-self: flex-start;
128
- border-radius: var(--rpg-ui-radius-sm);
141
+ width: var(--rpg-ui-dialog-face-size);
142
+ height: var(--rpg-ui-dialog-face-size);
143
+ align-self: center;
144
+ margin: var(--rpg-ui-dialog-face-margin) 0;
129
145
  overflow: hidden;
130
- background: var(--rpg-ui-border-dark);
131
- border: 2px solid var(--rpg-ui-border);
132
- box-shadow: var(--rpg-ui-shadow);
146
+ background: transparent;
147
+ border: 0;
148
+ box-shadow: none;
133
149
  display: flex;
134
150
  align-items: center;
135
151
  justify-content: center;
@@ -264,6 +264,7 @@
264
264
  }
265
265
 
266
266
  .rpg-ui-dialog {
267
+ --rpg-ui-dialog-min-height: 220px;
267
268
  min-height: 220px;
268
269
  }
269
270
 
@@ -282,9 +283,9 @@
282
283
  }
283
284
 
284
285
  .rpg-ui-dialog-face {
285
- border-width: 1px;
286
- border-color: rgba(255, 255, 255, 0.1);
287
- background: rgba(0, 0, 0, 0.28);
286
+ border: 0;
287
+ background: transparent;
288
+ box-shadow: none;
288
289
  }
289
290
 
290
291
  .rpg-ui-dialog-indicator {