@ecodev/natural 57.0.8 → 58.0.0

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/lib/_natural.theme.scss +0 -1
  3. package/src/lib/styles/_layout.scss +0 -368
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ecodev/natural",
3
- "version": "57.0.8",
3
+ "version": "58.0.0",
4
4
  "license": "MIT",
5
5
  "repository": "github:Ecodev/natural",
6
6
  "sideEffects": false,
package/src/lib/_natural.theme.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  @use '@angular/material' as mat;
3
3
 
4
4
  // Non themes
5
- @use 'styles/layout';
6
5
  @use 'styles/table';
7
6
  @use 'modules/panels/panels.external';
8
7
  // Themes
package/src/lib/styles/_layout.scss DELETED
@@ -1,368 +0,0 @@
1
- /**
2
-
3
- Usage :
4
-
5
- <div class="padding">
6
- Padding applied only to element
7
-
8
- <div class="padding-h">
9
- Padding left and right on element
10
-
11
- <div class="padding-v">
12
- Padding top and bottom on element
13
-
14
-
15
- <div class="padding-child">
16
- Padding applied to all immediate children
17
-
18
- <div class="padding-child-h">
19
- Padding left and right applied to all immediate children
20
- Example of children list with padding between : [txt-][-txt-][-txt]
21
-
22
- <div class="padding-child-v">
23
- Padding top and bottom applied to all immediate children
24
-
25
- <div class="padding-child-*-between"> // * can be .h] or [v
26
- Padding is applied between immediate children
27
-
28
-
29
- Same approach width margin. Except between elements, padding are set twice, when margin don't.
30
-
31
- Padding between example : [txt-][-txt-][-txt]
32
- Margin between example : [txt]-[txt]-[txt] (not : [txt]--[txt]--[txt])
33
-
34
- To test copy this in template :
35
-
36
- <style> [test] * {
37
- background: rgba(255, 0, 0, 0.2) !important;
38
- border: 1px solid red !important;
39
- }</style>
40
- <div test class="margin-child-v">
41
-
42
- <!-- Padding test -->
43
- <div layout="row" class="padding">
44
- <div>padding</div>
45
- <div>lorem ipsum</div>
46
- <div>lorem ipsum</div>
47
- </div>
48
-
49
- <div layout="row" class="padding-v">
50
- <div>padding-v</div>
51
- <div>lorem ipsum</div>
52
- <div>lorem ipsum</div>
53
- </div>
54
-
55
- <div layout="row" class="padding-h">
56
- <div>padding-h</div>
57
- <div>lorem ipsum</div>
58
- <div>lorem ipsum</div>
59
- </div>
60
-
61
- <div layout="row" class="padding-child">
62
- <div>padding-child</div>
63
- <div>lorem ipsum</div>
64
- <div>lorem ipsum</div>
65
- </div>
66
-
67
-
68
- <div layout="row" class="padding-child-h">
69
- <div>padding-child-h</div>
70
- <div>lorem ipsum</div>
71
- <div>lorem ipsum</div>
72
- </div>
73
-
74
- <div layout="column" class="padding-child-v">
75
- <div>padding-child-v</div>
76
- <div>lorem ipsum</div>
77
- <div>lorem ipsum</div>
78
- </div>
79
-
80
- <div layout="row" class="padding-child-h-between">
81
- <div>padding-child-h-between</div>
82
- <div>lorem ipsum</div>
83
- <div>lorem ipsum</div>
84
- </div>
85
-
86
- <div layout="column" class="padding-child-v-between">
87
- <div>padding-child-v-between</div>
88
- <div>lorem ipsum</div>
89
- <div>lorem ipsum</div>
90
- </div>
91
-
92
-
93
-
94
-
95
- <!-- Margin test -->
96
- <div layout="row" class="margin">
97
- <div>margin</div>
98
- <div>lorem ipsum</div>
99
- <div>lorem ipsum</div>
100
- </div>
101
-
102
- <div layout="row" class="margin-v">
103
- <div>margin-v</div>
104
- <div>lorem ipsum</div>
105
- <div>lorem ipsum</div>
106
- </div>
107
-
108
- <div layout="row" class="margin-h">
109
- <div>margin-h</div>
110
- <div>lorem ipsum</div>
111
- <div>lorem ipsum</div>
112
- </div>
113
-
114
- <div layout="row" class="margin-child">
115
- <div>margin-child</div>
116
- <div>lorem ipsum</div>
117
- <div>lorem ipsum</div>
118
- </div>
119
-
120
-
121
- <div layout="row" class="margin-child-h">
122
- <div>margin-child-h</div>
123
- <div>lorem ipsum</div>
124
- <div>lorem ipsum</div>
125
- </div>
126
-
127
- <div layout="column" class="margin-child-v">
128
- <div>margin-child-v</div>
129
- <div>lorem ipsum</div>
130
- <div>lorem ipsum</div>
131
- </div>
132
-
133
- <div layout="row" class="margin-child-h-between">
134
- <div>margin-child-h-between</div>
135
- <div>lorem ipsum</div>
136
- <div>lorem ipsum</div>
137
- </div>
138
-
139
- <div layout="column" class="margin-child-v-between">
140
- <div>margin-child-v-between</div>
141
- <div>lorem ipsum</div>
142
- <div>lorem ipsum</div>
143
- </div>
144
- </div>
145
-
146
- */
147
-
148
- $margin-spacing: 20px;
149
-
150
- /**
151
- * ======================================================
152
- * PADDING
153
- * ======================================================
154
- */
155
-
156
- // Parent element
157
-
158
- .padding {
159
- padding: $margin-spacing !important;
160
- }
161
-
162
- .padding-h {
163
- padding-left: $margin-spacing !important;
164
- padding-right: $margin-spacing !important;
165
- }
166
-
167
- .padding-bottom {
168
- padding-bottom: $margin-spacing !important;
169
- }
170
-
171
- .padding-top {
172
- padding-top: $margin-spacing !important;
173
- }
174
-
175
- .padding-right {
176
- padding-right: $margin-spacing !important;
177
- }
178
-
179
- .padding-left {
180
- padding-left: $margin-spacing !important;
181
- }
182
-
183
- .padding-v {
184
- padding-top: $margin-spacing !important;
185
- padding-bottom: $margin-spacing !important;
186
- }
187
-
188
- .no-padding {
189
- padding: 0 !important;
190
- }
191
-
192
- .no-padding-v {
193
- padding-bottom: 0 !important;
194
- padding-top: 0 !important;
195
- }
196
-
197
- .no-padding-h {
198
- padding-left: 0 !important;
199
- padding-right: 0 !important;
200
- }
201
-
202
- .no-padding-right {
203
- padding-right: 0 !important;
204
- }
205
-
206
- .no-padding-top {
207
- padding-top: 0 !important;
208
- }
209
-
210
- .no-padding-left {
211
- padding-left: 0 !important;
212
- }
213
-
214
- .no-padding-bottom {
215
- padding-bottom: 0 !important;
216
- }
217
-
218
- // Children
219
- .padding-child > * {
220
- padding: $margin-spacing !important;
221
- }
222
-
223
- .padding-child-h > * {
224
- padding-left: $margin-spacing !important;
225
- padding-right: $margin-spacing !important;
226
- }
227
-
228
- .padding-child-v > * {
229
- padding-top: $margin-spacing !important;
230
- padding-bottom: $margin-spacing !important;
231
- }
232
-
233
- /**
234
- * ======================================================
235
- * margin
236
- * ======================================================
237
- */
238
-
239
- // Parent element
240
-
241
- .margin {
242
- margin: $margin-spacing !important;
243
- }
244
-
245
- .margin-top {
246
- margin-top: $margin-spacing !important;
247
- }
248
-
249
- .margin-bottom {
250
- margin-bottom: $margin-spacing !important;
251
- }
252
-
253
- .margin-right {
254
- margin-right: $margin-spacing !important;
255
- }
256
-
257
- .margin-left {
258
- margin-left: $margin-spacing !important;
259
- }
260
-
261
- .margin-h {
262
- margin-left: $margin-spacing !important;
263
- margin-right: $margin-spacing !important;
264
- }
265
-
266
- .margin-v {
267
- margin-top: $margin-spacing !important;
268
- margin-bottom: $margin-spacing !important;
269
- }
270
-
271
- .no-margin {
272
- margin: 0 !important;
273
- }
274
-
275
- .no-margin-v {
276
- margin-bottom: 0 !important;
277
- margin-top: 0 !important;
278
- }
279
-
280
- .no-margin-h {
281
- margin-left: 0 !important;
282
- margin-right: 0 !important;
283
- }
284
-
285
- .no-margin-right {
286
- margin-right: 0 !important;
287
- }
288
-
289
- .no-margin-top {
290
- margin-top: 0 !important;
291
- }
292
-
293
- .no-margin-left {
294
- margin-left: 0 !important;
295
- }
296
-
297
- .no-margin-bottom {
298
- margin-bottom: 0 !important;
299
- }
300
-
301
- // Children
302
- .margin-child > * {
303
- margin: $margin-spacing !important;
304
- }
305
-
306
- .margin-child-h > * {
307
- margin-right: $margin-spacing !important;
308
-
309
- &:first-child {
310
- margin-left: $margin-spacing !important;
311
- }
312
- }
313
-
314
- .margin-child-v > * {
315
- margin-bottom: $margin-spacing !important;
316
-
317
- &:first-child {
318
- margin-top: $margin-spacing !important;
319
- }
320
- }
321
-
322
- /**
323
- * ========================================================================
324
- * Probably no need anymore with fxLayoutGap
325
- * ========================================================================
326
- */
327
-
328
- .padding-child-h-between > * {
329
- padding-left: $margin-spacing !important;
330
- padding-right: $margin-spacing !important;
331
-
332
- &:first-child {
333
- padding-left: 0 !important;
334
- }
335
-
336
- &:last-child {
337
- padding-right: 0 !important;
338
- }
339
- }
340
-
341
- .padding-child-v-between > * {
342
- padding-top: $margin-spacing !important;
343
- padding-bottom: $margin-spacing !important;
344
-
345
- &:first-child {
346
- padding-top: 0 !important;
347
- }
348
-
349
- &:last-child {
350
- padding-bottom: 0 !important;
351
- }
352
- }
353
-
354
- .margin-child-h-between > * {
355
- margin-right: $margin-spacing !important;
356
-
357
- &:last-child {
358
- margin-right: 0 !important;
359
- }
360
- }
361
-
362
- .margin-child-v-between > * {
363
- margin-bottom: $margin-spacing !important;
364
-
365
- &:last-child {
366
- margin-bottom: 0 !important;
367
- }
368
- }