@rolster/styles-foundations 2.6.2 → 2.6.4
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/dist/styles.css +69 -9
- package/dist/styles.css.map +1 -1
- package/dist/styles.min.css +4 -4
- package/dist/styles.rtl.css +69 -9
- package/dist/styles.rtl.min.css +4 -4
- package/package.json +2 -2
- package/scss/components/data-table.scss +3 -2
- package/scss/components/field-box.scss +4 -4
- package/scss/foundations/colors.scss +9 -9
- package/scss/foundations/flex-boxs.scss +26 -2
- package/scss/utilities/layout.scss +10 -2
package/dist/styles.rtl.css
CHANGED
|
@@ -58,6 +58,24 @@
|
|
|
58
58
|
flex-direction: column;
|
|
59
59
|
row-gap: 16rem;
|
|
60
60
|
}
|
|
61
|
+
.rls-flex-justify-content-start {
|
|
62
|
+
justify-content: flex-start;
|
|
63
|
+
}
|
|
64
|
+
.rls-flex-justify-content-center {
|
|
65
|
+
justify-content: center;
|
|
66
|
+
}
|
|
67
|
+
.rls-flex-justify-content-end {
|
|
68
|
+
justify-content: flex-end;
|
|
69
|
+
}
|
|
70
|
+
.rls-flex-aligns-items-start {
|
|
71
|
+
align-items: flex-start;
|
|
72
|
+
}
|
|
73
|
+
.rls-flex-aligns-items-center {
|
|
74
|
+
align-items: center;
|
|
75
|
+
}
|
|
76
|
+
.rls-flex-aligns-items-end {
|
|
77
|
+
align-items: flex-end;
|
|
78
|
+
}
|
|
61
79
|
body {
|
|
62
80
|
--rls-standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
|
|
63
81
|
--rls-deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
|
|
@@ -65,15 +83,15 @@ body {
|
|
|
65
83
|
--rls-sharp-curve: cubic-bezier(0.4, 0, 0.6, 1);
|
|
66
84
|
}
|
|
67
85
|
body {
|
|
68
|
-
--rls-app-color-900: var(--rls-project-color-900, #
|
|
69
|
-
--rls-app-color-800: var(--rls-project-color-800, #
|
|
70
|
-
--rls-app-color-700: var(--rls-project-color-700, #
|
|
71
|
-
--rls-app-color-600: var(--rls-project-color-600, #
|
|
72
|
-
--rls-app-color-500: var(--rls-project-color-500, #
|
|
86
|
+
--rls-app-color-900: var(--rls-project-color-900, #26303b);
|
|
87
|
+
--rls-app-color-800: var(--rls-project-color-800, #323755);
|
|
88
|
+
--rls-app-color-700: var(--rls-project-color-700, #464b60);
|
|
89
|
+
--rls-app-color-600: var(--rls-project-color-600, #616e99);
|
|
90
|
+
--rls-app-color-500: var(--rls-project-color-500, #828fbf);
|
|
73
91
|
--rls-app-color-400: var(--rls-project-color-400, #bdc0dc);
|
|
74
92
|
--rls-app-color-300: var(--rls-project-color-300, #d6d9f0);
|
|
75
|
-
--rls-app-color-200: var(--rls-project-color-200, #
|
|
76
|
-
--rls-app-color-100: var(--rls-project-color-100, #
|
|
93
|
+
--rls-app-color-200: var(--rls-project-color-200, #e7eaf7);
|
|
94
|
+
--rls-app-color-100: var(--rls-project-color-100, #f7f9ff);
|
|
77
95
|
--rls-app-color-050: var(--rls-project-color-050, #ffffff);
|
|
78
96
|
--rls-primary-color-950: #0b2446;
|
|
79
97
|
--rls-primary-color-900: #103a6a;
|
|
@@ -3927,6 +3945,8 @@ body {
|
|
|
3927
3945
|
gap: var(--rls-sizing-x8);
|
|
3928
3946
|
}
|
|
3929
3947
|
.xs-flex-grid-col-4 > * {
|
|
3948
|
+
display: flex;
|
|
3949
|
+
align-items: flex-start;
|
|
3930
3950
|
width: calc(25% - var(--flex-grid-4-gap));
|
|
3931
3951
|
}
|
|
3932
3952
|
.xs-flex-grid-col-4 > *.xs-flex-col-1 {
|
|
@@ -3945,6 +3965,8 @@ body {
|
|
|
3945
3965
|
width: 100%;
|
|
3946
3966
|
}
|
|
3947
3967
|
.xs-flex-grid-col-6 > * {
|
|
3968
|
+
display: flex;
|
|
3969
|
+
align-items: flex-start;
|
|
3948
3970
|
width: calc(16.66% - var(--flex-grid-6-gap));
|
|
3949
3971
|
}
|
|
3950
3972
|
.xs-flex-grid-col-6 > *.xs-flex-col-1 {
|
|
@@ -3965,6 +3987,8 @@ body {
|
|
|
3965
3987
|
width: 100%;
|
|
3966
3988
|
}
|
|
3967
3989
|
.xs-flex-grid-col-8 > * {
|
|
3990
|
+
display: flex;
|
|
3991
|
+
align-items: flex-start;
|
|
3968
3992
|
width: calc(12.5% - var(--flex-grid-8-gap));
|
|
3969
3993
|
}
|
|
3970
3994
|
.xs-flex-grid-col-8 > *.xs-flex-col-1 {
|
|
@@ -3987,6 +4011,8 @@ body {
|
|
|
3987
4011
|
width: 100%;
|
|
3988
4012
|
}
|
|
3989
4013
|
.xs-flex-grid-col-12 > * {
|
|
4014
|
+
display: flex;
|
|
4015
|
+
align-items: flex-start;
|
|
3990
4016
|
width: calc(8.33% - var(--flex-grid-12-gap));
|
|
3991
4017
|
}
|
|
3992
4018
|
.xs-flex-grid-col-12 > *.xs-flex-col-1 {
|
|
@@ -4081,6 +4107,8 @@ body {
|
|
|
4081
4107
|
gap: var(--rls-sizing-x8);
|
|
4082
4108
|
}
|
|
4083
4109
|
.sm-flex-grid-col-4 > * {
|
|
4110
|
+
display: flex;
|
|
4111
|
+
align-items: flex-start;
|
|
4084
4112
|
width: calc(25% - var(--flex-grid-4-gap));
|
|
4085
4113
|
}
|
|
4086
4114
|
.sm-flex-grid-col-4 > *.sm-flex-col-1 {
|
|
@@ -4099,6 +4127,8 @@ body {
|
|
|
4099
4127
|
width: 100%;
|
|
4100
4128
|
}
|
|
4101
4129
|
.sm-flex-grid-col-6 > * {
|
|
4130
|
+
display: flex;
|
|
4131
|
+
align-items: flex-start;
|
|
4102
4132
|
width: calc(16.66% - var(--flex-grid-6-gap));
|
|
4103
4133
|
}
|
|
4104
4134
|
.sm-flex-grid-col-6 > *.sm-flex-col-1 {
|
|
@@ -4119,6 +4149,8 @@ body {
|
|
|
4119
4149
|
width: 100%;
|
|
4120
4150
|
}
|
|
4121
4151
|
.sm-flex-grid-col-8 > * {
|
|
4152
|
+
display: flex;
|
|
4153
|
+
align-items: flex-start;
|
|
4122
4154
|
width: calc(12.5% - var(--flex-grid-8-gap));
|
|
4123
4155
|
}
|
|
4124
4156
|
.sm-flex-grid-col-8 > *.sm-flex-col-1 {
|
|
@@ -4141,6 +4173,8 @@ body {
|
|
|
4141
4173
|
width: 100%;
|
|
4142
4174
|
}
|
|
4143
4175
|
.sm-flex-grid-col-12 > * {
|
|
4176
|
+
display: flex;
|
|
4177
|
+
align-items: flex-start;
|
|
4144
4178
|
width: calc(8.33% - var(--flex-grid-12-gap));
|
|
4145
4179
|
}
|
|
4146
4180
|
.sm-flex-grid-col-12 > *.sm-flex-col-1 {
|
|
@@ -4236,6 +4270,8 @@ body {
|
|
|
4236
4270
|
gap: var(--rls-sizing-x8);
|
|
4237
4271
|
}
|
|
4238
4272
|
.md-flex-grid-col-4 > * {
|
|
4273
|
+
display: flex;
|
|
4274
|
+
align-items: flex-start;
|
|
4239
4275
|
width: calc(25% - var(--flex-grid-4-gap));
|
|
4240
4276
|
}
|
|
4241
4277
|
.md-flex-grid-col-4 > *.md-flex-col-1 {
|
|
@@ -4254,6 +4290,8 @@ body {
|
|
|
4254
4290
|
width: 100%;
|
|
4255
4291
|
}
|
|
4256
4292
|
.md-flex-grid-col-6 > * {
|
|
4293
|
+
display: flex;
|
|
4294
|
+
align-items: flex-start;
|
|
4257
4295
|
width: calc(16.66% - var(--flex-grid-6-gap));
|
|
4258
4296
|
}
|
|
4259
4297
|
.md-flex-grid-col-6 > *.md-flex-col-1 {
|
|
@@ -4274,6 +4312,8 @@ body {
|
|
|
4274
4312
|
width: 100%;
|
|
4275
4313
|
}
|
|
4276
4314
|
.md-flex-grid-col-8 > * {
|
|
4315
|
+
display: flex;
|
|
4316
|
+
align-items: flex-start;
|
|
4277
4317
|
width: calc(12.5% - var(--flex-grid-8-gap));
|
|
4278
4318
|
}
|
|
4279
4319
|
.md-flex-grid-col-8 > *.md-flex-col-1 {
|
|
@@ -4296,6 +4336,8 @@ body {
|
|
|
4296
4336
|
width: 100%;
|
|
4297
4337
|
}
|
|
4298
4338
|
.md-flex-grid-col-12 > * {
|
|
4339
|
+
display: flex;
|
|
4340
|
+
align-items: flex-start;
|
|
4299
4341
|
width: calc(8.33% - var(--flex-grid-12-gap));
|
|
4300
4342
|
}
|
|
4301
4343
|
.md-flex-grid-col-12 > *.md-flex-col-1 {
|
|
@@ -4391,6 +4433,8 @@ body {
|
|
|
4391
4433
|
gap: var(--rls-sizing-x8);
|
|
4392
4434
|
}
|
|
4393
4435
|
.lg-flex-grid-col-4 > * {
|
|
4436
|
+
display: flex;
|
|
4437
|
+
align-items: flex-start;
|
|
4394
4438
|
width: calc(25% - var(--flex-grid-4-gap));
|
|
4395
4439
|
}
|
|
4396
4440
|
.lg-flex-grid-col-4 > *.lg-flex-col-1 {
|
|
@@ -4409,6 +4453,8 @@ body {
|
|
|
4409
4453
|
width: 100%;
|
|
4410
4454
|
}
|
|
4411
4455
|
.lg-flex-grid-col-6 > * {
|
|
4456
|
+
display: flex;
|
|
4457
|
+
align-items: flex-start;
|
|
4412
4458
|
width: calc(16.66% - var(--flex-grid-6-gap));
|
|
4413
4459
|
}
|
|
4414
4460
|
.lg-flex-grid-col-6 > *.lg-flex-col-1 {
|
|
@@ -4429,6 +4475,8 @@ body {
|
|
|
4429
4475
|
width: 100%;
|
|
4430
4476
|
}
|
|
4431
4477
|
.lg-flex-grid-col-8 > * {
|
|
4478
|
+
display: flex;
|
|
4479
|
+
align-items: flex-start;
|
|
4432
4480
|
width: calc(12.5% - var(--flex-grid-8-gap));
|
|
4433
4481
|
}
|
|
4434
4482
|
.lg-flex-grid-col-8 > *.lg-flex-col-1 {
|
|
@@ -4451,6 +4499,8 @@ body {
|
|
|
4451
4499
|
width: 100%;
|
|
4452
4500
|
}
|
|
4453
4501
|
.lg-flex-grid-col-12 > * {
|
|
4502
|
+
display: flex;
|
|
4503
|
+
align-items: flex-start;
|
|
4454
4504
|
width: calc(8.33% - var(--flex-grid-12-gap));
|
|
4455
4505
|
}
|
|
4456
4506
|
.lg-flex-grid-col-12 > *.lg-flex-col-1 {
|
|
@@ -4546,6 +4596,8 @@ body {
|
|
|
4546
4596
|
gap: var(--rls-sizing-x8);
|
|
4547
4597
|
}
|
|
4548
4598
|
.xl-flex-grid-col-4 > * {
|
|
4599
|
+
display: flex;
|
|
4600
|
+
align-items: flex-start;
|
|
4549
4601
|
width: calc(25% - var(--flex-grid-4-gap));
|
|
4550
4602
|
}
|
|
4551
4603
|
.xl-flex-grid-col-4 > *.xl-flex-col-1 {
|
|
@@ -4564,6 +4616,8 @@ body {
|
|
|
4564
4616
|
width: 100%;
|
|
4565
4617
|
}
|
|
4566
4618
|
.xl-flex-grid-col-6 > * {
|
|
4619
|
+
display: flex;
|
|
4620
|
+
align-items: flex-start;
|
|
4567
4621
|
width: calc(16.66% - var(--flex-grid-6-gap));
|
|
4568
4622
|
}
|
|
4569
4623
|
.xl-flex-grid-col-6 > *.xl-flex-col-1 {
|
|
@@ -4584,6 +4638,8 @@ body {
|
|
|
4584
4638
|
width: 100%;
|
|
4585
4639
|
}
|
|
4586
4640
|
.xl-flex-grid-col-8 > * {
|
|
4641
|
+
display: flex;
|
|
4642
|
+
align-items: flex-start;
|
|
4587
4643
|
width: calc(12.5% - var(--flex-grid-8-gap));
|
|
4588
4644
|
}
|
|
4589
4645
|
.xl-flex-grid-col-8 > *.xl-flex-col-1 {
|
|
@@ -4606,6 +4662,8 @@ body {
|
|
|
4606
4662
|
width: 100%;
|
|
4607
4663
|
}
|
|
4608
4664
|
.xl-flex-grid-col-12 > * {
|
|
4665
|
+
display: flex;
|
|
4666
|
+
align-items: flex-start;
|
|
4609
4667
|
width: calc(8.33% - var(--flex-grid-12-gap));
|
|
4610
4668
|
}
|
|
4611
4669
|
.xl-flex-grid-col-12 > *.xl-flex-col-1 {
|
|
@@ -5781,6 +5839,7 @@ button {
|
|
|
5781
5839
|
--rlc-image-height: var(--rls-sizing-x12);
|
|
5782
5840
|
--rlc-switch-max-width: var(--rls-sizing-x16);
|
|
5783
5841
|
--rlc-switch-component-height: var(--rls-sizing-x8);
|
|
5842
|
+
--rlc-switch-element-width: var(--rls-sizing-x6);
|
|
5784
5843
|
--rlc-switch-element-height: var(--rls-sizing-x4);
|
|
5785
5844
|
--rlc-switch-element-radius: var(--rls-sizing-x4);
|
|
5786
5845
|
display: flex;
|
|
@@ -5909,6 +5968,7 @@ button {
|
|
|
5909
5968
|
--rlc-image-height: var(--rls-sizing-x12);
|
|
5910
5969
|
--rlc-switch-max-width: var(--rls-sizing-x16);
|
|
5911
5970
|
--rlc-switch-component-height: var(--rls-sizing-x8);
|
|
5971
|
+
--rlc-switch-element-width: var(--rls-sizing-x6);
|
|
5912
5972
|
--rlc-switch-element-height: var(--rls-sizing-x4);
|
|
5913
5973
|
--rlc-switch-element-radius: var(--rls-sizing-x4);
|
|
5914
5974
|
display: flex;
|
|
@@ -6024,7 +6084,7 @@ button {
|
|
|
6024
6084
|
);
|
|
6025
6085
|
--pvt-body-border-error: var(
|
|
6026
6086
|
--rlc-field-box-body-border-error,
|
|
6027
|
-
var(--rls-danger-border-1-
|
|
6087
|
+
var(--rls-danger-border-1-500)
|
|
6028
6088
|
);
|
|
6029
6089
|
--pvt-body-border-disabled: var(
|
|
6030
6090
|
--rlc-field-box-body-border-disabled,
|
|
@@ -6098,7 +6158,7 @@ button {
|
|
|
6098
6158
|
overflow: hidden;
|
|
6099
6159
|
background: var(--pvt-body-background);
|
|
6100
6160
|
opacity: var(--pvt-body-opacity);
|
|
6101
|
-
border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-
|
|
6161
|
+
border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-x3));
|
|
6102
6162
|
padding: var(--rlc-field-box-body-padding, 0rem);
|
|
6103
6163
|
box-sizing: border-box;
|
|
6104
6164
|
border: var(--pvt-body-border);
|