@rolster/styles-foundations 1.0.13 → 1.0.15

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 +124 -97
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +124 -97
  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 +49 -31
  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.6
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 12/Sep/2023
6
+ // Updated: 06/Dic/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%;
@@ -17,8 +18,6 @@
17
18
  --pvt-backdrop-bottom: initial;
18
19
 
19
20
  position: relative;
20
- float: left;
21
- width: 100%;
22
21
  box-sizing: border-box;
23
22
 
24
23
  &.rls-box-field--active {
@@ -33,7 +32,6 @@
33
32
 
34
33
  &__control {
35
34
  position: relative;
36
- float: left;
37
35
  width: calc(100% - var(--sizing-28));
38
36
  height: var(--sizing-24);
39
37
  line-height: var(--sizing-24);
@@ -41,8 +39,8 @@
41
39
  cursor: text;
42
40
  border: none;
43
41
  outline: none;
44
- color: var(--rls-input-font-color);
45
42
  background: transparent;
43
+ color: var(--rls-input-font-color);
46
44
  font-size: var(--rls-input-size);
47
45
  font-weight: var(--font-weight-medium);
48
46
  letter-spacing: var(--rls-input-letter-spacing);
@@ -79,12 +77,14 @@
79
77
 
80
78
  &__suggestions {
81
79
  position: absolute;
82
- top: 4.25rem;
80
+ top: calc(100% + var(--sizing-8));
83
81
  left: 0rem;
84
82
  width: 100%;
85
83
  height: 0rem;
84
+ max-height: var(--pvt-list-max-height);
86
85
  overflow: hidden;
87
- z-index: var(--z-index-4);
86
+ z-index: var(--z-index-2);
87
+ padding-bottom: var(--sizing-12);
88
88
 
89
89
  &--visible {
90
90
  --pvt-list-height: auto;
@@ -94,6 +94,7 @@
94
94
  overflow: initial;
95
95
  opacity: 1;
96
96
  height: auto;
97
+ z-index: var(--z-index-4);
97
98
  }
98
99
 
99
100
  &--higher {
@@ -102,31 +103,39 @@
102
103
  top: initial;
103
104
  bottom: var(--sizing-48);
104
105
  }
106
+
107
+ &__body {
108
+ display: flex;
109
+ flex-direction: column;
110
+ width: 100%;
111
+ height: var(--pvt-list-height);
112
+ max-height: var(--pvt-list-max-height);
113
+ padding: var(--sizing-8) var(--sizing-4);
114
+ box-sizing: border-box;
115
+ border-radius: 0.5rem;
116
+ overflow: hidden;
117
+ z-index: var(--z-index-2);
118
+ background: var(--background-theme-500);
119
+ border: var(--border-1-rolster-500);
120
+ box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
121
+ will-change: opacity, transform;
122
+ opacity: var(--pvt-list-opacity);
123
+ transform: var(--pvt-list-transform);
124
+ transform-origin: var(--pvt-list-transform-origin);
125
+ transition:
126
+ opacity 240ms 0ms var(--standard-curve),
127
+ transform 240ms 0ms var(--standard-curve);
128
+ }
105
129
  }
106
130
 
107
131
  &__ul {
108
- position: relative;
109
132
  display: flex;
110
133
  flex-direction: column;
111
- float: left;
112
134
  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
135
  overflow-y: auto;
118
136
  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);
137
+ padding: 0rem var(--sizing-8);
138
+ box-sizing: border-box;
130
139
  }
131
140
 
132
141
  &__element {
@@ -134,9 +143,11 @@
134
143
  --rls-ballot-subtitle-text-overflow: ellipsis;
135
144
  --rls-ballot-subtitle-white-space: nowrap;
136
145
 
137
- padding: 0rem var(--sizing-8);
138
146
  box-sizing: border-box;
139
147
  outline: none;
148
+ border-radius: var(--sizing-8);
149
+ padding: var(--sizing-4);
150
+ box-sizing: border-box;
140
151
 
141
152
  &:hover {
142
153
  background: var(--background-theme-300);
@@ -149,7 +160,7 @@
149
160
 
150
161
  &__empty {
151
162
  display: flex;
152
- padding: 0rem var(--sizing-16);
163
+ padding: 0rem var(--sizing-8);
153
164
  box-sizing: border-box;
154
165
 
155
166
  &__avatar {
@@ -162,15 +173,21 @@
162
173
  }
163
174
 
164
175
  &__description {
165
- width: 100%;
166
- box-sizing: border-box;
176
+ display: flex;
177
+ flex-direction: column;
178
+ row-gap: var(--sizing-4);
179
+ overflow: hidden;
167
180
 
168
181
  label {
169
182
  display: block;
170
- float: left;
171
183
  width: 100%;
172
184
  color: var(--color-theme-300);
173
185
  }
186
+
187
+ p {
188
+ white-space: initial;
189
+ color: var(--color-theme-300);
190
+ }
174
191
  }
175
192
  }
176
193
 
@@ -182,7 +199,7 @@
182
199
  right: 0rem;
183
200
  bottom: var(--pvt-backdrop-bottom);
184
201
  opacity: var(--pvt-backdrop-opacity);
185
- z-index: var(--z-index-1);
202
+ z-index: var(--z-index-2);
186
203
  will-change: opacity;
187
204
  background: var(--backdrop-rolster-500);
188
205
  backdrop-filter: blur(2px);
@@ -196,6 +213,7 @@
196
213
  .rls-list-field {
197
214
  --pvt-list-transform: translateY(100%);
198
215
  --pvt-list-transform-origin: initial;
216
+ --pvt-list-max-height: initial;
199
217
 
200
218
  &__suggestions {
201
219
  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