qc-trousse-sdg 1.4.3 → 1.4.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/README.md +3 -0
- package/dist/css/qc-sdg-no-grid.min.css +1 -1
- package/dist/css/qc-sdg.min.css +1 -1
- package/package.json +1 -1
- package/public/css/qc-sdg-no-grid.css +35 -23
- package/public/css/qc-sdg.css +35 -23
- package/public/js/qc-doc-sdg.js +1348 -414
- package/public/js/qc-sdg.js +1796 -758
- package/src/sdg/components/Button/_button.scss +35 -12
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
@use "qc-sdg-lib" as *;
|
|
2
2
|
@use "sass:map";
|
|
3
3
|
|
|
4
|
+
%button-disabled {
|
|
5
|
+
cursor: not-allowed;
|
|
6
|
+
box-shadow: none;
|
|
7
|
+
opacity: 1;
|
|
8
|
+
}
|
|
9
|
+
|
|
4
10
|
.qc-button {
|
|
5
11
|
font-family: token-value(font family, content);
|
|
6
12
|
font-size: token-value(font size, md);
|
|
@@ -66,6 +72,14 @@
|
|
|
66
72
|
background-color: token-value(color blue, regular_light);
|
|
67
73
|
border-color: token-value(color blue, regular_light);
|
|
68
74
|
}
|
|
75
|
+
|
|
76
|
+
&:disabled,
|
|
77
|
+
&.qc-disabled {
|
|
78
|
+
background-color: token-value(color grey, light);
|
|
79
|
+
border-color: token-value(color grey, light);
|
|
80
|
+
color: token-value(color white);
|
|
81
|
+
@extend %button-disabled;
|
|
82
|
+
}
|
|
69
83
|
}
|
|
70
84
|
|
|
71
85
|
&.qc-secondary {
|
|
@@ -90,6 +104,13 @@
|
|
|
90
104
|
&.qc-active {
|
|
91
105
|
background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.08);
|
|
92
106
|
}
|
|
107
|
+
|
|
108
|
+
&:disabled,
|
|
109
|
+
&.qc-disabled {
|
|
110
|
+
border-color: token-value(color grey, regular);
|
|
111
|
+
color: token-value(color grey regular);
|
|
112
|
+
@extend %button-disabled;
|
|
113
|
+
}
|
|
93
114
|
}
|
|
94
115
|
|
|
95
116
|
&.qc-tertiary {
|
|
@@ -114,6 +135,12 @@
|
|
|
114
135
|
&.qc-active {
|
|
115
136
|
background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.16);
|
|
116
137
|
}
|
|
138
|
+
|
|
139
|
+
&:disabled,
|
|
140
|
+
&.qc-disabled {
|
|
141
|
+
color: token-value(color grey regular);
|
|
142
|
+
@extend %button-disabled;
|
|
143
|
+
}
|
|
117
144
|
}
|
|
118
145
|
|
|
119
146
|
&.qc-danger {
|
|
@@ -137,16 +164,14 @@
|
|
|
137
164
|
&.qc-active {
|
|
138
165
|
background-color: token-value(color red regular_light);
|
|
139
166
|
}
|
|
140
|
-
}
|
|
141
167
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
opacity: 1;
|
|
168
|
+
&:disabled,
|
|
169
|
+
&.qc-disabled {
|
|
170
|
+
background-color: token-value(color grey, light);
|
|
171
|
+
border-color: token-value(color grey, light);
|
|
172
|
+
color: token-value(color white);
|
|
173
|
+
@extend %button-disabled;
|
|
174
|
+
}
|
|
150
175
|
}
|
|
151
176
|
|
|
152
177
|
.qc-icon {
|
|
@@ -190,9 +215,7 @@
|
|
|
190
215
|
&:disabled,
|
|
191
216
|
&.qc-disabled {
|
|
192
217
|
color: token-value(color, grey regular);
|
|
193
|
-
|
|
194
|
-
box-shadow: none;
|
|
195
|
-
opacity: 1;
|
|
218
|
+
@extend %button-disabled;
|
|
196
219
|
}
|
|
197
220
|
}
|
|
198
221
|
|