@rolster/styles-foundations 3.0.4 → 3.0.5
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/LICENSE +21 -21
- package/dist/design-system-bordered.css +13 -15
- package/dist/design-system-bordered.css.map +1 -1
- package/dist/design-system-bordered.min.css +3 -3
- package/dist/design-system-filled.css +13 -15
- package/dist/design-system-filled.css.map +1 -1
- package/dist/design-system-filled.min.css +3 -3
- package/package.json +41 -41
- package/scss/design-system-bordered/app.scss +228 -228
- package/scss/design-system-bordered/atoms/amount.scss +58 -58
- package/scss/design-system-bordered/atoms/area-text.scss +100 -100
- package/scss/design-system-bordered/atoms/avatar.scss +50 -50
- package/scss/design-system-bordered/atoms/badge.scss +51 -51
- package/scss/design-system-bordered/atoms/breadcrumb.scss +87 -87
- package/scss/design-system-bordered/atoms/button-action.scss +124 -124
- package/scss/design-system-bordered/atoms/button-option.scss +49 -49
- package/scss/design-system-bordered/atoms/image.scss +37 -37
- package/scss/design-system-bordered/atoms/input-decimal.scss +15 -15
- package/scss/design-system-bordered/atoms/input-money.scss +15 -15
- package/scss/design-system-bordered/atoms/input-number.scss +12 -12
- package/scss/design-system-bordered/atoms/input-password.scss +48 -48
- package/scss/design-system-bordered/atoms/input-percentage.scss +12 -12
- package/scss/design-system-bordered/atoms/input-search.scss +28 -28
- package/scss/design-system-bordered/atoms/input-text.scss +12 -12
- package/scss/design-system-bordered/atoms/label.scss +20 -20
- package/scss/design-system-bordered/atoms/led.scss +31 -31
- package/scss/design-system-bordered/atoms/message-icon.scss +21 -21
- package/scss/design-system-bordered/atoms/poster.scss +42 -42
- package/scss/design-system-bordered/atoms/progress-bar.scss +83 -83
- package/scss/design-system-bordered/atoms/progress-circular.scss +59 -59
- package/scss/design-system-bordered/atoms/radio-button.scss +55 -55
- package/scss/design-system-bordered/atoms/spinner.scss +102 -102
- package/scss/design-system-bordered/atoms/switch.scss +71 -71
- package/scss/design-system-bordered/atoms/tabular-text.scss +38 -38
- package/scss/design-system-bordered/molecules/alert.scss +52 -52
- package/scss/design-system-bordered/molecules/button-progress.scss +15 -15
- package/scss/design-system-bordered/molecules/button-toggle.scss +100 -100
- package/scss/design-system-bordered/molecules/field-area.scss +13 -13
- package/scss/design-system-bordered/molecules/field-decimal.scss +14 -14
- package/scss/design-system-bordered/molecules/field-file.scss +41 -41
- package/scss/design-system-bordered/molecules/field-list-suggestions.scss +65 -65
- package/scss/design-system-bordered/molecules/field-money.scss +14 -14
- package/scss/design-system-bordered/molecules/field-password.scss +23 -23
- package/scss/design-system-bordered/molecules/field-readonly.scss +24 -24
- package/scss/design-system-bordered/molecules/label-check-box.scss +72 -72
- package/scss/design-system-bordered/molecules/label-radio-button.scss +79 -79
- package/scss/design-system-bordered/molecules/label-switch.scss +71 -71
- package/scss/design-system-bordered/molecules/message-empty.scss +16 -17
- package/scss/design-system-bordered/molecules/pagination.scss +114 -114
- package/scss/design-system-bordered/molecules/picker-day-range.scss +109 -109
- package/scss/design-system-bordered/molecules/picker-day.scss +117 -117
- package/scss/design-system-bordered/molecules/picker-month.scss +67 -67
- package/scss/design-system-bordered/molecules/picker-selector-title.scss +54 -54
- package/scss/design-system-bordered/molecules/picker-year.scss +113 -113
- package/scss/design-system-bordered/molecules/slider.scss +74 -74
- package/scss/design-system-bordered/molecules/tabs.scss +51 -51
- package/scss/design-system-bordered/molecules/toolbar.scss +53 -53
- package/scss/design-system-bordered/organisms/bottom-sheet.scss +108 -108
- package/scss/design-system-bordered/organisms/card.scss +36 -36
- package/scss/design-system-bordered/organisms/confirmation.scss +186 -186
- package/scss/design-system-bordered/organisms/dropdown.scss +45 -45
- package/scss/design-system-bordered/organisms/field-autocomplete.scss +79 -79
- package/scss/design-system-bordered/organisms/field-clock.scss +62 -62
- package/scss/design-system-bordered/organisms/field-date-range.scss +60 -60
- package/scss/design-system-bordered/organisms/field-date.scss +61 -61
- package/scss/design-system-bordered/organisms/form-navigation.scss +46 -46
- package/scss/design-system-bordered/organisms/image-chooser.scss +50 -50
- package/scss/design-system-bordered/organisms/image-editor-modal.scss +23 -23
- package/scss/design-system-bordered/organisms/image-editor.scss +118 -118
- package/scss/design-system-bordered/organisms/modal-sheet.scss +138 -138
- package/scss/design-system-bordered/organisms/modal.scss +75 -75
- package/scss/design-system-bordered/organisms/picker-clock.scss +144 -144
- package/scss/design-system-bordered/organisms/picker-date-range.scss +84 -84
- package/scss/design-system-bordered/organisms/picker-date.scss +86 -86
- package/scss/design-system-bordered/organisms/snackbar.scss +93 -93
- package/scss/design-system-filled/atoms/led.scss +31 -31
- package/scss/design-system-filled/molecules/message-empty.scss +16 -17
- package/scss/foundations/borders.scss +14 -14
- package/scss/foundations/elevations.scss +130 -130
- package/scss/foundations/flex-boxs.scss +96 -96
- package/scss/foundations/helpers.scss +123 -123
- package/scss/foundations/themes.scss +230 -230
- package/scss/utilities/helpers.scss +124 -124
- package/scss/utilities/layout.scss +83 -83
- package/scss/utilities/typographics.scss +208 -208
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
// Rolster Technology LabelCheckBox Component
|
|
2
|
-
// v1.0.11
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 20/Mar/2018
|
|
6
|
-
// Updated: 03/Feb/2026
|
|
7
|
-
|
|
8
|
-
.rls-label-checkbox {
|
|
9
|
-
--pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
|
|
10
|
-
--pvt-label-font-size: var(
|
|
11
|
-
--rlc-label-checkbox-font-size,
|
|
12
|
-
var(--rls-label-font-size)
|
|
13
|
-
);
|
|
14
|
-
|
|
15
|
-
--pvt-label-letter-spacing: var(
|
|
16
|
-
--rlc-label-checkbox-letter-spacing,
|
|
17
|
-
var(--rls-label-letter-spacing)
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
--rlc-checkbox-dimension: var(--pvt-dimension);
|
|
21
|
-
--rlc-checkbox-cursor: pointer;
|
|
22
|
-
--rlc-ballot-padding: 0rem;
|
|
23
|
-
|
|
24
|
-
--pvt-text-opacity: 1;
|
|
25
|
-
--pvt-text-overflow: hidden;
|
|
26
|
-
--pvt-text-white-space: nowrap;
|
|
27
|
-
--pvt-text-text-overflow: ellipsis;
|
|
28
|
-
|
|
29
|
-
display: flex;
|
|
30
|
-
column-gap: var(--rls-sizing-x4);
|
|
31
|
-
align-items: center;
|
|
32
|
-
|
|
33
|
-
&--disabled {
|
|
34
|
-
--pvt-text-opacity: 0.5;
|
|
35
|
-
|
|
36
|
-
pointer-events: none;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&--reverse {
|
|
40
|
-
flex-direction: row-reverse;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&--extended {
|
|
44
|
-
--pvt-text-text-overflow: initial;
|
|
45
|
-
--pvt-text-overflow: initial;
|
|
46
|
-
--pvt-text-white-space: initial;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&__component {
|
|
50
|
-
width: var(--pvt-dimension);
|
|
51
|
-
flex: 0 0 auto;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&__text {
|
|
55
|
-
flex: 1 1 auto;
|
|
56
|
-
font-size: var(--pvt-label-font-size);
|
|
57
|
-
font-weight: var(--rls-font-weight-medium);
|
|
58
|
-
letter-spacing: var(--pvt-label-letter-spacing);
|
|
59
|
-
line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
|
|
60
|
-
color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
|
|
61
|
-
user-select: none;
|
|
62
|
-
opacity: var(--pvt-text-opacity);
|
|
63
|
-
overflow: hidden;
|
|
64
|
-
|
|
65
|
-
& > p {
|
|
66
|
-
height: initial;
|
|
67
|
-
overflow: initial;
|
|
68
|
-
text-overflow: initial;
|
|
69
|
-
white-space: initial;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
1
|
+
// Rolster Technology LabelCheckBox Component
|
|
2
|
+
// v1.0.11
|
|
3
|
+
// @license MIT
|
|
4
|
+
// Author: Rolster Developers
|
|
5
|
+
// Created: 20/Mar/2018
|
|
6
|
+
// Updated: 03/Feb/2026
|
|
7
|
+
|
|
8
|
+
.rls-label-checkbox {
|
|
9
|
+
--pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
|
|
10
|
+
--pvt-label-font-size: var(
|
|
11
|
+
--rlc-label-checkbox-font-size,
|
|
12
|
+
var(--rls-label-font-size)
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
--pvt-label-letter-spacing: var(
|
|
16
|
+
--rlc-label-checkbox-letter-spacing,
|
|
17
|
+
var(--rls-label-letter-spacing)
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
--rlc-checkbox-dimension: var(--pvt-dimension);
|
|
21
|
+
--rlc-checkbox-cursor: pointer;
|
|
22
|
+
--rlc-ballot-padding: 0rem;
|
|
23
|
+
|
|
24
|
+
--pvt-text-opacity: 1;
|
|
25
|
+
--pvt-text-overflow: hidden;
|
|
26
|
+
--pvt-text-white-space: nowrap;
|
|
27
|
+
--pvt-text-text-overflow: ellipsis;
|
|
28
|
+
|
|
29
|
+
display: flex;
|
|
30
|
+
column-gap: var(--rls-sizing-x4);
|
|
31
|
+
align-items: center;
|
|
32
|
+
|
|
33
|
+
&--disabled {
|
|
34
|
+
--pvt-text-opacity: 0.5;
|
|
35
|
+
|
|
36
|
+
pointer-events: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--reverse {
|
|
40
|
+
flex-direction: row-reverse;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--extended {
|
|
44
|
+
--pvt-text-text-overflow: initial;
|
|
45
|
+
--pvt-text-overflow: initial;
|
|
46
|
+
--pvt-text-white-space: initial;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&__component {
|
|
50
|
+
width: var(--pvt-dimension);
|
|
51
|
+
flex: 0 0 auto;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&__text {
|
|
55
|
+
flex: 1 1 auto;
|
|
56
|
+
font-size: var(--pvt-label-font-size);
|
|
57
|
+
font-weight: var(--rls-font-weight-medium);
|
|
58
|
+
letter-spacing: var(--pvt-label-letter-spacing);
|
|
59
|
+
line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
|
|
60
|
+
color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
|
|
61
|
+
user-select: none;
|
|
62
|
+
opacity: var(--pvt-text-opacity);
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
|
|
65
|
+
& > p {
|
|
66
|
+
height: initial;
|
|
67
|
+
overflow: initial;
|
|
68
|
+
text-overflow: initial;
|
|
69
|
+
white-space: initial;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
// Rolster Technology RadiobuttonLabel Component
|
|
2
|
-
// v1.0.10
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 20/Mar/2018
|
|
6
|
-
// Updated: 03/Feb/2026
|
|
7
|
-
|
|
8
|
-
.rls-label-radiobutton {
|
|
9
|
-
--pvt-dimension: var(
|
|
10
|
-
--rlc-label-radiobutton-dimension,
|
|
11
|
-
var(--rls-sizing-x12)
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
--pvt-label-font-size: var(
|
|
15
|
-
--rlc-label-radiobutton-font-size,
|
|
16
|
-
var(--rls-label-font-size)
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
--pvt-label-letter-spacing: var(
|
|
20
|
-
--rlc-label-radiobutton-letter-spacing,
|
|
21
|
-
var(--rls-label-letter-spacing)
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
--rlc-radiobutton-dimension: var(--pvt-dimension);
|
|
25
|
-
--rlc-radiobutton-cursor: pointer;
|
|
26
|
-
--rlc-ballot-padding: 0rem;
|
|
27
|
-
|
|
28
|
-
--pvt-text-opacity: 1;
|
|
29
|
-
--pvt-text-overflow: hidden;
|
|
30
|
-
--pvt-text-white-space: nowrap;
|
|
31
|
-
--pvt-text-text-overflow: ellipsis;
|
|
32
|
-
|
|
33
|
-
display: flex;
|
|
34
|
-
column-gap: var(--rls-sizing-x4);
|
|
35
|
-
align-items: center;
|
|
36
|
-
|
|
37
|
-
&--disabled {
|
|
38
|
-
--pvt-text-opacity: 0.5;
|
|
39
|
-
|
|
40
|
-
pointer-events: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&--reverse {
|
|
44
|
-
flex-direction: row-reverse;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&--extended {
|
|
48
|
-
--pvt-text-text-overflow: initial;
|
|
49
|
-
--pvt-text-overflow: initial;
|
|
50
|
-
--pvt-text-white-space: initial;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&__component {
|
|
54
|
-
width: var(--pvt-dimension);
|
|
55
|
-
flex: 0 0 auto;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&__text {
|
|
59
|
-
flex: 1 1 auto;
|
|
60
|
-
font-size: var(--pvt-label-font-size);
|
|
61
|
-
font-weight: var(--rls-font-weight-medium);
|
|
62
|
-
letter-spacing: var(--pvt-label-letter-spacing);
|
|
63
|
-
line-height: var(
|
|
64
|
-
--rlc-label-radiobutton-line-height,
|
|
65
|
-
var(--rls-sizing-x12)
|
|
66
|
-
);
|
|
67
|
-
color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
|
|
68
|
-
user-select: none;
|
|
69
|
-
opacity: var(--pvt-text-opacity);
|
|
70
|
-
overflow: hidden;
|
|
71
|
-
|
|
72
|
-
& > p {
|
|
73
|
-
height: initial;
|
|
74
|
-
overflow: initial;
|
|
75
|
-
text-overflow: initial;
|
|
76
|
-
white-space: initial;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
1
|
+
// Rolster Technology RadiobuttonLabel Component
|
|
2
|
+
// v1.0.10
|
|
3
|
+
// @license MIT
|
|
4
|
+
// Author: Rolster Developers
|
|
5
|
+
// Created: 20/Mar/2018
|
|
6
|
+
// Updated: 03/Feb/2026
|
|
7
|
+
|
|
8
|
+
.rls-label-radiobutton {
|
|
9
|
+
--pvt-dimension: var(
|
|
10
|
+
--rlc-label-radiobutton-dimension,
|
|
11
|
+
var(--rls-sizing-x12)
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
--pvt-label-font-size: var(
|
|
15
|
+
--rlc-label-radiobutton-font-size,
|
|
16
|
+
var(--rls-label-font-size)
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
--pvt-label-letter-spacing: var(
|
|
20
|
+
--rlc-label-radiobutton-letter-spacing,
|
|
21
|
+
var(--rls-label-letter-spacing)
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
--rlc-radiobutton-dimension: var(--pvt-dimension);
|
|
25
|
+
--rlc-radiobutton-cursor: pointer;
|
|
26
|
+
--rlc-ballot-padding: 0rem;
|
|
27
|
+
|
|
28
|
+
--pvt-text-opacity: 1;
|
|
29
|
+
--pvt-text-overflow: hidden;
|
|
30
|
+
--pvt-text-white-space: nowrap;
|
|
31
|
+
--pvt-text-text-overflow: ellipsis;
|
|
32
|
+
|
|
33
|
+
display: flex;
|
|
34
|
+
column-gap: var(--rls-sizing-x4);
|
|
35
|
+
align-items: center;
|
|
36
|
+
|
|
37
|
+
&--disabled {
|
|
38
|
+
--pvt-text-opacity: 0.5;
|
|
39
|
+
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--reverse {
|
|
44
|
+
flex-direction: row-reverse;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--extended {
|
|
48
|
+
--pvt-text-text-overflow: initial;
|
|
49
|
+
--pvt-text-overflow: initial;
|
|
50
|
+
--pvt-text-white-space: initial;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&__component {
|
|
54
|
+
width: var(--pvt-dimension);
|
|
55
|
+
flex: 0 0 auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&__text {
|
|
59
|
+
flex: 1 1 auto;
|
|
60
|
+
font-size: var(--pvt-label-font-size);
|
|
61
|
+
font-weight: var(--rls-font-weight-medium);
|
|
62
|
+
letter-spacing: var(--pvt-label-letter-spacing);
|
|
63
|
+
line-height: var(
|
|
64
|
+
--rlc-label-radiobutton-line-height,
|
|
65
|
+
var(--rls-sizing-x12)
|
|
66
|
+
);
|
|
67
|
+
color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
|
|
68
|
+
user-select: none;
|
|
69
|
+
opacity: var(--pvt-text-opacity);
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
|
|
72
|
+
& > p {
|
|
73
|
+
height: initial;
|
|
74
|
+
overflow: initial;
|
|
75
|
+
text-overflow: initial;
|
|
76
|
+
white-space: initial;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
// Rolster Technology SwitchLabel Component
|
|
2
|
-
// v1.0.12
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 20/Mar/2018
|
|
6
|
-
// Updated: 03/Feb/2026
|
|
7
|
-
|
|
8
|
-
.rls-label-switch {
|
|
9
|
-
--rlc-switch-cursor: pointer;
|
|
10
|
-
--rlc-ballot-padding: 0rem;
|
|
11
|
-
|
|
12
|
-
--pvt-label-font-size: var(
|
|
13
|
-
--rlc-label-switch-font-size,
|
|
14
|
-
var(--rls-label-font-size)
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
--pvt-label-letter-spacing: var(
|
|
18
|
-
--rlc-label-switch-letter-spacing,
|
|
19
|
-
var(--rls-label-letter-spacing)
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
--pvt-text-opacity: 1;
|
|
23
|
-
--pvt-text-overflow: hidden;
|
|
24
|
-
--pvt-text-white-space: nowrap;
|
|
25
|
-
--pvt-text-text-overflow: ellipsis;
|
|
26
|
-
|
|
27
|
-
display: flex;
|
|
28
|
-
column-gap: var(--rls-sizing-x4);
|
|
29
|
-
align-items: center;
|
|
30
|
-
|
|
31
|
-
&--disabled {
|
|
32
|
-
--pvt-text-opacity: 0.5;
|
|
33
|
-
|
|
34
|
-
pointer-events: none;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&--reverse {
|
|
38
|
-
flex-direction: row-reverse;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&--extended {
|
|
42
|
-
--pvt-text-text-overflow: initial;
|
|
43
|
-
--pvt-text-overflow: initial;
|
|
44
|
-
--pvt-text-white-space: initial;
|
|
45
|
-
--pvt-text-height: auto;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
&__component {
|
|
49
|
-
width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
|
|
50
|
-
flex: 0 0 auto;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&__text {
|
|
54
|
-
flex: 1 1 auto;
|
|
55
|
-
font-size: var(--pvt-label-font-size);
|
|
56
|
-
font-weight: var(--rls-font-weight-medium);
|
|
57
|
-
letter-spacing: var(--pvt-label-letter-spacing);
|
|
58
|
-
line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
|
|
59
|
-
color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
|
|
60
|
-
user-select: none;
|
|
61
|
-
opacity: var(--pvt-text-opacity);
|
|
62
|
-
overflow: hidden;
|
|
63
|
-
|
|
64
|
-
& > p {
|
|
65
|
-
height: initial;
|
|
66
|
-
overflow: initial;
|
|
67
|
-
text-overflow: initial;
|
|
68
|
-
white-space: initial;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
1
|
+
// Rolster Technology SwitchLabel Component
|
|
2
|
+
// v1.0.12
|
|
3
|
+
// @license MIT
|
|
4
|
+
// Author: Rolster Developers
|
|
5
|
+
// Created: 20/Mar/2018
|
|
6
|
+
// Updated: 03/Feb/2026
|
|
7
|
+
|
|
8
|
+
.rls-label-switch {
|
|
9
|
+
--rlc-switch-cursor: pointer;
|
|
10
|
+
--rlc-ballot-padding: 0rem;
|
|
11
|
+
|
|
12
|
+
--pvt-label-font-size: var(
|
|
13
|
+
--rlc-label-switch-font-size,
|
|
14
|
+
var(--rls-label-font-size)
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
--pvt-label-letter-spacing: var(
|
|
18
|
+
--rlc-label-switch-letter-spacing,
|
|
19
|
+
var(--rls-label-letter-spacing)
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
--pvt-text-opacity: 1;
|
|
23
|
+
--pvt-text-overflow: hidden;
|
|
24
|
+
--pvt-text-white-space: nowrap;
|
|
25
|
+
--pvt-text-text-overflow: ellipsis;
|
|
26
|
+
|
|
27
|
+
display: flex;
|
|
28
|
+
column-gap: var(--rls-sizing-x4);
|
|
29
|
+
align-items: center;
|
|
30
|
+
|
|
31
|
+
&--disabled {
|
|
32
|
+
--pvt-text-opacity: 0.5;
|
|
33
|
+
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&--reverse {
|
|
38
|
+
flex-direction: row-reverse;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--extended {
|
|
42
|
+
--pvt-text-text-overflow: initial;
|
|
43
|
+
--pvt-text-overflow: initial;
|
|
44
|
+
--pvt-text-white-space: initial;
|
|
45
|
+
--pvt-text-height: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&__component {
|
|
49
|
+
width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
|
|
50
|
+
flex: 0 0 auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&__text {
|
|
54
|
+
flex: 1 1 auto;
|
|
55
|
+
font-size: var(--pvt-label-font-size);
|
|
56
|
+
font-weight: var(--rls-font-weight-medium);
|
|
57
|
+
letter-spacing: var(--pvt-label-letter-spacing);
|
|
58
|
+
line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
|
|
59
|
+
color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
|
|
60
|
+
user-select: none;
|
|
61
|
+
opacity: var(--pvt-text-opacity);
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
|
|
64
|
+
& > p {
|
|
65
|
+
height: initial;
|
|
66
|
+
overflow: initial;
|
|
67
|
+
text-overflow: initial;
|
|
68
|
+
white-space: initial;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
// Rolster Technology MessageEmpty Component
|
|
2
|
-
// v1.0.
|
|
2
|
+
// v1.0.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 02/May/2026
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 10/May/2026
|
|
7
7
|
|
|
8
8
|
.rls-message-empty {
|
|
9
9
|
--pvt-logo-size: var(--rlc-message-empty-logo-size, var(--rls-sizing-x32));
|
|
10
|
-
--pvt-logo-background: var(--rls-app-color-100);
|
|
11
10
|
--pvt-logo-color: var(--rls-app-color-600);
|
|
12
11
|
--pvt-title-font-color: var(--rls-app-color-900);
|
|
13
12
|
--pvt-content-font-color: var(--rls-app-color-500);
|
|
@@ -17,37 +16,36 @@
|
|
|
17
16
|
width: 100%;
|
|
18
17
|
flex-direction: column;
|
|
19
18
|
align-items: var(--rlc-message-empty-align-items, center);
|
|
20
|
-
row-gap: var(--rls-sizing-
|
|
19
|
+
row-gap: var(--rls-sizing-x8);
|
|
21
20
|
padding: var(--rlc-message-empty-padding, var(--rls-sizing-x8));
|
|
22
21
|
box-sizing: border-box;
|
|
23
|
-
text-align: var(--rlc-message-empty-text-align, center);
|
|
24
22
|
|
|
25
23
|
&__logo {
|
|
26
24
|
--rlc-icon-color: var(--pvt-logo-color);
|
|
27
|
-
--rlc-icon-font-size:
|
|
25
|
+
--rlc-icon-font-size: var(--pvt-logo-size);
|
|
28
26
|
|
|
29
27
|
display: flex;
|
|
30
|
-
width: var(--pvt-logo-size);
|
|
31
|
-
height: var(--pvt-logo-size);
|
|
32
28
|
align-items: center;
|
|
33
29
|
justify-content: center;
|
|
34
|
-
border-radius: 50%;
|
|
35
|
-
background: var(--pvt-logo-background);
|
|
36
|
-
overflow: hidden;
|
|
37
|
-
box-sizing: border-box;
|
|
38
30
|
|
|
39
31
|
&--emoji {
|
|
40
|
-
font-size:
|
|
41
|
-
line-height: 1;
|
|
32
|
+
font-size: var(--pvt-logo-size);
|
|
42
33
|
}
|
|
43
34
|
|
|
44
35
|
&--image {
|
|
45
|
-
width:
|
|
46
|
-
height:
|
|
36
|
+
width: var(--pvt-logo-size);
|
|
37
|
+
height: var(--pvt-logo-size);
|
|
47
38
|
object-fit: contain;
|
|
48
39
|
}
|
|
49
40
|
}
|
|
50
41
|
|
|
42
|
+
&__body {
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
align-items: var(--rlc-message-empty-align-items, center);
|
|
46
|
+
row-gap: var(--rls-sizing-x4);
|
|
47
|
+
}
|
|
48
|
+
|
|
51
49
|
&__title {
|
|
52
50
|
width: 100%;
|
|
53
51
|
color: var(--pvt-title-font-color);
|
|
@@ -58,6 +56,7 @@
|
|
|
58
56
|
font-weight: var(--rls-font-weight-semibold);
|
|
59
57
|
letter-spacing: var(--rls-subtitle-letter-spacing);
|
|
60
58
|
line-height: var(--rls-subtitle-line-height);
|
|
59
|
+
text-align: var(--rlc-message-empty-title-align, center);
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
&__content {
|
|
@@ -69,10 +68,10 @@
|
|
|
69
68
|
);
|
|
70
69
|
letter-spacing: var(--rls-paragraph-letter-spacing);
|
|
71
70
|
line-height: var(--rls-paragraph-line-height);
|
|
71
|
+
text-align: var(--rlc-message-empty-content-align, center);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&[rls-theme] {
|
|
75
|
-
--pvt-logo-background: var(--rls-theme-color-100);
|
|
76
75
|
--pvt-logo-color: var(--rls-theme-color-600);
|
|
77
76
|
--pvt-title-font-color: var(--rls-theme-color-900);
|
|
78
77
|
--pvt-content-font-color: var(--rls-theme-color-700);
|