@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/stack/styles.css CHANGED
@@ -1,167 +1,167 @@
1
- .lx-layout-stack {
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-stack {
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: flex;
8
8
  }
9
- .lx-layout-stack.lx-layout-direction-x {
9
+ .frg-layout-stack.frg-layout-direction-x {
10
10
  flex-direction: row;
11
11
  }
12
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-left {
12
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-left {
13
13
  justify-content: flex-start;
14
14
  }
15
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-center {
15
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-center {
16
16
  justify-content: center;
17
17
  }
18
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-right {
18
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-right {
19
19
  justify-content: flex-end;
20
20
  }
21
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceBetween {
21
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-spaceBetween {
22
22
  justify-content: space-between;
23
23
  }
24
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceAround {
24
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-spaceAround {
25
25
  justify-content: space-around;
26
26
  }
27
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceEvenly {
27
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-spaceEvenly {
28
28
  justify-content: space-evenly;
29
29
  }
30
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-top {
30
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignY-top {
31
31
  align-items: flex-start;
32
32
  }
33
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-middle {
33
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignY-middle {
34
34
  align-items: center;
35
35
  }
36
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-bottom {
36
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignY-bottom {
37
37
  align-items: flex-end;
38
38
  }
39
- .lx-layout-stack.lx-layout-direction-x > * {
39
+ .frg-layout-stack.frg-layout-direction-x > * {
40
40
  flex-grow: 0;
41
41
  flex-shrink: 0;
42
42
  min-width: 0;
43
43
  min-height: 0;
44
44
  }
45
- .lx-layout-stack.lx-layout-direction-x.lx-layout-itemSizeX > * {
46
- flex-basis: var(--lx-layout-itemSizeX);
45
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-itemSizeX > * {
46
+ flex-basis: var(--frg-layout-itemSizeX);
47
47
  }
48
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit {
48
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-fit {
49
49
  justify-content: flex-start;
50
50
  }
51
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit > * {
51
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-fit > * {
52
52
  flex-grow: 1;
53
53
  flex-shrink: 1;
54
54
  flex-basis: auto;
55
55
  }
56
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
57
- flex-basis: var(--lx-layout-itemSizeX);
56
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX > * {
57
+ flex-basis: var(--frg-layout-itemSizeX);
58
58
  }
59
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-grow > * {
59
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-grow > * {
60
60
  flex-grow: 1;
61
61
  }
62
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
62
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
63
63
  flex-shrink: 1;
64
64
  }
65
- .lx-layout-stack.lx-layout-direction-x.lx-layout-itemSizeY > * {
66
- height: var(--lx-layout-itemSizeY);
65
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-itemSizeY > * {
66
+ height: var(--frg-layout-itemSizeY);
67
67
  }
68
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit {
68
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-fit {
69
69
  align-items: stretch;
70
70
  }
71
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit > * {
71
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-fit > * {
72
72
  min-height: 100%;
73
73
  max-height: 100%;
74
74
  }
75
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
75
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-fit.frg-layout-itemSizeY > * {
76
76
  height: auto;
77
77
  }
78
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-grow > * {
78
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-grow > * {
79
79
  min-height: 100%;
80
80
  }
81
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
81
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
82
82
  max-height: 100%;
83
83
  }
84
- .lx-layout-stack.lx-layout-direction-y {
84
+ .frg-layout-stack.frg-layout-direction-y {
85
85
  flex-direction: column;
86
86
  }
87
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-left {
87
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignX-left {
88
88
  align-items: flex-start;
89
89
  }
90
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-center {
90
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignX-center {
91
91
  align-items: center;
92
92
  }
93
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-right {
93
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignX-right {
94
94
  align-items: flex-end;
95
95
  }
96
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-top {
96
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-top {
97
97
  justify-content: flex-start;
98
98
  }
99
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-middle {
99
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-middle {
100
100
  justify-content: center;
101
101
  }
102
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-bottom {
102
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-bottom {
103
103
  justify-content: flex-end;
104
104
  }
105
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceBetween {
105
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-spaceBetween {
106
106
  justify-content: space-between;
107
107
  }
108
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceAround {
108
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-spaceAround {
109
109
  justify-content: space-around;
110
110
  }
111
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceEvenly {
111
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-spaceEvenly {
112
112
  justify-content: space-evenly;
113
113
  }
114
- .lx-layout-stack.lx-layout-direction-y > * {
114
+ .frg-layout-stack.frg-layout-direction-y > * {
115
115
  flex-grow: 0;
116
116
  flex-shrink: 0;
117
117
  min-width: 0;
118
118
  min-height: 0;
119
119
  }
120
- .lx-layout-stack.lx-layout-direction-y.lx-layout-itemSizeX > * {
121
- width: var(--lx-layout-itemSizeX);
120
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-itemSizeX > * {
121
+ width: var(--frg-layout-itemSizeX);
122
122
  }
123
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit {
123
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-fit {
124
124
  align-items: stretch;
125
125
  }
126
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit > * {
126
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-fit > * {
127
127
  min-width: 100%;
128
128
  max-width: 100%;
129
129
  }
130
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
130
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-fit.frg-layout-itemSizeX > * {
131
131
  width: auto;
132
132
  }
133
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-grow > * {
133
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-grow > * {
134
134
  min-width: 100%;
135
135
  }
136
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
136
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
137
137
  max-width: 100%;
138
138
  }
139
- .lx-layout-stack.lx-layout-direction-y.lx-layout-itemSizeY > * {
140
- flex-basis: var(--lx-layout-itemSizeY);
139
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-itemSizeY > * {
140
+ flex-basis: var(--frg-layout-itemSizeY);
141
141
  }
142
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit {
142
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-fit {
143
143
  justify-content: flex-start;
144
144
  }
145
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit > * {
145
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-fit > * {
146
146
  flex-grow: 1;
147
147
  flex-shrink: 1;
148
148
  flex-basis: auto;
149
149
  }
150
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
151
- flex-basis: var(--lx-layout-itemSizeY);
150
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY > * {
151
+ flex-basis: var(--frg-layout-itemSizeY);
152
152
  }
153
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-grow > * {
153
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-grow > * {
154
154
  flex-grow: 1;
155
155
  }
156
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
156
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
157
157
  flex-shrink: 1;
158
158
  }
159
- .lx-layout-stack.lx-layout-itemRatio > * {
160
- aspect-ratio: var(--lx-layout-itemRatio);
159
+ .frg-layout-stack.frg-layout-itemRatio > * {
160
+ aspect-ratio: var(--frg-layout-itemRatio);
161
161
  }
162
- .lx-layout-stack.lx-layout-gapX {
163
- column-gap: var(--lx-layout-gapX);
162
+ .frg-layout-stack.frg-layout-gapX {
163
+ column-gap: var(--frg-layout-gapX);
164
164
  }
165
- .lx-layout-stack.lx-layout-gapY {
166
- row-gap: var(--lx-layout-gapY);
165
+ .frg-layout-stack.frg-layout-gapY {
166
+ row-gap: var(--frg-layout-gapY);
167
167
  }