@fundamental-styles/common-css 0.24.0-rc.15 → 0.24.0-rc.18

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/README.md CHANGED
@@ -1,3 +1,3 @@
1
1
  #Fundamental Library Common CSS Package
2
2
 
3
- This package contains Common CSS files
3
+ This package contains Common CSS files. More documentation to come soon...
@@ -0,0 +1,1155 @@
1
+ /*!
2
+ * Fundamental Library Styles v0.24.0-rc.18
3
+ * Copyright (c) 2022 SAP SE or an SAP affiliate company.
4
+ * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
5
+ */
6
+ .sap-col,
7
+ .sap-container,
8
+ .sap-row {
9
+ font-size: var(--sapFontSize);
10
+ line-height: var(--sapContent_LineHeight);
11
+ color: var(--sapTextColor);
12
+ font-family: var(--sapFontFamily);
13
+ font-weight: 400;
14
+ -webkit-box-sizing: border-box;
15
+ box-sizing: border-box;
16
+ padding: 0;
17
+ margin: 0;
18
+ border: 0
19
+ }
20
+ .sap-col::after,
21
+ .sap-col::before,
22
+ .sap-container::after,
23
+ .sap-container::before,
24
+ .sap-row::after,
25
+ .sap-row::before {
26
+ -webkit-box-sizing: inherit;
27
+ box-sizing: inherit;
28
+ font-size: inherit
29
+ }
30
+ .sap-container {
31
+ display: -webkit-box;
32
+ display: -ms-flexbox;
33
+ display: flex;
34
+ -ms-flex-wrap: wrap;
35
+ flex-wrap: wrap;
36
+ -webkit-box-flex: 0;
37
+ -ms-flex: 0 0 100%;
38
+ flex: 0 0 100%;
39
+ position: relative;
40
+ padding: 0 .25rem
41
+ }
42
+ .sap-container.sap-container--no-gap .sap-row,
43
+ .sap-container.sap-container--no-horizontal-gap .sap-row {
44
+ margin-left: 0;
45
+ margin-right: 0
46
+ }
47
+ .sap-container.sap-container--no-gap .sap-row .sap-col,
48
+ .sap-container.sap-container--no-horizontal-gap .sap-row .sap-col {
49
+ padding-left: 0;
50
+ padding-right: 0
51
+ }
52
+ .sap-container.sap-container--no-gap .sap-row .sap-col,
53
+ .sap-container.sap-container--no-vertical-gap .sap-row .sap-col {
54
+ padding-top: 0;
55
+ padding-bottom: 0
56
+ }
57
+ .sap-container[dir=rtl],
58
+ [dir=rtl] .sap-container {
59
+ direction: rtl
60
+ }
61
+ .sap-row {
62
+ margin-left: -.25rem;
63
+ margin-right: -.25rem;
64
+ display: -webkit-box;
65
+ display: -ms-flexbox;
66
+ display: flex;
67
+ -ms-flex-wrap: wrap;
68
+ flex-wrap: wrap;
69
+ -webkit-box-flex: 0;
70
+ -ms-flex: 0 0 100%;
71
+ flex: 0 0 100%;
72
+ position: relative;
73
+ min-width: calc(100% + .25rem * 2)
74
+ }
75
+ .sap-row .sap-col {
76
+ padding-top: .25rem;
77
+ padding-bottom: .25rem
78
+ }
79
+ .sap-col {
80
+ padding: 0 .25rem;
81
+ min-width: 100%;
82
+ max-width: 100%
83
+ }
84
+ .sap-col--0 {
85
+ min-width: 0;
86
+ max-width: 0%
87
+ }
88
+ .sap-col--offset-0 {
89
+ margin-left: 0
90
+ }
91
+ .sap-col--offset-0[dir=rtl],
92
+ [dir=rtl] .sap-col--offset-0 {
93
+ margin-right: 0;
94
+ margin-left: 0
95
+ }
96
+ .sap-col--offset-after-0 {
97
+ margin-right: 0
98
+ }
99
+ .sap-col--offset-after-0[dir=rtl],
100
+ [dir=rtl] .sap-col--offset-after-0 {
101
+ margin-right: 0;
102
+ margin-left: 0
103
+ }
104
+ .sap-col--1 {
105
+ min-width: 8.3333333333%;
106
+ max-width: 8.3333333333%
107
+ }
108
+ .sap-col--offset-1 {
109
+ margin-left: 8.3333333333%
110
+ }
111
+ .sap-col--offset-1[dir=rtl],
112
+ [dir=rtl] .sap-col--offset-1 {
113
+ margin-right: 8.3333333333%;
114
+ margin-left: 0
115
+ }
116
+ .sap-col--offset-after-1 {
117
+ margin-right: 8.3333333333%
118
+ }
119
+ .sap-col--offset-after-1[dir=rtl],
120
+ [dir=rtl] .sap-col--offset-after-1 {
121
+ margin-right: 0;
122
+ margin-left: 8.3333333333%
123
+ }
124
+ .sap-col--2 {
125
+ min-width: 16.6666666667%;
126
+ max-width: 16.6666666667%
127
+ }
128
+ .sap-col--offset-2 {
129
+ margin-left: 16.6666666667%
130
+ }
131
+ .sap-col--offset-2[dir=rtl],
132
+ [dir=rtl] .sap-col--offset-2 {
133
+ margin-right: 16.6666666667%;
134
+ margin-left: 0
135
+ }
136
+ .sap-col--offset-after-2 {
137
+ margin-right: 16.6666666667%
138
+ }
139
+ .sap-col--offset-after-2[dir=rtl],
140
+ [dir=rtl] .sap-col--offset-after-2 {
141
+ margin-right: 0;
142
+ margin-left: 16.6666666667%
143
+ }
144
+ .sap-col--3 {
145
+ min-width: 25%;
146
+ max-width: 25%
147
+ }
148
+ .sap-col--offset-3 {
149
+ margin-left: 25%
150
+ }
151
+ .sap-col--offset-3[dir=rtl],
152
+ [dir=rtl] .sap-col--offset-3 {
153
+ margin-right: 25%;
154
+ margin-left: 0
155
+ }
156
+ .sap-col--offset-after-3 {
157
+ margin-right: 25%
158
+ }
159
+ .sap-col--offset-after-3[dir=rtl],
160
+ [dir=rtl] .sap-col--offset-after-3 {
161
+ margin-right: 0;
162
+ margin-left: 25%
163
+ }
164
+ .sap-col--4 {
165
+ min-width: 33.3333333333%;
166
+ max-width: 33.3333333333%
167
+ }
168
+ .sap-col--offset-4 {
169
+ margin-left: 33.3333333333%
170
+ }
171
+ .sap-col--offset-4[dir=rtl],
172
+ [dir=rtl] .sap-col--offset-4 {
173
+ margin-right: 33.3333333333%;
174
+ margin-left: 0
175
+ }
176
+ .sap-col--offset-after-4 {
177
+ margin-right: 33.3333333333%
178
+ }
179
+ .sap-col--offset-after-4[dir=rtl],
180
+ [dir=rtl] .sap-col--offset-after-4 {
181
+ margin-right: 0;
182
+ margin-left: 33.3333333333%
183
+ }
184
+ .sap-col--5 {
185
+ min-width: 41.6666666667%;
186
+ max-width: 41.6666666667%
187
+ }
188
+ .sap-col--offset-5 {
189
+ margin-left: 41.6666666667%
190
+ }
191
+ .sap-col--offset-5[dir=rtl],
192
+ [dir=rtl] .sap-col--offset-5 {
193
+ margin-right: 41.6666666667%;
194
+ margin-left: 0
195
+ }
196
+ .sap-col--offset-after-5 {
197
+ margin-right: 41.6666666667%
198
+ }
199
+ .sap-col--offset-after-5[dir=rtl],
200
+ [dir=rtl] .sap-col--offset-after-5 {
201
+ margin-right: 0;
202
+ margin-left: 41.6666666667%
203
+ }
204
+ .sap-col--6 {
205
+ min-width: 50%;
206
+ max-width: 50%
207
+ }
208
+ .sap-col--offset-6 {
209
+ margin-left: 50%
210
+ }
211
+ .sap-col--offset-6[dir=rtl],
212
+ [dir=rtl] .sap-col--offset-6 {
213
+ margin-right: 50%;
214
+ margin-left: 0
215
+ }
216
+ .sap-col--offset-after-6 {
217
+ margin-right: 50%
218
+ }
219
+ .sap-col--offset-after-6[dir=rtl],
220
+ [dir=rtl] .sap-col--offset-after-6 {
221
+ margin-right: 0;
222
+ margin-left: 50%
223
+ }
224
+ .sap-col--7 {
225
+ min-width: 58.3333333333%;
226
+ max-width: 58.3333333333%
227
+ }
228
+ .sap-col--offset-7 {
229
+ margin-left: 58.3333333333%
230
+ }
231
+ .sap-col--offset-7[dir=rtl],
232
+ [dir=rtl] .sap-col--offset-7 {
233
+ margin-right: 58.3333333333%;
234
+ margin-left: 0
235
+ }
236
+ .sap-col--offset-after-7 {
237
+ margin-right: 58.3333333333%
238
+ }
239
+ .sap-col--offset-after-7[dir=rtl],
240
+ [dir=rtl] .sap-col--offset-after-7 {
241
+ margin-right: 0;
242
+ margin-left: 58.3333333333%
243
+ }
244
+ .sap-col--8 {
245
+ min-width: 66.6666666667%;
246
+ max-width: 66.6666666667%
247
+ }
248
+ .sap-col--offset-8 {
249
+ margin-left: 66.6666666667%
250
+ }
251
+ .sap-col--offset-8[dir=rtl],
252
+ [dir=rtl] .sap-col--offset-8 {
253
+ margin-right: 66.6666666667%;
254
+ margin-left: 0
255
+ }
256
+ .sap-col--offset-after-8 {
257
+ margin-right: 66.6666666667%
258
+ }
259
+ .sap-col--offset-after-8[dir=rtl],
260
+ [dir=rtl] .sap-col--offset-after-8 {
261
+ margin-right: 0;
262
+ margin-left: 66.6666666667%
263
+ }
264
+ .sap-col--9 {
265
+ min-width: 75%;
266
+ max-width: 75%
267
+ }
268
+ .sap-col--offset-9 {
269
+ margin-left: 75%
270
+ }
271
+ .sap-col--offset-9[dir=rtl],
272
+ [dir=rtl] .sap-col--offset-9 {
273
+ margin-right: 75%;
274
+ margin-left: 0
275
+ }
276
+ .sap-col--offset-after-9 {
277
+ margin-right: 75%
278
+ }
279
+ .sap-col--offset-after-9[dir=rtl],
280
+ [dir=rtl] .sap-col--offset-after-9 {
281
+ margin-right: 0;
282
+ margin-left: 75%
283
+ }
284
+ .sap-col--10 {
285
+ min-width: 83.3333333333%;
286
+ max-width: 83.3333333333%
287
+ }
288
+ .sap-col--offset-10 {
289
+ margin-left: 83.3333333333%
290
+ }
291
+ .sap-col--offset-10[dir=rtl],
292
+ [dir=rtl] .sap-col--offset-10 {
293
+ margin-right: 83.3333333333%;
294
+ margin-left: 0
295
+ }
296
+ .sap-col--offset-after-10 {
297
+ margin-right: 83.3333333333%
298
+ }
299
+ .sap-col--offset-after-10[dir=rtl],
300
+ [dir=rtl] .sap-col--offset-after-10 {
301
+ margin-right: 0;
302
+ margin-left: 83.3333333333%
303
+ }
304
+ .sap-col--11 {
305
+ min-width: 91.6666666667%;
306
+ max-width: 91.6666666667%
307
+ }
308
+ .sap-col--offset-11 {
309
+ margin-left: 91.6666666667%
310
+ }
311
+ .sap-col--offset-11[dir=rtl],
312
+ [dir=rtl] .sap-col--offset-11 {
313
+ margin-right: 91.6666666667%;
314
+ margin-left: 0
315
+ }
316
+ .sap-col--offset-after-11 {
317
+ margin-right: 91.6666666667%
318
+ }
319
+ .sap-col--offset-after-11[dir=rtl],
320
+ [dir=rtl] .sap-col--offset-after-11 {
321
+ margin-right: 0;
322
+ margin-left: 91.6666666667%
323
+ }
324
+ .sap-col--12 {
325
+ min-width: 100%;
326
+ max-width: 100%
327
+ }
328
+ .sap-col--offset-12 {
329
+ margin-left: 100%
330
+ }
331
+ .sap-col--offset-12[dir=rtl],
332
+ [dir=rtl] .sap-col--offset-12 {
333
+ margin-right: 100%;
334
+ margin-left: 0
335
+ }
336
+ .sap-col--offset-after-12 {
337
+ margin-right: 100%
338
+ }
339
+ .sap-col--offset-after-12[dir=rtl],
340
+ [dir=rtl] .sap-col--offset-after-12 {
341
+ margin-right: 0;
342
+ margin-left: 100%
343
+ }
344
+ .sap-col--full {
345
+ min-width: 8.3333333333%;
346
+ max-width: none;
347
+ -webkit-box-flex: 1;
348
+ -ms-flex: 1;
349
+ flex: 1
350
+ }
351
+ .sap-col--wrap {
352
+ -ms-flex-wrap: wrap;
353
+ flex-wrap: wrap
354
+ }
355
+ @media (min-width:600px) {
356
+ .sap-container {
357
+ padding: 0 .5rem
358
+ }
359
+ .sap-row {
360
+ margin-left: -.5rem;
361
+ margin-right: -.5rem;
362
+ min-width: calc(100% + .5rem * 2)
363
+ }
364
+ .sap-row .sap-col {
365
+ padding-top: .5rem;
366
+ padding-bottom: .5rem
367
+ }
368
+ .sap-col {
369
+ padding: 0 .5rem
370
+ }
371
+ .sap-col-md--0 {
372
+ min-width: 0;
373
+ max-width: 0%
374
+ }
375
+ .sap-col-md--offset-0 {
376
+ margin-left: 0
377
+ }
378
+ .sap-col-md--offset-0[dir=rtl],
379
+ [dir=rtl] .sap-col-md--offset-0 {
380
+ margin-right: 0;
381
+ margin-left: 0
382
+ }
383
+ .sap-col-md--offset-after-0 {
384
+ margin-right: 0
385
+ }
386
+ .sap-col-md--offset-after-0[dir=rtl],
387
+ [dir=rtl] .sap-col-md--offset-after-0 {
388
+ margin-right: 0;
389
+ margin-left: 0
390
+ }
391
+ .sap-col-md--1 {
392
+ min-width: 8.3333333333%;
393
+ max-width: 8.3333333333%
394
+ }
395
+ .sap-col-md--offset-1 {
396
+ margin-left: 8.3333333333%
397
+ }
398
+ .sap-col-md--offset-1[dir=rtl],
399
+ [dir=rtl] .sap-col-md--offset-1 {
400
+ margin-right: 8.3333333333%;
401
+ margin-left: 0
402
+ }
403
+ .sap-col-md--offset-after-1 {
404
+ margin-right: 8.3333333333%
405
+ }
406
+ .sap-col-md--offset-after-1[dir=rtl],
407
+ [dir=rtl] .sap-col-md--offset-after-1 {
408
+ margin-right: 0;
409
+ margin-left: 8.3333333333%
410
+ }
411
+ .sap-col-md--2 {
412
+ min-width: 16.6666666667%;
413
+ max-width: 16.6666666667%
414
+ }
415
+ .sap-col-md--offset-2 {
416
+ margin-left: 16.6666666667%
417
+ }
418
+ .sap-col-md--offset-2[dir=rtl],
419
+ [dir=rtl] .sap-col-md--offset-2 {
420
+ margin-right: 16.6666666667%;
421
+ margin-left: 0
422
+ }
423
+ .sap-col-md--offset-after-2 {
424
+ margin-right: 16.6666666667%
425
+ }
426
+ .sap-col-md--offset-after-2[dir=rtl],
427
+ [dir=rtl] .sap-col-md--offset-after-2 {
428
+ margin-right: 0;
429
+ margin-left: 16.6666666667%
430
+ }
431
+ .sap-col-md--3 {
432
+ min-width: 25%;
433
+ max-width: 25%
434
+ }
435
+ .sap-col-md--offset-3 {
436
+ margin-left: 25%
437
+ }
438
+ .sap-col-md--offset-3[dir=rtl],
439
+ [dir=rtl] .sap-col-md--offset-3 {
440
+ margin-right: 25%;
441
+ margin-left: 0
442
+ }
443
+ .sap-col-md--offset-after-3 {
444
+ margin-right: 25%
445
+ }
446
+ .sap-col-md--offset-after-3[dir=rtl],
447
+ [dir=rtl] .sap-col-md--offset-after-3 {
448
+ margin-right: 0;
449
+ margin-left: 25%
450
+ }
451
+ .sap-col-md--4 {
452
+ min-width: 33.3333333333%;
453
+ max-width: 33.3333333333%
454
+ }
455
+ .sap-col-md--offset-4 {
456
+ margin-left: 33.3333333333%
457
+ }
458
+ .sap-col-md--offset-4[dir=rtl],
459
+ [dir=rtl] .sap-col-md--offset-4 {
460
+ margin-right: 33.3333333333%;
461
+ margin-left: 0
462
+ }
463
+ .sap-col-md--offset-after-4 {
464
+ margin-right: 33.3333333333%
465
+ }
466
+ .sap-col-md--offset-after-4[dir=rtl],
467
+ [dir=rtl] .sap-col-md--offset-after-4 {
468
+ margin-right: 0;
469
+ margin-left: 33.3333333333%
470
+ }
471
+ .sap-col-md--5 {
472
+ min-width: 41.6666666667%;
473
+ max-width: 41.6666666667%
474
+ }
475
+ .sap-col-md--offset-5 {
476
+ margin-left: 41.6666666667%
477
+ }
478
+ .sap-col-md--offset-5[dir=rtl],
479
+ [dir=rtl] .sap-col-md--offset-5 {
480
+ margin-right: 41.6666666667%;
481
+ margin-left: 0
482
+ }
483
+ .sap-col-md--offset-after-5 {
484
+ margin-right: 41.6666666667%
485
+ }
486
+ .sap-col-md--offset-after-5[dir=rtl],
487
+ [dir=rtl] .sap-col-md--offset-after-5 {
488
+ margin-right: 0;
489
+ margin-left: 41.6666666667%
490
+ }
491
+ .sap-col-md--6 {
492
+ min-width: 50%;
493
+ max-width: 50%
494
+ }
495
+ .sap-col-md--offset-6 {
496
+ margin-left: 50%
497
+ }
498
+ .sap-col-md--offset-6[dir=rtl],
499
+ [dir=rtl] .sap-col-md--offset-6 {
500
+ margin-right: 50%;
501
+ margin-left: 0
502
+ }
503
+ .sap-col-md--offset-after-6 {
504
+ margin-right: 50%
505
+ }
506
+ .sap-col-md--offset-after-6[dir=rtl],
507
+ [dir=rtl] .sap-col-md--offset-after-6 {
508
+ margin-right: 0;
509
+ margin-left: 50%
510
+ }
511
+ .sap-col-md--7 {
512
+ min-width: 58.3333333333%;
513
+ max-width: 58.3333333333%
514
+ }
515
+ .sap-col-md--offset-7 {
516
+ margin-left: 58.3333333333%
517
+ }
518
+ .sap-col-md--offset-7[dir=rtl],
519
+ [dir=rtl] .sap-col-md--offset-7 {
520
+ margin-right: 58.3333333333%;
521
+ margin-left: 0
522
+ }
523
+ .sap-col-md--offset-after-7 {
524
+ margin-right: 58.3333333333%
525
+ }
526
+ .sap-col-md--offset-after-7[dir=rtl],
527
+ [dir=rtl] .sap-col-md--offset-after-7 {
528
+ margin-right: 0;
529
+ margin-left: 58.3333333333%
530
+ }
531
+ .sap-col-md--8 {
532
+ min-width: 66.6666666667%;
533
+ max-width: 66.6666666667%
534
+ }
535
+ .sap-col-md--offset-8 {
536
+ margin-left: 66.6666666667%
537
+ }
538
+ .sap-col-md--offset-8[dir=rtl],
539
+ [dir=rtl] .sap-col-md--offset-8 {
540
+ margin-right: 66.6666666667%;
541
+ margin-left: 0
542
+ }
543
+ .sap-col-md--offset-after-8 {
544
+ margin-right: 66.6666666667%
545
+ }
546
+ .sap-col-md--offset-after-8[dir=rtl],
547
+ [dir=rtl] .sap-col-md--offset-after-8 {
548
+ margin-right: 0;
549
+ margin-left: 66.6666666667%
550
+ }
551
+ .sap-col-md--9 {
552
+ min-width: 75%;
553
+ max-width: 75%
554
+ }
555
+ .sap-col-md--offset-9 {
556
+ margin-left: 75%
557
+ }
558
+ .sap-col-md--offset-9[dir=rtl],
559
+ [dir=rtl] .sap-col-md--offset-9 {
560
+ margin-right: 75%;
561
+ margin-left: 0
562
+ }
563
+ .sap-col-md--offset-after-9 {
564
+ margin-right: 75%
565
+ }
566
+ .sap-col-md--offset-after-9[dir=rtl],
567
+ [dir=rtl] .sap-col-md--offset-after-9 {
568
+ margin-right: 0;
569
+ margin-left: 75%
570
+ }
571
+ .sap-col-md--10 {
572
+ min-width: 83.3333333333%;
573
+ max-width: 83.3333333333%
574
+ }
575
+ .sap-col-md--offset-10 {
576
+ margin-left: 83.3333333333%
577
+ }
578
+ .sap-col-md--offset-10[dir=rtl],
579
+ [dir=rtl] .sap-col-md--offset-10 {
580
+ margin-right: 83.3333333333%;
581
+ margin-left: 0
582
+ }
583
+ .sap-col-md--offset-after-10 {
584
+ margin-right: 83.3333333333%
585
+ }
586
+ .sap-col-md--offset-after-10[dir=rtl],
587
+ [dir=rtl] .sap-col-md--offset-after-10 {
588
+ margin-right: 0;
589
+ margin-left: 83.3333333333%
590
+ }
591
+ .sap-col-md--11 {
592
+ min-width: 91.6666666667%;
593
+ max-width: 91.6666666667%
594
+ }
595
+ .sap-col-md--offset-11 {
596
+ margin-left: 91.6666666667%
597
+ }
598
+ .sap-col-md--offset-11[dir=rtl],
599
+ [dir=rtl] .sap-col-md--offset-11 {
600
+ margin-right: 91.6666666667%;
601
+ margin-left: 0
602
+ }
603
+ .sap-col-md--offset-after-11 {
604
+ margin-right: 91.6666666667%
605
+ }
606
+ .sap-col-md--offset-after-11[dir=rtl],
607
+ [dir=rtl] .sap-col-md--offset-after-11 {
608
+ margin-right: 0;
609
+ margin-left: 91.6666666667%
610
+ }
611
+ .sap-col-md--12 {
612
+ min-width: 100%;
613
+ max-width: 100%
614
+ }
615
+ .sap-col-md--offset-12 {
616
+ margin-left: 100%
617
+ }
618
+ .sap-col-md--offset-12[dir=rtl],
619
+ [dir=rtl] .sap-col-md--offset-12 {
620
+ margin-right: 100%;
621
+ margin-left: 0
622
+ }
623
+ .sap-col-md--offset-after-12 {
624
+ margin-right: 100%
625
+ }
626
+ .sap-col-md--offset-after-12[dir=rtl],
627
+ [dir=rtl] .sap-col-md--offset-after-12 {
628
+ margin-right: 0;
629
+ margin-left: 100%
630
+ }
631
+ }
632
+ @media (min-width:1024px) {
633
+ .sap-col-lg--0 {
634
+ min-width: 0;
635
+ max-width: 0%
636
+ }
637
+ .sap-col-lg--offset-0 {
638
+ margin-left: 0
639
+ }
640
+ .sap-col-lg--offset-0[dir=rtl],
641
+ [dir=rtl] .sap-col-lg--offset-0 {
642
+ margin-right: 0;
643
+ margin-left: 0
644
+ }
645
+ .sap-col-lg--offset-after-0 {
646
+ margin-right: 0
647
+ }
648
+ .sap-col-lg--offset-after-0[dir=rtl],
649
+ [dir=rtl] .sap-col-lg--offset-after-0 {
650
+ margin-right: 0;
651
+ margin-left: 0
652
+ }
653
+ .sap-col-lg--1 {
654
+ min-width: 8.3333333333%;
655
+ max-width: 8.3333333333%
656
+ }
657
+ .sap-col-lg--offset-1 {
658
+ margin-left: 8.3333333333%
659
+ }
660
+ .sap-col-lg--offset-1[dir=rtl],
661
+ [dir=rtl] .sap-col-lg--offset-1 {
662
+ margin-right: 8.3333333333%;
663
+ margin-left: 0
664
+ }
665
+ .sap-col-lg--offset-after-1 {
666
+ margin-right: 8.3333333333%
667
+ }
668
+ .sap-col-lg--offset-after-1[dir=rtl],
669
+ [dir=rtl] .sap-col-lg--offset-after-1 {
670
+ margin-right: 0;
671
+ margin-left: 8.3333333333%
672
+ }
673
+ .sap-col-lg--2 {
674
+ min-width: 16.6666666667%;
675
+ max-width: 16.6666666667%
676
+ }
677
+ .sap-col-lg--offset-2 {
678
+ margin-left: 16.6666666667%
679
+ }
680
+ .sap-col-lg--offset-2[dir=rtl],
681
+ [dir=rtl] .sap-col-lg--offset-2 {
682
+ margin-right: 16.6666666667%;
683
+ margin-left: 0
684
+ }
685
+ .sap-col-lg--offset-after-2 {
686
+ margin-right: 16.6666666667%
687
+ }
688
+ .sap-col-lg--offset-after-2[dir=rtl],
689
+ [dir=rtl] .sap-col-lg--offset-after-2 {
690
+ margin-right: 0;
691
+ margin-left: 16.6666666667%
692
+ }
693
+ .sap-col-lg--3 {
694
+ min-width: 25%;
695
+ max-width: 25%
696
+ }
697
+ .sap-col-lg--offset-3 {
698
+ margin-left: 25%
699
+ }
700
+ .sap-col-lg--offset-3[dir=rtl],
701
+ [dir=rtl] .sap-col-lg--offset-3 {
702
+ margin-right: 25%;
703
+ margin-left: 0
704
+ }
705
+ .sap-col-lg--offset-after-3 {
706
+ margin-right: 25%
707
+ }
708
+ .sap-col-lg--offset-after-3[dir=rtl],
709
+ [dir=rtl] .sap-col-lg--offset-after-3 {
710
+ margin-right: 0;
711
+ margin-left: 25%
712
+ }
713
+ .sap-col-lg--4 {
714
+ min-width: 33.3333333333%;
715
+ max-width: 33.3333333333%
716
+ }
717
+ .sap-col-lg--offset-4 {
718
+ margin-left: 33.3333333333%
719
+ }
720
+ .sap-col-lg--offset-4[dir=rtl],
721
+ [dir=rtl] .sap-col-lg--offset-4 {
722
+ margin-right: 33.3333333333%;
723
+ margin-left: 0
724
+ }
725
+ .sap-col-lg--offset-after-4 {
726
+ margin-right: 33.3333333333%
727
+ }
728
+ .sap-col-lg--offset-after-4[dir=rtl],
729
+ [dir=rtl] .sap-col-lg--offset-after-4 {
730
+ margin-right: 0;
731
+ margin-left: 33.3333333333%
732
+ }
733
+ .sap-col-lg--5 {
734
+ min-width: 41.6666666667%;
735
+ max-width: 41.6666666667%
736
+ }
737
+ .sap-col-lg--offset-5 {
738
+ margin-left: 41.6666666667%
739
+ }
740
+ .sap-col-lg--offset-5[dir=rtl],
741
+ [dir=rtl] .sap-col-lg--offset-5 {
742
+ margin-right: 41.6666666667%;
743
+ margin-left: 0
744
+ }
745
+ .sap-col-lg--offset-after-5 {
746
+ margin-right: 41.6666666667%
747
+ }
748
+ .sap-col-lg--offset-after-5[dir=rtl],
749
+ [dir=rtl] .sap-col-lg--offset-after-5 {
750
+ margin-right: 0;
751
+ margin-left: 41.6666666667%
752
+ }
753
+ .sap-col-lg--6 {
754
+ min-width: 50%;
755
+ max-width: 50%
756
+ }
757
+ .sap-col-lg--offset-6 {
758
+ margin-left: 50%
759
+ }
760
+ .sap-col-lg--offset-6[dir=rtl],
761
+ [dir=rtl] .sap-col-lg--offset-6 {
762
+ margin-right: 50%;
763
+ margin-left: 0
764
+ }
765
+ .sap-col-lg--offset-after-6 {
766
+ margin-right: 50%
767
+ }
768
+ .sap-col-lg--offset-after-6[dir=rtl],
769
+ [dir=rtl] .sap-col-lg--offset-after-6 {
770
+ margin-right: 0;
771
+ margin-left: 50%
772
+ }
773
+ .sap-col-lg--7 {
774
+ min-width: 58.3333333333%;
775
+ max-width: 58.3333333333%
776
+ }
777
+ .sap-col-lg--offset-7 {
778
+ margin-left: 58.3333333333%
779
+ }
780
+ .sap-col-lg--offset-7[dir=rtl],
781
+ [dir=rtl] .sap-col-lg--offset-7 {
782
+ margin-right: 58.3333333333%;
783
+ margin-left: 0
784
+ }
785
+ .sap-col-lg--offset-after-7 {
786
+ margin-right: 58.3333333333%
787
+ }
788
+ .sap-col-lg--offset-after-7[dir=rtl],
789
+ [dir=rtl] .sap-col-lg--offset-after-7 {
790
+ margin-right: 0;
791
+ margin-left: 58.3333333333%
792
+ }
793
+ .sap-col-lg--8 {
794
+ min-width: 66.6666666667%;
795
+ max-width: 66.6666666667%
796
+ }
797
+ .sap-col-lg--offset-8 {
798
+ margin-left: 66.6666666667%
799
+ }
800
+ .sap-col-lg--offset-8[dir=rtl],
801
+ [dir=rtl] .sap-col-lg--offset-8 {
802
+ margin-right: 66.6666666667%;
803
+ margin-left: 0
804
+ }
805
+ .sap-col-lg--offset-after-8 {
806
+ margin-right: 66.6666666667%
807
+ }
808
+ .sap-col-lg--offset-after-8[dir=rtl],
809
+ [dir=rtl] .sap-col-lg--offset-after-8 {
810
+ margin-right: 0;
811
+ margin-left: 66.6666666667%
812
+ }
813
+ .sap-col-lg--9 {
814
+ min-width: 75%;
815
+ max-width: 75%
816
+ }
817
+ .sap-col-lg--offset-9 {
818
+ margin-left: 75%
819
+ }
820
+ .sap-col-lg--offset-9[dir=rtl],
821
+ [dir=rtl] .sap-col-lg--offset-9 {
822
+ margin-right: 75%;
823
+ margin-left: 0
824
+ }
825
+ .sap-col-lg--offset-after-9 {
826
+ margin-right: 75%
827
+ }
828
+ .sap-col-lg--offset-after-9[dir=rtl],
829
+ [dir=rtl] .sap-col-lg--offset-after-9 {
830
+ margin-right: 0;
831
+ margin-left: 75%
832
+ }
833
+ .sap-col-lg--10 {
834
+ min-width: 83.3333333333%;
835
+ max-width: 83.3333333333%
836
+ }
837
+ .sap-col-lg--offset-10 {
838
+ margin-left: 83.3333333333%
839
+ }
840
+ .sap-col-lg--offset-10[dir=rtl],
841
+ [dir=rtl] .sap-col-lg--offset-10 {
842
+ margin-right: 83.3333333333%;
843
+ margin-left: 0
844
+ }
845
+ .sap-col-lg--offset-after-10 {
846
+ margin-right: 83.3333333333%
847
+ }
848
+ .sap-col-lg--offset-after-10[dir=rtl],
849
+ [dir=rtl] .sap-col-lg--offset-after-10 {
850
+ margin-right: 0;
851
+ margin-left: 83.3333333333%
852
+ }
853
+ .sap-col-lg--11 {
854
+ min-width: 91.6666666667%;
855
+ max-width: 91.6666666667%
856
+ }
857
+ .sap-col-lg--offset-11 {
858
+ margin-left: 91.6666666667%
859
+ }
860
+ .sap-col-lg--offset-11[dir=rtl],
861
+ [dir=rtl] .sap-col-lg--offset-11 {
862
+ margin-right: 91.6666666667%;
863
+ margin-left: 0
864
+ }
865
+ .sap-col-lg--offset-after-11 {
866
+ margin-right: 91.6666666667%
867
+ }
868
+ .sap-col-lg--offset-after-11[dir=rtl],
869
+ [dir=rtl] .sap-col-lg--offset-after-11 {
870
+ margin-right: 0;
871
+ margin-left: 91.6666666667%
872
+ }
873
+ .sap-col-lg--12 {
874
+ min-width: 100%;
875
+ max-width: 100%
876
+ }
877
+ .sap-col-lg--offset-12 {
878
+ margin-left: 100%
879
+ }
880
+ .sap-col-lg--offset-12[dir=rtl],
881
+ [dir=rtl] .sap-col-lg--offset-12 {
882
+ margin-right: 100%;
883
+ margin-left: 0
884
+ }
885
+ .sap-col-lg--offset-after-12 {
886
+ margin-right: 100%
887
+ }
888
+ .sap-col-lg--offset-after-12[dir=rtl],
889
+ [dir=rtl] .sap-col-lg--offset-after-12 {
890
+ margin-right: 0;
891
+ margin-left: 100%
892
+ }
893
+ }
894
+ @media (min-width:1440px) {
895
+ .sap-col-xl--0 {
896
+ min-width: 0;
897
+ max-width: 0%
898
+ }
899
+ .sap-col-xl--offset-0 {
900
+ margin-left: 0
901
+ }
902
+ .sap-col-xl--offset-0[dir=rtl],
903
+ [dir=rtl] .sap-col-xl--offset-0 {
904
+ margin-right: 0;
905
+ margin-left: 0
906
+ }
907
+ .sap-col-xl--offset-after-0 {
908
+ margin-right: 0
909
+ }
910
+ .sap-col-xl--offset-after-0[dir=rtl],
911
+ [dir=rtl] .sap-col-xl--offset-after-0 {
912
+ margin-right: 0;
913
+ margin-left: 0
914
+ }
915
+ .sap-col-xl--1 {
916
+ min-width: 8.3333333333%;
917
+ max-width: 8.3333333333%
918
+ }
919
+ .sap-col-xl--offset-1 {
920
+ margin-left: 8.3333333333%
921
+ }
922
+ .sap-col-xl--offset-1[dir=rtl],
923
+ [dir=rtl] .sap-col-xl--offset-1 {
924
+ margin-right: 8.3333333333%;
925
+ margin-left: 0
926
+ }
927
+ .sap-col-xl--offset-after-1 {
928
+ margin-right: 8.3333333333%
929
+ }
930
+ .sap-col-xl--offset-after-1[dir=rtl],
931
+ [dir=rtl] .sap-col-xl--offset-after-1 {
932
+ margin-right: 0;
933
+ margin-left: 8.3333333333%
934
+ }
935
+ .sap-col-xl--2 {
936
+ min-width: 16.6666666667%;
937
+ max-width: 16.6666666667%
938
+ }
939
+ .sap-col-xl--offset-2 {
940
+ margin-left: 16.6666666667%
941
+ }
942
+ .sap-col-xl--offset-2[dir=rtl],
943
+ [dir=rtl] .sap-col-xl--offset-2 {
944
+ margin-right: 16.6666666667%;
945
+ margin-left: 0
946
+ }
947
+ .sap-col-xl--offset-after-2 {
948
+ margin-right: 16.6666666667%
949
+ }
950
+ .sap-col-xl--offset-after-2[dir=rtl],
951
+ [dir=rtl] .sap-col-xl--offset-after-2 {
952
+ margin-right: 0;
953
+ margin-left: 16.6666666667%
954
+ }
955
+ .sap-col-xl--3 {
956
+ min-width: 25%;
957
+ max-width: 25%
958
+ }
959
+ .sap-col-xl--offset-3 {
960
+ margin-left: 25%
961
+ }
962
+ .sap-col-xl--offset-3[dir=rtl],
963
+ [dir=rtl] .sap-col-xl--offset-3 {
964
+ margin-right: 25%;
965
+ margin-left: 0
966
+ }
967
+ .sap-col-xl--offset-after-3 {
968
+ margin-right: 25%
969
+ }
970
+ .sap-col-xl--offset-after-3[dir=rtl],
971
+ [dir=rtl] .sap-col-xl--offset-after-3 {
972
+ margin-right: 0;
973
+ margin-left: 25%
974
+ }
975
+ .sap-col-xl--4 {
976
+ min-width: 33.3333333333%;
977
+ max-width: 33.3333333333%
978
+ }
979
+ .sap-col-xl--offset-4 {
980
+ margin-left: 33.3333333333%
981
+ }
982
+ .sap-col-xl--offset-4[dir=rtl],
983
+ [dir=rtl] .sap-col-xl--offset-4 {
984
+ margin-right: 33.3333333333%;
985
+ margin-left: 0
986
+ }
987
+ .sap-col-xl--offset-after-4 {
988
+ margin-right: 33.3333333333%
989
+ }
990
+ .sap-col-xl--offset-after-4[dir=rtl],
991
+ [dir=rtl] .sap-col-xl--offset-after-4 {
992
+ margin-right: 0;
993
+ margin-left: 33.3333333333%
994
+ }
995
+ .sap-col-xl--5 {
996
+ min-width: 41.6666666667%;
997
+ max-width: 41.6666666667%
998
+ }
999
+ .sap-col-xl--offset-5 {
1000
+ margin-left: 41.6666666667%
1001
+ }
1002
+ .sap-col-xl--offset-5[dir=rtl],
1003
+ [dir=rtl] .sap-col-xl--offset-5 {
1004
+ margin-right: 41.6666666667%;
1005
+ margin-left: 0
1006
+ }
1007
+ .sap-col-xl--offset-after-5 {
1008
+ margin-right: 41.6666666667%
1009
+ }
1010
+ .sap-col-xl--offset-after-5[dir=rtl],
1011
+ [dir=rtl] .sap-col-xl--offset-after-5 {
1012
+ margin-right: 0;
1013
+ margin-left: 41.6666666667%
1014
+ }
1015
+ .sap-col-xl--6 {
1016
+ min-width: 50%;
1017
+ max-width: 50%
1018
+ }
1019
+ .sap-col-xl--offset-6 {
1020
+ margin-left: 50%
1021
+ }
1022
+ .sap-col-xl--offset-6[dir=rtl],
1023
+ [dir=rtl] .sap-col-xl--offset-6 {
1024
+ margin-right: 50%;
1025
+ margin-left: 0
1026
+ }
1027
+ .sap-col-xl--offset-after-6 {
1028
+ margin-right: 50%
1029
+ }
1030
+ .sap-col-xl--offset-after-6[dir=rtl],
1031
+ [dir=rtl] .sap-col-xl--offset-after-6 {
1032
+ margin-right: 0;
1033
+ margin-left: 50%
1034
+ }
1035
+ .sap-col-xl--7 {
1036
+ min-width: 58.3333333333%;
1037
+ max-width: 58.3333333333%
1038
+ }
1039
+ .sap-col-xl--offset-7 {
1040
+ margin-left: 58.3333333333%
1041
+ }
1042
+ .sap-col-xl--offset-7[dir=rtl],
1043
+ [dir=rtl] .sap-col-xl--offset-7 {
1044
+ margin-right: 58.3333333333%;
1045
+ margin-left: 0
1046
+ }
1047
+ .sap-col-xl--offset-after-7 {
1048
+ margin-right: 58.3333333333%
1049
+ }
1050
+ .sap-col-xl--offset-after-7[dir=rtl],
1051
+ [dir=rtl] .sap-col-xl--offset-after-7 {
1052
+ margin-right: 0;
1053
+ margin-left: 58.3333333333%
1054
+ }
1055
+ .sap-col-xl--8 {
1056
+ min-width: 66.6666666667%;
1057
+ max-width: 66.6666666667%
1058
+ }
1059
+ .sap-col-xl--offset-8 {
1060
+ margin-left: 66.6666666667%
1061
+ }
1062
+ .sap-col-xl--offset-8[dir=rtl],
1063
+ [dir=rtl] .sap-col-xl--offset-8 {
1064
+ margin-right: 66.6666666667%;
1065
+ margin-left: 0
1066
+ }
1067
+ .sap-col-xl--offset-after-8 {
1068
+ margin-right: 66.6666666667%
1069
+ }
1070
+ .sap-col-xl--offset-after-8[dir=rtl],
1071
+ [dir=rtl] .sap-col-xl--offset-after-8 {
1072
+ margin-right: 0;
1073
+ margin-left: 66.6666666667%
1074
+ }
1075
+ .sap-col-xl--9 {
1076
+ min-width: 75%;
1077
+ max-width: 75%
1078
+ }
1079
+ .sap-col-xl--offset-9 {
1080
+ margin-left: 75%
1081
+ }
1082
+ .sap-col-xl--offset-9[dir=rtl],
1083
+ [dir=rtl] .sap-col-xl--offset-9 {
1084
+ margin-right: 75%;
1085
+ margin-left: 0
1086
+ }
1087
+ .sap-col-xl--offset-after-9 {
1088
+ margin-right: 75%
1089
+ }
1090
+ .sap-col-xl--offset-after-9[dir=rtl],
1091
+ [dir=rtl] .sap-col-xl--offset-after-9 {
1092
+ margin-right: 0;
1093
+ margin-left: 75%
1094
+ }
1095
+ .sap-col-xl--10 {
1096
+ min-width: 83.3333333333%;
1097
+ max-width: 83.3333333333%
1098
+ }
1099
+ .sap-col-xl--offset-10 {
1100
+ margin-left: 83.3333333333%
1101
+ }
1102
+ .sap-col-xl--offset-10[dir=rtl],
1103
+ [dir=rtl] .sap-col-xl--offset-10 {
1104
+ margin-right: 83.3333333333%;
1105
+ margin-left: 0
1106
+ }
1107
+ .sap-col-xl--offset-after-10 {
1108
+ margin-right: 83.3333333333%
1109
+ }
1110
+ .sap-col-xl--offset-after-10[dir=rtl],
1111
+ [dir=rtl] .sap-col-xl--offset-after-10 {
1112
+ margin-right: 0;
1113
+ margin-left: 83.3333333333%
1114
+ }
1115
+ .sap-col-xl--11 {
1116
+ min-width: 91.6666666667%;
1117
+ max-width: 91.6666666667%
1118
+ }
1119
+ .sap-col-xl--offset-11 {
1120
+ margin-left: 91.6666666667%
1121
+ }
1122
+ .sap-col-xl--offset-11[dir=rtl],
1123
+ [dir=rtl] .sap-col-xl--offset-11 {
1124
+ margin-right: 91.6666666667%;
1125
+ margin-left: 0
1126
+ }
1127
+ .sap-col-xl--offset-after-11 {
1128
+ margin-right: 91.6666666667%
1129
+ }
1130
+ .sap-col-xl--offset-after-11[dir=rtl],
1131
+ [dir=rtl] .sap-col-xl--offset-after-11 {
1132
+ margin-right: 0;
1133
+ margin-left: 91.6666666667%
1134
+ }
1135
+ .sap-col-xl--12 {
1136
+ min-width: 100%;
1137
+ max-width: 100%
1138
+ }
1139
+ .sap-col-xl--offset-12 {
1140
+ margin-left: 100%
1141
+ }
1142
+ .sap-col-xl--offset-12[dir=rtl],
1143
+ [dir=rtl] .sap-col-xl--offset-12 {
1144
+ margin-right: 100%;
1145
+ margin-left: 0
1146
+ }
1147
+ .sap-col-xl--offset-after-12 {
1148
+ margin-right: 100%
1149
+ }
1150
+ .sap-col-xl--offset-after-12[dir=rtl],
1151
+ [dir=rtl] .sap-col-xl--offset-after-12 {
1152
+ margin-right: 0;
1153
+ margin-left: 100%
1154
+ }
1155
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fundamental-styles/common-css",
3
- "version": "0.24.0-rc.15",
3
+ "version": "0.24.0-rc.18",
4
4
  "license": "Apache-2.0",
5
5
  "homepage": "https://sap.github.io/fundamental-styles/",
6
6
  "description": "Fundamental Library Styles Common CSS",
@@ -9,7 +9,7 @@
9
9
  "url": "https://github.com/SAP/fundamental-styles"
10
10
  },
11
11
  "dependencies": {
12
- "@sap-theming/theming-base-content": "11.1.37"
12
+ "@sap-theming/theming-base-content": "11.1.37"
13
13
  }
14
14
  }
15
15
 
package/dist/test.css DELETED
@@ -1,3 +0,0 @@
1
- body {
2
- color: red;
3
- }