@fringeworks/style-layouts 0.8.0 → 0.8.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 (31) hide show
  1. package/README.ja.md +3 -3
  2. package/README.md +3 -3
  3. package/_constants.cjs +49 -49
  4. package/_constants.d.cts +55 -55
  5. package/_constants.d.mts +55 -55
  6. package/_constants.mjs +49 -49
  7. package/balance/styles.css +55 -55
  8. package/center/styles.css +59 -59
  9. package/flow/styles.css +60 -60
  10. package/helpers/extractBalanceOptions.d.cts +1 -1
  11. package/helpers/extractBalanceOptions.d.mts +1 -1
  12. package/helpers/extractCenterOptions.d.cts +1 -1
  13. package/helpers/extractCenterOptions.d.mts +1 -1
  14. package/helpers/extractFlowOptions.d.cts +1 -1
  15. package/helpers/extractFlowOptions.d.mts +1 -1
  16. package/helpers/extractLayerOptions.d.cts +1 -1
  17. package/helpers/extractLayerOptions.d.mts +1 -1
  18. package/helpers/extractMatrixOptions.d.cts +1 -1
  19. package/helpers/extractMatrixOptions.d.mts +1 -1
  20. package/helpers/extractStackOptions.d.cts +1 -1
  21. package/helpers/extractStackOptions.d.mts +1 -1
  22. package/helpers/extractTileOptions.d.cts +1 -1
  23. package/helpers/extractTileOptions.d.mts +1 -1
  24. package/layer/styles.css +27 -27
  25. package/matrix/styles.css +82 -82
  26. package/pack/styles.css +13 -13
  27. package/package.json +1 -1
  28. package/pin/styles.css +11 -11
  29. package/stack/styles.css +64 -64
  30. package/styles.css +453 -453
  31. package/tile/styles.css +82 -82
package/tile/styles.css CHANGED
@@ -1,181 +1,181 @@
1
- .lx-layout-tile {
2
- --lx-layout-gapX: 0px;
3
- --lx-layout-gapY: 0px;
4
- --lx-layout-itemSizeX: auto;
5
- --lx-layout-itemSizeY: auto;
6
- --lx-layout-itemRatio: auto;
1
+ .frg-layout-tile {
2
+ --frg-layout-gapX: 0px;
3
+ --frg-layout-gapY: 0px;
4
+ --frg-layout-itemSizeX: auto;
5
+ --frg-layout-itemSizeY: auto;
6
+ --frg-layout-itemRatio: auto;
7
7
  display: grid;
8
8
  }
9
- .lx-layout-tile > * {
9
+ .frg-layout-tile > * {
10
10
  min-width: 0;
11
11
  min-height: 0;
12
12
  }
13
- .lx-layout-tile.lx-layout-direction-x {
13
+ .frg-layout-tile.frg-layout-direction-x {
14
14
  grid-auto-flow: row;
15
15
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
16
16
  }
17
- .lx-layout-tile.lx-layout-direction-x.lx-layout-itemSizeX {
18
- grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
17
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-itemSizeX {
18
+ grid-template-columns: repeat(auto-fit, var(--frg-layout-itemSizeX));
19
19
  }
20
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink {
20
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink {
21
21
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
22
22
  }
23
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
23
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit > *, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow > *, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
24
24
  width: auto;
25
25
  }
26
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX {
27
- grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
26
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX {
27
+ grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeX)), 1fr));
28
28
  }
29
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow.lx-layout-itemSizeX {
30
- grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
29
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow.frg-layout-itemSizeX {
30
+ grid-template-columns: repeat(auto-fit, minmax(var(--frg-layout-itemSizeX), 1fr));
31
31
  }
32
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
33
- grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
32
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
33
+ grid-template-columns: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeX)));
34
34
  }
35
- .lx-layout-tile.lx-layout-direction-x {
35
+ .frg-layout-tile.frg-layout-direction-x {
36
36
  grid-auto-rows: auto;
37
37
  }
38
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit {
38
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-fit {
39
39
  grid-auto-rows: minmax(0, 100%);
40
40
  align-content: stretch;
41
41
  }
42
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit > * {
42
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-fit > * {
43
43
  height: auto;
44
44
  }
45
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow {
45
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow {
46
46
  grid-auto-rows: minmax(auto, 100%);
47
47
  }
48
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow > * {
48
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow > * {
49
49
  max-height: 100%;
50
50
  height: 100%;
51
51
  }
52
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY {
53
- grid-auto-rows: minmax(var(--lx-layout-itemSizeY), 100%);
52
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow.frg-layout-itemSizeY {
53
+ grid-auto-rows: minmax(var(--frg-layout-itemSizeY), 100%);
54
54
  }
55
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
56
- min-height: var(--lx-layout-itemSizeY);
55
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
56
+ min-height: var(--frg-layout-itemSizeY);
57
57
  }
58
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink {
58
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink {
59
59
  grid-auto-rows: minmax(0, auto);
60
60
  }
61
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
61
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
62
62
  min-height: 100%;
63
63
  height: 100%;
64
64
  }
65
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
66
- grid-auto-rows: minmax(0, var(--lx-layout-itemSizeY));
65
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
66
+ grid-auto-rows: minmax(0, var(--frg-layout-itemSizeY));
67
67
  }
68
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
69
- max-height: var(--lx-layout-itemSizeY);
68
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
69
+ max-height: var(--frg-layout-itemSizeY);
70
70
  }
71
- .lx-layout-tile.lx-layout-direction-y {
71
+ .frg-layout-tile.frg-layout-direction-y {
72
72
  grid-auto-flow: column;
73
73
  grid-auto-columns: auto;
74
74
  }
75
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
75
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-fit > *, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow > *, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
76
76
  width: auto;
77
77
  }
78
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit {
78
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-fit {
79
79
  grid-auto-columns: minmax(0, 100%);
80
80
  }
81
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow {
81
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow {
82
82
  grid-auto-columns: minmax(auto, 100%);
83
83
  }
84
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow.lx-layout-itemSizeX {
85
- grid-auto-columns: minmax(var(--lx-layout-itemSizeX), 100%);
84
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow.frg-layout-itemSizeX {
85
+ grid-auto-columns: minmax(var(--frg-layout-itemSizeX), 100%);
86
86
  }
87
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink {
87
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink {
88
88
  grid-auto-columns: minmax(0, auto);
89
89
  }
90
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
91
- grid-auto-columns: minmax(0, var(--lx-layout-itemSizeX));
90
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
91
+ grid-auto-columns: minmax(0, var(--frg-layout-itemSizeX));
92
92
  }
93
- .lx-layout-tile.lx-layout-direction-y {
93
+ .frg-layout-tile.frg-layout-direction-y {
94
94
  grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
95
95
  }
96
- .lx-layout-tile.lx-layout-direction-y.lx-layout-itemSizeY {
97
- grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
96
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-itemSizeY {
97
+ grid-template-rows: repeat(auto-fit, var(--frg-layout-itemSizeY));
98
98
  }
99
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink {
99
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink {
100
100
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
101
101
  }
102
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit {
102
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit {
103
103
  align-content: stretch;
104
104
  }
105
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit > * {
105
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit > * {
106
106
  height: auto;
107
107
  }
108
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY {
109
- grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
108
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY {
109
+ grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeY)), 1fr));
110
110
  }
111
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow > * {
111
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow > * {
112
112
  max-height: 100%;
113
113
  height: 100%;
114
114
  }
115
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY {
116
- grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
115
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow.frg-layout-itemSizeY {
116
+ grid-template-rows: repeat(auto-fit, minmax(var(--frg-layout-itemSizeY), 1fr));
117
117
  }
118
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
119
- min-height: var(--lx-layout-itemSizeY);
118
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
119
+ min-height: var(--frg-layout-itemSizeY);
120
120
  }
121
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
121
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
122
122
  min-height: 100%;
123
123
  height: 100%;
124
124
  }
125
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
126
- grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
125
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
126
+ grid-template-rows: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeY)));
127
127
  }
128
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
129
- max-height: var(--lx-layout-itemSizeY);
128
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
129
+ max-height: var(--frg-layout-itemSizeY);
130
130
  }
131
- .lx-layout-tile.lx-layout-alignX-left {
131
+ .frg-layout-tile.frg-layout-alignX-left {
132
132
  justify-content: flex-start;
133
133
  }
134
- .lx-layout-tile.lx-layout-alignX-center {
134
+ .frg-layout-tile.frg-layout-alignX-center {
135
135
  justify-content: center;
136
136
  }
137
- .lx-layout-tile.lx-layout-alignX-right {
137
+ .frg-layout-tile.frg-layout-alignX-right {
138
138
  justify-content: flex-end;
139
139
  }
140
- .lx-layout-tile.lx-layout-alignX-spaceBetween {
140
+ .frg-layout-tile.frg-layout-alignX-spaceBetween {
141
141
  justify-content: space-between;
142
142
  }
143
- .lx-layout-tile.lx-layout-alignX-spaceAround {
143
+ .frg-layout-tile.frg-layout-alignX-spaceAround {
144
144
  justify-content: space-around;
145
145
  }
146
- .lx-layout-tile.lx-layout-alignX-spaceEvenly {
146
+ .frg-layout-tile.frg-layout-alignX-spaceEvenly {
147
147
  justify-content: space-evenly;
148
148
  }
149
- .lx-layout-tile.lx-layout-alignY-top {
149
+ .frg-layout-tile.frg-layout-alignY-top {
150
150
  align-content: flex-start;
151
151
  }
152
- .lx-layout-tile.lx-layout-alignY-middle {
152
+ .frg-layout-tile.frg-layout-alignY-middle {
153
153
  align-content: center;
154
154
  }
155
- .lx-layout-tile.lx-layout-alignY-bottom {
155
+ .frg-layout-tile.frg-layout-alignY-bottom {
156
156
  align-content: flex-end;
157
157
  }
158
- .lx-layout-tile.lx-layout-alignY-spaceBetween {
158
+ .frg-layout-tile.frg-layout-alignY-spaceBetween {
159
159
  align-content: space-between;
160
160
  }
161
- .lx-layout-tile.lx-layout-alignY-spaceAround {
161
+ .frg-layout-tile.frg-layout-alignY-spaceAround {
162
162
  align-content: space-around;
163
163
  }
164
- .lx-layout-tile.lx-layout-alignY-spaceEvenly {
164
+ .frg-layout-tile.frg-layout-alignY-spaceEvenly {
165
165
  align-content: space-evenly;
166
166
  }
167
- .lx-layout-tile.lx-layout-itemSizeX > * {
168
- width: var(--lx-layout-itemSizeX);
167
+ .frg-layout-tile.frg-layout-itemSizeX > * {
168
+ width: var(--frg-layout-itemSizeX);
169
169
  }
170
- .lx-layout-tile.lx-layout-itemSizeY > * {
171
- height: var(--lx-layout-itemSizeY);
170
+ .frg-layout-tile.frg-layout-itemSizeY > * {
171
+ height: var(--frg-layout-itemSizeY);
172
172
  }
173
- .lx-layout-tile.lx-layout-itemRatio > * {
174
- aspect-ratio: var(--lx-layout-itemRatio);
173
+ .frg-layout-tile.frg-layout-itemRatio > * {
174
+ aspect-ratio: var(--frg-layout-itemRatio);
175
175
  }
176
- .lx-layout-tile.lx-layout-gapX {
177
- column-gap: var(--lx-layout-gapX);
176
+ .frg-layout-tile.frg-layout-gapX {
177
+ column-gap: var(--frg-layout-gapX);
178
178
  }
179
- .lx-layout-tile.lx-layout-gapY {
180
- row-gap: var(--lx-layout-gapY);
179
+ .frg-layout-tile.frg-layout-gapY {
180
+ row-gap: var(--frg-layout-gapY);
181
181
  }