@rolster/styles-foundations 1.0.13 → 1.0.14

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 (12) hide show
  1. package/dist/rolster-styles.css +121 -91
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +121 -91
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_rolster-components.scss +17 -7
  7. package/scss/components/_app.scss +15 -3
  8. package/scss/components/_box-field.scss +11 -9
  9. package/scss/components/_data-table.scss +54 -64
  10. package/scss/components/_form.scss +6 -9
  11. package/scss/components/_list-field.scss +46 -25
  12. package/scss/foundations/_colors-foundations.scss +1 -1
package/scss/components/_data-table.scss CHANGED
@@ -1,19 +1,23 @@
1
1
  // Rolster Technology Datatable Component
2
- // v1.0.2
2
+ // v1.1.3
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 12/Sep/2023
6
+ // Updated: 24/Nov/2023
7
7
 
8
8
  @mixin datatable_cell_control() {
9
9
  --rls-avatar-border-radius: var(--sizing-6);
10
10
  --rls-avatar-width: var(--sizing-32);
11
11
  --rls-avatar-height: var(--sizing-32);
12
- --rls-avatar-font-size: var(--pvt-datatable-font-size);
12
+ --rls-avatar-font-size: var(--rls-datatable-font-size);
13
13
 
14
14
  --rls-action-ripple-dimension: var(--sizing-32);
15
15
  --rls-action-ripple-position: -1rem;
16
16
 
17
+ --rls-switch-element-size: var(--sizing-20);
18
+ --rls-switch-bar-radius: var(--sizing-4);
19
+ --rls-switch-bar-height: var(--sizing-8);
20
+
17
21
  display: flex;
18
22
  width: var(--sizing-48);
19
23
  padding: 0rem;
@@ -24,83 +28,71 @@
24
28
  }
25
29
 
26
30
  .rls-datatable {
27
- --pvt-datatable-letter-spacing: 0.525px;
28
- --pvt-datatable-font-size: 0.8725rem;
31
+ --rls-input-font-size: var(--rls-datatable-font-size);
32
+ --rls-input-letter-spacing: var(--rls-datatable-letter-spacing);
29
33
 
30
34
  position: relative;
31
- float: left;
32
35
  width: 100%;
33
36
  border-radius: var(--sizing-8);
34
37
  box-sizing: border-box;
35
38
 
36
39
  & > table {
37
- position: relative;
38
- float: left;
39
- width: 100%;
40
- display: block;
41
- }
42
-
43
- &__content {
44
- position: relative;
45
- display: block;
46
- float: left;
47
- width: 100%;
48
- border-radius: 0rem;
49
- }
50
-
51
- &__table {
52
- display: block;
53
- float: left;
54
- width: 100%;
40
+ display: flex;
41
+ flex-direction: column;
42
+ row-gap: var(--sizing-8);
55
43
  border-spacing: 0;
56
44
  border-collapse: collapse;
57
45
  }
58
46
 
59
47
  &__thead {
60
- display: block;
61
- float: left;
62
48
  width: 100%;
63
- margin-bottom: var(--sizing-4);
64
49
  }
65
50
 
66
51
  &__header {
67
- padding: 0rem var(--sizing-12);
68
52
  display: flex;
53
+ column-gap: var(--sizing-8);
54
+ padding: 0rem var(--sizing-12);
69
55
  box-sizing: border-box;
70
56
  }
71
57
 
72
58
  &__title {
73
59
  position: relative;
74
- display: block;
75
- float: left;
76
- text-align: left;
77
- padding: 0rem var(--sizing-4);
60
+ display: flex;
78
61
  text-align: left;
79
62
  overflow: hidden;
80
63
  white-space: nowrap;
81
- text-overflow: ellipsis;
82
64
  height: var(--sizing-40);
83
65
  line-height: var(--sizing-40);
84
66
  color: var(--color-theme-500);
85
- font-size: var(--pvt-datatable-font-size);
86
- letter-spacing: var(--pvt-datatable-letter-spacing);
67
+ font-size: var(--rls-datatable-font-size);
68
+ letter-spacing: var(--rls-datatable-letter-spacing);
87
69
  font-weight: var(--font-weight-bold);
88
70
 
89
71
  &--control {
90
72
  @include datatable_cell_control();
91
73
  }
74
+
75
+ & > span {
76
+ width: 100%;
77
+ text-overflow: ellipsis;
78
+ overflow: hidden;
79
+ }
80
+
81
+ & > .rls-icon {
82
+ margin: auto;
83
+ }
92
84
  }
93
85
 
94
86
  &__tbody {
95
- position: relative;
96
- float: left;
97
- width: 100%;
98
- display: block;
87
+ display: flex;
88
+ flex-direction: column;
89
+ row-gap: var(--sizing-12);
99
90
  }
100
91
 
101
92
  &__data {
102
93
  position: relative;
103
94
  display: flex;
95
+ column-gap: var(--sizing-8);
104
96
  padding: 0rem var(--sizing-12);
105
97
  box-sizing: border-box;
106
98
  border: var(--border-1-theme-100);
@@ -110,30 +102,36 @@
110
102
  &--error {
111
103
  border: var(--border-1-danger-100);
112
104
  }
113
-
114
- & + .rls-datatable__data {
115
- margin-top: var(--sizing-12);
116
- }
117
105
  }
118
106
 
119
107
  &__cell {
120
108
  position: relative;
121
- display: block;
122
- float: left;
109
+ display: flex;
123
110
  height: var(--sizing-40);
124
111
  line-height: var(--sizing-40);
125
- padding: 0rem var(--sizing-4);
126
- cursor: default;
127
112
  text-align: left;
113
+ cursor: default;
114
+ overflow: hidden;
115
+ white-space: nowrap;
128
116
  color: var(--rls-input-font-color);
129
- font-size: var(--pvt-datatable-font-size);
130
- letter-spacing: var(--pvt-datatable-letter-spacing);
117
+ font-size: var(--rls-datatable-font-size);
118
+ letter-spacing: var(--rls-datatable-letter-spacing);
131
119
  font-weight: var(--font-weight-regular);
132
120
 
121
+ &--overflow {
122
+ overflow: initial;
123
+ }
124
+
133
125
  &--control {
134
126
  @include datatable_cell_control();
135
127
  }
136
128
 
129
+ & > span {
130
+ width: 100%;
131
+ text-overflow: ellipsis;
132
+ overflow: hidden;
133
+ }
134
+
137
135
  .rls-box-field {
138
136
  width: 100%;
139
137
  padding: 0rem;
@@ -150,19 +148,16 @@
150
148
 
151
149
  .rls-input-field {
152
150
  padding: var(--sizing-8) 0rem !important;
153
-
154
- &__component,
155
- &__value {
156
- font-size: var(--pvt-datatable-font-size);
157
- font-weight: var(--font-weight-medium);
158
- letter-spacing: var(--body-2-letter-spacing);
159
- }
160
151
  }
161
152
  }
162
153
 
163
154
  &__icon {
164
155
  padding: 0rem;
165
156
  }
157
+
158
+ &__error {
159
+ display: none;
160
+ }
166
161
  }
167
162
 
168
163
  .rls-list-field {
@@ -173,9 +168,9 @@
173
168
  }
174
169
 
175
170
  &__control {
176
- font-size: var(--pvt-datatable-font-size);
171
+ font-size: var(--rls-datatable-font-size);
177
172
  font-weight: var(--font-weight-medium);
178
- letter-spacing: var(--body-2-letter-spacing);
173
+ letter-spacing: var(--body-letter-spacing);
179
174
  }
180
175
 
181
176
  &__suggestions {
@@ -196,14 +191,10 @@
196
191
 
197
192
  .rls-input {
198
193
  margin: var(--sizing-8) 0rem;
199
-
200
- &__component {
201
- font-size: var(--pvt-datatable-font-size);
202
- }
203
194
  }
204
195
 
205
196
  .rls-amount {
206
- font-size: var(--pvt-datatable-font-size);
197
+ font-size: var(--rls-datatable-font-size);
207
198
  }
208
199
 
209
200
  .rls-poster {
@@ -254,7 +245,6 @@
254
245
 
255
246
  &__tfooter {
256
247
  position: relative;
257
- float: left;
258
248
  width: 100%;
259
249
  overflow: hidden;
260
250
  background: var(--color-theme-100);
package/scss/components/_form.scss CHANGED
@@ -1,30 +1,27 @@
1
1
  // Rolster Technology Form Component
2
- // v1.0.1
2
+ // v1.0.2
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 12/Sep/2023
6
+ // Updated: 17/Nov/2023
7
7
 
8
8
  .rls-form {
9
+ display: flex;
10
+ flex-direction: column;
11
+ row-gap: var(--sizing-16);
12
+
9
13
  &__content {
10
14
  position: relative;
11
- float: left;
12
15
  padding: 0rem var(--sizing-16);
13
16
  box-sizing: border-box;
14
-
15
- & + .rls-form__content {
16
- margin-top: var(--sizing-24);
17
- }
18
17
  }
19
18
 
20
19
  &__footer {
21
20
  position: relative;
22
- float: left;
23
21
  display: flex;
24
22
  justify-content: var(--rls-form-footer-justify-content);
25
23
  column-gap: var(--sizing-16);
26
24
  padding: 0rem var(--sizing-16);
27
25
  box-sizing: border-box;
28
- margin-top: var(--sizing-24);
29
26
  }
30
27
  }
package/scss/components/_list-field.scss CHANGED
@@ -1,15 +1,16 @@
1
1
  // Rolster Technology ListField Component
2
- // v1.0.1
2
+ // v1.0.5
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 12/Sep/2023
6
+ // Updated: 15/Nov/2023
7
7
 
8
8
  .rls-list-field {
9
9
  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
10
10
 
11
11
  --pvt-action-font-color: var(--color-theme-300);
12
12
  --pvt-list-height: 0rem;
13
+ --pvt-list-max-height: 20rem;
13
14
  --pvt-list-opacity: 0;
14
15
  --pvt-list-transform: scale(0, 0);
15
16
  --pvt-list-transform-origin: 0% 0%;
@@ -83,8 +84,10 @@
83
84
  left: 0rem;
84
85
  width: 100%;
85
86
  height: 0rem;
87
+ max-height: var(--pvt-list-max-height);
86
88
  overflow: hidden;
87
- z-index: var(--z-index-4);
89
+ z-index: var(--z-index-1);
90
+ padding-bottom: var(--sizing-12);
88
91
 
89
92
  &--visible {
90
93
  --pvt-list-height: auto;
@@ -94,6 +97,7 @@
94
97
  overflow: initial;
95
98
  opacity: 1;
96
99
  height: auto;
100
+ z-index: var(--z-index-4);
97
101
  }
98
102
 
99
103
  &--higher {
@@ -102,31 +106,39 @@
102
106
  top: initial;
103
107
  bottom: var(--sizing-48);
104
108
  }
109
+
110
+ &__body {
111
+ display: flex;
112
+ flex-direction: column;
113
+ width: 100%;
114
+ height: var(--pvt-list-height);
115
+ max-height: var(--pvt-list-max-height);
116
+ padding: var(--sizing-8) var(--sizing-4);
117
+ box-sizing: border-box;
118
+ border-radius: 0.5rem;
119
+ overflow: hidden;
120
+ z-index: var(--z-index-2);
121
+ background: var(--background-theme-500);
122
+ border: var(--border-1-rolster-500);
123
+ box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
124
+ will-change: opacity, transform;
125
+ opacity: var(--pvt-list-opacity);
126
+ transform: var(--pvt-list-transform);
127
+ transform-origin: var(--pvt-list-transform-origin);
128
+ transition:
129
+ opacity 240ms 0ms var(--standard-curve),
130
+ transform 240ms 0ms var(--standard-curve);
131
+ }
105
132
  }
106
133
 
107
134
  &__ul {
108
- position: relative;
109
135
  display: flex;
110
136
  flex-direction: column;
111
- float: left;
112
137
  width: 100%;
113
- height: var(--pvt-list-height);
114
- padding: var(--sizing-8) 0rem;
115
- border-radius: 0.5rem;
116
- box-sizing: border-box;
117
138
  overflow-y: auto;
118
139
  overflow-x: hidden;
119
- z-index: var(--z-index-2);
120
- background: var(--background-theme-500);
121
- border: var(--border-1-rolster-500);
122
- box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
123
- will-change: opacity, transform;
124
- opacity: var(--pvt-list-opacity);
125
- transform: var(--pvt-list-transform);
126
- transform-origin: var(--pvt-list-transform-origin);
127
- transition:
128
- opacity 240ms 0ms var(--standard-curve),
129
- transform 240ms 0ms var(--standard-curve);
140
+ padding: 0rem var(--sizing-8);
141
+ box-sizing: border-box;
130
142
  }
131
143
 
132
144
  &__element {
@@ -134,9 +146,11 @@
134
146
  --rls-ballot-subtitle-text-overflow: ellipsis;
135
147
  --rls-ballot-subtitle-white-space: nowrap;
136
148
 
137
- padding: 0rem var(--sizing-8);
138
149
  box-sizing: border-box;
139
150
  outline: none;
151
+ border-radius: var(--sizing-8);
152
+ padding: var(--sizing-4);
153
+ box-sizing: border-box;
140
154
 
141
155
  &:hover {
142
156
  background: var(--background-theme-300);
@@ -149,7 +163,7 @@
149
163
 
150
164
  &__empty {
151
165
  display: flex;
152
- padding: 0rem var(--sizing-16);
166
+ padding: 0rem var(--sizing-8);
153
167
  box-sizing: border-box;
154
168
 
155
169
  &__avatar {
@@ -162,15 +176,21 @@
162
176
  }
163
177
 
164
178
  &__description {
165
- width: 100%;
166
- box-sizing: border-box;
179
+ display: flex;
180
+ flex-direction: column;
181
+ row-gap: var(--sizing-4);
182
+ overflow: hidden;
167
183
 
168
184
  label {
169
185
  display: block;
170
- float: left;
171
186
  width: 100%;
172
187
  color: var(--color-theme-300);
173
188
  }
189
+
190
+ p {
191
+ white-space: initial;
192
+ color: var(--color-theme-300);
193
+ }
174
194
  }
175
195
  }
176
196
 
@@ -196,6 +216,7 @@
196
216
  .rls-list-field {
197
217
  --pvt-list-transform: translateY(100%);
198
218
  --pvt-list-transform-origin: initial;
219
+ --pvt-list-max-height: initial;
199
220
 
200
221
  &__suggestions {
201
222
  display: flex;
package/scss/foundations/_colors-foundations.scss CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  --border-dark-300: rgba(173, 186, 230, 1);
36
36
 
37
- --border-dark-100: rgba(223, 229, 249, 1);
37
+ --border-dark-100: rgba(209, 214, 239, 1);
38
38
 
39
39
  --border-light-500: rgba(255, 255, 255, 1);
40
40