@react5/ui 1.0.22 → 1.0.23
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/package.json +1 -1
- package/packages/lib/dist/esm/index.esm.css +8 -2
- package/packages/lib/dist/esm/index.esm.scss +11 -2
- package/packages/lib/dist/index.css +8 -2
- package/packages/lib/dist/index.scss +11 -2
- package/packages/lib/src/components/Button/Button.scss +8 -2
- package/packages/lib/src/styles/1-color-vars.scss +4 -0
package/package.json
CHANGED
|
@@ -72,7 +72,13 @@
|
|
|
72
72
|
transition: color 0.3s ease;
|
|
73
73
|
cursor: pointer;
|
|
74
74
|
}
|
|
75
|
-
.r5ui-button:
|
|
75
|
+
.r5ui-button:disabled {
|
|
76
|
+
background-color: var(--disabled_bg_color, #e0e0e0);
|
|
77
|
+
color: var(--disabled_text_color, #b0b0b0);
|
|
78
|
+
border-color: var(--disabled_border_color, #d0d0d0);
|
|
79
|
+
cursor: not-allowed;
|
|
80
|
+
}
|
|
81
|
+
.r5ui-button:not(:disabled):hover {
|
|
76
82
|
color: var(--primary_text_color_highlight, #F06060);
|
|
77
83
|
}
|
|
78
84
|
.r5ui-button__primary {
|
|
@@ -93,7 +99,7 @@
|
|
|
93
99
|
font: inherit;
|
|
94
100
|
cursor: pointer;
|
|
95
101
|
}
|
|
96
|
-
.r5ui-button__link:hover {
|
|
102
|
+
.r5ui-button__link:not(:disabled):hover {
|
|
97
103
|
color: var(--link_color_highlight, #26274c);
|
|
98
104
|
text-decoration: underline;
|
|
99
105
|
}
|
|
@@ -47,6 +47,9 @@ $error_validation_color: var(--error_validation_color, #b93214);
|
|
|
47
47
|
$border_radius: var(--border_radius, 5px);
|
|
48
48
|
$border_size: var(--border_size, 1px);
|
|
49
49
|
|
|
50
|
+
$disabled_bg_color: var(--disabled_bg_color, #e0e0e0);
|
|
51
|
+
$disabled_text_color: var(--disabled_text_color, #b0b0b0);
|
|
52
|
+
$disabled_border_color: var(--disabled_border_color, #d0d0d0);
|
|
50
53
|
$primary_font: var(--primary_font, 'Nunito', sans-serif);
|
|
51
54
|
$title_font: var(--title_font, 'Poppins', serif);
|
|
52
55
|
|
|
@@ -132,8 +135,14 @@ $title_font: var(--title_font, 'Poppins', serif);
|
|
|
132
135
|
text-align: center;
|
|
133
136
|
transition: color 0.3s ease;
|
|
134
137
|
cursor: pointer;
|
|
138
|
+
&:disabled {
|
|
139
|
+
background-color: $disabled_bg_color;
|
|
140
|
+
color: $disabled_text_color;
|
|
141
|
+
border-color: $disabled_border_color;
|
|
142
|
+
cursor: not-allowed;
|
|
143
|
+
}
|
|
135
144
|
|
|
136
|
-
&:hover {
|
|
145
|
+
&:not(:disabled):hover {
|
|
137
146
|
color: $primary_text_color_highlight;
|
|
138
147
|
}
|
|
139
148
|
|
|
@@ -155,7 +164,7 @@ $title_font: var(--title_font, 'Poppins', serif);
|
|
|
155
164
|
font: inherit;
|
|
156
165
|
cursor: pointer;
|
|
157
166
|
//text-decoration: underline;
|
|
158
|
-
&:hover {
|
|
167
|
+
&:not(:disabled):hover {
|
|
159
168
|
color: $link_color_highlight;
|
|
160
169
|
text-decoration: underline;
|
|
161
170
|
}
|
|
@@ -72,7 +72,13 @@
|
|
|
72
72
|
transition: color 0.3s ease;
|
|
73
73
|
cursor: pointer;
|
|
74
74
|
}
|
|
75
|
-
.r5ui-button:
|
|
75
|
+
.r5ui-button:disabled {
|
|
76
|
+
background-color: var(--disabled_bg_color, #e0e0e0);
|
|
77
|
+
color: var(--disabled_text_color, #b0b0b0);
|
|
78
|
+
border-color: var(--disabled_border_color, #d0d0d0);
|
|
79
|
+
cursor: not-allowed;
|
|
80
|
+
}
|
|
81
|
+
.r5ui-button:not(:disabled):hover {
|
|
76
82
|
color: var(--primary_text_color_highlight, #F06060);
|
|
77
83
|
}
|
|
78
84
|
.r5ui-button__primary {
|
|
@@ -93,7 +99,7 @@
|
|
|
93
99
|
font: inherit;
|
|
94
100
|
cursor: pointer;
|
|
95
101
|
}
|
|
96
|
-
.r5ui-button__link:hover {
|
|
102
|
+
.r5ui-button__link:not(:disabled):hover {
|
|
97
103
|
color: var(--link_color_highlight, #26274c);
|
|
98
104
|
text-decoration: underline;
|
|
99
105
|
}
|
|
@@ -47,6 +47,9 @@ $error_validation_color: var(--error_validation_color, #b93214);
|
|
|
47
47
|
$border_radius: var(--border_radius, 5px);
|
|
48
48
|
$border_size: var(--border_size, 1px);
|
|
49
49
|
|
|
50
|
+
$disabled_bg_color: var(--disabled_bg_color, #e0e0e0);
|
|
51
|
+
$disabled_text_color: var(--disabled_text_color, #b0b0b0);
|
|
52
|
+
$disabled_border_color: var(--disabled_border_color, #d0d0d0);
|
|
50
53
|
$primary_font: var(--primary_font, 'Nunito', sans-serif);
|
|
51
54
|
$title_font: var(--title_font, 'Poppins', serif);
|
|
52
55
|
|
|
@@ -132,8 +135,14 @@ $title_font: var(--title_font, 'Poppins', serif);
|
|
|
132
135
|
text-align: center;
|
|
133
136
|
transition: color 0.3s ease;
|
|
134
137
|
cursor: pointer;
|
|
138
|
+
&:disabled {
|
|
139
|
+
background-color: $disabled_bg_color;
|
|
140
|
+
color: $disabled_text_color;
|
|
141
|
+
border-color: $disabled_border_color;
|
|
142
|
+
cursor: not-allowed;
|
|
143
|
+
}
|
|
135
144
|
|
|
136
|
-
&:hover {
|
|
145
|
+
&:not(:disabled):hover {
|
|
137
146
|
color: $primary_text_color_highlight;
|
|
138
147
|
}
|
|
139
148
|
|
|
@@ -155,7 +164,7 @@ $title_font: var(--title_font, 'Poppins', serif);
|
|
|
155
164
|
font: inherit;
|
|
156
165
|
cursor: pointer;
|
|
157
166
|
//text-decoration: underline;
|
|
158
|
-
&:hover {
|
|
167
|
+
&:not(:disabled):hover {
|
|
159
168
|
color: $link_color_highlight;
|
|
160
169
|
text-decoration: underline;
|
|
161
170
|
}
|
|
@@ -12,8 +12,14 @@
|
|
|
12
12
|
text-align: center;
|
|
13
13
|
transition: color 0.3s ease;
|
|
14
14
|
cursor: pointer;
|
|
15
|
+
&:disabled {
|
|
16
|
+
background-color: $disabled_bg_color;
|
|
17
|
+
color: $disabled_text_color;
|
|
18
|
+
border-color: $disabled_border_color;
|
|
19
|
+
cursor: not-allowed;
|
|
20
|
+
}
|
|
15
21
|
|
|
16
|
-
&:hover {
|
|
22
|
+
&:not(:disabled):hover {
|
|
17
23
|
color: $primary_text_color_highlight;
|
|
18
24
|
}
|
|
19
25
|
|
|
@@ -35,7 +41,7 @@
|
|
|
35
41
|
font: inherit;
|
|
36
42
|
cursor: pointer;
|
|
37
43
|
//text-decoration: underline;
|
|
38
|
-
&:hover {
|
|
44
|
+
&:not(:disabled):hover {
|
|
39
45
|
color: $link_color_highlight;
|
|
40
46
|
text-decoration: underline;
|
|
41
47
|
}
|
|
@@ -46,3 +46,7 @@ $error_validation_color: var(--error_validation_color, #b93214);
|
|
|
46
46
|
// Border Properties
|
|
47
47
|
$border_radius: var(--border_radius, 5px);
|
|
48
48
|
$border_size: var(--border_size, 1px);
|
|
49
|
+
|
|
50
|
+
$disabled_bg_color: var(--disabled_bg_color, #e0e0e0);
|
|
51
|
+
$disabled_text_color: var(--disabled_text_color, #b0b0b0);
|
|
52
|
+
$disabled_border_color: var(--disabled_border_color, #d0d0d0);
|