@ulu/frontend 0.1.0-beta.104 → 0.1.0-beta.105
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/CHANGELOG.md +7 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/docs-dev/changelog/index.html +20 -0
- package/docs-dev/demos/breadcrumb/index.html +3 -3
- package/docs-dev/demos/card/index.html +16 -16
- package/docs-dev/demos/data-table/index.html +100 -100
- package/docs-dev/demos/menu-stack/index.html +53 -0
- package/docs-dev/sass/core/breakpoint/index.html +8 -8
- package/package.json +1 -1
- package/scss/_breakpoint.scss +4 -4
- package/scss/components/_menu-stack.scss +30 -10
|
@@ -75,7 +75,7 @@ $config: (
|
|
|
75
75
|
"label-line-height" : true,
|
|
76
76
|
"link-separated-margin" : false,
|
|
77
77
|
"link-separated-rule-style" : false,
|
|
78
|
-
"link-active-selectors" : (".is-active",
|
|
78
|
+
"link-active-selectors" : (".is-active",),
|
|
79
79
|
"link-background-color" : transparent,
|
|
80
80
|
"link-background-color-active" : rgb(219, 219, 219),
|
|
81
81
|
"link-background-color-hover" : rgb(240, 240, 240),
|
|
@@ -181,20 +181,27 @@ $config: (
|
|
|
181
181
|
color: color.get(get("link-color-hover"));
|
|
182
182
|
background-color: color.get(get("link-background-color-hover"));
|
|
183
183
|
}
|
|
184
|
-
@each $active-selector in get("link-active-selectors") {
|
|
185
|
-
&#{ $active-selector } {
|
|
186
|
-
&,
|
|
187
|
-
&:hover {
|
|
188
|
-
color: color.get(get("link-color-active"));
|
|
189
|
-
background-color: color.get(get("link-background-color-active"));
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
184
|
}
|
|
194
185
|
#{ $prefix }__selectable {
|
|
195
186
|
padding: 0;
|
|
196
187
|
position: relative;
|
|
197
188
|
}
|
|
189
|
+
|
|
190
|
+
// Combine all active selectors using sass:selector functions
|
|
191
|
+
$base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;
|
|
192
|
+
$active-from-config: get("link-active-selectors");
|
|
193
|
+
$traditional-active: sassSelector.append($base-selectors, $active-from-config);
|
|
194
|
+
|
|
195
|
+
$checked-active: sassSelector.parse("#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)");
|
|
196
|
+
|
|
197
|
+
#{ $traditional-active, $checked-active },
|
|
198
|
+
#{ $prefix }__link[aria-current="page"] {
|
|
199
|
+
&,
|
|
200
|
+
&:hover {
|
|
201
|
+
color: color.get(get("link-color-active"));
|
|
202
|
+
background-color: color.get(get("link-background-color-active"));
|
|
203
|
+
}
|
|
204
|
+
}
|
|
198
205
|
#{ $prefix }__selectable [type="checkbox"],
|
|
199
206
|
#{ $prefix }__selectable [type="radio"],
|
|
200
207
|
#{ $prefix }__selectable-input {
|
|
@@ -258,4 +265,17 @@ $config: (
|
|
|
258
265
|
padding: get("compact-link-padding-y") get("compact-link-padding-x");
|
|
259
266
|
}
|
|
260
267
|
}
|
|
268
|
+
|
|
269
|
+
#{ $prefix }--hide-inputs {
|
|
270
|
+
#{ $prefix }__selectable-input,
|
|
271
|
+
#{ $prefix }__selectable [type="checkbox"],
|
|
272
|
+
#{ $prefix }__selectable [type="radio"] {
|
|
273
|
+
@include element.hidden-visually();
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
#{ $prefix }__selectable label,
|
|
277
|
+
#{ $prefix }__selectable-label {
|
|
278
|
+
padding-left: get("link-padding-x");
|
|
279
|
+
}
|
|
280
|
+
}
|
|
261
281
|
}
|